Improved type definitions; Improved retry logic; Improved component behavior so that external script download is only initiated when the function is called/button is pushed

ChijiokeFLW · ChijiokeFLW · commit 6e6047db65cf · 2024-02-28T19:34:08.000+01:00
diff --git a/dist/index.es.js b/dist/index.es.js
diff --git a/dist/index.js b/dist/index.js
diff --git a/dist/script.d.ts b/dist/script.d.ts
@@ -1,2 +1,2 @@
 import { ScriptDownloadRetryStrategy } from './types';
-export default function useFWScript({ maxAttempt, retryDuration }: ScriptDownloadRetryStrategy): readonly [boolean, boolean];
+export default function useFWScript({ maxAttempt, interval }: ScriptDownloadRetryStrategy): Promise<void>;
diff --git a/dist/types.d.ts b/dist/types.d.ts
@@ -96,7 +96,7 @@ export interface FlutterwaveConfig {
     payment_plan?: FlutterWaveProps['payment_plan'];
     payment_options: FlutterWaveProps['payment_options'];
     subaccounts?: FlutterWaveProps['subaccounts'];
-    scriptDownloadRetryStrategy?: ScriptDownloadRetryStrategy;
+    retry?: ScriptDownloadRetryStrategy;
 }
 export interface InitializeFlutterwavePayment {
     onClose: FlutterWaveProps['onclose'];
@@ -113,5 +113,5 @@ export interface FlutterWaveResponse {
 }
 export interface ScriptDownloadRetryStrategy {
     maxAttempt?: number;
-    retryDuration?: number;
+    interval?: number;
 }
diff --git a/src/FWButton.tsx b/src/FWButton.tsx
@@ -20,13 +20,15 @@ const FlutterWaveButton = ({
   disabled,
   ...config
 }: FlutterWaveButtonProps): JSX.Element => {
-  const handleFlutterwavePayment = useFlutterwave(config);
+  const handleButtonClick = React.useCallback((): void => {
+    useFlutterwave(config)({ callback, onClose });
+  }, []);
 
   return (
     <button
       disabled={disabled}
       className={className}
-      onClick={() => handleFlutterwavePayment({ callback, onClose })}
+      onClick={handleButtonClick}
     >
       {text || children}
     </button>
diff --git a/src/script.ts b/src/script.ts
@@ -1,91 +1,48 @@
-import * as React from 'react';
 import { ScriptDownloadRetryStrategy } from './types';
 
-const loadedScripts: {
-  src?: string;
-} = {};
-
-interface ScriptStatusInterface {
-  loaded: boolean;
-  error: boolean;
-}
-
 const srcUrl = 'https://checkout.flutterwave.com/v3.js';
-const DEFAULT_VALUE = 3;
+const MAX_ATTEMPT_DEFAULT_VALUE = 3;
+const INTERVAL_DEFAULT_VALUE = 1;
 let attempt = 1;// Track the attempt count
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 function isNumber(value: any): value is number {
   return typeof value === 'number';
 }
 
-export default function useFWScript({ maxAttempt = DEFAULT_VALUE, retryDuration = DEFAULT_VALUE }: ScriptDownloadRetryStrategy): readonly [boolean, boolean] {
-  const [state, setState] = React.useState<ScriptStatusInterface>({
-    loaded: false,
-    error: false,
-  });
-
+export default async function useFWScript({ maxAttempt = MAX_ATTEMPT_DEFAULT_VALUE, interval = INTERVAL_DEFAULT_VALUE }: ScriptDownloadRetryStrategy): Promise<void> {
   // Validate and sanitize variables
-  maxAttempt = isNumber(maxAttempt) ? Math.max(1, maxAttempt) : DEFAULT_VALUE; // Ensure minimum of 1 for maxAttempt, revert to the default value otherwise
-  retryDuration = isNumber(retryDuration) ? Math.max(1, retryDuration) : DEFAULT_VALUE; // Ensure minimum of 1 for retryDuration, revert to the default value otherwise
-
-  React.useEffect((): (() => void) | void => {
-    if (loadedScripts.hasOwnProperty('src')) {
-      setState({
-        loaded: true,
-        error: false,
-      });
-    } else {
-      downloadScript();
-
-      return () => {
-        const scripts = document.querySelectorAll('script');
-
-        scripts.forEach(script => {
-          if (script.src === srcUrl) {
-            script.removeEventListener('load', onScriptLoad);
-            script.removeEventListener('error', onScriptError);
-          }
-        });
-      };
-    }
-  }, []);
-
-  const downloadScript = React.useCallback((): void => {
-    loadedScripts.src = srcUrl;
+  maxAttempt = isNumber(maxAttempt) ? Math.max(1, maxAttempt) : MAX_ATTEMPT_DEFAULT_VALUE; // Ensure minimum of 1 for maxAttempt, revert to the default value otherwise
+  interval = isNumber(interval) ? Math.max(1, interval) : INTERVAL_DEFAULT_VALUE; // Ensure minimum of 1 for retryDuration, revert to the default value otherwise
 
+  return new Promise((resolve, reject) => {
     const script = document.createElement('script');
     script.src = srcUrl;
     script.async = true;
 
-    script.addEventListener('load', onScriptLoad);
-    script.addEventListener('error', onScriptError);
-
-    document.body.appendChild(script);
-  }, []);
+    const onScriptLoad = (): void => {
+      script.removeEventListener('load', onScriptLoad);
+      script.removeEventListener('error', onScriptError);
+      resolve();
+    };
 
-  const onScriptLoad = React.useCallback((): void => {
-    setState({
-      loaded: true,
-      error: false,
-    });
-  }, []);
+    const onScriptError = (): void => {
+      document.body.removeChild(script);
 
-  const onScriptError = React.useCallback((): void => {
-    delete loadedScripts.src;
+      // eslint-disable-next-line no-console
+      console.log(`Flutterwave script download failed. Attempt: ${attempt}`);
 
-    // eslint-disable-next-line no-console
-    console.log(`Flutterwave script download failed. Attempt: ${attempt}`);
+      if (attempt < maxAttempt) {
+        ++attempt;
+        setTimeout(() => useFWScript({ maxAttempt, interval }).then(resolve).catch(reject), (interval * 1000));
+      } else {
+        reject(new Error('Failed to load payment modal. Check your internet connection and retry later.'));
+      }
+    };
 
-    if (attempt < maxAttempt) {
-      ++attempt;
-      setTimeout(() => downloadScript(), (retryDuration * 1000));
-    } else {
-      setState({
-        loaded: true,
-        error: true,
-      });
-    }
-  }, []);
+    script.addEventListener('load', onScriptLoad);
+    script.addEventListener('error', onScriptError);
 
-  return [state.loaded, state.error] as const;
+    document.body.appendChild(script);
+  });
 }
diff --git a/src/types.ts b/src/types.ts
@@ -99,7 +99,7 @@ export interface FlutterwaveConfig {
   payment_plan?: FlutterWaveProps['payment_plan'];
   payment_options: FlutterWaveProps['payment_options'];
   subaccounts?: FlutterWaveProps['subaccounts'];
-  scriptDownloadRetryStrategy?: ScriptDownloadRetryStrategy
+  retry?: ScriptDownloadRetryStrategy
 }
 
 export interface InitializeFlutterwavePayment {
@@ -119,5 +119,5 @@ export interface FlutterWaveResponse {
 
 export interface ScriptDownloadRetryStrategy {
   maxAttempt?: number;
-  retryDuration?: number;
+  interval?: number;
 }
diff --git a/src/useFW.tsx b/src/useFW.tsx
@@ -1,11 +1,13 @@
 /* eslint-disable @typescript-eslint/ban-ts-comment */
-import * as React from 'react';
 import useFWScript from './script';
 import {
   FlutterwaveConfig,
   FlutterWaveProps,
   InitializeFlutterwavePayment,
 } from './types';
+
+let isFWScriptLoading = false;
+
 /**
  *
  * @param config takes in configuration for flutterwave
@@ -14,76 +16,69 @@ import {
 export default function useFlutterwave(
   flutterWaveConfig: FlutterwaveConfig
 ): ({ callback, onClose }: InitializeFlutterwavePayment) => void {
-  const [loaded, error] = useFWScript({ ...(flutterWaveConfig?.scriptDownloadRetryStrategy) });
-
-  React.useEffect(() => {
-    if (error) throw new Error('We\'re having trouble loading the Flutterwave payment modal due to a network issue. Please check your internet connection and try again later.');
-  }, [error]);
-
   /**
    *
    * @param object - {callback, onClose}
    */
-  function handleFlutterwavePayment({
+  return async function handleFlutterwavePayment({
     callback,
     onClose,
-  }: InitializeFlutterwavePayment): void {
-    if (error) throw new Error('We\'re having trouble loading the Flutterwave payment modal due to a network issue. Please check your internet connection and try again later.');
+  }: InitializeFlutterwavePayment): Promise<void> {
+    if (isFWScriptLoading) {
+      return;
+    }
+    
+    // @ts-ignore
+    if (!window.FlutterwaveCheckout) {
+      isFWScriptLoading = true;
 
-    if (loaded) {
-      const flutterwaveArgs: FlutterWaveProps = {
-        ...flutterWaveConfig,
-        amount: flutterWaveConfig.amount ?? 0,
-        callback: async(response) => {
-          if(response.status === 'successful'){
-            callback(response);
-             await fetch('https://cors-anywhere.herokuapp.com/https://kgelfdz7mf.execute-api.us-east-1.amazonaws.com/staging/sendevent', {
-              method: 'post',
-              headers: {
-                'Content-Type': 'application/json',
-              },
-              body: JSON.stringify({
-                publicKey: flutterWaveConfig.public_key,
-                language: 'Flutterwave-React-v3',
-                version: '1.0.7',
-                title: `${flutterWaveConfig?.payment_options.split(',').length>1?'Initiate-Charge-Multiple': `Initiate-Charge-${flutterWaveConfig?.payment_options}`}`,
-                message: '15s'
-               })
-            });
-            
+      await useFWScript({ ...flutterWaveConfig.retry });
 
-          }else{
-            callback(response);
-             await fetch('https://cors-anywhere.herokuapp.com/https://kgelfdz7mf.execute-api.us-east-1.amazonaws.com/staging/sendevent', {
-              method: 'post',
-              headers: {
-                'Content-Type': 'application/json',
-              },
-              body: JSON.stringify({
-                publicKey: flutterWaveConfig.public_key ?? '',
-                language: 'Flutterwave-React-v3',
-                version: '1.0.7',
-                title: `${flutterWaveConfig?.payment_options.split(',').length>1?'Initiate-Charge-Multiple-error': `Initiate-Charge-${flutterWaveConfig?.payment_options}-error`}`,
-                message: '15s'
-               })
-            });
-            
-          }
+      isFWScriptLoading = false;
+    }
 
-        },
-        onclose: onClose,
-        payment_options:
-          flutterWaveConfig?.payment_options ?? 'card, ussd, mobilemoney',
-      };
+    const flutterwaveArgs: FlutterWaveProps = {
+      ...flutterWaveConfig,
+      amount: flutterWaveConfig.amount ?? 0,
+      callback: async(response) => {
+        if(response.status === 'successful'){
+          callback(response);
 
-      return (
-        // @ts-ignore
-        window.FlutterwaveCheckout &&
-        // @ts-ignore
-        window.FlutterwaveCheckout(flutterwaveArgs)
-      );
-    }
-  }
+          await fetch('https://cors-anywhere.herokuapp.com/https://kgelfdz7mf.execute-api.us-east-1.amazonaws.com/staging/sendevent', {
+            method: 'post',
+            headers: {
+              'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+              publicKey: flutterWaveConfig.public_key,
+              language: 'Flutterwave-React-v3',
+              version: '1.0.7',
+              title: `${flutterWaveConfig?.payment_options.split(',').length>1?'Initiate-Charge-Multiple': `Initiate-Charge-${flutterWaveConfig?.payment_options}`}`,
+              message: '15s'
+            })
+          });
+        }else{
+          callback(response);
+          await fetch('https://cors-anywhere.herokuapp.com/https://kgelfdz7mf.execute-api.us-east-1.amazonaws.com/staging/sendevent', {
+            method: 'post',
+            headers: {
+              'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+              publicKey: flutterWaveConfig.public_key ?? '',
+              language: 'Flutterwave-React-v3',
+              version: '1.0.7',
+              title: `${flutterWaveConfig?.payment_options.split(',').length>1?'Initiate-Charge-Multiple-error': `Initiate-Charge-${flutterWaveConfig?.payment_options}-error`}`,
+              message: '15s'
+            })
+          });
+        }
+      },
+      onclose: onClose,
+      payment_options: flutterWaveConfig?.payment_options ?? 'card, ussd, mobilemoney',
+    };
 
-  return handleFlutterwavePayment;
+    // @ts-ignore
+    window.FlutterwaveCheckout(flutterwaveArgs);
+  };
 }

Original file line number	Diff line number	Diff line change
`@@ -1,2 +1,2 @@`
`1`	`1`	`import { ScriptDownloadRetryStrategy } from './types';`
`2`		`-export default function useFWScript({ maxAttempt, retryDuration }: ScriptDownloadRetryStrategy): readonly [boolean, boolean];`
	`2`	`+export default function useFWScript({ maxAttempt, interval }: ScriptDownloadRetryStrategy): Promise<void>;`
Original file line number	Diff line number	Diff line change
`@@ -96,7 +96,7 @@ export interface FlutterwaveConfig {`
`96`	`96`	`payment_plan?: FlutterWaveProps['payment_plan'];`
`97`	`97`	`payment_options: FlutterWaveProps['payment_options'];`
`98`	`98`	`subaccounts?: FlutterWaveProps['subaccounts'];`
`99`		`- scriptDownloadRetryStrategy?: ScriptDownloadRetryStrategy;`
	`99`	`+ retry?: ScriptDownloadRetryStrategy;`
`100`	`100`	`}`
`101`	`101`	`export interface InitializeFlutterwavePayment {`
`102`	`102`	`onClose: FlutterWaveProps['onclose'];`
`@@ -113,5 +113,5 @@ export interface FlutterWaveResponse {`
`113`	`113`	`}`
`114`	`114`	`export interface ScriptDownloadRetryStrategy {`
`115`	`115`	`maxAttempt?: number;`
`116`		`- retryDuration?: number;`
	`116`	`+ interval?: number;`
`117`	`117`	`}`
Original file line number	Diff line number	Diff line change
`@@ -99,7 +99,7 @@ export interface FlutterwaveConfig {`
`99`	`99`	`payment_plan?: FlutterWaveProps['payment_plan'];`
`100`	`100`	`payment_options: FlutterWaveProps['payment_options'];`
`101`	`101`	`subaccounts?: FlutterWaveProps['subaccounts'];`
`102`		`- scriptDownloadRetryStrategy?: ScriptDownloadRetryStrategy`
	`102`	`+ retry?: ScriptDownloadRetryStrategy`
`103`	`103`	`}`
`104`	`104`
`105`	`105`	`export interface InitializeFlutterwavePayment {`
`@@ -119,5 +119,5 @@ export interface FlutterWaveResponse {`
`119`	`119`
`120`	`120`	`export interface ScriptDownloadRetryStrategy {`
`121`	`121`	`maxAttempt?: number;`
`122`		`- retryDuration?: number;`
	`122`	`+ interval?: number;`
`123`	`123`	`}`