ordering-ui-react-native 0.14.95 → 0.14.96-release

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

@@ -0,0 +1,123 @@
+import styled, { css } from 'styled-components/native';
+
+export const FiltersTab = styled.View`
+  margin-bottom: 20px;
+  min-height: 30px;
+  max-height: 35px;
+  flex: 1;
+  width: 100%;
+`
+
+export const TabsContainer = styled.View`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  border-bottom-width: 1px;
+  flex: 1;
+  width: 100%;
+  border-bottom-color: ${(props: any) => props.theme.colors.tabBar};
+`
+
+export const Tag = styled.Pressable`
+  background-color: ${({ isSelected }: { isSelected: string }) => isSelected};
+  justify-content: center;
+  align-items: center;
+  min-height: 34px;
+  padding: 4px 10px;
+  border-radius: 50px;
+  margin-right: 15px;
+`
+
+export const IconWrapper = styled.View`
+  flex-direction: row;
+  align-items: center;
+  background: #fff;
+`
+
+export const ModalContainer = styled.ScrollView`
+  padding: 0px 30px;
+`
+
+export const ModalTitle = styled.Text`
+  font-family: Poppins;
+  font-style: normal;
+  font-weight: bold;
+  font-size: 20px;
+  color: ${(props: any) => props.theme.colors.textGray};
+  margin-bottom: 24px;
+`
+
+export const FilterBtnWrapper = styled.TouchableOpacity`
+  background-color: ${(props: any) => props.theme.colors.inputDisabled};
+  border-radius: 7.6px;
+  margin-vertical: 5px;
+  padding: 15px 20px;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 24px;
+`
+
+export const TabPressable = styled.Pressable`
+  align-items: center;
+  border-color: ${(props: any) => props.theme.colors.textGray};
+  border-bottom-width: ${(props: any) => props.isSelected ? '1px' : '0px'};
+  padding-horizontal: 10px;
+`
+export const OrderStatus = styled.View`
+  margin-right: 5px;
+  width: 3px;
+  height: 90%;
+  border-radius: 6px;
+
+  ${(props: any) => props.timeState === 'in_time' && css`
+    background-color: #00D27A;
+  `}
+
+  ${(props: any) => props.timeState === 'at_risk' && css`
+    background-color: #FFC700;
+  `}
+
+  ${(props: any) => props.timeState === 'delayed' && css`
+    background-color: #E63757;
+  `}
+`
+
+export const SlaOption = styled.View`
+  flex-direction: row;
+  align-items: center;
+`
+
+export const SearchModalContent = styled.View``
+
+export const SlaSettingModalContent = styled.View``
+
+export const DeliveryStatusWrapper = styled.View`
+  position: relative;
+`
+export const VerticalLine = styled.View`
+  position: absolute;
+  background: #E9ECEF;
+  position: absolute;
+  width: 1px;
+  height: 100%;
+  top: 7px;
+  left: 7px;
+`
+
+export const Actions = styled.View``
+
+export const Sides = styled.View`
+  flex-direction: row;
+  height: 100%;
+`
+
+export const LeftSide = styled.View`
+  width: 30%;
+`
+
+export const RightSide = styled.View`
+  width: 70%;
+  border-width: 2px;
+  border-color: ${(props: any) => props.theme.colors.gray100};
+`

package/themes/business/src/components/OrdersListManager/utils.tsx

