@justifi/webcomponents 6.0.0-rc.1 → 6.0.0-rc.2

package/dist/collection/components/dispute-management/dispute-response/refund-policy.js

@@ -28,7 +28,7 @@ export class RefundPolicy {
     }
     render() {
         var _a, _b, _c, _d;
-        return (h("div", { key: '75d1e4a99166f8b8f112746fd5a786ed4b41b6ae' }, h("div", { key: 'c4a137ad32f0a0e5580061b1cc2443399d5baf15', class: "row gy-3" }, h("div", { key: '8b864aacd4b1334f9a5e7ffdf116345db20aac58', class: "col-12" }, h("h2", { key: 'e319c7e0d2ebedf204e6845fb977651b96f4a9b8', class: "h5", part: heading5 }, "Refund Policy and Receipt")), h("div", { key: '72cc1aff194c70395f8002b4af6842cd42046d80', class: "col-12" }, h("form-control-textarea", { key: '798219393da9f68198205bb877a5a3aa2ac2d1bb', label: "Refund Policy Disclosure", name: "refund_policy_disclosure", defaultValue: (_a = this.disputeResponse) === null || _a === void 0 ? void 0 : _a.refund_policy_disclosure, inputHandler: this.inputHandler })), h("div", { key: 'bc0d341abb63327da6d97fba120c34aebabd50b3', class: "col-12" }, h("form-control-textarea", { key: '2aa931300951be7897d9ba4adeda6be5e94a00d8', label: "Refund Refusal Explanation", name: "refund_refusal_explanation", defaultValue: (_b = this.disputeResponse) === null || _b === void 0 ? void 0 : _b.refund_refusal_explanation, inputHandler: this.inputHandler })), h("div", { key: 'c3cad588c5b40a6133920a0c43f71d7b172abdab', class: "col-12" }, h("form-control-file-v2", { key: '8f2184a0d95804a85d61de763c14b1a6fb44c566', label: "Upload Refund Policy", name: "refund_policy", onChange: (e) => fileInputHandler(e, this.documents), errorText: (_c = this.documentErrors) === null || _c === void 0 ? void 0 : _c.refund_policy })), h("div", { key: '183f6286e96694e54fd31213b514349a43d0446f', class: "col-12" }, h("form-control-file-v2", { key: 'e3f97404946c8e6a813d397141d10e372df5f520', label: "Upload Receipt", name: "receipt", onChange: (e) => fileInputHandler(e, this.documents), errorText: (_d = this.documentErrors) === null || _d === void 0 ? void 0 : _d.receipt })))));
+        return (h("div", { key: '839a9b7ea7f978987e44f643af2d2aa8ac9557ff' }, h("div", { key: '410211fe20a2e9ab23ec1e3f172b200afb2db8ae', class: "row gy-3" }, h("div", { key: '9e6121b760cf47feaeffdc231780490ce47342f7', class: "col-12" }, h("h2", { key: 'fe64c8a2be67d179ddc4157c4fa8876937c2e4b8', class: "h5", part: heading5 }, "Refund Policy and Receipt")), h("div", { key: 'db91b2f1c102026cc6998f9f8163761d1bf85024', class: "col-12" }, h("form-control-textarea", { key: '199cd5d32ff726681a918ced7f1790bd292e0cf7', label: "Refund Policy Disclosure", name: "refund_policy_disclosure", defaultValue: (_a = this.disputeResponse) === null || _a === void 0 ? void 0 : _a.refund_policy_disclosure, inputHandler: this.inputHandler })), h("div", { key: 'e48e83b580182698374627889cf0cff69dd3779f', class: "col-12" }, h("form-control-textarea", { key: '627faade4d3afaad7d700494652d559ede4f69af', label: "Refund Refusal Explanation", name: "refund_refusal_explanation", defaultValue: (_b = this.disputeResponse) === null || _b === void 0 ? void 0 : _b.refund_refusal_explanation, inputHandler: this.inputHandler })), h("div", { key: 'bdfca2b3878de2a665961fd6cd4fc10833f385bc', class: "col-12" }, h("form-control-file-v2", { key: 'a8d0d09bf0d8298ba85ead4b643d5ea774336ba0', label: "Upload Refund Policy", name: "refund_policy", onChange: (e) => fileInputHandler(e, this.documents), errorText: (_c = this.documentErrors) === null || _c === void 0 ? void 0 : _c.refund_policy })), h("div", { key: '41f43575895d15f34bfa2f6095462068cd6ad5d6', class: "col-12" }, h("form-control-file-v2", { key: 'aceae6c113bc38019bc20125eb3e8be0d111c15f', label: "Upload Receipt", name: "receipt", onChange: (e) => fileInputHandler(e, this.documents), errorText: (_d = this.documentErrors) === null || _d === void 0 ? void 0 : _d.receipt })))));
     }
     static get is() { return "justifi-refund-policy"; }
     static get properties() {

package/dist/collection/components/dispute-management/dispute-response/shipping-details.js

@@ -29,7 +29,7 @@ export class ShippingDetails {
     }
     render() {
         var _a, _b, _c, _d, _e;
-        return (h("div", { key: 'a0907d5f1fe8d40876f816b6d332dbb0d9afe975' }, h("div", { key: '3f22d56b30227d9ce0d22dc45c4e29bba60b5366', class: "row gy-3" }, h("div", { key: 'ec768dcf266527e981712f55cdb1921d0e6ef257', class: "col-12" }, h("h2", { key: '0b0e92ba9164941f48e1162937d7bd694683b206', class: "h5", part: heading5 }, "Shipping Details")), h("div", { key: '2a5f5508c7f8b1a3a674d4bd18a2cba725ff86e7', class: "col-12" }, h("form-control-text", { key: 'deb04aa47dee3269ad8ad84b59edfdf251207520', label: "Shipping Carrier Name", name: "shipping_carrier", defaultValue: (_a = this.disputeResponse) === null || _a === void 0 ? void 0 : _a.shipping_carrier, inputHandler: this.inputHandler, errorText: this.errors.shipping_carrier })), h("div", { key: 'e340cf8f480c335b7e565e7d4bf052685bc3f78f', class: "col-12" }, h("form-control-text", { key: '8e3d040776e821518c0d04ea8d0da2d0ddb75cd3', label: "Tracking Number", name: "shipping_tracking_number", defaultValue: (_b = this.disputeResponse) === null || _b === void 0 ? void 0 : _b.shipping_tracking_number, inputHandler: this.inputHandler, errorText: this.errors.shipping_tracking_number })), h("div", { key: '71dab91e7befe734db1b8f02bb3fd8d1b8180ab8', class: "col-12" }, h("form-control-date", { key: 'f257e98c81762700c7164a8cbd86764ebe4e4353', label: "Date Shipped", name: "shipping_date", defaultValue: (_c = this.disputeResponse) === null || _c === void 0 ? void 0 : _c.shipping_date, inputHandler: this.inputHandler, errorText: this.errors.shipping_date })), h("div", { key: 'e69255a96e9292fea2269f7f0a7888e53e5a8be7', class: "col-12" }, h("form-control-textarea", { key: 'b40386270d12484982d81a85db0e95853f76ec58', label: "Shipping Address", name: "shipping_address", defaultValue: (_d = this.disputeResponse) === null || _d === void 0 ? void 0 : _d.shipping_address, inputHandler: this.inputHandler, errorText: this.errors.shipping_address })), h("div", { key: '23f2a4dabdaefef86940ae03e00a5d240d061a2f', class: "col-12" }, h("form-control-file-v2", { key: '6db6eb9ed1803d7c25f2b9dd03955be7e9c41a34', label: "Shipping Documentation", name: "shipping_documentation", onChange: (e) => fileInputHandler(e, this.documents), errorText: (_e = this.documentErrors) === null || _e === void 0 ? void 0 : _e.shipping_documentation })))));
+        return (h("div", { key: '9e142fde27da140959115d1acf4a64d7420f90ba' }, h("div", { key: 'bf322d6ec351e67bd4f3fdfec759e1f5c5d381a6', class: "row gy-3" }, h("div", { key: '165a55dc932d0110728c87726231d0cb4b962650', class: "col-12" }, h("h2", { key: '43f318effe869349595025a76ced5ea39093a0ef', class: "h5", part: heading5 }, "Shipping Details")), h("div", { key: '1de38ece17aa8b93cfc00858a4d495a950d46239', class: "col-12" }, h("form-control-text", { key: 'd9cfd173732a42abf831ee632ca05d3db78b7135', label: "Shipping Carrier Name", name: "shipping_carrier", defaultValue: (_a = this.disputeResponse) === null || _a === void 0 ? void 0 : _a.shipping_carrier, inputHandler: this.inputHandler, errorText: this.errors.shipping_carrier })), h("div", { key: '5b298a18d97e06904c22c9a918c6f9ebc25f8219', class: "col-12" }, h("form-control-text", { key: 'c164c2bfc1772498f3e21c51e2979479021cf86d', label: "Tracking Number", name: "shipping_tracking_number", defaultValue: (_b = this.disputeResponse) === null || _b === void 0 ? void 0 : _b.shipping_tracking_number, inputHandler: this.inputHandler, errorText: this.errors.shipping_tracking_number })), h("div", { key: '82128f9527e8061ecf2897af65d908af03c46bbe', class: "col-12" }, h("form-control-date", { key: '13e602a61a85978f129890423a36a95a8b055258', label: "Date Shipped", name: "shipping_date", defaultValue: (_c = this.disputeResponse) === null || _c === void 0 ? void 0 : _c.shipping_date, inputHandler: this.inputHandler, errorText: this.errors.shipping_date })), h("div", { key: '5591510c56724f58567c88792cbbeb3cd15e1d0e', class: "col-12" }, h("form-control-textarea", { key: '1e7cbc326345feebd0ffae9b6ec56bfbc36a8193', label: "Shipping Address", name: "shipping_address", defaultValue: (_d = this.disputeResponse) === null || _d === void 0 ? void 0 : _d.shipping_address, inputHandler: this.inputHandler, errorText: this.errors.shipping_address })), h("div", { key: 'd2d1026fd1c7c3b32a6988fb940c431948630b08', class: "col-12" }, h("form-control-file-v2", { key: '21abf54f6a64980c73200ae89130626316917aa7', label: "Shipping Documentation", name: "shipping_documentation", onChange: (e) => fileInputHandler(e, this.documents), errorText: (_e = this.documentErrors) === null || _e === void 0 ? void 0 : _e.shipping_documentation })))));
     }
     static get is() { return "justifi-shipping-details"; }
     static get properties() {

package/dist/collection/components/filters/table-filters-menu.js

@@ -19,7 +19,7 @@ export class TableFiltersMenu {
         this.showClearButton = hasFilters(this.params);
     }
     render() {
-        return (h("div", { key: 'b270a6f9e52e45e958bb02e31569d4f56135ee25', class: "d-flex gap-2" }, h("div", { key: '76d9eef0672c27ec28a95bc062f946739a2c5dc7', class: "dropdown pb-3" }, h("button", { key: '3de6afb2c92bde835ae894e7548b3e07b86fb0bf', type: "button dropdown-toggle", ref: (el) => (this.anchorButton = el), class: "btn btn-primary dropdown-toggle", part: dropdownMenuButton, "data-test-id": "open-filters-button", "data-bs-toggle": "dropdown" }, "Filters"), h("custom-popper", { key: 'de744460fb721b5949ca0cfcf6a751e4b6a008d0', offset: [20, 10], strategy: "fixed", anchorRef: this.anchorButton, trigger: "click" }, h("form", { key: 'c8b6d3e8e28b90fb3dedd80e71c7a8a0f30b6a8f', class: "dropdown-menu", part: dropdownMenu, "data-test-id": "filter-menu", ref: (el) => (this.menu = el), onSubmit: (e) => e.preventDefault() }, h("slot", { key: '44e50fab6d4f6c7a76f90659cced1c61e94ec43d' })))), h("div", { key: 'b5ec37cc1f28005c2b87b14bd10b74e619012ce5' }, h(Button, { key: '5bae9de44fcdb6e015ac3311945bdcee1887e827', variant: "secondary", onClick: () => this.clearParams(), hidden: !this.showClearButton, "data-test-id": "clear-filters-button" }, "Clear Filters"))));
+        return (h("div", { key: 'e205ff268a099beae125bbe8a85a6ae5e34924af', class: "d-flex gap-2" }, h("div", { key: 'e61fcbc31cfa97093771ad99b1f4bc088a2a6b98', class: "dropdown pb-3" }, h("button", { key: '3c4425f10ebb39b011d2783c5ef88ebbd34b8e65', type: "button dropdown-toggle", ref: (el) => (this.anchorButton = el), class: "btn btn-primary dropdown-toggle", part: dropdownMenuButton, "data-test-id": "open-filters-button", "data-bs-toggle": "dropdown" }, "Filters"), h("custom-popper", { key: '03692eaae9d340c0f204f55e8c26b8353c4caa74', offset: [20, 10], strategy: "fixed", anchorRef: this.anchorButton, trigger: "click" }, h("form", { key: 'ed80b52e0cabbba44d09798b3b8bd4ab99d72659', class: "dropdown-menu", part: dropdownMenu, "data-test-id": "filter-menu", ref: (el) => (this.menu = el), onSubmit: (e) => e.preventDefault() }, h("slot", { key: '6cc0bf4f7fd5fa16b431b21933b36f75035221c7' })))), h("div", { key: '13f401ce7926aaf678021ed7dc768b967987b0ec' }, h(Button, { key: 'd6a16f4e5b31e5602d6729e39fccfa4dbfdd8336', variant: "secondary", onClick: () => this.clearParams(), hidden: !this.showClearButton, "data-test-id": "clear-filters-button" }, "Clear Filters"))));
     }
     static get is() { return "table-filters-menu"; }
     static get properties() {

package/dist/collection/components/gross-payment-chart/gross-payment-chart-core.js

@@ -67,7 +67,7 @@ export class GrossPaymentChartCore {
         }
     }
     render() {
-        return (h(Host, { key: '14360f11f9b118e347ee73739f03c3631fbef1a4' }, this.loading && h(Spinner, { key: 'a5190472afdbf507c6c36c8aaae1473bffc80dcf' }), !this.errorMessage ? h("canvas", { id: "chart", ref: (elem) => this.chartRef = elem }) : ErrorState(this.errorMessage)));
+        return (h(Host, { key: '0201a1f9445d3eb9800aca09098b5b58a24b6923' }, this.loading && h(Spinner, { key: 'c6e39699e3bfaf3d7d0f5907d7085604e1fe5b9d' }), !this.errorMessage ? h("canvas", { id: "chart", ref: (elem) => this.chartRef = elem }) : ErrorState(this.errorMessage)));
     }
     static get is() { return "gross-payment-chart-core"; }
     static get properties() {

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

@@ -9,6 +9,36 @@ import { insuranceValues, insuranceValuesOn, hasInsuranceValueChanged } from "..
 export class ModularCheckout {
     constructor() {
         this.savePaymentMethod = false;
+        this.handleApplePayCompleted = (event) => {
+            const { success, token, error } = event.detail;
+            if (success && token) {
+                this.applePayToken = token;
+                // Complete the checkout with Apple Pay token
+                this.submitCheckoutWithApplePay();
+            }
+            else {
+                console.error('Apple Pay completed but failed:', error);
+                this.errorEvent.emit({
+                    message: (error === null || error === void 0 ? void 0 : error.message) || 'Apple Pay payment failed',
+                    errorCode: ComponentErrorCodes.TOKENIZE_ERROR,
+                    severity: ComponentErrorSeverity.ERROR,
+                });
+            }
+        };
+        this.handleApplePayError = (event) => {
+            const { error } = event.detail;
+            console.error('Apple Pay error:', error);
+            this.errorEvent.emit({
+                message: error || 'Apple Pay error occurred',
+                errorCode: ComponentErrorCodes.TOKENIZE_ERROR,
+                severity: ComponentErrorSeverity.ERROR,
+            });
+        };
+        this.handleApplePayCancelled = () => {
+            console.log('Apple Pay cancelled by user');
+            // Reset the token if cancelled
+            this.applePayToken = undefined;
+        };
     }
     savePaymentMethodChanged(newValue) {
         checkoutStore.savePaymentMethod = newValue;
@@ -16,6 +46,7 @@ export class ModularCheckout {
     connectedCallback() {
         this.observer = new MutationObserver(() => {
             this.queryFormRefs();
+            this.setupApplePayListeners(); // set up again listeners when DOM changes
         });
         this.observer.observe(this.hostEl, {
             childList: true,
@@ -57,10 +88,12 @@ export class ModularCheckout {
     }
     componentDidLoad() {
         this.queryFormRefs();
+        this.setupApplePayListeners();
     }
     disconnectedCallback() {
         var _a;
         (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.removeApplePayListeners();
     }
     fetchCheckout() {
         if (this.getCheckout) {
@@ -113,6 +146,51 @@ export class ModularCheckout {
         this.billingFormRef = this.hostEl.querySelector('justifi-billing-form, justifi-bank-account-billing-form-simple, justifi-card-billing-form-simple, justifi-billing-form-full');
         this.insuranceFormRef = this.hostEl.querySelector('justifi-season-interruption-insurance');
         this.sezzlePaymentMethodRef = this.hostEl.querySelector('justifi-sezzle-payment-method');
+        this.applePayRef = this.hostEl.querySelector('justifi-apple-pay');
+    }
+    setupApplePayListeners() {
+        if (this.applePayRef) {
+            this.applePayRef.addEventListener('applePayCompleted', this.handleApplePayCompleted);
+            this.applePayRef.addEventListener('applePayError', this.handleApplePayError);
+            this.applePayRef.addEventListener('applePayCancelled', this.handleApplePayCancelled);
+        }
+    }
+    removeApplePayListeners() {
+        if (this.applePayRef) {
+            this.applePayRef.removeEventListener('applePayCompleted', this.handleApplePayCompleted);
+            this.applePayRef.removeEventListener('applePayError', this.handleApplePayError);
+            this.applePayRef.removeEventListener('applePayCancelled', this.handleApplePayCancelled);
+        }
+    }
+    async submitCheckoutWithApplePay() {
+        if (!this.applePayToken) {
+            this.errorEvent.emit({
+                message: 'No Apple Pay token available',
+                errorCode: ComponentErrorCodes.TOKENIZE_ERROR,
+                severity: ComponentErrorSeverity.ERROR,
+            });
+            return;
+        }
+        const payment = {
+            payment_mode: 'apple_pay',
+            payment_token: this.applePayToken,
+        };
+        this.completeCheckout({
+            payment,
+            onSuccess: ({ checkout }) => {
+                this.submitEvent.emit({
+                    checkout,
+                    message: 'Apple Pay checkout completed successfully',
+                });
+            },
+            onError: (error) => {
+                this.errorEvent.emit({
+                    message: error.message,
+                    errorCode: ComponentErrorCodes.COMPLETE_CHECKOUT_ERROR,
+                    severity: ComponentErrorSeverity.ERROR,
+                });
+            },
+        });
     }
     async tokenizePaymentMethod(tokenizeArgs) {
         var _a, _b, _c;
@@ -129,6 +207,10 @@ export class ModularCheckout {
         });
     }
     async getPaymentMethod(submitCheckoutArgs) {
+        // If Apple Pay token is available, return a placeholder since we handle it differently
+        if (this.applePayToken) {
+            return 'apple_pay_token';
+        }
         // If we have a payment token from the store (set by tokenize-payment-method), use it
         if (checkoutStore.paymentToken) {
             return checkoutStore.paymentToken;
@@ -150,10 +232,10 @@ export class ModularCheckout {
     }
     async validate() {
         var _a, _b;
-        console.log('billing information form', this.billingFormRef);
-        console.log('payment method form', this.paymentMethodFormRef);
-        console.log('insurance form', this.insuranceFormRef);
-        console.log('sezzle payment method', this.sezzlePaymentMethodRef);
+        // If Apple Pay token is available, validation is already complete
+        if (this.applePayToken) {
+            return true;
+        }
         const promises = [
             (_a = this.paymentMethodFormRef) === null || _a === void 0 ? void 0 : _a.validate(),
             (_b = this.billingFormRef) === null || _b === void 0 ? void 0 : _b.validate()
@@ -166,6 +248,11 @@ export class ModularCheckout {
     }
     async submitCheckout(submitCheckoutArgs) {
         var _a;
+        // If Apple Pay token is available, use Apple Pay flow
+        if (this.applePayToken) {
+            await this.submitCheckoutWithApplePay();
+            return;
+        }
         const isValid = await this.validate();
         if (!isValid) {
             this.errorEvent.emit({
@@ -231,7 +318,7 @@ export class ModularCheckout {
         checkoutStore.selectedPaymentMethod = paymentMethodId;
     }
     render() {
-        return (h(Host, { key: 'd454d321b1a7a6e3b4097c94fbb05e02ce3e36a9' }));
+        return (h(Host, { key: '1b0c613494dde43962dc963618d5a81c4423b218' }));
     }
     static get is() { return "justifi-modular-checkout"; }
     static get properties() {

package/dist/collection/components/modular-checkout/sub-components/apple-pay-skeleton.js

@@ -0,0 +1,10 @@
+import { h } from "@stencil/core";
+import { Skeleton } from "../../../ui-components";
+const ApplePaySkeleton = (props) => {
+    const { isReady } = props;
+    if (isReady) {
+        return null;
+    }
+    return (h("div", { class: 'container-fluid p-0' }, h("div", { class: 'row mb-3' }, h("div", { class: 'col-12 align-content-center' }, h(Skeleton, { height: '44px', width: '100%', styles: { borderRadius: "8px" } })))));
+};
+export default ApplePaySkeleton;