ordering-ui-react-native 0.18.80 → 0.18.82

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-react-native",
-  "version": "0.18.80",
+  "version": "0.18.82",
   "description": "Reusable components made in react native",
   "main": "src/index.tsx",
   "author": "ordering.inc",

package/src/components/StripeMethodForm/index.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react'
-import { useLanguage, useConfig } from 'ordering-components/native'
+import { useLanguage, useConfig, useOrder } from 'ordering-components/native'
 import { useGooglePay, useApplePay } from '@stripe/stripe-react-native'
 import { Platform } from 'react-native';
 import { StripeMethodFormParams } from '../../types';
@@ -21,6 +21,7 @@ export const StripeMethodForm = (props: StripeMethodFormParams) => {
   } = props
   const { initGooglePay, createGooglePayPaymentMethod, loading } = useGooglePay();
   const { presentApplePay, isApplePaySupported } = useApplePay();
+  const [{ loading: loadingCart }] = useOrder()
   const [, t] = useLanguage()
   const [{ configs }] = useConfig()
   const applePay = ['global_apple_pay', 'apple_pay']
@@ -35,53 +36,15 @@ export const StripeMethodForm = (props: StripeMethodFormParams) => {
       setPlaceByMethodPay(false)
       return
     }
-    const initialize = async () => {
-      try {
-        setMethodPaySupported({
-          ...methodPaySupported,
-          loading: true
-        })
-        const { error } = await initGooglePay({
-          testEnv: devMode,
-          merchantName: android_app_id,
-          countryCode: 'US',
-          billingAddressConfig: {
-            format: 'FULL',
-            isPhoneNumberRequired: true,
-            isRequired: false,
-          },
-          existingPaymentMethodRequired: false,
-          isEmailRequired: true,
-        });
-
-        if (error) {
-          setErrors(error.code + ' - ' + error.message);
-          setMethodPaySupported({
-            enabled: false,
-            loading: false
-          })
-          setPlaceByMethodPay(false)
-          return;
-        }
-        setMethodPaySupported({
-          enabled: true,
-          loading: false
-        })
-        setPlaceByMethodPay(false)
-        setErrors('')
-      } catch (err: any) {
-        setErrors('Catch ' + err?.message)
-        setMethodPaySupported({
-          enabled: false,
-          loading: false
-        })
-        setPlaceByMethodPay(false)
-      }
-    }
-    if (googlePay.includes(paymethod) && !methodPaySupported?.enabled) {
-      initialize();
+    if (!loadingCart) {
+      setMethodPaySupported({
+        enabled: true,
+        loading: false
+      })
+      setPlaceByMethodPay(false)
+      setErrors('')
     }
-  }, [initGooglePay, paymethod]);
+  }, [paymethod, loadingCart]);
 
   useEffect(() => {
     if (applePay.includes(paymethod) && !paymethod) return
@@ -95,11 +58,57 @@ export const StripeMethodForm = (props: StripeMethodFormParams) => {
     }
   }, [paymethod])
 
