ordering-ui-react-native 0.12.57 → 0.12.58

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

@@ -1,253 +0,0 @@
-import React, { useEffect, useState } 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 { launchImageLibrary } from 'react-native-image-picker';
-import Spinner from 'react-native-loading-spinner-overlay';
-import { StyleSheet, View } from 'react-native';
-import { ProfileParams } from '../../types';
-import { UserFormDetailsUI } from '../UserFormDetails';
-
-import { OIcon, OIconButton } from '../shared';
-import { CenterView } from './styles';
-import NavBar from '../NavBar';
-import { Container } from '../../layouts/Container';
-
-const ProfileUI = (props: ProfileParams) => {
-	const {
-		navigation,
-		isEdit,
-		formState,
-		validationFields,
-		showField,
-		isRequiredField,
-		toggleIsEdit,
-		cleanFormState,
-		handleChangeInput,
-		handleButtonUpdateClick,
-	} = props;
-
-	const theme = useTheme();
-
-	const styles = StyleSheet.create({
-		photo: {
-			borderRadius: 7.6,
-			shadowColor: theme.colors.black,
-			shadowOffset: { width: 0, height: 1 },
-			shadowRadius: 2,
-			shadowOpacity: 0.2,
-			backgroundColor: theme.colors.white,
-		},
-		pagePadding: {
-			paddingLeft: 40,
-			paddingRight: 40
-		}
-	});
-
-	const [{ user }] = useSession();
-	const [, t] = useLanguage();
-	const [, { showToast }] = useToast();
-	const { handleSubmit, errors, setValue, control } = useForm();
-
-	const [phoneInputData, setPhoneInputData] = useState({
-		error: '',
-		phone: {
-			country_phone_code: null,
-			cellphone: null,
-		},
-	});
-	const [phoneUpdate, setPhoneUpdate] = useState(false);
-
-	const onSubmit = (values: any) => {
-		if (phoneInputData.error) {
-			showToast(ToastType.Error, phoneInputData.error);
-			return;
-		}
-		if (
-			formState.changes.cellphone === '' &&
-			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;
-		}
-		if (formState.changes.password && formState.changes.password.length < 8) {
-			showToast(
-				ToastType.Error,
-				t(
-					'VALIDATION_ERROR_PASSWORD_MIN_STRING',
-					'The Password must be at least 8 characters.',
-				)
-					.replace('_attribute_', t('PASSWORD', 'Password'))
-					.replace('_min_', 8),
-			);
-			return;
-		}
-
-		handleButtonUpdateClick(values);
-	};
-
-	const handleImagePicker = () => {
-		launchImageLibrary(
-			{
-				mediaType: 'photo',
-				maxHeight: 200,
-				maxWidth: 200,
-				includeBase64: true,
-			},
-			(response: any) => {
-				if (response.didCancel) {
-					console.log('User cancelled image picker');
-				} else if (response.errorMessage) {
-					console.log('ImagePicker Error: ', response.errorMessage);
-					showToast(ToastType.Error, response.errorMessage);
-				} else {
-					if (response.uri) {
-						const url = `data:${response.type};base64,${response.base64}`;
-						handleButtonUpdateClick(null, true, url);
-					} else {
-						showToast(ToastType.Error, t('IMAGE_NOT_FOUND', 'Image not found'));
-					}
-				}
-			},
-		);
-	};
-
-	const handleCancelEdit = () => {
-		cleanFormState({ changes: {} });
-		toggleIsEdit();
-		setPhoneInputData({
-			error: '',
-			phone: {
-				country_phone_code: null,
-				cellphone: null,
-			},
-		});
-	};
-
-	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);
-	};
-
-	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;
-	};
-
-	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]);
-
-	useEffect(() => {
-		if (user?.cellphone && !user?.country_phone_code) {
-			setPhoneUpdate(true);
-		} else {
-			setPhoneUpdate(false);
-		}
-	}, [user?.country_phone_code]);
-
-	return (
-		<Container noPadding>
-			<NavBar
-				onActionLeft={() => navigation.goBack()}
-				btnStyle={{ paddingStart: 0 }}
-				title={t('ACCOUNT', 'Account')}
-				isVertical
-				style={styles.pagePadding}
-			/>
-			<CenterView style={styles.pagePadding}>
-				<View style={styles.photo}>
-					<OIcon
-						url={user?.photo}
-						src={!user?.photo && theme.images.general.user}
-						width={79}
-						height={79}
-					/>
-				</View>
-				<OIconButton
-					icon={theme.images.general.camera}
-					borderColor={theme.colors.clear}
-					iconStyle={{ width: 16, height: 16 }}
-					style={{ maxWidth: 40, position: 'absolute', bottom: -2, alignSelf: 'center' }}
-					onClick={() => handleImagePicker()}
-				/>
-			</CenterView>
-			<View style={{ height: 8, marginLeft: -40, marginRight: -40, backgroundColor: theme.colors.backgroundGray100, marginVertical: 32, zIndex: 10 }} />
-			<Spinner visible={formState?.loading} />
-			<View style={styles.pagePadding}>
-				<UserFormDetailsUI {...props} isEdit />
-			</View>
-
-		</Container>
-	);
-};
-
-
-export const UserProfileForm = (props: any) => {
-	const profileProps = {
-		...props,
-		UIComponent: ProfileUI,
-	};
-	return <UserProfileController {...profileProps} />;
-};

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

