ordering-ui-react-native 0.14.71 → 0.14.72

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

@@ -39,7 +39,7 @@ import {
 	ChCart,
 	DeliveryOptionsContainer,
 	DeliveryOptionItem,
-  WalletPaymentOptionContainer
+	WalletPaymentOptionContainer
 } from './styles';
 import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
 
@@ -133,7 +133,7 @@ const CheckoutUI = (props: any) => {
 	const [webviewPaymethod, setWebviewPaymethod] = useState<any>(null)
 
 
-  	const isWalletEnabled = configs?.wallet_enabled?.value === '1' && (configs?.wallet_cash_enabled?.value === '1' || configs?.wallet_credit_point_enabled?.value === '1')
+	const isWalletEnabled = configs?.wallet_enabled?.value === '1' && (configs?.wallet_cash_enabled?.value === '1' || configs?.wallet_credit_point_enabled?.value === '1')
 
 	const driverTipsOptions = typeof configs?.driver_tip_options?.value === 'string'
 		? JSON.parse(configs?.driver_tip_options?.value) || []
@@ -145,7 +145,7 @@ const CheckoutUI = (props: any) => {
 
 	const deliveryOptions = instructionsOptions?.result && instructionsOptions?.result?.filter((option: any) => option?.enabled)?.map((option: any) => {
 		return {
-			value: option?.id, key: option?.id, label: t(option?.name.toUpperCase().replace(/\s/g, '_'), option?.name) 
+			value: option?.id, key: option?.id, label: t(option?.name.toUpperCase().replace(/\s/g, '_'), option?.name)
 		}
 	})
 
@@ -169,7 +169,7 @@ const CheckoutUI = (props: any) => {
 
 	const onFailPaypal = async () => {
 		if (showGateway.closedByUser === true) {
-		  await confirmCart(cart.uuid)
+			await confirmCart(cart.uuid)
 		}
 	}
 	const changeDeliveryOption = (option: any) => {
@@ -283,14 +283,14 @@ const CheckoutUI = (props: any) => {
 					<ChSection>
 						<ChBusinessDetails>
 							{
-								(businessDetails?.loading || cartState.loading) &&
+								(businessDetails?.loading || cartState.loading || !businessDetails?.business || Object.values(businessDetails?.business).length === 0) &&
 								!businessDetails?.error &&
 								(
 									<Placeholder Animation={Fade}>
 										<PlaceholderLine height={20} width={70} />
-										<PlaceholderLine height={15} width={60} />
-										<PlaceholderLine height={15} width={60} />
-										<PlaceholderLine height={15} width={80} style={{ marginBottom: 20 }} />
+										<PlaceholderLine height={10} width={60} />
+										<PlaceholderLine height={10} width={60} />
+										<PlaceholderLine height={10} width={80} style={{ marginBottom: 20 }} />
 									</Placeholder>
 								)}
 							{
@@ -337,9 +337,9 @@ const CheckoutUI = (props: any) => {
 							{cartState.loading ? (
 								<Placeholder Animation={Fade}>
 									<PlaceholderLine height={20} width={70} />
-									<PlaceholderLine height={15} width={60} />
-									<PlaceholderLine height={15} width={60} />
-									<PlaceholderLine height={15} width={80} style={{ marginBottom: 20 }} />
+									<PlaceholderLine height={10} width={60} />
+									<PlaceholderLine height={10} width={60} />
+									<PlaceholderLine height={10} width={80} style={{ marginBottom: 20 }} />
 								</Placeholder>
 							) : (
 								<UserDetails
@@ -358,54 +358,66 @@ const CheckoutUI = (props: any) => {
 						<View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100, marginHorizontal: -40 }} />
 					</ChSection>
 
-					{!cartState.loading && deliveryOptionSelected !== undefined && options?.type === 1 && (
+					{options?.type === 1 && (
 						<DeliveryOptionsContainer>
-							<OText size={16}>{t('DELIVERY_OPTIONS', 'Delivery options')}</OText>
-							<View
-								style={{
-									backgroundColor: theme.colors.inputDisabled,
-									borderRadius: 7.5,
-									marginBottom: 20,
-									flex: 1
-								}}>
-								<Picker
-									countryCode={undefined}
-									visible={isDeliveryOptionModalVisible}
-									onClose={() => setIsDeliveryOptionModalVisible(false)}
-									withCountryNameButton
-									renderFlagButton={() => (
-										<TouchableOpacity onPress={() => setIsDeliveryOptionModalVisible(true)}>
-											<DeliveryOptionItem backgroundColor={theme?.colors?.inputDisabled}>
-												<OText
-													size={14}
-												>
-													{deliveryOptions.find((option: any) => option.value === deliveryOptionSelected).label}
-												</OText>
-												<MaterialIcons name='keyboard-arrow-down' style={styles.icon} />
-											</DeliveryOptionItem>
-										</TouchableOpacity>
-									)}
-									flatListProps={{
-										keyExtractor: (item: any) => item.value,
-										data: deliveryOptions || [],
-										renderItem: ({ item }: any) => (
-											<TouchableOpacity
-												onPress={() => changeDeliveryOption(item.value)}
-												disabled={
-													deliveryOptionSelected === item.value
-												}
-											>
-												<DeliveryOptionItem backgroundColor={deliveryOptionSelected === item.value ? theme.colors.inputDisabled : 'white'}>
-													<OText>
-														{item.label}
-													</OText>
-												</DeliveryOptionItem>
-											</TouchableOpacity>
-										)
-									}}
-								/>
-							</View>
-							<View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100, marginHorizontal: -40 }} />
+							{cartState.loading || deliveryOptionSelected === undefined ? (
+								<View style={{ height: 110 }}>
+									<Placeholder Animation={Fade}>
+										<PlaceholderLine height={20} width={70} />
+										<PlaceholderLine height={40} width={100} />
+									</Placeholder>
+								</View>
+							) : (
+								<>
+									<OText size={16}>{t('DELIVERY_OPTIONS', 'Delivery options')}</OText>
+									<View
+										style={{
+											backgroundColor: theme.colors.inputDisabled,
+											borderRadius: 7.5,
+											marginBottom: 20,
+											flex: 1
+										}}>
+										<Picker
+											countryCode={undefined}
+											visible={isDeliveryOptionModalVisible}
+											onClose={() => setIsDeliveryOptionModalVisible(false)}
+											withCountryNameButton
+											renderFlagButton={() => (
+												<TouchableOpacity onPress={() => setIsDeliveryOptionModalVisible(true)}>
+													<DeliveryOptionItem backgroundColor={theme?.colors?.inputDisabled}>
+														<OText
+															size={14}
+														>
+															{deliveryOptions.find((option: any) => option.value === deliveryOptionSelected).label}
+														</OText>
+														<MaterialIcons name='keyboard-arrow-down' style={styles.icon} />
+													</DeliveryOptionItem>
+												</TouchableOpacity>
+											)}
+											flatListProps={{
+												keyExtractor: (item: any) => item.value,
+												data: deliveryOptions || [],
+												renderItem: ({ item }: any) => (
+													<TouchableOpacity
+														onPress={() => changeDeliveryOption(item.value)}
+														disabled={
+															deliveryOptionSelected === item.value
+														}
+													>
+														<DeliveryOptionItem backgroundColor={deliveryOptionSelected === item.value ? theme.colors.inputDisabled : 'white'}>
+															<OText>
+																{item.label}
+															</OText>
+														</DeliveryOptionItem>
+													</TouchableOpacity>
+												)
+											}}
+										/>
+									</View>
+									<View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100, marginHorizontal: -40 }} />
+								</>
+							)}
+
 						</DeliveryOptionsContainer>
 					)}
 
@@ -436,7 +448,7 @@ const CheckoutUI = (props: any) => {
                   height={80}
                   borderRadius={80}
                 />
-                <View style={{ marginLeft: 15, width: '85%' }}>
+                <View style={{ marginLeft: 10, width: '85%' }}>
                   <OText size={22} numberOfLines={2} ellipsizeMode='tail' style={{ width: '85%' }}>
                     {businessName || businessDetails?.business?.name}
                   </OText>
@@ -530,14 +542,14 @@ const CheckoutUI = (props: any) => {
 						</ChSection>
 					)}
 
-          {!cartState.loading && cart && isWalletEnabled && (
-            <WalletPaymentOptionContainer>
-              <PaymentOptionWallet
-                cart={cart}
-                businessId={cart?.business_id}
-              />
-            </WalletPaymentOptionContainer>
-          )}
+					{!cartState.loading && cart && isWalletEnabled && (
+						<WalletPaymentOptionContainer>
+							<PaymentOptionWallet
+								cart={cart}
+								businessId={cart?.business_id}
+							/>
+						</WalletPaymentOptionContainer>
+					)}
 
 
 					{!cartState.loading && cart && (
@@ -571,7 +583,7 @@ const CheckoutUI = (props: any) => {
 										<OrderSummary
 											cart={cart}
 											isCartPending={cart?.status === 2}
-                      						onNavigationRedirect={onNavigationRedirect}
+											onNavigationRedirect={onNavigationRedirect}
 										/>
 									</>
 								)}
@@ -580,7 +592,7 @@ const CheckoutUI = (props: any) => {
 					)}
 
 					{!cartState.loading && cart && (
-            <View>
+						<View>
 							<ChErrors style={{ marginBottom: 0 }}>
 								{!cart?.valid_address && cart?.status !== 2 && (
 									<OText
@@ -641,7 +653,7 @@ const CheckoutUI = (props: any) => {
 					}
 					btnRightValueShow
 					btnRightValue={parsePrice(cart?.total)}
-					iosBottom={20}
+					iosBottom={30}
 				/>
 			)}
 			{webviewPaymethod?.gateway === 'paypal' && showGateway.open && (

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

@@ -102,7 +102,8 @@ const LoginFormUI = (props: LoginParams) => {
 		},
 	});
 
-	const inputRef = useRef<any>({});
+	const emailRef = useRef<any>({});
+	const passwordRef = useRef<any>({});
 
 	const handleChangeTab = (val: string) => {
 		props.handleChangeTab(val);
@@ -299,8 +300,9 @@ const LoginFormUI = (props: LoginParams) => {
 										type="email-address"
 										autoCompleteType="email"
 										returnKeyType="next"
-										onSubmitEditing={() => inputRef.current?.focus()}
+										onSubmitEditing={() => passwordRef.current?.focus()}
 										blurOnSubmit={false}
+										forwardRef={emailRef}
 									/>
 								)}
 								name="email"
@@ -327,7 +329,7 @@ const LoginFormUI = (props: LoginParams) => {
 									handleData={(val: any) => setPhoneInputData(val)}
 									textInputProps={{
 										returnKeyType: 'next',
-										onSubmitEditing: () => inputRef?.current?.focus?.(),
+										onSubmitEditing: () => passwordRef?.current?.focus?.(),
 									}}
 								/>
 							</View>
@@ -359,7 +361,7 @@ const LoginFormUI = (props: LoginParams) => {
 										)
 									}
 									value={value}
-									forwardRef={inputRef}
+									forwardRef={passwordRef}
 									onChange={(val: any) => onChange(val)}
 									returnKeyType="done"
 									onSubmitEditing={handleSubmit(onSubmit)}

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/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

@@ -20,7 +20,7 @@ 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,
@@ -829,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>

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;