ordering-ui-react-native 0.12.54 → 0.12.58

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

@@ -1,351 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { StyleSheet, View } from 'react-native';
-import { useSession, useLanguage, ToastType, useToast } from 'ordering-components/native';
-import { useTheme } from 'styled-components/native';
-import { useForm, Controller } from 'react-hook-form';
-
-import { UDForm, UDLoader, UDWrapper, WrapperPhone } from './styles';
-
-import { OText, OButton, OInput } from '../shared';
-
-import { PhoneInputNumber } from '../PhoneInputNumber';
-import { sortInputFields } from '../../utils';
-
-export const UserFormDetailsUI = (props: any) => {
-	const {
-		isEdit,
-		formState,
-		showField,
-		cleanFormState,
-		onCloseProfile,
-		isRequiredField,
-		validationFields,
-		handleChangeInput,
-		handleButtonUpdateClick,
-		phoneUpdate,
-		hideUpdateButton,
-	} = props;
-
-	const theme = useTheme();
-
-
-	const styles = StyleSheet.create({
-		btnOutline: {
-			backgroundColor: '#FFF',
-			color: theme.colors.primary,
-		},
-		inputStyle: {
-			borderRadius: 0,
-			marginBottom: 25,
-			borderBottomWidth: 1,
-			borderBottomColor: theme.colors.border,
-			color: theme.colors.textNormal,
-			fontSize: 12,
-			padding: 0,
-		},
-		phoneSelect: {
-			borderWidth: 0,
-			marginStart: -5,
-			marginEnd: 0,
-			marginTop: -3,
-			height: 32,
-			width: 44
-		},
-		phoneInputStyle: {
-			height: 30,
-			borderWidth: 0,
-			fontSize: 12,
-			paddingStart: 0,
-			paddingBottom: 0,
-			marginBottom: -0,
-		}
-	});
-
-	const [, t] = useLanguage();
-	const [, { showToast }] = useToast();
-	const { handleSubmit, control, errors, setValue } = useForm();
-
-	const [{ user }] = useSession();
-	const [userPhoneNumber, setUserPhoneNumber] = useState<any>(null);
-	const [phoneInputData, setPhoneInputData] = useState({
-		error: '',
-		phone: {
-			country_phone_code: null,
-			cellphone: null,
-		},
-	});
-
-	const showInputPhoneNumber =
-		validationFields?.fields?.checkout?.cellphone?.enabled ?? false;
-
-	const getInputRules = (field: any) => {
-		const rules: any = {
-			required: isRequiredField(field.code)
-				? t(
-					`VALIDATION_ERROR_${field.code.toUpperCase()}_REQUIRED`,
-					`${field.name} is required`,
-				).replace('_attribute_', t(field.name, field.code))
-				: null,
-		};
-		if (field.code && field.code === 'email') {
-			rules.pattern = {
-				value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
-				message: t('INVALID_ERROR_EMAIL', 'Invalid email address').replace(
-					'_attribute_',
-					t('EMAIL', 'Email'),
-				),
-			};
-		}
-		return rules;
-	};
-
-	const setUserCellPhone = (isEdit = false) => {
-		if (userPhoneNumber && !userPhoneNumber.includes('null') && !isEdit) {
-			setUserPhoneNumber(userPhoneNumber);
-			return;
-		}
-		if (user?.cellphone) {
-			let phone = null;
-			if (user?.country_phone_code) {
-				phone = `+${user?.country_phone_code} ${user?.cellphone}`;
-			} else {
-				phone = user?.cellphone;
-			}
-			setUserPhoneNumber(phone);
-			setPhoneInputData({
-				...phoneInputData,
-				phone: {
-					country_phone_code: user?.country_phone_code || null,
-					cellphone: user?.cellphone || null,
-				},
-			});
-			return;
-		}
-		setUserPhoneNumber(user?.cellphone || '');
-	};
-
-	const onSubmit = () => {
-		if (phoneInputData.error) {
-			showToast(ToastType.Error, phoneInputData.error);
-			return;
-		}
-		if (Object.keys(formState.changes).length > 0) {
-			if (
-				formState.changes?.cellphone === null &&
-				validationFields?.fields?.checkout?.cellphone?.enabled &&
-				validationFields?.fields?.checkout?.cellphone?.required
-			) {
-				showToast(
-					ToastType.Error,
-					t(
-						'VALIDATION_ERROR_MOBILE_PHONE_REQUIRED',
-						'The field Phone Number is required.',
-					),
-				);
-				return;
-			}
-			let changes = null;
-			if (user?.cellphone && !userPhoneNumber) {
-				changes = {
-					country_phone_code: '',
-					cellphone: '',
-				};
-			}
-			handleButtonUpdateClick(changes);
-		}
-	};
-
-	const handleChangePhoneNumber = (number: any) => {
-		setPhoneInputData(number);
-		let phoneNumber = {
-			country_phone_code: {
-				name: 'country_phone_code',
-				value: number.phone.country_phone_code,
-			},
-			cellphone: {
-				name: 'cellphone',
-				value: number.phone.cellphone,
-			},
-		};
-		handleChangeInput(phoneNumber, true);
-	};
-
-	useEffect(() => {
-		if (Object.keys(errors).length > 0) {
-			const list = Object.values(errors);
-			if (phoneInputData.error) {
-				list.push({ message: phoneInputData.error });
-			}
-			let stringError = '';
-			list.map((item: any, i: number) => {
-				stringError +=
-					i + 1 === list.length ? `- ${item.message}` : `- ${item.message}\n`;
-			});
-			showToast(ToastType.Error, stringError);
-		}
-	}, [errors]);
-
-	useEffect(() => {
-		if (!formState?.loading && formState?.result?.error) {
-			formState.result?.result &&
-				showToast(ToastType.Error, formState.result?.result[0]);
-		}
-	}, [formState?.loading]);
-
-	useEffect(() => {
-		if (!isEdit && onCloseProfile) {
-			onCloseProfile();
-		}
-		if ((user || !isEdit) && !formState?.loading) {
-			setUserCellPhone();
-			if (!isEdit && !formState?.loading) {
-				cleanFormState && cleanFormState({ changes: {} });
-				setUserCellPhone(true);
-			}
-		}
-	}, [user, isEdit]);
-	return (
-		<>
-			<UDForm>
-				{!validationFields?.loading &&
-					sortInputFields({ values: validationFields?.fields?.checkout })
-						.length > 0 && (
-						<UDWrapper>
-							{sortInputFields({
-								values: validationFields.fields?.checkout,
-							}).map(
-								(field: any) =>
-									showField &&
-									showField(field.code) && (
-										<React.Fragment key={field.id}>
-											<Controller
-												key={field.id}
-												control={control}
-												render={() => (
-													<>
-														<OText size={14} lineHeight={21} color={theme.colors.textNormal} weight={'500'} style={{ textTransform: 'capitalize', alignSelf: 'flex-start' }}>
-															{field?.code}
-														</OText>
-														<OInput
-															name={field.code}
-															placeholder={t(
-																field.code.toUpperCase(),
-																field?.name,
-															)}
-															inputStyle={styles.inputStyle}
-															style={{ paddingLeft: 0, paddingRight: 0, marginTop: 6, height: 44, minHeight: 44 }}
-															autoCapitalize={
-																field.code === 'email' ? 'none' : 'sentences'
-															}
-															isDisabled={false}
-															value={
-																formState?.changes[field.code] ??
-																(user && user[field.code]) ??
-																''
-															}
-															onChange={(val: any) => {
-																field.code !== 'email'
-																	? setValue(field.code, val.target.value)
-																	: setValue(
-																		field.code,
-																		val.target.value
-																			.toLowerCase()
-																			.replace(
-																				/[&,()%";:ç?<>{}\\[\]\s]/g,
-																				'',
-																			),
-																	);
-																field.code !== 'email'
-																	? handleChangeInput(val)
-																	: handleChangeInput({
-																		target: {
-																			name: 'email',
-																			value: val.target.value
-																				.toLowerCase()
-																				.replace(
-																					/[&,()%";:ç?<>{}\\[\]\s]/g,
-																					'',
-																				),
-																		},
-																	});
-															}}
-															autoCorrect={field.code === 'email' && false}
-															type={
-																field.code === 'email'
-																	? 'email-address'
-																	: 'default'
-															}
-															returnKeyType="done"
-															autoCompleteType={
-																field.code === 'email' ? 'email' : 'off'
-															}
-														/>
-													</>
-												)}
-												name={field.code}
-												rules={getInputRules(field)}
-												defaultValue={user && user[field.code]}
-											/>
-										</React.Fragment>
-									),
-							)}
-
-							{!!showInputPhoneNumber && (
-								<WrapperPhone>
-									<OText size={14} lineHeight={21} weight={'500'} color={theme.colors.textNormal}>{t('PHONE', 'Phone')}</OText>
-									<PhoneInputNumber
-										data={phoneInputData}
-										handleData={(val: any) => handleChangePhoneNumber(val)}
-										defaultValue={phoneUpdate ? '' : user?.cellphone}
-										defaultCode={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>
-							)}
-						</UDWrapper>
-					)}
-				{validationFields?.loading && (
-					<UDLoader>
-						<OText size={12}>{t('LOADING', 'Loading')}</OText>
-					</UDLoader>
-				)}
-			</UDForm>
-			{!hideUpdateButton && (
-				<>
-					{((formState &&
-						Object.keys(formState?.changes).length > 0 &&
-						isEdit) ||
-						formState?.loading) && (
-							<OButton
-								text={
-									formState.loading
-										? t('UPDATING', 'Updating...')
-										: t('UPDATE', 'Update')
-								}
-								bgColor={theme.colors.white}
-								textStyle={{ color: theme.colors.primary, fontSize: 14 }}
-								borderColor={theme.colors.primary}
-								isDisabled={formState.loading}
-								imgRightSrc={null}
-								style={{ borderRadius: 7.6, shadowOpacity: 0, width: '100%', borderWidth: 1, marginTop: 20 }}
-								onClick={handleSubmit(onSubmit)}
-							/>
-						)}
-				</>
-			)}
-		</>
-	);
-};
-

package/themes/franchises/src/components/UserFormDetails/styles.tsx

@@ -1,35 +0,0 @@
-import styled from 'styled-components/native';
-
-export const UDForm = styled.View`
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-  width: 100%;
-  margin-top: 20px;
-`
-
-export const UDWrapper = styled.View`
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-  width: 100%;
-  margin-top: 20px;
-  padding-bottom: 50px;
-`
-
-export const UDLoader = styled.View`
-  width: 100%;
-  justify-content: center;
-  height: auto;
-  display: inline-flex;
-  flex-wrap: wrap;
-  padding: 0;
-  margin-top: 0px;
-`
-
-export const WrapperPhone = styled.View`
-  margin-bottom: 25px;
-  width: 100%;
-  border-bottom-width: 1px;
-  border-bottom-color: ${(props: any) => props.theme.colors.border};
-`

package/themes/franchises/src/components/UserProfile/index.tsx

@@ -1,179 +0,0 @@
-import React, { useEffect } from 'react';
-import {
-	UserFormDetails as UserProfileController,
-	useSession,
-	useLanguage,
-	ToastType,
-	useToast,
-} from 'ordering-components/native';
-import { useTheme } from 'styled-components/native';
-import { useForm } from 'react-hook-form';
-import Spinner from 'react-native-loading-spinner-overlay';
-import { Platform, StyleSheet, TouchableOpacity, View } from 'react-native';
-import { ProfileParams } from '../../types';
-import { LogoutButton } from '../LogoutButton'
-import { LanguageSelector } from '../LanguageSelector'
-
-import {
-	OIcon,
-	OText,
-} from '../shared';
-import {
-	CenterView,
-	Actions,
-	ListWrap,
-	ListItem
-} from './styles';
-import { useWindowDimensions } from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
-
-const ProfileListUI = (props: ProfileParams) => {
-	const {
-		navigation,
-		formState
-	} = props;
-
-	const theme = useTheme();
-
-
-	const langPickerStyle = StyleSheet.create({
-		inputAndroid: {
-			color: theme.colors.textNormal,
-			fontSize: 14,
-			fontWeight: '500',
-			paddingEnd: 24,
-			paddingStart: 0,
-			height: 40,
-			borderWidth: 1,
-			borderColor: theme.colors.clear,
-			backgroundColor: theme.colors.clear
-		},
-		inputIOS: {
-			color: theme.colors.textNormal,
-			fontSize: 14,
-			fontWeight: '500',
-			paddingEnd: 24,
-			height: 40,
-			borderWidth: 1,
-			borderColor: theme.colors.clear,
-			backgroundColor: theme.colors.clear
-		},
-		icon: {
-			width: 12,
-			marginTop: 7,
-			marginEnd: 7
-		}
-	})
-
-	const styles = StyleSheet.create({
-		photo: {
-			borderRadius: 7.6,
-			shadowColor: '#000000',
-			shadowOffset: { width: 0, height: 1 },
-			shadowRadius: 2,
-			shadowOpacity: 0.2,
-			backgroundColor: theme.colors.white,
-			marginEnd: 14
-		},
-		pagePadding: {
-			paddingLeft: 40,
-			paddingRight: 40
-		}
-	});
-
-
-	const [{ user }] = useSession();
-	const [, t] = useLanguage();
-	const [, { showToast }] = useToast();
-	const { errors } = useForm();
-
-	const { height } = useWindowDimensions();
-	const { top, bottom } = useSafeAreaInsets();
-
-	const onRedirect = (route: string, params?: any) => {
-		navigation.navigate(route, params)
-	}
-
-	useEffect(() => {
-		if (formState.result.result && !formState.loading) {
-			if (formState.result?.error) {
-				showToast(ToastType.Error, formState.result.result);
-			} else {
-				showToast(ToastType.Success, t('UPDATE_SUCCESSFULLY', 'Update successfully'));
-			}
-		}
-	}, [formState.result])
-
-	useEffect(() => {
-		if (Object.keys(errors).length > 0) {
-			// Convert all errors in one string to show in toast provider
-			const list = Object.values(errors);
-			let stringError = '';
-			list.map((item: any, i: number) => {
-				stringError +=
-					i + 1 === list.length ? `- ${item.message}` : `- ${item.message}\n`;
-			});
-			showToast(ToastType.Error, stringError);
-		}
-	}, [errors]);
-
-	const detailProps = {
-
-		goToBack: () => props.navigation?.canGoBack() && props.navigation.goBack(),
-		onNavigationRedirect: (route: string, params: any) => props.navigation.navigate(route, params)
-	}
-
-	return (
-		<View style={{ flex: 1, height: height - top - bottom - 62 }}>
-			<OText size={24} color={theme.colors.textNormal} lineHeight={36} weight={Platform.OS === 'ios' ? '600' : 'bold'} style={{ marginTop: 14, marginBottom: 24, ...styles.pagePadding }}>{t('PROFILE', 'Profile')}</OText>
-			<CenterView style={styles.pagePadding}>
-				<View style={styles.photo}>
-					<OIcon
-						url={user?.photo}
-						src={!user?.photo && theme.images.general.user}
-						width={60}
-						height={60}
-					/>
-				</View>
-				<View style={{ flexBasis: '70%' }}>
-					<OText size={20} lineHeight={30} weight={Platform.OS === 'ios' ? '500' : 'bold'} color={theme.colors.textNormal}>{`${user?.name} ${user?.lastname}`}</OText>
-					<TouchableOpacity onPress={() => navigation.navigate('ProfileForm', { ...detailProps })}>
-						<OText size={12} lineHeight={18} color={theme.colors.primary} style={{ textDecorationLine: 'underline' }}>{t('VIEW_ACCOUNT', 'View account')}</OText>
-					</TouchableOpacity>
-				</View>
-			</CenterView>
-			<View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100, marginVertical: 32 }} />
-			<Spinner visible={formState?.loading} />
-			<ListWrap style={{ ...styles.pagePadding }}>
-				<Actions>
-					<ListItem onPress={() => onRedirect('AddressList', { isFromProfile: true, isGoBack: true })} activeOpacity={0.7}>
-						<OIcon src={theme.images.general.pin} width={16} color={theme.colors.textNormal} style={{ marginEnd: 14 }} />
-						<OText size={14} lineHeight={24} weight={'400'} color={theme.colors.textNormal}>{t('MY_SAVED_PLACES', 'My saved places')}</OText>
-					</ListItem>
-					<ListItem onPress={() => navigation.navigate('Help', {})} activeOpacity={0.7}>
-						<OIcon src={theme.images.general.help} width={16} color={theme.colors.textNormal} style={{ marginEnd: 14 }} />
-						<OText size={14} lineHeight={24} weight={'400'} color={theme.colors.textNormal}>{t('HELP', 'Help')}</OText>
-					</ListItem>
-					<ListItem onPress={() => navigation.navigate('Notifications', {})} activeOpacity={0.7}>
-						<OIcon src={theme.images.general.bell} width={16} color={theme.colors.textNormal} style={{ marginEnd: 14 }} />
-						<OText size={14} lineHeight={24} weight={'400'} color={theme.colors.textNormal}>{t('NOTIFICATIONS', ' Notifications')}</OText>
-					</ListItem>
-				</Actions>
-
-				<Actions>
-					<LanguageSelector iconColor={theme.colors.textNormal} pickerStyle={langPickerStyle} />
-					<View style={{ height: 17 }} />
-					<LogoutButton color={theme.colors.textNormal} text={t('LOGOUT', 'Logout')} />
-				</Actions>
-			</ListWrap>
-		</View>
-	);
-};
-
-export const UserProfile = (props: any) => {
-	const profileProps = {
-		...props,
-		UIComponent: ProfileListUI,
-	};
-	return <UserProfileController {...profileProps} />;
-};

package/themes/franchises/src/components/UserProfile/styles.ts

@@ -1,42 +0,0 @@
-import styled from 'styled-components/native'
-
-export const CenterView = styled.View`
-	flex-direction: row;
-	justify-content: flex-start;
-  	align-items: center;
-`;
-
-export const UserData = styled.View`
-  align-items: center;
-  text-align: center;
-`
-
-export const Names = styled.View`
-  flex-direction: row;
-`
-
-export const EditButton = styled.View`
-  align-items: center;
-  justify-content: center;
-  flex-direction: row;
-  flex: 1;
-`
-
-export const Actions = styled.View`
-  margin-bottom: 20px;
-`
-
-export const WrapperPhone = styled.View`
-  padding: 8px 0px;
-`
-export const ListWrap = styled.View`
-  flex-grow: 1;
-  justify-content: space-between;
-`
-export const ListItem = styled.TouchableOpacity`
-	flex-direction: row;
-	justify-content: flex-start;
-	align-items: center;
-	margin-bottom: 24px;
-`
-