boxpay-checkout-reactnative-sdk 1.0.0-beta03

package/lib/module/screens/addressScreen.js

@@ -0,0 +1,661 @@
+"use strict";
+
+import { useEffect, useRef, useState } from 'react';
+import { BackHandler, Image, Pressable, SafeAreaView, ScrollView, StatusBar, Text, View } from 'react-native';
+import { TextInput } from 'react-native-paper';
+import Header from "../components/header.js";
+import { checkoutDetailsHandler } from "../sharedContext/checkoutDetailsHandler.js";
+import { setUserDataHandler, userDataHandler } from "../sharedContext/userdataHandler.js";
+import styles from "../styles/screens/addressScreenStyles..js";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const AddressScreen = ({
+  navigation
+}) => {
+  const {
+    userData
+  } = userDataHandler;
+  const {
+    checkoutDetails
+  } = checkoutDetailsHandler;
+  const [selectedCountryCode /*setSelectedCountryCode*/] = useState('');
+  const selectedPhoneCodeRef = useRef('');
+  const isShippingEnabled = checkoutDetails.isShippingAddressEnabled;
+  const isFullNameEnabled = checkoutDetails.isFullNameEnabled;
+  const isPhoneNumberEnabled = checkoutDetails.isPhoneEnabled;
+  const isEmailEnabled = checkoutDetails.isEmailEnabled;
+  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+  const [countryTextFieldFocused] = useState(false);
+  const [phoneTextFieldFocused, setPhoneTextFieldFocused] = useState(false);
+  const [nameTextFieldFocused, setNameTextFieldFocused] = useState(false);
+  const [mainAddressTextFieldFocused, setMainAddressTextFieldFocused] = useState(false);
+  const [emailTextFieldFocused, setEmailTextFieldFocused] = useState(false);
+  const [cityTextFieldFocused, setCityTextFieldFocused] = useState(false);
+  const [stateTextFieldFocused, setStateTextFieldFocused] = useState(false);
+  const [pincodeTextFieldFocused, setPincodeTextFieldFocused] = useState(false);
+  const [secondaryAddressTextFieldFocused, setSecondaryAddressTextFieldFocused] = useState(false);
+  const [countryTextField /*setCountryTextField*/] = useState('');
+  const [fullNameTextField, setFullNameTextField] = useState('');
+  const [phoneNumberTextField /*setPhoneNumberTextField*/] = useState('');
+  const [emailTextField, setEmailTextField] = useState('');
+  const [pinTextField, setPinTextField] = useState('');
+  const [cityTextField, setCityTextField] = useState('');
+  const [stateTextField, setStateTextField] = useState('');
+  const [mainAddressTextField, setMainAddressTextField] = useState('');
+  const [secondaryAddressTextField, setSecondaryAddressTextField] = useState('');
+  const [fullNameErrorText, setFullNameErrorText] = useState('');
+  const [mobileNumberErrorText /*setMobileNumberErrorText*/] = useState('');
+  const [emailIdErrorText, setEmailIdErrorText] = useState('');
+  const [pinCodeErrorText, setPinCodeErrorText] = useState('');
+  const [cityErrorText, setCityErrorText] = useState('');
+  const [stateErrorText, setStateErrorText] = useState('');
+  const [mainAddressErrorText, setMainAddressErrorText] = useState('');
+  const [isFullNameValid, setIsFullNameValid] = useState(false);
+  const [isPhoneNumberValid /*setIsPhoneNumberValid*/] = useState(false);
+  const [isEmailValid, setIsEmailValid] = useState(false);
+  const [isPinValid, setIsPinValid] = useState(false);
+  const [isCityValid, setIsCityValid] = useState(false);
+  const [isStateValid, setIsStateValid] = useState(false);
+  const [isMainAddressValid, setIsMainAddressValid] = useState(false);
+  const onProceedBack = () => {
+    navigation.goBack();
+    return true;
+  };
+  useEffect(() => {
+    const backHandler = BackHandler.addEventListener('hardwareBackPress', () => {
+      return onProceedBack(); // Allow back navigation if not loading
+    });
+    return () => backHandler.remove();
+  });
+  const onChangeFullName = updatedText => {
+    setFullNameTextField(updatedText);
+    const trimmedText = updatedText.trim();
+    if (trimmedText === '') {
+      setFullNameErrorText('Required');
+      setIsFullNameValid(true);
+    } else {
+      setFullNameErrorText('');
+      setIsFullNameValid(false);
+    }
+  };
+  function extractNames(fullName) {
+    const components = fullName.trim().split(' ').filter(part => part !== '');
+    if (components.length === 0) {
+      return {
+        firstName: '',
+        lastName: ''
+      };
+    }
+    const firstName = components[0] || '';
+    const lastName = components.slice(1).join(' ') || '';
+    return {
+      firstName,
+      lastName
+    };
+  }
+  const onChangeEmailId = updatedText => {
+    setEmailTextField(updatedText);
+    const trimmedText = updatedText.trim();
+    const emailRegexPattern = new RegExp(emailRegex); // emailRegex should be a string pattern
+
+    if (trimmedText === '') {
+      setEmailIdErrorText('Required');
+      setIsEmailValid(true);
+    } else if (!emailRegexPattern.test(trimmedText)) {
+      setEmailIdErrorText('Invalid Email');
+      setIsEmailValid(true);
+    } else {
+      setEmailIdErrorText('');
+      setIsEmailValid(false);
+    }
+  };
+  const onChangePostalCode = updatedText => {
+    setPinTextField(updatedText);
+    const trimmedText = updatedText.trim();
+    if (trimmedText === '') {
+      setPinCodeErrorText('Required');
+      setIsPinValid(true);
+    } else if (selectedPhoneCodeRef.current === '+91' && trimmedText.length < 6) {
+      setPinCodeErrorText('Zip/Postal code must be 6 digits');
+      setIsPinValid(true);
+    } else {
+      setPinCodeErrorText('');
+      setIsPinValid(false);
+    }
+  };
+  const onChangeCity = updatedText => {
+    setCityTextField(updatedText);
+    const trimmedText = updatedText.trim();
+    if (trimmedText === '') {
+      setCityErrorText('Required');
+      setIsCityValid(true);
+    } else {
+      setCityErrorText('');
+      setIsCityValid(false);
+    }
+  };
+  const onChangeState = updatedText => {
+    setStateTextField(updatedText);
+    const trimmedText = updatedText.trim();
+    if (trimmedText === '') {
+      setStateErrorText('Required');
+      setIsStateValid(true);
+    } else {
+      setStateErrorText('');
+      setIsStateValid(false);
+    }
+  };
+  const onChangeMainAddress = updatedText => {
+    setMainAddressTextField(updatedText);
+    const trimmedText = updatedText.trim();
+    if (trimmedText === '') {
+      setMainAddressErrorText('Required');
+      setIsMainAddressValid(true);
+    } else {
+      setMainAddressErrorText('');
+      setIsMainAddressValid(true);
+    }
+  };
+  const isAllDetailsValid = () => {
+    let isAllValid = true;
+
+    // Helper function to safely trim nullable strings
+    const safeTrim = text => text ? text.trim() : '';
+
+    // Full Name
+    const fullNameTrimmed = safeTrim(fullNameTextField);
+    const fullNameValid = fullNameTrimmed !== '' && isFullNameEnabled;
+    if (!fullNameValid) {
+      onChangeFullName(fullNameTextField);
+      isAllValid = false;
+    }
+
+    // Email
+    const emailTrimmed = safeTrim(emailTextField); // Replace with your emailRegex if defined
+    const emailValid = emailTrimmed !== '' && emailRegex.test(emailTrimmed) && isEmailEnabled;
+    if (!emailValid) {
+      onChangeEmailId(emailTextField);
+      isAllValid = false;
+    }
+
+    // Shipping-specific fields
+    if (isShippingEnabled) {
+      // Postal Code
+      const postalTrimmed = safeTrim(pinTextField);
+      let postalValid = false;
+      if (selectedPhoneCodeRef.current === '+91') {
+        postalValid = postalTrimmed !== '' && postalTrimmed.length >= 6;
+      } else {
+        postalValid = postalTrimmed !== '';
+      }
+      if (!postalValid) {
+        onChangePostalCode(pinTextField);
+        isAllValid = false;
+      }
+
+      // City
+      const cityTrimmed = safeTrim(cityTextField);
+      const cityValid = cityTrimmed !== '';
+      if (!cityValid) {
+        onChangeCity(cityTextField);
+        isAllValid = false;
+      }
+
+      // State
+      const stateTrimmed = safeTrim(stateTextField);
+      const stateValid = stateTrimmed !== '';
+      if (!stateValid) {
+        onChangeState(stateTextField);
+        isAllValid = false;
+      }
+
+      // Main Address
+      const addressTrimmed = safeTrim(mainAddressTextField);
+      const addressValid = addressTrimmed !== '';
+      if (!addressValid) {
+        onChangeMainAddress(mainAddressTextField);
+        isAllValid = false;
+      }
+    }
+    return isAllValid;
+  };
+  return /*#__PURE__*/_jsxs(SafeAreaView, {
+    style: styles.screenView,
+    children: [/*#__PURE__*/_jsx(StatusBar, {
+      barStyle: "dark-content"
+    }), /*#__PURE__*/_jsx(Header, {
+      onBackPress: onProceedBack,
+      showDesc: false,
+      showSecure: false,
+      text: isShippingEnabled ? 'Add Address' : 'Add Personal Details'
+    }), /*#__PURE__*/_jsx(View, {
+      style: styles.divider
+    }), /*#__PURE__*/_jsx(ScrollView, {
+      children: /*#__PURE__*/_jsxs(View, {
+        children: [isShippingEnabled && /*#__PURE__*/_jsx(_Fragment, {
+          children: /*#__PURE__*/_jsx(Pressable, {
+            onPress: () => {},
+            children: /*#__PURE__*/_jsx(TextInput, {
+              mode: "outlined",
+              label: /*#__PURE__*/_jsx(Text, {
+                style: [styles.textFieldLable, {
+                  color: countryTextFieldFocused ? '#2D2B32' : '#ADACB0'
+                }],
+                children: "Country*"
+              }),
+              value: countryTextField || '',
+              onChangeText: _ => {},
+              editable: false // disables keyboard input
+              ,
+              theme: {
+                colors: {
+                  primary: '#2D2B32',
+                  outline: '#E6E6E6'
+                }
+              },
+              style: [styles.textInput, {
+                marginTop: 28,
+                marginHorizontal: 16
+              }],
+              outlineStyle: {
+                borderRadius: 8,
+                borderWidth: 1.5
+              },
+              right: /*#__PURE__*/_jsx(TextInput.Icon, {
+                icon: () => /*#__PURE__*/_jsx(Image, {
+                  source: require('../../assets/images/chervon-down.png'),
+                  style: styles.imageStyle
+                })
+              })
+            })
+          })
+        }), (isShippingEnabled || isFullNameEnabled) && /*#__PURE__*/_jsxs(_Fragment, {
+          children: [/*#__PURE__*/_jsx(TextInput, {
+            mode: "outlined",
+            label: /*#__PURE__*/_jsx(Text, {
+              style: [styles.textFieldLable, {
+                color: nameTextFieldFocused ? '#2D2B32' : '#ADACB0'
+              }],
+              children: "Full Name*"
+            }),
+            value: fullNameTextField || '',
+            onChangeText: it => {
+              onChangeFullName(it);
+            },
+            theme: {
+              colors: {
+                primary: '#2D2B32',
+                outline: '#E6E6E6'
+              }
+            },
+            style: [styles.textInput, {
+              marginTop: 20,
+              marginHorizontal: 16
+            }],
+            error: isFullNameValid,
+            outlineStyle: {
+              borderRadius: 8,
+              // Add this
+              borderWidth: 1.5
+            },
+            onFocus: () => {
+              setNameTextFieldFocused(true);
+            },
+            onBlur: () => {
+              setNameTextFieldFocused(false);
+            }
+          }), isFullNameValid && /*#__PURE__*/_jsx(Text, {
+            style: styles.errorText,
+            children: fullNameErrorText
+          })]
+        }), (isShippingEnabled || isPhoneNumberEnabled) && /*#__PURE__*/_jsxs(_Fragment, {
+          children: [/*#__PURE__*/_jsxs(View, {
+            style: [styles.container, {
+              alignItems: 'center'
+            }],
+            children: [/*#__PURE__*/_jsx(TextInput, {
+              mode: "outlined",
+              value: selectedPhoneCodeRef.current || '',
+              onChangeText: _ => {},
+              theme: {
+                colors: {
+                  primary: '#2D2B32',
+                  outline: '#E6E6E6'
+                }
+              },
+              style: [styles.textInput, {
+                width: 90,
+                marginEnd: 8,
+                marginTop: 6
+              }],
+              outlineStyle: {
+                borderRadius: 8,
+                borderWidth: 1.5
+              },
+              right: /*#__PURE__*/_jsx(TextInput.Icon, {
+                icon: () => /*#__PURE__*/_jsx(Image, {
+                  source: require('../../assets/images/chervon-down.png'),
+                  style: styles.imageStyle
+                })
+              }),
+              keyboardType: "number-pad",
+              onFocus: () => {
+                setPhoneTextFieldFocused(true);
+              },
+              onBlur: () => {
+                setPhoneTextFieldFocused(false);
+              }
+            }), /*#__PURE__*/_jsx(TextInput, {
+              mode: "outlined",
+              label: /*#__PURE__*/_jsx(Text, {
+                style: [styles.textFieldLable, {
+                  color: phoneTextFieldFocused ? '#2D2B32' : '#ADACB0'
+                }],
+                children: "Mobile Number*"
+              }),
+              value: phoneNumberTextField || '',
+              onChangeText: _ => {},
+              theme: {
+                colors: {
+                  primary: '#2D2B32',
+                  outline: '#E6E6E6'
+                }
+              },
+              style: [styles.textInput, {
+                flex: 1
+              }],
+              error: isPhoneNumberValid,
+              outlineStyle: {
+                borderRadius: 8,
+                borderWidth: 1.5
+              },
+              keyboardType: "number-pad",
+              onFocus: () => setPhoneTextFieldFocused(true),
+              onBlur: () => {
+                setPhoneTextFieldFocused(false);
+              }
+            })]
+          }), isPhoneNumberValid && /*#__PURE__*/_jsx(Text, {
+            style: styles.errorText,
+            children: mobileNumberErrorText
+          })]
+        }), (isShippingEnabled || isEmailEnabled) && /*#__PURE__*/_jsxs(_Fragment, {
+          children: [/*#__PURE__*/_jsx(TextInput, {
+            mode: "outlined",
+            label: /*#__PURE__*/_jsx(Text, {
+              style: [styles.textFieldLable, {
+                color: emailTextFieldFocused ? '#2D2B32' : '#ADACB0'
+              }],
+              children: "Email ID*"
+            }),
+            value: emailTextField || '',
+            onChangeText: it => {
+              onChangeEmailId(it);
+            },
+            theme: {
+              colors: {
+                primary: '#2D2B32',
+                outline: '#E6E6E6'
+              }
+            },
+            style: [styles.textInput, {
+              marginTop: 20,
+              marginHorizontal: 16
+            }],
+            error: isEmailValid,
+            outlineStyle: {
+              borderRadius: 8,
+              // Add this
+              borderWidth: 1.5
+            },
+            onFocus: () => {
+              setEmailTextFieldFocused(true);
+            },
+            onBlur: () => {
+              setEmailTextFieldFocused(false);
+            }
+          }), isEmailValid && /*#__PURE__*/_jsx(Text, {
+            style: styles.errorText,
+            children: emailIdErrorText
+          })]
+        }), isShippingEnabled && /*#__PURE__*/_jsxs(_Fragment, {
+          children: [/*#__PURE__*/_jsxs(View, {
+            style: [styles.container, {
+              alignItems: 'flex-start'
+            }],
+            children: [/*#__PURE__*/_jsxs(View, {
+              style: {
+                flex: 1
+              },
+              children: [/*#__PURE__*/_jsx(TextInput, {
+                mode: "outlined",
+                label: /*#__PURE__*/_jsx(Text, {
+                  style: [styles.textFieldLable, {
+                    color: pincodeTextFieldFocused ? '#2D2B32' : '#ADACB0'
+                  }],
+                  children: "ZIP/Postal code*"
+                }),
+                value: pinTextField || '',
+                onChangeText: it => {
+                  onChangePostalCode(it);
+                },
+                theme: {
+                  colors: {
+                    primary: '#2D2B32',
+                    outline: '#E6E6E6'
+                  }
+                },
+                style: [styles.textInput],
+                error: isPinValid,
+                outlineStyle: {
+                  borderRadius: 8,
+                  // Add this
+                  borderWidth: 1.5
+                },
+                keyboardType: "number-pad",
+                onFocus: () => {
+                  setPincodeTextFieldFocused(true);
+                },
+                onBlur: () => {
+                  setPincodeTextFieldFocused(false);
+                }
+              }), isPinValid && /*#__PURE__*/_jsx(Text, {
+                style: styles.errorText,
+                children: pinCodeErrorText
+              })]
+            }), /*#__PURE__*/_jsxs(View, {
+              style: {
+                flex: 1
+              },
+              children: [/*#__PURE__*/_jsx(TextInput, {
+                mode: "outlined",
+                label: /*#__PURE__*/_jsx(Text, {
+                  style: [styles.textFieldLable, {
+                    color: cityTextFieldFocused ? '#2D2B32' : '#ADACB0'
+                  }],
+                  children: "City*"
+                }),
+                value: cityTextField || '',
+                onChangeText: it => {
+                  onChangeCity(it);
+                },
+                theme: {
+                  colors: {
+                    primary: '#2D2B32',
+                    outline: '#E6E6E6'
+                  }
+                },
+                style: [styles.textInput, {
+                  marginStart: 8
+                }],
+                error: isCityValid,
+                outlineStyle: {
+                  borderRadius: 8,
+                  // Add this
+                  borderWidth: 1.5
+                },
+                onFocus: () => {
+                  setCityTextFieldFocused(true);
+                },
+                onBlur: () => {
+                  setCityTextFieldFocused(false);
+                }
+              }), isCityValid && /*#__PURE__*/_jsx(Text, {
+                style: styles.errorText,
+                children: cityErrorText
+              })]
+            })]
+          }), /*#__PURE__*/_jsx(TextInput, {
+            mode: "outlined",
+            label: /*#__PURE__*/_jsx(Text, {
+              style: [styles.textFieldLable, {
+                color: stateTextFieldFocused ? '#2D2B32' : '#ADACB0'
+              }],
+              children: "State*"
+            }),
+            value: stateTextField || '',
+            onChangeText: it => {
+              onChangeState(it);
+            },
+            theme: {
+              colors: {
+                primary: '#2D2B32',
+                outline: '#E6E6E6'
+              }
+            },
+            style: [styles.textInput, {
+              marginTop: 20,
+              marginHorizontal: 16
+            }],
+            error: isStateValid,
+            outlineStyle: {
+              borderRadius: 8,
+              // Add this
+              borderWidth: 1.5
+            },
+            onFocus: () => {
+              setStateTextFieldFocused(true);
+            },
+            onBlur: () => {
+              setStateTextFieldFocused(false);
+            }
+          }), isStateValid && /*#__PURE__*/_jsx(Text, {
+            style: styles.errorText,
+            children: stateErrorText
+          }), /*#__PURE__*/_jsx(TextInput, {
+            mode: "outlined",
+            label: /*#__PURE__*/_jsx(Text, {
+              style: [styles.textFieldLable, {
+                color: mainAddressTextFieldFocused ? '#2D2B32' : '#ADACB0'
+              }],
+              children: "House number, Apartment*"
+            }),
+            value: mainAddressTextField || '',
+            onChangeText: it => {
+              onChangeMainAddress(it);
+            },
+            theme: {
+              colors: {
+                primary: '#2D2B32',
+                outline: '#E6E6E6'
+              }
+            },
+            style: [styles.textInput, {
+              marginTop: 20,
+              marginHorizontal: 16
+            }],
+            error: isMainAddressValid,
+            outlineStyle: {
+              borderRadius: 8,
+              // Add this
+              borderWidth: 1.5
+            },
+            onFocus: () => {
+              setMainAddressTextFieldFocused(true);
+            },
+            onBlur: () => {
+              setMainAddressTextFieldFocused(false);
+            }
+          }), isMainAddressValid && /*#__PURE__*/_jsx(Text, {
+            style: styles.errorText,
+            children: mainAddressErrorText
+          }), /*#__PURE__*/_jsx(TextInput, {
+            mode: "outlined",
+            label: /*#__PURE__*/_jsx(Text, {
+              style: [styles.textFieldLable, {
+                color: secondaryAddressTextFieldFocused ? '#2D2B32' : '#ADACB0'
+              }],
+              children: "Area,Colony,Street, Sector"
+            }),
+            value: secondaryAddressTextField || '',
+            onChangeText: it => {
+              setSecondaryAddressTextField(it);
+            },
+            theme: {
+              colors: {
+                primary: '#2D2B32',
+                outline: '#E6E6E6'
+              }
+            },
+            style: [styles.textInput, {
+              marginTop: 20,
+              marginHorizontal: 16
+            }],
+            outlineStyle: {
+              borderRadius: 8,
+              // Add this
+              borderWidth: 1.5
+            },
+            onFocus: () => {
+              setSecondaryAddressTextFieldFocused(true);
+            },
+            onBlur: () => {
+              setSecondaryAddressTextFieldFocused(false);
+            }
+          })]
+        })]
+      })
+    }), /*#__PURE__*/_jsx(View, {
+      style: styles.bottomContainer,
+      children: /*#__PURE__*/_jsx(Pressable, {
+        style: [styles.buttonContainer, {
+          backgroundColor: checkoutDetails.brandColor
+        }],
+        onPress: () => {
+          // Todo add functon call
+          if (isAllDetailsValid()) {
+            const {
+              firstName,
+              lastName
+            } = extractNames(fullNameTextField);
+            setUserDataHandler({
+              userData: {
+                email: emailTextField,
+                firstName: firstName,
+                lastName: lastName,
+                phone: `${selectedPhoneCodeRef.current}${phoneNumberTextField}`,
+                uniqueId: userData.uniqueId,
+                dob: userData.dob,
+                pan: userData.pan,
+                address1: mainAddressTextField,
+                address2: secondaryAddressTextField,
+                city: cityTextField,
+                state: stateTextField,
+                pincode: pinTextField,
+                country: selectedCountryCode,
+                labelType: userData.labelType,
+                labelName: userData.labelName
+              }
+            });
+            onProceedBack();
+          }
+        },
+        children: /*#__PURE__*/_jsx(Text, {
+          style: styles.buttonText,
+          children: isShippingEnabled ? 'Save Address' : 'Save Personal Details'
+        })
+      })
+    })]
+  });
+};
+export default AddressScreen;
+//# sourceMappingURL=addressScreen.js.map