@@ -0,0 +1,216 @@
+import React, { useState, useEffect } from 'react'
+import { StyleSheet, Pressable } from 'react-native'
+import { useLanguage, useUtils, useConfig } from 'ordering-components/native'
+import styled, { useTheme } from 'styled-components/native'
+
+import { OText, OIcon } from '../shared';
+
+export const useOrderUtils = () => {
+  const theme = useTheme();
+  const [, t] = useLanguage();
+  const [{ parseDate }] = useUtils()
+
+  const calculateDate = (type: any, from: any, to: any) => {
+    switch (type) {
+      case 'today':
+        const date = parseDate(new Date(), { outputFormat: 'MM/DD/YYYY' })
+        return { from: `${date} 00:00:00`, to: `${date} 23:59:59` }
+      case 'yesterday':
+        const yesterday = new Date()
+        yesterday.setDate(yesterday.getDate() - 1)
+        const start1 = parseDate(yesterday, { outputFormat: 'MM/DD/YYYY' })
+        const end1 = parseDate(new Date(), { outputFormat: 'MM/DD/YYYY' })
+        return { from: `${start1} 00:00:00`, to: `${end1} 23:59:59` }
+      case 'last_7days':
+        const last_7days = new Date()
+        last_7days.setDate(last_7days.getDate() - 6)
+        const start7 = parseDate(last_7days, { outputFormat: 'MM/DD/YYYY' })
+        const end7 = parseDate(new Date(), { outputFormat: 'MM/DD/YYYY' })
+        return { from: `${start7} 00:00:00`, to: `${end7} 23:59:59` }
+      case 'last_30days':
+        const last_30days = new Date()
+        last_30days.setDate(last_30days.getDate() - 29)
+        const start30 = parseDate(last_30days, { outputFormat: 'MM/DD/YYYY' })
+        const end30 = parseDate(new Date(), { outputFormat: 'MM/DD/YYYY' })
+        return { from: `${start30} 00:00:00`, to: `${end30} 23:59:59` }
+      default:
+        const start = from ? `${parseDate(from, { outputFormat: 'MM/DD/YYYY' })} 00:00:00` : ''
+        const end = to ? `${parseDate(to, { outputFormat: 'MM/DD/YYYY' })} 23:59:59` : ''
+        return { from: start, to: end }
+    }
+  }
+
+  const preorderTypeList = [
+    { key: null, name: t('SLA', 'SLA\'s') },
+    { key: 'in_time', name: t('OK', 'Ok') },
+    { key: 'at_risk', name: t('AT_RISK', 'At Risk') },
+    { key: 'delayed', name: t('DELAYED', 'Delayed') }
+  ]
+  const defaultOrderTypes = [
+    { key: 1, name: t('DELIVERY', 'Delivery') },
+    { key: 2, name: t('PICKUP', 'Pickup') },
+    { key: 3, name: t('EAT_IN', 'Eat in') },
+    { key: 4, name: t('CURBSIDE', 'Curbside') },
+    { key: 5, name: t('DRIVE_THRU', 'Drive thru') }
+  ]
+
+  const deliveryStatus = [
+    {
+      key: t('OK', 'Ok'),
+      des: t('DELIVERY_OK_STATUS_DESC', 'Get delivery time from the businesses.'),
+      timmer: false,
+      icon: theme.images.general?.clock1,
+      backColor: '#00D27A'
+    },
+    {
+      key: t('AT_RISK', 'At risk'),
+      des: t('DELIVERY_ATRISK_STATUS_DESC', 'Is the time between delivery time of busines and the delayed time.'),
+      timmer: false,
+      icon: theme.images.general?.clockRisk,
+      backColor: '#FFC700'
+    },
+    {
+      key: t('DELAYED', 'Delayed'),
+      des: t('DELIVERY_DELAYED_STATUS_DESC', 'If this time is exceeded, the order will be delayed.'),
+      timmer: true,
+      icon: theme.images.general?.clockDelayed,
+      backColor: '#E63757'
+    }
+  ]
+
+  const defaultSearchList = {
+    id: '',
+    state: '',
+    city: '',
+    business: '',
+    delivery_type: '',
+    paymethod: '',
+    driver: '',
+    timeStatus: '',
+    date: {
+      from: '',
+      to: '',
+      type: ''
+    }
+  }
+
+  const constants = {
+    preorderTypeList,
+    defaultOrderTypes,
+    deliveryStatus,
+    defaultSearchList,
+    calculateDate
+  }
+
+  return [constants];
+}
+
+export const StatusBlock = (props: any) => {
+  const { item, last } = props
+  const [showTime, setShowTime] = useState(false)
+
+  useEffect(() => {
+    if (last) {
+      setShowTime(true)
+    }
+  }, [last])
+
+  const StatusItems = styled.View`
+    position: relative;
+    margin-bottom: 20px;
+    z-index: 2;
+  `
+  const ItemHeader = styled.View`
+    flex-direction: row;
+    margin-bottom: 5px;
+  `
+
+  const IconWrapper = styled.View`
+    flex-direction: row;
+    align-items: center;
+    background: #fff;
+  `
+
+  const ItemStatus = styled.View`
+    width: 4px;
+    height: 22px;
+    margin: 0 15px;
+    border-radius: 4px;
+    background: ${(props: any) => props.backColor};
+  `
+
+  const ItemContent = styled.View`
+    display: flex;
+    padding: 0 30px;
+  `
+
+  const OverLine = styled.View`
+    position: absolute;
+    height: 100%;
+    width: 15px;
+    top: 20px;
+    left: 0;
+    background-color: #fff;
+    z-index: 2;
+  `
+
+  return (
+    <StatusItems>
+      <Pressable style={{ marginBottom: 10 }}>
+        <ItemHeader>
+          <IconWrapper>
+            <OIcon
+              src={item?.icon}
+              width={16}
+              height={16}
+              color={item?.backColor}
+            />
+          </IconWrapper>
+          <ItemStatus backColor={item?.backColor} />
+          <OText>{item?.key}</OText>
+        </ItemHeader>
+      </Pressable>
+      <ItemContent>
+        <OText>{item?.des}</OText>
+      </ItemContent>
+      {showTime && ( <Timer /> )}
+      {last && ( <OverLine /> )}
+    </StatusItems>
+  )
+}
+
+export const Timer = () => {
+  const [, t] = useLanguage()
+  const theme = useTheme()
+  const [{ configs }] = useConfig();
+
+  const styles = StyleSheet.create({
+    settingTime: {
+      fontSize: 14,
+      borderWidth: 1,
+      borderRadius: 7.6,
+      margin: 0,
+      marginRight: 10,
+      paddingHorizontal: 10,
+      paddingTop: 5,
+      borderColor: theme.colors.disabled
+    }
+  })
+
+  const TimerInputWrapper = styled.View`
+    color: ${(props: any) => props.theme.colors.disabled};
+    margin-top: 15px;
+    margin-left: 30px;
+    margin-right: 30px;
+    flex-direction: row;
+    align-items: flex-end;
+  `
+
+  return (
+    <TimerInputWrapper>
+      <OText style={styles.settingTime} color={theme.colors.disabled}>{configs?.order_deadlines_delayed_time?.value}</OText>
+      <OText>{t('MIN', 'min')}</OText>
+    </TimerInputWrapper>
+  )
+}
+

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

