ordering-ui-react-native 0.12.16 → 0.12.20

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

@@ -69,10 +69,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
     filtered,
     onFiltered,
     handleClickOrder,
-    handleClickLogisticOrder,
-    isBusinessApp,
-    logisticOrders,
-    loadLogisticOrders
+    isBusinessApp
   } = props;
 
   const defaultSearchList = {
@@ -127,11 +124,6 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
       zIndex: 100,
       borderColor: theme.colors.textGray,
     },
-    icon: {
-      paddingBottom: 10,
-      zIndex: 100,
-      marginBottom: 2,
-    },
     tagsContainer: {
       marginBottom: 20,
     },
@@ -179,7 +171,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
   const currentOrdersGroup = ordersGroup[currentTabSelected]
 
   const isEqual = (array1: any, array2: any) => {
-    return array1?.every((item: any) => array2.includes(item)) && array2?.every((item: any) => array1.includes(item))
+    return array1.every((item: any) => array2.includes(item)) && array2.every((item: any) => array1.includes(item))
   }
 
   const handleLoadMore = () => {
@@ -345,22 +337,6 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
           nestedScrollEnabled={true}
         >
           <TabsContainer width={WIDTH_SCREEN}>
-            <Pressable
-              style={styles.pressable}
-              onPress={() => setCurrentTabSelected('logisticOrders')}>
-              <OIcon
-                src={theme.images?.general?.chronometer}
-                borderBottomWidth={currentTabSelected === 'logisticOrders' ? 1 : 0}
-                width={currentTabSelected === 'logisticOrders' ? 26 : 24}
-                height={currentTabSelected === 'logisticOrders' ? 26 : 24}
-                color={
-                  currentTabSelected === 'logisticOrders'
-                    ? theme.colors.textGray
-                    : theme.colors.unselectText
-                }
-                style={styles.icon}
-              />
-            </Pressable>
             {tabs.map((tab: any) => (
               <Pressable
                 key={tab.key}
@@ -387,73 +363,71 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
         </ScrollView>
       </FiltersTab>
       <View style={{ flex: 1, minHeight: HEIGHT_SCREEN - 250 }}>
-        {currentTabSelected !== 'logisticOrders' && (
-          <View
-            style={{
-              display: 'flex',
-              flexDirection: 'row',
-              alignContent: 'center',
-              alignItems: 'center',
-            }}
-          >
-            {tagsList && tagsList?.length > 1 && (
-              <View style={{ marginBottom: 20 }}>
-                <Tag
-                  onPress={() => handleAllSelect()}
-                  isSelected={
+        <View
+          style={{
+            display: 'flex',
+            flexDirection: 'row',
+            alignContent: 'center',
+            alignItems: 'center',
+          }}
+        >
+          {tagsList && tagsList?.length > 1 && (
+            <View style={{ marginBottom: 20 }}>
+              <Tag
+                onPress={() => handleAllSelect()}
+                isSelected={
+                  isEqual(currentOrdersGroup.currentFilter, tagsList)
+                    ? theme.colors.primary
+                    : theme.colors.tabBar
+                }>
+                <OText
+                  style={styles.tag}
+                  color={
                     isEqual(currentOrdersGroup.currentFilter, tagsList)
-                      ? theme.colors.primary
-                      : theme.colors.tabBar
+                      ? theme.colors.white
+                      : theme.colors.black
                   }>
-                  <OText
-                    style={styles.tag}
-                    color={
-                      isEqual(currentOrdersGroup.currentFilter, tagsList)
-                        ? theme.colors.white
-                        : theme.colors.black
-                    }>
-                    {t('All', 'All')}
-                  </OText>
-                </Tag>
-              </View>
-            )}
-            <ScrollView
-              ref={scrollRef}
-              showsVerticalScrollIndicator={false}
-              showsHorizontalScrollIndicator={false}
-              contentContainerStyle={styles.tagsContainer}
-              horizontal
-            >
-              {tagsList && tagsList.map((key: number) => (
-                <Tag
-                  key={key}
-                  onPress={() => !currentOrdersGroup.loading && handleTagSelected(key)}
-                  isSelected={
+                  {t('All', 'All')}
+                </OText>
+              </Tag>
+            </View>
+          )}
+          <ScrollView
+            ref={scrollRef}
+            showsVerticalScrollIndicator={false}
+            showsHorizontalScrollIndicator={false}
+            contentContainerStyle={styles.tagsContainer}
+            horizontal
+          >
+            {tagsList && tagsList.map((key: number) => (
+              <Tag
+                key={key}
+                onPress={() => !currentOrdersGroup.loading && handleTagSelected(key)}
+                isSelected={
+                  currentOrdersGroup.currentFilter.includes(key) &&
+                    !isEqual(currentOrdersGroup.currentFilter, tagsList)
+                    ? theme.colors.primary
+                    : theme.colors.tabBar
+                }>
+                <OText
+                  style={styles.tag}
+                  color={
                     currentOrdersGroup.currentFilter.includes(key) &&
                       !isEqual(currentOrdersGroup.currentFilter, tagsList)
-                      ? theme.colors.primary
-                      : theme.colors.tabBar
+                      ? theme.colors.white
+                      : theme.colors.black
                   }>
-                  <OText
-                    style={styles.tag}
-                    color={
-                      currentOrdersGroup.currentFilter.includes(key) &&
-                        !isEqual(currentOrdersGroup.currentFilter, tagsList)
-                        ? theme.colors.white
-                        : theme.colors.black
-                    }>
-                    {getOrderStatus(key)}
-                    {
-                      currentOrdersGroup.currentFilter.includes(key) &&
-                      !isEqual(currentOrdersGroup.currentFilter, tagsList) &&
-                      ' X'
-                    }
-                  </OText>
-                </Tag>
-              ))}
-            </ScrollView>
-          </View>
-        )}
+                  {getOrderStatus(key)}
+                  {
+                    currentOrdersGroup.currentFilter.includes(key) &&
+                    !isEqual(currentOrdersGroup.currentFilter, tagsList) &&
+                    ' X'
+                  }
+                </OText>
+              </Tag>
+            ))}
+          </ScrollView>
+        </View>
 
         <ScrollView
           ref={scrollListRef}
@@ -463,13 +437,12 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
           refreshControl={
             <RefreshControl
               refreshing={refreshing}
-              onRefresh={() => {currentTabSelected === 'logisticOrders' ? loadLogisticOrders() : loadOrders && loadOrders({ newFetch: true })}}
+              onRefresh={() => loadOrders && loadOrders({ newFetch: true })}
             />
           }
         >
-          {!currentOrdersGroup?.error?.length &&
-            currentOrdersGroup?.orders?.length > 0 &&
-            currentTabSelected !== 'logisticOrders' &&
+          {!currentOrdersGroup.error?.length &&
+            currentOrdersGroup.orders?.length > 0 &&
             (
               <PreviousOrders
                 orders={currentOrdersGroup.orders}
@@ -478,21 +451,9 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
                 handleClickOrder={handleClickOrder}
               />
             )}
-          {!logisticOrders?.error?.length &&
-            logisticOrders?.orders?.length > 0 &&
-            currentTabSelected === 'logisticOrders' && (
-              <PreviousOrders
-                orders={logisticOrders.orders}
-                onNavigationRedirect={onNavigationRedirect}
-                getOrderStatus={getOrderStatus}
-                handleClickOrder={handleClickLogisticOrder}
-                isLogisticOrder
-              />
-            )
-          }
-          {((currentOrdersGroup?.loading ||
-            currentOrdersGroup?.pagination?.total === null) ||
-            (logisticOrders?.loading)) &&
+
+          {(currentOrdersGroup?.loading ||
+            currentOrdersGroup?.pagination?.total === null) &&
             (
               <>
                 <View>
@@ -609,21 +570,25 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
             search={search}
             onSearch={setSearch}
           />
-          <OrdersOptionDelivery
-            {...props}
-            search={search}
-            onSearch={setSearch}
-          />
-          <OrdersOptionPaymethod
-            {...props}
-            search={search}
-            onSearch={setSearch}
-          />
-          <OrdersOptionDriver
-            {...props}
-            search={search}
-            onSearch={setSearch}
-          />
+          {isBusinessApp && (
+            <>
+              <OrdersOptionDelivery
+                {...props}
+                search={search}
+                onSearch={setSearch}
+              />
+              <OrdersOptionDriver
+                {...props}
+                search={search}
+                onSearch={setSearch}
+              />
+              <OrdersOptionPaymethod
+                {...props}
+                search={search}
+                onSearch={setSearch}
+              />
+            </>
+          )}
           <OButton
             text={t('SEARCH', 'Search')}
             textStyle={{ color: theme.colors.white }}
@@ -644,7 +609,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
 
 export const OrdersOption = (props: OrdersOptionParams) => {
   const [, t] = useLanguage();
-  const theme = useTheme()
+
   const ordersProps = {
     ...props,
     UIComponent: OrdersOptionUI,

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

@@ -1,13 +1,13 @@
 import React from 'react';
-import { StyleSheet, TouchableOpacity, View } from 'react-native';
+import { StyleSheet, TouchableOpacity } from 'react-native';
 import { useTheme } from 'styled-components/native';
 import { useLanguage, useUtils } from 'ordering-components/native';
-import { OButton, OIcon, OText } from '../shared';
-import { Card, Logo, Information, MyOrderOptions, NotificationIcon, AcceptOrRejectOrder } from './styles';
+import { OIcon, OText } from '../shared';
+import { Card, Logo, Information, MyOrderOptions, NotificationIcon } from './styles';
 import EntypoIcon from 'react-native-vector-icons/Entypo'
 
 export const PreviousOrders = (props: any) => {
-  const { orders, onNavigationRedirect, getOrderStatus, handleClickOrder, isLogisticOrder } = props;
+  const { orders, onNavigationRedirect, getOrderStatus, handleClickOrder } = props;
   const [, t] = useLanguage();
   const [{ parseDate, optimizeImage }] = useUtils();
   const theme = useTheme();
@@ -22,7 +22,7 @@ export const PreviousOrders = (props: any) => {
     cardButton: {
       flex: 1,
       minHeight: 64,
-      marginBottom: isLogisticOrder ? 0 : 30,
+      marginBottom: 30,
       marginLeft: 3,
     },
     icon: {
@@ -79,98 +79,73 @@ export const PreviousOrders = (props: any) => {
         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}
-                        />
-                      </NotificationIcon>
+      (
+        <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',
                     )}
-                    <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>
-                    {!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={() => console.log('reject')}
-                    bgColor={theme.colors.danger}
-                    borderColor={theme.colors.danger}
-                    imgRightSrc={null}
-                    style={{ borderRadius: 7 }}
-                    parentStyle={{width: '45%'}}
-                    textStyle={{ color: theme.colors.dangerText }}
-                  />
-                  <OButton
-                    text={t('ACCEPT', 'Accept')}
-                    onClick={() => console.log('Accept')}
-                    bgColor={theme.colors.successOrder}
-                    borderColor={theme.colors.successOrder}
-                    imgRightSrc={null}
-                    style={{ borderRadius: 7 }}
-                    parentStyle={{width: '45%'}}
-                    textStyle={{ color: theme.colors.successText }}
+                    style={styles.icon}
                   />
-                </AcceptOrRejectOrder>
+                </Logo>
               )}
-            </React.Fragment>
-          ))}
+              <Information>
+                <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}>
+                  {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>
+      ))}
     </>
   );
 };

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

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

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

@@ -49,7 +49,7 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
         option.suboptions = Object.values(option.suboptions ?? {});
         return option;
       });
-      console.log(productInfo, ingredients, options)
+
       return {
         ...productInfo,
         ingredients,
@@ -60,13 +60,11 @@ 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 && product?.options?.suboptions?.length > 0) {
-      for (const option of product?.options) {
-        for (const suboption of option?.suboptions) {
+    if (product.options.length > 0) {
+      for (const option of product.options) {
+        for (const suboption of option.suboptions) {
           subOptionPrice += suboption.quantity * suboption.price;
         }
       }
@@ -100,8 +98,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);
@@ -152,12 +150,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
@@ -203,20 +201,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>
@@ -227,7 +225,7 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
                     {t('INGREDIENTS', 'Ingredients')}:
                   </OText>
 
-                  {productInfo?.()?.ingredients?.map(
+                  {productInfo().ingredients.map(
                     (ingredient: any) =>
                       !ingredient.selected && (
                         <OText
@@ -242,9 +240,9 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
                 </ProductOptionsList>
               )}
 
-            {parseOptions?.length > 0 && (
+            {productInfo().options.length > 0 && (
               <ProductOptionsList>
-                {parseOptions?.map((option: any, i: number) => (
+                {productInfo().options.map((option: any, i: number) => (
                   <ProductOption key={option.id + i}>
                     <OText
                       size={12}
@@ -265,9 +263,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,7 +20,6 @@ interface Props {
   cover?: boolean;
   children?: any;
   borderRadius?: number;
-  borderBottomWidth?: number
 }
 
 const OImage = (props: Props): React.ReactElement => {
@@ -31,7 +30,6 @@ 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

@@ -341,6 +341,7 @@ export interface OrderDetailsParams {
   actions?: actions;
   titleAccept?: textTranslate;
   titleReject?: textTranslate;
+  titleNotReady?: textTranslate;
   appTitle?: textTranslate;
   drivers?: any;
   loadingDriver?: boolean;
@@ -520,6 +521,7 @@ interface actions {
   accept: string;
   reject: string;
   failed: string;
+  notReady: string;
 }
 
 interface textTranslate {
@@ -531,13 +533,14 @@ export interface AcceptOrRejectOrderParams {
   customerCellphone?: string;
   closeModal?: any;
   loading?: boolean;
-  action?: string;
+  action: string;
   orderId?: number;
   handleUpdateOrder?: (status: number, isAccept: any) => {};
   notShowCustomerPhone?: boolean | undefined;
   actions?: actions;
   titleAccept?: textTranslate;
   titleReject?: textTranslate;
+  titleNotReady?: textTranslate;
   appTitle?: textTranslate;
 }