ordering-ui-react-native 0.22.76 → 0.22.77-release

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

@@ -3,7 +3,8 @@ import {
   SingleOrderCard as SingleOrderCardController,
   useUtils,
   useOrder,
-  useLanguage
+  useLanguage,
+  useConfig
 } from 'ordering-components/native';
 import FastImage from 'react-native-fast-image'
 import { StyleSheet, TouchableOpacity, View } from 'react-native';
@@ -45,6 +46,7 @@ const SingleOrderCardUI = (props: SingleOrderCardParams) => {
   const [{ parsePrice, optimizeImage, parseDate }] = useUtils();
   const [, t] = useLanguage();
   const [{ carts }] = useOrder()
+  const [{ configs }] = useConfig()
   const theme = useTheme();
   const isFocused = useIsFocused();
 
@@ -54,6 +56,7 @@ const SingleOrderCardUI = (props: SingleOrderCardParams) => {
 
   const allowedOrderStatus = [1, 2, 5, 6, 10, 11, 12, 15];
   const isGiftCardOrder = !order?.business_id
+  const changeIdToExternalId = configs?.change_order_id?.value === '1'
 
   const styles = StyleSheet.create({
     container: {
@@ -284,7 +287,7 @@ const SingleOrderCardUI = (props: SingleOrderCardParams) => {
                   ) : (
                     <Price>
                       <OText size={12} lineHeight={18}>
-                        {parsePrice(order?.total)}
+                        {parsePrice(order?.summary?.total ?? order?.total)}
                       </OText>
                     </Price>
                   )}
@@ -333,7 +336,7 @@ const SingleOrderCardUI = (props: SingleOrderCardParams) => {
                         lineHeight={15}
                         numberOfLines={1}
                       >
-                        {order?.business?.length > 1 ? order?.business?.length : (t('ORDER_NO', 'Order No') + '.')}
+                        {order?.business?.length > 1 ? order?.business?.length : !(changeIdToExternalId && order?.external_id) && (t('ORDER_NO', 'Order No') + '.')}
                       </OText>
                       <OText
                         size={10}
@@ -342,7 +345,7 @@ const SingleOrderCardUI = (props: SingleOrderCardParams) => {
                         lineHeight={15}
                         numberOfLines={1}
                       >
-                        {order?.business?.length > 1 ? t('ORDERS', 'orders') + ' \u2022 ' : order.id + ` \u2022 `}
+                        {order?.business?.length > 1 ? t('ORDERS', 'orders') + ' \u2022 ' : ((changeIdToExternalId && order?.external_id) || order.id) + ` \u2022 `}
                       </OText>
                     </>
                   )}
@@ -367,7 +370,7 @@ const SingleOrderCardUI = (props: SingleOrderCardParams) => {
                     size={10}
                     lineHeight={15}
                     numberOfLines={1}>
-                    {getOrderStatus(order.status)?.value}
+                    {getOrderStatus(order.status, t)?.value}
                   </OText>
                 )}
               </View>

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

@@ -54,6 +54,7 @@ const SingleProductCardUI = React.memo((props: SingleProductCardParams) => {
 		: theme?.business_view?.components?.products?.components?.product?.components?.image?.hidden
 	const textSize = isChewLayout ? 12 : 10
 	const logoPosition = theme?.business_view?.components?.products?.components?.product?.components?.image?.position
+	const hideFavoriteIcon = theme?.business_view?.components?.products?.components?.product?.components?.favorite?.hidden
 
 	const styles = StyleSheet.create({
 		container: {
@@ -198,7 +199,7 @@ const SingleProductCardUI = React.memo((props: SingleProductCardParams) => {
 									style={{ ...styles.line18, flex: 1 }}>
 									{product?.name}
 								</OText>
-								{!isPreviously && (
+								{!isPreviously && !hideFavoriteIcon && (
 									<LottieAnimation
 										type='favorite'
 										onClick={handleChangeFavorite}

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

@@ -49,15 +49,12 @@ export const RibbonBox = styled.View`
   background-color: ${(props: any) => props.theme.colors.primary};
   padding: 1px 8px;
   max-width: 60px;
-
   ${(props: any) => props.bgColor && css`
     background-color: ${props.bgColor};
   `}
-
   ${(props: any) => props.isRoundRect && css`
     border-radius: 7.6px;
   `}
-
   ${(props: any) => props.isCapsule && css`
     border-radius: 50px;
   `}

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

@@ -32,7 +32,8 @@ export const StripeCardsListUI = (props: any) => {
 		gateway,
 		paySelected,
 		newCardAdded,
-		addNewCardAsDefault
+		addNewCardAsDefault,
+		setUserHasCards
 	} = props;
 
 	const theme = useTheme();
@@ -62,6 +63,11 @@ export const StripeCardsListUI = (props: any) => {
 		}
 	}, [JSON.stringify(newCardAdded)])
 
+	useEffect(() => {
+		const hasCardSelected = cardsList?.cards?.some?.((card : any) => card?.id === paySelected?.data?.id)
+		setUserHasCards && setUserHasCards(cardsList?.cards?.length > 0 && hasCardSelected)
+	}, [cardsList?.cards?.length, paySelected])
+
 	return (
 		<>
 			{token && !cardsList.loading && cardsList.cards && cardsList.cards.length === 0 && (

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

@@ -35,7 +35,7 @@ const StripeElementsFormUI = (props: any) => {
 		setPlaceByMethodPay,
 		cartTotal,
 		publicKeyAddCard,
-		urlScheme,
+		urlscheme,
 		androidAppId,
 		businessNames,
 		setNewCardAdded
@@ -218,7 +218,7 @@ const StripeElementsFormUI = (props: any) => {
 							<StripeProvider
 								publishableKey={isToSave}
 								merchantIdentifier={merchantId}
-								urlScheme={`${urlScheme}://checkout/${cart?.uuid}`}
+								urlscheme={`${urlscheme}://checkout/${cart?.uuid}`}
 							>
 								{methodsPay?.includes(paymethod) ? (
 									<StripeMethodForm

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

@@ -14,7 +14,8 @@ interface taxInformationParams {
     percentage?: number,
     id: number,
     discounts?: any,
-    rate_type?: number
+    rate_type?: number,
+    target?: string
   },
   products: Array<any>,
   type: string
@@ -34,7 +35,7 @@ export const TaxInformation = (props: taxInformationParams) => {
   const offersHideArray = ['offer_target_2', 'offer_target_3']
   const hideProductsSectionOffers = offersHideArray.includes(type)
   const dataHideArray : Array<string | number> = ['platform', 'business']
-  const hideProductsSectionData = dataHideArray.includes(data.type)
+  const hideProductsSectionData = dataHideArray.includes(data.type) || data?.target === 'delivery_fee'
 
   const getFilterValidation = (product: any) => {
     return (

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

@@ -35,7 +35,8 @@ const UserDetailsUI = (props: any) => {
 		handleSendVerifyCode,
 		verifyPhoneState,
 		setFormState,
-		setIsOpen
+		setIsOpen,
+		isCheckoutPlace
 	} = props
 
 	const theme = useTheme();
@@ -95,23 +96,23 @@ const UserDetailsUI = (props: any) => {
 				},
 			});
 			handleSendVerifyCode({
-			  cellphone: cellphone,
-			  country_phone_code: countryPhoneCode
+				cellphone: cellphone,
+				country_phone_code: countryPhoneCode
 			})
 		}
 	}
 
 	const handleSendPhoneCode = (values: any) => {
-    setWillVerifyOtpState(false)
+		setWillVerifyOtpState(false)
 		setIsModalVisible(false)
-    setFormState({
-      ...formState,
-      changes: {
-        ...formState?.changes,
-        verification_code: values?.code
-      }
-    })
-  }
+		setFormState({
+			...formState,
+			changes: {
+				...formState?.changes,
+				verification_code: values?.code
+			}
+		})
+	}
 
 	useEffect(() => {
 		if (willVerifyOtpState) handleVerifyCodeClick()
@@ -158,7 +159,7 @@ const UserDetailsUI = (props: any) => {
 								{t('CUSTOMER_DETAILS', 'Customer Details')}
 							</OText>
 						)}
-						{cartStatus !== 2 && !requiredFields && (
+						{cartStatus !== 2 && !isCheckoutPlace && (
 							!isEdit ? (
 								<EditBtn onPress={() => toggleIsEdit()} activeOpacity={0.7}>
 									<OIcon
@@ -189,12 +190,12 @@ const UserDetailsUI = (props: any) => {
 								{userData?.name} {userData?.middle_name} {userData?.lastname} {userData?.second_lastname}
 							</OText>
 							<OText size={12} lineHeight={18} weight={'400'}>
-								{userData?.email}
+								{userData?.guest_id ? userData?.guest_email : userData?.email}
 							</OText>
-							{!!(userData?.cellphone || user?.cellphone) && (
+							{!!((userData?.cellphone ?? userData?.guest_cellphone) || (user?.cellphone ?? user?.guest_cellphone)) && (
 								<>
 									<OText size={12} lineHeight={18} weight={'400'}>
-										{(userData?.country_phone_code) && `+${(userData?.country_phone_code)} `}{(userData?.cellphone)}
+										{(userData?.country_phone_code) && `+${(userData?.country_phone_code)} `}{(userData?.guest_id ? user?.guest_cellphone : userData?.cellphone)}
 									</OText>
 									{!!phoneUpdate && (
 										<OText color={theme.colors.error} style={{ textAlign: 'center' }}>{t('NECESSARY_UPDATE_COUNTRY_PHONE_CODE', 'It is necessary to update your phone number')}</OText>

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

@@ -16,6 +16,8 @@ import { ListItem } from '../UserProfile/styles';
 import moment from 'moment';
 import { DatePickerUI } from '../DatePicker';
 
+const CONDITIONAL_CODES = ['PR']
+
 export const UserFormDetailsUI = (props: any) => {
 	const {
 		isEdit,
@@ -38,7 +40,13 @@ export const UserFormDetailsUI = (props: any) => {
 		handleRemoveAccount,
 		isProfile,
 		isGuest,
-		orderTypeValidationFields
+		isOrderTypeValidationField,
+		checkoutFields,
+		isCheckoutPlace,
+		setCellphoneStartZero,
+		setPhoneState,
+		isPhoneVerifyRequired,
+		cellphoneOtpSent
 	} = props;
 
 	const theme = useTheme();
@@ -80,7 +88,7 @@ export const UserFormDetailsUI = (props: any) => {
 	const [, { showToast }] = useToast();
 	const { handleSubmit, control, errors, setValue } = useForm();
 
-	const [{ user }, { login }] = useSession();
+	const [{ user }, { login, logout }] = useSession();
 	const [userPhoneNumber, setUserPhoneNumber] = useState<any>(null);
 	const [isValid, setIsValid] = useState(false)
 	const [isChanged, setIsChanged] = useState(false)
@@ -97,8 +105,8 @@ export const UserFormDetailsUI = (props: any) => {
 	const [confirm, setConfirm] = useState<any>({ open: false, content: null, handleOnAccept: null, id: null, title: null })
 
 	const isAdmin = user?.level === 0
-	const showInputPhoneNumber = (validationFields?.fields?.checkout?.cellphone?.enabled ?? false) || configs?.verification_phone_required?.value === '1'
-	const showInputBirthday = validationFields?.fields?.checkout?.birthdate?.enabled ?? false
+	const showInputPhoneNumber = isOrderTypeValidationField ? checkoutFields?.find(field => field?.validation_field?.code === 'mobile_phone')?.enabled : (validationFields?.fields?.checkout?.cellphone?.enabled ?? false)
+	const showInputBirthday = isOrderTypeValidationField ? checkoutFields?.find(field => field?.validation_field?.code === 'birthdate')?.enabled : (validationFields?.fields?.checkout?.birthdate?.enabled ?? false)
 
 	const handleSuccessSignup = (user: any) => {
 		login({
@@ -129,15 +137,27 @@ export const UserFormDetailsUI = (props: any) => {
 		return rules;
 	};
 
+	const cellphoneValue = () => {
+		let cellphone = user?.guest_id ? user?.guest_cellphone : user?.cellphone
+		if (cellphone && CONDITIONAL_CODES.includes(user?.country_code)) {
+			if (user?.country_code === 'PR') {
+				cellphone = user?.cellphone?.slice(3)
+			}
+		}
+		return cellphone
+	}
+
 	const setUserCellPhone = (isEdit = false) => {
 		if (userPhoneNumber && !userPhoneNumber.includes('null') && !isEdit) {
 			setUserPhoneNumber(userPhoneNumber);
 			return;
 		}
-		if (user?.cellphone) {
+		const cellphone = user?.guest_id ? user?.guest_cellphone : user?.cellphone
+
+		if (cellphone) {
 			let phone = null;
 			if (user?.country_phone_code) {
-				phone = `+${user?.country_phone_code} ${user?.cellphone}`;
+				phone = `+${user?.country_phone_code} ${cellphone}`;
 			} else {
 				phone = user?.cellphone;
 			}
@@ -146,17 +166,22 @@ export const UserFormDetailsUI = (props: any) => {
 				...phoneInputData,
 				phone: {
 					country_phone_code: user?.country_phone_code || null,
-					cellphone: user?.cellphone || null,
+					cellphone: cellphoneValue()
 				},
 			});
 			return;
 		}
-		setUserPhoneNumber(user?.cellphone || '');
+		setUserPhoneNumber(cellphone || '');
 	};
 
 	const onSubmit = () => {
+		let content = ''
+		if (requiredFields?.includes?.('birthdate') && !birthdate) {
+			content = content + `${t('VALIDATION_ERROR_BIRTHDATE_REQUIRED', 'Birthdate is required')}\n`
+		}
 		if (phoneInputData.error) {
-			showToast(ToastType.Error, phoneInputData.error);
+			content = content + `${phoneInputData.error}\n`
+			showToast(ToastType.Error, content);
 			return;
 		}
 		if (Object.keys(formState.changes).length > 0) {
@@ -164,17 +189,16 @@ export const UserFormDetailsUI = (props: any) => {
 				formState.changes?.cellphone === null &&
 				((validationFields?.fields?.checkout?.cellphone?.enabled &&
 					validationFields?.fields?.checkout?.cellphone?.required) ||
-					configs?.verification_phone_required?.value === '1')
+					(configs?.verification_phone_required?.value === '1' && !user?.guest_id))
 			) {
-				showToast(
-					ToastType.Error,
-					t(
-						'VALIDATION_ERROR_MOBILE_PHONE_REQUIRED',
-						'The field Phone Number is required.',
-					),
-				);
+				content = content + `${t('VALIDATION_ERROR_MOBILE_PHONE_REQUIRED', 'The field Phone Number is required.',)}\n`
+				showToast(ToastType.Error, content);
 				return;
 			}
+			if (content.length > 0) {
+				showToast(ToastType.Error, content);
+				return
+			}
 			let changes = null;
 			if (user?.cellphone && !userPhoneNumber) {
 				changes = {
@@ -187,7 +211,7 @@ export const UserFormDetailsUI = (props: any) => {
 		}
 	};
 
-	const handleChangePhoneNumber = (number: any) => {
+	const handleChangePhoneNumber = (number: any, rawNumber : any) => {
 		setPhoneInputData(number);
 		setIsChanged(true)
 		let phoneNumber = {
@@ -200,6 +224,7 @@ export const UserFormDetailsUI = (props: any) => {
 				value: number.phone.cellphone,
 			},
 		};
+		setCellphoneStartZero && setCellphoneStartZero(rawNumber?.number && rawNumber?.countryCallingCode ? rawNumber?.number : null)
 		handleChangeInput(phoneNumber, true);
 	};
 
@@ -225,9 +250,12 @@ export const UserFormDetailsUI = (props: any) => {
 			open: true,
 			content: [t('QUESTION_REMOVE_ACCOUNT', 'Are you sure that you want to remove your account?')],
 			title: t('ACCOUNT_ALERT', 'Account alert'),
-			handleOnAccept: () => {
+			handleOnAccept: async () => {
 				setConfirm({ ...confirm, open: false })
-				handleRemoveAccount && handleRemoveAccount(user?.id)
+				const response = await handleRemoveAccount?.(user?.id)
+				if (response === 'OK'){
+					logout()
+				}
 			}
 		})
 	}
@@ -296,20 +324,29 @@ export const UserFormDetailsUI = (props: any) => {
 		setIsValid(_isValid)
 	}, [formState?.changes, requiredFields])
 
+	useEffect(() => {
+		if (!isPhoneVerifyRequired || cellphoneOtpSent || formState?.changes?.length === 0) return
+		setPhoneState?.({
+      cellphone: formState?.changes?.country_code === "PR" ? formState?.changes?.cellphone.replace('787', '') : formState?.changes?.cellphone,
+      country_phone_code: formState?.changes?.country_code === "PR" ? '1787' : formState?.changes?.country_phone_code,
+      formatted: `+${formState?.changes?.country_phone_code} ${formState?.changes?.cellphone}`
+    })
+	}, [formState?.changes, cellphoneOtpSent])
+
 	return (
 		<>
 			<UDForm>
 				{!validationFields?.loading &&
-					sortInputFields({ values: isGuest ? orderTypeValidationFields : validationFields?.fields?.checkout })
+					sortInputFields({ values: isOrderTypeValidationField ? checkoutFields : validationFields?.fields?.checkout })
 						.length > 0 && (
 						<UDWrapper>
 							{sortInputFields({
-								values: isGuest ? orderTypeValidationFields : validationFields?.fields?.checkout,
+								values: isOrderTypeValidationField ? checkoutFields : validationFields?.fields?.checkout,
 							}).map(
 								(item: any) => {
 									const field = item?.validation_field || item
 									return (
-										(isGuest ? item?.enabled : showField && showField(field.code)) && ((requiredFields && requiredFields?.includes?.(field.code)) || !requiredFields) && (
+										((isOrderTypeValidationField ? item?.enabled : (showField && showField(field.code))) && ((requiredFields && requiredFields?.includes?.(field.code)) || !requiredFields || !isCheckoutPlace)) && (
 											<React.Fragment key={field.id}>
 												<Controller
 													key={field.id}
@@ -333,7 +370,7 @@ export const UserFormDetailsUI = (props: any) => {
 																isDisabled={false}
 																value={
 																	formState?.changes[field.code] ??
-																	(user && user[field.code]) ??
+																	(user && user?.guest_id && field.code === 'email' ? user?.guest_email : user?.[field.code]) ??
 																	''
 																}
 																onChange={(val: any) => {
@@ -377,52 +414,58 @@ export const UserFormDetailsUI = (props: any) => {
 													)}
 													name={field.code}
 													rules={getInputRules(field)}
-													defaultValue={user && user[field.code]}
+													defaultValue={user && (field.code === 'email' && user?.guest_id ? user?.guest_email : user?.[field.code])}
 												/>
 											</React.Fragment>
 										))
 								},
 							)}
-							{showInputBirthday && ((requiredFields && requiredFields?.includes?.('birthdate')) || !requiredFields) && (
-								<>
-									<WrapperBirthdate>
-										<OText size={14} lineHeight={21} color={theme.colors.textNormal} weight={'500'} style={{ textTransform: 'capitalize', alignSelf: 'flex-start' }}>
-											{t('BIRTHDATE', 'Birthdate')}
-										</OText>
-										<TouchableOpacity onPress={() => setShowDatePicker(!showDatePicker)}>
-											<OText size={14} lineHeight={21} color={theme.colors.textNormal} weight={'500'} style={{ marginTop: 6 }}>
-												{birthdate ? moment(birthdate).format('YYYY-MM-DD') : ''}
+							{((!user?.guest_id && showInputBirthday) || (isOrderTypeValidationField || user?.guest_id)) &&
+								showInputBirthday &&
+								((requiredFields && requiredFields?.includes?.('birthdate')) || !requiredFields || !isCheckoutPlace) &&
+								(
+									<>
+										<WrapperBirthdate>
+											<OText size={14} lineHeight={21} color={theme.colors.textNormal} weight={'500'} style={{ textTransform: 'capitalize', alignSelf: 'flex-start' }}>
+												{t('BIRTHDATE', 'Birthdate')}
 											</OText>
-										</TouchableOpacity>
-									</WrapperBirthdate>
-									<DatePickerUI open={showDatePicker} birthdate={birthdate} onConfirm={_handleChangeDate} onCancel={() => setShowDatePicker(false)} />
-								</>
-							)}
-							{!!showInputPhoneNumber && ((requiredFields && requiredFields?.includes?.('cellphone')) || !requiredFields) && (
-								<WrapperPhone>
-									<OText size={14} lineHeight={21} weight={'500'} color={theme.colors.textNormal}>{t('PHONE', 'Phone')}</OText>
-									<PhoneInputNumber
-										data={phoneInputData}
-										handleData={(val: any) => handleChangePhoneNumber(val)}
-										changeCountry={(val: any) => changeCountry(val)}
-										defaultValue={phoneUpdate ? '' : user?.cellphone}
-										defaultCode={user?.country_code ?? user?.country_phone_code ?? null}
-										boxStyle={styles.phoneSelect}
-										inputStyle={styles.phoneInputStyle}
-										textStyle={{ color: theme.colors.textNormal, fontSize: 12, padding: 0 }}
-										noDropIcon
-									/>
-									{phoneUpdate && (
-										<OText
-											size={10}
-											color={theme.colors.error}
-											style={{ marginHorizontal: 10, textAlign: 'center' }}>
-											{t('YOUR_PREVIOUS_CELLPHONE', 'Your previous cellphone')}:{' '}
-											{user?.cellphone}
-										</OText>
-									)}
-								</WrapperPhone>
-							)}
+											<TouchableOpacity onPress={() => setShowDatePicker(!showDatePicker)}>
+												<OText size={14} lineHeight={21} color={theme.colors.textNormal} weight={'500'} style={{ marginTop: 6 }}>
+													{birthdate ? moment(birthdate).format('YYYY-MM-DD') : ''}
+												</OText>
+											</TouchableOpacity>
+										</WrapperBirthdate>
+										<DatePickerUI open={showDatePicker} birthdate={birthdate} onConfirm={_handleChangeDate} onCancel={() => setShowDatePicker(false)} />
+									</>
+								)}
+							{((!user?.guest_id && !!showInputPhoneNumber) || (isOrderTypeValidationField || user?.guest_id)) &&
+								((requiredFields && requiredFields?.includes?.('cellphone')) || !requiredFields || !isCheckoutPlace) &&
+								(
+									<WrapperPhone>
+										<OText size={14} lineHeight={21} weight={'500'} color={theme.colors.textNormal}>{t('PHONE', 'Phone')}</OText>
+										<PhoneInputNumber
+											data={phoneInputData}
+											handleData={handleChangePhoneNumber}
+											changeCountry={(val: any) => changeCountry(val)}
+											defaultValue={phoneUpdate ? '' : cellphoneValue()}
+											defaultCode={user?.country_code ?? user?.country_phone_code ?? null}
+											defaultCodeFallback={user?.country_phone_code}
+											boxStyle={styles.phoneSelect}
+											inputStyle={styles.phoneInputStyle}
+											textStyle={{ color: theme.colors.textNormal, fontSize: 12, padding: 0 }}
+											noDropIcon
+										/>
+										{phoneUpdate && (
+											<OText
+												size={10}
+												color={theme.colors.error}
+												style={{ marginHorizontal: 10, textAlign: 'center' }}>
+												{t('YOUR_PREVIOUS_CELLPHONE', 'Your previous cellphone')}:{' '}
+												{cellphoneValue()}
+											</OText>
+										)}
+									</WrapperPhone>
+								)}
 							{!requiredFields && (
 								<Controller
 									control={control}
@@ -474,7 +517,7 @@ export const UserFormDetailsUI = (props: any) => {
 					</UDLoader>
 				)}
 			</UDForm>
-			{!hideUpdateButton && (
+			{!hideUpdateButton && !isPhoneVerifyRequired && (
 				<>
 					{((formState &&
 						Object.keys(formState?.changes).length > 0 &&
@@ -495,7 +538,7 @@ export const UserFormDetailsUI = (props: any) => {
 						)}
 				</>
 			)}
-			{requiredFields && (
+			{isCheckoutPlace && (
 				<OButton
 					text={
 						formState.loading
@@ -554,4 +597,3 @@ export const UserFormDetailsUI = (props: any) => {
 		</>
 	);
 };
-