@justifi/webcomponents 4.14.0 → 4.15.0

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

@@ -7,6 +7,10 @@ export class Checkout {
         this.iframeOrigin = undefined;
         this.authToken = undefined;
         this.checkoutId = undefined;
+        this.disableCreditCard = undefined;
+        this.disableBankAccount = undefined;
+        this.disableBnpl = undefined;
+        this.disablePaymentMethodGroup = undefined;
         this.getCheckout = undefined;
         this.complete = undefined;
         this.errorMessage = '';
@@ -39,7 +43,7 @@ export class Checkout {
         this.initializeGetCheckout();
     }
     render() {
-        return (h("justifi-checkout-core", { getCheckout: this.getCheckout, complete: this.complete }));
+        return (h("justifi-checkout-core", { getCheckout: this.getCheckout, complete: this.complete, disableCreditCard: this.disableCreditCard, disableBankAccount: this.disableBankAccount, disableBnpl: this.disableBnpl, disablePaymentMethodGroup: this.disablePaymentMethodGroup }));
     }
     static get is() { return "justifi-checkout"; }
     static get properties() {
@@ -94,6 +98,74 @@ export class Checkout {
                 },
                 "attribute": "checkout-id",
                 "reflect": false
+            },
+            "disableCreditCard": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "disable-credit-card",
+                "reflect": false
+            },
+            "disableBankAccount": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "disable-bank-account",
+                "reflect": false
+            },
+            "disableBnpl": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "disable-bnpl",
+                "reflect": false
+            },
+            "disablePaymentMethodGroup": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "disable-payment-method-group",
+                "reflect": false
             }
         };
     }

package/dist/collection/components/checkout/payment-method-options.css

