ordering-ui-react-native 0.12.54 → 0.12.58

package/themes/single-business/src/components/UserFormDetails/index.tsx

@@ -1,351 +1,304 @@
 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 { UDForm, UDLoader, UDWrapper, WrapperPhone, EditButton } from './styles';
 
 import { OText, OButton, OInput } from '../shared';
 
-import { PhoneInputNumber } from '../PhoneInputNumber';
+import { PhoneInputNumber } from '../PhoneInputNumber'
 import { sortInputFields } from '../../utils';
+import { useTheme } from 'styled-components/native';
 
 export const UserFormDetailsUI = (props: any) => {
-	const {
-		isEdit,
-		formState,
-		showField,
-		cleanFormState,
-		onCloseProfile,
-		isRequiredField,
-		validationFields,
-		handleChangeInput,
-		handleButtonUpdateClick,
-		phoneUpdate,
-		hideUpdateButton,
-	} = props;
-
-	const theme = useTheme();
+  const {
+    isEdit,
+    formState,
+    showField,
+    cleanFormState,
+    onCloseProfile,
+    isRequiredField,
+    validationFields,
+    handleChangeInput,
+    handleButtonUpdateClick,
+    phoneUpdate,
+    handleCancelEdit,
+    isCheckout
+  } = 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 styles = StyleSheet.create({
+    btnOutline: {
+      backgroundColor: '#FFF',
+      color: theme.colors.primary
+    },
+    inputStyle: {
+      marginBottom: 25,
+      borderWidth: 1,
+      borderColor: theme.colors.border,
+      borderRadius: 8,
+    },
+    editButton: {
+      // flex:0,
+      borderRadius: 8,
+      borderColor: theme.colors.primary,
+      backgroundColor: theme.colors.white,
+      borderWidth: 1,
+      color: theme.colors.primary,
+      // width: 100,
+      // height: 50,
+      marginVertical: 8,
+      // flex: 1,
+    },
+  });
 
-	const [, t] = useLanguage();
-	const [, { showToast }] = useToast();
-	const { handleSubmit, control, errors, setValue } = useForm();
+  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 [{ 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 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 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 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 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);
-	};
+  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 (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 ((!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>
-									),
-							)}
+  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={() => (
+                        <OInput
+                          name={field.code}
+                          placeholder={t(field.code.toUpperCase(), field?.name)}
+                          style={styles.inputStyle}
+                          icon={field.code === 'email' ? theme.images.general.email : theme.images.general.user}
+                          autoCapitalize={field.code === 'email' ? 'none' : 'sentences'}
+                          isDisabled={!isEdit}
+                          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)}
-							/>
-						)}
-				</>
-			)}
-		</>
-	);
-};
+              {!!showInputPhoneNumber && (
+                <WrapperPhone>
+                  <PhoneInputNumber
+                    data={phoneInputData}
+                    handleData={(val: any) => handleChangePhoneNumber(val)}
+                    defaultValue={phoneUpdate ? '' : user?.cellphone}
+                    defaultCode={user?.country_phone_code || null}
+                  />
+                  {phoneUpdate && (
+                    <OText 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={20}>
+              {t('LOADING', 'Loading')}
+            </OText>
+          </UDLoader>
+        )}
+      </UDForm>
+      <>
+        {!validationFields.loading && !isCheckout && (
+          <EditButton>
+            <View style={{ flex: 1 }}>
+              <OButton
+                text={t('CANCEL', 'Cancel')}
+                bgColor={theme.colors.white}
+                borderColor={theme.colors.primary}
+                isDisabled={formState.loading}
+                imgRightSrc={null}
+                style={{ ...styles.editButton }}
+                onClick={handleCancelEdit}
+              />
+            </View>
+            {((formState &&
+              Object.keys(formState?.changes).length > 0 && isEdit) || formState?.loading) &&
+              (
+                <View style={{ flex: 1, marginLeft: 5 }}>
+                  <OButton
+                    text={formState.loading ? t('UPDATING', 'Updating...') : t('UPDATE', 'Update')}
+                    bgColor={theme.colors.primary}
+                    textStyle={{ color: formState.loading ? 'black' : 'white' }}
+                    borderColor={theme.colors.primary}
+                    isDisabled={formState.loading}
+                    imgRightSrc={null}
+                    style={{ ...styles.editButton }}
+                    onClick={handleSubmit(onSubmit)}
+                  />
+                </View>
+              )}
+          </EditButton>
+        )}
+        {((formState && Object.keys(formState?.changes).length > 0 && isEdit) || formState?.loading) && isCheckout && (
+          <OButton
+            text={formState.loading ? t('UPDATING', 'Updating...') : t('UPDATE', 'Update')}
+            bgColor={theme.colors.primary}
+            textStyle={{ color: 'white' }}
+            style={{ borderRadius: 8 }}
+            borderColor={theme.colors.primary}
+            isDisabled={formState.loading}
+            imgRightSrc={null}
+            onClick={handleSubmit(onSubmit)}
+          />
+        )}
+      </>
+    </>
+  )
+}

package/themes/single-business/src/components/UserFormDetails/styles.tsx

@@ -5,7 +5,6 @@ export const UDForm = styled.View`
   align-items: center;
   flex-direction: column;
   width: 100%;
-  margin-top: 20px;
 `
 
 export const UDWrapper = styled.View`
@@ -14,7 +13,6 @@ export const UDWrapper = styled.View`
   flex-direction: column;
   width: 100%;
   margin-top: 20px;
-  padding-bottom: 50px;
 `
 
 export const UDLoader = styled.View`
@@ -29,7 +27,11 @@ export const UDLoader = styled.View`
 
 export const WrapperPhone = styled.View`
   margin-bottom: 25px;
-  width: 100%;
-  border-bottom-width: 1px;
-  border-bottom-color: ${(props: any) => props.theme.colors.border};
+`
+
+export const EditButton = styled.View`
+  align-items: center;
+  justify-content: center;
+  flex-direction: row;
+  flex: 1;
 `

package/themes/single-business/src/layouts/Container.tsx

@@ -15,7 +15,7 @@ const SafeAreaStyled = styled.SafeAreaView`
 export const Container = (props: any) => {
   return (
     <SafeAreaStyled>
-      <ContainerStyled keyboardShouldPersistTaps='handled' {...props} style={{...props.style}}>
+      <ContainerStyled {...props} keyboardShouldPersistTaps='handled' ref={props?.forwardRef} style={{...props.style}}>
         {props.children}
       </ContainerStyled>
     </SafeAreaStyled>