ordering-ui-react-native 0.21.12 → 0.21.13-release

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

@@ -61,9 +61,14 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
   const [, { showToast }] = useToast();
   const [{ parsePrice, parseNumber }] = useUtils();
   const [{ configs }] = useConfig();
+
   const { order } = props.order
 
+  const hideTimer = configs?.hidden_driver_eta_time?.value === '1'
   const isAllowedDriverRejectOrder = configs?.allow_driver_reject_order?.value === '1'
+  const isHideRejectButtons = configs?.reject_orders_enabled && configs?.reject_orders_enabled?.value !== '1'
+  const isEnabledOrderNotReady = configs?.order_not_ready_enabled?.value === '1'
+  const isEnabledFailedPickupDriver = configs?.failed_pickup_by_driver_enabled?.value === '1'
   const theme = useTheme();
   const [, t] = useLanguage();
   const [session] = useSession();
@@ -88,9 +93,9 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
   const logisticOrderStatus = [4, 6, 7]
 
   const showFloatButtonsPickUp: any = {
-    8: true,
+    8: !isHideRejectButtons,
     3: true,
-    18: true,
+    18: !isHideRejectButtons,
   };
 
   const showFloatButtonsAcceptOrReject: any = {
@@ -113,6 +118,10 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
     readMessages && readMessages();
   };
 
