@glomopay/react-native-sdk 1.3.4 → 1.3.5

package/lib/glomo-lrs-checkout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"glomo-lrs-checkout.d.ts","sourceRoot":"","sources":["../src/glomo-lrs-checkout.tsx"],"names":[],"mappings":"AAAA,0CAA0C;AAE1C,OAAO,KAAmD,MAAM,OAAO,CAAC;AAIxE,OAAO,EAAkB,KAAK,qBAAqB,EAAE,KAAK,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AACxG,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAGlD,MAAM,WAAW,qBAAsB,SAAQ,qBAAqB;IAChE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,IAAI,CAAC;CACjD;AAED,MAAM,WAAW,mBAAmB;IAChC,KAAK,EAAE,MAAM,OAAO,CAAC;IACrB,SAAS,EAAE,MAAM,iBAAiB,CAAC;CACtC;AA4MD,eAAO,MAAM,gBAAgB,mGAAoF,CAAC"}
+{"version":3,"file":"glomo-lrs-checkout.d.ts","sourceRoot":"","sources":["../src/glomo-lrs-checkout.tsx"],"names":[],"mappings":"AAAA,0CAA0C;AAE1C,OAAO,KAAmD,MAAM,OAAO,CAAC;AAIxE,OAAO,EAAkB,KAAK,qBAAqB,EAAE,KAAK,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AACxG,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAGlD,MAAM,WAAW,qBAAsB,SAAQ,qBAAqB;IAChE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,IAAI,CAAC;CACjD;AAED,MAAM,WAAW,mBAAmB;IAChC,KAAK,EAAE,MAAM,OAAO,CAAC;IACrB,SAAS,EAAE,MAAM,iBAAiB,CAAC;CACtC;AAkND,eAAO,MAAM,gBAAgB,mGAAoF,CAAC"}

package/lib/glomo-lrs-checkout.js

@@ -68,7 +68,7 @@ function GlomoLrsCheckoutComponent({ server, publicKey, orderId, onPaymentSucces
         }
         return (_a = publicKey === null || publicKey === void 0 ? void 0 : publicKey.toLowerCase().startsWith("test_")) !== null && _a !== void 0 ? _a : false;
     }, [publicKey, devMode]);
