ordering-ui-react-native 0.21.83 → 0.21.84-release

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

@@ -148,6 +148,8 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
   const hideDriverMessages = theme?.confirmation?.components?.driver?.components?.messages?.hidden
   const hideCustomerPhone = theme?.confirmation?.components?.customer?.components?.phone?.hidden
   const hideCustomerAddress = theme?.confirmation?.components?.customer?.components?.address?.hidden
+  const changeIdToExternalId = configs?.change_order_id?.value === '1'
+
   const progressBarObjt = isPickup ? getOrderStatuPickUp : getOrderStatus
   const walletName: any = {
     cash: {
@@ -185,18 +187,18 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
     navigation.navigate('BottomTab');
   };
 
-  const getIncludedTaxes = () => {
+  const getIncludedTaxes = (isDeliveryFee?: boolean) => {
     if (order?.taxes?.length === 0 || !order?.taxes) {
       return order.tax_type === 1 ? order?.summary?.tax ?? 0 : 0
     } else {
       return order?.taxes.reduce((taxIncluded: number, tax: any) => {
-        return taxIncluded + (tax.type === 1 ? tax.summary?.tax : 0)
+        return taxIncluded + (((!isDeliveryFee && tax.type === 1 && tax.target === 'product') || (isDeliveryFee && tax.type === 1 && tax.target === 'delivery_fee')) ? tax.summary?.tax : 0)
       }, 0)
     }
   }
 
   const getIncludedTaxesDiscounts = () => {
-    return order?.taxes?.filter((tax: any) => tax?.type === 1)?.reduce((carry: number, tax: any) => carry + (tax?.summary?.tax_after_discount ?? tax?.summary?.tax), 0)
+    return order?.taxes?.filter((tax: any) => tax?.type === 1 && tax?.target === 'product')?.reduce((carry: number, tax: any) => carry + (tax?.summary?.tax_after_discount ?? tax?.summary?.tax), 0)
   }
 
   const handleClickOrderReview = (order: any) => {
@@ -270,7 +272,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,
@@ -386,7 +388,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                 numberOfLines={2}
                 ellipsizeMode='tail'
               >
-                {`${t('ORDER', 'Order')} #${order?.id}`}
+                {`${t('ORDER', 'Order')} ${(changeIdToExternalId && order?.external_id) || `#${order?.id}`}`}
               </OText>
             )}
           </>
@@ -460,8 +462,8 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
             <Header>
               <NavBar
                 hideArrowLeft
-                title={`${t('ORDER', 'Order')} #${order?.id}`}
-                titleAlign={'center'}
+                title={`${t('ORDER', 'Order')} ${(changeIdToExternalId && order?.external_id) || `#${order?.id}`}`}
+                titleAlign={'left'}
                 showCall={false}
                 btnStyle={{ paddingLeft: 0 }}
                 style={{ marginTop: Platform.OS === 'ios' ? 0 : 20 }}
@@ -643,7 +645,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 +751,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                           }
                           locations={parsedLocations}
                           readOnly
+                          manualZoom
                         />
                       </Map>
                     )}
@@ -832,9 +834,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' })}
@@ -934,7 +935,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                   )
                 }
                 {
-                  order?.taxes?.length > 0 && order?.taxes?.filter((tax: any) => tax?.type === 2 && tax?.rate !== 0).map((tax: any) => (
+                  order?.taxes?.length > 0 && order?.taxes?.filter((tax: any) => tax?.type === 2 && tax?.rate !== 0 && tax?.target === 'product').map((tax: any) => (
                     <Table key={tax.id}>
                       <OSRow>
                         <OText size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal} numberOfLines={1}>
@@ -983,12 +984,30 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                     </Table>
                   ))
                 }
-                {typeof order?.summary?.delivery_price === 'number' && (
+                {typeof order?.summary?.delivery_price === 'number' && !isPickup && (
                   <Table>
                     <OText size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal}>{t('DELIVERY_FEE', 'Delivery Fee')}</OText>
-                    <OText size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal}>{parsePrice(order?.summary?.delivery_price)}</OText>
+                    <OText size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal}>{parsePrice(order?.summary?.delivery_price + getIncludedTaxes(true))}</OText>
                   </Table>
                 )}
