ordering-ui-react-native 0.14.69 → 0.14.72

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

@@ -47,6 +47,7 @@ import { verifyDecimals } from '../../utils';
 import { OSRow } from '../OrderSummary/styles';
 import AntIcon from 'react-native-vector-icons/AntDesign'
 import { TaxInformation } from '../TaxInformation';
+import { Placeholder, PlaceholderLine } from 'rn-placeholder';
 
 export const OrderDetailsUI = (props: OrderDetailsParams) => {
   const {
@@ -421,7 +422,58 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
 
   return (
     <OrderDetailsContainer keyboardShouldPersistTaps="handled">
-      <Spinner visible={!order || Object.keys(order).length === 0} />
+      {(!order || Object.keys(order).length === 0) && (
+        <Placeholder style={{ marginTop: 30 }}>
+          <Header>
+            <OrderInfo>
+              <OrderData>
+                <PlaceholderLine width={60} height={15} />
+                <PlaceholderLine width={60} height={10} />
+                <StaturBar>
+                  <PlaceholderLine height={15} />
+                  <PlaceholderLine width={40} height={20} />
+                </StaturBar>
+              </OrderData>
+              <View
+                style={{
+                  height: 8,
+                  backgroundColor: theme.colors.backgroundGray100,
+                  marginTop: 18,
+                  marginHorizontal: -40,
+                }}
+              />
+            </OrderInfo>
+          </Header>
+          <OrderContent>
+            <OrderBusiness>
+              <PlaceholderLine width={30} height={20} />
+              <PlaceholderLine width={60} height={15} />
+              <PlaceholderLine width={75} height={10} />
+              <PlaceholderLine width={40} height={10} />
+              <PlaceholderLine width={95} height={10} />
+            </OrderBusiness>
+          </OrderContent>
+          <View
+            style={{
+              height: 8,
+              backgroundColor: theme.colors.backgroundGray100,
+              marginTop: 18,
+              marginHorizontal: -40,
+            }}
+          />
+          <OrderCustomer>
+            <PlaceholderLine width={20} height={20} />
+            <PlaceholderLine width={70} height={15} />
+            <PlaceholderLine width={65} height={10} />
+            <PlaceholderLine width={80} height={10} />
+            <PlaceholderLine width={70} height={10} />
+            <View style={{marginTop: 10}}>
+              <PlaceholderLine width={60} height={20} />
+              <PlaceholderLine width={40} height={10} />
+            </View>
+          </OrderCustomer>
+        </Placeholder>
+      )}
       {order && Object.keys(order).length > 0 && (
         <>
           <Header>
@@ -768,7 +820,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                         )}
                       </OText>
                       <TouchableOpacity style={{ marginLeft: 5 }} onPress={() => setOpenTaxModal({ open: true, data: offer, type: 'offer_target_1' })}>
-                        <AntIcon name='exclamationcircleo' size={18} color={theme.colors.primary} />
+                        <AntIcon name='infocirlceo' size={16} color={theme.colors.primary} />
                       </TouchableOpacity>
                     </OSRow>
                     <OText size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal}>- {parsePrice(offer?.summary?.discount)}</OText>
@@ -816,7 +868,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                         {`(${verifyDecimals(tax?.rate, parseNumber)}%)`}{' '}
                       </OText>
                       <TouchableOpacity onPress={() => setOpenTaxModal({ open: true, data: tax, type: 'tax' })}>
-                        <AntIcon name='exclamationcircleo' size={18} color={theme.colors.primary} />
+                        <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>
@@ -832,7 +884,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                         ({parsePrice(fee?.fixed)} + {fee.percentage}%){' '}
                       </OText>
                       <TouchableOpacity onPress={() => setOpenTaxModal({ open: true, data: fee, type: 'fee' })}>
-                        <AntIcon name='exclamationcircleo' size={18} color={theme.colors.primary} />
+                        <AntIcon name='infocirlceo' size={16} color={theme.colors.primary} />
                       </TouchableOpacity>
                     </OSRow>
                     <OText size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal}>{parsePrice(fee?.summary?.fixed + (fee?.summary?.percentage_after_discount ?? fee?.summary?.percentage) ?? 0)}</OText>
@@ -850,7 +902,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                         )}
                       </OText>
                       <TouchableOpacity style={{ marginLeft: 5 }} onPress={() => setOpenTaxModal({ open: true, data: offer, type: 'offer_target_3' })}>
