boxpay-checkout-reactnative-sdk 1.0.0-beta09 → 1.0.0-beta23

package/lib/typescript/src/styles/{savedAddressScreenStyles.d.ts → screens/savedAddressScreenStyles.d.ts}

@@ -34,12 +34,14 @@ declare const styles: {
         backgroundColor: string;
         flexDirection: "row";
         borderRadius: number;
+        alignItems: "center";
     };
     imageStyle: {
         height: number;
         width: number;
         marginStart: number;
         marginTop: number;
+        tintColor: string;
     };
     insideContainerClickableText: {
         fontSize: number;

package/lib/typescript/src/styles/screens/savedAddressScreenStyles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"savedAddressScreenStyles.d.ts","sourceRoot":"","sources":["../../../../../src/styles/screens/savedAddressScreenStyles.ts"],"names":[],"mappings":"AAKA,QAAA,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkDV,CAAA;AAEF,eAAe,MAAM,CAAA"}

package/lib/typescript/src/utils/stringUtils.d.ts

@@ -3,4 +3,8 @@ export declare function getEndpoint(env: string): string;
 export declare function generateRandomAlphanumericString(length: number): string;
 export declare function getBaseURL(env: string): string;
 export declare function formatAddress(deliveryAddress: DeliveryAddress): string;
+export declare function extractNames(fullName: string): {
+    firstName: string;
+    lastName: string;
+};
 //# sourceMappingURL=stringUtils.d.ts.map

