@tonder.io/rn-sdk 0.1.0-beta.DEV1355.7 → 0.1.0-beta.DEV1355.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tonder.io/rn-sdk",
-  "version": "0.1.0-beta.DEV1355.7",
+  "version": "0.1.0-beta.DEV1355.9",
   "description": "Tonder react native sdk",
   "source": "./src/index.tsx",
   "main": "./lib/commonjs/index.js",

package/src/core/3DSHandler.ts

@@ -64,12 +64,25 @@ export class ThreeDSHandler implements IThreeDSHandler {
       //   return await this.handleRedirect();
       // }
       const url = this.getRedirectUrl();
-      if(!url){
-        const url_verify = this.payload.actions.find((it) => it.name === 'verify_transaction_status')
+
+      if (!url) {
+        const url_verify = this.payload.actions.find(
+          (it) => it.name === 'verify_transaction_status'
+        );
         await this.saveVerifyTransactionUrl(get(url_verify, 'url'));
-      }else{
-        this.saveVerifyTransactionUrl()
+      } else {
+        this.saveVerifyTransactionUrl();
       }
+
+      if (
+        this.payload?.provider === 'nuvei' &&
+        ['Success', 'Authorized'].includes(this.payload?.transaction_status)
+      ) {
+        this.emit3DS('hide3DS', {});
+        await this.removeVerifyTransactionUrl();
+        await this.onFinish(this.payload);
+      }
+
       const trx_response = await this.verifyTransaction();
       if (!url) {
         this.emit3DS('hide3DS', {});
@@ -86,8 +99,10 @@ export class ThreeDSHandler implements IThreeDSHandler {
           const transaction_status = response?.transaction_status || '';
           if (
             response?.decline?.error_type === 'Hard' ||
-            response?.checkout.is_route_finished ||
-            ['Success', 'Authorized'].includes(transaction_status)
+            response?.checkout?.is_route_finished ||
+            ['Success', 'Authorized'].includes(transaction_status) ||
+            (['Pending'].includes(transaction_status) &&
+              !!response?.payment_method?.is_apm)
           ) {
             this.emit3DS('hide3DS', {});
             await this.removeVerifyTransactionUrl();
@@ -95,7 +110,7 @@ export class ThreeDSHandler implements IThreeDSHandler {
           } else {
             try {
               const retry_checkout = await this.resumeCheckout(
-                response?.checkout.id!
+                response?.checkout?.id!
               );
               this.setPayload(retry_checkout);
 
@@ -133,7 +148,8 @@ export class ThreeDSHandler implements IThreeDSHandler {
   }
   private async saveVerifyTransactionUrl(urlData?: string): Promise<void> {
     const url =
-    urlData || this.payload?.next_action?.redirect_to_url
+      urlData ||
+      this.payload?.next_action?.redirect_to_url
         ?.verify_transaction_status_url ||
       this.payload?.next_action?.iframe_resources
         ?.verify_transaction_status_url;

package/src/core/BaseCheckout/index.ts

@@ -301,7 +301,7 @@ class BaseCheckout extends BaseSDK {
               return;
             }
 
-            await executeCallback({
+            executeCallback({
               callbacks: this.getState().callbacks,
               callback: 'onFinishPayment',
               data: { response: finalResponse },

package/src/core/EnrollmentContainer/index.ts

@@ -34,7 +34,8 @@ export class EnrollmentContainer implements IEnrollment {
   ): Promise<{ error?: TonderError }> => {
     return await this.#baseSDK.create(data);
   };
-  public async saveCustomerCard(): Promise<IBaseResponse<ISaveCardResponse>> {
+
+  public saveCustomerCard = async(): Promise<IBaseResponse<ISaveCardResponse>> => {
     const currentCallbacks = this.#baseSDK.getState().callbacks;
     try {
       await this.#baseSDK.setState({

package/src/core/Tonder/index.ts

@@ -81,9 +81,9 @@ class Tonder {
       ...(selectedMethod && selectedMethod !== ''
         ? {
             ...(card && card !== ''
-              ? { card }
+              ? { card, payment_method: '' }
               : paymentMethod && paymentMethod !== ''
-                ? { payment_method: paymentMethod }
+                ? { payment_method: paymentMethod, card: '' }
                 : { card: '', payment_method: '' }),
           }
         : {}),
@@ -110,9 +110,13 @@ class Tonder {
   }
 
   public emit = (eventName: string, data: any): void => {
-    const listeners = this.eventListeners.get(eventName);
-    if (listeners) {
-      listeners.forEach((listener) => listener(data));
+    try {
+      const listeners = this.eventListeners.get(eventName);
+      if (listeners) {
+        listeners.forEach((listener) => listener(data));
+      }
+    } catch (e) {
+      console.error('[Tonder | emit | ERROR]', e);
     }
   };
 

package/src/shared/constants/environments.ts

@@ -2,7 +2,7 @@ const TONDER_URL_BY_MODE = Object.freeze({
   production: 'https://app.tonder.io',
   sandbox: 'https://sandbox.tonder.io',
   stage: 'https://stage.tonder.io',
-  development: 'http://192.168.100.117:8000',
+  development: 'http://192.168.68.102:8000',
 });
 
 export { TONDER_URL_BY_MODE };

package/src/types/srn-temp.d.ts

@@ -67,6 +67,7 @@ declare module 'skyflow-react-native' {
   export interface CollectInputStylesVariant
     extends StylesBaseVariant,
       StylesFocusVariant {
+    base?: Record<string, any>;
     complete?: Record<string, any>;
     invalid?: Record<string, any>;
     empty?: Record<string, any>;
@@ -76,6 +77,7 @@ declare module 'skyflow-react-native' {
   export interface CollectLabelStylesVariant
     extends StylesBaseVariant,
       StylesFocusVariant {
+    base?: Record<string, any>;
     requiredAsterisk?: Record<string, any>;
   }
 }

package/src/ui/components/PaymentMethodsList/index.tsx

@@ -32,9 +32,9 @@ const PaymentMethodsList: React.FC<PaymentMethodsListProps> = ({
                 selected: style?.radioSelected,
                 inner: style?.radioInner,
               }}
-              value={method.id}
-              selected={selectedMethod === method.id}
-              onSelect={() => onMethodSelect(method.id)}
+              value={method.payment_method}
+              selected={selectedMethod === method.payment_method}
+              onSelect={() => onMethodSelect(method.payment_method)}
             />
             <View style={styles.methodIconContainer}>
               <View style={styles.methodIconBorder} />

package/src/ui/components/WebView/ThreeDSWebView.tsx

@@ -1,10 +1,12 @@
 // @ts-nocheck
+import { X } from 'lucide-react-native';
 import React, { useEffect, useRef, useState } from 'react';
 import {
   ActivityIndicator,
   Modal,
   SafeAreaView,
   StyleSheet,
+  TouchableOpacity,
   View,
 } from 'react-native';
 import WebView from 'react-native-webview';
@@ -33,12 +35,25 @@ export const ThreeDSWebView: React.FC<ThreeDSWebViewProps> = ({
     </View>
   );
   return (
-    <Modal visible={!!url} animationType="slide" onRequestClose={onComplete}>
+    <Modal
+      visible={!!url}
+      animationType="slide"
+      onRequestClose={() => {
+        setIsLoading(true);
+        onComplete();
+      }}
+    >
       <SafeAreaView style={styles.safeArea}>
         <View style={styles.container}>
-          {/*<TouchableOpacity style={styles.closeButton} onPress={onComplete}>*/}
-          {/*  <X size={22} color="#000" />*/}
-          {/*</TouchableOpacity>*/}
+          <TouchableOpacity
+            style={styles.closeButton}
+            onPress={() => {
+              setIsLoading(true);
+              onComplete();
+            }}
+          >
+            <X size={22} color="#000" />
+          </TouchableOpacity>
           <WebView
             source={{ uri: url }}
             style={styles.webview}
@@ -99,7 +114,7 @@ const styles = StyleSheet.create({
     bottom: 0,
     justifyContent: 'center',
     alignItems: 'center',
-    backgroundColor: 'rgba(255, 255, 255,1)',
+    backgroundColor: 'rgba(255, 255, 255, 1)',
   },
   closeButton: {
     position: 'absolute',

package/src/ui/features/TonderPayment/index.tsx

@@ -19,14 +19,7 @@ const TonderPayment: React.FC<ITonderPaymentProps> = () => {
   const [deletingCards, setDelitingCards] = useState<string[]>([]);
 
   const handleMethodSelect = (methodId: string, type: string) => {
-    const value =
-      type === 'card'
-        ? methodId
-        : type === 'payment_method'
-          ? state.uiData?.paymentMethods.find((it) => it.id === methodId)
-              ?.payment_method || ''
-          : '';
-    uiWrapper.updateMethod(type, value);
+    uiWrapper.updateMethod(type, methodId);
   };
 
   const handleSaveCardChange = (value: boolean) => {
@@ -136,6 +129,17 @@ const TonderPayment: React.FC<ITonderPaymentProps> = () => {
               placeholders={state?.customization?.placeholders}
             />
           )}
+        {state?.customization?.paymentMethods?.show && (
+          <PaymentMethodsList
+            methods={state?.uiData.paymentMethods}
+            selectedMethod={state?.uiData?.payment_method || ''}
+            onMethodSelect={(methodId) => {
+              handleMethodSelect(methodId, 'payment_method');
+            }}
+            style={state?.customization?.styles?.paymentMethods}
+          />
+        )}
+
         {state?.customization?.showMessages &&
           state?.message &&
           state?.message !== '' &&
@@ -181,16 +185,6 @@ const TonderPayment: React.FC<ITonderPaymentProps> = () => {
               </Text>
             </View>
           )}
-        {state?.customization?.paymentMethods?.show && (
-          <PaymentMethodsList
-            methods={state?.uiData.paymentMethods}
-            selectedMethod={state?.uiData?.payment_method || ''}
-            onMethodSelect={(methodId) => {
-              handleMethodSelect(methodId, 'payment_method');
-            }}
-            style={state?.customization?.styles?.paymentMethods}
-          />
-        )}
 
         {state?.customization?.paymentButton?.show && (
           <ProcessButton
@@ -229,6 +223,7 @@ const styles = StyleSheet.create({
   },
   messageContainer: {
     paddingHorizontal: 20,
+    marginVertical: 5,
   },
   errorText: {
     color: 'red',

package/src/ui/providers/TonderProvider/index.tsx

@@ -62,7 +62,7 @@ const TonderProvider: React.FC<React.PropsWithChildren<ITonderProvider>> = <
   }, [tonder]);
 
   useEffect(() => {
-    if (!tonder) return;
+    if (!tonder || !state?.isCreated) return;
 
     const unsubscribeShow = tonder.on(
       'show3DS',
@@ -71,14 +71,15 @@ const TonderProvider: React.FC<React.PropsWithChildren<ITonderProvider>> = <
       }
     );
     const unsubscribeHide = tonder.on('hide3DS', ({}) => {
-      setThreeDSConfig({ url: '' });
+      setThreeDSConfig({ url: undefined });
     });
 
     return () => {
+      console.log('unsubs');
       unsubscribeShow();
       unsubscribeHide();
     };
-  }, [tonder]);
+  }, [tonder, state?.isCreated]);
 
   const contextValue = useMemo(
     () => ({
@@ -89,17 +90,20 @@ const TonderProvider: React.FC<React.PropsWithChildren<ITonderProvider>> = <
     [sdk, state, uiSDKWrapper]
   );
 
+  console.log('threeDSConfig.url: ', threeDSConfig.url);
   return (
     <tonderContext.Provider value={contextValue}>
       <SkyflowProvider config={skyflowConfig}>
         <SkyflowContainerWrapper contextValue={contextValue}>
-          <ThreeDSWebView
-            url={threeDSConfig.url}
-            onComplete={() => {
-              threeDSConfig.onComplete?.();
-            }}
-            returnURL={threeDSConfig.returnURL!}
-          />
+          {!!threeDSConfig.url && (
+            <ThreeDSWebView
+              url={threeDSConfig.url}
+              onComplete={() => {
+                threeDSConfig.onComplete?.();
+              }}
+              returnURL={threeDSConfig.returnURL!}
+            />
+          )}
           {children}
         </SkyflowContainerWrapper>
       </SkyflowProvider>