-                        <AntIcon name='exclamationcircleo' size={18} color={theme.colors.primary} />
+                        <AntIcon name='infocirlceo' size={16} color={theme.colors.primary} />
                       </TouchableOpacity>
                     </OSRow>
                     <OText size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal}>- {parsePrice(offer?.summary?.discount)}</OText>
@@ -874,7 +926,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                         )}
                       </OText>
                       <TouchableOpacity style={{ marginLeft: 5 }} onPress={() => setOpenTaxModal({ open: true, data: offer, type: 'offer_target_2' })}>
-                        <AntIcon name='exclamationcircleo' size={18} color={theme.colors.primary} />
+                        <AntIcon name='infocirlceo' size={16} color={theme.colors.primary} />
                       </TouchableOpacity>
                     </OSRow>
                     <OText size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal}>- {parsePrice(offer?.summary?.discount)}</OText>

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

@@ -21,14 +21,16 @@ import {
 } from './styles'
 
 const OrderProgressUI = (props: any) => {
-	const {
-		orderList,
-    navigation
-	} = props
+  const {
+    orderList,
+    navigation,
+    loadOrders,
+    isFocused
+  } = props
 
-	const theme = useTheme();
+  const theme = useTheme();
 
-	const [, t] = useLanguage()
+  const [, t] = useLanguage()
   const [{ optimizeImage, parseDate, parseTime }] = useUtils()
   const [lastOrder, setLastOrder] = useState<any>(null)
   const imageFails = theme.images.general.emptyActiveOrders
@@ -53,11 +55,11 @@ const OrderProgressUI = (props: any) => {
       overflow: 'hidden',
       backgroundColor: 'white',
       borderRadius: 8,
-			shadowColor: '#000000',
-			shadowOffset: { width: 1, height: 1 },
-			shadowOpacity: 0.1,
-			shadowRadius: 1,
-			elevation: 3
+      shadowColor: '#000000',
+      shadowOffset: { width: 1, height: 1 },
+      shadowOpacity: 0.1,
+      shadowRadius: 1,
+      elevation: 3
     },
     logo: {
       width: 50,
@@ -69,10 +71,10 @@ const OrderProgressUI = (props: any) => {
       flexDirection: 'row',
       alignItems: 'center'
     }
-	});
+  });
 
