ordering-ui-react-native 0.14.30 → 0.14.32-release

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

@@ -436,59 +436,60 @@ const LoginFormUI = (props: LoginParams) => {
 						</>
 					)}
 
-				<View
-					style={{
-						flexDirection: 'row',
-						width: '100%',
-						justifyContent: 'space-between',
-						alignItems: 'center',
-						marginVertical: 15
-					}}>
-					<View style={loginStyle.line} />
-					<OText
-						size={14}
-						mBottom={10}
-						style={{ paddingHorizontal: 19 }}
-						color={theme.colors.disabled}>
-						{t('OR', 'or')}
-					</OText>
-					<View style={loginStyle.line} />
-				</View>
-
 				{configs && Object.keys(configs).length > 0 ? (
           (((configs?.facebook_login?.value === 'true' || configs?.facebook_login?.value === '1') && configs?.facebook_id?.value) ||
           (configs?.google_login_client_id?.value !== '' && configs?.google_login_client_id?.value !== null)) &&
           (
-						<ButtonsWrapper>
-							<SocialButtons>
-								{(configs?.facebook_login?.value === 'true' || configs?.facebook_login?.value === '1') &&
-                  configs?.facebook_id?.value && (
-									<FacebookLogin
-										notificationState={notificationState}
-										handleErrors={(err: any) => showToast(ToastType.Error, err)}
-										handleLoading={(val: boolean) => setIsFBLoading(val)}
-										handleSuccessFacebookLogin={handleSuccessFacebook}
-									/>
-								)}
-                {(configs?.google_login_client_id?.value !== '' && configs?.google_login_client_id?.value !== null) && (
-									<GoogleLogin
-										notificationState={notificationState}
-										webClientId={configs?.google_login_client_id?.value}
-										handleErrors={(err: any) => showToast(ToastType.Error, err)}
-										handleLoading={(val: boolean) => setIsFBLoading(val)}
-										handleSuccessGoogleLogin={handleSuccessFacebook}
-									/>
-								)}
-                {(configs?.apple_login_client_id?.value !== '' && configs?.google_login_client_id?.value !== null) && (
-									<AppleLogin
-										notificationState={notificationState}
-										handleErrors={(err: any) => showToast(ToastType.Error, err)}
-										handleLoading={(val: boolean) => setIsFBLoading(val)}
-										handleSuccessAppleLogin={handleSuccessFacebook}
-									/>
-								)}
-							</SocialButtons>
-						</ButtonsWrapper>
+            <>
+            	<View
+                style={{
+                  flexDirection: 'row',
+                  width: '100%',
+                  justifyContent: 'space-between',
+                  alignItems: 'center',
+                  marginVertical: 15
+                }}>
+                <View style={loginStyle.line} />
+                <OText
+                  size={14}
+                  mBottom={10}
+                  style={{ paddingHorizontal: 19 }}
+                  color={theme.colors.disabled}>
+                  {t('OR', 'or')}
+                </OText>
+                <View style={loginStyle.line} />
+              </View>
+              <ButtonsWrapper>
+                <SocialButtons>
+                  {(configs?.facebook_login?.value === 'true' || configs?.facebook_login?.value === '1') &&
+                    configs?.facebook_id?.value && (
+                    <FacebookLogin
+                      notificationState={notificationState}
+                      handleErrors={(err: any) => showToast(ToastType.Error, err)}
+                      handleLoading={(val: boolean) => setIsFBLoading(val)}
+                      handleSuccessFacebookLogin={handleSuccessFacebook}
+                    />
+                  )}
+                  {(configs?.google_login_client_id?.value !== '' && configs?.google_login_client_id?.value !== null) && (
+                    <GoogleLogin
+                      notificationState={notificationState}
+                      webClientId={configs?.google_login_client_id?.value}
+                      handleErrors={(err: any) => showToast(ToastType.Error, err)}
+                      handleLoading={(val: boolean) => setIsFBLoading(val)}
+                      handleSuccessGoogleLogin={handleSuccessFacebook}
+                    />
+                  )}
+                  {(configs?.apple_login_client_id?.value !== '' && configs?.google_login_client_id?.value !== null) && (
+                    <AppleLogin
+                      notificationState={notificationState}
+                      handleErrors={(err: any) => showToast(ToastType.Error, err)}
+                      handleLoading={(val: boolean) => setIsFBLoading(val)}
+                      handleSuccessAppleLogin={handleSuccessFacebook}
+                    />
+                  )}
+                </SocialButtons>
+              </ButtonsWrapper>
+            </>
 					)
 				) : (
 					<SkeletonWrapper>

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

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react'
-import { useLanguage, useOrder, ToastType, useToast, OrderList, OrderDetails as OrderDetailsConTableoller } from 'ordering-components/native'
+import { useLanguage, useOrder, ToastType, useToast, OrderList, OrderDetails as OrderDetailsConTableoller, useBusiness } from 'ordering-components/native'
 import { useTheme } from 'styled-components/native';
 import { useFocusEffect } from '@react-navigation/native'
 import { OText, OModal } from '../shared'
@@ -214,6 +214,7 @@ const OrderMessageUI = (props: any) => {
 }
 
 export const OrderListing = (props: OrdersOptionParams) => {
+  const [businessState] = useBusiness();
 	const OrderListingProps = {
 		...props,
 		UIComponent: OrdersOptionUI,
@@ -224,6 +225,7 @@ export const OrderListing = (props: OrdersOptionParams) => {
 			pageSize: 10,
 			controlType: 'infinity'
 		},
+    businessId: businessState?.business?.id,
 		profileMessages: true,
 		orderBy: 'last_direct_message_at',
 		orderDirection: 'asc'
@@ -287,6 +289,7 @@ export const MessageListing = (props: MessageListingParams) => {
 				setSelectedOrderId={setSelectedOrderId}
 				setOrderList={setOrderListStatus}
 				setOpenMessges={setOpenMessges}
+        franchiseId={props.franchiseId}
 			/>
 			{openMessages && seletedOrder && (
 				<OModal
@@ -304,4 +307,3 @@ export const MessageListing = (props: MessageListingParams) => {
 		</MessageListingWrapper>
 	)
 }
-

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

@@ -611,7 +611,9 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                   <OText size={16} style={{ textAlign: 'left' }} color={theme.colors.textNormal}>
                     {t('DELIVERY_PREFERENCE', 'Delivery Preference')}
                   </OText>
-                  <OText size={12} style={{ textAlign: 'left' }} color={theme.colors.textNormal}>{order?.delivery_option?.name ?? t('EITHER_WAY', 'Either way')}</OText>
+                  <OText size={12} style={{ textAlign: 'left' }} color={theme.colors.textNormal}>
+                    {order?.delivery_option?.name ? t(order?.delivery_option?.name.toUpperCase().replace(/\s/g, '_')) : t('EITHER_WAY', 'Either way')}
+                  </OText>
                 </View>
               )}
               {order?.comment && (

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

@@ -20,7 +20,6 @@ import {
 import { ProductItemAccordion } from '../ProductItemAccordion';
 import { CouponControl } from '../CouponControl';
 import { OInput, OModal, OText } from '../shared';
-import { ProductForm } from '../ProductForm';
 import { verifyDecimals } from '../../utils';
 import AntIcon from 'react-native-vector-icons/AntDesign'
 import { TaxInformation } from '../TaxInformation';
@@ -35,7 +34,8 @@ const OrderSummaryUI = (props: any) => {
     isCartPending,
     isFromCheckout,
     commentState,
-    handleChangeComment
+    handleChangeComment,
+    onNavigationRedirect
   } = props;
 
   const theme = useTheme()
@@ -44,8 +44,6 @@ const OrderSummaryUI = (props: any) => {
   const [orderState] = useOrder();
   const [{ parsePrice, parseNumber }] = useUtils();
   const [validationFields] = useValidationFields();
-  const [openProduct, setModalIsOpen] = useState(false)
-  const [curProduct, setCurProduct] = useState<any>(null)
   const [openTaxModal, setOpenTaxModal] = useState<any>({ open: false, data: null })
 
   const isCouponEnabled = validationFields?.fields?.checkout?.coupon?.enabled;
@@ -55,14 +53,15 @@ const OrderSummaryUI = (props: any) => {
   }
 
   const handleEditProduct = (product: any) => {
-    setCurProduct(product)
-    setModalIsOpen(true)
-  }
-
-  const handlerProductAction = (product: any) => {
-    if (Object.keys(product).length) {
-      setModalIsOpen(false)
-    }
+    onNavigationRedirect('ProductDetails', {
+      isCartProduct: true,
+      productCart: product,
+      businessSlug: cart?.business?.slug,
+      businessId: cart?.business_id,
+      categoryId: product?.category_id,
+      productId: product?.id,
+      isFromCheckout: isFromCheckout,
+		})
   }
 
   const getIncludedTaxes = () => {
@@ -242,24 +241,6 @@ const OrderSummaryUI = (props: any) => {
               )}
             </OSBill>
           )}
-          <OModal
-            open={openProduct}
-            entireModal
-            customClose
-            onClose={() => setModalIsOpen(false)}
-          >
-            <ProductForm
-              isCartProduct
-              productCart={curProduct}
-              businessSlug={cart?.business?.slug}
-              businessId={cart?.business_id}
-              categoryId={curProduct?.category_id}
-              productId={curProduct?.id}
-              onSave={handlerProductAction}
-              onClose={() => setModalIsOpen(false)}
-              isFromCheckout={isFromCheckout}
-            />
-          </OModal>
           <OModal
             open={openTaxModal.open}
             onClose={() => setOpenTaxModal({ open: false, data: null })}

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

@@ -7,6 +7,7 @@ import {
   PaymentOptionWallet as PaymentOptionWalletController,
   useLanguage,
   useUtils,
+  useOrder
 } from 'ordering-components/native'
 
 import {
@@ -18,7 +19,7 @@ import { OText } from '../shared'
 
 const PaymentOptionWalletUI = (props: any) => {
   const {
-    cart,
+    businessId,
     walletsState,
     selectWallet,
     deletetWalletSelected
@@ -26,8 +27,11 @@ const PaymentOptionWalletUI = (props: any) => {
 
   const theme = useTheme()
   const [, t] = useLanguage()
+  const [{ carts }] = useOrder()
   const [{ parsePrice }] = useUtils()
 
+  const cart = carts?.[`businessId:${businessId}`] ?? {}
+
   const styles = StyleSheet.create({
     checkBoxStyle: {
       width: 25,
@@ -65,10 +69,10 @@ const PaymentOptionWalletUI = (props: any) => {
   };
 
   useEffect(() => {
-    if (!walletsState.loading) {
+    if (!walletsState.loading && walletsState.result?.length) {
       setCheckedState(
-        walletsState.result.map((wallet: any) => {
-          return !!cart?.wallets?.find((w: any) => w.id === wallet.id)
+        walletsState.result?.map((wallet: any) => {
+          return !!cart?.payment_events?.find((w: any) => w.wallet_id === wallet.id)
         })
       )
     }
@@ -101,7 +105,7 @@ const PaymentOptionWalletUI = (props: any) => {
                   onTintColor={theme.colors.primary}
                   style={Platform.OS === 'ios' && styles.checkBoxStyle}
                 />
-                <View style={{ alignItems: 'baseline' }}>
+                <View style={{ alignItems: 'baseline', marginLeft: 5 }}>
                   <View>
                     <OText
                       style={((cart?.balance === 0 && !checkedState[idx]) || wallet.balance === 0) ?{
@@ -114,7 +118,7 @@ const PaymentOptionWalletUI = (props: any) => {
               </View>
               </SectionLeft>
 
-              <View style={{maxWidth: '40%', alignItems: 'flex-end' }}>
+              <View style={{maxWidth: '35%', alignItems: 'flex-end' }}>
                 {wallet.type === 'cash' && (
                   <OText>
                     {parsePrice(wallet?.balance)}

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

@@ -17,6 +17,7 @@ export const Container = styled.View`
 `
 
 export const SectionLeft = styled.View`
+  margin-left: 20px;
   max-width: 55%;
   display: flex;
   flex-direction: row;

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

@@ -16,10 +16,9 @@ import {
 	Grayscale
 } from 'react-native-color-matrix-image-filters'
 
-import { View, TouchableOpacity, StyleSheet, Dimensions, Platform, AppRegistry, I18nManager } from 'react-native';
+import { View, TouchableOpacity, StyleSheet, Dimensions, I18nManager, SafeAreaView } from 'react-native';
 
 import {
-	ProductHeader,
 	WrapHeader,
 	TopHeader,
 	WrapContent,
@@ -33,16 +32,15 @@ import {
 	ProductActions,
 	ExtraOptionWrap,
 	WeightUnitSwitch,
-	WeightUnitItem
+	WeightUnitItem,
+	TopActions
 } from './styles';
 import { OButton, OIcon, OInput, OText } from '../shared';
 import { ScrollView } from 'react-native-gesture-handler';
 import { ProductOptionSubOption } from '../ProductOptionSubOption';
 import { NotFoundSource } from '../NotFoundSource';
 import { Placeholder, PlaceholderLine, Fade } from 'rn-placeholder';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { useState } from 'react';
-import { useWindowDimensions } from 'react-native';
 
 const windowHeight = Dimensions.get('window').height;
 const windowWidth = Dimensions.get('window').width;
@@ -63,8 +61,6 @@ export const ProductOptionsUI = (props: any) => {
 		handleChangeSuboptionState,
 		handleChangeCommentState,
 		productObject,
-		onClose,
-		isFromCheckout,
 	} = props;
 
 	const theme = useTheme();
@@ -97,7 +93,7 @@ export const ProductOptionsUI = (props: any) => {
 		},
 		btnBackArrow: {
 			borderWidth: 0,
-			backgroundColor: 'rgba(0,0,0,0.3)',
+			backgroundColor: '#FFF',
 			borderRadius: 24,
 			marginRight: 15,
 		},
@@ -135,6 +131,20 @@ export const ProductOptionsUI = (props: any) => {
 		},
 		unitItem: {
 			fontSize: 12
+		},
+		productTagWrapper: {
+			flexDirection: 'row',
+			alignItems: 'center'
+		},
+		productTagImageStyle: {
+			width: 32,
+			height: 32,
+			borderRadius: 8,
+			resizeMode: 'cover'
+		},
+		productTagNameStyle: {
+			paddingHorizontal: 6,
+			marginRight: 5
 		}
 	});
 
@@ -146,15 +156,13 @@ export const ProductOptionsUI = (props: any) => {
 	const [gallery, setGallery] = useState([])
 	const [thumbsSwiper, setThumbsSwiper] = useState(0)
 
-	const { top, bottom } = useSafeAreaInsets();
-	const { height } = useWindowDimensions();
 	const [selOpt, setSelectedOpt] = useState(0);
 	const [isHaveWeight, setIsHaveWeight] = useState(false)
 	const [qtyBy, setQtyBy] = useState({
 		weight_unit: false,
 		pieces: true
 	})
-	const [pricePerWeightUnit, setPricePerWeightUnit] = useState(null)
+	const [pricePerWeightUnit, setPricePerWeightUnit] = useState<any>(null)
 
 	const swiperRef: any = useRef(null)
 
@@ -173,10 +181,8 @@ export const ProductOptionsUI = (props: any) => {
 	};
 
 	const handleSaveProduct = () => {
-		console.log('----- click handle ------')
 		const isErrors = Object.values(errors).length > 0;
 		if (!isErrors) {
-			console.log('----- save handle ------')
 			handleSave && handleSave();
 			return;
 		}
@@ -206,7 +212,6 @@ export const ProductOptionsUI = (props: any) => {
 	}
 
 	const handleRedirectLogin = () => {
-		onClose();
 		navigation.navigate('Login');
 	};
 
@@ -284,14 +289,16 @@ export const ProductOptionsUI = (props: any) => {
 		</>
 	);
 
+	const handleGoBack = navigation?.canGoBack()
+		? () => navigation.goBack()
+		: () => navigation.navigate('Business', { store: props.businessSlug })
+
 	return (
-		<>
+		<SafeAreaView style={{ flex: 1 }}>
 			<TopHeader>
-				<TouchableOpacity
-					style={styles.headerItem}
-					onPress={onClose}>
-					<OIcon src={theme.images.general.close} width={16} />
-				</TouchableOpacity>
+				<TopActions onPress={() => handleGoBack()}>
+					<OIcon src={theme.images.general.arrow_left} width={15} />
+				</TopActions>
 			</TopHeader>
 			<ScrollView>
 				{!error && (
@@ -342,15 +349,13 @@ export const ProductOptionsUI = (props: any) => {
 												style={styles.slide1}
 												key={i}
 											>
-												<Grayscale amount={isSoldOut ? 1 : 0}>
-													<FastImage
-														style={{ height: '100%' }}
-														source={{
-															uri: optimizeImage(img, 'h_258,c_limit'),
-															priority: FastImage.priority.normal,
-														}}
-													/>
-												</Grayscale>
+												<FastImage
+													style={{ height: '100%', opacity: isSoldOut ? 0.5 : 1 }}
+													source={{
+														uri: optimizeImage(img, 'h_258,c_limit'),
+														priority: FastImage.priority.normal,
+													}}
+												/>
 											</View>
 										))}
 									</Swiper>
@@ -374,19 +379,18 @@ export const ProductOptionsUI = (props: any) => {
 														opacity: index === thumbsSwiper ? 1 : 0.8
 													}}
 												>
-													<Grayscale amount={isSoldOut ? 1 : 0}>
-														<OIcon
-															url={img}
-															style={{
-																borderColor: theme.colors.lightGray,
-																borderRadius: 8,
-																minHeight: '100%'
-															}}
-															width={56}
-															height={56}
-															cover
-														/>
-													</Grayscale>
+													<OIcon
+														url={img}
+														style={{
+															borderColor: theme.colors.lightGray,
+															borderRadius: 8,
+															minHeight: '100%',
+															opacity: isSoldOut ? 0.5 : 1
+														}}
+														width={56}
+														height={56}
+														cover
+													/>
 												</View>
 											</TouchableOpacity>
 
@@ -418,23 +422,12 @@ export const ProductOptionsUI = (props: any) => {
 												style={{ flex: 1, marginBottom: 10 }}>
 												{product?.name || productCart.name}
 											</OText>
-											{product?.calories && (
+											{!!product?.calories && (
 												<OText size={16} style={{ color: '#808080' }}>{product?.calories} cal
 												</OText>
 											)}
 										</View>
-										<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 && (
-												<OText style={{    fontSize: 14,
-													color: '#808080',
-													textDecorationLine: 'line-through',
-													marginLeft: 7,
-													marginRight: 7
-												}}>{parsePrice(product?.offer_price)}</OText>
-											)}
-										</View>
-										{((product?.sku && product?.sku !== '-1' && product?.sku !== '1') || (product?.estimated_person)) && (
+										{((!!product?.sku && product?.sku !== '-1' && product?.sku !== '1') || (!!product?.estimated_person)) && (
 											<OText size={14} style={{ flex: I18nManager.isRTL ? 1 : 0 }} color={'#909BA9'} mBottom={7}>
 												{
 													((product?.sku && product?.sku !== '-1' && product?.sku !== '1') || (productCart?.sku && productCart?.sku !== '-1' && productCart?.sku !== '1'))
@@ -449,11 +442,20 @@ export const ProductOptionsUI = (props: any) => {
 											</OText>
 										)}
 										{isHaveWeight ? (
-											<OText size={16} lineHeight={24} color={theme.colors.textNormal}>{parsePrice(pricePerWeightUnit)} / {product?.weight_unit}</OText>
+											<OText size={16} lineHeight={24} color={theme.colors.primary}>{parsePrice(pricePerWeightUnit)} / {product?.weight_unit}</OText>
 										) : (
-											<OText size={16} lineHeight={24} color={theme.colors.textNormal}>
-												{productCart.price ? parsePrice(productCart.price) : ''}
-											</OText>
+											<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 !== null && product?.in_offer && (
+													<OText style={{
+														fontSize: 14,
+														color: '#808080',
+														textDecorationLine: 'line-through',
+														marginLeft: 7,
+														marginRight: 7
+													}}>{parsePrice(product?.offer_price)}</OText>
+												)}
+											</View>
 										)}
 									</>
 								)}
@@ -463,6 +465,31 @@ export const ProductOptionsUI = (props: any) => {
 									{product?.description || productCart?.description}
 								</OText>
 							</ProductDescription>
+							<ScrollView
+								horizontal
+								showsHorizontalScrollIndicator={false}
+								contentContainerStyle={{ paddingBottom: 30 }}
+							>
+								{product?.tags?.map((tag: any) => (
+									<View
+										key={tag.id}
+										style={styles.productTagWrapper}
+									>
+										{!!tag?.image ? (
+											<OIcon
+												url={optimizeImage(tag?.image, 'h_40,c_limit')}
+												style={styles.productTagImageStyle}
+											/>
+										) : (
+											<OIcon
+												src={theme.images?.dummies?.product}
+												style={styles.productTagImageStyle}
+											/>
+										)}
+										<OText color={theme.colors.textSecondary} size={12} style={styles.productTagNameStyle}>{tag.name}</OText>
+									</View>
+								))}
+							</ScrollView>
 							{loading && !product ? (
 								<>
 									{[...Array(2)].map((item, i) => (
@@ -731,16 +758,12 @@ export const ProductOptionsUI = (props: any) => {
 						</WrapContent>
 					</View>
 				)}
-				{error && error.length > 0 && (
+				{!!error && error.length > 0 && (
 					<NotFoundSource content={error[0]?.message || error[0]} />
 				)}
 			</ScrollView>
 			{!loading && !error && product && (
-				<ProductActions
-					style={{
-						paddingBottom: Platform.OS === 'ios' ? bottom + 30 : bottom + 80
-					}}
-				>
+				<ProductActions>
 					<OText size={16} lineHeight={24} weight={'600'}>
 						{productCart.total ? parsePrice(productCart?.total) : ''}
 					</OText>
@@ -762,7 +785,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}
@@ -786,36 +809,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
@@ -884,7 +909,7 @@ export const ProductOptionsUI = (props: any) => {
 					</View>
 				</ProductActions>
 			)}
-		</>
+		</SafeAreaView>
 	);
 };