fix fayda

apps/edr-freight-web/backoffice/src/components/fleet/FleetFormDialog.tsx

@@ -1,6 +1,8 @@
 import { useEffect, useMemo, useState } from "react";
-import { Loader2, Calendar } from "lucide-react";
+import { Loader2, Calendar, ShieldCheck } from "lucide-react";
 import {
+  Alert,
+  Badge,
   Button,
   Group,
   Modal,
@@ -20,6 +22,10 @@ import {
   type FleetFormFieldDef,
 } from "@/pages/fleet/config/resources";
 import type { FleetRecord } from "@/services/fleet/fleet.service";
+import {
+  verifaydaService,
+  type FaydaCallbackMessage,
+} from "@/services/verifayda.service";
 
 export interface FleetFormDialogProps {
   open: boolean;
@@ -31,6 +37,12 @@ export interface FleetFormDialogProps {
   isSubmitting: boolean;
   selectOptionsLoading?: boolean;
   onSubmit: (values: Record<string, unknown>) => void;
+  /**
+   * Show a "Verify with Fayda" step: opens the eSignet popup and prefills
+   * firstName/lastName/email/phoneNumber/dateOfBirth from the verified
+   * identity, stamping faydaVerified + faydaSub on the payload.
+   */
+  verifyWithFayda?: boolean;
 }
 
 const buildInitialValues = (
@@ -72,9 +84,12 @@ const FleetFormDialog = ({
   isSubmitting,
   selectOptionsLoading,
   onSubmit,
+  verifyWithFayda,
 }: FleetFormDialogProps) => {
   const [values, setValues] = useState<Record<string, unknown>>({});
   const [errors, setErrors] = useState<Record<string, string>>({});
+  const [faydaLoading, setFaydaLoading] = useState(false);
+  const [faydaError, setFaydaError] = useState<string | null>(null);
 
   // Seed the form ONLY when the dialog opens or the edited record changes — NOT
   // when `fields`/`emptyValues` get new object refs (they're rebuilt whenever the
@@ -87,10 +102,85 @@ const FleetFormDialog = ({
     if (open) {
       setValues(buildInitialValues(fields, emptyValues, initialRecord));
       setErrors({});
+      setFaydaError(null);
+      setFaydaLoading(false);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [open, recordId]);
 
+  // Receive the ?code&state relayed by the /callback popup, exchange it for
+  // the verified identity, and prefill the matching form fields.
+  useEffect(() => {
+    if (!open || !verifyWithFayda) return;
+    const onMessage = async (event: MessageEvent<FaydaCallbackMessage>) => {
+      if (event.origin !== window.location.origin) return;
+      if (event.data?.type !== "fayda-callback") return;
+
+      if (event.data.error) {
+        setFaydaLoading(false);
+        setFaydaError(event.data.errorDescription ?? event.data.error);
+        return;
+      }
+      if (!event.data.code || !event.data.state) return;
+
+      try {
+        const result = await verifaydaService.complete(event.data.code, event.data.state);
+        if (!result.verified) {
+          setFaydaError("Identity could not be verified");
+          return;
+        }
+        const nameParts = (result.fullName ?? "").trim().split(/\s+/).filter(Boolean);
+        const [firstName, ...rest] = nameParts;
+        setValues((current) => ({
+          ...current,
+          ...(firstName ? { firstName } : {}),
+          ...(rest.length ? { lastName: rest.join(" ") } : {}),
+          ...(result.email ? { email: result.email } : {}),
+          ...(result.phoneNumber ? { phoneNumber: result.phoneNumber } : {}),
+          ...(result.birthdate ? { dateOfBirth: result.birthdate } : {}),
+          faydaVerified: true,
+          ...(result.iamUserId ? { faydaSub: result.iamUserId } : {}),
+        }));
+        setFaydaError(null);
+      } catch (err) {
+        const message =
+          (err as { response?: { data?: { message?: string } } })?.response?.data?.message ??
+          (err instanceof Error ? err.message : "Verification failed");
+        setFaydaError(message);
+      } finally {
+        setFaydaLoading(false);
+      }
+    };
+    window.addEventListener("message", onMessage);
+    return () => window.removeEventListener("message", onMessage);
+  }, [open, verifyWithFayda]);
+
+  const handleFaydaVerify = async () => {
+    setFaydaError(null);
+    setFaydaLoading(true);
+    try {
+      const { authorizationUrl } = await verifaydaService.start();
+      const popup = window.open(
+        authorizationUrl,
+        "fayda-verify",
+        "width=480,height=760,noopener=no",
+      );
+      if (!popup) {
+        setFaydaLoading(false);
+        setFaydaError("Pop-up blocked — allow pop-ups for this site and retry.");
+      }
+      // Loading stays on until the popup posts back; reopening the dialog resets it.
+    } catch (err) {
+      setFaydaLoading(false);
+      const message =
+        (err as { response?: { data?: { message?: string } } })?.response?.data?.message ??
+        (err instanceof Error ? err.message : "Could not start verification");
+      setFaydaError(message);
+    }
+  };
+
+  const faydaVerified = values.faydaVerified === true;
+
   const shortFields = useMemo(
     () => fields.filter((f) => f.type !== "textarea"),
     [fields],
@@ -333,6 +423,39 @@ const FleetFormDialog = ({
       centered
     >
       <Stack gap="md">
+        {verifyWithFayda && (
+          <Group justify="space-between" wrap="nowrap">
+            {faydaVerified ? (
+              <Badge
+                color="green"
+                variant="light"
+                size="lg"
+                leftSection={<ShieldCheck size={14} />}
+              >
+                Identity verified with Fayda
+              </Badge>
+            ) : (
+              <Text size="sm" c="dimmed">
+                Verify the driver's identity with Fayda to prefill their details.
+              </Text>
+            )}
+            <Button
+              variant={faydaVerified ? "default" : "light"}
+              color="edr-green"
+              size="xs"
+              leftSection={<ShieldCheck size={14} />}
+              loading={faydaLoading}
+              onClick={handleFaydaVerify}
+            >
+              {faydaVerified ? "Re-verify" : "Verify with Fayda"}
+            </Button>
+          </Group>
+        )}
+        {verifyWithFayda && faydaError && (
+          <Alert color="red" variant="light">
+            {faydaError}
+          </Alert>
+        )}
         <SimpleGrid cols={{ base: 1, sm: 2 }} spacing="md">
           {shortFields.map(renderField)}
         </SimpleGrid>

apps/edr-freight-web/backoffice/src/components/fleet/fleetFormat.tsx

@@ -4,7 +4,7 @@ import { Badge, Text } from "@mantine/core";
 import type { ColumnFormat } from "@/pages/ruleEngine/config/resources";
 import { formatCell as formatRuleEngineCell } from "@/components/ruleEngine/ruleEngineFormat";
 
-export type FleetColumnFormat = ColumnFormat | "statusBadge";
+export type FleetColumnFormat = ColumnFormat | "statusBadge" | "verifiedBadge";
 
 const optionLabelMap = new Map<string, Map<string, string>>();
 
@@ -20,6 +20,16 @@ export const formatFleetCell = (
   format?: FleetColumnFormat,
   accessorKey?: string,
 ): ReactNode => {
+  if (format === "verifiedBadge") {
+    return value === true ? (
+      <Badge variant="light" color="green" size="sm" radius="md">
+        Verified
+      </Badge>
+    ) : (
+      <Text size="sm" c="dimmed">—</Text>
+    );
+  }
+
   if (format === "statusBadge") {
     const status = value == null || value === "" ? "—" : String(value);
     const getStatusColor = (st: string): string => {