ordering-ui-react-native 0.12.18 → 0.12.19

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

@@ -1,54 +0,0 @@
-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

@@ -1,51 +0,0 @@
-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

@@ -1,8 +0,0 @@
-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

@@ -1,52 +0,0 @@
-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

@@ -1,8 +0,0 @@
-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

@@ -1,52 +0,0 @@
-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

@@ -1,8 +0,0 @@
-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

@@ -1,35 +0,0 @@
-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

@@ -1,8 +0,0 @@
-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

@@ -1,50 +0,0 @@
-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

@@ -1,8 +0,0 @@
-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

@@ -1,49 +0,0 @@
-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

@@ -1,8 +0,0 @@
-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

@@ -1,46 +0,0 @@
-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

@@ -1,8 +0,0 @@
-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

@@ -1,160 +0,0 @@
-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

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