@@ -1,29 +0,0 @@
-import styled from 'styled-components/native'
-
-export const CenterView = styled.View`
-  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;
-`

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

@@ -1,188 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { Pressable, StyleSheet, TextInput } from 'react-native';
-import { useLanguage } from 'ordering-components/native';
-import { useTheme } from 'styled-components/native';
-import Spinner from 'react-native-loading-spinner-overlay';
-import { getTraduction } from '../../utils'
-
-import { OText } from '../shared';
-
-import {
-	Container,
-	CountDownContainer,
-	ResendSection,
-	WrappCountdown,
-	InputsSection,
-	ErrorSection
-} from './styles'
-
-const TIME_COUNTDOWN = 60 * 10 // 10 minutes
-
-export const VerifyPhone = (props: any) => {
-	const {
-		phone,
-		formValues,
-		verifyPhoneState,
-		checkPhoneCodeState,
-		setCheckPhoneCodeState,
-		handleCheckPhoneCode,
-		handleVerifyCodeClick
-	} = props
-
-	const theme = useTheme();
-
-	const styles = StyleSheet.create({
-		inputStyle: {
-			width: 80,
-			height: 80,
-			marginBottom: 25,
-			borderWidth: 1,
-			borderColor: theme.colors.disabled,
-			borderRadius: 20,
-			textAlign: 'center',
-			fontSize: 40
-		}
-	});
-
-
-	const [, t] = useLanguage()
-
-	const [timer, setTimer] = useState(`${TIME_COUNTDOWN / 60}:00`)
-	const [verifyCode, setVerifyCode] = useState({ 0: '', 1: '', 2: '', 3: '' })
-	const [isSendCodeAgain, setIsSendCodeAgain] = useState(false)
-
-	const lastNumbers = phone?.cellphone &&
-		`${phone?.cellphone.charAt(phone?.cellphone.length - 2)}${phone?.cellphone.charAt(phone?.cellphone.length - 1)}`
-
-	const handleChangeCode = (val: number, i: number) => {
-		setVerifyCode({ ...verifyCode, [i]: val })
-	}
-
-	const checkResult = (result: any) => {
-		if (!result) return
-		return typeof result === 'string'
-			? [result]
-			: result
-	}
-
-	const handleSendCodeAgain = () => {
-		setCheckPhoneCodeState && setCheckPhoneCodeState()
-		setTimer(`${TIME_COUNTDOWN / 60}:00`)
-		setIsSendCodeAgain(true)
-		handleVerifyCodeClick && handleVerifyCodeClick()
-	}
-
-	useEffect(() => {
-		let _timer = TIME_COUNTDOWN - 1;
-		let minutes = 0;
-		let seconds = 0;
-		const interval = setInterval(() => {
-			minutes = _timer / 60;
-			seconds = _timer % 60;
-
-			minutes = minutes < 10 ? 0 + minutes : minutes;
-			seconds = seconds < 10 ? 0 + seconds : seconds;
-
-			const formatMinutes = parseInt(minutes.toString()) < 10
-				? `0${parseInt(minutes.toString())}`
-				: parseInt(minutes.toString());
-
-			const formatseconds = parseInt(seconds.toString()) < 10
-				? `0${parseInt(seconds.toString())}`
-				: parseInt(seconds.toString());
-
-			setTimer(`${formatMinutes}:${formatseconds}`);
-
-			if (--_timer < 0) {
-				clearInterval(interval);
-			}
-
-			if (timer === `${TIME_COUNTDOWN / 60}:00` && isSendCodeAgain) {
-				setIsSendCodeAgain(false)
-				clearInterval(interval);
-			}
-		}, 1000);
-
-		return () => clearInterval(interval)
-	}, [isSendCodeAgain])
-
-	useEffect(() => {
-		const codes = Object.keys(verifyCode).length
-		const isFullInputs = codes && Object.values(verifyCode).every(val => val)
-		if (codes === 4 && isFullInputs) {
-			const values = {
-				...formValues,
-				cellphone: phone.cellphone,
-				country_phone_code: `+${phone.country_phone_code}`,
-				code: Object.values(verifyCode).join().replace(/,/g, '')
-			}
-			handleCheckPhoneCode && handleCheckPhoneCode(values)
-		}
-	}, [verifyCode])
-
-	return (
-		<Container>
-			<OText size={30} style={{ textAlign: 'left' }}>
-				{t('VERIFY_PHONE', 'Verify Phone')}
-			</OText>
-			{lastNumbers && (
-				<OText size={20} color={theme.colors.disabled}>
-					{`${t('MESSAGE_ENTER_VERIFY_CODE', 'Please, enter the verification code we sent to your mobile ending with')} **${lastNumbers}`}
-				</OText>
-			)}
-			<WrappCountdown>
-				<CountDownContainer color={timer === '00:00' ? theme.colors.error : theme.colors.success}>
-					<OText
-						size={30}
-						color={timer === '00:00' ? theme.colors.error : theme.colors.success}
-					>
-						{timer}
-					</OText>
-				</CountDownContainer>
-			</WrappCountdown>
-			<InputsSection>
-				{[...Array(4),].map((_: any, i: number) => (
-					<TextInput
-						key={i}
-						keyboardType='number-pad'
-						placeholder={'0'}
-						style={styles.inputStyle}
-						onChangeText={(val: any) => handleChangeCode(val, i)}
-						maxLength={1}
-						editable={timer !== '00:00'}
-					/>
-				))}
-			</InputsSection>
-			{(verifyPhoneState?.result?.error ? verifyPhoneState : checkPhoneCodeState) &&
-				!(verifyPhoneState?.result?.error ? verifyPhoneState : checkPhoneCodeState)?.loading &&
-				(verifyPhoneState?.result?.error ? verifyPhoneState : checkPhoneCodeState)?.result?.error &&
-				(verifyPhoneState?.result?.error ? verifyPhoneState : checkPhoneCodeState).result?.result &&
-				(
-					<ErrorSection>
-						{checkResult((
-							verifyPhoneState?.result?.error ? verifyPhoneState : checkPhoneCodeState
-						).result?.result)?.map((e: any, i: number) => (
-							<OText
-								key={i}
-								size={20}
-								color={theme.colors.error}
-							>
-								{`* ${t(getTraduction(e))}`}
-							</OText>
-						))}
-					</ErrorSection>
-				)}
-			<ResendSection>
-				<OText size={17} style={{ marginRight: 5 }}>
-					{t('ARE_YOU_NOT_SEEING_THE_CODE', 'Are you not seeing the code?')}
-				</OText>
-				<Pressable onPress={() => handleSendCodeAgain()}>
-					<OText size={17} color={theme.colors.primary}>
-						{t('SEND_AGAIN', 'Send Again')}
-					</OText>
-				</Pressable>
-			</ResendSection>
-			<Spinner visible={checkPhoneCodeState.loading} />
-		</Container>
-	)
-}

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

