react-native-fincra-checkout 1.0.0

package/lib/commonjs/components/FincraInlineCheckout.js

@@ -0,0 +1,385 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FincraInlineCheckout = FincraInlineCheckout;
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const react_native_safe_area_context_1 = require("react-native-safe-area-context");
+const react_native_webview_1 = require("react-native-webview");
+const htmlGenerator_1 = require("../inline/htmlGenerator");
+const JsBridge_1 = require("../inline/JsBridge");
+// ─── FincraInlineCheckout ─────────────────────────────────────────────────────
+//
+// Declarative component for the Inline JavaScript checkout flow.
+// Mirrors InlineCheckout widget in inline_checkout.dart
+//
+// Loads a self-contained HTML page that bootstraps the Fincra JS SDK,
+// communicates results back via window.ReactNativeWebView.postMessage(),
+// and implements a 15-second timeout fallback.
+/** 15 seconds in milliseconds — mirrors Flutter's `Timer(Duration(seconds: 15), ...)` */
+const INIT_TIMEOUT_MS = 15000;
+/**
+ * A transparent WebView that runs the Fincra inline JavaScript SDK.
+ *
+ * @example
+ * ```tsx
+ * <FincraInlineCheckout
+ *   publicKey="pk_live_xxxx"
+ *   amount={5000}
+ *   currency="NGN"
+ *   customerEmail="user@example.com"
+ *   customerName="John Doe"
+ *   customerPhoneNumber="08012345678"
+ *   feeBearer="customer"
+ *   onSuccess={(res) => console.log(res.reference)}
+ *   onCancelled={() => navigation.goBack()}
+ * />
+ * ```
+ */
+function FincraInlineCheckout({ headerTitle = 'Secure Checkout', headerBackgroundColor = '#FFFFFF', headerTintColor = '#000000', showCancelConfirmationDialog = false, loadingComponent, closeIcon, renderError, onSuccess, onFailed, onCancelled, 
+// Payment fields — everything the HTML generator needs
+...paymentConfig }) {
+    const [isLoading, setIsLoading] = (0, react_1.useState)(true);
+    const [errorState, setErrorState] = (0, react_1.useState)(null);
+    const [reloadKey, setReloadKey] = (0, react_1.useState)(0);
+    const webViewRef = (0, react_1.useRef)(null);
+    const hasCompleted = (0, react_1.useRef)(false);
+    const timeoutRef = (0, react_1.useRef)(null);
+    // Fix #3: Memoize HTML generation — prevents WebView reload on parent re-renders.
+    // The HTML is intentionally generated once per mount; payment params are immutable.
+    const configJson = JSON.stringify(paymentConfig);
+    const html = (0, react_1.useMemo)(() => (0, htmlGenerator_1.generateInlineHtml)(JSON.parse(configJson)), [configJson]);
+    // ── 15-second init timeout ──────────────────────────────────────────────────
+    (0, react_1.useEffect)(() => {
+        timeoutRef.current = setTimeout(() => {
+            if (!hasCompleted.current) {
+                const err = {
+                    code: 'timeout',
+                    message: 'Fincra Checkout failed to load. Please check your internet connection.',
+                };
+                setErrorState(err);
+                setIsLoading(false);
+            }
+        }, INIT_TIMEOUT_MS);
+        return () => {
+            if (timeoutRef.current)
+                clearTimeout(timeoutRef.current);
+        };
+    }, []);
+    // Fix #10: Stable ref for handleCancellation so the BackHandler effect
+    // doesn't need it as a dependency and never captures a stale closure.
+    const handleCancellationRef = (0, react_1.useRef)(() => { });
+    // ── Android back button ─────────────────────────────────────────────────────
+    (0, react_1.useEffect)(() => {
+        if (react_native_1.Platform.OS !== 'android')
+            return;
+        const subscription = react_native_1.BackHandler.addEventListener('hardwareBackPress', () => {
+            handleCancellationRef.current();
+            return true;
+        });
+        return () => subscription.remove();
+    }, []); // safe: always calls through the ref
+    // ── WebView error ───────────────────────────────────────────────────────────
+    const handleError = (0, react_1.useCallback)((syntheticEvent) => {
+        if (hasCompleted.current)
+            return;
+        const { nativeEvent } = syntheticEvent;
+        const err = {
+            code: String(nativeEvent.code ?? 'webview_error'),
+            message: nativeEvent.description ?? 'A WebView error occurred.',
+        };
+        setErrorState(err);
+        setIsLoading(false);
+    }, [setErrorState, setIsLoading]);
+    // ── HTTP error ──────────────────────────────────────────────────────────────
+    const handleHttpError = (0, react_1.useCallback)((syntheticEvent) => {
+        if (hasCompleted.current)
+            return;
+        const { nativeEvent } = syntheticEvent;
+        const err = {
+            code: String(nativeEvent.statusCode ?? 'http_error'),
+            message: nativeEvent.description ?? 'A WebView HTTP error occurred.',
+        };
+        setErrorState(err);
+        setIsLoading(false);
+    }, [setErrorState, setIsLoading]);
+    // ── Retry handler ───────────────────────────────────────────────────────────
+    const handleRetry = (0, react_1.useCallback)(() => {
+        setErrorState(null);
+        setIsLoading(true);
+        setReloadKey((key) => key + 1);
+    }, [setErrorState, setIsLoading, setReloadKey]);
+    // ── JS Bridge message handler ───────────────────────────────────────────────
+    const handleMessage = (0, react_1.useCallback)((event) => {
+        if (hasCompleted.current)
+            return;
+        const msg = (0, JsBridge_1.parseMessage)(event.nativeEvent.data);
+        switch (msg.event) {
+            case JsBridge_1.FincraBridgeEvent.Ready:
+                // SDK loaded — clear timeout and hide the loading spinner
+                if (timeoutRef.current)
+                    clearTimeout(timeoutRef.current);
+                setIsLoading(false);
+                break;
+            case JsBridge_1.FincraBridgeEvent.Success:
+                hasCompleted.current = true;
+                if (timeoutRef.current)
+                    clearTimeout(timeoutRef.current);
+                if (msg.data && 'reference' in msg.data) {
+                    onSuccess?.(msg.data);
+                }
+                else {
+                    onCancelled?.();
+                }
+                break;
+            case JsBridge_1.FincraBridgeEvent.Closed:
+                hasCompleted.current = true;
+                if (timeoutRef.current)
+                    clearTimeout(timeoutRef.current);
+                onCancelled?.();
+                break;
+            case JsBridge_1.FincraBridgeEvent.Error: {
+                hasCompleted.current = true;
+                if (timeoutRef.current)
+                    clearTimeout(timeoutRef.current);
+                const errorMessage = msg.data && 'message' in msg.data
+                    ? msg.data.message
+                    : 'An unknown error occurred';
+                const err = {
+                    code: 'fincra_sdk_error',
+                    message: errorMessage,
+                };
+                onFailed?.(err);
+                break;
+            }
+            case JsBridge_1.FincraBridgeEvent.Unknown:
+            default:
+                // Ignore — mirrors Flutter's `case FincraBridgeEvent.unknown: break;`
+                break;
+        }
+    }, [onSuccess, onFailed, onCancelled, setIsLoading]);
+    // ── Cancellation ────────────────────────────────────────────────────────────
+    // Fix #4: Use static Alert import — no dynamic require() needed.
+    const handleCancellation = (0, react_1.useCallback)(() => {
+        if (hasCompleted.current)
+            return;
+        if (showCancelConfirmationDialog) {
+            react_native_1.Alert.alert('Cancel Payment?', 'Are you sure you want to cancel this payment?', [
+                { text: 'No', style: 'cancel' },
+                {
+                    text: 'Yes',
+                    style: 'destructive',
+                    onPress: () => {
+                        if (!hasCompleted.current) {
+                            hasCompleted.current = true;
+                            if (timeoutRef.current)
+                                clearTimeout(timeoutRef.current);
+                            onCancelled?.();
+                        }
+                    },
+                },
+            ]);
+        }
+        else {
+            hasCompleted.current = true;
+            if (timeoutRef.current)
+                clearTimeout(timeoutRef.current);
+            onCancelled?.();
+        }
+    }, [showCancelConfirmationDialog, onCancelled]);
+    // Keep the ref in sync with the latest handleCancellation (Fix #10)
+    (0, react_1.useEffect)(() => {
+        handleCancellationRef.current = handleCancellation;
+    });
+    // ── Computed status bar style (Fix #11) ─────────────────────────────────────
+    const statusBarStyle = headerTintColor === '#000000' ? 'dark-content' : 'light-content';
+    // ── Render ──────────────────────────────────────────────────────────────────
+    return (react_1.default.createElement(react_native_safe_area_context_1.SafeAreaView, { style: styles.container },
+        react_1.default.createElement(react_native_1.StatusBar, { barStyle: statusBarStyle, backgroundColor: headerBackgroundColor }),
+        react_1.default.createElement(react_native_1.View, { style: [styles.header, { backgroundColor: headerBackgroundColor }] },
+            react_1.default.createElement(react_native_1.TouchableOpacity, { style: styles.closeButton, onPress: handleCancellation, accessibilityLabel: "Close checkout", accessibilityRole: "button", hitSlop: { top: 10, bottom: 10, left: 10, right: 10 } }, closeIcon ?? (react_1.default.createElement(react_native_1.Text, { style: [styles.closeIcon, { color: headerTintColor }] }, "\u2715"))),
+            react_1.default.createElement(react_native_1.Text, { style: [styles.headerTitle, { color: headerTintColor }], numberOfLines: 1 }, headerTitle),
+            react_1.default.createElement(react_native_1.View, { style: styles.closeButton })),
+        react_1.default.createElement(react_native_1.View, { style: styles.webViewContainer },
+            react_1.default.createElement(react_native_webview_1.WebView, { key: reloadKey, ref: webViewRef, 
+                // Fix #14: restrict to HTTPS + about:blank only (removed wildcard)
+                originWhitelist: ['https://*', 'about:blank'], source: { html }, style: styles.webView, javaScriptEnabled: true, domStorageEnabled: true, onMessage: handleMessage, onError: handleError, onHttpError: handleHttpError, 
+                // Inject the ReactNativeWebView bridge shim so older WKWebView versions work
+                injectedJavaScriptBeforeContentLoaded: WEBVIEW_BRIDGE_SHIM, 
+                // Allow the external CDN script to load
+                mixedContentMode: "always" }),
+            isLoading && !errorState && (react_1.default.createElement(react_native_1.View, { style: styles.loadingOverlay },
+                react_1.default.createElement(react_native_1.View, { style: styles.loadingCard }, loadingComponent ?? (react_1.default.createElement(react_native_1.ActivityIndicator, { size: "large", color: "#0066FF" }))))),
+            errorState && (react_1.default.createElement(react_native_1.View, { style: styles.errorOverlay }, renderError ? (renderError(errorState, handleRetry)) : (react_1.default.createElement(react_native_1.View, { style: styles.errorContainer },
+                react_1.default.createElement(react_native_1.Text, { style: styles.errorIcon }, "\u26A0\uFE0F"),
+                react_1.default.createElement(react_native_1.Text, { style: styles.errorTitle }, "Connection Error"),
+                react_1.default.createElement(react_native_1.Text, { style: styles.errorMessage }, errorState.message),
+                react_1.default.createElement(react_native_1.TouchableOpacity, { style: styles.retryButton, onPress: handleRetry, accessibilityRole: "button", accessibilityLabel: "Retry loading checkout" },
+                    react_1.default.createElement(react_native_1.Text, { style: styles.retryButtonText }, "Retry")),
+                react_1.default.createElement(react_native_1.TouchableOpacity, { style: styles.cancelButton, onPress: handleCancellation, accessibilityRole: "button", accessibilityLabel: "Cancel checkout" },
+                    react_1.default.createElement(react_native_1.Text, { style: styles.cancelButtonText }, "Cancel")))))))));
+}
+// ─── WebView Bridge Shim ───────────────────────────────────────────────────────
+// Ensures `window.ReactNativeWebView` is available before page scripts run.
+const WEBVIEW_BRIDGE_SHIM = `
+  (function() {
+    if (!window.ReactNativeWebView) {
+      window.ReactNativeWebView = {
+        postMessage: function(msg) {
+          window.webkit && window.webkit.messageHandlers &&
+          window.webkit.messageHandlers.ReactNativeWebView &&
+          window.webkit.messageHandlers.ReactNativeWebView.postMessage(msg);
+        }
+      };
+    }
+  })();
+  true;
+`;
+// ─── Styles ────────────────────────────────────────────────────────────────────
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: '#FFFFFF',
+    },
+    header: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        height: 56,
+        paddingHorizontal: 12,
+        borderBottomWidth: react_native_1.StyleSheet.hairlineWidth,
+        borderBottomColor: '#E5E7EB',
+        elevation: 2,
+        shadowColor: '#000',
+        shadowOffset: { width: 0, height: 1 },
+        shadowOpacity: 0.08,
+        shadowRadius: 2,
+    },
+    closeButton: {
+        width: 40,
+        height: 40,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    closeIcon: {
+        fontSize: 18,
+        fontWeight: '600',
+    },
+    headerTitle: {
+        flex: 1,
+        textAlign: 'center',
+        fontSize: 16,
+        fontWeight: '600',
+        letterSpacing: 0.2,
+    },
+    webViewContainer: {
+        flex: 1,
+    },
+    webView: {
+        flex: 1,
+        backgroundColor: 'transparent',
+    },
+    loadingOverlay: {
+        ...react_native_1.StyleSheet.absoluteFillObject,
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: 'rgba(255,255,255,0.85)',
+    },
+    loadingCard: {
+        padding: 24,
+        backgroundColor: '#FFFFFF',
+        borderRadius: 12,
+        elevation: 4,
+        shadowColor: '#000',
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.12,
+        shadowRadius: 8,
+    },
+    errorOverlay: {
+        ...react_native_1.StyleSheet.absoluteFillObject,
+        backgroundColor: '#FFFFFF',
+        alignItems: 'center',
+        justifyContent: 'center',
+        padding: 24,
+    },
+    errorContainer: {
+        alignItems: 'center',
+        maxWidth: 320,
+        width: '100%',
+    },
+    errorIcon: {
+        fontSize: 48,
+        marginBottom: 16,
+    },
+    errorTitle: {
+        fontSize: 20,
+        fontWeight: '700',
+        color: '#1F2937',
+        marginBottom: 8,
+        textAlign: 'center',
+    },
+    errorMessage: {
+        fontSize: 14,
+        color: '#6B7280',
+        textAlign: 'center',
+        marginBottom: 24,
+        lineHeight: 20,
+    },
+    retryButton: {
+        backgroundColor: '#0066FF',
+        paddingVertical: 12,
+        paddingHorizontal: 32,
+        borderRadius: 8,
+        width: '100%',
+        alignItems: 'center',
+        marginBottom: 12,
+    },
+    retryButtonText: {
+        color: '#FFFFFF',
+        fontSize: 16,
+        fontWeight: '600',
+    },
+    cancelButton: {
+        paddingVertical: 12,
+        paddingHorizontal: 32,
+        width: '100%',
+        alignItems: 'center',
+    },
+    cancelButtonText: {
+        color: '#6B7280',
+        fontSize: 15,
+        fontWeight: '500',
+    },
+});