ordering-ui-react-native 0.11.37 → 0.11.41

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-react-native",
-  "version": "0.11.37",
+  "version": "0.11.41",
   "description": "Reusable components made in react native",
   "main": "src/index.tsx",
   "author": "ordering.inc",
@@ -66,6 +66,7 @@
     "react-native-awesome-loading": "^1.0.15",
     "react-native-background-timer": "^2.4.1",
     "react-native-bootsplash": "^3.2.3",
+    "react-native-calendar-picker": "^7.1.2",
     "react-native-country-picker-modal": "^2.0.0",
     "react-native-credit-card-input": "^0.4.1",
     "react-native-document-picker": "^5.2.0",

package/src/theme.json

@@ -125,4 +125,3 @@
     }
   }
 }
-

package/themes/business/index.tsx

@@ -15,6 +15,13 @@ import { OrderMessage } from './src/components/OrderMessage';
 import { OrderDetailsBusiness } from './src/components/OrderDetails/Business';
 import { OrderDetailsDelivery } from './src/components/OrderDetails/Delivery';
 import { OrdersOption } from './src/components/OrdersOption';
+import { OrdersOptionStatus } from './src/components/OrdersOptionStatus';
+import { OrdersOptionBusiness } from './src/components/OrdersOptionBusiness';
+import { OrdersOptionCity } from './src/components/OrdersOptionCity';
+import { OrdersOptionDate } from './src/components/OrdersOptionDate';
+import { OrdersOptionDelivery } from './src/components/OrdersOptionDelivery';
+import { OrdersOptionDriver } from './src/components/OrdersOptionDriver';
+import { OrdersOptionPaymethod } from './src/components/OrdersOptionPaymethod';
 import { OrderSummary } from './src/components/OrderSummary';
 import { PhoneInputNumber } from './src/components/PhoneInputNumber';
 import { PreviousMessages } from './src/components/PreviousMessages';
@@ -39,6 +46,8 @@ import {
   OAlert,
   OModal,
   OLink,
+  ODropDown,
+  ODropDownCalendar
 } from './src/components/shared';
 
 //layouts
@@ -69,6 +78,13 @@ export {
   OrderDetailsDelivery,
   OrderMessage,
   OrdersOption,
+  OrdersOptionStatus,
+  OrdersOptionBusiness,
+  OrdersOptionCity,
+  OrdersOptionDate,
+  OrdersOptionDelivery,
+  OrdersOptionDriver,
+  OrdersOptionPaymethod,
   OrderSummary,
   PhoneInputNumber,
   PreviousMessages,
@@ -91,6 +107,8 @@ export {
   OModal,
   OText,
   OTextarea,
+  ODropDown,
+  ODropDownCalendar,
   //layouts
   Container,
   SafeAreaContainer,

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

@@ -1,18 +1,35 @@
 import React, { useEffect, useState, useRef } from 'react';
 import { View, Pressable, StyleSheet, ScrollView, RefreshControl } from 'react-native';
-import { useLanguage, OrderListGroups } from 'ordering-components/native';
+import { useLanguage, useUtils, OrderListGroups } from 'ordering-components/native';
 import { Placeholder, PlaceholderLine, Fade } from 'rn-placeholder';
 import FeatherIcon from 'react-native-vector-icons/Feather';
+import FontistoIcon from 'react-native-vector-icons/Fontisto'
+import { useTheme } from 'styled-components/native';
 import { DeviceOrientationMethods } from '../../../../../src/hooks/DeviceOrientation'
 
-import { useTheme } from 'styled-components/native';
-import { OText, OButton } from '../shared';
+import { OText, OButton, OModal, OIconButton, OInput } from '../shared';
 import { NotFoundSource } from '../NotFoundSource';
-import { FiltersTab, TabsContainer, Tag } from './styles';
+import {
+  FiltersTab,
+  TabsContainer,
+  Tag,
+  IconWrapper,
+  ModalContainer,
+  ModalTitle,
+  FilterBtnWrapper
+} from './styles';
 import { PreviousOrders } from '../PreviousOrders';
 import { OrdersOptionParams } from '../../types';
 
 import GestureRecognizer from 'react-native-swipe-gestures';
+import ODropDown from '../shared/ODropDown';
+import { OrdersOptionStatus } from '../OrdersOptionStatus'
+import { OrdersOptionCity } from '../OrdersOptionCity';
+import { OrdersOptionBusiness } from '../OrdersOptionBusiness';
+import { OrdersOptionDelivery } from '../OrdersOptionDelivery';
+import { OrdersOptionPaymethod } from '../OrdersOptionPaymethod';
+import { OrdersOptionDriver } from '../OrdersOptionDriver';
+import { OrdersOptionDate } from '../OrdersOptionDate';
 
 const tabsList: any = {
   pending: 1,
@@ -47,12 +64,32 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
     loadOrders,
     loadMoreOrders,
     onNavigationRedirect,
+    filtered,
+    onFiltered,
     handleClickOrder
   } = props;
 
+  const defaultSearchList = {
+    id: '',
+    state: '',
+    city: '',
+    business: '',
+    delivery_type: '',
+    paymethod: '',
+    driver: '',
+    date: {
+      from: '',
+      to: '',
+      type: ''
+    }
+  }
+
   const theme = useTheme();
   const [, t] = useLanguage();
+  const [{ parseDate }] = useUtils()
   const [orientationState] = useDeviceOrientation();
+  const [openModal, setOpenModal] = useState(false)
+  const [search, setSearch] = useState(defaultSearchList)
 
   const WIDTH_SCREEN = orientationState?.dimensions?.width
 
@@ -110,6 +147,13 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
       fontWeight: 'normal',
       fontSize: 18,
     },
+    inputStyle: {
+      width: '100%',
+      borderWidth: 1,
+      borderColor: '#DEE2E6',
+      borderRadius: 7.6,
+      marginBottom: 24
+    }
   });
 
   const scrollRef = useRef() as React.MutableRefObject<ScrollView>;
