ordering-ui-react-native 0.16.73 → 0.16.75

package/package.json

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

package/src/components/Checkout/index.tsx

@@ -93,7 +93,7 @@ const CheckoutUI = (props: any) => {
     deliveryOptionSelected,
     instructionsOptions,
     handleChangeDeliveryOption,
-
+    merchantId
   } = props
 
   const theme = useTheme();
@@ -530,6 +530,7 @@ const CheckoutUI = (props: any) => {
                   handlePaymentMethodClickCustom={handlePaymentMethodClick}
                   setCardData={setCardData}
                   handlePlaceOrder={handlePlaceOrder}
+                  merchantId={merchantId}
                 />
               </ChPaymethods>
             </ChSection>

package/src/components/PaymentOptions/index.tsx

@@ -62,7 +62,8 @@ const PaymentOptionsUI = (props: any) => {
     handlePaymentMethodClickCustom,
     isOpenMethod,
     setCardData,
-    handlePlaceOrder
+    handlePlaceOrder,
+    merchantId
   } = props
 
   const theme = useTheme();
@@ -220,7 +221,7 @@ const PaymentOptionsUI = (props: any) => {
 
       {paymethodSelected?.gateway === 'cash' && (
         <PaymentOptionCash
-          orderTotal={cart.total}
+          orderTotal={cart.balance ?? cart.total}
           defaultValue={paymethodSelected?.data?.cash}
           onChangeData={handlePaymethodDataChange}
           setErrorCash={props.setErrorCash}
@@ -322,6 +323,7 @@ const PaymentOptionsUI = (props: any) => {
             publicKey={isOpenMethod?.paymethod?.credentials?.publishable || isOpenMethod?.paymethod?.credentials?.publishable_key}
             handleSource={handlePaymethodDataChange}
             onCancel={() => handlePaymethodClick(null)}
+            merchantId={merchantId}
           />
         </KeyboardAvoidingView>
       </OModal>

package/src/components/StripeElementsForm/index.tsx

@@ -7,7 +7,6 @@ import {
   useConfirmSetupIntent,
   createPaymentMethod
 } from '@stripe/stripe-react-native';
-import configs from '../../config.json'
 import { ErrorMessage } from './styles';
 
 import { StripeElementsForm as StripeFormController } from './naked';
@@ -26,7 +25,8 @@ const StripeElementsFormUI = (props: any) => {
     methodsPay,
     paymethod,
     onCancel,
-    cart
+    cart,
+    merchantId
   } = props;
 
   const theme = useTheme();
@@ -54,17 +54,25 @@ const StripeElementsFormUI = (props: any) => {
   }
 
   if (user?.address) {
-    billingDetails.addressLine1 = user?.address
-  }
+		billingDetails.address = {
+      line1: user?.address
+    }
+	}
 
   const createPayMethod = async () => {
-    const params: any = { type: 'Card' }
-    if (Object.keys(billingDetails).length > 0) {
-      params.billingDetails = billingDetails
-    }
+    const params: any = { paymentMethodType: 'Card', paymentMethodData: {} }
+		if (Object.keys(billingDetails).length > 0) {
+			params.paymentMethodData.billingDetails = {...billingDetails, token: card?.last4}
+		}
     try {
       setCreatePmLoading(true)
-      const { paymentMethod } = await createPaymentMethod(params);
+      const { paymentMethod, error } = await createPaymentMethod(params);
+
+      if (error) {
+        setErrors(error?.message);
+        setCreatePmLoading(false)
+        return
+      }
 
       setCreatePmLoading(false)
       handleSource && handleSource({
@@ -87,10 +95,10 @@ const StripeElementsFormUI = (props: any) => {
       createPayMethod();
       return
     }
-    const params: any = { type: 'Card' }
-    if (Object.keys(billingDetails).length > 0) {
-      params.billingDetails = billingDetails
-    }
+    const params: any = { paymentMethodType: 'Card', paymentMethodData: {} }
+		if (Object.keys(billingDetails).length > 0) {
+			params.paymentMethodData.billingDetails = {...billingDetails, token: card?.last4}
+		}
     try {
       const { setupIntent, error } = await confirmSetupIntent(requirements, params);
 
@@ -126,12 +134,13 @@ const StripeElementsFormUI = (props: any) => {
     <View style={styles.container}>
       {publicKey ? (
         <View style={{ flex: 1 }}>
-          <StripeProvider 
+          <StripeProvider
             publishableKey={publicKey}
-            merchantIdentifier={`merchant.${configs.apple_app_id}`}
+            merchantIdentifier={`merchant.${merchantId}`}
+            urlScheme={merchantId}
           >
             {methodsPay?.includes(paymethod) ? (
-              <StripeMethodForm 
+              <StripeMethodForm
                 handleSource={handleSource}
                 onCancel={onCancel}
                 cart={cart}

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

@@ -372,7 +372,7 @@ export const OrderContentComponent = (props: OrderContent) => {
         <Table>
           <OText mBottom={4}>{t('SUBTOTAL', 'Subtotal')}</OText>
           <OText mBottom={4}>
-            {parsePrice(((order?.summary?.subtotal ?? order?.subtotal) + getIncludedTaxes()))}
+            {parsePrice(((order?.summary?.subtotal ?? order?.subtotal) + getIncludedTaxes()), { currency: order?.currency})}
           </OText>
         </Table>
         {(order?.summary?.discount > 0 ?? order?.discount > 0) && order?.offers?.length === 0 && (
@@ -385,7 +385,7 @@ export const OrderContentComponent = (props: OrderContent) => {
             ) : (
               <OText mBottom={4}>{t('DISCOUNT', theme?.defaultLanguages?.DISCOUNT || 'Discount')}</OText>
             )}
-            <OText>- {parsePrice(order?.summary?.discount ?? order?.discount)}</OText>
+            <OText>- {parsePrice(order?.summary?.discount ?? order?.discount, { currency: order?.currency})}</OText>
           </Table>
         )}
         {
@@ -399,7 +399,7 @@ export const OrderContentComponent = (props: OrderContent) => {
                   )}
                 </OText>
               </OSRow>
-              <OText mBottom={4}>- {parsePrice(offer?.summary?.discount)}</OText>
+              <OText mBottom={4}>- {parsePrice(offer?.summary?.discount, { currency: order?.currency})}</OText>
             </Table>
           ))
         }
@@ -407,9 +407,9 @@ export const OrderContentComponent = (props: OrderContent) => {
           <Table>
             <OText mBottom={4}>{t('SUBTOTAL_WITH_DISCOUNT', 'Subtotal with discount')}</OText>
             {order?.tax_type === 1 ? (
-              <OText mBottom={4}>{parsePrice((order?.summary?.subtotal_with_discount + getIncludedTaxesDiscounts() ?? 0))}</OText>
+              <OText mBottom={4}>{parsePrice((order?.summary?.subtotal_with_discount + getIncludedTaxesDiscounts() ?? 0), { currency: order?.currency})}</OText>
             ) : (
-              <OText mBottom={4}>{parsePrice(order?.summary?.subtotal_with_discount ?? 0)}</OText>
+              <OText mBottom={4}>{parsePrice(order?.summary?.subtotal_with_discount ?? 0, { currency: order?.currency})}</OText>
             )}
           </Table>
         )}
@@ -419,7 +419,7 @@ export const OrderContentComponent = (props: OrderContent) => {
               {t('TAX', 'Tax')} {`(${verifyDecimals(order?.tax, parseNumber)}%)`}
             </OText>
             <OText mBottom={4}>
-              {parsePrice(order?.summary?.tax ?? 0)}
+              {parsePrice(order?.summary?.tax ?? 0, { currency: order?.currency})}
             </OText>
           </Table>
         )}
@@ -430,7 +430,7 @@ export const OrderContentComponent = (props: OrderContent) => {
                 {t('SERVICE_FEE', 'Service fee')}
                 {`(${verifyDecimals(order?.service_fee, parseNumber)}%)`}
               </OText>
-              <OText mBottom={4}>{parsePrice(order?.summary?.service_fee ?? 0)}</OText>
+              <OText mBottom={4}>{parsePrice(order?.summary?.service_fee ?? 0, { currency: order?.currency})}</OText>
             </Table>
           )
         }
@@ -443,7 +443,7 @@ export const OrderContentComponent = (props: OrderContent) => {
                   {`(${verifyDecimals(tax?.rate, parseNumber)}%)`}{' '}
                 </OText>
               </OSRow>
-              <OText mBottom={4}>{parsePrice(tax?.summary?.tax_after_discount ?? tax?.summary?.tax ?? 0)}</OText>
+              <OText mBottom={4}>{parsePrice(tax?.summary?.tax_after_discount ?? tax?.summary?.tax ?? 0, { currency: order?.currency})}</OText>
             </Table>
           ))
         }
@@ -453,10 +453,10 @@ export const OrderContentComponent = (props: OrderContent) => {
               <OSRow>
                 <OText mBottom={4}>
                   {fee.name || t('INHERIT_FROM_BUSINESS', 'Inherit from business')}
-                  ({fee?.fixed > 0 && `${parsePrice(fee?.fixed)} + `}{fee.percentage}%){' '}
+                  ({fee?.fixed > 0 && `${parsePrice(fee?.fixed, { currency: order?.currency})} + `}{fee.percentage}%){' '}
                 </OText>
               </OSRow>
-              <OText mBottom={4}>{parsePrice(fee?.summary?.fixed + (fee?.summary?.percentage_after_discount ?? fee?.summary?.percentage) ?? 0)}</OText>
+              <OText mBottom={4}>{parsePrice(fee?.summary?.fixed + (fee?.summary?.percentage_after_discount ?? fee?.summary?.percentage) ?? 0, { currency: order?.currency})}</OText>
             </Table>
           ))
         }
@@ -471,7 +471,7 @@ export const OrderContentComponent = (props: OrderContent) => {
                   )}
                 </OText>
               </OSRow>
-              <OText mBottom={4}>- {parsePrice(offer?.summary?.discount)}</OText>
+              <OText mBottom={4}>- {parsePrice(offer?.summary?.discount, { currency: order?.currency})}</OText>
             </Table>
           ))
         }
