ordering-ui-react-native 0.17.14 → 0.17.15-release

package/src/components/StripeMethodForm/index.tsx

@@ -1,11 +1,10 @@
-import React, { useState, useEffect } from 'react'
+import React, { useEffect } from 'react'
 import { useLanguage, useConfig } from 'ordering-components/native'
-import { useGooglePay, ApplePayButton, useApplePay } from '@stripe/stripe-react-native'
-import { OButton, OText } from '../shared';
-import { Platform, View } from 'react-native';
+import { useGooglePay, useApplePay } from '@stripe/stripe-react-native'
+import { Platform } from 'react-native';
 import { StripeMethodFormParams } from '../../types';
-import Spinner from 'react-native-loading-spinner-overlay';
 import { android_app_id } from '../../config.json'
+
 export const StripeMethodForm = (props: StripeMethodFormParams) => {
   const {
     cart,
@@ -13,23 +12,35 @@ export const StripeMethodForm = (props: StripeMethodFormParams) => {
     onCancel,
     setErrors,
     paymethod,
-    devMode
+    devMode,
+    setMethodPaySupported,
+    placeByMethodPay,
+    methodPaySupported,
+    setPlaceByMethodPay,
+    cartTotal
   } = props
   const { initGooglePay, createGooglePayPaymentMethod, loading } = useGooglePay();
   const { presentApplePay, isApplePaySupported } = useApplePay();
-  const [initialized, setInitialized] = useState(false);
-  const [loadingGooglePayment, setLoadingGooglePayment] = useState(false)
   const [, t] = useLanguage()
-  const [configs] = useConfig()
-
+  const [{ configs }] = useConfig()
+  const applePay = ['global_apple_pay', 'apple_pay']
+  const googlePay = ['global_google_pay', 'google_pay']
   useEffect(() => {
-    if (paymethod !== 'google_pay' || !initGooglePay) return
     if (Platform.OS === 'ios') {
       setErrors(t('GOOGLE_PAY_NOT_SUPPORTED', 'Google pay not supported'))
+      setMethodPaySupported({
+        enabled: false,
+        loading: false
+      })
+      setPlaceByMethodPay(false)
       return
     }
     const initialize = async () => {
       try {
+        setMethodPaySupported({
+          ...methodPaySupported,
+          loading: true
+        })
         const { error } = await initGooglePay({
           testEnv: devMode,
           merchantName: android_app_id,
@@ -45,36 +56,68 @@ export const StripeMethodForm = (props: StripeMethodFormParams) => {
 
         if (error) {
           setErrors(error.code + ' - ' + error.message);
+          setMethodPaySupported({
+            enabled: false,
+            loading: false
+          })
+          setPlaceByMethodPay(false)
           return;
         }
-        setInitialized(true);
+        setMethodPaySupported({
+          enabled: true,
+          loading: false
+        })
+        setPlaceByMethodPay(false)
+        setErrors('')
       } catch (err: any) {
         setErrors('Catch ' + err?.message)
+        setMethodPaySupported({
+          enabled: false,
+          loading: false
+        })
+        setPlaceByMethodPay(false)
       }
     }
-    initialize();
-  }, [initGooglePay]);
+    if (googlePay.includes(paymethod)) {
+      initialize();
+    }
+  }, [initGooglePay, paymethod]);
 
   useEffect(() => {
-    if (paymethod !== 'apple_pay') return
+    if (applePay.includes(paymethod) && !paymethod) return
     if (Platform.OS === 'android') {
+      setPlaceByMethodPay(false)
       setErrors(t('APPLE_PAY_NOT_SUPPORTED', 'Apple pay not supported'))
+      setMethodPaySupported({
+        enabled: false,
+        loading: false
+      })
       return
     }
-  }, [])
+  }, [paymethod])
 
   const createPaymentMethod = async () => {
-    setLoadingGooglePayment(true)
+    setMethodPaySupported({
+      ...methodPaySupported,
+      loading: true
+    })
     const { error, paymentMethod } = await createGooglePayPaymentMethod({
-      amount: cart?.balance ?? cart?.total,
+      amount: cartTotal ?? cart?.balance ?? cart?.total,
       currencyCode: configs?.stripe_currency?.value ?? 'USD',
     });
     if (error) {
       setErrors(error.code + ' - ' + error.message);
-      setLoadingGooglePayment(false)
+      setMethodPaySupported({
+        enabled: true,
+        loading: false
+      })
       return;
     } else if (paymentMethod) {
-      handleSource({
+      setMethodPaySupported({
+        enabled: true,
+        loading: false
+      })
+      const source = {
         ...paymentMethod?.Card,
         id: paymentMethod.id,
         type: paymentMethod.type,
@@ -83,39 +126,48 @@ export const StripeMethodForm = (props: StripeMethodFormParams) => {
           brand: paymentMethod.Card.brand,
           last4: paymentMethod.Card.last4
         }
-      })
+      }
+      handleSource(cartTotal ? JSON.stringify(source) : source)
       onCancel()
-      setLoadingGooglePayment(false)
     }
+    setPlaceByMethodPay(false)
   };
 
   const pay = async () => {
+    setMethodPaySupported({
+      ...methodPaySupported,
+      loading: true
+    })
     if (!isApplePaySupported) {
       setErrors(t('APPLE_PAY_NOT_SUPPORTED', 'Apple pay not supported'))
+      setMethodPaySupported({
+        enabled: false,
+        loading: false
+      })
+      setPlaceByMethodPay(false)
       return
     }
 
     const { error, paymentMethod } = await presentApplePay({
-      cartItems: cart?.products?.map((product: any) => ({ label: product?.name, amount: product?.price?.toString?.() })),
+      cartItems: [{
+        label: t('CART', 'Cart'),
+        amount: cartTotal?.toString?.() ?? cart?.balance?.toString() ?? cart?.total?.toString?.()
+      }],
       country: 'US',
       currency: configs?.stripe_currency?.value ?? 'USD',
-      shippingMethods: [
-        {
-          amount: cart?.balance?.toString() ?? cart?.total?.toString?.(),
-          identifier: 'standard',
-          label: 'Courier',
-          detail: 'Delivery',
-          type: 'final',
-        },
-      ],
-
-      requiredShippingAddressFields: ['emailAddress', 'phoneNumber'],
-      requiredBillingContactFields: ['phoneNumber', 'name'],
     });
     if (error) {
       setErrors(error.code + ' - ' + error.message);
+      setMethodPaySupported({
+        enabled: true,
+        loading: false
+      })
     } else if (paymentMethod) {
-      handleSource({
+      setMethodPaySupported({
+        enabled: true,
+        loading: false
+      })
+      const source = {
         ...paymentMethod?.Card,
         id: paymentMethod.id,
         type: paymentMethod.type,
@@ -124,50 +176,29 @@ export const StripeMethodForm = (props: StripeMethodFormParams) => {
           brand: paymentMethod.Card.brand,
           last4: paymentMethod.Card.last4
         }
-      })
+      }
+      handleSource(cartTotal ? JSON.stringify(source) : source)
     }
+    setPlaceByMethodPay(false)
   }
 
+  useEffect(() => {
+    if (isApplePaySupported && applePay.includes(paymethod)) {
+      setMethodPaySupported({
+        enabled: true,
+        loading: false
+      })
+      setErrors('')
+    }
+  }, [isApplePaySupported, paymethod])
+
+  useEffect(() => {
+    if (placeByMethodPay) {
+      applePay.includes(paymethod) ? pay() : createPaymentMethod()
+    }
+  }, [placeByMethodPay])
+
   return (
-    <>
-      {paymethod === 'google_pay' ? (
-        <View>
-          <OButton
-            textStyle={{
-              color: '#fff'
-            }}
-            imgRightSrc={null}
-            onClick={createPaymentMethod}
-            isDisabled={loading || !initialized}
-            text={t('PAY_WITH_GOOGLE_PAY', 'Pay with Google Pay')}
-            isLoading={loading || !initialized}
-            style={{ marginTop: 20 }}
-          />
-        </View>
-      ) : (
-        <View>
-          {isApplePaySupported ? (
-            <>
-              <OText>{t('APPLE_PAY_PAYMENT', 'Apple pay payment')}</OText>
-              <ApplePayButton
-                onPress={pay}
-                type="plain"
-                buttonStyle="black"
-                borderRadius={4}
-                style={{
-                  width: '100%',
-                  height: 50,
-                }}
-              />
-            </>
-          ) : (
-            <OText>{t('APPLE_PAY_NOT_SUPPORTED', 'Apple pay not supported')}</OText>
-          )}
-        </View>
-      )}
-      <Spinner
-        visible={loadingGooglePayment}
-      />
-    </>
+    <></>
   )
 }

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/OToast.tsx

