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

package/src/screens/mainScreen.tsx

@@ -13,10 +13,10 @@ import UpiScreen from '../screens/upiScreen';
 import { useIsFocused, type NavigationProp, type RouteProp } from "@react-navigation/native";
 import type { CheckoutStackParamList } from '../navigation';
 import { paymentHandler, setPaymentHandler } from "../sharedContext/paymentStatusHandler";
-import { loadCustomFonts, loadInterCustomFonts } from '../components/fontFamily';
-import { setUserDataHandler, userDataHandler } from '../sharedContext/userdataHandler';
-import { type PaymentResultObject, type PaymentClass, type InstrumentDetails, type PaymentMethod, type OrderItem, APIStatus, AnalyticsEvents, type DeliveryAddress, type BoxpayCheckoutProps } from '../interface';
-import { checkoutDetailsHandler, setCheckoutDetailsHandler } from '../sharedContext/checkoutDetailsHandler';
+import { loadBoxpayFonts } from '../components/fontFamily';
+import { setUserDataHandler, setUserDataHandlerToDefault, userDataHandler } from '../sharedContext/userdataHandler';
+import { type PaymentResultObject, type PaymentClass, type InstrumentDetails, type PaymentMethod, type OrderItem, APIStatus, AnalyticsEvents, type DeliveryAddress, type BoxpayCheckoutProps, type GetInstantOffersResponse, UIConfigurationOptions } from '../interface';
+import { checkoutDetailsHandler, setCheckoutDetailsHandler, setCheckOutDetailsHandlerToDefault } from '../sharedContext/checkoutDetailsHandler';
 import WebViewScreen from '../screens/webViewScreen';
 import styles from '../styles/indexStyles';
 import getSymbolFromCurrency from 'currency-symbol-map';
@@ -30,8 +30,10 @@ import fetchSessionDetails from '../postRequest/fetchSessionDetails';
 import MorePaymentMethods from '../components/morePaymentMethods';
 import { fetchSavedInstrumentsHandler, handleFetchStatusResponseHandler, handlePaymentResponse } from '../sharedContext/handlePaymentResponseHandler';
 import callUIAnalytics from '../postRequest/callUIAnalytics';
-import { formatAddress, useCountdown } from '../utility';
+import { formatAddress, getPhoneNumberCodeAndCountryName, useCountdown } from '../utility';
 import fetchSurCharge from '../postRequest/fetchSurcharge';
+import fetchInstantOffer from '../postRequest/fetchInstantOffer';
+import ApplyCouponCard from '../components/applyCouponCard';
 
 type MainScreenRouteProp = RouteProp<CheckoutStackParamList, 'MainScreen'>;
 
@@ -49,7 +51,8 @@ const MainScreen = ({route, navigation} : MainScreenProps) => {
     token,
     configurationOptions = null,
     onPaymentResult,
-    shopperToken = null
+    shopperToken = null,
+    uiConfiguration = null
   } = route.params as BoxpayCheckoutProps || {}; 
   const [status, setStatus] = useState('NOACTION');
   const [transactionId, setTransactionId] = useState('');