-	const getOrderStatus = (s: any) => {
-		const status = parseInt(s)
+  const getOrderStatus = (s: any) => {
+    const status = parseInt(s)
     const orderStatus = [
       { key: 0, value: t('PENDING', theme?.defaultLanguages?.PENDING || 'Pending'), slug: 'PENDING', percentage: 25 },
       { key: 1, value: t('COMPLETED', theme?.defaultLanguages?.COMPLETED || 'Completed'), slug: 'COMPLETED', percentage: 100 },
@@ -98,10 +100,10 @@ const OrderProgressUI = (props: any) => {
       { key: 21, value: t('ORDER_CUSTOMER_ARRIVED_BUSINESS', theme?.defaultLanguages?.ORDER_CUSTOMER_ARRIVED_BUSINESS || 'Customer arrived to business'), slug: 'ORDER_CUSTOMER_ARRIVED_BUSINESS', percentage: 95 }
     ]
 
-		const objectStatus = orderStatus.find((o) => o.key === status)
+    const objectStatus = orderStatus.find((o) => o.key === status)
 
-		return objectStatus && objectStatus
-	}
+    return objectStatus && objectStatus
+  }
 
   const convertDiffToHours = (order: any) => {
     const time = order.delivery_type === 1 ? order?.business?.delivery_time : order?.business?.pickup_time
@@ -120,18 +122,24 @@ const OrderProgressUI = (props: any) => {
 
   useEffect(() => {
     if (orderList?.orders.length > 0) {
-      const sortedOrders = orderList.orders.sort((a: any, b:any) => a.id > b.id ? -1 : 1)
+      const sortedOrders = orderList.orders.sort((a: any, b: any) => a.id > b.id ? -1 : 1)
       setLastOrder(sortedOrders[0])
     }
   }, [orderList?.orders])
 
-	return (
-		<>
+  useEffect(() => {
+    if (isFocused) {
+      loadOrders()
+    }
+  }, [isFocused])
+
+  return (
+    <>
       {orderList?.loading && (
-        <Placeholder Animation={Fade} height={130}>
-          <PlaceholderLine height={50} style={{ borderRadius: 8, marginBottom: 10 }} />
-          <PlaceholderLine height={15} style={{ marginBottom: 10 }} />
-          <PlaceholderLine height={30} style={{ borderRadius: 8, marginBottom: 10 }} />
+        <Placeholder Animation={Fade} height={160}>
+          <PlaceholderLine height={60} style={{ borderRadius: 8, marginBottom: 10 }} />
+          <PlaceholderLine height={20} style={{ marginBottom: 10 }} />
+          <PlaceholderLine height={40} style={{ borderRadius: 8, marginBottom: 10 }} />
         </Placeholder>
       )}
       {!orderList?.loading && orderList?.orders?.length > 0 && lastOrder && (
@@ -141,8 +149,8 @@ const OrderProgressUI = (props: any) => {
               <FastImage
                 style={{ width: 50, height: 50 }}
                 source={{
-                    uri: optimizeImage(lastOrder?.business?.logo, 'h_50,c_limit'),
-                    priority: FastImage.priority.normal,
+                  uri: optimizeImage(lastOrder?.business?.logo, 'h_50,c_limit'),
+                  priority: FastImage.priority.normal,
                 }}
                 resizeMode={FastImage.resizeMode.cover}
               />
@@ -150,7 +158,7 @@ const OrderProgressUI = (props: any) => {
             <View style={{
               paddingHorizontal: 10,
               flex: 1
-              }}
+            }}
             >
               <OText
                 size={13}
@@ -185,7 +193,7 @@ const OrderProgressUI = (props: any) => {
                   {lastOrder?.delivery_datetime_utc
                     ? parseTime(lastOrder?.delivery_datetime_utc, { outputFormat: 'hh:mm A' })
                     : parseTime(lastOrder?.delivery_datetime, { utc: false })}
-                    &nbsp;-&nbsp;
+                  &nbsp;-&nbsp;
                   {convertDiffToHours(lastOrder)}
                 </OText>
               </TimeWrapper>
@@ -200,8 +208,8 @@ const OrderProgressUI = (props: any) => {
           conditioned
         />
       )} */}
-		</>
-	)
+    </>
+  )
 }
 
 export const OrderProgress = (props: any) => {
@@ -217,6 +225,6 @@ export const OrderProgress = (props: any) => {
     }
   }
 
-	return <OrderList {...orderProgressProps} />
+  return <OrderList {...orderProgressProps} />
 
 }

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

@@ -154,10 +154,10 @@ const OrderSummaryUI = (props: any) => {
                         <OText size={12}>{`(${verifyDecimals(offer?.rate, parsePrice)}%)`}</OText>
                       )}
                       <TouchableOpacity style={{ marginLeft: 3 }} onPress={() => setOpenTaxModal({ open: true, data: offer, type: 'offer_target_1' })}>
-                        <AntIcon name='exclamationcircleo' size={18} color={theme.colors.primary} />
+                        <AntIcon name='infocirlceo' size={16} color={theme.colors.primary} />
                       </TouchableOpacity>
                       <TouchableOpacity style={{ marginLeft: 3 }} onPress={() => onRemoveOffer(offer?.id)}>
-                        <AntIcon name='closecircle' size={18} color={theme.colors.primary} />
+                        <AntIcon name='closecircle' size={16} color={theme.colors.primary} />
                       </TouchableOpacity>
                     </OSRow>
                     <OText size={12}>
@@ -186,7 +186,7 @@ const OrderSummaryUI = (props: any) => {
                         {`(${verifyDecimals(tax?.rate, parseNumber)}%)`}{' '}
                       </OText>
                       <TouchableOpacity onPress={() => setOpenTaxModal({ open: true, data: tax, type: 'tax' })} >
-                        <AntIcon name='exclamationcircleo' size={18} color={theme.colors.primary} />
+                        <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>
@@ -202,7 +202,7 @@ const OrderSummaryUI = (props: any) => {
                         ({parsePrice(fee?.fixed)} + {fee?.percentage}%){' '}
                       </OText>
                       <TouchableOpacity onPress={() => setOpenTaxModal({ open: true, data: fee, type: 'fee' })} >
-                        <AntIcon name='exclamationcircleo' size={18} color={theme.colors.primary} />
+                        <AntIcon name='infocirlceo' size={16} color={theme.colors.primary} />
                       </TouchableOpacity>
                     </OSRow>
                     <OText size={12}>{parsePrice(fee?.summary?.fixed + (fee?.summary?.percentage_after_discount ?? fee?.summary?.percentage) ?? 0)}</OText>
@@ -218,10 +218,10 @@ const OrderSummaryUI = (props: any) => {
                         <OText size={12}>{`(${verifyDecimals(offer?.rate, parsePrice)}%)`}</OText>
                       )}
                       <TouchableOpacity style={{ marginLeft: 3 }} onPress={() => setOpenTaxModal({ open: true, data: offer, type: 'offer_target_3' })}>
-                        <AntIcon name='exclamationcircleo' size={18} color={theme.colors.primary} />
+                        <AntIcon name='infocirlceo' size={16} color={theme.colors.primary} />
                       </TouchableOpacity>
                       <TouchableOpacity style={{ marginLeft: 3 }} onPress={() => onRemoveOffer(offer?.id)}>
-                        <AntIcon name='closecircle' size={18} color={theme.colors.primary} />
+                        <AntIcon name='closecircle' size={16} color={theme.colors.primary} />
                       </TouchableOpacity>
                     </OSRow>
                     <OText size={12}>
@@ -245,10 +245,10 @@ const OrderSummaryUI = (props: any) => {
                         <OText size={12}>{`(${verifyDecimals(offer?.rate, parsePrice)}%)`}</OText>
                       )}
                       <TouchableOpacity style={{ marginLeft: 3 }} onPress={() => setOpenTaxModal({ open: true, data: offer, type: 'offer_target_2' })}>
-                        <AntIcon name='exclamationcircleo' size={18} color={theme.colors.primary} />
+                        <AntIcon name='infocirlceo' size={16} color={theme.colors.primary} />
                       </TouchableOpacity>
                       <TouchableOpacity style={{ marginLeft: 3 }} onPress={() => onRemoveOffer(offer?.id)}>
-                        <AntIcon name='closecircle' size={18} color={theme.colors.primary} />
+                        <AntIcon name='closecircle' size={16} color={theme.colors.primary} />
                       </TouchableOpacity>
                     </OSRow>
                     <OText size={12}>

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

@@ -2,12 +2,12 @@ import React, { useState, useEffect } from 'react'
 import { OrderList, useLanguage, useOrder, ToastType, useToast } from 'ordering-components/native'
 import { useTheme } from 'styled-components/native';
 import { useFocusEffect } from '@react-navigation/native'
-import { OText } from '../shared'
+import { OText, OButton } from '../shared'
 import { NotFoundSource } from '../NotFoundSource'
 import { ActiveOrders } from '../ActiveOrders'
 import { PreviousOrders } from '../PreviousOrders'
 
-import { OptionTitle } from './styles'
+import { OptionTitle, NoOrdersWrapper } from './styles'
 import { OrdersOptionParams } from '../../types'
 
 import {
@@ -32,6 +32,8 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
 		loadMoreStatus,
 		loadMoreOrders,
 		loadOrders,
+		setOrdersLength,
+		ordersLength
 	} = props
 
 	const theme = useTheme();
@@ -112,28 +114,50 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
 		}
 	}, [loadMoreStatus, loading, pagination])
 