@@ -1,43 +0,0 @@
-import styled from 'styled-components/native';
-
-export const Container = styled.View`
-  width: 100%;
-  padding-top: 5px;
-  padding-left: 20px;
-  padding-right: 20px;
-`
-
-export const CountDownContainer = styled.View`
-  background-color: ${(props: any) => `${props.color}4D`};
-  border-radius: 30px;
-  padding: 5px 80px 0px;
-  margin: 0 auto;
-  display: flex;
-  justify-content: center;
-`
-
-export const ResendSection = styled.View`
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  margin-bottom: 30px;
-`
-
-export const WrappCountdown = styled.View`
-  padding-top: 20px;
-  padding-bottom: 20px;
-`
-
-export const InputsSection = styled.View`
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-`
-
-export const ErrorSection = styled.View`
-  margin-bottom: 20px;
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  flex-direction: column;
-`

package/themes/franchises/src/components/shared/OAlert.tsx

@@ -1,55 +0,0 @@
-import * as React from 'react'
-import styled, { css } from 'styled-components/native'
-import { Alert } from 'react-native'
-import { useLanguage } from 'ordering-components/native'
-
-const Wrapper = styled.TouchableOpacity`
-	
-`
-
-interface Props {
-  children: any,
-  title: string,
-  message?: string,
-  onCancel?: any,
-  onAccept?: any,
-  onClick?: () => void,
-  disabled?: boolean
-}
-
-const OAlert = (props: Props) => {
-
-  const [, t] = useLanguage()
-
-  const createTwoButtonAlert = () => {
-    Alert.alert(
-      props.title,
-      props.message,
-      [
-        {
-          text: t('CANCEL', 'cancel'),
-          onPress: () => props.onCancel && props.onCancel(),
-          style: 'cancel'
-        },
-        {
-          text: t('ACCEPT', 'Accept'),
-          onPress: () => props.onAccept && props.onAccept()
-        }
-      ],
-      { cancelable: false }
-    )
-  }
-
-  const handleClick = () => {
-    props.onClick && props.onClick()
-    createTwoButtonAlert()
-  }
-
-  return (
-    <Wrapper onPress={handleClick} disabled={props.disabled}>
-      {props.children}
-    </Wrapper>
-  )
-}
-
-export default OAlert;

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

