ordering-ui-react-native 0.16.70 → 0.16.71-release

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

@@ -1,10 +1,15 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useRef } from 'react';
 import { StyleSheet, View } from 'react-native';
 import { useForm, Controller } from 'react-hook-form';
 import { useTheme } from 'styled-components/native';
+import { TouchableOpacity } from 'react-native-gesture-handler';
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
+import Recaptcha from 'react-native-recaptcha-that-works'
+import ReCaptcha from '@fatnlazycat/react-native-recaptcha-v3'
 
 import {
   LoginForm as LoginFormController,
+  useConfig,
   useLanguage,
   ToastType,
   useToast,
@@ -13,7 +18,8 @@ import {
 
 import {
   WelcomeTextContainer,
-  LogoWrapper
+  LogoWrapper,
+  RecaptchaButton
 } from './styles';
 
 import { OText, OButton, OInput, OIcon } from '../shared';
@@ -26,14 +32,20 @@ const LoginFormUI = (props: LoginParams) => {
     loginButtonText,
     formState,
     handleButtonLoginClick,
-    useRootPoint
+    useRootPoint,
+    handleReCaptcha,
+    enableReCaptcha
   } = props;
 
   const theme = useTheme()
+  const [{ configs }] = useConfig()
   const [ordering, { setOrdering }] = useApi();
   const [, { showToast }] = useToast();
   const [, t] = useLanguage();
-  const {control, handleSubmit, formState: {errors}} = useForm();
+  const [recaptchaConfig, setRecaptchaConfig] = useState<any>({})
+  const [recaptchaVerified, setRecaptchaVerified] = useState(false)
+  const recaptchaRef = useRef<any>({});
+  const { control, handleSubmit, formState: { errors } } = useForm();
   const [orientationState] = useDeviceOrientation();
 
   const [formsStateValues, setFormsStateValues] = useState<any>({ isSubmitted: false })
@@ -60,6 +72,25 @@ const LoginFormUI = (props: LoginParams) => {
     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 && handleReCaptcha({ code: token, version: recaptchaConfig?.version })
+  }
+
   const styles = StyleSheet.create({
     logo: {
       height: 80,
@@ -87,6 +118,20 @@ const LoginFormUI = (props: LoginParams) => {
 
   useEffect(() => {
     if (!formState.loading && formState.result?.error) {
+      if (formState.result?.result?.[0] === 'ERROR_AUTH_VERIFICATION_CODE') {
+        setRecaptchaVerified(false)
+        setRecaptchaConfig({
+          version: 'v2',
+          siteKey: configs?.security_recaptcha_site_key?.value || null,
+          baseUrl: configs?.security_recaptcha_base_url?.value || null
+        })
+        showToast(ToastType.Info, t('TRY_AGAIN', 'Please try again'))
+        setFormsStateValues({
+          ...formsStateValues,
+          isSubmitted: false,
+        })
+        return
+      }
       formState.result?.result && showToast(
         ToastType.Error,
         typeof formState.result?.result === 'string'
@@ -122,9 +167,32 @@ const LoginFormUI = (props: LoginParams) => {
     }
   }, [errors]);
 
+  useEffect(() => {
+    if (configs && Object.keys(configs).length > 0 && enableReCaptcha) {
+      if (configs?.security_recaptcha_type?.value === 'v3' &&
+        configs?.security_recaptcha_score_v3?.value > 0 &&
+        configs?.security_recaptcha_site_key_v3?.value
+      ) {
+        setRecaptchaConfig({
+          version: 'v3',
+          siteKey: configs?.security_recaptcha_site_key_v3?.value || null,
+          baseUrl: configs?.security_recaptcha_base_url?.value || null
+        })
+        return
+      }
+      if (configs?.security_recaptcha_site_key?.value) {
+        setRecaptchaConfig({
+          version: 'v2',
+          siteKey: configs?.security_recaptcha_site_key?.value || null,
+          baseUrl: configs?.security_recaptcha_base_url?.value || null
+        })
+      }
+    }
+  }, [configs, enableReCaptcha])
+
   const logo = (
     <LogoWrapper>
-      <OIcon src={theme.images.logos.logotype} style={styles.logo}/>
+      <OIcon src={theme.images.logos.logotype} style={styles.logo} />
     </LogoWrapper>
   );
 
@@ -144,7 +212,7 @@ const LoginFormUI = (props: LoginParams) => {
               value={value}
               autoCapitalize='none'
               autoCorrect={false}
-              inputStyle={{textAlign: 'center'}}
+              inputStyle={{ textAlign: 'center' }}
               onChange={(e: any) => {
                 onChange(e?.target?.value);
                 setFormsStateValues({
@@ -167,7 +235,7 @@ const LoginFormUI = (props: LoginParams) => {
             autoCapitalize="none"
             autoCorrect={false}
             type="email-address"
-            inputStyle={{textAlign: 'center'}}
+            inputStyle={{ textAlign: 'center' }}
             onChange={(e: any) => {
               handleChangeInputEmail(e, onChange);
             }}
@@ -199,7 +267,7 @@ const LoginFormUI = (props: LoginParams) => {
             style={styles.inputStyle}
             value={value}
             onChange={(val: any) => onChange(val)}
-            inputStyle={{textAlign: 'center'}}
+            inputStyle={{ textAlign: 'center' }}
           />
         )}
         name="password"
@@ -211,7 +279,49 @@ const LoginFormUI = (props: LoginParams) => {
         }}
         defaultValue=""
       />
-
+      {(recaptchaConfig?.version) && (
+        <>
+          {recaptchaConfig?.version === 'v3' ? (
+            <ReCaptcha
+              url={recaptchaConfig?.baseUrl}
+              siteKey={recaptchaConfig?.siteKey}
+              containerStyle={{ height: 40 }}
+              onExecute={onRecaptchaVerify}
+              reCaptchaType={1}
+            />
+          ) : (
+            <>
+              <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
         onClick={handleSubmit(onSubmit)}
         text={loginButtonText}
@@ -280,7 +390,7 @@ const LoginFormUI = (props: LoginParams) => {
               ? 0 : 0,
           }}
         >
-          { welcome }
+          {welcome}
           {orientationState?.orientation === LANDSCAPE && (
             <View style={{
               justifyContent: 'flex-end',
@@ -327,6 +437,7 @@ export const LoginForm = (props: any) => {
   const loginProps = {
     ...props,
     UIComponent: LoginFormUI,
+    isRecaptchaEnable: true
   };
   return <LoginFormController {...loginProps} />;
 };

package/themes/kiosk/src/components/LoginForm/styles.tsx

@@ -7,3 +7,8 @@ export const LogoWrapper = styled.View`
 export const WelcomeTextContainer = styled.View`
   margin-bottom: 30px;
 `;
+export const RecaptchaButton = styled.View`
+  flex-direction: row;
+  align-items: center;
+  margin-bottom: 10px;
+`

package/themes/kiosk/src/components/NavBar/index.tsx

@@ -4,6 +4,7 @@ import { OIcon, OButton, OText } from '../shared'
 import { ImageStyle, TextStyle, View, Platform, TouchableOpacity } from 'react-native'
 import { useConfig, useLanguage, useOrder } from 'ordering-components/native'
 import { useTheme } from 'styled-components/native'
+
 const Wrapper = styled.View`
   background-color: ${(props: any) => props.theme.colors.white};
   padding: 10px 0px 20px 0px;
@@ -65,28 +66,27 @@ const NavBar = (props: Props) => {
 
   return (
     <Wrapper style={{ paddingTop: props.paddingTop, ...props.style }}>
-      {(props?.onActionLeft) && (
+      {(props?.onActionLeft || props?.leftImg) && (
         <OButton
-          imgLeftSrc={props.leftImg}
+          imgLeftSrc={props.leftImg || theme.images.general.arrow_left}
           imgRightSrc={null}
           style={{ ...btnBackArrow, ...props.btnStyle }}
           onClick={props.onActionLeft}
-          imgLeftStyle={props.imgLeftStyle}
-          {...(!props.leftImg && { iconProps: { name: 'arrowleft', size: 28, color: props.btnStyle?.color } })}
+          imgLeftStyle= {props.imgLeftStyle}
         />)
       }
       <TitleTopWrapper>
         {props.withIcon
           ? (
-            <OIcon
-              url={props.icon}
-              style={{
-                borderColor: theme.colors.lightGray,
-                borderRadius: 20,
-              }}
-              width={60}
-              height={60}
-            />
+              <OIcon
+                url={props.icon}
+                style={{
+                  borderColor: theme.colors.lightGray,
+                  borderRadius: 20,
+                }}
+                width={60}
+                height={60}
+              />
           )
           : null
         }
@@ -134,7 +134,7 @@ const NavBar = (props: Props) => {
         </View>
       )}
 
-      {props.rightComponent}
+      { props.rightComponent }
     </Wrapper>
   )
 }

package/themes/kiosk/src/components/OptionCard/index.tsx

@@ -95,7 +95,7 @@ interface Props {
   style?: ViewStyle;
   bgImage: ImageSourcePropType;
   innerStyle?: ViewStyle;
-  icon?: ImageSourcePropType;
+  icon: ImageSourcePropType;
   iconStyle?: ImageStyle;
   callToActionText: string;
   callToActionTextStyle?: TextStyle;

package/themes/kiosk/src/components/OrderTypeCardSelector/index.tsx

@@ -15,8 +15,6 @@ import { Container } from '../../layouts/Container'
 import NavBar from '../NavBar'
 import { LANDSCAPE, PORTRAIT, useDeviceOrientation } from '../../../../../src/hooks/DeviceOrientation'
 import GridContainer from '../../layouts/GridContainer'
-import AntDesignIcon from 'react-native-vector-icons/AntDesign'
-import MaterialIcon from 'react-native-vector-icons/MaterialCommunityIcons'
 
 const OrderTypeSelectorCardUI = (props: OrderTypeSelectParams) => {
   const {
@@ -29,7 +27,7 @@ const OrderTypeSelectorCardUI = (props: OrderTypeSelectParams) => {
     callback
   } = props
 
-  const theme = useTheme();
+	const theme = useTheme();
   const [, t] = useLanguage();
   const [orientationState] = useDeviceOrientation();
   const [orderState] = useOrder()
@@ -47,7 +45,7 @@ const OrderTypeSelectorCardUI = (props: OrderTypeSelectParams) => {
   }
 
   useEffect(() => {
-    if (isCardCliked) {
+    if(isCardCliked){
       callback?.()
       setIsCardClicked(false)
       setIsLoadingCard(null)
@@ -85,13 +83,13 @@ const OrderTypeSelectorCardUI = (props: OrderTypeSelectParams) => {
             style={cardStyle}
             isDisabled={isCardCliked}
             isLoading={isLoadingCard === 'Eat In'}
-            title={t('EAT_IN', 'Eat In')}
+            title={t('EAT_IN','Eat In')}
             description={t('EAT_IN_DESCRIPTION', 'We are very glad to have you here. Bon appetit!')}
             bgImage={theme.images.general.eatIn}
-            VectorIcon={() => <MaterialIcon name='pin-outline' size={28} color='white' style={{ marginBottom: 10 }} />}
+            icon={theme.images.general.pushPin}
             callToActionText={t('START_MY_ORDER', 'Start my order')}
             onClick={() => {
-              if (_eatIn?.value !== orderState?.options?.type) {
+              if(_eatIn?.value !== orderState?.options?.type){
                 handleChangeOrderType(_eatIn?.value);
                 setIsCardClicked(true)
                 setIsLoadingCard('Eat In')
@@ -108,15 +106,15 @@ const OrderTypeSelectorCardUI = (props: OrderTypeSelectParams) => {
 
           <OptionCard
             style={cardStyle}
-            title={t('TAKE_OUT', 'Take out')}
+            title={t('TAKE_OUT','Take out')}
             isDisabled={isCardCliked}
             isLoading={isLoadingCard === 'Take out'}
             description={t('TAKE_OUT_DESCRIPTION', 'You are very welcome anytime you visit us!')}
             bgImage={theme.images.general.takeOut}
-            VectorIcon={() => <AntDesignIcon name='shoppingcart' size={28} color='white' style={{ marginBottom: 10 }} />}
+            icon={theme.images.general.shoppingCart}
             callToActionText={t('START_MY_ORDER', 'Start my order')}
             onClick={() => {
-              if (_takeOut?.value !== orderState?.options?.type) {
+              if(_takeOut?.value !== orderState?.options?.type){
                 handleChangeOrderType(_takeOut?.value);
                 setIsCardClicked(true)
                 setIsLoadingCard('Take out')

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

@@ -550,7 +550,7 @@ export const ProductOptionsUI = (props: any) => {
             </View>
           )}
           <View style={{ width: isSoldOut || maxProductQuantity <= 0 ? '100%' : isDrawer ? '70%' : '80%' }}>
-            {productCart && !isSoldOut && maxProductQuantity > 0 && auth && orderState.options?.address_id && (
+            {productCart && !isSoldOut && maxProductQuantity > 0 && auth && (
               <OButton
                 onClick={() => handleSaveProduct()}
                 imgRightSrc=''
@@ -563,19 +563,6 @@ export const ProductOptionsUI = (props: any) => {
                 }}
               />
             )}
-            {auth && !orderState.options?.address_id && (
-              orderState.loading ? (
-                <OButton
-                  isDisabled
-                  text={t('LOADING', 'Loading')}
-                  imgRightSrc=''
-                />
-              ) : (
-                <OButton
-                  onClick={navigation?.navigate('AddressList')}
-                />
-              )
-            )}
             {(!auth || isSoldOut || maxProductQuantity <= 0) && (
               <OButton
                 isDisabled={isSoldOut || maxProductQuantity <= 0}

package/themes/kiosk/src/components/shared/OButton.tsx

@@ -10,8 +10,6 @@ import {
 
 import * as React from 'react';
 import styled from 'styled-components/native';
-import AntDesignIcon from 'react-native-vector-icons/AntDesign'
-import { Icon, IconProps } from 'react-native-vector-icons/Icon';
 
 const StyledButton = styled.View<Props>`
   background-color: ${(props: any) => props.theme.colors.primary};
@@ -79,19 +77,17 @@ interface Props {
   isCircle?: boolean;
   bgColor?: string;
   borderColor?: string;
-  iconProps?: IconProps;
-  IconCustom?: React.FunctionComponent
 }
 
 const OButton = (props: Props): React.ReactElement => {
   if (props.isDisabled) {
     return (
       <View style={props.parentStyle}>
-        <StyledButtonDisabled style={props.style}>
-          <StyledTextDisabled style={props.disabledTextStyle ? props.disabledTextStyle : props.textStyle}>
-            {props.text}
-          </StyledTextDisabled>
-        </StyledButtonDisabled>
+      <StyledButtonDisabled style={props.style}>
+        <StyledTextDisabled style={props.disabledTextStyle ? props.disabledTextStyle : props.textStyle}>
+          {props.text}
+        </StyledTextDisabled>
+      </StyledButtonDisabled>
       </View>
     );
   }
@@ -115,15 +111,6 @@ const OButton = (props: Props): React.ReactElement => {
         {props.imgLeftSrc ? (
           <StyledImage style={props.imgLeftStyle} source={props.imgLeftSrc} />
         ) : null}
-        {props.iconProps ? (
-          <>
-            {props?.IconCustom ? (
-              <props.IconCustom {...props.iconProps} />
-            ) : (
-              <AntDesignIcon {...props.iconProps} />
-            )}
-          </>
-        ) : null}
         {props.text ? (
           <StyledText style={props.textStyle}>{props.text}</StyledText>
         ) : null}

package/themes/kiosk/src/types/index.d.ts

@@ -82,6 +82,8 @@ export interface LoginParams {
   handleSendVerifyCode?: any;
   handleCheckPhoneCode?: any;
   useRootPoint?: any;
+  enableReCaptcha?: boolean;
+  handleReCaptcha?: (vlaue: any) => void;
 }
 
 export interface ProductItemAccordionParams {

package/themes/original/index.tsx

@@ -51,6 +51,7 @@ import { LastOrders } from './src/components/LastOrders';
 import { MultiCheckout } from './src/components/MultiCheckout'
 import { MultiOrdersDetails } from './src/components/MultiOrdersDetails'
 import NavBar from './src/components/NavBar';
+import { NotificationsList } from './src/components/Notifications'
 import { BusinessTypeFilter } from './src/components/BusinessTypeFilter';
 import { BusinessController } from './src/components/BusinessController';
 import { BusinessFeaturedController } from './src/components/BusinessFeaturedController';
@@ -67,6 +68,7 @@ import { SingleProductCard } from './src/components/SingleProductCard';
 import { SingleOrderCard } from './src/components/SingleOrderCard';
 import { UpsellingRedirect } from './src/components/BusinessProductsListing/UpsellingRedirect';
 import { ProductItemAccordion } from './src/components/ProductItemAccordion';
+import { ScheduleAccordion } from './src/components/ScheduleAccordion';
 import { BusinessItemAccordion } from './src/components/BusinessItemAccordion';
 import { CouponControl } from './src/components/CouponControl';
 import { TaxInformation } from './src/components/TaxInformation';
@@ -94,6 +96,7 @@ import { LogoutButton } from './src/components/LogoutButton';
 import { UserFormDetailsUI } from './src/components/UserFormDetails';
 import { WalletTransactionItem } from './src/components/WalletTransactionItem';
 import { Promotions } from './src/components/Promotions'
+import { MultiCart } from './src/components/MultiCart'
 import { USER_TYPE, ORDER_TYPES } from './src/config/constants'
 
 import { OSBill, OSTable, OSCoupon, OSTotal, OSRow } from './src/components/OrderSummary/styles';
@@ -183,6 +186,7 @@ export {
 	OrderDetails,
 	OrderProgress,
 	BusinessPreorder,
+	NotificationsList,
 	UserProfileForm,
 	ReviewOrder,
 	ReviewProducts,
@@ -228,6 +232,7 @@ export {
 	SingleOrderCard,
 	UpsellingRedirect,
 	ProductItemAccordion,
+	ScheduleAccordion,
 	BusinessItemAccordion,
 	CouponControl,
 	TaxInformation,
@@ -256,6 +261,7 @@ export {
 	WalletTransactionItem,
 	Promotions,
 	MyOrders,
+  MultiCart,
 	ORDER_TYPES,
 	USER_TYPE,
 

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

@@ -24,13 +24,15 @@ const AddressDetailsUI = (props: any) => {
 	return (
 		<ADContainer>
 			<ADHeader>
-				<OText
-					size={16}
-					lineHeight={24}
-					color={theme.colors.textNormal}
-					weight={'500'}>
-					{t('DELIVERY_ADDRESS', 'Delivery address')}
-				</OText>
+				{props.HeaderTitle ?? (
+					<OText
+						size={16}
+						lineHeight={24}
+						color={theme.colors.textNormal}
+					>
+						{t('DELIVERY_ADDRESS', 'Delivery address')}
+					</OText>
+				)}
 			</ADHeader>
 			{!!apiKey && (
 				<ADMap
@@ -57,7 +59,7 @@ const AddressDetailsUI = (props: any) => {
 						}>
 						<OText
 							size={12}
-							color={theme.colors.textSecondary}
+							color={theme.colors.primary}
 							style={{ textDecorationLine: 'underline' }}>
 							{t('CHANGE', 'Change')}
 						</OText>