ordering-ui-react-native 0.21.21 → 0.21.22-release

package/themes/original/src/components/OrderDetails/styles.tsx

@@ -5,12 +5,11 @@ export const OrderDetailsContainer = styled.ScrollView`
 `
 
 export const NavBack = styled.TouchableOpacity`
-
 `
 
 
 export const Header = styled.View`
-  padding: 10px 40px;
+  padding: 10px 20px;
   flex: 1;
 `
 
@@ -24,7 +23,7 @@ export const OrderContent = styled.View`
 export const OrderBusiness = styled.View`
   position: relative; 
   padding-vertical: 10px;
-  padding-horizontal: 40px;
+  padding-horizontal: 20px;
   background-color: ${(props: any) => props.theme.colors.white};
   align-items: flex-start;
 `
@@ -64,7 +63,7 @@ export const SectionTitle = styled.View`
 `
 
 export const OrderCustomer = styled.View`
-  padding: 20px 40px 10px;
+  padding: 20px 20px 10px;
   background-color: ${(props: any) => props.theme.colors.white};
 `
 
@@ -86,7 +85,7 @@ export const InfoBlock = styled.View`
 export const HeaderInfo = styled.View`
   flex: 1;
   background-color: ${(props: any) => props.theme.colors.backgroundGray100};
-  padding: 20px 40px;
+  padding: 20px 20px;
 `
 
 export const OrderProducts = styled(OrderCustomer)``
@@ -100,7 +99,7 @@ export const Table = styled.View`
 `
 
 export const OrderBill = styled.View`
-  padding-horizontal: 40px;
+  padding-horizontal: 20px;
   padding-vertical: 10px;
   flex: 1;
   background-color: ${(props: any) => props.theme.colors.white};
@@ -130,7 +129,7 @@ export const OrderAction = styled.View`
 `
 
 export const PlaceSpotWrapper = styled.View`
-  padding-horizontal: 40px;
+  padding-horizontal: 20px;
 `
 
 export const ProfessionalPhoto = styled.ImageBackground`
