ordering-ui-react-native 0.16.10 → 0.16.11-release

package/src/components/LoginForm/index.tsx

@@ -1,9 +1,11 @@
 import React, { useEffect, useState, useRef } from 'react';
 import { Pressable, StyleSheet, View, Keyboard } from 'react-native';
 import Spinner from 'react-native-loading-spinner-overlay';
+import { TouchableOpacity } from 'react-native-gesture-handler';
 import { useForm, Controller } from 'react-hook-form';
 import { PhoneInputNumber } from '../PhoneInputNumber'
 import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons'
+import Recaptcha from 'react-native-recaptcha-that-works'
 
 import {
   LoginForm as LoginFormController,
@@ -28,7 +30,8 @@ import {
   OTab,
   SocialButtons,
   OrSeparator,
-  LineSeparator
+  LineSeparator,
+  RecaptchaButton
 } from './styles';
 
 import { _removeStoreData } from '../../providers/StoreUtil';
@@ -56,7 +59,9 @@ const LoginFormUI = (props: LoginParams) => {
     handleSendVerifyCode,
     handleCheckPhoneCode,
     onNavigationRedirect,
-    notificationState
+    notificationState,
+    handleReCaptcha,
+    enableReCaptcha
   } = props
 
   const theme = useTheme()
@@ -70,6 +75,10 @@ const LoginFormUI = (props: LoginParams) => {
       marginBottom: 25,
       borderWidth: 1,
       borderColor: theme.colors.disabled
+    },
+    recaptchaIcon: {
+      width: 100,
+      height: 100,
     }
   });
 
@@ -89,7 +98,9 @@ const LoginFormUI = (props: LoginParams) => {
       cellphone: null
     }
   });
-
+  const [recaptchaConfig, setRecaptchaConfig] = useState<any>({})
+  const [recaptchaVerified, setRecaptchaVerified] = useState(false)
+  const recaptchaRef = useRef<any>({});
   const inputRef = useRef<any>({})
 
   const googleLoginEnabled = configs?.google_login_enabled?.value === '1' || !configs?.google_login_enabled?.enabled
