ordering-ui-react-native 0.16.70 → 0.16.71-release

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

@@ -10,7 +10,9 @@ export const OrdersOptionCityUI = (props: any) => {
   const {
     search,
     onSearch,
-    allListValues
+    allListValues,
+    setOpenedSelect,
+    openedSelect
   } = props
 
   const theme = useTheme();
@@ -27,6 +29,14 @@ export const OrdersOptionCityUI = (props: any) => {
     setOptionsList(cities)
   }, [allListValues?.countries])
 
+  const handleClear = () => {
+    onSearch({ ...search, city: '' })
+  }
+
+  const handleOpenSelect = () => {
+    setOpenedSelect('city')
+  }
+
   return (
     <Container isIos={Platform.OS === 'ios'}>
       <ODropDown
@@ -38,6 +48,10 @@ export const OrdersOptionCityUI = (props: any) => {
         textcolor={theme.colors.unselectText}
         placeholder={t('SELECT_CITY', 'Select City')}
         dropViewMaxHeight={200}
+        handleClear={handleClear}
+        handleOpenSelect={handleOpenSelect}
+        openedSelect={openedSelect}
+        selectType='city'
       />
     </Container>
   );

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

@@ -3,12 +3,16 @@ import { useLanguage } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
 import { Container } from './styles';
 import ODropDownCalendar from '../shared/ODropDownCalendar';
-import { Platform } from 'react-native'
-
+import { Button, Platform, Touchable, TouchableOpacity, View } from 'react-native'
+import DoubleClick from 'react-native-double-tap'
+import { OText } from '../shared';
+import DoubleTap from 'react-native-double-tap';
 export const OrdersOptionDate = (props: any) => {
   const {
     search,
-    onSearch
+    onSearch,
+    setOpenedSelect,
+    openedSelect
   } = props
 
   const theme = useTheme();
@@ -22,18 +26,23 @@ export const OrdersOptionDate = (props: any) => {
 
   const handleChangeOption = (option: any) => {
     if (option === 'calendar') {
-      onSearch({...search, date: {...search.date, type: option}})
+      onSearch({ ...search, date: { ...search.date, type: option } })
     } else {
-      onSearch({...search, date: {from: '', to: '', type: option}})
+      onSearch({ ...search, date: { from: '', to: '', type: option } })
     }
   }
 
   const handleChangeDate = (from: any, to: any) => {
-    onSearch({...search, date: {...search.date, from: from, to: to}})
+    onSearch({ ...search, date: { ...search.date, from: from, to: to } })
+  }
+
+  const handleOpenSelect = () => {
+    setOpenedSelect('calendar')
   }
 
   return (
     <Container isIos={Platform.OS === 'ios'}>
+
       <ODropDownCalendar
         options={optionsList}
         defaultValue={search.date.type}
@@ -47,6 +56,10 @@ export const OrdersOptionDate = (props: any) => {
         rangeDate={search.date}
         handleChangeDate={handleChangeDate}
         isCalendarAlwaysVisible
+        handleClear={() => onSearch({ ...search, date: { from: '', to: '', type: '' } })}
+        handleOpenSelect={handleOpenSelect}
+        openedSelect={openedSelect}
+        selectType='calendar'
       />
     </Container>
   );

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

@@ -8,7 +8,9 @@ import { Platform } from 'react-native'
 export const OrdersOptionDelivery = (props: any) => {
   const {
     search,
-    onSearch
+    onSearch,
+    setOpenedSelect,
+    openedSelect
   } = props
 
   const theme = useTheme();
@@ -18,6 +20,14 @@ export const OrdersOptionDelivery = (props: any) => {
     { value: '2', content: t('PICKUP', 'Pickup') }
   ]
 
+  const handleClear = () => {
+    onSearch({ ...search, delivery_type: '' })
+  }
+
+  const handleOpenSelect = () => {
+    setOpenedSelect('delivery_type')
+  }
+
   return (
     <Container isIos={Platform.OS === 'ios'}>
       <ODropDown
@@ -29,6 +39,10 @@ export const OrdersOptionDelivery = (props: any) => {
         textcolor={theme.colors.unselectText}
         placeholder={t('SELECT_DELIVERY_TYPE', 'Select Delivery type')}
         dropViewMaxHeight={200}
+        handleClear={handleClear}
+        handleOpenSelect={handleOpenSelect}
+        openedSelect={openedSelect}
+        selectType='delivery_type'
       />
     </Container>
   );

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

@@ -9,7 +9,9 @@ export const OrdersOptionDriverUI = (props: any) => {
   const {
     search,
     onSearch,
-    driverList
+    driverList,
+    setOpenedSelect,
+    openedSelect
   } = props
 
   const theme = useTheme();
@@ -24,6 +26,14 @@ export const OrdersOptionDriverUI = (props: any) => {
     setOptionsList(drivers)
   }, [driverList?.drivers])
 
+  const handleClear = () => {
+    onSearch({ ...search, driver: '' })
+  }
+
+  const handleOpenSelect = () => {
+    setOpenedSelect('driver')
+  }
+
   return (
     <Container isIos={Platform.OS === 'ios'}>
       <ODropDown
@@ -35,6 +45,10 @@ export const OrdersOptionDriverUI = (props: any) => {
         textcolor={theme.colors.unselectText}
         placeholder={t('SELECT_DRIVER', 'Select Driver')}
         dropViewMaxHeight={165}
+        handleClear={handleClear}
+        handleOpenSelect={handleOpenSelect}
+        openedSelect={openedSelect}
+        selectType='driver'
       />
     </Container>
   );

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

@@ -9,7 +9,9 @@ export const OrdersOptionPaymethodUI = (props: any) => {
   const {
     search,
     onSearch,
-    paymethodList
+    paymethodList,
+    setOpenedSelect,
+    openedSelect
   } = props
 
   const theme = useTheme();
@@ -24,6 +26,14 @@ export const OrdersOptionPaymethodUI = (props: any) => {
     setOptionsList(paymethods)
   }, [paymethodList?.paymethods])
 
+  const handleClear = () => {
+    onSearch({ ...search, paymethod: '' })
+  }
+
+  const handleOpenSelect = () => {
+    setOpenedSelect('paymethod')
+  }
+
   return (
     <Container isIos={Platform.OS === 'ios'}>
       <ODropDown
@@ -35,6 +45,10 @@ export const OrdersOptionPaymethodUI = (props: any) => {
         textcolor={theme.colors.unselectText}
         placeholder={t('SELECT_PAYMETHOD', 'Select Paymethod')}
         dropViewMaxHeight={200}
+        handleClear={handleClear}
+        handleOpenSelect={handleOpenSelect}
+        openedSelect={openedSelect}
+        selectType='paymethod'
       />
     </Container>
   );

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

@@ -11,7 +11,9 @@ export const OrdersOptionStatus = (props: any) => {
     tabs,
     orderStatus,
     search,
-    onSearch
+    onSearch,
+    setOpenedSelect,
+    openedSelect
   } = props
 
   const theme = useTheme();
@@ -29,6 +31,10 @@ export const OrdersOptionStatus = (props: any) => {
     setOptionsList(_optionList)
   }, [currentTabSelected, tabs, orderStatus])
 
+  const handleOpenSelect = () => {
+    setOpenedSelect('state')
+  }
+
   return (
     <Container isIos={Platform.OS === 'ios'}>
       <ODropDown
@@ -40,6 +46,9 @@ export const OrdersOptionStatus = (props: any) => {
         textcolor={theme.colors.unselectText}
         placeholder={t('SELECT_STATUS', 'Select Status')}
         dropViewMaxHeight={200}
+        handleOpenSelect={handleOpenSelect}
+        openedSelect={openedSelect}
+        selectType='state'
       />
     </Container>
   );

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

@@ -176,17 +176,17 @@ export const PreviousMessages = (props: PreviousMessagesParams) => {
         slug: 'ORDER_CUSTOMER_ARRIVED_BUSINESS',
         percentage: 95,
       },
-      { 
-        key: 22, 
-        value: t('ORDER_LOOKING_FOR_DRIVER', 'Looking for driver'), 
-        slug: 'ORDER_LOOKING_FOR_DRIVER', 
+      {
+        key: 22,
+        value: t('ORDER_LOOKING_FOR_DRIVER', 'Looking for driver'),
+        slug: 'ORDER_LOOKING_FOR_DRIVER',
         percentage: 35
       },
-      { 
-        key: 23, 
-        value: t('ORDER_DRIVER_ON_WAY', 'Driver on way'), 
-        slug: 'ORDER_DRIVER_ON_WAY', 
-        percentage: 45 
+      {
+        key: 23,
+        value: t('ORDER_DRIVER_ON_WAY', 'Driver on way'),
+        slug: 'ORDER_DRIVER_ON_WAY',
+        percentage: 45
       }
     ];
 
@@ -230,6 +230,7 @@ export const PreviousMessages = (props: PreviousMessagesParams) => {
       fontWeight: '600',
       fontSize: 16,
       color: theme.colors.textGray,
+      width: '85%'
     },
     badge: {
       marginBottom: 6,
@@ -265,15 +266,13 @@ export const PreviousMessages = (props: PreviousMessagesParams) => {
             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>
-              )}
-
+              <Logo style={styles.logo}>
+                <OIcon
+                  url={optimizeImage(order?.business?.logo, 'h_300,c_limit')}
+                  src={!order?.business?.logo && theme?.images?.dummies?.businessLogo}
+                  style={styles.icon}
+                />
+              </Logo>
               <Information>
                 <Header>
                   <OText numberOfLines={1} style={styles.title}>

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

@@ -0,0 +1,250 @@
+import React, { useEffect, useState } from 'react';
+import { Platform, PlatformIOSStatic, StyleSheet, TouchableOpacity, View } from 'react-native';
+import DeviceInfo from 'react-native-device-info';
+import { useTheme } from 'styled-components/native';
+import { useLanguage, useUtils, useConfig } from 'ordering-components/native';
+import EntypoIcon from 'react-native-vector-icons/Entypo'
+import FastImage from 'react-native-fast-image'
+import moment from 'moment'
+
+import {
+  Card,
+  Logo,
+  Information,
+  MyOrderOptions,
+  NotificationIcon,
+  Timestatus
+} from './styles'
+
+import { OText } from '../shared';
+import { DeviceOrientationMethods } from '../../../../../src/hooks/DeviceOrientation'
+
+const { useDeviceOrientation, PORTRAIT } = DeviceOrientationMethods
+
+export const OrderItem = (props: any) => {
+  const {
+    order,
+    _order,
+    isLogisticOrder,
+    currentTabSelected,
+    getOrderStatus,
+    handlePressOrder
+  } = props
+
+  const theme = useTheme()
+  const [, t] = useLanguage()
+  const [configState] = useConfig()
+  const [{ parseDate, optimizeImage }] = useUtils();
+  const [orientationState] = useDeviceOrientation();
+
+  const [allowColumns, setAllowColumns] = useState({
+    timer: configState?.configs?.order_deadlines_enabled?.value === '1',
+    slaBar: configState?.configs?.order_deadlines_enabled?.value === '1',
+  })
+
+  const IS_PORTRAIT = orientationState.orientation === PORTRAIT
+  const platformIOS = Platform as PlatformIOSStatic
+
+  const isIpad = platformIOS.isPad
+  const isTablet = DeviceInfo.isTablet();
+
+  const styles = StyleSheet.create({
+    cardButton: {
+      flex: 1,
+      paddingVertical: (isIpad || isTablet) ? 20 : 0,
+      marginBottom: IS_PORTRAIT ? 25 : 0,
+      marginLeft: 3,
+    },
+    icon: {
+      borderRadius: 7.6,
+      width: 60,
+      height: 60
+    },
+    logo: {
+      borderRadius: 10,
+      shadowColor: "#0000006e",
+      shadowRadius: 10,
+      elevation: 15,
+      justifyContent: 'center',
+      alignItems: 'center',
+      marginLeft: 3,
+    },
+    title: {
+      marginBottom: 6,
+      fontFamily: 'Poppins',
+      fontStyle: 'normal',
+      fontWeight: '600',
+      fontSize: 16,
+      color: theme.colors.textGray,
+    },
+    date: {
+      marginBottom: 6,
+      fontFamily: 'Poppins',
+      fontStyle: 'normal',
+      fontWeight: 'normal',
+      fontSize: 12,
+    },
+    orderType: {
+      fontSize: 12,
+      fontFamily: 'Poppins',
+      fontStyle: 'normal',
+      fontWeight: 'normal',
+      color: theme.colors.orderTypeColor,
+    },
+  });
+
+  const getDelayMinutes = (order: any) => {
+    const offset = 300
+    const cdtToutc = moment(order?.delivery_datetime).add(offset, 'minutes').format('YYYY-MM-DD HH:mm:ss')
+    const _delivery = order?.delivery_datetime_utc
+      ? parseDate(order?.delivery_datetime_utc, { outputFormat: 'YYYY-MM-DD hh:mm A' })
+      : parseDate(cdtToutc, { outputFormat: 'YYYY-MM-DD hh:mm A' })
+    const _eta = order?.eta_time
+    const diffTimeAsSeconds = moment(_delivery, 'YYYY-MM-DD hh:mm A').add(_eta, 'minutes').diff(moment().utc(), 'seconds')
+    return Math.ceil(diffTimeAsSeconds / 60)
+  }
+
+  const displayDelayedTime = (order: any) => {
+    let tagetedMin = getDelayMinutes(order)
+    // get day, hour and minutes
+    const sign = tagetedMin >= 0 ? '' : '- '
+    tagetedMin = Math.abs(tagetedMin)
+    let day: string | number = Math.floor(tagetedMin / 1440)
+    const restMinOfTargetedMin = tagetedMin - 1440 * day
+    let restHours: string | number = Math.floor(restMinOfTargetedMin / 60)
+    let restMins: string | number = restMinOfTargetedMin - 60 * restHours
+    // make standard time format
+    day = day === 0 ? '' : day + 'day  '
+    restHours = restHours < 10 ? '0' + restHours : restHours
+    restMins = restMins < 10 ? '0' + restMins : restMins
+
+    const finalTaget = sign + day + restHours + ':' + restMins
+    return finalTaget
+  }
+
+  const getStatusClassName = (minutes: number) => {
+    if (isNaN(Number(minutes))) return 'in_time'
+    const delayTime = configState?.configs?.order_deadlines_delayed_time?.value
+    return minutes > 0 ? 'in_time' : Math.abs(minutes) <= delayTime ? 'at_risk' : 'delayed'
+  }
+
+  useEffect(() => {
+    const slaSettings = configState?.configs?.order_deadlines_enabled?.value === '1'
+    setAllowColumns({
+      ...allowColumns,
+      timer: slaSettings,
+      slaBar: slaSettings
+    })
+  }, [configState.loading])
+
+  return (
+    <TouchableOpacity
+      activeOpacity={1}
+      disabled={order?.locked && isLogisticOrder}
+      style={styles.cardButton}
+      onPress={() => handlePressOrder({ ...order, logistic_order_id: _order?.id })}
+    >
+      <Card key={order.id}>
+        {allowColumns?.slaBar && (
+          <Timestatus
+            style={{
+              backgroundColor: getStatusClassName(getDelayMinutes(order)) === 'in_time'
+                ? '#00D27A'
+                : getStatusClassName(getDelayMinutes(order)) === 'at_risk'
+                  ? '#FFC700'
+                  : getStatusClassName(getDelayMinutes(order)) === 'delayed'
+                    ? '#E63757'
+                    : ''
+            }}
+          />
+        )}
+        <Logo style={styles.logo}>
+          <FastImage
+            style={styles.icon}
+            source={order.business?.logo ? {
+              uri: optimizeImage(order.business?.logo, 'h_100,c_limit'),
+              priority: FastImage.priority.normal,
+            } : theme?.images?.dummies?.businessLogo}
+            resizeMode={FastImage.resizeMode.cover}
+          />
+        </Logo>
+        <Information>
+          {!!order?.order_group_id && (
+            <OText>
+              <OText>{(t('INVOICE_GROUP_NO', 'Group No.') + order?.order_group_id)}</OText>
+            </OText>
+          )}
+          {!!order.business?.name && (
+            <OText numberOfLines={1} style={styles.title}>
+              {order.business?.name}
+            </OText>
+          )}
+          {!!order?.showNotification && (
+            <NotificationIcon>
+              <EntypoIcon
+                name="dot-single"
+                size={32}
+                color={theme.colors.primary}
+              />
+            </NotificationIcon>
+          )}
+          <View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
+            <OText
+              style={styles.date}
+              color={theme.colors.unselectText}
+              numberOfLines={1}
+              adjustsFontSizeToFit
+            >
+              {(order?.order_group_id && order?.order_group && isLogisticOrder
+                  ? `${order?.order_group?.orders?.length} ${t('ORDERS', 'Orders')}`
+                  : (t('NO', 'Order No.') + order.id)
+                ) + ' · '}
+              {order?.delivery_datetime_utc
+                ? parseDate(order?.delivery_datetime_utc, { outputFormat: 'MM/DD/YY · HH:mm a' })
+                : parseDate(order?.delivery_datetime, { utc: false })}
+            </OText>
+            {((currentTabSelected === 'pending' || currentTabSelected === 'inProgress') && allowColumns?.timer) && (
+              <>
+                <OText> · </OText>
+                <OText
+                  style={styles.date}
+                  color={
+                    getStatusClassName(getDelayMinutes(order)) === 'in_time'
+                      ? '#00D27A'
+                      : getStatusClassName(getDelayMinutes(order)) === 'at_risk'
+                        ? '#FFC700'
+                        : getStatusClassName(getDelayMinutes(order)) === 'delayed'
+                          ? '#E63757'
+                          : ''}
+                >
+                  {displayDelayedTime(order)}
+                </OText>
+              </>
+            )}
+          </View>
+          {!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>
+  )
+}

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

@@ -0,0 +1,115 @@
+import React, { useState } from 'react'
+import { Animated, StyleSheet, View } from 'react-native'
+import { useTheme } from 'styled-components/native';
+import { useLanguage, useUtils } from 'ordering-components/native'
+import FastImage from 'react-native-fast-image'
+import MaterialCommunityIcon from 'react-native-vector-icons/MaterialCommunityIcons'
+
+import {
+  AccordionSection,
+  Accordion,
+  ContentInfo,
+  AccordionContent,
+  ProductOptionsList
+} from './styles'
+
+import { OText } from '../shared';
+
+export const OrdersGroupedItem = (props: any) => {
+  const { groupId, orders } = props
+
+  const theme = useTheme()
+  const [, t] = useLanguage()
+  const [{ parseDate }] = useUtils();
+  const [isActive, setActiveState] = useState(false)
+
+  const styles = StyleSheet.create({
+    productImage: {
+      borderRadius: 7.6,
+      width: 60,
+      height: 60
+    },
+    logo: {
+      borderRadius: 10,
+      shadowColor: "#0000006e",
+      shadowRadius: 10,
+      elevation: 15,
+      justifyContent: 'center',
+      alignItems: 'center',
+      marginLeft: 3,
+      height: 65,
+      width: 65
+    },
+    title: {
+      marginBottom: 2,
+      fontWeight: '600',
+      fontSize: 16,
+      color: theme.colors.textGray,
+    },
+    orderlength: {
+      marginBottom: 2,
+      fontSize: 12,
+    },
+  })
+
+  return (
+    <AccordionSection>
+      <Accordion
+        activeOpacity={1}
+        onPress={() => setActiveState(!isActive)}
+      >
+        <View style={{ flexDirection: 'row', alignItems: 'flex-start' }}>
+          <ContentInfo>
+            <View style={styles.logo}>
+              <FastImage
+                style={styles.productImage}
+                source={theme.images.general.ordersGroup}
+                resizeMode={FastImage.resizeMode.cover}
+              />
+            </View>
+            <View style={{ flex: 1, marginLeft: 5, flexDirection: 'column' }}>
+              <View>
+                <OText numberOfLines={1} style={styles.title}>
+                  {t('GROUP_NRO', 'Group No.')}{groupId}
+                </OText>
+              </View>
+              <OText
+                style={styles.orderlength}
+                color={theme.colors.unselectText}
+                numberOfLines={1}
+                adjustsFontSizeToFit
+              >
+                {orders.length}{' '}{t('ORDERS', 'Orders')}
+              </OText>
+              <OText
+                style={styles.orderlength}
+                color={theme.colors.unselectText}
+                numberOfLines={1}
+                adjustsFontSizeToFit
+              >
+                {orders[0]?.delivery_datetime_utc
+                  ? parseDate(orders[0]?.delivery_datetime_utc, { outputFormat: 'MM/DD/YY · HH:mm a' })
+                  : parseDate(orders[0]?.delivery_datetime, { utc: false })}
+              </OText>
+            </View>
+            <View style={{ display: 'flex', flexDirection: 'column', flex: 1, alignItems: 'flex-end', maxWidth: 100 }}>
+              <View style={{ flexDirection: 'row' }}>
+                <MaterialCommunityIcon name={isActive ? 'chevron-up' : 'chevron-down'} size={18} />
+              </View>
+            </View>
+          </ContentInfo>
+        </View>
+      </Accordion>
+
+      <View style={{ display: isActive ? 'flex' : 'none' }}>
+        <Animated.View>
+          <AccordionContent>
+            <ProductOptionsList>
+              {props.children}
+            </ProductOptionsList>
+          </AccordionContent>
+        </Animated.View>
+      </View>
+    </AccordionSection>
+  )
+}