@@ -1,73 +0,0 @@
-import React from 'react'
-import { Modal, TouchableWithoutFeedback, Dimensions, StyleSheet, View, Text } from 'react-native'
-import { useSafeAreaInsets } from 'react-native-safe-area-context'
-const deviceHeight = Dimensions.get('window').height
-
-interface Props {
-	open: boolean;
-	title?: string;
-	children?: any;
-	onClose?: any;
-}
-const OBottomPopup = (props: Props) => {
-	const {
-		open,
-		title,
-		onClose,
-		children
-	} = props
-	const { top, bottom } = useSafeAreaInsets();
-	return (
-		<Modal
-			animationType='slide'
-			transparent={false}
-			visible={open}
-			onRequestClose={() => onClose()}
-			presentationStyle={'fullScreen'}
-		>
-			<View style={styles.container}>
-				<TouchableWithoutFeedback
-					style={styles.touchableOutsideStyle}
-					onPress={() => onClose()}
-				>
-					<View style={styles.touchableOutsideStyle} />
-				</TouchableWithoutFeedback>
-				<View style={styles.bottomContainer}>
-					<View style={{ paddingTop: top, paddingBottom: bottom }}>
-						{title != '' && (
-							<Text style={styles.titleStyle}>
-								{title}
-							</Text>
-						)}
-						{children}
-					</View>
-				</View>
-			</View>
-		</Modal>
-	)
-}
-
-const styles = StyleSheet.create({
-	container: {
-		flex: 1,
-		backgroundColor: '#000000AA',
-		justifyContent: 'flex-end',
-	},
-	touchableOutsideStyle: {
-		flex: 1,
-		width: '100%'
-	},
-	bottomContainer: {
-		backgroundColor: '#ffffff',
-		width: '100%',
-		paddingHorizontal: 0,
-		height: deviceHeight
-	},
-	titleStyle: {
-		fontSize: 20,
-		fontWeight: 'bold',
-		marginVertical: 15
-	}
-})
-
-export default OBottomPopup

package/themes/franchises/src/components/shared/OBottomStickBar.tsx

@@ -1,62 +0,0 @@
-import React from 'react';
-import styled, { useTheme } from 'styled-components/native';
-import { OButton, OText } from '.';
-import { useLanguage } from 'ordering-components/native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { ViewStyle } from 'react-native';
-
-const BWrap = styled.View`
-	position: absolute;
-	min-height: 69px;
-	background-color: white;
-	width: 100%;
-	flex-direction: row;
-	justify-content: space-between;
-	align-items: center;
-	padding-horizontal: 40px;
-	padding-vertical: 12px;
-	border-top-width: 1px;
-	border-top-color: ${(props: any) => props.theme.colors.border};
-`;
-
-const TxtButton = styled.TouchableOpacity`
-
-`;
-
-interface Props {
-	rightText?: string;
-	rightAction?: any;
-	leftText?: string;
-	leftAction?: any;
-	customLeftView?: any;
-	customRightView?: any;
-	rightBtnStyle?: ViewStyle;
-}
-
-const OBottomStickBar = (props: Props) => {
-	const [, t] = useLanguage();
-	const { rightText, rightAction, customRightView, leftText, leftAction, customLeftView, rightBtnStyle } = props;
-	const { bottom } = useSafeAreaInsets();
-	const theme = useTheme();
-
-	return (
-		<BWrap style={{bottom: 0, paddingBottom: bottom}}>
-			{customLeftView ? customLeftView : 
-				<TxtButton onPress={leftAction ? leftAction : () => {}}>
-					<OText size={16} weight={'bold'} color={theme.colors.textSecondary}>{leftText || t('SKIP', 'Skip')}</OText>
-				</TxtButton>
-			}
-			{customRightView ? customRightView :
-				<OButton 
-					onClick={rightAction ? rightAction : () => {}}
-					text={rightText || t('CONTINUE', 'Continue')} textStyle={{fontSize: 14, color: 'white', marginEnd: 32}} 
-					style={{paddingStart: 10, paddingEnd: 10, ...rightBtnStyle}}
-					imgRightSrc={theme.images.general.arrow_left}
-					imgRightStyle={{tintColor: 'white', transform: [{ rotate: '180deg' }]}}
-				/>
-			}
-		</BWrap>
-	)
-}
-
-export default OBottomStickBar;