expo-openpay 0.1.21 → 0.1.23

package/src/components/forms/FormField.tsx

@@ -21,7 +21,6 @@ type StylingProps = {
 type AppFormFieldProps = TextInputProps & {
   customStyles?: StyleProp<ViewStyle>;
   defaultStyling?: boolean;
-  errorMessages?: Record<string, string | undefined>;
   icon?:
     | { type: "material"; name: keyof typeof MaterialCommunityIcons.glyphMap }
     | { type: "fa6"; name: keyof typeof FontAwesome6.glyphMap }
@@ -33,8 +32,9 @@ type AppFormFieldProps = TextInputProps & {
   onValueChange?: (value: string) => void;
   validate?: (
     value: string,
-    errorMessages?: Record<string, string | undefined>,
+    validationMessages?: Record<string, string | undefined>,
   ) => string | undefined;
+  validationMessages?: Record<string, string | undefined>;
   withAnimatedText: boolean;
   withIcon: boolean;
   withLabel?: boolean;
@@ -43,11 +43,11 @@ type AppFormFieldProps = TextInputProps & {
 
 export default function AppFormField({
   defaultStyling,
-  errorMessages = {},
   name,
   labelStyle = {},
   placeholder,
   validate,
+  validationMessages = {},
   withLabel = false,
   ...otherProps
 }: AppFormFieldProps) {
@@ -73,13 +73,34 @@ export default function AppFormField({
         onBlur={() => {
           setFieldTouched(name);
           if (validate) {
-            const errorMessage = validate(values[name], errorMessages);
+            const errorMessage = validate(values[name], validationMessages);
             setFieldError(name, errorMessage);
           }
         }}
         onChangeText={(text) => {
           if (name === "cardNumber") text = formatCreditCardNumber(text);
-          if (name === "exp") text = formatExp(text);
+          if (name === "exp") {
+            text = formatExp(text);
+
+            const month = text.slice(0, 2);
+            const year = text.slice(3);
+
+            if (month.length === 2) {
+              setFieldValue("expMonth", month);
+              setFieldError("expMonth", undefined);
+            }
+
+            if (year.length === 2) {
+              setFieldValue("expYear", year);
+              setFieldError("expYear", undefined);
+            }
+          }
+
+          if (name === "expMonth" || name === "expYear") {
+            setFieldError("exp", undefined);
+          }
+
+          setFieldError(name, undefined);
           setFieldValue(name, text);
 
           if (otherProps.onValueChange) {

package/src/context/FormContext.tsx

@@ -33,24 +33,74 @@ export default function FormProvider({
   children,
   initialValues = {},
   onSubmit,
+  validationMessages = {},
 }: {
   children: React.ReactNode;
   initialValues?: FormValues;
   onSubmit?: (token: string) => any;
   onDeviceSessionId?: (id: string) => any;
+  validationMessages?: any;
 }) {
   const [values, setValues] = useState<FormValues>(initialValues);
   const [errors, setErrors] = useState<FormErrors>({});
   const [touched, setTouched] = useState<FormTouched>({});
   const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
 
+  const isEmpty = (val: any) =>
+    val === undefined ||
+    val === null ||
+    (typeof val === "string" && val.trim() === "");
+
   const handleSubmit = async (): Promise<any> => {
     try {
       setIsSubmitting(true);
 
+      const newErrors: FormErrors = {};
+
+      // Required validations
+      if (isEmpty(values["cardholderName"]))
+        newErrors["cardholderName"] =
+          validationMessages?.cardholderInput?.required ||
+          "Cardholder name is required";
+
+      if (isEmpty(values["cardNumber"]))
+        newErrors["cardNumber"] =
+          validationMessages?.cardNumberInput?.required ||
+          "Card number is required";
+
+      if (isEmpty(values["cvc"]))
+        newErrors["cvc"] =
+          validationMessages?.cvv2Input?.required || "CVC is required";
+
       if (values["exp"]) {
         values["expMonth"] = values["exp"].slice(0, 2);
         values["expYear"] = values["exp"].slice(3);
+      } else {
+        newErrors["exp"] =
+          validationMessages?.expInput?.required || "Expiration is required";
+      }
+
+      if (isEmpty(values["expMonth"]))
+        newErrors["expMonth"] =
+          validationMessages?.expMonthInput?.required ||
+          "Expiration month is required";
+
+      if (isEmpty(values["expYear"]))
+        newErrors["expYear"] =
+          validationMessages?.expYearInput?.required ||
+          "Expiration year is required";
+
+      if (Object.keys(newErrors).length > 0) {
+        setErrors(newErrors);
+
+        const touchedFields: FormTouched = {};
+        Object.keys(newErrors).forEach((key) => {
+          touchedFields[key] = true;
+        });
+
+        setTouched((prev) => ({ ...prev, ...touchedFields }));
+
+        return;
       }
 
       const token = await tokenizeCard(