-    const { start, status, showCheckout, flowWebViewUrl, showFlowWebView, checkoutUrl, mainWebViewRef, flowWebViewRef, handleMainWebViewMessage, handleFlowWebViewMessage, handleError, handleHttpError, handleNavigationStateChange, handleModalBackButton, injectedMain, injectedFlow, } = (0, use_lrs_checkout_1.useLrsCheckout)({
+    const { start, status, showCheckout, flowWebViewUrl, showFlowWebView, checkoutUrl, mainWebViewRef, flowWebViewRef, handleMainWebViewMessage, handleFlowWebViewMessage, handleError, handleHttpError, handleNavigationStateChange, handleModalBackButton, handleFlowBack, injectedMain, injectedFlow, } = (0, use_lrs_checkout_1.useLrsCheckout)({
         server,
         publicKey,
         orderId,
@@ -130,6 +130,11 @@ function GlomoLrsCheckoutComponent({ server, publicKey, orderId, onPaymentSucces
                 <react_native_1.View style={styles.mainWebViewContainer}>{MainWebViewComponent}</react_native_1.View>
 
                 {showFlowWebView && flowWebViewUrl && FlowWebViewComponent && (<react_native_1.View style={styles.flowWebViewContainer}>
+                        <react_native_1.SafeAreaView style={styles.flowHeader}>
+                            <react_native_1.TouchableOpacity onPress={handleFlowBack} style={styles.flowBackButton}>
+                                <react_native_1.Text style={styles.flowBackChevron}>‹</react_native_1.Text>
+                            </react_native_1.TouchableOpacity>
+                        </react_native_1.SafeAreaView>
                         <react_native_1.View style={styles.flowWebViewContent}>{FlowWebViewComponent}</react_native_1.View>
                     </react_native_1.View>)}
             </react_native_1.View>
@@ -155,10 +160,26 @@ const styles = react_native_1.StyleSheet.create({
         left: 0,
         right: 0,
         bottom: 0,
+        flexDirection: "column",
         backgroundColor: "#fff",
         zIndex: 99999,
         elevation: 99999,
     },
+    flowHeader: {
+        backgroundColor: "#fff",
+        borderBottomWidth: 1,
+        borderBottomColor: "#e0e0e0",
+        paddingTop: react_native_1.Platform.OS === "android" ? react_native_1.StatusBar.currentHeight : 0,
+    },
+    flowBackButton: {
+        paddingVertical: 6,
+        paddingLeft: 20,
+    },
+    flowBackChevron: {
+        fontSize: 42,
+        color: "#333",
+        lineHeight: 42,
+    },
     flowWebViewContent: {
         flex: 1,
     },

package/lib/use-lrs-checkout.d.ts

@@ -46,6 +46,7 @@ export interface UseLrsCheckoutReturn {
     }>) => void;
     handleNavigationStateChange: (navState: WebViewNavigation) => void;
     handleModalBackButton: () => void;
+    handleFlowBack: () => void;
     injectedMain?: string;
     injectedFlow?: string;
 }

package/lib/use-lrs-checkout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-lrs-checkout.d.ts","sourceRoot":"","sources":["../src/use-lrs-checkout.tsx"],"names":[],"mappings":"AAAA,uDAAuD;AAEvD,OAAO,KAA4D,MAAM,OAAO,CAAC;AACjF,OAAO,EAAY,KAAK,oBAAoB,EAAE,MAAM,cAAc,CAAC;AAEnE,OAAO,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,KAAK,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAO5F,OAAO,EAYH,KAAK,QAAQ,EAChB,MAAM,mBAAmB,CAAC;AAE3B,4BAA4B;AAC5B,MAAM,MAAM,iBAAiB,GAEvB,OAAO,GAGP,qBAAqB,GAGrB,oBAAoB,GAGpB,gBAAgB,GAGhB,mBAAmB,CAAC;AAE1B,qDAAqD;AACrD,MAAM,WAAW,uBAAuB;IACpC,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;CACrB;AAED,8CAA8C;AAC9C,MAAM,WAAW,qBAAqB;IAClC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;IAChB,gBAAgB,EAAE,CAAC,OAAO,EAAE,uBAAuB,KAAK,IAAI,CAAC;IAC7D,gBAAgB,EAAE,CAAC,OAAO,EAAE,uBAAuB,KAAK,IAAI,CAAC;IAC7D,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C,kBAAkB,CAAC,EAAE,MAAM,IAAI,CAAC;IAChC,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,IAAI,CAAC;IAC9C,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,oDAAoD;AACpD,MAAM,WAAW,oBAAoB;IACjC,KAAK,EAAE,MAAM,OAAO,CAAC;IACrB,MAAM,EAAE,iBAAiB,CAAC;IAC1B,YAAY,EAAE,OAAO,CAAC;IACtB,cAAc,EAAE,MAAM,CAAC;IACvB,eAAe,EAAE,OAAO,CAAC;IACzB,WAAW,EAAE,MAAM,CAAC;IACpB,cAAc,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;IACzC,cAAc,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;IACzC,wBAAwB,EAAE,CAAC,KAAK,EAAE,mBAAmB,KAAK,IAAI,CAAC;IAC/D,wBAAwB,EAAE,CAAC,KAAK,EAAE,mBAAmB,KAAK,IAAI,CAAC;IAC/D,WAAW,EAAE,CACT,cAAc,EAAE,oBAAoB,CAAC;QAAE,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,MAAM,CAAC;QAAC,WAAW,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,KAC7F,IAAI,CAAC;IACV,eAAe,EAAE,CAAC,cAAc,EAAE,oBAAoB,CAAC;QAAE,UAAU,EAAE,MAAM,CAAC;QAAC,WAAW,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,KAAK,IAAI,CAAC;IAC9G,2BAA2B,EAAE,CAAC,QAAQ,EAAE,iBAAiB,KAAK,IAAI,CAAC;IACnE,qBAAqB,EAAE,MAAM,IAAI,CAAC;IAClC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,2DAA2D;AAC3D,wBAAgB,cAAc,CAC1B,EACI,MAAM,EACN,SAAS,EACT,OAAO,EACP,gBAAgB,EAChB,gBAAgB,EAChB,iBAAiB,EACjB,kBAAkB,EAClB,UAAU,EACV,OAAe,GAClB,EAAE,qBAAqB,EACxB,QAAQ,EAAE,OAAO,GAClB,oBAAoB,CAmuBtB"}
+{"version":3,"file":"use-lrs-checkout.d.ts","sourceRoot":"","sources":["../src/use-lrs-checkout.tsx"],"names":[],"mappings":"AAAA,uDAAuD;AAEvD,OAAO,KAA4D,MAAM,OAAO,CAAC;AACjF,OAAO,EAAY,KAAK,oBAAoB,EAAE,MAAM,cAAc,CAAC;AAEnE,OAAO,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,KAAK,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAO5F,OAAO,EAYH,KAAK,QAAQ,EAChB,MAAM,mBAAmB,CAAC;AAE3B,4BAA4B;AAC5B,MAAM,MAAM,iBAAiB,GAEvB,OAAO,GAGP,qBAAqB,GAGrB,oBAAoB,GAGpB,gBAAgB,GAGhB,mBAAmB,CAAC;AAE1B,qDAAqD;AACrD,MAAM,WAAW,uBAAuB;IACpC,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;CACrB;AAED,8CAA8C;AAC9C,MAAM,WAAW,qBAAqB;IAClC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;IAChB,gBAAgB,EAAE,CAAC,OAAO,EAAE,uBAAuB,KAAK,IAAI,CAAC;IAC7D,gBAAgB,EAAE,CAAC,OAAO,EAAE,uBAAuB,KAAK,IAAI,CAAC;IAC7D,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C,kBAAkB,CAAC,EAAE,MAAM,IAAI,CAAC;IAChC,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,IAAI,CAAC;IAC9C,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,oDAAoD;AACpD,MAAM,WAAW,oBAAoB;IACjC,KAAK,EAAE,MAAM,OAAO,CAAC;IACrB,MAAM,EAAE,iBAAiB,CAAC;IAC1B,YAAY,EAAE,OAAO,CAAC;IACtB,cAAc,EAAE,MAAM,CAAC;IACvB,eAAe,EAAE,OAAO,CAAC;IACzB,WAAW,EAAE,MAAM,CAAC;IACpB,cAAc,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;IACzC,cAAc,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;IACzC,wBAAwB,EAAE,CAAC,KAAK,EAAE,mBAAmB,KAAK,IAAI,CAAC;IAC/D,wBAAwB,EAAE,CAAC,KAAK,EAAE,mBAAmB,KAAK,IAAI,CAAC;IAC/D,WAAW,EAAE,CACT,cAAc,EAAE,oBAAoB,CAAC;QAAE,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,MAAM,CAAC;QAAC,WAAW,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,KAC7F,IAAI,CAAC;IACV,eAAe,EAAE,CAAC,cAAc,EAAE,oBAAoB,CAAC;QAAE,UAAU,EAAE,MAAM,CAAC;QAAC,WAAW,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,KAAK,IAAI,CAAC;IAC9G,2BAA2B,EAAE,CAAC,QAAQ,EAAE,iBAAiB,KAAK,IAAI,CAAC;IACnE,qBAAqB,EAAE,MAAM,IAAI,CAAC;IAClC,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,2DAA2D;AAC3D,wBAAgB,cAAc,CAC1B,EACI,MAAM,EACN,SAAS,EACT,OAAO,EACP,gBAAgB,EAChB,gBAAgB,EAChB,iBAAiB,EACjB,kBAAkB,EAClB,UAAU,EACV,OAAe,GAClB,EAAE,qBAAqB,EACxB,QAAQ,EAAE,OAAO,GAClB,oBAAoB,CA8uBtB"}

package/lib/use-lrs-checkout.js

@@ -396,6 +396,15 @@ function useLrsCheckout({ server, publicKey, orderId, onPaymentSuccess, onPaymen
             }
         }
     }, [showFlowWebView, devMode, onPaymentTerminate, status, orderId, mockMode, checkoutUrl]);
+    /** Closes the flow WebView and returns to the main checkout */
+    const handleFlowBack = (0, react_1.useCallback)(() => {
+        if (devMode) {
+            console.log("[GlomoPay RN SDK] Flow WebView back button pressed");
+        }
+        setShowFlowWebView(false);
+        setFlowWebViewUrl("");
+        (0, analytics_1.trackWindowClose)("flow", orderId, publicKey, devMode, mockMode, checkoutUrl);
+    }, [devMode, orderId, publicKey, mockMode, checkoutUrl]);
     /**
      * Initiator method for the LRS Checkout flow.
      * Using a ref, the LRS flow can be started by calling this method.
@@ -570,6 +579,7 @@ function useLrsCheckout({ server, publicKey, orderId, onPaymentSuccess, onPaymen
         handleHttpError,
         handleNavigationStateChange,
         handleModalBackButton,
+        handleFlowBack,
         injectedMain: injections_1.InjectionScripts.main,
         injectedFlow: injections_1.InjectionScripts.flow,
     };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@glomopay/react-native-sdk",
-    "version": "1.3.4",
+    "version": "1.3.5",
     "description": "The React Native SDK for GlomoPay",
     "license": "Apache-2.0",
     "main": "lib/index.js",

package/src/glomo-lrs-checkout.tsx

@@ -1,7 +1,7 @@
 /** The GlomoPay LRS Checkout Component */
 
 import React, { useMemo, useImperativeHandle, forwardRef } from "react";
-import { StyleSheet, View, Modal, Platform } from "react-native";
+import { StyleSheet, View, Modal, Platform, SafeAreaView, StatusBar, TouchableOpacity, Text } from "react-native";
 import { WebView, type WebViewMessageEvent } from "react-native-webview";
 
 import { useLrsCheckout, type UseLrsCheckoutOptions, type LrsCheckoutStatus } from "./use-lrs-checkout";
@@ -75,6 +75,7 @@ function GlomoLrsCheckoutComponent(
         handleHttpError,
         handleNavigationStateChange,
         handleModalBackButton,
+        handleFlowBack,
         injectedMain,
         injectedFlow,
     } = useLrsCheckout(
@@ -212,6 +213,11 @@ function GlomoLrsCheckoutComponent(
 
                 {showFlowWebView && flowWebViewUrl && FlowWebViewComponent && (
                     <View style={styles.flowWebViewContainer}>
+                        <SafeAreaView style={styles.flowHeader}>
+                            <TouchableOpacity onPress={handleFlowBack} style={styles.flowBackButton}>
+                                <Text style={styles.flowBackChevron}>‹</Text>
+                            </TouchableOpacity>
+                        </SafeAreaView>
                         <View style={styles.flowWebViewContent}>{FlowWebViewComponent}</View>
                     </View>
                 )}
@@ -242,10 +248,26 @@ const styles = StyleSheet.create({
         left: 0,
         right: 0,
         bottom: 0,
+        flexDirection: "column",
         backgroundColor: "#fff",
         zIndex: 99999,
         elevation: 99999,
     },
+    flowHeader: {
+        backgroundColor: "#fff",
+        borderBottomWidth: 1,
+        borderBottomColor: "#e0e0e0",
+        paddingTop: Platform.OS === "android" ? StatusBar.currentHeight : 0,
+    },
+    flowBackButton: {
+        paddingVertical: 6,
+        paddingLeft: 20,
+    },
+    flowBackChevron: {
+        fontSize: 42,
+        color: "#333",
+        lineHeight: 42,
+    },
     flowWebViewContent: {
         flex: 1,
     },

package/src/use-lrs-checkout.tsx

@@ -80,6 +80,7 @@ export interface UseLrsCheckoutReturn {
     handleHttpError: (syntheticEvent: NativeSyntheticEvent<{ statusCode: number; description?: string }>) => void;
     handleNavigationStateChange: (navState: WebViewNavigation) => void;
     handleModalBackButton: () => void;
+    handleFlowBack: () => void;
     injectedMain?: string;
     injectedFlow?: string;
 }
@@ -594,6 +595,16 @@ export function useLrsCheckout(
         }
     }, [showFlowWebView, devMode, onPaymentTerminate, status, orderId, mockMode, checkoutUrl]);
 
+    /** Closes the flow WebView and returns to the main checkout */
+    const handleFlowBack = useCallback(() => {
+        if (devMode) {
+            console.log("[GlomoPay RN SDK] Flow WebView back button pressed");
+        }
+        setShowFlowWebView(false);
+        setFlowWebViewUrl("");
+        trackWindowClose("flow", orderId, publicKey, devMode, mockMode, checkoutUrl);
+    }, [devMode, orderId, publicKey, mockMode, checkoutUrl]);
+
     /**
      * Initiator method for the LRS Checkout flow.
      * Using a ref, the LRS flow can be started by calling this method.
@@ -834,6 +845,7 @@ export function useLrsCheckout(
         handleHttpError,
         handleNavigationStateChange,
         handleModalBackButton,
+        handleFlowBack,
         injectedMain: InjectionScripts.main,
         injectedFlow: InjectionScripts.flow,
     };