@@ -141,4 +140,21 @@ export const ProfessionalPhoto = styled.ImageBackground`
   width: 80px;
   resize-mode: cover;
   margin-right: 10px;
-`;
+`;
+
+export const TopActions = styled.TouchableOpacity`
+	height: 60px;
+	justify-content: center;
+  min-width: 30px;
+  padding-right: 15px;
+`;
+
+export const TopHeader = styled.View`
+  width: 100%;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  z-index: 1;
+  height: 60px;
+  min-height: 60px;
+`

package/themes/original/src/components/OrderProgress/index.tsx

@@ -22,7 +22,8 @@ import {
   OrderInfoWrapper,
   OrderProgressWrapper
 } from './styles'
-import { getOrderStatus } from '../../utils'
+import { getOrderStatuPickUp, getOrderStatus } from '../../utils'
+import DeviceInfo from 'react-native-device-info'
 
 const OrderProgressUI = (props: any) => {
   const {
@@ -56,7 +57,9 @@ const OrderProgressUI = (props: any) => {
       shadowColor: '#000',
       shadowOpacity: 0.2,
       shadowRadius: 2,
-      elevation: 3
+      elevation: 3,
+      borderWidth: 1,
+      borderColor: 'rgba(0,0,0,0.1)'
     },
     logoWrapper: {
       overflow: 'hidden',
@@ -110,6 +113,8 @@ const OrderProgressUI = (props: any) => {
     setInitialLoaded(true)
   }, [orderList.loading, initialLoaded])
 
+  const progressBarObjt = (s: any) => lastOrder?.delivery_type && lastOrder?.delivery_type === 2 ? getOrderStatuPickUp(s) : getOrderStatus(s)
+
   return (
     <>
       {(orderList?.loading && !initialLoaded) && (
@@ -128,7 +133,7 @@ const OrderProgressUI = (props: any) => {
               <View style={styles.logoWrapper}>
                 <FastImage
                   style={{ width: 50, height: 50 }}
-                  source={orderList?.orders.length === 1 ? {
+                  source={orderList?.orders.length === 1 && lastOrder?.business?.logo?.includes?.('http') ? {
                     uri: optimizeImage(lastOrder?.business?.logo, 'h_50,c_limit'),
                     priority: FastImage.priority.normal,
                   } : theme.images.logos.logotype}
@@ -162,10 +167,10 @@ const OrderProgressUI = (props: any) => {
             </OrderInfoWrapper>
             <View style={{ flex: 1 }}>
               <ProgressContentWrapper>
-                <ProgressBar style={{ width: getOrderStatus(lastOrder.status)?.percentage ? `${(getOrderStatus(lastOrder.status) as any).percentage * 100}%` : '0%' }} />
+                <ProgressBar style={{ width: progressBarObjt(lastOrder.status)?.percentage ? `${(progressBarObjt(lastOrder.status) as any).percentage * 100}%` : '0%' }} />
               </ProgressContentWrapper>
               <ProgressTextWrapper>
-                <OText size={12} style={{ width: '50%' }}>{getOrderStatus(lastOrder.status)?.value}</OText>
+                <OText size={12} style={{ width: '50%' }}>{progressBarObjt(lastOrder.status)?.value}</OText>
                 <TimeWrapper>
                   <OText size={11}>{lastOrder?.delivery_type === 1 ? t('ESTIMATED_DELIVERY', 'Estimated delivery') : t('ESTIMATED_TIME', 'Estimated time')}</OText>
                   <OText size={11}>
@@ -206,7 +211,24 @@ export const OrderProgress = (props: any) => {
       initialPage: 1,
       pageSize: 10,
       controlType: 'infinity'
-    }
+    },
+    propsToFetch: [
+      'id',
+      'name',
+      'business',
+      'status',
+      'delivery_type',
+      'delivery_datetime_utc',
+      'delivery_datetime',
+      'reporting_data',
+      'eta_current_status_time',
+      'eta_previous_status_times',
+      'eta_time',
+      'delivered_in',
+      'prepared_in',
+      'eta_drive_time'
+    ],
+    noGiftCardOrders: true
   }
 
   return <OrderList {...orderProgressProps} />

package/themes/original/src/components/OrderProgress/styles.tsx

@@ -32,5 +32,5 @@ export const OrderInfoWrapper = styled.View`
 export const OrderProgressWrapper = styled.View`
   margin-top: 37px;
   margin-bottom: 20px;
-	padding-horizontal: 40px;
+	padding-horizontal: 20px;
 `

