From 786d547c564b3ad4fce24d008cd3834bae603173 Mon Sep 17 00:00:00 2001
From: Sofia Cantero <sofia.cantero@rootstrap.com>
Date: Wed, 18 Dec 2024 14:35:31 -0500
Subject: [PATCH] fix: resolve buy button functionality, card number
 formatting, and status messages

---
 src/app/(app)/payment.tsx           | 12 ++++++++--
 src/components/payment/buy-form.tsx |  8 +++----
 src/core/hoc/multiple-input.tsx     | 34 +++++++++++++++++------------
 src/ui/input.tsx                    | 32 +++++++++++++++++++++++++--
 src/ui/utils.tsx                    |  6 ++++-
 5 files changed, 69 insertions(+), 23 deletions(-)

diff --git a/src/app/(app)/payment.tsx b/src/app/(app)/payment.tsx
index bcf21d6..8dd9c62 100644
--- a/src/app/(app)/payment.tsx
+++ b/src/app/(app)/payment.tsx
@@ -1,5 +1,6 @@
 import { router } from 'expo-router';
 import { useRef } from 'react';
+import { Platform } from 'react-native';
 import { showMessage } from 'react-native-flash-message';
 import { KeyboardAvoidingView } from 'react-native-keyboard-controller';
 
@@ -59,7 +60,14 @@ export default function Payment() {
       },
       {
         onSuccess: () => {
-          showMessage({ message: 'success', type: 'success' });
+          showMessage({
+            message: 'success',
+            type: 'success',
+            floating: true,
+            style: {
+              marginTop: Platform.OS === 'ios' ? 50 : 0,
+            },
+          });
           router.navigate('/(app)');
         },
         onError: (error) => {
@@ -79,7 +87,7 @@ export default function Payment() {
           <BuyForm ref={buyFormRef} onSubmitHandler={onSubmitHandler} />
           <FormButtons
             handleSubmit={() => {
-              buyFormRef.current?.submit;
+              buyFormRef.current?.submit();
             }}
           />
         </ScrollView>
diff --git a/src/components/payment/buy-form.tsx b/src/components/payment/buy-form.tsx
index e5957e2..5a950ed 100644
--- a/src/components/payment/buy-form.tsx
+++ b/src/components/payment/buy-form.tsx
@@ -18,6 +18,7 @@ type SectionFormProps = {
   titleClassname?: string;
   inputClassname?: string;
   textClassname?: string;
+  isCreditCard?: boolean;
 };
 
 export const _addressSchema = z.object({
@@ -61,10 +62,7 @@ export const additionalAddressSchema = z.object({
   }),
 });
 
-const schema = _addressSchema
-  .and(_cardSchema)
-  .and(dateSchema)
-  .and(additionalAddressSchema);
+const schema = _addressSchema.and(_cardSchema).and(dateSchema);
 
 export type TBuyFormFields = z.infer<typeof schema>;
 
@@ -143,12 +141,14 @@ const cardFields = [
     label: 'Card Number',
     required: true,
     placeholder: 'Card number',
+    isCardNumber: true,
   },
   {
     name: 'cvcCode',
     label: 'CVC code',
     required: true,
     placeholder: 'CVC code',
+    isCVC: true,
   },
 ];
 
diff --git a/src/core/hoc/multiple-input.tsx b/src/core/hoc/multiple-input.tsx
index e9d3d99..dd38c27 100644
--- a/src/core/hoc/multiple-input.tsx
+++ b/src/core/hoc/multiple-input.tsx
@@ -5,6 +5,8 @@ type FieldProps = {
   label: string;
   required?: boolean;
   placeholder?: string;
+  isCardNumber?: boolean;
+  isCVC?: boolean;
 };
 
 type FromInputsProps = {
@@ -29,20 +31,24 @@ export const FormInputs = ({
   return (
     <View>
       {title && <Text className={titleClassname}>{title}</Text>}
-      {fields.map(({ label, name, placeholder, required }) => (
-        <View key={name} className="">
-          <Text className={textClassname}>
-            {label} {required ? '*' : ' '}
-          </Text>
-          <ControlledInput
-            className={inputClassname}
-            control={control}
-            name={name}
-            placeholder={placeholder}
-            editable={editable}
-          />
-        </View>
-      ))}
+      {fields.map(
+        ({ label, name, placeholder, required, isCardNumber, isCVC }) => (
+          <View key={name} className="">
+            <Text className={textClassname}>
+              {label} {required ? '*' : ' '}
+            </Text>
+            <ControlledInput
+              className={inputClassname}
+              control={control}
+              name={name}
+              placeholder={placeholder}
+              editable={editable}
+              isCardNumber={isCardNumber}
+              isCVC={isCVC}
+            />
+          </View>
+        )
+      )}
     </View>
   );
 };
diff --git a/src/ui/input.tsx b/src/ui/input.tsx
index 985fcd0..0d3557d 100644
--- a/src/ui/input.tsx
+++ b/src/ui/input.tsx
@@ -56,6 +56,8 @@ export interface NInputProps extends TextInputProps {
   error?: string;
   labelClassname?: string;
   showError?: boolean;
+  isCardNumber?: boolean;
+  isCVC?: boolean;
 }
 
 interface ShowPasswordIconProps {
@@ -200,14 +202,40 @@ export function ControlledInput<T extends FieldValues>(
   props: ControlledInputProps<T>
 ) {
   const { name, control, rules, ...inputProps } = props;
-
   const { field, fieldState } = useController({ control, name, rules });
+
+  const formatCardNumber = (text: string) => {
+    const cleaned = text.replace(/\D/g, '');
+
+    const truncated = cleaned.slice(0, 16);
+
+    return truncated.replace(/(\d{4})(?=\d)/g, '$1 ');
+  };
+
+  const handleChangeText = (text: string) => {
+    const formattedText = props.isCardNumber ? formatCardNumber(text) : text;
+
+    field.onChange(formattedText);
+  };
+
+  const getCharacterLimit = () => {
+    if (props.isCardNumber) {
+      return 19;
+    }
+    if (props.isCVC) {
+      return 3;
+    }
+    return undefined;
+  };
+
   return (
     <Input
       ref={field.ref}
       autoCapitalize="none"
-      onChangeText={field.onChange}
+      onChangeText={handleChangeText}
       value={(field.value as string) || ''}
+      keyboardType={props.isCardNumber || props.isCVC ? 'numeric' : 'default'}
+      maxLength={getCharacterLimit()}
       {...inputProps}
       error={fieldState.error?.message}
     />
diff --git a/src/ui/utils.tsx b/src/ui/utils.tsx
index c57d9a6..c139584 100644
--- a/src/ui/utils.tsx
+++ b/src/ui/utils.tsx
@@ -10,7 +10,7 @@ export const HEIGHT = height;
 
 // for onError react queries and mutations
 export const showError = (error: AxiosError) => {
-  console.log(JSON.stringify(error?.response?.data));
+  // console.log(JSON.stringify(error?.response?.data));
   const description = extractError(error?.response?.data).trimEnd();
 
   showMessage({
@@ -27,6 +27,10 @@ export const showErrorMessage = (message: string = 'Something went wrong ') => {
     message,
     type: 'danger',
     duration: 4000,
+    floating: true,
+    style: {
+      marginTop: Platform.OS === 'ios' ? 50 : 0,
+    },
   });
 };