ordering-ui-react-native 0.12.14 → 0.12.18

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

@@ -0,0 +1,54 @@
+import styled from 'styled-components/native';
+
+export const FiltersTab = styled.View`
+  margin-bottom: 20px;
+`;
+
+export const TabsContainer = styled.View`
+  width: ${({ width }: { width: number }) => `${width-42}px`};
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  border-bottom-width: 1px;
+  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;
+`
+
+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 2/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 2/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 2/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 2/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 2/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 2/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 2/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 2/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 2/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 2/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;
+  `}
+`;

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

@@ -0,0 +1,49 @@
+import React, { useState, useEffect } from 'react';
+import { useLanguage, PaymethodList as PyamethodListControllder } 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 OrdersOptionPaymethodUI = (props: any) => {
+  const {
+    search,
+    onSearch,
+    paymethodList
+  } = props
+
+  const theme = useTheme();
+  const [, t] = useLanguage();
+  const [optionsList, setOptionsList] = useState([])
+
+  useEffect(() => {
+    const paymethods: any = []
+    for (const paymethod of paymethodList?.paymethods) {
+      paymethods.push({value: paymethod.id, content: paymethod.name})
+    }
+    setOptionsList(paymethods)
+  }, [paymethodList?.paymethods])
+
+  return (
+    <Container isIos={Platform.OS === 'ios'}>
+      <ODropDown
+        options={optionsList}
+        defaultValue={search.paymethod}
+        onSelect={(option: any) => onSearch({ ...search, paymethod: option })}
+        isModal
+        bgcolor={theme.colors.inputDisabled}
+        textcolor={theme.colors.unselectText}
+        placeholder={t('SELECT_PAYMETHOD', 'Select Paymethod')}
+        dropViewMaxHeight={200}
+      />
+    </Container>
+  );
+};
+
+export const OrdersOptionPaymethod = (props: any) => {
+  const ordersOptionPaymethodProps = {
+    ...props,
+    UIComponent: OrdersOptionPaymethodUI
+  };
+  return <PyamethodListControllder {...ordersOptionPaymethodProps} />;
+};

package/themes/business/src/components 2/OrdersOptionPaymethod/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: 15;
+  `}
+`;

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

@@ -0,0 +1,46 @@
+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 { Platform } from 'react-native'
+
+export const OrdersOptionStatus = (props: any) => {
+  const {
+    currentTabSelected,
+    tabs,
+    orderStatus,
+    search,
+    onSearch
+  } = props
+
+  const theme = useTheme();
+  const [, t] = useLanguage();
+  const [optionsList, setOptionsList] = useState([])
+
+  useEffect(() => {
+    if (!currentTabSelected || tabs?.length === 0 || orderStatus?.length === 0) return
+    const currentTab = tabs?.find((tab: any) => tab.title === currentTabSelected)
+    const _optionList: any = []
+    for (const tag of currentTab?.tags) {
+      const status = orderStatus.find((status: any) => status.key === tag)
+      _optionList.push({value: tag, content: status.text})
+    }
+    setOptionsList(_optionList)
+  }, [currentTabSelected, tabs, orderStatus])
+
+  return (
+    <Container isIos={Platform.OS === 'ios'}>
+      <ODropDown
+        options={optionsList}
+        defaultValue={search.state}
+        onSelect={(option: any) => onSearch({ ...search, state: option })}
+        isModal
+        bgcolor={theme.colors.inputDisabled}
+        textcolor={theme.colors.unselectText}
+        placeholder={t('SELECT_STATUS', 'Select Status')}
+        dropViewMaxHeight={200}
+      />
+    </Container>
+  );
+};

package/themes/business/src/components 2/OrdersOptionStatus/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: 19;
+  `}
+`;

package/themes/business/src/components 2/PhoneInputNumber/index.tsx

