ordering-ui-react-native 0.16.29 → 0.16.30-release

package/src/components/PaymentOptionsWebView/index.tsx

@@ -5,147 +5,146 @@ import WebView from 'react-native-webview';
 import { ActivityIndicator } from 'react-native-paper';
 
 import {
-  ToastType,
-  useToast,
-  useApi,
-  useLanguage,
-  useConfig
+    ToastType,
+    useToast,
+    useApi,
+    useLanguage,
+    useConfig
 } from 'ordering-components/native';
 
 import { OText } from '../shared';
 
 interface PaymentOptionsWebViewParams {
-  onNavigationRedirect?: Function,
-  uri?: any,
-  user?: any,
-  token?: any,
-  cart?: any,
-  currency?: any,
-  webviewPaymethod?: any,
-  setShowGateway?: any,
-  setOpenOrderCreating?: any,
-  locationId?: any
+    onNavigationRedirect?: Function,
+    uri?: any,
+    user?: any,
+    token?: any,
+    cart?: any,
+    currency?: any,
+    webviewPaymethod?: any,
+    setShowGateway?: any,
+    setOpenOrderCreating?: any,
+    locationId?: any
 }
 export const PaymentOptionsWebView = (props: PaymentOptionsWebViewParams) => {
-  const {
-    onNavigationRedirect,
-    uri,
-    user,
-    token,
-    cart,
-    currency,
-    webviewPaymethod,
-    setShowGateway,
-    setOpenOrderCreating,
-    locationId
-  } = props
+    const { 
+        onNavigationRedirect,
+        uri,
+        user,
+        token,
+        cart,
+        currency,
+        webviewPaymethod,
+        setShowGateway,
+        setOpenOrderCreating,
+        locationId
+    } = props
 
-  const webviewRef = useRef<any>(null)
-  const [, { showToast }] = useToast();
-  const [ordering] = useApi()
-  const [{ configs }] = useConfig();
-  const [, t] = useLanguage();
+   const webviewRef = useRef<any>(null)
+   const [, { showToast }] = useToast();
+   const [ordering] = useApi()
+   const [{ configs }] = useConfig();
+   const [, t] = useLanguage();
 
+   
+   const [progClr, setProgClr] = useState('#424242');
+   const [prog, setProg] = useState(true);
 
-  const [progClr, setProgClr] = useState('#424242');
-  const [prog, setProg] = useState(true);
-
-  const handleCloseWebview = () => {
+   const handleCloseWebview = () => {
     setProg(true);
     setShowGateway({ open: false, closedByUser: true })
   }
 
-  const onMessage = (e: any) => {
-    if (e?.nativeEvent?.data && e?.nativeEvent?.data !== 'undefined') {
-      let payment = JSON.parse(e.nativeEvent.data);
+   const onMessage = (e: any) => {
+        if (e?.nativeEvent?.data && e?.nativeEvent?.data !== 'undefined') {
+            let payment = JSON.parse(e.nativeEvent.data);
 
-      if (payment === 'api error') {
+      if (payment === 'api error' || payment === 'Cancelled by user') {
         setShowGateway({ closedByUser: true, open: false })
         setProg(true);
       }
 
-      if (payment) {
-        if (payment.error) {
-          showToast(ToastType.Error, payment.result)
-          setOpenOrderCreating && setOpenOrderCreating(false)
-        } else if (payment?.result?.order?.uuid) {
-          showToast(ToastType.Success, t('ORDER_PLACED_SUCCESSfULLY', 'The order was placed successfully'))
-          onNavigationRedirect && onNavigationRedirect('OrderDetails', { orderId: payment?.result?.order?.uuid, isFromCheckout: true })
+            if (payment) {
+                if (payment.error) {
+                showToast(ToastType.Error, payment.result)
+                setOpenOrderCreating && setOpenOrderCreating(false)
+                } else if (payment?.result?.order?.uuid) {
+                showToast(ToastType.Success, t('ORDER_PLACED_SUCCESSfULLY', 'The order was placed successfully'))
+                onNavigationRedirect && onNavigationRedirect('OrderDetails', { orderId: payment?.result?.order?.uuid, isFromCheckout: true})
+                }
+                setProg(true);
+                setShowGateway({ closedByUser: false, open: false })
+            }
         }
-        setProg(true);
-        setShowGateway({ closedByUser: false, open: false })
-      }
-    }
-  }
+   }
 
-  return (
+   return (
     <View style={{ zIndex: 9999, height: '100%', width: '100%', position: 'absolute', backgroundColor: 'white' }}>
-      <Icon
-        name="x"
-        size={35}
-        style={{ backgroundColor: 'white', paddingTop: 30, paddingLeft: 10 }}
-        onPress={handleCloseWebview}
-      />
-      <OText
-        style={{
-          textAlign: 'center',
-          fontSize: 16,
-          fontWeight: 'bold',
-          color: '#00457C',
-          marginBottom: 5,
-          marginTop: 10
-        }}>
-        {webviewPaymethod?.gateway === 'paypal' ? (t('PAYPAL_GATEWAY', 'PayPal GateWay')) : (t('SQUARE_PAYMENT', 'Square payment'))}
-      </OText>
-      <View style={{ padding: 20, opacity: prog ? 1 : 0, backgroundColor: 'white' }}>
-        <ActivityIndicator size={24} color={progClr} />
-      </View>
-      <WebView
-        source={{ uri: uri }}
-        onMessage={onMessage}
-        ref={webviewRef}
-        javaScriptEnabled={true}
-        javaScriptEnabledAndroid={true}
-        cacheEnabled={false}
-        cacheMode='LOAD_NO_CACHE'
-        style={{ flex: 1 }}
-        onShouldStartLoadWithRequest={() => true}
-        onLoadStart={() => {
-          setProg(true);
-          setProgClr('#424242');
-        }}
-        onLoadProgress={() => {
-          setProg(true);
-          setProgClr('#00457C');
-        }}
-        onLoad={() => {
-          setProg(true);
-          setProgClr('#00457C');
-        }}
-        onLoadEnd={(e) => {
-          const messageParams = locationId ? { locationId, clientId: webviewPaymethod?.credentials?.application_id } : {}
-          const message = {
-            action: 'init',
-            data: {
-              urlPlace: `${ordering.root}/carts/${cart?.uuid}/place`,
-              urlConfirm: `${ordering.root}/carts/${cart?.uuid}/confirm`,
-              payData: {
-                paymethod_id: webviewPaymethod?.id,
-                amount: cart?.balance ?? cart?.total,
-                delivery_zone_id: cart?.delivery_zone_id,
-                user_id: user?.id,
-                user_name: user?.name
-              },
-              currency: configs?.stripe_currency?.value || currency,
-              userToken: token,
-              clientId: webviewPaymethod?.credentials?.client_id,
-              ...messageParams
-            }
-          }
-          setProg(false);
-          webviewRef?.current?.postMessage?.(JSON.stringify(message))
-        }}
-      />
+          <Icon
+            name="x"
+            size={35}
+            style={{ backgroundColor: 'white', paddingTop: 30, paddingLeft: 10 }}
+            onPress={handleCloseWebview}
+          />
+          <OText
+            style={{
+              textAlign: 'center',
+              fontSize: 16,
+              fontWeight: 'bold',
+              color: '#00457C',
+              marginBottom: 5,
+              marginTop: 10
+            }}>
+           {webviewPaymethod?.gateway === 'paypal' ? (t('PAYPAL_GATEWAY', 'PayPal GateWay')) : (t('SQUARE_PAYMENT', 'Square payment'))}
+          </OText>
+          <View style={{ padding: 20, opacity: prog ? 1 : 0, backgroundColor: 'white' }}>
+            <ActivityIndicator size={24} color={progClr} />
+          </View>
+          <WebView
+            source={{ uri: uri }}
+            onMessage={onMessage}
+            ref={webviewRef}
+            javaScriptEnabled={true}
+            javaScriptEnabledAndroid={true}
+            cacheEnabled={false}
+            cacheMode='LOAD_NO_CACHE'
+            style={{ flex: 1 }}
+            onShouldStartLoadWithRequest={() => true}
+            onLoadStart={() => {
+              setProg(true);
+              setProgClr('#424242');
+            }}
+            onLoadProgress={() => {
+              setProg(true);
+              setProgClr('#00457C');
+            }}
+            onLoad={() => {
+              setProg(true);
+              setProgClr('#00457C');
+            }}
+            onLoadEnd={(e) => {
+            const messageParams = locationId ? { locationId } : {}
+              const message = {
+                action: 'init',
+                data: {
+                  urlPlace: `${ordering.root}/carts/${cart?.uuid}/place`,
+                  urlConfirm: `${ordering.root}/carts/${cart?.uuid}/confirm`,
+                  payData: {
+                    paymethod_id: webviewPaymethod?.id,
+                    amount: cart?.balance ?? cart?.total,
+                    delivery_zone_id: cart?.delivery_zone_id,
+                    user_id: user?.id,
+                    user_name: user?.name
+                  },
+                  currency: configs?.stripe_currency?.value || currency,
+                  userToken: token,
+                  clientId: webviewPaymethod?.credentials?.client_id,
+                  ...messageParams
+                }
+              }
+              setProg(false);
+              webviewRef?.current?.postMessage?.(JSON.stringify(message))
+            }}
+          />
     </View>
-  )
-}
+)}

package/src/components/ReviewDriver/index.tsx

@@ -218,7 +218,7 @@ const ReviewDriverUI = (props: ReviewDriverParams) => {
             <RatingBarContainer>
               <LinearGradient
                 start={{ x: 0.0, y: 0.0 }}
-                end={{ x: qualificationList[dirverReviews?.qualification - 1]?.percent || 0, y: 0 }}
+                end={{ x: qualificationList[dirverReviews?.qualification - 1]?.percent || 0.0001, y: 0 }}
                 locations={[.9999, .9999]}
                 colors={[theme.colors.primary, theme.colors.lightGray]}
                 style={styles.statusBar}

package/src/components/ReviewOrder/index.tsx

@@ -238,7 +238,7 @@ export const ReviewOrderUI = (props: ReviewOrderParams) => {
               <RatingBarContainer>
                 <LinearGradient
                   start={{ x: 0.0, y: 0.0 }}
-                  end={{ x: qualificationList[stars.quality - 1]?.percent || 0, y: 0 }}
+                  end={{ x: qualificationList[stars.quality - 1]?.percent || 0.0001, y: 0.0 }}
                   locations={[.9999, .9999]}
                   colors={[theme.colors.primary, theme.colors.lightGray]}
                   style={styles.statusBar}
@@ -332,6 +332,7 @@ export const ReviewOrderUI = (props: ReviewOrderParams) => {
 export const ReviewOrder = (props: ReviewOrderParams) => {
   const reviewOrderProps = {
     ...props,
+    defaultStar: 0,
     UIComponent: ReviewOrderUI
   }
   return <ReviewOrderController {...reviewOrderProps} />

package/src/components/ReviewProducts/index.tsx

@@ -61,6 +61,17 @@ const ReviewProductsUI = (props: ReviewProductParams) => {
     }
   }, [formState])
 
+  useEffect(() => {
+    const _changes = order?.products.map(product => {
+      return {
+        product_id: product?.product_id,
+        comment: '',
+        qualification: 5
+      }
+    })
+    handleChangeFormState(_changes)
+  }, [])
+
   return (
     <>
       <ReviewProductsContainer>

package/src/components/SignupForm/index.tsx

@@ -245,6 +245,12 @@ const SignupFormUI = (props: SignupParams) => {
 
   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
@@ -555,6 +561,15 @@ const SignupFormUI = (props: SignupParams) => {
                 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}
+                />}
               />
             </>
           )}

package/src/components/SingleProductReview/index.tsx

@@ -1,10 +1,11 @@
 import React, { useState, useEffect } from 'react'
-import { useLanguage } from 'ordering-components/native'
-import { OText, OButton, OInput } from '../shared'
+import { useLanguage, useUtils } from 'ordering-components/native'
+import { OText, OButton, OInput, OIcon } from '../shared'
 import { StyleSheet, TouchableOpacity, View } from 'react-native'
 import AntDesignIcons from 'react-native-vector-icons/AntDesign'
 import { useTheme } from 'styled-components/native'
 import { SingleProductReviewParams } from '../../types'
+import FastImage from 'react-native-fast-image'
 
 import {
   ProductContainer,
@@ -12,6 +13,7 @@ import {
   LikeHandsActionContainer,
   LikeHandsButton,
   CommentsButtonGroup,
+  LogoWrapper
 } from './styles'
 
 export const SingleProductReview = (props: SingleProductReviewParams) => {
@@ -23,6 +25,7 @@ export const SingleProductReview = (props: SingleProductReviewParams) => {
 
   const [, t] = useLanguage()
   const theme = useTheme()
+  const [{ optimizeImage }] = useUtils()
 
   const styles = StyleSheet.create({
     inputTextArea: {
@@ -37,7 +40,7 @@ export const SingleProductReview = (props: SingleProductReviewParams) => {
       flexDirection: 'row',
       justifyContent: 'center',
       marginVertical: 10,
-    },
+    }
   })
 
   const [comments, setComments] = useState<Array<any>>([])
@@ -69,7 +72,7 @@ export const SingleProductReview = (props: SingleProductReviewParams) => {
   }
 
   useEffect(() => {
-    if (comments?.length === 0 && !extraComment && formState.changes?.length === 0 && qualification === 5) return
+    if (comments?.length === 0 && !extraComment) return
     let _comments = ''
     if (comments.length > 0) {
       comments.map(comment => (_comments += comment.content + '. '))
@@ -129,7 +132,7 @@ export const SingleProductReview = (props: SingleProductReviewParams) => {
               style={{ height: 35, paddingLeft: 5, paddingRight: 5, marginHorizontal: 3, marginVertical: 10 }}
               imgRightSrc={isSelectedComment(commentItem.key) ? theme.images.general.close : null}
               imgRightStyle={{ tintColor: theme.colors.white, right: 5, margin: 5 }}
-              onClick={() => handleChangeComment(commentItem) }
+              onClick={() => handleChangeComment(commentItem)}
             />
           ))}
         </CommentsButtonGroup>

package/src/components/StripeElementsForm/index.tsx

@@ -7,7 +7,6 @@ import {
   useConfirmSetupIntent,
   createPaymentMethod
 } from '@stripe/stripe-react-native';
-import configs from '../../config.json'
 import { ErrorMessage } from './styles';
 
 import { StripeElementsForm as StripeFormController } from './naked';
@@ -26,7 +25,8 @@ const StripeElementsFormUI = (props: any) => {
     methodsPay,
     paymethod,
     onCancel,
-    cart
+    cart,
+    merchantId
   } = props;
 
   const theme = useTheme();
@@ -54,17 +54,25 @@ const StripeElementsFormUI = (props: any) => {
   }
 
   if (user?.address) {
-    billingDetails.addressLine1 = user?.address
-  }
+		billingDetails.address = {
+      line1: user?.address
+    }
+	}
 
   const createPayMethod = async () => {
-    const params: any = { type: 'Card' }
-    if (Object.keys(billingDetails).length > 0) {
-      params.billingDetails = billingDetails
-    }
+    const params: any = { paymentMethodType: 'Card', paymentMethodData: {} }
+		if (Object.keys(billingDetails).length > 0) {
+			params.paymentMethodData.billingDetails = {...billingDetails, token: card?.last4}
+		}
     try {
       setCreatePmLoading(true)
-      const { paymentMethod } = await createPaymentMethod(params);
+      const { paymentMethod, error } = await createPaymentMethod(params);
+
+      if (error) {
+        setErrors(error?.message);
+        setCreatePmLoading(false)
+        return
+      }
 
       setCreatePmLoading(false)
       handleSource && handleSource({
@@ -87,10 +95,10 @@ const StripeElementsFormUI = (props: any) => {
       createPayMethod();
       return
     }
-    const params: any = { type: 'Card' }
-    if (Object.keys(billingDetails).length > 0) {
-      params.billingDetails = billingDetails
-    }
+    const params: any = { paymentMethodType: 'Card', paymentMethodData: {} }
+		if (Object.keys(billingDetails).length > 0) {
+			params.paymentMethodData.billingDetails = {...billingDetails, token: card?.last4}
+		}
     try {
       const { setupIntent, error } = await confirmSetupIntent(requirements, params);
 
@@ -126,12 +134,13 @@ const StripeElementsFormUI = (props: any) => {
     <View style={styles.container}>
       {publicKey ? (
         <View style={{ flex: 1 }}>
-          <StripeProvider 
+          <StripeProvider
             publishableKey={publicKey}
-            merchantIdentifier={`merchant.${configs.apple_app_id}`}
+            merchantIdentifier={`merchant.${merchantId}`}
+            urlScheme={merchantId}
           >
             {methodsPay?.includes(paymethod) ? (
-              <StripeMethodForm 
+              <StripeMethodForm
                 handleSource={handleSource}
                 onCancel={onCancel}
                 cart={cart}

package/src/components/VerifyPhone/styles.tsx

@@ -2,7 +2,7 @@ import styled from 'styled-components/native';
 
 export const Container = styled.View`
   width: 100%;
-  padding: 0 43px;
+  padding: 0 30px;
 `
 
 export const CountDownContainer = styled.View`
@@ -20,7 +20,6 @@ export const ResendSection = styled.View`
   display: flex;
   flex-direction: row;
   justify-content: center;
-  flex-wrap: wrap;
 `
 
 export const WrappCountdown = styled.View`

package/src/components/shared/OBottomPopup.tsx

@@ -4,14 +4,18 @@ const deviceHeight = Dimensions.get('window').height
 
 interface Props {
   open: boolean;
+  containerStyle: any;
   title?: string;
+  titleStyle?: any;
   children?: any;
   onClose?: any;
 }
 const OBottomPopup = (props: Props) => {
   const {
     open,
+    containerStyle,
     title,
+    titleStyle,
     onClose,
     children
   } = props
@@ -29,9 +33,9 @@ const OBottomPopup = (props: Props) => {
         >
           <View style={styles.touchableOutsideStyle} />
         </TouchableWithoutFeedback>
-        <View style={styles.bottomContainer}>
+        <View style={{ ...styles.bottomContainer, ...containerStyle }}>
           <View>
-            <Text style={styles.titleStyle}>
+            <Text style={{ ...styles.titleStyle, ...titleStyle }}>
               {title}
             </Text>
             {children}

package/src/index.tsx

@@ -36,6 +36,7 @@ import { LogoutButton } from './components/LogoutButton';
 import { Messages } from './components/Messages';
 import { MomentOption } from './components/MomentOption';
 import NavBar from './components/NavBar';
+import { NotificationSetting } from './components/NotificationSetting'
 import { NotFoundSource } from './components/NotFoundSource';
 import { OrderCreating } from './components/OrderCreating';
 import { OrderDetails } from './components/OrderDetails';
@@ -136,6 +137,7 @@ export {
   Messages,
   MomentOption,
   NavBar,
+  NotificationSetting,
   NotFoundSource,
   OrderCreating,
   OrderDetails,

package/src/pages/BusinessesListing.tsx

@@ -1,24 +1,25 @@
-import React, {useEffect} from 'react'
+import React, { useEffect } from 'react'
 import { BusinessesListing as BusinessListingController } from '../components/BusinessesListing'
 import styled from 'styled-components/native'
 import { useTheme } from 'styled-components/native'
 
 const BusinessesListing = (props: any) => {
   const theme = useTheme()
-  const businessId =  props.route.params?.businessId
+  const businessId = props.route.params?.businessId
   const categoryId = props.route.params?.categoryId
-  const productId =  props.route.params?.productId
-  const store =  props.route.params?.store
+  const productId = props.route.params?.productId
+  const store = props.route.params?.store
 
   useEffect(() => {
-    if(store){
-      props.navigation.navigate('Business', {store,businessId,categoryId,productId})
+    if (store) {
+      props.navigation.navigate('Business', { store, businessId, categoryId, productId })
       return
     }
   }, [businessId, categoryId, productId, store])
 
   const BusinessesListingProps = {
     ...props,
+    navigation: props?.navigation,
     isSearchByName: true,
     isSearchByDescription: true,
     propsToFetch: ['id', 'name', 'header', 'logo', 'ribbon', 'location', 'schedule', 'open', 'delivery_price', 'distance', 'delivery_time', 'pickup_time', 'reviews', 'featured', 'offers', 'food', 'laundry', 'alcohol', 'groceries', 'slug'],

package/src/pages/OrderDetails.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { OrderDetails as OrderDetailsController } from '../components/OrderDetails'
 import { SafeAreaContainer } from '../layouts/SafeAreaContainer'
 
-const OrderDetails = ({ navigation, route } : any) => {
+const OrderDetails = ({ navigation, route }: any) => {
   const orderDetailsProps = {
     navigation,
     orderId: route.params?.orderId,

package/src/pages/ReviewDriver.tsx

@@ -1,14 +1,14 @@
 import React from 'react'
 import { Platform } from 'react-native';
 import styled from 'styled-components/native';
-import {ReviewDriver as ReviewDriverController} from '../components/ReviewDriver'
+import { ReviewDriver as ReviewDriverController } from '../components/ReviewDriver'
 import { SafeAreaContainer } from '../layouts/SafeAreaContainer';
 
 const KeyboardView = styled.KeyboardAvoidingView`
   flex: 1;
 `;
 
-const ReviewDriver = ({navigation, route} : any) => {
+const ReviewDriver = ({ navigation, route }: any) => {
   const reviewDriverProps = {
     navigation,
     order: route?.params?.order,

package/src/pages/ReviewOrder.tsx

@@ -1,14 +1,14 @@
 import React from 'react'
 import { Platform } from 'react-native';
 import styled from 'styled-components/native';
-import {ReviewOrder as ReviewOrderController} from '../components/ReviewOrder'
+import { ReviewOrder as ReviewOrderController } from '../components/ReviewOrder'
 import { SafeAreaContainer } from '../layouts/SafeAreaContainer';
 
 const KeyboardView = styled.KeyboardAvoidingView`
   flex: 1;
 `;
 
-const ReviewOrder = ({navigation, route} : any) => {
+const ReviewOrder = ({ navigation, route }: any) => {
   const reviewOrderProps = {
     navigation,
     order: route?.params?.order,

package/src/types/@fatnlazycat/react-native-recaptcha-v3/index.d.ts

@@ -0,0 +1 @@
+declare module '@fatnlazycat/react-native-recaptcha-v3'

package/src/utils/index.tsx

@@ -34,7 +34,6 @@ export const getTraduction = (key: string, t: any) => {
     ERROR_ADD_PRODUCT_VERY_FAR_FOR_DELIVERY: 'Error adding product, very far for delivery',
     ERROR_PRODUCT_NOT_FOUND: 'Error with the product',
     ERROR_ADD_BUSINESS_INVALID: 'An error occurred with the business',
-    ERROR_INVALID_OFFER: 'The offer doesn\'t exist'
   }
 
   return keyList[key] ? t(key, keyList[key]) : t(key)

package/themes/business/index.tsx

@@ -39,6 +39,8 @@ import { VerifyPhone } from './src/components/VerifyPhone';
 import { DriverMap } from './src/components/DriverMap';
 import { MapViewUI as MapView } from './src/components/MapView'
 import { NewOrderNotification } from './src/components/NewOrderNotification';
+import { DriverSchedule } from './src/components/DriverSchedule';
+import { ScheduleBlocked } from './src/components/ScheduleBlocked';
 //OComponents
 import {
   OText,
@@ -106,6 +108,8 @@ export {
   UserFormDetailsUI,
   UserProfileForm,
   VerifyPhone,
+  DriverSchedule,
+  ScheduleBlocked,
   //OComponents
   OAlert,
   OButton,