ordering-ui-react-native 0.21.55 → 0.21.56-release

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

@@ -1,3 +1,6 @@
+
+
+
 import * as React from 'react'
 import styled, { useTheme } from 'styled-components/native'
 import { OButton, OIcon, OText } from '../shared'
@@ -64,6 +67,7 @@ const NavBar = (props: Props) => {
 		<Wrapper style={{ paddingTop: props.paddingTop, ...{ flexDirection: props.isVertical ? 'column' : 'row', alignItems: props.isVertical ? 'flex-start' : 'center' }, ...props.style }}>
 			{!props.hideArrowLeft && (
 				<OButton
+					useArrow
 					iconProps={{
 						name: 'arrowleft',
 						size: 26
@@ -114,8 +118,6 @@ const NavBar = (props: Props) => {
 			{props.showCall
 				? (<OButton
 					isCircle={true}
-					bgColor={theme.colors.primary}
-					borderColor={theme.colors.primary}
 					imgRightSrc={null}
 					imgLeftStyle={{ tintColor: 'white', width: 30, height: 30 }}
 					imgLeftSrc={theme.images.general.support}

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

@@ -1,5 +1,5 @@
 import React from 'react'
-import { useLanguage, useOrderingTheme } from 'ordering-components/native'
+import { useLanguage } from 'ordering-components/native'
 import { Dimensions } from 'react-native'
 import RNRestart from 'react-native-restart'
 import { OText, OIcon, OButton } from '../shared'
@@ -16,8 +16,7 @@ export const NetworkError = (props: NoNetworkParams) => {
   } = props
   const theme = useTheme()
   const [, t] = useLanguage()
-  const [orderingTheme] = useOrderingTheme()
-  const urlimage = orderingTheme?.theme?.no_internet?.components?.image
+  const urlimage = theme?.no_internet?.components?.image
   const noNetworkImage = image || theme.images.general.noNetwork
   const deviceWidth = Dimensions.get('screen').width
 
@@ -46,15 +45,10 @@ export const NetworkError = (props: NoNetworkParams) => {
         />
         <OButton
           text={t('REFRESH', 'Refresh')}
-          bgColor={theme.colors.primary}
-          borderColor={theme.colors.primary}
           style={{
             borderRadius: 8,
             marginTop: 45
           }}
-          textStyle={{
-            color: theme.colors.white
-          }}
           onClick={() => RNRestart.Restart()}
         />
       </ImageContainer>

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

@@ -42,11 +42,8 @@ export const NotFoundSource = (props: NotFoundSourceParams) => {
 				<View style={{ marginTop: 10, width: '100%' }}>
 					<OButton
 						style={{ width: '100%', height: 50, ...btnStyle }}
-						bgColor={theme.colors.primary}
-						borderColor={theme.colors.primary}
 						onClick={() => onClickButton()}
 						text={btnTitle}
-						textStyle={{ color: theme.colors.white }}
 					/>
 				</View>
 			)}

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

@@ -3,7 +3,6 @@ import {
 	UserFormDetails as NotificationsController,
 	useLanguage,
 	useSession,
-	useOrderingTheme,
 	useToast,
 	ToastType,
 } from 'ordering-components/native'
@@ -28,7 +27,6 @@ const NotificationsUI = (props: any) => {
 	const [{ user: userSession }] = useSession()
 	const [, t] = useLanguage();
 	const [, { showToast }] = useToast();
-	const [orderingTheme] = useOrderingTheme()
 
 	const user = userData || userSession
 
@@ -45,8 +43,8 @@ const NotificationsUI = (props: any) => {
 	})
 
 	const goToBack = () => navigation?.canGoBack() && navigation.goBack()
-	const showCustomerPromotions = !orderingTheme?.theme?.profile?.components?.promotions?.hidden
-	const showNotifications = !orderingTheme?.theme?.profile?.components?.notification_settings?.hidden
+	const showCustomerPromotions = !theme?.profile?.components?.promotions?.hidden
+	const showNotifications = !theme?.profile?.components?.notification_settings?.hidden
 
 	const handleEditNotifications = (key: any, value: any) => {
 		setNotificationsList({

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

@@ -145,10 +145,10 @@ export const OrderHistory = (props: any) => {
                     </>
                   )
                     : message.change?.attribute === 'prepared_in' ? (
-                    <>
-                      {t('TIME_ADDED_BY_BUSINESS', 'Time added by business')}{'\n'}
-                      {formatSeconds(parseInt(message.change.new, 10))}
-                    </>
+                      <>
+                        {t('TIME_ADDED_BY_BUSINESS', 'Time added by business')}{'\n'}
+                        {formatSeconds(parseInt(message.change.new, 10))}
+                      </>
                     ) : t(ORDER_STATUS[parseInt(message.change.new, 10)])
                 }
               </OText>
@@ -170,11 +170,9 @@ export const OrderHistory = (props: any) => {
       ))}
       <OButton
         text={enableReview ? t('REVIEW_ORDER', 'Review order') : t('CONTINUE', 'Continue')}
-        textStyle={{ fontSize: 14, color: theme.colors.white }}
+        textStyle={{ fontSize: 14 }}
         imgRightSrc={theme.images.general.arrow_right}
         imgRightStyle={{ tintColor: theme.colors.white, right: 5, margin: 5 }}
-        borderColor='transparent'
-        bgColor={theme.colors.primary}
         style={{ borderRadius: 7.6, borderWidth: 1, height: 44, shadowOpacity: 0, marginBottom: 30, marginTop: 20 }}
         onClick={() => handleReview()}
       />

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

@@ -270,7 +270,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
       title: t('DRIVER', 'Driver'),
       icon:
         order?.driver?.photo ||
-        'https://res.cloudinary.com/demo/image/fetch/c_thumb,g_face,r_max/https://www.freeiconspng.com/thumbs/driver-icon/driver-icon-14.png',
+        theme?.images?.general?.driverPng,
     },
     {
       ...order?.business?.location,
@@ -368,7 +368,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
   }, [order?.delivery_type])
 
   return (
-    <SafeAreaView>
+    <>
       <View style={styles.wrapperNavbar}>
         <TopHeader>
           <>
@@ -643,7 +643,6 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                     <OButton
                       text={t('GET_DIRECTIONS', 'Get Directions')}
                       imgRightSrc=''
-                      textStyle={{ color: theme.colors.white }}
                       style={{
                         alignSelf: 'center',
                         borderRadius: 10,
@@ -750,6 +749,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                           }
                           locations={parsedLocations}
                           readOnly
+                          manualZoom
                         />
                       </Map>
                     )}
@@ -832,9 +832,8 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                   <OButton
                     text={t('YOUR_ORDERS', 'Your Orders')}
                     textStyle={{ fontSize: 14, color: theme.colors.primary }}
+                    bgColor={theme.colors.white}
                     imgRightSrc={null}
-                    borderColor={theme.colors.primary}
-                    bgColor={theme.colors.clear}
                     style={{ borderRadius: 7.6, borderWidth: 1, height: 44, shadowOpacity: 0 }}
                     parentStyle={{ marginTop: 29, marginEnd: 15 }}
                     onClick={() => navigation.navigate('BottomTab', { screen: 'MyOrders' })}
@@ -1125,8 +1124,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
           />
         </OModal>
       </OrderDetailsContainer>
-    </SafeAreaView>
-
+    </>
   );
 };
 

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

@@ -5,7 +5,6 @@ export const OrderDetailsContainer = styled.ScrollView`
 `
 
 export const NavBack = styled.TouchableOpacity`
-
 `
 
 

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

@@ -23,6 +23,7 @@ import {
   OrderProgressWrapper
 } from './styles'
 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,7 +113,7 @@ const OrderProgressUI = (props: any) => {
     setInitialLoaded(true)
   }, [orderList.loading, initialLoaded])
 
-  const progressBarObjt = lastOrder?.delivery_type && lastOrder?.delivery_type === 2 ? getOrderStatuPickUp : getOrderStatus
+  const progressBarObjt = (s: any) => lastOrder?.delivery_type && lastOrder?.delivery_type === 2 ? getOrderStatuPickUp(s) : getOrderStatus(s)
 
   return (
     <>
@@ -130,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}
@@ -209,6 +212,22 @@ export const OrderProgress = (props: any) => {
       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
   }
 

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

@@ -31,14 +31,14 @@ 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 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 +102,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 +116,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/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])
 
@@ -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/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/index.tsx

@@ -131,7 +131,6 @@ const PaymentOptionStripeUI = (props: any) => {
 						bgColor={theme.colors.backgroundGray}
 						borderColor={theme.colors.backgroundGray}
 						style={styles.btnAddStyle}
-						textStyle={{ color: 'white' }}
 						imgRightSrc={null}
 						onClick={() => setAddCardOpen(true)}
 					/>
@@ -141,7 +140,6 @@ const PaymentOptionStripeUI = (props: any) => {
 								text={t('CANCEL', 'Cancel')}
 								bgColor={theme.colors.backgroundGray}
 								borderColor={theme.colors.backgroundGray}
-								textStyle={{ color: 'white' }}
 								style={styles.btnAction}
 								imgRightSrc={null}
 								onClick={() => onCancel()}
@@ -150,9 +148,6 @@ const PaymentOptionStripeUI = (props: any) => {
 						<View style={{ width: '48%' }}>
 							<OButton
 								text={t('ACCEPT', 'Accept')}
-								bgColor={theme.colors.primary}
-								borderColor={theme.colors.primary}
-								textStyle={{ color: 'white' }}
 								style={styles.btnAction}
 								imgRightSrc={null}
 								isDisabled={!cardSelected || cardsList?.cards?.length === 0}

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

@@ -65,6 +65,7 @@ const PaymentOptionsUI = (props: any) => {
 		handlePaymentMethodClickCustom,
 		handlePlaceOrder,
 		merchantId,
+		urlscheme,
 		setMethodPaySupported,
 		placeByMethodPay,
 		methodPaySupported,
@@ -74,7 +75,8 @@ const PaymentOptionsUI = (props: any) => {
 		requiredFields,
 		openUserModal,
 		paymethodClicked,
-		setPaymethodClicked
+		setPaymethodClicked,
+		androidAppId
 	} = props
 
 	const theme = useTheme();
@@ -217,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>
@@ -324,7 +326,6 @@ const PaymentOptionsUI = (props: any) => {
 					<OButton
 						text={t('ADD_PAYMENT_CARD', 'Add New Payment Card')}
 						bgColor={theme.colors.white}
-						borderColor={theme.colors.primary}
 						style={styles.btnAddStyle}
 						textStyle={{ color: theme.colors.primary, fontSize: 12 }}
 						imgRightSrc={null}
@@ -342,10 +343,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>
 			)}
@@ -360,10 +362,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}
 				/>
 			)}
 
@@ -406,6 +411,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>
@@ -416,7 +425,6 @@ const PaymentOptionsUI = (props: any) => {
 					<OButton
 						text={t('ADD_PAYMENT_CARD', 'Add New Payment Card')}
 						bgColor={theme.colors.white}
-						borderColor={theme.colors.primary}
 						style={styles.btnAddStyle}
 						textStyle={{ color: theme.colors.primary, fontSize: 12 }}
 						imgRightSrc={null}
@@ -425,11 +433,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>
 			)}
