ordering-ui-react-native 0.22.32 → 0.22.33-release

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,
@@ -36,7 +38,12 @@ export const UserFormDetailsUI = (props: any) => {
 		isCheckout,
 		setIsOpen,
 		handleRemoveAccount,
-		isProfile
+		isProfile,
+		isGuest,
+		isOrderTypeValidationField,
+		checkoutFields,
+		isCheckoutPlace,
+		setCellphoneStartZero
 	} = props;
 
 	const theme = useTheme();
@@ -78,7 +85,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)
@@ -95,8 +102,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({
@@ -127,15 +134,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;
 			}
@@ -144,17 +163,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) {
@@ -162,17 +186,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 = {
@@ -185,7 +208,7 @@ export const UserFormDetailsUI = (props: any) => {
 		}
 	};
 
-	const handleChangePhoneNumber = (number: any) => {
+	const handleChangePhoneNumber = (number: any, rawNumber : any) => {
 		setPhoneInputData(number);
 		setIsChanged(true)
 		let phoneNumber = {
@@ -198,6 +221,7 @@ export const UserFormDetailsUI = (props: any) => {
 				value: number.phone.cellphone,
 			},
 		};
+		setCellphoneStartZero && setCellphoneStartZero(rawNumber?.number && rawNumber?.countryCallingCode ? rawNumber?.number : null)
 		handleChangeInput(phoneNumber, true);
 	};
 
@@ -223,9 +247,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()
+				}
 			}
 		})
 	}
@@ -298,127 +325,135 @@ export const UserFormDetailsUI = (props: any) => {
 		<>
 			<UDForm>
 				{!validationFields?.loading &&
-					sortInputFields({ values: validationFields?.fields?.checkout })
+					sortInputFields({ values: isOrderTypeValidationField ? checkoutFields : validationFields?.fields?.checkout })
 						.length > 0 && (
 						<UDWrapper>
 							{sortInputFields({
-								values: validationFields.fields?.checkout,
+								values: isOrderTypeValidationField ? checkoutFields : validationFields?.fields?.checkout,
 							}).map(
-								(field: any) =>
-									showField &&
-									showField(field.code) && ((requiredFields && requiredFields.includes(field.code)) || !requiredFields) && (
-										<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' }}>
-															{t(field?.code?.toUpperCase(), field?.name)}
-														</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
+								(item: any) => {
+									const field = item?.validation_field || item
+									return (
+										((isOrderTypeValidationField ? item?.enabled : (showField && showField(field.code))) && ((requiredFields && requiredFields?.includes?.(field.code)) || !requiredFields || !isCheckoutPlace)) && (
+											<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' }}>
+																{t(field?.code?.toUpperCase(), field?.name)}
+															</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?.guest_id && field.code === 'email' ? user?.guest_email : 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,
 																					'',
 																				),
-																		},
-																	});
-															}}
-															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>
-									),
+																		);
+																	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 && (field.code === 'email' && user?.guest_id ? user?.guest_email : user?.[field.code])}
+												/>
+											</React.Fragment>
+										))
+								},
 							)}
-							{showInputBirthday && (
-								<>
-									<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}
@@ -482,9 +517,7 @@ export const UserFormDetailsUI = (props: any) => {
 										? t('UPDATING', 'Updating...')
 										: t('UPDATE', 'Update')
 								}
-								bgColor={theme.colors.primary}
-								textStyle={{ color: theme.colors.white, fontSize: 14 }}
-								borderColor={theme.colors.primary}
+								textStyle={{ fontSize: 14 }}
 								isDisabled={formState.loading}
 								imgRightSrc={null}
 								style={{ borderRadius: 7.6, shadowOpacity: 0, width: '100%', borderWidth: 1, marginTop: 20, marginBottom: 20 }}
@@ -493,7 +526,7 @@ export const UserFormDetailsUI = (props: any) => {
 						)}
 				</>
 			)}
