Solve buy button functionality, card number formatting, and success - error messages

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';
 
@@ -60,7 +61,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) => {
@@ -80,7 +88,7 @@ export default function Payment() {
           <BuyForm ref={buyFormRef} onSubmitHandler={onSubmitHandler} />
           <FormButtons
             handleSubmit={() => {
-              buyFormRef.current?.submit;
+              buyFormRef.current?.submit();
             }}
           />
         </ScrollView>

src/components/payment/buy-form.tsx

@@ -19,6 +19,7 @@ type SectionFormProps = {
   titleClassname?: string;
   inputClassname?: string;
   textClassname?: string;
+  isCreditCard?: boolean;
 };
 
 export const _addressSchema = z.object({
@@ -62,10 +63,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>;
 
@@ -144,12 +142,14 @@ const cardFields = [
     label: purchaseForm.labels.cardNumber,
     required: true,
     placeholder: purchaseForm.placeholders.cardNumber,
+    isCardNumber: true,
   },
   {
     name: 'cvcCode',
     label: purchaseForm.placeholders.cvcCode,
     required: true,
     placeholder: purchaseForm.placeholders.cvcCode,
+    isCVC: true,
   },
 ];
 

src/core/hoc/multiple-input.tsx

@@ -6,6 +6,8 @@ type FieldProps = {
   label: string;
   required?: boolean;
   placeholder?: string;
+  isCardNumber?: boolean;
+  isCVC?: boolean;
 };
 
 type FromInputsProps = {
@@ -30,20 +32,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 ? symbols.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 ? symbols.required : ' '}
+            </Text>
+            <ControlledInput
+              className={inputClassname}
+              control={control}
+              name={name}
+              placeholder={placeholder}
+              editable={editable}
+              isCardNumber={isCardNumber}
+              isCVC={isCVC}
+            />
+          </View>
+        )
+      )}
     </View>
   );
 };

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}
     />

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,
+    },
   });
 };