boxpay-checkout-reactnative-sdk 1.0.4-beta1 → 1.0.5

package/lib/module/screens/mainScreen.js

@@ -14,10 +14,10 @@ import fetchStatus from "../postRequest/fetchStatus.js";
 import UpiScreen from "../screens/upiScreen.js";
 import { useIsFocused } from "@react-navigation/native";
 import { paymentHandler, setPaymentHandler } from "../sharedContext/paymentStatusHandler.js";
-import { loadCustomFonts, loadInterCustomFonts } from "../components/fontFamily.js";
-import { setUserDataHandler, userDataHandler } from "../sharedContext/userdataHandler.js";
-import { APIStatus, AnalyticsEvents } from "../interface.js";
-import { checkoutDetailsHandler, setCheckoutDetailsHandler } from "../sharedContext/checkoutDetailsHandler.js";
+import { loadBoxpayFonts } from "../components/fontFamily.js";
+import { setUserDataHandler, setUserDataHandlerToDefault, userDataHandler } from "../sharedContext/userdataHandler.js";
+import { APIStatus, AnalyticsEvents, UIConfigurationOptions } from "../interface.js";
+import { checkoutDetailsHandler, setCheckoutDetailsHandler, setCheckOutDetailsHandlerToDefault } from "../sharedContext/checkoutDetailsHandler.js";
 import WebViewScreen from "../screens/webViewScreen.js";
 import styles from "../styles/indexStyles.js";
 import getSymbolFromCurrency from 'currency-symbol-map';
@@ -30,8 +30,10 @@ import fetchSessionDetails from "../postRequest/fetchSessionDetails.js";
 import MorePaymentMethods from "../components/morePaymentMethods.js";
 import { fetchSavedInstrumentsHandler, handleFetchStatusResponseHandler, handlePaymentResponse } from "../sharedContext/handlePaymentResponseHandler.js";
 import callUIAnalytics from "../postRequest/callUIAnalytics.js";
-import { formatAddress, useCountdown } from "../utility.js";
+import { formatAddress, getPhoneNumberCodeAndCountryName, useCountdown } from "../utility.js";
 import fetchSurCharge from "../postRequest/fetchSurcharge.js";
