ordering-ui-react-native 0.17.68 → 0.17.69-release

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

@@ -1,6 +1,6 @@
-import React, { useState } from 'react'
+import React, { useState, useCallback } from 'react'
 
-import { Platform, StyleSheet, View } from 'react-native';
+import { Platform, StyleSheet, View, TouchableOpacity, ScrollView } from 'react-native';
 
 import { OButton, OText, OLink, OModal } from '../shared'
 import {
@@ -16,18 +16,23 @@ import {
 
 import { ProductItemAccordion } from '../ProductItemAccordion';
 
-import { verifyDecimals } from '../../utils';
+import { verifyDecimals, calculateDistance, transformDistance } from '../../utils';
 
 import {
   useLanguage,
   useUtils,
   useConfig,
+  useSession
 } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
 import { ReviewCustomer } from '../ReviewCustomer'
 
 import MaterialIcon from 'react-native-vector-icons/MaterialCommunityIcons'
 
+import { DeviceOrientationMethods } from '../../../../../src/hooks/DeviceOrientation'
+
+const { useDeviceOrientation } = DeviceOrientationMethods
+
 interface OrderContent {
   order: any,
   logisticOrderStatus?: Array<number>,
@@ -38,12 +43,26 @@ interface OrderContent {
 export const OrderContentComponent = (props: OrderContent) => {
   const [, t] = useLanguage();
   const theme = useTheme()
-
+  const [{ user }] = useSession()
   const { order, logisticOrderStatus, isOrderGroup, lastOrder } = props;
   const [{ parsePrice, parseNumber }] = useUtils();
   const [{ configs }] = useConfig();
+  const [orientationState] = useDeviceOrientation();
+  const distanceUnit = configs?.distance_unit?.value
+
+  const WIDTH_SCREEN = orientationState?.dimensions?.width
+
   const [openReviewModal, setOpenReviewModal] = useState(false)
 
+  const [isReadMore, setIsReadMore] = useState({
+    customerAddress: false,
+    businessAddressNotes: false
+  })
+  const [lengthMore, setLengthMore] = useState({
+    customerAddress: false,
+    businessAddressNotes: false
+  })
+
   const pastOrderStatuses = [1, 2, 5, 6, 10, 11, 12, 16, 17]
 
   const walletName: any = {
@@ -95,10 +114,21 @@ export const OrderContentComponent = (props: OrderContent) => {
     return /^\d+$/.test(str);
   }
 
+  const onTextLayout = useCallback((e: any, item: string) => {
+    if (item === 'customerAddress') {
+      const customerAddressMore = (e.nativeEvent.lines.length == 2 && e.nativeEvent.lines[1].width > WIDTH_SCREEN * .76) || e.nativeEvent.lines.length > 2
+      setLengthMore(prev => ({ ...prev, customerAddress: customerAddressMore }))
+    }
+    if (item === 'businessAddressNotes') {
+      const businessAddressNotesMore = (e.nativeEvent.lines.length == 3 && e.nativeEvent.lines[2].width > WIDTH_SCREEN * .76) || e.nativeEvent.lines.length > 3
+      setLengthMore(prev => ({ ...prev, businessAddressNotes: businessAddressNotesMore }))
+    }
+  }, []);
+
   return (
     <OrderContent isOrderGroup={isOrderGroup} lastOrder={lastOrder}>
       {isOrderGroup && (
-        <OText size={18}>{t('ORDER', 'Order')} #{isOrderGroup ? order?.order_group_id : order?.id}</OText>
+        <OText size={18}>{t('ORDER', 'Order')} #{order?.id}</OText>
       )}
 
       {order?.metafields?.length > 0 && (
@@ -180,24 +210,40 @@ export const OrderContentComponent = (props: OrderContent) => {
                 ios: `maps:0,0?q=${order?.business?.address}`,
                 android: `geo:0,0?q=${order?.business?.address}`,
               })}
+              numberOfLines={2}
               shorcut={order?.business?.address}
               TextStyle={styles.textLink}
             />
           </View>
         )}
-
+        {!!order?.business?.location && order?.customer?.location && (
+          <OText>
+            {t('DISTANCE_TO_THE_BUSINESS', 'Distance to the business')}: {transformDistance(calculateDistance(order?.business?.location, { latitude: order?.customer?.location?.lat, longitude: order?.customer?.location?.lng }), distanceUnit)} {t(distanceUnit.toUpperCase(), distanceUnit)}
+          </OText>
+        )}
         {!!order?.business?.address_notes && (
-          <View style={styles.linkWithIcons}>
-            <OLink
-              PressStyle={styles.linkWithIcons}
-              url={Platform.select({
-                ios: `maps:0,0?q=${order?.business?.address_notes}`,
-                android: `geo:0,0?q=${order?.business?.address_notes}`,
-              })}
-              shorcut={order?.business?.address_notes}
-              TextStyle={styles.textLink}
-            />
-          </View>
+          <>
+            <View style={styles.linkWithIcons}>
+              <OLink
+                PressStyle={styles.linkWithIcons}
+                url={Platform.select({
+                  ios: `maps:0,0?q=${order?.business?.address_notes}`,
+                  android: `geo:0,0?q=${order?.business?.address_notes}`,
+                })}
+                shorcut={order?.business?.address_notes}
+                TextStyle={styles.textLink}
+                onTextLayout={e => onTextLayout(e, 'businessAddressNotes')}
+                numberOfLines={isReadMore.businessAddressNotes ? 20 : 3}
+              />
+            </View>
+            {lengthMore.businessAddressNotes && (
+              <TouchableOpacity
+                onPress={() => setIsReadMore({ ...isReadMore, businessAddressNotes: !isReadMore.businessAddressNotes })}
+              >
+                <OText size={12} color={theme.colors.statusOrderBlue}>{isReadMore.businessAddressNotes ? t('SHOW_LESS', 'Show less') : t('READ_MORE', 'Read more')}</OText>
+              </TouchableOpacity>
+            )}
+          </>
         )}
       </OrderBusiness>
 
@@ -297,17 +343,28 @@ export const OrderContentComponent = (props: OrderContent) => {
         )}
 
         {!!order?.customer?.address && (
-          <View style={styles.linkWithIcons}>
-            <OLink
-              PressStyle={styles.linkWithIcons}
-              url={Platform.select({
-                ios: `maps:0,0?q=${order?.customer?.address}`,
-                android: `geo:0,0?q=${order?.customer?.address}`,
-              })}
-              shorcut={order?.customer?.address}
-              TextStyle={styles.textLink}
-            />
-          </View>
+          <>
+            <View style={styles.linkWithIcons}>
+              <OLink
+                PressStyle={{ ...styles.linkWithIcons, marginBottom: 0 }}
+                url={Platform.select({
+                  ios: `maps:0,0?q=${order?.customer?.address}`,
+                  android: `geo:0,0?q=${order?.customer?.address}`,
+                })}
+                onTextLayout={e => onTextLayout(e, 'customerAddress')}
+                numberOfLines={isReadMore.customerAddress ? 20 : 2}
+                shorcut={order?.customer?.address}
+                TextStyle={styles.textLink}
+              />
+            </View>
+            {lengthMore.customerAddress && (
+              <TouchableOpacity
+                onPress={() => setIsReadMore({ ...isReadMore, customerAddress: !isReadMore.customerAddress })}
+              >
+                <OText size={12} color={theme.colors.statusOrderBlue}>{isReadMore.customerAddress ? t('SHOW_LESS', 'Show less') : t('READ_MORE', 'Read more')}</OText>
+              </TouchableOpacity>
+            )}
+          </>
         )}
 
         {!!order?.customer?.internal_number && (
@@ -317,9 +374,15 @@ export const OrderContentComponent = (props: OrderContent) => {
         )}
 
         {!!order?.customer?.address_notes && (
-          <OText numberOfLines={1} mBottom={4} ellipsizeMode="tail">
-            {order?.customer?.address_notes}
-          </OText>
+          <ScrollView
+            showsVerticalScrollIndicator={false}
+            showsHorizontalScrollIndicator={false}
+            horizontal
+          >
+            <OText numberOfLines={1} mBottom={4} ellipsizeMode="tail">
+              {order?.customer?.address_notes}
+            </OText>
+          </ScrollView>
         )}
 
         {!!order?.customer?.zipcode && (
@@ -486,7 +549,7 @@ export const OrderContentComponent = (props: OrderContent) => {
           ))
         }
         {
-          order?.summary?.delivery_price > 0 && (
+          typeof order?.summary?.delivery_price === 'number' && (
             <Table>
               <OText mBottom={4}>
                 {t('DELIVERY_FEE', 'Delivery Fee')}
@@ -513,15 +576,14 @@ export const OrderContentComponent = (props: OrderContent) => {
             </Table>
           ))
         }
-        {order?.summary?.driver_tip > 0 && (
+        {(order?.summary?.driver_tip > 0 || order?.driver_tip > 0) && (
           <Table>
             <OText mBottom={4}>
               {t('DRIVER_TIP', 'Driver tip')}
-              {order?.summary?.driver_tip > 0 &&
-                parseInt(configs?.driver_tip_type?.value, 10) === 2 &&
+              {order?.driver_tip > 0 && parseInt(configs?.driver_tip_type?.value, 10) === 2 &&
                 !parseInt(configs?.driver_tip_use_custom?.value, 10) &&
                 (
-                  `(${verifyDecimals(order?.summary?.driver_tip, parseNumber)}%)`
+                  `(${verifyDecimals(order?.driver_tip, parseNumber)}%)`
                 )}
             </OText>
             <OText mBottom={4}>{parsePrice(order?.summary?.driver_tip ?? order?.totalDriverTip, { currency: order?.currency })}</OText>
@@ -574,14 +636,16 @@ export const OrderContentComponent = (props: OrderContent) => {
                         ? walletName[event?.wallet_event?.wallet?.type]?.name
                         : t(event?.paymethod?.name?.toUpperCase()?.replace(/ /g, '_'), event?.paymethod?.name)}
                     </OText>
-                    {event?.data?.charge_id && (
+                    {/* {event?.data?.charge_id && (
                       <OText>
                         {`${t('CODE', 'Code')}: ${event?.data?.charge_id}`}
                       </OText>
-                    )}
+                    )} */}
                   </View>
                   <OText>
-                    -{parsePrice(event.amount, { currency: order?.currency })}
+                    {(event?.paymethod?.gateway === 'cash' && order?.cash)
+                      ? parsePrice(order?.cash, { currency: order?.currency })
+                      : `-${parsePrice(event?.amount, { currency: order?.currency })}`}
                   </OText>
                 </View>
               ))}

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>

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

@@ -0,0 +1,195 @@
+//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,
+} 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 [alertState, setAlertState] = useState<{
+        open: boolean;
+        content: Array<string>;
+        key?: string | null;
+    }>({ open: false, content: [], key: null });
+
+    const logisticOrderStatus = [4, 6, 7]
+
+    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={'45%'}
+                                    />
+                                )}
+                            </>
+                        )}
+                    </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;
+`;