+                {
+                  order?.taxes?.length > 0 && order?.taxes?.filter((tax: any) => tax?.type === 2 && tax?.rate !== 0 && tax?.target === 'delivery_fee').map((tax: any, i: number) => (
+                    <Table key={`${tax?.description}_${i}`}>
+                      <OSRow>
+                        <OText size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal} numberOfLines={1}>
+                          {t(tax?.name?.toUpperCase()?.replace(/ /g, '_'), tax?.name) || t('INHERIT_FROM_BUSINESS', 'Inherit from business')}
+                          {`(${verifyDecimals(tax?.rate, parseNumber)}%)`}
+                        </OText>
+                        {setOpenTaxModal && (
+                          <TouchableOpacity onClick={() => setOpenTaxModal({ open: true, data: tax, type: 'tax' })}>
+                            <AntIcon name='infocirlceo' size={16} color={theme.colors.primary} />
+                          </TouchableOpacity>
+                        )}
+                      </OSRow>
+                      <OText size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal}>{parsePrice(tax?.summary?.tax_after_discount ?? tax?.summary?.tax ?? 0)}</OText>
+                    </Table>
+                  ))
+                }
                 {
                   order?.offers?.length > 0 && order?.offers?.filter((offer: any) => offer?.target === 2)?.map((offer: any) => (
                     <Table key={offer.id}>

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/OrderSummary/index.tsx

@@ -47,7 +47,9 @@ const OrderSummaryUI = (props: any) => {
     cateringTypes,
     hideDeliveryFee,
     loyaltyRewardRate,
-    maxDate
+    maxDate,
+    hideCommentsByValidationCheckout,
+    hideCouponByValidationCheckout
   } = props;
 
   const theme = useTheme()
@@ -55,11 +57,10 @@ const OrderSummaryUI = (props: any) => {
   const [{ configs }] = useConfig();
   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
+  const isCouponEnabled = hideCouponByValidationCheckout
+  const hideCartComments = hideCommentsByValidationCheckout
 
   const cart = orderState?.carts?.[`businessId:${props.cart.business_id}`]
 
@@ -72,12 +73,14 @@ const OrderSummaryUI = (props: any) => {
     }
   }
 
-  const getIncludedTaxes = () => {
+  const getIncludedTaxes = (isDeliveryFee?: boolean) => {
     if (cart?.taxes === null || !cart?.taxes) {
       return cart?.business?.tax_type === 1 ? cart?.tax : 0
     } else {
       return cart?.taxes.reduce((taxIncluded: number, tax: any) => {
-        return taxIncluded + (tax.type === 1 ? tax.summary?.tax : 0)
+        return taxIncluded +
+          (((!isDeliveryFee && tax.type === 1 && tax.target === 'product') ||
+            (isDeliveryFee && tax.type === 1 && tax.target === 'delivery_fee')) ? tax.summary?.tax : 0)
       }, 0)
     }
   }
@@ -102,7 +105,7 @@ const OrderSummaryUI = (props: any) => {
   }
 
   const getIncludedTaxesDiscounts = () => {
-    return cart?.taxes?.filter((tax: any) => tax?.type === 1)?.reduce((carry: number, tax: any) => carry + (tax?.summary?.tax_after_discount ?? tax?.summary?.tax), 0)
+    return cart?.taxes?.filter((tax: any) => (tax?.type === 1 && tax?.target === 'product'))?.reduce((carry: number, tax: any) => carry + (tax?.summary?.tax_after_discount ?? tax?.summary?.tax), 0)
   }
 
   const OfferAlert = ({ offerId }: any) => {
@@ -194,7 +197,7 @@ const OrderSummaryUI = (props: any) => {
                 </OSTable>
               )}
               {
-                cart.taxes?.length > 0 && cart.taxes.filter((tax: any) => tax.type === 2 && tax?.rate !== 0).map((tax: any) => (
+                cart.taxes?.length > 0 && cart.taxes.filter((tax: any) => tax.type === 2 && tax?.rate !== 0 && tax?.target === 'product').map((tax: any, i: number) => (
                   <OSTable key={tax.id}>
                     <OSRow>
                       <OText size={12} numberOfLines={1} >
@@ -249,9 +252,25 @@ const OrderSummaryUI = (props: any) => {
               {orderState?.options?.type === 1 && !hideDeliveryFee && (
                 <OSTable>
                   <OText size={12}>{t('DELIVERY_FEE', 'Delivery Fee')}</OText>
-                  <OText size={12}>{parsePrice(cart?.delivery_price_with_discount)}</OText>
+                  <OText size={12}>{parsePrice(cart?.delivery_price_with_discount + getIncludedTaxes(true))}</OText>
                 </OSTable>
               )}
+              {
+                cart?.taxes?.length > 0 && cart?.taxes?.filter((tax: any) => tax?.type === 2 && tax?.rate !== 0 && tax?.target === 'delivery_fee').map((tax: any, i: number) => (
+                  <OSTable key={`${tax.description}_${i}`}>
+                    <OSRow>
+                      <OText size={12} numberOfLines={1}>
+                        {tax.name || t('INHERIT_FROM_BUSINESS', 'Inherit from business')}
+                        {`(${verifyDecimals(tax?.rate, parseNumber)}%)`}
+                      </OText>
+                      <TouchableOpacity onPress={() => setOpenTaxModal({ open: true, data: tax, type: 'tax' })}>
+                        <AntIcon name='infocirlceo' size={16} color={theme.colors.primary} />
+                      </TouchableOpacity>
+                    </OSRow>
+                    <OText size={12}>{parsePrice(tax?.summary?.tax_after_discount ?? tax?.summary?.tax ?? 0)}</OText>
+                  </OSTable>
+                ))
+              }
               {
                 cart?.offers?.length > 0 && cart?.offers?.filter((offer: any) => offer?.target === 2)?.map((offer: any) => (
                   <OSTable key={offer.id}>

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/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();
@@ -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,11 +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}
+					publicKeyAddCard={isOpenMethod?.paymethod?.credentials?.stripe?.publishable || isOpenMethod?.paymethod?.credentials?.publishable}
 				/>
 			)}
 
@@ -407,7 +411,10 @@ const PaymentOptionsUI = (props: any) => {
 						handleSource={handlePaymethodDataChange}
 						onCancel={() => handlePaymethodClick(null)}
 						merchantId={merchantId}
-						publicKeyAddCard={isOpenMethod?.paymethod?.credentials?.stripe?.publishable}
+						urlscheme={urlscheme}
+						androidAppId={androidAppId}
+						publicKeyAddCard={isOpenMethod?.paymethod?.credentials?.stripe?.publishable || isOpenMethod?.paymethod?.credentials?.publishable}
+						paySelected={props.paySelected}
 					/>
 				</KeyboardAvoidingView>
 			</OModal>
@@ -418,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}
@@ -432,7 +438,8 @@ const PaymentOptionsUI = (props: any) => {
 						onNavigationRedirect={onNavigationRedirect}
 						onCancel={() => handlePaymethodClick(null)}
 						publicKey={isOpenMethod?.paymethod?.credentials.publishable}
-						publicKeyAddCard={isOpenMethod?.paymethod?.credentials?.stripe?.publishable}
+						publicKeyAddCard={isOpenMethod?.paymethod?.credentials?.stripe?.publishable || isOpenMethod?.paymethod?.credentials?.publishable}
+						paySelected={props.paySelected}
 					/>
 				</View>
 			)}
@@ -457,7 +464,7 @@ const PaymentOptionsUI = (props: any) => {
 						accountId={isOpenMethod?.paymethod?.credentials?.user}
 						onSelectCard={handlePaymethodDataChange}
 						onCancel={() => setAddCardOpen({ ...addCardOpen, stripeConnect: false })}
-						publicKeyAddCard={isOpenMethod?.paymethod?.credentials?.stripe?.publishable}
+						publicKeyAddCard={isOpenMethod?.paymethod?.credentials?.stripe?.publishable || isOpenMethod?.paymethod?.credentials?.publishable}
 					/>
 				</KeyboardAvoidingView>
 			</OModal>
@@ -483,9 +490,10 @@ const PaymentOptionsUI = (props: any) => {
 						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}
+						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>