-			{requiredFields && (
+			{isCheckoutPlace && (
 				<OButton
 					text={
 						formState.loading
@@ -502,12 +535,10 @@ export const UserFormDetailsUI = (props: any) => {
 								? t('SIGN_UP_AND_PLACE_ORDER', 'Sign up and place order')
 								: t('CONTINUE', 'Continue'))
 					}
-					bgColor={theme.colors.primary}
 					textStyle={{
 						color: !user?.guest_id && (formState.loading || !isValid) ? theme.colors.primary : theme.colors.white,
 						fontSize: 14
 					}}
-					borderColor={theme.colors.primary}
 					isDisabled={!user?.guest_id && (formState.loading || !isValid)}
 					imgRightSrc={null}
 					style={{
@@ -521,10 +552,10 @@ export const UserFormDetailsUI = (props: any) => {
 						borderColor: !user?.guest_id && (formState.loading || !isValid) ? theme.colors.white : theme.colors.primary,
 						opacity: !user?.guest_id && (formState.loading || !isValid) ? 0.3 : 1,
 					}}
-					onClick={!user?.guest_id ? handleSubmit(onSubmit) : () => setIsModalOpen(true)}
+					onClick={handleSubmit(onSubmit)}
 				/>
 			)}
-			{isCheckout && !!user?.guest_id && (
+			{isCheckout && !!user?.guest_id && !requiredFields && (
 				<TouchableOpacity style={{ marginTop: 10 }} onPress={() => handlePlaceOrderAsGuest()}>
 					<OText color={theme.colors.primary} style={{ textAlign: 'center' }}>{t('PLACE_ORDER_AS_GUEST', 'Place order as guest')}</OText>
 				</TouchableOpacity>
@@ -554,4 +585,3 @@ export const UserFormDetailsUI = (props: any) => {
 		</>
 	);
 };
-

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

@@ -44,6 +44,7 @@ const ProfileListUI = (props: ProfileParams) => {
 		handleRemoveAccount,
 		removeAccountState,
 		handleChangePromotions,
+		appVersion
 	} = props;
 
 	const theme = useTheme();
@@ -151,7 +152,7 @@ const ProfileListUI = (props: ProfileParams) => {
 	const detailProps = {
 		goToBack: () => props.navigation?.canGoBack() && props.navigation.goBack(),
 		onNavigationRedirect: (route: string, params: any) => props.navigation.navigate(route, params),
-		handleRemoveAccount
+		handleRemoveAccount,
 	}
 
 	useEffect(() => {
@@ -271,6 +272,13 @@ const ProfileListUI = (props: ProfileParams) => {
 				</Actions>
 			</ListWrap>
 			<WebsocketStatus />
+			{appVersion && (
+				<View
+					style={{ alignItems: 'center' }}
+				>
+					<OText>v{appVersion}</OText>
+				</View>
+			)}
 			<OAlert
 				open={confirm.open}
 				title={confirm.title}

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

@@ -37,6 +37,7 @@ import {
   WrapperActions
 } from './styles'
 
+const CONDITIONAL_CODES = [1787]
 const TIME_COUNTDOWN = 60 * 10 // 10 minutes
 
 const UserDetails = (props: any) => {
@@ -176,9 +177,18 @@ const UserVerificationUI = (props: any) => {
     setTimer(`${TIME_COUNTDOWN / 60}:00`)
     setIsSendCodeAgain(true)
     if (opt === 'phone') {
+      let cellphone = phoneState?.cellphone
+      let country_phone_code = phoneState?.country_phone_code
+
+      if (CONDITIONAL_CODES.includes(Number(country_phone_code))) {
+        if (Number(country_phone_code) === 1787) {
+          cellphone = `787${cellphone}`
+          country_phone_code = '1'
+        }
+      }
       sendVerifyPhoneCode({
-        cellphone: phoneState?.cellphone,
-        country_phone_code: phoneState?.country_phone_code
+        cellphone,
+        country_phone_code
       })
       return
     }
@@ -188,8 +198,8 @@ const UserVerificationUI = (props: any) => {
   const setupUserPhoneNumber = () => {
     if (!user || !user?.cellphone || !user?.country_phone_code) return
     setPhoneState({
-      cellphone: user?.cellphone,
-      country_phone_code: user?.country_phone_code,
+      cellphone: user?.country_code === "PR" ? user?.cellphone.replace('787', '') : user?.cellphone,
+      country_phone_code: user?.country_code === "PR" ? '1787' : user?.country_phone_code,
       formatted: `+${user?.country_phone_code} ${user?.cellphone}`
     })
   }
@@ -399,6 +409,7 @@ const UserVerificationUI = (props: any) => {
                       defaultCode={phoneState?.country_phone_code.replace('+', '')}
                       boxStyle={style.phoneSelect}
                       inputStyle={style.phoneInputStyle}
+                      defaultCodeFallback={phoneState?.country_phone_code.replace('+', '')}
                       textStyle={{ color: theme.colors.textNormal, fontSize: 12, padding: 0 }}
                       noDropIcon
                       isDisabled

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

@@ -141,6 +141,11 @@ const WalletsUI = (props: any) => {
               btnStyle={{ paddingLeft: 0 }}
               isVertical={!hideWalletsTheme}
               hideArrowLeft={!hideWalletsTheme}
+              buttonProps={{
+                bgColor: theme.colors.white,
+                borderColor: theme.colors.white,
+                textStyle: { color: theme.colors.btnFont }
+              }}
             />
             {isChewLayout && !openHistory && (
               <OButton
@@ -304,13 +309,11 @@ const WalletsUI = (props: any) => {
                 borderWidth: 0,
                 width: 26,
                 height: 26,
-                backgroundColor: '#FFF',
-                borderColor: '#FFF',
-                shadowColor: '#FFF',
                 paddingLeft: 0,
                 paddingRight: 0,
                 marginBottom: 10
               }}
+              useArrow
               onClick={() => setOpenHistory(false)}
               icon={AntDesignIcon}
               iconProps={{

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

@@ -143,15 +143,12 @@ const SocketStatusUI = (props: any) => {
               <OButton
                 onClick={() => setOpenModal(false)}
                 bgColor={theme.colors.white}
-                borderColor={theme.colors.primary}
                 textStyle={{ color: theme.colors.primary }}
                 style={{ borderRadius: 8, height: 48 }}
                 text={t('CLOSE', 'Close')}
               />
-               <OButton
+              <OButton
                 onClick={() => RNRestart.Restart()}
-                borderColor={theme.colors.primary}
-                textStyle={{ color: theme.colors.white }}
                 style={{ borderRadius: 8, marginLeft: 16, height: 48 }}
                 text={t('UPDATE', 'Update')}
               />

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

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import styled, { css } from 'styled-components/native'
-import { Alert } from 'react-native'
+import { Alert, Vibration } from 'react-native'
 import { useLanguage } from 'ordering-components/native'
 
 const Wrapper = styled.TouchableOpacity`
@@ -41,6 +41,7 @@ const OAlert = (props: Props) => {
   }
 
   const handleClick = () => {
+    Vibration.vibrate(100)
     props.onClick && props.onClick()
     createTwoButtonAlert()
   }