@@ -483,7 +483,7 @@ export const OrderContentComponent = (props: OrderContent) => {
               </OText>
 
               <OText mBottom={4}>
-                {parsePrice(order?.summary?.delivery_price)}
+                {parsePrice(order?.summary?.delivery_price, { currency: order?.currency})}
               </OText>
             </Table>
           )
@@ -499,7 +499,7 @@ export const OrderContentComponent = (props: OrderContent) => {
                   )}
                 </OText>
               </OSRow>
-              <OText mBottom={4}>- {parsePrice(offer?.summary?.discount)}</OText>
+              <OText mBottom={4}>- {parsePrice(offer?.summary?.discount, { currency: order?.currency})}</OText>
             </Table>
           ))
         }
@@ -514,7 +514,7 @@ export const OrderContentComponent = (props: OrderContent) => {
                   `(${verifyDecimals(order?.summary?.driver_tip, parseNumber)}%)`
                 )}
             </OText>
-            <OText mBottom={4}>{parsePrice(order?.summary?.driver_tip ?? order?.totalDriverTip)}</OText>
+            <OText mBottom={4}>{parsePrice(order?.summary?.driver_tip ?? order?.totalDriverTip, { currency: order?.currency})}</OText>
           </Table>
         )}
 
@@ -528,7 +528,7 @@ export const OrderContentComponent = (props: OrderContent) => {
               mBottom={4}
               style={styles.textBold}
               color={theme.colors.primary}>
-              {parsePrice(order?.summary?.total ?? order?.total)}
+              {parsePrice(order?.summary?.total ?? order?.total, { currency: order?.currency})}
             </OText>
           </Table>
         </Total>
@@ -571,7 +571,7 @@ export const OrderContentComponent = (props: OrderContent) => {
                     )}
                   </View>
                   <OText>
