ordering-ui-react-native 0.17.90 → 0.17.91-release

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

@@ -9,12 +9,15 @@ import {
 
 //Components
 import {
+  OIcon,
   OIconButton,
   OText,
 } from '../shared'
 
 import { useTheme } from 'styled-components/native';
-import { StyleSheet, View } from 'react-native';
+import { StyleSheet, TouchableOpacity, View } from 'react-native';
+import SimpleLineIcons from 'react-native-vector-icons/SimpleLineIcons'
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons'
 
 import {
   useLanguage,
@@ -54,6 +57,19 @@ export const OrderHeaderComponent = (props: OrderHeader) => {
       height: 40,
       padding: 10,
       alignItems: 'flex-end',
+      color: theme.colors.textGray,
+    },
+    btnBackArrow: {
+      borderWidth: 0,
+      width: 32,
+      height: 32,
+      tintColor: theme.colors.textGray,
+      backgroundColor: theme.colors.clear,
+      borderColor: theme.colors.clear,
+      shadowColor: theme.colors.clear,
+      paddingLeft: 0,
+      paddingRight: 0,
+      marginTop: 10
     },
   })
 
@@ -108,42 +124,32 @@ export const OrderHeaderComponent = (props: OrderHeader) => {
     <>
       {!props.isCustomView && (
         <Header>
-          <OIconButton
-            icon={theme.images.general.arrow_left}
-            iconStyle={{ width: 20, height: 20 }}
-            borderColor={theme.colors.clear}
-            style={{ ...styles.icons, justifyContent: 'flex-end' }}
-            onClick={() => handleArrowBack()}
-          />
-
+          <TouchableOpacity onPress={() => handleArrowBack()} style={styles.btnBackArrow}>
+            <OIcon src={theme.images.general.arrow_left} color={theme.colors.textGray} />
+          </TouchableOpacity>
           {(!order?.isLogistic || (!logisticOrderStatus?.includes(order?.status) && !order?.order_group)) && (
             <Actions>
               {getOrderStatus(order?.status, t)?.value !==
                 t('PENDING', 'Pending') && (
                   <>
-                    <OIconButton
-                      icon={theme.images.general.copy}
-                      iconStyle={{
-                        width: 20,
-                        height: 25,
-                        top: 2,
-                        tintColor: theme.colors.backArrow,
-                      }}
-                      borderColor={theme.colors.clear}
-                      style={styles.icons}
-                      onClick={() => handleCopyClipboard?.()}
-                    />
-                    <OIconButton
-                      icon={theme.images.general.print}
-                      iconStyle={{
-                        width: 25,
-                        height: 22,
-                        tintColor: theme.colors.backArrow,
-                      }}
-                      borderColor={theme.colors.clear}
-                      style={styles.icons}
-                      onClick={() => handleViewSummaryOrder?.()}
-                    />
+                    <TouchableOpacity onPress={() => handleCopyClipboard?.()}>
+                      <MaterialCommunityIcons
+                        name='content-copy'
+                        color={theme.colors.textGray}
+                        size={20}
+                        style={styles.icons}
+                      />
+                    </TouchableOpacity>
+                    {!!handleViewSummaryOrder && (
+                      <TouchableOpacity onPress={() => handleViewSummaryOrder?.()}>
+                        <SimpleLineIcons
+                          name='printer'
+                          color={theme.colors.textGray}
+                          size={20}
+                          style={styles.icons}
+                        />
+                      </TouchableOpacity>
+                    )}
                   </>
                 )}
               <OIconButton
@@ -151,7 +157,7 @@ export const OrderHeaderComponent = (props: OrderHeader) => {
                 iconStyle={{
                   width: 20,
                   height: 20,
-                  tintColor: theme.colors.backArrow,
+                  tintColor: theme.colors.textGray,
                 }}
                 borderColor={theme.colors.clear}
                 style={styles.icons}
@@ -163,7 +169,7 @@ export const OrderHeaderComponent = (props: OrderHeader) => {
                 iconStyle={{
                   width: 20,
                   height: 20,
-                  tintColor: theme.colors.backArrow,
+                  tintColor: theme.colors.textGray,
                 }}
                 borderColor={theme.colors.clear}
                 style={styles.icons}
@@ -193,29 +199,24 @@ export const OrderHeaderComponent = (props: OrderHeader) => {
                 {getOrderStatus(order?.status, t)?.value !==
                   t('PENDING', 'Pending') && (
                     <>
-                      <OIconButton
-                        icon={theme.images.general.copy}
-                        iconStyle={{
-                          width: 20,
-                          height: 25,
-                          top: 2,
-                          tintColor: theme.colors.backArrow,
-                        }}
-                        borderColor={theme.colors.clear}
-                        style={styles.icons}
-                        onClick={() => handleCopyClipboard?.()}
-                      />
-                      <OIconButton
-                        icon={theme.images.general.print}
-                        iconStyle={{
-                          width: 25,
-                          height: 22,
-                          tintColor: theme.colors.backArrow,
-                        }}
-                        borderColor={theme.colors.clear}
-                        style={styles.icons}
-                        onClick={() => handleViewSummaryOrder?.()}
-                      />
+                      <TouchableOpacity onPress={() => handleCopyClipboard?.()}>
+                        <MaterialCommunityIcons
+                          name='content-copy'
+                          color={theme.colors.textGray}
+                          size={20}
+                          style={styles.icons}
+                        />
+                      </TouchableOpacity>
+                      {!!handleViewSummaryOrder && (
+                        <TouchableOpacity onPress={() => handleViewSummaryOrder?.()}>
+                          <SimpleLineIcons
+                            name='printer'
+                            color={theme.colors.textGray}
+                            size={20}
+                            style={styles.icons}
+                          />
+                        </TouchableOpacity>
+                      )}
                     </>
                   )}
                 <OIconButton
@@ -223,7 +224,7 @@ export const OrderHeaderComponent = (props: OrderHeader) => {
                   iconStyle={{
                     width: 20,
                     height: 20,
-                    tintColor: theme.colors.backArrow,
+                    tintColor: theme.colors.textGray,
                   }}
                   borderColor={theme.colors.clear}
                   style={styles.icons}
@@ -235,7 +236,7 @@ export const OrderHeaderComponent = (props: OrderHeader) => {
                   iconStyle={{
                     width: 20,
                     height: 20,
-                    tintColor: theme.colors.backArrow,
+                    tintColor: theme.colors.textGray,
                   }}
                   borderColor={theme.colors.clear}
                   style={styles.icons}
@@ -262,7 +263,7 @@ export const OrderHeaderComponent = (props: OrderHeader) => {
             )}
           </>
         </OText>
-        {!order?.isLogistic && order?.delivery_type && (!order?.order_group_id || !logisticOrderStatus?.includes(order?.status)) && (
+        {!order?.isLogistic && !!order?.delivery_type && (!order?.order_group_id || !logisticOrderStatus?.includes(order?.status)) && (
           <>
             <OText size={13}>
               <OText size={13} weight='bold'>{`${t('ORDER_TYPE', 'Order Type')}: `}</OText>
@@ -274,12 +275,12 @@ export const OrderHeaderComponent = (props: OrderHeader) => {
                 {t(order?.delivery_option?.name?.toUpperCase()?.replace(/ /g, '_'), order?.delivery_option?.name)}
               </OText>
             )}
-            {order?.payment_events?.length > 0 && (
-              <View>
+            <OText>
+              <OText size={13} weight='bold'>
+                {`${t('PAYMENT_METHODS', 'Payment methods')}: `}
+              </OText>
+              {order?.payment_events?.length > 0 ? (
                 <OText size={13}>
-                  <OText size={13} weight='bold'>
-                    {`${t('PAYMENT_METHODS', 'Payment methods')}: `}
-                  </OText>
                   {order?.payment_events?.map((event: any, idx: number) => {
                     return event?.wallet_event
                       ? idx < order?.payment_events?.length - 1
@@ -290,7 +291,21 @@ export const OrderHeaderComponent = (props: OrderHeader) => {
                         : t(event?.paymethod?.name?.toUpperCase()?.replace(/ /g, '_'), event?.paymethod?.name)
                   })}
                 </OText>
-              </View>
+              ) : (
+                <OText size={13}>{t(order?.paymethod?.gateway?.toUpperCase(), order?.paymethod?.name)}</OText>
+              )}
+            </OText>
+            {order?.spot_number && (
+              <OText size={13}>
+                <OText size={13} weight='bold'>
+                  {`${order?.delivery_type === 3
+                    ? t('EATIN_SPOT_NUMBER', 'Table number')
+                    : order?.delivery_type === 5
+                      ? t('DRIVE_THRU_SPOT_NUMBER', 'Drive thru lane')
+                      : t('CURBSIDE_SPOT_NUMBER', 'Spot number')}: `}
+                </OText>
+                {order.spot_number}
+              </OText>
             )}
           </>
         )}

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

@@ -0,0 +1,200 @@
+//React & React Native
+import React, { useState, useEffect } from 'react';
+import { View } from 'react-native';
+
+// Thirds
+import { Placeholder, PlaceholderLine, Fade } from 'rn-placeholder';
+
+//OrderingComponent
+import {
+    useLanguage,
+    OrderDetails as OrderDetailsConTableoller,
+    useSession,
+    useConfig
+} from 'ordering-components/native';
+
+//Components
+import Alert from '../../providers/AlertProvider';
+import { FloatingButton } from '../FloatingButton';
+import { OrderDetailsLogisticParams } from '../../types';
+import { useTheme } from 'styled-components/native';
+import { NotFoundSource } from '../NotFoundSource';
+import { getOrderStatus } from '../../utils';
+import { OrderHeaderComponent } from '../OrderDetails/OrderHeaderComponent';
+import { OrderContentComponent } from '../OrderDetails/OrderContentComponent';
+//Styles
+import { OrderDetailsContainer } from './styles';
+
+export const OrderDetailsLogisticUI = (props: OrderDetailsLogisticParams) => {
+    const {
+        navigation,
+        handleClickLogisticOrder,
+        orderAssingId,
+    } = props;
+    const { order } = props.order
+    const theme = useTheme();
+    const [, t] = useLanguage();
+    const [session] = useSession();
+    const [{ configs }] = useConfig();
+
+    const [alertState, setAlertState] = useState<{
+        open: boolean;
+        content: Array<string>;
+        key?: string | null;
+    }>({ open: false, content: [], key: null });
+
+    const logisticOrderStatus = [4, 6, 7]
+    const isHideRejectButtons = configs?.reject_orders_enabled && configs?.reject_orders_enabled?.value !== '1'
+
+    const showFloatButtonsAcceptOrReject: any = {
+        0: true,
+        4: true,
+        7: true,
+        14: true
+    };
+
+    const handleArrowBack: any = () => {
+        navigation?.canGoBack() && navigation.goBack();
+    };
+
+    const handleRejectLogisticOrder = (order: any) => {
+        handleClickLogisticOrder?.(2, orderAssingId || order?.logistic_order_id, order)
+        handleArrowBack()
+    }
+
+    const handleAcceptLogisticOrder = (order: any) => {
+        handleClickLogisticOrder?.(1, orderAssingId || order?.logistic_order_id, order)
+        handleArrowBack()
+    }
+
+    useEffect(() => {
+        if (order?.driver === null && session?.user?.level === 4) {
+            setAlertState({
+                open: true,
+                content: [
+                    t(
+                        'YOU_HAVE_BEEN_REMOVED_FROM_THE_ORDER',
+                        'You have been removed from the order',
+                    ),
+                ],
+                key: null,
+            });
+        }
+    }, [order?.driver]);
+
+    const OrderDetailsInformation = (props: { order: any, isOrderGroup?: boolean, lastOrder?: boolean }) => {
+        const {
+            order,
+            isOrderGroup,
+            lastOrder,
+        } = props
+        return (
+            <>
+                <OrderContentComponent
+                    order={order}
+                    logisticOrderStatus={logisticOrderStatus}
+                    isOrderGroup={isOrderGroup}
+                    lastOrder={lastOrder}
+                />
+                <View
+                    style={{
+                        height:
+                            order?.status === 8 && order?.delivery_type === 1 ? 50 : 35,
+                    }}
+                />
+
+            </>
+        )
+    }
+
+    return (
+        <>
+            {(!order || Object.keys(order).length === 0) &&
+                (props.order?.error?.length < 1 || !props.order?.error) && (
+                    <View style={{ flex: 1 }}>
+                        {[...Array(6)].map((item, i) => (
+                            <Placeholder key={i} Animation={Fade}>
+                                <View style={{ flexDirection: 'row', paddingVertical: 20 }}>
+                                    <Placeholder>
+                                        <PlaceholderLine width={100} />
+                                        <PlaceholderLine width={70} />
+                                        <PlaceholderLine width={30} />
+                                        <PlaceholderLine width={20} />
+                                    </Placeholder>
+                                </View>
+                            </Placeholder>
+                        ))}
+                    </View>
+                )}
+
+            {(!!props.order?.error || props.order?.error) && (
+                <NotFoundSource
+                    btnTitle={t('GO_TO_MY_ORDERS', 'Go to my orders')}
+                    content={
+                        props.order.error[0] ||
+                        props.order.error ||
+                        t('NETWORK_ERROR', 'Network Error')
+                    }
+                    onClickButton={() => navigation.navigate('Orders')}
+                />
+            )}
+            {!((!order || Object.keys(order).length === 0) &&
+                (props.order?.error?.length < 1 || !props.order?.error)) && (
+                    <View style={{ flex: 1 }}>
+                        <OrderHeaderComponent
+                            order={order}
+                            getOrderStatus={getOrderStatus}
+                            handleArrowBack={handleArrowBack}
+                            logisticOrderStatus={logisticOrderStatus}
+                        />
+                        {order && Object.keys(order).length > 0 && (props.order?.error?.length < 1 || !props.order?.error) && (
+                            <>
+                                <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>
+
+                                {showFloatButtonsAcceptOrReject[order?.status] && (
+                                    <FloatingButton
+                                        btnText={t('REJECT', 'Reject')}
+                                        isSecondaryBtn={false}
+                                        secondButtonClick={() => handleAcceptLogisticOrder(order)}
+                                        firstButtonClick={() => handleRejectLogisticOrder(order)}
+                                        secondBtnText={t('ACCEPT', 'Accept')}
+                                        secondButton={true}
+                                        firstColorCustom={theme.colors.red}
+                                        secondColorCustom={theme.colors.green}
+                                        widthButton={isHideRejectButtons ? '100%': '45%'}
+                                        isHideRejectButtons={isHideRejectButtons}
+                                    />
+                                )}
+                            </>
+                        )}
+                    </View>
+                )}
+            {alertState?.open && (
+                <Alert
+                    open={alertState.open}
+                    onAccept={handleArrowBack}
+                    onClose={handleArrowBack}
+                    content={alertState.content}
+                    title={t('WARNING', 'Warning')}
+                />
+            )}
+        </>
+    );
+};
+
+export const OrderDetailsLogistic = (props: OrderDetailsLogisticParams) => {
+    const orderDetailsProps = {
+        ...props,
+        UIComponent: OrderDetailsLogisticUI,
+    };
+    return <OrderDetailsConTableoller {...orderDetailsProps} />;
+};

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

@@ -0,0 +1,5 @@
+import styled from 'styled-components/native';
+
+export const OrderDetailsContainer = styled.ScrollView`
+  flex: 1;
+`;

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

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { Placeholder, PlaceholderLine, Fade } from 'rn-placeholder';
 import { Chat } from '../Chat';
-import { StyleSheet, View, BackHandler } from 'react-native';
+import { StyleSheet, View, BackHandler, TouchableOpacity } from 'react-native';
 import {
   useLanguage,
   OrderDetails as OrderDetailsController,
@@ -9,7 +9,7 @@ import {
 } from 'ordering-components/native';
 import { useUtils } from 'ordering-components/native';
 
-import { OIcon, OIconButton, OText } from '../shared';
+import { OIcon, OText } from '../shared';
 import { OrderDetailsParams } from '../../types';
 import { USER_TYPE } from '../../config/constants';
 import { useTheme } from 'styled-components/native';
@@ -146,13 +146,6 @@ export const OrderMessageUI = (props: OrderDetailsParams) => {
       shadowRadius: 3.84,
       elevation: 3,
     },
-    cancelBtn: {
-      marginRight: 5,
-      zIndex: 10000,
-      height: 30,
-      width: 20,
-      justifyContent: 'flex-end',
-    },
     modalText: {
       fontFamily: 'Poppins',
       fontStyle: 'normal',
@@ -161,6 +154,18 @@ export const OrderMessageUI = (props: OrderDetailsParams) => {
       textAlign: 'center',
       zIndex: 10,
     },
+    btnBackArrow: {
+      borderWidth: 0,
+      width: 32,
+      height: 32,
+      tintColor: theme.colors.textGray,
+      backgroundColor: theme.colors.clear,
+      borderColor: theme.colors.clear,
+      shadowColor: theme.colors.clear,
+      paddingLeft: 0,
+      paddingRight: 0,
+      marginTop: 10
+    },
   });
 
   return (
@@ -260,13 +265,9 @@ export const OrderMessageUI = (props: OrderDetailsParams) => {
         <>
           <View style={styles.titleSection}>
             <View style={styles.titleGroups}>
-              <OIconButton
-                icon={theme.images.general.arrow_left}
-                iconStyle={{ width: 23, height: 23 }}
-                borderColor={theme.colors.clear}
-                style={styles.cancelBtn}
-                onClick={handleArrowBack}
-              />
+              <TouchableOpacity onPress={() => handleArrowBack()} style={styles.btnBackArrow}>
+                <OIcon src={theme.images.general.arrow_left} color={theme.colors.textGray} />
+              </TouchableOpacity>
 
               <OText size={16} style={styles.modalText} adjustsFontSizeToFit>
                 {`${t('INVOICE_ORDER_NO', 'Order No.')} ${order?.id}`}
@@ -275,7 +276,7 @@ export const OrderMessageUI = (props: OrderDetailsParams) => {
 
             <View style={styles.titleGroups}>
               <View style={styles.shadow}>
-                {order?.business?.logo ? (
+                {!!order?.business?.logo ? (
                   <OIcon
                     url={optimizeImage(order?.business?.logo, 'h_300,c_limit')}
                     style={styles.titleIcons}
@@ -292,7 +293,7 @@ export const OrderMessageUI = (props: OrderDetailsParams) => {
                 <OIcon
                   url={optimizeImage(
                     order?.customer?.photo ||
-                      theme?.images?.dummies?.customerPhoto,
+                    theme?.images?.dummies?.customerPhoto,
                     'h_300,c_limit',
                   )}
                   style={styles.titleIcons}