@@ -135,6 +179,19 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
     return orderStatus.find((status: any) => status.key === key)?.text;
   };
 
+  const applyFilters = () => {
+    setOrdersGroup({
+      ...ordersGroup,
+      [currentTabSelected]: {
+        ...ordersGroup[currentTabSelected],
+        orders: []
+      }
+    })
+    const dateRange = calculateDate(search.date.type, search.date.from, search.date.to)
+    onFiltered && onFiltered({...search, date: {...dateRange}})
+    setOpenModal(false)
+  }
+
   const handleTagSelected = (tag: any) => {
     const tags = tagsState?.values.includes(tag)
       ? tagsState?.values.filter((t: any) => t !== tag)
@@ -184,8 +241,40 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
     nextTab && setCurrentTabSelected(nextTab)
   }
 
+  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}
+    }
+  }
+
   useEffect(() => {
     setCurrentFilters(null)
+    onFiltered && onFiltered(null)
+    setSearch(defaultSearchList)
     scrollRefTab.current?.scrollTo({ animated: true });
     scrollListRef.current?.scrollTo({ animated: true });
     scrollRef.current?.scrollTo({ y: 0, animated: true });
@@ -201,12 +290,21 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
     <>
       <View style={styles.header}>
         <OText style={styles.title}>{t('MY_ORDERS', 'My orders')}</OText>
-        <FeatherIcon
-          name='refresh-cw'
-          color={theme.colors.backgroundDark}
-          size={24}
-          onPress={() => loadOrders && loadOrders({ newFetch: true })}
-        />
+        <IconWrapper>
+          <FeatherIcon
+            name='refresh-cw'
+            color={theme.colors.backgroundDark}
+            size={24}
+            onPress={() => loadOrders && loadOrders({ newFetch: true })}
+            style={{ marginRight: 20 }}
+          />
+          <FontistoIcon
+            name='search'
+            color={theme.colors.backgroundDark}
+            size={24}
+            onPress={() => setOpenModal(true)}
+          />
+        </IconWrapper>
       </View>
 
       <FiltersTab>
@@ -323,7 +421,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
         }
       >
         {!currentOrdersGroup.error?.length &&
-          !!currentOrdersGroup.orders?.length &&
+          currentOrdersGroup.orders?.length > 0 &&
         (
           <PreviousOrders
             orders={currentOrdersGroup.orders}
@@ -371,7 +469,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
           !currentOrdersGroup.loading &&
           currentOrdersGroup.pagination.totalPages &&
           currentOrdersGroup.pagination.currentPage < currentOrdersGroup.pagination.totalPages &&
-          currentOrdersGroup.orders.length &&
+          currentOrdersGroup.orders.length > 0 &&
         (
           <OButton
             onClick={handleLoadMore}
@@ -386,7 +484,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
 
         {!currentOrdersGroup.loading &&
           (currentOrdersGroup.error?.length ||
-          !currentOrdersGroup.orders?.length) &&
+          currentOrdersGroup.orders?.length === 0) &&
         (
           <NotFoundSource
             content={
@@ -402,6 +500,81 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
         )}
       </ScrollView>
     {/* </GestureRecognizer> */}
+      <OModal open={openModal} entireModal customClose>
+        <ModalContainer
+          nestedScrollEnabled={true}
+        >
+          <OIconButton
+            icon={theme.images.general.arrow_left}
+            borderColor={theme.colors.clear}
+            iconColor={theme.colors.backArrow}
+            iconStyle={{ width: 20, height: 13 }}
+            style={{
+              maxWidth: 40,
+              height: 35,
+              justifyContent: 'flex-end',
+              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}
+          />
+          <OrdersOptionDate
+            {...props}
+            search={search}
+            onSearch={setSearch}
+          />
+          <OrdersOptionStatus
+            {...props}
+            search={search}
+            onSearch={setSearch}
+          />
+          <OrdersOptionCity
+            {...props}
+            search={search}
+            onSearch={setSearch}
+          />
+          <OrdersOptionBusiness
+            {...props}
+            search={search}
+            onSearch={setSearch}
+          />
+          <OrdersOptionDelivery
+            {...props}
+            search={search}
+            onSearch={setSearch}
+          />
+          <OrdersOptionPaymethod
+            {...props}
+            search={search}
+            onSearch={setSearch}
+          />
+          <OrdersOptionDriver
+            {...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}
+          />
+        </ModalContainer>
+      </OModal>
     </>
   );
 };

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

@@ -1,6 +1,6 @@
 import styled from 'styled-components/native';
 
-export const FiltersTab = styled.View`
+export const FiltersTab = styled.ScrollView`
   margin-bottom: 20px;
 `;
 
@@ -22,3 +22,33 @@ export const Tag = styled.Pressable`
   border-radius: 50px;
   margin-right: 15px;
 `;
+
+export const IconWrapper = styled.View`
+  flex-direction: row;
+  align-items: center;
+`
+
+export const ModalContainer = styled.ScrollView`
+  padding: 20px 40px 10px 40px;
+`
+
+export const ModalTitle = styled.Text`
+  font-family: Poppins;
+  font-style: normal;
+  font-weight: 600;
+  font-size: 20px;
+  color: ${(props: any) => props.theme.colors.textGray};
+  text-transform: capitalize;
+  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;
+`

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

@@ -0,0 +1,51 @@
+import React, { useState, useEffect } from 'react';
+import { useLanguage } from 'ordering-components/native';
+import { useTheme } from 'styled-components/native';
+import { Container } from './styles';
+import ODropDown from '../shared/ODropDown';
+import { BusinessList as BusinessListController } from 'ordering-components/native'
+import { Platform } from 'react-native'
+
+export const OrdersOptionBusinessUI = (props: any) => {
+  const {
+    search,
+    onSearch,
+    businessesList
+  } = props
+
+  const theme = useTheme();
+  const [, t] = useLanguage();
+  const [optionsList, setOptionsList] = useState([])
+
+  useEffect(() => {
+    const businesses: any = []
+    for (const business of businessesList?.businesses) {
+      businesses.push({value: business.id, content: business.name})
+    }
+    setOptionsList(businesses)
+  }, [businessesList?.businesses])
+
+  return (
+    <Container isIos={Platform.OS === 'ios'}>
+      <ODropDown
+        options={optionsList}
+        defaultValue={search.business}
+        onSelect={(option: any) => onSearch({ ...search, business: option })}
+        isModal
+        bgcolor={theme.colors.inputDisabled}
+        textcolor={theme.colors.unselectText}
+        placeholder={t('SELECT_BUSINESS', 'Select Business')}
+        dropViewMaxHeight={200}
+      />
+    </Container>
+  );
+};
+
+export const OrdersOptionBusiness = (props: any) => {
+  const ordersOptionBusinessProps = {
+    ...props,
+    propsToFetch: ['id', 'name'],
+    UIComponent: OrdersOptionBusinessUI
+  };
+  return <BusinessListController {...ordersOptionBusinessProps} />
+};

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

@@ -0,0 +1,8 @@
+import styled, { css } from 'styled-components/native';
+
+export const Container = styled.View`
+  margin-bottom: 24px;
+  ${(props: any) => props.isIos && css`
+    z-index: 17;
+  `}
+`;

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

@@ -0,0 +1,52 @@
+import React, { useState, useEffect } from 'react';
+import { useLanguage } from 'ordering-components/native';
+import { useTheme } from 'styled-components/native';
+import { Container } from './styles';
+import ODropDown from '../shared/ODropDown';
+import { MainSearch as MainSearchController } from 'ordering-components/native'
+import { Platform } from 'react-native';
+
+export const OrdersOptionCityUI = (props: any) => {
+  const {
+    search,
+    onSearch,
+    allListValues
+  } = props
+
+  const theme = useTheme();
+  const [, t] = useLanguage();
+  const [optionsList, setOptionsList] = useState([])
+
+  useEffect(() => {
+    const cities: any = []
+    for (const country of allListValues?.countries) {
+      for (const city of country.cities) {
+        cities.push({value: city.id, content: city.name})
+      }
+    }
+    setOptionsList(cities)
+  }, [allListValues?.countries])
+
+  return (
+    <Container isIos={Platform.OS === 'ios'}>
+      <ODropDown
+        options={optionsList}
+        defaultValue={search.city}
+        onSelect={(option: any) => onSearch({ ...search, city: option })}
+        isModal
+        bgcolor={theme.colors.inputDisabled}
+        textcolor={theme.colors.unselectText}
+        placeholder={t('SELECT_CITY', 'Select City')}
+        dropViewMaxHeight={200}
+      />
+    </Container>
+  );
+};
+
+export const OrdersOptionCity = (props: any) => {
+  const ordersOptionCityProps = {
+    ...props,
+    UIComponent: OrdersOptionCityUI
+  };
+  return <MainSearchController {...ordersOptionCityProps} />;
+};

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

@@ -0,0 +1,8 @@
+import styled, { css } from 'styled-components/native';
+
+export const Container = styled.View`
+  margin-bottom: 24px;
+  ${(props: any) => props.isIos && css`
+    z-index: 18;
+  `}
+`;

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

@@ -0,0 +1,52 @@
+import React from 'react';
+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'
+
+export const OrdersOptionDate = (props: any) => {
+  const {
+    search,
+    onSearch
+  } = props
+
+  const theme = useTheme();
+  const [, t] = useLanguage();
+  const optionsList: any = [
+    { value: 'today', content: t('TODAY', 'Today') },
+    { value: 'yesterday', content: t('YESTERDAY', 'Yesterday') },
+    { value: 'last_7days', content: t('LAST_7_DAYS', 'Last 7 days') },
+    { value: 'last_30days', content: t('LAST_30_DAYS', 'Last 30 days') }
+  ]
+
+  const handleChangeOption = (option: any) => {
+    if (option === 'calendar') {
+      onSearch({...search, date: {...search.date, type: option}})
+    } else {
+      onSearch({...search, date: {from: '', to: '', type: option}})
+    }
+  }
+
+  const handleChangeDate = (from: any, to: any) => {
+    onSearch({...search, date: {...search.date, from: from, to: to}})
+  }
+
+  return (
+    <Container isIos={Platform.OS === 'ios'}>
+      <ODropDownCalendar
+        options={optionsList}
+        defaultValue={search.date.type}
+        onSelect={(option: any) => handleChangeOption(option)}
+        isModal
+        bgcolor={theme.colors.inputDisabled}
+        textcolor={theme.colors.unselectText}
+        placeholder={t('SELECT_DATE', 'Select Date')}
+        dropViewMaxHeight={500}
+        isCalendar
+        rangeDate={search.date}
+        handleChangeDate={handleChangeDate}
+      />
+    </Container>
+  );
+};

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

@@ -0,0 +1,8 @@
+import styled, { css } from 'styled-components/native';
+
+export const Container = styled.View`
+  margin-bottom: 24px;
+  ${(props: any) => props.isIos && css`
+    z-index: 20;
+  `}
+`;

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

@@ -0,0 +1,35 @@
+import React from 'react';
+import { useLanguage } from 'ordering-components/native';
+import { useTheme } from 'styled-components/native';
+import { Container } from './styles';
+import ODropDown from '../shared/ODropDown';
+import { Platform } from 'react-native'
+
+export const OrdersOptionDelivery = (props: any) => {
+  const {
+    search,
+    onSearch
+  } = props
+
+  const theme = useTheme();
+  const [, t] = useLanguage();
+  const optionsList: any = [
+    { value: '1', content: t('DELIVERY', 'Delivery') },
+    { value: '2', content: t('PICKUP', 'Pickup') }
+  ]
+
+  return (
+    <Container isIos={Platform.OS === 'ios'}>
+      <ODropDown
+        options={optionsList}
+        defaultValue={search.delivery_type}
+        onSelect={(option: any) => onSearch({ ...search, delivery_type: option })}
+        isModal
+        bgcolor={theme.colors.inputDisabled}
+        textcolor={theme.colors.unselectText}
+        placeholder={t('SELECT_DELIVERY_TYPE', 'Select Delivery type')}
+        dropViewMaxHeight={200}
+      />
+    </Container>
+  );
+};

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

@@ -0,0 +1,8 @@
+import styled, { css } from 'styled-components/native';
+
+export const Container = styled.View`
+  margin-bottom: 24px;
+  ${(props: any) => props.isIos && css`
+    z-index: 16;
+  `}
+`;

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

@@ -0,0 +1,50 @@
+import React, { useState, useEffect } from 'react';
+import { useLanguage, DriverList as DriverListControllder } from 'ordering-components/native';
+import { useTheme } from 'styled-components/native';
+import { Container } from './styles';
+import ODropDown from '../shared/ODropDown';
+import { Platform } from 'react-native'
+
+export const OrdersOptionDriverUI = (props: any) => {
+  const {
+    search,
+    onSearch,
+    driverList
+  } = props
+
+  const theme = useTheme();
+  const [, t] = useLanguage();
+  const [optionsList, setOptionsList] = useState([])
+
+  useEffect(() => {
+    const drivers: any = []
+    for (const driver of driverList?.drivers) {
+      drivers.push({value: driver.id, content: driver.name})
+    }
+    setOptionsList(drivers)
+  }, [driverList?.drivers])
+
+  return (
+    <Container isIos={Platform.OS === 'ios'}>
+      <ODropDown
+        options={optionsList}
+        defaultValue={search.driver}
+        onSelect={(option: any) => onSearch({ ...search, driver: option })}
+        isModal
+        bgcolor={theme.colors.inputDisabled}
+        textcolor={theme.colors.unselectText}
+        placeholder={t('SELECT_DRIVER', 'Select Driver')}
+        dropViewMaxHeight={165}
+      />
+    </Container>
+  );
+};
+
+export const OrdersOptionDriver = (props: any) => {
+  const ordersOptionDriverProps = {
+    ...props,
+    propsToFetch: ['id', 'name', 'lastname'],
+    UIComponent: OrdersOptionDriverUI
+  };
+  return <DriverListControllder {...ordersOptionDriverProps} />;
+};

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

@@ -0,0 +1,8 @@
+import styled, { css } from 'styled-components/native';
+
+export const Container = styled.View`
+  margin-bottom: 24px;
+  ${(props: any) => props.isIos && css`
+    z-index: 14;
+  `}
+`;