ordering-ui-react-native 0.15.81 → 0.15.84

package/package.json

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

package/themes/business/src/components/OrderDetails/Delivery.tsx

@@ -51,7 +51,8 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
     orderTitle,
     appTitle,
     handleClickLogisticOrder,
-    forceUpdate
+    forceUpdate,
+    getPermissions
   } = props;
   const [, { showToast }] = useToast();
   const { order } = props.order
@@ -101,9 +102,14 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
   };
 
   const handleOpenMapView = async () => {
-    if (permissions?.locationStatus === 'granted') {
+    const _permissions = await getPermissions()
+
+    const isBlocked = _permissions.some((_permission: string) => permissions?.locationStatus?.[_permission] === 'blocked')
+    const isGranted = _permissions.reduce((allPermissions: boolean, _permission: string) => allPermissions && permissions?.locationStatus?.[_permission] === 'granted', true)
+
+    if (isGranted) {
       setOpenModalForMapView(!openModalForMapView);
-    } else if (permissions?.locationStatus === 'blocked') {
+    } else if (isBlocked) {
       // redirectToSettings();
       showToast(
         ToastType.Error,
@@ -114,8 +120,9 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
       );
     } else {
       const response = await askLocationPermission();
-      if (response === 'granted') {
-        setOpenModalForMapView(!openModalForMapView);
+      const isGranted = _permissions.reduce((allPermissions: boolean, _permission: string) => allPermissions && response?.locationStatus?.[_permission] === 'granted', true)
+      if (isGranted) {
+        setOpenModalForMapView(true)
       }
     }
   };

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

@@ -373,6 +373,7 @@ export interface OrderDetailsParams {
   handleClickLogisticOrder?: (status: number, orderId: number) => void;
   orderTitle?: any;
   forceUpdate?: number;
+  getPermissions?: any
 }
 export interface ProductItemAccordionParams {
   isCartPending?: boolean;
@@ -578,4 +579,4 @@ export interface ReviewCustomerParams {
 
 export interface NoNetworkParams {
   image?: any;
-}
+}

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

@@ -162,7 +162,7 @@ const CartUI = (props: any) => {
         handleClearProducts={handleClearProducts}
         handleCartOpen={handleCartOpen}
         onNavigationRedirect={props.onNavigationRedirect}
-        handleChangeStore={props.isFranchiseApp ? () => setOpenChangeStore(true) : null}
+        handleChangeStore={() => setOpenChangeStore(true)}
         handleClickCheckout={() => setOpenUpselling(true)}
         checkoutButtonDisabled={(openUpselling && !canOpenUpselling) || cart?.subtotal < cart?.minimum || !cart?.valid_address}
       >

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

@@ -597,21 +597,19 @@ const CheckoutUI = (props: any) => {
 												</OText>
 											</TouchableOpacity>
 										</CartHeader>
-										{props.isFranchiseApp && (
-											<TouchableOpacity
-												onPress={() => setOpenChangeStore(true)}
-												style={{ alignSelf: 'flex-start' }}
+										<TouchableOpacity
+											onPress={() => setOpenChangeStore(true)}
+											style={{ alignSelf: 'flex-start' }}
+										>
+											<OText
+												size={12}
+												lineHeight={18}
+												color={theme.colors.textSecondary}
+												style={{ textDecorationLine: 'underline' }}
 											>
-												<OText
-													size={12}
-													lineHeight={18}
-													color={theme.colors.textSecondary}
-													style={{ textDecorationLine: 'underline' }}
-												>
-													{t('CHANGE_STORE', 'Change store')}
-												</OText>
-											</TouchableOpacity>
-										)}
+												{t('CHANGE_STORE', 'Change store')}
+											</OText>
+										</TouchableOpacity>
 										<OrderSummary
 											cart={cart}
 											isCartPending={cart?.status === 2}
@@ -664,7 +662,7 @@ const CheckoutUI = (props: any) => {
 						</View>
 					)}
 					<OModal
-						open={openChangeStore && props.isFranchiseApp}
+						open={openChangeStore}
 						entireModal
 						customClose
 						onClose={() => setOpenChangeStore(false)}
@@ -873,7 +871,7 @@ export const Checkout = (props: any) => {
 		...props,
 		UIComponent: CheckoutUI,
 		cartState,
-		[props.isFranchiseApp ? 'uuid' : 'businessId']: props.isFranchiseApp ? cartUuid : cartState.cart?.business_id
+		uuid: cartUuid
 	}
 
 	return (

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

@@ -1,16 +1,20 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useRef } from 'react';
 import { StyleSheet } from 'react-native';
 import { useForm, Controller } from 'react-hook-form';
+import Recaptcha from 'react-native-recaptcha-that-works'
+import { TouchableOpacity } from 'react-native-gesture-handler';
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
 
 import {
 	ForgotPasswordForm as ForgotPasswordController,
 	useLanguage,
 	useToast,
 	ToastType,
+	useConfig
 } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
 import NavBar from '../NavBar';
-import { FormInput, FormSide } from '../LoginForm/styles'
+import { FormInput, FormSide, RecaptchaButton } from '../LoginForm/styles'
 import { Container } from './styles'
 
 import { OButton, OInput, OText } from '../shared';
@@ -20,10 +24,15 @@ const ForgotPasswordUI = (props: any) => {
 		navigation,
 		formState,
 		handleButtonForgotPasswordClick,
+		handleReCaptcha,
+		enableReCaptcha
 	} = props;
 	const [, t] = useLanguage();
 	const [, { showToast }] = useToast();
+	const [{ configs }] = useConfig();
 	const { control, handleSubmit, errors } = useForm();
+	const [recaptchaConfig, setRecaptchaConfig] = useState<any>({})
+	const [recaptchaVerified, setRecaptchaVerified] = useState(false)
 
 	const theme = useTheme();
 
@@ -38,6 +47,7 @@ const ForgotPasswordUI = (props: any) => {
 	});
 
 	const [emailSent, setEmailSent] = useState(null);
+	const recaptchaRef = useRef<any>({});
 
 	const onSubmit = (values: any) => {
 		setEmailSent(values.email)
@@ -48,23 +58,52 @@ const ForgotPasswordUI = (props: any) => {
 		onChange(value.toLowerCase().replace(/[&,()%";:ç?<>{}\\[\]\s]/g, ''))
 	}
 
+	  	const handleOpenRecaptcha = () => {
+		setRecaptchaVerified(false)
+	  	if (!recaptchaConfig?.siteKey) {
+			showToast(ToastType.Error, t('NO_RECAPTCHA_SITE_KEY', 'The config doesn\'t have recaptcha site key'));
+			return
+		}
+		if (!recaptchaConfig?.baseUrl) {
+			showToast(ToastType.Error, t('NO_RECAPTCHA_BASE_URL', 'The config doesn\'t have recaptcha base url'));
+			return
+		}
+		recaptchaRef.current.open()
+  	}
+
+	const onRecaptchaVerify = (token: any) => {
+		setRecaptchaVerified(true)
+		handleReCaptcha(token)
+	}
+
 	useEffect(() => {
 		if (!formState.loading && emailSent) {
 			if (formState.result?.error) {
 				setEmailSent(null)
 				formState.result?.result && showToast(
 					ToastType.Error,
-					formState.result?.result[0]
+					typeof formState.result?.result === 'string'
+          ? formState.result?.result
+          : formState.result?.result[0]
 				)
 				return
 			}
 			showToast(
 				ToastType.Success,
-				`${t('SUCCESS_SEND_FORGOT_PASSWORD', 'Your link has been sent to the email')}: ${emailSent}`
+				t('IF_ACCOUNT_EXIST_EMAIL_SEND_PASSWORD', 'If an account exists with this email a password will be sent')
 			)
 		}
 	}, [formState])
 
+	useEffect(() => {
+		if (configs && Object.keys(configs).length > 0 && enableReCaptcha) {
+			setRecaptchaConfig({
+				siteKey: configs?.security_recaptcha_site_key?.value || null,
+				baseUrl: configs?.security_recaptcha_base_url?.value || null
+			})
+		}
+	}, [configs, enableReCaptcha])
+
 	return (
 		<Container>
 			<NavBar
@@ -126,6 +165,37 @@ const ForgotPasswordUI = (props: any) => {
 						}}
 						defaultValue=""
 					/>
+					{enableReCaptcha && (
+						<>
+							<TouchableOpacity
+								onPress={handleOpenRecaptcha}
+							>
+								<RecaptchaButton>
+									{recaptchaVerified ? (
+										<MaterialCommunityIcons
+											name="checkbox-marked"
+											size={26}
+											color={theme.colors.primary}
+										/>
+									) : (
+										<MaterialCommunityIcons
+											name="checkbox-blank-outline"
+											size={26}
+											color={theme.colors.mediumGray}
+										/>
+									)}
+									<OText size={14} mLeft={8}>{t('VERIFY_ReCAPTCHA', 'Verify reCAPTCHA')}</OText>
+								</RecaptchaButton>
+							</TouchableOpacity>
+							<Recaptcha
+								ref={recaptchaRef}
+								siteKey={recaptchaConfig?.siteKey}
+								baseUrl={recaptchaConfig?.baseUrl}
+								onVerify={onRecaptchaVerify}
+								onExpire={() => setRecaptchaVerified(false)}
+							/>
+						</>
+					)}
 
 					<OButton
 						text={emailSent && !formState.result?.error ? t('LINK_SEND_FORGOT_PASSWORD', 'Link Sent') : t('FRONT_RECOVER_PASSWORD', 'Recover Password')}
@@ -146,6 +216,7 @@ const ForgotPasswordUI = (props: any) => {
 export const ForgotPasswordForm = (props: any) => {
 	const ForgotPasswordProps = {
 		...props,
+		isRecaptchaEnable: true,
 		UIComponent: ForgotPasswordUI
 	}
 	return <ForgotPasswordController {...ForgotPasswordProps} />

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

@@ -39,7 +39,7 @@ const ORDER_STATUS: any = {
   	23: 'ORDER_DRIVER_ON_WAY'
 }
 
-const filterSpecialStatus = ['prepared_in', 'delivered_in']
+const filterSpecialStatus = ['prepared_in', 'delivered_in', 'delivery_datetime']
 
 
 const MessagesUI = (props: MessagesParams) => {

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

@@ -363,6 +363,27 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
     )
   }
 
+  const RenderGoogleMap = () => {
+    const driverLocationString = typeof order?.driver?.location?.location === 'string' && order?.driver?.location?.location?.split(',').map((l : string) => l.replace(/[^-.0-9]/g, ''))
+    const parsedLocations = locations.map(location => typeof location?.location === 'string' ? {
+      ...location,
+      lat: parseFloat(location?.location?.split(',')[0].replace(/[^-.0-9]/g, '')),
+      lng: parseFloat(location?.location?.split(',')[1].replace(/[^-.0-9]/g, ''))
+    } : location)
+
+    return (
+      <GoogleMap
+        location={typeof order?.driver?.location?.location === 'string'
+          ? {
+            lat: parseFloat(driverLocationString[0]),
+            lng: parseFloat(driverLocationString[1]),
+          } : order?.driver?.location
+        }
+        locations={parsedLocations}
+        readOnly
+      />
+    )
+  }
 
   useEffect(() => {
     if (reorderState?.error) {
@@ -683,11 +704,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                 <>
                   {order?.driver?.location && mapValidStatuses.includes(parseInt(order?.status)) && (
                     <Map>
-                      <GoogleMap
-                        location={order?.driver?.location}
-                        locations={locations}
-                        readOnly
-                      />
+                      <RenderGoogleMap />
                     </Map>
                   )}
                 </>

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

@@ -59,7 +59,7 @@ export const PhoneInputNumber = (props: PhoneInputParams) => {
 	}
 
 	useEffect(() => {
-		if ((defaultValue && userphoneNumber) || defaultValue === undefined || defaultValue === '') {
+		if ((defaultValue && userphoneNumber) || !defaultValue) {
 			if (userphoneNumber) {
 				const checkValid = phoneInput.current?.isValidNumber(userphoneNumber);
 				const callingCode = phoneInput.current?.getCallingCode();

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

@@ -93,6 +93,7 @@ const PromotionsUI = (props: PromotionParams) => {
                 titleAlign={'center'}
                 onActionLeft={() => navigation.goBack()}
                 showCall={false}
+                style={{ paddingVertical: Platform.OS === 'ios' ? 0 : 20, marginLeft: 20 }}
             />
             <PromotionsContainer>
                 <SearchBarContainer>

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

@@ -2,6 +2,8 @@ import styled, { css } from 'styled-components/native'
 
 export const PromotionsContainer = styled.View`
   width: 100%;
+  padding-left: 40px;
+	padding-right: 40px;
 `
 
 export const SingleOfferContainer = styled.View`