ordering-ui-react-native 0.14.41 → 0.14.42-release

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

@@ -116,5 +116,12 @@ export const Map = styled.View`
   width: 100%;
   height: 250px;
   margin-top: 20px;
-  border-radius: 20px
+  border-radius: 20px;
+`
+
+export const Divider = styled.View`
+  border-color: #EAEAEA;
+  border-width: 1px;
+  margin-top: 5px;
+  margin-bottom: 5px;
 `

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

@@ -108,7 +108,8 @@ const OrderProgressUI = (props: any) => {
     const deliveryTime = order?.delivery_datetime_utc
       ? parseDate(order?.delivery_datetime_utc, { outputFormat: 'YYYY-MM-DD HH:mm' })
       : parseDate(order?.delivery_datetime, { utc: false, outputFormat: 'YYYY-MM-DD HH:mm' })
-    const [hour, minute] = time.split(':')
+    const hour = time?.split(':')?.[0]
+    const minute = time?.split(':')?.[1]
     const result = time ? (parseInt(hour, 10) * 60) + parseInt(minute, 10) : 0
     const returnedDate = moment(deliveryTime).add(result, 'minutes').format('hh:mm A')
     return returnedDate

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

@@ -14,7 +14,8 @@ import {
   OSProductList,
   OSBill,
   OSTable,
-  OSRow
+  OSRow,
+  Divider
 } from './styles';
 
 import { ProductItemAccordion } from '../ProductItemAccordion';
@@ -24,6 +25,7 @@ import { verifyDecimals } from '../../utils';
 import AntIcon from 'react-native-vector-icons/AntDesign'
 import { TaxInformation } from '../TaxInformation';
 import { TouchableOpacity } from 'react-native';
+import { OAlert } from '../../../../../src/components/shared'
 
 const OrderSummaryUI = (props: any) => {
   const {
@@ -35,7 +37,8 @@ const OrderSummaryUI = (props: any) => {
     isFromCheckout,
     commentState,
     handleChangeComment,
-    onNavigationRedirect
+    onNavigationRedirect,
+    handleRemoveOfferClick
   } = props;
 
   const theme = useTheme()
@@ -44,8 +47,8 @@ const OrderSummaryUI = (props: any) => {
   const [orderState] = useOrder();
   const [{ parsePrice, parseNumber }] = useUtils();
   const [validationFields] = useValidationFields();
-  const [openTaxModal, setOpenTaxModal] = useState<any>({ open: false, data: null })
-
+  const [openTaxModal, setOpenTaxModal] = useState<any>({ open: false, data: null, type: '' })
+  const [confirm, setConfirm] = useState<any>({ open: false, content: null, handleOnAccept: null, id: null, title: null })
   const isCouponEnabled = validationFields?.fields?.checkout?.coupon?.enabled;
 
   const handleDeleteClick = (product: any) => {
@@ -61,7 +64,7 @@ const OrderSummaryUI = (props: any) => {
       categoryId: product?.category_id,
       productId: product?.id,
       isFromCheckout: isFromCheckout,
-		})
+    })
   }
 
   const getIncludedTaxes = () => {
@@ -74,6 +77,22 @@ const OrderSummaryUI = (props: any) => {
     }
   }
 
+  const getIncludedTaxesDiscounts = () => {
+    return cart?.taxes?.filter((tax: any) => tax?.type === 1)?.reduce((carry: number, tax: any) => carry + (tax?.summary?.tax_after_discount ?? tax?.summary?.tax), 0)
+  }
+
+  const onRemoveOffer = (id: number) => {
+    setConfirm({
+      open: true,
+      content: [t('QUESTION_DELETE_OFFER', 'Are you sure that you want to delete the offer?')],
+      title: t('OFFER', 'Offer'),
+      handleOnAccept: () => {
+        setConfirm({ ...confirm, open: false })
+        handleRemoveOfferClick(id)
+      }
+    })
+  }
+
   const cart = orderState?.carts?.[`businessId:${props.cart.business_id}`]
 
   const walletName: any = {
@@ -109,9 +128,11 @@ const OrderSummaryUI = (props: any) => {
             <OSBill>
               <OSTable>
                 <OText size={12}>{t('SUBTOTAL', 'Subtotal')}</OText>
-                <OText size={12}>{parsePrice(cart?.subtotal + getIncludedTaxes())}</OText>
+                <OText size={12}>
+                  {parsePrice(cart?.subtotal + getIncludedTaxes())}
+                </OText>
               </OSTable>
-              {cart?.discount > 0 && cart?.total >= 0 && (
+              {cart?.discount > 0 && cart?.total >= 0 && cart?.offers?.length === 0 && (
                 <OSTable>
                   {cart?.discount_type === 1 ? (
                     <OText size={12}>
@@ -125,34 +146,87 @@ const OrderSummaryUI = (props: any) => {
                 </OSTable>
               )}
               {
-                cart?.taxes?.length > 0 && cart?.taxes?.filter((tax: any) => tax?.type === 2 && tax?.rate !== 0).map((tax: any) => (
-                  <OSTable key={tax?.id}>
+                cart?.offers?.length > 0 && cart?.offers?.filter((offer: any) => offer?.target === 1)?.map((offer: any) => (
+                  <OSTable key={offer.id}>
                     <OSRow>
-                      <OText size={12} numberOfLines={1}>
-                        {tax?.name || t('INHERIT_FROM_BUSINESS', 'Inherit from business')}{' '}
+                      <OText size={12}>{offer.name}</OText>
+                      {offer.rate_type === 1 && (
+                        <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} />
+                      </TouchableOpacity>
+                      <TouchableOpacity style={{ marginLeft: 3 }} onPress={() => onRemoveOffer(offer?.id)}>
+                        <AntIcon name='closecircle' size={18} color={theme.colors.primary} />
+                      </TouchableOpacity>
+                    </OSRow>
+                    <OText size={12}>
+                      - {parsePrice(offer?.summary?.discount)}
+                    </OText>
+                  </OSTable>
+                ))
+              }
+              <Divider />
+              {cart?.subtotal_with_discount > 0 && cart?.discount > 0 && cart?.total >= 0 && (
+                <OSTable>
+                  <OText size={12} numberOfLines={1}>{t('SUBTOTAL_WITH_DISCOUNT', 'Subtotal with discount')}</OText>
+                  {cart?.business?.tax_type === 1 ? (
+                    <OText size={12}>{parsePrice(cart?.subtotal_with_discount + getIncludedTaxesDiscounts() ?? 0)}</OText>
+                  ) : (
+                    <OText size={12}>{parsePrice(cart?.subtotal_with_discount ?? 0)}</OText>
+                  )}
+                </OSTable>
+              )}
+              {
+                cart.taxes?.length > 0 && cart.taxes.filter((tax: any) => tax.type === 2 && tax?.rate !== 0).map((tax: any) => (
+                  <OSTable key={tax.id}>
+                    <OSRow>
+                      <OText size={12} numberOfLines={1} >
+                        {tax.name || t('INHERIT_FROM_BUSINESS', 'Inherit from business')}{' '}
                         {`(${verifyDecimals(tax?.rate, parseNumber)}%)`}{' '}
                       </OText>
-                      <TouchableOpacity onPress={() => setOpenTaxModal({ open: true, data: tax })} >
-                        <AntIcon name='exclamationcircleo' size={20} color={theme.colors.primary} />
+                      <TouchableOpacity onPress={() => setOpenTaxModal({ open: true, data: tax, type: 'tax' })} >
+                        <AntIcon name='exclamationcircleo' size={18} color={theme.colors.primary} />
                       </TouchableOpacity>
                     </OSRow>
-                    <OText size={12}>{parsePrice(tax?.summary?.tax || 0)}</OText>
+                    <OText size={12}>{parsePrice(tax?.summary?.tax_after_discount ?? tax?.summary?.tax ?? 0)}</OText>
                   </OSTable>
                 ))
               }
               {
-                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) => (
+                  <OSTable key={fee?.id}>
                     <OSRow>
                       <OText size={12} numberOfLines={1}>
                         {fee.name || t('INHERIT_FROM_BUSINESS', 'Inherit from business')}{' '}
-                        ({parsePrice(fee?.fixed)} + {fee.percentage}%){' '}
+                        ({parsePrice(fee?.fixed)} + {fee?.percentage}%){' '}
                       </OText>
-                      <TouchableOpacity onPress={() => setOpenTaxModal({ open: true, data: fee })} >
-                        <AntIcon name='exclamationcircleo' size={20} color={theme.colors.primary} />
+                      <TouchableOpacity onPress={() => setOpenTaxModal({ open: true, data: fee, type: 'fee' })} >
+                        <AntIcon name='exclamationcircleo' size={18} color={theme.colors.primary} />
                       </TouchableOpacity>
                     </OSRow>
-                    <OText size={12}>{parsePrice(fee?.summary?.fixed + fee?.summary?.percentage || 0)}</OText>
+                    <OText size={12}>{parsePrice(fee?.summary?.fixed + (fee?.summary?.percentage_after_discount ?? fee?.summary?.percentage) ?? 0)}</OText>
+                  </OSTable>
+                ))
+              }
+              {
+                cart?.offers?.length > 0 && cart?.offers?.filter((offer: any) => offer?.target === 3)?.map((offer: any) => (
+                  <OSTable key={offer.id}>
+                    <OSRow>
+                      <OText size={12}>{offer.name}</OText>
+                      {offer.rate_type === 1 && (
+                        <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} />
+                      </TouchableOpacity>
+                      <TouchableOpacity style={{ marginLeft: 3 }} onPress={() => onRemoveOffer(offer?.id)}>
+                        <AntIcon name='closecircle' size={18} color={theme.colors.primary} />
+                      </TouchableOpacity>
+                    </OSRow>
+                    <OText size={12}>
+                      - {parsePrice(offer?.summary?.discount)}
+                    </OText>
                   </OSTable>
                 ))
               }
@@ -162,6 +236,27 @@ const OrderSummaryUI = (props: any) => {
                   <OText size={12}>{parsePrice(cart?.delivery_price)}</OText>
                 </OSTable>
               )}
+              {
+                cart?.offers?.length > 0 && cart?.offers?.filter((offer: any) => offer?.target === 2)?.map((offer: any) => (
+                  <OSTable key={offer.id}>
+                    <OSRow>
+                      <OText size={12}>{offer.name}</OText>
+                      {offer.rate_type === 1 && (
+                        <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} />
+                      </TouchableOpacity>
+                      <TouchableOpacity style={{ marginLeft: 3 }} onPress={() => onRemoveOffer(offer?.id)}>
+                        <AntIcon name='closecircle' size={18} color={theme.colors.primary} />
+                      </TouchableOpacity>
+                    </OSRow>
+                    <OText size={12}>
+                      - {parsePrice(offer?.summary?.discount)}
+                    </OText>
+                  </OSTable>
+                ))
+              }
               {cart?.driver_tip > 0 && (
                 <OSTable>
                   <OText size={12}>
@@ -201,7 +296,7 @@ const OrderSummaryUI = (props: any) => {
                       {t('TOTAL', 'Total')}
                     </OText>
                     <OText size={14} style={{ fontWeight: 'bold' }} >
-                      {parsePrice(cart?.balance ?? cart?.total)}
+                      {parsePrice(cart?.total >= 0 ? cart?.total : 0)}
                     </OText>
                   </OSTable>
                 </View>
@@ -243,11 +338,25 @@ const OrderSummaryUI = (props: any) => {
           )}
           <OModal
             open={openTaxModal.open}
-            onClose={() => setOpenTaxModal({ open: false, data: null })}
+            onClose={() => setOpenTaxModal({ open: false, data: null, type: '' })}
             entireModal
+            title={`${openTaxModal.data?.name ||
+              t('INHERIT_FROM_BUSINESS', 'Inherit from business')} ${openTaxModal.data?.rate_type !== 2 ? `(${typeof openTaxModal.data?.rate === 'number' ? `${openTaxModal.data?.rate}%` : `${parsePrice(openTaxModal.data?.fixed ?? 0)} + ${openTaxModal.data?.percentage}%`})` : ''}  `}
           >
-            <TaxInformation data={openTaxModal.data} products={cart.products} />
+            <TaxInformation
+              type={openTaxModal.type}
+              data={openTaxModal.data}
+              products={cart?.products}
+            />
           </OModal>
+          <OAlert
+            open={confirm.open}
+            title={confirm.title}
+            content={confirm.content}
+            onAccept={confirm.handleOnAccept}
+            onCancel={() => setConfirm({ ...confirm, open: false, title: null })}
+            onClose={() => setConfirm({ ...confirm, open: false, title: null })}
+          />
         </>
       )}
     </OSContainer>

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

@@ -39,3 +39,10 @@ export const OSRow = styled.View`
   overflow: hidden;
   width: 80%;
 `
+
+export const Divider = styled.View`
+  border-color: #EAEAEA;
+  border-width: 1px;
+  margin-top: 5px;
+  margin-bottom: 10px;
+`

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

@@ -37,6 +37,8 @@ const stripeOptions: any = ['stripe_direct', 'stripe', 'stripe_connect']
 //   { name: 'iDEAL', value: 'ideal' }
 // ]
 
+const webViewPaymentGateway: any = ['paypal', 'square']
+
 const PaymentOptionsUI = (props: any) => {
 	const {
 		cart,
@@ -49,7 +51,8 @@ const PaymentOptionsUI = (props: any) => {
 		onNavigationRedirect,
 		handlePaymethodClick,
 		handlePaymethodDataChange,
-		isOpenMethod
+		isOpenMethod,
+		handlePaymentMethodClickCustom
 	} = props
 
 	const theme = useTheme();
@@ -90,6 +93,9 @@ const PaymentOptionsUI = (props: any) => {
 
 	const handlePaymentMethodClick = (paymethod: any) => {
 		const isPopupMethod = ['stripe', 'stripe_direct', 'stripe_connect', 'stripe_redirect', 'paypal'].includes(paymethod?.gateway)
+		if (webViewPaymentGateway.includes(paymethod?.gateway)) {
+			handlePaymentMethodClickCustom(paymethod)
+		}
 		handlePaymethodClick(paymethod, isPopupMethod)
 	}
 
@@ -139,7 +145,7 @@ const PaymentOptionsUI = (props: any) => {
 		)
 	}
 
-	const excludeIds: any = [3, 32, 66]; //exclude paypal & connect & redirect
+	const excludeIds: any = [32, 66]; //exclude paypal & connect & redirect
 
 	return (
 		<PMContainer>

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

@@ -155,7 +155,7 @@ export const ProductOptionsUI = (props: any) => {
 	const { product, loading, error } = productObject;
 	const [gallery, setGallery] = useState([])
 	const [thumbsSwiper, setThumbsSwiper] = useState(0)
-
+	const [indexGallery, setIndexGallery] = useState(0)
 	const [selOpt, setSelectedOpt] = useState(0);
 	const [isHaveWeight, setIsHaveWeight] = useState(false)
 	const [qtyBy, setQtyBy] = useState({
@@ -208,11 +208,16 @@ export const ProductOptionsUI = (props: any) => {
 	}
 
 	const handleClickThumb = (index: number) => {
-		swiperRef?.current.scrollBy(index - thumbsSwiper, true);
+		if (index !== indexGallery) {
+			swiperRef?.current.scrollBy(index - thumbsSwiper, true);
+			setIndexGallery(index)
+		}
 	}
 
 	const handleRedirectLogin = () => {
-		navigation.navigate('Login');
+		navigation.navigate('Login', {
+			store_slug:  props.businessSlug
+		});
 	};
 
 	const handleSwitchQtyUnit = (val: string) => {
@@ -289,16 +294,16 @@ export const ProductOptionsUI = (props: any) => {
 		</>
 	);
 
-  const handleGoBack = navigation?.canGoBack()
-    ? () => navigation.goBack()
-    : () => navigation.navigate('Business', { store: props.businessSlug })
+	const handleGoBack = navigation?.canGoBack()
+		? () => navigation.goBack()
+		: () => navigation.navigate('Business', { store: props.businessSlug })
 
 	return (
-    <SafeAreaView style={{ flex: 1 }}>
-      <TopHeader>
-	  	<TopActions onPress={() => handleGoBack()}>
-            <OIcon src={theme.images.general.arrow_left} width={15} />
-          </TopActions>
+		<SafeAreaView style={{ flex: 1 }}>
+			<TopHeader>
+				<TopActions onPress={() => handleGoBack()}>
+					<OIcon src={theme.images.general.arrow_left} width={15} />
+				</TopActions>
 			</TopHeader>
 			<ScrollView>
 				{!error && (
@@ -349,13 +354,13 @@ export const ProductOptionsUI = (props: any) => {
 												style={styles.slide1}
 												key={i}
 											>
-                        <FastImage
-                          style={{ height: '100%', opacity: isSoldOut ? 0.5 : 1 }}
-                          source={{
-                            uri: optimizeImage(img, 'h_258,c_limit'),
-                            priority: FastImage.priority.normal,
-                          }}
-                        />
+												<FastImage
+													style={{ height: '100%', opacity: isSoldOut ? 0.5 : 1 }}
+													source={{
+														uri: optimizeImage(img, 'h_258,c_limit'),
+														priority: FastImage.priority.normal,
+													}}
+												/>
 											</View>
 										))}
 									</Swiper>
@@ -379,18 +384,18 @@ export const ProductOptionsUI = (props: any) => {
 														opacity: index === thumbsSwiper ? 1 : 0.8
 													}}
 												>
-                          <OIcon
-                            url={img}
-                            style={{
-                              borderColor: theme.colors.lightGray,
-                              borderRadius: 8,
-                              minHeight: '100%',
-                              opacity: isSoldOut ? 0.5 : 1
-                            }}
-                            width={56}
-                            height={56}
-                            cover
-                          />
+													<OIcon
+														url={img}
+														style={{
+															borderColor: theme.colors.lightGray,
+															borderRadius: 8,
+															minHeight: '100%',
+															opacity: isSoldOut ? 0.5 : 1
+														}}
+														width={56}
+														height={56}
+														cover
+													/>
 												</View>
 											</TouchableOpacity>
 
@@ -446,21 +451,21 @@ export const ProductOptionsUI = (props: any) => {
 										) : (
 											<View style={{ flexDirection: 'row', marginBottom: 10 }}>
 												<OText size={16} style={{ flex: I18nManager.isRTL ? 1 : 0 }} color={theme.colors.primary}>{productCart.price ? parsePrice(productCart.price) : ''}</OText>
-												{!!product?.offer_price && (
+												{product?.offer_price !== null && product?.in_offer && (
 													<OText style={{
 														fontSize: 14,
 														color: '#808080',
 														textDecorationLine: 'line-through',
 														marginLeft: 7,
 														marginRight: 7
-													}}>{parsePrice(product?.offer_price)}</OText>
+													}}>{product?.offer_price ? parsePrice(product?.offer_price) : ''}</OText>
 												)}
 											</View>
 										)}
 									</>
 								)}
 							</ProductTitle>
-						  <ProductDescription>
+							<ProductDescription>
 								<OText color={theme.colors.textSecondary} size={12} lineHeight={18}>
 									{product?.description || productCart?.description}
 								</OText>
@@ -785,7 +790,7 @@ export const ProductOptionsUI = (props: any) => {
 							<OText
 								size={12}
 								lineHeight={18}
-								style={{ minWidth: 29, textAlign: 'center' }}
+								style={{ minWidth: 40, textAlign: 'center' }}
 							>
 								{qtyBy?.pieces && productCart.quantity}
 								{qtyBy?.weight_unit && productCart.quantity * product?.weight}
@@ -809,36 +814,38 @@ export const ProductOptionsUI = (props: any) => {
 									}
 								/>
 							</TouchableOpacity>
-							<WeightUnitSwitch>
-								<TouchableOpacity
-									onPress={() => handleSwitchQtyUnit('pieces')}
-								>
-									<WeightUnitItem active={qtyBy?.pieces}>
-										<OText
-											size={12}
-											lineHeight={18}
-											color={qtyBy?.pieces ? theme.colors.primary : theme.colors.textNormal}
-										>
-											{t('PIECES', 'pieces')}
-										</OText>
-									</WeightUnitItem>
-								</TouchableOpacity>
-								<View style={{ alignItems: 'flex-start' }}>
+							{isHaveWeight && (
+								<WeightUnitSwitch>
 									<TouchableOpacity
-										onPress={() => handleSwitchQtyUnit('weight_unit')}
+										onPress={() => handleSwitchQtyUnit('pieces')}
 									>
-										<WeightUnitItem active={qtyBy?.weight_unit}>
+										<WeightUnitItem active={qtyBy?.pieces}>
 											<OText
 												size={12}
 												lineHeight={18}
-												color={qtyBy?.weight_unit ? theme.colors.primary : theme.colors.textNormal}
+												color={qtyBy?.pieces ? theme.colors.primary : theme.colors.textNormal}
 											>
-												{product?.weight_unit}
+												{t('PIECES', 'pcs')}
 											</OText>
 										</WeightUnitItem>
 									</TouchableOpacity>
-								</View>
-							</WeightUnitSwitch>
+									<View style={{ alignItems: 'flex-start' }}>
+										<TouchableOpacity
+											onPress={() => handleSwitchQtyUnit('weight_unit')}
+										>
+											<WeightUnitItem active={qtyBy?.weight_unit}>
+												<OText
+													size={12}
+													lineHeight={18}
+													color={qtyBy?.weight_unit ? theme.colors.primary : theme.colors.textNormal}
+												>
+													{product?.weight_unit}
+												</OText>
+											</WeightUnitItem>
+										</TouchableOpacity>
+									</View>
+								</WeightUnitSwitch>
+							)}
 						</View>
 					)}
 					<View
@@ -907,7 +914,7 @@ export const ProductOptionsUI = (props: any) => {
 					</View>
 				</ProductActions>
 			)}
-    </SafeAreaView>
+		</SafeAreaView>
 	);
 };
 

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

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react'
 import {
 	useUtils,
 	useLanguage,
-	ProductOptionSuboption as ProductSubOptionController,
+	ProductOptionSuboption as ProductSubOptionController
 } from 'ordering-components/native'
 import { useTheme } from 'styled-components/native';
 import { StyleSheet } from 'react-native'
@@ -51,7 +51,6 @@ 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>
 			<IconControl disabled={disabled} onPress={() => handleSuboptionClick()}>
@@ -73,54 +72,57 @@ export const ProductOptionSubOptionUI = (props: any) => {
 				</OText>
 			</IconControl>
 			{showMessage && <OText size={10} mLeft={4} mRight={4} style={{ flex: 1, textAlign: 'center' }} color={theme.colors.primary}>{`${t('OPTIONS_MAX_LIMIT', 'Maximum options to choose')}: ${option?.max}`}</OText>}
-			{option?.allow_suboption_quantity && state?.selected && (
-				<QuantityControl>
-					<Checkbox disabled={disabled || state.quantity === 0} onPress={decrement}>
-						<OIcon
-							src={theme.images.general.minus}
-							width={16}
-							color={state.quantity === 0 || disabled ? theme.colors.disabled : theme.colors.primary}
-						/>
-					</Checkbox>
-					<OText mLeft={5} mRight={5}>
-						{state.quantity}
-					</OText>
-					<Checkbox disabled={disabled || disableIncrement} onPress={increment}>
-						<OIcon
-							src={theme.images.general.plus}
-							width={16}
-							color={disableIncrement || disabled ? theme.colors.disabled : theme.colors.primary}
-						/>
-					</Checkbox>
-				</QuantityControl>
-			)}
-			{option?.with_half_option && state?.selected && (
-				<PositionControl>
-					<Circle disabled={disabled} onPress={() => changePosition('left')}>
-						<OIcon
-							src={theme.images.general.half_l}
-							color={state.selected && state.position === 'left' ? theme.colors.primary : '#cbcbcb'}
-							width={16}
-							style={styles.inverse}
-						/>
-					</Circle>
-					<Circle disabled={disabled} onPress={() => changePosition('whole')}>
-						<OIcon
-							src={theme.images.general.half_f}
-							color={state.selected && state.position === 'whole' ? theme.colors.primary : '#cbcbcb'}
-							width={16}
-						/>
-					</Circle>
-					<Circle disabled={disabled} onPress={() => changePosition('right')}>
-						<OIcon
-							src={theme.images.general.half_r}
-							color={state.selected && state.position === 'right' ? theme.colors.primary : '#cbcbcb'}
-							width={16}
-						/>
-					</Circle>
-				</PositionControl>
-			)
-			}
+			<QuantityControl>
+				{option?.allow_suboption_quantity && state?.selected && (
+					<>
+						<Checkbox disabled={disabled || state.quantity === 0} onPress={decrement}>
+							<OIcon
+								src={theme.images.general.minus}
+								width={16}
+								color={state.quantity === 0 || disabled ? theme.colors.disabled : theme.colors.primary}
+							/>
+						</Checkbox>
+						<OText size={12} mLeft={5} mRight={5}>
+							{state.quantity}
+						</OText>
+						<Checkbox disabled={disabled || disableIncrement} onPress={increment}>
+							<OIcon
+								src={theme.images.general.plus}
+								width={16}
+								color={disableIncrement || disabled ? theme.colors.disabled : theme.colors.primary}
+							/>
+						</Checkbox>
+					</>
+				)}
+			</QuantityControl>
+			<PositionControl>
+				{option?.with_half_option && state?.selected && (
+					<>
+						<Circle disabled={disabled} onPress={() => changePosition('left')}>
+							<OIcon
+								src={theme.images.general.half_l}
+								color={state.selected && state.position === 'left' ? theme.colors.primary : '#cbcbcb'}
+								width={16}
+								style={styles.inverse}
+							/>
+						</Circle>
+						<Circle disabled={disabled} onPress={() => changePosition('whole')}>
+							<OIcon
+								src={theme.images.general.half_f}
+								color={state.selected && state.position === 'whole' ? theme.colors.primary : '#cbcbcb'}
+								width={16}
+							/>
+						</Circle>
+						<Circle disabled={disabled} onPress={() => changePosition('right')}>
+							<OIcon
+								src={theme.images.general.half_r}
+								color={state.selected && state.position === 'right' ? theme.colors.primary : '#cbcbcb'}
+								width={16}
+							/>
+						</Circle>
+					</>
+				)}
+			</PositionControl>
 			<OText size={12} lineHeight={18} color={theme.colors.textSecondary}>
 				+ {parsePrice(price)}
 			</OText>
@@ -137,7 +139,8 @@ const styles = StyleSheet.create({
 export const ProductOptionSubOption = (props: any) => {
 	const productOptionSubOptionProps = {
 		...props,
-		UIComponent: ProductOptionSubOptionUI
+		UIComponent: ProductOptionSubOptionUI,
+		isOrigin: true
 	}
 
 	return (