ordering-ui-react-native 0.11.37 → 0.11.41

package/themes/business/src/components/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/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/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/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/shared/ODropDown.tsx

@@ -0,0 +1,195 @@
+import React, { useState, useEffect } from 'react'
+import styled, { css, useTheme } from 'styled-components/native'
+import { ScrollView, TouchableOpacity } from 'react-native-gesture-handler'
+import { ScrollView as CustomScrollView, TouchableOpacity as CustomTouchableOpacity, View } from 'react-native'
+import FeatherIcon from 'react-native-vector-icons/Feather';
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
+import { Text } from 'react-native-paper';
+
+interface Props {
+  secondary?: boolean,
+  options?: any;
+  defaultValue?: any,
+  placeholder?: string,
+  onSelect?: any,
+  style?: any,
+  dropViewMaxHeight?: any,
+  isModal?: any,
+  bgcolor?: string,
+  textcolor?: string
+}
+
+const Wrapper = styled.View`
+  position: relative;
+`
+const Selected = styled.TouchableOpacity`
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  position: relative;
+  padding: 15px;
+  border-radius: 10px;
+  border-width: 1px;
+  border-color: ${(props: any) => props.bgcolor || (props.secondary ? props.theme.colors.lightGray : props.theme.colors.primary)};
+  background-color: ${(props: any) => props.bgcolor || (props.secondary ? props.theme.colors.white : props.theme.colors.primary)};
+`
+const SelectedLabel = styled.Text`
+  font-size: 16px;
+  color: ${(props: any) => props.textcolor || (props.secondary ? props.theme.colors.black : props.theme.colors.white)};
+`
+
+const DropView = styled.View`
+  position: absolute;
+  z-index: 9999;
+  top: 65px;
+  border-width: 1px;
+  border-color: ${(props: any) => props.theme.colors.inputChat};
+  shadow-color: 'rgba(0.0, 0.0, 0.0, 0.5)';
+  shadow-opacity: 0.21;
+  elevation: 7;
+  background-color: ${(props: any) => props.theme.colors.white};
+  border-radius: 7.6px;
+  padding-left: 10px;
+  padding-right: 10px;
+  width: 100%;
+`
+const DropOption = styled.View`
+  padding: 15px;
+  font-size: 16px;
+  border-bottom-width: 1px;
+  border-bottom-color: ${(props: any) => props.theme.colors.lightGray};
+  flex-direction: row;
+  align-items: center;
+`
+
+const ODropDown = (props: Props) => {
+  const {
+    secondary,
+    options,
+    defaultValue,
+    placeholder,
+    onSelect,
+    dropViewMaxHeight,
+    isModal
+  } = props
+
+  const theme = useTheme();
+
+  const [isOpen, setIsOpen] = useState(false)
+  const defaultOption = options?.find((option: any) => option.value === defaultValue)
+  const [selectedOption, setSelectedOption] = useState<any>(defaultOption)
+  const [value, setValue] = useState(defaultValue)
+
+  const onToggle = () => {
+    setIsOpen(!isOpen)
+  }
+
+  const onSelectOption = (option: any) => {
+    setSelectedOption(option)
+    setValue(option.value)
+    onSelect(option.name || option.value)
+    setIsOpen(false)
+  }
+
+  useEffect(() => {
+    const _defaultOption = options?.find((option: any) => option.value === defaultValue)
+    setSelectedOption(_defaultOption)
+    setValue(defaultValue)
+  }, [defaultValue, options])
+
+  return (
+    <Wrapper style={props.style}>
+      <Selected
+        secondary={secondary}
+        bgcolor={props.bgcolor}
+        onPress={() => onToggle()}
+      >
+        <SelectedLabel
+          secondary={secondary}
+          textcolor={props.textcolor}
+        >
+          {selectedOption?.content || selectedOption?.name || placeholder}
+        </SelectedLabel>
+        <FeatherIcon
+          name='chevron-down'
+          color={props.textcolor}
+          size={24}
+        />
+      </Selected>
+      {isOpen && options && (
+        <DropView
+          secondary={secondary}
+        >
+          {!isModal ? (
+            <ScrollView style={{
+              maxHeight: dropViewMaxHeight || null
+            }}
+            >
+              {options.map((option: any, index: number) => (
+                <TouchableOpacity
+                  key={index}
+                  onPress={() => onSelectOption(option)}
+                >
+                  <View style={{ marginRight: 10 }}>
+                    {value === option.value ? (
+                      <MaterialCommunityIcons
+                        name='radiobox-marked'
+                        size={24}
+                        color={theme.colors.primary}
+                      />
+                    ) : (
+                      <MaterialCommunityIcons
+                        name='radiobox-blank'
+                        size={24}
+                        color={theme.colors.primary}
+                      />
+                    )}
+                  </View>
+                  <Text>{option.content || option.name}</Text>
+                </TouchableOpacity>
+              ))}
+            </ScrollView>
+          ) : (
+            <CustomScrollView style={{
+              maxHeight: dropViewMaxHeight || null,
+              paddingBottom: 15
+            }}
+            nestedScrollEnabled={true}
+            >
+              {options.map((option: any, index: number) => (
+                <CustomTouchableOpacity
+                  key={index}
+                  onPress={() => onSelectOption(option)}
+                >
+                  <DropOption
+                    numberOfLines={1}
+                    selected={value === option.value}
+                  >
+                    <View style={{ marginRight: 10 }}>
+                      {value === option.value ? (
+                        <MaterialCommunityIcons
+                          name='radiobox-marked'
+                          size={24}
+                          color={theme.colors.primary}
+                        />
+                      ) : (
+                        <MaterialCommunityIcons
+                          name='radiobox-blank'
+                          size={24}
+                          color={theme.colors.arrowColor}
+                        />
+                      )}
+                    </View>
+                    <Text>{option.content || option.name}</Text>
+                  </DropOption>
+                </CustomTouchableOpacity>
+              ))}
+            </CustomScrollView>
+          )}
+        </DropView>
+      )}
+    </Wrapper>
+  )
+}
+
+export default ODropDown

