ordering-ui-react-native 0.14.44 → 0.14.47

package/package.json

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

package/src/components/ProductForm/index.tsx

@@ -138,7 +138,7 @@ export const ProductOptionsUI = (props: any) => {
                       </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 && (
+                        {product?.offer_price !== null && product?.in_offer && (
                           <OText style={styles.regularPriceStyle}>{parsePrice(product?.offer_price)}</OText>
                         )}
                       </View>

package/src/components/SingleProductCard/index.tsx

@@ -86,7 +86,7 @@ export const SingleProductCard = (props: SingleProductCardParams) => {
         <OText size={12} numberOfLines={2} ellipsizeMode='tail' style={styles.textStyle}>{product?.description}</OText>
         <PricesContainer>
           <OText color={theme.colors.primary}>{parsePrice(product?.price)}</OText>
-          {!!product?.offer_price && (
+          {product?.offer_price !== null && product?.in_offer && (
             <OText style={styles.regularPriceStyle}>{parsePrice(product?.offer_price)}</OText>
           )}
         </PricesContainer>

package/themes/kiosk/src/components/Cart/index.tsx

@@ -21,10 +21,10 @@ import { Cart as TypeCart } from '../../types';
 import CartItem from '../CartItem';
 import NavBar from '../NavBar';
 import { CouponControl } from '../CouponControl';
-import { LANDSCAPE, PORTRAIT, useDeviceOrientation} from "../../../../../src/hooks/DeviceOrientation";
+import { LANDSCAPE, PORTRAIT, useDeviceOrientation } from "../../../../../src/hooks/DeviceOrientation";
 import { useCartBottomSheet } from '../../providers/CartBottomSheetProvider';
 import { Container } from '../../../../../src/layouts/Container';
-
+import AntDesignIcon from 'react-native-vector-icons/AntDesign'
 const CartUI = (props: any) => {
   const {
     cart,
@@ -35,7 +35,7 @@ const CartUI = (props: any) => {
     removeProduct,
     setIsCartsLoading,
     navigation,
-  } : CartUIProps = props
+  }: CartUIProps = props
 
   const theme = useTheme()
   const [, t] = useLanguage()
@@ -83,8 +83,8 @@ const CartUI = (props: any) => {
 
   const handleChangeOrderType = () => {
     navigation.push('DeliveryType', {
-      callback : () => {navigation.pop(1)},
-      goBack: () => {navigation.pop(1)},
+      callback: () => { navigation.pop(1) },
+      goBack: () => { navigation.pop(1) },
     });
   }
 
@@ -97,7 +97,7 @@ const CartUI = (props: any) => {
           title={t('CONFIRM_YOUR_ORDER', 'Confirm your order')}
           onActionLeft={goToBack}
           style={{ height: orientationState?.dimensions?.height * 0.08 }}
-          btnStyle={{paddingLeft: 0}}
+          btnStyle={{ paddingLeft: 0 }}
           rightComponent={(
             <OButton
               text={t('CANCEL_ORDER', 'Cancel order')}
@@ -183,6 +183,7 @@ const CartUI = (props: any) => {
                 </OText>
               </OSTable>
               {cart?.discount > 0 && cart?.total >= 0 && orientationState?.orientation == PORTRAIT && (
+
                 <OSTable
                   style={{
                     backgroundColor: theme.colors.success,
@@ -197,10 +198,7 @@ const CartUI = (props: any) => {
                       flexDirection: 'row',
                     }}
                   >
-                    <OIcon
-                      src={theme.images.general.check_decagram}
-                    />
-
+                    <AntDesignIcon name='checkcircle' size={24} color='#00D27A' />
                     {cart?.discount_type === 1 ? (
                       <OText
                         mLeft={15}
@@ -219,8 +217,6 @@ const CartUI = (props: any) => {
                       </OText>
                     )}
                   </View>
-
-
                   <OText
                     size={16}
                     color={theme.colors.green}
@@ -252,9 +248,9 @@ const CartUI = (props: any) => {
                     {cart?.driver_tip_rate > 0 &&
                       parseInt(configs?.driver_tip_type?.value, 10) === 2 &&
                       !!!parseInt(configs?.driver_tip_use_custom?.value, 10) &&
-                    (
-                      `(${parseNumber(cart?.driver_tip_rate)}%)`
-                    )}
+                      (
+                        `(${parseNumber(cart?.driver_tip_rate)}%)`
+                      )}
                   </OText>
                   <OText>{parsePrice(cart?.driver_tip)}</OText>
                 </OSTable>
@@ -294,7 +290,7 @@ const CartUI = (props: any) => {
       <>
         <FloatingLayout isIos={Platform.OS === 'ios'}>
           <CheckoutAction>
-            <View style={{display: 'flex', flexDirection: 'row'}}>
+            <View style={{ display: 'flex', flexDirection: 'row' }}>
               {cart?.discount > 0 && cart?.total >= 0 && orientationState?.orientation == LANDSCAPE && (
                 <OSTable
                   style={{
@@ -311,10 +307,7 @@ const CartUI = (props: any) => {
                       flexDirection: 'row',
                     }}
                   >
-                    <OIcon
-                      src={theme.images.general.check_decagram}
-                    />
-
+                    <AntDesignIcon name='checkcircle' size={24} color='#00D27A' />
                     {cart?.discount_type === 1 ? (
                       <OText
                         mLeft={15}
@@ -369,7 +362,7 @@ const CartUI = (props: any) => {
                   imgRightSrc={null}
                   textStyle={{ color: 'white', textAlign: 'center', flex: 1 }}
                   onClick={() => { navigation?.navigate('CustomerName', { cartUuid: cart?.uuid }) }}
-                  style={{width: '100%', marginTop: 4}}
+                  style={{ width: '100%', marginTop: 4 }}
                 />
               </View>
             </View>

package/themes/kiosk/src/components/CartItem/index.tsx

@@ -16,6 +16,7 @@ import { Product } from '../../types';
 import QuantityControl from '../QuantityControl';
 import { LANDSCAPE, useDeviceOrientation } from '../../../../../src/hooks/DeviceOrientation';
 import { useTheme } from 'styled-components/native';
+import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome'
 
 const CartItem = (props: CartItemProps) => {
   const theme = useTheme()
@@ -97,7 +98,6 @@ const CartItem = (props: CartItemProps) => {
                 <OButton
                   bgColor="transparent"
                   borderColor="transparent"
-                  imgLeftSrc={theme.images.general.edit}
                   text={t('EDIT', 'Edit')}
                   style={{ justifyContent: 'flex-start', paddingLeft: 0, maxWidth: 80 }}
                   textStyle={{
@@ -105,16 +105,18 @@ const CartItem = (props: CartItemProps) => {
                     marginLeft: 6,
                   }}
                   onClick={() => { onEditProduct ? onEditProduct(product) : null }}
+                  iconProps={{ name: 'edit' }}
+                  IconCustom={() => <FontAwesomeIcon name='edit' size={24} color={theme.colors.primary} />}
                 />
                 <OIconButton
                   bgColor="transparent"
                   borderColor="transparent"
-                  RenderIcon={isProductIngredients && (() => 
-                      <EvilIcons
-                        name={isActive ? 'chevron-up': 'chevron-down'}
-                        size={40}
-                        color={theme.colors.primary}
-                      />
+                  RenderIcon={isProductIngredients && (() =>
+                    <EvilIcons
+                      name={isActive ? 'chevron-up' : 'chevron-down'}
+                      size={40}
+                      color={theme.colors.primary}
+                    />
                   )}
                   style={{ justifyContent: 'flex-start', right: 40 }}
                   onClick={() => (!product?.valid_menu && isCartProduct)

package/themes/kiosk/src/components/CustomerName/index.tsx

@@ -72,12 +72,13 @@ const CustomerName = (props: Props): React.ReactElement => {
       <OButton
         text={t('SKIP', 'Skip')}
         onClick={onProceedToPay}
-        textStyle={{color: theme.colors.primaryContrast, fontSize: 20}}
+        textStyle={{color: theme.colors.primary, fontSize: 20}}
         parentStyle={{
           height: orientationState?.orientation === PORTRAIT
             ? 50 : 100
         }}
         style={{
+          backgroundColor: theme.colors.white,
           width: orientationState?.orientation === PORTRAIT
             ? orientationState?.dimensions.width - 40
             : orientationState?.dimensions.width * 0.1,

package/themes/kiosk/src/components/Intro/index.tsx

@@ -8,7 +8,7 @@ import OImage from '../../components/shared/OImage';
 import OButton from '../../components/shared/OButton';
 import { LanguageSelector } from '../../components/LanguageSelector';
 import { LogoutPopup } from '../../components/LogoutPopup';
-import {PORTRAIT, LANDSCAPE, useDeviceOrientation} from "../../../../../src/hooks/DeviceOrientation";
+import { PORTRAIT, LANDSCAPE, useDeviceOrientation } from "../../../../../src/hooks/DeviceOrientation";
 
 const Intro = (props: any): React.ReactElement => {
   const { navigation } = props;
@@ -87,7 +87,7 @@ const Intro = (props: any): React.ReactElement => {
               source={theme.images.general.homeHeroLandscape}
               width={orientationState?.dimensions?.width * 0.40}
               height={orientationState?.dimensions?.height * 1.1}
-              style={{bottom: 100, right: 100}}
+              style={{ bottom: 100, right: 100 }}
               resizeMode='cover'
             />
 
@@ -114,7 +114,7 @@ const Intro = (props: any): React.ReactElement => {
 
                 <OButton
                   style={styles.buttonLandStyle}
-                  text={t('TOUCH_TO_ORDER', 'Touch to order')}
+                  text={t('TOUCH_ANYWHERE_TO_ORDER', 'Touch anywhere to order')}
                   parentStyle={{
                     alignItems: 'center',
                     width: orientationState?.dimensions?.width - _offset
@@ -138,7 +138,7 @@ const Intro = (props: any): React.ReactElement => {
 
 const styles = StyleSheet.create({
   buttonLandStyle: {
-    width: 260,
+    width: 290,
     marginBottom: 16
   }
 });

package/themes/kiosk/src/components/OptionCard/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { FunctionComponent } from 'react';
 import { ImageSourcePropType, ImageStyle, TextStyle, ViewStyle, ActivityIndicator } from 'react-native';
 import { TouchableOpacity } from 'react-native-gesture-handler';
 import { useTheme } from 'styled-components/native';
@@ -28,11 +28,15 @@ const OptionCard = (props: Props) => {
               <ActivityIndicator size='large' color='#ffffff' />
             </ActivityIndicatorContainer>
           )}
-          <OIcon
-            src={props.icon}
-            style={{ marginBottom: 10, ...props?.iconStyle }}
-          />
-
+          {props.icon && (
+            <OIcon
+              src={props.icon}
+              style={{ marginBottom: 10, ...props?.iconStyle }}
+            />
+          )}
+          {props.VectorIcon && (
+            <props.VectorIcon />
+          )}
           <OText
             weight="700"
             color="white"
@@ -97,6 +101,7 @@ interface Props {
   callToActionTextStyle?: TextStyle;
   callToActionIcon?: ImageSourcePropType;
   callToActionIconStyle?: ImageStyle;
+  VectorIcon?: FunctionComponent;
 }
 
 export default OptionCard;

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

@@ -19,6 +19,8 @@ import Spinner from 'react-native-loading-spinner-overlay';
 import { LANDSCAPE, PORTRAIT, useDeviceOrientation } from '../../../../../src/hooks/DeviceOrientation';
 import GridContainer from '../../layouts/GridContainer';
 import { OModal, PaymentOptionStripe } from '../../../../../src';
+import AntIconDesign from 'react-native-vector-icons/AntDesign'
+import MaterialIcon from 'react-native-vector-icons/MaterialCommunityIcons'
 
 const PaymentOptionsUI = (props: any) => {
   const {
@@ -41,7 +43,7 @@ const PaymentOptionsUI = (props: any) => {
   } = props;
 
   const theme = useTheme();
-  const [, {showToast}] = useToast();
+  const [, { showToast }] = useToast();
   const [, t] = useLanguage();
   const [orientationState] = useDeviceOrientation();
   const [userErrors, setUserErrors] = useState<any>([]);
@@ -134,52 +136,52 @@ const PaymentOptionsUI = (props: any) => {
     CASH_ID:
       cashIndex !== -1
         ? {
-            style: cardStyle,
-            title: t('CASH', 'Cash'),
-            description: t(
-              'GO_FOR_YOR_RECEIPT_AND_GO_TO_THE_FRONT_COUNTER',
-              'Pay with cash in the front counter',
-            ),
-            bgImage: theme.images.general.cash,
-            icon: theme.images.general.shoppingCart,
-            callToActionText: t('LETS_GO', 'LETS_GO'),
-            onClick: () =>
-              onSelectPaymethod(supportedMethods[cashIndex], false),
-            ...supportedMethods[cashIndex],
-          }
+          style: cardStyle,
+          title: t('CASH', 'Cash'),
+          description: t(
+            'GO_FOR_YOR_RECEIPT_AND_GO_TO_THE_FRONT_COUNTER',
+            'Pay with cash in the front counter',
+          ),
+          bgImage: theme.images.general.cash,
+          callToActionText: t('LETS_GO', 'LETS_GO'),
+          VectorIcon: () => <AntIconDesign name='shoppingcart' size={28} color='white' style={{ marginBottom: 10 }} />,
+          onClick: () =>
+            onSelectPaymethod(supportedMethods[cashIndex], false),
+          ...supportedMethods[cashIndex],
+        }
         : null,
 
     CARD_ON_DELIVERY_ID:
       cardOnDeliveryIndex !== -1
         ? {
-            style: cardStyle,
-            title: t('CARD', supportedMethods[cardOnDeliveryIndex]?.name),
-            description: t(
-              'WE_ACCEPT_EVERY_DEBIT_OR_CREDIT_CARD',
-              'We accept every debit or credit card',
-            ),
-            bgImage: theme.images.general.carddelivery,
-            icon: theme.images.general.pushPin,
-            callToActionText: t("LETS_GO", "Let's go"),
-            onClick: () => onSelectPaymethod(supportedMethods[cardOnDeliveryIndex], false),
-            ...supportedMethods[cardOnDeliveryIndex],
-          }
+          style: cardStyle,
+          title: t('CARD', supportedMethods[cardOnDeliveryIndex]?.name),
+          description: t(
+            'WE_ACCEPT_EVERY_DEBIT_OR_CREDIT_CARD',
+            'We accept every debit or credit card',
+          ),
+          bgImage: theme.images.general.carddelivery,
+          callToActionText: t("LETS_GO", "Let's go"),
+          VectorIcon: () => <MaterialIcon name='pin-outline' size={28} color='white' style={{ marginBottom: 10 }} />,
+          onClick: () => onSelectPaymethod(supportedMethods[cardOnDeliveryIndex], false),
+          ...supportedMethods[cardOnDeliveryIndex],
+        }
         : null,
     STRIPE:
       stripeIndex !== -1
         ? {
-            style: cardStyle,
-            title: t('STRIPE', supportedMethods[stripeIndex]?.name),
-            description: t('STRIPE', 'Stripe'),
-            bgImage: theme.images.general.carddelivery,
-            icon: theme.images.general.pushPin,
-            callToActionText: t('INSERT_INFO', 'Test info'),
-            onClick: () => {
-              onSelectPaymethod(supportedMethods[stripeIndex], false);
-              setIsOpenModal(true)
-            },
-            ...supportedMethods[stripeIndex],
-          }
+          style: cardStyle,
+          title: t('STRIPE', supportedMethods[stripeIndex]?.name),
+          description: t('STRIPE', 'Stripe'),
+          bgImage: theme.images.general.carddelivery,
+          callToActionText: t('INSERT_INFO', 'Test info'),
+          VectorIcon: () => <MaterialIcon name='pin-outline' size={28} color='white' style={{ marginBottom: 10 }} />,
+          onClick: () => {
+            onSelectPaymethod(supportedMethods[stripeIndex], false);
+            setIsOpenModal(true)
+          },
+          ...supportedMethods[stripeIndex],
+        }
         : null,
   };
 
@@ -193,11 +195,11 @@ const PaymentOptionsUI = (props: any) => {
         <NavBar
           title={t('PAYMENT_METHODS', 'Payment methods')}
           onActionLeft={goToBack}
-          btnStyle={{paddingLeft: 0}}
+          btnStyle={{ paddingLeft: 0 }}
         />
 
         <View
-          style={{marginVertical: orientationState?.dimensions?.height * 0.03}}>
+          style={{ marginVertical: orientationState?.dimensions?.height * 0.03 }}>
           <OText size={orientationState?.dimensions?.width * 0.048}>
             {t('HOW_WOULD_YOU', 'How would you')} {'\n'}
             <OText
@@ -209,10 +211,10 @@ const PaymentOptionsUI = (props: any) => {
         </View>
 
         {supportedMethods?.length > 0 && (
-          <GridContainer style={{justifyContent: 'space-between'}}>
+          <GridContainer style={{ justifyContent: 'space-between' }}>
             {propsOfItems.CARD_ON_DELIVERY_ID && (
-              <View style={{marginBottom: orientationState?.orientation === LANDSCAPE ? 20 : 0}}>
-                <OptionCard {...propsOfItems?.CARD_ON_DELIVERY_ID} styke/>
+              <View style={{ marginBottom: orientationState?.orientation === LANDSCAPE ? 20 : 0 }}>
+                <OptionCard {...propsOfItems?.CARD_ON_DELIVERY_ID} styke />
               </View>
             )}
 
@@ -249,7 +251,7 @@ const PaymentOptionsUI = (props: any) => {
             )}
           </GridContainer>
         )}
-        <View style={{height: orientationState?.dimensions?.height * 0.05}} />
+        <View style={{ height: orientationState?.dimensions?.height * 0.05 }} />
         <OModal
           open={isOpenModal}
           onClose={() => setIsOpenModal(false)}

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

@@ -139,17 +139,20 @@ export const BusinessItemAccordion = (props: any) => {
 					)}
 				</BIActions>
 			</BIHeader>
-			{!isActive && !isClosed && !!isProducts && !checkoutButtonDisabled && (
+			{!isActive && !isClosed && !!isProducts && (
 				<PriceContainer>
 					<OText>{parsePrice(cart?.total)}</OText>
-					<OButton
-						onClick={handleClickCheckout}
-						textStyle={{ color: 'white', textAlign: 'center', flex: 1 }}
-						style={{ width: 160, flexDirection: 'row', justifyContent: 'center', borderRadius: 7.6, shadowOpacity: 0 }}
-						text={t('CHECKOUT', 'Checkout')}
-						bgColor={(cart?.subtotal < cart?.minimum || !cart?.valid_address) ? theme.colors.secundary : theme.colors.primary}
-						borderColor={theme.colors.primary}
-					/>
+					{cart?.valid_products && (
+						<OButton
+							onClick={handleClickCheckout}
+							textStyle={{ color: 'white', textAlign: 'center', flex: 1 }}
+							style={{ width: 160, flexDirection: 'row', justifyContent: 'center', borderRadius: 7.6, shadowOpacity: 0 }}
+							text={t('CHECKOUT', 'Checkout')}
+							bgColor={(cart?.subtotal < cart?.minimum || !cart?.valid_address) ? theme.colors.secundary : theme.colors.primary}
+							borderColor={theme.colors.primary}
+							isDisabled={checkoutButtonDisabled}
+						/>
+					)}
 				</PriceContainer>
 			)}
 

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

@@ -7,9 +7,10 @@ export const BIContainer = styled.View`
   opacity: 1;
   border-radius: 7.6px;
   overflow: hidden;
-
+  min-height: 120px;
   ${(props: any) => props.isClosed && css`
-	 opacity: 0.5;
+	  opacity: 0.5;
+    min-height: 60px;
   `}
 `
 

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

@@ -7,6 +7,7 @@ import {
 	ScrollView,
 	Platform,
 	TouchableOpacity,
+	RefreshControl
 } from 'react-native';
 import {
 	BusinessList as BusinessesListingController,
@@ -57,11 +58,12 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 		handleBusinessClick,
 		paginationProps,
 		handleChangeSearch,
-    businessId
+		businessId
 	} = props;
 
 	const theme = useTheme();
 	const isFocused = useIsFocused();
+	const [refreshing] = useState(false);
 
 	const styles = StyleSheet.create({
 		container: {
@@ -142,15 +144,15 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 	};
 
 	const getDistance = (lat1: any, lon1: any, lat2: any, lon2: any) => {
-    const R = 6371 // km
-    const dLat = convertToRadian(lat2 - lat1)
-    const dLon = convertToRadian(lon2 - lon1)
-    const curLat1 = convertToRadian(lat1)
-    const curLat2 = convertToRadian(lat2)
-    const a = Math.sin(dLat / 2) * Math.sin(dLat / 2) + Math.sin(dLon / 2) * Math.sin(dLon / 2) * Math.cos(curLat1) * Math.cos(curLat2)
-    const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a))
-    return R * c
-  }
+		const R = 6371 // km
+		const dLat = convertToRadian(lat2 - lat1)
+		const dLon = convertToRadian(lon2 - lon1)
+		const curLat1 = convertToRadian(lat1)
+		const curLat2 = convertToRadian(lat2)
+		const a = Math.sin(dLat / 2) * Math.sin(dLat / 2) + Math.sin(dLon / 2) * Math.sin(dLon / 2) * Math.cos(curLat1) * Math.cos(curLat2)
+		const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a))
+		return R * c
+	}
 
 	useEffect(() => {
 		if (businessesList.businesses.length > 0) {
@@ -162,6 +164,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 			setFeaturedBusinesses(ary);
 		}
 	}, [businessesList.businesses]);
+
 	// const resetInactivityTimeout = () => {
 	//   clearTimeout(timerId.current)
 	//   timerId.current = setInterval(() => {
@@ -173,21 +176,37 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 	//   resetInactivityTimeout()
 	// }, [])
 
+	const handleOnRefresh = () => {
+		const hasMore = !(
+			paginationProps.totalPages === paginationProps.currentPage
+		);
+		if (!businessesList.loading && hasMore) {
+			getBusinesses();
+		}
+	}
+
 	useEffect(() => {
 		Geolocation.getCurrentPosition((pos) => {
-      const crd = pos.coords
-      const distance = getDistance(crd.latitude, crd.longitude, orderState?.options?.address?.location?.lat, orderState?.options?.address?.location?.lng)
-      if (distance > 20) setIsFarAway(true)
+			const crd = pos.coords
+			const distance = getDistance(crd.latitude, crd.longitude, orderState?.options?.address?.location?.lat, orderState?.options?.address?.location?.lng)
+			if (distance > 20) setIsFarAway(true)
 			else setIsFarAway(false)
-    }, (err) => {
-      console.log(`ERROR(${err.code}): ${err.message}`)
-    }, {
-      enableHighAccuracy: true, timeout: 15000, maximumAge: 10000
-    })
-  }, [orderState?.options?.address?.location])
+		}, (err) => {
+			console.log(`ERROR(${err.code}): ${err.message}`)
+		}, {
+			enableHighAccuracy: true, timeout: 15000, maximumAge: 10000
+		})
+	}, [orderState?.options?.address?.location])
 
 	return (
-		<ScrollView style={styles.container} onScroll={(e) => handleScroll(e)} showsVerticalScrollIndicator={false}>
+		<ScrollView style={styles.container} onScroll={(e) => handleScroll(e)} showsVerticalScrollIndicator={false}
+			refreshControl={
+				<RefreshControl
+					refreshing={refreshing}
+					onRefresh={() => handleOnRefresh()}
+				/>
+			}
+		>
 			<HeaderWrapper
 				source={theme.images.backgrounds.business_list_header}
 				style={{ paddingTop: top + 20 }}>
@@ -257,72 +276,78 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 							/>
 						</WrapMomentOption>
 
-            {!businessId && (
-              <SearchBar
-                onSearch={handleChangeSearch}
-                searchValue={searchValue}
-                lazyLoad
-                isCancelXButtonShow={!!searchValue}
-                borderStyle={styles.borderStyle}
-                onCancel={() => handleChangeSearch('')}
-                placeholder={t('SEARCH', 'Search')}
-                height={26}
-                inputStyle={{ ...styles.searchInput, ...Platform.OS === 'ios' ? {} : { paddingBottom: 4 } }}
-              />
-            )}
+						{!businessId && (
+							<SearchBar
+								onSearch={handleChangeSearch}
+								searchValue={searchValue}
+								lazyLoad
+								isCancelXButtonShow={!!searchValue}
+								borderStyle={styles.borderStyle}
+								onCancel={() => handleChangeSearch('')}
+								placeholder={t('SEARCH', 'Search')}
+								height={26}
+								inputStyle={{ ...styles.searchInput, ...Platform.OS === 'ios' ? {} : { paddingBottom: 4 } }}
+							/>
+						)}
 
 					</View>
 				</OrderControlContainer>
 			</HeaderWrapper>
-			{isFocused && (
-				<OrderProgressWrapper>
-					<OrderProgress
-						{...props}
-					/>
-				</OrderProgressWrapper>
-			)}
-			{!businessId && !props.franchiseId && featuredBusiness && featuredBusiness.length > 0 && (
-				<FeaturedWrapper>
-					<OText size={16} style={{ marginLeft: 40 }} weight={Platform.OS === 'ios' ? '600' : 'bold'}>{t('FEATURED_BUSINESS', 'Featured business')}</OText>
-					<ScrollView
-						showsHorizontalScrollIndicator={false}
-						nestedScrollEnabled
-						horizontal contentContainerStyle={{ paddingHorizontal: 40 }}>
-						{featuredBusiness.map((bAry: any, idx) => (
-							<View key={'f-listing_' + idx}>
-								<BusinessFeaturedController
-									key={bAry[0].id}
-									business={bAry[0]}
-									handleCustomClick={handleBusinessClick}
-									orderType={orderState?.options?.type}
-								/>
-								{bAry.length > 1 && (
+			{
+				isFocused && (
+					<OrderProgressWrapper>
+						<OrderProgress
+							{...props}
+						/>
+					</OrderProgressWrapper>
+				)
+			}
+			{
+				!businessId && !props.franchiseId && featuredBusiness && featuredBusiness.length > 0 && (
+					<FeaturedWrapper>
+						<OText size={16} style={{ marginLeft: 40 }} weight={Platform.OS === 'ios' ? '600' : 'bold'}>{t('FEATURED_BUSINESS', 'Featured business')}</OText>
+						<ScrollView
+							showsHorizontalScrollIndicator={false}
+							nestedScrollEnabled
+							horizontal contentContainerStyle={{ paddingHorizontal: 40 }}>
+							{featuredBusiness.map((bAry: any, idx) => (
+								<View key={'f-listing_' + idx}>
 									<BusinessFeaturedController
-										key={bAry[1].id}
-										business={bAry[1]}
+										key={bAry[0].id}
+										business={bAry[0]}
 										handleCustomClick={handleBusinessClick}
 										orderType={orderState?.options?.type}
 									/>
-								)}
-							</View>
-						))}
-					</ScrollView>
-				</FeaturedWrapper>
-			)}
+									{bAry.length > 1 && (
+										<BusinessFeaturedController
+											key={bAry[1].id}
+											business={bAry[1]}
+											handleCustomClick={handleBusinessClick}
+											orderType={orderState?.options?.type}
+										/>
+									)}
+								</View>
+							))}
+						</ScrollView>
+					</FeaturedWrapper>
+				)
+			}
 			<View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100 }} />
-      {!businessId && !props.franchiseId && (
-        <HighestRatedBusinesses onBusinessClick={handleBusinessClick} navigation={navigation} />
-      )}
+			{
+				!businessId && !props.franchiseId && (
+					<HighestRatedBusinesses onBusinessClick={handleBusinessClick} navigation={navigation} />
+				)
+			}
 			<View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100 }} />
 			<ListWrapper>
-        {!businessId && (
-          <BusinessTypeFilter
-            images={props.images}
-            businessTypes={props.businessTypes}
-            defaultBusinessType={props.defaultBusinessType}
-            handleChangeBusinessType={handleChangeBusinessType}
-          />
-        )}
+				{!businessId && (
+					<BusinessTypeFilter
+						images={props.images}
+						businessTypes={props.businessTypes}
+						defaultBusinessType={props.defaultBusinessType}
+						handleChangeBusinessType={handleChangeBusinessType}
+					/>
+				)}
 				{!businessesList.loading && businessesList.businesses.length === 0 && (
 					<NotFoundSource
 						content={t(

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

@@ -289,16 +289,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 +349,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 +379,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,7 +446,7 @@ 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',
@@ -460,7 +460,7 @@ export const ProductOptionsUI = (props: any) => {
 									</>
 								)}
 							</ProductTitle>
-						  <ProductDescription>
+							<ProductDescription>
 								<OText color={theme.colors.textSecondary} size={12} lineHeight={18}>
 									{product?.description || productCart?.description}
 								</OText>
@@ -785,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}
@@ -809,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
@@ -907,7 +909,7 @@ export const ProductOptionsUI = (props: any) => {
 					</View>
 				</ProductActions>
 			)}
-    </SafeAreaView>
+		</SafeAreaView>
 	);
 };
 

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

@@ -7,7 +7,7 @@ import {
 } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
 import { SingleProductCardParams } from '../../types';
-import { CardContainer, CardInfo, SoldOut, QuantityContainer } from './styles';
+import { CardContainer, CardInfo, SoldOut, QuantityContainer, PricesContainer } from './styles';
 import { StyleSheet } from 'react-native';
 import { OText, OIcon } from '../shared';
 import FastImage from 'react-native-fast-image'
@@ -51,6 +51,13 @@ export const SingleProductCard = (props: SingleProductCardParams) => {
 			textAlign: 'center',
 			borderRadius: 25,
 			alignItems: 'center'
+		},
+		regularPriceStyle: {
+			fontSize: 12,
+			color: '#808080',
+			textDecorationLine: 'line-through',
+			marginLeft: 7,
+			marginRight: 7
 		}
 	});
 
@@ -97,13 +104,13 @@ export const SingleProductCard = (props: SingleProductCardParams) => {
 				(isSoldOut || maxProductQuantity <= 0) && styles.soldOutBackgroundStyle,
 			]}
 			onPress={() => onProductClick?.(product)}>
-				{productAddedToCartLength > 0 && (
-					<QuantityContainer style={[styles.quantityContainer, {
-						transform: [{ translateX: 10 }, { translateY: -10 }],
-					}]}>
-						<OText size={12} color={theme.colors.white}>{productAddedToCartLength.toString()}</OText>
-					</QuantityContainer>
-				)}
+			{productAddedToCartLength > 0 && (
+				<QuantityContainer style={[styles.quantityContainer, {
+					transform: [{ translateX: 10 }, { translateY: -10 }],
+				}]}>
+					<OText size={12} color={theme.colors.white}>{productAddedToCartLength.toString()}</OText>
+				</QuantityContainer>
+			)}
 			<CardInfo>
 				<OText
 					size={12}
@@ -113,9 +120,12 @@ export const SingleProductCard = (props: SingleProductCardParams) => {
 					style={styles.line18}>
 					{product?.name}
 				</OText>
-				<OText size={12} weight={'400'} style={styles.line18} color={theme.colors.textNormal}>
-					{parsePrice(product?.price)}
-				</OText>
+				<PricesContainer>
+					<OText color={theme.colors.primary}>{parsePrice(product?.price)}</OText>
+					{product?.offer_price !== null && product?.in_offer && (
+						<OText style={styles.regularPriceStyle}>{parsePrice(product?.offer_price)}</OText>
+					)}
+				</PricesContainer>
 				<OText
 					size={10}
 					numberOfLines={2}

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

@@ -27,3 +27,7 @@ export const QuantityContainer = styled.View`
   align-items: center;
   justify-content: center;
 `
+export const PricesContainer = styled.View`
+  flex-direction: row;
+  align-items: center;
+`