ordering-ui-react-native 0.15.5 → 0.15.8

package/package.json

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

package/src/components/Home/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useLanguage, useOrder } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
-import { StyleSheet, View, Dimensions } from 'react-native';
+import { StyleSheet, View, Dimensions, Platform, useWindowDimensions } from 'react-native';
 import { OButton, OIcon, OText } from '../shared';
 import { LogoWrapper, Slogan } from './styles';
 import { LanguageSelector } from '../LanguageSelector'
@@ -11,6 +11,7 @@ import { _setStoreData } from '../../providers/StoreUtil';
 const windowHeight = Dimensions.get('window').height
 
 export const Home = (props: any) => {
+  const { width, height } = useWindowDimensions();
   const { onNavigationRedirect } = props;
 
   const theme = useTheme();
@@ -25,7 +26,7 @@ export const Home = (props: any) => {
   return (
     <View style={styles.container}>
       <View style={styles.wrapperContent}>
-        <View style={styles.languageSelector}>
+        <View style={{ paddingTop: (height <= 756 && Platform.OS !== 'ios') ? (height * 0.05) : 0, marginLeft: 10 }}>
           <LanguageSelector />
         </View>
         <LogoWrapper>
@@ -74,9 +75,6 @@ export const Home = (props: any) => {
 };
 
 const styles = StyleSheet.create({
-  languageSelector: {
-    marginRight: 10
-  },
   textLink: {
     flexDirection: 'row',
     textAlign: 'center',

package/src/components/LanguageSelector/index.tsx

@@ -1,140 +1,108 @@
-import React, { useState, useEffect } from 'react'
-import { I18nManager, TouchableOpacity, ActivityIndicator, View, Platform } from 'react-native'
-import { useTheme } from 'styled-components/native'
-import {
-  LanguageSelector as LanguageSelectorController,
-  useLanguage
-} from 'ordering-components/native'
-import { StyleSheet } from 'react-native'
-import RNRestart from 'react-native-restart'
-import Picker from 'react-native-country-picker-modal';
+import React, { useState } from 'react'
+import { LanguageSelector as LanguageSelectorController, useOrder } from 'ordering-components/native'
+import { useTheme } from 'styled-components/native';
+import { I18nManager, Platform, StyleSheet, View } from 'react-native'
 
-import { Container, SelectItemBtn, SelectItem } from './styles'
+import RNPickerSelect from 'react-native-picker-select'
+import { Container, DummyContainer } from './styles'
 import { LanguageSelectorParams } from '../../types'
-import { OText } from '../shared'
+import { OIcon } from '../shared'
+import RNRestart from 'react-native-restart'
 
 const LanguageSelectorUI = (props: LanguageSelectorParams) => {
+
   const {
     languagesState,
     currentLanguage,
     handleChangeLanguage,
-    isFromProfile
+    pickerStyle
   } = props
 
-  const theme = useTheme()
-  const [languageState] = useLanguage()
-  const [isOpen, setIsOpen] = useState(false);
-  const [optionSelected, setOptionSelected] = useState<any>(null)
-  let current;
+  const [orderState] = useOrder()
+  const theme = useTheme();
 
-  const styles = StyleSheet.create({
-    itemSelected: {
+  const [language, setLanguage] = useState(currentLanguage)
+
+  const _pickerStyle = StyleSheet.create({
+    inputAndroid: {
+      color: '#000',
+      borderWidth: 1,
+      borderColor: theme.colors.clear,
+      padding: 10,
+      height: 40,
       backgroundColor: theme.colors.disabled,
+      borderRadius: 8
     },
-    closeBtn: {
-      width: 40,
+    inputIOS: {
+      color: '#000',
+      padding: 10,
       height: 40,
+      borderWidth: 1,
+      marginStart: 20,
+      borderColor: theme.colors.clear,
+      backgroundColor: theme.colors.clear,
+    },
+    icon: {
+      width: 10,
+      marginTop: 9,
+      marginEnd: 10
+    },
+    placeholder: {
+      color: theme.colors.secundaryContrast
+    },
+    chevronDown: {
+      display: 'none'
+    },
+    chevronUp: {
+      display: 'none'
     }
   })
 
   const _languages = languagesState?.languages?.map((language: any) => {
     return {
-      key: language.code,
-      value: language.code,
-      label: language.name.toUpperCase()
+      value: language?.code,
+      label: language?.name,
+      inputLabel: language?.name
     }
   })
   _languages && _languages.sort((a: any, b: any) =>
-    (a.label > b.label) ? 1 : ((b.label > a.label) ? -1 : 0)
+    (a.content > b.content) ? 1 : ((b.content > a.content) ? -1 : 0)
   )
 
-  const langSelectedObj: any = _languages && _languages.find((item: any) => item.value === currentLanguage) || {}
-
   const changeDirection = async (language: any) => {
-    if(language !== 'ar'){
-      if (I18nManager.isRTL){
+    if (language !== 'ar') {
+      if (I18nManager.isRTL) {
         await I18nManager.forceRTL(false)
         RNRestart.Restart();
       }
     } else {
-      if(!I18nManager.isRTL){
+      if (!I18nManager.isRTL) {
         await I18nManager.forceRTL(true)
         RNRestart.Restart();
       }
     }
   }
 
-  const handlerChangeLanguage = (langCode: any) => {
-    setOptionSelected(langCode)
-    changeDirection(langCode)
-    handleChangeLanguage(langCode)
+  const handlerChangeLanguage = (langCode?: any) => {
+    changeDirection(Platform.OS === 'ios' ? language : langCode)
+    handleChangeLanguage(Platform.OS === 'ios' ? language : langCode)
   }
 
-  useEffect(() => {
-    if (optionSelected === languageState?.language?.code && !languageState.loading) {
-      setIsOpen(false)
-    }
-  }, [languageState])
-
   return (
     <Container>
-      {languagesState?.languages && (
-        <Picker
-          countryCodes={current}
-          visible={isOpen}
-          onClose={() => setIsOpen(false)}
-          withCountryNameButton
-          // @ts-ignore
-          closeButtonStyle={{
-            width: '100%',
-            alignItems: 'flex-end',
-            padding: 10
-          }}
-          closeButtonImageStyle={Platform.OS === 'ios' && styles.closeBtn}
-          renderFlagButton={() => (
-            <>
-              <TouchableOpacity
-                onPress={() => setIsOpen(true)}
-                disabled={_languages.length === 0 || languageState.loading}
-              >
-                <SelectItemBtn isFromProfile={isFromProfile}>
-                  <OText
-                    color={theme.colors.secundaryContrast}
-                    size={14}
-                  >
-                    {langSelectedObj.key.toUpperCase()}
-                  </OText>
-                </SelectItemBtn>
-              </TouchableOpacity>
-            </>
-          )}
-          flatListProps={{
-            keyExtractor: (item: any) => item.value,
-            data: _languages || [],
-            renderItem: ({ item }: any) => (
-              <TouchableOpacity
-                style={langSelectedObj.value === item.value && styles.itemSelected}
-                disabled={langSelectedObj.value === item.value || languageState.loading}
-                onPress={() => handlerChangeLanguage(item.value)}
-              >
-                <SelectItem>
-                  <View style={{ width: 40 }}>
-                    {optionSelected === item.value && languageState.loading && (
-                      <ActivityIndicator size="small" color={theme.colors.primary} />
-                    )}
-                  </View>
-                  <OText
-                    size={14}
-                    style={{ marginRight: 10 }}
-                  >
-                    {item.label}
-                  </OText>
-                </SelectItem>
-              </TouchableOpacity>
-            ),
-          }}
+      {languagesState?.languages ? (
+        <RNPickerSelect
+          onValueChange={(val) => Platform.OS === 'ios' ? setLanguage(val) : handlerChangeLanguage(val)}
+          items={_languages || []}
+          value={Platform.OS === 'ios' ? language : currentLanguage}
+          style={pickerStyle ? pickerStyle : _pickerStyle}
+          useNativeAndroidPickerStyle={false}
+          placeholder={{}}
+          disabled={orderState.loading}
+          onClose={() => Platform.OS === 'ios' ? handlerChangeLanguage() : {}}
+          onDonePress={() => handlerChangeLanguage()}
         />
-      )}
+      ) : <DummyContainer />}
     </Container>
   )
 }

package/src/components/LanguageSelector/styles.tsx

@@ -1,23 +1,10 @@
 import styled from 'styled-components/native'
 
 export const Container = styled.View`
-  align-items: flex-end;
-  justify-content: flex-end;
-  flex-direction: row;
-`
-
-export const SelectItem = styled.View`
-  padding: 8px;
   align-items: center;
+  justify-content: flex-start;
   flex-direction: row;
-`;
-
-export const SelectItemBtn = styled(SelectItem)`
-  border-width: 1px;
-  border-color: transparent;
-  border-radius: 10px;
-  max-width: 140px;
-  margin-vertical: 5px;
-  padding: 15px 20px;
-  background-color: ${(props: any) => props.isFromProfile ? 'transparent' : props.theme.colors.inputDisabled};
+`
+export const DummyContainer = styled.View`
+  height: 40px;
 `

package/src/components/UserProfileForm/index.tsx

@@ -47,6 +47,40 @@ export const UserProfileForm = (props: ProfileParams) => {
     }
   });
 
+  const _pickerStyle = StyleSheet.create({
+    inputAndroid: {
+      color: '#000',
+      borderWidth: 1,
+      borderColor: theme.colors.clear,
+      padding: 10,
+      height: 40,
+      backgroundColor: theme.colors.disabled,
+      borderRadius: 8
+    },
+    inputIOS: {
+      color: '#000',
+      padding: 10,
+      height: 40,
+      borderWidth: 1,
+      borderColor: theme.colors.clear,
+      backgroundColor: theme.colors.clear,
+    },
+    icon: {
+      width: 10,
+      marginTop: 9,
+      marginEnd: 10
+    },
+    placeholder: {
+      color: theme.colors.secundaryContrast
+    },
+    chevronDown: {
+      display: 'none'
+    },
+    chevronUp: {
+      display: 'none'
+    }
+  })
+
   const onRedirect = (route: string, params?: any) => {
     navigation.navigate(route, params)
   }
@@ -97,7 +131,7 @@ export const UserProfileForm = (props: ProfileParams) => {
       <View>
         <LanguageContainer>
           <Ionicons name='globe-outline' style={styles.iconStyle} />
-          <LanguageSelector isFromProfile />
+          <LanguageSelector pickerStyle={_pickerStyle} />
         </LanguageContainer>
         <LogoutButton />
       </View>

package/src/types/index.tsx

@@ -113,6 +113,7 @@ export interface LanguageSelectorParams {
   currentLanguage?: string;
   handleChangeLanguage?: any;
   isFromProfile?: boolean,
+  pickerStyle?: any
 }
 export interface BusinessesListingParams {
   navigation?: any;

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

@@ -29,7 +29,7 @@ const types = ['food', 'laundry', 'alcohol', 'groceries'];
 export const BusinessBasicInformation = (
 	props: BusinessBasicInformationParams,
 ) => {
-	const { navigation, businessState, isBusinessInfoShow, logo, header } = props;
+	const { navigation, businessState, isBusinessInfoShow, logo, header, isPreOrder } = props;
 	const { business, loading } = businessState;
 
 	const theme = useTheme();
@@ -181,12 +181,16 @@ export const BusinessBasicInformation = (
 				<WrapReviews>
 					{!isBusinessInfoShow && (
 						<>
-							<TouchableOpacity onPress={() => navigation.navigate('BusinessPreorder', { business: businessState?.business, handleBusinessClick: () => navigation?.goBack() })}>
-								<OText color={theme.colors.textSecondary} style={{ textDecorationLine: 'underline' }}>
-									{t('PRE_ORDER', 'Preorder')}
-								</OText>
-							</TouchableOpacity>
-							<OText size={12} color={theme.colors.textSecondary}>{' \u2022 '}</OText>
+							{ isPreOrder && (
+								<>
+								<TouchableOpacity onPress={() => navigation.navigate('BusinessPreorder', { business: businessState?.business, handleBusinessClick: () => navigation?.goBack() })}>
+									<OText color={theme.colors.textSecondary} style={{ textDecorationLine: 'underline' }}>
+										{t('PRE_ORDER', 'Preorder')}
+									</OText>
+								</TouchableOpacity>
+								<OText size={12} color={theme.colors.textSecondary}>{' \u2022 '}</OText>
+								</>
+							)}
 							<TouchableOpacity onPress={() => setOpenBusinessReviews(true)}>
 								<OText color={theme.colors.textSecondary} style={{ textDecorationLine: 'underline' }}>
 									{t('REVIEWS', 'Reviews')}
@@ -262,4 +266,4 @@ const styles = StyleSheet.create({
 		zIndex: 100,
 		left: 40
 	},
-});
+});

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

@@ -8,7 +8,8 @@ import {
 	useSession,
 	useUtils,
 	ToastType,
-	useToast
+	useToast,
+	useConfig
 } from 'ordering-components/native'
 import { OButton, OIcon, OModal, OText } from '../shared'
 import { BusinessBasicInformation } from '../BusinessBasicInformation'
@@ -52,7 +53,8 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 	const [orderState] = useOrder()
 	const [{ parsePrice }] = useUtils()
 	const [, { showToast }] = useToast()
-
+	const [{ configs }] = useConfig()
+	const isPreOrder = configs?.preorder_status_enabled?.value === '1'
 	const styles = StyleSheet.create({
 		mainContainer: {
 			flex: 1,
@@ -231,6 +233,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 					openBusinessInformation={openBusinessInformation}
 					header={header}
 					logo={logo}
+					isPreOrder={isPreOrder}
 				/>
 				<View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100 }} />
 				{!loading && business?.id && (

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

@@ -134,6 +134,7 @@ const CheckoutUI = (props: any) => {
 
 
 	const isWalletEnabled = configs?.wallet_enabled?.value === '1' && (configs?.wallet_cash_enabled?.value === '1' || configs?.wallet_credit_point_enabled?.value === '1')
+	const isPreOrder = configs?.preorder_status_enabled?.value === '1'
 
 	const driverTipsOptions = typeof configs?.driver_tip_options?.value === 'string'
 		? JSON.parse(configs?.driver_tip_options?.value) || []
@@ -149,6 +150,12 @@ const CheckoutUI = (props: any) => {
 		}
 	})
 
+	const handleMomentClick = () => {
+		if (isPreOrder) {
+			navigation.navigate('MomentOption')
+		}
+	}
+	
 	const handlePlaceOrder = () => {
 		if (!userErrors.length) {
 			handlerClickPlaceOrder && handlerClickPlaceOrder()
@@ -260,19 +267,21 @@ const CheckoutUI = (props: any) => {
 								/>
 							</CHMomentWrapper>
 							<CHMomentWrapper
-								onPress={() => navigation.navigate('MomentOption')}
-								disabled={loading}
+									onPress={() => handleMomentClick()}
+									disabled={loading}
 							>
 								<OText size={12} numberOfLines={1} ellipsizeMode='tail' color={theme.colors.textSecondary}>
 									{options?.moment
 										? parseDate(options?.moment, { outputFormat: configs?.dates_moment_format?.value })
 										: t('ASAP_ABBREVIATION', 'ASAP')}
 								</OText>
-								<OIcon
-									src={theme.images.general.arrow_down}
-									width={10}
-									style={{ marginStart: 8 }}
-								/>
+								{ isPreOrder && (
+									<OIcon
+										src={theme.images.general.arrow_down}
+										width={10}
+										style={{ marginStart: 8 }}
+									/>
+								)}
 							</CHMomentWrapper>
 						</ChHeader>
 						<View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100, marginTop: 18, marginHorizontal: -40 }} />

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

@@ -290,7 +290,15 @@ export const ProductOptionsUI = (props: any) => {
 				}
 				if (img?.video) {
 					const keys = img?.video.split('/')
-					const _videoId = keys[keys.length - 1]
+					let _videoId = keys[keys.length - 1]
+					if (_videoId.includes('watch')) {
+						const __url = _videoId.split('=')[1]
+						_videoId = __url
+					}
+					if (_videoId.includes('?')) {
+						const __url = _videoId.split('?')[0]
+						_videoId = __url
+					}
 					videoList.push(_videoId)
 				}
 			}

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

@@ -193,6 +193,7 @@ export interface BusinessBasicInformationParams {
 	isBusinessInfoShow?: boolean;
 	header?: any;
 	logo?: any;
+	isPreOrder?: boolean;
 }
 export interface BusinessProductsCategoriesParams {
 	categories: Array<any>;