ordering-ui-react-native 0.15.3 → 0.15.4-release

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

@@ -68,7 +68,6 @@ const SignupFormUI = (props: SignupParams) => {
 
 	const theme = useTheme();
 
-
 	const style = StyleSheet.create({
 		btnOutline: {
 			backgroundColor: '#FFF',
@@ -77,7 +76,6 @@ const SignupFormUI = (props: SignupParams) => {
 		inputStyle: {
 			marginBottom: 20,
 			borderWidth: 1,
-			borderColor: theme.colors.border,
 			borderRadius: 7.6,
 		},
 		wrappText: {
@@ -102,7 +100,7 @@ const SignupFormUI = (props: SignupParams) => {
 	const [, t] = useLanguage();
 	const [, { login }] = useSession();
 	const [{ configs }] = useConfig();
-	const { control, handleSubmit, errors } = useForm();
+	const { control, handleSubmit, errors, register, setValue } = useForm();
 
 	const [passwordSee, setPasswordSee] = useState(false);
 	const [formValues, setFormValues] = useState(null);
@@ -227,7 +225,7 @@ const SignupFormUI = (props: SignupParams) => {
 			handleButtonSignupClick &&
 				handleButtonSignupClick({
 					...values,
-					...phoneInputData.phone,
+					...((phoneInputData.phone.cellphone !== null && phoneInputData.phone.country_phone_code !== null) && {...phoneInputData.phone}),
 				});
 			if (
 				!formState.loading &&
@@ -298,36 +296,23 @@ const SignupFormUI = (props: SignupParams) => {
 
 	useEffect(() => {
 		if (Object.keys(errors).length > 0) {
-			// Convert all errors in one string to show in toast provider
-			const list = Object.values(errors);
-			if (phoneInputData.error) {
-				list.push({ message: phoneInputData.error });
-			}
-			if (
-				!phoneInputData.error &&
-				!phoneInputData.phone.country_phone_code &&
-				!phoneInputData.phone.cellphone &&
-				((validationFields?.fields?.checkout?.cellphone?.enabled &&
-          validationFields?.fields?.checkout?.cellphone?.required) ||
-          configs?.verification_phone_required?.value === '1')
-			) {
-				list.push({
-					message: t(
-						'VALIDATION_ERROR_MOBILE_PHONE_REQUIRED',
-						'The field Mobile phone is required.',
-					),
-				});
-			}
-			let stringError = '';
-			list.map((item: any, i: number) => {
-				stringError +=
-					i + 1 === list.length ? `- ${item.message}` : `- ${item.message}\n`;
-			});
-			showToast(ToastType.Error, stringError);
 			setIsLoadingVerifyModal(false);
 		}
 	}, [errors]);
 
+	useEffect(() => {
+    register('cellphone', {
+      required: isRequiredField('cellphone')
+        ? t('VALIDATION_ERROR_MOBILE_PHONE_REQUIRED', 'The field Mobile phone is required').replace('_attribute_', t('CELLPHONE', 'Cellphone'))
+        : null
+    })
+  }, [register])
+
+	useEffect(() => {
+		if (phoneInputData?.phone?.cellphone) setValue('cellphone', phoneInputData?.phone?.cellphone, '')
+		else setValue('cellphone', '')
+	}, [phoneInputData?.phone?.cellphone])
+
 	useEffect(() => {
 		if (verifyPhoneState && !verifyPhoneState?.loading) {
 			if (verifyPhoneState.result?.error) {
@@ -412,48 +397,58 @@ const SignupFormUI = (props: SignupParams) => {
 									!notValidationFields.includes(field.code) &&
 									showField &&
 									showField(field.code) && (
-										<Controller
-											key={field.id}
-											control={control}
-											render={({ onChange, value }: any) => (
-												<OInput
-													placeholder={t(field.name)}
-													style={style.inputStyle}
-													icon={
-														field.code === 'email'
-															? theme.images.general.email
-															: theme.images.general.user
-													}
-													value={value}
-													onChange={(val: any) =>
-														field.code !== 'email'
-															? onChange(val)
-															: handleChangeInputEmail(val, onChange)
-													}
-													autoCapitalize={
-														field.code === 'email' ? 'none' : 'sentences'
-													}
-													autoCorrect={field.code === 'email' && false}
-													type={
-														field.code === 'email' ? 'email-address' : 'default'
-													}
-													autoCompleteType={
-														field.code === 'email' ? 'email' : 'off'
-													}
-													returnKeyType="next"
-													blurOnSubmit={false}
-													forwardRef={(ref: any) => handleRefs(ref, field.code)}
-													onSubmitEditing={() =>
-														field.code === 'email'
-															? phoneRef?.current?.focus?.()
-															: handleFocusRef(getNextFieldCode(i))
-													}
-												/>
+										<React.Fragment key={field.id}>
+											{errors?.[`${field.code}`] && (
+												<OText
+													size={14}
+													color={theme.colors.danger5}
+													weight={'normal'}>
+													{errors?.[`${field.code}`]?.message} {errors?.[`${field.code}`]?.type === 'required' && '*'}
+												</OText>
 											)}
-											name={field.code}
-											rules={getInputRules(field)}
-											defaultValue=""
-										/>
+											<Controller
+												control={control}
+												render={({ onChange, value }: any) => (
+													<OInput
+														placeholder={t(field.name)}
+														style={style.inputStyle}
+														icon={
+															field.code === 'email'
+																? theme.images.general.email
+																: theme.images.general.user
+														}
+														value={value}
+														onChange={(val: any) =>
+															field.code !== 'email'
+																? onChange(val)
+																: handleChangeInputEmail(val, onChange)
+														}
+														autoCapitalize={
+															field.code === 'email' ? 'none' : 'sentences'
+														}
+														autoCorrect={field.code === 'email' && false}
+														type={
+															field.code === 'email' ? 'email-address' : 'default'
+														}
+														autoCompleteType={
+															field.code === 'email' ? 'email' : 'off'
+														}
+														returnKeyType="next"
+														blurOnSubmit={false}
+														forwardRef={(ref: any) => handleRefs(ref, field.code)}
+														onSubmitEditing={() =>
+															field.code === 'email'
+																? phoneRef?.current?.focus?.()
+																: handleFocusRef(getNextFieldCode(i))
+														}
+														borderColor={errors?.[`${field.code}`] ? theme.colors.danger5 : theme.colors.border}
+													/>
+												)}
+												name={field.code}
+												rules={getInputRules(field)}
+												defaultValue=""
+											/>
+										</React.Fragment>
 									),
 							)}
 
@@ -467,6 +462,7 @@ const SignupFormUI = (props: SignupParams) => {
 											returnKeyType: 'next',
 											onSubmitEditing: () => passwordRef?.current?.focus?.(),
 										}}
+										isStartValidation={errors?.cellphone}
 									/>
 								</View>
 							)}
@@ -499,99 +495,122 @@ const SignupFormUI = (props: SignupParams) => {
 							</View>
 
 							{configs?.terms_and_conditions?.value === 'true' && (
-								<View style={{ flexDirection: 'row', alignItems: 'center', marginBottom: 20 }}>
+								<>
+									{errors?.termsAccept && (
+										<OText
+											size={14}
+											color={theme.colors.danger5}
+											weight={'normal'}>
+											{errors?.termsAccept?.message}*
+										</OText>
+									)}
+									<View style={{ flexDirection: 'row', alignItems: 'center', marginBottom: 20 }}>
+										<Controller
+											control={control}
+											render={({ onChange, value }: any) => (
+												<CheckBox
+													value={value}
+													onValueChange={newValue => {
+														onChange(newValue)
+													}}
+													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' && style.checkBoxStyle}
+												/>
+											)}
+											name='termsAccept'
+											rules={{
+												required: t('VALIDATION_ERROR_ACCEPTED', 'The _attribute_ must be accepted.').replace('_attribute_', t('TERMS_AND_CONDITIONS', 'Terms & Conditions'))
+											}}
+											defaultValue={false}
+										/>
+										<OText style={{ fontSize: 14, paddingHorizontal: 5 }}>{t('TERMS_AND_CONDITIONS_TEXT', 'I agree with')}</OText>
+										<OButton
+											imgRightSrc={null}
+											text={t('TERMS_AND_CONDITIONS', 'Terms & Conditions')}
+											bgColor='#FFF'
+											borderColor='#FFF'
+											style={{ paddingLeft: 0, paddingRight: 0, height: 30, shadowColor: '#FFF' }}
+											textStyle={{ color: theme.colors.primary, marginLeft: 0, marginRight: 0 }}
+											onClick={() => handleOpenTermsUrl(configs?.terms_and_conditions_url?.value)}
+										/>
+									</View>
+								</>
+
+							)}
+
+							{signupTab !== 'cellphone' && (
+								<>
+									{errors?.password && (
+										<OText
+											size={14}
+											color={theme.colors.danger5}
+											weight={'normal'}>
+											{errors?.password?.message} {errors?.password?.type === 'required' && '*'}
+										</OText>
+									)}
 									<Controller
 										control={control}
 										render={({ onChange, value }: any) => (
-											<CheckBox
+											<OInput
+												isSecured={!passwordSee ? true : false}
+												placeholder={t('PASSWORD', 'Password')}
+												style={style.inputStyle}
+												icon={theme.images.general.lock}
+												iconCustomRight={
+													!passwordSee ? (
+														<MaterialCommunityIcons
+															name="eye-outline"
+															color={theme.colors.disabled}
+															size={24}
+															onPress={() => setPasswordSee(!passwordSee)}
+														/>
+													) : (
+														<MaterialCommunityIcons
+															name="eye-off-outline"
+															color={theme.colors.disabled}
+															size={24}
+															onPress={() => setPasswordSee(!passwordSee)}
+														/>
+													)
+												}
 												value={value}
-												onValueChange={newValue => {
-													onChange(newValue)
-												}}
-												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' && style.checkBoxStyle}
+												onChange={(val: any) => onChange(val)}
+												returnKeyType="done"
+												onSubmitEditing={handleSubmit(onSubmit)}
+												blurOnSubmit
+												forwardRef={passwordRef}
+												borderColor={errors?.password ? theme.colors.danger5 : theme.colors.border}
 											/>
 										)}
-										name='termsAccept'
+										name="password"
 										rules={{
-											required: t('VALIDATION_ERROR_ACCEPTED', 'The _attribute_ must be accepted.').replace('_attribute_', t('TERMS_AND_CONDITIONS', 'Terms & Conditions'))
+											required: isRequiredField('password')
+												? t(
+													'VALIDATION_ERROR_PASSWORD_REQUIRED',
+													'The field Password is required',
+												).replace('_attribute_', t('PASSWORD', 'password'))
+												: null,
+											minLength: {
+												value: 8,
+												message: t(
+													'VALIDATION_ERROR_PASSWORD_MIN_STRING',
+													'The Password must be at least 8 characters.',
+												)
+													.replace('_attribute_', t('PASSWORD', 'Password'))
+													.replace('_min_', 8),
+											},
 										}}
-										defaultValue={false}
-									/>
-									<OText style={{ fontSize: 14, paddingHorizontal: 5 }}>{t('TERMS_AND_CONDITIONS_TEXT', 'I agree with')}</OText>
-									<OButton
-										imgRightSrc={null}
-										text={t('TERMS_AND_CONDITIONS', 'Terms & Conditions')}
-										bgColor='#FFF'
-										borderColor='#FFF'
-										style={{ paddingLeft: 0, paddingRight: 0, height: 30, shadowColor: '#FFF' }}
-										textStyle={{ color: theme.colors.primary, marginLeft: 0, marginRight: 0 }}
-										onClick={() => handleOpenTermsUrl(configs?.terms_and_conditions_url?.value)}
+										defaultValue=""
 									/>
-								</View>
-							)}
+								</>
 
-							{signupTab !== 'cellphone' && (
-								<Controller
-									control={control}
-									render={({ onChange, value }: any) => (
-										<OInput
-											isSecured={!passwordSee ? true : false}
-											placeholder={t('PASSWORD', 'Password')}
-											style={style.inputStyle}
-											icon={theme.images.general.lock}
-											iconCustomRight={
-												!passwordSee ? (
-													<MaterialCommunityIcons
-														name="eye-outline"
-														color={theme.colors.disabled}
-														size={24}
-														onPress={() => setPasswordSee(!passwordSee)}
-													/>
-												) : (
-													<MaterialCommunityIcons
-														name="eye-off-outline"
-														color={theme.colors.disabled}
-														size={24}
-														onPress={() => setPasswordSee(!passwordSee)}
-													/>
-												)
-											}
-											value={value}
-											onChange={(val: any) => onChange(val)}
-											returnKeyType="done"
-											onSubmitEditing={handleSubmit(onSubmit)}
-											blurOnSubmit
-											forwardRef={passwordRef}
-										/>
-									)}
-									name="password"
-									rules={{
-										required: isRequiredField('password')
-											? t(
-												'VALIDATION_ERROR_PASSWORD_REQUIRED',
-												'The field Password is required',
-											).replace('_attribute_', t('PASSWORD', 'password'))
-											: null,
-										minLength: {
-											value: 8,
-											message: t(
-												'VALIDATION_ERROR_PASSWORD_MIN_STRING',
-												'The Password must be at least 8 characters.',
-											)
-												.replace('_attribute_', t('PASSWORD', 'Password'))
-												.replace('_min_', 8),
-										},
-									}}
-									defaultValue=""
-								/>
 							)}
 						</>
 					) : (

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

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { View, StyleSheet, useWindowDimensions, Keyboard } from 'react-native';
-import { useLanguage, useSession, useConfig } from 'ordering-components/native';
+import { useLanguage, useSession } from 'ordering-components/native';
 import {
 	StripeProvider,
 	CardField,
@@ -13,7 +13,6 @@ import { ErrorMessage } from './styles';
 import { StripeElementsForm as StripeFormController } from './naked';
 import { OButton, OText } from '../shared';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { StripeMethodForm } from '../../../../../src/components/StripeMethodForm';
 
 const StripeElementsFormUI = (props: any) => {
 	const {
@@ -23,17 +22,12 @@ const StripeElementsFormUI = (props: any) => {
 		businessId,
 		requirements,
 		stripeTokenHandler,
-		methodsPay,
-		paymethod,
-		onCancel,
-		cart,
 	} = props;
 
 	const theme = useTheme();
 
 	const [, t] = useLanguage();
 	const [{ user }] = useSession();
-	const [{ configs }] = useConfig();
 	const [card, setCard] = useState<any>(null);
 	const [isCompleted, setIsCompleted] = useState(false);
 	const [errors, setErrors] = useState('')
@@ -43,30 +37,30 @@ const StripeElementsFormUI = (props: any) => {
 	const { top, bottom } = useSafeAreaInsets();
 	const [isKeyboardShow, setIsKeyboardShow] = useState(false);
 
-	let billingDetails: any = {}
+  let billingDetails: any = {}
 
-	if (user?.name || user?.lastname) {
-		if (user?.name) {
-			billingDetails.name = user?.name
-		}
-		if (user?.lastname) {
-			billingDetails.name = `${billingDetails?.name} ${user?.lastname}`
-		}
-	}
+  if (user?.name || user?.lastname) {
+    if (user?.name) {
+      billingDetails.name = user?.name
+    }
+    if (user?.lastname) {
+      billingDetails.name = `${billingDetails?.name} ${user?.lastname}`
+    }
+  }
 
-	if (user?.email) {
-		billingDetails.email = user?.email
-	}
+  if (user?.email) {
+    billingDetails.email = user?.email
+  }
 
-	if (user?.address) {
-		billingDetails.addressLine1 = user?.address
-	}
+  if (user?.address) {
+    billingDetails.addressLine1 = user?.address
+  }
 
 	const createPayMethod = async () => {
-		const params: any = { type: 'Card' }
-		if (Object.keys(billingDetails).length > 0) {
-			params.billingDetails = billingDetails
-		}
+    const params: any = { type: 'Card' }
+    if (Object.keys(billingDetails).length > 0) {
+      params.billingDetails = billingDetails
+    }
 		try {
 			setCreatePmLoading(true)
 			const { paymentMethod } = await createPaymentMethod(params);
@@ -99,10 +93,10 @@ const StripeElementsFormUI = (props: any) => {
 			createPayMethod();
 			return
 		}
-		const params: any = { type: 'Card' }
-		if (Object.keys(billingDetails).length > 0) {
-			params.billingDetails = billingDetails
-		}
+    const params: any = { type: 'Card' }
+    if (Object.keys(billingDetails).length > 0) {
+      params.billingDetails = billingDetails
+    }
 		try {
 			const { setupIntent, error } = await confirmSetupIntent(requirements, params);
 
@@ -158,35 +152,27 @@ const StripeElementsFormUI = (props: any) => {
 		<View style={{ ...styles.container, height: height - top - bottom - 60 - (isKeyboardShow ? 250 : 0) }}>
 			{publicKey ? (
 				<View style={{ flex: 1 }}>
-					<StripeProvider
-						publishableKey={publicKey}
-						merchantIdentifier={`merchant.${configs.apple_app_id}`}
-					>
-						{methodsPay?.includes(paymethod) ? (
-							<StripeMethodForm
-								handleSource={handleSource}
-								onCancel={onCancel}
-								cart={cart}
-								setErrors={setErrors}
-								paymethod={paymethod}
-								devMode={publicKey?.includes('test')}
-							/>
-						) : (
-							<CardField
-								postalCodeEnabled={true}
-								cardStyle={{
-									backgroundColor: '#FFFFFF',
-									textColor: '#000000',
-								}}
-								style={{
-									width: '100%',
-									height: 50,
-									marginVertical: 30,
-									zIndex: 9999,
-								}}
-								onCardChange={(cardDetails: any) => setCard(cardDetails)}
-							/>
-						)}
+					<StripeProvider publishableKey={publicKey}>
+						<CardField
+							postalCodeEnabled={false}
+							cardStyle={{
+								backgroundColor: '#FFFFFF',
+								textColor: '#000000',
+								fontSize: 17,
+								styles: {
+									
+								}
+							}}
+							style={{
+								width: '100%',
+								height: 50,
+								marginVertical: 50,
+								borderWidth: 1,
+								borderColor: theme.colors.border,
+								borderRadius: 7.6,
+							}}
+							onCardChange={(cardDetails: any) => setCard(cardDetails)}
+						/>
 					</StripeProvider>
 					{!!errors && (
 						<ErrorMessage>
@@ -211,19 +197,16 @@ const StripeElementsFormUI = (props: any) => {
 					</OText>
 				</ErrorMessage>
 			)}
-			{!methodsPay?.includes(paymethod) && (
-				<OButton
-					text={t('SAVE_CARD', 'Save card')}
-					bgColor={isCompleted ? theme.colors.primary : theme.colors.backgroundGray}
-					borderColor={isCompleted ? theme.colors.primary : theme.colors.backgroundGray}
-					style={styles.btnAddStyle}
-					textStyle={{ color: 'white' }}
-					imgRightSrc={null}
-					onClick={() => handleSaveCard()}
-					isDisabled={!isCompleted}
-					isLoading={confirmSetupLoading || values.loadingAdd || createPmLoading}
-				/>
-			)}
+			<OButton
+				text={t('SAVE_CARD', 'Save card')}
+				bgColor={isCompleted ? theme.colors.primary : theme.colors.backgroundGray}
+				borderColor={isCompleted ? theme.colors.primary : theme.colors.backgroundGray}
+				style={styles.btnAddStyle}
+				textStyle={{ color: 'white', fontSize: 14 }}
+				imgRightSrc={null}
+				onClick={isCompleted ? () => handleSaveCard() : () => { }}
+				isLoading={confirmSetupLoading || values.loadingAdd || createPmLoading}
+			/>
 		</View>
 	)
 }

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

@@ -1,5 +1,5 @@
-import React, { Mixin } from 'react'
-import { useLanguage } from 'ordering-components/native'
+import React from 'react'
+import { useLanguage, useUtils } from 'ordering-components/native'
 import { SingleProductCard } from '../SingleProductCard'
 import { TaxInformationContainer, ProductContainer } from './styles'
 import { OText } from '../shared'
@@ -9,12 +9,13 @@ interface taxInformationParams {
     name: string,
     description?: string,
     rate: string | number,
-    type: number,
+    type: string | number,
     fixed?: number,
     percentage?: number,
     id: number,
-    discounts?: any
-  } | null,
+    discounts?: any,
+    rate_type?: number
+  },
   products: Array<any>,
   type: string
 }
@@ -27,8 +28,13 @@ export const TaxInformation = (props: taxInformationParams) => {
   } = props
 
   const [, t] = useLanguage()
+  const [{ parsePrice }] = useUtils()
 
   const includedOnPriceString = data?.type === 1 ? `(${t('INCLUDED_ON_PRICE', 'Included on price')})` : `(${t('NOT_INCLUDED_ON_PRICE', 'Not included on price')})`
+  const offersHideArray = ['offer_target_2', 'offer_target_3']
+  const hideProductsSectionOffers = offersHideArray.includes(type)
+  const dataHideArray : Array<string | number> = ['platform', 'business']
+  const hideProductsSectionData = dataHideArray.includes(data.type)
 
   const getFilterValidation = (product: any) => {
     return (
@@ -52,8 +58,12 @@ export const TaxInformation = (props: taxInformationParams) => {
 
   return (
     <TaxInformationContainer>
+      <OText size={24} style={{ alignSelf: 'center', textAlign: 'center' }} mBottom={10}>
+      {`${data?.name ||
+              t('INHERIT_FROM_BUSINESS', 'Inherit from business')} ${data?.rate_type !== 2 ? `(${typeof data?.rate === 'number' ? `${data?.rate}%` : `${parsePrice(data?.fixed ?? 0)} + ${data?.percentage}%`})` : ''}  `}
+      </OText>
       {!!data?.description ? (
-        <OText size={24} style={{ alignSelf: 'center', textAlign: 'center' }} mBottom={10}>
+        <OText size={20} style={{ alignSelf: 'center', textAlign: 'center' }} mBottom={10}>
           {t('DESCRIPTION', 'Description')}: {data?.description} {data?.type && !type?.includes('offer') && includedOnPriceString}
         </OText>
       ) : (
@@ -61,7 +71,7 @@ export const TaxInformation = (props: taxInformationParams) => {
           {t('WITHOUT_DESCRIPTION', 'Without description')}
         </OText>
       )}
-      {!(type === 'offer_target_2' || type === 'offer_target_3') && (
+      {!hideProductsSectionOffers && !hideProductsSectionData && (
         <>
           <OText>{t('OTHER_PRODUCTS_WITH_THIS', 'Other products with this')} {getTypeString()}:</OText>
           <ProductContainer>

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

@@ -157,6 +157,12 @@ const UpsellingProductsUI = (props: UpsellingProductsParams) => {
           </TopActions>
         </TopBar>
         <ScrollView style={{ 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
@@ -165,12 +171,6 @@ const UpsellingProductsUI = (props: UpsellingProductsParams) => {
               onNavigationRedirect={onNavigationRedirect}
             />
           </View>
-		  {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>
-          }
         </ScrollView>
         <View
           style={{