+	useEffect(() => {
+		if (loading) return
+
+		const updateOrders = orders.filter((order: any) => orderStatus.includes(order.status))
+
+		if (activeOrders) {
+			setOrdersLength && setOrdersLength({ ...ordersLength, activeOrdersLength: updateOrders?.length })
+		} else if (!preOrders) {
+			setOrdersLength && setOrdersLength({ ...ordersLength, previousOrdersLength: updateOrders?.length })
+		}
+	}, [orders?.length])
+
 	return (
 		<>
-			{(orders.length > 0) && (
-				<>
-					<OptionTitle>
-						<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>
-				</>
-			)}
-			{!loading && orders.length === 0 && (
+			<OptionTitle>
+				<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>
+			{!(activeOrders && ordersLength.activeOrdersLength === 0 && ordersLength.previousOrdersLength === 0) && !loading && orders.length === 0 && (
 				<NotFoundSource
 					content={t('NO_RESULTS_FOUND', 'Sorry, no results found')}
 					image={imageFails}
 					conditioned
 				/>
 			)}
+			{!loading && ordersLength.activeOrdersLength === 0 && ordersLength.previousOrdersLength === 0 && activeOrders && (
+				<NoOrdersWrapper>
+					<OText size={14} numberOfLines={1}>
+						{t('YOU_DONT_HAVE_ORDERS', 'You don\'t have any orders')}
+					</OText>
+					<OButton
+						text={t('ORDER_NOW', 'Order now')}
+						onClick={() => onNavigationRedirect && onNavigationRedirect('BusinessList')}
+						textStyle={{ color: 'white', fontSize: 14 }}
+						style={{ borderRadius: 7.6, marginBottom: 10, marginTop: 10, height: 44, paddingLeft: 10, paddingRight: 10 }}
+					/>
+					
+				</NoOrdersWrapper>
+			)}
 			{loading && (
 				<>
 					{!activeOrders ? (

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

@@ -3,3 +3,8 @@ import styled from 'styled-components/native'
 export const OptionTitle = styled.View`
 	margin-top: 24px;
 `
+
+export const NoOrdersWrapper = styled.View`
+	flex-direction: column;
+	align-items: center;
+`

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

@@ -96,7 +96,7 @@ export const PhoneInputNumber = (props: PhoneInputParams) => {
 	}, [userphoneNumber])
 
 	return (
-		<Wrapper>
+		<Wrapper onPress={() => forwardRef?.current?.focus?.()}>
 			<PhoneInput
 				ref={phoneInput}
         disabled={isDisabled}

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

@@ -1,3 +1,3 @@
 import styled from 'styled-components/native';
 
-export const Wrapper = styled.View``
+export const Wrapper = styled.Pressable``

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

@@ -4,7 +4,9 @@ import {
 	useSession,
 	useLanguage,
 	useOrder,
-	useUtils
+	useUtils,
+	ToastType,
+	useToast
 } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
 import { ProductIngredient } from '../ProductIngredient';
@@ -13,11 +15,12 @@ import Swiper from 'react-native-swiper'
 import FastImage from 'react-native-fast-image';
 import IconAntDesign from 'react-native-vector-icons/AntDesign';
 import YoutubePlayer from "react-native-youtube-iframe"
+import { TextInput } from 'react-native'
 import {
 	Grayscale
 } from 'react-native-color-matrix-image-filters'
 
-import { View, TouchableOpacity, StyleSheet, Dimensions, I18nManager, SafeAreaView, Button, Alert } from 'react-native';
+import { View, TouchableOpacity, StyleSheet, Dimensions, I18nManager, SafeAreaView, Platform, Button } from 'react-native';
 
 import {
 	WrapHeader,
@@ -54,6 +57,7 @@ export const ProductOptionsUI = (props: any) => {
 		productCart,
 		increment,
 		decrement,
+		handleChangeProductCartQuantity,
 		showOption,
 		maxProductQuantity,
 		errors,
@@ -65,6 +69,7 @@ export const ProductOptionsUI = (props: any) => {
 	} = props;
 
 	const theme = useTheme();
+	const [, { showToast }] = useToast()
 
 	const styles = StyleSheet.create({
 		mainContainer: {
@@ -236,6 +241,14 @@ export const ProductOptionsUI = (props: any) => {
 		setPlaying((prev) => !prev);
 	}, []);
 
+	const onChangeProductCartQuantity = (quantity: number) => {
+		if (quantity >= maxProductQuantity) {
+			showToast(ToastType.Error, t('MAX_QUANTITY', 'The max quantity is _number_').replace('_number_', maxProductQuantity))
+			return
+		}
+		handleChangeProductCartQuantity(quantity)
+	}
+
 	useEffect(() => {
 		const imageList: any = []
 		const videoList: any = []
@@ -816,7 +829,7 @@ export const ProductOptionsUI = (props: any) => {
 				)}
 			</ScrollView>
 			{!loading && !error && product && (
-				<ProductActions>
+				<ProductActions ios={Platform?.OS === 'ios'}>
 					<OText size={16} lineHeight={24} weight={'600'}>
 						{productCart.total ? parsePrice(productCart?.total) : ''}
 					</OText>
@@ -835,14 +848,32 @@ export const ProductOptionsUI = (props: any) => {
 									}
 								/>
 							</TouchableOpacity>
-							<OText
-								size={12}
-								lineHeight={18}
-								style={{ minWidth: 40, textAlign: 'center' }}
-							>
-								{qtyBy?.pieces && productCart.quantity}
-								{qtyBy?.weight_unit && productCart.quantity * product?.weight}
-							</OText>
+							{qtyBy?.pieces && (
+								<TextInput
+									keyboardType='numeric'
+									value={`${productCart.quantity}` || ''}
+									onChangeText={(val: any) => onChangeProductCartQuantity(parseInt(val))}
+									editable={!orderState.loading}
+									style={{
+										borderWidth: 1,
+										textAlign: 'center',
+										minWidth: 60,
+										borderRadius: 8,
+										borderColor: theme.colors.inputBorderColor,
+										height: 44,
+										marginHorizontal: 10
+									}}
+								/>
+							)}
+							{qtyBy?.weight_unit && (
+								<OText
+									size={12}
+									lineHeight={18}
+									style={{ minWidth: 40, textAlign: 'center' }}
+								>
+									{productCart.quantity * product?.weight}
+								</OText>
+							)}
 							<TouchableOpacity
 								onPress={increment}
 								disabled={

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

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

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

@@ -52,7 +52,7 @@ export const ProductOptionSubOptionUI = (props: any) => {
 	const disableIncrement = option?.limit_suboptions_by_max ? balance === option?.max : state.quantity === suboption?.max || (!state.selected && balance === option?.max)
 	const price = option?.with_half_option && suboption?.half_price && state.position !== 'whole' ? suboption?.half_price : suboption?.price
 	return (
-		<Container>
+		<Container onPress={() => handleSuboptionClick()}>
 			<IconControl disabled={disabled} onPress={() => handleSuboptionClick()}>
 				{((option?.min === 0 && option?.max === 1) || option?.max > 1) ? (
 					state?.selected ? (

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

@@ -1,6 +1,6 @@
 import styled, { css } from 'styled-components/native'
 
-export const Container = styled.View`
+export const Container = styled.TouchableOpacity`
   flex-direction: row;
   align-items: center;
   justify-content: space-between;

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

@@ -135,14 +135,21 @@ export const SingleProductCard = (props: SingleProductCardParams) => {
 					{product?.description}
 				</OText>
 			</CardInfo>
-			<FastImage
-				style={styles.productStyle}
-				source={{
-					uri: optimizeImage(product?.images, 'h_75,c_limit'),
-					priority: FastImage.priority.normal,
-				}}
-				resizeMode={FastImage.resizeMode.cover}
-			/>
+			{product?.images ? (
+				<FastImage
+					style={styles.productStyle}
+					source={{
+						uri: optimizeImage(product?.images, 'h_75,c_limit'),
+						priority: FastImage.priority.normal,
+					}}
+					resizeMode={FastImage.resizeMode.cover}
+				/>
+			) : (
+				<OIcon
+					src={theme?.images?.dummies?.product}
+					style={styles.productStyle}
+				/>
+			)}
 			{(isSoldOut || maxProductQuantity <= 0) && (
 				<SoldOut>
 					<OText size={12} weight="bold" color={theme.colors.textSecondary} style={styles.soldOutTextStyle}>

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

@@ -155,9 +155,6 @@ const UpsellingProductsUI = (props: UpsellingProductsParams) => {
           <TopActions onPress={() => onGoBack()}>
             <OIcon src={theme.images.general.arrow_left} width={15} />
           </TopActions>
-          <TopActions style={styles.cancelBtn} onPress={() => handleUpsellingPage()}>
-            <OText size={12} color={theme.colors.textSecondary}>{t('CANCEL', 'Cancel')}</OText>
-          </TopActions>
         </TopBar>
         <ScrollView style={{ marginBottom: props.isPage ? 40 : bottom + (Platform.OS == 'ios' ? 96 : 130) }} showsVerticalScrollIndicator={false}>
           <View style={{ paddingHorizontal: 40 }}>
@@ -178,7 +175,7 @@ const UpsellingProductsUI = (props: UpsellingProductsParams) => {
         <View
           style={{
             alignItems: 'center',
-            bottom: props.isPage ? 20 : Platform.OS === 'ios' ? bottom  + 59 :  bottom + 125
+            bottom: props.isPage ? Platform.OS === 'ios' ? 0 : 20 : Platform.OS === 'ios' ? bottom  + 59 :  bottom + 125
           }}
         >
           <OButton