@@ -152,6 +163,40 @@ const LoginFormUI = (props: LoginParams) => {
     onChange(value.toLowerCase().replace(/[&,()%";:ç?<>{}\\[\]\s]/g, ''))
   }
 
+  const handleOpenRecaptcha = () => {
+    setRecaptchaVerified(false)
+
+    if (recaptchaVerified) {
+      handleReCaptcha && handleReCaptcha('')
+      return
+    }
+
+    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(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 && showToast(
@@ -317,6 +362,48 @@ const LoginFormUI = (props: LoginParams) => {
               rules={{ required: t('VALIDATION_ERROR_PASSWORD_REQUIRED', 'The field Password is required').replace('_attribute_', t('PASSWORD', 'Password')) }}
               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)}
+                  footerComponent={<OButton
+                    onClick={() => recaptchaRef.current.close()}
+                    style={{ borderRadius: 0 }}
+                    text={t('CLOSE', 'Close')}
+                    bgColor={theme.colors.primary}
+                    borderColor={theme.colors.primary}
+                    textStyle={{ color: 'white' }}
+                    imgRightSrc={null}
+                  />}
+                />
+              </>
+            )}
+
             <OButton
               onClick={handleSubmit(onSubmit)}
               text={loginButtonText}
@@ -369,13 +456,13 @@ const LoginFormUI = (props: LoginParams) => {
         }
 
         {configs && Object.keys(configs).length > 0 && anySocialButtonActivated && (
-            <ButtonsWrapper>
-              <OText size={18} mBottom={10} color={theme.colors.disabled}>
-                {t('SELECT_AN_OPTION_TO_LOGIN', 'Select an option to login')}
-              </OText>
-              <SocialButtons>
-                {(configs?.facebook_login?.value === 'true' || configs?.facebook_login?.value === '1') &&
-                  configs?.facebook_id?.value && (
+          <ButtonsWrapper>
+            <OText size={18} mBottom={10} color={theme.colors.disabled}>
+              {t('SELECT_AN_OPTION_TO_LOGIN', 'Select an option to login')}
+            </OText>
+            <SocialButtons>
+              {(configs?.facebook_login?.value === 'true' || configs?.facebook_login?.value === '1') &&
+                configs?.facebook_id?.value && (
                   <FacebookLogin
                     notificationState={notificationState}
                     handleErrors={(err: any) => showToast(ToastType.Error, err)}
@@ -383,26 +470,26 @@ const LoginFormUI = (props: LoginParams) => {
                     handleSuccessFacebookLogin={handleSuccessFacebook}
                   />
                 )}
-                {(configs?.google_login_client_id?.value !== '' && configs?.google_login_client_id?.value !== null) && googleLoginEnabled && (
-                  <GoogleLogin
-                    notificationState={notificationState}
-                    webClientId={configs?.google_login_client_id?.value}
-                    handleErrors={(err: any) => showToast(ToastType.Error, err)}
-                    handleLoading={(val: boolean) => setIsLoadingSocialButton(val)}
-                    handleSuccessGoogleLogin={handleSuccessFacebook}
-                  />
-                )}
-                {(configs?.apple_login_client_id?.value !== '' && configs?.apple_login_client_id?.value !== null) && (
-                  <AppleLogin
-                    notificationState={notificationState}
-                    handleErrors={(err: any) => showToast(ToastType.Error, err)}
-                    handleLoading={(val: boolean) => setIsLoadingSocialButton(val)}
-                    handleSuccessApple={handleSuccessApple}
-                  />
-                )}
-              </SocialButtons>
-            </ButtonsWrapper>
-          )}
+              {(configs?.google_login_client_id?.value !== '' && configs?.google_login_client_id?.value !== null) && googleLoginEnabled && (
+                <GoogleLogin
+                  notificationState={notificationState}
+                  webClientId={configs?.google_login_client_id?.value}
+                  handleErrors={(err: any) => showToast(ToastType.Error, err)}
+                  handleLoading={(val: boolean) => setIsLoadingSocialButton(val)}
+                  handleSuccessGoogleLogin={handleSuccessFacebook}
+                />
+              )}
+              {(configs?.apple_login_client_id?.value !== '' && configs?.apple_login_client_id?.value !== null) && (
+                <AppleLogin
+                  notificationState={notificationState}
+                  handleErrors={(err: any) => showToast(ToastType.Error, err)}
+                  handleLoading={(val: boolean) => setIsLoadingSocialButton(val)}
+                  handleSuccessApple={handleSuccessApple}
+                />
+              )}
+            </SocialButtons>
+          </ButtonsWrapper>
+        )}
 
         {onNavigationRedirect && registerButtonText && (
           <ButtonsWrapper>
@@ -440,6 +527,7 @@ const LoginFormUI = (props: LoginParams) => {
 export const LoginForm = (props: any) => {
   const loginProps = {
     ...props,
+    isRecaptchaEnable: true,
     UIComponent: LoginFormUI,
     handleSuccessLogin: () => _removeStoreData('isGuestUser')
   };

package/src/components/LoginForm/styles.tsx

@@ -67,3 +67,9 @@ export const LineSeparator = styled.View`
 export const SkeletonWrapper = styled.View`
   width: 90%;
 `
+export const RecaptchaButton = styled.View`
+  flex-direction: row;
+  align-items: center;
+  margin-bottom: 10px;
+  justify-content: center;
+`

package/src/components/Messages/index.tsx

@@ -42,8 +42,8 @@ const ORDER_STATUS: any = {
 
 const imgOptions = {
   mediaType: 'photo',
-  maxHeight: 300,
-  maxWidth: 300,
+  maxHeight: 2048,
+  maxWidth: 2048,
   includeBase64: true,
   selectionLimit: 0
 }

package/src/components/NotificationSetting/index.tsx

@@ -0,0 +1,85 @@
+import React, { useEffect } from 'react';
+import { useTheme } from 'styled-components/native';
+import { StyleSheet, View } from 'react-native';
+import {
+  openSettings,
+  checkNotifications
+} from 'react-native-permissions';
+import { useLanguage } from 'ordering-components/native'
+import { OBottomPopup, OButton, OText } from '../shared';
+interface NotificationSettingPropsParams {
+  checkNotificationStatus: { open: boolean, checked: boolean };
+  setCheckNotificationStatus: (notificationStatus: any) => void;
+}
+export const NotificationSetting = (props: NotificationSettingPropsParams) => {
+  const { checkNotificationStatus, setCheckNotificationStatus } = props
+  const theme = useTheme();
+  const [, t] = useLanguage();
+
+  const requestLocationPermission = async () => {
+    const notificationStatus = await checkNotifications()
+    if (notificationStatus?.status === 'blocked') {
+      setCheckNotificationStatus({ open: true, checked: false })
+      return
+    }
+    setCheckNotificationStatus({ open: false, checked: true })
+  };
+
+  const callOpenSettings = () => {
+    openSettings().catch(() => console.warn('cannot open settings'));
+    setCheckNotificationStatus({ open: false, checked: true })
+  }
+
+  useEffect(() => {
+    requestLocationPermission()
+  }, [])
+  return (
+    <OBottomPopup
+      open={checkNotificationStatus?.open}
+      onClose={() => setCheckNotificationStatus({ open: false, checked: true })}
+      title={t('ENABLE_NOTIFICATIONS', 'Enable notifications')}
+      titleStyle={{ textAlign: 'center' }}
+      containerStyle={{ borderRadius: 10, borderTopRightRadius: 10, borderTopLeftRadius: 10 }}
+    >
+      <View style={styles.container}>
+        <View style={styles.textContainer}>
+          <OText style={{ textAlign: 'center' }}>
+            {t('ACTIVE_NOTIFICATION_TO_RECEIVE_INFORMATION', 'Activate notifications to receive information about your orders')}
+          </OText>
+        </View>
+        <OButton
+          text={t('ENABLE_NOTIFICATIONS', 'Enable notifications')}
+          bgColor={theme.colors.primary}
+          borderColor={theme.colors.primary}
+          parentStyle={styles.parentStyle}
+          style={styles.button}
+          textStyle={{ color: 'white' }}
+          onClick={() => callOpenSettings()}
+        />
+      </View>
+    </OBottomPopup>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    width: '100%',
+    textAlign: 'center'
+  },
+  textContainer: {
+    width: '100%',
+    paddingHorizontal: 25,
+    paddingBottom: 20
+  },
+  parentStyle: {
+    display: 'flex',
+    width: '70%',
+    marginLeft: 'auto',
+    marginRight: 'auto',
+    marginBottom: 25
+
+  },
+  button: {
+    borderRadius: 5
+  }
+});

package/src/components/OrderDetails/index.tsx

@@ -1,5 +1,5 @@
-import React, { useState, useEffect, useRef } from 'react'
-import { View, StyleSheet, BackHandler, TouchableOpacity, I18nManager, AppState } from 'react-native'
+import React, { useState, useEffect } from 'react'
+import { View, StyleSheet, BackHandler, TouchableOpacity, I18nManager } from 'react-native'
 import LinearGradient from 'react-native-linear-gradient'
 import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
 import MaterialCommunityIcon from 'react-native-vector-icons/MaterialCommunityIcons'
@@ -109,7 +109,6 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
   const [isReviewed, setIsReviewed] = useState(false)
   const [openOrderCreating, setOpenOrderCreating] = useState(false)
   const [openTaxModal, setOpenTaxModal] = useState<any>({ open: false, tax: null, type: '' })
-  const appState = useRef(AppState.currentState)
 
   const { order, loading, businessData, error } = props.order
 
@@ -259,24 +258,6 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
     })
   }, [])
 
-  useEffect(() => {
-    const onFocusApp = (nextAppState: any) => {
-      if (
-        appState.current.match(/inactive|background/) &&
-        nextAppState === "active"
-      ) {
-        getOrder && getOrder()
-      }
-      appState.current = nextAppState;
-    }
-
-    AppState.addEventListener("change", onFocusApp);
-    return () => {
-      AppState.removeEventListener('change', onFocusApp);
-    };
-  }, [])
-
-
   return (
     <OrderDetailsContainer keyboardShouldPersistTaps='handled'>
       {order && order?.id && !error && !loading && (
@@ -400,6 +381,11 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                 <InfoBlock>
                   <OText size={18} style={{ textAlign: 'left' }} >{order?.customer?.name} {order?.customer?.lastname}</OText>
                   <OText style={{ textAlign: 'left' }}>{order?.customer?.address}</OText>
+                  {(!!order?.customer?.cellphone) && (
+                    <OText size={18} style={{ textAlign: 'left' }}>
+                      {(order?.customer?.country_phone_code) && `+${(order?.customer?.country_phone_code)} `}{(order?.customer?.cellphone)}
+                    </OText>
+                  )}
                 </InfoBlock>
               </Customer>
               {order?.delivery_option !== undefined && order?.delivery_type === 1 && (

package/src/components/OrdersOption/index.tsx

@@ -102,46 +102,71 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
   }
 
   useEffect(() => {
+    const length = orders.filter((order : any) => orderStatus.includes(order.status)).length
+
     setOrdersLength && setOrdersLength({
       ...ordersLength,
-      [activeOrders ? 'activeOrdersLength' : 'previousOrdersLength']: orders.length
+      [activeOrders ? 'activeOrdersLength' : 'previousOrdersLength']: length
     })
-  }, [orders.length])
+    ordersLength[activeOrders ? 'activeOrdersLength' : 'previousOrdersLength'] = length
+  }, [orders])
 
   useEffect(() => {
-    setOrdersFiltered(filterForOrders === 'preorders' ? orders.filter((order : any) => order.status === 13) : orders.filter((order : any) => orderStatus.includes(order.status) && order.status !== 13))
+    setOrdersFiltered(filterForOrders === 'preorders'
+      ? orders.filter((order : any) => order.status === 13)
+      : orders.filter((order : any) => orderStatus.includes(order.status) && order.status !== 13)
+    )
   }, [filterForOrders, orders])
 
   return (
-    <>
+    <View style={{ marginBottom: 20 }}>
       <OptionTitle>
-        {(!activeOrders || (activeOrders && ordersLength.activeOrdersLength > 0) || (ordersLength.previousOrdersLength === 0 && ordersLength.activeOrdersLength === 0)) && !isLoadingFirstRender && (
-          <>
-            <TouchableOpacity onPress={() => setFilterForOrders('active-orders')}>
-              <OText size={16} color={filterForOrders === 'active-orders' ? theme.colors.black : theme.colors.textSecondary} mBottom={10} mRight={10} >
-                {titleContent || (activeOrders
-                  ? t('ACTIVE_ORDERS', 'Active Orders')
-                  : t('PREVIOUS_ORDERS', 'Previous Orders'))}
-              </OText>
-            </TouchableOpacity>
-            {activeOrders && orders.filter((order : any) => order.status === 13)?.length > 0 && (
-            <TouchableOpacity onPress={() => setFilterForOrders('preorders')}>
-              <OText size={16} color={filterForOrders === 'preorders' ? theme.colors.black : theme.colors.textSecondary} mBottom={10} >
-                {t('PREORDERS', 'Preorders')}
-              </OText>
-            </TouchableOpacity>
-            )}
-          </>
+        <TouchableOpacity onPress={() => setFilterForOrders('active-orders')}>
+          <OText size={16} color={filterForOrders === 'active-orders' ? theme.colors.black : theme.colors.textSecondary} mBottom={10} mRight={10} >
+            {titleContent || (activeOrders
+              ? t('ACTIVE_ORDERS', 'Active Orders')
+              : t('PREVIOUS_ORDERS', 'Previous Orders'))}
+          </OText>
+        </TouchableOpacity>
+        {activeOrders && orders.filter((order : any) => order.status === 13)?.length > 0 && (
+          <TouchableOpacity onPress={() => setFilterForOrders('preorders')}>
+            <OText size={16} color={filterForOrders === 'preorders' ? theme.colors.black : theme.colors.textSecondary} mBottom={10} >
+              {t('PREORDERS', 'Preorders')}
+            </OText>
+          </TouchableOpacity>
         )}
       </OptionTitle>
-      {!loading && orders.length === 0 && !isLoadingFirstRender && activeOrders && ordersLength.previousOrdersLength === 0 && ordersLength.activeOrdersLength !== 0 && (
-        <NotFoundSource
-          content={t('NO_RESULTS_FOUND', 'Sorry, no results found')}
-          image={imageFails}
-          conditioned
-        />
+      {!loading && !error && orders.length > 0 && !isLoadingFirstRender && (
+        activeOrders ? (
+          <ActiveOrders
+            orders={ordersFiltered}
+            pagination={pagination}
+            loadMoreOrders={loadMoreOrders}
+            reorderLoading={reorderLoading}
+            customArray={customArray}
+            getOrderStatus={getOrderStatus}
+            onNavigationRedirect={onNavigationRedirect}
+            setScreen={setScreen}
+            screen={screen}
+            isPreorders={filterForOrders === 'preorders'}
+            preordersLength={orders.filter((order : any) => order.status === 13)?.length}
+          />
+        ) : (
+          <PreviousOrders
+            reorderLoading={reorderLoading}
+            orders={ordersFiltered}
+            pagination={pagination}
+            loadMoreOrders={loadMoreOrders}
+            getOrderStatus={getOrderStatus}
+            onNavigationRedirect={onNavigationRedirect}
+            handleReorder={handleReorder}
+          />
+        )
       )}
-      {!loading && orders.length === 0 && !isLoadingFirstRender && ordersLength.previousOrdersLength === 0 && (
+      {!loading &&
+        !isLoadingFirstRender &&
+        ordersLength[activeOrders ? 'activeOrdersLength' : 'previousOrdersLength'] === 0 &&
+      (
         <NotFoundSource
           content={t('NO_RESULTS_FOUND', 'Sorry, no results found')}
           image={imageFails}
@@ -179,34 +204,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
           )}
         </>
       )}
-      {!loading && !error && orders.length > 0 && !isLoadingFirstRender && (
-        activeOrders ? (
-          <ActiveOrders
-            orders={ordersFiltered}
-            pagination={pagination}
-            loadMoreOrders={loadMoreOrders}
-            reorderLoading={reorderLoading}
-            customArray={customArray}
-            getOrderStatus={getOrderStatus}
-            onNavigationRedirect={onNavigationRedirect}
-            setScreen={setScreen}
-            screen={screen}
-            isPreorders={filterForOrders === 'preorders'}
-            preordersLength={orders.filter((order : any) => order.status === 13)?.length}
-          />
-        ) : (
-          <PreviousOrders
-            reorderLoading={reorderLoading}
-            orders={ordersFiltered}
-            pagination={pagination}
-            loadMoreOrders={loadMoreOrders}
-            getOrderStatus={getOrderStatus}
-            onNavigationRedirect={onNavigationRedirect}
-            handleReorder={handleReorder}
-          />
-        )
-      )}
-    </>
+    </View>
   )
 }