boxpay-checkout-reactnative-sdk
Version:
Boxpay Payment Gateway
646 lines (637 loc) • 22.8 kB
JavaScript
"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 { extractNames } from "../utility.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(() => {
BackHandler.addEventListener('hardwareBackPress', () => {
return onProceedBack(); // Allow back navigation if not loading
});
});
const onChangeFullName = updatedText => {
setFullNameTextField(updatedText);
const trimmedText = updatedText.trim();
if (trimmedText === '') {
setFullNameErrorText('Required');
setIsFullNameValid(true);
} else {
setFullNameErrorText('');
setIsFullNameValid(false);
}
};
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