npm - ordering-ui-react-native - Versions diffs - 0.12.50 → 0.12.54 - Mend

ordering-ui-react-native 0.12.50 → 0.12.54

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (14) hide show

package/package.json CHANGED Viewed

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

package/themes/business/src/components/GoogleMap/index.tsx CHANGED Viewed

@@ -1,15 +1,17 @@
 import React, { useState, useEffect, useRef } from 'react';
 import { Dimensions, StyleSheet, View, SafeAreaView } from 'react-native';
-import MapView, { PROVIDER_GOOGLE, Marker, Region } from 'react-native-maps';
+import MapView, { PROVIDER_GOOGLE, Marker, Region, Callout } from 'react-native-maps';
 import Geocoder from 'react-native-geocoding';
 import { useLanguage, useConfig, useUtils } from 'ordering-components/native';
 import { GoogleMapsParams } from '../../types';
 import Alert from '../../providers/AlertProvider';
-import { OIconButton, OIcon } from '../shared';
+import { OIconButton, OIcon, OText, OButton } from '../shared';
 import { FloatingButton } from '../FloatingButton';
 import Icon from 'react-native-vector-icons/FontAwesome5';
 import { useTheme } from 'styled-components/native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useLocation } from '../../hooks/useLocation';
+import { showLocation } from 'react-native-map-link';
 export const GoogleMap = (props: GoogleMapsParams) => {
   const {
@@ -30,6 +32,15 @@ export const GoogleMap = (props: GoogleMapsParams) => {
     navigation,
   } = props;
+  const {
+    hasLocation,
+    initialPosition,
+    followUserLocation,
+    getCurrentLocation,
+    userLocation,
+    stopFollowUserLocation,
+  } = useLocation();
   const { top } = useSafeAreaInsets();
   const theme = useTheme();
   const [, t] = useLanguage();
@@ -64,7 +75,7 @@ export const GoogleMap = (props: GoogleMapsParams) => {
     ERROR_MAX_LIMIT_LOCATION_TO: 'Sorry, You can only set the position to',
   };
-  const MARKERS =
+  let MARKERS =
     locations &&
     locations.map((location: { lat: number; lng: number; level: number }) => {
       return location.level === 4 && driverLocation?.lat
@@ -221,6 +232,18 @@ export const GoogleMap = (props: GoogleMapsParams) => {
       fitAllMarkers();
     }
   }, [isMapReady]);
+  useEffect(() => {
+    if (!locations) return
+    MARKERS = locations.map((location: { lat: number; lng: number; level: number }) => {
+      return location.level === 4 && driverLocation?.lat
+        ? {
+            latitude: driverLocation?.lat,
+            longitude: driverLocation?.lng,
+          }
+        : { latitude: location.lat, longitude: location.lng };
+    })
+    fitAllMarkers();
+  }, [driverLocation])
   const styles = StyleSheet.create({
     map: {
@@ -279,7 +302,13 @@ export const GoogleMap = (props: GoogleMapsParams) => {
                     i: number,
                   ) => (
                     <React.Fragment key={i}>
-                      <Marker coordinate={location} title={locations[i]?.title}>
+                      <Marker
+                        coordinate={location}
+                        onPress={() => {
+                          mapRef.current?.animateCamera({
+                          center: { latitude: location.latitude, longitude:location.longitude },
+                        })}}
+                      >
                         <Icon
                           name="map-marker"
                           size={50}
@@ -296,6 +325,51 @@ export const GoogleMap = (props: GoogleMapsParams) => {
                             height={25}
                           />
                         </View>
+                        <Callout
+                          onPress={() => {
+                            showLocation({
+                                      latitude: location.latitude,
+                                      longitude: location.longitude,
+                                      sourceLatitude: userLocation.latitude,
+                                      sourceLongitude: userLocation.longitude,
+                                      naverCallerName: 'com.businessapp',
+                                      dialogTitle: t('SHOW_IN_OTHER_MAPS', 'Show in other maps'),
+                                      dialogMessage: t('WHAT_APP_WOULD_YOU_USE', 'What app would you like to use?'),
+                                      cancelText: t('CANCEL', 'Cancel'),
+                            })
+                          }}
+                        >
+                          <View style={{flex: 1,width: 250, paddingRight: 10, paddingLeft: 10, justifyContent:'space-between' }}>
+                              <View style={{flex: 1, marginBottom: 20}}>
+                                <OText size={16} weight={'bold'} style={{paddingTop: 10, marginBottom: 10}}>{locations[i]?.title}</OText>
+                                { locations[i]?.address && (
+                                  <>
+                                    <OText size={16} >{locations[i]?.address.addressName}</OText>
+                                    <OText size={16} >{locations[i]?.address.zipcode}</OText>
+                                  </>
+                                )}
+                              </View>
+                              <OButton
+                                text={t('GO_TO_THIS_LOCATION', 'Go to this location')}
+                                imgRightSrc={null}
+                                textStyle={{
+                                  color: theme.colors.white,
+                                  fontFamily: 'Poppins',
+                                  fontStyle: 'normal',
+                                  fontWeight: 'normal',
+                                  fontSize: 16
+                                }}
+                                style={{
+                                  alignContent:'center',
+                                  borderRadius: 10,
+                                  height: 35,
+                                  bottom:10
+                                }}
+                                bgColor={theme.colors.primary}
+                                borderColor={theme.colors.primary}
+                              />
+                          </View>
+                        </Callout>
                       </Marker>
                     </React.Fragment>
                   ),

package/themes/business/src/components/OrderDetails/Business.tsx CHANGED Viewed

@@ -319,10 +319,10 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
     }
   }, [messagesReadList]);
-  const locations = [
+  let locations = [
     {
       ...order?.driver?.location,
-      title: t('DRIVER', 'Driver'),
+      title: order?.driver?.name ?? t('DRIVER', 'Driver'),
       icon:
         order?.driver?.photo ||
         'https://res.cloudinary.com/demo/image/fetch/c_thumb,g_face,r_max/https://www.freeiconspng.com/thumbs/driver-icon/driver-icon-14.png',
@@ -331,12 +331,20 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
     {
       ...order?.business?.location,
       title: order?.business?.name,
+      address: {
+        addressName: order?.business?.address,
+        zipcode: order?.business?.zipcode
+      },
       icon: order?.business?.logo || theme.images.dummies.businessLogo,
       level: 2,
     },
     {
       ...order?.customer?.location,
-      title: t('CUSTOMER', 'Customer'),
+      title: order?.customer?.name ??  t('CUSTOMER', 'Customer'),
+      address: {
+        addressName: order?.customer?.address,
+        zipcode: order?.customer?.zipcode
+      },
       icon:
         order?.customer?.photo ||
         'https://res.cloudinary.com/demo/image/upload/c_thumb,g_face,r_max/d_avatar.png/non_existing_id.png',

package/themes/business/src/components/OrderDetails/Delivery.tsx CHANGED Viewed

@@ -1,6 +1,6 @@
 //React & React Native
 import React, { useState, useEffect } from 'react';
-import { StyleSheet, View, Platform } from 'react-native';
+import { StyleSheet, View, Platform, ScrollView } from 'react-native';
 // Thirds
 import { Placeholder, PlaceholderLine, Fade } from 'rn-placeholder';
@@ -50,9 +50,9 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
     setDriverUpdateLocation,
     orderTitle,
     appTitle,
-    handleClickLogisticOrder
-  } = props;
+    handleClickLogisticOrder,
+  } = props;
   const [, { showToast }] = useToast();
   const { order } = props.order
   const theme = useTheme();
@@ -141,6 +141,13 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
     handleArrowBack()
   }
+  const handleAcceptLogisticOrder = (order : any) => {
+    handleClickLogisticOrder?.(1, order?.logistic_order_id)
+    if(order?.order_group){
+      handleArrowBack()
+    }
+  }
   const locations = [
     {
       ...order?.business?.location,
@@ -243,107 +250,54 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
     );
   }
-  const OrderDetailsInformation = (_order: any, isOrderGroup: boolean) => {
-    const { order } = _order
+  const OrderDetailsInformation = (props : {order: any, isOrderGroup?: boolean, lastOrder?: boolean}) => {
+    const {
+      order,
+      isOrderGroup,
+      lastOrder,
+    } = props
     return (
       <>
-        <OrderDetailsContainer
-          keyboardShouldPersistTaps="handled"
-          showsVerticalScrollIndicator={false}
-        >
-          <>
-            <OrderContentComponent
-              order={order}
-              logisticOrderStatus={logisticOrderStatus}
-              isOrderGroup={isOrderGroup}
+        <OrderContentComponent
+          order={order}
+          logisticOrderStatus={logisticOrderStatus}
+          isOrderGroup={isOrderGroup}
+          lastOrder={lastOrder}
+        />
+        {(order?.status === 8 || order?.status === 18) && order?.delivery_type === 1 && (
+          <Pickup>
+            <OButton
+              style={styles.btnPickUp}
+              textStyle={{ color: theme.colors.primary }}
+              text={t('ARRIVED_TO_BUSINESS', 'Arrived to bussiness')}
+              onClick={() =>
+                handleChangeOrderStatus && handleChangeOrderStatus(3)
+              }
+              imgLeftStyle={{ tintColor: theme.colors.backArrow }}
             />
-            {(order?.status === 8 || order?.status === 18) && order?.delivery_type === 1 && (
-              <Pickup>
-                <OButton
-                  style={styles.btnPickUp}
-                  textStyle={{ color: theme.colors.primary }}
-                  text={t('ARRIVED_TO_BUSINESS', 'Arrived to bussiness')}
-                  onClick={() =>
-                    handleChangeOrderStatus && handleChangeOrderStatus(3)
-                  }
-                  imgLeftStyle={{ tintColor: theme.colors.backArrow }}
-                />
-              </Pickup>
-            )}
-            {order?.status === 3 && order?.delivery_type === 1 && (
-              <View style={{ paddingVertical: 20, marginBottom: 20 }}>
-                <OButton
-                  style={styles.btnPickUp}
-                  textStyle={{ color: theme.colors.white }}
-                  text={t('ORDER_NOT_READY', 'Order not ready')}
-                  onClick={() =>
-                    handleViewActionOrder && handleViewActionOrder('notReady')
-                  }
-                  imgLeftStyle={{ tintColor: theme.colors.backArrow }}
-                  bgColor={theme.colors.red}
-                />
-              </View>
-            )}
-          </>
-          <View
-            style={{
-              height:
-                order?.status === 8 && order?.delivery_type === 1 ? 50 : 35,
-            }}
-          />
-        </OrderDetailsContainer>
-        {showFloatButtonsPickUp[order?.status] && (
-          <FloatingButton
-            disabled={props.order?.loading}
-            btnText={t('PICKUP_FAILED', 'Pickup failed')}
-            isSecondaryBtn={false}
-            secondButtonClick={() =>
-              handleChangeOrderStatus && handleChangeOrderStatus(9)
-            }
-            firstButtonClick={() =>
-              handleViewActionOrder && handleViewActionOrder('pickupFailed')
-            }
-            secondBtnText={t('PICKUP_COMPLETE', 'Pickup complete')}
-            secondButton={true}
-            firstColorCustom={theme.colors.red}
-            secondColorCustom={theme.colors.green}
-            widthButton={'45%'}
-          />
+          </Pickup>
         )}
-        {(order?.status === 9 || order?.status === 19) && (
-          <>
-            <FloatingButton
-              disabled={props.order?.loading}
-              btnText={t('DELIVERY_FAILED', 'Delivery Failed')}
-              isSecondaryBtn={false}
-              secondButtonClick={() =>
-                handleChangeOrderStatus && handleChangeOrderStatus(11)
+        {order?.status === 3 && order?.delivery_type === 1 && (
+          <View style={{ paddingVertical: 20, marginBottom: 20 }}>
+            <OButton
+              style={styles.btnPickUp}
+              textStyle={{ color: theme.colors.white }}
+              text={t('ORDER_NOT_READY', 'Order not ready')}
+              onClick={() =>
+                handleViewActionOrder && handleViewActionOrder('notReady')
               }
-              firstButtonClick={() =>
-                handleViewActionOrder && handleViewActionOrder('deliveryFailed')
-              }
-              secondBtnText={t('DELIVERY_COMPLETE', 'Delivery complete')}
-              secondButton={true}
-              firstColorCustom={theme.colors.red}
-              secondColorCustom={theme.colors.green}
-              widthButton={'45%'}
+              imgLeftStyle={{ tintColor: theme.colors.backArrow }}
+              bgColor={theme.colors.red}
             />
-          </>
-        )}
-        {showFloatButtonsAcceptOrReject[order?.status] && (
-          <FloatingButton
-            btnText={t('REJECT', 'Reject')}
-            isSecondaryBtn={false}
-            secondButtonClick={() => order?.isLogistic && logisticOrderStatus.includes(order?.status) ? handleClickLogisticOrder?.(1, order?.logistic_order_id) : handleViewActionOrder('accept')}
-            firstButtonClick={() => order?.isLogistic && logisticOrderStatus.includes(order?.status) ? handleRejectLogisticOrder() : handleViewActionOrder('reject')}
-            secondBtnText={t('ACCEPT', 'Accept')}
-            secondButton={true}
-            firstColorCustom={theme.colors.red}
-            secondColorCustom={theme.colors.green}
-            widthButton={'45%'}
-          />
+          </View>
         )}
+        <View
+          style={{
+            height:
+              order?.status === 8 && order?.delivery_type === 1 ? 50 : 35,
+          }}
+        />
       </>
     )
   }
@@ -390,10 +344,66 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
         />
         {order && Object.keys(order).length > 0 && (props.order?.error?.length < 1 || !props.order?.error) && (
           <>
-            {order?.order_group && order?.order_group_id ? order?.order_group?.orders.map((order: any) => (
-              <OrderDetailsInformation order={order} />
-            )) : (
-              <OrderDetailsInformation order={order} />
+            <OrderDetailsContainer
+              keyboardShouldPersistTaps="handled"
+              showsVerticalScrollIndicator={false}
+            >
+              {order?.order_group && order?.order_group_id && order?.isLogistic ? order?.order_group?.orders.map((order: any, i: number, hash: any) => (
+                <OrderDetailsInformation key={order?.id} order={order} isOrderGroup lastOrder={hash?.length === i + 1} />
+              )) : (
+                <OrderDetailsInformation order={order} />
+              )}
+            </OrderDetailsContainer>
+            {showFloatButtonsPickUp[order?.status] && (
+              <FloatingButton
+                disabled={props.order?.loading}
+                btnText={t('PICKUP_FAILED', 'Pickup failed')}
+                isSecondaryBtn={false}
+                secondButtonClick={() =>
+                  handleChangeOrderStatus && handleChangeOrderStatus(9)
+                }
+                firstButtonClick={() =>
+                  handleViewActionOrder && handleViewActionOrder('pickupFailed')
+                }
+                secondBtnText={t('PICKUP_COMPLETE', 'Pickup complete')}
+                secondButton={true}
+                firstColorCustom={theme.colors.red}
+                secondColorCustom={theme.colors.green}
+                widthButton={'45%'}
+              />
+            )}
+            {(order?.status === 9 || order?.status === 19) && (
+              <>
+                <FloatingButton
+                  disabled={props.order?.loading}
+                  btnText={t('DELIVERY_FAILED', 'Delivery Failed')}
+                  isSecondaryBtn={false}
+                  secondButtonClick={() =>
+                    handleChangeOrderStatus && handleChangeOrderStatus(11)
+                  }
+                  firstButtonClick={() =>
+                    handleViewActionOrder && handleViewActionOrder('deliveryFailed')
+                  }
+                  secondBtnText={t('DELIVERY_COMPLETE', 'Delivery complete')}
+                  secondButton={true}
+                  firstColorCustom={theme.colors.red}
+                  secondColorCustom={theme.colors.green}
+                  widthButton={'45%'}
+                />
+              </>
+            )}
+            {showFloatButtonsAcceptOrReject[order?.status] && (
+              <FloatingButton
+                btnText={t('REJECT', 'Reject')}
+                isSecondaryBtn={false}
+                secondButtonClick={() => (order?.isLogistic && (order?.order_group || logisticOrderStatus.includes(order?.status))) ? handleAcceptLogisticOrder(order) : handleViewActionOrder('accept')}
+                firstButtonClick={() => order?.isLogistic && (order?.order_group || logisticOrderStatus.includes(order?.status)) ? handleRejectLogisticOrder() : handleViewActionOrder('reject')}
+                secondBtnText={t('ACCEPT', 'Accept')}
+                secondButton={true}
+                firstColorCustom={theme.colors.red}
+                secondColorCustom={theme.colors.green}
+                widthButton={'45%'}
+              />
             )}
           </>
         )}

package/themes/business/src/components/OrderDetails/OrderContentComponent.tsx CHANGED Viewed

@@ -27,18 +27,19 @@ import { ReviewCustomer } from '../ReviewCustomer'
 interface OrderContent {
   order: any,
-  logisticOrderStatus?: Array<number>
+  logisticOrderStatus?: Array<number>,
+  isOrderGroup?: boolean,
+  lastOrder?: boolean
 }
 export const OrderContentComponent = (props: OrderContent) => {
   const [, t] = useLanguage();
   const theme = useTheme()
-  const { order, logisticOrderStatus } = props;
+  const { order, logisticOrderStatus, isOrderGroup, lastOrder } = props;
   const [{ parsePrice, parseNumber }] = useUtils();
   const [{ configs }] = useConfig();
   const [openReviewModal, setOpenReviewModal] = useState(false)
-  const [isCustomerReviewed, setIsCustomerReviewed] = useState(false)
   const pastOrderStatuses = [1, 2, 5, 6, 10, 11, 12, 16, 17]
@@ -63,13 +64,11 @@ export const OrderContentComponent = (props: OrderContent) => {
     }
   })
-  const handleSuccessReviewed = () => {
-    setOpenReviewModal(false)
-    setIsCustomerReviewed(true)
-  }
   return (
-    <OrderContent>
+    <OrderContent isOrderGroup={isOrderGroup} lastOrder={lastOrder}>
+      {isOrderGroup && (
+        <OText size={18}>{t('ORDER', 'Order')} #{isOrderGroup ? order?.order_group_id : order?.id}</OText>
+      )}
       <OrderBusiness>
         <OText style={{ marginBottom: 5 }} size={16} weight="600">
           {t('BUSINESS_DETAILS', 'Business details')}
@@ -148,42 +147,52 @@ export const OrderContentComponent = (props: OrderContent) => {
         <OText style={{ marginBottom: 5 }} size={16} weight="600">
           {t('CUSTOMER_DETAILS', 'Customer details')}
         </OText>
-        <View style={{ flexDirection: 'row' }}>
-          <OText numberOfLines={2} mBottom={4}>
-            <OText
-              numberOfLines={1}
-              mBottom={4}
-              ellipsizeMode="tail"
-              space>
-              {order?.customer?.name}
-            </OText>
-            <OText
-              numberOfLines={1}
-              mBottom={4}
-              ellipsizeMode="tail"
-              space>
-              {order?.customer?.middle_name}
-            </OText>
-            <OText
-              numberOfLines={1}
-              mBottom={4}
-              ellipsizeMode="tail"
-              space>
-              {order?.customer?.lastname}
-            </OText>
-            <OText
-              numberOfLines={1}
-              mBottom={4}
-              ellipsizeMode="tail"
-              space>
-              {order?.customer?.second_lastname}
-            </OText>
-          </OText>
-        </View>
+        {
+          (order?.customer?.name || order?.customer?.lastname) && (
+            <View style={{ flexDirection: 'row' }}>
+              <OText numberOfLines={2} mBottom={4}>
+                {order?.customer?.name && (
+                  <OText
+                    numberOfLines={1}
+                    mBottom={4}
+                    ellipsizeMode="tail"
+                    space>
+                    {order?.customer?.name}
+                  </OText>
+                )}
+                {order?.customer?.middle_name && (
+                  <OText
+                    numberOfLines={1}
+                    mBottom={4}
+                    ellipsizeMode="tail"
+                    space>
+                    {order?.customer?.middle_name}
+                  </OText>
+                )}
+                {order?.customer?.lastname && (
+                  <OText
+                    numberOfLines={1}
+                    mBottom={4}
+                    ellipsizeMode="tail"
+                    space>
+                    {order?.customer?.lastname}
+                  </OText>
+                )}
+                {
+                  order?.customer?.second_lastname && (
+                    <OText
+                      numberOfLines={1}
+                      mBottom={4}
+                      ellipsizeMode="tail"
+                      space>
+                      {order?.customer?.second_lastname}
+                    </OText>
+                  )
+                }
+              </OText>
+            </View>
+          )
+        }
         {!!order?.customer?.email && (
           <View style={styles.linkWithIcons}>
@@ -250,7 +259,7 @@ export const OrderContentComponent = (props: OrderContent) => {
             {order?.customer?.zipcode}
           </OText>
         )}
-        {/* {!order?.user_review && pastOrderStatuses.includes(order?.status) && !isCustomerReviewed && (
+        {!order?.user_review && pastOrderStatuses.includes(order?.status) && (
           <OButton
             style={styles.btnReview}
             textStyle={{ color: theme.colors.white }}
@@ -258,7 +267,7 @@ export const OrderContentComponent = (props: OrderContent) => {
             imgRightSrc={false}
             onClick={() => setOpenReviewModal(true)}
           />
-        )} */}
+        )}
       </OrderCustomer>
       <OrderProducts>
@@ -430,7 +439,7 @@ export const OrderContentComponent = (props: OrderContent) => {
         <ReviewCustomer
           order={order}
           closeModal={() => setOpenReviewModal(false)}
-          onClose={() => handleSuccessReviewed()}
+          onClose={() => setOpenReviewModal(false)}
         />
       </OModal>
     </OrderContent>

package/themes/business/src/components/OrderDetails/OrderHeaderComponent.tsx CHANGED Viewed

@@ -28,8 +28,8 @@ interface OrderHeader {
   handleOpenMessagesForBusiness?: any,
   getOrderStatus?: any,
   logisticOrderStatus?: Array<number>,
-  handleViewSummaryOrder: any;
-  handleCopyClipboard: any
+  handleViewSummaryOrder?: any;
+  handleCopyClipboard?: any
 }
 export const OrderHeaderComponent = (props: OrderHeader) => {
@@ -96,7 +96,7 @@ export const OrderHeaderComponent = (props: OrderHeader) => {
         />
         {
-          (!order?.isLogistic || !logisticOrderStatus?.includes(order?.status)) && (
+          (!order?.isLogistic || (!logisticOrderStatus?.includes(order?.status) && !order?.order_group)) && (
             <Actions>
               {getOrderStatus(order?.status, t)?.value !==
                 t('PENDING', 'Pending') && (
@@ -111,7 +111,7 @@ export const OrderHeaderComponent = (props: OrderHeader) => {
                       }}
                       borderColor={theme.colors.clear}
                       style={styles.icons}
-                      onClick={() => handleCopyClipboard()}
+                      onClick={() => handleCopyClipboard?.()}
                     />
                     <OIconButton
                       icon={theme.images.general.print}
@@ -122,7 +122,7 @@ export const OrderHeaderComponent = (props: OrderHeader) => {
                       }}
                       borderColor={theme.colors.clear}
                       style={styles.icons}
-                      onClick={() => handleViewSummaryOrder()}
+                      onClick={() => handleViewSummaryOrder?.()}
                     />
                   </>
                 )}
@@ -162,7 +162,7 @@ export const OrderHeaderComponent = (props: OrderHeader) => {
         <OText numberOfLines={2} size={20} weight="600">
           <>
             {`${t('INVOICE_ORDER_NO', 'Order No.')} ${order.id} `}
-            {(!order?.isLogistic || !logisticOrderStatus?.includes(order?.status)) && (
+            {!order?.isLogistic && (!order?.order_group_id || !logisticOrderStatus?.includes(order?.status)) && (
               <>
                 {t('IS', 'is')}{' '}
                 <OText
@@ -175,7 +175,7 @@ export const OrderHeaderComponent = (props: OrderHeader) => {
             )}
           </>
         </OText>
-        {(!order?.isLogistic || !logisticOrderStatus?.includes(order?.status)) && (
+        {!order?.isLogistic && (!order?.order_group_id || !logisticOrderStatus?.includes(order?.status)) && (
           <OText size={13}>
             {`${order?.paymethod?.name} - ${order.delivery_type === 1
               ? t('DELIVERY', 'Delivery')

package/themes/business/src/components/OrderDetails/styles.tsx CHANGED Viewed

@@ -1,4 +1,4 @@
-import styled from 'styled-components/native';
+import styled, { css } from 'styled-components/native';
 export const OrderDetailsContainer = styled.ScrollView`
   flex: 1;
@@ -25,6 +25,15 @@ export const Logo = styled.View`
 export const OrderContent = styled.View`
   flex: 1;
+  ${(props : any) => props.isOrderGroup && css`
+    border-color: rgba(0, 0, 0, 0.2);
+    border-width: 1px;
+    padding: 10px;
+  `
+  }
+  ${(props : any) => props.lastOrder && css`
+    margin-bottom: 50px;
+  `}
 `;
 export const OrderHeader = styled.View`
@@ -45,7 +54,7 @@ export const OrderBusiness = styled.View`
 export const OrderCustomer = styled.View`
   border-bottom-width: 10px;
   border-bottom-color: ${(props: any) => props.theme.colors.inputChat};
-  padding-vertical: 20px;
+  padding-vertical: 10px;
 `;
 export const OrderProducts = styled(OrderCustomer)``;

package/themes/business/src/components/OrdersOption/index.tsx CHANGED Viewed

@@ -187,7 +187,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
   };
   const getOrderStatus = (key: number) => {
-    return orderStatus.find((status: any) => status.key === key)?.text;
+    return orderStatus.find((status: any) => status?.key === key)?.text;
   };
   const applyFilters = () => {
@@ -454,7 +454,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
             currentTabSelected !== 'logisticOrders' &&
             (
               <PreviousOrders
-                orders={currentOrdersGroup.orders}
+                orders={currentOrdersGroup?.orders}
                 onNavigationRedirect={onNavigationRedirect}
                 getOrderStatus={getOrderStatus}
                 handleClickOrder={handleClickOrder}
@@ -464,7 +464,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
             logisticOrders?.orders?.length > 0 &&
             currentTabSelected === 'logisticOrders' && (
               <PreviousOrders
-                orders={logisticOrders.orders.filter((order: any) => !order?.expired).map((order: any) => ({ ...order, isLogistic: true }))}
+                orders={logisticOrders?.orders?.filter((order: any) => !order?.expired).map((order: any) => ({ ...order, isLogistic: true }))}
                 onNavigationRedirect={onNavigationRedirect}
                 getOrderStatus={getOrderStatus}
                 handleClickLogisticOrder={handleClickLogisticOrder}
@@ -528,13 +528,13 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
             (currentOrdersGroup?.error?.length ||
               currentOrdersGroup?.orders?.length === 0)) ||
             (currentTabSelected === 'logisticOrders' &&
-              (logisticOrders?.error?.length > 0 || logisticOrders?.orders?.length === 0))
+              (logisticOrders?.error?.length > 0 || logisticOrders?.orders?.length === 0 || !logisticOrders?.orders?.some(order => !order?.expired)))
           ) &&
             (
               <NotFoundSource
                 content={
                   ((currentTabSelected !== 'logisticOrders' && !currentOrdersGroup?.error?.length) ||
-                    (currentTabSelected === 'logisticOrders' && !logisticOrders?.error?.length))
+                    (currentTabSelected === 'logisticOrders' && (!logisticOrders?.error?.length || (logisticOrders?.orders?.length > 0 && !logisticOrders?.orders?.some(order => !order?.expired)))))
                     ? t('NO_RESULTS_FOUND', 'Sorry, no results found')
                     : currentOrdersGroup?.error?.[0]?.message ||
                     currentOrdersGroup?.error?.[0] ||

package/themes/business/src/components/PreviousOrders/index.tsx CHANGED Viewed

@@ -85,9 +85,9 @@ export const PreviousOrders = (props: any) => {
     <>
       {orders && orders?.length > 0 &&
         orders
-          .filter((order: any) => hash[order?.id] ? false : (hash[order?.id] = true))
-          .map((_order: any) => {
-            const order = _order?.isLogistic && !_order?.order_group ? _order?.order : _order
+          ?.filter((order: any) => hash[order?.id] ? false : (hash[order?.id] = true))
+          ?.map((_order: any) => {
+            const order = _order?.isLogistic && !_order?.order_group && isLogisticOrder ? _order?.order : _order
             return (
               <View
                 style={{
@@ -116,9 +116,9 @@ export const PreviousOrders = (props: any) => {
                         </Logo>
                       )}
                     <Information>
-                      {order?.order_group && order?.order_group_id && (
+                      {order?.order_group_id && (
                         <OText>
-                          <OText>{order?.order_group?.orders?.length} {t('ORDERS', 'Orders')}</OText>
+                          <OText>{(t('INVOICE_GROUP_NO', 'Group No.') + order?.order_group_id)}</OText>
                         </OText>
                       )}
                       {order.business?.name && (
@@ -140,7 +140,7 @@ export const PreviousOrders = (props: any) => {
                         numberOfLines={1}
                         adjustsFontSizeToFit
                         size={20}>
-                        {(order?.order_group && order?.order_group_id ? (t('INVOICE_GROUP_NO', 'Group No.') + order?.order_group_id) : (t('INVOICE_ORDER_NO', 'Order No.') + order.id)) + ' · '}
+                        {(order?.order_group_id && order?.order_group && isLogisticOrder ? `${order?.order_group?.orders?.length} ${t('ORDERS', 'Orders')}` : (t('INVOICE_ORDER_NO', 'Order No.') + order.id)) + ' · '}
                         {order?.delivery_datetime_utc
                           ? parseDate(order?.delivery_datetime_utc)
                           : parseDate(order?.delivery_datetime, { utc: false })}
@@ -171,26 +171,41 @@ export const PreviousOrders = (props: any) => {
                 </TouchableOpacity>
                 {isLogisticOrder && (
                   <AcceptOrRejectOrder>
-                    <OButton
-                      text={t('REJECT', 'Reject')}
-                      onClick={() => handleClickLogisticOrder(2, _order?.id)}
-                      bgColor={theme.colors.danger}
-                      borderColor={theme.colors.danger}
-                      imgRightSrc={null}
-                      style={{ borderRadius: 7, height: 40 }}
-                      parentStyle={{ width: '45%' }}
-                      textStyle={{ color: theme.colors.dangerText }}
-                    />
-                    <OButton
-                      text={t('ACCEPT', 'Accept')}
-                      onClick={() => handleClickLogisticOrder(1, _order?.id)}
-                      bgColor={theme.colors.successOrder}
-                      borderColor={theme.colors.successOrder}
-                      imgRightSrc={null}
-                      style={{ borderRadius: 7, height: 40 }}
-                      parentStyle={{ width: '45%' }}
-                      textStyle={{ color: theme.colors.successText }}
-                    />
+                    {order?.order_group_id && order?.order_group ? (
+                      <OButton
+                        text={t('VIEW_ORDER', 'View order')}
+                        onClick={() => handlePressOrder({ ...order, logistic_order_id: _order?.id })}
+                        bgColor={theme.colors.blueLight}
+                        borderColor={theme.colors.blueLight}
+                        imgRightSrc={null}
+                        style={{ borderRadius: 7, height: 40 }}
+                        parentStyle={{ width: '100%' }}
+                        textStyle={{ color: theme.colors.primary }}
+                      />
+                    ) : (
+                    <>
+                      <OButton
+                        text={t('REJECT', 'Reject')}
+                        onClick={() => handleClickLogisticOrder(2, _order?.id)}
+                        bgColor={theme.colors.danger}
+                        borderColor={theme.colors.danger}
+                        imgRightSrc={null}
+                        style={{ borderRadius: 7, height: 40 }}
+                        parentStyle={{ width: '45%' }}
+                        textStyle={{ color: theme.colors.dangerText }}
+                      />
+                      <OButton
+                        text={t('ACCEPT', 'Accept')}
+                        onClick={() => handleClickLogisticOrder(1, _order?.id)}
+                        bgColor={theme.colors.successOrder}
+                        borderColor={theme.colors.successOrder}
+                        imgRightSrc={null}
+                        style={{ borderRadius: 7, height: 40 }}
+                        parentStyle={{ width: '45%' }}
+                        textStyle={{ color: theme.colors.successText }}
+                      />
+                    </>
+                    )}
                   </AcceptOrRejectOrder>
                 )}
               </View>

package/themes/doordash/src/components/ProductForm/index.tsx CHANGED Viewed

@@ -172,24 +172,33 @@ export const ProductOptionsUI = (props: any) => {
 										</View>
 									</Placeholder>
 								) : (
-									<>
-										<OText style={{ flex: I18nManager.isRTL ? 0 : 1, ...theme.labels.large }}>{product?.name || productCart.name}</OText>
-										{/* <OText size={20} style={{ flex: I18nManager.isRTL ? 1 : 0 }} color={theme.colors.primary}>{productCart.price ? parsePrice(productCart.price) : ''}</OText> */}
-									</>
+									<View style={{ flexDirection: 'column', width: '100%' }}>
+										<OText size={20} style={{ flex: I18nManager.isRTL ? 0 : 1, marginBottom: 10 }}>{product?.name || productCart.name}</OText>
+										<View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+											{((product?.sku && product?.sku !== '-1' && product?.sku !== '1') || (product?.estimated_person)) && (
+												<OText size={14} style={{ marginBottom: 10, flex: I18nManager.isRTL ? 1 : 0 }} color={'#909BA9'}>
+													{
+														((product?.sku && product?.sku !== '-1' && product?.sku !== '1') || (productCart?.sku && productCart?.sku !== '-1' && productCart?.sku !== '1'))
+														&& <>{t('SKU', 'Sku')}{' '}{product?.sku || productCart?.sku}</>
+													}
+													{product?.sku && product?.sku !== '-1' && product?.sku !== '1' && product?.estimated_person && (
+														<>&nbsp;&#183;&nbsp;</>
+													)}
+													{product?.estimated_person
+														&& <>{product?.estimated_person}{' '}{t('ESTIMATED_PERSONS', 'persons')}</>
+													}
+												</OText>
+											)}
+										</View>
+										<OText size={16} style={{ flex: I18nManager.isRTL ? 1 : 0 }} color={theme.colors.primary}>{productCart.price ? parsePrice(productCart.price) : ''}</OText>
+									</View>
 								)}
 							</ProductTitle>
-							<ProductDescription>
-								<OText style={theme.labels.small as TextStyle} color={theme.colors.textSecondary}>{product?.description || productCart?.description}</OText>
-								{(
-									(product?.sku && product?.sku !== '-1' && product?.sku !== '1') ||
-									(productCart?.sku && productCart?.sku !== '-1' && productCart?.sku !== '1')
-								) && (
-										<>
-											<OText size={20}>{t('SKU', 'Sku')}</OText>
-											<OText>{product?.sku || productCart?.sku}</OText>
-										</>
-									)}
-							</ProductDescription>
+							{(product?.description || productCart?.description) && (
+								<ProductDescription>
+									<OText color={theme.colors.textSecondary}>{product?.description || productCart?.description}</OText>
+								</ProductDescription>
+							)}
 							{loading && !product ? (
 								<>
 									{[...Array(2)].map((item, i) => (
@@ -319,18 +328,18 @@ export const ProductOptionsUI = (props: any) => {
 					<View style={{ width: '100%' }}>
 						{/* {productCart && !isSoldOut && maxProductQuantity > 0 && auth && orderState.options?.address_id && ( */}
-							<OButton
-								onClick={() => handleSaveProduct()}
-								imgRightSrc=''
-								text={`${orderState.loading ? t('LOADING', 'Loading') : editMode ? t('UPDATE', 'Update') : t('ADD_TO_CART', 'Add to Cart')}`}
-								textSub={`${orderState.loading ? '' : productCart.total ? parsePrice(productCart?.total) : ''}`}
-								textStyle={{ color: saveErrors ? theme.colors.textSecondary : theme.colors.white, fontSize: 14, fontWeight: Platform.OS === 'ios' ? '600' : 'bold' }}
-								style={{
-									backgroundColor: saveErrors ? theme.colors.backgroundGray300 : theme.colors.primary,
-									borderWidth: 1, shadowOpacity: 0, height: 40,
-									borderColor: saveErrors ? theme.colors.backgroundGray300 : theme.colors.primary,
-								}}
-							/>
+						<OButton
+							onClick={() => handleSaveProduct()}
+							imgRightSrc=''
+							text={`${orderState.loading ? t('LOADING', 'Loading') : editMode ? t('UPDATE', 'Update') : t('ADD_TO_CART', 'Add to Cart')}`}
+							textSub={`${orderState.loading ? '' : productCart.total ? parsePrice(productCart?.total) : ''}`}
+							textStyle={{ color: saveErrors ? theme.colors.textSecondary : theme.colors.white, fontSize: 14, fontWeight: Platform.OS === 'ios' ? '600' : 'bold' }}
+							style={{
+								backgroundColor: saveErrors ? theme.colors.backgroundGray300 : theme.colors.primary,
+								borderWidth: 1, shadowOpacity: 0, height: 40,
+								borderColor: saveErrors ? theme.colors.backgroundGray300 : theme.colors.primary,
+							}}
+						/>
 						{/* )} */}
 						{auth && !orderState.options?.address_id && (
 							orderState.loading ? (

package/themes/instacart/src/components/ProductForm/index.tsx CHANGED Viewed

@@ -120,7 +120,7 @@ export const ProductOptionsUI = (props: any) => {
 									<ProductHeader
 										source={{ uri: product?.images || productCart?.images }}
 										resizeMode={'contain'}
-										style={{height: windowWidth, maxHeight: windowWidth}}
+										style={{ height: windowWidth, maxHeight: windowWidth }}
 									/>
 								</>
 							)}
@@ -135,22 +135,33 @@ export const ProductOptionsUI = (props: any) => {
 										</View>
 									</Placeholder>
 								) : (
-									<OText mBottom={7} style={{ flex: I18nManager.isRTL ? 0 : 1, ...theme.labels.subtitle, fontWeight: Platform.OS === 'ios' ? '600' : 'bold' }}>{product?.name || productCart.name}</OText>
+									<View style={{ flexDirection: 'column', width: '100%' }}>
+										<OText size={20} style={{ flex: I18nManager.isRTL ? 0 : 1, marginBottom: 10, fontWeight: Platform.OS === 'ios' ? '600' : 'bold' }}>{product?.name || productCart.name}</OText>
+										<View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+											{((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'))
+														&& <>{t('SKU', 'Sku')}{' '}{product?.sku || productCart?.sku}</>
+													}
+													{product?.sku && product?.sku !== '-1' && product?.sku !== '1' && product?.estimated_person && (
+														<>&nbsp;&#183;&nbsp;</>
+													)}
+													{product?.estimated_person
+														&& <>{product?.estimated_person}{' '}{t('ESTIMATED_PERSONS', 'persons')}</>
+													}
+												</OText>
+											)}
+										</View>
+										<OText size={16} mBottom={7} style={{ flex: I18nManager.isRTL ? 1 : 0 }} color={theme.colors.primary}>{productCart.price ? parsePrice(productCart.price) : ''}</OText>
+									</View>
 								)}
 							</ProductTitle>
-							<ProductDescription>
-								<OText mBottom={7} style={{ ...theme.labels.small }} color={theme.colors.textSecondary}>{product?.description?.trim() || productCart?.description?.trim()}</OText>
-								<OText style={{ flex: I18nManager.isRTL ? 1 : 0, ...theme.labels.subtitle, fontWeight: Platform.OS === 'ios' ? '600' : 'bold' }} color={theme.colors.textPrimary}>{productCart.price ? parsePrice(productCart.price) : ''}</OText>
-								{(
-									(product?.sku && product?.sku !== '-1' && product?.sku !== '1') ||
-									(productCart?.sku && productCart?.sku !== '-1' && productCart?.sku !== '1')
-								) && (
-										<>
-											<OText size={20}>{t('SKU', 'Sku')}</OText>
-											<OText>{product?.sku || productCart?.sku}</OText>
-										</>
-									)}
-							</ProductDescription>
+							{(product?.description || productCart?.description) && (
+								<ProductDescription>
+									<OText mBottom={7} style={{ ...theme.labels.small }} color={theme.colors.textSecondary}>{product?.description?.trim() || productCart?.description?.trim()}</OText>
+								</ProductDescription>
+							)}
 							<View style={{ height: 16, backgroundColor: theme.colors.secundary, marginHorizontal: -40, marginBottom: 20 }} />
 							{loading && !product ? (
 								<>

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

@@ -13,7 +13,7 @@ import Swiper from 'react-native-swiper'
 import FastImage from 'react-native-fast-image';
 import IconAntDesign from 'react-native-vector-icons/AntDesign';
-import { View, TouchableOpacity, StyleSheet, Dimensions, Platform, AppRegistry } from 'react-native';
+import { View, TouchableOpacity, StyleSheet, Dimensions, Platform, AppRegistry, I18nManager } from 'react-native';
 import {
 	ProductHeader,
@@ -116,7 +116,7 @@ export const ProductOptionsUI = (props: any) => {
 		slide1: {
 			flex: 1,
 		},
-		mainSwiper : {
+		mainSwiper: {
 			height: 258,
 		},
 		swiperButton: {
@@ -196,7 +196,7 @@ export const ProductOptionsUI = (props: any) => {
 	useEffect(() => {
 		const productImgList: any = []
 		product?.images && productImgList.push(product.images)
-		if(product?.gallery && product?.gallery.length > 0) {
+		if (product?.gallery && product?.gallery.length > 0) {
 			for (const img of product?.gallery) {
 				productImgList.push(img.file)
 			}
@@ -296,7 +296,7 @@ export const ProductOptionsUI = (props: any) => {
 													name="caretleft"
 													color={theme.colors.white}
 													size={13}
-													// style={styles.starIcon}
+												// style={styles.starIcon}
 												/>
 											</View>
 										}
@@ -306,7 +306,7 @@ export const ProductOptionsUI = (props: any) => {
 													name="caretright"
 													color={theme.colors.white}
 													size={13}
-													// style={styles.starIcon}
+												// style={styles.starIcon}
 												/>
 											</View>
 										}
@@ -387,6 +387,20 @@ export const ProductOptionsUI = (props: any) => {
 											style={{ flex: 1, marginBottom: 5 }}>
 											{product?.name || productCart.name}
 										</OText>
+										{((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'))
+													&& <>{t('SKU', 'Sku')}{' '}{product?.sku || productCart?.sku}</>
+												}
+												{product?.sku && product?.sku !== '-1' && product?.sku !== '1' && product?.estimated_person && (
+													<>&nbsp;&#183;&nbsp;</>
+												)}
+												{product?.estimated_person
+													&& <>{product?.estimated_person}{' '}{t('ESTIMATED_PERSONS', 'persons')}</>
+												}
+											</OText>
+										)}
 										<OText size={16} lineHeight={24} color={theme.colors.textNormal}>
 											{productCart.price ? parsePrice(productCart.price) : ''}
 										</OText>
@@ -397,17 +411,6 @@ export const ProductOptionsUI = (props: any) => {
 								<OText color={theme.colors.textSecondary} size={12} lineHeight={18}>
 									{product?.description || productCart?.description}
 								</OText>
-								{((product?.sku &&
-									product?.sku !== '-1' &&
-									product?.sku !== '1') ||
-									(productCart?.sku &&
-										productCart?.sku !== '-1' &&
-										productCart?.sku !== '1')) && (
-										<>
-											<OText size={16}>{t('SKU', 'Sku')}</OText>
-											<OText>{product?.sku || productCart?.sku}</OText>
-										</>
-									)}
 							</ProductDescription>
 							{loading && !product ? (
 								<>
@@ -455,25 +458,25 @@ export const ProductOptionsUI = (props: any) => {
 										style={{ marginBottom: 20 }}
 										contentContainerStyle={{ paddingHorizontal: 33 }}
 									>
-									<TouchableOpacity
-										key={`eopt_all_0`}
-										onPress={() => setSelectedOpt(0)}
-										style={[
-											styles.extraItem,
-											{
-												borderBottomColor: selOpt == 0 ? theme.colors.textNormal : theme.colors.border,
-											},
-										]}>
-										<OText
-											color={selOpt == 0 ? theme.colors.textNormal : theme.colors.textSecondary}
-											size={selOpt == 0 ? 14 : 12}
-											weight={selOpt == 0 ? '600' : 'normal'}>
-											{t('ALL', 'All')}
-										</OText>
-									</TouchableOpacity>
-									{product?.extras.map((extra: any) =>
-										<ExtraOptions key={extra.id} options={extra.options} />
-									)}
+										<TouchableOpacity
+											key={`eopt_all_0`}
+											onPress={() => setSelectedOpt(0)}
+											style={[
+												styles.extraItem,
+												{
+													borderBottomColor: selOpt == 0 ? theme.colors.textNormal : theme.colors.border,
+												},
+											]}>
+											<OText
+												color={selOpt == 0 ? theme.colors.textNormal : theme.colors.textSecondary}
+												size={selOpt == 0 ? 14 : 12}
+												weight={selOpt == 0 ? '600' : 'normal'}>
+												{t('ALL', 'All')}
+											</OText>
+										</TouchableOpacity>
+										{product?.extras.map((extra: any) =>
+											<ExtraOptions key={extra.id} options={extra.options} />
+										)}
 									</ExtraOptionWrap>
 									{selOpt == 0 ? (
@@ -778,7 +781,7 @@ export const ProductOptionsUI = (props: any) => {
 									isDisabled
 									text={t('LOADING', 'Loading')}
 									imgRightSrc=""
-									textStyle={{fontSize: 10}}
+									textStyle={{ fontSize: 10 }}
 								/>
 							) : (
 								<OButton onClick={navigation.navigate('AddressList')} />

package/themes/single-business/src/components/ProductForm/index.tsx CHANGED Viewed

@@ -9,7 +9,7 @@ import {
 import { useTheme } from 'styled-components/native';
 import { ProductIngredient } from '../ProductIngredient';
 import { ProductOption } from '../ProductOption';
-import { View, TouchableOpacity, StyleSheet, Dimensions, Platform, useWindowDimensions, Keyboard, KeyboardAvoidingView } from 'react-native';
+import { View, TouchableOpacity, StyleSheet, Dimensions, Platform, useWindowDimensions, Keyboard, KeyboardAvoidingView, I18nManager } from 'react-native';
 import {
   ProductHeader,
@@ -312,6 +312,20 @@ export const ProductOptionsUI = (props: any) => {
                       style={{ flex: 1, marginBottom: 5 }}>
                       {product?.name || productCart.name}
                     </OText>
+                    {((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'))
+													&& <>{t('SKU', 'Sku')}{' '}{product?.sku || productCart?.sku}</>
+												}
+												{product?.sku && product?.sku !== '-1' && product?.sku !== '1' && product?.estimated_person && (
+													<>&nbsp;&#183;&nbsp;</>
+												)}
+												{product?.estimated_person
+													&& <>{product?.estimated_person}{' '}{t('ESTIMATED_PERSONS', 'persons')}</>
+												}
+											</OText>
+										)}
                     <OText size={16} lineHeight={24} color={theme.colors.textNormal}>
                       {productCart.price ? parsePrice(productCart.price) : ''}
                     </OText>
@@ -322,17 +336,6 @@ export const ProductOptionsUI = (props: any) => {
                 <OText color={theme.colors.textSecondary} size={12} lineHeight={18}>
                   {product?.description || productCart?.description}
                 </OText>
-                {((product?.sku &&
-                  product?.sku !== '-1' &&
-                  product?.sku !== '1') ||
-                  (productCart?.sku &&
-                    productCart?.sku !== '-1' &&
-                    productCart?.sku !== '1')) && (
-                    <>
-                      <OText size={16}>{t('SKU', 'Sku')}</OText>
-                      <OText>{product?.sku || productCart?.sku}</OText>
-                    </>
-                  )}
               </ProductDescription>
               {loading && !product ? (
                 <>

package/themes/uber-eats/src/components/ProductForm/index.tsx CHANGED Viewed

@@ -32,7 +32,7 @@ import {
 import { OButton, OInput, OText } from '../shared'
 import { ProductOptionSubOption } from '../ProductOptionSubOption'
 import { NotFoundSource } from '../NotFoundSource'
-import { Placeholder,PlaceholderLine,Fade } from 'rn-placeholder'
+import { Placeholder, PlaceholderLine, Fade } from 'rn-placeholder'
 import { useTheme } from 'styled-components/native'
 import MaterialIcon from 'react-native-vector-icons/MaterialIcons'
@@ -149,9 +149,9 @@ export const ProductOptionsUI = (props: any) => {
     }
   }
-  const handleRedirectLogin = (product : any) => {
+  const handleRedirectLogin = (product: any) => {
     onClose()
-    navigation.navigate('Login', {product: {businessId: product?.businessId, id: product?.id, categoryId: product?.categoryId, slug: businessSlug} })
+    navigation.navigate('Login', { product: { businessId: product?.businessId, id: product?.id, categoryId: product?.categoryId, slug: businessSlug } })
   }
   const saveErrors = orderState.loading || maxProductQuantity === 0 || Object.keys(errors).length > 0
@@ -215,49 +215,46 @@ export const ProductOptionsUI = (props: any) => {
                       </View>
                     </Placeholder>
                   ) : (
-                    <>
-                      <OText
-                        weight={600}
-                        size={20}
-                        numberOfLines={1}
-                        ellipsizeMode='tail'
-                        style={{
-                          flex: 1,
-                          marginRight: 30,
-                          textAlign: 'left'
-                        }}
-                      >
-                        {product?.name || productCart.name}
-                      </OText>
-                      <OText weight={600} size={20} style={{ flex: I18nManager.isRTL ? 1 : 0 }} color={theme.colors.primary}>{productCart.price ? parsePrice(productCart.price) : ''}</OText>
-                    </>
+                    <View style={{ flexDirection: 'column', width: '100%' }}>
+                      <OText size={20} style={{ flex: I18nManager.isRTL ? 0 : 1, marginBottom: 10 }}>{product?.name || productCart.name}</OText>
+                      <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+                        {((product?.sku && product?.sku !== '-1' && product?.sku !== '1') || (product?.estimated_person)) && (
+                          <OText size={14} style={{ marginBottom: 10, flex: I18nManager.isRTL ? 1 : 0 }} color={'#909BA9'}>
+                            {
+                              ((product?.sku && product?.sku !== '-1' && product?.sku !== '1') || (productCart?.sku && productCart?.sku !== '-1' && productCart?.sku !== '1'))
+                              && <>{t('SKU', 'Sku')}{' '}{product?.sku || productCart?.sku}</>
+                            }
+                            {product?.sku && product?.sku !== '-1' && product?.sku !== '1' && product?.estimated_person && (
+                              <>&nbsp;&#183;&nbsp;</>
+                            )}
+                            {product?.estimated_person
+                              && <>{product?.estimated_person}{' '}{t('ESTIMATED_PERSONS', 'persons')}</>
+                            }
+                          </OText>
+                        )}
+                      </View>
+                      <OText size={16} style={{ flex: I18nManager.isRTL ? 1 : 0 }} color={theme.colors.primary}>{productCart.price ? parsePrice(productCart.price) : ''}</OText>
+                    </View>
                   )}
                 </ProductTitle>
-                <ProductDescription>
-                  <OText color={theme.colors.gray} style={{ textAlign: 'left' }}>{product?.description || productCart?.description}</OText>
-                  {(
-                    (product?.sku && product?.sku !== '-1' && product?.sku !== '1') ||
-                    (productCart?.sku && productCart?.sku !== '-1' && productCart?.sku !== '1')
-                  ) && (
-                      <>
-                        <OText size={20}>{t('SKU', 'Sku')}</OText>
-                        <OText>{product?.sku || productCart?.sku}</OText>
-                      </>
-                    )}
-                </ProductDescription>
+                {(product?.description || productCart?.description) && (
+                  <ProductDescription>
+                    <OText color={theme.colors.gray} style={{ textAlign: 'left', marginBottom: 10 }}>{product?.description || productCart?.description}</OText>
+                  </ProductDescription>
+                )}
                 {loading && !product ? (
                   <>
-                    {[...Array(2)].map((item,i) => (
-                    <Placeholder key={i} style={{marginBottom: 20}} Animation={Fade}>
-                      <PlaceholderLine height={40} style={{ flex: 1, marginTop: 10 }} />
-                      {[...Array(3)].map((item,i) => (
-                        <View key={i} style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
-                          <PlaceholderLine height={30} width={10} style={{marginBottom: 20}} />
-                          <PlaceholderLine height={30} width={50} style={{marginBottom: 20}} />
-                          <PlaceholderLine height={30} width={30} style={{marginBottom: 20}} />
-                        </View>
-                      ))}
-                    </Placeholder>
+                    {[...Array(2)].map((item, i) => (
+                      <Placeholder key={i} style={{ marginBottom: 20 }} Animation={Fade}>
+                        <PlaceholderLine height={40} style={{ flex: 1, marginTop: 10 }} />
+                        {[...Array(3)].map((item, i) => (
+                          <View key={i} style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+                            <PlaceholderLine height={30} width={10} style={{ marginBottom: 20 }} />
+                            <PlaceholderLine height={30} width={50} style={{ marginBottom: 20 }} />
+                            <PlaceholderLine height={30} width={30} style={{ marginBottom: 20 }} />
+                          </View>
+                        ))}
+                      </Placeholder>
                     ))}
                   </>
                 ) : (
@@ -279,7 +276,7 @@ export const ProductOptionsUI = (props: any) => {
                         </SectionTitle>
                         <WrapperIngredients
                           style={{ backgroundColor: isSoldOut || maxProductQuantity <= 0 ? 'hsl(0, 0%, 72%)' : theme.colors.white }}
-                          hidden={!openIngredient}
+                          hidden={!openIngredient}
                         >
                           {product?.ingredients.map((ingredient: any) => (
                             <ProductIngredient
@@ -319,7 +316,7 @@ export const ProductOptionsUI = (props: any) => {
                                             state={currentState}
                                             disabled={isSoldOut || maxProductQuantity <= 0}
                                           />
-                                        ): null
+                                        ) : null
                                       })
                                     }
                                   </WrapperSubOption>