+  const initialize = async () => {
+    try {
+      setMethodPaySupported({
+        ...methodPaySupported,
+        loading: true
+      })
+      const { error } = await initGooglePay({
+        testEnv: devMode,
+        merchantName: android_app_id,
+        countryCode: 'US',
+        billingAddressConfig: {
+          format: 'FULL',
+          isPhoneNumberRequired: true,
+          isRequired: false,
+        },
+        existingPaymentMethodRequired: false,
+        isEmailRequired: true,
+      });
+
+      if (error) {
+        setErrors(error.code + ' - ' + error.message);
+        setMethodPaySupported({
+          enabled: false,
+          loading: false
+        })
+        setPlaceByMethodPay(false)
+        return true;
+      }
+      setMethodPaySupported({
+        enabled: true,
+        loading: false
+      })
+      setPlaceByMethodPay(false)
+      setErrors('')
+    } catch (err: any) {
+      setErrors('Catch ' + err?.message)
+      setMethodPaySupported({
+        enabled: false,
+        loading: false
+      })
+      setPlaceByMethodPay(false)
+    }
+  }
+
   const createPaymentMethod = async () => {
     setMethodPaySupported({
       ...methodPaySupported,
       loading: true
     })
+    const initializeError = await initialize()
+    if (initializeError) return
     const { error, paymentMethod } = await createGooglePayPaymentMethod({
       amount: cartTotal ?? cart?.balance ?? cart?.total,
       currencyCode: configs?.stripe_currency?.value ?? 'USD',

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

@@ -3,6 +3,8 @@ import {
   useLanguage,
   useConfig,
   useUtils,
+  useToast,
+  ToastType,
   MultiCartsPaymethodsAndWallets as MultiCartsPaymethodsAndWalletsController
 } from 'ordering-components/native'
 import { useTheme } from 'styled-components/native'
@@ -45,7 +47,8 @@ const MultiCartsPaymethodsAndWalletsUI = (props: any) => {
   const [, t] = useLanguage()
   const [{ configs }] = useConfig()
   const [{ parsePrice }] = useUtils()
-	const { confirmApplePayPayment } = useApplePay()
+	const [, { showToast }] = useToast();
+  const { confirmApplePayPayment } = useApplePay()
 
   const [addCardOpen, setAddCardOpen] = useState({ stripe: false, stripeConnect: false });
 
@@ -91,20 +94,38 @@ const MultiCartsPaymethodsAndWalletsUI = (props: any) => {
   }
 
   useEffect(() => {
-		if (methodsPay.includes(paymethodSelected?.gateway)) {
-      if (typeof paymethodSelected?.paymethod_data === 'string'){
-        const sourceId =  JSON.parse(paymethodSelected?.paymethod_data)?.source_id
+    if (methodsPay.includes(paymethodSelected?.gateway)) {
+      if (typeof paymethodSelected?.paymethod_data === 'string') {
+        const sourceId = JSON.parse(paymethodSelected?.paymethod_data)?.source_id
         sourceId && handlePlaceOrder(confirmApplePayPayment)
       }
-		}
-	}, [JSON.stringify(paymethodSelected)])
+    }
+  }, [JSON.stringify(paymethodSelected)])
+
+  useEffect(() => {
+    if (cartTotal === 0) {
+      handlePaymethodDataChange(null)
+      handleSelectPaymethod(null)
+    }
+  }, [cartTotal])
+
+  const handleChangePaymethod = (paymethod: any) => {
+    if (cartTotal > 0) {
+      handleSelectPaymethod(paymethod)
+      return
+    }
+    showToast(
+      ToastType.Error,
+      t('CART_BALANCE_ZERO', 'Sorry, the amount to pay is equal to zero and it is not necessary to select a payment method'))
+      ;
+  }
 
   const renderPaymethods = ({ item }: any) => {
     return (
       <>
         {item?.gateway === 'global_apple_pay' ? (
           <TouchableOpacity
-            onPress={() => handleSelectPaymethod({ ...item, paymethod: { gateway: item.gateway }, paymethod_id: item?.id })}
+            onPress={() => handleChangePaymethod({ ...item, paymethod: { gateway: item.gateway }, paymethod_id: item?.id })}
           >
             <OIcon
               src={getPayIcon(item.gateway)}
@@ -115,7 +136,7 @@ const MultiCartsPaymethodsAndWalletsUI = (props: any) => {
           </TouchableOpacity>
         ) : (
           <TouchableOpacity
-            onPress={() => handleSelectPaymethod({ ...item, paymethod: { gateway: item.gateway }, paymethod_id: item?.id })}
+            onPress={() => handleChangePaymethod({ ...item, paymethod: { gateway: item.gateway }, paymethod_id: item?.id })}
           >
             <PMItem
               key={item.id}
@@ -208,9 +229,9 @@ const MultiCartsPaymethodsAndWalletsUI = (props: any) => {
           handleSource={handlePaymethodDataChange}
           onCancel={() => setAddCardOpen({ ...addCardOpen, stripe: false })}
           setMethodPaySupported={setMethodPaySupported}
-					methodPaySupported={methodPaySupported}
-					placeByMethodPay={placeByMethodPay}
-					setPlaceByMethodPay={setPlaceByMethodPay}
+          methodPaySupported={methodPaySupported}
+          placeByMethodPay={placeByMethodPay}
+          setPlaceByMethodPay={setPlaceByMethodPay}
           methodsPay={methodsPay}
           paymethod={paymethodSelected?.paymethod?.gateway}
           cartTotal={cartTotal}

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

@@ -1018,7 +1018,9 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                           )} */}
                         </View>
                         <OText>
-                          -{parsePrice(event.amount, { isTruncable: true })}
+                          {configs.currency_position?.value === 'left'
+                            ? `${configs.format_number_currency?.value} -${parseNumber(event.amount, { isTruncable: true })}`
+                            : `-${parsePrice(event.amount, { isTruncable: true })}`}
                         </OText>
                       </View>
                     ))}

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

@@ -126,6 +126,12 @@ const PaymentOptionsUI = (props: any) => {
 			;
 	}
 
+	useEffect(() => {
+		if (cart?.balance === 0) {
+			handlePaymethodClick(null)
+		}
+	}, [cart?.balance])
+
 	useEffect(() => {
 		if (paymethodsList.paymethods.length === 1) {
 			handlePaymethodClick && handlePaymethodClick(paymethodsList.paymethods[0])
@@ -339,7 +345,7 @@ const PaymentOptionsUI = (props: any) => {
 					onPaymentChange={onPaymentChange}
 					payType={isOpenMethod?.paymethod?.name}
 					onSelectCard={handlePaymethodDataChange}
-					addCardOpen={addCardOpen} 
+					addCardOpen={addCardOpen}
 					setAddCardOpen={setAddCardOpen}
 					onCancel={() => handlePaymethodClick(null)}
 					paymethodSelected={paymethodSelected?.data?.id}