diff --git a/apps/edr-freight-web/portal/src/components/FaydaVerifyPanel.tsx b/apps/edr-freight-web/portal/src/components/FaydaVerifyPanel.tsx index 236f8b47a..b07d7352c 100644 --- a/apps/edr-freight-web/portal/src/components/FaydaVerifyPanel.tsx +++ b/apps/edr-freight-web/portal/src/components/FaydaVerifyPanel.tsx @@ -1,15 +1,23 @@ -import { useEffect, useRef, useState } from "react"; +import { useEffect, useRef, useState, type ReactNode } from "react"; import { Alert, + Avatar, Badge, Button, Card, Group, - SimpleGrid, Stack, Text, } from "@mantine/core"; -import { BadgeCheck, Clock, ShieldCheck, XCircle } from "lucide-react"; +import { + BadgeCheck, + Clock, + Mail, + MapPin, + Phone, + ShieldCheck, + XCircle, +} from "lucide-react"; import { verifaydaService, @@ -42,10 +50,12 @@ interface FaydaVerifyPanelProps { pendingReview?: boolean; } -function formatDate(iso: string | null): string { - if (!iso) return ""; - const d = new Date(iso); - return Number.isNaN(d.getTime()) ? "" : d.toLocaleDateString(); +function getInitials(name: string | null): string { + if (!name) return "?"; + const parts = name.trim().split(/\s+/); + const first = parts[0]?.[0] ?? ""; + const last = parts.length > 1 ? (parts[parts.length - 1]?.[0] ?? "") : ""; + return (first + last).toUpperCase(); } /** @@ -172,7 +182,7 @@ export default function FaydaVerifyPanel({ - {title} identity + {title} {verified ? ( - - - - - - + + + {getInitials(state.name)} + + + + {state.name} + + + } value={state.phone} /> + } value={state.email} /> + + } value={state.address} /> + + )} {error && ( @@ -240,22 +258,16 @@ export default function FaydaVerifyPanel({ ); } -function VerifiedField({ - label, - value, -}: { - label: string; - value: string | null; -}) { +function DataRow({ icon, value }: { icon: ReactNode; value: string | null }) { if (!value) return null; return ( - - - {label} - - + + + {icon} + + {value} - + ); } diff --git a/apps/edr-freight-web/portal/src/components/onboarding/ETradeInfo.tsx b/apps/edr-freight-web/portal/src/components/onboarding/ETradeInfo.tsx index 082331c7b..2ddeb2e2e 100644 --- a/apps/edr-freight-web/portal/src/components/onboarding/ETradeInfo.tsx +++ b/apps/edr-freight-web/portal/src/components/onboarding/ETradeInfo.tsx @@ -28,31 +28,6 @@ interface ETradeInfoProps { const isValidTin = (tin: string) => tin.length === 10; -/** Plain-text summary of the fetched eTrade record, downloaded client-side (eTrade returns data, not a document). */ -function downloadTinRecord(tin: string, data: CompanyRegistrationData) { - const lines = [ - `TIN: ${tin}`, - `Company name: ${data.companyName}`, - `Licence number: ${data.licenceNumber}`, - `Status: ${data.statusDescription}`, - `Date registered: ${data.dateRegistered}`, - `Renewed from: ${data.renewedFrom}`, - `Renewal date: ${data.renewalDate}`, - `Renewed to: ${data.renewedTo}`, - `Address: ${[data.region, data.zone, data.woreda, data.kebele, data.houseNo].filter(Boolean).join(", ")}`, - `Manager: ${data.managerName}`, - ]; - const blob = new Blob([lines.join("\n")], { type: "text/plain;charset=utf-8" }); - const url = URL.createObjectURL(blob); - const a = document.createElement("a"); - a.href = url; - a.download = `tin-${tin}.txt`; - document.body.appendChild(a); - a.click(); - a.remove(); - setTimeout(() => URL.revokeObjectURL(url), 60_000); -} - export default function ETradeInfo({ tin, register, @@ -86,15 +61,13 @@ export default function ETradeInfo({ }, [tin]); const apiError = - mutation.isError && mutation.error - ? extractApiError(mutation.error) - : null; + mutation.isError && mutation.error ? extractApiError(mutation.error) : null; // A 400 here means eTrade simply has no record for this TIN. const notFound = apiError?.statusCode === 400; const errorMessage = apiError && !notFound ? apiError.message || - "We couldn't reach eTrade to fetch your company information. Please try again." + "We couldn't reach eTrade to fetch your company information. Please try again." : null; const status: ETradeStatus = isLoading @@ -117,18 +90,14 @@ export default function ETradeInfo({ // eslint-disable-next-line react-hooks/exhaustive-deps }, [status]); - const showRetry = isValidTin(tin) && status !== "verified" && status !== "loading"; + const showRetry = + isValidTin(tin) && status !== "verified" && status !== "loading"; return ( - +
- TIN Number (10 digits){" "} - * - - } + aria-label="TIN Number (10 digits), required" placeholder="0012345678" maxLength={10} error={error} @@ -136,6 +105,7 @@ export default function ETradeInfo({ /> {showRetry && ( )} - {status === "verified" && mutation.data && !mutation.data.tinTaken && ( - - )} - +
{notFound && ( onIdentityChange?.()} diff --git a/apps/edr-freight-web/portal/src/pages/accounts/companyProfileForm/ReadOnlyField.tsx b/apps/edr-freight-web/portal/src/pages/accounts/companyProfileForm/ReadOnlyField.tsx index 6465375e7..7b8bae2b9 100644 --- a/apps/edr-freight-web/portal/src/pages/accounts/companyProfileForm/ReadOnlyField.tsx +++ b/apps/edr-freight-web/portal/src/pages/accounts/companyProfileForm/ReadOnlyField.tsx @@ -13,7 +13,7 @@ export function ReadOnlyField({ {label} - + {value && value.trim() ? value : "—"}
diff --git a/apps/edr-freight-web/portal/src/pages/accounts/companyProfileForm/StepSection.tsx b/apps/edr-freight-web/portal/src/pages/accounts/companyProfileForm/StepSection.tsx index be65e9c73..0b0878c99 100644 --- a/apps/edr-freight-web/portal/src/pages/accounts/companyProfileForm/StepSection.tsx +++ b/apps/edr-freight-web/portal/src/pages/accounts/companyProfileForm/StepSection.tsx @@ -1,4 +1,5 @@ import { Badge, Group, Stack, Text } from "@mantine/core"; +import { useMediaQuery } from "@mantine/hooks"; import { Check, X } from "lucide-react"; import type { ReactNode } from "react"; @@ -32,6 +33,7 @@ export default function StepSection({ children: ReactNode; }) { const badge = STATUS_BADGE[status]; + const isMobile = useMediaQuery("(max-width: 48em)"); return ( @@ -75,7 +77,7 @@ export default function StepSection({ )} -
+
{children}