@justifi/webcomponents 4.7.4 → 4.7.5

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

@@ -5,278 +5,304 @@ import packageJson from "../../../package.json";
 import getComputedTheme from "./get-computed-theme";
 import { config } from "../../../config";
 export class PaymentMethodForm {
-  constructor() {
-    this.computedTheme = getComputedTheme();
-    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 });
+    constructor() {
+        this.computedTheme = getComputedTheme();
+        this.paymentMethodFormType = undefined;
+        this.paymentMethodFormValidationMode = undefined;
+        this.iframeOrigin = undefined;
+        this.singleLine = undefined;
     }
-  }
-  dispatchMessageEvent(messageEvent) {
-    const messagePayload = messageEvent.data;
-    const messageType = messagePayload.eventType;
-    const messageData = messagePayload.data;
-    if (messageType === MessageEventType[this.paymentMethodFormType].ready) {
-      this.paymentMethodFormReady.emit(messageData);
+    connectedCallback() {
+        window.addEventListener('message', this.dispatchMessageEvent.bind(this));
     }
-  }
-  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 || '*');
-  }
-  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,
-      componentVersion: packageJson.version,
-      paymentMethodMetadata: paymentMethodMetadata,
-      account: account,
-    };
-    return this.postMessageWithResponseListener(eventType, payload);
-  }
-  async validate() {
-    return this.postMessageWithResponseListener(MessageEventType[this.paymentMethodFormType].validate);
-  }
-  composeQueryParams(values) {
-    const queryParams = values.map(value => {
-      if (value === values[0]) {
-        return (value = `?${value}`);
-      }
-      else {
-        return (value = `&${value}`);
-      }
-    });
-    return queryParams.join('');
-  }
-  getIframeSrc() {
-    const iframeOrigin = config.iframeOrigin;
-    let iframeSrc = `${iframeOrigin}/${this.paymentMethodFormType}`;
-    let paramsList = [];
-    if (this.paymentMethodFormValidationMode) {
-      paramsList.push(`validationMode=${this.paymentMethodFormValidationMode}`);
+    disconnectedCallback() {
+        window.removeEventListener('message', this.dispatchMessageEvent.bind(this));
     }
-    if (this.singleLine) {
-      paramsList.push(`singleLine=${this.singleLine}`);
+    sendStyleOverrides() {
+        if (this.computedTheme) {
+            this.postMessage(MessageEventType[this.paymentMethodFormType].styleOverrides, { styleOverrides: this.computedTheme });
+        }
     }
-    return iframeSrc.concat(this.composeQueryParams(paramsList));
-  }
-  render() {
-    return (h(Host, null, h("iframe", { id: `justifi-payment-method-form-${this.paymentMethodFormType}`, src: this.getIframeSrc(), ref: el => {
-        this.iframeElement = el;
-      }, onLoad: () => {
-        iFrameResize(this.iframeElement);
-        this.sendStyleOverrides();
-      } })));
-  }
-  static get is() { return "justifi-payment-method-form"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["payment-method-form.css"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["payment-method-form.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "paymentMethodFormType": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'card' | 'bankAccount'",
-          "resolved": "\"bankAccount\" | \"card\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "payment-method-form-type",
-        "reflect": false
-      },
-      "paymentMethodFormValidationMode": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "| 'onChange'\n    | 'onBlur'\n    | 'onSubmit'\n    | 'onTouched'\n    | 'all'",
-          "resolved": "\"all\" | \"onBlur\" | \"onChange\" | \"onSubmit\" | \"onTouched\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "payment-method-form-validation-mode",
-        "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
-      },
-      "singleLine": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "single-line",
-        "reflect": false
-      }
-    };
-  }
-  static get events() {
-    return [{
-        "method": "paymentMethodFormReady",
-        "name": "paymentMethodFormReady",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
+    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);
         }
-      }, {
-        "method": "paymentMethodFormTokenize",
-        "name": "paymentMethodFormTokenize",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "{\n    data: any;\n  }",
-          "resolved": "{ data: any; }",
-          "references": {}
+        if (messageType === MessageEventType[this.paymentMethodFormType].validate) {
+            this.paymentMethodFormValidated.emit(messageData);
         }
-      }];
-  }
-  static get methods() {
-    return {
-      "resize": {
-        "complexType": {
-          "signature": "() => Promise<any>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
+    }
+    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 || '*');
+    }
+    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,
+            componentVersion: packageJson.version,
+            paymentMethodMetadata: paymentMethodMetadata,
+            account: account,
+        };
+        return this.postMessageWithResponseListener(eventType, payload);
+    }
+    async validate() {
+        return this.postMessageWithResponseListener(MessageEventType[this.paymentMethodFormType].validate);
+    }
+    composeQueryParams(values) {
+        const queryParams = values.map(value => {
+            if (value === values[0]) {
+                return (value = `?${value}`);
+            }
+            else {
+                return (value = `&${value}`);
             }
-          },
-          "return": "Promise<any>"
-        },
-        "docs": {
-          "text": "",
-          "tags": []
+        });
+        return queryParams.join('');
+    }
+    getIframeSrc() {
+        const iframeOrigin = config.iframeOrigin;
+        let iframeSrc = `${iframeOrigin}/${this.paymentMethodFormType}`;
+        let paramsList = [];
+        if (this.paymentMethodFormValidationMode) {
+            paramsList.push(`validationMode=${this.paymentMethodFormValidationMode}`);
         }
-      },
-      "tokenize": {
-        "complexType": {
-          "signature": "(clientId: string, paymentMethodMetadata: any, account?: string) => Promise<CreatePaymentMethodResponse>",
-          "parameters": [{
-              "tags": [],
-              "text": ""
+        if (this.singleLine) {
+            paramsList.push(`singleLine=${this.singleLine}`);
+        }
+        return iframeSrc.concat(this.composeQueryParams(paramsList));
+    }
+    render() {
+        return (h(Host, null, h("iframe", { id: `justifi-payment-method-form-${this.paymentMethodFormType}`, src: this.getIframeSrc(), ref: el => {
+                this.iframeElement = el;
+            }, onLoad: () => {
+                iFrameResize({
+                    scrollbars: false,
+                }, this.iframeElement);
+                this.sendStyleOverrides();
+            } })));
+    }
+    static get is() { return "justifi-payment-method-form"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["payment-method-form.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["payment-method-form.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "paymentMethodFormType": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'card' | 'bankAccount'",
+                    "resolved": "\"bankAccount\" | \"card\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "payment-method-form-type",
+                "reflect": false
+            },
+            "paymentMethodFormValidationMode": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "| 'onChange'\n    | 'onBlur'\n    | 'onSubmit'\n    | 'onTouched'\n    | 'all'",
+                    "resolved": "\"all\" | \"onBlur\" | \"onChange\" | \"onSubmit\" | \"onTouched\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "payment-method-form-validation-mode",
+                "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
+            },
+            "singleLine": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "single-line",
+                "reflect": false
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "paymentMethodFormReady",
+                "name": "paymentMethodFormReady",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
             }, {
-              "tags": [],
-              "text": ""
+                "method": "paymentMethodFormValidated",
+                "name": "paymentMethodFormValidated",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
             }, {
-              "tags": [],
-              "text": ""
-            }],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
+                "method": "paymentMethodFormTokenized",
+                "name": "paymentMethodFormTokenized",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "resize": {
+                "complexType": {
+                    "signature": "() => Promise<any>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<any>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
             },
-            "CreatePaymentMethodResponse": {
-              "location": "import",
-              "path": "./payment-method-responses",
-              "id": "src/components/payment-method-form/payment-method-responses.ts::CreatePaymentMethodResponse"
-            }
-          },
-          "return": "Promise<CreatePaymentMethodResponse>"
-        },
-        "docs": {
-          "text": "",
-          "tags": []
-        }
-      },
-      "validate": {
-        "complexType": {
-          "signature": "() => Promise<any>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
+            "tokenize": {
+                "complexType": {
+                    "signature": "(clientId: string, paymentMethodMetadata: any, account?: string) => Promise<CreatePaymentMethodResponse>",
+                    "parameters": [{
+                            "name": "clientId",
+                            "type": "string",
+                            "docs": ""
+                        }, {
+                            "name": "paymentMethodMetadata",
+                            "type": "any",
+                            "docs": ""
+                        }, {
+                            "name": "account",
+                            "type": "string",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "CreatePaymentMethodResponse": {
+                            "location": "import",
+                            "path": "./payment-method-responses",
+                            "id": "src/components/payment-method-form/payment-method-responses.ts::CreatePaymentMethodResponse"
+                        }
+                    },
+                    "return": "Promise<CreatePaymentMethodResponse>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "validate": {
+                "complexType": {
+                    "signature": "() => Promise<any>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<any>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
             }
-          },
-          "return": "Promise<any>"
-        },
-        "docs": {
-          "text": "",
-          "tags": []
-        }
-      }
-    };
-  }
+        };
+    }
 }

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

