[DRAFT] Feature: Alfredpay Fiat Accounts

apps/frontend/src/components/Alfredpay/AlfredpayKycFlow.tsx

@@ -1,28 +1,27 @@
-import { Trans, useTranslation } from "react-i18next";
+import { useCallback } from "react";
 import { useAlfredpayKycActor, useAlfredpayKycSelector } from "../../contexts/rampState";
-import { cn } from "../../helpers/cn";
-import { Spinner } from "../Spinner";
+import { CustomerDefinitionScreen } from "./CustomerDefinitionScreen";
+import { DoneScreen } from "./DoneScreen";
+import { FailureKycScreen } from "./FailureKycScreen";
+import { FailureScreen } from "./FailureScreen";
+import { FillingScreen } from "./FillingScreen";
+import { LinkReadyScreen } from "./LinkReadyScreen";
+import { LoadingScreen } from "./LoadingScreen";
+import { OpeningLinkScreen } from "./OpeningLinkScreen";
+import { PollingScreen } from "./PollingScreen";
 
 export const AlfredpayKycFlow = () => {
-  const { t } = useTranslation();
   const actor = useAlfredpayKycActor();
   const state = useAlfredpayKycSelector();
 
-  const openLink = () => {
-    actor?.send({ type: "OPEN_LINK" });
-  };
-
-  const completedFilling = () => {
-    actor?.send({ type: "COMPLETED_FILLING" });
-  };
-
-  const toggleBusiness = () => {
-    actor?.send({ type: "TOGGLE_BUSINESS" });
-  };
-
-  const userAccept = () => {
-    actor?.send({ type: "USER_ACCEPT" });
-  };
+  const openLink = useCallback(() => actor?.send({ type: "OPEN_LINK" }), [actor]);
+  const completedFilling = useCallback(() => actor?.send({ type: "COMPLETED_FILLING" }), [actor]);
+  const toggleBusiness = useCallback(() => actor?.send({ type: "TOGGLE_BUSINESS" }), [actor]);
+  const userAccept = useCallback(() => actor?.send({ type: "USER_ACCEPT" }), [actor]);
+  const userRetry = useCallback(() => actor?.send({ type: "USER_RETRY" }), [actor]);
+  const userCancel = useCallback(() => actor?.send({ type: "USER_CANCEL" }), [actor]);
+  const retryProcess = useCallback(() => actor?.send({ type: "RETRY_PROCESS" }), [actor]);
+  const cancelProcess = useCallback(() => actor?.send({ type: "CANCEL_PROCESS" }), [actor]);
 
   if (!actor || !state) return null;
 
@@ -35,133 +34,53 @@ export const AlfredpayKycFlow = () => {
     stateValue === "GettingKycLink" ||
     stateValue === "Retrying"
   ) {
-    return (
-      <div className="flex flex-col items-center justify-center space-y-4 py-8">
-        <Spinner />
-        <p className="text-gray-600 font-medium">{t("components.alfredpayKycFlow.loading")}</p>
-      </div>
-    );
+    return <LoadingScreen />;
   }
 
   if (stateValue === "PollingStatus") {
-    return (
-      <div className="flex flex-col items-center justify-center space-y-4 py-8">
-        <Spinner />
-        <p className="text-gray-600 font-medium">{t("components.alfredpayKycFlow.verifyingStatus", { kycOrKyb })}</p>
-        <p className="text-gray-500 text-sm text-center">{t("components.alfredpayKycFlow.verifyingStatusDescription")}</p>
-      </div>
-    );
+    return <PollingScreen kycOrKyb={kycOrKyb} />;
   }
 
   if (stateValue === "LinkReady") {
-    return (
-      <div className="flex flex-col items-center space-y-4 py-4">
-        <p className="text-center text-gray-600">{t("components.alfredpayKycFlow.completeProcess", { kycOrKyb })}</p>
-        <button className="btn-vortex-primary btn w-full rounded-xl" onClick={openLink}>
-          {t("components.alfredpayKycFlow.openLink", { kycOrKyb })}
-        </button>
-      </div>
-    );
+    return <LinkReadyScreen kycOrKyb={kycOrKyb} onOpenLink={openLink} />;
   }
 
   if (stateValue === "OpeningLink") {
-    return (
-      <div className="flex flex-col items-center justify-center space-y-4 py-8">
-        <Spinner />
-        <p className="text-gray-600 font-medium">{t("components.alfredpayKycFlow.openingLink")}</p>
-      </div>
-    );
+    return <OpeningLinkScreen />;
   }
 
   if (stateValue === "FillingKyc" || stateValue === "FinishingFilling") {
-    const isSubmitting = stateValue === "FinishingFilling";
-
     return (
-      <div className="flex flex-col items-center space-y-4 py-4">
-        <p className="text-center text-gray-600">{t("components.alfredpayKycFlow.completeInNewWindow", { kycOrKyb })}</p>
-        <button className="btn-vortex-primary btn w-full rounded-xl" disabled={isSubmitting} onClick={completedFilling}>
-          {isSubmitting ? (
-            <>
-              <Spinner className="mr-2 h-4 w-4" />
-              {t("components.alfredpayKycFlow.verifyingCompletion")}
-            </>
-          ) : (
-            t("components.alfredpayKycFlow.finishedVerification", { kycOrKyb })
-          )}
-        </button>
-      </div>
+      <FillingScreen
+        isSubmitting={stateValue === "FinishingFilling"}
+        kycOrKyb={kycOrKyb}
+        onCompletedFilling={completedFilling}
+      />
     );
   }
 
   if (stateValue === "Done") {
-    return (
-      <div className="flex flex-col items-center space-y-4 py-4">
-        <p className="text-green-600 font-bold text-lg">{t("components.alfredpayKycFlow.completed", { kycOrKyb })}</p>
-        <p className="text-center text-gray-600">{t("components.alfredpayKycFlow.accountVerified")}</p>
-        {/* Will not be rendered as the sub-state machine will stop and go to main kyc one */}
-      </div>
-    );
+    return <DoneScreen kycOrKyb={kycOrKyb} />;
   }
 
   if (stateValue === "FailureKyc") {
     return (
-      <div className="flex flex-col items-center space-y-4 py-4">
-        <p className="text-red-600 font-bold text-lg">{t("components.alfredpayKycFlow.failed", { kycOrKyb })}</p>
-        <p className="text-center text-gray-600">{context.error?.message || "An unknown error occurred."}</p>
-        <div className="flex w-full flex-col gap-2">
-          <button className="btn-vortex-primary btn w-full rounded-xl" onClick={() => actor.send({ type: "USER_RETRY" })}>
-            {t("components.alfredpayKycFlow.retry")}
-          </button>
-          <button className="btn-vortex-secondary btn w-full rounded-xl" onClick={() => actor.send({ type: "USER_CANCEL" })}>
-            {t("components.alfredpayKycFlow.cancel")}
-          </button>
-        </div>
-      </div>
+      <FailureKycScreen errorMessage={context.error?.message} kycOrKyb={kycOrKyb} onCancel={userCancel} onRetry={userRetry} />
     );
   }
 
   if (stateValue === "Failure") {
-    return (
-      <div className="flex flex-col items-center space-y-4 py-4">
-        <p className="text-red-600 font-bold text-lg">{t("components.alfredpayKycFlow.systemError")}</p>
-        <p className="text-center text-gray-600">{context.error?.message || "An unknown error occurred."}</p>
-        <div className="flex w-full flex-col gap-2">
-          <button className="btn-vortex-primary btn w-full rounded-xl" onClick={() => actor.send({ type: "RETRY_PROCESS" })}>
-            {t("components.alfredpayKycFlow.retryProcess")}
-          </button>
-          <button className="btn-vortex-secondary btn w-full rounded-xl" onClick={() => actor.send({ type: "CANCEL_PROCESS" })}>
-            {t("components.alfredpayKycFlow.cancel")}
-          </button>
-        </div>
-      </div>
-    );
+    return <FailureScreen errorMessage={context.error?.message} onCancel={cancelProcess} onRetry={retryProcess} />;
   }
 
   if (stateValue === "CostumerDefinition") {
     return (
-      <div className="flex flex-col items-center space-y-4 py-4">
-        <p className="text-center text-gray-600">{t("components.alfredpayKycFlow.continueWithPartner", { kycOrKyb })}</p>
-        <button className="btn-vortex-primary btn w-full rounded-xl" onClick={userAccept}>
-          {t("components.alfredpayKycFlow.continue")}
-        </button>
-        <p className="text-center text-gray-500 text-sm">
-          {context.business ? (
-            <Trans
-              components={{
-                1: <span className="cursor-pointer text-blue-600 underline hover:text-blue-800" onClick={toggleBusiness} />
-              }}
-              i18nKey="components.alfredpayKycFlow.registerAsIndividual"
-            />
-          ) : (
-            <Trans
-              components={{
-                1: <span className="cursor-pointer text-blue-600 underline hover:text-blue-800" onClick={toggleBusiness} />
-              }}
-              i18nKey="components.alfredpayKycFlow.registerAsBusiness"
-            />
-          )}
-        </p>
-      </div>
+      <CustomerDefinitionScreen
+        isBusiness={context.business ?? false}
+        kycOrKyb={kycOrKyb}
+        onAccept={userAccept}
+        onToggleBusiness={toggleBusiness}
+      />
     );
   }
 

apps/frontend/src/components/Alfredpay/CustomerDefinitionScreen.tsx

@@ -0,0 +1,56 @@
+import { memo } from "react";
+import { Trans, useTranslation } from "react-i18next";
+import businessHandshake from "../../assets/business-handshake.svg";
+import livenessCheck from "../../assets/liveness-check.svg";
+import { MenuButtons } from "../MenuButtons";
+import { StepFooter } from "../StepFooter";
+
+interface CustomerDefinitionScreenProps {
+  kycOrKyb: string;
+  isBusiness: boolean;
+  onAccept: () => void;
+  onToggleBusiness: () => void;
+}
+
+const toggleLinkClass =
+  "cursor-pointer border-0 bg-transparent p-0 font-[inherit] text-blue-600 underline touch-manipulation [@media(hover:hover)]:hover:text-blue-800";
+
+export const CustomerDefinitionScreen = memo(
+  ({ kycOrKyb, isBusiness, onAccept, onToggleBusiness }: CustomerDefinitionScreenProps) => {
+    const { t } = useTranslation();
+
+    return (
+      <div className="relative flex grow-1 flex-col items-center">
+        <MenuButtons />
+        {isBusiness ? (
+          <img alt="Business Handshake" className="mx-auto mt-8 mb-8 h-50 w-1/2 object-contain" src={businessHandshake} />
+        ) : (
+          <img alt="Liveness Check" className="mx-auto mt-8 mb-8 h-50 w-1/2 object-contain" src={livenessCheck} />
+        )}
+
+        <p className="text-balance text-center text-gray-600">
+          {t("components.alfredpayKycFlow.continueWithPartner", { kycOrKyb })}
+        </p>
+
+        <p className="text-balance text-center text-gray-500 text-sm">
+          <Trans
+            components={{
+              1: <button className={toggleLinkClass} onClick={onToggleBusiness} type="button" />
+            }}
+            i18nKey={
+              isBusiness ? "components.alfredpayKycFlow.registerAsIndividual" : "components.alfredpayKycFlow.registerAsBusiness"
+            }
+          />
+        </p>
+
+        <StepFooter>
+          <button className="btn-vortex-primary btn w-full touch-manipulation rounded-xl" onClick={onAccept} type="button">
+            {t("components.alfredpayKycFlow.continue")}
+          </button>
+        </StepFooter>
+      </div>
+    );
+  }
+);
+
+CustomerDefinitionScreen.displayName = "CustomerDefinitionScreen";

apps/frontend/src/components/Alfredpay/DoneScreen.tsx

@@ -0,0 +1,20 @@
+import { memo } from "react";
+import { useTranslation } from "react-i18next";
+
+interface DoneScreenProps {
+  kycOrKyb: string;
+}
+
+export const DoneScreen = memo(({ kycOrKyb }: DoneScreenProps) => {
+  const { t } = useTranslation();
+
+  return (
+    <div className="flex flex-col items-center space-y-4 py-4">
+      <p className="font-bold text-green-600 text-lg">{t("components.alfredpayKycFlow.completed", { kycOrKyb })}</p>
+      <p className="text-center text-gray-600">{t("components.alfredpayKycFlow.accountVerified")}</p>
+      {/* Will not be rendered as the sub-state machine will stop and go to main kyc one */}
+    </div>
+  );
+});
+
+DoneScreen.displayName = "DoneScreen";

apps/frontend/src/components/Alfredpay/FailureKycScreen.tsx

@@ -0,0 +1,30 @@
+import { memo } from "react";
+import { useTranslation } from "react-i18next";
+
+interface FailureKycScreenProps {
+  kycOrKyb: string;
+  errorMessage: string | undefined;
+  onRetry: () => void;
+  onCancel: () => void;
+}
+
+export const FailureKycScreen = memo(({ kycOrKyb, errorMessage, onRetry, onCancel }: FailureKycScreenProps) => {
+  const { t } = useTranslation();
+
+  return (
+    <div className="flex flex-col items-center space-y-4 py-4">
+      <p className="font-bold text-lg text-red-600">{t("components.alfredpayKycFlow.failed", { kycOrKyb })}</p>
+      <p className="text-center text-gray-600">{errorMessage ?? "An unknown error occurred."}</p>
+      <div className="flex w-full flex-col gap-2">
+        <button className="btn-vortex-primary btn w-full rounded-xl" onClick={onRetry}>
+          {t("components.alfredpayKycFlow.retry")}
+        </button>
+        <button className="btn-vortex-secondary btn w-full rounded-xl" onClick={onCancel}>
+          {t("components.alfredpayKycFlow.cancel")}
+        </button>
+      </div>
+    </div>
+  );
+});
+
+FailureKycScreen.displayName = "FailureKycScreen";