ordering-ui-react-native 0.12.33 → 0.12.37

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

@@ -1,28 +1,36 @@
 import React from 'react';
-import { StyleSheet, TouchableOpacity } from 'react-native';
+import { StyleSheet, TouchableOpacity, View } from 'react-native';
 import { useTheme } from 'styled-components/native';
 import { useLanguage, useUtils } from 'ordering-components/native';
-import { OIcon, OText } from '../shared';
-import { Card, Logo, Information, MyOrderOptions, NotificationIcon } from './styles';
+import { OButton, OIcon, OText } from '../shared';
+import { Card, Logo, Information, MyOrderOptions, NotificationIcon, AcceptOrRejectOrder } from './styles';
 import EntypoIcon from 'react-native-vector-icons/Entypo'
 
 export const PreviousOrders = (props: any) => {
-  const { orders, onNavigationRedirect, getOrderStatus, handleClickOrder } = props;
+  const {
+    orders,
+    onNavigationRedirect,
+    getOrderStatus,
+    handleClickOrder,
+    isLogisticOrder,
+    handleClickLogisticOrder
+  } = props;
   const [, t] = useLanguage();
   const [{ parseDate, optimizeImage }] = useUtils();
   const theme = useTheme();
 
   const handlePressOrder = (order: any) => {
+    if (order?.locked && isLogisticOrder) return
     handleClickOrder && handleClickOrder(order)
     onNavigationRedirect &&
-      onNavigationRedirect('OrderDetails', { order: order });
+      onNavigationRedirect('OrderDetails', { order: { ...order, isLogistic: isLogisticOrder }, handleClickLogisticOrder });
   };
 
   const styles = StyleSheet.create({
     cardButton: {
       flex: 1,
-      minHeight: 64,
-      marginBottom: 30,
+      minHeight: isLogisticOrder ? 50 : 64,
+      marginBottom: isLogisticOrder ? 0 : 30,
       marginLeft: 3,
     },
     icon: {
@@ -78,74 +86,117 @@ export const PreviousOrders = (props: any) => {
       {orders && orders?.length > 0 &&
         orders
           .filter((order: any) => hash[order?.id] ? false : (hash[order?.id] = true))
-          .map((order: any) =>
-      (
-        <React.Fragment key={order.id}>
-          <TouchableOpacity
-            onPress={() => handlePressOrder(order)}
-            style={styles.cardButton}
-            activeOpacity={1}
-          >
-            <Card key={order.id}>
-              {!!order.business?.logo && (
-                <Logo style={styles.logo}>
-                  <OIcon
-                    url={optimizeImage(
-                      order.business?.logo,
-                      'h_300,c_limit',
-                    )}
-                    style={styles.icon}
-                  />
-                </Logo>
-              )}
-              <Information>
-                <OText numberOfLines={1} style={styles.title}>
-                  {order.business?.name}
-                </OText>
-                {order?.showNotification && (
-                  <NotificationIcon>
-                    <EntypoIcon
-                      name="dot-single"
-                      size={32}
-                      color={theme.colors.primary}
+          .map((_order: any) => {
+            const order = _order?.isLogistic && !_order?.order_group ? _order?.order : _order
+            return (
+              <View
+                style={{
+                  backgroundColor: order?.locked && isLogisticOrder ? '#ccc' : '#fff',
+                  marginBottom: isLogisticOrder ? 10 : 0
+                }}
+                key={order.id}
+              >
+                <TouchableOpacity
+                  onPress={() => handlePressOrder({ ...order, logistic_order_id: _order?.id })}
+                  style={styles.cardButton}
+                  disabled={order?.locked && isLogisticOrder}
+                  activeOpacity={1}
+                >
+                  <Card key={order.id}>
+                    {
+                      order.business?.logo && (
+                        <Logo style={styles.logo}>
+                          <OIcon
+                            url={optimizeImage(
+                              order.business?.logo,
+                              'h_300,c_limit',
+                            )}
+                            style={styles.icon}
+                          />
+                        </Logo>
+                      )}
+                    <Information>
+                      {order?.order_group && order?.order_group_id && (
+                        <OText>
+                          <OText>{order?.order_group?.orders?.length} {t('ORDERS', 'Orders')}</OText>
+                        </OText>
+                      )}
+                      {order.business?.name && (
+                        <OText numberOfLines={1} style={styles.title}>
+                          {order.business?.name}
+                        </OText>
+                      )}
+                      {order?.showNotification && (
+                        <NotificationIcon>
+                          <EntypoIcon
+                            name="dot-single"
+                            size={32}
+                            color={theme.colors.primary}
+                          />
+                        </NotificationIcon>
+                      )}
+                      <OText
+                        style={styles.date}
+                        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?.delivery_datetime_utc
+                          ? parseDate(order?.delivery_datetime_utc)
+                          : parseDate(order?.delivery_datetime, { utc: false })}
+                      </OText>
+                      {!isLogisticOrder && (
+                        <MyOrderOptions>
+                          <OText
+                            style={styles.orderType}
+                            mRight={5}
+                            numberOfLines={1}
+                            adjustsFontSizeToFit
+                          >
+                            {order.delivery_type === 1
+                              ? t('DELIVERY', 'Delivery')
+                              : order.delivery_type === 2
+                                ? t('PICKUP', 'Pickup')
+                                : order.delivery_type === 3
+                                  ? t('EAT_IN', 'Eat in')
+                                  : order.delivery_type === 4
+                                    ? t('CURBSIDE', 'Curbside')
+                                    : t('DRIVER_THRU', 'Driver thru')}
+                            {` · ${getOrderStatus(order.status)}`}
+                          </OText>
+                        </MyOrderOptions>
+                      )}
+                    </Information>
+                  </Card>
+                </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 }}
                     />
-                  </NotificationIcon>
+                    <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>
                 )}
-                <OText
-                  style={styles.date}
-                  numberOfLines={1}
-                  adjustsFontSizeToFit
-                  size={20}>
-                  {t('INVOICE_ORDER_NO', 'Order No.') + order.id + ' · '}
-                  {order?.delivery_datetime_utc
-                    ? parseDate(order?.delivery_datetime_utc)
-                    : parseDate(order?.delivery_datetime, { utc: false })}
-                </OText>
-
-                <MyOrderOptions>
-                  <OText
-                    style={styles.orderType}
-                    mRight={5}
-                    numberOfLines={1}
-                    adjustsFontSizeToFit
-                  >
-                    {order.delivery_type === 1
-                      ? t('DELIVERY', 'Delivery')
-                      : order.delivery_type === 2
-                      ? t('PICKUP', 'Pickup')
-                      : order.delivery_type === 3
-                      ? t('EAT_IN', 'Eat in')
-                      : order.delivery_type === 4
-                      ? t('CURBSIDE', 'Curbside')
-                      : t('DRIVER_THRU', 'Driver thru')}
-                    {` · ${getOrderStatus(order.status)}`}
-                  </OText>
-                </MyOrderOptions>
-              </Information>
-            </Card>
-          </TouchableOpacity>
-        </React.Fragment>
-      ))}
+              </View>
+            )
+          }
+          )}
     </>
   );
 };

