rebill-web-components-sdk 1.10.13 → 1.11.0-beta.1

package/dist/components/rebill-checkout.js

@@ -78,6 +78,124 @@ const DEFAULT_DISPLAY_CONFIG = {
     useAddressSearch: true,
 };
 
+/**
+ * Utility functions for injecting custom CSS and JavaScript resources into the document
+ */
+/**
+ * Checks if a string is a URL (http, https, or protocol-relative)
+ */
+function isUrl(content) {
+    return (content.startsWith('http://') || content.startsWith('https://') || content.startsWith('//'));
+}
+/**
+ * Generates a unique ID for injected resources
+ */
+function generateResourceId(prefix) {
+    return `${prefix}-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+}
+/**
+ * Creates a CSS link element for loading CSS from a URL
+ */
+function createCssLinkElement(url, id) {
+    const linkElement = document.createElement('link');
+    linkElement.rel = 'stylesheet';
+    linkElement.href = url;
+    linkElement.id = id;
+    linkElement.setAttribute('data-rebill-injected', 'true');
+    return linkElement;
+}
+/**
+ * Creates a style element for injecting raw CSS
+ */
+function createStyleElement(css, id) {
+    const styleElement = document.createElement('style');
+    styleElement.id = id;
+    styleElement.setAttribute('data-rebill-injected', 'true');
+    styleElement.textContent = css;
+    return styleElement;
+}
+/**
+ * Creates a script element for loading JavaScript from a URL
+ */
+function createScriptLinkElement(url, id) {
+    const scriptElement = document.createElement('script');
+    scriptElement.src = url;
+    scriptElement.id = id;
+    scriptElement.setAttribute('data-rebill-injected', 'true');
+    scriptElement.async = true;
+    return scriptElement;
+}
+/**
+ * Creates a script element for injecting raw JavaScript
+ */
+function createScriptElement(js, id) {
+    const scriptElement = document.createElement('script');
+    scriptElement.id = id;
+    scriptElement.setAttribute('data-rebill-injected', 'true');
+    scriptElement.textContent = js;
+    return scriptElement;
+}
+/**
+ * Removes an injected resource element from the DOM
+ */
+function removeInjectedResource(element) {
+    if (!element) {
+        return;
+    }
+    try {
+        element.remove();
+    }
+    catch (error) {
+        console.warn('Error removing injected resource:', error);
+    }
+}
+/**
+ * Injects custom CSS into the document
+ * @param css - CSS content (raw CSS string or URL)
+ * @param existingElement - Optional existing injected element to clean up first
+ * @returns The injected element or null if no CSS was provided
+ */
+function injectCSS(css, existingElement = null) {
+    if (!css) {
+        return null;
+    }
+    // Clean up existing element if provided
+    removeInjectedResource(existingElement);
+    const cssId = generateResourceId('rebill-checkout-css');
+    const element = isUrl(css) ? createCssLinkElement(css, cssId) : createStyleElement(css, cssId);
+    document.head.appendChild(element);
+    return element;
+}
+/**
+ * Injects custom JavaScript into the document
+ * @param js - JavaScript content (raw JS string or URL)
+ * @param existingElement - Optional existing injected element to clean up first
+ * @returns The injected element or null if no JS was provided
+ */
+function injectJS(js, existingElement = null) {
+    if (!js) {
+        return null;
+    }
+    // Clean up existing element if provided
+    removeInjectedResource(existingElement);
+    const jsId = generateResourceId('rebill-checkout-js');
+    const element = isUrl(js) ? createScriptLinkElement(js, jsId) : createScriptElement(js, jsId);
+    document.head.appendChild(element);
+    return element;
+}
+/**
+ * Cleans up injected CSS element
+ */
+function cleanupCSS(element) {
+    removeInjectedResource(element);
+}
+/**
+ * Cleans up injected JavaScript element
+ */
+function cleanupJS(element) {
+    removeInjectedResource(element);
+}
+
 var PROVIDER_ENUM;
 (function (PROVIDER_ENUM) {
     PROVIDER_ENUM["BAMBOO"] = "bamboo_payment";
@@ -245,6 +363,11 @@ const RebillCheckout$1 = /*@__PURE__*/ proxyCustomElement(class RebillCheckout e
      * Can be a string of CSS or a URL to a CSS file
      */
     css;
+    /**
+     * Custom JavaScript to be injected into the component
+     * Can be a string of JavaScript code or a URL to a JS file
+     */
+    js;
     /**
      * Language code for the application display
      * If not provided, the language will be determined by the current session logic
@@ -313,6 +436,7 @@ const RebillCheckout$1 = /*@__PURE__*/ proxyCustomElement(class RebillCheckout e
     formElement;
     emailDebounceTimeout = null;
     injectedStyleElement = null;
+    injectedScriptElement = null;
     /**
      * Get the display configuration, merging user config with defaults
      */
@@ -416,49 +540,27 @@ const RebillCheckout$1 = /*@__PURE__*/ proxyCustomElement(class RebillCheckout e
      * Inject custom CSS into the document
      */
     injectCustomCSS() {
-        if (!this.css) {
-            return;
-        }
-        // Clean up any existing injected CSS
-        this.cleanupInjectedCSS();
-        // Create a unique ID for this component's CSS
-        const cssId = `rebill-checkout-css-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
-        // Check if CSS is a URL or raw CSS
-        if (this.css.startsWith('http://') ||
-            this.css.startsWith('https://') ||
-            this.css.startsWith('//')) {
-            // Load CSS from URL
-            const linkElement = document.createElement('link');
-            linkElement.rel = 'stylesheet';
-            linkElement.href = this.css;
-            linkElement.id = cssId;
-            linkElement.setAttribute('data-rebill-injected', 'true');
-            document.head.appendChild(linkElement);
-            this.injectedStyleElement = linkElement; // Store reference for cleanup
-        }
-        else {
-            // Inject raw CSS
-            const styleElement = document.createElement('style');
-            styleElement.id = cssId;
-            styleElement.setAttribute('data-rebill-injected', 'true');
-            styleElement.textContent = this.css;
-            document.head.appendChild(styleElement);
-            this.injectedStyleElement = styleElement;
-        }
+        this.injectedStyleElement = injectCSS(this.css, this.injectedStyleElement);
     }
     /**
      * Clean up injected CSS
      */
     cleanupInjectedCSS() {
-        if (this.injectedStyleElement) {
-            try {
-                this.injectedStyleElement.remove();
-            }
-            catch (error) {
-                console.warn('Error removing injected CSS:', error);
-            }
-            this.injectedStyleElement = null;
-        }
+        cleanupCSS(this.injectedStyleElement);
+        this.injectedStyleElement = null;
+    }
+    /**
+     * Inject custom JavaScript into the document
+     */
+    injectCustomJS() {
+        this.injectedScriptElement = injectJS(this.js, this.injectedScriptElement);
+    }
+    /**
+     * Clean up injected JavaScript
+     */
+    cleanupInjectedJS() {
+        cleanupJS(this.injectedScriptElement);
+        this.injectedScriptElement = null;
     }
     timeToRedirectAPM = 5000;
     resizeHandler = () => {
@@ -474,6 +576,7 @@ const RebillCheckout$1 = /*@__PURE__*/ proxyCustomElement(class RebillCheckout e
             this.emailDebounceTimeout = null;
         }
         this.cleanupInjectedCSS();
+        this.cleanupInjectedJS();
     }
     async componentWillLoad() {
         try {
@@ -481,6 +584,8 @@ const RebillCheckout$1 = /*@__PURE__*/ proxyCustomElement(class RebillCheckout e
             window.addEventListener('resize', this.resizeHandler);
             // Inject custom CSS if provided
             this.injectCustomCSS();
+            // Inject custom JS if provided
+            this.injectCustomJS();
             // Initialize language - use prop if provided, otherwise use current session logic
             if (this.language) {
                 await I18nService.changeLanguage(this.language);
@@ -549,6 +654,8 @@ const RebillCheckout$1 = /*@__PURE__*/ proxyCustomElement(class RebillCheckout e
     componentWillUpdate() {
         // Re-inject CSS when css prop changes
         this.injectCustomCSS();
+        // Re-inject JS when js prop changes
+        this.injectCustomJS();
     }
     async changePaymentMethod(paymentMethod) {
         if (paymentMethod !== this.currentPaymentMethod &&
@@ -1103,8 +1210,8 @@ const RebillCheckout$1 = /*@__PURE__*/ proxyCustomElement(class RebillCheckout e
             label: country.country,
             value: country.isoCountryCode,
         }));
-        const renderRebillSummary = (props = {}) => (h("rebill-summary", { key: '4b1db10c60e123202a604f64dc89990eace6325b', totalAmount: state.data.pricing.total, currency: state.data.pricing.currency, itemTitle: state._session?.getTitle(), itemDescription: state._session?.getDescription(), itemAmount: state.data.pricing.subtotal, subtotal: state.data.pricing.subtotal, allowCoupon: state._session?.getAllowCoupon(this.displayConfig), currentBreakpoint: this.breakpoint, planFrequency: state._session?.getPlanFrequency(), planFrequencyCount: state._session?.getPlanFrequencyCount(), discountType: state.data.discount.discountType, discountedPercentage: state.data.discount.discountedPercentage, discountDuration: state.data.discount.discountDuration, discountAmount: state.data.discount.discountAmount, ...props }));
-        return (state.isInitialized && (h(h.Fragment, null, this.showRefreshModal && h("rebill-modal-overlay", { key: '479d5fbdd896241eadf43771c112d683fdafd54b' }), this.displayConfig.processingPayment && (h("rebill-processing-payment", { key: '29f1f76748c8603b97537e62fd6c973b17fecff7', style: { display: this.isCardSubmitting ? 'block' : 'none' } })), this.displayConfig.successPage &&
+        const renderRebillSummary = (props = {}) => (h("rebill-summary", { key: 'f59c6912ff6e36c26f1e307e5258a3dca45d6d13', totalAmount: state.data.pricing.total, currency: state.data.pricing.currency, itemTitle: state._session?.getTitle(), itemDescription: state._session?.getDescription(), itemAmount: state.data.pricing.subtotal, subtotal: state.data.pricing.subtotal, allowCoupon: state._session?.getAllowCoupon(this.displayConfig), currentBreakpoint: this.breakpoint, planFrequency: state._session?.getPlanFrequency(), planFrequencyCount: state._session?.getPlanFrequencyCount(), discountType: state.data.discount.discountType, discountedPercentage: state.data.discount.discountedPercentage, discountDuration: state.data.discount.discountDuration, discountAmount: state.data.discount.discountAmount, ...props }));
+        return (state.isInitialized && (h(h.Fragment, null, this.showRefreshModal && h("rebill-modal-overlay", { key: 'a108e0ac7ab80a67d38d94fe3ee2182edade936a' }), this.displayConfig.processingPayment && (h("rebill-processing-payment", { key: '03f97c3d9c68586df7ba0e29323f4cf9d50e3f1c', style: { display: this.isCardSubmitting ? 'block' : 'none' } })), this.displayConfig.successPage &&
             this.isPaymentApproved() &&
             state.isInitialized ? (h("success-page", { typePaymentMethod: state.data.paymentMethodSelected, paymentMethodName: PaymentMethodMapper.mapToAPMPaymentMethod(state.data.paymentMethodSelected ||
                 state.data.payment?.paymentMethodType, state.data?.pricing?.country), country: state.data?.pricing?.country, bank: state.data.payment?.paymentMethodMetadata?.bank ||
@@ -1251,6 +1358,7 @@ const RebillCheckout$1 = /*@__PURE__*/ proxyCustomElement(class RebillCheckout e
         "customerInformation": [1, "customer-information"],
         "oneClickCheckout": [4, "one-click-checkout"],
         "css": [1],
+        "js": [1],
         "language": [1],
         "checkoutLandingSession": [1, "checkout-landing-session"],
         "externalPayment": [1, "external-payment"],