ordering-ui-react-native 0.16.46 → 0.16.47-release

package/themes/business/src/components/shared/ODropDownCalendar.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect, useRef } from 'react'
 import styled, { css, useTheme } from 'styled-components/native'
 import { useLanguage } from 'ordering-components/native';
 import { ScrollView, TouchableOpacity } from 'react-native-gesture-handler'
@@ -24,6 +24,10 @@ interface Props {
   handleChangeDate?: any,
   rangeDate?: any,
   isCalendarAlwaysVisible?: boolean
+  handleClear?: any;
+  handleOpenSelect?: any,
+  openedSelect?: string,
+  selectType?: string
 }
 
 const Wrapper = styled.View`
@@ -96,7 +100,11 @@ const ODropDownCalendar = (props: Props) => {
     isCalendar,
     handleChangeDate,
     rangeDate,
-    isCalendarAlwaysVisible
+    isCalendarAlwaysVisible,
+    handleClear,
+    handleOpenSelect,
+    openedSelect,
+    selectType
   } = props
 
   const theme = useTheme();
@@ -110,6 +118,7 @@ const ODropDownCalendar = (props: Props) => {
 
   const onToggle = () => {
     setIsOpen(!isOpen)
+    if (!isOpen) handleOpenSelect?.()
   }
 
   const onSelectOption = (option: any) => {
@@ -122,7 +131,7 @@ const ODropDownCalendar = (props: Props) => {
   const onDateChange = (date: any, type: any) => {
     if (!date) return
     if (type === 'END_DATE') {
-      handleChangeDate(rangeDate.from, date.format('MM/DD/YY'))
+      handleChangeDate(rangeDate.from, new Date(date.format('MM/DD/YY')) === rangeDate.from ? '' : date.format('MM/DD/YY'))
     } else {
       handleChangeDate(date.format('MM/DD/YY'), '')
     }
@@ -142,12 +151,31 @@ const ODropDownCalendar = (props: Props) => {
     return (from || to) ? (from + (to ? end : '')) : placeholder
   }
 
+  const handleClearCalendar = () => {
+    handleClear && handleClear()
+    if (isOpen) {
+      onToggle()
+    }
+  }
+
   useEffect(() => {
     const _defaultOption = options?.find((option: any) => option.value === defaultValue)
     setSelectedOption(_defaultOption)
     setValue(defaultValue)
   }, [defaultValue, options])
 
+  useEffect(() => {
+    if (openedSelect !== selectType && typeof openedSelect === 'string') {
+      setIsOpen(false)
+    }
+  }, [openedSelect])
+
+  useEffect(() => {
+    if (rangeDate.to && rangeDate.from) {
+      onSelect('calendar')
+    }
+  }, [rangeDate.to, rangeDate.from])
+
   return (
     <Wrapper style={props.style}>
       <Selected
@@ -165,10 +193,11 @@ const ODropDownCalendar = (props: Props) => {
               : `${selectedOption?.content || selectedOption?.name || placeholder}`
           }
         </SelectedLabel>
-        <FeatherIcon
-          name='calendar'
-          color={theme.colors.backArrow}
-          size={24}
+        <AntDesign
+          name={selectedOption && handleClear ? 'close' : 'calendar'}
+          size={20}
+          onPress={() => handleClearCalendar()}
+          style={{ position: 'absolute', right: 12, top: 13 }}
         />
       </Selected>
       {isOpen && options && (

package/themes/business/src/components/shared/OLink.tsx

@@ -29,8 +29,19 @@ const OLink = (props: Props): React.ReactElement => {
       ],
     );
 
+  const handleInvalidNumberAlert = () =>
+    Alert.alert(
+      t('ERROR_OPENING_THE_LINK', 'Error opening the link'),
+      t('INVALID_NUMBER', 'Invalid number'),
+      [
+        {
+          text: t('OK', 'Ok'),
+        },
+      ],
+    );
+
   const handleOpenUrl = async (breakFunction = false) => {
-    if(breakFunction) {
+    if (breakFunction) {
       return
     }
     if (!url) {
@@ -40,8 +51,9 @@ const OLink = (props: Props): React.ReactElement => {
 
     try {
       const supported = await Linking.canOpenURL(url);
-
-      if (supported) {
+      if (url && url?.includes('tel:')) {
+        url?.includes('invalid') ? handleInvalidNumberAlert() : await Linking.openURL(url)
+      } else if (supported) {
         await Linking.openURL(url);
       } else {
         handleAlert();
@@ -57,17 +69,17 @@ const OLink = (props: Props): React.ReactElement => {
         <OButton
           onClick={() => handleOpenUrl()}
           text={shorcut} imgRightSrc=''
-          textStyle={{color: 'white'}}
-          style={{width: '100%', alignSelf: 'center', borderRadius: 10}}
+          textStyle={{ color: 'white' }}
+          style={{ width: '100%', alignSelf: 'center', borderRadius: 10 }}
         />
       ) : (
-      <OText
-        style={TextStyle}
-        numberOfLines={1}
-        ellipsizeMode="tail"
-        color={color}>
-        {shorcut}
-      </OText>
+        <OText
+          style={TextStyle}
+          numberOfLines={1}
+          ellipsizeMode="tail"
+          color={color}>
+          {shorcut}
+        </OText>
       )}
     </Pressable>
   );

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

@@ -21,8 +21,8 @@ export interface LoginParams {
   allowedLevels?: any;
   useRootPoint?: any;
   notificationState?: any;
-	handleReCaptcha?: any;
-	enableReCaptcha?: any;
+  handleReCaptcha?: any;
+  enableReCaptcha?: any;
 }
 export interface ProfileParams {
   navigation?: any;
@@ -41,6 +41,7 @@ export interface ProfileParams {
   validationFields?: any;
   showField?: any;
   isRequiredField?: any;
+  isAlsea?: boolean;
 }
 
 export interface AddressListParams {
@@ -255,6 +256,7 @@ export interface MessagesOptionParams {
   messagesReadList?: any;
   onNavigationRedirect?: any;
   setSortBy?: any;
+  getOrders: any
 }
 export interface OrdersOptionParams {
   orderList?: any;
@@ -265,7 +267,7 @@ export interface OrdersOptionParams {
   titleContent?: string;
   customArray?: Array<any>;
   loadMoreOrders?: () => {};
-  loadOrders?: ({}: any) => {};
+  loadOrders?: ({ }: any) => {};
   messages?: any;
   setMessages?: () => {};
   loadMessages?: () => {};
@@ -279,7 +281,7 @@ export interface OrdersOptionParams {
   ordersGroup?: any;
   setOrdersGroup?: any;
   setCurrentFilters?: any;
-  onFiltered?: ({}: any) => {};
+  onFiltered?: ({ }: any) => {};
   filtered?: any;
   handleClickOrder?: any;
   orderGroupStatusCustom?: {
@@ -290,9 +292,11 @@ export interface OrdersOptionParams {
   };
   isBusinessApp?: boolean;
   handleClickLogisticOrder: (status: number, orderId: number) => void,
-  logisticOrders: {orders: Array<any>, loading: boolean, error: Array<string> | string},
+  logisticOrders: { orders: Array<any>, loading: boolean, error: Array<string> | string },
   loadLogisticOrders: () => void;
-  isLogisticActivated?: boolean
+  isLogisticActivated?: boolean;
+  isAlsea?: boolean;
+  checkNotification?: boolean;
 }
 export interface ActiveOrdersParams {
   orders?: any;
@@ -390,6 +394,7 @@ export interface ProductItemAccordionParams {
   offsetDisabled?: any;
   isFromCheckout?: any;
   isClickableEvent?: any;
+  currency?: any;
 }
 export interface ReviewOrderParams {
   order?: { orderId: number; businessId: number; logo: string };
@@ -405,7 +410,7 @@ export interface MessagesParams {
   order?: any;
   orderId?: number;
   messages?: any;
-  message?: string;
+  message: string;
   image?: string;
   messagesToShow?: any;
   sendMessage?: any;
@@ -561,13 +566,14 @@ export interface AcceptOrRejectOrderParams {
 }
 
 export interface MapViewParams {
-  onNavigationRedirect: (page : string, params ?: any) => void,
+  onNavigationRedirect: (page: string, params?: any) => void,
   getBusinessLocations: () => void,
+  setDriverLocation: (location: any) => void,
   isLoadingBusinessMarkers?: boolean,
   markerGroups: Array<any>,
   customerMarkerGroups: Array<any>,
   alertState: { open: boolean, content: Array<string>, key?: string | null },
-  setAlertState: ({open, content, key} : { open: boolean, content: Array<string>, key?: string | null }) => void
+  setAlertState: ({ open, content, key }: { open: boolean, content: Array<string>, key?: string | null }) => void
 }
 
 export interface ReviewCustomerParams {

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

@@ -38,6 +38,8 @@ export const getTraduction = (key: string, t: any) => {
     ERROR_PRODUCT_NOT_FOUND: 'Error with the product',
     ERROR_USER_UPDATE_YOU_HAVE_ASSIGNED_ORDERS:
       "You can't because you have assigned orders",
+    ERROR_INVALID_OFFER: 'The offer doesn\'t exist',
+    ERROR_AUTH_DRIVER_LOGIN_VALIDATION: 'Error auth driver login validation'
   };
 
   return keyList[key] ? t(key, keyList[key]) : t(key);
@@ -343,3 +345,11 @@ export const getOrderStatus = (s: string, t: any) => {
 
   return objectStatus && objectStatus;
 };
+
+export const transformDistance = (value : number, distanceUnit?: string) => {
+  return distanceUnit === 'mi'
+    ? (value / 1.609).toFixed(2)
+    : distanceUnit === 'ft'
+      ? (value * 3280.84).toFixed(0)
+      : (value).toFixed(2)
+}

package/themes/doordash/src/components/BusinessesListing/index.tsx

@@ -197,7 +197,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 			{isFarAway && (
 				<FarAwayMessage style={styles.farAwayMsg}>
 					<Ionicons name='md-warning-outline' style={styles.iconStyle} />
-					<OText size={12} numberOfLines={1} ellipsizeMode={'tail'} color={theme.colors.textNormal}>{t('YOU_ARE_FAR_FROM_ADDRESS', 'You are far from this address')}</OText>
+					<OText size={12} numberOfLines={1} ellipsizeMode={'tail'} color={theme.colors.textNormal}>{t('YOU_ARE_FAR_FROM_ADDRESS', 'Your are far from this address')}</OText>
 				</FarAwayMessage>
 			)}
 			{!auth && (

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

@@ -410,8 +410,7 @@ const LoginFormUI = (props: LoginParams) => {
                     textInputProps={{
                       returnKeyType: 'next',
                       onSubmitEditing: () => inputRef?.current?.focus?.(),
-                      style: { borderWidth: 0, fontSize: 12 },
-					  maxLength: 10
+                      style: { borderWidth: 0, fontSize: 12 }
                     }}
                     textWrapStyle={{ borderColor: theme.colors.clear, borderWidth: 0, height: 40, paddingStart: 0 }}
                   />

package/themes/instacart/src/components/BusinessesListing/index.tsx

@@ -155,7 +155,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 				{isFarAway && (
 					<FarAwayMessage style={styles.farAwayMsg}>
 						<Ionicons name='md-warning-outline' style={styles.iconStyle} />
-						<OText size={12} numberOfLines={1} ellipsizeMode={'tail'} color={theme.colors.textNormal}>{t('YOU_ARE_FAR_FROM_ADDRESS', 'You are far from this address')}</OText>
+						<OText size={12} numberOfLines={1} ellipsizeMode={'tail'} color={theme.colors.textNormal}>{t('YOU_ARE_FAR_FROM_ADDRESS', 'Your are far from this address')}</OText>
 					</FarAwayMessage>
 				)}
 				<View style={styles.wrapperOrderOptions}>

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

@@ -20,6 +20,7 @@ const BusinessesListingUI = (props: any) => {
   const {
     navigation,
     businessesList,
+    paginationProps,
     handleBusinessClick,
   } = props;
 
@@ -78,7 +79,7 @@ const BusinessesListingUI = (props: any) => {
         </CardsContainer>
 
 
-        {!businessesList.loading && businessesList.businesses.length === 0 && (
+        {!businessesList.loading && businessesList.businesses.length === 0 && paginationProps.totalPages !== null && (
           <NotFoundSource
             content={t(
               'NOT_FOUND_BUSINESSES',

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

@@ -50,6 +50,12 @@ const CheckoutUI = (props: any) => {
     }
   }, [cart])
 
+  useEffect(() => {
+    if (!cartState.loading && cart && !cart?.valid && cart?.status === 2) {
+      navigation?.canGoBack() && navigation.goBack()
+    }
+  }, [cart])
+
   return (
     <>
       <PaymentOptions

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;