@justifi/webcomponents 4.7.3 → 4.7.5

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

@@ -2,334 +2,335 @@ import { h, Host } from "@stencil/core";
 import { PaymentMethodTypes } from "../../api";
 import { extractComputedFontsToLoad } from "../../utils/utils";
 export class PaymentForm {
-  constructor() {
-    this.bankAccount = undefined;
-    this.card = undefined;
-    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 = [];
-  }
-  connectedCallback() {
-    if (this.card) {
-      this.allowedPaymentMethodTypes.push(PaymentMethodTypes.card);
+    constructor() {
+        this.bankAccount = undefined;
+        this.card = undefined;
+        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 = [];
     }
-    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;
+    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;
-  }
-  async fillBillingForm(fields) {
-    this.billingFormRef.fill(fields);
-  }
-  async enableSubmitButton() {
-    this.submitButtonEnabled = true;
-  }
-  async loadFontsOnParent() {
-    const parent = document.body;
-    const fontsToLoad = extractComputedFontsToLoad();
-    if (!parent || !fontsToLoad) {
-      return null;
+    paymentMethodSelectedHandler(event) {
+        const paymentMethodType = event.detail;
+        this.selectedPaymentMethodType = paymentMethodType;
     }
-    // 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);
-  }
-  async submit(event) {
-    event.preventDefault();
-    if (!this.paymentMethodFormRef || !this.billingFormRef)
-      return;
-    const billingFormValidation = await this.billingFormRef.validate();
-    const paymentMethodFormValidation = await this.paymentMethodFormRef.validate();
-    if (!billingFormValidation.isValid || !paymentMethodFormValidation.isValid)
-      return;
-    this.isLoading = true;
-    try {
-      const billingFormFieldValues = await this.billingFormRef.getValues();
-      const paymentMethodData = Object.assign({ email: this.email }, billingFormFieldValues);
-      const tokenizeResponse = await this.paymentMethodFormRef.tokenize(this.clientId, paymentMethodData, this.accountId);
-      if (tokenizeResponse.error) {
-        console.error(`An error occured submitting the form: ${tokenizeResponse.error.message}`);
-      }
-      this.submitted.emit(tokenizeResponse);
+    async fillBillingForm(fields) {
+        this.billingFormRef.fill(fields);
     }
-    catch (error) {
-      console.error(`An error occured submitting the form: ${error}`);
+    async enableSubmitButton() {
+        this.submitButtonEnabled = true;
     }
-    finally {
-      this.isLoading = false;
+    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);
     }
-  }
-  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 => {
-        if (el) {
-          this.paymentMethodFormRef = el;
+    async submit(event) {
+        event.preventDefault();
+        if (!this.paymentMethodFormRef || !this.billingFormRef)
+            return;
+        const billingFormValidation = await this.billingFormRef.validate();
+        const paymentMethodFormValidation = await this.paymentMethodFormRef.validate();
+        if (!billingFormValidation.isValid || !paymentMethodFormValidation.isValid)
+            return;
+        this.isLoading = true;
+        try {
+            const billingFormFieldValues = await this.billingFormRef.getValues();
+            const paymentMethodData = Object.assign({ email: this.email }, billingFormFieldValues);
+            const tokenizeResponse = await this.paymentMethodFormRef.tokenize(this.clientId, paymentMethodData, this.accountId);
+            if (tokenizeResponse.error) {
+                console.error(`An error occured submitting the form: ${tokenizeResponse.error.message}`);
+            }
+            this.submitted.emit(tokenizeResponse);
         }
-      } })), h("div", { class: "col-12" }, h("justifi-billing-form", { legend: "Billing Info", ref: el => {
-        if (el) {
-          this.billingFormRef = el;
+        catch (error) {
+            console.error(`An error occured submitting the form: ${error}`);
         }
-      } })), h("slot", { name: 'insurance' }), h("div", { class: "col-12" }, h("button", { type: "submit", onClick: event => this.submit(event), disabled: !this.submitButtonEnabled || this.isLoading, class: `btn btn-primary jfi-submit-button${this.isLoading ? ' jfi-submit-button-loading' : ''}` }, this.isLoading ?
-      h("div", { class: "spinner-border spinner-border-sm", role: "status" }, h("span", { class: "visually-hidden" }, "Loading...")) :
-      this.submitButtonText || 'Submit')))));
-  }
-  static get is() { return "justifi-payment-form"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["payment-form.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["payment-form.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "bankAccount": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "bank-account",
-        "reflect": false
-      },
-      "card": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "card",
-        "reflect": false
-      },
-      "email": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "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,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "client-id",
-        "reflect": false
-      },
-      "accountId": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "account-id",
-        "reflect": false
-      },
-      "submitButtonText": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "submit-button-text",
-        "reflect": false
-      }
-    };
-  }
-  static get states() {
-    return {
-      "submitButtonEnabled": {},
-      "hasLoadedFonts": {},
-      "isLoading": {},
-      "selectedPaymentMethodType": {},
-      "allowedPaymentMethodTypes": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "submitted",
-        "name": "submitted",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "CreatePaymentMethodResponse",
-          "resolved": "BankAccountCreateResponse | CardCreateResponse | PaymentMethodErrorResponse",
-          "references": {
-            "CreatePaymentMethodResponse": {
-              "location": "import",
-              "path": "../payment-method-form/payment-method-responses",
-              "id": "src/components/payment-method-form/payment-method-responses.ts::CreatePaymentMethodResponse"
-            }
-          }
+        finally {
+            this.isLoading = false;
         }
-      }];
-  }
-  static get methods() {
-    return {
-      "fillBillingForm": {
-        "complexType": {
-          "signature": "(fields: BillingFormFields) => Promise<void>",
-          "parameters": [{
-              "tags": [],
-              "text": ""
-            }],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
+    }
+    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 => {
+                if (el) {
+                    this.paymentMethodFormRef = el;
+                }
+            } })), h("div", { class: "col-12" }, h("justifi-billing-form", { legend: "Billing Info", ref: el => {
+                if (el) {
+                    this.billingFormRef = el;
+                }
+            } })), h("slot", { name: 'insurance' }), h("div", { class: "col-12" }, h("button", { type: "submit", onClick: event => this.submit(event), disabled: !this.submitButtonEnabled || this.isLoading, class: `btn btn-primary jfi-submit-button${this.isLoading ? ' jfi-submit-button-loading' : ''}` }, this.isLoading ?
+            h("div", { class: "spinner-border spinner-border-sm", role: "status" }, h("span", { class: "visually-hidden" }, "Loading...")) :
+            this.submitButtonText || 'Submit')))));
+    }
+    static get is() { return "justifi-payment-form"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["payment-form.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["payment-form.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "bankAccount": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "bank-account",
+                "reflect": false
             },
-            "BillingFormFields": {
-              "location": "import",
-              "path": "../billing-form/billing-form-schema",
-              "id": "src/components/billing-form/billing-form-schema.ts::BillingFormFields"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "",
-          "tags": []
-        }
-      },
-      "enableSubmitButton": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
+            "card": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "card",
+                "reflect": false
+            },
+            "email": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "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,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "client-id",
+                "reflect": false
+            },
+            "accountId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "account-id",
+                "reflect": false
+            },
+            "submitButtonText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "submit-button-text",
+                "reflect": false
             }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "",
