ordering-ui-react-native 0.12.94 → 0.12.95

package/package.json

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

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

@@ -16,7 +16,8 @@ import {
   IconWrapper,
   ModalContainer,
   ModalTitle,
-  FilterBtnWrapper
+  FilterBtnWrapper,
+  TabPressable
 } from './styles';
 import { PreviousOrders } from '../PreviousOrders';
 import { OrdersOptionParams } from '../../types';
@@ -324,7 +325,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
           horizontal
           nestedScrollEnabled={true}
         >
-          <TabsContainer width={WIDTH_SCREEN}>
+          <TabsContainer>
             {isLogisticActivated && (
               <Pressable
                 style={styles.pressable}
@@ -344,15 +345,16 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
               </Pressable>
             )}
             {tabs.map((tab: any) => (
-              <Pressable
+              <TabPressable
                 key={tab.key}
-                style={styles.pressable}
-                onPress={() => setCurrentTabSelected(tab?.title)}>
+                onPress={() => setCurrentTabSelected(tab?.title)}
+                isSelected={tab.title === currentTabSelected ? 1 : 0}
+              >
                 <OText
                   style={{
                     ...styles.tab,
                     fontSize: tab.title === currentTabSelected ? 16 : 14,
-                    borderBottomWidth: tab.title === currentTabSelected ? 1 : 0,
+                    borderBottomWidth: Platform.OS === 'ios' && tab.title === currentTabSelected ? 1 : 0,
                   }}
                   color={
                     tab.title === currentTabSelected
@@ -363,7 +365,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
                 >
                   {tab.text}
                 </OText>
-              </Pressable>
+              </TabPressable>
             ))}
           </TabsContainer>
         </ScrollView>

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

@@ -3,14 +3,15 @@ import styled from 'styled-components/native';
 export const FiltersTab = styled.View`
   margin-bottom: 20px;
   max-height: 35px;
+  flex: 1;
 `;
 
 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;
+  flex: 1;
   border-bottom-color: ${(props: any) => props.theme.colors.tabBar};
 `;
 
@@ -53,3 +54,10 @@ export const FilterBtnWrapper = styled.TouchableOpacity`
   justify-content: space-between;
   margin-bottom: 24px;
 `
+
+export const TabPressable = styled.Pressable`
+  align-items: center;
+  border-color: ${(props: any) => props.theme.colors.textGray};
+  border-bottom-width: ${(props: any) => props.isSelected ? '1px' : '0px'};
+  padding-horizontal: 10px;
+`

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

@@ -1,41 +1,49 @@
-import React, { useState } from 'react'
+import React from 'react'
 import { useLanguage, BusinessMenuListing } from 'ordering-components/native'
-import { OModal, OText } from '../shared'
+import { OText } from '../shared'
 import { BusinessMenuListParams } from '../../types'
-import { View, StyleSheet, TouchableOpacity, Text } from 'react-native'
+import { View, StyleSheet, Dimensions } from 'react-native'
 import { useTheme } from 'styled-components/native'
 import IconAntDesign from 'react-native-vector-icons/AntDesign'
-import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons'
 import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder'
-import { MenuListWrapper, DropOption } from './styles'
+import SelectDropdown from 'react-native-select-dropdown'
+
+const windowHeight = Dimensions.get('window').height;
 
 const BusinessMenuListUI = (props: BusinessMenuListParams) => {
   const {
-    menu,
     businessMenuList,
     setMenu
   } = props
 
   const [, t] = useLanguage()
   const theme = useTheme()
-  const [isShowMenuList, setIsShowMenuList] = useState(false)
 
   const styles = StyleSheet.create({
+    container: {
+      height: windowHeight
+    },
     selectOption: {
       backgroundColor: theme.colors.backgroundGray100,
       borderRadius: 7.6,
       paddingVertical: 10,
       paddingHorizontal: 14,
-      flexDirection: 'row',
+      flexDirection: 'row-reverse',
       alignItems: 'center',
       justifyContent: 'space-between',
-      height: 44
+      height: 44,
+      width: '100%'
     }
 	})
 
-  const handleClickMenu = (option: any) => {
-    setMenu(option)
-    setIsShowMenuList(false)
+  const dropDownIcon = () => {
+    return (
+      <IconAntDesign
+        name='down'
+        color={theme.colors.textThird}
+        size={16}
+      />
+    )
   }
 
   return (
@@ -47,82 +55,62 @@ const BusinessMenuListUI = (props: BusinessMenuListParams) => {
           </View>
         </Placeholder>
       ) : (
-        <TouchableOpacity onPress={() => setIsShowMenuList(true)}>
-          <View style={styles.selectOption}>
-            <OText
-              size={14}
-              color={theme.colors.disabled}
-              style={{
-                lineHeight: 24,
-                flex: 1
-              }}
-              numberOfLines={1}
-              ellipsizeMode="tail"
-            >
-              {menu?.name || t('MENU_NAME', 'Menu name')}
-            </OText>
-            <IconAntDesign
-              name='down'
-              color={theme.colors.textThird}
-              size={16}
-            />
-          </View>
-        </TouchableOpacity>
-      )}
+        <>
+          {
+            businessMenuList?.menus && businessMenuList?.menus.length > 0 && (
+              <SelectDropdown
+                defaultButtonText={t('MENU_NAME', 'Menu name')}
+                data={businessMenuList?.menus}
+                disabled={businessMenuList?.loading || businessMenuList?.menus?.length === 0}
+                onSelect={(selectedItem, index) => {
+                  setMenu(selectedItem)
+                }}
+                buttonTextAfterSelection={(selectedItem, index) => {
+                  return selectedItem.name
+                }}
+                rowTextForSelection={(item, index) => {
+                  return item.name
+                }}
+                buttonStyle={styles.selectOption}
+                buttonTextStyle={{
+                  color: theme.colors.disabled,
+                  fontSize: 14,
+                  textAlign: 'left',
+                  marginHorizontal: 0
+                }}
+                dropdownStyle={{
+                  borderRadius: 8,
+                  borderColor: theme.colors.lightGray,
+                  marginTop: 5,
+                  maxHeight: 160
+                }}
+                rowStyle={{
+                  borderBottomColor: theme.colors.backgroundGray100,
+                  backgroundColor: theme.colors.backgroundGray100,
+                  height: 40,
+                  flexDirection: 'column',
+                  alignItems: 'flex-start',
+                  paddingTop: 8,
+                  paddingHorizontal: 14
+                }}
+                rowTextStyle={{
+                  color: theme.colors.disabled,
+                  fontSize: 14,
+                  marginHorizontal: 0
+                }}
+                renderDropdownIcon={() => dropDownIcon()}
+                dropdownOverlayColor='transparent'
+              />
+            )
+          }
 
-      <OModal
-        open={isShowMenuList}
-        onClose={() => setIsShowMenuList(false)}
-        customClose
-        entireModal
-      >
-        <MenuListWrapper>
-          <TouchableOpacity onPress={() => setIsShowMenuList(false)} style={{ marginBottom: 12 }}>
-            <IconAntDesign
-              name='close'
-              color={theme.colors.textThird}
-              style={{ marginLeft: 7 }}
-              size={24}
-            />
-          </TouchableOpacity>
-          {businessMenuList?.menus && businessMenuList?.menus.length > 0 && businessMenuList.menus.map((option: any, index: number) => (
-            <TouchableOpacity
-              key={index}
-              onPress={() => handleClickMenu(option)}
-            >
-              <DropOption
-                selected={option.id === menu.id}
-              >
-                <View style={{ marginRight: 10 }}>
-                  {option.id === menu.id ? (
-                    <MaterialCommunityIcons
-                      name='radiobox-marked'
-                      size={24}
-                      color={theme.colors.primary}
-                    />
-                  ) : (
-                    <MaterialCommunityIcons
-                      name='radiobox-blank'
-                      size={24}
-                      color={theme.colors.arrowColor}
-                    />
-                  )}
-                </View>
-                <Text
-                  numberOfLines={1}
-                  ellipsizeMode="tail"
-                  style={{flex: 1}}
-                >{option.name}</Text>
-              </DropOption>
-            </TouchableOpacity>
-          ))}
           {businessMenuList?.menus && businessMenuList?.menus.length === 0 && (
             <View>
               <OText>{t('NO_RESULTS_FOUND', 'Sorry, no results found')}</OText>
             </View>
           )}
-        </MenuListWrapper>
-      </OModal>
+        </>
+      )}
     </>
 
   )

package/themes/original/src/components/BusinessMenuList/styles.tsx

@@ -1,15 +0,0 @@
-import styled from 'styled-components/native'
-
-export const MenuListWrapper = styled.ScrollView`
-  padding: 20px 40px 30px 40px;
-`
-
-export const DropOption = styled.View`
-  padding: 10px;
-  margin-bottom: 5px;
-  font-size: 16px;
-  border-bottom-width: 1px;
-  border-bottom-color: ${(props: any) => props.theme.colors.lightGray};
-  flex-direction: row;
-  align-items: center;
-`

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

@@ -1,16 +1,16 @@
 import React, { useState, useEffect } from 'react'
-import { TouchableOpacity, StyleSheet, View, Text } from 'react-native'
+import { TouchableOpacity, StyleSheet, View, Dimensions } from 'react-native'
 import { useLanguage, useUtils, useConfig, useOrder, MomentOption } from 'ordering-components/native'
-import { OButton, OModal, OText } from '../shared'
+import { OButton, OText } from '../shared'
 import { useTheme } from 'styled-components/native'
 import IconAntDesign from 'react-native-vector-icons/AntDesign'
 import FastImage from 'react-native-fast-image'
 import CalendarStrip from 'react-native-calendar-strip'
-import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons'
 import { BusinessMenuList } from '../BusinessMenuList'
 import Spinner from 'react-native-loading-spinner-overlay'
 import { BusinessPreorderParams } from '../../types'
 import moment from 'moment'
+import SelectDropdown from 'react-native-select-dropdown'
 import {
   PreOrderContainer,
   BusinessInfoWrapper,
@@ -19,11 +19,11 @@ import {
   OrderTimeWrapper,
   TimeListWrapper,
   TimeContentWrapper,
-  TimeItem,
-  PreorderTypeListWrapper,
-  DropOption
+  TimeItem
 } from './styles'
 
+const windowHeight = Dimensions.get('window').height;
+
 const BusinessPreorderUI = (props: BusinessPreorderParams) => {
   const {
     goToBack,
@@ -42,14 +42,18 @@ const BusinessPreorderUI = (props: BusinessPreorderParams) => {
   const [{ optimizeImage, parseTime }] = useUtils()
   const [{ configs }] = useConfig()
   const [orderState] = useOrder()
-  const [selectedPreorderType, setSelectedPreorderType] = useState({ key: 'business_hours', name: t('BUSINESS_HOURS', 'Business hours') })
-  const [isPreorderTypeList, setIsPreorderTypeList] = useState(false)
+  const [selectedPreorderType, setSelectedPreorderType] = useState(0)
   const [menu, setMenu] = useState({})
   const [timeList, setTimeList] = useState<any>([])
   const [selectDate, setSelectedDate] = useState<any>(null)
   const [datesWhitelist, setDateWhitelist] = useState<any>([{start: null, end: null}])
 
   const styles = StyleSheet.create({
+    container: {
+      height: windowHeight,
+      paddingVertical: 30,
+      paddingHorizontal: 40
+    },
 		businessLogo: {
 			backgroundColor: 'white',
 			width: 60,
@@ -68,10 +72,11 @@ const BusinessPreorderUI = (props: BusinessPreorderParams) => {
       borderRadius: 7.6,
       paddingVertical: 10,
       paddingHorizontal: 14,
-      flexDirection: 'row',
+      flexDirection: 'row-reverse',
       alignItems: 'center',
       justifyContent: 'space-between',
-      height: 44
+      height: 44,
+      width: '100%'
     },
     calendar: {
       paddingBottom: 15,
@@ -123,30 +128,14 @@ const BusinessPreorderUI = (props: BusinessPreorderParams) => {
       color: '#B1BCCC',
       fontSize: 14,
       fontWeight: '500'
-    },
-    wrapperIcon: {
-      overflow: 'hidden',
-      backgroundColor: 'transparent',
-      marginBottom: 12,
-      width: 25,
-      height: 25,
-      marginStart: 7,
-      alignItems: 'center',
-      justifyContent: 'center',
-      zIndex: 99999
     }
 	})
 
   const preorderTypeList = [
-    { key: 'business_menu', name: t('BUSINESS_MENU', 'Business menu') },
-    { key: 'business_hours', name: t('BUSINESS_HOURS', 'Business hours') }
+    { key: 'business_hours', name: t('BUSINESS_HOURS', 'Business hours') },
+    { key: 'business_menu', name: t('BUSINESS_MENU', 'Business menu') }
   ]
 
-  const handleClickPreorderType = (option: any) => {
-    setSelectedPreorderType(option)
-    setIsPreorderTypeList(false)
-  }
-
   const getTimes = (curdate: any, menu: any) => {
     const date = new Date()
     var dateSeleted = new Date(curdate)
@@ -239,6 +228,16 @@ const BusinessPreorderUI = (props: BusinessPreorderParams) => {
     handleBusinessClick && handleBusinessClick(business)
   }
 
+  const dropDownIcon = () => {
+    return (
+      <IconAntDesign
+        name='down'
+        color={theme.colors.textThird}
+        size={16}
+      />
+    )
+  }
+
   useEffect(() => {
     if (hoursList.length === 0) return
     if (Object.keys(menu).length > 0) {
@@ -262,7 +261,7 @@ const BusinessPreorderUI = (props: BusinessPreorderParams) => {
   }, [selectDate, hoursList, menu])
 
   useEffect(() => {
-    if (selectedPreorderType.key === 'business_hours' && Object.keys(menu).length > 0) setMenu({})
+    if (selectedPreorderType === 0 && Object.keys(menu).length > 0) setMenu({})
   }, [selectedPreorderType])
 
   useEffect(() => {
@@ -275,7 +274,7 @@ const BusinessPreorderUI = (props: BusinessPreorderParams) => {
 
   return (
     <>
-      <PreOrderContainer contentContainerStyle={{ paddingVertical: 30, paddingHorizontal: 40 }}>
+      <PreOrderContainer contentContainerStyle={{ paddingVertical: 32, paddingHorizontal: 40 }}>
         <TouchableOpacity onPress={() => goToBack && goToBack()} style={{ marginBottom: 12 }}>
           <IconAntDesign
             name='close'
@@ -313,26 +312,50 @@ const BusinessPreorderUI = (props: BusinessPreorderParams) => {
           >
             {t('PREORDER_TYPE', 'Preorder type')}
           </OText>
-          <TouchableOpacity onPress={() => setIsPreorderTypeList(true)}>
-            <View style={styles.selectOption}>
-              <OText
-                size={14}
-                color={theme.colors.disabled}
-                style={{
-                  lineHeight: 24
-                }}
-              >
-                {selectedPreorderType.name}
-              </OText>
-              <IconAntDesign
-                name='down'
-                color={theme.colors.textThird}
-                size={16}
-              />
-            </View>
-          </TouchableOpacity>
+          <SelectDropdown
+            defaultValueByIndex={selectedPreorderType}
+            data={preorderTypeList}
+            // disabled={orderState.loading}
+            onSelect={(selectedItem, index) => {
+              setSelectedPreorderType(index)
+            }}
+            buttonTextAfterSelection={(selectedItem, index) => {
+              return selectedItem.name
+            }}
+            rowTextForSelection={(item, index) => {
+              return item.name
+            }}
+            buttonStyle={styles.selectOption}
+            buttonTextStyle={{
+              color: theme.colors.disabled,
+              fontSize: 14,
+              textAlign: 'left',
+              marginHorizontal: 0
+            }}
+            dropdownStyle={{
+              borderRadius: 8,
+              borderColor: theme.colors.lightGray,
+              marginTop: 5
+            }}
+            rowStyle={{
+              borderBottomColor: theme.colors.backgroundGray100,
+              backgroundColor: theme.colors.backgroundGray100,
+              height: 40,
+              flexDirection: 'column',
+              alignItems: 'flex-start',
+              paddingTop: 8,
+              paddingHorizontal: 14
+            }}
+            rowTextStyle={{
+              color: theme.colors.disabled,
+              fontSize: 14,
+              marginHorizontal: 0
+            }}
+            renderDropdownIcon={() => dropDownIcon()}
+            dropdownOverlayColor='transparent'
+          />
         </PreorderTypeWrapper>
-        {selectedPreorderType?.key === 'business_menu' && (
+        {selectedPreorderType === 1 && (
           <MenuWrapper>
             <OText
               size={16}
@@ -415,51 +438,6 @@ const BusinessPreorderUI = (props: BusinessPreorderParams) => {
         />
       </PreOrderContainer>
       <Spinner visible={orderState.loading} />
-      <OModal
-        open={isPreorderTypeList}
-        onClose={() => setIsPreorderTypeList(false)}
-        customClose
-        entireModal
-      >
-        <PreorderTypeListWrapper contentContainerStyle={{ paddingVertical: 20, paddingHorizontal: 40}}>
-          <TouchableOpacity onPress={() => setIsPreorderTypeList(false)} style={styles.wrapperIcon}>
-            <IconAntDesign
-              name='close'
-              color={theme.colors.textThird}
-              size={24}
-            />
-          </TouchableOpacity>
-          {preorderTypeList?.map((option: any, index: number) => (
-            <TouchableOpacity
-              key={index}
-              onPress={() => handleClickPreorderType(option)}
-              style={{ zIndex: 99999 }}
-            >
-              <DropOption
-                numberOfLines={1}
-                selected={option.key === selectedPreorderType.key}
-              >
-                <View style={{ marginRight: 10 }}>
-                  {option.key === selectedPreorderType.key ? (
-                    <MaterialCommunityIcons
-                      name='radiobox-marked'
-                      size={24}
-                      color={theme.colors.primary}
-                    />
-                  ) : (
-                    <MaterialCommunityIcons
-                      name='radiobox-blank'
-                      size={24}
-                      color={theme.colors.arrowColor}
-                    />
-                  )}
-                </View>
-                <Text>{option.name}</Text>
-              </DropOption>
-            </TouchableOpacity>
-          ))}
-        </PreorderTypeListWrapper>
-      </OModal>
     </>
   )
 }

package/themes/original/src/components/BusinessPreorder/styles.tsx

@@ -42,15 +42,3 @@ export const TimeItem = styled.View`
     background: #F5F9FF;
   `}
 `
-
-export const PreorderTypeListWrapper = styled.ScrollView``
-
-export const DropOption = styled.View`
-  padding: 10px;
-  margin-bottom: 5px;
-  font-size: 16px;
-  border-bottom-width: 1px;
-  border-bottom-color: ${(props: any) => props.theme.colors.lightGray};
-  flex-direction: row;
-  align-items: center;
-`