ordering-ui-react-native 0.15.51 → 0.15.54

package/package.json

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

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

@@ -101,9 +101,9 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
   };
 
   const handleOpenMapView = async () => {
-    if (permissions.locationStatus === 'granted') {
+    if (permissions?.locationStatus === 'granted') {
       setOpenModalForMapView(!openModalForMapView);
-    } else if (permissions.locationStatus === 'blocked') {
+    } else if (permissions?.locationStatus === 'blocked') {
       // redirectToSettings();
       showToast(
         ToastType.Error,
@@ -141,9 +141,9 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
     handleArrowBack()
   }
 
-  const handleAcceptLogisticOrder = (order : any) => {
+  const handleAcceptLogisticOrder = (order: any) => {
     handleClickLogisticOrder?.(1, order?.logistic_order_id)
-    if(order?.order_group){
+    if (order?.order_group) {
       handleArrowBack()
     }
   }
@@ -166,10 +166,10 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
   ];
 
   useEffect(() => {
-    if (permissions.locationStatus !== 'granted' && openModalForMapView) {
+    if (permissions?.locationStatus !== 'granted' && openModalForMapView) {
       setOpenModalForMapView(false);
     }
-  }, [permissions.locationStatus]);
+  }, [permissions?.locationStatus]);
 
   useEffect(() => {
     if (openModalForAccept) {
@@ -215,8 +215,8 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
   }, [messagesReadList]);
 
   useEffect(() => {
-    forceUpdate && handleViewActionOrder && handleViewActionOrder(forceUpdate === 9 ? 'forcePickUp': 'forceDelivery')
-  },[forceUpdate])
+    forceUpdate && handleViewActionOrder && handleViewActionOrder(forceUpdate === 9 ? 'forcePickUp' : 'forceDelivery')
+  }, [forceUpdate])
 
   const styles = StyleSheet.create({
     btnPickUp: {
@@ -254,7 +254,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
     );
   }
 
-  const OrderDetailsInformation = (props : {order: any, isOrderGroup?: boolean, lastOrder?: boolean}) => {
+  const OrderDetailsInformation = (props: { order: any, isOrderGroup?: boolean, lastOrder?: boolean }) => {
     const {
       order,
       isOrderGroup,

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

@@ -248,7 +248,7 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
               style={{ borderRadius: 7.6 }}
             />
           )}
-          <OText>{openDescription?.description}</OText>
+          <OText mBottom={40}>{openDescription?.description}</OText>
         </ScrollView>
       </OModal>
     </ProductsContainer>

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

@@ -3,14 +3,20 @@ import { TouchableOpacity } from 'react-native';
 import { LogoutAction } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
 import { OIcon, OText } from '../shared';
+import { _retrieveStoreData } from '../../providers/StoreUtil';
 
 const LogoutButtonUI = (props: any) => {
 	const { handleLogoutClick, text, color, iconSize } = props
 	const theme = useTheme();
 
+	const handleClick = async () => {
+		const data = await _retrieveStoreData('notification_state');
+		handleLogoutClick(data)
+	  };
+	
 	return (
 		<TouchableOpacity
-			onPress={() => handleLogoutClick()}
+			onPress={() => handleClick()}
 			style={{ flexDirection: 'row', alignItems: 'center' }}
 		>
 			<OIcon

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

@@ -112,7 +112,7 @@ const OrderSummaryUI = (props: any) => {
       {cart?.products?.length > 0 && (
         <>
           <OSProductList>
-            {cart?.products.map((product: any) => (
+            {cart?.products?.map((product: any) => (
               <ProductItemAccordion
                 key={product.code}
                 product={product}

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

@@ -1,11 +1,12 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { View, Pressable, StyleSheet, Linking, Platform } from 'react-native';
+import { View, Pressable, StyleSheet, Linking, Platform, TouchableOpacity } from 'react-native';
 import { useForm, Controller } from 'react-hook-form';
 import Spinner from 'react-native-loading-spinner-overlay';
 import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
 import CheckBox from '@react-native-community/checkbox';
 import { PhoneInputNumber } from '../PhoneInputNumber';
 import { FacebookLogin } from '../FacebookLogin';
+import Recaptcha from 'react-native-recaptcha-that-works'
 
 import {
 	SignupForm as SignUpController,
@@ -23,6 +24,7 @@ import {
 	LoginWith as SignupWith,
 	OTab,
 	OTabs,
+	RecaptchaButton
 } from '../LoginForm/styles';
 
 import NavBar from '../NavBar';
@@ -63,7 +65,9 @@ const SignupFormUI = (props: SignupParams) => {
 		handleSendVerifyCode,
 		handleCheckPhoneCode,
 		notificationState,
-		handleChangePromotions
+		handleChangePromotions,
+		enableReCaptcha,
+		handleReCaptcha
 	} = props;
 
 	const theme = useTheme();
@@ -117,6 +121,8 @@ const SignupFormUI = (props: SignupParams) => {
 			cellphone: null,
 		},
 	});
+	const [recaptchaConfig, setRecaptchaConfig] = useState<any>({})
+	const [recaptchaVerified, setRecaptchaVerified] = useState(false)
 
 	const nameRef = useRef<any>(null);
 	const lastnameRef = useRef<any>(null);
@@ -125,6 +131,7 @@ const SignupFormUI = (props: SignupParams) => {
 	const emailRef = useRef<any>(null);
 	const phoneRef = useRef<any>(null);
 	const passwordRef = useRef<any>(null);
+	const recaptchaRef = useRef<any>({});
 
   const showInputPhoneNumber = (validationFields?.fields?.checkout?.cellphone?.enabled ?? false) || configs?.verification_phone_required?.value === '1'
 
@@ -286,6 +293,33 @@ const SignupFormUI = (props: SignupParams) => {
 		}
 	}
 
+	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 (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])
+
 	useEffect(() => {
 		if (!formState.loading && formState.result?.error) {
 			formState.result?.result &&
@@ -467,6 +501,39 @@ const SignupFormUI = (props: SignupParams) => {
 								</View>
 							)}
 
+							{enableReCaptcha && (
+								<>
+									<TouchableOpacity
+										onPress={handleOpenRecaptcha}
+										style={{ marginHorizontal: 4, marginBottom: 10 }}
+									>
+										<RecaptchaButton>
+											{recaptchaVerified ? (
+												<MaterialCommunityIcons
+													name="checkbox-marked"
+													size={23}
+													color={theme.colors.primary}
+												/>
+											) : (
+												<MaterialCommunityIcons
+													name="checkbox-blank-outline"
+													size={23}
+													color={theme.colors.disabled}
+												/>
+											)}
+											<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)}
+									/>
+								</>
+							)}
+
 							<View style={{ flexDirection: 'row', alignItems: 'center', marginBottom: 20 }}>
 								<Controller
 									control={control}
@@ -736,6 +803,7 @@ const SignupFormUI = (props: SignupParams) => {
 export const SignupForm = (props: any) => {
 	const signupProps = {
 		...props,
+		isRecaptchaEnable: true,
 		UIComponent: SignupFormUI,
 	};
 	return <SignUpController {...signupProps} />;

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

@@ -102,6 +102,8 @@ export interface SignupParams {
 	handleCheckPhoneCode?: any;
 	notificationState?: any;
 	handleChangePromotions: () => void;
+	enableReCaptcha?: boolean;
+	handleReCaptcha?: () => void;
 }
 
 export interface PhoneInputParams {