ordering-ui-react-native 0.14.87 → 0.14.88-release

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

@@ -1,6 +1,7 @@
 import React, { useEffect, useState, useRef } from 'react';
-import { View, Pressable, StyleSheet, ScrollView, RefreshControl, Linking, Platform } from 'react-native';
-import { useLanguage, useUtils, OrderListGroups } from 'ordering-components/native';
+import { View, Pressable, StyleSheet, ScrollView, RefreshControl, Linking, Platform, TextInput } from 'react-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';
 import FontistoIcon from 'react-native-vector-icons/Fontisto'
@@ -18,7 +19,20 @@ import {
   ModalContainer,
   ModalTitle,
   FilterBtnWrapper,
-  TabPressable
+  TabPressable,
+  OrderStatus,
+  SlaOption,
+  SearchModalContent,
+  SlaSettingModalContent,
+  DeliveryStatusWrapper,
+  VerticalLine,
+  StatusItems,
+  ItemHeader,
+  ItemStatus,
+  ItemContent,
+  TimerInputWrapper,
+  OverLine,
+  Actions
 } from './styles';
 import { PreviousOrders } from '../PreviousOrders';
 import { OrdersOptionParams } from '../../types';
@@ -85,6 +99,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
     delivery_type: '',
     paymethod: '',
     driver: '',
+    timeStatus: '',
     date: {
       from: '',
       to: '',
@@ -96,12 +111,59 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
   const [, t] = useLanguage();
   const [{ parseDate }] = useUtils()
   const [orientationState] = useDeviceOrientation();
-  const [openModal, setOpenModal] = useState(false)
+  const [, { showToast }] = useToast();
+  const [openSearchModal, setOpenSearchModal] = useState(false)
+  const [openSLASettingModal, setOpenSLASettingModal] = useState(false)
+  const [slaSettingTime, setSlaSettingTime] = useState(6000)
+  const [currentDeliveryType, setCurrentDeliveryType] = useState('Delivery')
   const [search, setSearch] = useState(defaultSearchList)
+  const [selectedTabStatus, setSelectedTabStatus] = useState([])
+  const [hour, setHour] = useState(0)
+  const [minute, setMinute] = useState(0)
+
   const WIDTH_SCREEN = orientationState?.dimensions?.width
   const HEIGHT_SCREEN = orientationState?.dimensions?.height
   const IS_PORTRAIT = orientationState.orientation === PORTRAIT
 
+  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 styles = StyleSheet.create({
     header: {
       marginBottom: isBusinessApp ? 10 : 20,
@@ -127,6 +189,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
       marginBottom: -1,
       zIndex: 100,
       borderColor: theme.colors.textGray,
+      textTransform: 'capitalize'
     },
     icon: {
       paddingBottom: 10,
@@ -165,6 +228,51 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
       borderColor: '#DEE2E6',
       borderRadius: 7.6,
       marginBottom: 24
+    },
+    SLAwrapper: {
+      flexDirection: 'row',
+      marginBottom: 15
+    },
+    selectOption: {
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      minHeight: 40,
+      width: '100%',
+      paddingHorizontal: 15,
+      backgroundColor: theme.colors.inputChat,
+      borderRadius: 7.6,
+    },
+    buttonTextStyle: {
+      textAlign: 'left',
+      marginHorizontal: 0,
+      fontSize: 16,
+      lineHeight: 24,
+      color: '#748194'
+    },
+    dropdownStyle: {
+      borderWidth: 1,
+      borderRadius: 8,
+      paddingTop: 5,
+      backgroundColor: '#fff',
+      borderColor: theme.colors.lightGray,
+      overflow: 'hidden',
+      minHeight: 155
+    },
+    rowStyle: {
+      display: 'flex',
+      borderBottomWidth: 0,
+      height: 36,
+      alignItems: 'center',
+      paddingHorizontal: 10
+    },
+    acceptButtonStyle: {
+      borderRadius: 7.6,
+      width: 130,
+      height: 42,
+    },
+    errorMessage: {
+      marginBottom: 10,
+      color: theme.colors.error,
     }
   });
 
@@ -201,7 +309,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
     })
     const dateRange = calculateDate(search.date.type, search.date.from, search.date.to)
     onFiltered && onFiltered({ ...search, date: { ...dateRange } })