@@ -57,7 +60,7 @@ const MainScreen = ({route, navigation} : MainScreenProps) => {
   const appStateListenerRef = useRef<any>(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);
@@ -89,12 +92,19 @@ const MainScreen = ({route, navigation} : MainScreenProps) => {
 
   let isFirstTimeLoadRef = useRef(true);
 
+  const [appliedOffer, setAppliedOffer] = useState<GetInstantOffersResponse | null>(null)
+  const [appliedSurchargeAmount, setAppliedSurchargeAmount] = useState<number>(0)
+  const [instantOfferList , setInstantOfferList] = useState<GetInstantOffersResponse[]>([])
+  const [isOfferApplied, setIsOfferApplied] = useState(false)
+
+  const [selectedPaymentMethod, setSelectedPaymentMethod] = useState('')
+
   const handlePaymentIntent = async (selectedIntent: string) => {
     setLoadingState(true);
     const response = await upiPostRequest({
-      type: 'upi/intent',
+      type: checkoutDetailsHandler.checkoutDetails.isUPIOtmIntentMethodEnabled ? "upiotm/intent" : 'upi/intent',
       ...(selectedIntent && { upiAppDetails: { upiApp: selectedIntent } }), // Conditionally add upiAppDetails only if upiIntent is present
-    });
+    }, false);
     handlePaymentResponse({
       response: response,
       checkoutDetailsErrorMessage: checkoutDetailsHandler.checkoutDetails.errorMessage,
@@ -120,7 +130,8 @@ const MainScreen = ({route, navigation} : MainScreenProps) => {
   const handleUpiCollectPayment = async (
     upiId: string,
     instrumentRef: string,
-    type: string
+    type: string,
+    isSICheckBoxClicked : boolean
   ) => {
     const requestPayload: InstrumentDetails =
       type === 'Card'
@@ -129,13 +140,13 @@ const MainScreen = ({route, navigation} : MainScreenProps) => {
             savedCard: { instrumentRef: instrumentRef },
           }
         : {
-            type: 'upi/collect',
+            type: checkoutDetailsHandler.checkoutDetails.isUPIOtmCollectMethodEnabled ? "upiotm/collect" : 'upi/collect',
             upi: instrumentRef
               ? { instrumentRef: instrumentRef }
               : { shopperVpa: upiId },
           };
     setLoadingState(true);
-    const response = await upiPostRequest(requestPayload);
+    const response = await upiPostRequest(requestPayload, isSICheckBoxClicked);
     handlePaymentResponse({
       response: response,
       upiId: upiId,
@@ -171,7 +182,7 @@ const MainScreen = ({route, navigation} : MainScreenProps) => {
         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
       }
@@ -241,7 +252,6 @@ const MainScreen = ({route, navigation} : MainScreenProps) => {
   };
 
   const handleAppStateChange = (nextState: AppStateStatus) => {
-    console.log(nextState, isUpiOpeningRef.current);
   
     if (nextState === "active" && isUpiOpeningRef.current) {
       callFetchStatusApi();
@@ -256,7 +266,6 @@ const MainScreen = ({route, navigation} : MainScreenProps) => {
 
   const callFetchStatusApi = async () => {
     const response = await fetchStatus();
-    console.log(`${response} ===fetchs statur response`)
     handleFetchStatusResponseHandler({
         response: response,
         checkoutDetailsErrorMessage: checkoutDetailsHandler.checkoutDetails.errorMessage,
@@ -279,10 +288,14 @@ const MainScreen = ({route, navigation} : MainScreenProps) => {
   const onExitCheckout = () => {
     if (!loadingState) {
       stopExpireTimerCountDown();
+      setSessionExppireModalState(false)
+      setSuccessModalState(false)
       const mockPaymentResult: PaymentResultObject = {
         status: status,
         transactionId: transactionId,
       };
+      setUserDataHandlerToDefault()
+      setCheckOutDetailsHandlerToDefault()
       paymentHandler.onPaymentResult(mockPaymentResult);
       return true;
     }
@@ -311,12 +324,11 @@ const MainScreen = ({route, navigation} : MainScreenProps) => {
     );
 
     return () => backHandler.remove();
-  });
+  }, [navigation]);
 
   useEffect(() => {
     async function loadFonts() {
-      await loadCustomFonts();
-      await loadInterCustomFonts();
+      await loadBoxpayFonts()
     }
     loadFonts()
 
@@ -340,31 +352,66 @@ const MainScreen = ({route, navigation} : MainScreenProps) => {
                   isNetbankingVisible: false,
                   isEMIVisible: false,
                   isBNPLVisible: false,
+                  isUPIOtmIntentVisible : false,
+                  isUPIOtmCollectVisible :false,
+                  isUPIOtmQRVisible : false
                 };
                 
                 paymentMethods.forEach((method: PaymentMethod) => {
-                  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: string | undefined =
                   paymentDetails?.money?.currencyCode;
                 const symbol = currencyCode
@@ -415,7 +462,7 @@ const MainScreen = ({route, navigation} : MainScreenProps) => {
                 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;
@@ -425,7 +472,7 @@ const MainScreen = ({route, navigation} : MainScreenProps) => {
                   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}`
@@ -444,12 +491,15 @@ const MainScreen = ({route, navigation} : MainScreenProps) => {
                 } 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,
@@ -458,7 +508,8 @@ const MainScreen = ({route, navigation} : MainScreenProps) => {
                     city: cityRef,
                     state: stateRef,
                     pincode: postalCodeRef,
-                    country: countryCodeRef,
+                    countryCode: countryCodeRef,
+                    countryName : selectedCountry?.fullName ?? "India",
                     labelType: labelTypeRef,
                     labelName: labelNameRef,
                   },
@@ -483,8 +534,26 @@ const MainScreen = ({route, navigation} : MainScreenProps) => {
                     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:
@@ -510,15 +579,18 @@ const MainScreen = ({route, navigation} : MainScreenProps) => {
                     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'),
+                    isSICheckboxVisible : configurationOptions?.SHOW_SI_CHECKBOX ? true : false,
+                    isSubscriptionCheckout : paymentDetails.subscriptionDetails != null ? true : false
                   },
                 });
                 setPaymentHandler({
                   onPaymentResult: onPaymentResult,
                 });
-                if(shopperToken != null && shopperToken != "") {
-                  getRecommendedInstruments()
-                }
                 handleSurchargeDetails()
                 callUIAnalytics(AnalyticsEvents.CHECKOUT_LOADED,"Index Screen Session Loaded","")
               break;
@@ -546,30 +618,90 @@ const MainScreen = ({route, navigation} : MainScreenProps) => {
     switch (response.apiStatus) {
       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("")
+        }
+        break
+      }
+      case APIStatus.Failed : {
+        getInstantOfferDetails("")
+        break
+      }
+
+      default : {
+        getInstantOfferDetails("")
+        break
+      }
+    }
+  }
+
+  const getInstantOfferDetails = async(amount : string) => {
+    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: GetInstantOffersResponse) => it.code === appliedOffer.code) ?? null;
+        setAppliedOffer(offer)
+        setInstantOfferList(data)
+        } catch(e) {
+          
         }
-        setIsFirstLoading(false)
+        
+        callRecommendedOrStopLoding()
         break
       }
       case APIStatus.Failed : {
-        setIsFirstLoading(false)
+        callRecommendedOrStopLoding()
         break
       }
 
       default : {
-        setIsFirstLoading(false)
+        callRecommendedOrStopLoding()
         break
       }
     }
   }
 
+  const callRecommendedOrStopLoding =async() => {
+    if(shopperToken != null && shopperToken != "") {
+      getRecommendedInstruments()
+    } else {
+      setIsFirstLoading(false)
+    }
+  }
+
+
+  const onClickCoupon = (code : string) => {
+    console.log(`selected code is ${code}`)
+  }
+  const onClickRemoveCoupon = () => {
+    console.log("onclide removed coipon is clided")
+  }
+
   const handleRecommendedSectionClick = (instrumentValue: string) => {
     const updatedList = recommendedInstrumentsArray.map((item) => ({
       ...item,
@@ -672,7 +804,7 @@ const MainScreen = ({route, navigation} : MainScreenProps) => {
                 if(checkoutDetailsHandler.checkoutDetails.shopperToken != null && checkoutDetailsHandler.checkoutDetails.shopperToken != "") {
                   navigation.navigate("SavedAddressScreen", {})
                 } else {
-                  navigation.navigate("AddressScreen", {})
+                  navigation.navigate("AddressScreen", {isNewAddress : address == ""})
                 }
               }}/>
 
@@ -682,7 +814,7 @@ const MainScreen = ({route, navigation} : MainScreenProps) => {
                     style={styles.container}
                   >
                     <Text
-                      style={styles.headingText}
+                      style={[styles.headingText, {fontFamily: checkoutDetailsHandler.checkoutDetails.fontFamily.semiBold,}]}
                     >
                       Recommended
                     </Text>
@@ -696,7 +828,8 @@ const MainScreen = ({route, navigation} : MainScreenProps) => {
                         handleUpiCollectPayment(
                           displayValue,
                           instrumentValue,
-                          type
+                          type,
+                          false
                         )
                       }
                       errorImage={require('../../assets/images/ic_upi.png')}
@@ -710,11 +843,11 @@ const MainScreen = ({route, navigation} : MainScreenProps) => {
               )}
 
               <UpiScreen
-                handleUpiPayment={(selectedIntent) =>
+                handleUpiPayment={(selectedIntent : string) =>
                   handlePaymentIntent(selectedIntent)
                 }
-                handleCollectPayment={(displayValue, instrumentValue, type) =>
-                  handleUpiCollectPayment(displayValue, instrumentValue, type)
+                handleCollectPayment={(displayValue : string, instrumentValue : string, type : string) =>
+                  handleUpiCollectPayment(displayValue, instrumentValue, type, false)
                 }
                 savedUpiArray={savedUpiArray}
                 onClickRadio={handleSavedUpiSectionClick}
@@ -732,7 +865,7 @@ const MainScreen = ({route, navigation} : MainScreenProps) => {
               {savedCardArray.length != 0 && (
                 <View>
                   <Text
-                    style={styles.headingText}
+                    style={[styles.headingText, {fontFamily: checkoutDetailsHandler.checkoutDetails.fontFamily.semiBold,}]}
                   >
                     Credit & Debit Cards
                   </Text>
@@ -741,12 +874,12 @@ const MainScreen = ({route, navigation} : MainScreenProps) => {
                   >
                     <SavedCardComponentView
                       savedCards={savedCardArray}
-                      onProceedForward={(instrumentValue) => {
-                        handleUpiCollectPayment('', instrumentValue, 'Card');
+                      onProceedForward={(instrumentValue : string, isSICheckBoxClicked : boolean) => {
+                        handleUpiCollectPayment('', instrumentValue, 'Card', isSICheckBoxClicked);
                       }}
                       errorImage={require('../../assets/images/ic_card.png')}
                       onClickAddCard={() => navigation.navigate("CardScreen", {})}
-                      onClickRadio={(selectedInstrumentRef) =>{
+                      onClickRadio={(selectedInstrumentRef : string) =>{
                         stopQRTimer()
                         handleSavedCardSectionClick(selectedInstrumentRef)
                       }
@@ -755,10 +888,52 @@ const MainScreen = ({route, navigation} : MainScreenProps) => {
                   </View>
                 </View>
               )}
-              <MorePaymentMethods savedCards={savedCardArray} stopTimer={stopQRTimer}/>
-              <View>
+              <MorePaymentMethods savedCards={savedCardArray} stopTimer={stopQRTimer} setSelectedPaymentMethod={setSelectedPaymentMethod} surchargeDetails={surchargeDetails}/>
+              {instantOfferList.length != 0 && (
+                <View
+                  style={{
+                    marginVertical: 8,
+                    marginHorizontal: 16,
+                    paddingBottom: 16,
+                  }}
+                >
+                  <Text
+                  style={[styles.headingText, {fontFamily: checkoutDetailsHandler.checkoutDetails.fontFamily.semiBold,}]}
+                >
+                  Apply Coupon
+                </Text>
+                <ApplyCouponCard
+                selectedColor = {checkoutDetailsHandler.checkoutDetails.buttonColor}
+                code={appliedOffer?.code ?? ""}
+                description={appliedOffer?.description ?? ""}
+                discountAmount={appliedOffer?.discount?.amount?.toString() ?? ""}
+                currencySymbol={checkoutDetailsHandler.checkoutDetails.currencySymbol}
+                isCodeApplied = {isOfferApplied}
+                onClickApply={(code : string) => {
+                  const offer = instantOfferList.find((it: GetInstantOffersResponse) => 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
+                  })
+                }}
+                />
+                </View>
+              )}
+              {checkoutDetailsHandler.checkoutDetails.isOrderItemDetailsVisible && (
+                <View>
                 <Text
-                  style={styles.headingText}
+                  style={[styles.headingText, {fontFamily: checkoutDetailsHandler.checkoutDetails.fontFamily.semiBold,}]}
                 >
                   Order Summary
                 </Text>
@@ -766,19 +941,21 @@ const MainScreen = ({route, navigation} : MainScreenProps) => {
                 <OrderDetails
                   subTotalAmount={subTotalAmountRef.current}
                   shippingAmount={shippingAmountRef.current}
-                  totalAmount={amount}
+                  totalAmount={appliedSurchargeAmount != 0 ? appliedSurchargeAmount.toString() : amount.toString()}
                   itemsArray={orderItemsArrayRef.current}
                   taxAmount={taxAmountRef.current}
                   surchargeDetails={surchargeDetails}
+                  selectedPaymentMethod={selectedPaymentMethod}
                 />
               </View>
+              )}
 
               {/* Secured by BoxPay - Fixed at Bottom */}
               <View
                 style={styles.footerContainer}
               >
                 <Text
-                  style={styles.footerText}
+                  style={[styles.footerText, {fontFamily: checkoutDetailsHandler.checkoutDetails.fontFamily.medium,}]}
                 >
                   Secured by
                 </Text>