+  const goToPermissionPage = () => {
+    navigation.navigate('RequestPermissions')
+  }
+
   const handleOpenMapView = async () => {
     if (!isGrantedPermissions) {
       navigation.navigate('RequestPermissions')
@@ -387,7 +396,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
   }, [props.order?.loading]);
 
   useEffect(() => {
-    if (!order?.driver_id && session?.user?.level === 4) {
+    if (order?.driver_id === null && session?.user?.level === 4) {
       setAlertState({
         open: true,
         content: [
@@ -476,13 +485,13 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
               textStyle={{ color: theme.colors.primary }}
               text={t('ARRIVED_TO_BUSINESS', 'Arrived to bussiness')}
               onClick={() =>
-                handleChangeOrderStatus && handleChangeOrderStatus(3)
+                handleChangeOrderStatus && isGrantedPermissions ? handleChangeOrderStatus(3) : goToPermissionPage()
               }
               imgLeftStyle={{ tintColor: theme.colors.backArrow }}
             />
           </Pickup>
         )}
-        {order?.status === 3 && order?.delivery_type === 1 && (
+        {order?.status === 3 && order?.delivery_type === 1 && !isHideRejectButtons && isEnabledOrderNotReady && (
           <View style={{ paddingVertical: 20, marginBottom: 20 }}>
             <OButton
               style={styles.btnPickUp}
@@ -568,7 +577,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                     btnText={t('PICKUP_FAILED', 'Pickup failed')}
                     isSecondaryBtn={false}
                     secondButtonClick={() =>
-                      handleChangeOrderStatus && handleChangeOrderStatus(9)
+                      handleChangeOrderStatus && isGrantedPermissions ? handleChangeOrderStatus(9) : goToPermissionPage()
                     }
                     firstButtonClick={() =>
                       handleViewActionOrder && handleViewActionOrder('pickupFailed')
@@ -577,7 +586,8 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                     secondButton={true}
                     firstColorCustom={theme.colors.red}
                     secondColorCustom={theme.colors.green}
-                    widthButton={'45%'}
+                    widthButton={isHideRejectButtons || !isEnabledFailedPickupDriver ? '100%' : '45%'}
+                    isHideRejectButtons={isHideRejectButtons || !isEnabledFailedPickupDriver}
                   />
                 )}
                 {(validStatusComplete.includes(order?.status)) && (
@@ -587,7 +597,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                       btnText={t('DELIVERY_FAILED', 'Delivery Failed')}
                       isSecondaryBtn={false}
                       secondButtonClick={() =>
-                        handleChangeOrderStatus && handleChangeOrderStatus(11)
+                        handleChangeOrderStatus && isGrantedPermissions ? handleChangeOrderStatus(11) : goToPermissionPage()
                       }
                       firstButtonClick={() =>
                         handleViewActionOrder && handleViewActionOrder('deliveryFailed')
@@ -596,7 +606,8 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                       secondButton={true}
                       firstColorCustom={theme.colors.red}
                       secondColorCustom={theme.colors.green}
-                      widthButton={'45%'}
+                      widthButton={isHideRejectButtons ? '100%' : '45%'}
+                      isHideRejectButtons={isHideRejectButtons}
                     />
                   </>
                 )}
@@ -604,13 +615,14 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                   <FloatingButton
                     btnText={t('REJECT', 'Reject')}
                     isSecondaryBtn={false}
-                    secondButtonClick={() => (order?.isLogistic && (order?.order_group || logisticOrderStatus.includes(order?.status))) ? handleAcceptLogisticOrder(order) : handleViewActionOrder('accept')}
+                    secondButtonClick={() => hideTimer ? handleChangeOrderStatus && handleChangeOrderStatus(8) : (order?.isLogistic && (order?.order_group || logisticOrderStatus.includes(order?.status))) ? handleAcceptLogisticOrder(order) : handleViewActionOrder('accept')}
                     firstButtonClick={() => order?.isLogistic && (order?.order_group || logisticOrderStatus.includes(order?.status)) ? handleRejectLogisticOrder() : handleViewActionOrder('reject')}
                     secondBtnText={t('ACCEPT', 'Accept')}
                     secondButton={true}
                     firstColorCustom={theme.colors.red}
                     secondColorCustom={theme.colors.green}
-                    widthButton={'45%'}
+                    widthButton={isHideRejectButtons ? '100%' : '45%'}
+                    isHideRejectButtons={isHideRejectButtons}
                   />
                 )}
               </>

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

@@ -1,6 +1,7 @@
 import React, { useState, useCallback } from 'react'
 
 import { Platform, StyleSheet, View, TouchableOpacity, ScrollView } from 'react-native';
+import AntDesignIcon from 'react-native-vector-icons/AntDesign'
 
 import { OButton, OText, OLink, OModal } from '../shared'
 import {
@@ -53,6 +54,7 @@ export const OrderContentComponent = (props: OrderContent) => {
   const WIDTH_SCREEN = orientationState?.dimensions?.width
 
   const [openReviewModal, setOpenReviewModal] = useState(false)
+  const [showCustomFields, setShowCustomFields] = useState<boolean>(false);
 
   const [isReadMore, setIsReadMore] = useState({
     customerAddress: false,
@@ -111,6 +113,7 @@ export const OrderContentComponent = (props: OrderContent) => {
   }
 
   const containsOnlyNumbers = (str: string) => {
+    str = str?.replace('+', '');
     return /^\d+$/.test(str);
   }
 
@@ -133,27 +136,36 @@ export const OrderContentComponent = (props: OrderContent) => {
 
       {order?.metafields?.length > 0 && (
         <OrderBusiness>
-          <OText style={{ marginBottom: 5 }} size={16} weight="600">
-            {t('CUSTOM_FIELDS', 'Custom fields')}
-          </OText>
-
-          {order.metafields.map((field: any) => (
-            <View
-              key={field.id}
-              style={{
-                width: '100%',
-                flexDirection: 'row',
-                marginBottom: 5
-              }}
-            >
-              <OText style={{ width: '50%' }}>
-                {field.key}
-              </OText>
-              <OText style={{ width: '45%', textAlign: 'right' }}>
-                {field.value}
-              </OText>
-            </View>
-          ))}
+          <TouchableOpacity onPress={() => setShowCustomFields((prev: boolean) => !prev)} style={{ flexDirection: 'row', width: '100%', justifyContent: 'space-between', alignItems: 'flex-start' }}>
+            <OText style={{ marginBottom: 5 }} size={16} weight="600">
+              {t('CUSTOM_FIELDS', 'Custom fields')}
+            </OText>
+            <AntDesignIcon
+              name={showCustomFields ? 'up' : 'down'}
+              size={14}
+            />
+          </TouchableOpacity>
+          {showCustomFields && (
+            <>
+              {order.metafields.map((field: any) => (
+                <View
+                  key={field.id}
+                  style={{
+                    width: '100%',
+                    flexDirection: 'row',
+                    marginBottom: 5
+                  }}
+                >
+                  <OText style={{ width: '50%' }}>
+                    {field.key}
+                  </OText>
+                  <OText style={{ width: '45%', textAlign: 'right' }}>
+                    {field.value}
+                  </OText>
+                </View>
+              ))}
+            </>
+          )}
         </OrderBusiness>
       )}
 
@@ -183,7 +195,7 @@ export const OrderContentComponent = (props: OrderContent) => {
                 <OLink
                   PressStyle={styles.linkWithIcons}
                   url={`tel:${containsOnlyNumbers(order?.business?.cellphone) ? order?.business?.cellphone : 'invalid'}`}
-                  shorcut={`${order?.business?.cellphone}`}
+                  shorcut={`${(!!order?.business?.country_phone_code && !order?.business?.cellphone?.includes('+')) ? '+' + order?.business?.country_phone_code : ''}${order?.business?.cellphone}`}
                   TextStyle={styles.textLink}
                 />
               </View>
@@ -193,8 +205,8 @@ export const OrderContentComponent = (props: OrderContent) => {
               <View style={styles.linkWithIcons}>
                 <OLink
                   PressStyle={styles.linkWithIcons}
-                  url={`tel:${containsOnlyNumbers(order?.business?.cellphone) ? order?.business?.phone : 'invalid'}`}
-                  shorcut={order?.business?.phone}
+                  url={`tel:${containsOnlyNumbers(order?.business?.phone) ? order?.business?.phone : 'invalid'}`}
+                  shorcut={`${(!!order?.business?.country_phone_code && !order?.business?.phone?.includes('+')) ? '+' + order?.business?.country_phone_code : ''}${order?.business?.phone}`}
                   TextStyle={styles.textLink}
                 />
               </View>
@@ -207,8 +219,8 @@ export const OrderContentComponent = (props: OrderContent) => {
             <OLink
               PressStyle={styles.linkWithIcons}
               url={Platform.select({
-                ios: `maps:0,0?q=${order?.business?.address}`,
-                android: `geo:0,0?q=${order?.business?.address}`,
+                ios: `maps:0,0?q=${order?.business?.address}@${order?.business?.location?.lat},${order?.business?.location?.lng}`,
+                android: `geo:0,0?q=${order?.business?.address}@${order?.business?.location?.lat},${order?.business?.location?.lng}`,
               })}
               numberOfLines={2}
               shorcut={order?.business?.address}
@@ -227,8 +239,8 @@ export const OrderContentComponent = (props: OrderContent) => {
               <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}`,
+                  ios: `maps:0,0?q=${order?.business?.address_notes}@${order?.business?.location?.lat},${order?.business?.location?.lng}`,
+                  android: `geo:0,0?q=${order?.business?.address_notes}@${order?.business?.location?.lat},${order?.business?.location?.lng}`,
                 })}
                 shorcut={order?.business?.address_notes}
                 TextStyle={styles.textLink}
@@ -325,7 +337,7 @@ export const OrderContentComponent = (props: OrderContent) => {
             <OLink
               PressStyle={styles.linkWithIcons}
               url={`tel:${!!order?.customer?.country_phone_code ? '+' + order?.customer?.country_phone_code : ''} ${containsOnlyNumbers(order?.customer?.cellphone) ? order?.customer?.cellphone : 'invalid'}`}
-              shorcut={`${!!order?.customer?.country_phone_code ? '+' + order?.customer?.country_phone_code : ''} ${order?.customer?.cellphone}`}
+              shorcut={`${!!order?.customer?.country_phone_code ? '+' + order?.customer?.country_phone_code : ''}${order?.customer?.cellphone}`}
               TextStyle={styles.textLink}
             />
           </View>
@@ -335,8 +347,8 @@ export const OrderContentComponent = (props: OrderContent) => {
           <View style={styles.linkWithIcons}>
             <OLink
               PressStyle={styles.linkWithIcons}
-              url={`tel:${containsOnlyNumbers(order?.customer?.phone) ? order?.customer?.phone : 'invalid'}`}
-              shorcut={order?.customer?.phone}
+              url={`tel:${!!order?.customer?.country_phone_code ? '+' + order?.customer?.country_phone_code : ''} ${containsOnlyNumbers(order?.customer?.phone) ? order?.customer?.phone : 'invalid'}`}
+              shorcut={`${!!order?.customer?.country_phone_code ? '+' + order?.customer?.country_phone_code : ''}${order?.customer?.phone}`}
               TextStyle={styles.textLink}
             />
           </View>
@@ -348,8 +360,8 @@ export const OrderContentComponent = (props: OrderContent) => {
               <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}`,
+                  ios: `maps:0,0?q=${order?.customer?.address}@${order?.customer?.location?.lat},${order?.customer?.location?.lng}`,
+                  android: `geo:0,0?q=${order?.customer?.address}@${order?.customer?.location?.lat},${order?.customer?.location?.lng}`,
                 })}
                 onTextLayout={e => onTextLayout(e, 'customerAddress')}
                 numberOfLines={isReadMore.customerAddress ? 20 : 2}
@@ -396,23 +408,13 @@ export const OrderContentComponent = (props: OrderContent) => {
             {t('ON_BEHALF_OF', 'On behalf of')}{': '} {order?.on_behalf_of}
           </OText>
         )}
-        {((order?.delivery_option !== undefined && order?.delivery_type === 1) || !!order?.comment) && (
+        {(order?.delivery_option !== undefined && order?.delivery_type === 1) && (
           <View style={{ marginTop: 10 }}>
             {order?.delivery_option !== undefined && order?.delivery_type === 1 && (
               <OText>
                 {t(order?.delivery_option?.name?.toUpperCase()?.replace(/ /g, '_'), order?.delivery_option?.name)}
               </OText>
             )}
-            {!!order?.comment && (
-              <>
-                <OText weight='500' style={{ marginBottom: 5 }}>
-                  {t('ORDER_COMMENT', 'Order Comment')}
-                </OText>
-                <OText style={{ fontStyle: 'italic', opacity: 0.6, marginBottom: 20 }}>
-                  {order?.comment}
-                </OText>
-              </>
-            )}
           </View>
         )}
         {!order?.user_review && pastOrderStatuses.includes(order?.status) && (
@@ -427,10 +429,16 @@ export const OrderContentComponent = (props: OrderContent) => {
       </OrderCustomer>
 
       <OrderProducts>
-        <OText style={{ marginBottom: 5 }} size={16} weight="600">
+        <OText style={{ marginBottom: 10 }} size={16} weight="600">
           {t('ORDER_DETAILS', 'Order Details')}
         </OText>
 
+        {!!order?.comment && (
+          <OText>
+            {`${t('ORDER_COMMENT', 'Order Comment')}: ${order?.comment}`}
+          </OText>
+        )}
+
         {order?.products?.length > 0 &&
           order?.products.map((product: any, i: number) => (
             <ProductItemAccordion
@@ -549,7 +557,7 @@ export const OrderContentComponent = (props: OrderContent) => {
           ))
         }
         {
-          typeof order?.summary?.delivery_price === 'number' && (
+          typeof order?.summary?.delivery_price === 'number' && order.delivery_type !== 2 && (
             <Table>
               <OText mBottom={4}>
                 {t('DELIVERY_FEE', 'Delivery Fee')}
@@ -576,7 +584,7 @@ export const OrderContentComponent = (props: OrderContent) => {
             </Table>
           ))
         }
-        {(order?.summary?.driver_tip > 0 || order?.driver_tip > 0) && (
+        {(order?.summary?.driver_tip > 0 || order?.driver_tip > 0) && order.delivery_type !== 2 && (
           <Table>
             <OText mBottom={4}>
               {t('DRIVER_TIP', 'Driver tip')}
@@ -634,13 +642,12 @@ export const OrderContentComponent = (props: OrderContent) => {
                     <OText>
                       {event?.wallet_event
                         ? walletName[event?.wallet_event?.wallet?.type]?.name
-                        : t(event?.paymethod?.name?.toUpperCase()?.replace(/ /g, '_'), event?.paymethod?.name)}
+                        : event?.paymethod?.gateway
+                          ? t(event?.paymethod?.gateway?.toUpperCase(), event?.paymethod?.name)
+                          : order?.paymethod?.id === event?.paymethod_id
+                            ? t(order?.paymethod?.gateway?.toUpperCase(), order?.paymethod?.name)
+                            : ''}
                     </OText>
-                    {/* {event?.data?.charge_id && (
-                      <OText>
-                        {`${t('CODE', 'Code')}: ${event?.data?.charge_id}`}
-                      </OText>
-                    )} */}
                   </View>
                   <OText>
                     {(event?.paymethod?.gateway === 'cash' && order?.cash)

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

@@ -49,7 +49,8 @@ export const OrderHeaderComponent = (props: OrderHeader) => {
   } = props
   const theme = useTheme();
   const [, t] = useLanguage();
-  const [{ parseDate }] = useUtils();
+  const [{ parseDate, parsePrice }] = useUtils();
+  const paymethodsLength = order?.payment_events?.filter((item: any) => item.event === 'payment')?.length
 
   const styles = StyleSheet.create({
     icons: {
@@ -120,6 +121,30 @@ export const OrderHeaderComponent = (props: OrderHeader) => {
           ? t('CURBSIDE', 'Curbside')
           : t('DRIVER_THRU', 'Driver thru')
 
+  const handlePaymethodsListString = () => {
+    const paymethodsList = order?.payment_events?.filter((item: any) => item.event === 'payment').map((paymethod: any) => {
+      return paymethod?.wallet_event
+        ? walletName[paymethod?.wallet_event?.wallet?.type]?.name
+        : paymethod?.paymethod?.gateway && paymethod?.paymethod?.gateway === 'cash' && order?.cash > 0
+          ? `${t(paymethod?.paymethod?.gateway?.toUpperCase(), paymethod?.paymethod?.name)} (${t('CASH_CHANGE_OF', 'Change of :amount:').replace(':amount:', parsePrice(order?.cash))})`
+          : paymethod?.paymethod?.gateway
+            ? t(paymethod?.paymethod?.gateway?.toUpperCase(), paymethod?.paymethod?.name)
+            : t(order?.paymethod?.gateway?.toUpperCase(), order?.paymethod?.name)
+    })
+    return paymethodsList.join(', ')
+  }
+
+  const deliveryDate = () => {
+    const dateString = order?.delivery_datetime_utc ?? order?.delivery_datetime
+    const currentDate = new Date();
+    const receivedDate: any = new Date(order?.delivery_datetime);
+
+    const formattedDate = receivedDate <= currentDate
+      ? `${t('ASAP_ABBREVIATION', 'ASAP')}(${parseDate(dateString, { utc: !!order?.delivery_datetime_utc })})`
+      : parseDate(dateString, { utc: !!order?.delivery_datetime_utc })
+    return formattedDate
+  }
+
   return (
     <>
       {!props.isCustomView && (
@@ -182,16 +207,12 @@ export const OrderHeaderComponent = (props: OrderHeader) => {
       <OrderHeader>
         {!props.isCustomView ? (
           <OText size={13} style={{ marginBottom: 5 }}>
-            {order?.delivery_datetime_utc
-              ? parseDate(order?.delivery_datetime_utc)
-              : parseDate(order?.delivery_datetime, { utc: false })}
+            {deliveryDate()}
           </OText>
         ) : (
           <Header style={{ alignItems: 'center' }}>
             <OText size={13} style={{ marginBottom: 5 }}>
-              {order?.delivery_datetime_utc
-                ? parseDate(order?.delivery_datetime_utc)
-                : parseDate(order?.delivery_datetime, { utc: false })}
+              {deliveryDate()}
             </OText>
 
             {(!order?.isLogistic || (!logisticOrderStatus?.includes(order?.status) && !order?.order_group)) && (
@@ -263,6 +284,12 @@ export const OrderHeaderComponent = (props: OrderHeader) => {
             )}
           </>
         </OText>
+        {order?.external_id && (
+          <OText size={13}>
+            <OText size={13} weight='bold'>{`${t('EXTERNAL_ID', 'External ID :')} `}</OText>
+            {order?.external_id}
+          </OText>
+        )}
         {!order?.isLogistic && !!order?.delivery_type && (!order?.order_group_id || !logisticOrderStatus?.includes(order?.status)) && (
           <>
             <OText size={13}>
@@ -275,23 +302,27 @@ 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 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
-                        ? `${walletName[event?.wallet_event?.wallet?.type]?.name} - `
-                        : walletName[event?.wallet_event?.wallet?.type]?.name
-                      : idx < order?.payment_events?.length - 1
-                        ? `${t(event?.paymethod?.name?.toUpperCase()?.replace(/ /g, '_'), event?.paymethod?.name)} - `
-                        : t(event?.paymethod?.name?.toUpperCase()?.replace(/ /g, '_'), event?.paymethod?.name)
-                  })}
+            <OText>
+              <OText size={13} weight='bold'>
+                {`${t(paymethodsLength > 1 ? 'PAYMENT_METHODS' : 'PAYMENT_METHOD', paymethodsLength > 1 ? 'Payment methods' : 'Payment method')}: `}
+              </OText>
+              {order?.payment_events?.length > 0 ? (
+                <OText size={13}>{`${handlePaymethodsListString()}`}</OText>
+              ) : (
+                <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>
-              </View>
+                {order.spot_number}
+              </OText>
             )}
           </>
         )}