ordering-ui-react-native 0.17.59-release → 0.17.60-release

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-react-native",
-  "version": "0.17.59-release",
+  "version": "0.17.60-release",
   "description": "Reusable components made in react native",
   "main": "src/index.tsx",
   "author": "ordering.inc",

package/themes/business/src/components/AcceptOrRejectOrder/index.tsx

@@ -215,7 +215,7 @@ export const AcceptOrRejectOrder = (props: AcceptOrRejectOrderParams) => {
         status: 7,
       },
       rejectByBusiness: {
-        comment: comments,
+        reasons: comments,
         status: 5,
       },
       acceptByDriver: {
@@ -223,22 +223,22 @@ export const AcceptOrRejectOrder = (props: AcceptOrRejectOrderParams) => {
         status: 8,
       },
       rejectByDriver: {
-        comment: comments,
+        reasons: comments,
         status: 6,
         reject_reason: rejectReason
       },
       pickupFailedByDriver: {
-        comment: comments,
+        reasons: comments,
         status: 10,
         reject_reason: rejectReason
       },
       deliveryFailedByDriver: {
-        comment: comments,
+        reasons: comments,
         status: 12,
         reject_reason: rejectReason
       },
       orderNotReady: {
-        comment: comments,
+        reasons: comments,
         status: 14,
         reject_reason: rejectReason
       },

package/themes/business/src/components/OrderDetails/OrderContentComponent.tsx

@@ -54,8 +54,14 @@ export const OrderContentComponent = (props: OrderContent) => {
 
   const [openReviewModal, setOpenReviewModal] = useState(false)
 
-  const [isReadMore, setIsReadMore] = useState(false)
-  const [lengthMore, setLengthMore] = useState(false)
+  const [isReadMore, setIsReadMore] = useState({
+    customerAddress: false,
+    businessAddressNotes: false
+  })
+  const [lengthMore, setLengthMore] = useState({
+    customerAddress: false,
+    businessAddressNotes: false
+  })
 
   const pastOrderStatuses = [1, 2, 5, 6, 10, 11, 12, 16, 17]
 
@@ -108,8 +114,15 @@ export const OrderContentComponent = (props: OrderContent) => {
     return /^\d+$/.test(str);
   }
 
-  const onTextLayout = useCallback((e: any) => {
-    setLengthMore((e.nativeEvent.lines.length == 2 && e.nativeEvent.lines[1].width > WIDTH_SCREEN * .76) || e.nativeEvent.lines.length > 2); //to check the text is more than 2 lines or not
+  const onTextLayout = useCallback((e: any, item: string) => {
+    if (item === 'customerAddress') {
+      const customerAddressMore = (e.nativeEvent.lines.length == 2 && e.nativeEvent.lines[1].width > WIDTH_SCREEN * .76) || e.nativeEvent.lines.length > 2
+      setLengthMore(prev => ({ ...prev, customerAddress: customerAddressMore }))
+    }
+    if (item === 'businessAddressNotes') {
+      const businessAddressNotesMore = (e.nativeEvent.lines.length == 3 && e.nativeEvent.lines[2].width > WIDTH_SCREEN * .76) || e.nativeEvent.lines.length > 3
+      setLengthMore(prev => ({ ...prev, businessAddressNotes: businessAddressNotesMore }))
+    }
   }, []);
 
   return (
@@ -209,17 +222,28 @@ export const OrderContentComponent = (props: OrderContent) => {
           </OText>
         )}
         {!!order?.business?.address_notes && (
-          <View style={styles.linkWithIcons}>
-            <OLink
-              PressStyle={styles.linkWithIcons}
-              url={Platform.select({
-                ios: `maps:0,0?q=${order?.business?.address_notes}`,
-                android: `geo:0,0?q=${order?.business?.address_notes}`,
-              })}
-              shorcut={order?.business?.address_notes}
-              TextStyle={styles.textLink}
-            />
-          </View>
+          <>
+            <View style={styles.linkWithIcons}>
+              <OLink
+                PressStyle={styles.linkWithIcons}
+                url={Platform.select({
+                  ios: `maps:0,0?q=${order?.business?.address_notes}`,
+                  android: `geo:0,0?q=${order?.business?.address_notes}`,
+                })}
+                shorcut={order?.business?.address_notes}
+                TextStyle={styles.textLink}
+                onTextLayout={e => onTextLayout(e, 'businessAddressNotes')}
+                numberOfLines={isReadMore.businessAddressNotes ? 20 : 3}
+              />
+            </View>
+            {lengthMore.businessAddressNotes && (
+              <TouchableOpacity
+                onPress={() => setIsReadMore({ ...isReadMore, businessAddressNotes: !isReadMore.businessAddressNotes })}
+              >
+                <OText size={12} color={theme.colors.statusOrderBlue}>{isReadMore.businessAddressNotes ? t('SHOW_LESS', 'Show less') : t('READ_MORE', 'Read more')}</OText>
+              </TouchableOpacity>
+            )}
+          </>
         )}
       </OrderBusiness>
 
@@ -327,15 +351,17 @@ export const OrderContentComponent = (props: OrderContent) => {
                   ios: `maps:0,0?q=${order?.customer?.address}`,
                   android: `geo:0,0?q=${order?.customer?.address}`,
                 })}
-                onTextLayout={onTextLayout}
-                numberOfLines={isReadMore ? 20 : 2}
+                onTextLayout={e => onTextLayout(e, 'customerAddress')}
+                numberOfLines={isReadMore.customerAddress ? 20 : 2}
                 shorcut={order?.customer?.address}
                 TextStyle={styles.textLink}
               />
             </View>
-            {lengthMore && (
-              <TouchableOpacity onPress={() => setIsReadMore(!isReadMore)}>
-                <OText size={12} color={theme.colors.statusOrderBlue}>{isReadMore ? t('SHOW_LESS', 'Show less') : t('READ_MORE', 'Read more')}</OText>
+            {lengthMore.customerAddress && (
+              <TouchableOpacity
+                onPress={() => setIsReadMore({ ...isReadMore, customerAddress: !isReadMore.customerAddress })}
+              >
+                <OText size={12} color={theme.colors.statusOrderBlue}>{isReadMore.customerAddress ? t('SHOW_LESS', 'Show less') : t('READ_MORE', 'Read more')}</OText>
               </TouchableOpacity>
             )}
           </>

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState, useCallback } from 'react';
 import {
 	BusinessInformation as BusinessInformationController,
 	useLanguage, useUtils, useConfig,
@@ -16,13 +16,16 @@ import {
 	DivideView,
 	MediaWrapper,
 } from './styles';
-import { StyleSheet, View } from 'react-native';
+import { StyleSheet, View, TouchableOpacity } from 'react-native';
 import { BusinessInformationParams } from '../../types';
 import { GoogleMap } from '../GoogleMap';
 import { WebView } from 'react-native-webview';
 import { formatUrlVideo } from '../../utils'
 import { ScheduleAccordion } from '../ScheduleAccordion';
 import moment from 'moment';
+import { DeviceOrientationMethods } from '../../../../../src/hooks/DeviceOrientation'
+const { useDeviceOrientation } = DeviceOrientationMethods
+
 const BusinessInformationUI = (props: BusinessInformationParams) => {
 	const { businessState, businessSchedule, businessLocation } = props;
 
@@ -30,6 +33,11 @@ const BusinessInformationUI = (props: BusinessInformationParams) => {
 	const [, t] = useLanguage();
 	const [{ optimizeImage }] = useUtils();
 	const [{ configs }] = useConfig()
+	const [orientationState] = useDeviceOrientation();
+
+	const [isReadMore, setIsReadMore] = useState(false)
+	const [lengthMore, setLengthMore] = useState(false)
+	const WIDTH_SCREEN = orientationState?.dimensions?.width
 
 	const hideLocation = theme?.business_view?.components?.information?.components?.location?.hidden
 	const hideSchedule = theme?.business_view?.components?.information?.components?.schedule?.hidden
@@ -73,6 +81,10 @@ const BusinessInformationUI = (props: BusinessInformationParams) => {
 		return iAry;
 	};
 
+	const onTextLayout = useCallback((e: any) => {
+		setLengthMore((e.nativeEvent.lines.length == 3 && e.nativeEvent.lines[2].width > WIDTH_SCREEN * .76) || e.nativeEvent.lines.length > 3)
+	}, [])
+
 	return (
 		<BusinessInformationContainer>
 			<WrapMainContent contentContainerStyle={{}}>
@@ -99,10 +111,29 @@ const BusinessInformationUI = (props: BusinessInformationParams) => {
 						</>
 					)}
 					{!hideAddress && (
-						<OText size={12} mBottom={20}>
+						<OText size={12} mBottom={10}>
 							{businessState?.business?.address}
 						</OText>
 					)}
+					{businessState?.business?.address_notes && (
+						<>
+							<OText
+								size={12}
+								mBottom={10}
+								numberOfLines={isReadMore ? 20 : 3}
+								onTextLayout={onTextLayout}
+							>
+								{businessState?.business?.address_notes}
+							</OText>
+							{lengthMore && (
+								<TouchableOpacity
+									onPress={() => setIsReadMore(!isReadMore)}
+								>
+									<OText size={12} mBottom={20} color={theme.colors.primary}>{isReadMore ? t('SHOW_LESS', 'Show less') : t('READ_MORE', 'Read more')}</OText>
+								</TouchableOpacity>
+							)}
+						</>
+					)}
 					<DivideView />
 					{!hideSchedule && (
 						<>

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

@@ -45,7 +45,6 @@ import { ProfessionalFilter } from '../ProfessionalFilter';
 import { ServiceForm } from '../ServiceForm';
 import { BusinessesListing } from '../BusinessesListing/Layout/Original'
 import { PageBanner } from '../PageBanner'
-import { vibrateApp } from '../../utils';
 
 const PIXELS_TO_SCROLL = 2000
 
@@ -164,9 +163,10 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
     if (product.ingredients?.length === 0 && product.extras.length === 0 && !product.inventoried && auth && isQuickAddProduct) {
       const isProductAddedToCart = currentCart?.products?.find((Cproduct: any) => Cproduct.id === product.id)
       const productQuantity = isProductAddedToCart?.quantity
+      const minimumPerOrder = product?.minimum_per_order || 1
       const addCurrentProduct = {
         ...product,
-        quantity: 1
+        quantity: minimumPerOrder
       }
       const updateCurrentProduct = {
         name: product?.name,
@@ -285,7 +285,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
   }, []);
 
   const handleBackNavigation = () => {
-    navigation?.canGoBack() ? navigation.goBack() : navigation.navigate('BottomTab')
+    navigation?.canGoBack() && !props.fromMulti ? navigation.goBack() : navigation.navigate('BottomTab')
   }
 
   const adjustBusiness = async (adjustBusinessId: number) => {
@@ -323,6 +323,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
     }
   }, [isFocused])
 
+
   useEffect(() => {
     function onKeyboardDidShow(e: KeyboardEvent) {
       setKeyboardHeight(e?.endCoordinates?.height);

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

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 import { View, StyleSheet, TouchableOpacity, Platform, I18nManager, ScrollView } from 'react-native';
 import { initStripe, useConfirmPayment } from '@stripe/stripe-react-native';
 import Picker from 'react-native-country-picker-modal';
@@ -53,9 +53,11 @@ import { FloatingButton } from '../FloatingButton';
 import { Container } from '../../layouts/Container';
 import NavBar from '../NavBar';
 import { OrderSummary } from '../OrderSummary';
-import { getTypesText, vibrateApp } from '../../utils';
+import { getTypesText } from '../../utils';
 import { CartStoresListing } from '../CartStoresListing';
 import { PaymentOptionsWebView } from '../../../../../src/components/PaymentOptionsWebView';
+import { DeviceOrientationMethods } from '../../../../../src/hooks/DeviceOrientation'
+const { useDeviceOrientation } = DeviceOrientationMethods
 
 const mapConfigs = {
 	mapZoom: 16,
@@ -141,6 +143,10 @@ const CheckoutUI = (props: any) => {
 	const [{ options, carts, loading }, { confirmCart }] = useOrder();
 	const [validationFields] = useValidationFields();
 	const [events] = useEvent()
+	const [orientationState] = useDeviceOrientation();
+	const [isReadMore, setIsReadMore] = useState(false)
+	const [lengthMore, setLengthMore] = useState(false)
+	const WIDTH_SCREEN = orientationState?.dimensions?.width
 
 	const [errorCash, setErrorCash] = useState(false);
 	const [userErrors, setUserErrors] = useState<any>([]);
@@ -279,7 +285,7 @@ const CheckoutUI = (props: any) => {
 	const checkValidationFields = () => {
 		setUserErrors([])
 		const errors = []
-		const notFields = ['coupon', 'driver_tip', 'mobile_phone', 'address', 'zipcode', 'address_notes']
+		const notFields = ['coupon', 'driver_tip', 'mobile_phone', 'address', 'zipcode', 'address_notes', 'comments']
 		const _requiredFields: any = []
 
 		Object.values(validationFields?.fields?.checkout).map((field: any) => {
@@ -327,7 +333,7 @@ const CheckoutUI = (props: any) => {
 	useEffect(() => {
 		if (cart?.products?.length === 0) {
 			if (cart?.business?.slug) {
-				onNavigationRedirect('Business', { store: cart?.business?.slug, header: null, logo: null })
+				onNavigationRedirect('Business', { store: cart?.business?.slug, header: null, logo: null, fromMulti: props.fromMulti })
 			} else {
 				onNavigationRedirect('Wallets')
 			}
@@ -367,6 +373,10 @@ const CheckoutUI = (props: any) => {
 		}
 	}, [cart?.paymethod_data])
 
+	const onTextLayout = useCallback((e: any) => {
+		setLengthMore((e.nativeEvent.lines.length == 3 && e.nativeEvent.lines[2].width > WIDTH_SCREEN * .76) || e.nativeEvent.lines.length > 3)
+	}, [])
+
 	return (
 		<>
 			<Container noPadding>
@@ -458,6 +468,25 @@ const CheckoutUI = (props: any) => {
 														{businessDetails?.business?.address}
 													</OText>
 												)}
+												{businessDetails?.business?.address_notes && (
+													<>
+														<OText
+															size={12}
+															lineHeight={18}
+															numberOfLines={isReadMore ? 20 : 3}
+															onTextLayout={onTextLayout}
+														>
+															{businessDetails?.business?.address_notes}
+														</OText>
+														{lengthMore && (
+															<TouchableOpacity
+																onPress={() => setIsReadMore(!isReadMore)}
+															>
+																<OText size={12} color={theme.colors.primary}>{isReadMore ? t('SHOW_LESS', 'Show less') : t('READ_MORE', 'Read more')}</OText>
+															</TouchableOpacity>
+														)}
+													</>
+												)}
 											</View>
 										</>
 									)}

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

@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useRef } from 'react'
 import { Dimensions, StyleSheet, View, Platform } from 'react-native';
-import MapView, { PROVIDER_DEFAULT, PROVIDER_GOOGLE, Marker, Region, } from 'react-native-maps'
+import MapView, { PROVIDER_DEFAULT, PROVIDER_GOOGLE, Marker, Region, Polygon, Circle } from 'react-native-maps'
 import Geocoder from 'react-native-geocoding';
 import { useLanguage, useConfig } from 'ordering-components/native'
 import { GoogleMapsParams } from '../../types';
@@ -19,7 +19,8 @@ export const GoogleMap = (props: GoogleMapsParams) => {
     setSaveLocation,
     handleToggleMap,
     locations,
-    isIntGeoCoder
+    isIntGeoCoder,
+    businessZones
   } = props
 
   const [, t] = useLanguage()
@@ -44,6 +45,19 @@ export const GoogleMap = (props: GoogleMapsParams) => {
     ERROR_MAX_LIMIT_LOCATION: `Sorry, You can only set the position to ${maxLimitLocation}m`
   }
 
+  const units: any = {
+    mi: 1609,
+    km: 1000
+  }
+
+  const types: any = [1, 2, 5]
+
+  const fillStyles = {
+    fillColor: 'rgba(44, 123, 229, 0.3)',
+    strokeColor: 'rgba(44, 123, 229, 1)',
+    strokeWidth: 2
+  }
+
   const geocodePosition = (pos: { latitude: number, longitude: number }, isMovingRegion ?: boolean) => {
     Geocoder.from({
       latitude: pos.latitude,
@@ -230,6 +244,36 @@ export const GoogleMap = (props: GoogleMapsParams) => {
             title={markerTitle || t('YOUR_LOCATION', 'Your Location')}
           />
         )}
+        {businessZones?.length > 0 && businessZones.filter((item: any) => types.includes(item?.type)).map((businessZone: any, i: number) => (
+          <React.Fragment key={i}>
+            {businessZone?.type === 2 && Array.isArray(businessZone?.data) && (
+              <Polygon
+                coordinates={businessZone?.data.map((item: any) => ({ latitude: item.lat, longitude: item.lng}))}
+                fillColor={fillStyles.fillColor}
+                strokeColor={fillStyles.strokeColor}
+                strokeWidth={fillStyles.strokeWidth}
+              />
+            )}
+            {(businessZone.type === 1 && businessZone?.data?.center && businessZone?.data?.radio) && (
+              <Circle
+                center={{ latitude: businessZone?.data?.center.lat, longitude: businessZone?.data?.center.lng}}
+                radius={businessZone?.data.radio * 1000}
+                fillColor={fillStyles.fillColor}
+                strokeColor={fillStyles.strokeColor}
+                strokeWidth={fillStyles.strokeWidth}
+              />
+            )}
+            {(businessZone.type === 5 && businessZone?.data?.distance) && (
+              <Circle
+                center={{ latitude: businessZone?.data?.center.lat, longitude: businessZone?.data?.center.lng}}
+                radius={businessZone?.data.distance * units[businessZone?.data?.unit]}
+                fillColor={fillStyles.fillColor}
+                strokeColor={fillStyles.strokeColor}
+                strokeWidth={fillStyles.strokeWidth}
+              />
+            )}
+          </React.Fragment>
+        ))}
       </MapView>
       <Alert
         open={alertState.open}

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

@@ -46,7 +46,6 @@ import { AppleLogin } from '../AppleLogin';
 import { Otp } from './Otp'
 import { TouchableOpacity } from 'react-native-gesture-handler';
 import Alert from '../../../../../src/providers/AlertProvider'
-import { vibrateApp } from '../../utils';
 
 const LoginFormUI = (props: LoginParams) => {
 	const {

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

@@ -47,7 +47,7 @@ const MultiCartsPaymethodsAndWalletsUI = (props: any) => {
   const [, t] = useLanguage()
   const [{ configs }] = useConfig()
   const [{ parsePrice }] = useUtils()
-	const [, { showToast }] = useToast();
+  const [, { showToast }] = useToast();
   const { confirmApplePayPayment } = useApplePay()
 
   const [addCardOpen, setAddCardOpen] = useState({ stripe: false, stripeConnect: false });
@@ -216,6 +216,13 @@ const MultiCartsPaymethodsAndWalletsUI = (props: any) => {
             publicKey={paymethodSelected?.data?.publishable}
             payType={paymethodSelected?.paymethod?.name}
             onSelectCard={handlePaymethodDataChange}
+            addCardOpen={addCardOpen}
+            setAddCardOpen={setAddCardOpen}
+            openCarts={openCarts}
+            toSave
+            handlePaymethodDataChange={handlePaymethodDataChange}
+            clientSecret={props.clientSecret}
+            onPaymentChange={handlePaymethodDataChange}
           />
         </View>
       )}
@@ -299,7 +306,7 @@ const MultiCartsPaymethodsAndWalletsUI = (props: any) => {
         </>
       )}
 
-      <OModal
+      {/* <OModal
         entireModal
         title={t('ADD_CREDIT_OR_DEBIT_CARD', 'Add credit or debit card')}
         open={addCardOpen.stripe}
@@ -322,7 +329,7 @@ const MultiCartsPaymethodsAndWalletsUI = (props: any) => {
             onCancel={() => setAddCardOpen({ ...addCardOpen, stripe: false })}
           />
         </KeyboardAvoidingView>
-      </OModal>
+      </OModal> */}
     </PMContainer>
   )
 }

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

@@ -148,6 +148,18 @@ export const MyOrders = (props: any) => {
       )}
       {selectedOption === 'orders' && (
         <>
+          {ordersLength?.preordersLength > 0 && (
+            <View style={{ paddingHorizontal: isChewLayout ? 20 : 40 }}>
+              <OrdersOption
+                {...props}
+                preOrders
+                ordersLength={ordersLength}
+                setOrdersLength={setOrdersLength}
+                setRefreshOrders={setRefreshOrders}
+                refreshOrders={refreshOrders}
+              />
+            </View>
+          )}
           <View style={{ paddingHorizontal: isChewLayout ? 20 : 40 }}>
             <OrdersOption
               {...props}

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'

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

@@ -58,6 +58,7 @@ const OrderSummaryUI = (props: any) => {
   const [validationFields] = useValidationFields();
   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 cart = orderState?.carts?.[`businessId:${props.cart.business_id}`]
 
@@ -208,8 +209,8 @@ const OrderSummaryUI = (props: any) => {
                 ))
               }
               {
-                cart?.fees?.length > 0 && cart?.fees?.filter((fee: any) => !(fee.fixed === 0 && fee.percentage === 0)).map((fee: any) => (
-                  <OSTable key={fee?.id}>
+                cart?.fees?.length > 0 && cart?.fees?.filter((fee: any) => !(fee.fixed === 0 && fee.percentage === 0)).map((fee: any, i: number) => (
+                  <OSTable key={fee?.id + i}>
                     <OSRow>
                       <OText size={12} numberOfLines={1}>
                         {fee.name || t('INHERIT_FROM_BUSINESS', 'Inherit from business')}{' '}
@@ -322,7 +323,7 @@ const OrderSummaryUI = (props: any) => {
                   )}
                 </View>
               )}
-              {cart?.business_id && cart?.status !== 2 && (
+              {cart?.business_id && cart?.status !== 2 && !hideCartComments && (
                 <OSTable>
                   <View style={{ width: '100%', marginTop: 20 }}>
                     <OText size={12}>{t('COMMENTS', 'Comments')}</OText>

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

@@ -264,7 +264,7 @@ const PaymentOptionsUI = (props: any) => {
 				/>
 			)}
 
-			{stripeOptions.includes(paymethodSelected?.gateway) &&
+			{/* {stripeOptions.includes(paymethodSelected?.gateway) &&
 				(paymethodData?.brand || paymethodData?.card?.brand) &&
 				(paymethodData?.last4 || paymethodData?.card?.last4) &&
 				(
@@ -293,10 +293,10 @@ const PaymentOptionsUI = (props: any) => {
 							</View>
 						</PMCardItemContent>
 					</PMCardSelected>
-				)}
+				)} */}
 
 			{/* Stripe */}
-			{isOpenMethod?.paymethod?.gateway === 'stripe' && !paymethodData?.id && (
+			{isOpenMethod?.paymethod?.gateway === 'stripe' && (
 				<View>
 					<OButton
 						text={t('ADD_PAYMENT_CARD', 'Add New Payment Card')}
@@ -314,8 +314,15 @@ const PaymentOptionsUI = (props: any) => {
 						payType={paymethodsList?.name}
 						onSelectCard={handlePaymethodDataChange}
 						onNavigationRedirect={onNavigationRedirect}
+						paymethodCardId={paymethodData?.id}
 						onCancel={() => handlePaymethodClick(null)}
-						setAddCardOpen={() => setAddCardOpen({ ...addCardOpen, stripe: true })}
+						setAddCardOpen={setAddCardOpen}
+						addCardOpen={addCardOpen}
+						isOpenMethod={isOpenMethod}
+						handlePaymethodDataChange={handlePaymethodDataChange}
+						clientSecret={props.clientSecret}
+						businessId={props.businessId}
+						onPaymentChange={onPaymentChange}
 					/>
 				</View>
 			)}
@@ -355,29 +362,6 @@ const PaymentOptionsUI = (props: any) => {
 				/>
 			)}
 
-			<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
-						toSave
-						businessId={props.businessId}
-						publicKey={isOpenMethod?.paymethod?.credentials?.publishable}
-						requirements={props.clientSecret}
-						onSelectCard={handlePaymethodDataChange}
-						onCancel={() => setAddCardOpen({ ...addCardOpen, stripe: false })}
-					/>
-				</KeyboardAvoidingView>
-			</OModal>
-
 			{/* Stripe direct */}
 			<OModal
 				entireModal
@@ -426,7 +410,7 @@ const PaymentOptionsUI = (props: any) => {
 					/>
 				</View>
 			)}
-
+			{/** Stripe connect add cards */}
 			<OModal
 				entireModal
 				title={t('ADD_CREDIT_OR_DEBIT_CARD', 'Add credit or debit card')}

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

@@ -55,7 +55,7 @@ import { ProductOptionSubOption } from '../ProductOptionSubOption';
 import { NotFoundSource } from '../NotFoundSource';
 import { Placeholder, PlaceholderLine, Fade } from 'rn-placeholder';
 import NavBar from '../NavBar';
-import { orderTypeList } from '../../utils';
+import { orderTypeList, vibrateApp } from '../../utils';
 const windowWidth = Dimensions.get('window').width;
 
 export const ProductOptionsUI = (props: any) => {

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

@@ -70,7 +70,7 @@ export const ProductActions = styled.View`
   position: absolute;
   bottom: 0px;
   padding-top: ${(props: any) => props.ios ? '20px' : '0'};
-  padding-horizontal: 40px;
+  padding-horizontal: 30px;
   padding-vertical: 20px;
   width: 100%;
   flex-direction: ${(props: any) => props.isColumn ? 'column' : 'row'};

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

@@ -82,12 +82,12 @@ export const ProductOptionSubOptionUI = (props: any) => {
 							<OIcon src={theme.images.general.radio_nor} color={theme.colors.disabled} width={16} />
 						)
 					)}
-					<OText size={12} lineHeight={18} color={theme.colors.textSecondary} mLeft={10} style={{ flex: 1 }}>
+					<OText size={12} lineHeight={18} color={theme.colors.textSecondary} mLeft={5} style={{ flex: 1 }}>
 						{suboption?.name}
 					</OText>
 				</IconControl>
-				<QuantityControl>
-					{option?.allow_suboption_quantity && state?.selected && (
+				{option?.allow_suboption_quantity && state?.selected && (
+					<QuantityControl>
 						<>
 							<Checkbox disabled={disabled || state.quantity === 0} onPress={decrement}>
 								<IconAntDesign
@@ -96,7 +96,7 @@ export const ProductOptionSubOptionUI = (props: any) => {
 									color={state.quantity === 0 || disabled ? theme.colors.disabled : theme.colors.primary}
 								/>
 							</Checkbox>
-							<OText size={12} mLeft={5} mRight={5}>
+							<OText size={12}>
 								{state.quantity}
 							</OText>
 							<Checkbox disabled={disabled || disableIncrement} onPress={increment}>
@@ -107,10 +107,10 @@ export const ProductOptionSubOptionUI = (props: any) => {
 								/>
 							</Checkbox>
 						</>
-					)}
-				</QuantityControl>
-				<PositionControl>
-					{option?.with_half_option && state?.selected && (
+					</QuantityControl>
+				)}
+				{option?.with_half_option && state?.selected && (
+					<PositionControl>
 						<>
 							<Circle disabled={disabled} onPress={() => changePosition('left')}>
 								<OIcon
@@ -138,10 +138,10 @@ export const ProductOptionSubOptionUI = (props: any) => {
 								/>
 							</Circle>
 						</>
-					)}
-				</PositionControl>
+					</PositionControl>
+				)}
 				{price > 0 && (
-					<OText size={12} lineHeight={18} color={theme.colors.textSecondary} style={{ paddingRight: 10 }}>
+					<OText size={12} lineHeight={18} color={theme.colors.textSecondary} style={{width: 70, maxWidth: 70}}>
 						+ {parsePrice(price)}
 					</OText>
 				)}

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

@@ -9,30 +9,26 @@ export const Container = styled.TouchableOpacity`
 
 export const IconControl = styled.TouchableOpacity`
   flex-direction: row;
-  padding: 10px;
-  width: 38%;
+  padding: 10px 0 10px 10px;
+  width: 35%;
   align-items: center;
 `
 
 export const QuantityControl = styled.View`
   flex-direction: row;
   align-items: center;
-  justify-content: flex-start;
-  margin-right: 5px;
-  flex: 1;
-  width: 60px;
+  justify-content: space-between;
+  width: 62px;
 `
 
 export const PositionControl = styled.View`
   flex-direction: row;
   align-items: center;
-  margin-right: 5px;
-  flex: 1;
 `
 
 export const Checkbox = styled.TouchableOpacity`
 `
 
 export const Circle = styled.TouchableOpacity`
-  margin: 0 1px;
+  margin: 0 1.5px;
 `

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

@@ -38,7 +38,7 @@ import Alert from '../../../../../src/providers/AlertProvider'
 import { OText, OButton, OInput } from '../shared';
 import { OModal } from '../../../../../src/components/shared';
 import { SignupParams } from '../../types';
-import { sortInputFields, vibrateApp } from '../../utils';
+import { sortInputFields } from '../../utils';
 import { GoogleLogin } from '../GoogleLogin';
 import { AppleLogin } from '../AppleLogin';
 

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

@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import { View, StyleSheet, ScrollView } from 'react-native';
+import { View, StyleSheet, ScrollView, Platform } from 'react-native';
 import {
 	PaymentOptionStripe,
 	useSession,
@@ -8,7 +8,7 @@ import {
 import { PlaceholderLine } from 'rn-placeholder';
 import { useTheme } from 'styled-components/native';
 import { getIconCard } from '../../utils';
-import { OAlert, OIcon, OText } from '../shared';
+import { OAlert, OIcon, OText, OModal } from '../shared';
 
 import { NotFoundSource } from '../NotFoundSource';
 
@@ -17,6 +17,9 @@ import {
 	OSItemContent,
 	OSItemActions,
 } from '../PaymentOptionStripe/styles';
+import { StripeElementsForm } from '../StripeElementsForm';
+
+import { KeyboardAvoidingView } from 'react-native';
 
 export const StripeCardsListUI = (props: any) => {
 	const {
@@ -26,7 +29,11 @@ export const StripeCardsListUI = (props: any) => {
 		cardsList,
 		handleCardClick,
 		setAddCardOpen,
-		gateway
+		gateway,
+		setCardsList,
+		addCardOpen,
+		isOpenMethod,
+		handlePaymethodDataChange
 	} = props;
 
 	const theme = useTheme();
@@ -42,8 +49,8 @@ export const StripeCardsListUI = (props: any) => {
 	}
 
 	useEffect(() => {
-		if (!cardsList && !cardsList?.loading && cardsList?.cards?.length === 0 && !paymethodsWithoutSaveCards.includes(gateway)) {
-			setAddCardOpen(true)
+		if (!cardsList?.loading && cardsList?.cards?.length === 0 && !paymethodsWithoutSaveCards.includes(gateway)) {
+			setAddCardOpen({ ...addCardOpen, stripe: true })
 		}
 	}, [cardsList?.loading])
 
@@ -128,6 +135,33 @@ export const StripeCardsListUI = (props: any) => {
 					))}
 				</ScrollView>
 			)}
+			<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={setCardsList}
+						cardsList={cardsList}
+						requirements={props.clientSecret}
+						handleCardClick={handleCardClick}
+						onSelectCard={handlePaymethodDataChange}
+						onCancel={() => setAddCardOpen({ ...addCardOpen, stripe: false })}
+					/>
+				</KeyboardAvoidingView>
+			</OModal>
 		</>
 	)
 }

package/themes/original/src/components/StripeElementsForm/naked.tsx

@@ -4,7 +4,10 @@ import { useApi, useSession } from 'ordering-components/native';
 export const StripeElementsForm = (props: any) => {
   const {
     UIComponent,
-    toSave
+    toSave,
+    setCardsList,
+    cardsList,
+    handleCardClick
   } = props;
 
   const [ordering] = useApi();
@@ -61,6 +64,14 @@ export const StripeElementsForm = (props: any) => {
       })
       const response = await result.json();
       isNewCard && props.onSelectCard && props.onSelectCard(response.result);
+      setCardsList && setCardsList({
+        ...cardsList,
+        cards: [
+          ...cardsList.cards,
+          response.result
+        ]
+      })
+      handleCardClick(response.result)
       setState({
         ...state,
         loadingAdd: false

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

@@ -72,7 +72,7 @@ const WalletsUI = (props: any) => {
 
   const [tabSelected, setTabSelected] = useState(isWalletCashEnabled ? 'cash' : 'credit_point')
   const [openHistory, setOpenHistory] = useState(false)
-  const isChewLayout = theme?.header?.components?.layout?.type === 'chew'
+  const isChewLayout = theme?.header?.components?.layout?.type?.toLowerCase() === 'chew'
   const hideWalletsTheme = theme?.bar_menu?.components?.wallets?.hidden
 
   const isWalletEnabled = configs?.cash_wallet?.value && configs?.wallet_enabled?.value === '1' && (isWalletCashEnabled || isWalletPointsEnabled)
@@ -241,7 +241,7 @@ const WalletsUI = (props: any) => {
                 {currentWalletSelected?.type === 'cash' && (
                   <>
                     <View style={styles.dividerStyle} />
-                      <GiftCardUI navigation={navigation} />
+                    <GiftCardUI navigation={navigation} />
                     <View style={styles.dividerStyle} />
                   </>
                 )}

package/themes/original/src/types/index.tsx

@@ -256,6 +256,7 @@ export interface BusinessProductsListingParams {
 	onBusinessClick?: any;
 	onNavigationRedirect?: any;
 	businessSingleId?: number | string
+	fromMulti?: boolean
 }
 export interface BusinessBasicInformationParams {
 	navigation?: any;