@@ -1,21 +1,21 @@
 import { newE2EPage } from "@stencil/core/testing";
 it('should emit "paymentMethodFormReady" when conditions are met', async () => {
-  const page = await newE2EPage();
-  await page.setContent('<justifi-card-form></justifi-card-form>');
-  const cardFormElement = await page.find('justifi-card-form');
-  const paymentFormElement = await page.find('justifi-payment-method-form');
-  const readyEventSpy = await cardFormElement.spyOnEvent('cardFormReady');
-  paymentFormElement.triggerEvent('paymentMethodFormReady');
-  await page.waitForChanges();
-  expect(readyEventSpy).toHaveReceivedEventTimes(1);
+    const page = await newE2EPage();
+    await page.setContent('<justifi-card-form></justifi-card-form>');
+    const cardFormElement = await page.find('justifi-card-form');
+    const paymentFormElement = await page.find('justifi-payment-method-form');
+    const readyEventSpy = await cardFormElement.spyOnEvent('cardFormReady');
+    paymentFormElement.triggerEvent('paymentMethodFormReady');
+    await page.waitForChanges();
+    expect(readyEventSpy).toHaveReceivedEventTimes(1);
 });
 it('should emit "paymentMethodFormTokenize" when conditions are met', async () => {
-  const page = await newE2EPage();
-  await page.setContent('<justifi-card-form></justifi-card-form>');
-  const cardFormElement = await page.find('justifi-card-form');
-  const paymentFormElement = await page.find('justifi-payment-method-form');
-  const tokenizeEventSpy = await cardFormElement.spyOnEvent('cardFormTokenize');
-  paymentFormElement.triggerEvent('paymentMethodFormTokenize');
-  await page.waitForChanges();
-  expect(tokenizeEventSpy).toHaveReceivedEventTimes(1);
+    const page = await newE2EPage();
+    await page.setContent('<justifi-card-form></justifi-card-form>');
+    const cardFormElement = await page.find('justifi-card-form');
+    const paymentFormElement = await page.find('justifi-payment-method-form');
+    const tokenizeEventSpy = await cardFormElement.spyOnEvent('cardFormTokenize');
+    paymentFormElement.triggerEvent('paymentMethodFormTokenize');
+    await page.waitForChanges();
+    expect(tokenizeEventSpy).toHaveReceivedEventTimes(1);
 });