[READY] 456 Create UI for BRLa offramp KYC

signer-service/src/api/middlewares/validators.ts

@@ -312,7 +312,7 @@ export const validateBrlaTriggerOfframpInput: RequestHandler = (req, res, next)
 };
 
 export const validataSubaccountCreation: RequestHandler = (req, res, next) => {
-  const { phone, taxIdType, address, fullName, cpf, birthDate, companyName, startDate, cnpj } =
+  const { phone, taxIdType, address, fullName, cpf, birthdate, companyName, startDate, cnpj } =
     req.body as RegisterSubaccountPayload;
 
   if (taxIdType !== 'CPF' && taxIdType !== 'CNPJ') {
@@ -340,8 +340,8 @@ export const validataSubaccountCreation: RequestHandler = (req, res, next) => {
     return;
   }
 
-  if (!birthDate) {
-    res.status(400).json({ error: 'Missing birthDate parameter' });
+  if (!birthdate) {
+    res.status(400).json({ error: 'Missing birthdate parameter' });
     return;
   }
 

signer-service/src/api/services/brla/types.ts

@@ -48,7 +48,7 @@ export interface RegisterSubaccountPayload {
   address: BrlaAddress;
   fullName: string;
   cpf: string;
-  birthDate: string;
+  birthdate: string;
   companyName?: string;
   startDate?: string;
   cnpj?: string;

src/components/BrlaComponents/BrlaExtendedForm.tsx

@@ -24,39 +24,67 @@ const PIXKYCFORM_FIELDS: BrlaFieldProps[] = [
     index: 0,
   },
   {
-    id: ExtendedBrlaFieldOptions.ADDRESS,
-    label: 'Address',
+    id: ExtendedBrlaFieldOptions.FULL_NAME,
+    label: 'Full Name',
     type: 'text',
-    placeholder: 'Address',
+    placeholder: 'Full Name',
     required: true,
     index: 1,
   },
   {
-    id: ExtendedBrlaFieldOptions.FULL_NAME,
-    label: 'Full Name',
+    id: ExtendedBrlaFieldOptions.CEP,
+    label: 'CEP',
     type: 'text',
-    placeholder: 'Full Name',
+    placeholder: 'CEP',
     required: true,
     index: 2,
   },
   {
-    id: ExtendedBrlaFieldOptions.CPF,
-    label: 'CPF',
+    id: ExtendedBrlaFieldOptions.CITY,
+    label: 'City',
     type: 'text',
-    placeholder: 'CPF',
-    validationPattern: {
-      value: /^\d{11}$/,
-      message: 'CPF must be 11 digits',
-    },
+    placeholder: 'City',
     required: true,
     index: 3,
   },
+  {
+    id: ExtendedBrlaFieldOptions.STATE,
+    label: 'State',
+    type: 'text',
+    placeholder: 'State',
+    required: true,
+    index: 4,
+  },
+  {
+    id: ExtendedBrlaFieldOptions.STREET,
+    label: 'Street',
+    type: 'text',
+    placeholder: 'Street',
+    required: true,
+    index: 5,
+  },
+  {
+    id: ExtendedBrlaFieldOptions.NUMBER,
+    label: 'Number',
+    type: 'text',
+    placeholder: 'Number',
+    required: true,
+    index: 6,
+  },
+  {
+    id: ExtendedBrlaFieldOptions.DISTRICT,
+    label: 'District',
+    type: 'text',
+    placeholder: 'District',
+    required: true,
+    index: 7,
+  },
   {
     id: ExtendedBrlaFieldOptions.BIRTHDATE,
     label: 'Birthdate',
     type: 'date',
     required: true,
-    index: 4,
+    index: 8,
   },
 ];
 

src/components/BrlaComponents/BrlaField/index.tsx

@@ -12,6 +12,12 @@ export enum StandardBrlaFieldOptions {
 export enum ExtendedBrlaFieldOptions {
   PHONE = 'phone',
   ADDRESS = 'address',
+  CEP = 'cep',
+  CITY = 'city',
+  STATE = 'state',
+  STREET = 'street',
+  NUMBER = 'number',
+  DISTRICT = 'district',
   FULL_NAME = 'fullName',
   CPF = 'cpf',
   BIRTHDATE = 'birthdate',

src/hooks/brla/useBRLAKYCProcess/index.tsx

@@ -2,10 +2,12 @@ import { useCallback, useState, useEffect } from 'react';
 import { useQueryClient } from '@tanstack/react-query';
 
 import { KYCStatus } from '../../../components/BrlaComponents/VerificationStatus';
-import { useOfframpActions } from '../../../stores/offrampStore';
+import { useOfframpActions, useOfframpStore } from '../../../stores/offrampStore';
 import { useOfframpSubmission } from '../useOfframpSubmission';
 import { useKYCStatusQuery } from '../useKYCStatusQuery';
 import { KYCFormData } from '../useKYCForm';
+import { createSubaccount } from '../../../services/signingService';
+import { useFormStore } from '../../../stores/formStore';
 
 export interface BrlaKycStatus {
   status: string;
@@ -53,6 +55,7 @@ const useVerificationStatusUI = () => {
 
 export function useKYCProcess(setIsOfframpSummaryDialogVisible: (isVisible: boolean) => void) {
   const { verificationStatus, statusMessage, updateStatus, resetToDefault } = useVerificationStatusUI();
+  const { taxId } = useFormStore();
   const [isSubmitted, setIsSubmitted] = useState(false);
 
   const [cpf, setCpf] = useState<string | null>(null);
@@ -83,11 +86,32 @@ export function useKYCProcess(setIsOfframpSummaryDialogVisible: (isVisible: bool
 
   const handleFormSubmit = useCallback(
     async (formData: KYCFormData) => {
+      if (!taxId) {
+        throw new Error('useKYCProcess: Tax ID must be defined at this point');
+      }
       resetToDefault();
-      setCpf(formData.cpf);
       setIsSubmitted(true);
 
-      await queryClient.invalidateQueries({ queryKey: ['kyc-status', formData.cpf] });
+      await queryClient.invalidateQueries({ queryKey: ['kyc-status', taxId] });
+      const addressObject = {
+        cep: formData.cep,
+        city: formData.city,
+        street: formData.street,
+        number: formData.number,
+        district: formData.district,
+        state: formData.state,
+      };
+      createSubaccount({
+        ...formData,
+        cpf: taxId,
+        birthdate: formData.birthdate.toDateString(),
+        address: addressObject,
+        taxIdType: 'CPF',
+      })
+        .catch((error) => handleError(error.message))
+        .then(() => {
+          setCpf(taxId); // Only define cpf after the subaccount creation is successful. Otherwise query will fail.
+        });
     },
     [queryClient, resetToDefault],
   );
@@ -97,21 +121,24 @@ export function useKYCProcess(setIsOfframpSummaryDialogVisible: (isVisible: bool
 
     const handleStatus = async (status: string) => {
       const mappedStatus = status as KYCResponseStatus;
-      setIsSubmitted(false);
 
       const statusHandlers: Record<KYCResponseStatus, () => Promise<void>> = {
         [KYCResponseStatus.SUCCESS]: async () => {
           updateStatus(KYCStatus.SUCCESS, STATUS_MESSAGES.SUCCESS);
           await delay(SUCCESS_DISPLAY_DURATION_MS);
+          setIsSubmitted(false);
           proceedWithOfframp();
         },
         [KYCResponseStatus.FAILED]: async () => {
           updateStatus(KYCStatus.FAILED, STATUS_MESSAGES.FAILED);
           await delay(ERROR_DISPLAY_DURATION_MS);
+          setIsSubmitted(false);
           resetToDefault();
           handleBackClick();
         },
-        [KYCResponseStatus.PENDING]: async () => undefined,
+        [KYCResponseStatus.PENDING]: async () => {
+          undefined;
+        },
       };
 
       const handler = statusHandlers[mappedStatus];

src/hooks/brla/useKYCForm/index.tsx

@@ -15,21 +15,38 @@ const kycFormSchema = yup
       .required('Phone number is required')
       .matches(/^\+?[1-9]\d{9,14}$/, 'Invalid phone number format'),
 
-    [ExtendedBrlaFieldOptions.ADDRESS]: yup
-      .string()
-      .required('Address is required')
-      .min(5, 'Address must be at least 5 characters'),
-
     [ExtendedBrlaFieldOptions.FULL_NAME]: yup
       .string()
       .required('Full name is required')
       .min(3, 'Name must be at least 3 characters')
       .matches(/^[a-zA-Z\s]*$/, 'Name can only contain letters and spaces'),
 
-    [ExtendedBrlaFieldOptions.CPF]: yup
+    [ExtendedBrlaFieldOptions.CEP]: yup
+      .string()
+      .required('CEP is required')
+      .min(3, 'CEP must be at least 3 characters'),
+
+    [ExtendedBrlaFieldOptions.CITY]: yup
+      .string()
+      .required('City is required')
+      .min(5, 'City must be at least 5 characters'),
+
+    [ExtendedBrlaFieldOptions.STATE]: yup
+      .string()
+      .required('State is required')
+      .min(3, 'State must be at least 3 characters'),
+
+    [ExtendedBrlaFieldOptions.STREET]: yup
+      .string()
+      .required('Street is required')
+      .min(5, 'Street must be at least 5 characters'),
+
+    [ExtendedBrlaFieldOptions.NUMBER]: yup.string().required('Number is required'),
+
+    [ExtendedBrlaFieldOptions.DISTRICT]: yup
       .string()
-      .required('CPF is required')
-      .matches(/^\d{11}$/, 'CPF must be 11 digits'),
+      .required('District is required')
+      .min(3, 'District must be at least 3 characters'),
 
     [ExtendedBrlaFieldOptions.BIRTHDATE]: yup
       .date()

src/services/signingService.tsx

@@ -49,7 +49,7 @@ export interface RegisterSubaccountPayload {
   };
   fullName: string;
   cpf: string;
-  birthDate: string;
+  birthdate: string;
 }
 
 export interface SignerServiceSep10Request {

src/stores/formStore.ts

@@ -22,7 +22,7 @@ type FormStore = FormState & {
   actions: FormStoreActions;
 };
 
-const useFormStore = create<FormStore>((set) => ({
+export const useFormStore = create<FormStore>((set) => ({
   fromAmount: undefined,
   fromToken: undefined,
   toToken: undefined,