-          "tags": []
-        }
-      },
-      "loadFontsOnParent": {
-        "complexType": {
-          "signature": "() => Promise<any>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
+        };
+    }
+    static get states() {
+        return {
+            "submitButtonEnabled": {},
+            "hasLoadedFonts": {},
+            "isLoading": {},
+            "selectedPaymentMethodType": {},
+            "allowedPaymentMethodTypes": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "submitted",
+                "name": "submitted",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "CreatePaymentMethodResponse",
+                    "resolved": "BankAccountCreateResponse | CardCreateResponse | PaymentMethodErrorResponse",
+                    "references": {
+                        "CreatePaymentMethodResponse": {
+                            "location": "import",
+                            "path": "../payment-method-form/payment-method-responses",
+                            "id": "src/components/payment-method-form/payment-method-responses.ts::CreatePaymentMethodResponse"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "fillBillingForm": {
+                "complexType": {
+                    "signature": "(fields: BillingFormFields) => Promise<void>",
+                    "parameters": [{
+                            "name": "fields",
+                            "type": "BillingFormFields",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "BillingFormFields": {
+                            "location": "import",
+                            "path": "../billing-form/billing-form-schema",
+                            "id": "src/components/billing-form/billing-form-schema.ts::BillingFormFields"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "enableSubmitButton": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "loadFontsOnParent": {
+                "complexType": {
+                    "signature": "() => Promise<any>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<any>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
             }
-          },
-          "return": "Promise<any>"
-        },
-        "docs": {
-          "text": "",
-          "tags": []
-        }
-      }
-    };
-  }
-  static get listeners() {
-    return [{
-        "name": "paymentMethodSelected",
-        "method": "paymentMethodSelectedHandler",
-        "target": undefined,
-        "capture": false,
-        "passive": false
-      }];
-  }
+        };
+    }
+    static get listeners() {
+        return [{
+                "name": "paymentMethodSelected",
+                "method": "paymentMethodSelectedHandler",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
 }