Merge pull request #39 from WildCodeSchool/tv

Tv

Author: ocebert31

package-lock.json

@@ -6,6 +6,7 @@
   "scripts": {
     "dev": "vite",
     "build": "tsc -b && vite build",
+    "test": "vitest",
     "lint": "eslint .",
     "preview": "vite preview",
     "start:docker": "docker-compose pull && docker-compose up"
@@ -16,13 +17,15 @@
     "@graphql-codegen/typescript-operations": "^4.6.0",
     "@graphql-codegen/typescript-react-apollo": "^4.3.2",
     "@hookform/resolvers": "^5.2.1",
-    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-alert-dialog": "^1.1.15",
     "@radix-ui/react-checkbox": "^1.3.3",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-label": "^2.1.7",
     "@radix-ui/react-popover": "^1.1.15",
     "@radix-ui/react-scroll-area": "^1.2.10",
     "@radix-ui/react-slot": "^1.2.3",
     "@radix-ui/react-tabs": "^1.1.12",
+    "@radix-ui/react-toast": "^1.2.15",
     "@radix-ui/react-tooltip": "^1.2.7",
     "@tailwindcss/vite": "^4.1.11",
     "@tanstack/react-table": "^8.21.3",
@@ -32,34 +35,41 @@
     "graphql": "^16.10.0",
     "lucide-react": "^0.534.0",
     "qrcode.react": "^4.2.0",
-    "react": "^19.0.0",
+    "react": "^19.1.1",
     "react-dom": "^19.0.0",
     "react-hook-form": "^7.62.0",
     "react-icons": "^5.5.0",
     "react-qr-code": "^2.0.18",
     "react-router": "^7.7.1",
     "react-router-dom": "^7.5.0",
+    "sonner": "^2.0.7",
     "tailwind-merge": "^3.3.1",
     "yup": "^1.7.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.22.0",
     "@graphql-codegen/cli": "^5.0.5",
+    "@testing-library/jest-dom": "^6.8.0",
+    "@testing-library/react": "^16.3.0",
+    "@testing-library/user-event": "^14.6.1",
     "@types/node": "^24.1.0",
-    "@types/react": "^19.0.10",
+    "@types/react": "^19.1.16",
     "@types/react-dom": "^19.0.4",
     "@types/react-router-dom": "^5.3.3",
+    "@types/testing-library__jest-dom": "^5.14.9",
     "@vitejs/plugin-react": "^4.3.4",
     "autoprefixer": "^10.4.21",
     "eslint": "^9.22.0",
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react-refresh": "^0.4.19",
     "globals": "^16.0.0",
+    "jsdom": "^26.1.0",
     "postcss": "^8.5.3",
     "tailwindcss": "^4.1.11",
     "tw-animate-css": "^1.3.6",
     "typescript": "~5.7.2",
     "typescript-eslint": "^8.26.1",
-    "vite": "^6.3.0"
+    "vite": "^6.3.0",
+    "vitest": "^3.2.4"
   }
 }

package.json

@@ -1,22 +1,23 @@
 import company from "../../assets/company.png";
-import logoWhite from "../../assets/nextone-white.png"
+import logoWhite from "../../assets/nextone-white.png";
 
 function CompanyIllustration() {
   return (
-    <div className="hidden p-4 md:flex w-full md:w-1/2 bg-white items-start justify-center mt-4 md:mt-[10px]">
-      <div className="relative max-h-[90%] w-full md:w-auto rounded-lg overflow-hidden">
-        <img src={company} alt="image-entreprise" className="w-full h-auto object-cover" style={{ aspectRatio: "4 / 5" }}/>
+    <div className="hidden md:flex w-full md:w-1/2 h-screen p-8">
+      <div className="relative w-full h-full rounded-lg overflow-hidden">
+        <img src={company} alt="image-entreprise" className="w-full h-full object-cover"/>
         <span className="absolute bottom-2 right-2 px-2 py-1 rounded flex items-center gap-2 text-white">
-          <img src={logoWhite} alt="logo NextOne" className="w-8 h-10 md:w-9 md:h-11" />
-          <div>
+          <img src={logoWhite} alt="logo NextOne" className="w-8 h-10 md:w-9 md:h-11"/>
+          <div className="text-left">
             <p className="text-[8px] md:text-[10px] leading-none">Powered by</p>
-            <p className="font-semibold text-[20px] md:text-[24px] leading-none">NextOne</p>
+            <p className="font-semibold text-[20px] md:text-[24px] leading-none">
+              NextOne
+            </p>
           </div>
         </span>
       </div>
     </div>
   );
 }
 
