ordering-ui-react-native 0.17.94 → 0.17.96

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-react-native",
-  "version": "0.17.94",
+  "version": "0.17.96",
   "description": "Reusable components made in react native",
   "main": "src/index.tsx",
   "author": "ordering.inc",

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

@@ -364,7 +364,7 @@ const AddressFormUI = (props: AddressFormParams) => {
 		if (
 			orderState.loading &&
 			!addressesList &&
-			orderState.options.address &&
+			orderState?.options?.address &&
 			auth &&
 			!afterSignup
 		) {
@@ -372,7 +372,7 @@ const AddressFormUI = (props: AddressFormParams) => {
 				? navigation.navigate('BottomTab')
 				: navigation.navigate('Business');
 		}
-	}, [orderState.options.address]);
+	}, [orderState?.options?.address]);
 
 	useEffect(() => {
 		if (alertState.open && alertState?.key !== 'ERROR_MAX_LIMIT_LOCATION') {

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

@@ -212,6 +212,11 @@ const CheckoutUI = (props: any) => {
 		setIsUserDetailsEdit(true)
 	}
 
+	const handlePlaceOrderAsGuest = () => {
+    setIsOpen(false)
+    handlerClickPlaceOrder && handlerClickPlaceOrder()
+  }
+
 	const handlePaymentMethodClick = (paymethod: any) => {
 		setShowGateway({ closedByUser: false, open: true })
 		setWebviewPaymethod(paymethod)
@@ -765,6 +770,7 @@ const CheckoutUI = (props: any) => {
 								togglePhoneUpdate={togglePhoneUpdate}
 								requiredFields={requiredFields}
 								hideUpdateButton
+								handlePlaceOrderAsGuest={handlePlaceOrderAsGuest}
 								onClose={() => {
 									setIsOpen(false)
 									handlePlaceOrder(null, true)

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

@@ -19,8 +19,10 @@ import {
 	useOrder,
 	useUtils,
 	ToastType,
-	useToast
+	useToast,
+	useConfig
 } from 'ordering-components/native';
+import uuid from 'react-native-uuid';
 import { useTheme } from 'styled-components/native';
 import { ProductIngredient } from '../ProductIngredient';
 import { ProductOption } from '../ProductOption';
@@ -52,6 +54,7 @@ import { ProductOptionSubOption } from '../ProductOptionSubOption';
 import { NotFoundSource } from '../NotFoundSource';
 import { Placeholder, PlaceholderLine, Fade } from 'rn-placeholder';
 import NavBar from '../NavBar';
+import { orderTypeList } from '../../utils';
 const windowWidth = Dimensions.get('window').width;
 
 export const ProductOptionsUI = (props: any) => {
@@ -71,7 +74,9 @@ export const ProductOptionsUI = (props: any) => {
 		handleChangeSuboptionState,
 		handleChangeCommentState,
 		productObject,
-		productAddedToCartLength
+		productAddedToCartLength,
+		actionStatus,
+		handleCreateGuestUser
 	} = props;
 
 	const theme = useTheme();
@@ -178,6 +183,7 @@ export const ProductOptionsUI = (props: any) => {
 	const [, t] = useLanguage();
 	const [orderState] = useOrder();
 	const [{ auth }] = useSession();
+	const [{ configs }] = useConfig()
 	const { product, loading, error } = productObject;
 	const [gallery, setGallery] = useState([])
 	const [thumbsSwiper, setThumbsSwiper] = useState(0)
@@ -198,6 +204,9 @@ export const ProductOptionsUI = (props: any) => {
 	const [isScrollAvailable, setIsScrollAvailable] = useState(null)
 	const [editionsLayoutY, setEditionsLayoutY] = useState(null)
 
+	const guestCheckoutEnabled = configs?.guest_checkout_enabled?.value === '1'
+  const orderTypeEnabled = !orderTypeList[orderState?.options?.type - 1] || configs?.allowed_order_types_guest_checkout?.value?.includes(orderTypeList[orderState?.options?.type - 1])
+
 	const isError = (id: number) => {
 		let bgColor = theme.colors.white;
 		if (errors[`id:${id}`]) {
@@ -294,6 +303,11 @@ export const ProductOptionsUI = (props: any) => {
 		}
 	}
 
+	const handleUpdateGuest = () => {
+		const guestToken = uuid.v4()
+		if (guestToken) handleCreateGuestUser({ guest_token: guestToken })
+	}
+
 	const handleOnLayout = (event: any, optionId: any) => {
 		const _optionLayout = { ...optionLayout }
 		const optionKey = 'id:' + optionId
@@ -472,9 +486,22 @@ export const ProductOptionsUI = (props: any) => {
 							height: 44,
 							borderColor: theme.colors.primary,
 							backgroundColor: theme.colors.white,
+							paddingLeft: 0,
+							paddingRight: 0
 						}}
 					/>
 				)}
+				{!auth && guestCheckoutEnabled && orderTypeEnabled && (
+					<TouchableOpacity style={{ marginTop: 10 }} onPress={handleUpdateGuest}>
+						{actionStatus?.loading ? (
+							<Placeholder Animation={Fade}>
+								<PlaceholderLine width={60} height={20} />
+							</Placeholder>
+						) : (
+							<OText color={theme.colors.primary} size={13}>{t('WITH_GUEST_USER', 'With Guest user')}</OText>
+						)}
+					</TouchableOpacity>
+				)}
 			</View>
 		)
 	}

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

@@ -68,7 +68,7 @@ export const ProductOptionSubOptionUI = (props: any) => {
 
 	return (
 		<View>
-			<Container>
+			<Container onPress={() => handleSuboptionClick()}>
 				<IconControl disabled={disabled} onPress={() => handleSuboptionClick()}>
 					{((option?.min === 0 && option?.max === 1) || option?.max > 1) ? (
 						state?.selected ? (
@@ -139,7 +139,7 @@ export const ProductOptionSubOptionUI = (props: any) => {
 					)}
 				</PositionControl>
 				{price > 0 && (
-					<OText size={12} lineHeight={18} color={theme.colors.textSecondary}>
+					<OText size={12} lineHeight={18} color={theme.colors.textSecondary} style={{ paddingRight: 10 }}>
 						+ {parsePrice(price)}
 					</OText>
 				)}

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

@@ -4,12 +4,12 @@ export const Container = styled.TouchableOpacity`
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
-  padding: 10px;
   width: 100%;
 `
 
 export const IconControl = styled.TouchableOpacity`
   flex-direction: row;
+  padding: 10px;
   width: 45%;
   align-items: center;
 `

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

@@ -11,6 +11,8 @@ import FeatherIcon from 'react-native-vector-icons/Feather';
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { ServiceFormParams } from '../../types'
 import { Placeholder, PlaceholderLine, Fade } from 'rn-placeholder';
+import uuid from 'react-native-uuid';
+import { orderTypeList } from '../../utils'
 
 import {
   ProductForm as ProductFormController,
@@ -45,7 +47,9 @@ const ServiceFormUI = (props: ServiceFormParams) => {
     maxProductQuantity,
     onClose,
     professionalListState,
-    isCartProduct
+    isCartProduct,
+    actionStatus,
+    handleCreateGuestUser
   } = props
 
   const theme = useTheme()
@@ -65,6 +69,9 @@ const ServiceFormUI = (props: ServiceFormParams) => {
   const [isOpen, setIsOpen] = useState(false)
   const [currentProfessional, setCurrentProfessional] = useState<any>(null)
 
+  const guestCheckoutEnabled = configs?.guest_checkout_enabled?.value === '1'
+  const orderTypeEnabled = !orderTypeList[orderState?.options?.type - 1] || configs?.allowed_order_types_guest_checkout?.value?.includes(orderTypeList[orderState?.options?.type - 1])
+
   const dropdownRef = useRef<any>(null)
 
   const styles = StyleSheet.create({
@@ -140,6 +147,11 @@ const ServiceFormUI = (props: ServiceFormParams) => {
     )
   }
 
+  const handleUpdateGuest = () => {
+		const guestToken = uuid.v4()
+		if (guestToken) handleCreateGuestUser({ guest_token: guestToken })
+	}
+
   const customDayHeaderStylesCallback = () => {
     return {
       textStyle: {
@@ -563,6 +575,17 @@ const ServiceFormUI = (props: ServiceFormParams) => {
                   }}
                 />
               )}
+              {!auth && guestCheckoutEnabled && orderTypeEnabled &&  (
+                <TouchableOpacity style={{ marginTop: 10 }} onPress={handleUpdateGuest}>
+                  {actionStatus?.loading ? (
+                    <Placeholder Animation={Fade}>
+                      <PlaceholderLine width={60} height={20} />
+                    </Placeholder>
+                  ) : (
+                    <OText color={theme.colors.primary} size={13}>{t('WITH_GUEST_USER', 'With Guest user')}</OText>
+                  )}
+                </TouchableOpacity>
+              )}
           </ButtonWrapper>
         </Container>
       )}

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

@@ -83,7 +83,8 @@ const SignupFormUI = (props: SignupParams) => {
 		signUpTab,
 		useSignUpFullDetails,
 		useSignUpOtpEmail,
-		useSignUpOtpCellphone
+		useSignUpOtpCellphone,
+		isGuest
 	} = props;
 
 	const theme = useTheme();
@@ -465,15 +466,19 @@ const SignupFormUI = (props: SignupParams) => {
 
 	return (
 		<View>
-			<NavBar
-				title={t('SIGNUP', 'Signup')}
-				titleAlign={'center'}
-				onActionLeft={() => navigation?.canGoBack() && navigation.goBack()}
-				showCall={false}
-				btnStyle={{ paddingLeft: 0 }}
-				titleWrapStyle={{ paddingHorizontal: 0 }}
-				titleStyle={{ marginLeft: 0, marginRight: 0 }}
-			/>
+			{isGuest ? (
+				<OText style={{ textAlign: 'center', marginBottom: 10 }} size={18}>{t('SIGNUP', 'Signup')}</OText>
+			) : (
+				<NavBar
+					title={t('SIGNUP', 'Signup')}
+					titleAlign={'center'}
+					onActionLeft={() => navigation?.canGoBack() && navigation.goBack()}
+					showCall={false}
+					btnStyle={{ paddingLeft: 0 }}
+					titleWrapStyle={{ paddingHorizontal: 0 }}
+					titleStyle={{ marginLeft: 0, marginRight: 0 }}
+				/>
+			)}
 			<FormSide>
 				{((Number(useSignUpFullDetails) + Number(useSignUpOtpEmail) + Number(useSignUpOtpCellphone)) > 1) && (
 					<SignupWith>
@@ -893,7 +898,7 @@ const SignupFormUI = (props: SignupParams) => {
 						</View>
 					)
 				}
-				{configs && Object.keys(configs).length > 0 && (
+				{configs && Object.keys(configs).length > 0 && !isGuest && (
 					(((configs?.facebook_login?.value === 'true' || configs?.facebook_login?.value === '1') && configs?.facebook_id?.value && facebookLoginEnabled) ||
 						((configs?.google_login_client_id?.value !== '' && configs?.google_login_client_id?.value !== null) && googleLoginEnabled) ||
 						((configs?.apple_login_client_id?.value !== '' && configs?.apple_login_client_id?.value !== null) && appleLoginEnabled)) &&

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

@@ -1,12 +1,13 @@
 import React, { useEffect, useState } from 'react';
-import { Platform, StyleSheet, TouchableOpacity } from 'react-native';
+import { Platform, StyleSheet, TouchableOpacity, ScrollView } 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';
+import { SignupForm } from '../SignupForm'
 
 import { UDForm, UDLoader, UDWrapper, WrapperPhone } from './styles';
 
-import { OText, OButton, OInput } from '../shared';
+import { OText, OButton, OInput, OModal } from '../shared';
 
 import { PhoneInputNumber } from '../PhoneInputNumber';
 import { sortInputFields } from '../../utils';
@@ -27,6 +28,8 @@ export const UserFormDetailsUI = (props: any) => {
 		phoneUpdate,
 		hideUpdateButton,
 		setWillVerifyOtpState,
+		handlePlaceOrderAsGuest,
+		isCheckout
 	} = props;
 
 	const theme = useTheme();
@@ -68,10 +71,11 @@ export const UserFormDetailsUI = (props: any) => {
 	const [, { showToast }] = useToast();
 	const { handleSubmit, control, errors, setValue } = useForm();
 
-	const [{ user }] = useSession();
+	const [{ user }, { login }] = useSession();
 	const [userPhoneNumber, setUserPhoneNumber] = useState<any>(null);
 	const [isValid, setIsValid] = useState(false)
 	const [isChanged, setIsChanged] = useState(false)
+	const [isModalOpen, setIsModalOpen] = useState(false)
 	const [phoneInputData, setPhoneInputData] = useState({
 		error: '',
 		phone: {
@@ -82,6 +86,14 @@ export const UserFormDetailsUI = (props: any) => {
 
 	const showInputPhoneNumber = (validationFields?.fields?.checkout?.cellphone?.enabled ?? false) || configs?.verification_phone_required?.value === '1'
 
+	const handleSuccessSignup = (user: any) => {
+    login({
+      user,
+      token: user?.session?.access_token
+    })
+    handlePlaceOrderAsGuest && handlePlaceOrderAsGuest()
+  }
+
 	const getInputRules = (field: any) => {
 		const rules: any = {
 			required: isRequiredField(field.code)
@@ -187,6 +199,11 @@ export const UserFormDetailsUI = (props: any) => {
 		handleChangeInput(countryCode, true);
 	}
 
+	const handleClickBtn = () => {
+		if (!user?.guest_id) handleSubmit(onSubmit)
+		else setIsModalOpen(true)
+	}
+
 	useEffect(() => {
 		if (Object.keys(errors).length > 0) {
 			const list = Object.values(errors);
@@ -423,17 +440,38 @@ export const UserFormDetailsUI = (props: any) => {
 					text={
 						formState.loading
 							? t('UPDATING', 'Updating...')
-							: t('CONTINUE', 'Continue')
+							: ((isCheckout && !!user?.guest_id)
+									? t('SIGN_UP_AND_PLACE_ORDER', 'Sign up and place order')
+									: t('CONTINUE', 'Continue'))
 					}
 					bgColor={theme.colors.white}
 					textStyle={{ color: theme.colors.primary, fontSize: 14 }}
 					borderColor={theme.colors.primary}
-					isDisabled={formState.loading || !isValid}
+					isDisabled={!user?.guest_id && (formState.loading || !isValid)}
 					imgRightSrc={null}
 					style={{ borderRadius: 7.6, shadowOpacity: 0, width: '100%', borderWidth: 1, marginTop: 20, marginBottom: 20 }}
-					onClick={handleSubmit(onSubmit)}
+					onClick={handleClickBtn}
 				/>
 			)}
+			{isCheckout && !!user?.guest_id && (
+				<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>
+			)}
+			<OModal
+				open={isModalOpen}
+				onClose={() => setIsModalOpen(false)}
+			>
+				<ScrollView style={{ paddingHorizontal: 20, width: '100%'}}>
+					<SignupForm
+						handleSuccessSignup={handleSuccessSignup}
+						isGuest
+						signupButtonText={t('SIGNUP', 'Signup')}
+						useSignupByEmail
+						useChekoutFileds
+					/>
+				</ScrollView>
+			</OModal>
 		</>
 	);
 };

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

@@ -118,6 +118,7 @@ export interface SignupParams {
 	useSignUpOtpEmail?: boolean;
 	useSignUpOtpCellphone?: boolean;
 	willVerifyOtpState?: boolean;
+	isGuest?: any;
 	numOtpInputs?: number;
 	handleChangePromotions: () => void;
 	handleChangeInput?: (in1: any, in2: any) => void;
@@ -769,7 +770,9 @@ export interface ServiceFormParams {
 	professionalList: any,
 	productObject?: any,
 	professionalListState?: any,
-	isCartProduct?: any
+	isCartProduct?: any,
+	actionStatus?: any,
+	handleCreateGuestUser?: any
 }
 
 export interface ProfessionalFilterParams {

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

@@ -10,6 +10,11 @@ const theme = useTheme()
 
 export const flatArray = (arr: any) => [].concat(...arr)
 
+/**
+ * List of order type
+ */
+export const orderTypeList = ['delivery', 'pickup', 'eatin', 'curbside', 'drivethru', 'seatdelivery']
+
 /**
  * Function to return the traduction depending of a key 't'
  * @param {string} key for traduction