package/lib/typescript/src/utils/stringUtils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"stringUtils.d.ts","sourceRoot":"","sources":["../../../../src/utils/stringUtils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAMpD,wBAAgB,WAAW,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAG/C;AAED,wBAAgB,gCAAgC,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAavE;AAGD,wBAAgB,UAAU,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAG9C;AAED,wBAAgB,aAAa,CAAC,eAAe,EAAG,eAAe,GAAI,MAAM,CAMxE"}
+{"version":3,"file":"stringUtils.d.ts","sourceRoot":"","sources":["../../../../src/utils/stringUtils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAMpD,wBAAgB,WAAW,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAG/C;AAED,wBAAgB,gCAAgC,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAavE;AAGD,wBAAgB,UAAU,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAG9C;AAED,wBAAgB,aAAa,CAAC,eAAe,EAAG,eAAe,GAAI,MAAM,CAMxE;AAED,wBAAgB,YAAY,CAAC,QAAQ,EAAE,MAAM,GAAG;IAC9C,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;CAClB,CAcA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "boxpay-checkout-reactnative-sdk",
-  "version": "1.0.0-beta09",
+  "version": "1.0.0-beta23",
   "description": "Boxpay Payment Gateway",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",

package/src/components/deleteAddressModal.tsx

@@ -0,0 +1,114 @@
+import { View, Text, TouchableOpacity, StyleSheet, Image } from "react-native";
+import Modal from "react-native-modal";
+
+interface DeletePros {
+    visible : boolean,
+    onCancel : () => void,
+    onDelete : () => void,
+    address : string
+}
+
+const DeleteAddressModal = ({ visible, onCancel, onDelete, address } : DeletePros) => {
+  return (
+    <Modal
+      isVisible={visible}
+      animationIn="zoomIn"
+      animationOut="zoomOut"
+      backdropOpacity={0.5}
+      onBackdropPress={onCancel}
+      useNativeDriver
+    >
+      <View style={styles.modalContainer}>
+        {/* Delete Icon */}
+        <Image
+          source={require("./assets/ic_delete.png")}
+          style={styles.deleteIcon}
+        />
+
+        {/* Title */}
+        <Text style={styles.title}>Proceed to delete this address?</Text>
+
+        {/* Address Info */}
+        <Text style={styles.address}>{address}</Text>
+
+        {/* Buttons */}
+        <View style={styles.buttonRow}>
+          <TouchableOpacity style={styles.cancelButton} onPress={onCancel}>
+            <Text style={styles.cancelText}>Cancel</Text>
+          </TouchableOpacity>
+
+          <TouchableOpacity style={styles.deleteButton} onPress={onDelete}>
+            <Text style={styles.deleteText}>Yes, delete</Text>
+          </TouchableOpacity>
+        </View>
+      </View>
+    </Modal>
+  );
+};
+
+const styles = StyleSheet.create({
+  modalContainer: {
+    backgroundColor: "#fff",
+    borderRadius: 16,
+    padding: 20,
+    alignItems: "center",
+    justifyContent: "center",
+    width: "90%",
+    alignSelf: "center",
+  },
+  deleteIcon: {
+    width: 40,
+    height: 40,
+    marginBottom: 10,
+    tintColor: "#FF3B30",
+  },
+  title: {
+    fontSize: 18,
+    fontWeight: "700",
+    color: "#000",
+    textAlign: "center",
+    marginBottom: 10,
+  },
+  address: {
+    fontSize: 14,
+    color: "#666",
+    textAlign: "center",
+    marginBottom: 20,
+    lineHeight: 20,
+  },
+  buttonRow: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    width: "100%",
+    marginTop: 10,
+  },
+  cancelButton: {
+    flex: 1,
+    marginRight: 8,
+    paddingVertical: 12,
+    backgroundColor: "#F9F9F9",
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: "#E5E5E5",
+    alignItems: "center",
+  },
+  deleteButton: {
+    flex: 1,
+    paddingVertical: 12,
+    backgroundColor: "#0A8754",
+    borderRadius: 8,
+    alignItems: "center",
+  },
+  cancelText: {
+    fontSize: 16,
+    color: "#0A8754",
+    fontWeight: "600",
+  },
+  deleteText: {
+    fontSize: 16,
+    color: "#fff",
+    fontWeight: "600",
+  },
+});
+
+export default DeleteAddressModal;

package/src/components/savedAddressBottomSheet.tsx

@@ -0,0 +1,135 @@
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  StyleSheet,
+  Image,
+} from "react-native";
+import Modal from "react-native-modal";
+
+interface Props {
+  visible: boolean;
+  onClose: () => void;
+  onEdit: () => void;
+  onSetDefault: () => void;
+  onDelete: () => void;
+  label: string;
+  address: string;
+  icon: any;
+}
+
+const SavedAddressBottomSheet = ({
+  visible,
+  onClose,
+  onEdit,
+  onSetDefault,
+  onDelete,
+  label,
+  address,
+  icon,
+}: Props) => {
+  return (
+    <Modal
+      isVisible={visible}
+      onBackdropPress={onClose}
+      style={styles.modal}
+      backdropOpacity={0.4}
+    >
+      <View style={styles.container}>
+        {/* Address Info */}
+        <View style={styles.headerContainer}>
+          <Image source={icon} style={styles.icon} />
+          <View style={styles.textContainer}>
+            <Text style={styles.label}>{label}</Text>
+            <Text style={styles.address} numberOfLines={1} ellipsizeMode="tail">
+              {address}
+            </Text>
+          </View>
+        </View>
+
+        {/* Divider */}
+        <View style={styles.divider} />
+
+        {/* Options */}
+        <TouchableOpacity style={styles.option} onPress={onEdit}>
+          <Text style={styles.optionText}>Edit</Text>
+        </TouchableOpacity>
+
+        <TouchableOpacity style={styles.option} onPress={onSetDefault}>
+          <Text style={styles.optionText}>Set as Default</Text>
+        </TouchableOpacity>
+
+        {/* Delete Option */}
+        <TouchableOpacity style={styles.deleteOption} onPress={onDelete}>
+          <Text style={styles.deleteText}>Delete address</Text>
+        </TouchableOpacity>
+      </View>
+    </Modal>
+  );
+};
+
+const styles = StyleSheet.create({
+  modal: {
+    justifyContent: "flex-end",
+    margin: 0,
+  },
+  container: {
+    backgroundColor: "#fff",
+    borderTopLeftRadius: 16,
+    borderTopRightRadius: 16,
+    padding: 16,
+  },
+  headerContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    marginBottom: 12,
+  },
+  icon: {
+    width: 24,
+    height: 24,
+    marginRight: 12,
+    tintColor: "#000",
+  },
+  textContainer: {
+    flex: 1,
+  },
+  label: {
+    fontSize: 16,
+    fontWeight: "700",
+    color: "#000",
+  },
+  address: {
+    fontSize: 14,
+    color: "#555",
+    marginTop: 4,
+  },
+  divider: {
+    height: 1,
+    backgroundColor: "#ECECED",
+    marginVertical: 12,
+  },
+  option: {
+    paddingVertical: 14,
+    alignItems: "center",
+    backgroundColor: "#fff",
+    borderRadius: 10,
+    marginBottom: 8,
+    borderWidth: 1,
+    borderColor: "#ECECED",
+  },
+  optionText: {
+    fontSize: 16,
+    color: "#000",
+  },
+  deleteOption: {
+    paddingVertical: 14,
+    alignItems: "center",
+  },
+  deleteText: {
+    fontSize: 16,
+    color: "red",
+    fontWeight: "600",
+  },
+});
+
+export default SavedAddressBottomSheet;

