ordering-ui-react-native 0.16.26-release → 0.16.27-release

package/package.json

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

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

@@ -130,6 +130,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 	const [subcategoriesSelected, setSubcategoriesSelected] = useState([])
 	const [openService, setOpenService] = useState(false)
 	const [currentProduct, setCurrentProduct] = useState(null)
+	const [searchBarHeight, setSearchBarHeight] = useState(60)
 
 	const isCheckoutMultiBusinessEnabled: Boolean = configs?.checkout_multi_business_enabled?.value === '1'
 	const openCarts = (Object.values(orderState?.carts)?.filter((cart: any) => cart?.products && cart?.products?.length && cart?.status !== 2 && cart?.valid_schedule && cart?.valid_products && cart?.valid_address && cart?.valid_maximum && cart?.valid_minimum && !cart?.wallets) || null) || []
@@ -262,6 +263,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 						style={{
 							marginTop: Platform.OS === 'ios' ? insets.top : 0
 						}}
+						onLayout={(event: any) => setSearchBarHeight(event.nativeEvent.layout.height) }
 					>
 						{!isOpenSearchBar && (
 							<>
@@ -322,9 +324,9 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 
 				{business?.categories?.length > 0 && isOpenFiltProducts && (
 					<FiltProductsContainer
-						isIos={Platform.OS === 'ios'}
 						style={{
-							height: Dimensions.get('window').height - filtProductsHeight
+							height: Dimensions.get('window').height - filtProductsHeight,
+							top: Platform.OS === 'ios' ? searchBarHeight + insets.top : searchBarHeight							
 						}}
 						contentContainerStyle={{ flexGrow: 1 }}
 					>

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

@@ -37,9 +37,7 @@ export const BusinessProductsListingContainer = styled.ScrollView`
 export const FiltProductsContainer = styled.ScrollView`
   position: absolute;
   width: 100%;
-  z-index: 2000;
-  top: 80px;
-  margin-top: 20px;
+  z-index: 20000;
 `
 
 export const BackgroundGray = styled.View`
@@ -48,7 +46,7 @@ export const BackgroundGray = styled.View`
   background-color: rgba(0,0,0,0.5);
   position: absolute;
   margin-top: 100px;
-  z-index: 100;
+  z-index: 10000;
   width: 100%;
 `
 

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

@@ -118,9 +118,11 @@ const CheckoutUI = (props: any) => {
 			paddingHorizontal: 40,
 			width: '100%'
 		},
-		wrapperNavbar: Platform.OS === 'ios'
-			? { paddingVertical: 0, paddingHorizontal: 40 }
-			: { paddingVertical: 20, paddingHorizontal: 40 }
+		wrapperNavbar: {
+			paddingVertical: 0,
+			paddingHorizontal: 40,
+			marginVertical: 2
+		}
 	})
 
 	const [, { showToast }] = useToast();
@@ -284,7 +286,6 @@ const CheckoutUI = (props: any) => {
 						onActionLeft={() => navigation?.canGoBack() && navigation.goBack()}
 						showCall={false}
 						btnStyle={{ paddingLeft: 0 }}
-						style={{ marginTop: Platform.OS === 'ios' ? 0 : 30 }}
 						titleWrapStyle={{ paddingHorizontal: 0 }}
 						titleStyle={{ marginRight: 0, marginLeft: 0 }}
 					/>

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

@@ -187,6 +187,7 @@ export const ProductOptionsUI = (props: any) => {
 	const [headerRefHeight, setHeaderRefHeight] = useState(0)
 	const [summaryRefHeight, setSummaryRefHeight] = useState(0)
 	const [isScrollAvailable, setIsScrollAvailable] = useState(null)
+	const [editionsLayoutY, setEditionsLayoutY] = useState(null)
 
 	const isError = (id: number) => {
 		let bgColor = theme.colors.white;
@@ -295,6 +296,7 @@ export const ProductOptionsUI = (props: any) => {
 		maxProductQuantity === 0 ||
 		Object.keys(errors).length > 0;
 
+	
 	const ExtraOptions = ({ eID, options }: any) => (
 		<>
 			{options.map(({ id, name, respect_to, suboptions }: any) => (
@@ -302,19 +304,25 @@ export const ProductOptionsUI = (props: any) => {
 					{respect_to == null && suboptions?.length > 0 && (
 						<TouchableOpacity
 							key={`eopt_key_${id}`}
-							onPress={() => setSelectedOpt(id)}
+							onPress={() => {
+								setSelectedOpt(id)
+								scrollViewRef?.current?.scrollTo && scrollViewRef.current.scrollTo({
+									y: optionLayout[`id:${id}`]?.y + editionsLayoutY - 50,
+									animated: true
+								})
+							}}
 							style={[
 								styles.extraItem,
 								{
 									borderBottomColor:
-										selOpt == id ? theme.colors.textNormal : theme.colors.border,
+										selOpt == id ? theme.colors.textNormal : theme.colors.backgroundPage,
 								},
 							]}>
 							<OText
 								color={
 									selOpt == id ? theme.colors.textNormal : theme.colors.textSecondary
 								}
-								size={selOpt == id ? 14 : 12}
+								size={12}
 								weight={selOpt == id ? '600' : 'normal'}
 								style={{ maxWidth: 150 }}
 								numberOfLines={1}>
@@ -701,39 +709,34 @@ export const ProductOptionsUI = (props: any) => {
 						<ExtraOptionWrap
 							horizontal
 							showsHorizontalScrollIndicator={false}
-							style={{ marginBottom: 20 }}
-							contentContainerStyle={{ paddingHorizontal: 33, backgroundColor: theme.colors.white }}
+							style={{
+								marginBottom: 20,
+								borderBottomWidth: 1,
+								borderBottomColor: theme.colors.border,
+								marginHorizontal: 30,
+								backgroundColor: theme.colors.backgroundPage,
+							}}
 						>
-							<TouchableOpacity
-								key={`eopt_key_00`}
-								onPress={() => setSelectedOpt(-1)}
-								style={[
-									styles.extraItem,
-									{
-										borderBottomColor: selOpt == -1 ? theme.colors.textNormal : theme.colors.border,
-									},
-								]}>
-								<OText
-									color={selOpt == -1 ? theme.colors.textNormal : theme.colors.textSecondary}
-									size={selOpt == -1 ? 14 : 12}
-									weight={selOpt == -1 ? '600' : 'normal'}>
-									{t('ALL', 'All')}
-								</OText>
-							</TouchableOpacity>
 							{product?.ingredients.length > 0 && (
 								<TouchableOpacity
 									key={`eopt_key_01`}
-									onPress={() => setSelectedOpt(0)}
+									onPress={() => {
+										setSelectedOpt(0)
+										scrollViewRef?.current?.scrollTo && scrollViewRef.current.scrollTo({
+											y: optionLayout[`id:0`]?.y + editionsLayoutY - 50,
+											animated: true
+										})
+									}}
 									style={[
 										styles.extraItem,
 										{
 											borderBottomColor:
-												selOpt == 0 ? theme.colors.textNormal : theme.colors.border,
+												selOpt == 0 ? theme.colors.textNormal : theme.colors.backgroundPage,
 										},
 									]}>
 									<OText
 										color={selOpt == 0 ? theme.colors.textNormal : theme.colors.textSecondary}
-										size={selOpt == 0 ? 14 : 12}
+										size={12}
 										weight={selOpt == 0 ? '600' : 'normal'}>
 										{t('INGREDIENTS', 'Ingredients')}
 									</OText>
@@ -783,184 +786,93 @@ export const ProductOptionsUI = (props: any) => {
 							))}
 						</>
 					) : (
-						<ProductEditions>
-							{selOpt === -1 ? (
-								<>
-									{product?.ingredients.length > 0 && (
-										<View style={styles.optionContainer} onLayout={(event: any) => handleOnLayout(event, 0)}>
-											<SectionTitle>
-												<OText size={16}>
-													{t('INGREDIENTS', 'Ingredients')}
-												</OText>
-											</SectionTitle>
-											<WrapperIngredients>
-												{product?.ingredients.map((ingredient: any) => (
-													<ProductIngredient
-														key={ingredient.id}
-														ingredient={ingredient}
-														state={
-															productCart.ingredients[`id:${ingredient.id}`]
-														}
-														onChange={handleChangeIngredientState}
-														isSoldOut={isSoldOut}
-													/>
-												))}
-											</WrapperIngredients>
-										</View>
-									)}
-									{product?.extras.sort((a: any, b: any) => a.rank - b.rank).map((extra: any) =>
-										extra.options.sort((a: any, b: any) => a.rank - b.rank).map((option: any) => {
-											const currentState =
-												productCart.options[`id:${option.id}`] || {};
-											return (
-												<React.Fragment key={`popt_${option.id}`}>
-													{showOption(option) && (
-														<View style={styles.optionContainer} onLayout={(event: any) => handleOnLayout(event, option?.id)}>
-															<ProductOption
-																option={option}
-																currentState={currentState}
-																error={errors[`id:${option.id}`]}>
-																<WrapperSubOption
-																	style={{
-																		backgroundColor: isError(option.id),
-																		borderRadius: 7.6
-																	}}>
-																	{option.suboptions.sort((a: any, b: any) => a.rank - b.rank).map(
-																		(suboption: any) => {
-																			const currentState =
-																				productCart.options[
-																					`id:${option.id}`
-																				]?.suboptions[
-																				`id:${suboption.id}`
-																				] || {};
-																			const balance =
-																				productCart.options[
-																					`id:${option.id}`
-																				]?.balance || 0;
-																			return (
-																				<ProductOptionSubOption
-																					key={suboption.id}
-																					isSoldOut={isSoldOut}
-																					onChange={
-																						handleChangeSuboptionState
-																					}
-																					balance={balance}
-																					option={option}
-																					suboption={suboption}
-																					state={currentState}
-																					disabled={
-																						isSoldOut ||
-																						maxProductQuantity <= 0
-																					}
-																					setIsScrollAvailable={setIsScrollAvailable}
-																					error={errors[`id:${option.id}`]}
-																				/>
-																			);
-																		},
-																	)}
-																</WrapperSubOption>
-															</ProductOption>
-														</View>
-													)}
-												</React.Fragment>
-											);
-										}),
-									)}
-								</>
-							) : (
-								<>
-									{selOpt === 0 ? (
-										<View style={styles.optionContainer}>
-											<SectionTitle>
-												<OText size={16}>
-													{t('INGREDIENTS', 'Ingredients')}
-												</OText>
-											</SectionTitle>
-											<WrapperIngredients>
-												{product?.ingredients.map((ingredient: any) => (
-													<ProductIngredient
-														key={ingredient.id}
-														ingredient={ingredient}
-														state={
-															productCart.ingredients[`id:${ingredient.id}`]
-														}
-														onChange={handleChangeIngredientState}
-														isSoldOut={isSoldOut}
-													/>
-												))}
-											</WrapperIngredients>
-										</View>
-									) : (
-										<>
-											{product?.extras.map((extra: any) =>
-												extra.options.sort((a: any, b: any) => a.rank - b.rank).map((option: any) => {
-													if (
-														option.id == selOpt ||
-														(hasRespected(
-															extra.options,
-															option.respect_to,
-														) &&
-															showOption(option))
-													) {
-														const currentState =
-															productCart.options[`id:${option.id}`] || {};
-														return (
-															<React.Fragment key={option.id}>
-																{showOption(option) && (
-																	<View style={styles.optionContainer}>
-																		<ProductOption
-																			option={option}
-																			currentState={currentState}
-																			error={errors[`id:${option.id}`]}>
-																			<WrapperSubOption
-																				style={{
-																					backgroundColor: isError(
-																						option.id,
-																					),
-																				}}>
-																				{option.suboptions.sort((a: any, b: any) => a.rank - b.rank).map(
-																					(suboption: any) => {
-																						const currentState =
-																							productCart.options[
-																								`id:${option.id}`
-																							]?.suboptions[
-																							`id:${suboption.id}`
-																							] || {};
-																						const balance =
-																							productCart.options[
-																								`id:${option.id}`
-																							]?.balance || 0;
-																						return (
-																							<ProductOptionSubOption
-																								key={suboption.id}
-																								onChange={
-																									handleChangeSuboptionState
-																								}
-																								balance={balance}
-																								option={option}
-																								suboption={suboption}
-																								state={currentState}
-																								disabled={
-																									isSoldOut ||
-																									maxProductQuantity <= 0
-																								}
-																							/>
-																						);
-																					},
-																				)}
-																			</WrapperSubOption>
-																		</ProductOption>
-																	</View>
-																)}
-															</React.Fragment>
-														);
+						<ProductEditions
+							onLayout={(event: any) => {
+								setEditionsLayoutY(event.nativeEvent.layout?.y)
+							}}
+						>
+							<>
+								{product?.ingredients.length > 0 && (
+									<View style={styles.optionContainer} onLayout={(event: any) => handleOnLayout(event, 0)}>
+										<SectionTitle>
+											<OText size={16}>
+												{t('INGREDIENTS', 'Ingredients')}
+											</OText>
+										</SectionTitle>
+										<WrapperIngredients>
+											{product?.ingredients.map((ingredient: any) => (
+												<ProductIngredient
+													key={ingredient.id}
+													ingredient={ingredient}
+													state={
+														productCart.ingredients[`id:${ingredient.id}`]
 													}
-												}),
-											)}
-										</>
-									)}
-								</>
-							)}
+													onChange={handleChangeIngredientState}
+													isSoldOut={isSoldOut}
+												/>
+											))}
+										</WrapperIngredients>
+									</View>
+								)}
+								{product?.extras.sort((a: any, b: any) => a.rank - b.rank).map((extra: any) =>
+									extra.options.sort((a: any, b: any) => a.rank - b.rank).map((option: any) => {
+										const currentState =
+											productCart.options[`id:${option.id}`] || {};
+										return (
+											<React.Fragment key={`popt_${option.id}`}>
+												{showOption(option) && (
+													<View style={styles.optionContainer} onLayout={(event: any) => handleOnLayout(event, option?.id)}>
+														<ProductOption
+															option={option}
+															currentState={currentState}
+															error={errors[`id:${option.id}`]}>
+															<WrapperSubOption
+																style={{
+																	backgroundColor: isError(option.id),
+																	borderRadius: 7.6
+																}}>
+																{option.suboptions.sort((a: any, b: any) => a.rank - b.rank).map(
+																	(suboption: any) => {
+																		const currentState =
+																			productCart.options[
+																				`id:${option.id}`
+																			]?.suboptions[
+																			`id:${suboption.id}`
+																			] || {};
+																		const balance =
+																			productCart.options[
+																				`id:${option.id}`
+																			]?.balance || 0;
+																		return (
+																			<ProductOptionSubOption
+																				key={suboption.id}
+																				isSoldOut={isSoldOut}
+																				onChange={
+																					handleChangeSuboptionState
+																				}
+																				balance={balance}
+																				option={option}
+																				suboption={suboption}
+																				state={currentState}
+																				disabled={
+																					isSoldOut ||
+																					maxProductQuantity <= 0
+																				}
+																				setIsScrollAvailable={setIsScrollAvailable}
+																				error={errors[`id:${option.id}`]}
+																			/>
+																		);
+																	},
+																)}
+															</WrapperSubOption>
+														</ProductOption>
+													</View>
+												)}
+											</React.Fragment>
+										);
+									}),
+								)}
+							</>
 							{!product?.hide_special_instructions && (
 								<ProductComment>
 									<SectionTitle>

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

@@ -9,7 +9,7 @@ export const TopActions = styled.TouchableOpacity`
 	height: 60px;
 	justify-content: center;
   padding-horizontal: 30px;
-  width: 80px;
+  width: 100px;
 `;
 
 export const TopHeader = styled.View`
@@ -82,7 +82,6 @@ export const ProductActions = styled.View`
   border-top-color: ${(props: any) => props.theme.colors.border};
 `
 export const ExtraOptionWrap = styled.ScrollView`
-	margin-horizontal: 30px;
 `;
 
 export const WeightUnitSwitch = styled.View`

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

@@ -60,7 +60,7 @@ const ServiceFormUI = (props: ServiceFormParams) => {
   const [selectDate, setSelectedDate] = useState<any>(new Date())
   const [timeList, setTimeList] = useState<any>([])
   const [isEnabled, setIsEnabled] = useState(false)
-  const [timeSelected, setTimeSelected] = useState(null)
+  const [timeSelected, setTimeSelected] = useState<string | null>(null)
   const [dateSelected, setDateSelected] = useState<any>(null)
   const [isOpen, setIsOpen] = useState(false)
   const [currentProfessional, setCurrentProfessional] = useState<any>(null)
@@ -248,6 +248,12 @@ const ServiceFormUI = (props: ServiceFormParams) => {
       setCurrentProfessional(professional)
     }
   }, [isCartProduct, professionalListState?.professionals])
+
+  useEffect(() => {
+    if (!productCart?.calendar_event?.start) return
+    setSelectedDate(moment.utc(productCart?.calendar_event?.start).local())
+    setTimeSelected(moment.utc(productCart?.calendar_event?.start).local().format('HH:mm'))
+  }, [productCart])
   
   return (
     <>
@@ -409,7 +415,7 @@ const ServiceFormUI = (props: ServiceFormParams) => {
                 {(timeList?.length > 0 && isEnabled) ? (
                   <SelectDropdown
                     ref={dropdownRef} 
-                    defaultValue={timeSelected}
+                    defaultValueByIndex={timeList.findIndex((item: any) => item.value === timeSelected)}
                     data={timeList}
                     onSelect={(selectedItem, index) => {
                       setTimeSelected(selectedItem?.value)

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

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react'
-import { Pressable, StyleSheet, View, ScrollView } from 'react-native';
+import { Pressable, StyleSheet, View, ScrollView, TouchableOpacity } from 'react-native';
 import { useTheme } from 'styled-components/native'
 import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
 import FastImage from 'react-native-fast-image'
@@ -24,7 +24,6 @@ import {
   WalletTransactionsWrapper
 } from './styles'
 
-import NavBar from '../NavBar'
 import { OButton, OIcon, OText, OModal } from '../shared';
 import { NotFoundSource } from '../NotFoundSource';
 import { WalletTransactions } from '../WalletTransactions'
@@ -78,7 +77,7 @@ const WalletsUI = (props: any) => {
       isActive: isWalletCashEnabled
     },
     credit_point: {
-      name: t('CREDITS_POINTS_WALLET', 'Credit Points Wallet'),
+      name: t('POINTS_WALLET', 'Points Wallet'),
       value: 1,
       isActive: isWalletPointsEnabled
     }
@@ -112,15 +111,7 @@ const WalletsUI = (props: any) => {
     <>
       <Container>
         <Header>
-          <NavBar
-            title={isChewLayout ? '' : t('WALLETS', 'Wallets')}
-            titleAlign={'center'}
-            onActionLeft={goToBack}
-            showCall={false}
-            paddingTop={10}
-            btnStyle={{ paddingLeft: 0 }}
-            style={{ flex: 1 }}
-          />
+        <OText size={24} style={{ marginTop: 30 }}>{t('WALLETS', 'Wallets')}</OText>
           {isChewLayout && (
             <OButton
               text={t('WALLET_HISTORY', 'Wallet history')}
@@ -145,16 +136,25 @@ const WalletsUI = (props: any) => {
                 showsHorizontalScrollIndicator={false}
               >
                 {walletList.wallets?.map((wallet: any) => walletName[wallet.type]?.isActive && (
-                  <Pressable
+                  <TouchableOpacity
                     key={wallet.id}
                     onPress={() => handleChangeTab(wallet)}
                   >
-                    <OTab isSelected={tabSelected === wallet.type}>
-                      <OText size={18} color={tabSelected === wallet.type && theme.colors.primary}>
+                    <OTab
+                      isSelected={tabSelected === wallet.type}
+                      style={{
+                        borderBottomWidth: 1,
+                        borderBottomColor:
+                          tabSelected === wallet.type
+                          ? theme.colors.textNormal
+                          : theme.colors.border
+                      }}
+                    >
+                      <OText>
                         {walletName[wallet.type]?.name}
                       </OText>
                     </OTab>
-                  </Pressable>
+                  </TouchableOpacity>
                 ))}
               </OTabs>
 

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

@@ -34,10 +34,12 @@ export const OTabs = styled.View`
   flex-direction: row;
   width: 100%;
   flex-wrap: wrap;
+  padding-vertical: 5px;
 `;
 
 export const OTab = styled.View`
   padding-horizontal: 10px;
+  padding-vertical: 10px;
 `;
 
 export const LoyaltyContent = styled.View`

package/themes/original/src/components/shared/OBottomPopup.tsx

@@ -33,7 +33,7 @@ const OBottomPopup = (props: Props) => {
 	
 	return (
 		<Modal
-			animationType='slide'
+			animationType='fade'
 			transparent={transparent}
 			visible={open}
 			onRequestClose={() => onClose()}

package/themes/original/src/layouts/Container.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
-import styled, { css } from 'styled-components/native';
-import { Platform } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
+import styled, { css, useTheme } from 'styled-components/native';
+import { Platform, View } from 'react-native';
 
 const ContainerStyled = styled.ScrollView`
   flex: 1;
@@ -10,17 +11,20 @@ const ContainerStyled = styled.ScrollView`
   background-color: ${(props: any) => props.theme.colors.backgroundPage};
 `;
 
-const SafeAreaStyled = styled.SafeAreaView`
-  flex: 1;
-  background-color: ${(props: any) => props.theme.colors.backgroundPage};
-`;
-
 export const Container = (props: any) => {
+  const theme = useTheme()
+  const insets = useSafeAreaInsets()
   return (
-    <SafeAreaStyled>
+    <View
+      style={{
+        flex: 1,
+        paddingTop: insets.top,
+        backgroundColor: theme.colors.backgroundPage
+      }}
+    >
       <ContainerStyled {...props} ref={props?.forwardRef} keyboardShouldPersistTaps='handled' style={{...props.style}}>
         {props.children}
       </ContainerStyled>
-    </SafeAreaStyled>
+    </View>
   )
 }