ordering-ui-react-native 0.18.3 → 0.18.5

package/package.json

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

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

@@ -286,7 +286,7 @@ export const BusinessBasicInformation = (
 					}
 					{...(!loading && {
 						source: (header || businessState?.business?.header) ? {
-							uri: header || optimizeImage(businessState?.business?.header, 'h_250,c_limit')
+							uri: optimizeImage(businessState?.business?.header, 'h_250,c_limit') || header
 						} : theme?.images?.dummies?.businessHeader
 					})}
 					imageStyle={{ opacity: isChewLayout ? 0.5 : 1 }}

package/themes/original/src/components/BusinessesListing/Layout/Original/index.tsx

@@ -399,7 +399,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 								style={{ marginRight: isChewLayout ? 0 : 10 }}
 							/>
 							<OText size={12} numberOfLines={1} style={{ flex: 1 }}>
-								{orderState?.options?.address?.address}
+								{orderState?.options?.address?.address || t('WHAT_IS_YOUR_ADDRESS', 'What\'s your address?')}
 							</OText>
 							{!isChewLayout && (
 								<OIcon

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

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { View, StyleSheet, TouchableOpacity, Platform, I18nManager, Vibration } from 'react-native';
+import { View, StyleSheet, TouchableOpacity, Platform, I18nManager, Vibration, ScrollView } from 'react-native';
 import { initStripe, useConfirmPayment } from '@stripe/stripe-react-native';
 import Picker from 'react-native-country-picker-modal';
 import MaterialIcons from 'react-native-vector-icons/MaterialIcons'
@@ -16,7 +16,7 @@ import {
 	ToastType,
 } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
-import { OText, OIcon, OModal } from '../shared';
+import { OText, OIcon, OModal, OButton } from '../shared';
 
 import { AddressDetails } from '../AddressDetails';
 import { PaymentOptions } from '../PaymentOptions';
@@ -25,6 +25,8 @@ import { NotFoundSource } from '../NotFoundSource';
 import { UserDetails } from '../UserDetails';
 import { PaymentOptionWallet } from '../PaymentOptionWallet';
 import { PlaceSpot } from '../PlaceSpot'
+import { SignupForm } from '../SignupForm'
+import { LoginForm } from '../LoginForm'
 
 import {
 	ChContainer,
@@ -129,7 +131,7 @@ const CheckoutUI = (props: any) => {
 
 	const [, { showToast }] = useToast();
 	const [, t] = useLanguage();
-	const [{ user, token }] = useSession();
+	const [{ user, token }, { login }] = useSession();
 	const [ordering] = useApi()
 	const [{ configs }] = useConfig();
 	const [{ parsePrice, parseDate }] = useUtils();
@@ -146,6 +148,8 @@ const CheckoutUI = (props: any) => {
 	const [webviewPaymethod, setWebviewPaymethod] = useState<any>(null)
 	const [isOpen, setIsOpen] = useState(false)
 	const [requiredFields, setRequiredFields] = useState<any>([])
+	const [openModal, setOpenModal] = useState({ login: false, signup: false })
+  const [allowedGuest, setAllowedGuest] = useState(false)
 
 	const placeSpotTypes = [3, 4, 5]
 	const placeSpotsEnabled = placeSpotTypes.includes(options?.type)
@@ -194,8 +198,20 @@ const CheckoutUI = (props: any) => {
 		}
 	}
 
+	const handleSuccessSignup = (user: any) => {
+    login({
+      user,
+      token: user?.session?.access_token
+    })
+    setOpenModal({ ...openModal, signup: false })
+  }
+
+	const handleSuccessLogin = (user: any) => {
+    if (user) setOpenModal({ ...openModal, login: false })
+  }
+
 	const handlePlaceOrder = (confirmPayment: any, forcePlace: boolean = false) => {
-		if (!userErrors.length && !requiredFields?.length || forcePlace) {
+		if (!userErrors.length && (!requiredFields?.length || allowedGuest) || forcePlace) {
 			Vibration.vibrate()
 			handlerClickPlaceOrder && handlerClickPlaceOrder(null, null, confirmPayment)
 			return
@@ -426,18 +442,46 @@ const CheckoutUI = (props: any) => {
 										<PlaceholderLine height={12} style={{ marginBottom: 20 }} />
 									</Placeholder>
 								) : (
-									<UserDetails
-										isUserDetailsEdit={isUserDetailsEdit}
-										HeaderTitle={<HeaderTitle text={t('CUSTOMER_DETAILS', 'Customer Details')} mb={0} />}
-										cartStatus={cart?.status}
-										businessId={cart?.business_id}
-										useValidationFields
-										useDefualtSessionManager
-										useSessionUser
-										isCheckout
-										phoneUpdate={phoneUpdate}
-										togglePhoneUpdate={togglePhoneUpdate}
-									/>
+									(user?.guest_id && !allowedGuest) ? (
+										<View>
+											<HeaderTitle text={t('CUSTOMER_DETAILS', 'Customer details')} />
+											<OButton
+												text={t('SIGN_UP', 'Sign up')}
+												textStyle={{ color: theme.colors.white }}
+												style={{ borderRadius: 7.6, marginTop: 20 }}
+												onClick={() => setOpenModal({ ...openModal, signup: true })}
+											/>
+											<OButton
+												text={t('LOGIN', 'Login')}
+												textStyle={{ color: theme.colors.primary }}
+												bgColor={theme.colors.white}
+												borderColor={theme.colors.primary}
+												style={{ borderRadius: 7.6, marginTop: 20 }}
+												onClick={() => setOpenModal({ ...openModal, login: true })}
+											/>
+											<OButton
+												text={t('CONTINUE_AS_GUEST', 'Continue as guest')}
+												textStyle={{ color: theme.colors.black }}
+												bgColor={theme.colors.white}
+												borderColor={theme.colors.black}
+												style={{ borderRadius: 7.6, marginTop: 20 }}
+												onClick={() => setAllowedGuest(true)}
+											/>
+										</View>
+									) : (
+										<UserDetails
+											isUserDetailsEdit={isUserDetailsEdit}
+											HeaderTitle={<HeaderTitle text={t('CUSTOMER_DETAILS', 'Customer Details')} mb={0} />}
+											cartStatus={cart?.status}
+											businessId={cart?.business_id}
+											useValidationFields
+											useDefualtSessionManager
+											useSessionUser
+											isCheckout
+											phoneUpdate={phoneUpdate}
+											togglePhoneUpdate={togglePhoneUpdate}
+										/>
+									)
 								)}
 							</ChUserDetails>
 							<View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100, marginHorizontal: -40 }} />
@@ -778,6 +822,33 @@ const CheckoutUI = (props: any) => {
 							/>
 						</View>
 					</OModal>
+					<OModal
+						open={openModal.signup}
+						onClose={() => setOpenModal({ ...openModal, signup: false })}
+					>
+						<ScrollView style={{ paddingHorizontal: 20, width: '100%'}}>
+							<SignupForm
+								handleSuccessSignup={handleSuccessSignup}
+								isGuest
+								signupButtonText={t('SIGNUP', 'Signup')}
+								useSignupByEmail
+								useChekoutFileds
+							/>
+						</ScrollView>
+					</OModal>
+					<OModal
+						open={openModal.login}
+						onClose={() => setOpenModal({ ...openModal, login: false })}
+					>
+						<ScrollView style={{ paddingHorizontal: 20, width: '100%'}}>
+							<LoginForm
+								handleSuccessLogin={handleSuccessLogin}
+								isGuest
+								loginButtonText={t('LOGIN', 'Login')}
+								loginButtonBackground={theme.colors.primary}
+							/>
+						</ScrollView>
+					</OModal>
 				</ChContainer>
 			</Container>
 			{!cartState.loading && cart && cart?.status !== 2 && (

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

@@ -1,5 +1,5 @@
-import React from 'react';
-import { useLanguage, useOrder } from 'ordering-components/native';
+import React, { useEffect } from 'react';
+import { useLanguage, useOrder, useConfig } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
 import { StyleSheet, View } from 'react-native';
 import { OButton, OIcon, OText } from '../shared';
@@ -12,8 +12,17 @@ export const Home = (props: any) => {
 	const { width, height } = useWindowDimensions();
 	const [, t] = useLanguage();
 	const [orderState] = useOrder();
+	const [{ configs }] = useConfig()
 
 	const theme = useTheme();
+	const unaddressedTypes = configs?.unaddressed_order_types_allowed?.value.split('|').map((value: any) => Number(value)) || []
+	const isAllowUnaddressOrderType = unaddressedTypes.includes(orderState?.options?.type)
+
+	useEffect(() => {
+		if (isAllowUnaddressOrderType) {
+			onNavigationRedirect('BusinessList')
+		}
+	}, [isAllowUnaddressOrderType])
 
 	return (
 		<View style={styles.container}>

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

@@ -72,6 +72,7 @@ const LoginFormUI = (props: LoginParams) => {
 		generateOtpCode,
 		useLoginOtpEmail,
 		useLoginOtpCellphone,
+		isGuest
 	} = props;
 
 	const [, { showToast }] = useToast();
@@ -378,15 +379,19 @@ const LoginFormUI = (props: LoginParams) => {
 
 	return (
 		<Container>
-			<NavBar
-				title={t('LOGIN', 'Login')}
-				titleAlign={'center'}
-				onActionLeft={() => navigation?.canGoBack() && navigation.goBack()}
-				showCall={false}
-				btnStyle={{ paddingLeft: 0 }}
-				titleWrapStyle={{ paddingHorizontal: 0 }}
-				titleStyle={{ marginRight: 0, marginLeft: 0 }}
-			/>
+			{isGuest ? (
+				<OText style={{ textAlign: 'center', marginBottom: 10 }} size={18}>{t('LOGIN', 'Login')}</OText>
+			) : (
+				<NavBar
+					title={t('LOGIN', 'Login')}
+					titleAlign={'center'}
+					onActionLeft={() => navigation?.canGoBack() && navigation.goBack()}
+					showCall={false}
+					btnStyle={{ paddingLeft: 0 }}
+					titleWrapStyle={{ paddingHorizontal: 0 }}
+					titleStyle={{ marginRight: 0, marginLeft: 0 }}
+				/>
+			)}
 			<FormSide>
 				{(Number(useLoginByEmail) + Number(useLoginByCellphone) + Number(useLoginOtpEmail) + Number(useLoginOtpCellphone) > 1) && (
 					<LoginWith>
@@ -733,7 +738,7 @@ const LoginFormUI = (props: LoginParams) => {
 				{configs && Object.keys(configs).length > 0 ? (
 					(((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)) &&
+						((configs?.apple_login_client_id?.value !== '' && configs?.apple_login_client_id?.value !== null) && appleLoginEnabled)) && !isGuest &&
 					(
 						<>
 							<View

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

@@ -177,7 +177,7 @@ const StripeElementsFormUI = (props: any) => {
 				<View style={{ flex: 1 }}>
 					<StripeProvider
 						publishableKey={publicKey}
-						merchantIdentifier={`merchant.${merchantId}`}
+						merchantIdentifier={merchantId}
 						urlScheme={merchantId}
 					>
 						{methodsPay?.includes(paymethod) ? (

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

@@ -19,6 +19,7 @@ export interface LoginParams {
 	notificationState?: any;
 	handleReCaptcha?: any;
 	enableReCaptcha?: any;
+	isGuest?: any;
 	otpType?: string,
 	setOtpType: (type: string) => void,
 	generateOtpCode: (values?: any) => void,