@@ -1,6 +1,6 @@
 import React, { useEffect, useState, useRef } from 'react';
 import { View, Pressable, StyleSheet, ScrollView, RefreshControl, Linking, Platform, TextInput } from 'react-native';
-import { useLanguage, useUtils, useToast, ToastType, OrderListGroups } from 'ordering-components/native';
+import { useLanguage, useUtils, useToast, ToastType, OrderListGroups, useConfig } from 'ordering-components/native';
 import SelectDropdown from 'react-native-select-dropdown'
 import { Placeholder, PlaceholderLine, Fade } from 'rn-placeholder';
 import FeatherIcon from 'react-native-vector-icons/Feather';
@@ -400,20 +400,6 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
     setOpenSLASettingModal(false)
   }
 
-  const [settingTimeErrorMessage, setSettingTimeErrorMessage] = useState('')
-
-  const handlSLASettingTime = () => {
-    if (!hour || !minute) {
-      setSettingTimeErrorMessage(t('SLA_SETTING_ERROR', 'Time value is invalid'))
-      return
-    }
-    const _settingTimeSecond = hour * 3600 + minute * 60
-    setSlaSettingTime(_settingTimeSecond)
-    handleClose()
-    showToast(ToastType.Success, t('SLA_SETTING_UPDATED', 'SLAs setting updated'))
-  }
-
-
   useEffect(() => {
     setCurrentFilters(null)
     onFiltered && onFiltered(null)
@@ -555,7 +541,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
           </TabsContainer>
         </ScrollView>
       </FiltersTab>
-      <View style={{ flex: 1, minHeight: HEIGHT_SCREEN - 250 }}>
+      <View style={{ flex: 1, minHeight: HEIGHT_SCREEN - 450 }}>
         {currentTabSelected !== 'logisticOrders' && (
           <View
             style={{
@@ -645,6 +631,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
                 getOrderStatus={getOrderStatus}
                 handleClickOrder={handleClickOrder}
                 slaSettingTime={slaSettingTime}
+                currentTabSelected={currentTabSelected}
               />
             )}
           {!logisticOrders?.error?.length &&
@@ -859,24 +846,10 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
                       key={i}
                       item={item}
                       last={i + 1 === selectedTabStatus.length}
-                      setHour={setHour}
-                      setMinute={setMinute}
-                      setSettingTimeErrorMessage={setSettingTimeErrorMessage}
                     />
                   ))}
                   <VerticalLine />
                 </DeliveryStatusWrapper>
-                {settingTimeErrorMessage !== '' && (
-                  <OText style={styles.errorMessage}>{settingTimeErrorMessage}</OText>
-                )}
-                <Actions>
-                  <OButton
-                    text={t('ACCEPT', 'Accept')}
-                    textStyle={{ color: 'white', fontSize: 14 }}
-                    onClick={handlSLASettingTime}
-                    style={styles.acceptButtonStyle}
-                  />
-                </Actions>
               </SlaSettingModalContent>
             )}
           </ModalContainer>
