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

package/dist/collection/components/checkout/rebill-checkout.js

@@ -23,6 +23,7 @@ import { GoogleMapsService } from "../../utils/google-maps.service";
 import { PaymentErrorMapper } from "../../utils/payment-error-mapper";
 import { PaymentMethodMapper } from "../../utils/payment-method-mapper";
 import { getFieldValues, isFieldRequired } from "../../utils/required-fields-mappers";
+import { cleanupCSS, cleanupJS, injectCSS, injectJS } from "../../utils/resource-injector";
 import "../shared/mode-sandbox/mode-sandbox";
 import { getAllRequiredFields, getRequiredFieldsForMethod, } from "./utils/getRequiredFields";
 import { getSessionToInitialize } from "./utils/getSessionToInitialize";
@@ -64,6 +65,11 @@ export class RebillCheckout {
      * 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
@@ -132,6 +138,7 @@ export class RebillCheckout {
     formElement;
     emailDebounceTimeout = null;
     injectedStyleElement = null;
+    injectedScriptElement = null;
     /**
      * Get the display configuration, merging user config with defaults
      */
@@ -235,49 +242,27 @@ export class RebillCheckout {
      * 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 = () => {
@@ -293,6 +278,7 @@ export class RebillCheckout {
             this.emailDebounceTimeout = null;
         }
         this.cleanupInjectedCSS();
+        this.cleanupInjectedJS();
     }
     async componentWillLoad() {
         try {
@@ -300,6 +286,8 @@ export class RebillCheckout {
             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);
@@ -368,6 +356,8 @@ export class RebillCheckout {
     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 &&
@@ -925,8 +915,8 @@ export class RebillCheckout {
             label: country.country,
             value: country.isoCountryCode,
         }));
-        const renderRebillSummary = (props = {}) => (h("rebill-summary", { key: '4b1db10c60e123202a604f64dc89990eace6325b', totalAmount: sessionState.data.pricing.total, currency: sessionState.data.pricing.currency, itemTitle: sessionState._session?.getTitle(), itemDescription: sessionState._session?.getDescription(), itemAmount: sessionState.data.pricing.subtotal, subtotal: sessionState.data.pricing.subtotal, allowCoupon: sessionState._session?.getAllowCoupon(this.displayConfig), currentBreakpoint: this.breakpoint, planFrequency: sessionState._session?.getPlanFrequency(), planFrequencyCount: sessionState._session?.getPlanFrequencyCount(), discountType: sessionState.data.discount.discountType, discountedPercentage: sessionState.data.discount.discountedPercentage, discountDuration: sessionState.data.discount.discountDuration, discountAmount: sessionState.data.discount.discountAmount, ...props }));
-        return (sessionState.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: sessionState.data.pricing.total, currency: sessionState.data.pricing.currency, itemTitle: sessionState._session?.getTitle(), itemDescription: sessionState._session?.getDescription(), itemAmount: sessionState.data.pricing.subtotal, subtotal: sessionState.data.pricing.subtotal, allowCoupon: sessionState._session?.getAllowCoupon(this.displayConfig), currentBreakpoint: this.breakpoint, planFrequency: sessionState._session?.getPlanFrequency(), planFrequencyCount: sessionState._session?.getPlanFrequencyCount(), discountType: sessionState.data.discount.discountType, discountedPercentage: sessionState.data.discount.discountedPercentage, discountDuration: sessionState.data.discount.discountDuration, discountAmount: sessionState.data.discount.discountAmount, ...props }));
+        return (sessionState.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() &&
             sessionState.isInitialized ? (h("success-page", { typePaymentMethod: sessionState.data.paymentMethodSelected, paymentMethodName: PaymentMethodMapper.mapToAPMPaymentMethod(sessionState.data.paymentMethodSelected ||
                 sessionState.data.payment?.paymentMethodType, sessionState.data?.pricing?.country), country: sessionState.data?.pricing?.country, bank: sessionState.data.payment?.paymentMethodMetadata?.bank ||
@@ -1259,6 +1249,25 @@ export class RebillCheckout {
                 "reflect": false,
                 "attribute": "css"
             },
+            "js": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Custom JavaScript to be injected into the component\nCan be a string of JavaScript code or a URL to a JS file"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "js"
+            },
             "language": {
                 "type": "string",
                 "mutable": false,