-    setOpenModal(false)
+    setOpenSearchModal(false)
   }
 
   const handleTagSelected = (tag: any) => {
@@ -283,6 +391,15 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
     }
   }
 
+  const onClickSetting = () => {
+    setOpenSLASettingModal(true)
+  }
+
+  const handleClose = () => {
+    setOpenSearchModal(false)
+    setOpenSLASettingModal(false)
+  }
+
   useEffect(() => {
     setCurrentFilters(null)
     onFiltered && onFiltered(null)
@@ -292,6 +409,10 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
     scrollRef.current?.scrollTo({ y: 0, animated: true });
   }, [currentTabSelected])
 
+  useEffect(() => {
+    setSelectedTabStatus(deliveryStatus)
+  }, [])
+
   return (
     // <GestureRecognizer
     //   onSwipeLeft={onSwipeLeft}
@@ -314,10 +435,59 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
             name='search'
             color={theme.colors.backgroundDark}
             size={24}
-            onPress={() => setOpenModal(true)}
+            onPress={() => setOpenSearchModal(true)}
           />
         </IconWrapper>
       </View>
+      <View style={styles.SLAwrapper}>
+        <View style={{ flex: 0.5 }}>
+          <OButton
+            text={t('SLA_SETTING', 'SLA’s Settings')}
+            textStyle={{ color: theme.colors.backArrow }}
+            imgRightSrc={null}
+            style={{
+              backgroundColor: theme.colors.inputChat,
+              borderRadius: 7.6,
+              zIndex: 10,
+              borderWidth: 0,
+              minHeight: 40
+            }}
+            onClick={onClickSetting}
+          />
+        </View>
+        <View style={{ width: 10, height: '100%' }} />
+        <View style={{ flex: 0.5, justifyContent: 'center' }}>
+          <SelectDropdown
+            defaultButtonText={t('SLA', 'SLA\'s')}
+            data={preorderTypeList}
+            onSelect={(selectedItem, index) => {
+              onFiltered && onFiltered({ ...search, timeStatus: selectedItem?.key })
+            }}
+            buttonTextAfterSelection={(selectedItem, index) => {
+              return selectedItem.name
+            }}
+            rowTextForSelection={(item, index) => {
+              return item.key
+            }}
+            buttonStyle={styles.selectOption}
+            buttonTextStyle={styles.buttonTextStyle}
+            renderDropdownIcon={isOpened => {
+              return <FeatherIcon name={isOpened ? 'chevron-up' : 'chevron-down'} color={'#444'} size={18} />;
+            }}
+            dropdownStyle={styles.dropdownStyle}
+            dropdownOverlayColor='transparent'
+            rowStyle={styles.rowStyle}
+            renderCustomizedRowChild={(item, index) => {
+              return (
+                <SlaOption>
+                  {index !== 0 && <OrderStatus timeState={item?.key} />}
+                  <View><OText size={14} color={'#748194'} >{item?.name}</OText></View>
+                </SlaOption>
+              );
+            }}
+          />
+        </View>
+      </View>
       <FiltersTab>
         <ScrollView
           ref={scrollRefTab}
@@ -371,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={{
@@ -460,6 +630,8 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
                 onNavigationRedirect={onNavigationRedirect}
                 getOrderStatus={getOrderStatus}
                 handleClickOrder={handleClickOrder}
+                slaSettingTime={slaSettingTime}
+                currentTabSelected={currentTabSelected}
               />
             )}
           {!logisticOrders?.error?.length &&
@@ -552,8 +724,8 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
       {/* </GestureRecognizer> */}
 
       <NewOrderNotification />
-      {openModal && (
-        <OModal open={openModal} entireModal customClose>
+      {(openSearchModal || openSLASettingModal) && (
+        <OModal open={openSearchModal || openSLASettingModal} entireModal customClose>
           <ModalContainer
             nestedScrollEnabled={true}
           >
@@ -569,62 +741,117 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
                 marginBottom: 30,
                 marginTop: 30
               }}
-              onClick={() => setOpenModal(false)}
-            />
-            <ModalTitle>{t('SEARCH_ORDERS', 'Search orders')}</ModalTitle>
-            <OInput
-              value={search.id}
-              onChange={(value: any) => setSearch({ ...search, id: value })}
-              style={styles.inputStyle}
-              placeholder={t('ORDER_NUMBER', 'Order number')}
-              autoCorrect={false}
+              onClick={() => handleClose()}
             />
-            <OrdersOptionDate
-              {...props}
-              search={search}
-              onSearch={setSearch}
-            />
-            <OrdersOptionCity
-              {...props}
-              search={search}
-              onSearch={setSearch}
-            />
-            {isBusinessApp && (
-              <>
-                <OrdersOptionBusiness
-                  {...props}
-                  search={search}
-                  onSearch={setSearch}
+            {openSearchModal && (
+              <SearchModalContent>
+                <ModalTitle>{t('SEARCH_ORDERS', 'Search orders')}</ModalTitle>
+                <OInput
+                  value={search.id}
+                  onChange={(value: any) => setSearch({ ...search, id: value })}
+                  style={styles.inputStyle}
+                  placeholder={t('ORDER_NUMBER', 'Order number')}
+                  autoCorrect={false}
                 />
-                <OrdersOptionDelivery
+                <OrdersOptionDate
                   {...props}
                   search={search}
                   onSearch={setSearch}
                 />
-                <OrdersOptionDriver
+                <OrdersOptionCity
                   {...props}
                   search={search}
                   onSearch={setSearch}
                 />
-                <OrdersOptionPaymethod
-                  {...props}
-                  search={search}
-                  onSearch={setSearch}
+                {isBusinessApp && (
+                  <>
+                    <OrdersOptionBusiness
+                      {...props}
+                      search={search}
+                      onSearch={setSearch}
+                    />
+                    <OrdersOptionDelivery
+                      {...props}
+                      search={search}
+                      onSearch={setSearch}
+                    />
+                    <OrdersOptionDriver
+                      {...props}
+                      search={search}
+                      onSearch={setSearch}
+                    />
+                    <OrdersOptionPaymethod
+                      {...props}
+                      search={search}
+                      onSearch={setSearch}
+                    />
+                  </>
+                )}
+                <OButton
+                  text={t('SEARCH', 'Search')}
+                  textStyle={{ color: theme.colors.white }}
+                  imgRightSrc={null}
+                  style={{
+                    borderRadius: 7.6,
+                    marginBottom: 70,
+                    marginTop: 60,
+                    zIndex: 12
+                  }}
+                  onClick={applyFilters}
                 />
-              </>
+
+              </SearchModalContent>
+            )}
+            {openSLASettingModal && (
+              <SlaSettingModalContent>
+                <ModalTitle>{t('SLA_SETTINGS', 'SLA’s Settings')}</ModalTitle>
+                <FiltersTab>
+                  <ScrollView
+                    ref={scrollRefTab}
+                    showsVerticalScrollIndicator={false}
+                    showsHorizontalScrollIndicator={false}
+                    horizontal
+                    nestedScrollEnabled={true}
+                  >
+                    <TabsContainer>
+                      {defaultOrderTypes && defaultOrderTypes.map(tab => (
+                        <TabPressable
+                          key={tab.key}
+                          onPress={() => setCurrentDeliveryType(tab?.name)}
+                          isSelected={tab.name.toUpperCase() === currentDeliveryType.toUpperCase() ? 1 : 0}
+                        >
+                          <OText
+                            style={{
+                              ...styles.tab,
+                              fontSize: tab.name.toUpperCase() === currentDeliveryType.toUpperCase() ? 14 : 12,
+                              borderBottomWidth: Platform.OS === 'ios' && tab.name.toUpperCase() === currentDeliveryType.toUpperCase() ? 1 : 0,
+                            }}
+                            color={
+                              tab.name.toUpperCase() === currentDeliveryType.toUpperCase()
+                                ? theme.colors.textGray
+                                : theme.colors.unselectText
+                            }
+                            weight={tab.name.toUpperCase() === currentDeliveryType ? '600' : 'normal'}
+                          >
+                            {tab.name}
+                          </OText>
+                        </TabPressable>
+                      ))}
+                    </TabsContainer>
+                  </ScrollView>
+                </FiltersTab>
+                <DeliveryStatusWrapper>
+                  {selectedTabStatus && selectedTabStatus.length > 0 && selectedTabStatus.map((item, i) => (
+                    <StatusBlock
+                      key={i}
+                      item={item}
+                      last={i + 1 === selectedTabStatus.length}
+                    />
+                  ))}
+                  <VerticalLine />
+                </DeliveryStatusWrapper>
+              </SlaSettingModalContent>
             )}
-            <OButton
-              text={t('SEARCH', 'Search')}
-              textStyle={{ color: theme.colors.white }}
-              imgRightSrc={null}
-              style={{
-                borderRadius: 7.6,
-                marginBottom: 70,
-                marginTop: 60,
-                zIndex: 12
-              }}
-              onClick={applyFilters}
-            />
           </ModalContainer>
         </OModal>
       )}
@@ -632,6 +859,71 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
   );
 };
 
+export const StatusBlock = (props: any) => {
+  const { item, last } = props
+  const [showTime, setShowTime] = useState(false)
+
+  useEffect(() => {
+    if (last) {
+      setShowTime(true)
+    }
+  }, [last])
+
+  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
+    }
+  })
+
+  return (
+    <TimerInputWrapper>
+      <OText style={styles.settingTime} color={theme.colors.disabled}>{configs?.order_deadlines_delayed_time?.value}</OText>
+      <OText>{t('MIN', 'min')}</OText>
+    </TimerInputWrapper>
+  )
+}
+
 export const OrdersOption = (props: OrdersOptionParams) => {
   const [, t] = useLanguage();
   const theme = useTheme()
@@ -712,13 +1004,13 @@ export const OrdersOption = (props: OrdersOptionParams) => {
           'Customer arrived to business',
         ),
       },