@@ -7072,16 +7072,16 @@ textarea.form-control-lg {
   cursor: pointer;
 }
 .payment-method-header input[type=radio] {
-  background-color: var(--jfi-radio-button-background-color);
-  border-color: var(--jfi-radio-button-border-color);
+  background-color: var(--jfi-radio-input-background-color);
+  border-color: var(--jfi-radio-input-border-color);
 }
 .payment-method-header input[type=radio]:checked, .payment-method-header input[type=radio]:checked:focus {
-  background-color: var(--jfi-radio-button-background-color-selected);
-  border-color: var(--jfi-radio-button-border-color-selected);
+  background-color: var(--jfi-radio-input-background-color-selected);
+  border-color: var(--jfi-radio-input-border-color-selected);
 }
 .payment-method-header input[type=radio]:focus {
-  border-color: var(--jfi-radio-button-border-color-focus);
-  box-shadow: var(--jfi-radio-button-box-shadow-focus);
+  border-color: var(--jfi-radio-input-border-color-focus);
+  box-shadow: var(--jfi-radio-input-box-shadow-focus);
 }
 .payment-method-header:hover {
   color: var(--jfi-radio-button-group-color-hover);

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

@@ -6,6 +6,8 @@ export class PaymentMethodOptions {
     constructor() {
         this.showCard = undefined;
         this.showAch = undefined;
+        this.showBnpl = undefined;
+        this.showSavedPaymentMethods = undefined;
         this.bnpl = undefined;
         this.clientId = undefined;
         this.accountId = undefined;
@@ -24,8 +26,8 @@ export class PaymentMethodOptions {
         if (this.showAch) {
             this.paymentMethodOptions.push(new PaymentMethodOption({ id: PaymentMethodTypes.bankAccount }));
         }
-        if (((_a = this.bnpl) === null || _a === void 0 ? void 0 : _a.provider) === 'sezzle') {
-            this.paymentMethodOptions.push(new PaymentMethodOption({ id: PaymentMethodTypes.sezzel }));
+        if (this.showBnpl && ((_a = this.bnpl) === null || _a === void 0 ? void 0 : _a.provider) === 'sezzle') {
+            this.paymentMethodOptions.push(new PaymentMethodOption({ id: PaymentMethodTypes.sezzle }));
         }
         this.selectedPaymentMethodId = this.paymentMethodOptions[0].id;
     }
@@ -42,7 +44,7 @@ export class PaymentMethodOptions {
             const newCard = paymentMethodOption.id === PaymentMethodTypes.card;
             const newBankAccount = paymentMethodOption.id === PaymentMethodTypes.bankAccount;
             const isSelected = this.selectedPaymentMethodId === paymentMethodOption.id;
-            const sezzel = paymentMethodOption.id === PaymentMethodTypes.sezzel;
+            const sezzle = paymentMethodOption.id === PaymentMethodTypes.sezzle;
             if (newCard || newBankAccount) {
                 return (h("justifi-new-payment-method", { paymentMethodOption: paymentMethodOption, "client-id": this.clientId, "account-id": this.accountId, "is-selected": isSelected, ref: (el) => {
                         if (isSelected) {
@@ -50,14 +52,14 @@ export class PaymentMethodOptions {
                         }
                     } }));
             }
-            else if (sezzel) {
-                return (h("justifi-sezzel-payment-method", { paymentMethodOption: paymentMethodOption, "is-selected": isSelected, paymentAmount: this.paymentAmount, bnpl: this.bnpl, ref: (el) => {
+            else if (sezzle) {
+                return (h("justifi-sezzle-payment-method", { paymentMethodOption: paymentMethodOption, "is-selected": isSelected, paymentAmount: this.paymentAmount, bnpl: this.bnpl, ref: (el) => {
                         if (isSelected) {
                             this.selectedPaymentMethodOptionRef = el;
                         }
                     } }));
             }
-            else {
+            else if (this.showSavedPaymentMethods) {
                 return (h("justifi-saved-payment-method", { paymentMethodOption: paymentMethodOption, "is-selected": isSelected, ref: (el) => {
                         if (isSelected) {
                             this.selectedPaymentMethodOptionRef = el;
@@ -113,6 +115,40 @@ export class PaymentMethodOptions {
                 "attribute": "show-ach",
                 "reflect": false
             },
+            "showBnpl": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "show-bnpl",
+                "reflect": false
+            },
+            "showSavedPaymentMethods": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "show-saved-payment-methods",
+                "reflect": false
+            },
             "bnpl": {
                 "type": "unknown",
                 "mutable": false,

package/dist/collection/components/checkout/{sezzel-payment-method.js → sezzle-payment-method.js}

@@ -7,7 +7,7 @@ const sezzleLogo = (h("img", { class: "sezzle-smart-button-logo-img", src: "http
         marginLeft: '5px',
         marginTop: '-5px',
     } }));
-export class SezzelPaymentMethod {
+export class SezzlePaymentMethod {
     constructor() {
         this.onPaymentMethodOptionClick = () => {
             this.paymentMethodOptionSelected.emit(this.paymentMethodOption);
@@ -64,7 +64,7 @@ export class SezzelPaymentMethod {
         var _a, _b, _c, _d, _e;
         return (h("div", { class: "payment-method" }, h("script", { src: "https://checkout-sdk.sezzle.com/checkout.min.js", async: true, ref: (el) => (this.scriptRef = el) }), h("div", { class: `payment-method-header p-3`, onClick: () => this.onPaymentMethodOptionClick() }, h("input", { 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", { htmlFor: (_c = this.paymentMethodOption) === null || _c === void 0 ? void 0 : _c.id, class: "form-check-label" }, h("div", null, "Buy now, pay later with ", sezzleLogo), this.installmentPlan && (h("small", null, h("span", null, (_d = this.installmentPlan) === null || _d === void 0 ? void 0 : _d.installments.length), "\u00A0", h("span", null, this.installmentPlan.schedule, " payments of"), "\u00A0", h("span", { class: "fw-bold" }, formatCurrency((_e = this.installmentPlan) === null || _e === void 0 ? void 0 : _e.installments[0].amountInCents))))))));
     }
-    static get is() { return "justifi-sezzel-payment-method"; }
+    static get is() { return "justifi-sezzle-payment-method"; }
     static get properties() {
         return {
             "iframeOrigin": {

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

@@ -8,7 +8,7 @@ import mockGetCheckoutSuccess from "./../../../../../../mockData/mockGetCheckout
 import mockPostCheckoutSuccess from "./../../../../../../mockData/mockPostCheckoutSuccess.json";
 import { PaymentMethodOptions } from "../payment-method-options";
 describe('justifi-checkout-core', () => {
-    it('should display loading state correclty', async () => {
+    it('should display loading state correctly', async () => {
         const page = await newSpecPage({
             components: [CheckoutCore],
             template: () => h("justifi-checkout-core", null),

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

@@ -7,7 +7,7 @@ import { getErrorMessage } from "../../api/services/utils";
 export class PaymentForm {
     constructor() {
         this.bankAccount = undefined;
-        this.card = true;
+        this.card = undefined;
         this.email = undefined;
         this.clientId = undefined;
         this.authToken = undefined;
@@ -158,8 +158,7 @@ export class PaymentForm {
                     "text": ""
                 },
                 "attribute": "card",
-                "reflect": false,
-                "defaultValue": "true"
+                "reflect": false
             },
             "email": {
                 "type": "string",

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

@@ -34,7 +34,7 @@ export class PaymentMethodSelector {
                 "mutable": false,
                 "complexType": {
                     "original": "PaymentMethodTypes",
-                    "resolved": "PaymentMethodTypes.bankAccount | PaymentMethodTypes.card | PaymentMethodTypes.sezzel",
+                    "resolved": "PaymentMethodTypes.bankAccount | PaymentMethodTypes.card | PaymentMethodTypes.saved | PaymentMethodTypes.sezzle",
                     "references": {
                         "PaymentMethodTypes": {
                             "location": "import",

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

@@ -47,7 +47,7 @@ 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', true);
+        expect(paymentForm).toHaveProperty('card', undefined);
         expect(paymentForm).toHaveProperty('email', undefined);
         expect(paymentForm).toHaveProperty('clientId', undefined);
         expect(paymentForm).toHaveProperty('accountId', undefined);

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

@@ -98,7 +98,7 @@ export class PaymentMethodForm {
                 "mutable": false,
                 "complexType": {
                     "original": "PaymentMethodTypes",
-                    "resolved": "PaymentMethodTypes.bankAccount | PaymentMethodTypes.card | PaymentMethodTypes.sezzel",
+                    "resolved": "PaymentMethodTypes.bankAccount | PaymentMethodTypes.card | PaymentMethodTypes.saved | PaymentMethodTypes.sezzle",
                     "references": {
                         "PaymentMethodTypes": {
                             "location": "import",