@@ -887,7 +860,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
 };
 
 export const StatusBlock = (props: any) => {
-  const { item, last, setHour, setMinute, setSettingTimeErrorMessage } = props
+  const { item, last } = props
   const [showTime, setShowTime] = useState(false)
 
   useEffect(() => {
@@ -898,7 +871,7 @@ export const StatusBlock = (props: any) => {
 
   return (
     <StatusItems>
-      <Pressable onPress={() => setShowTime(!showTime)} style={{ marginBottom: 5 }}>
+      <Pressable style={{ marginBottom: 10 }}>
         <ItemHeader>
           <IconWrapper>
             <OIcon
@@ -916,11 +889,7 @@ export const StatusBlock = (props: any) => {
         <OText>{item?.des}</OText>
       </ItemContent>
       {showTime && (
-        <Timer
-          setHour={setHour}
-          setMinute={setMinute}
-          setSettingTimeErrorMessage={setSettingTimeErrorMessage}
-        />
+        <Timer />
       )}
       {last && (
         <OverLine />
@@ -929,47 +898,28 @@ export const StatusBlock = (props: any) => {
   )
 }
 
-export const Timer = (props: any) => {
-  const { setHour, setMinute, setSettingTimeErrorMessage } = props
+export const Timer = () => {
   const [, t] = useLanguage()
   const theme = useTheme()
+  const [{ configs }] = useConfig();
 
   const styles = StyleSheet.create({
-    inputStyle: {
-      paddingHorizontal: 7,
-      paddingVertical: 2,
-      borderRadius: 0,
+    settingTime: {
       fontSize: 14,
+      borderWidth: 1,
+      borderRadius: 7.6,
+      margin: 0,
+      marginRight: 10,
+      paddingHorizontal: 10,
+      paddingTop: 5,
+      borderColor: theme.colors.disabled
     }
   })
 
-  const handleChangeInput = (val: any, type: string) => {
-    setSettingTimeErrorMessage('')
-    if (type === 'hour') {
-      setHour(val)
-    }
-    if (type === 'minute') {
-      setMinute(val)
-    }
-  }
-
   return (
     <TimerInputWrapper>
-      <TextInput
-        placeholder='HH'
-        keyboardType='number-pad'
-        maxLength={2}
-        style={{ ...styles.inputStyle, width: 36 }}
-        onChangeText={hour => handleChangeInput(hour, 'hour')}
-      />
-      <OText color={theme.colors.disabled}>:</OText>
-      <TextInput
-        placeholder='MM'
-        keyboardType='number-pad'
-        maxLength={2}
-        style={{ ...styles.inputStyle, width: 40 }}
-        onChangeText={minute => handleChangeInput(minute, 'minute')}
-      />
+      <OText style={styles.settingTime} color={theme.colors.disabled}>{configs?.order_deadlines_delayed_time?.value}</OText>
+      <OText>{t('MIN', 'min')}</OText>
     </TimerInputWrapper>
   )
 }

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

@@ -130,15 +130,12 @@ export const ItemContent = styled.View`
 `
 
 export const TimerInputWrapper = styled.View`
-  border-width: 1px;
-  border-radius: 7.6px;
   color: ${(props: any) => props.theme.colors.disabled};
-  border-color: ${(props: any) => props.theme.colors.disabled};
+  margin-top: 15px;
   margin-left: 30px;
   margin-right: 30px;
   flex-direction: row;
-  align-items: center;
-  width: 80px;
+  align-items: flex-end;
 `
 export const OverLine = styled.View`
   position: absolute;