ordering-ui-react-native 0.15.63 → 0.15.64-release

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

@@ -40,7 +40,7 @@ export const StripeElementsForm = (props: any) => {
     }
   }
 
-  const stripeTokenHandler = async (tokenId: string, user: any, businessId: string) => {
+  const stripeTokenHandler = async (tokenId: string, user: any, businessId: string, isNewCard: any = true) => {
     try {
       setState({
         ...state,
@@ -60,7 +60,7 @@ export const StripeElementsForm = (props: any) => {
         })
       })
       const response = await result.json();
-      props.onSelectCard && props.onSelectCard(response.result);
+      isNewCard && props.onSelectCard && props.onSelectCard(response.result);
       setState({
         ...state,
         loadingAdd: false

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

@@ -4,7 +4,7 @@ import {
 	UpsellingPage as UpsellingPageController,
 	useUtils,
 	useLanguage,
-  useOrder
+	useOrder
 } from 'ordering-components/native'
 import { useTheme } from 'styled-components/native';
 import { OText, OIcon, OBottomPopup, OButton } from '../shared'
@@ -62,7 +62,19 @@ const UpsellingProductsUI = (props: UpsellingProductsParams) => {
 			borderRadius: 7.6,
 			borderColor: theme.colors.textSecondary,
 			height: 38
-		}
+		},
+		headerItem: {
+			flexDirection: 'row',
+			alignItems: 'center',
+			marginVertical: 2,
+			marginHorizontal: 20,
+		},
+		btnBackArrow: {
+			borderWidth: 0,
+			backgroundColor: theme.colors.clear,
+			shadowColor: theme.colors.clear,
+			padding: 40,
+		},
 	})
 
 	const [modalIsOpen, setModalIsOpen] = useState(false)
@@ -77,11 +89,11 @@ const UpsellingProductsUI = (props: UpsellingProductsParams) => {
 		? cart?.products.map((product: any) => product.id)
 		: []
 
-  	const productsList = !upsellingProducts.loading && !upsellingProducts.error
-      ? upsellingProducts?.products?.length
-      	? upsellingProducts?.products.filter((product: any) => !cartProducts.includes(product.id))
-      	: (props?.products ?? []).filter((product: any) => !cartProducts.includes(product.id)) ?? []
-      : []
+	const productsList = !upsellingProducts.loading && !upsellingProducts.error
+		? upsellingProducts?.products?.length
+			? upsellingProducts?.products.filter((product: any) => !cartProducts.includes(product.id))
+			: (props?.products ?? []).filter((product: any) => !cartProducts.includes(product.id)) ?? []
+		: []
 
 	useEffect(() => {
 		if (!isCustomMode && !props.products) {
@@ -95,15 +107,11 @@ const UpsellingProductsUI = (props: UpsellingProductsParams) => {
 		}
 	}, [upsellingProducts.loading, upsellingProducts?.products.length])
 
-	useEffect(() => {
-		isCheckout && Object.keys(cart).length === 0 && onNavigationRedirect && onNavigationRedirect('MyOrders')
-	}, [cart, isCheckout])
-
 	const handleFormProduct = (product: any) => {
-    onNavigationRedirect && onNavigationRedirect('ProductDetails', {
-      product: product,
-      businessId: product?.api?.businessId,
-      businessSlug: business.slug,
+		onNavigationRedirect && onNavigationRedirect('ProductDetails', {
+			product: product,
+			businessId: product?.api?.businessId,
+			businessSlug: business.slug,
 		})
 	}
 
@@ -119,8 +127,8 @@ const UpsellingProductsUI = (props: UpsellingProductsParams) => {
 						!upsellingProducts.loading && (
 							<>
 								{
-									!upsellingProducts.error ? productsList.map((product: any) => (
-										<Item key={product.id}>
+									!upsellingProducts.error ? productsList.map((product: any, i: number) => (
+										<Item key={`${product.id}_${i}`}>
 											<View style={{ flexBasis: '57%' }}>
 												<Details>
 													<OText size={12} lineHeight={18} numberOfLines={1} ellipsizeMode='tail'>{product.name}</OText>
@@ -148,50 +156,54 @@ const UpsellingProductsUI = (props: UpsellingProductsParams) => {
 		)
 	}
 
-  const UpsellingContent = () => {
-    return (
-      <>
-        <TopBar style={{ paddingTop: Platform.OS == 'ios' ? 10 : 30 }}>
-          <TopActions onPress={() => onGoBack()}>
-            <OIcon src={theme.images.general.arrow_left} width={15} />
-          </TopActions>
-        </TopBar>
-        <ScrollView style={{ marginBottom: props.isPage ? 40 : bottom + (Platform.OS == 'ios' ? 96 : 130) }} showsVerticalScrollIndicator={false}>
+	const UpsellingContent = () => {
+		return (
+			<>
+				<View style={{ ...styles.headerItem, flex: 1, marginTop: Platform.OS == 'ios' ? 35 : 70 }}>
+					<OButton
+						imgLeftSrc={theme.images.general.arrow_left}
+						imgRightSrc={null}
+						style={styles.btnBackArrow}
+						onClick={() => onGoBack()}
+						imgLeftStyle={{ tintColor: theme.colors.textNormal, width: 16 }}
+					/>
+				</View>
+				<ScrollView style={{ marginTop: 10, marginBottom: props.isPage ? 40 : bottom + (Platform.OS == 'ios' ? 96 : 130) }} showsVerticalScrollIndicator={false}>
 					{productsList.length > 0 &&
-            <View style={{ paddingHorizontal: 40, overflow: 'visible' }}>
-              <OText size={16} lineHeight={24} weight={'500'}>{t('WANT_SOMETHING_ELSE', 'Do you want something else?')}</OText>
-              <UpsellingLayout />
-            </View>
-          }
-          <View style={{ paddingHorizontal: 40 }}>
-            <OText size={20} lineHeight={30} weight={600} style={{ marginTop: 10, marginBottom: 17 }}>{t('YOUR_CART', 'Your cart')}</OText>
-            <OrderSummary
-              cart={cart}
-              isCartPending={cart?.status === 2}
-              onNavigationRedirect={onNavigationRedirect}
-            />
-          </View>
-        </ScrollView>
-        <View
-          style={{
-            alignItems: 'center',
-            bottom: props.isPage ? Platform.OS === 'ios' ? 0 : 20 : Platform.OS === 'ios' ? bottom  + 59 :  bottom + 125
-          }}
-        >
-          <OButton
-            imgRightSrc=''
-            text={t('CHECKOUT', 'Checkout')}
-            style={{...styles.closeUpsellingButton}}
-            textStyle={{ color: theme.colors.white, fontSize: 14 }}
-            onClick={() => {
-				handleUpsellingPage()
-				setIsCheckout(true)
-			}}
-          />
-        </View>
-      </>
-    )
-  }
+						<View style={{ paddingHorizontal: 40, overflow: 'visible' }}>
+							<OText size={16} lineHeight={24} weight={'500'}>{t('WANT_SOMETHING_ELSE', 'Do you want something else?')}</OText>
+							<UpsellingLayout />
+						</View>
+					}
+					<View style={{ paddingHorizontal: 40 }}>
+						<OText size={20} lineHeight={30} weight={600} style={{ marginTop: 10, marginBottom: 17 }}>{t('YOUR_CART', 'Your cart')}</OText>
+						<OrderSummary
+							cart={cart}
+							isCartPending={cart?.status === 2}
+							onNavigationRedirect={onNavigationRedirect}
+						/>
+					</View>
+				</ScrollView>
+				<View
+					style={{
+						alignItems: 'center',
+						bottom: props.isPage ? Platform.OS === 'ios' ? 0 : 20 : Platform.OS === 'ios' ? bottom + 59 : bottom + 125
+					}}
+				>
+					<OButton
+						imgRightSrc=''
+						text={t('CHECKOUT', 'Checkout')}
+						style={{ ...styles.closeUpsellingButton }}
+						textStyle={{ color: theme.colors.white, fontSize: 14 }}
+						onClick={() => {
+							handleUpsellingPage()
+							setIsCheckout(true)
+						}}
+					/>
+				</View>
+			</>
+		)
+	}
 
 	return (
 		<>
@@ -199,20 +211,20 @@ const UpsellingProductsUI = (props: UpsellingProductsParams) => {
 				<UpsellingLayout />
 			) : (
 				<>
-          {props.isPage ? (
-            <UpsellingContent />
-          ) : (
-            canOpenUpselling && !modalIsOpen && (
-              <OBottomPopup
-                title={''}
-                open={openUpselling}
-                onClose={() => handleUpsellingPage()}
-                isStatusBar
-              >
-                <UpsellingContent />
-              </OBottomPopup>
-            )
-          )}
+					{props.isPage ? (
+						<UpsellingContent />
+					) : (
+						canOpenUpselling && !modalIsOpen && (
+							<OBottomPopup
+								title={''}
+								open={openUpselling}
+								onClose={() => handleUpsellingPage()}
+								isStatusBar
+							>
+								<UpsellingContent />
+							</OBottomPopup>
+						)
+					)}
 				</>
 			)}
 		</>

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

@@ -3,17 +3,14 @@ import { TouchableOpacity, View } from 'react-native';
 import MaterialIcon from 'react-native-vector-icons/MaterialCommunityIcons';
 
 import { UDContainer, UDHeader, UDForm, UDInfo, EditBtn } from './styles';
+
 import {
 	UserFormDetails as UserFormController,
 	useLanguage,
 	useSession,
-	ToastType,
-	useToast
 } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
-import { OIcon, OText, OModal } from '../shared';
-import { VerifyPhone } from '../VerifyPhone';
-import Spinner from 'react-native-loading-spinner-overlay';
+import { OIcon, OText } from '../shared';
 
 import { UserFormDetailsUI } from '../UserFormDetails';
 import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
@@ -23,31 +20,27 @@ const UserDetailsUI = (props: any) => {
 		isEdit,
 		formState,
 		cleanFormState,
+		requiredFields,
+		onClose,
 		cartStatus,
 		toggleIsEdit,
 		validationFields,
 		isUserDetailsEdit,
 		phoneUpdate,
 		togglePhoneUpdate,
-		isCheckout,
-		checkPhoneCodeState,
-		handleSendVerifyCode,
-		handleCheckPhoneCode,
-		verifyPhoneState,
-		isVerifiedPhone,
-		setCheckPhoneCodeState
+		isCheckout
 	} = props
 
 	const theme = useTheme();
 
 	const [, t] = useLanguage()
 	const [{ user }] = useSession()
-	const [, { showToast }] = useToast();
-
 	const userData = props.userData || (!formState.result.error && formState.result?.result) || user
 
 	const [isModalVisible, setIsModalVisible] = useState(false);
+	const [isSubmit, setIsSubmit] = useState(false)
 	const [willVerifyOtpState, setWillVerifyOtpState] = useState(false);
+	const [checkPhoneCodeState, setCheckPhoneCodeState] = useState({ loading: false, result: { error: false } })
 	const [phoneInputData, setPhoneInputData] = useState({
 		error: '',
 		phone: {
@@ -56,7 +49,6 @@ const UserDetailsUI = (props: any) => {
 		},
 	});
 
-
 	useEffect(() => {
 		if (isUserDetailsEdit) {
 			!isEdit && toggleIsEdit()
@@ -68,6 +60,12 @@ const UserDetailsUI = (props: any) => {
 		cleanFormState({ changes: {} })
 	}
 
+	useEffect(() => {
+		if (isSubmit && !isEdit && requiredFields) {
+			onClose && onClose()
+		}
+	}, [isSubmit, requiredFields, isEdit])
+
 	useEffect(() => {
 		if (user?.cellphone && !user?.country_phone_code) {
 			togglePhoneUpdate(true)
@@ -76,54 +74,6 @@ const UserDetailsUI = (props: any) => {
 		}
 	}, [user?.country_phone_code])
 
-	const handleVerifyCodeClick = () => {
-		if (formState?.changes?.cellphone && formState?.changes?.country_phone_code) {
-			const { cellphone, country_phone_code: countryPhoneCode } = formState?.changes
-
-			setPhoneInputData({
-				error: '',
-				phone: {
-					country_phone_code: countryPhoneCode,
-					cellphone: cellphone,
-				},
-			});
-			handleSendVerifyCode({
-			  cellphone: cellphone,
-			  country_phone_code: countryPhoneCode
-			})
-		}
-	}
-
-	useEffect(() => {
-		if (willVerifyOtpState) handleVerifyCodeClick()
-	}, [willVerifyOtpState])
-
-	useEffect(() => {
-		if (verifyPhoneState && !verifyPhoneState?.loading) {
-			if (verifyPhoneState.result?.error) {
-				const message = typeof verifyPhoneState?.result?.result === 'string'
-					? verifyPhoneState?.result?.result
-					: verifyPhoneState?.result?.result[0]
-				verifyPhoneState.result?.result && showToast(
-					ToastType.Error,
-					message
-				)
-				setWillVerifyOtpState(false)
-				return
-			}
-
-			const okResult = verifyPhoneState.result?.result === 'OK'
-			if (okResult) {
-				!isModalVisible && setIsModalVisible(true)
-				setWillVerifyOtpState(false)
-			}
-		}
-	}, [verifyPhoneState])
-
-	useEffect(() => {
-		if (isVerifiedPhone) setIsModalVisible(false)
-	}, [isVerifiedPhone])
-
 	return (
 		<>
 			{(validationFields.loading || formState.loading) && (
@@ -138,10 +88,10 @@ const UserDetailsUI = (props: any) => {
 			{!(validationFields.loading || formState.loading) && (
 				<UDContainer>
 					<UDHeader>
-						<OText size={16} lineHeight={24} weight={'500'}>
+						<OText size={16} lineHeight={24} weight={'500'} color={theme.colors.textNormal}>
 							{t('CUSTOMER_DETAILS', 'Customer Details')}
 						</OText>
-						{cartStatus !== 2 && (
+						{cartStatus !== 2 && !requiredFields && (
 							!isEdit ? (
 								<EditBtn onPress={() => toggleIsEdit()} activeOpacity={0.7}>
 									<OIcon
@@ -196,22 +146,6 @@ const UserDetailsUI = (props: any) => {
 					)}
 				</UDContainer>
 			)}
-			<OModal
-				open={isModalVisible}
-				onClose={() => setIsModalVisible(false)}
-				entireModal
-			>
-				<VerifyPhone
-				phone={phoneInputData.phone}
-				verifyPhoneState={verifyPhoneState}
-				checkPhoneCodeState={checkPhoneCodeState}
-				handleCheckPhoneCode={handleCheckPhoneCode}
-				setCheckPhoneCodeState={setCheckPhoneCodeState}
-				handleVerifyCodeClick={handleVerifyCodeClick}
-				onClose={() => setIsModalVisible(false)}
-				/>
-			</OModal>
-			<Spinner visible={verifyPhoneState?.loading} />
 		</>
 	)
 }

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

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { Platform, StyleSheet, View } from 'react-native';
+import { Platform, StyleSheet, TouchableOpacity } from 'react-native';
 import { useSession, useLanguage, ToastType, useToast, useConfig } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
 import { useForm, Controller } from 'react-hook-form';
@@ -17,6 +17,9 @@ export const UserFormDetailsUI = (props: any) => {
 		isEdit,
 		formState,
 		showField,
+		requiredFields,
+		onClose,
+		setIsSubmit,
 		cleanFormState,
 		onCloseProfile,
 		isRequiredField,
@@ -76,6 +79,8 @@ export const UserFormDetailsUI = (props: any) => {
 
 	const [{ user }] = useSession();
 	const [userPhoneNumber, setUserPhoneNumber] = useState<any>(null);
+	const [isValid, setIsValid] = useState(false)
+  const [isChanged, setIsChanged] = useState(false)
 	const [phoneInputData, setPhoneInputData] = useState({
 		error: '',
 		phone: {
@@ -141,8 +146,8 @@ export const UserFormDetailsUI = (props: any) => {
 			if (
 				formState.changes?.cellphone === null &&
 				((validationFields?.fields?.checkout?.cellphone?.enabled &&
-					validationFields?.fields?.checkout?.cellphone?.required) ||
-					configs?.verification_phone_required?.value === '1')
+          validationFields?.fields?.checkout?.cellphone?.required) ||
+          configs?.verification_phone_required?.value === '1')
 			) {
 				showToast(
 					ToastType.Error,
@@ -153,9 +158,6 @@ export const UserFormDetailsUI = (props: any) => {
 				);
 				return;
 			}
-			if (formState?.changes?.cellphone && !isVerifiedPhone) {
-				showToast(ToastType.Error, t('VERIFY_ERROR_PHONE_NUMBER', 'The Phone Number field is not verified'))
-			}
 			let changes = null;
 			if (user?.cellphone && !userPhoneNumber) {
 				changes = {
@@ -163,6 +165,7 @@ export const UserFormDetailsUI = (props: any) => {
 					cellphone: '',
 				};
 			}
+			setIsSubmit && setIsSubmit(true)
 			handleButtonUpdateClick(changes);
 		}
 	};
@@ -182,7 +185,7 @@ export const UserFormDetailsUI = (props: any) => {
 		handleChangeInput(phoneNumber, true);
 	};
 
-	const changeCountry = (country : any) => {
+	const changeCountry = (country: any) => {
 		let countryCode = {
 			country_code: {
 				name: 'country_code',
@@ -229,10 +232,16 @@ export const UserFormDetailsUI = (props: any) => {
 
 	useEffect(() => {
 		if (!phoneInputData.error && phoneInputData?.phone?.country_phone_code && phoneInputData?.phone?.cellphone) {
-			setWillVerifyOtpState(true)
+			setWillVerifyOtpState?.(true)
 		}
-	}, [phoneInputData])
+	}, [phoneInputData, configs?.verification_phone_required?.value, isChanged])
 
+	useEffect(() => {
+		if (!requiredFields || formState?.changes?.length === 0) return
+			const _isValid = requiredFields.every((key: any) => formState?.changes[key])
+			setIsValid(_isValid)
+		}, [formState?.changes, requiredFields])
+	
 	return (
 		<>
 			<UDForm>
@@ -245,7 +254,7 @@ export const UserFormDetailsUI = (props: any) => {
 							}).map(
 								(field: any) =>
 									showField &&
-									showField(field.code) && (
+									showField(field.code) && ((requiredFields && requiredFields.includes(field.code)) || !requiredFields) && (
 										<React.Fragment key={field.id}>
 											<Controller
 												key={field.id}
@@ -319,15 +328,15 @@ export const UserFormDetailsUI = (props: any) => {
 									),
 							)}
 
-							{!!showInputPhoneNumber && (
+							{!!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)}
+										changeCountry={(val: any) => changeCountry(val)}
 										defaultValue={phoneUpdate ? '' : user?.cellphone}
-										defaultCode={user?.country_code ?? user?.country_phone_code ?? null}
+										defaultCode={user?.country_phone_code || null}
 										boxStyle={styles.phoneSelect}
 										inputStyle={styles.phoneInputStyle}
 										textStyle={{ color: theme.colors.textNormal, fontSize: 12, padding: 0 }}
@@ -344,69 +353,76 @@ export const UserFormDetailsUI = (props: any) => {
 									)}
 								</WrapperPhone>
 							)}
-							<Controller
-								control={control}
-								render={() => (
-									<>
-										<OText size={14} lineHeight={21} color={theme.colors.textNormal} weight={'500'} style={{ textTransform: 'capitalize', alignSelf: 'flex-start' }}>
-											{t('PASSWORD', 'Password')}
-										</OText>
-										<OInput
-											name='password'
-											placeholder={t('FRONT_VISUALS_PASSWORD', 'Password')}
-											inputStyle={styles.inputStyle}
-											style={{ paddingLeft: 0, paddingRight: 0, marginTop: 6, height: 44, minHeight: 44 }}
-											autoCapitalize='none'
-											isDisabled={false}
-											value={
-												formState?.changes['password'] ??
-												(user && user['password']) ??
-												''
-											}
-											onChange={(val: any) => {
-												setValue('password', val.target.value)
-												handleChangeInput(val)
-											}}
-											autoCorrect
-											type='default'
-											returnKeyType="done"
-											autoCompleteType='off'
-											isSecured
-										/>
-									</>
-								)}
-								name='password'
-								rules={getInputRules({ name: 'password', code: 'password' })}
-								defaultValue=''
-							/>
-							<View style={{ flexDirection: 'row', alignItems: 'center', marginBottom: 20, width: '100%' }}>
+							{!requiredFields && (
+								<Controller
+									control={control}
+									render={() => (
+										<>
+											<OText size={14} lineHeight={21} color={theme.colors.textNormal} weight={'500'} style={{ textTransform: 'capitalize', alignSelf: 'flex-start' }}>
+												{t('PASSWORD', 'Password')}
+											</OText>
+											<OInput
+												name='password'
+												placeholder={t('FRONT_VISUALS_PASSWORD', 'Password')}
+												inputStyle={styles.inputStyle}
+												style={{ paddingLeft: 0, paddingRight: 0, marginTop: 6, height: 44, minHeight: 44 }}
+												autoCapitalize='none'
+												isDisabled={false}
+												value={
+													formState?.changes['password'] ??
+													(user && user['password']) ??
+													''
+												}
+												onChange={(val: any) => {
+													setValue('password', val.target.value)
+													handleChangeInput(val)
+												}}
+												autoCorrect
+												type='default'
+												returnKeyType="done"
+												autoCompleteType='off'
+												isSecured
+											/>
+										</>
+									)}
+									name='password'
+									rules={getInputRules({ name: 'password', code: 'password' })}
+									defaultValue=''
+								/>
+							)}
+							{!requiredFields && (
 								<Controller
 									control={control}
 									render={({ onChange, value }: any) => (
-										<CheckBox
-											value={value}
-											onValueChange={newValue => {
-												onChange(newValue)
-												handleChangePromotions(newValue)
-											}}
-											boxType={'square'}
-											tintColors={{
-												true: theme.colors.primary,
-												false: theme.colors.disabled
+										<TouchableOpacity
+											style={{ flexDirection: 'row', alignItems: 'center', marginBottom: 20, width: '100%' }}
+											onPress={() => {
+												onChange(!value)
+												handleChangePromotions(!value)
 											}}
-											tintColor={theme.colors.disabled}
-											onCheckColor={theme.colors.primary}
-											onTintColor={theme.colors.primary}
-											style={Platform.OS === 'ios' && styles.checkBoxStyle}
-										/>
+										>
+											<CheckBox
+												value={value}
+												boxType={'square'}
+												tintColors={{
+													true: theme.colors.primary,
+													false: theme.colors.disabled
+												}}
+												tintColor={theme.colors.disabled}
+												onCheckColor={theme.colors.primary}
+												onTintColor={theme.colors.primary}
+												style={Platform.OS === 'ios' && styles.checkBoxStyle}
+											/>
+											<OText style={{ fontSize: 14, paddingHorizontal: 5, paddingLeft: 10 }}>{t('RECEIVE_NEWS_EXCLUSIVE_PROMOTIONS', 'Receive newsletters and exclusive promotions')}</OText>
+										</TouchableOpacity>
 									)}
 									name='promotions'
 									defaultValue={formState?.result?.result
 										? !!formState?.result?.result?.settings?.notification?.newsletter
 										: !!(formState?.changes?.settings?.notification?.newsletter ?? (user && user?.settings?.notification?.newsletter))}
 								/>
-								<OText style={{ fontSize: 14, paddingHorizontal: 5 }}>{t('RECEIVE_NEWS_EXCLUSIVE_PROMOTIONS', 'Receive newsletters and exclusive promotions')}</OText>
-							</View>
+							)}
+
 						</UDWrapper>
 					)}
 				{validationFields?.loading && (
@@ -438,6 +454,22 @@ export const UserFormDetailsUI = (props: any) => {
 						)}
 				</>
 			)}
+			{requiredFields && (
+				<OButton
+					text={
+						formState.loading
+							? t('UPDATING', 'Updating...')
+							: t('CONTINUE', 'Continue')
+					}
+					bgColor={theme.colors.white}
+					textStyle={{ color: theme.colors.primary, fontSize: 14 }}
+					borderColor={theme.colors.primary}
+					isDisabled={formState.loading || !isValid}
+					imgRightSrc={null}
+					style={{ borderRadius: 7.6, shadowOpacity: 0, width: '100%', borderWidth: 1, marginTop: 20, marginBottom: 20 }}
+					onClick={handleSubmit(onSubmit)}
+				/>
+			)}
 		</>
 	);
 };