@glomopay/react-native-sdk 1.3.4 → 2.0.1

package/src/glomo-lrs-checkout.tsx

@@ -1,8 +1,8 @@
 /** The GlomoPay LRS Checkout Component */
 
 import React, { useMemo, useImperativeHandle, forwardRef } from "react";
-import { StyleSheet, View, Modal, Platform } from "react-native";
-import { WebView, type WebViewMessageEvent } from "react-native-webview";
+import { StyleSheet, View, Modal, Platform, SafeAreaView, TouchableOpacity, Text } from "react-native";
+import { WebView, type WebViewMessageEvent, type WebViewProps } from "react-native-webview";
 
 import { useLrsCheckout, type UseLrsCheckoutOptions, type LrsCheckoutStatus } from "./use-lrs-checkout";
 import { type SdkError } from "./utils/analytics";
@@ -21,7 +21,7 @@ export interface GlomoLrsCheckoutRef {
 /**
  * The Main GlomoPay LRS Checkout Component
  *
- * @param server - Optional. The base LRS checkout server. If not provided, defaults to the production URL (https://lrs-checkout-page-prod.web.app). Only override this for localhost or staging setups.
+ * @param server - Optional. The SDK server environment. For development builds ONLY.
  * @param publicKey - The public key for the merchant. If it starts with "test_", mock mode will be enabled automatically. Otherwise, live mode is used.
  * @param orderId - The order ID. Always starts with "order_"
  *
@@ -54,10 +54,13 @@ function GlomoLrsCheckoutComponent(
 ) {
     // Computing mockMode based on the publicKey prefix
     const mockMode = useMemo(() => {
+        const resolvedMockMode = publicKey?.toLowerCase().startsWith("test_") ?? false;
         if (devMode) {
-            console.log(`[GlomoPay RN SDK] ${mockMode ? "Using" : "Not using"} Mock mode for publicKey: ${publicKey}`);
+            console.log(
+                `[GlomoPay RN SDK] ${resolvedMockMode ? "Using" : "Not using"} Mock mode for publicKey: ${publicKey}`
+            );
         }
-        return publicKey?.toLowerCase().startsWith("test_") ?? false;
+        return resolvedMockMode;
     }, [publicKey, devMode]);
 
     const {
@@ -66,17 +69,23 @@ function GlomoLrsCheckoutComponent(
         showCheckout,
         flowWebViewUrl,
         showFlowWebView,
+        educationCarouselUrl: resolvedEducationCarouselUrl,
+        educationCarouselState,
         checkoutUrl,
         mainWebViewRef,
         flowWebViewRef,
+        educationCarouselWebViewRef,
         handleMainWebViewMessage,
         handleFlowWebViewMessage,
+        handleEducationCarouselWebViewMessage,
         handleError,
         handleHttpError,
         handleNavigationStateChange,
         handleModalBackButton,
+        handleFlowBack,
         injectedMain,
         injectedFlow,
+        injectedEducationCarousel,
     } = useLrsCheckout(
         {
             server,
@@ -98,14 +107,73 @@ function GlomoLrsCheckoutComponent(
         getStatus: () => status,
     }));
 
+    /**
+     * Injecting a viewport meta tag and CSS text-size-adjust guard into the carousel WebView on load.
+     * This prevents the OS from auto-scaling text (especially on Android), which can break the carousel layout.
+     */
+    const carouselViewportGuardScript = useMemo(
+        () => `
+            (function() {
+                try {
+                    var viewportContent = "width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover";
+                    var viewportTag = document.querySelector("meta[name='viewport']");
+
+                    if (!viewportTag) {
+                        viewportTag = document.createElement("meta");
+                        viewportTag.setAttribute("name", "viewport");
+                        var headOrRoot = document.head || document.documentElement;
+                        if (headOrRoot) {
+                            headOrRoot.appendChild(viewportTag);
+                        }
+                    }
+
+                    if (viewportTag) {
+                        viewportTag.setAttribute("content", viewportContent);
+                    }
+
+                    var styleTagId = "__glomo_rn_webview_scale_guard__";
+                    var existingStyleTag = document.getElementById(styleTagId);
+                    if (!existingStyleTag) {
+                        var styleTag = document.createElement("style");
+                        styleTag.id = styleTagId;
+                        styleTag.textContent = "html, body, * { -webkit-text-size-adjust: 100% !important; text-size-adjust: 100% !important; }";
+                        var styleHost = document.head || document.documentElement;
+                        if (styleHost) {
+                            styleHost.appendChild(styleTag);
+                        }
+                    }
+                } catch (error) {}
+                true;
+            })();
+        `,
+        []
+    );
+
+    /**
+     * Locking down zoom and scaling behaviour for the carousel WebView.
+     * setSupportZoom/scalesPageToFit prevent user-initiated and system-initiated zoom;
+     * textZoom=100 on Android normalises the system font-size setting so the carousel isn't affected.
+     */
+    const carouselWebViewProps = useMemo<Partial<WebViewProps>>(
+        () => ({
+            setSupportZoom: false,
+            scalesPageToFit: false,
+            overScrollMode: "never",
+            textZoom: Platform.OS === "android" ? 100 : undefined,
+        }),
+        []
+    );
+
     // Making the WebView component
     const makeWebView = React.useCallback(
         (
             ref: React.RefObject<WebView>,
             url: string,
             messageHandler: (event: WebViewMessageEvent) => void,
-            identifier: "main" | "flow",
-            injectedJavaScript?: string
+            identifier: "main" | "flow" | "educationCarousel",
+            injectedJavaScript?: string,
+            injectedJavaScriptBeforeContentLoaded?: string,
+            additionalProps?: Partial<WebViewProps>
         ) => {
             // Preventing a render if no injection script is provided
             if (!injectedJavaScript) {
@@ -145,6 +213,26 @@ function GlomoLrsCheckoutComponent(
                     onError={handleError}
                     onHttpError={handleHttpError}
                     onNavigationStateChange={handleNavigationStateChange}
+                    onLoadStart={() => {
+                        if (devMode) {
+                            console.log(`[GlomoPay RN SDK] [${identifier}] WebView load started for ${url}`);
+                        }
+                    }}
+                    onLoadEnd={() => {
+                        if (identifier === "educationCarousel" && ref.current && carouselViewportGuardScript) {
+                            ref.current.injectJavaScript(carouselViewportGuardScript);
+                        }
+                        if (devMode) {
+                            console.log(`[GlomoPay RN SDK] [${identifier}] WebView load ended for ${url}`);
+                        }
+                    }}
+                    onLoadProgress={({ nativeEvent }) => {
+                        if (devMode && identifier === "educationCarousel") {
+                            console.log(
+                                `[GlomoPay RN SDK] [educationCarousel] load progress=${nativeEvent.progress} url=${nativeEvent.url}`
+                            );
+                        }
+                    }}
                     source={{ uri: url }}
                     javaScriptCanOpenWindowsAutomatically={true}
                     setSupportMultipleWindows={true}
@@ -155,6 +243,7 @@ function GlomoLrsCheckoutComponent(
                     limitsNavigationsToAppBoundDomains={false}
                     menuItems={[]}
                     injectedJavaScript={injectedJavaScript}
+                    injectedJavaScriptBeforeContentLoaded={injectedJavaScriptBeforeContentLoaded}
                     style={styles.webview}
                     showsHorizontalScrollIndicator={false}
                     showsVerticalScrollIndicator={false}
@@ -163,10 +252,11 @@ function GlomoLrsCheckoutComponent(
                     sharedCookiesEnabled={true}
                     allowsInlineMediaPlayback={true}
                     mediaPlaybackRequiresUserAction={false}
+                    {...additionalProps}
                 />
             );
         },
-        [handleError, handleHttpError, handleNavigationStateChange, devMode]
+        [handleError, handleHttpError, handleNavigationStateChange, devMode, carouselViewportGuardScript]
     );
 
     const MainWebViewComponent = useMemo(
@@ -182,6 +272,29 @@ function GlomoLrsCheckoutComponent(
         [makeWebView, flowWebViewUrl, handleFlowWebViewMessage, injectedFlow, flowWebViewRef]
     );
 
+    const EducationCarouselWebViewComponent = useMemo(
+        () =>
+            resolvedEducationCarouselUrl
+                ? makeWebView(
+                      educationCarouselWebViewRef,
+                      resolvedEducationCarouselUrl,
+                      handleEducationCarouselWebViewMessage,
+                      "educationCarousel",
+                      injectedEducationCarousel,
+                      undefined,
+                      carouselWebViewProps
+                  )
+                : null,
+        [
+            makeWebView,
+            resolvedEducationCarouselUrl,
+            educationCarouselWebViewRef,
+            handleEducationCarouselWebViewMessage,
+            injectedEducationCarousel,
+            carouselWebViewProps,
+        ]
+    );
+
     // Using the controlled visible if provided, otherwise using the internal state
     const isVisible = useMemo(() => controlledVisible ?? showCheckout, [controlledVisible, showCheckout]);
 
@@ -200,6 +313,22 @@ function GlomoLrsCheckoutComponent(
     // Alias to ensure explicit component reference for React Native
     const ModalComponent = Modal;
 
+    /**
+     * Deriving render gates from state:
+     * showCarousel: carousel WebView is visible only after it signals it has content
+     * shouldRenderFlowOverlay: flow overlay is mounted only when there is an active flow URL
+     * shouldRenderEducationCarousel: carousel is rendered inside the flow overlay (depends on shouldRenderFlowOverlay)
+     */
+    const showCarousel = educationCarouselState === "hasContent";
+    const shouldRenderFlowOverlay = Boolean(showFlowWebView && flowWebViewUrl && FlowWebViewComponent);
+    const shouldRenderEducationCarousel = Boolean(shouldRenderFlowOverlay && EducationCarouselWebViewComponent);
+
+    if (devMode) {
+        console.log(
+            `[GlomoPay RN SDK] Render gates: modal=${shouldShowModal}, flowOverlay=${shouldRenderFlowOverlay}, educationCarouselWebView=${shouldRenderEducationCarousel}, educationCarouselVisible=${showCarousel}, flowWebViewUrl=${flowWebViewUrl || "<empty>"}, educationCarouselUrl=${resolvedEducationCarouselUrl || "<empty>"}`
+        );
+    }
+
     return (
         <ModalComponent
             visible={shouldShowModal}
@@ -210,9 +339,36 @@ function GlomoLrsCheckoutComponent(
             <View style={styles.modalContainer}>
                 <View style={styles.mainWebViewContainer}>{MainWebViewComponent}</View>
 
-                {showFlowWebView && flowWebViewUrl && FlowWebViewComponent && (
+                {shouldRenderFlowOverlay && (
                     <View style={styles.flowWebViewContainer}>
-                        <View style={styles.flowWebViewContent}>{FlowWebViewComponent}</View>
+                        <SafeAreaView style={styles.flowHeader}>
+                            <TouchableOpacity onPress={handleFlowBack} style={styles.flowBackButton}>
+                                <Text style={styles.flowBackChevron}>‹</Text>
+                            </TouchableOpacity>
+                        </SafeAreaView>
+                        <View style={styles.overlayContentContainer}>
+                            {shouldRenderEducationCarousel && (
+                                <View
+                                    pointerEvents={showCarousel ? "auto" : "none"}
+                                    style={[
+                                        styles.educationCarouselContainer,
+                                        showCarousel
+                                            ? styles.educationCarouselContainerVisible
+                                            : styles.educationCarouselContainerHidden,
+                                    ]}
+                                >
+                                    {EducationCarouselWebViewComponent}
+                                </View>
+                            )}
+                            <View
+                                style={[
+                                    styles.flowWebViewContent,
+                                    showCarousel ? styles.flowWebViewContentWithCarousel : null,
+                                ]}
+                            >
+                                {FlowWebViewComponent}
+                            </View>
+                        </View>
                     </View>
                 )}
             </View>
@@ -242,13 +398,53 @@ 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",
+    },
+    flowBackButton: {
+        paddingVertical: 0,
+        paddingLeft: 20,
+    },
+    flowBackChevron: {
+        fontSize: 42,
+        color: "#333",
+        lineHeight: 42,
+    },
     flowWebViewContent: {
         flex: 1,
     },
+    flowWebViewContentWithCarousel: {
+        flex: 8.5,
+    },
+    overlayContentContainer: {
+        flex: 1,
+    },
+    educationCarouselContainer: {
+        flex: 1.5,
+    },
+    educationCarouselContainerVisible: {
+        opacity: 1,
+        zIndex: 2,
+        elevation: 2,
+    },
+    educationCarouselContainerHidden: {
+        position: "absolute",
+        top: 0,
+        left: 0,
+        width: 1,
+        height: 1,
+        opacity: 0,
+        zIndex: -1,
+        elevation: 0,
+        overflow: "hidden",
+    },
     errorContainer: {
         flex: 1,
         justifyContent: "center",

package/src/index.ts

@@ -3,6 +3,7 @@
 // Payload, status, and error types from the LRS Checkout flow
 export { type GlomoLrsCheckoutPayload, type LrsCheckoutStatus } from "./use-lrs-checkout";
 export { type SdkError } from "./utils/analytics";
+export { type GlomoLrsServer } from "./config/base";
 
 // Main UI Component for the LRS Checkout flow
 export { GlomoLrsCheckout, type GlomoLrsCheckoutProps, type GlomoLrsCheckoutRef } from "./glomo-lrs-checkout";

package/src/injections/index.ts

@@ -3,8 +3,10 @@
  */
 import { injectedScript as mainScript } from "./webview-main.injection";
 import { injectedScript as flowScript } from "./webview-flow.injection";
+import { injectedScript as educationCarouselScript } from "./webview-education-carousel.injection";
 
 export const InjectionScripts = {
     main: mainScript,
     flow: flowScript,
+    educationCarousel: educationCarouselScript,
 };

package/src/injections/webview-education-carousel.injection.ts

@@ -0,0 +1,154 @@
+/** Injection JavaScript for the Education Carousel WebView */
+export const injectedScript: string = `
+    (function() {
+      // Handling the carousel
+      const LOG_PREFIX = 'EDUCATION_CAROUSEL_WEBVIEW: ';
+      
+      function formatMessage(args) {
+        return args.map(function(arg) {
+          if (typeof arg === 'object') {
+            try {
+              return LOG_PREFIX + JSON.stringify(arg, null, 2);
+            } catch (error) {
+              return LOG_PREFIX + '[unserializable object]';
+            }
+          }
+          
+          return LOG_PREFIX + String(arg);
+        }).join(' ');
+      }
+
+      function parseMessageData(rawData) {
+        if (typeof rawData === 'string') {
+          try {
+            return JSON.parse(rawData);
+          } catch (error) {
+            return rawData;
+          }
+        }
+
+        return rawData;
+      }
+
+      function forwardEducationStepsMessage(data, source) {
+        const parsedData = parseMessageData(data);
+
+        if (!parsedData || typeof parsedData !== 'object') {
+          safePostMessage({
+            type: 'console',
+            level: 'debug',
+            message: formatMessage(['Ignored non-object carousel message from ' + source, parsedData])
+          });
+          return;
+        }
+
+        if (parsedData.type !== 'lrs.has_education_steps') {
+          safePostMessage({
+            type: 'console',
+            level: 'debug',
+            message: formatMessage(['Ignored unrelated carousel message from ' + source, parsedData])
+          });
+          return;
+        }
+
+        safePostMessage({
+          type: 'lrs.has_education_steps',
+          value: Boolean(parsedData.value),
+          source: source,
+          payload: parsedData
+        });
+
+        safePostMessage({
+          type: 'console',
+          level: 'info',
+          message: formatMessage(['Forwarded lrs.has_education_steps from ' + source, parsedData])
+        });
+      }
+
+      function safePostMessage(payload) {
+        try {
+          if (window.ReactNativeWebView && typeof window.ReactNativeWebView.postMessage === 'function') {
+            window.ReactNativeWebView.postMessage(JSON.stringify(payload));
+          }
+        } catch (error) {
+          originalError && originalError.call(console, LOG_PREFIX + 'Failed to post message to ReactNativeWebView', error);
+        }
+      }
+
+      // Overriding console methods
+      const originalLog = console.log;
+      const originalWarn = console.warn;
+      const originalError = console.error;
+      const originalInfo = console.info;
+
+      console.log = function(...args) {
+        originalLog.apply(console, args);
+        safePostMessage({
+          type: 'console',
+          level: 'log',
+          message: formatMessage(args)
+        });
+      };
+
+      console.warn = function(...args) {
+        originalWarn.apply(console, args);
+        safePostMessage({
+          type: 'console',
+          level: 'warn',
+          message: formatMessage(args)
+        });
+      };
+
+      console.error = function(...args) {
+        originalError.apply(console, args);
+        safePostMessage({
+          type: 'console',
+          level: 'error',
+          message: formatMessage(args)
+        });
+      };
+
+      console.info = function(...args) {
+        originalInfo.apply(console, args);
+        safePostMessage({
+          type: 'console',
+          level: 'info',
+          message: formatMessage(args)
+        });
+      };
+
+      // Listening for unhandled errors
+      window.addEventListener('error', function(event) {
+        safePostMessage({
+          type: 'console',
+          level: 'error',
+          message: LOG_PREFIX + 'Unhandled Error: ' + event.message + ' at ' + event.filename + ':' + event.lineno
+        });
+      });
+
+      // Listening for unhandled promise rejections
+      window.addEventListener('unhandledrejection', function(event) {
+        safePostMessage({
+          type: 'console',
+          level: 'error',
+          message: LOG_PREFIX + 'Unhandled Promise Rejection: ' + (event.reason?.toString() || 'Unknown')
+        });
+      });
+
+      // Listening for messages from the WebView
+      window.addEventListener('message', function(event) {
+        console.log(LOG_PREFIX + 'Message received from window: ' + event.data);
+        forwardEducationStepsMessage(event.data, 'window.message');
+      });
+
+      document.addEventListener('message', function(event) {
+        console.log(LOG_PREFIX + 'Message received from document: ' + event.data);
+        forwardEducationStepsMessage(event.data, 'document.message');
+      });
+
+      // Logging that injection is complete
+      console.log(LOG_PREFIX + 'GlomoPay WebView JavaScript injection complete and waiting for lrs.has_education_steps');
+
+      true; // Required for injected JavaScript
+    })();
+`;

package/src/injections/webview-flow.injection.ts

@@ -1,7 +1,7 @@
 /** Injection JavaScript for the Secondary WebView */
 export const injectedScript: string = `
     (function() {
-      // Override console methods
+      // Overriding console methods
       const originalLog = console.log;
       const originalWarn = console.warn;
       const originalError = console.error;
@@ -58,8 +58,7 @@ export const injectedScript: string = `
             window.ReactNativeWebView.postMessage(JSON.stringify({
                 type: 'console',
                 level: 'network',
-                message: "FLOW_WEBVIEW: " + 'FETCH RESPONSE: ' + url + ' - Status: ' + response.status,
-                extraData: { data: response.responseText }
+                message: "FLOW_WEBVIEW: " + 'FETCH RESPONSE: ' + url + ' - Status: ' + response.status
               }));
             return response;
           })
@@ -94,8 +93,7 @@ export const injectedScript: string = `
           window.ReactNativeWebView.postMessage(JSON.stringify({
               type: 'console',
               level: 'network',
-              message: "FLOW_WEBVIEW: " + 'XHR RESPONSE: ' + this._url + ' - Status: ' + this.status,
-              extraData: { data: this.responseText }
+              message: "FLOW_WEBVIEW: " + 'XHR RESPONSE: ' + this._url + ' - Status: ' + this.status
             }));
         });
         

package/src/injections/webview-main.injection.ts

@@ -1,7 +1,7 @@
 /** Injection JavaScript for the Primary WebView */
 export const injectedScript: string = `
     (function() {
-      // Override console methods
+      // Overriding console methods
       const originalLog = console.log;
       const originalWarn = console.warn;
       const originalError = console.error;
@@ -94,15 +94,13 @@ export const injectedScript: string = `
               window.ReactNativeWebView.postMessage(JSON.stringify({
                 type: 'console',
                 level: 'network',
-                message: 'XHR RESPONSE LOAD: ' + this._url + ' - Status: ' + this.status,
-                extraData: { data: this.responseText }
+                message: 'XHR RESPONSE LOAD: ' + this._url + ' - Status: ' + this.status
               }));
           } catch (e) {
             window.ReactNativeWebView.postMessage(JSON.stringify({
               type: 'console',
               level: 'network',
-              message: 'XHR RESPONSE ERROR: ' + this._url + ' - Status: ' + this.status,
-              extraData: { data: this.responseText }
+              message: 'XHR RESPONSE ERROR: ' + this._url + ' - Status: ' + this.status
             }));
           }
         });