ordering-ui-react-native 0.14.87 → 0.14.90

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-react-native",
-  "version": "0.14.87",
+  "version": "0.14.90",
   "description": "Reusable components made in react native",
   "main": "src/index.tsx",
   "author": "ordering.inc",

package/src/utils/index.tsx

@@ -201,6 +201,62 @@ export const transformCountryCode = (countryCode : number) => {
   const [, t] = useLanguage()
 
   const reviews: any = {
+    order: {
+      1: {
+        title: t('QUICK_COMMENT_TITLE_1', "What went wrong?"),
+        list: [
+          { key: 0, content: t('QUICK_COMMENT_1_0', "Not handled with care") },
+          { key: 1, content: t('QUICK_COMMENT_1_1', "Poor communication") },
+          { key: 2, content: t('QUICK_COMMENT_1_2', "COVID-19 issue") },
+          { key: 3, content: t('QUICK_COMMENT_1_3', "Didn't follow instructions") },
+          { key: 4, content: t('QUICK_COMMENT_1_4', "Rude") },
+          { key: 5, content: t('QUICK_COMMENT_1_5', "Not on-time") },
+        ]
+      },
+      2: {
+        title: t('QUICK_COMMENT_TITLE_2', "What went wrong?"),
+        list: [
+          { key: 0, content: t('QUICK_COMMENT_2_0', "Not handled with care") },
+          { key: 1, content: t('QUICK_COMMENT_2_1', "Poor communication") },
+          { key: 2, content: t('QUICK_COMMENT_2_2', "COVID-19 issue") },
+          { key: 3, content: t('QUICK_COMMENT_2_3', "Didn't follow instructions") },
+          { key: 4, content: t('QUICK_COMMENT_2_4', "Rude") },
+          { key: 5, content: t('QUICK_COMMENT_2_5', "Not on-time") },
+        ]
+      },
+      3: {
+        title: t('QUICK_COMMENT_TITLE_3', "What could have been better?"),
+        list: [
+          { key: 0, content: t('QUICK_COMMENT_3_0', "Not handled with care") },
+          { key: 1, content: t('QUICK_COMMENT_3_1', "Poor communication") },
+          { key: 2, content: t('QUICK_COMMENT_3_2', "COVID-19 issue") },
+          { key: 3, content: t('QUICK_COMMENT_3_3', "Didn't follow instructions") },
+          { key: 4, content: t('QUICK_COMMENT_3_4', "Rude") },
+          { key: 5, content: t('QUICK_COMMENT_3_5', "Not on-time") },
+        ]
+      },
+      4: {
+        title: t('QUICK_COMMENT_TITLE_4', " Tell us more"),
+        list: [
+          { key: 0, content: t('QUICK_COMMENT_4_0', "Not handled with care") },
+          { key: 1, content: t('QUICK_COMMENT_4_1', "Poor communication") },
+          { key: 2, content: t('QUICK_COMMENT_4_2', "COVID-19 issue") },
+          { key: 3, content: t('QUICK_COMMENT_4_3', "Didn't follow instructions") },
+          { key: 4, content: t('QUICK_COMMENT_4_4', "Rude") },
+          { key: 5, content: t('QUICK_COMMENT_4_5', "Not on-time") },
+        ]
+      },
+      5: {
+        title: t('QUICK_COMMENT_TITLE_5', "What went well?"),
+        list: [
+          { key: 0, content: t('QUICK_COMMENT_5_0', "Good communication") },
+          { key: 1, content: t('QUICK_COMMENT_5_1', "Followed instructions") },
+          { key: 2, content: t('QUICK_COMMENT_5_2', "Friendly") },
+          { key: 3, content: t('QUICK_COMMENT_5_3', 'Handled with care') },
+          { key: 4, content: t('QUICK_COMMENT_5_4', "Above and beyond") },
+        ]
+      },
+    },
     customer: {
       1: {
         title: t('CUSTOMER_QUICK_COMMENT_TITLE_1', "What went wrong?"),
@@ -254,6 +310,76 @@ export const transformCountryCode = (countryCode : number) => {
           { key: 2, content: t('CUSTOMER_QUICK_COMMENT_5_2', "Above and beyond") },
         ]
       },
+    },
+    driver: {
+      1: {
+        title: t('DRIVER_QUICK_COMMENT_TITLE_1', "What went wrong?"),
+        list: [
+          { key: 0, content: t('DRIVER_QUICK_COMMENT_1_0', "Not handled with care") },
+          { key: 1, content: t('DRIVER_QUICK_COMMENT_1_1', "Poor communication") },
+          { key: 2, content: t('DRIVER_QUICK_COMMENT_1_2', "COVID-19 issue") },
+          { key: 3, content: t('DRIVER_QUICK_COMMENT_1_3', "Didn't follow instructions") },
+          { key: 4, content: t('DRIVER_QUICK_COMMENT_1_4', "Rude") },
+          { key: 5, content: t('DRIVER_QUICK_COMMENT_1_5', "Not on-time") },
+        ]
+      },
+      2: {
+        title: t('DRIVER_QUICK_COMMENT_TITLE_2', "What went wrong?"),
+        list: [
+          { key: 0, content: t('DRIVER_QUICK_COMMENT_2_0', "Not handled with care") },
+          { key: 1, content: t('DRIVER_QUICK_COMMENT_2_1', "Poor communication") },
+          { key: 2, content: t('DRIVER_QUICK_COMMENT_2_2', "COVID-19 issue") },
+          { key: 3, content: t('DRIVER_QUICK_COMMENT_2_3', "Didn't follow instructions") },
+          { key: 4, content: t('DRIVER_QUICK_COMMENT_2_4', "Rude") },
+          { key: 5, content: t('DRIVER_QUICK_COMMENT_2_5', "Not on-time") },
+        ]
+      },
+      3: {
+        title: t('DRIVER_QUICK_COMMENT_TITLE_3', "What could have been better?"),
+        list: [
+          { key: 0, content: t('DRIVER_QUICK_COMMENT_3_0', "Not handled with care") },
+          { key: 1, content: t('DRIVER_QUICK_COMMENT_3_1', "Poor communication") },
+          { key: 2, content: t('DRIVER_QUICK_COMMENT_3_2', "COVID-19 issue") },
+          { key: 3, content: t('DRIVER_QUICK_COMMENT_3_3', "Didn't follow instructions") },
+          { key: 4, content: t('DRIVER_QUICK_COMMENT_3_4', "Rude") },
+          { key: 5, content: t('DRIVER_QUICK_COMMENT_3_5', "Not on-time") },
+        ]
+      },
+      4: {
+        title: t('DRIVER_QUICK_COMMENT_TITLE_4', " Tell us more"),
+        list: [
+          { key: 0, content: t('DRIVER_QUICK_COMMENT_4_0', "Not handled with care") },
+          { key: 1, content: t('DRIVER_QUICK_COMMENT_4_1', "Poor communication") },
+          { key: 2, content: t('DRIVER_QUICK_COMMENT_4_2', "COVID-19 issue") },
+          { key: 3, content: t('DRIVER_QUICK_COMMENT_4_3', "Didn't follow instructions") },
+          { key: 4, content: t('DRIVER_QUICK_COMMENT_4_4', "Rude") },
+          { key: 5, content: t('DRIVER_QUICK_COMMENT_4_5', "Not on-time") },
+        ]
+      },
+      5: {
+        title: t('DRIVER_QUICK_COMMENT_TITLE_5', "What went well?"),
+        list: [
+          { key: 0, content: t('DRIVER_QUICK_COMMENT_5_0', "Good communication") },
+          { key: 1, content: t('DRIVER_QUICK_COMMENT_5_1', "Followed instructions") },
+          { key: 2, content: t('DRIVER_QUICK_COMMENT_5_2', "Friendly") },
+          { key: 3, content: t('DRIVER_QUICK_COMMENT_5_3', 'Handled with care') },
+          { key: 4, content: t('DRIVER_QUICK_COMMENT_5_4', "Above and beyond") },
+        ]
+      },
+    },
+    product: {
+      like: [
+        { key: 0, content: t('QUICK_COMMENT_LIKE_0', "Tasty") },
+        { key: 1, content: t('QUICK_COMMENT_LIKE_1', "Good price") },
+        { key: 2, content: t('QUICK_COMMENT_LIKE_2', "Good portion size") },
+        { key: 3, content: t('QUICK_COMMENT_LIKE_3', "Packed well") },
+      ],
+      dislike: [
+        { key: 0, content: t('QUICK_COMMENT_DISLIKE_0', "Not tasty") },
+        { key: 1, content: t('QUICK_COMMENT_DISLIKE_1', "High price") },
+        { key: 2, content: t('QUICK_COMMENT_DISLIKE_2', "Bad portion size") },
+        { key: 3, content: t('QUICK_COMMENT_DISLIKE_3', "Not packed well") },
+      ]
     }
   }
 

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 } 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,29 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
     }
   }
 