@@ -446,6 +456,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}
@@ -453,6 +464,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>

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

@@ -236,9 +236,7 @@ const PlaceSpotUI = (props: PlaceSpotParams) => {
           <View style={{ alignItems: 'flex-start' }}>
             <OButton
               onClick={() => onChangeSpot()}
-              bgColor={theme.colors.primary}
-              borderColor={theme.colors.primary}
-              textStyle={{ color: 'white', fontSize: 12 }}
+              textStyle={{ fontSize: 12 }}
               imgRightSrc={null}
               text={t('UPDATE_SPOT_NUMBER', 'Update')}
               isDisabled={(!spotNumber && !Object.values(vehicle).every(e => e))}

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

@@ -27,7 +27,7 @@ export const PreviousOrders = (props: PreviousOrdersParams) => {
 
 	const [, t] = useLanguage();
 
-  const pastOrders = [1, 2, 5, 6, 10, 11, 12, 15, 16, 17]
+	const pastOrders = [1, 2, 5, 6, 10, 11, 12, 15, 16, 17]
 
 	return (
 		<View style={{ marginBottom: 30 }}>
@@ -49,7 +49,6 @@ export const PreviousOrders = (props: PreviousOrdersParams) => {
 						onClick={loadMoreOrders}
 						text={t('LOAD_MORE_ORDERS', 'Load more orders')}
 						imgRightSrc={null}
-						textStyle={{ color: theme.colors.white }}
 						style={{ borderRadius: 7.6, shadowOpacity: 0, marginTop: 20 }}
 					/>
 				</WrappButton>