package/src/components/savedAddressCard.tsx

@@ -1,4 +1,3 @@
-import { useState } from "react"
 import type { FetchSavedAddress } from "../interface"
 import { View, Text, Pressable, Image, TouchableOpacity } from 'react-native';
 import { checkoutDetailsHandler } from "../sharedContext/checkoutDetailsHandler";
@@ -9,20 +8,17 @@ import { userDataHandler } from "../sharedContext/userdataHandler";
 
 interface SavedAddressComponentArgs {
     savedAddressList : FetchSavedAddress[],
-    onClickAddress : (savedAddress : FetchSavedAddress) => void
+    onClickAddress : (savedAddress : FetchSavedAddress) => void,
+    onClickOtherOptions : (savedAddress : FetchSavedAddress) => void
 }
 
 
-const SavedAddressComponent = ({savedAddressList, onClickAddress} : SavedAddressComponentArgs) => {
-    const [/*isOptionsClicked*/, setIsOptionsClicked] = useState<boolean>(false)
-    const [/*selectedAddress*/ , setSelectedAddress] = useState<FetchSavedAddress>()
+const SavedAddressComponent = ({savedAddressList, onClickAddress, onClickOtherOptions} : SavedAddressComponentArgs) => {
     const {userData} = userDataHandler
-    // const [isDeleteClicked , setIsDeleteClicked] = useState<boolean>(false)
-    // const [isEditClicked, setIsEditClicked] = useState<boolean>(false)
     const {checkoutDetails} = checkoutDetailsHandler
 
     return(
-        <View style={{ paddingBottom: 12 }}>
+        <View style={{ paddingBottom: 12, paddingHorizontal:16 }}>
             {savedAddressList.map((address) => (
         <View key={address.addressRef}>
           <SavedAddressCard
@@ -44,8 +40,7 @@ const SavedAddressComponent = ({savedAddressList, onClickAddress} : SavedAddress
             labelType : address.labelType
           })}
           onClickOtherOptions = {()=> {
-            setSelectedAddress(address)
-            setIsOptionsClicked(true)
+            onClickOtherOptions(address)
           }}
           onClickAddress = {()=> onClickAddress(address)}
           brandColor={checkoutDetails.brandColor}
@@ -83,7 +78,6 @@ const SavedAddressCard = ({isSelected, labelType, address, onClickAddress, onCli
     work: require('../../assets/images/ic_work.png'),
     other: require('../../assets/images/ic_other.png'),
   };
-
   const addressIcon =
     icons[labelType.toLowerCase() as keyof typeof icons] || icons.other;
   return (
@@ -115,7 +109,7 @@ const SavedAddressCard = ({isSelected, labelType, address, onClickAddress, onCli
 
       {/* Address */}
       <Text style={styles.addressText}>{address}</Text>
-      <Text style = {styles.addressText}>{phone}</Text>
+      <Text style = {styles.addressText}>Mobile: {phone}</Text>
     </Pressable>
     )
 }

package/src/screens/addressScreen.tsx

@@ -19,6 +19,7 @@ import {
 import styles from '../styles/screens/addressScreenStyles.';
 import type { CheckoutStackParamList } from '../navigation';
 import type { NavigationProp } from '@react-navigation/native';
+import { extractNames } from '../utils/stringUtils';
 
 type AddressScreenNavigationProp = NavigationProp<CheckoutStackParamList, 'AddressScreen'>;
 
@@ -108,25 +109,6 @@ const AddressScreen = ({ navigation }: Props) => {
     }
   };
 
-  function extractNames(fullName: string): {
-    firstName: string;
-    lastName: string;
-  } {
-    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: string) => {
     setEmailTextField(updatedText);
     const trimmedText = updatedText.trim();

package/src/screens/mainScreen.tsx

@@ -486,6 +486,10 @@ const MainScreen = ({route, navigation} : MainScreenProps) => {
                 setPaymentHandler({
                   onPaymentResult: onPaymentResult,
                 });
+                if(shopperToken != null && shopperToken != "") {
+                  checkoutDetailsHandler.checkoutDetails.shopperToken = shopperToken
+                  getRecommendedInstruments()
+                }
                 callUIAnalytics(AnalyticsEvents.CHECKOUT_LOADED,"Index Screen Session Loaded","")
               break;
             }
@@ -505,12 +509,6 @@ const MainScreen = ({route, navigation} : MainScreenProps) => {
       }
     }
     loadSession()
-
-    if(shopperToken != null && shopperToken != "") {
-      checkoutDetailsHandler.checkoutDetails.shopperToken = shopperToken
-      getRecommendedInstruments()
-    }
-
   }, []);
 
   const handleRecommendedSectionClick = (instrumentValue: string) => {

package/src/screens/savedAddressScreen.tsx

@@ -8,7 +8,7 @@ import {
     Image,
     Pressable
 } from 'react-native';
-import styles from '../styles/savedAddressScreenStyles';
+import styles from '../styles/screens/savedAddressScreenStyles';
 import { useEffect, useState } from 'react';
 import ShimmerView from '../components/shimmerView';
 import LottieView from 'lottie-react-native';
@@ -16,11 +16,15 @@ import Header from '../components/header';
 import { APIStatus, type FetchSavedAddress} from '../interface';
 import fetchSavedAddress from '../postRequest/fetchSavedAddress';
 import Toast from 'react-native-toast-message'
-// import deleteSavedAddress from '../postRequest/deleteSavedAddress';
+import deleteSavedAddress from '../postRequest/deleteSavedAddress';
 import type { CheckoutStackParamList } from '../navigation';
 import type { NavigationProp } from '@react-navigation/native';
 import SavedAddressComponent from '../components/savedAddressCard';
 import { checkoutDetailsHandler } from '../sharedContext/checkoutDetailsHandler';
+import SavedAddressBottomSheet from '../components/savedAddressBottomSheet';
+import { setUserDataHandler, userDataHandler } from '../sharedContext/userdataHandler';
+import { extractNames, formatAddress } from '../utils/stringUtils';
+import DeleteAddressModal from '../components/deleteAddressModal';
 
 type AddressScreenNavigationProp = NavigationProp<CheckoutStackParamList, 'AddressScreen'>;
 
@@ -30,9 +34,20 @@ interface Props {
 
 const SavedAddressScreen = ({ navigation }: Props) => {
     const [isFirstLoad, setIsFirstLoad] = useState(true)
-    const [loading, /*setLoading*/] = useState(false)
+    const [loading, setLoading] = useState(false)
+    const [isEditClicked, setIsEditClicked] = useState(false)
     const [savedAddressList, setSavedAddresList] = useState<FetchSavedAddress[]>([]);
     const {checkoutDetails} = checkoutDetailsHandler
+    const [isOptionsClicked, setIsOptionsClicked] = useState<boolean>(false)
+    const [isDeleteConfirmationVisible, setIsDeleteConfirmationVisible] = useState<boolean>(false)
+    const [selectedAddress,setSelectedAddress] = useState<FetchSavedAddress>()
+    const [updateAddress, setUpdateAddress] = useState<boolean>(false)
+
+    const icons = {
+        home: require('../../assets/images/ic_home.png'),
+        work: require('../../assets/images/ic_work.png'),
+        other: require('../../assets/images/ic_other.png'),
+    };
 
     const onProceedBack = () => {
         if (!loading) {
@@ -69,30 +84,30 @@ const SavedAddressScreen = ({ navigation }: Props) => {
         fetchAddress()
     }, []);
 
-    // const onClickDeleteAddress = async (selectedAddressRef : string) => {
-    //     const response = await deleteSavedAddress(selectedAddressRef)
-    //     switch(response.apiStatus) {
-    //         case APIStatus.Success : {
-    //             setSavedAddresList(prevList =>
-    //                 prevList.filter(address => address.addressRef !== selectedAddressRef)
-    //             );
-    //             setLoading(false)
-    //             break
-    //         }
-    //         case APIStatus.Failed : {
-    //             Toast.show({
-    //                 type: 'error',
-    //                 text1: 'Oops!',
-    //                 text2: 'Something went wrong. Please try again.',
-    //             });
-    //             setLoading(false)
-    //             break
-    //         }
-    //         default : {
-    //             break
-    //         }
-    //     }
-    // }
+    const onClickDeleteAddress = async (selectedAddressRef : string) => {
+        const response = await deleteSavedAddress(selectedAddressRef)
+        switch(response.apiStatus) {
+            case APIStatus.Success : {
+                setSavedAddresList(prevList =>
+                    prevList.filter(address => address.addressRef !== selectedAddressRef)
+                );
+                setLoading(false)
+                break
+            }
+            case APIStatus.Failed : {
+                Toast.show({
+                    type: 'error',
+                    text1: 'Oops!',
+                    text2: 'Something went wrong. Please try again.',
+                });
+                setLoading(false)
+                break
+            }
+            default : {
+                break
+            }
+        }
+    }
 
 
     useEffect(() => {
@@ -104,6 +119,35 @@ const SavedAddressScreen = ({ navigation }: Props) => {
             backHandler.remove();
         };
     }, []);
+    useEffect(() => {
+        if(updateAddress || isEditClicked) {
+            const { firstName, lastName } = extractNames(selectedAddress?.name ?? "");
+            setUserDataHandler({
+                userData: {
+                  email: selectedAddress?.email ?? "",
+                  firstName: firstName,
+                  lastName: lastName,
+                  phone: selectedAddress?.phoneNumber ?? "",
+                  uniqueId: userDataHandler.userData.uniqueId,
+                  dob: userDataHandler.userData.dob,
+                  pan: userDataHandler.userData.pan,
+                  address1: selectedAddress?.address1 ?? "",
+                  address2: selectedAddress?.address2 ?? "",
+                  city: selectedAddress?.city ?? "",
+                  state: selectedAddress?.state ?? "",
+                  pincode: selectedAddress?.postalCode ?? "",
+                  country: selectedAddress?.countryCode ?? "",
+                  labelType: selectedAddress?.labelType ?? "",
+                  labelName: selectedAddress?.labelName ?? "",
+                },
+            });
+            if(isEditClicked) {
+                navigation.navigate("AddressScreen",{})
+            } else {
+                navigation.goBack()
+            }
+        }
+    }, [updateAddress, isEditClicked]);
 
     return (
         <SafeAreaView style = {styles.screenView}>
@@ -165,15 +209,60 @@ const SavedAddressScreen = ({ navigation }: Props) => {
         >
             <SavedAddressComponent
                 savedAddressList={savedAddressList}
-                onClickAddress={(address) => {
+                onClickAddress={(address : FetchSavedAddress) => {
+                    setSelectedAddress(address)
+                    setUpdateAddress(true)
                     console.log(address);
                 }}
+                onClickOtherOptions={(address : FetchSavedAddress) => {
+                    setSelectedAddress(address)
+                    setIsOptionsClicked(true)
+                }}
             />
         </ScrollView>
     </>
 )}
                 </View>
             )}
+            <SavedAddressBottomSheet
+        visible={isOptionsClicked}
+        onClose={() => setIsOptionsClicked(false)}
+        onEdit={() => setIsEditClicked(true)}
+        onSetDefault={() => console.log("Set as Default clicked")}
+        onDelete={() => setIsDeleteConfirmationVisible(true)}
+        label= {selectedAddress?.labelName ? selectedAddress?.labelName ?? "" : selectedAddress?.labelType ?? ""}
+        address={formatAddress({
+            address1 : selectedAddress?.address1 ?? "",
+            address2: selectedAddress?.address2 ?? "",
+            city : selectedAddress?.city ?? "",
+            state : selectedAddress?.state ?? "",
+            postalCode : selectedAddress?.postalCode ?? "",
+            countryCode : selectedAddress?.countryCode ?? "",
+            labelName : selectedAddress?.labelName ?? "",
+            labelType : selectedAddress?.labelType ?? ""
+          })}
+        icon={icons[selectedAddress?.labelType.toLowerCase() as keyof typeof icons] || icons.other}
+      />
+
+<DeleteAddressModal
+        visible={isDeleteConfirmationVisible}
+        onCancel={() => setIsDeleteConfirmationVisible(false)}
+        onDelete={() => {
+            setIsDeleteConfirmationVisible(false);
+            console.log("Address deleted");
+            onClickDeleteAddress(selectedAddress?.addressRef ?? "")
+        }}
+        address={formatAddress({
+            address1 : selectedAddress?.address1 ?? "",
+            address2: selectedAddress?.address2 ?? "",
+            city : selectedAddress?.city ?? "",
+            state : selectedAddress?.state ?? "",
+            postalCode : selectedAddress?.postalCode ?? "",
+            countryCode : selectedAddress?.countryCode ?? "",
+            labelName : selectedAddress?.labelName ?? "",
+            labelType : selectedAddress?.labelType ?? ""
+          })}
+      />
         </SafeAreaView>
     )
 }

package/src/styles/components/savedAddressCardStyles.ts

@@ -30,26 +30,28 @@ const styles = StyleSheet.create({
       gap: 6,
     },
     labelName: {
-      fontSize: 16,
-      fontWeight: "600",
-      color: "#1A1A1A",
+      fontSize: 14,
+      fontFamily: 'Poppins-SemiBold',
+      color: "#2D2B32",
     },
     selectedTag: {
-      backgroundColor: "#FFE6F1",
+      backgroundColor: "#FFF0F6",
       paddingHorizontal: 8,
       paddingVertical: 2,
       borderRadius: 6,
       marginLeft: 8,
+      borderColor:"#FFADD2"
     },
     selectedTagText: {
       fontSize: 10,
-      fontWeight: "700",
-      color: "#FF2E92",
+      fontFamily: 'Poppins-Medium',
+      color: "#EB2F96",
     },
     addressText: {
       marginTop: 10,
-      fontSize: 14,
-      color: "#666",
+      fontSize: 12,
+      fontFamily: 'Poppins-Regular',
+      color: "#7F7D83",
       lineHeight: 20,
     },
     imageStyle : {

package/src/styles/{savedAddressScreenStyles.ts → screens/savedAddressScreenStyles.ts}

@@ -1,5 +1,5 @@
 import { StyleSheet } from "react-native";
-import { checkoutDetailsHandler } from "../sharedContext/checkoutDetailsHandler";
+import { checkoutDetailsHandler } from "../../sharedContext/checkoutDetailsHandler";
 
 const {brandColor} = checkoutDetailsHandler.checkoutDetails
 
@@ -37,12 +37,14 @@ const styles = StyleSheet.create({
         backgroundColor: 'white',
         flexDirection: 'row',
         borderRadius: 12,
+        alignItems:'center'
       },
       imageStyle : {
         height: 20,
         width: 20,
         marginStart: 12,
         marginTop: 20,
+        tintColor: brandColor
       },
       insideContainerClickableText : {
         fontSize: 14,