@justifi/webcomponents 4.8.1 → 4.8.3

package/dist/collection/components/payment-form/payment-form.js

@@ -1,40 +1,21 @@
 import { h, Host } from "@stencil/core";
 import { PaymentMethodTypes } from "../../api";
-import { extractComputedFontsToLoad } from "../../utils/utils";
+import { loadFontsOnParent } from "../../utils/utils";
+import { config } from "../../../config";
 export class PaymentForm {
     constructor() {
         this.bankAccount = undefined;
-        this.card = undefined;
+        this.card = true;
         this.email = undefined;
-        this.iframeOrigin = undefined;
         this.clientId = undefined;
         this.accountId = undefined;
         this.submitButtonText = undefined;
         this.submitButtonEnabled = true;
-        this.hasLoadedFonts = false;
         this.isLoading = false;
-        this.selectedPaymentMethodType = undefined;
-        this.allowedPaymentMethodTypes = [];
+        this.selectedPaymentMethodType = PaymentMethodTypes.card;
     }
     connectedCallback() {
-        if (this.card) {
-            this.allowedPaymentMethodTypes.push(PaymentMethodTypes.card);
-        }
-        if (this.bankAccount) {
-            this.allowedPaymentMethodTypes.push(PaymentMethodTypes.bankAccount);
-        }
-        if (!this.allowedPaymentMethodTypes.length) {
-            this.allowedPaymentMethodTypes.push(PaymentMethodTypes.card);
-        }
-        this.selectedPaymentMethodType = this.allowedPaymentMethodTypes[0];
-        if (!this.hasLoadedFonts) {
-            this.loadFontsOnParent();
-            this.hasLoadedFonts = true;
-        }
-    }
-    paymentMethodSelectedHandler(event) {
-        const paymentMethodType = event.detail;
-        this.selectedPaymentMethodType = paymentMethodType;
+        loadFontsOnParent();
     }
     async fillBillingForm(fields) {
         this.billingFormRef.fill(fields);
@@ -42,17 +23,9 @@ export class PaymentForm {
     async enableSubmitButton() {
         this.submitButtonEnabled = true;
     }
-    async loadFontsOnParent() {
-        const parent = document.body;
-        const fontsToLoad = extractComputedFontsToLoad();
-        if (!parent || !fontsToLoad) {
-            return null;
-        }
-        // This approach is needed to load the font in a parent of the component
-        const fonts = document.createElement('link');
-        fonts.rel = 'stylesheet';
-        fonts.href = `https://fonts.googleapis.com/css2?family=${fontsToLoad}&display=swap`;
-        parent.append(fonts);
+    paymentMethodSelectedHandler(event) {
+        const paymentMethodType = event.detail;
+        this.selectedPaymentMethodType = paymentMethodType;
     }
     async submit(event) {
         event.preventDefault();
@@ -80,7 +53,7 @@ export class PaymentForm {
         }
     }
     render() {
-        return (h(Host, null, h("form", { class: "row gy-3" }, this.allowedPaymentMethodTypes.length > 1 && (h("div", { class: "col-12" }, h("justifi-payment-method-selector", { paymentMethodTypes: this.allowedPaymentMethodTypes, selectedPaymentMethodType: this.selectedPaymentMethodType }))), h("div", { class: "col-12" }, h("justifi-payment-method-form", { "payment-method-form-type": this.selectedPaymentMethodType, "iframe-origin": this.iframeOrigin, ref: el => {
+        return (h(Host, null, h("form", { class: "row gy-3" }, this.card && this.bankAccount && (h("div", { class: "col-12" }, h("justifi-payment-method-selector", { selectedPaymentMethodType: this.selectedPaymentMethodType, onPaymentMethodSelected: event => this.paymentMethodSelectedHandler(event) }))), h("div", { class: "col-12" }, h("justifi-payment-method-form", { "payment-method-form-type": this.selectedPaymentMethodType, iframeOrigin: config.iframeOrigin, ref: el => {
                 if (el) {
                     this.paymentMethodFormRef = el;
                 }
@@ -138,7 +111,8 @@ export class PaymentForm {
                     "text": ""
                 },
                 "attribute": "card",
-                "reflect": false
+                "reflect": false,
+                "defaultValue": "true"
             },
             "email": {
                 "type": "string",
@@ -157,23 +131,6 @@ export class PaymentForm {
                 "attribute": "email",
                 "reflect": false
             },
-            "iframeOrigin": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "iframe-origin",
-                "reflect": false
-            },
             "clientId": {
                 "type": "string",
                 "mutable": false,
@@ -230,10 +187,8 @@ export class PaymentForm {
     static get states() {
         return {
             "submitButtonEnabled": {},
-            "hasLoadedFonts": {},
             "isLoading": {},
-            "selectedPaymentMethodType": {},
-            "allowedPaymentMethodTypes": {}
+            "selectedPaymentMethodType": {}
         };
     }
     static get events() {
@@ -304,33 +259,7 @@ export class PaymentForm {
                     "text": "",
                     "tags": []
                 }
-            },
-            "loadFontsOnParent": {
-                "complexType": {
-                    "signature": "() => Promise<any>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<any>"
-                },
-                "docs": {
-                    "text": "",
-                    "tags": []
-                }
             }
         };
     }
-    static get listeners() {
-        return [{
-                "name": "paymentMethodSelected",
-                "method": "paymentMethodSelectedHandler",
-                "target": undefined,
-                "capture": false,
-                "passive": false
-            }];
-    }
 }

package/dist/collection/components/payment-form/payment-method-selector.js

@@ -1,11 +1,12 @@
 import { Fragment, h } from "@stencil/core";
+import { PaymentMethodTypes } from "../../api";
 const PaymentMethodLabels = {
     bankAccount: 'Bank Account',
     card: 'Card',
 };
 export class PaymentMethodSelector {
     constructor() {
-        this.paymentMethodTypes = [];
+        this.paymentMethodTypes = [PaymentMethodTypes.card, PaymentMethodTypes.bankAccount];
         this.selectedPaymentMethodType = undefined;
     }
     onChangeHandler(event) {
@@ -28,28 +29,6 @@ export class PaymentMethodSelector {
     }
     static get properties() {
         return {
-            "paymentMethodTypes": {
-                "type": "unknown",
-                "mutable": false,
-                "complexType": {
-                    "original": "PaymentMethodTypes[]",
-                    "resolved": "PaymentMethodTypes[]",
-                    "references": {
-                        "PaymentMethodTypes": {
-                            "location": "import",
-                            "path": "../../api",
-                            "id": "src/api/index.ts::PaymentMethodTypes"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "defaultValue": "[]"
-            },
             "selectedPaymentMethodType": {
                 "type": "string",
                 "mutable": false,

package/dist/collection/components/payment-form/test/payment-form.spec.js

@@ -1,19 +1,8 @@
 import { newSpecPage } from "@stencil/core/testing";
 import { PaymentForm } from "../payment-form";
 import { PaymentMethodTypes } from "../../../api";
+import { config } from "../../../../config";
 describe('justifi-payment-form', () => {
-    // State Testing
-    it('should update allowedPaymentMethodTypes and selectedPaymentMethodType state correctly when connectedCallback is invoked', async () => {
-        // Mock properties
-        const mockComponent = new PaymentForm();
-        mockComponent.bankAccount = true;
-        mockComponent.card = true;
-        // Invoke the lifecycle method
-        mockComponent.connectedCallback();
-        // Assertions
-        expect(mockComponent.allowedPaymentMethodTypes).toEqual([PaymentMethodTypes.card, PaymentMethodTypes.bankAccount]);
-        expect(mockComponent.selectedPaymentMethodType).toBe(PaymentMethodTypes.card);
-    });
     it('should update submitButtonEnabled state when enableSubmitButton method is called', async () => {
         // Mock component
         const mockComponent = new PaymentForm();
@@ -40,9 +29,8 @@ describe('justifi-payment-form', () => {
         const paymentForm = new PaymentForm();
         // Assert that the properties exist and have the expected default values
         expect(paymentForm).toHaveProperty('bankAccount', undefined);
-        expect(paymentForm).toHaveProperty('card', undefined);
+        expect(paymentForm).toHaveProperty('card', true);
         expect(paymentForm).toHaveProperty('email', undefined);
-        expect(paymentForm).toHaveProperty('iframeOrigin', undefined);
         expect(paymentForm).toHaveProperty('clientId', undefined);
         expect(paymentForm).toHaveProperty('accountId', undefined);
         expect(paymentForm).toHaveProperty('submitButtonText', undefined);
@@ -144,7 +132,6 @@ describe('justifi-payment-form', () => {
         component.bankAccount = true;
         component.card = true;
         component.email = 'test@test.com';
-        component.iframeOrigin = 'https://example.com';
         component.clientId = 'abc123';
         component.accountId = 'def456';
         component.submitButtonText = 'Submit';
@@ -155,15 +142,15 @@ describe('justifi-payment-form', () => {
         // Render the component
         const { root } = await newSpecPage({
             components: [PaymentForm],
-            html: '<justifi-payment-form payment-method-form-type="card" iframe-origin="https://example.com"></justifi-payment-form>',
+            html: `<justifi-payment-form payment-method-form-type="card"></justifi-payment-form>`,
         });
         // Assert that the rendered output is correct
         expect(root).toEqualHtml(`
-      <justifi-payment-form iframe-origin="https://example.com" payment-method-form-type="card">
+      <justifi-payment-form payment-method-form-type="card">
         <mock:shadow-root>
           <form class="gy-3 row">
             <div class="col-12">
-              <justifi-payment-method-form iframe-origin="https://example.com" payment-method-form-type="card"></justifi-payment-method-form>
+              <justifi-payment-method-form payment-method-form-type="card" iframeorigin="${config.iframeOrigin}"></justifi-payment-method-form>
             </div>
             <div class="col-12">
               <justifi-billing-form legend="Billing Info"></justifi-billing-form>

package/dist/collection/components/payment-method-form/payment-method-form.js

@@ -2,87 +2,58 @@ import { Host, h, } from "@stencil/core";
 import iFrameResize from "iframe-resizer/js/iframeResizer";
 import { MessageEventType } from "./message-event-types";
 import packageJson from "../../../package.json";
-import getComputedTheme from "./get-computed-theme";
-import { config } from "../../../config";
+import getComputedTheme from "../../utils/get-computed-theme";
+import { composeQueryParams } from "../../utils/utils";
+import { FrameCommunicationService } from "../../utils/frame-comunication-service";
 export class PaymentMethodForm {
     constructor() {
         this.computedTheme = getComputedTheme();
+        this.dispatchMessageEvent = (messageEvent) => {
+            const { eventType, data } = messageEvent.data;
+            const eventTypeMessage = MessageEventType[this.paymentMethodFormType];
+            if (eventType === eventTypeMessage.ready) {
+                this.paymentMethodFormReady.emit(data);
+            }
+            else if (eventType === eventTypeMessage.tokenize) {
+                this.paymentMethodFormTokenized.emit(data);
+            }
+            else if (eventType === eventTypeMessage.validate) {
+                this.paymentMethodFormValidated.emit(data);
+            }
+        };
+        this.postMessage = (eventType, payload) => {
+            this.frameService.postMessage(eventType, payload);
+        };
         this.paymentMethodFormType = undefined;
         this.paymentMethodFormValidationMode = undefined;
         this.iframeOrigin = undefined;
         this.singleLine = undefined;
     }
-    connectedCallback() {
-        window.addEventListener('message', this.dispatchMessageEvent.bind(this));
-    }
     disconnectedCallback() {
-        window.removeEventListener('message', this.dispatchMessageEvent.bind(this));
-    }
-    sendStyleOverrides() {
-        if (this.computedTheme) {
-            this.postMessage(MessageEventType[this.paymentMethodFormType].styleOverrides, { styleOverrides: this.computedTheme });
-        }
-    }
-    dispatchMessageEvent(messageEvent) {
-        const messagePayload = messageEvent.data;
-        const messageType = messagePayload.eventType;
-        const messageData = messagePayload.data;
-        if (messageType === MessageEventType[this.paymentMethodFormType].ready) {
-            this.paymentMethodFormReady.emit(messageData);
-        }
-        if (messageType === MessageEventType[this.paymentMethodFormType].tokenize) {
-            this.paymentMethodFormTokenized.emit(messageData);
-        }
-        if (messageType === MessageEventType[this.paymentMethodFormType].validate) {
-            this.paymentMethodFormValidated.emit(messageData);
-        }
-    }
-    postMessage(eventType, payload) {
-        var _a, _b;
-        (_b = (_a = this.iframeElement) === null || _a === void 0 ? void 0 : _a.contentWindow) === null || _b === void 0 ? void 0 : _b.postMessage(Object.assign({ eventType: eventType }, payload), config.iframeOrigin || '*');
+        this.frameService.removeMessageListener(this.dispatchMessageEvent);
     }
     async resize() {
         this.postMessage(MessageEventType[this.paymentMethodFormType].resize);
     }
-    async postMessageWithResponseListener(eventType, payload) {
-        return new Promise(resolve => {
-            const responseListener = (event) => {
-                if (event.data.eventType !== eventType)
-                    return;
-                window.removeEventListener('message', responseListener);
-                resolve(event.data.data);
-            };
-            window.addEventListener('message', responseListener);
-            this.postMessage(eventType, payload);
-        });
-    }
     async tokenize(clientId, paymentMethodMetadata, account) {
         const eventType = MessageEventType[this.paymentMethodFormType].tokenize;
-        const payload = {
-            clientId: clientId,
+        return this.frameService.postMessageWithResponseListener(eventType, {
+            clientId,
+            paymentMethodMetadata,
+            account,
             componentVersion: packageJson.version,
-            paymentMethodMetadata: paymentMethodMetadata,
-            account: account,
-        };
-        return this.postMessageWithResponseListener(eventType, payload);
+        });
     }
     async validate() {
-        return this.postMessageWithResponseListener(MessageEventType[this.paymentMethodFormType].validate);
+        const eventType = MessageEventType[this.paymentMethodFormType].validate;
+        return this.frameService.postMessageWithResponseListener(eventType);
     }
-    composeQueryParams(values) {
-        const queryParams = values.map(value => {
-            if (value === values[0]) {
-                return (value = `?${value}`);
-            }
-            else {
-                return (value = `&${value}`);
-            }
-        });
-        return queryParams.join('');
+    sendStyleOverrides() {
+        if (this.computedTheme) {
+            this.postMessage(MessageEventType[this.paymentMethodFormType].styleOverrides, { styleOverrides: this.computedTheme });
+        }
     }
     getIframeSrc() {
-        const iframeOrigin = config.iframeOrigin;
-        let iframeSrc = `${iframeOrigin}/${this.paymentMethodFormType}`;
         let paramsList = [];
         if (this.paymentMethodFormValidationMode) {
             paramsList.push(`validationMode=${this.paymentMethodFormValidationMode}`);
@@ -90,7 +61,13 @@ export class PaymentMethodForm {
         if (this.singleLine) {
             paramsList.push(`singleLine=${this.singleLine}`);
         }
-        return iframeSrc.concat(this.composeQueryParams(paramsList));
+        let iframeSrc = `${this.iframeOrigin}/${this.paymentMethodFormType}${composeQueryParams(paramsList)}`;
+        return iframeSrc;
+    }
+    initializeFrameCommunicationService() {
+        var _a;
+        this.frameService = new FrameCommunicationService(this.iframeElement, this.iframeOrigin);
+        (_a = this.frameService) === null || _a === void 0 ? void 0 : _a.addMessageListener(this.dispatchMessageEvent);
     }
     render() {
         return (h(Host, null, h("iframe", { id: `justifi-payment-method-form-${this.paymentMethodFormType}`, src: this.getIframeSrc(), ref: el => {
@@ -99,6 +76,7 @@ export class PaymentMethodForm {
                 iFrameResize({
                     scrollbars: false,
                 }, this.iframeElement);
+                this.initializeFrameCommunicationService();
                 this.sendStyleOverrides();
             } })));
     }
@@ -119,9 +97,15 @@ export class PaymentMethodForm {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'card' | 'bankAccount'",
-                    "resolved": "\"bankAccount\" | \"card\"",
-                    "references": {}
+                    "original": "PaymentMethodTypes",
+                    "resolved": "PaymentMethodTypes.bankAccount | PaymentMethodTypes.card",
+                    "references": {
+                        "PaymentMethodTypes": {
+                            "location": "import",
+                            "path": "../../api",
+                            "id": "src/api/index.ts::PaymentMethodTypes"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": false,
@@ -158,7 +142,7 @@ export class PaymentMethodForm {
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": ""
@@ -197,8 +181,8 @@ export class PaymentMethodForm {
                     "text": ""
                 },
                 "complexType": {
-                    "original": "any",
-                    "resolved": "any",
+                    "original": "void",
+                    "resolved": "void",
                     "references": {}
                 }
             }, {
@@ -227,9 +211,15 @@ export class PaymentMethodForm {
                     "text": ""
                 },
                 "complexType": {
-                    "original": "any",
-                    "resolved": "any",
-                    "references": {}
+                    "original": "CreatePaymentMethodResponse",
+                    "resolved": "BankAccountCreateResponse | CardCreateResponse | PaymentMethodErrorResponse",
+                    "references": {
+                        "CreatePaymentMethodResponse": {
+                            "location": "import",
+                            "path": "./payment-method-responses",
+                            "id": "src/components/payment-method-form/payment-method-responses.ts::CreatePaymentMethodResponse"
+                        }
+                    }
                 }
             }];
     }
@@ -237,7 +227,7 @@ export class PaymentMethodForm {
         return {
             "resize": {
                 "complexType": {
-                    "signature": "() => Promise<any>",
+                    "signature": "() => Promise<void>",
                     "parameters": [],
                     "references": {
                         "Promise": {
@@ -245,7 +235,7 @@ export class PaymentMethodForm {
                             "id": "global::Promise"
                         }
                     },
-                    "return": "Promise<any>"
+                    "return": "Promise<void>"
                 },
                 "docs": {
                     "text": "",