ordering-ui-react-native 0.14.88 → 0.14.90-release

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/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={{

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';
@@ -29,33 +26,15 @@ const UserDetailsUI = (props: any) => {
 		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 [willVerifyOtpState, setWillVerifyOtpState] = useState(false);
-	const [phoneInputData, setPhoneInputData] = useState({
-		error: '',
-		phone: {
-			country_phone_code: null,
-			cellphone: null,
-		},
-	});
-
 
 	useEffect(() => {
 		if (isUserDetailsEdit) {
@@ -76,54 +55,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) && (
@@ -186,32 +117,10 @@ const UserDetailsUI = (props: any) => {
 							)}
 						</UDInfo>
 					) : (
-						<UserFormDetailsUI
-							{...props}
-							phoneUpdate={phoneUpdate}
-							togglePhoneUpdate={togglePhoneUpdate}
-							isCheckout={isCheckout}
-							setWillVerifyOtpState={setWillVerifyOtpState}
-						/>
+						<UserFormDetailsUI {...props} phoneUpdate={phoneUpdate} togglePhoneUpdate={togglePhoneUpdate} isCheckout={isCheckout} />
 					)}
 				</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

@@ -25,8 +25,6 @@ export const UserFormDetailsUI = (props: any) => {
 		handleButtonUpdateClick,
 		phoneUpdate,
 		hideUpdateButton,
-		setWillVerifyOtpState,
-		isVerifiedPhone,
 		handleChangePromotions
 	} = props;
 
@@ -141,8 +139,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 +151,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 = {
@@ -216,13 +211,6 @@ export const UserFormDetailsUI = (props: any) => {
 			}
 		}
 	}, [user, isEdit]);
-
-	useEffect(() => {
-		if (!phoneInputData.error && phoneInputData?.phone?.country_phone_code && phoneInputData?.phone?.cellphone) {
-			setWillVerifyOtpState(true)
-		}
-	}, [phoneInputData])
-
 	return (
 		<>
 			<UDForm>

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

@@ -16,6 +16,7 @@ import { LogoutButton } from '../LogoutButton'
 import { LanguageSelector } from '../LanguageSelector'
 import MessageCircle from 'react-native-vector-icons/AntDesign'
 import Ionicons from 'react-native-vector-icons/Ionicons'
+import FastImage from 'react-native-fast-image'
 
 import {
 	OIcon,
@@ -135,18 +136,24 @@ const ProfileListUI = (props: ProfileParams) => {
 	}
 
 	return (
-		<View style={{ flex: 1, height: height - top - bottom - 62 }}>
-			<OText size={24} style={{ marginTop: 15, paddingHorizontal: 40 }}>
+		<View style={{ flex: 1, height: height - top - bottom - 62, paddingTop: 20 }}>
+			{/* <OText size={24} style={{ marginTop: 15, paddingHorizontal: 40 }}>
 				{t('PROFILE', 'Profile')}
-			</OText>
+			</OText> */}
 			<CenterView style={styles.pagePadding}>
 				<View style={styles.photo}>
-					<OIcon
-						url={user?.photo}
-						src={!user?.photo && theme.images.general.user}
-						width={60}
-						height={60}
-					/>
+					{user?.photo ? (
+						<FastImage
+							style={{ height: 60, width: 60, borderRadius: 8 }}
+							source={{
+								uri: user?.photo,
+								priority: FastImage.priority.normal,
+							}}
+							resizeMode={FastImage.resizeMode.cover}
+						/>
+					) : (
+						<Ionicons name='person-outline' size={50} style={{ marginRight: 10 }} />
+					)}
 				</View>
 				<View style={{ flexBasis: '70%' }}>
 					<OText size={20} lineHeight={30} weight={Platform.OS === 'ios' ? '500' : 'bold'} color={theme.colors.textNormal}>{user?.name} {user?.lastname}</OText>

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

@@ -20,6 +20,8 @@ import { CenterView } from './styles';
 import NavBar from '../NavBar';
 import { Container } from '../../layouts/Container';
 import { VerifyPhone } from '../VerifyPhone'
+import Ionicons from 'react-native-vector-icons/Ionicons'
+import FastImage from 'react-native-fast-image'
 
 const ProfileUI = (props: ProfileParams) => {
 	const {
@@ -286,18 +288,24 @@ const ProfileUI = (props: ProfileParams) => {
 					/>
 					<CenterView style={styles.pagePadding}>
 						<View style={styles.photo}>
-							<OIcon
-								url={user?.photo}
-								src={!user?.photo && theme.images.general.user}
-								width={79}
-								height={79}
-							/>
+							{user?.photo ? (
+								<FastImage
+									style={{ height: 60, width: 80, borderRadius: 8 }}
+									source={{
+										uri: user?.photo,
+										priority: FastImage.priority.normal,
+									}}
+									resizeMode={FastImage.resizeMode.cover}
+								/>
+							) : (
+								<Ionicons name='person-outline' size={50} />
+							)}
 						</View>
 						<OIconButton
 							icon={theme.images.general.camera}
 							borderColor={theme.colors.clear}
-							iconStyle={{ width: 16, height: 16 }}
-							style={{ maxWidth: 40, position: 'absolute', bottom: -2, alignSelf: 'center' }}
+							iconStyle={{ width: 20, height: 20 }}
+							style={{ maxWidth: 40, position: 'absolute', bottom: -2, alignSelf: 'center', backgroundColor: '#000', opacity: 0.5 }}
 							onClick={() => handleImagePicker()}
 						/>
 					</CenterView>

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

@@ -37,8 +37,8 @@ export const VerifyPhone = (props: any) => {
 			height: 75,
 			marginBottom: 25,
 			borderWidth: 1,
-			borderColor: theme.colors.inputBorderColor,
-			borderRadius: 8,
+			borderColor: theme.colors.disabled,
+			borderRadius: 20,
 			textAlign: 'center',
 			fontSize: 40
 		}
@@ -131,11 +131,11 @@ export const VerifyPhone = (props: any) => {
 
 	return (
 		<Container>
-			<OText size={26} style={{ textAlign: 'left', fontWeight: '600', marginTop: 10, marginBottom: 30 }}>
-				{t('ENTER_VERIFICATION_CODE', 'Enter verification code')}
+			<OText size={30} style={{ textAlign: 'left' }}>
+				{t('VERIFY_PHONE', 'Verify Phone')}
 			</OText>
 			{lastNumbers && (
-				<OText size={16} color={theme.colors.disabled}>
+				<OText size={20} color={theme.colors.disabled}>
 					{`${t('MESSAGE_ENTER_VERIFY_CODE', 'Please, enter the verification code we sent to your mobile ending with')} **${lastNumbers}`}
 				</OText>
 			)}
@@ -174,7 +174,7 @@ export const VerifyPhone = (props: any) => {
 						).result?.result)?.map((e: any, i: number) => (
 							<OText
 								key={i}
-								size={16}
+								size={20}
 								color={theme.colors.error}
 							>
 								{`* ${t(getTraduction(e))}`}
@@ -183,9 +183,12 @@ export const VerifyPhone = (props: any) => {
 					</ErrorSection>
 				)}
 			<ResendSection>
+				<OText size={16} style={{ marginRight: 5 }}>
+					{t('ARE_YOU_NOT_SEEING_THE_CODE', 'Are you not seeing the code?')}
+				</OText>
 				<Pressable onPress={() => handleSendCodeAgain()}>
 					<OText size={16} color={theme.colors.primary}>
-						{t('RESEND_CODE', 'Resend code')}
+						{t('SEND_AGAIN', 'Send Again')}
 					</OText>
 				</Pressable>
 			</ResendSection>

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

@@ -19,12 +19,13 @@ export const CountDownContainer = styled.View`
 export const ResendSection = styled.View`
   display: flex;
   flex-direction: row;
+  justify-content: center;
   margin-bottom: 30px;
 `
 
 export const WrappCountdown = styled.View`
   padding-top: 20px;
-  padding-bottom: 50px;
+  padding-bottom: 20px;
 `
 
 export const InputsSection = styled.View`

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import OText from './OText';
+
+const HeaderTitle = (props: any) => {
+  const { text, style } = props
+  return (
+    <OText
+      size={24}
+      style={style ?? {
+        marginTop: 30,
+        paddingHorizontal: 40,
+        textTransform: 'capitalize'
+      }}
+    >
+      {text}
+    </OText>
+  )
+}
+
+export default HeaderTitle

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

@@ -11,6 +11,7 @@ import OKeyButton from './OKeyButton'
 import OModal from './OModal'
 import OAlert from './OAlert'
 import OBottomPopup from './OBottomPopup'
+import HeaderTitle from './HeaderTitle'
 
 export {
 	OText,
@@ -26,4 +27,5 @@ export {
 	OAlert,
   	OModal,
 	OBottomPopup,
+  HeaderTitle
 }

package/themes/original/src/types/index.tsx

@@ -31,12 +31,6 @@ export interface ProfileParams {
 	validationFields?: any;
 	showField?: any;
 	isRequiredField?: any;
-	handleSendVerifyCode?: any;
-	handleCheckPhoneCode?: any;
-	checkPhoneCodeState?: any;
-	verifyPhoneState?: any;
-	setCheckPhoneCodeState?: any;
-	isVerifiedPhone?: any;
 }
 
 export interface AddressListParams {
@@ -115,6 +109,7 @@ export interface PhoneInputParams {
 	noDropIcon?: boolean;
 	flagStyle?: any;
 	isDisabled?: any;
+	isStartValidation?: any;
 }
 
 export interface LanguageSelectorParams {
@@ -143,6 +138,8 @@ export interface HighestRatedBusinessesParams {
 	businessesList: { businesses: Array<any>, loading: boolean, error: null | string };
 	onBusinessClick?: void;
 	navigation? :any;
+	isLoading?: boolean;
+	getBusinesses: (newFetch : boolean) => void
 }
 export interface BusinessTypeFilterParams {
 	businessTypes?: Array<any>;
@@ -189,6 +186,7 @@ export interface BusinessBasicInformationParams {
 	isBusinessInfoShow?: boolean;
 	header?: any;
 	logo?: any;
+	isPreOrder?: boolean;
 }
 export interface BusinessProductsCategoriesParams {
 	categories: Array<any>;
@@ -210,7 +208,7 @@ export interface BusinessProductsListParams {
 	errors?: any;
 	businessId?: number;
 	category?: any;
-	categories: Array<any>;
+	categories?: Array<any>;
 	categoryState?: any;
 	onProductClick?: any;
 	handleSearchRedirect?: () => {};
@@ -376,7 +374,7 @@ export interface MessagesParams {
 	handleSend?: () => {},
 	setImage?: (image: string | null) => {},
 	setMessage?: (comment: string) => {},
-	setMessages?: () => {},
+	setMessages?: (image: any | null) => {},
 	readMessages?: () => {},
 	onClose?: () => void,
 	isMeesageListing?: boolean,
@@ -520,3 +518,15 @@ export interface MessageListingParams {
 	navigation: any;
 	franchiseId?: any;
 }
+export interface NoNetworkParams {
+	image?: any,
+}
+
+export interface PlaceSpotParams {
+	isOpenPlaceSpot?: boolean,
+	cart?: any ,
+	placesState?: any,
+	handleChangePlace?: any,
+	getPlacesList?: any,
+	setOpenPlaceModal?: any
+}