@@ -1,11 +1,11 @@
 import * as React from "react";
-import { Animated, StyleSheet, Text, View } from "react-native";
+import { Animated, StyleSheet, Text, View, Platform } from "react-native";
 import { ToastType, useToast, useLanguage } from "ordering-components/native";
 import { useTheme } from 'styled-components/native';
 import { getTraduction } from '../../utils'
 
 const fadeDuration = 300;
-const bottomPosition = 20;
+const topPosition = Platform.OS === 'ios' ? 40 : 20
 
 export const Toast = (props: any) => {
   const [toastConfig, { hideToast }] = useToast();
@@ -54,7 +54,7 @@ export const Toast = (props: any) => {
       backgroundColor = theme.colors.toastInfo || '#6BA4FF';
       break;
     case ToastType.Error:
-      backgroundColor = theme.colors.toastError || '#D83520' ;
+      backgroundColor = theme.colors.toastError || '#D83520';
       break;
     case ToastType.Success:
       backgroundColor = theme.colors.toastSuccess || '#90C68E';
@@ -65,7 +65,7 @@ export const Toast = (props: any) => {
     <Animated.View
       style={[
         styles.container,
-        { bottom: bottomPosition, opacity },
+        { top: topPosition, opacity },
       ]}
     >
       <View style={[styles.toast, { backgroundColor }]}>

package/src/types/index.tsx

@@ -490,4 +490,9 @@ export interface StripeMethodFormParams {
   setErrors: (error: string) => void;
   paymethod: string;
   devMode?: boolean;
+  setMethodPaySupported?: any
+  placeByMethodPay?: any
+  methodPaySupported?: any,
+  setPlaceByMethodPay?: any,
+  cartTotal?: number
 }

package/src/utils/index.tsx

@@ -34,7 +34,8 @@ 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'
+    ERROR_INVALID_OFFER: 'The offer doesn\'t exist',
+    ERROR_ADD_PRODUCT_BEFORE_ADDRESS: 'You must have an address'
   }
 
   return keyList[key] ? t(key, keyList[key]) : t(key)
@@ -153,6 +154,11 @@ export const transformCountryCode = (countryCode : number) => {
   return code?.countryCode
 }
 
+export const verifyCountryCode = (countryCode : string) => {
+  const code = CODES.find((code : any) => code.countryCode === (countryCode || '').toUpperCase())
+  return code?.countryCode
+}
+
 /**
  * Function to check if a number is decimal or not
  * @param {*} value number to check if decimal or not

package/themes/business/index.tsx

@@ -41,6 +41,7 @@ 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';
+import { OrderDetailsLogistic } from './src/components/OrderDetailsLogistic'
 //OComponents
 import {
   OText,
@@ -110,6 +111,7 @@ export {
   VerifyPhone,
   DriverSchedule,
   ScheduleBlocked,
+  OrderDetailsLogistic,
   //OComponents
   OAlert,
   OButton,