-                    -{parsePrice(event.amount)}
+                    -{parsePrice(event.amount, { currency: order?.currency})}
                   </OText>
                 </View>
               ))}

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

@@ -371,7 +371,7 @@ export const BusinessListingSearchUI = (props: BusinessSearchParams) => {
             handleCustomClick={() => onBusinessClick(business)}
             handleUpdateBusinessList={handleUpdateBusinessList}
             orderType={orderState?.options?.type}
-            style={{ width: screenWidth - 80, marginRight: (businessesSearchList.loading || i !== businessesSearchList.businesses?.length - 1) ? 20 : 0 }}
+            style={{ width: screenWidth - 120, marginRight: (businessesSearchList.loading || i !== businessesSearchList.businesses?.length - 1) ? 20 : 0 }}
           />
         ))}
         {!businessesSearchList.loading && paginationProps?.totalPages && paginationProps?.currentPage < paginationProps?.totalPages && (
@@ -433,7 +433,7 @@ export const BusinessListingSearchUI = (props: BusinessSearchParams) => {
                 style={{ borderRadius: 50, paddingLeft: 5, paddingRight: 5, height: 20 }}
               />
             </SingleBusinessContainer>
-            <ScrollView horizontal style={styles.productsContainer}>
+            <ScrollView horizontal style={styles.productsContainer} contentContainerStyle={{ flexGrow: 1 }}>
               {business?.categories?.map((category: any) => category?.products?.map((product: any, i: number) => (
                 <SingleProductCard
                   key={product?.id}
@@ -443,7 +443,7 @@ export const BusinessListingSearchUI = (props: BusinessSearchParams) => {
                   onProductClick={(product: any) => onProductClick(business, category?.id, product?.id)}
                   productAddedToCartLength={0}
                   handleUpdateProducts={(productId: number, changes: any) => handleUpdateProducts(productId, category?.id, business?.id, changes)}
-                  style={{ width: screenWidth - 80, marginRight: i === category?.products?.length - 1 ? 0 : 20 }}
+                  style={{ width: screenWidth - 120, marginRight: i === category?.products?.length - 1 ? 0 : 20 }}
                 />
               )))}
 

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

@@ -136,7 +136,7 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
             <SingleProductCard
               key={'prod_' + product.id + `_${i}`}
               isSoldOut={product.inventoried && !product.quantity}
-              enableIntersection
+              enableIntersection={!isFiltMode}
               product={product}
               businessId={businessId}
               categoryState={categoryState}
@@ -164,7 +164,7 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
                       key={'feat_' + product.id + `_${i}`}
                       isSoldOut={product.inventoried && !product.quantity}
                       product={product}
-                      enableIntersection
+                      enableIntersection={!isFiltMode}
                       businessId={businessId}
                       categoryState={categoryState}
                       onProductClick={onProductClick}
@@ -257,7 +257,7 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
                   {products.sort((a: any, b: any) => a.rank - b.rank).map((product: any, i: any) => (
                     <SingleProductCard
                       key={`${product?.id}_${i}`}
-                      enableIntersection
+                      enableIntersection={!isFiltMode}
                       isSoldOut={product.inventoried && !product.quantity}
                       businessId={businessId}
                       product={product}
@@ -279,19 +279,24 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
         <>
           {[...Array(categoryState?.pagination?.nextPageItems).keys()].map(
             (item, i) => (
-              <Placeholder key={i} style={{ padding: 5 }} Animation={Fade}>
-                <View style={{ flexDirection: 'row' }}>
+              <View style={{ minHeight: 165, marginBottom: 28, padding: 12 }}>
+                <Placeholder style={{ padding: 5 }} Animation={Fade}>
+                  <View style={{ flexDirection: 'row' }}>
+                    <Placeholder style={{ paddingVertical: 10, flex: 1 }}>
+                      <PlaceholderLine width={60} style={{ marginBottom: 15 }} />
+                      <PlaceholderLine width={20} />
+                    </Placeholder>
+                    <PlaceholderLine
+                      width={24}
+                      height={70}
+                      style={{ marginLeft: 10, marginBottom: 10 }}
+                    />
+                  </View>
                   <PlaceholderLine
-                    width={24}
-                    height={70}
-                    style={{ marginRight: 10, marginBottom: 10 }}
+                    height={52}
                   />
-                  <Placeholder style={{ paddingVertical: 10 }}>
-                    <PlaceholderLine width={60} style={{ marginBottom: 25 }} />
-                    <PlaceholderLine width={20} />
-                  </Placeholder>
-                </View>
-              </Placeholder>
+                </Placeholder>
+              </View>
             ),
           )}
         </>

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

@@ -127,7 +127,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 	const isCheckoutMultiBusinessEnabled: Boolean = configs?.checkout_multi_business_enabled?.value === '1'
 	const currentCart: any = Object.values(orderState.carts).find((cart: any) => cart?.business?.slug === business?.slug) ?? {}
 	const isOpenFiltProducts = isOpenSearchBar && !!searchValue
-	const filtProductsHeight = Platform.OS === 'ios' ? 0 : 35
+	const filtProductsHeight = Platform.OS === 'ios' ? 0 : 100
 	const onRedirect = (route: string, params?: any) => {
 		navigation.navigate(route, params)
 	}
@@ -246,7 +246,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 					<TopHeader isIos={Platform.OS === 'ios'}>
 						{!isOpenSearchBar && (
 							<>
-								<View style={{ ...styles.headerItem, flex: 1 }}>
+								<View style={{ ...styles.headerItem, width: 175 }}>
 									<OButton
 										imgLeftSrc={theme.images.general.arrow_left}
 										imgRightSrc={null}
@@ -314,6 +314,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 						style={{
 							height: Dimensions.get('window').height - filtProductsHeight
 						}}
+						contentContainerStyle={{ flexGrow: 1 }}
 					>
 						<View style={{ padding: 20, backgroundColor: theme.colors.white }}>
 							<BusinessProductsList
@@ -352,7 +353,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 					<BackgroundGray />
 				)}
 				<IOScrollView
-					stickyHeaderIndices={[2]}
+					stickyHeaderIndices={[business?.professionals?.length > 0 ? 3 : 2]}
 					style={{
 						...styles.mainContainer,
 						marginBottom: currentCart?.products?.length > 0 && categoryState.products.length !== 0 ?
@@ -394,26 +395,21 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 							marginTop: isChewLayout && showLogo ? 10 : 0
 						}}
 					/>
-					{!loading && business?.id && (
-						<>
-							{!(business?.categories?.length === 0) && (
-								<BusinessProductsCategories
-									categories={[{ id: null, name: t('ALL', 'All') }, { id: 'featured', name: t('FEATURED', 'Featured') }, ...business?.categories.sort((a: any, b: any) => a.rank - b.rank)]}
-									categorySelected={categorySelected}
-									onClickCategory={handleChangeCategory}
-									featured={featuredProducts}
-									openBusinessInformation={openBusinessInformation}
-									scrollViewRef={scrollViewRef}
-									productListLayout={productListLayout}
-									categoriesLayout={categoriesLayout}
-									selectedCategoryId={selectedCategoryId}
-									lazyLoadProductsRecommended={business?.lazy_load_products_recommended}
-									setSelectedCategoryId={setSelectedCategoryId}
-									setCategoryClicked={setCategoryClicked}
-
-								/>
-							)}
-						</>
+					{!loading && business?.id && !(business?.categories?.length === 0) && (
+						<BusinessProductsCategories
+							categories={[{ id: null, name: t('ALL', 'All') }, { id: 'featured', name: t('FEATURED', 'Featured') }, ...business?.categories.sort((a: any, b: any) => a.rank - b.rank)]}
+							categorySelected={categorySelected}
+							onClickCategory={handleChangeCategory}
+							featured={featuredProducts}
+							openBusinessInformation={openBusinessInformation}
+							scrollViewRef={scrollViewRef}
+							productListLayout={productListLayout}
+							categoriesLayout={categoriesLayout}
+							selectedCategoryId={selectedCategoryId}
+							lazyLoadProductsRecommended={business?.lazy_load_products_recommended}
+							setSelectedCategoryId={setSelectedCategoryId}
+							setCategoryClicked={setCategoryClicked}
+						/>
 					)}
 					{!loading && business?.id && (
 						<>

package/themes/original/src/components/BusinessesListing/Layout/Original/index.tsx

@@ -464,19 +464,9 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 					/>
 				</OrderTypesContainer>
 			)}
-			{!businessId && (
-				<View style={{ marginTop: 20 }}>
-					<OButton
-						onClick={() => navigation.navigate('BusinessSearch', { businessTypes })}
-						text={t('SEARCH', 'Search')}
-						style={styles?.buttonCityStyle}
-						textStyle={{ color: theme.colors.textSecondary, fontSize: 16 }}
-					/>
-				</View>
-			)}
 
 			{!hideCities && (
-				<View style={{ marginTop: 10 }}>
+				<View style={{ marginTop: 20 }}>
 					<TouchableOpacity
 						style={styles.buttonCityStyle}
 						onPress={() => setIsOpenCities(true)}

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

@@ -119,14 +119,31 @@ export const MyOrders = (props: any) => {
           </View>
         </>
       )}
-      {notOrderOptions.includes(selectedOption) && (
+      {selectedOption === 'business' && (
         <OrdersOption
           {...props}
+          isBusiness
+          titleContent={t('PREVIOUSLY_ORDERED', 'Previously ordered')}
+          hideOrders
+          horizontal
+          activeOrders
+          pastOrders
+          preOrders
+          businessesSearchList={businessesSearchList}
+          setIsEmptyBusinesses={setIsEmptyBusinesses}
+          businessOrderIds={businessOrderIds}
+          setBusinessOrderIds={setBusinessOrderIds}
+          ordersLength={ordersLength}
+          setOrdersLength={setOrdersLength}
+        />
+      )}
+      {selectedOption === 'products' && (
+        <OrdersOption
+          {...props}
+          isProducts
           titleContent={t('PREVIOUSLY_ORDERED', 'Previously ordered')}
           hideOrders
           horizontal
-          isBusiness={selectedOption === 'business'}
-          isProducts={selectedOption === 'products'}
           activeOrders
           pastOrders
           preOrders

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

@@ -123,7 +123,7 @@ export const PreviousBusinessOrderedUI = (props: PreviousBusinessOrderedParams)
         <>
           {!businessLoading && (
             <BusinessControllerList
-              style={{ width: windowWidth - 80, marginRight: 20 }}
+              style={{ width: windowWidth - 120, marginRight: 20 }}
             />
           )}
         </>

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

@@ -189,15 +189,18 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
 			)}
 			{(ordersLength?.activeOrdersLength > 0 || ordersLength?.previousOrdersLength > 0) && (
 				<>
-					<OptionTitle titleContent={!!titleContent} isBusinessesSearchList={!!businessesSearchList}>
-						<OText size={16} lineHeight={24} weight={'500'} color={theme.colors.textNormal} mBottom={10} >
-							{titleContent || (activeOrders
-								? t('ACTIVE', 'Active')
-								: preOrders
-									? t('PREORDERS', 'Preorders')
-									: t('PAST', 'Past'))}
-						</OText>
-					</OptionTitle>
+					{((titleContent && ((isBusiness && businessOrderIds?.length > 0) || isProducts)) || !titleContent) && (
+						<OptionTitle titleContent={!!titleContent} isBusinessesSearchList={!!businessesSearchList}>
+							<OText size={16} lineHeight={24} weight={'500'} color={theme.colors.textNormal} mBottom={10} >
+								{titleContent || (activeOrders
+									? t('ACTIVE', 'Active')
+									: preOrders
+										? t('PREORDERS', 'Preorders')
+										: t('PAST', 'Past'))}
+							</OText>
+						</OptionTitle>
+					)}
+
 					{!(ordersLength?.activeOrdersLength === 0 && ordersLength?.previousOrdersLength === 0) &&
 						!loading &&
 						orders.filter((order: any) => orderStatus.includes(order.status)).length === 0 &&
@@ -210,7 +213,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
 						)}
 				</>
 			)}
-			{isBusiness && !!businessesSearchList && businessLoading && (
+			{isBusiness && !!businessesSearchList && businessLoading && businessOrderIds?.length > 0 && (
 				<ScrollView horizontal>
 					<BusinessControllerSkeletons />
 				</ScrollView>

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

@@ -160,7 +160,6 @@ const PaymentOptionsUI = (props: any) => {
 					<TouchableOpacity
 						onPress={() => handlePaymentMethodClick(item)}
 					>
-						{console.log(item?.gateway)}
 						<PMItem
 							key={item.id}
 							isDisabled={isDisabled}

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

@@ -98,6 +98,10 @@ const PlaceSpotUI = (props: PlaceSpotParams) => {
 
   const onChangeSpot = () => {
     if (orderState.loading) return
+    if (!Number.isInteger(Number(spotNumber))) {
+      showToast(ToastType.Error, t('VALIDATION_ERROR_INTEGER', 'The _attribute_ must be an integer.').replace('_attribute_', placeholderText))
+      return
+    }
     const isVehicle = Object.values(vehicle).every(e => e)
     const bodyToSend: any = {}
     spotNumber && (bodyToSend.spot_number = spotNumber)
@@ -126,7 +130,7 @@ const PlaceSpotUI = (props: PlaceSpotParams) => {
 
   useEffect(() => {
     if (spotState?.error?.length > 0) {
-      const errorText = manageErrorsToShow(spotState?.errors)
+      const errorText = manageErrorsToShow(spotState?.error)
 			showToast(ToastType.Error, errorText)
     }
   }, [spotState?.error])
@@ -211,7 +215,7 @@ const PlaceSpotUI = (props: PlaceSpotParams) => {
           <OInput
             value={spotNumber?.toString() ?? ''}
             placeholder={placeholderText}
-            keyboardType='number-pad'
+            type='number-pad'
             onChange={(value: string) => setSpotNumber(value)}
             style={{
               borderColor: theme.colors.border,

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

@@ -76,8 +76,8 @@ const SingleProductCardUI = React.memo((props: SingleProductCardParams) => {
 		},
 		quantityContainer: {
 			position: 'absolute',
-			left: '100%',
-			bottom: '100%',
+			right: 0,
+			top: 0,
 			width: 25,
 			height: 25,
 			textAlign: 'center',
@@ -125,12 +125,12 @@ const SingleProductCardUI = React.memo((props: SingleProductCardParams) => {
 	);
 
 	const fadeIn = () => {
-    Animated.timing(fadeAnim, {
-      toValue: 1,
-      duration: 500,
+		Animated.timing(fadeAnim, {
+			toValue: 1,
+			duration: 500,
 			useNativeDriver: true
-    }).start();
-  };
+		}).start();
+	};
 
 	const handleChangeFavorite = () => {
 		if (auth) {
@@ -164,7 +164,7 @@ const SingleProductCardUI = React.memo((props: SingleProductCardParams) => {
 					<View style={{ flexDirection: 'row' }}>
 						{productAddedToCartLength > 0 && (
 							<QuantityContainer style={[styles.quantityContainer, {
-								transform: [{ translateX: 10 }, { translateY: -10 }],
+								transform: [{ translateX: 25 }, { translateY: -55 }],
 							}]}>
 								<OText size={12} color={theme.colors.white}>{productAddedToCartLength.toString()}</OText>
 							</QuantityContainer>
@@ -281,19 +281,24 @@ const SingleProductCardUI = React.memo((props: SingleProductCardParams) => {
 					)}
 				</CardContainer>
 			) : (
-				<Placeholder style={{ padding: 5 }} Animation={Fade}>
-					<View style={{ flexDirection: 'row' }}>
+				<View style={{ minHeight: 165, marginBottom: 28, padding: 12 }}>
+					<Placeholder style={{ padding: 5 }} Animation={Fade}>
+						<View style={{ flexDirection: 'row' }}>
+							<Placeholder style={{ paddingVertical: 10, flex: 1 }}>
+								<PlaceholderLine width={60} style={{ marginBottom: 15 }} />
+								<PlaceholderLine width={20} />
+							</Placeholder>
+							<PlaceholderLine
+								width={24}
+								height={70}
+								style={{ marginLeft: 10, marginBottom: 10 }}
+							/>
+						</View>
 						<PlaceholderLine
-							width={24}
-							height={70}
-							style={{ marginRight: 10, marginBottom: 10 }}
+							height={52}
 						/>
-						<Placeholder style={{ paddingVertical: 10 }}>
-							<PlaceholderLine width={60} style={{ marginBottom: 25 }} />
-							<PlaceholderLine width={20} />
-						</Placeholder>
-					</View>
-				</Placeholder>
+					</Placeholder>
+				</View>
 			)}
 		</InView>
 	);

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

@@ -61,7 +61,9 @@ const StripeElementsFormUI = (props: any) => {
 	}
 
 	if (user?.address) {
-		billingDetails.address.line1 = user?.address
+		billingDetails.address = {
+      line1: user?.address
+    }
 	}
 
 	const createPayMethod = async () => {
@@ -71,7 +73,13 @@ const StripeElementsFormUI = (props: any) => {
 		}
 		try {
 			setCreatePmLoading(true)
-			const { paymentMethod } = await createPaymentMethod(params);
+			const { paymentMethod, error } = await createPaymentMethod(params);
+
+      if (error) {
+        setErrors(error?.message);
+        setCreatePmLoading(false)
+        return
+      }
 
 			setCreatePmLoading(false)
 			handleSource && handleSource({