-      { 
-        key: 22, 
-        text: t('ORDER_LOOKING_FOR_DRIVER', 'Looking for driver') 
+      {
+        key: 22,
+        text: t('ORDER_LOOKING_FOR_DRIVER', 'Looking for driver')
       },
-      { 
-        key: 23, 
-        text: t('ORDER_DRIVER_ON_WAY', 'Driver on way') 
+      {
+        key: 23,
+        text: t('ORDER_DRIVER_ON_WAY', 'Driver on way')
       }
     ],
     tabs: [

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

@@ -1,11 +1,12 @@
-import styled from 'styled-components/native';
+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;
@@ -13,8 +14,9 @@ export const TabsContainer = styled.View`
   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};
@@ -24,24 +26,24 @@ export const Tag = styled.Pressable`
   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: 20px 40px 10px 40px;
+  padding: 0px 30px;
 `
 
 export const ModalTitle = styled.Text`
   font-family: Poppins;
   font-style: normal;
-  font-weight: 600;
+  font-weight: bold;
   font-size: 20px;
   color: ${(props: any) => props.theme.colors.textGray};
-  text-transform: capitalize;
   margin-bottom: 24px;
 `
 
@@ -61,4 +63,90 @@ export const TabPressable = styled.Pressable`
   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 StatusItems = styled.View`
+  position: relative;
+  margin-bottom: 20px;
+  z-index: 2;
+`
+export const ItemHeader = styled.View`
+  flex-direction: row;
+  margin-bottom: 5px;
+`
+export const ItemStatus = styled.View`
+  width: 4px;
+  height: 22px;
+  margin: 0 15px;
+  border-radius: 4px;
+  background: ${(props: any) => props.backColor};
+`
+export const ItemContent = styled.View`
+  display: flex;
+  padding: 0 30px;
+`
+
+export 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;
+`
+export const OverLine = styled.View`
+  position: absolute;
+  height: 100%;
+  width: 15px;
+  top: 20px;
+  left: 0;
+  /* border-width: 1px; */
+  background-color: #fff;
+  z-index: 2;
+`
+export const Actions = styled.View`
+
 `