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

package/src/components/savedAddressBottomSheet.tsx

@@ -7,6 +7,7 @@ import {
   type ImageSourcePropType,
 } from "react-native";
 import Modal from "react-native-modal";
+import { checkoutDetailsHandler } from "../sharedContext/checkoutDetailsHandler";
 
 interface Props {
   visible: boolean;
@@ -29,6 +30,7 @@ const SavedAddressBottomSheet = ({
   address,
   icon,
 }: Props) => {
+  const {checkoutDetails} = checkoutDetailsHandler
   return (
     <Modal
       isVisible={visible}
@@ -41,25 +43,25 @@ const SavedAddressBottomSheet = ({
         <View>
           <View style={styles.headerContainer}>
             <Image source={icon} style={styles.icon} />
-            <Text style={styles.label}>{label}</Text>
+            <Text style={[styles.label, {fontFamily:checkoutDetails.fontFamily.semiBold,}]}>{label}</Text>
           </View>
-          <Text style={styles.address} numberOfLines={1} ellipsizeMode="tail">
+          <Text style={[styles.address, {fontFamily: checkoutDetails.fontFamily.regular,}]} numberOfLines={1} ellipsizeMode="tail">
               {address}
             </Text>
         </View>
 
         {/* Options */}
         <TouchableOpacity style={styles.option} onPress={onEdit}>
-          <Text style={styles.optionText}>Edit</Text>
+          <Text style={[styles.optionText, {fontFamily: checkoutDetails.fontFamily.regular}]}>Edit</Text>
         </TouchableOpacity>
 
         <TouchableOpacity style={styles.option} onPress={onSetDefault}>
-          <Text style={styles.optionText}>Set as Default</Text>
+          <Text style={[styles.optionText, {fontFamily: checkoutDetails.fontFamily.regular}]}>Set as Default</Text>
         </TouchableOpacity>
 
         {/* Delete Option */}
         <TouchableOpacity style={styles.deleteOption} onPress={onDelete}>
-          <Text style={styles.deleteText}>Delete address</Text>
+          <Text style={[styles.deleteText, { fontFamily: checkoutDetails.fontFamily.regular}]}>Delete address</Text>
         </TouchableOpacity>
       </View>
     </Modal>
@@ -88,13 +90,11 @@ const styles = StyleSheet.create({
   },
   label: {
     fontSize: 16,
-    fontFamily:"Poppins-SemiBold",
     color: "#2D2B32",
   },
   address: {
     fontSize: 14,
     color: "#4F4D55",
-    fontFamily:"Poppins-Regular",
     marginTop:4,
     marginBottom:20
   },
@@ -109,7 +109,6 @@ const styles = StyleSheet.create({
   optionText: {
     fontSize: 16,
     color: "#2D2B32",
-    fontFamily:"Poppins-Regular"
   },
   deleteOption: {
     paddingVertical: 14,
@@ -117,8 +116,7 @@ const styles = StyleSheet.create({
   },
   deleteText: {
     fontSize: 16,
-    color: "#FF4D4F",
-    fontFamily:"Poppins-Regular"
+    color: "#FF4D4F"
   },
 });
 

package/src/components/savedAddressCard.tsx

@@ -3,6 +3,7 @@ import { View, Text, Pressable, Image, TouchableOpacity } from 'react-native';
 import { formatAddress } from '../utility';
 import styles from "../styles/components/savedAddressCardStyles";
 import { userDataHandler } from "../sharedContext/userdataHandler";
+import { checkoutDetailsHandler } from "../sharedContext/checkoutDetailsHandler";
 
 
 interface SavedAddressComponentArgs {
@@ -14,7 +15,6 @@ interface SavedAddressComponentArgs {
 
 const SavedAddressComponent = ({savedAddressList, onClickAddress, onClickOtherOptions} : SavedAddressComponentArgs) => {
     const {userData} = userDataHandler
-
     return(
         <View style={{ paddingBottom: 12, paddingHorizontal:16 }}>
             {savedAddressList.map((address) => (
@@ -68,7 +68,7 @@ interface SavedAddressCardArgs {
 }
 
 const SavedAddressCard = ({isSelected, labelType, address, onClickAddress, onClickOtherOptions, labelName, phone}: SavedAddressCardArgs) => {
-
+  const {checkoutDetails} = checkoutDetailsHandler
   const icons = {
     home: require('../../assets/images/ic_home.png'),
     work: require('../../assets/images/ic_work.png'),
@@ -85,11 +85,11 @@ const SavedAddressCard = ({isSelected, labelType, address, onClickAddress, onCli
             source={addressIcon}
             style={styles.imageStyle}
         />
-          <Text style={styles.labelName}>{labelName}</Text>
+          <Text style={[styles.labelName, {fontFamily: checkoutDetails.fontFamily.semiBold,}]}>{labelName}</Text>
 
           {isSelected && (
             <View style={styles.selectedTag}>
-              <Text style={styles.selectedTagText}>CURRENTLY SELECTED</Text>
+              <Text style={[styles.selectedTagText, {fontFamily: checkoutDetails.fontFamily.medium,}]}>CURRENTLY SELECTED</Text>
             </View>
           )}
         </View>
@@ -104,8 +104,8 @@ const SavedAddressCard = ({isSelected, labelType, address, onClickAddress, onCli
       </View>
 
       {/* Address */}
-      <Text style={styles.addressText}>{address}</Text>
-      <Text style = {styles.addressText}>Mobile: {phone}</Text>
+      <Text style={[styles.addressText, {fontFamily: checkoutDetails.fontFamily.regular,}]}>{address}</Text>
+      <Text style = {[styles.addressText, {fontFamily: checkoutDetails.fontFamily.regular,}]}>Mobile: {phone}</Text>
     </Pressable>
     )
 }

package/src/components/savedCardComponent.tsx

@@ -21,7 +21,6 @@ const SavedCardComponentView = ({
   onClickRadio,
 }: SavedCardComponentViewProps) => {
   const { checkoutDetails } = checkoutDetailsHandler;
-
   return (
     <View style={{ paddingBottom: 12 }}>
       {savedCards.map((card) => (
@@ -36,7 +35,7 @@ const SavedCardComponentView = ({
             instrumentTypeValue={card.instrumentTypeValue}
             onPress={onClickRadio}
             onProceedForward={onProceedForward}
-            brandColor={checkoutDetails.brandColor || '#1CA672'}
+            brandColor={checkoutDetails.buttonColor || '#1CA672'}
             currencySymbol={checkoutDetails.currencySymbol || '₹'}
             amount={checkoutDetails.amount}
           />
@@ -67,15 +66,16 @@ const SavedCardComponentView = ({
             style={{
               height: 14,
               width: 14,
-              tintColor: checkoutDetails.brandColor,
+              tintColor: checkoutDetails.buttonColor,
             }}
           />
           <Text
             style={{
               fontSize: 14,
-              color: checkoutDetails.brandColor,
+              color: checkoutDetails.buttonColor,
               paddingStart: 10,
-              fontFamily: 'Poppins-SemiBold',
+              paddingTop : 4,
+              fontFamily: checkoutDetails.fontFamily.semiBold,
             }}
           >
             Add new Card
@@ -129,7 +129,7 @@ const SavedCardRow = ({
   currencySymbol,
   amount,
 }: SavedCardRowProps) => {
-
+  const { checkoutDetails } = checkoutDetailsHandler;
   return (
     <View
       style={{
@@ -143,9 +143,10 @@ const SavedCardRow = ({
       <ImageLoader image={image} errorImage={errorImage}/>
 
         <View style={{ paddingStart: 12, flex: 1 }}>
-          <Text
+          {nickName != "" && (
+            <Text
             style={{
-              fontFamily: 'Poppins-SemiBold',
+              fontFamily: checkoutDetails.fontFamily.semiBold,
               fontSize: 12,
               color: '#4F4D55',
             }}
@@ -155,9 +156,10 @@ const SavedCardRow = ({
           >
             {nickName}
           </Text>
+          )}
           <Text
             style={{
-              fontFamily: 'Poppins-Regular',
+              fontFamily: checkoutDetails.fontFamily.regular,
               fontSize: 12,
               color: '#4F4D55',
             }}
@@ -183,7 +185,7 @@ const SavedCardRow = ({
             onProceedForward(instrumentTypeValue);
           }}
         >
-          <Text style={styles.buttonText}>
+          <Text style={[styles.buttonText, {fontFamily: checkoutDetails.fontFamily.semiBold,}]}>
             Proceed to Pay{' '}
             <Text
               style={{
@@ -216,7 +218,6 @@ const styles = StyleSheet.create({
   buttonText: {
     color: 'white',
     fontSize: 16,
-    fontFamily: 'Poppins-SemiBold',
   },
   tag: {
     borderColor: '#1CA672',
@@ -226,10 +227,5 @@ const styles = StyleSheet.create({
     paddingHorizontal: 4,
     marginTop: 4,
     alignSelf: 'flex-start',
-  },
-  tagText: {
-    fontSize: 10,
-    fontFamily: 'Poppins-Medium',
-    color: '#1CA672',
-  },
+  }
 });

package/src/components/selectTenureCard.tsx

@@ -1,6 +1,7 @@
 import { View, Text, Pressable, StyleSheet } from 'react-native';
 import React from 'react';
 import { RadioButton } from 'react-native-paper';
+import { checkoutDetailsHandler } from '../sharedContext/checkoutDetailsHandler';
 
 interface SelectTenureCardProps {
   duration: number;
@@ -37,6 +38,7 @@ const SelectTenureCard: React.FC<SelectTenureCardProps> = ({
   interestCharged,
   processingFee,
 }) => {
+  const {checkoutDetails} = checkoutDetailsHandler
   return (
     <View>
       {isSelected ? (
@@ -59,7 +61,7 @@ const SelectTenureCard: React.FC<SelectTenureCardProps> = ({
             />
             <Text
               style={{
-                fontFamily: 'Poppins-SemiBold',
+                fontFamily: checkoutDetails.fontFamily.semiBold,
                 fontSize: 14,
                 color: '#2D2B32',
               }}
@@ -79,13 +81,13 @@ const SelectTenureCard: React.FC<SelectTenureCardProps> = ({
             </Text>
             {isLowCostOffer && (
               <View style={styles.tag}>
-                <Text style={styles.tagText}>LOW COST EMI</Text>
+                <Text style={[styles.tagText, { fontFamily: checkoutDetails.fontFamily.medium,}]}>LOW COST EMI</Text>
               </View>
             )}
 
             {isNoCostOffer && (
               <View style={styles.tag}>
-                <Text style={styles.tagText}>NO COST EMI</Text>
+                <Text style={[styles.tagText, { fontFamily: checkoutDetails.fontFamily.medium,}]}>NO COST EMI</Text>
               </View>
             )}
           </Pressable>
@@ -105,7 +107,7 @@ const SelectTenureCard: React.FC<SelectTenureCardProps> = ({
             >
               <Text
                 style={{
-                  fontFamily: 'Poppins-SemiBold',
+                  fontFamily: checkoutDetails.fontFamily.semiBold,
                   fontSize: 12,
                   color: '#2D2B32',
                   flex: 1,
@@ -117,7 +119,7 @@ const SelectTenureCard: React.FC<SelectTenureCardProps> = ({
               </Text>
               <Text
                 style={{
-                  fontFamily: 'Poppins-SemiBold',
+                  fontFamily: checkoutDetails.fontFamily.semiBold,
                   fontSize: 12,
                   color: '#2D2B32',
                   flex: 1,
@@ -130,7 +132,7 @@ const SelectTenureCard: React.FC<SelectTenureCardProps> = ({
               {discount !== '0' && (
                 <Text
                   style={{
-                    fontFamily: 'Poppins-SemiBold',
+                    fontFamily: checkoutDetails.fontFamily.semiBold,
                     fontSize: 12,
                     color: '#2D2B32',
                     flex: 1,
@@ -143,7 +145,7 @@ const SelectTenureCard: React.FC<SelectTenureCardProps> = ({
               )}
               <Text
                 style={{
-                  fontFamily: 'Poppins-SemiBold',
+                  fontFamily: checkoutDetails.fontFamily.semiBold,
                   fontSize: 12,
                   color: '#2D2B32',
                   flex: 1,
@@ -169,7 +171,7 @@ const SelectTenureCard: React.FC<SelectTenureCardProps> = ({
             >
               <Text
                 style={{
-                  fontFamily: 'Poppins-Medium',
+                  fontFamily: checkoutDetails.fontFamily.medium,
                   fontSize: 12,
                   color: '#2D2B32',
                   flex: 1,
@@ -191,7 +193,7 @@ const SelectTenureCard: React.FC<SelectTenureCardProps> = ({
               </Text>
               <Text
                 style={{
-                  fontFamily: 'Poppins-Medium',
+                  fontFamily: checkoutDetails.fontFamily.medium,
                   fontSize: 12,
                   color: '#2D2B32',
                   flex: 1,
@@ -214,7 +216,7 @@ const SelectTenureCard: React.FC<SelectTenureCardProps> = ({
               {discount !== '0' && (
                 <Text
                   style={{
-                    fontFamily: 'Poppins-Medium',
+                    fontFamily: checkoutDetails.fontFamily.medium,
                     fontSize: 12,
                     color: '#1CA672',
                     flex: 1,
@@ -237,7 +239,7 @@ const SelectTenureCard: React.FC<SelectTenureCardProps> = ({
               )}
               <Text
                 style={{
-                  fontFamily: 'Poppins-Medium',
+                  fontFamily: checkoutDetails.fontFamily.medium,
                   fontSize: 12,
                   color: '#2D2B32',
                   flex: 1,
@@ -265,7 +267,7 @@ const SelectTenureCard: React.FC<SelectTenureCardProps> = ({
               color: '#2D2B32',
               fontSize: 12,
               lineHeight: 18,
-              fontFamily: 'Poppins-Regular',
+              fontFamily: checkoutDetails.fontFamily.regular,
             }}
           >
             Your card will be charged for an amount of{' '}
@@ -281,7 +283,7 @@ const SelectTenureCard: React.FC<SelectTenureCardProps> = ({
             </Text>
             <Text
               style={{
-                fontFamily: 'Poppins-SemiBold',
+                fontFamily: checkoutDetails.fontFamily.semiBold,
                 fontSize: 12,
                 color: '#2D2B32',
               }}
@@ -301,7 +303,7 @@ const SelectTenureCard: React.FC<SelectTenureCardProps> = ({
             </Text>
             <Text
               style={{
-                fontFamily: 'Poppins-SemiBold',
+                fontFamily: checkoutDetails.fontFamily.semiBold,
                 fontSize: 12,
                 color: '#2D2B32',
               }}
@@ -321,7 +323,7 @@ const SelectTenureCard: React.FC<SelectTenureCardProps> = ({
             </Text>
             <Text
               style={{
-                fontFamily: 'Poppins-SemiBold',
+                fontFamily: checkoutDetails.fontFamily.semiBold,
                 fontSize: 12,
                 color: '#2D2B32',
               }}
@@ -332,7 +334,7 @@ const SelectTenureCard: React.FC<SelectTenureCardProps> = ({
           </Text>
           <Text
             style={{
-              fontFamily: 'Poppins-Regular',
+              fontFamily: checkoutDetails.fontFamily.regular,
               fontSize: 12,
               color: '#2D2B32',
               paddingHorizontal: 12,
@@ -351,7 +353,7 @@ const SelectTenureCard: React.FC<SelectTenureCardProps> = ({
             </Text>
             <Text
               style={{
-                fontFamily: 'Poppins-SemiBold',
+                fontFamily: checkoutDetails.fontFamily.semiBold,
                 fontSize: 12,
                 color: '#2D2B32',
               }}
@@ -378,7 +380,7 @@ const SelectTenureCard: React.FC<SelectTenureCardProps> = ({
               style={{
                 color: 'white',
                 fontSize: 16,
-                fontFamily: 'Poppins-SemiBold',
+                fontFamily: checkoutDetails.fontFamily.semiBold,
               }}
             >
               Proceed to Enter Card Details
@@ -407,7 +409,7 @@ const SelectTenureCard: React.FC<SelectTenureCardProps> = ({
             <View style={{ flexShrink: 1 }}>
               <Text
                 style={{
-                  fontFamily: 'Poppins-SemiBold',
+                  fontFamily: checkoutDetails.fontFamily.semiBold,
                   fontSize: 14,
                   color: '#2D2B32',
                   alignSelf: 'center',
@@ -438,12 +440,12 @@ const SelectTenureCard: React.FC<SelectTenureCardProps> = ({
               >
                 {isLowCostOffer && (
                   <View style={styles.tag}>
-                    <Text style={styles.tagText}>LOW COST EMI</Text>
+                    <Text style={[styles.tagText, { fontFamily: checkoutDetails.fontFamily.medium,}]}>LOW COST EMI</Text>
                   </View>
                 )}
                 {isNoCostOffer && (
                   <View style={styles.tag}>
-                    <Text style={styles.tagText}>NO COST EMI</Text>
+                    <Text style={[styles.tagText, { fontFamily: checkoutDetails.fontFamily.medium,}]}>NO COST EMI</Text>
                   </View>
                 )}
               </View>
@@ -468,7 +470,6 @@ const styles = StyleSheet.create({
   },
   tagText: {
     fontSize: 10,
-    fontFamily: 'Poppins-Medium',
     color: '#EB2F96',
   },
 });

package/src/components/sessionExpire.tsx

@@ -8,6 +8,7 @@ interface SessionExpireProps {
   onClick: () => void;
 }
 
+
 const SessionExpire: React.FC<SessionExpireProps> = ({ onClick }) => {
   const { checkoutDetails } = checkoutDetailsHandler;
   return (
@@ -20,13 +21,13 @@ const SessionExpire: React.FC<SessionExpireProps> = ({ onClick }) => {
             loop={false}
             style={{ width: 90, height: 90, alignSelf: 'center' }}
           />
-          <Text style={styles.successfulHeading}>
+          <Text style={[styles.successfulHeading, {fontFamily: checkoutDetails.fontFamily.semiBold,}]}>
             Payment session has expired.
           </Text>
           <Text
             style={{
               fontSize: 14,
-              fontFamily: 'Poppins-Regular',
+              fontFamily: checkoutDetails.fontFamily.regular,
               color: '#000000',
               textAlign: 'center',
               alignSelf: 'center',
@@ -41,13 +42,13 @@ const SessionExpire: React.FC<SessionExpireProps> = ({ onClick }) => {
           <Pressable
             style={[
               styles.buttonContainer,
-              { backgroundColor: checkoutDetails.brandColor },
+              { backgroundColor: checkoutDetails.buttonColor, borderRadius: checkoutDetails.ctaBorderRadius, },
             ]}
             onPress={() => {
               onClick()
             }}
           >
-            <Text style={styles.buttonText}>Go back to Home</Text>
+            <Text style={[styles.buttonText, {fontFamily: checkoutDetails.fontFamily.semiBold,}]}>Go back to Home</Text>
           </Pressable>
         </View>
       </Modal>
@@ -72,12 +73,10 @@ const styles = StyleSheet.create({
     color: '#DB7C1D',
     fontSize: 22,
     alignSelf: 'center',
-    paddingTop: 8,
-    fontFamily: 'Poppins-SemiBold',
+    paddingTop: 8
   },
   buttonContainer: {
     flexDirection: 'row',
-    borderRadius: 8,
     justifyContent: 'center',
     marginTop: 12,
     backgroundColor: '#1CA672',
@@ -86,6 +85,5 @@ const styles = StyleSheet.create({
     color: 'white',
     fontSize: 16,
     paddingVertical: 12,
-    fontFamily: 'Poppins-SemiBold',
   },
 });

package/src/index.tsx

@@ -5,9 +5,10 @@ import CheckoutContainer from './navigation';
 
 const BoxpayCheckout = ({
   token,
-  configurationOptions,
+  configurationOptions = null,
   onPaymentResult,
   shopperToken = null,
+  uiConfiguration = null
 }: BoxpayCheckoutProps) => {
   return (
     <SafeAreaView style={styles.screenView}>
@@ -16,6 +17,7 @@ const BoxpayCheckout = ({
       configurationOptions={configurationOptions}
       onPaymentResult={onPaymentResult}
       shopperToken={shopperToken}
+      uiConfiguration={uiConfiguration}
       />
     </SafeAreaView>
   );