ordering-ui-react-native 0.18.2 → 0.18.3-release

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

@@ -7,6 +7,7 @@ import {
 import { useTheme } from 'styled-components/native';
 import { StyleSheet, View } from 'react-native'
 import IconAntDesign from 'react-native-vector-icons/AntDesign';
+import FastImage from 'react-native-fast-image';
 
 import {
 	Container,
@@ -14,7 +15,8 @@ import {
 	QuantityControl,
 	Checkbox,
 	PositionControl,
-	Circle
+	Circle,
+	Logo
 } from './styles'
 import { OIcon, OText } from '../shared'
 
@@ -29,7 +31,8 @@ export const ProductOptionSubOptionUI = (props: any) => {
 		toggleSelect,
 		changePosition,
 		disabled,
-		setIsScrollAvailable
+		setIsScrollAvailable,
+		image
 	} = props
 
 	const disableIncrement = option?.limit_suboptions_by_max ? balance === option?.max || state.quantity === suboption?.max : state.quantity === suboption?.max || (!state.selected && balance === option?.max)
@@ -37,12 +40,23 @@ export const ProductOptionSubOptionUI = (props: any) => {
 
 	const theme = useTheme();
 	const [, t] = useLanguage()
-	const [{ parsePrice }] = useUtils()
+	const [{ parsePrice, optimizeImage }] = useUtils()
 	const [showMessage, setShowMessage] = useState(false)
 	const [isDirty, setIsDirty] = useState(false)
 
-	const isChewLayout = theme?.header?.components?.layout?.type?.toLowerCase() === 'chew'
-	const iconsSize = isChewLayout ? 20 : 16
+	const iconsSize = 20
+
+	const styles = StyleSheet.create({
+		icon: {
+			borderRadius: 7.6,
+			width: 60,
+			height: 60
+		},
+		logo: {
+			borderRadius: 10,
+			marginLeft: 3,
+		},
+	});
 
 	const handleSuboptionClick = () => {
 		toggleSelect()
@@ -68,7 +82,7 @@ export const ProductOptionSubOptionUI = (props: any) => {
 
 	return (
 		<View>
-			<Container onPress={() => handleSuboptionClick()}>
+			<Container onPress={!((option?.with_half_option || option?.allow_suboption_quantity) && state?.selected) ? () => handleSuboptionClick() : null}>
 				<IconControl disabled={disabled} onPress={() => handleSuboptionClick()}>
 					{((option?.min === 0 && option?.max === 1) || option?.max > 1) ? (
 						state?.selected ? (
@@ -83,12 +97,24 @@ export const ProductOptionSubOptionUI = (props: any) => {
 							<OIcon src={theme.images.general.radio_nor} color={theme.colors.disabled} width={16} />
 						)
 					)}
-					<OText size={12} lineHeight={18} color={theme.colors.textSecondary} mLeft={10} style={{ flex: 1 }}>
+					{image && (
+						<Logo style={styles.logo}>
+							<FastImage
+								style={styles.icon}
+								source={{
+									uri: optimizeImage(image, 'h_100,c_limit'),
+									priority: FastImage.priority.normal,
+								}}
+								resizeMode={FastImage.resizeMode.cover}
+							/>
+						</Logo>
+					)}
+					<OText size={12} lineHeight={18} color={theme.colors.textSecondary} mLeft={5} style={{ flex: 1 }}>
 						{suboption?.name}
 					</OText>
 				</IconControl>
-				<QuantityControl>
-					{option?.allow_suboption_quantity && state?.selected && (
+				{option?.allow_suboption_quantity && state?.selected && (
+					<QuantityControl>
 						<>
 							<Checkbox disabled={disabled || state.quantity === 0} onPress={decrement}>
 								<IconAntDesign
@@ -97,7 +123,7 @@ export const ProductOptionSubOptionUI = (props: any) => {
 									color={state.quantity === 0 || disabled ? theme.colors.disabled : theme.colors.primary}
 								/>
 							</Checkbox>
-							<OText size={12} mLeft={5} mRight={5}>
+							<OText size={12}>
 								{state.quantity}
 							</OText>
 							<Checkbox disabled={disabled || disableIncrement} onPress={increment}>
@@ -108,16 +134,17 @@ export const ProductOptionSubOptionUI = (props: any) => {
 								/>
 							</Checkbox>
 						</>
-					)}
-				</QuantityControl>
-				<PositionControl>
-					{option?.with_half_option && state?.selected && (
+					</QuantityControl>
+				)}
+				{option?.with_half_option && state?.selected && (
+					<PositionControl>
 						<>
 							<Circle disabled={disabled} onPress={() => changePosition('left')}>
 								<OIcon
 									src={theme.images.general.half_l}
 									color={state.selected && state.position === 'left' ? theme.colors.primary : '#cbcbcb'}
-									width={16}
+									width={20}
+									height={20}
 									style={styles.inverse}
 								/>
 							</Circle>
@@ -125,21 +152,23 @@ export const ProductOptionSubOptionUI = (props: any) => {
 								<OIcon
 									src={theme.images.general.half_f}
 									color={state.selected && state.position === 'whole' ? theme.colors.primary : '#cbcbcb'}
-									width={16}
+									width={20}
+									height={20}
 								/>
 							</Circle>
 							<Circle disabled={disabled} onPress={() => changePosition('right')}>
 								<OIcon
 									src={theme.images.general.half_r}
 									color={state.selected && state.position === 'right' ? theme.colors.primary : '#cbcbcb'}
-									width={16}
+									width={20}
+									height={20}
 								/>
 							</Circle>
 						</>
-					)}
-				</PositionControl>
+					</PositionControl>
+				)}
 				{price > 0 && (
-					<OText size={12} lineHeight={18} color={theme.colors.textSecondary} style={{ paddingRight: 10 }}>
+					<OText size={12} lineHeight={18} color={theme.colors.textSecondary} style={{ width: 70, maxWidth: 70 }}>
 						+ {parsePrice(price)}
 					</OText>
 				)}

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

@@ -9,30 +9,31 @@ export const Container = styled.TouchableOpacity`
 
 export const IconControl = styled.TouchableOpacity`
   flex-direction: row;
-  padding: 10px;
-  width: 45%;
+  padding: 10px 0 10px 10px;
+  width: 50%;
   align-items: center;
 `
 
 export const QuantityControl = styled.View`
   flex-direction: row;
   align-items: center;
-  justify-content: flex-start;
-  margin-horizontal: 5px;
-  flex: 1;
-  width: 60px;
+  justify-content: space-between;
+  width: 62px;
 `
 
 export const PositionControl = styled.View`
   flex-direction: row;
   align-items: center;
-  margin-right: 5px;
-  flex: 1;
 `
 
 export const Checkbox = styled.TouchableOpacity`
 `
 
 export const Circle = styled.TouchableOpacity`
-  margin: 0 1px;
+  margin: 0 1.5px;
 `
+
+export const Logo = styled.View`
+  height: 65px;
+  width: 65px;
+`;

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

@@ -12,7 +12,7 @@ export const ProfessionalPhoto = styled.ImageBackground`
 
 export const InfoWrapper = styled.View`
   margin-vertical: 30px;
-  padding-horizontal: 40px;
+  padding-horizontal: 20px;
 `
 
 export const Divider = styled.View`
@@ -22,7 +22,7 @@ export const Divider = styled.View`
 `
 
 export const ScheduleWrapper = styled.View`
-  padding-horizontal: 40px;
+  padding-horizontal: 20px;
   margin-top: 30px;
 `
 
@@ -43,4 +43,4 @@ export const CalendarWrapper = styled.View`
   border-color: ${(props: any) => props.theme.colors.backgroundGray200};
   border-radius: 7.6px;
   padding: 15px;
-`
+`

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

@@ -19,7 +19,7 @@ import { useTheme } from 'styled-components/native';
 import { OButton, OIcon, OModal, OText } from '../shared'
 import { Placeholder, PlaceholderLine } from 'rn-placeholder'
 import { NotFoundSource } from '../NotFoundSource'
-import { View, StyleSheet, ScrollView, RefreshControl } from 'react-native'
+import { View, StyleSheet, ScrollView, RefreshControl, Platform } from 'react-native'
 import { PromotionParams } from '../../types'
 import { Container } from '../../layouts/Container'
 
@@ -98,8 +98,6 @@ const PromotionsUI = (props: PromotionParams) => {
 
   return (
     <Container
-      noPadding
-      pt={20}
       refreshControl={
         <RefreshControl
           refreshing={refreshing}
@@ -112,7 +110,9 @@ const PromotionsUI = (props: PromotionParams) => {
         titleAlign={'center'}
         onActionLeft={() => navigation.goBack()}
         showCall={false}
-        style={{ paddingVertical: 0, marginLeft: 20 }}
+        paddingTop={Platform.OS === 'ios' ? 20 : 10}
+        style={{ paddingVertical: 0 }}
+        btnStyle={{ paddingLeft: 0 }}
       />
       <PromotionsContainer>
         <SearchBarContainer>
@@ -143,7 +143,7 @@ const PromotionsUI = (props: PromotionParams) => {
             <WrapperSingleOffer key={offer.id}>
               <SingleOfferContainer>
                 <FastImage
-                  style={{ height: 80, width: 80, aspectRatio: 3 / 2, borderRadius: 8 }}
+                  style={{ height: 80, width: 80, aspectRatio: 1, borderRadius: 8 }}
                   source={typeof offer?.image !== 'number' ? {
                     uri: optimizeImage(offer?.image, 'h_1024,c_limit'),
                     priority: FastImage.priority.normal,
@@ -212,7 +212,7 @@ const PromotionsUI = (props: PromotionParams) => {
             </OText>
             <ScrollView
               showsVerticalScrollIndicator={false}
-              style={{ height: '75%' }}
+              style={{ height: '68%' }}
             >
               {offerSelected?.businesses?.map((business: any) => {
                 return (

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

@@ -2,13 +2,12 @@ import styled, { css } from 'styled-components/native'
 
 export const PromotionsContainer = styled.View`
   width: 100%;
-  padding-left: 40px;
-	padding-right: 40px;
 `
 
 export const WrapperSingleOffer = styled.View`
   flex-direction: column;
   width: 100%;
+  margin-bottom: 30px;
 `
 
 export const SingleOfferContainer = styled.View`
@@ -16,11 +15,12 @@ export const SingleOfferContainer = styled.View`
   width: 100%;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 20px;
+  margin-bottom: 10px;
 `
 
 export const OfferInformation = styled.View`
   justify-content: space-between;
+  min-width: 70%;
   max-width: 70%;
 `
 

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

@@ -1,7 +1,7 @@
 import styled from 'styled-components/native'
 
 export const ReviewDriverContainer = styled.ScrollView`
-  padding: 20px 40px;
+  padding: 20px;
   margin-bottom: 100px;
 `
 

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

@@ -1,7 +1,7 @@
 import styled from 'styled-components/native'
 
 export const ReviewOrderContainer = styled.ScrollView`
-  padding: 20px 40px;
+  padding: 20px;
   margin-bottom: 100px;
 `
 

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

@@ -74,13 +74,22 @@ const ReviewProductsUI = (props: ReviewProductParams) => {
           titleWrapStyle={{ paddingHorizontal: 0 }}
           titleStyle={{ marginRight: 0, marginLeft: 0 }}
         />
-        {order?.products?.map((product: any) => !product?.deleted && (
-          <SingleProductReview
-            key={product.id}
-            product={product}
-            formState={formState}
-            handleChangeFormState={handleChangeFormState}
-          />
+        {order?.products && order.products.length > 0 && order?.products.map(productsOrder => (
+          productsOrder?.length ? productsOrder?.map((product: any, i: any) => !product?.deleted ?
+            <SingleProductReview
+              key={i}
+              product={product}
+              formState={formState}
+              handleChangeFormState={handleChangeFormState}
+            /> : null
+          ) : (!productsOrder?.deleted ? (
+            <SingleProductReview
+              product={productsOrder}
+              formState={formState}
+              handleChangeFormState={handleChangeFormState}
+            />
+          ) : null
+          )
         ))}
       </ReviewProductsContainer>
 

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

@@ -1,7 +1,7 @@
 import styled from 'styled-components/native'
 
 export const ReviewProductsContainer = styled.ScrollView`
-  padding: 20px 40px;
+  padding: 20px;
   margin-bottom: 100px;
 `
 

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

@@ -13,7 +13,7 @@ import { OIcon, OText } from '../shared';
 export const ScheduleAccordion = (props: any) => {
 
 	const {
-		scheduleFormatted,
+		timeFormated,
 		schedule,
 		weekIndex
 	} = props
@@ -52,9 +52,9 @@ export const ScheduleAccordion = (props: any) => {
 					{schedule?.lapses?.map((lapse: any) => (
 						schedule?.enabled ?
 							<OText mBottom={16}>
-								{scheduleFormatted(lapse.open) +
+								{timeFormated(lapse.open) +
 									' - ' +
-									scheduleFormatted(lapse.close)}
+									timeFormated(lapse.close)}
 							</OText>
 							:
 							<OText color={theme.colors.red} mBottom={16}>

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

@@ -116,7 +116,7 @@ const ServiceFormUI = (props: ServiceFormParams) => {
       marginHorizontal: 0
     },
     professionalList: {
-      paddingHorizontal: 40,
+      paddingHorizontal: 20,
       paddingVertical: 30,
     }
   })
@@ -602,7 +602,7 @@ const ServiceFormUI = (props: ServiceFormParams) => {
                       <PlaceholderLine width={60} height={20} />
                     </Placeholder>
                   ) : (
-                    <OText color={theme.colors.primary} size={13}>{t('WITH_GUEST_USER', 'With Guest user')}</OText>
+                    <OText color={theme.colors.primary} size={13}>{t('AS_GUEST_USER', 'As guest user')}</OText>
                   )}
                 </TouchableOpacity>
               )}

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

@@ -11,7 +11,7 @@ export const ProfessionalPhoto = styled.ImageBackground`
 `;
 
 export const InfoWrapper = styled.View`
-  padding-horizontal: 40px;
+  padding-horizontal: 20px;
   margin-vertical: 30px;
 `
 
@@ -22,7 +22,7 @@ export const Divider = styled.View`
 `
 
 export const ProfessionalWrapper = styled.View`
-  padding-horizontal: 40px;
+  padding-horizontal: 20px;
   margin-top: 30px;
 `
 
@@ -41,10 +41,10 @@ export const ButtonWrapper = styled.View`
   align-items: center;
   flex-direction: row;
   padding-vertical: 13px;
-  padding-horizontal: 40px;
+  padding-horizontal: 20px;
   margin-top: 30px;
   margin-bottom: 40px;
   width: 100%;
   border-top-width: 1px;
   border-top-color: ${(props: any) => props.theme.colors.backgroundGray200};
-`
+`

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

@@ -1,5 +1,5 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { View, Pressable, StyleSheet, Linking, Platform, TouchableOpacity, Vibration } from 'react-native';
+import { View, Pressable, StyleSheet, Linking, Platform, TouchableOpacity } from 'react-native';
 import { useForm, Controller } from 'react-hook-form';
 import Spinner from 'react-native-loading-spinner-overlay';
 import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
@@ -8,6 +8,7 @@ import { PhoneInputNumber } from '../PhoneInputNumber';
 import { FacebookLogin } from '../FacebookLogin';
 import Recaptcha from 'react-native-recaptcha-that-works'
 import ReCaptcha from '@fatnlazycat/react-native-recaptcha-v3'
+import ReactNativeHapticFeedback from "react-native-haptic-feedback";
 
 import {
 	SignupForm as SignUpController,
@@ -164,6 +165,14 @@ const SignupFormUI = (props: SignupParams) => {
 		})
 	}
 
+	const vibrateApp = (impact?: string) => {
+		const options = {
+			enableVibrateFallback: true,
+			ignoreAndroidSystemSettings: false
+		};
+		ReactNativeHapticFeedback.trigger(impact || "impactLight", options);
+	}
+
 	const handleRefs = (ref: any, code: string) => {
 		switch (code) {
 			case 'name': {
@@ -246,7 +255,7 @@ const SignupFormUI = (props: SignupParams) => {
 	const onSubmit = (values?: any) => {
 		if (phoneInputData.error && signUpTab !== 'otpEmail') {
 			showToast(ToastType.Error, phoneInputData.error);
-			Vibration.vibrate()
+			vibrateApp()
 			return;
 		}
 		if (
@@ -264,7 +273,7 @@ const SignupFormUI = (props: SignupParams) => {
 					'The field Mobile phone is required.',
 				),
 			);
-			Vibration.vibrate()
+			vibrateApp()
 			return;
 		}
 		if (signUpTab === 'otpEmail' || signUpTab === 'otpCellphone') {
@@ -323,7 +332,7 @@ const SignupFormUI = (props: SignupParams) => {
 	};
 
 	const handleChangeInputEmail = (value: string, onChange: any) => {
-		onChange(value.toLowerCase().replace(/[&,()%";:ç?<>{}\\[\]\s]/g, ''));
+		onChange(value.toLowerCase().trim().replace(/[&,()%";:ç?<>{}\\[\]\s]/g, ''));
 	};
 
 	const handleOpenTermsUrl = async (url: any) => {
@@ -333,7 +342,7 @@ const SignupFormUI = (props: SignupParams) => {
 			await Linking.openURL(url);
 		} else {
 			showToast(ToastType.Error, t('VALIDATION_ERROR_ACTIVE_URL', 'The _attribute_ is not a valid URL.').replace('_attribute_', t('URL', 'URL')))
-			Vibration.vibrate()
+			vibrateApp()
 		}
 	}
 
@@ -341,12 +350,12 @@ const SignupFormUI = (props: SignupParams) => {
 		setRecaptchaVerified(false)
 		if (!recaptchaConfig?.siteKey) {
 			showToast(ToastType.Error, t('NO_RECAPTCHA_SITE_KEY', 'The config doesn\'t have recaptcha site key'));
-			Vibration.vibrate()
+			vibrateApp()
 			return
 		}
 		if (!recaptchaConfig?.baseUrl) {
 			showToast(ToastType.Error, t('NO_RECAPTCHA_BASE_URL', 'The config doesn\'t have recaptcha base url'));
-			Vibration.vibrate()
+			vibrateApp()
 			return
 		}
 		recaptchaRef.current.open()
@@ -390,11 +399,13 @@ const SignupFormUI = (props: SignupParams) => {
 					baseUrl: configs?.security_recaptcha_base_url?.value || null
 				})
 				showToast(ToastType.Info, t('TRY_AGAIN', 'Please try again'))
-				Vibration.vibrate()
+				vibrateApp()
 				return
 			}
-			formState.result?.result && showToast(ToastType.Error, formState.result?.result[0]);
-			formState.result?.result && Vibration.vibrate()
+			formState.result?.result && formState.result?.result[0]?.includes("_") ?
+				showToast(ToastType.Error, t(`${formState.result?.result[0]}`, 'Phone number already used')) :
+				showToast(ToastType.Error, formState.result?.result[0])
+			formState.result?.result && vibrateApp()
 			setIsLoadingVerifyModal(false);
 		}
 	}, [formState]);
@@ -402,7 +413,7 @@ const SignupFormUI = (props: SignupParams) => {
 	useEffect(() => {
 		if (Object.keys(errors).length > 0) {
 			setIsLoadingVerifyModal(false);
-			Vibration.vibrate()
+			vibrateApp()
 		}
 	}, [errors])
 
@@ -431,7 +442,7 @@ const SignupFormUI = (props: SignupParams) => {
 						? verifyPhoneState?.result?.result
 						: verifyPhoneState?.result?.result[0];
 				verifyPhoneState.result?.result && showToast(ToastType.Error, message);
-				verifyPhoneState.result?.result && Vibration.vibrate()
+				verifyPhoneState.result?.result && vibrateApp()
 				setIsLoadingVerifyModal(false);
 				return;
 			}
@@ -591,7 +602,7 @@ const SignupFormUI = (props: SignupParams) => {
 												control={control}
 												render={({ onChange, value }: any) => (
 													<OInput
-														placeholder={t(field.name)}
+														placeholder={t(field.name?.replace(/\s/g, '_')?.toUpperCase(), field.name)}
 														style={style.inputStyle}
 														icon={
 															field.code === 'email'
@@ -930,7 +941,7 @@ const SignupFormUI = (props: SignupParams) => {
 										(
 											<FacebookLogin
 												notificationState={notificationState}
-												handleErrors={(err: any) => { showToast(ToastType.Error, err), Vibration.vibrate() }}
+												handleErrors={(err: any) => { showToast(ToastType.Error, err), vibrateApp() }}
 												handleLoading={(val: boolean) => setIsFBLoading(val)}
 												handleSuccessFacebookLogin={handleSuccessFacebook}
 											/>
@@ -939,7 +950,7 @@ const SignupFormUI = (props: SignupParams) => {
 										<GoogleLogin
 											notificationState={notificationState}
 											webClientId={configs?.google_login_client_id?.value}
-											handleErrors={(err: any) => { showToast(ToastType.Error, err), Vibration.vibrate() }}
+											handleErrors={(err: any) => { showToast(ToastType.Error, err), vibrateApp() }}
 											handleLoading={(val: boolean) => setIsFBLoading(val)}
 											handleSuccessGoogleLogin={handleSuccessFacebook}
 										/>
@@ -947,7 +958,7 @@ const SignupFormUI = (props: SignupParams) => {
 									{(configs?.apple_login_client_id?.value !== '' && configs?.apple_login_client_id?.value !== null) && appleLoginEnabled && (
 										<AppleLogin
 											notificationState={notificationState}
-											handleErrors={(err: any) => { showToast(ToastType.Error, err), Vibration.vibrate() }}
+											handleErrors={(err: any) => { showToast(ToastType.Error, err), vibrateApp() }}
 											handleLoading={(val: boolean) => setIsFBLoading(val)}
 											handleSuccessAppleLogin={handleSuccessFacebook}
 										/>