+  const onClickSetting = () => {
+    setOpenSLASettingModal(true)
+  }
+
+  const handleClose = () => {
+    setOpenSearchModal(false)
+    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)
@@ -292,6 +423,10 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
     scrollRef.current?.scrollTo({ y: 0, animated: true });
   }, [currentTabSelected])
 
+  useEffect(() => {
+    setSelectedTabStatus(deliveryStatus)
+  }, [])
+
   return (
     // <GestureRecognizer
     //   onSwipeLeft={onSwipeLeft}
@@ -314,10 +449,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}
@@ -460,6 +644,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
                 onNavigationRedirect={onNavigationRedirect}
                 getOrderStatus={getOrderStatus}
                 handleClickOrder={handleClickOrder}
+                slaSettingTime={slaSettingTime}
               />
             )}
           {!logisticOrders?.error?.length &&
@@ -552,8 +737,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 +754,131 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
                 marginBottom: 30,
                 marginTop: 30
               }}
-              onClick={() => setOpenModal(false)}
+              onClick={() => handleClose()}
             />
-            <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}
-            />
-            <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}
+                      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>
             )}
-            <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 +886,94 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
   );
 };
 
+export const StatusBlock = (props: any) => {
+  const { item, last, setHour, setMinute, setSettingTimeErrorMessage } = props
+  const [showTime, setShowTime] = useState(false)
+
+  useEffect(() => {
+    if (last) {
+      setShowTime(true)
+    }
+  }, [last])
+
+  return (
+    <StatusItems>
+      <Pressable onPress={() => setShowTime(!showTime)} style={{ marginBottom: 5 }}>
+        <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
+          setHour={setHour}
+          setMinute={setMinute}
+          setSettingTimeErrorMessage={setSettingTimeErrorMessage}
+        />
+      )}
+      {last && (
+        <OverLine />
+      )}
+    </StatusItems>
+  )
+}
+
+export const Timer = (props: any) => {
+  const { setHour, setMinute, setSettingTimeErrorMessage } = props
+  const [, t] = useLanguage()
+  const theme = useTheme()
+
+  const styles = StyleSheet.create({
+    inputStyle: {
+      paddingHorizontal: 7,
+      paddingVertical: 2,
+      borderRadius: 0,
+      fontSize: 14,
+    }
+  })
+
+  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')}
+      />
+    </TimerInputWrapper>
+  )
+}
+
 export const OrdersOption = (props: OrdersOptionParams) => {
   const [, t] = useLanguage();
   const theme = useTheme()
@@ -712,13 +1054,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,93 @@ 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`
+  border-width: 1px;
+  border-radius: 7.6px;
+  color: ${(props: any) => props.theme.colors.disabled};
+  border-color: ${(props: any) => props.theme.colors.disabled};
+  margin-left: 30px;
+  margin-right: 30px;
+  flex-direction: row;
+  align-items: center;
+  width: 80px;
+`
+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`
+
 `

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

@@ -16,7 +16,8 @@ export const PreviousOrders = (props: any) => {
     getOrderStatus,
     handleClickOrder,
     isLogisticOrder,
-    handleClickLogisticOrder
+    handleClickLogisticOrder,
+    slaSettingTime
   } = props;
   const [, t] = useLanguage();
   const [{ parseDate, optimizeImage }] = useUtils();
@@ -39,19 +40,14 @@ export const PreviousOrders = (props: any) => {
     },
     icon: {
       borderRadius: 7.6,
-      width: 75,
-      height: 75,
+      width: 60,
+      height: 60
     },
     logo: {
       borderRadius: 10,
-      shadowColor: "#000",
-      shadowOffset: {
-        width: 0,
-        height: 1,
-      },
-      shadowOpacity: 0.20,
-      shadowRadius: 1.41,
-      elevation: 2,
+      shadowColor: "#0000006e",
+      shadowRadius: 10,
+      elevation: 15,
       justifyContent: 'center',
       alignItems: 'center',
       marginLeft: 3,
@@ -99,9 +95,9 @@ export const PreviousOrders = (props: any) => {
 
   useEffect(() => {
     const interval = setInterval(() => {
-      const date:any = Date.now()
+      const date: any = Date.now()
       setCurrentTime(date)
-    }, 60000)
+    }, slaSettingTime)
 
     return () => clearInterval(interval)
   }, [])
@@ -130,7 +126,7 @@ export const PreviousOrders = (props: any) => {
                   activeOpacity={1}
                 >
                   <Card key={order.id}>
-                    <Timestatus style={{backgroundColor: order?.time_status === 'in_time' ? '#00D27A' : order?.time_status === 'at_risk' ? '#FFC700' : order?.time_status === 'delayed' ? '#E63757' : '' }}/>
+                    <Timestatus style={{ backgroundColor: order?.time_status === 'in_time' ? '#00D27A' : order?.time_status === 'at_risk' ? '#FFC700' : order?.time_status === 'delayed' ? '#E63757' : '' }} />
                     {
                       order.business?.logo && (
                         <Logo style={styles.logo}>
@@ -163,7 +159,7 @@ export const PreviousOrders = (props: any) => {
                           />
                         </NotificationIcon>
                       )}
-                      <View style={{flexDirection: 'row'}}>
+                      <View style={{ flexDirection: 'row' }}>
                         <OText
                           style={styles.date}
                           color={theme.colors.unselectText}
@@ -175,7 +171,7 @@ export const PreviousOrders = (props: any) => {
                             ? parseDate(order?.delivery_datetime_utc, { outputFormat: 'MM/DD/YY · HH:mm a' })
                             : parseDate(order?.delivery_datetime, { utc: false })}{' · '}
                         </OText>
-                        <OText style={styles.date} color={order?.time_status === 'in_time' ? '#00D27A' : order?.time_status === 'at_risk' ? '#FFC700' : order?.time_status === 'delayed' ? '#E63757' : '' } >{getDelayTime(order)}</OText>
+                        <OText style={styles.date} color={order?.time_status === 'in_time' ? '#00D27A' : order?.time_status === 'at_risk' ? '#FFC700' : order?.time_status === 'delayed' ? '#E63757' : ''} >{getDelayTime(order)}</OText>
                       </View>
                       {!isLogisticOrder && (
                         <MyOrderOptions>
@@ -215,28 +211,28 @@ export const PreviousOrders = (props: any) => {
                         textStyle={{ color: theme.colors.primary }}
                       />
                     ) : (
-                    <>
-                      <OButton
-                        text={t('REJECT', 'Reject')}
-                        onClick={() => handleClickLogisticOrder(2, _order?.id)}
-                        bgColor={theme.colors.danger}
-                        borderColor={theme.colors.danger}
-                        imgRightSrc={null}
-                        style={{ borderRadius: 7, height: 40 }}
-                        parentStyle={{ width: '45%' }}
-                        textStyle={{ color: theme.colors.dangerText }}
-                      />
-                      <OButton
-                        text={t('ACCEPT', 'Accept')}
-                        onClick={() => handleClickLogisticOrder(1, _order?.id)}
-                        bgColor={theme.colors.successOrder}
-                        borderColor={theme.colors.successOrder}
-                        imgRightSrc={null}
-                        style={{ borderRadius: 7, height: 40 }}
-                        parentStyle={{ width: '45%' }}
-                        textStyle={{ color: theme.colors.successText }}
-                      />
-                    </>
+                      <>
+                        <OButton
+                          text={t('REJECT', 'Reject')}
+                          onClick={() => handleClickLogisticOrder(2, _order?.id)}
+                          bgColor={theme.colors.danger}
+                          borderColor={theme.colors.danger}
+                          imgRightSrc={null}
+                          style={{ borderRadius: 7, height: 40 }}
+                          parentStyle={{ width: '45%' }}
+                          textStyle={{ color: theme.colors.dangerText }}
+                        />
+                        <OButton
+                          text={t('ACCEPT', 'Accept')}
+                          onClick={() => handleClickLogisticOrder(1, _order?.id)}
+                          bgColor={theme.colors.successOrder}
+                          borderColor={theme.colors.successOrder}
+                          imgRightSrc={null}
+                          style={{ borderRadius: 7, height: 40 }}
+                          parentStyle={{ width: '45%' }}
+                          textStyle={{ color: theme.colors.successText }}
+                        />
+                      </>
                     )}
                   </AcceptOrRejectOrder>
                 )}

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

@@ -8,16 +8,16 @@ export const Card = styled.View`
 `;
 
 export const Logo = styled.View`
-  height: 75px;
-  width: 75px;
+  height: 65px;
+  width: 65px;
 `;
 
 export const Information = styled.View`
   position: relative;
   justify-content: flex-start;
-  margin-horizontal: 10px;
+  margin-horizontal: 5px;
   flex: 1;
-  max-height: 70px;
+  max-height: 60px;
 `;
 
 export const MyOrderOptions = styled.View`
@@ -39,12 +39,7 @@ export const AcceptOrRejectOrder = styled.View`
 export const Timestatus = styled.View`
   position: relative;;
   width: 4px;
-  height: 65px;
+  height: 55px;
   border-radius: 20px;
   top: 5px;
-  margin-right: 5px; 
-  ${(props: any) => props.theme?.rtl && css`
-    left: unset;
-    right: -5px;
- `}
 `

package/themes/original/src/components/Cart/index.tsx

@@ -329,7 +329,7 @@ const CartUI = (props: any) => {
                 <OText size={12} numberOfLines={1}>
                   {walletName[cart?.wallets?.find((wallet: any) => wallet.id === event.wallet_id)?.type]?.name}
                 </OText>
-                <OText size={12}>-{parsePrice(event.amount)}</OText>
+                <OText size={12}>-{parsePrice(event.amount, { isTruncable: true })}</OText>
               </OSTable>
             ))}
             {isCouponEnabled && !isCartPending && (

package/themes/original/src/components/OrderSummary/index.tsx

@@ -276,7 +276,7 @@ const OrderSummaryUI = (props: any) => {
                   <OText size={12} numberOfLines={1}>
                     {walletName[cart?.wallets?.find((wallet: any) => wallet.id === event.wallet_id)?.type]?.name}
                   </OText>
-                  <OText size={12}>-{parsePrice(event.amount)}</OText>
+                  <OText size={12}>-{parsePrice(event.amount, { isTruncable: true })}</OText>
                 </OSTable>
               ))}
               {isCouponEnabled && !isCartPending && (

package/themes/original/src/components/PaymentOptionWallet/index.tsx

@@ -48,7 +48,7 @@ const PaymentOptionWalletUI = (props: any) => {
     new Array(walletsState.result?.length).fill(false)
   );
 
-  const creditBalance: any = (wallet: any) => ` = ${parsePrice((wallet.balance * wallet.redemption_rate) / 100)}`
+  const creditBalance: any = (wallet: any) => ` = ${parsePrice(wallet.balance / wallet.redemption_rate)}`
 
   const walletName: any = {
     cash: {

package/themes/original/src/components/ReviewDriver/index.tsx

@@ -10,6 +10,8 @@ import LinearGradient from 'react-native-linear-gradient'
 import { FloatingBottomContainer } from '../../layouts/FloatingBottomContainer'
 import Spinner from 'react-native-loading-spinner-overlay'
 
+import { reviewCommentList } from '../../../../../src/utils'
+
 import {
   ReviewDriverContainer,
   DriverPhotoContainer,
@@ -91,12 +93,7 @@ const ReviewDriverUI = (props: ReviewDriverParams) => {
     { key: 5, text: t('GREAT', 'Great'), percent: 1, parentStyle: { right: '0%' }, isInnerStyle: false,  pointerColor: false }
   ]
 
-  const commentsList = [
-    { key: 0, content: t('FAST_AND_EFFICIENT', "Fast and efficient") },
-    { key: 1, content: t('DELIVERY_PERFECT', "Delivery perfect") },
-    { key: 2, content: t('EXCELLENT_COMMUNICATION', "Excellent communication") },
-    { key: 3, content: t('CORDIAL_SERVICE', 'Cordial service') }
-  ]
+  const commentsList = reviewCommentList('driver')
 
   const onSubmit = () => {
     if (dirverReviews?.qualification === 0) {
@@ -248,9 +245,11 @@ const ReviewDriverUI = (props: ReviewDriverParams) => {
               </RatingTextContainer>
             </RatingBarContainer>
 
-            <OText style={{ marginTop: 30 }} color={theme.colors.textNormal}>{t('COMMENTS', 'Comments')}</OText>
+            <OText style={{ marginTop: 30 }} color={theme.colors.textNormal}>
+              {commentsList[dirverReviews?.qualification || 1]?.title}
+            </OText>
             <CommentsButtonGroup>
-              {commentsList.map(commentItem => (
+              {commentsList[dirverReviews?.qualification || 1]?.list?.map(commentItem => (
                 <OButton
                   key={commentItem.key}
                   text={commentItem.content}

package/themes/original/src/components/ReviewOrder/index.tsx

@@ -22,6 +22,8 @@ import Spinner from 'react-native-loading-spinner-overlay'
 import { ReviewOrderParams } from '../../types'
 import { useTheme } from 'styled-components/native'
 
+import { reviewCommentList } from '../../../../../src/utils'
+
 export const ReviewOrderUI = (props: ReviewOrderParams) => {
   const {
     order,
@@ -113,14 +115,7 @@ export const ReviewOrderUI = (props: ReviewOrderParams) => {
     { key: 5, text: t('GREAT', 'Great'), percent: 1, parentStyle: { right: '0%' }, isInnerStyle: false,  pointerColor: false }
   ]
 
-  const commentsList = [
-    { key: 0, content: t('IT_WASNT_TASTY', "It wasn't tasty") },
-    { key: 1, content: t('IT_DOESNT_PACK_WELL', "It doesn't pack well") },
-    { key: 2, content: t('IT_ISNT_WORTH_WHAT_IT_COSTS', "It isn't worth what it costs") },
-    { key: 3, content: t('TOO_SLOW', 'Too slow') },
-    { key: 4, content: t('SUSTAINABLE_PACKAGING_WASNT_USED', "Sustainable packaging wasn't used") },
-    { key: 5, content: t('THEY_DID_NOT_FOLLOW_THE_ORDER_NOTES', 'They did not follow the order notes') }
-  ]
+  const commentsList = reviewCommentList('order')
 
   const handleChangeStars = (index: number) => {
     switch (index) {
@@ -268,9 +263,11 @@ export const ReviewOrderUI = (props: ReviewOrderParams) => {
                 </RatingTextContainer>
               </RatingBarContainer>
 
-              <OText style={{ marginTop: 30 }} color={theme.colors.textNormal}>{t('COMMENTS', 'Comments')}</OText>
+              <OText style={{ marginTop: 30 }} color={theme.colors.textNormal}>
+                {commentsList[stars?.quality || 1]?.title}
+              </OText>
               <CommentsButtonGroup>
-                {commentsList.map(commentItem => (
+                {commentsList[stars?.quality || 1]?.list?.map(commentItem => (
                   <OButton
                     key={commentItem.key}
                     text={commentItem.content}

package/themes/original/src/components/SingleProductReview/index.tsx

@@ -6,6 +6,8 @@ import AntDesignIcons from 'react-native-vector-icons/AntDesign'
 import { useTheme } from 'styled-components/native'
 import { SingleProductReviewParams } from '../../types'
 
+import { reviewCommentList } from '../../../../../src/utils'
+
 import {
   ProductContainer,
   ProductHeader,
@@ -45,13 +47,7 @@ export const SingleProductReview = (props: SingleProductReviewParams) => {
   const [isShowTextArea, setIsShowTextArea] = useState(false)
   const [qualification, setQualification] = useState(5)
 
-  const commentsList = [
-    { key: 0, content: t('IT_WASNT_TASTY', "It wasn't tasty") },
-    { key: 1, content: t('SMALL_PORTION', 'Small portion') },
-    { key: 2, content: t('WET_OR_LEAKY', 'Wet or leaky') },
-    { key: 3, content: t('SLOPPY_PRESENTATION', 'Sloppy presentation') },
-    { key: 4, content: t('COLD_OR_MELTED', 'Cold or melted') }
-  ]
+  const commentsList = reviewCommentList('product')
 
   const isSelectedComment = (commentKey: number) => {
     const found = comments.find((comment: any) => comment?.key === commentKey)
@@ -115,7 +111,7 @@ export const SingleProductReview = (props: SingleProductReviewParams) => {
           </LikeHandsActionContainer>
         </ProductHeader>
         <CommentsButtonGroup>
-          {commentsList.map(commentItem => (
+          {commentsList[qualification === 5 ? 'like' : 'dislike']?.map(commentItem => (
             <OButton
               key={commentItem.key}
               text={commentItem.content}