-
 export default CompanyIllustration;

src/common/.gitkeep

@@ -0,0 +1,40 @@
+import { Button } from "../../components/ui/button";
+
+export type StepControlsProps = {
+  onBack?: () => void;
+  onNext?: () => void;
+  onCancel?: () => void;
+  updateTicket?: () => void;
+};
+
+function NavigationActions({ onBack, onNext, onCancel, updateTicket }: StepControlsProps) {
+  const handleNext = () => {
+    updateTicket?.();
+    onNext?.();
+  };
+
+  const handleBack = () => {
+    updateTicket?.();
+    onBack?.();
+  };
+
+  return (
+    <div className="flex w-full items-center justify-between mt-6">
+      <div className="flex space-x-9">
+        <Button type="button" onClick={handleBack} variant="ghost" className="text-primary text-[17px] p-6">
+          Retour
+        </Button>
+        <Button type="submit" onClick={handleNext} className="text-[17px] p-6">
+          Continuer
+        </Button>
+      </div>
+      {onCancel && (
+        <Button type="button" onClick={onCancel} variant="ghost" className="text-primary text-[17px] p-6">
+          Annuler
+        </Button>
+      )}
+    </div>
+  );
+}
+
+export default NavigationActions;

src/components/terminal/CompanyIllustration.tsx renamed to src/common/terminal/CompanyIllustration.tsx

@@ -1,27 +1,18 @@
 import { StepperProps } from "@/types/terminal";
 import { clsx } from "clsx";
+import steps from "../../utils/constants/steps";
 
-const steps = [
-  { label: "Choix du service" },
-  { label: "Informations personnelles" },
-  { label: "Coordonnées" },
-];
-
-interface StepperWithCancelProps extends StepperProps {
-  onCancel?: () => void;
-}
-
-function Stepper({ currentStep, onCancel }: StepperWithCancelProps) {
+function Stepper({ currentStep }: StepperProps) {
   return (
-    <div className="w-full mb-6">
+    <div className="w-full">
       <div className="flex justify-between items-center mb-3">
         {steps.map((step, i) => {
           const stepNumber = i + 1;
           const isActive = stepNumber === currentStep;
           const isCompleted = stepNumber < currentStep;
           return (
             <div key={step.label} className="flex flex-col items-center">
-              <div className={clsx( "w-8 h-8 rounded-full flex items-center justify-center border-2 z-10",
+              <div data-testid={`step-circle-${stepNumber}`} className={clsx( "w-8 h-8 rounded-full flex items-center justify-center border-2 z-10",
                   { "bg-primary text-white border-primary": isActive || isCompleted,
                     "bg-white text-gray-400 border-gray-300": !isActive && !isCompleted,
                   })}>
@@ -36,15 +27,8 @@ function Stepper({ currentStep, onCancel }: StepperWithCancelProps) {
           )})}
       </div>
       <div className="h-1 bg-gray-300 rounded-full">
-        <div className="h-1 bg-primary rounded-full transition-all duration-300" style={{ width: `${(currentStep / steps.length) * 100}%` }}/>
+        <div className="h-1 bg-primary rounded-full transition-all duration-300" role="progressbar" style={{ width: `${(currentStep / steps.length) * 100}%` }}/>
       </div>
-      {onCancel && (
-        <div className="mt-4 flex justify-start">
-          <button onClick={onCancel} className="px-5 py-2 rounded-full border-2 border-primary text-primary font-semibold hover:bg-primary hover:text-white transition-colors duration-300 shadow-sm">
-            Annuler
-          </button>
-        </div>
-      )}
     </div>
   );
 }

src/common/terminal/NavigationActions.tsx

@@ -5,7 +5,7 @@ import { MdRoomService } from "react-icons/md";
 import { IoPerson } from "react-icons/io5";
 import { LuLayoutDashboard } from "react-icons/lu";
 import { IoIosSettings } from "react-icons/io";
-import { useAuth } from "@/context/AuthContext";
+import { useAuth } from "../../context/AuthContext";
 
 export type DashboardMenuItem = {
   name: string;