package/themes/business/src/components/shared/ODropDownCalendar.tsx

@@ -0,0 +1,328 @@
+import React, { useState, useEffect } from 'react'
+import styled, { css, useTheme } from 'styled-components/native'
+import { useLanguage } from 'ordering-components/native';
+import { ScrollView, TouchableOpacity } from 'react-native-gesture-handler'
+import { ScrollView as CustomScrollView, TouchableOpacity as CustomTouchableOpacity, View, useWindowDimensions } from 'react-native'
+import FeatherIcon from 'react-native-vector-icons/Feather';
+import AntDesign from 'react-native-vector-icons/AntDesign';
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
+import { Text } from 'react-native-paper';
+import CalendarPicker from 'react-native-calendar-picker';
+
+interface Props {
+  secondary?: boolean,
+  options?: any;
+  defaultValue?: any,
+  placeholder?: string,
+  onSelect?: any,
+  style?: any,
+  dropViewMaxHeight?: any,
+  isModal?: any,
+  bgcolor?: string,
+  textcolor?: string,
+  isCalendar?: boolean,
+  handleChangeDate?: any,
+  rangeDate?: any
+}
+
+const Wrapper = styled.View`
+  position: relative;
+`
+const Selected = styled.TouchableOpacity`
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  position: relative;
+  padding: 15px;
+  border-radius: 10px;
+  border-width: 1px;
+  border-color: ${(props: any) => props.bgcolor || (props.secondary ? props.theme.colors.lightGray : props.theme.colors.primary)};
+  background-color: ${(props: any) => props.bgcolor || (props.secondary ? props.theme.colors.white : props.theme.colors.primary)};
+`
+const SelectedLabel = styled.Text`
+  font-size: 16px;
+  color: ${(props: any) => props.textcolor || (props.secondary ? props.theme.colors.black : props.theme.colors.white)};
+`
+
+const DropView = styled.View`
+  position: absolute;
+  z-index: 9999;
+  top: 65px;
+  border-width: 1px;
+  border-color: ${(props: any) => props.theme.colors.inputChat};
+  shadow-color: 'rgba(0.0, 0.0, 0.0, 0.5)';
+  shadow-opacity: 0.21;
+  elevation: 7;
+  background-color: ${(props: any) => props.theme.colors.white};
+  border-radius: 7.6px;
+  padding-left: 10px;
+  padding-right: 10px;
+  width: 100%;
+`
+const DropOption = styled.View`
+  padding: 15px;
+  font-size: 16px;
+  border-bottom-width: 1px;
+  border-bottom-color: ${(props: any) => props.theme.colors.lightGray};
+  flex-direction: row;
+  align-items: center;
+`
+
+const DateInput = styled.TextInput`
+  flex-grow: 1;
+  flex: 1;
+  min-height: 36px;
+  font-size: 12px;
+  font-family: 'Poppins-Regular';
+  border-width: 1px;
+  border-color: ${(props: any) => props.theme.colors.tabBar};
+  padding: 7px 14px;
+  color: ${(props: any) => props.theme.colors.backArrow};
+  ${({ active }: { active: boolean }) => active && css`
+    border-color: ${(props: any) => props.theme.colors.primary};
+  `}
+`;
+
+const ODropDownCalendar = (props: Props) => {
+  const {
+    secondary,
+    options,
+    defaultValue,
+    placeholder,
+    onSelect,
+    dropViewMaxHeight,
+    isModal,
+    isCalendar,
+    handleChangeDate,
+    rangeDate
+  } = props
+
+  const theme = useTheme();
+  const { width } = useWindowDimensions();
+  const [, t] = useLanguage();
+
+  const [isOpen, setIsOpen] = useState(false)
+  const defaultOption = options?.find((option: any) => option.value === defaultValue)
+  const [selectedOption, setSelectedOption] = useState<any>(defaultOption)
+  const [value, setValue] = useState(defaultValue)
+
+  const onToggle = () => {
+    setIsOpen(!isOpen)
+  }
+
+  const onSelectOption = (option: any) => {
+    setSelectedOption(option)
+    setValue(option.value)
+    onSelect(option.name || option.value)
+    setIsOpen(false)
+  }
+
+  const onDateChange = (date: any, type: any) => {
+    if (!date) return
+    if (type === 'END_DATE') {
+      handleChangeDate(rangeDate.from, date.format('MM/DD/YY'))
+    } else {
+      handleChangeDate(date.format('MM/DD/YY'), '')
+    }
+  }
+
+  const customDayHeaderStylesCallback = () => {
+		return {
+			textStyle: {
+				color: theme.colors.unselectText,
+				fontSize: 12,
+			},
+		};
+	};
+
+  const calendarText = (from: any, to: any, placeholder: any) => {
+    const end = ` ~ ${to}`
+    return (from || to) ? (from + (to ? end : '')) : placeholder
+  }
+
+  useEffect(() => {
+    const _defaultOption = options?.find((option: any) => option.value === defaultValue)
+    setSelectedOption(_defaultOption)
+    setValue(defaultValue)
+  }, [defaultValue, options])
+
+  return (
+    <Wrapper style={props.style}>
+      <Selected
+        secondary={secondary}
+        bgcolor={props.bgcolor}
+        onPress={() => onToggle()}
+      >
+        <SelectedLabel
+          secondary={secondary}
+          textcolor={props.textcolor}
+        >
+          {
+            defaultValue === 'calendar'
+              ? `${calendarText(rangeDate.from, rangeDate.to, placeholder)}`
+              : `${selectedOption?.content || selectedOption?.name || placeholder}`
+          }
+        </SelectedLabel>
+        <FeatherIcon
+          name='calendar'
+          color={theme.colors.backArrow}
+          size={24}
+        />
+      </Selected>
+      {isOpen && options && (
+        <DropView
+          secondary={secondary}
+        >
+          {!isModal ? (
+            <ScrollView style={{
+              maxHeight: dropViewMaxHeight || null
+            }}
+            >
+              {options.map((option: any, index: number) => (
+                <TouchableOpacity
+                  key={index}
+                  onPress={() => onSelectOption(option)}
+                >
+                  <View style={{ marginRight: 10 }}>
+                    {value === option.value ? (
+                      <MaterialCommunityIcons
+                        name='radiobox-marked'
+                        size={24}
+                        color={theme.colors.primary}
+                      />
+                    ) : (
+                      <MaterialCommunityIcons
+                        name='radiobox-blank'
+                        size={24}
+                        color={theme.colors.primary}
+                      />
+                    )}
+                  </View>
+                  <Text>{option.content || option.name}</Text>
+                </TouchableOpacity>
+              ))}
+            </ScrollView>
+          ) : (
+            <CustomScrollView style={{
+              maxHeight: dropViewMaxHeight || null
+            }}
+            nestedScrollEnabled={true}
+            >
+              {options.map((option: any, index: number) => (
+                <CustomTouchableOpacity
+                  key={index}
+                  onPress={() => onSelectOption(option)}
+                >
+                  <DropOption
+                    numberOfLines={1}
+                    selected={value === option.value}
+                  >
+                    <View style={{ marginRight: 10 }}>
+                      {value === option.value ? (
+                        <MaterialCommunityIcons
+                          name='radiobox-marked'
+                          size={24}
+                          color={theme.colors.primary}
+                        />
+                      ) : (
+                        <MaterialCommunityIcons
+                          name='radiobox-blank'
+                          size={24}
+                          color={theme.colors.arrowColor}
+                        />
+                      )}
+                    </View>
+                    <Text>{option.content || option.name}</Text>
+                  </DropOption>
+                </CustomTouchableOpacity>
+              ))}
+              {isCalendar && (
+                <>
+                  <View style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    marginTop: 10
+                  }}>
+                    <View style={{marginRight: 10, flex: 1, marginBottom: 15}}>
+                      <Text style={{marginBottom: 5}}>{t('FROM', 'From')}</Text>
+                      <DateInput
+                        value={rangeDate.from}
+                        placeholder={t('FROM', 'From')}
+                        autoCorrect={false}
+                        style={{
+                          borderRadius: 7.6
+                        }}
+                        active={defaultValue === 'calendar'}
+                        onFocus={() => onSelect('calendar')}
+                      />
+                      <AntDesign
+                        name='close'
+                        color={theme.colors.disabled}
+                        size={20}
+                        style={{position: 'absolute', bottom: 13, right: 10}}
+                        onPress={() => handleChangeDate('', rangeDate.to)}
+                      />
+                    </View>
+                    <View style={{marginLeft: 10, flex: 1, marginBottom: 15}}>
+                      <Text style={{marginBottom: 5}}>{t('TO', 'To')}</Text>
+                      <DateInput
+                        value={rangeDate.to}
+                        placeholder={t('TO', 'To')}
+                        autoCorrect={false}
+                        style={{
+                          borderRadius: 7.6
+                        }}
+                        active={defaultValue === 'calendar'}
+                        onFocus={() => onSelect('calendar')}
+                      />
+                      <AntDesign
+                        name='close'
+                        color={theme.colors.disabled}
+                        size={20}
+                        style={{position: 'absolute', bottom: 13, right: 10}}
+                        onPress={() => handleChangeDate(rangeDate.from, '')}
+                      />
+                    </View>
+                  </View>
+                  {
+                    defaultValue === 'calendar' && (
+                      <CalendarPicker
+                        previousComponent={
+                          <FeatherIcon
+                            name='chevron-left'
+                            color={theme.colors.disabled}
+                            size={24}
+                            style={{ marginHorizontal: 4 }}
+                          />
+                        }
+                        nextComponent={
+                          <FeatherIcon
+                            name='chevron-right'
+                            color={theme.colors.disabled}
+                            size={24}
+                            style={{ marginHorizontal: 4 }}
+                          />
+                        }
+                        width={width - 80}
+                        startFromMonday={true}
+                        allowRangeSelection={true}
+                        selectedDayTextColor={theme.colors.textGray}
+                        selectedDayColor={theme.colors.forgotText}
+                        todayBackgroundColor={theme.colors.border}
+                        dayLabelsWrapper={{ borderColor: theme.colors.clear }}
+                        onDateChange={onDateChange}
+                        customDayHeaderStyles={customDayHeaderStylesCallback}
+                      />
+                    )
+                  }
+                </>
+              )}
+            </CustomScrollView>
+          )}
+        </DropView>
+      )}
+    </Wrapper>
+  )
+}
+
+export default ODropDownCalendar

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

@@ -8,6 +8,8 @@ import OModal from './OModal';
 import OAlert from './OAlert';
 import OFab from './OFab';
 import OLink from './OLink';
+import ODropDown from './ODropDown';
+import ODropDownCalendar from './ODropDownCalendar';
 
 export {
   OText,
@@ -20,4 +22,6 @@ export {
   OModal,
   OFab,
   OLink,
+  ODropDown,
+  ODropDownCalendar
 };

package/themes/business/src/types/index.tsx

@@ -275,6 +275,8 @@ export interface OrdersOptionParams {
   ordersGroup?: any;
   setOrdersGroup?: any;
   setCurrentFilters?: any;
+  onFiltered?: ({}: any) => {};
+  filtered?: any;
   handleClickOrder?: any;
   orderGroupStatusCustom?: {
     pending?: Array<number>;