@justifi/webcomponents 4.17.0 → 4.19.0

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

@@ -1,9 +1,10 @@
-import { h, Host } from "@stencil/core";
+import { h } from "@stencil/core";
 import { formatCurrency } from "../../utils/utils";
 import { config } from "../../../config";
 import { Checkout } from "../../api/Checkout";
 import { ComponentErrorSeverity } from "../../api/ComponentError";
 import { insuranceValues, insuranceValuesOn, validateInsuranceValues } from "../insurance/insurance-state";
+import { Button, StyledHost, Skeleton } from "../../ui-components";
 export class CheckoutCore {
     constructor() {
         this.completeCheckout = async (payment) => {
@@ -26,7 +27,6 @@ export class CheckoutCore {
             });
             this.renderState = 'error';
         };
-        this.loadingSpinner = (h("div", { class: "spinner-border spinner-border-sm", role: "status" }, h("span", { class: "visually-hidden" }, "Loading...")));
         this.iframeOrigin = config.iframeOrigin;
         this.authToken = undefined;
         this.getCheckout = undefined;
@@ -116,25 +116,25 @@ export class CheckoutCore {
     }
     get paymentType() {
         var _a, _b, _c, _d, _e;
-        return (h("section", null, h("div", { class: !this.isLoading && 'visually-hidden' }, h("justifi-skeleton", { variant: "rounded", height: "300px" })), h("div", { class: this.isLoading && 'visually-hidden' }, h("justifi-payment-method-options", { ref: (el) => (this.paymentMethodOptionsRef = el), "show-card": !this.disableCreditCard, "show-ach": !this.disableBankAccount, "show-bnpl": !this.disableBnpl, paymentMethodGroupId: (_a = this.checkout) === null || _a === void 0 ? void 0 : _a.payment_method_group_id, "show-saved-payment-methods": !this.disablePaymentMethodGroup, bnpl: (_b = this.checkout) === null || _b === void 0 ? void 0 : _b.bnpl, authToken: this.authToken, "account-id": (_c = this.checkout) === null || _c === void 0 ? void 0 : _c.account_id, savedPaymentMethods: ((_d = this.checkout) === null || _d === void 0 ? void 0 : _d.payment_methods) || [], paymentAmount: (_e = this.checkout) === null || _e === void 0 ? void 0 : _e.payment_amount, insuranceToggled: this.insuranceToggled }))));
+        return (h("section", null, h("div", { class: !this.isLoading && 'visually-hidden' }, h(Skeleton, { variant: "rounded", height: "300px" })), h("div", { class: this.isLoading && 'visually-hidden' }, h("justifi-payment-method-options", { ref: (el) => (this.paymentMethodOptionsRef = el), "show-card": !this.disableCreditCard, "show-ach": !this.disableBankAccount, "show-bnpl": !this.disableBnpl, paymentMethodGroupId: (_a = this.checkout) === null || _a === void 0 ? void 0 : _a.payment_method_group_id, "show-saved-payment-methods": !this.disablePaymentMethodGroup, bnpl: (_b = this.checkout) === null || _b === void 0 ? void 0 : _b.bnpl, authToken: this.authToken, "account-id": (_c = this.checkout) === null || _c === void 0 ? void 0 : _c.account_id, savedPaymentMethods: ((_d = this.checkout) === null || _d === void 0 ? void 0 : _d.payment_methods) || [], paymentAmount: (_e = this.checkout) === null || _e === void 0 ? void 0 : _e.payment_amount, insuranceToggled: this.insuranceToggled }))));
     }
     get summary() {
         var _a, _b;
-        return (h("section", null, h("div", { class: !this.isLoading && 'visually-hidden' }, h("justifi-skeleton", { height: "24px" })), h("div", { class: this.isLoading && 'visually-hidden' }, h("div", { class: "jfi-payment-description" }, (_a = this.checkout) === null || _a === void 0 ? void 0 : _a.payment_description), h("div", { class: "jfi-payment-total" }, h("span", { class: "jfi-payment-total-label" }, "Total"), "\u00A0", h("span", { class: "jfi-payment-total-amount" }, formatCurrency(+((_b = this.checkout) === null || _b === void 0 ? void 0 : _b.total_amount)))))));
+        return (h("section", null, h("div", { class: !this.isLoading && 'visually-hidden' }, h(Skeleton, { height: "24px" })), h("div", { class: this.isLoading && 'visually-hidden' }, h("div", { class: "jfi-payment-description" }, (_a = this.checkout) === null || _a === void 0 ? void 0 : _a.payment_description), h("div", { class: "jfi-payment-total" }, h("span", { class: "jfi-payment-total-label" }, "Total"), "\u00A0", h("span", { class: "jfi-payment-total-amount" }, formatCurrency(+((_b = this.checkout) === null || _b === void 0 ? void 0 : _b.total_amount)))))));
     }
     render() {
-        return (h(Host, { key: 'b4eca3c8ce6642cc307df9bf0954d8db13ec3791' }, h("div", { key: '652bb4e5b2b4ec189d293630d31a3c1d8f345a7e', class: "row gy-3 jfi-checkout-core" }, h("div", { key: '6bb0869d4632dd8937e5077dd84732f9091342d0', class: "col-12 mb-4" }, h("h2", { key: 'bd8d0d02f5a59ec9a5629808fea21dc3e922407a', class: "fs-5 fw-bold pb-3 jfi-header" }, "Summary"), this.summary), h("div", { key: '81b1c5e141fa49da91e257eb40243e27f2c55f50', class: "col-12" }, h("slot", { key: '438606a898983e51141c62e7fe7ab209eadfa2a2', name: "insurance" })), h("div", { key: '0932dbfb2f6c57aed73f56b3563c189e76b1aa69', class: "col-12" }, h("h2", { key: 'd96345a9941679990d0e379293eb960751ef4063', class: "fs-5 fw-bold pb-3 jfi-header" }, "Payment"), h("h3", { key: 'cfcb5db0857f670008d5f71f3fccd53b1d05c91d', class: "fs-6 fw-bold lh-lg" }, "Select payment type"), h("div", { key: 'f9f06327db4ec89b0db943de0e6d3c983d33ab55', class: "d-flex flex-column" }, this.paymentType)), h("div", { key: '18392f4a553848f123910bb10501821b550e0abe', class: "col-12" }, h("div", { key: '31f6e5b2267ab507021b285becdd2961035ffe53', class: "d-flex justify-content-end" }, h("button", { key: '4dc7c5af2ca0d3766a2e3371da9b241e3260a351', type: "submit", onClick: event => this.submit(event), disabled: this.isLoading, part: "pay-button", class: `btn btn-primary jfi-submit-button ${this.isLoading ? 'jfi-submit-button-loading' : ''}` }, this.isLoading ? this.loadingSpinner : 'Pay'))))));
+        return (h(StyledHost, { key: 'e322f280a57bb0baab61174bca21f0a7e9afa3c1' }, h("div", { key: '4ad8cc4f6243de8ddc03fb184ac4e960a04280eb', class: "row gy-3 jfi-checkout-core" }, h("div", { key: '7f13e26b36790558c8eb455f4d5ab3d0952b4e62', class: "col-12" }, h("h2", { key: 'c5e4b6fc30f51821537915f3ce5d4830ed3f8da9', class: "fs-5 fw-bold pb-3 jfi-header" }, "Summary"), this.summary), h("div", { key: '164b7a2cc51d871ad4a92044d0f7240e376bd4b3', class: "col-12" }, h("slot", { key: 'a98b7c6a0bb9e4d1b102e832ee7aa43218432298', name: "insurance" })), h("div", { key: '415d3aac64b4190f54d785695c50a92ce02a76c2', class: "col-12 mt-4" }, h("h2", { key: '6d7f0df1165ec359877459a8bada855ef353c3b3', class: "fs-5 fw-bold pb-3 jfi-header" }, "Payment"), h("h3", { key: 'be8495d792cf065d2cbc7d3b46648c887951e313', class: "fs-6 fw-bold lh-lg" }, "Select payment type"), h("div", { key: '5c9d8baffb50b0b10e9911463f307581cad7619c', class: "d-flex flex-column" }, this.paymentType)), h("div", { key: '9351832b69a8e5285cae35534299b51193248719', class: "col-12" }, h("div", { key: '5b0e382836c858369caf93a287272922024ce72b', class: "d-flex justify-content-end" }, h(Button, { key: 'f76d37000f7b026e97f083e7cf817bed8f84f34f', type: "submit", variant: "primary", onClick: (e) => this.submit(e), disabled: this.isLoading, isLoading: this.isLoading, style: { width: '100%' } }, "Pay"))))));
     }
     static get is() { return "justifi-checkout-core"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
-            "$": ["checkout-core.scss"]
+            "$": ["checkout-core.css", "header.css"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["checkout-core.css"]
+            "$": ["checkout-core.css", "header.css"]
         };
     }
     static get properties() {

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

@@ -51,11 +51,11 @@ export class Checkout {
         this.checkoutCoreRef.fillBillingForm(fields);
     }
     render() {
-        return (h("justifi-checkout-core", { key: '5dd0269c6fd04bff259204e80800803e618ffa83', getCheckout: this.getCheckout, authToken: this.authToken, complete: this.complete, disableCreditCard: this.disableCreditCard, disableBankAccount: this.disableBankAccount, disableBnpl: this.disableBnpl, disablePaymentMethodGroup: this.disablePaymentMethodGroup, ref: el => {
+        return (h("justifi-checkout-core", { key: 'd2f6bfed1be767edcf4ba21cddc503ff5efbec1a', getCheckout: this.getCheckout, authToken: this.authToken, complete: this.complete, disableCreditCard: this.disableCreditCard, disableBankAccount: this.disableBankAccount, disableBnpl: this.disableBnpl, disablePaymentMethodGroup: this.disablePaymentMethodGroup, ref: el => {
                 if (el) {
                     this.checkoutCoreRef = el;
                 }
-            } }, h("div", { key: 'a659fc258e90c32b4b16ea1d92492c0e16f830a3', slot: "insurance" }, h("slot", { key: 'c92ba9f86f72b372cafabbdd7aba92cee0af44f7', name: "insurance" }))));
+            } }, h("div", { key: '45ac1bea74ca8ef7999211b51fe7791225d61f00', slot: "insurance" }, h("slot", { key: '13e051844cc7cb4aed98076ccd64954b2dd68228', name: "insurance" }))));
     }
     static get is() { return "justifi-checkout"; }
     static get properties() {

package/dist/collection/components/checkout/form-check-input.css

@@ -0,0 +1,20 @@
+.form-check-input,
+label {
+  cursor: pointer;
+}
+
+.form-check-input {
+  background-color: var(--jfi-radio-button-background-color);
+  border-color: var(--jfi-radio-button-border-color);
+}
+
+.form-check-input:checked,
+.form-check-input:checked:focus {
+  background-color: var(--jfi-radio-button-background-color-selected);
+  border-color: var(--jfi-radio-button-border-color-selected);
+}
+
+.form-check-input:focus {
+  border-color: var(--jfi-radio-button-border-color-focus);
+  box-shadow: var(--jfi-radio-button-box-shadow-focus);
+}

package/dist/collection/components/checkout/header.css

@@ -0,0 +1,4 @@
+.jfi-header {
+  color: var(--jfi-header-color);
+  border-bottom: var(--jfi-header-border);
+}

package/dist/collection/components/checkout/new-payment-method.js

@@ -69,7 +69,7 @@ export class NewPaymentMethod {
     }
     render() {
         var _a, _b, _c, _d;
-        return (h("div", { key: '7a9d21ea2d343fbbf56de456bb0275f25e7538a1', class: "payment-method" }, h("div", { key: '84ed7ef64a6cc1d6936b182fd4139e8dceb497ec', class: `payment-method-header p-3`, onClick: () => this.onPaymentMethodOptionClick() }, h("input", { key: '9dd41da85d45145f6054a28e216c530dd6a140e8', type: "radio", name: "paymentMethodType", id: (_a = this.paymentMethodOption) === null || _a === void 0 ? void 0 : _a.id, value: (_b = this.paymentMethodOption) === null || _b === void 0 ? void 0 : _b.id, onClick: (event) => event.preventDefault(), checked: this.isSelected, class: "form-check-input me-2" }), h("label", { key: '7e1a273a1ca12f07c9b4ee8a5c6eebcf713362e8', htmlFor: (_c = this.paymentMethodOption) === null || _c === void 0 ? void 0 : _c.id, class: "form-check-label" }, PaymentMethodTypeLabels[(_d = this.paymentMethodOption) === null || _d === void 0 ? void 0 : _d.id])), this.isSelected ? this.showNewPaymentMethodForm() : null));
+        return (h("div", { key: '93c3e6d38d1e18be54006bf82cd6c8148df3518d', class: "payment-method" }, h("div", { key: '6dbb687fbd3e33a6095be7c39ec0974bcc4809b8', class: `payment-method-header p-3`, onClick: () => this.onPaymentMethodOptionClick() }, h("input", { key: '6c5be962cf5d357211c6716b53d0d8dd3fcf0bb0', type: "radio", name: "paymentMethodType", id: (_a = this.paymentMethodOption) === null || _a === void 0 ? void 0 : _a.id, value: (_b = this.paymentMethodOption) === null || _b === void 0 ? void 0 : _b.id, onClick: (event) => event.preventDefault(), checked: this.isSelected, class: "form-check-input me-2" }), h("label", { key: '796868afd192703a81d94897872dd9c0504cbc1e', htmlFor: (_c = this.paymentMethodOption) === null || _c === void 0 ? void 0 : _c.id, class: "form-check-label" }, PaymentMethodTypeLabels[(_d = this.paymentMethodOption) === null || _d === void 0 ? void 0 : _d.id])), this.isSelected ? this.showNewPaymentMethodForm() : null));
     }
     static get is() { return "justifi-new-payment-method"; }
     static get properties() {
@@ -136,7 +136,7 @@ export class NewPaymentMethod {
                         "PaymentMethodOption": {
                             "location": "import",
                             "path": "./payment-method-option-utils",
-                            "id": "src/components/checkout/payment-method-option-utils.tsx::PaymentMethodOption"
+                            "id": "src/components/checkout/payment-method-option-utils.ts::PaymentMethodOption"
                         }
                     }
                 },