package/themes/business/src/components/PreviousOrders/styles.tsx

@@ -29,3 +29,10 @@ export const NotificationIcon = styled.View`
   position: absolute;
   left: 90%;
 `
+
+export const AcceptOrRejectOrder = styled.View`
+  flex-direction: row;
+  justify-content: space-between;
+  flex: 1;
+  margin: 10px;
+`

package/themes/business/src/components/ProductItemAccordion/index.tsx

@@ -49,7 +49,6 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
         option.suboptions = Object.values(option.suboptions ?? {});
         return option;
       });
-
       return {
         ...productInfo,
         ingredients,
@@ -60,11 +59,13 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
     return product;
   };
 
+  const parseOptions = typeof productInfo().options === 'string' ? JSON.parse(productInfo().options) : productInfo().options
+
   const getProductPrice = (product: any) => {
     let subOptionPrice = 0;
-    if (product.options.length > 0) {
-      for (const option of product.options) {
-        for (const suboption of option.suboptions) {
+    if (product?.options?.length > 0 && product?.options?.suboptions?.length > 0) {
+      for (const option of product?.options) {
+        for (const suboption of option?.suboptions) {
           subOptionPrice += suboption.quantity * suboption.price;
         }
       }
@@ -98,8 +99,8 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
 
   useEffect(() => {
     if (
-      productInfo().ingredients.length > 0 ||
-      productInfo().options.length > 0 ||
+      productInfo?.()?.ingredients?.length > 0 ||
+      productInfo?.()?.options?.length > 0 ||
       product.comment !== ''
     ) {
       setActiveState(true);
@@ -150,12 +151,12 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
                 </OText>
 
                 {(
-                  productInfo().ingredients.length > 0 ||
-                  productInfo().options.length > 0 ||
+                  productInfo?.()?.ingredients?.length > 0 ||
+                  productInfo?.()?.options?.length > 0 ||
                   product.comment
                 ) && !isClickableEvent && (
-                  <MaterialCommunityIcon name="chevron-down" size={12} />
-                )}
+                    <MaterialCommunityIcon name="chevron-down" size={12} />
+                  )}
               </View>
 
               <View
@@ -201,20 +202,20 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
           product?.valid_menu &&
           !product?.valid_quantity) ||
           (!product?.valid_menu && isCartProduct && !isCartPending)) && (
-          <OText
-            size={24}
-            color={theme.colors.red}
-            style={{ textAlign: 'center', marginTop: 10 }}>
-            {t('NOT_AVAILABLE', 'Not available')}
-          </OText>
-        )}
+            <OText
+              size={24}
+              color={theme.colors.red}
+              style={{ textAlign: 'center', marginTop: 10 }}>
+              {t('NOT_AVAILABLE', 'Not available')}
+            </OText>
+          )}
       </Accordion>
 
       <View style={{ display: isActive ? 'flex' : 'none' }}>
         <Animated.View>
           <AccordionContent>
-            {productInfo().ingredients.length > 0 &&
-              productInfo().ingredients.some(
+            {productInfo?.()?.ingredients?.length > 0 &&
+              productInfo?.()?.ingredients?.some(
                 (ingredient: any) => !ingredient.selected,
               ) && (
                 <ProductOptionsList>
@@ -225,7 +226,7 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
                     {t('INGREDIENTS', 'Ingredients')}:
                   </OText>
 
-                  {productInfo().ingredients.map(
+                  {productInfo?.()?.ingredients?.map(
                     (ingredient: any) =>
                       !ingredient.selected && (
                         <OText
@@ -240,9 +241,9 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
                 </ProductOptionsList>
               )}
 
-            {productInfo().options.length > 0 && (
+            {parseOptions?.length > 0 && (
               <ProductOptionsList>
-                {productInfo().options.map((option: any, i: number) => (
+                {parseOptions?.map((option: any, i: number) => (
                   <ProductOption key={option.id + i}>
                     <OText
                       size={12}
@@ -263,9 +264,9 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
                             position:
                               suboption.position !== 'whole'
                                 ? t(
-                                    suboption.position.toUpperCase(),
-                                    suboption.position,
-                                  )
+                                  suboption.position.toUpperCase(),
+                                  suboption.position,
+                                )
                                 : '',
                             price: parsePrice(suboption.price),
                           })}

package/themes/business/src/components/shared/OIcon.tsx

@@ -20,6 +20,7 @@ interface Props {
   cover?: boolean;
   children?: any;
   borderRadius?: number;
+  borderBottomWidth?: number
 }
 
 const OImage = (props: Props): React.ReactElement => {
@@ -30,6 +31,7 @@ const OImage = (props: Props): React.ReactElement => {
         borderRadius: props.style?.borderRadius,
         overflow: 'hidden',
         marginHorizontal: props.style?.marginHorizontal,
+        borderBottomWidth: props.borderBottomWidth
       }}>
       <SImage
         source={

package/themes/business/src/types/index.tsx

@@ -285,6 +285,10 @@ export interface OrdersOptionParams {
     cancelled?: Array<number>;
   };
   isBusinessApp?: boolean;
+  handleClickLogisticOrder: (status: number, orderId: number) => void,
+  logisticOrders: {orders: Array<any>, loading: boolean, error: Array<string> | string},
+  loadLogisticOrders: () => void;
+  isLogisticActivated?: boolean
 }
 export interface ActiveOrdersParams {
   orders?: any;
@@ -365,6 +369,7 @@ export interface OrderDetailsParams {
   updateDriverPosition?: any;
   driverUpdateLocation?: any;
   setDriverUpdateLocation?: any;
+  handleClickLogisticOrder?: (status: number, orderId: number) => void;
   orderTitle?: any
 }
 export interface ProductItemAccordionParams {

package/themes/single-business/src/components/BusinessBasicInformation/index.tsx

@@ -79,7 +79,7 @@ export const BusinessBasicInformation = (
 						onPress={() => auth
 							? navigation.navigate('AddressList', { isGoBack: true, isFromProductsList: true })
 							: navigation.navigate('AddressForm', { address: orderState.options?.address })}
-						style={{marginTop: !auth ? 36 : top > 0 ? 0 : 20}}
+						style={{marginTop: (!auth || props.isFranchiseApp) ? 36 : top > 0 ? 0 : 20}}
 						activeOpacity={0.8}
 					>
 						<OIcon src={theme.images.general.pin} width={16} color={theme.colors.textSecondary} />

package/themes/single-business/src/components/BusinessProductsListing/index.tsx

@@ -28,6 +28,7 @@ import { ProductForm } from '../ProductForm'
 // import { UpsellingProducts } from '../UpsellingProducts'
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { _setStoreData } from '../../providers/StoreUtil';
+import NavBar from '../NavBar';
 
 const PIXELS_TO_SCROLL = 1000
 
@@ -180,15 +181,14 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 				scrollEventThrottle={16}
       >
 				<WrapHeader>
-					{!auth &&
+					{(!auth || props.isFranchiseApp) && !loading &&
 						<TopHeader style={{top: top}}>
-							<OButton
-								imgLeftSrc={theme.images.general.arrow_left}
-								imgRightSrc={null}
-								style={styles.btnBackArrow}
-								onClick={() => navigation?.canGoBack() && navigation.goBack()}
-								imgLeftStyle={{ tintColor: theme.colors.white }}
-							/>
+              <NavBar
+                style={{ paddingBottom: 0, marginLeft: 20, backgroundColor: 'transparent' }}
+                btnStyle={{ backgroundColor: 'transparent' }}
+                leftImageStyle={{ tintColor: theme.colors.white }}
+                onActionLeft={() => navigation?.canGoBack() && navigation.goBack()}
+              />
 						</TopHeader>
 					}
 					<BusinessBasicInformation
@@ -197,6 +197,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 						openBusinessInformation={openBusinessInformation}
 						header={header}
 						logo={logo}
+            isFranchiseApp={props.isFranchiseApp}
 					/>
 				</WrapHeader>
 				<View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100 }} />