package/themes/original/src/components/OrderSummary/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useRef } from 'react';
 import { ActivityIndicator, View } from 'react-native'
 import {
   Cart,
@@ -56,6 +56,7 @@ const OrderSummaryUI = (props: any) => {
   const [orderState] = useOrder();
   const [{ parsePrice, parseNumber }] = useUtils();
   const [validationFields] = useValidationFields();
+  const commentRef = useRef()
   const [openTaxModal, setOpenTaxModal] = useState<any>({ open: false, data: null, type: '' })
   const isCouponEnabled = validationFields?.fields?.checkout?.coupon?.enabled;
   const hideCartComments = !validationFields?.fields?.checkout?.comments?.enabled
@@ -341,6 +342,7 @@ const OrderSummaryUI = (props: any) => {
                           marginTop: 10,
                           borderRadius: 8
                         }}
+                        forwardRef={commentRef}
                         multiline
                       />
                       {commentState?.loading && (

package/themes/original/src/components/OrderTypeSelector/index.tsx

@@ -31,14 +31,12 @@ const OrderTypeSelectorUI = (props: OrderTypeSelectParams) => {
 	const [orderState] = useOrder();
 	const [, t] = useLanguage();
 	const _orderTypes = orderTypes.filter((type: any) => configTypes?.includes(type.value));
-	const orderTypeTitle = (type : string) => theme?.header?.components?.order_types?.components?.[type]?.components?.title
-	const orderTypeDescription = (type : string) => theme?.header?.components?.order_types?.components?.[type]?.components?.description
-	const orderTypeCallAction = (type : string) => theme?.header?.components?.order_types?.components?.[type]?.components?.call_to_action
+
 	const items = _orderTypes.map((type) => {
 		return {
 			value: type.value,
-			label: orderTypeTitle(type.value) || t(type.content, type.content),
-			description: orderTypeDescription(type.value) || t(type.description, 'Lorem ipsum dolor sit amet, consectetur.')
+			label: t(type.content, type.content),
+			description: t(type.description, 'Lorem ipsum dolor sit amet, consectetur.')
 		}
 	})
 
@@ -102,6 +100,7 @@ const OrderTypeSelectorUI = (props: OrderTypeSelectParams) => {
 						style={{ paddingBottom: 0 }}
 						title={t('HOW_WILL_YOU_DELIVERY_TYPE', 'How will your order type?')}
 						titleAlign={'center'}
+						titleStyle={{ fontSize: 14 }}
 						noMargin
 					/>
 					{
@@ -115,7 +114,7 @@ const OrderTypeSelectorUI = (props: OrderTypeSelectParams) => {
 													<OText size={12} lineHeight={18} color={theme.colors.white} weight={Platform.OS === 'android' ? 'bold' : '600'}>{item?.label}</OText>
 													<OText size={10} lineHeight={15} color={theme.colors.white}>{item?.description}</OText>
 													<View style={{ flexDirection: 'row', alignItems: 'center' }}>
-														<OText size={10} lineHeight={15} color={theme.colors.white}>{orderTypeCallAction(item?.value) || t('START_MY_ORDER', 'Start my order')}</OText>
+														<OText size={10} lineHeight={15} color={theme.colors.white}>{t('START_MY_ORDER', 'Start my order')}</OText>
 														<AntDesignIcon name='arrowleft' size={26} color={theme.colors.white} style={{ transform: [{ rotate: '180deg' }], marginStart: 4 }} />
 													</View>
 												</MaskCont>

package/themes/original/src/components/OrdersOption/PreviousBusinessOrdered/styles.tsx

@@ -2,5 +2,5 @@ import styled, { css } from 'styled-components/native'
 
 export const ListWrapper = styled.View`
 	background-color: ${(props: any) => props.theme.colors.backgroundLight};
-	padding-horizontal: ${(props : any) => props.isBusinessesSearchList ? '0' : '40px'};
+	padding-horizontal: ${(props : any) => props.isBusinessesSearchList ? '0' : '20px'};
 `;

package/themes/original/src/components/OrdersOption/PreviousProductsOrdered/styles.tsx

@@ -2,5 +2,5 @@ import styled from 'styled-components/native'
 
 export const ListWrapper = styled.View`
 	background-color: ${(props: any) => props.theme.colors.backgroundLight};
-	padding-horizontal: ${(props : any) => props.isBusinessesSearchList ? '0' : '40px'};
+	padding-horizontal: ${(props : any) => props.isBusinessesSearchList ? '0' : '20px'};
 `;

package/themes/original/src/components/OrdersOption/index.tsx

@@ -159,10 +159,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
 
 	useEffect(() => {
 		if (reorderState?.error) {
-			const errorMessage = (Array.isArray(reorderState?.result) || typeof reorderState?.result === 'string')
-				? reorderState?.result
-				: t('CANT_REORDER_FOR_THIS_BUSINESS', 'Can’t reorder for this store, please create order manually.')
-			showToast(ToastType.Error, errorMessage)
+			showToast(ToastType.Error, reorderState?.result)
 		}
 	}, [reorderState])
 
@@ -312,7 +309,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
 					/>
 				)
 			)}
-			{loading && !hideOrders && (
+			{loading && !hideOrders && !preOrders && (
 				<>
 					{!activeOrders ? (
 						<Placeholder style={{ marginTop: 30 }} Animation={Fade}>
@@ -353,6 +350,7 @@ export const OrdersOption = (props: OrdersOptionParams) => {
 	const MyOrdersProps = {
 		...props,
 		UIComponent: OrdersOptionUI,
+		noGiftCardOrders: true,
 		orderStatus: getAllOrders
 			? [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23]
 			: props.preOrders ? [13] : props.activeOrders

package/themes/original/src/components/OrdersOption/styles.tsx

@@ -3,7 +3,7 @@ import styled, { css } from 'styled-components/native'
 export const OptionTitle = styled.View`
 	margin-top: 24px;
 	${(props : any) => props.titleContent && css`
-		margin-left: ${() => props.isBusinessesSearchList ? '0' : '40px'};
+		margin-left: ${() => props.isBusinessesSearchList ? '0' : '20px'};
 	`}
 `
 

package/themes/original/src/components/PageBanner/index.tsx

@@ -77,6 +77,7 @@ const PageBannerUI = (props: any) => {
   const renderItem = ({ item, index }) => {
     return (
       <TouchableOpacity
+        activeOpacity={1}
         onPress={() => handleGoToPage(item)}
       >
         <View style={styles.sliderWrapper}>
@@ -128,6 +129,7 @@ const PageBannerUI = (props: any) => {
               {pageBannerState.banner?.items.length > 1 && (
                 <>
                   <TouchableOpacity
+                    activeOpacity={1}
                     style={[styles.swiperButton, { left: 25 }]}
                     onPress={() => carouselRef.current.snapToPrev()}
                   >
@@ -138,6 +140,7 @@ const PageBannerUI = (props: any) => {
                     />
                   </TouchableOpacity>
                   <TouchableOpacity
+                    activeOpacity={1}
                     style={[styles.swiperButton, { right: 25 }]}
                     onPress={() => carouselRef.current.snapToNext()}
                   >

package/themes/original/src/components/PaymentOptionCard/index.tsx

@@ -26,7 +26,7 @@ const PaymentOptionCardUI = (props: any) => {
     const [alertState, setAlertState] = useState<{ open: boolean, content: Array<string> }>({ open: false, content: [] })
     const [newCard, setNewCard] = useState<any>(null)
 
-    const onChangeCardForm = (values : any) => {
+    const onChangeCardForm = (values: any) => {
         if (values?.valid) {
             const expiry = values?.values?.expiry?.split('/')
             const expiryMonth = expiry[0]
@@ -107,6 +107,8 @@ const PaymentOptionCardUI = (props: any) => {
                     cardsList={cardsList}
                     noShowErrors
                     gateway={gateway}
+                    onOpen={() => setAddCardOpen({ ...addCardOpen, stripe: true })}
+                    onCancel={() => setAddCardOpen({ ...addCardOpen, stripe: false })}
                 />
             </>
             <Modal
@@ -169,7 +171,7 @@ const PaymentOptionCardUI = (props: any) => {
     )
 }
 
-export const PaymentOptionCard = (props : any) => {
+export const PaymentOptionCard = (props: any) => {
     const paymentOptions = {
         ...props,
         UIComponent: PaymentOptionCardUI

package/themes/original/src/components/PaymentOptionStripe/styles.tsx

@@ -40,6 +40,9 @@ export const OSItem = styled.View`
   justify-content: space-between;
   align-items: center;
   padding: 10px 0px;
+  ${({ isInvalid } : any) => isInvalid && css`
+    opacity: 0.7;
+  `}
 `;
 
 export const OSItemContent = styled.TouchableOpacity`

package/themes/original/src/components/PaymentOptionWallet/index.tsx

@@ -45,7 +45,7 @@ const PaymentOptionWalletUI = (props: any) => {
     new Array(walletsState.result?.length).fill(false)
   );
 
-  const creditBalance: any = (wallet: any) => ` = ${parsePrice(wallet.balance / wallet.redemption_rate, { isTruncable: true })}`
+  const creditBalance: any = (wallet: any) => ` = ${parsePrice(wallet.balance / wallet.redemption_rate)}`
 
   const walletName: any = {
     cash: {
@@ -87,65 +87,65 @@ const PaymentOptionWalletUI = (props: any) => {
       {!walletsState.loading &&
         !walletsState.error &&
         walletsState.result?.length > 0 &&
-        (
-          <>
-            {walletsState.result?.map((wallet: any, idx: any) => wallet.valid && wallet.balance >= 0 && walletName[wallet.type]?.isActive && (
-              <Container
-                key={wallet.id}
-                isBottomBorder={idx === walletsState.result?.filter((wallet: any) => wallet.valid)?.length - 1}
-                onPress={() => handleOnChange(idx, wallet)}
-                disabled={(cart?.balance === 0 && !checkedState[idx]) || wallet.balance === 0}
-              >
-                <SectionLeft>
-                  {checkedState[idx] ? (
-                    <MaterialCommunityIcons
-                      name="checkbox-marked"
-                      size={25}
-                      color={theme.colors.primary}
-                    />
-                  ) : (
-                    <MaterialCommunityIcons
-                      name="checkbox-blank-outline"
-                      size={25}
-                      color={theme.colors.disabled}
-                    />
-                  )}
-                  <View style={{ alignItems: 'baseline', marginLeft: 5 }}>
-                    <View>
-                      <OText
-                        style={((cart?.balance === 0 && !checkedState[idx]) || wallet.balance === 0) ? {
-                          color: theme.colors.disabled
-                        } : {}}
-                      >
-                        {walletName[wallet.type]?.name}
-                      </OText>
-                    </View>
+      (
+        <>
+          {walletsState.result?.map((wallet: any, idx: any) => wallet.valid && wallet.balance >= 0 && walletName[wallet.type]?.isActive && (
+            <Container
+              key={wallet.id}
+              isBottomBorder={idx === walletsState.result?.filter((wallet: any) => wallet.valid)?.length - 1}
+              onPress={() => handleOnChange(idx, wallet)}
+              disabled={(cart?.balance === 0 && !checkedState[idx]) || wallet.balance === 0}
+            >
+              <SectionLeft>
+                {checkedState[idx] ? (
+                  <MaterialCommunityIcons
+                    name="checkbox-marked"
+                    size={25}
+                    color={theme.colors.primary}
+                  />
+                ) : (
+                  <MaterialCommunityIcons
+                    name="checkbox-blank-outline"
+                    size={25}
+                    color={theme.colors.disabled}
+                  />
+                )}
+                <View style={{ alignItems: 'baseline', marginLeft: 5 }}>
+                  <View>
+                    <OText
+                      style={((cart?.balance === 0 && !checkedState[idx]) || wallet.balance === 0) ?{
+                        color: theme.colors.disabled
+                      } : {}}
+                    >
+                      {walletName[wallet.type]?.name}
+                    </OText>
                   </View>
-                </SectionLeft>
-
-                <View style={{ maxWidth: '35%', alignItems: 'flex-end' }}>
-                  {wallet.type === 'cash' && (
-                    <OText>
-                      {parsePrice(wallet?.balance, { isTruncable: true })}
+              </View>
+              </SectionLeft>
+
+              <View style={{maxWidth: '35%', alignItems: 'flex-end' }}>
+                {wallet.type === 'cash' && (
+                  <OText>
+                    {parsePrice(wallet?.balance)}
+                  </OText>
+                )}
+                {wallet.type === 'credit_point' && (
+                  <OText>
+                    <OText color={theme.colors.primary} weight='bold'>
+                    {`${wallet?.balance} ${t('POINTS', 'Points')}`}
                     </OText>
-                  )}
-                  {wallet.type === 'credit_point' && (
                     <OText>
-                      <OText color={theme.colors.primary} weight='bold'>
-                        {`${wallet?.balance} ${t('POINTS', 'Points')}`}
-                      </OText>
-                      <OText>
-                        {wallet?.balance > 0
-                          ? creditBalance(wallet)
-                          : null}
-                      </OText>
+                      {wallet?.balance > 0
+                        ? creditBalance(wallet)
+                        : null}
                     </OText>
-                  )}
-                </View>
-              </Container>
-            ))}
-          </>
-        )}
+                  </OText>
+                )}
+              </View>
+            </Container>
+          ))}
+        </>
+      )}
 
       {walletsState?.loading && (
         <View>

package/themes/original/src/components/PaymentOptions/index.tsx

@@ -11,6 +11,7 @@ import {
 	useLanguage,
 	ToastType,
 	useToast,
+	useSession
 } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
 import { PaymentOptionCash } from '../PaymentOptionCash';
@@ -64,16 +65,23 @@ const PaymentOptionsUI = (props: any) => {
 		handlePaymentMethodClickCustom,
 		handlePlaceOrder,
 		merchantId,
+		urlscheme,
 		setMethodPaySupported,
 		placeByMethodPay,
 		methodPaySupported,
 		setPlaceByMethodPay,
 		setCardList,
-		onPaymentChange
+		onPaymentChange,
+		requiredFields,
+		openUserModal,
+		paymethodClicked,
+		setPaymethodClicked,
+		androidAppId
 	} = props
 
 	const theme = useTheme();
 	const [, { showToast }] = useToast();
+	const [{ user }] = useSession()
 	const { confirmApplePayPayment } = useApplePay()
 
 	const getPayIcon = (method: string) => {
@@ -113,8 +121,18 @@ const PaymentOptionsUI = (props: any) => {
 	//   { name: t('SELECT_A_PAYMENT_METHOD', 'Select a payment method'), value: '-1' },
 	// ]
 
+	const paymethodsFieldRequired = ['paypal', 'apple_pay', 'global_apple_pay']
+
 	const handlePaymentMethodClick = (paymethod: any) => {
-		if (cart?.balance > 0) {
+		if (cart?.balance > 0 || !!user?.guest_id) {
+			if (paymethodsFieldRequired.includes(paymethod?.gateway) && requiredFields.length > 0) {
+				openUserModal && openUserModal(true)
+				setPaymethodClicked({
+					confirmed: false,
+					paymethod
+				})
+				return
+			}
 			const isPopupMethod = ['stripe', 'stripe_direct', 'stripe_connect', 'stripe_redirect', 'paypal'].includes(paymethod?.gateway)
 			if (webViewPaymentGateway.includes(paymethod?.gateway)) {
 				handlePaymentMethodClickCustom(paymethod)
@@ -159,7 +177,14 @@ const PaymentOptionsUI = (props: any) => {
 			handlePlaceOrder(confirmApplePayPayment)
 		}
 	}, [paymethodData, paymethodSelected])
-	
+
+	useEffect(() => {
+		if (paymethodClicked?.confirmed) {
+			handlePaymentMethodClickCustom(paymethodClicked?.paymethod)
+		}
+	}, [paymethodClicked?.confirmed])
+
+
 	const renderPaymethods = ({ item }: any) => {
 		return (
 			<>
@@ -194,7 +219,7 @@ const PaymentOptionsUI = (props: any) => {
 								style={{ margin: 0, marginTop: 4 }}
 								color={paymethodSelected?.id === item.id ? theme.colors.white : '#000'}
 							>
-								{t(item.gateway.toUpperCase(), item.name)}
+								{t(item?.gateway?.toUpperCase(), item.name)}
 							</OText>
 						</PMItem>
 					</TouchableOpacity>
@@ -319,10 +344,11 @@ const PaymentOptionsUI = (props: any) => {
 						setAddCardOpen={setAddCardOpen}
 						addCardOpen={addCardOpen}
 						isOpenMethod={isOpenMethod}
-						handlePaymethodDataChange={handlePaymethodDataChange}
+						handleSource={handlePaymethodDataChange}
 						clientSecret={props.clientSecret}
 						businessId={props.businessId}
 						onPaymentChange={onPaymentChange}
+						paySelected={props.paySelected}
 					/>
 				</View>
 			)}
@@ -337,10 +363,13 @@ const PaymentOptionsUI = (props: any) => {
 					handleSource={handlePaymethodDataChange}
 					onCancel={() => handlePaymethodClick(null)}
 					merchantId={merchantId}
+					urlscheme={urlscheme}
+					androidAppId={androidAppId}
 					setMethodPaySupported={setMethodPaySupported}
 					methodPaySupported={methodPaySupported}
 					placeByMethodPay={placeByMethodPay}
 					setPlaceByMethodPay={setPlaceByMethodPay}
+					publicKeyAddCard={isOpenMethod?.paymethod?.credentials?.stripe?.publishable || isOpenMethod?.paymethod?.credentials?.publishable}
 				/>
 			)}
 
@@ -383,6 +412,10 @@ const PaymentOptionsUI = (props: any) => {
 						handleSource={handlePaymethodDataChange}
 						onCancel={() => handlePaymethodClick(null)}
 						merchantId={merchantId}
+						urlscheme={urlscheme}
+						androidAppId={androidAppId}
+						publicKeyAddCard={isOpenMethod?.paymethod?.credentials?.stripe?.publishable || isOpenMethod?.paymethod?.credentials?.publishable}
+						paySelected={props.paySelected}
 					/>
 				</KeyboardAvoidingView>
 			</OModal>
@@ -402,11 +435,13 @@ const PaymentOptionsUI = (props: any) => {
 					<StripeCardsList
 						paymethod={isOpenMethod?.paymethod}
 						businessId={props.businessId}
-						publicKey={isOpenMethod?.paymethod?.credentials.publishable}
 						payType={paymethodsList?.name}
 						onSelectCard={handlePaymethodDataChange}
 						onNavigationRedirect={onNavigationRedirect}
 						onCancel={() => handlePaymethodClick(null)}
+						publicKey={isOpenMethod?.paymethod?.credentials.publishable}
+						publicKeyAddCard={isOpenMethod?.paymethod?.credentials?.stripe?.publishable || isOpenMethod?.paymethod?.credentials?.publishable}
+						paySelected={props.paySelected}
 					/>
 				</View>
 			)}
@@ -423,6 +458,7 @@ const PaymentOptionsUI = (props: any) => {
 					enabled={Platform.OS === 'ios' ? true : false}
 				>
 					<StripeElementsForm
+						openCarts={props.openCarts}
 						toSave
 						businessId={props.businessId}
 						publicKey={isOpenMethod?.paymethod?.credentials?.stripe?.publishable}
@@ -430,6 +466,36 @@ const PaymentOptionsUI = (props: any) => {
 						accountId={isOpenMethod?.paymethod?.credentials?.user}
 						onSelectCard={handlePaymethodDataChange}
 						onCancel={() => setAddCardOpen({ ...addCardOpen, stripeConnect: false })}
+						publicKeyAddCard={isOpenMethod?.paymethod?.credentials?.stripe?.publishable || isOpenMethod?.paymethod?.credentials?.publishable}
+					/>
+				</KeyboardAvoidingView>
+			</OModal>
+
+			{/* Stripe Add card */}
+			<OModal
+				entireModal
+				title={t('ADD_CREDIT_OR_DEBIT_CARD', 'Add credit or debit card')}
+				open={addCardOpen?.stripe}
+				onClose={() => setAddCardOpen({ ...addCardOpen, stripe: false })}
+				style={{ backgroundColor: 'red' }}
+			>
+				<KeyboardAvoidingView
+					behavior={Platform.OS == 'ios' ? 'padding' : 'height'}
+					keyboardVerticalOffset={Platform.OS == 'ios' ? 0 : 0}
+					enabled={Platform.OS === 'ios' ? true : false}
+				>
+					<StripeElementsForm
+						openCarts={props.openCarts}
+						toSave
+						businessId={props.businessId}
+						businessIds={props.businessIds}
+						publicKey={props.publicKey || isOpenMethod?.paymethod?.credentials?.publishable}
+						setCardsList={setCardList}
+						requirements={props.clientSecret}
+						handleSource={handlePaymethodDataChange}
+						onSelectCard={handlePaymethodDataChange}
+						onCancel={() => setAddCardOpen({ ...addCardOpen, stripe: false })}
+						publicKeyAddCard={isOpenMethod?.paymethod?.credentials?.stripe?.publishable || isOpenMethod?.paymethod?.credentials?.publishable}
 					/>
 				</KeyboardAvoidingView>
 			</OModal>