@@ -0,0 +1,160 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { StyleSheet, View } from 'react-native';
+import PhoneInput from 'react-native-phone-number-input';
+import { useLanguage, useConfig } from 'ordering-components/native';
+import { useTheme } from 'styled-components/native';
+import { Wrapper } from './styles';
+import { OText, OIcon } from '../shared';
+import { PhoneInputParams } from '../../types';
+import { transformCountryCode } from '../../utils';
+
+export const PhoneInputNumber = (props: PhoneInputParams) => {
+  const {
+    data,
+    handleData,
+    defaultValue,
+    defaultCode,
+    forwardRef,
+    textInputProps,
+    flagProps,
+    onSubmitEditing,
+  } = props;
+
+  const theme = useTheme();
+  const [, t] = useLanguage();
+  const [{ configs }] = useConfig();
+  const phoneInput = useRef<PhoneInput>(null);
+  const [userphoneNumber, setUserphoneNumber] = useState('');
+
+  const handleChangeNumber = (number: any) => {
+    setUserphoneNumber(number);
+  };
+
+  useEffect(() => {
+    if ((defaultValue && userphoneNumber) || !defaultValue) {
+      if (userphoneNumber === '') return;
+      if (userphoneNumber) {
+        const checkValid = phoneInput.current?.isValidNumber(userphoneNumber);
+        const callingCode = phoneInput.current?.getCallingCode();
+        const formattedNumber =
+          phoneInput.current?.getNumberAfterPossiblyEliminatingZero();
+        const regex = /^[0-9]*$/;
+        const cellphone =
+          userphoneNumber.slice(0, 0) +
+          userphoneNumber.slice(1, userphoneNumber.length);
+        const validNumber = regex.test(cellphone);
+        if ((!checkValid && formattedNumber?.number) || !validNumber) {
+          handleData &&
+            handleData({
+              ...data,
+              error: t(
+                'INVALID_ERROR_PHONE_NUMBER',
+                'The Phone Number field is invalid',
+              ),
+            });
+          return;
+        }
+        handleData &&
+          handleData({
+            ...data,
+            error: '',
+            phone: {
+              country_phone_code: callingCode,
+              cellphone: formattedNumber?.number,
+            },
+          });
+      } else {
+        handleData &&
+          handleData({
+            ...data,
+            error: '',
+            phone: {
+              country_phone_code: null,
+              cellphone: null,
+            },
+          });
+      }
+    }
+  }, [userphoneNumber]);
+
+  const style = StyleSheet.create({
+    input: {
+      backgroundColor: theme.colors.white,
+      borderRadius: 7.6,
+      borderWidth: 1,
+      borderColor: theme.colors.inputSignup,
+      paddingVertical: 0,
+      paddingLeft: 35,
+      flexGrow: 2,
+      flex: 1,
+      height: 50,
+    },
+  });
+
+  return (
+    <Wrapper>
+      <PhoneInput
+        containerStyle={{ width: '100%' }}
+        ref={phoneInput}
+        defaultValue={userphoneNumber || defaultValue}
+        defaultCode={
+          defaultCode
+            ? transformCountryCode(defaultCode)
+            : configs?.default_country_code?.value
+        }
+        onChangeFormattedText={(text: string) => handleChangeNumber(text)}
+        countryPickerProps={{
+          withAlphaFilter: false,
+          withFilter: false,
+          closeButtonImageStyle: { width: 15, height: 15 },
+          closeButtonImage: theme.images.general.close,
+        }}
+        textContainerStyle={style.input}
+        codeTextStyle={{ display: 'none' }}
+        placeholder={t('PHONE_NUMBER', 'Phone number')}
+        textInputProps={{
+          selectionColor: theme.colors.primary,
+          placeholderTextColor: theme.colors.arrowColor,
+          blurOnSubmit: true,
+          onSubmitEditing,
+          autoCompleteType: 'tel',
+          // @ts-ignore
+          ref: forwardRef,
+          color: theme.colors.textGray,
+          ...textInputProps,
+        }}
+        renderDropdownImage={
+          <OIcon
+            src={theme.images.general.chevronDown}
+            width={16}
+            height={16}
+            color={theme.colors.arrowColor}
+          />
+        }
+        flagButtonStyle={flagProps}
+      />
+
+      {!!data?.error && (
+        <OText
+          size={16}
+          color={theme.colors.error}
+          style={{ textAlign: 'center', marginTop: 5 }}>
+          {data.error}
+        </OText>
+      )}
+
+      <View
+        style={{
+          position: 'absolute',
+          top: 15,
+          left: 99,
+        }}>
+        <OIcon
+          src={theme?.images?.general?.inputPhone}
+          width={20}
+          height={20}
+        />
+      </View>
+    </Wrapper>
+  );
+};

package/themes/business/src/components 2/PhoneInputNumber/styles.tsx

@@ -0,0 +1,3 @@
+import styled from 'styled-components/native';
+
+export const Wrapper = styled.View``;