+import fetchInstantOffer from "../postRequest/fetchInstantOffer.js";
+import ApplyCouponCard from "../components/applyCouponCard.js";
 
 // Define the screen's navigation properties
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
@@ -43,7 +45,8 @@ const MainScreen = ({
     token,
     configurationOptions = null,
     onPaymentResult,
-    shopperToken = null
+    shopperToken = null,
+    uiConfiguration = null
   } = route.params || {};
   const [status, setStatus] = useState('NOACTION');
   const [transactionId, setTransactionId] = useState('');
@@ -51,7 +54,7 @@ const MainScreen = ({
   const appStateListenerRef = useRef(null);
   const [loadingState, setLoadingState] = useState(false);
   const [isFirstLoading, setIsFirstLoading] = useState(true);
-  const [amount, setAmount] = useState('');
+  const [amount, setAmount] = useState(0);
   const totalItemsRef = useRef(0);
   const [address, setAddress] = useState('');
   const [failedModalOpen, setFailedModalState] = useState(false);
@@ -79,10 +82,15 @@ const MainScreen = ({
     stop: stopQRTimer
   } = useCountdown(300);
   let isFirstTimeLoadRef = useRef(true);
+  const [appliedOffer, setAppliedOffer] = useState(null);
+  const [appliedSurchargeAmount, setAppliedSurchargeAmount] = useState(0);
+  const [instantOfferList, setInstantOfferList] = useState([]);
+  const [isOfferApplied, setIsOfferApplied] = useState(false);
+  const [selectedPaymentMethod, setSelectedPaymentMethod] = useState('');
   const handlePaymentIntent = async selectedIntent => {
     setLoadingState(true);
     const response = await upiPostRequest({
-      type: 'upi/intent',
+      type: checkoutDetailsHandler.checkoutDetails.isUPIOtmIntentMethodEnabled ? "upiotm/intent" : 'upi/intent',
       ...(selectedIntent && {
         upiAppDetails: {
           upiApp: selectedIntent
@@ -119,7 +127,7 @@ const MainScreen = ({
         instrumentRef: instrumentRef
       }
     } : {
-      type: 'upi/collect',
+      type: checkoutDetailsHandler.checkoutDetails.isUPIOtmCollectMethodEnabled ? "upiotm/collect" : 'upi/collect',
       upi: instrumentRef ? {
         instrumentRef: instrumentRef
       } : {
@@ -164,7 +172,7 @@ const MainScreen = ({
         city: userDataHandler.userData.city,
         state: userDataHandler.userData.state,
         postalCode: userDataHandler.userData.pincode,
-        countryCode: userDataHandler.userData.country,
+        countryCode: userDataHandler.userData.countryCode,
         labelName: userDataHandler.userData.labelName,
         labelType: userDataHandler.userData.labelType
       };
@@ -216,7 +224,6 @@ const MainScreen = ({
     }
   };
   const handleAppStateChange = nextState => {
-    console.log(nextState, isUpiOpeningRef.current);
     if (nextState === "active" && isUpiOpeningRef.current) {
       callFetchStatusApi();
     }
@@ -228,7 +235,6 @@ const MainScreen = ({
   };
   const callFetchStatusApi = async () => {
     const response = await fetchStatus();
-    console.log(`${response} ===fetchs statur response`);
     handleFetchStatusResponseHandler({
       response: response,
       checkoutDetailsErrorMessage: checkoutDetailsHandler.checkoutDetails.errorMessage,
@@ -250,10 +256,14 @@ const MainScreen = ({
   const onExitCheckout = () => {
     if (!loadingState) {
       stopExpireTimerCountDown();
+      setSessionExppireModalState(false);
+      setSuccessModalState(false);
       const mockPaymentResult = {
         status: status,
         transactionId: transactionId
       };
+      setUserDataHandlerToDefault();
+      setCheckOutDetailsHandlerToDefault();
       paymentHandler.onPaymentResult(mockPaymentResult);
       return true;
     }
@@ -275,11 +285,10 @@ const MainScreen = ({
     };
     const backHandler = BackHandler.addEventListener('hardwareBackPress', backAction);
     return () => backHandler.remove();
-  });
+  }, [navigation]);
   useEffect(() => {
     async function loadFonts() {
-      await loadCustomFonts();
-      await loadInterCustomFonts();
+      await loadBoxpayFonts();
     }
     loadFonts();
     async function loadSession() {
@@ -302,30 +311,58 @@ const MainScreen = ({
                   isWalletVisible: false,
                   isNetbankingVisible: false,
                   isEMIVisible: false,
-                  isBNPLVisible: false
+                  isBNPLVisible: false,
+                  isUPIOtmIntentVisible: false,
+                  isUPIOtmCollectVisible: false,
+                  isUPIOtmQRVisible: false
                 };
                 paymentMethods.forEach(method => {
-                  if (method.type === 'Upi') {
-                    if (method.brand === 'UpiIntent') {
-                      methodFlags.isUPIIntentVisible = true;
-                    } else if (method.brand === 'UpiCollect') {
-                      methodFlags.isUPICollectVisible = true;
-                    } else if (method.brand === 'UpiQr') {
-                      methodFlags.isUPIQRVisible = true;
-                    }
-                  } else if (method.type === 'Card') {
-                    methodFlags.isCardsVisible = true;
-                  } else if (method.type === 'Wallet') {
-                    methodFlags.isWalletVisible = true;
-                  } else if (method.type === 'NetBanking') {
-                    methodFlags.isNetbankingVisible = true;
-                  } else if (method.type === 'Emi') {
-                    methodFlags.isEMIVisible = true;
-                  } else if (method.type === 'BuyNowPayLater') {
-                    methodFlags.isBNPLVisible = true;
+                  switch (method.type) {
+                    case 'Upi':
+                      setSelectedPaymentMethod('upi');
+                      switch (method.brand) {
+                        case 'UpiIntent':
+                          methodFlags.isUPIIntentVisible = true;
+                          break;
+                        case 'UpiCollect':
+                          methodFlags.isUPICollectVisible = true;
+                          break;
+                        case 'UpiQr':
+                          methodFlags.isUPIQRVisible = true;
+                          break;
+                      }
+                      break;
+                    case 'UpiOneTimeMandate':
+                      switch (method.brand) {
+                        case 'UpiIntentOtm':
+                          methodFlags.isUPIOtmIntentVisible = true;
+                          break;
+                        case 'UpiCollectOtm':
+                          methodFlags.isUPIOtmCollectVisible = true;
+                          break;
+                        case 'UpiQrOtm':
+                          methodFlags.isUPIOtmQRVisible = true;
+                          break;
+                      }
+                      break;
+                    case 'Card':
+                      methodFlags.isCardsVisible = true;
+                      break;
+                    case 'Wallet':
+                      methodFlags.isWalletVisible = true;
+                      break;
+                    case 'NetBanking':
+                      methodFlags.isNetbankingVisible = true;
+                      break;
+                    case 'Emi':
+                      methodFlags.isEMIVisible = true;
+                      break;
+                    case 'BuyNowPayLater':
+                      methodFlags.isBNPLVisible = true;
+                      break;
                   }
                 });
-                setAmount(paymentDetails.money.amountLocaleFull);
+                setAmount(paymentDetails.money.amount);
                 const currencyCode = paymentDetails?.money?.currencyCode;
                 const symbol = currencyCode ? getSymbolFromCurrency(currencyCode) ?? '₹' : '₹';
                 if (paymentDetails.order != null && paymentDetails.order.items != null) {
@@ -357,7 +394,7 @@ const MainScreen = ({
                 let cityRef = null;
                 let stateRef = null;
                 let postalCodeRef = null;
-                let countryCodeRef = null;
+                let countryCodeRef = "IN";
                 if (paymentDetails.shopper.deliveryAddress != null) {
                   const deliveryObject = paymentDetails.shopper.deliveryAddress;
                   labelTypeRef = deliveryObject.labelType;
@@ -367,7 +404,7 @@ const MainScreen = ({
                   cityRef = deliveryObject.city;
                   stateRef = deliveryObject.state;
                   postalCodeRef = deliveryObject.postalCode;
-                  countryCodeRef = deliveryObject.countryCode;
+                  countryCodeRef = deliveryObject.countryCode ?? "IN";
                   if (address2Ref == null || address2Ref == '') {
                     setAddress(`${address1Ref}, ${cityRef}, ${stateRef}, ${postalCodeRef}`);
                   } else {
@@ -382,12 +419,14 @@ const MainScreen = ({
                 } else if (['EXPIRED'].includes(response.data.status)) {
                   setSessionExppireModalState(true);
                 }
+                const selectedCountry = getPhoneNumberCodeAndCountryName(countryCodeRef);
                 setUserDataHandler({
                   userData: {
                     email: emailRef,
                     firstName: firstNameRef,
                     lastName: lastNameRef,
-                    phone: phoneRef,
+                    completePhoneNumber: phoneRef,
+                    phoneCode: selectedCountry?.isdCode ?? "+91",
                     uniqueId: uniqueIdRef,
                     dob: dobRef,
                     pan: panRef,
@@ -396,7 +435,8 @@ const MainScreen = ({
                     city: cityRef,
                     state: stateRef,
                     pincode: postalCodeRef,
-                    country: countryCodeRef,
+                    countryCode: countryCodeRef,
+                    countryName: selectedCountry?.fullName ?? "India",
                     labelType: labelTypeRef,
                     labelName: labelNameRef
                   }
@@ -414,7 +454,24 @@ const MainScreen = ({
                     currencyCode: currencyCode,
                     amount: paymentDetails.money.amountLocaleFull,
                     token: token,
-                    brandColor: response.data.merchantDetails.checkoutTheme.primaryButtonColor,
+                    fontFamily: uiConfiguration?.[UIConfigurationOptions.FontFamily] ? {
+                      regular: uiConfiguration[UIConfigurationOptions.FontFamily]?.regular ?? 'Poppins-Regular',
+                      medium: uiConfiguration[UIConfigurationOptions.FontFamily]?.medium ?? 'Poppins-Medium',
+                      semiBold: uiConfiguration[UIConfigurationOptions.FontFamily]?.semiBold ?? 'Poppins-SemiBold',
+                      bold: uiConfiguration[UIConfigurationOptions.FontFamily]?.bold ?? 'Poppins-Bold',
+                      extraBold: uiConfiguration[UIConfigurationOptions.FontFamily]?.extraBold ?? 'Poppins-ExtraBold'
+                    } : {
+                      regular: 'Poppins-Regular',
+                      medium: 'Poppins-Medium',
+                      semiBold: 'Poppins-SemiBold',
+                      bold: 'Poppins-Bold',
+                      extraBold: 'Poppins-ExtraBold'
+                    },
+                    ctaBorderRadius: uiConfiguration?.[UIConfigurationOptions.CTABorderRadius] ? uiConfiguration[UIConfigurationOptions.CTABorderRadius] : 12,
+                    buttonColor: response.data.merchantDetails.checkoutTheme.primaryButtonColor,
+                    buttonTextColor: response.data.merchantDetails.checkoutTheme.buttonTextColor,
+                    headerColor: response.data.merchantDetails.checkoutTheme.headerColor,
+                    headerTextColor: response.data.merchantDetails.checkoutTheme.headerTextColor,
                     env: checkoutDetailsHandler.checkoutDetails.env,
                     itemsLength: totalItemsRef.current,
                     errorMessage: 'You may have cancelled the payment or there was a delay in response. Please retry.',
@@ -439,15 +496,16 @@ const MainScreen = ({
                     isWalletMethodEnabled: methodFlags.isWalletVisible,
                     isNetBankingMethodEnabled: methodFlags.isNetbankingVisible,
                     isEmiMethodEnabled: methodFlags.isEMIVisible,
-                    isBnplMethodEnabled: methodFlags.isBNPLVisible
+                    isBnplMethodEnabled: methodFlags.isBNPLVisible,
+                    isUPIOtmCollectMethodEnabled: methodFlags.isUPIOtmCollectVisible,
+                    isUPIOtmIntentMethodEnabled: methodFlags.isUPIIntentVisible,
+                    isUPIOtmQRMethodEnabled: methodFlags.isUPIOtmQRVisible,
+                    isOrderItemDetailsVisible: isFieldEnabled('ORDER_ITEM_DETAILS')
                   }
                 });
                 setPaymentHandler({
                   onPaymentResult: onPaymentResult
                 });
-                if (shopperToken != null && shopperToken != "") {
-                  getRecommendedInstruments();
-                }
                 handleSurchargeDetails();
                 callUIAnalytics(AnalyticsEvents.CHECKOUT_LOADED, "Index Screen Session Loaded", "");
                 break;
@@ -477,30 +535,81 @@ const MainScreen = ({
       case APIStatus.Success:
         {
           const data = response.data;
-          if (data.appliedSurcharges.length != 0) {
-            const surcharge = data.appliedSurcharges.map(item => ({
-              title: item.surchargeDetails.title,
-              amount: item.calculatedSurchargeFee
-            }));
-            setSurchargeDetails(surcharge);
-            checkoutDetailsHandler.checkoutDetails.amount = data.finalAmountAfterSurcharge.amount.toLocaleString();
-            setAmount(data.finalAmountAfterSurcharge.amount.toLocaleString());
+          try {
+            if (data.appliedSurcharges.length != 0) {
+              const surcharge = data.appliedSurcharges.map(item => ({
+                title: item.surchargeDetails.title,
+                amount: item.calculatedSurchargeFee,
+                applicable: item.surchargeDetails.applicableOn
+              }));
+              let sum = 0;
+              surcharge.map(item => {
+                if (item.applicable === 'Upi' || item.applicable === '') {
+                  sum += item.amount;
+                }
+              }, 0);
+              setAppliedSurchargeAmount(sum + amount);
+              setSurchargeDetails(surcharge);
+              getInstantOfferDetails((sum + amount).toString());
+            } else {
+              getInstantOfferDetails("");
+            }
+          } catch (e) {
+            getInstantOfferDetails("");
           }
-          setIsFirstLoading(false);
           break;
         }
       case APIStatus.Failed:
         {
-          setIsFirstLoading(false);
+          getInstantOfferDetails("");
+          break;
+        }
+      default:
+        {
+          getInstantOfferDetails("");
+          break;
+        }
+    }
+  };
+  const getInstantOfferDetails = async amount => {
+    const response = await fetchInstantOffer(amount);
+    switch (response.apiStatus) {
+      case APIStatus.Success:
+        {
+          const data = response.data;
+          try {
+            const offer = appliedOffer == null ? data?.[0] ?? null : data.find(it => it.code === appliedOffer.code) ?? null;
+            setAppliedOffer(offer);
+            setInstantOfferList(data);
+          } catch (e) {}
+          callRecommendedOrStopLoding();
+          break;
+        }
+      case APIStatus.Failed:
+        {
+          callRecommendedOrStopLoding();
           break;
         }
       default:
         {
-          setIsFirstLoading(false);
+          callRecommendedOrStopLoding();
           break;
         }
     }
   };
+  const callRecommendedOrStopLoding = async () => {
+    if (shopperToken != null && shopperToken != "") {
+      getRecommendedInstruments();
+    } else {
+      setIsFirstLoading(false);
+    }
+  };
+  const onClickCoupon = code => {
+    console.log(`selected code is ${code}`);
+  };
+  const onClickRemoveCoupon = () => {
+    console.log("onclide removed coipon is clided");
+  };
   const handleRecommendedSectionClick = instrumentValue => {
     const updatedList = recommendedInstrumentsArray.map(item => ({
       ...item,
@@ -594,14 +703,18 @@ const MainScreen = ({
             if (checkoutDetailsHandler.checkoutDetails.shopperToken != null && checkoutDetailsHandler.checkoutDetails.shopperToken != "") {
               navigation.navigate("SavedAddressScreen", {});
             } else {
-              navigation.navigate("AddressScreen", {});
+              navigation.navigate("AddressScreen", {
+                isNewAddress: address == ""
+              });
             }
           }
         }), recommendedInstrumentsArray.length > 0 && /*#__PURE__*/_jsxs(_Fragment, {
           children: [/*#__PURE__*/_jsx(View, {
             style: styles.container,
             children: /*#__PURE__*/_jsx(Text, {
-              style: styles.headingText,
+              style: [styles.headingText, {
+                fontFamily: checkoutDetailsHandler.checkoutDetails.fontFamily.semiBold
+              }],
               children: "Recommended"
             })
           }), /*#__PURE__*/_jsx(View, {
@@ -632,7 +745,9 @@ const MainScreen = ({
           setFailedModalMessage: msg => paymentFailedMessage.current = msg
         }), savedCardArray.length != 0 && /*#__PURE__*/_jsxs(View, {
           children: [/*#__PURE__*/_jsx(Text, {
-            style: styles.headingText,
+            style: [styles.headingText, {
+              fontFamily: checkoutDetailsHandler.checkoutDetails.fontFamily.semiBold
+            }],
             children: "Credit & Debit Cards"
           }), /*#__PURE__*/_jsx(View, {
             style: styles.paymentContainer,
@@ -651,23 +766,67 @@ const MainScreen = ({
           })]
         }), /*#__PURE__*/_jsx(MorePaymentMethods, {
           savedCards: savedCardArray,
-          stopTimer: stopQRTimer
-        }), /*#__PURE__*/_jsxs(View, {
+          stopTimer: stopQRTimer,
+          setSelectedPaymentMethod: setSelectedPaymentMethod,
+          surchargeDetails: surchargeDetails
+        }), instantOfferList.length != 0 && /*#__PURE__*/_jsxs(View, {
+          style: {
+            marginVertical: 8,
+            marginHorizontal: 16,
+            paddingBottom: 16
+          },
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: [styles.headingText, {
+              fontFamily: checkoutDetailsHandler.checkoutDetails.fontFamily.semiBold
+            }],
+            children: "Apply Coupon"
+          }), /*#__PURE__*/_jsx(ApplyCouponCard, {
+            selectedColor: checkoutDetailsHandler.checkoutDetails.buttonColor,
+            code: appliedOffer?.code ?? "",
+            description: appliedOffer?.description ?? "",
+            discountAmount: appliedOffer?.discount?.amount?.toString() ?? "",
+            currencySymbol: checkoutDetailsHandler.checkoutDetails.currencySymbol,
+            isCodeApplied: isOfferApplied,
+            onClickApply: code => {
+              const offer = instantOfferList.find(it => it.code === code) ?? null;
+              setAppliedOffer(offer);
+              setIsOfferApplied(true);
+            },
+            onClickRemove: () => {
+              setAppliedOffer(instantOfferList[0] ?? null);
+              setIsOfferApplied(false);
+            },
+            onClickViewAll: () => {
+              navigation.navigate("InstantOfferScreen", {
+                couponList: instantOfferList,
+                selectedCouponCode: appliedOffer?.code ?? "",
+                selectedColor: checkoutDetailsHandler.checkoutDetails.buttonColor,
+                onClickCoupon: onClickCoupon,
+                onClickRemoveCoupon: onClickRemoveCoupon
+              });
+            }
+          })]
+        }), checkoutDetailsHandler.checkoutDetails.isOrderItemDetailsVisible && /*#__PURE__*/_jsxs(View, {
           children: [/*#__PURE__*/_jsx(Text, {
-            style: styles.headingText,
+            style: [styles.headingText, {
+              fontFamily: checkoutDetailsHandler.checkoutDetails.fontFamily.semiBold
+            }],
             children: "Order Summary"
           }), /*#__PURE__*/_jsx(OrderDetails, {
             subTotalAmount: subTotalAmountRef.current,
             shippingAmount: shippingAmountRef.current,
-            totalAmount: amount,
+            totalAmount: appliedSurchargeAmount != 0 ? appliedSurchargeAmount.toString() : amount.toString(),
             itemsArray: orderItemsArrayRef.current,
             taxAmount: taxAmountRef.current,
-            surchargeDetails: surchargeDetails
+            surchargeDetails: surchargeDetails,
+            selectedPaymentMethod: selectedPaymentMethod
           })]
         }), /*#__PURE__*/_jsxs(View, {
           style: styles.footerContainer,
           children: [/*#__PURE__*/_jsx(Text, {
-            style: styles.footerText,
+            style: [styles.footerText, {
+              fontFamily: checkoutDetailsHandler.checkoutDetails.fontFamily.medium
+            }],
             children: "Secured by"
           }), /*#__PURE__*/_jsx(Image, {
             source: require('../../assets/images/splash-icon.png'),