@justifi/webcomponents 4.7.6 → 4.8.0

package/dist/collection/components/business-form/helpers.js

@@ -1,22 +1,23 @@
 // These props should not be sent to the server
-export const parseForPatching = (data) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-    delete data.id;
-    delete data.documents;
-    delete data.bank_accounts;
-    delete data.product_categories;
-    delete data.created_at;
-    delete data.updated_at;
-    (_a = data.legal_address) === null || _a === void 0 ? true : delete _a.id;
-    (_b = data.legal_address) === null || _b === void 0 ? true : delete _b.created_at;
-    (_c = data.legal_address) === null || _c === void 0 ? true : delete _c.updated_at;
-    (_d = data.representative) === null || _d === void 0 ? true : delete _d.id;
-    (_e = data.representative) === null || _e === void 0 ? true : delete _e.documents;
-    (_f = data.representative) === null || _f === void 0 ? true : delete _f.created_at;
-    (_g = data.representative) === null || _g === void 0 ? true : delete _g.updated_at;
-    (_h = data.representative) === null || _h === void 0 ? true : delete _h.address.id;
-    (_j = data.representative) === null || _j === void 0 ? true : delete _j.address.created_at;
-    (_k = data.representative) === null || _k === void 0 ? true : delete _k.address.updated_at;
-    delete data.owners;
-    return data;
+export const parseForPatching = (values, initialValues) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+    delete values.id;
+    delete values.documents;
+    delete values.bank_accounts;
+    delete values.product_categories;
+    delete values.created_at;
+    delete values.updated_at;
+    (_a = values.legal_address) === null || _a === void 0 ? true : delete _a.id;
+    (_b = values.legal_address) === null || _b === void 0 ? true : delete _b.created_at;
+    (_c = values.legal_address) === null || _c === void 0 ? true : delete _c.updated_at;
+    (_d = values.representative) === null || _d === void 0 ? true : delete _d.id;
+    (_e = values.representative) === null || _e === void 0 ? true : delete _e.documents;
+    (_f = values.representative) === null || _f === void 0 ? true : delete _f.created_at;
+    (_g = values.representative) === null || _g === void 0 ? true : delete _g.updated_at;
+    (_h = values.representative) === null || _h === void 0 ? true : delete _h.address.id;
+    (_j = values.representative) === null || _j === void 0 ? true : delete _j.address.created_at;
+    (_k = values.representative) === null || _k === void 0 ? true : delete _k.address.updated_at;
+    (_l = values.representative) === null || _l === void 0 ? true : delete _l.business_id;
+    ((_m = initialValues.owners) === null || _m === void 0 ? void 0 : _m.length) && delete values.owners;
+    return values;
 };

package/dist/collection/components/business-form/legal-address-form/legal-address-form-schema.js

@@ -1,7 +1,7 @@
 import * as Yup from "yup";
 const legalAddressSchema = Yup.object({
     line1: Yup.string().required('Enter street address'),
-    line2: Yup.string(),
+    line2: Yup.string().nullable(),
     city: Yup.string().required('Enter city'),
     state: Yup.string().required('Select state'),
     postal_code: Yup.string().required('Enter postal code'),

package/dist/collection/components/business-form/legal-address-form/legal-address-form.js

@@ -1,5 +1,4 @@
 import { Host, h } from "@stencil/core";
-import countryOptions from "../../../utils/country-options";
 /**
  * @exportedPart label: Label for inputs
  * @exportedPart input: The input fields
@@ -22,7 +21,7 @@ export class LegalAddressForm {
     render() {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
         const legalAddressDefaultValue = this.formController.getInitialValues().legal_address;
-        return (h(Host, { exportparts: "label,input,input-invalid" }, h("fieldset", null, h("legend", null, "Business Legal Address"), h("hr", null), h("div", { class: "row gx-2 gy-2" }, h("div", { class: "col-12" }, h("form-control-text", { name: "line1", label: "Legal Address", inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.line1, error: (_b = (_a = this.errors) === null || _a === void 0 ? void 0 : _a.legal_address) === null || _b === void 0 ? void 0 : _b.line1 })), h("div", { class: "col-12" }, h("form-control-text", { name: "line2", label: "Address Line 2", inputHandler: (name, value) => this.inputHandler(name, value), defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.line2 })), h("div", { class: "col-12" }, h("form-control-text", { name: "city", label: "City", inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.city, error: (_d = (_c = this.errors) === null || _c === void 0 ? void 0 : _c.legal_address) === null || _d === void 0 ? void 0 : _d.city })), h("div", { class: "col-12" }, h("form-control-text", { name: "state", label: "State", inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.state, error: (_f = (_e = this.errors) === null || _e === void 0 ? void 0 : _e.legal_address) === null || _f === void 0 ? void 0 : _f.state })), h("div", { class: "col-12" }, h("form-control-number", { name: "postal_code", label: "Postal Code", inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.postal_code, error: (_h = (_g = this.errors) === null || _g === void 0 ? void 0 : _g.legal_address) === null || _h === void 0 ? void 0 : _h.postal_code })), h("div", { class: "col-12" }, h("form-control-select", { name: "country", label: "Country", options: countryOptions, inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.country, error: (_k = (_j = this.errors) === null || _j === void 0 ? void 0 : _j.legal_address) === null || _k === void 0 ? void 0 : _k.country,
+        return (h(Host, { exportparts: "label,input,input-invalid" }, h("fieldset", null, h("legend", null, "Business Legal Address"), h("hr", null), h("div", { class: "row gx-2 gy-2" }, h("div", { class: "col-12" }, h("form-control-text", { name: "line1", label: "Legal Address", inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.line1, error: (_b = (_a = this.errors) === null || _a === void 0 ? void 0 : _a.legal_address) === null || _b === void 0 ? void 0 : _b.line1 })), h("div", { class: "col-12" }, h("form-control-text", { name: "line2", label: "Address Line 2", inputHandler: (name, value) => this.inputHandler(name, value), defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.line2 })), h("div", { class: "col-12" }, h("form-control-text", { name: "city", label: "City", inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.city, error: (_d = (_c = this.errors) === null || _c === void 0 ? void 0 : _c.legal_address) === null || _d === void 0 ? void 0 : _d.city })), h("div", { class: "col-12" }, h("form-control-text", { name: "state", label: "State", inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.state, error: (_f = (_e = this.errors) === null || _e === void 0 ? void 0 : _e.legal_address) === null || _f === void 0 ? void 0 : _f.state })), h("div", { class: "col-12" }, h("form-control-number", { name: "postal_code", label: "Postal Code", inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.postal_code, error: (_h = (_g = this.errors) === null || _g === void 0 ? void 0 : _g.legal_address) === null || _h === void 0 ? void 0 : _h.postal_code })), h("div", { class: "col-12" }, h("form-control-select", { name: "country", label: "Country", options: [{ label: 'United States', value: 'USA' }], inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.country, error: (_k = (_j = this.errors) === null || _j === void 0 ? void 0 : _j.legal_address) === null || _k === void 0 ? void 0 : _k.country,
             // just for now so we skip handling country specificities
             disabled: true }))))));
     }

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

@@ -4,7 +4,7 @@ describe('justifi-business-form', () => {
     let consoleSpy;
     // Initialize the spy in the beforeEach
     beforeEach(() => {
-        consoleSpy = jest.spyOn(console, 'warn').mockImplementation(() => { });
+        consoleSpy = jest.spyOn(console, 'error').mockImplementation(() => { });
     });
     // Restore the original function in the afterEach
     afterEach(() => {
@@ -17,26 +17,17 @@ describe('justifi-business-form', () => {
         });
         expect(consoleSpy).toHaveBeenCalledWith('Warning: Missing auth-token. The form will not be functional without it.');
     });
-    it('should disable the submit button if no authToken is provided', async () => {
-        const { root } = await newSpecPage({
+    it('should log a warning if no businessId is provided', async () => {
+        await newSpecPage({
             components: [BusinessForm],
             html: `<justifi-business-form></justifi-business-form>`,
         });
-        const submitButton = root.querySelector('.jfi-submit-button');
-        expect(submitButton).toHaveAttribute('disabled');
-    });
-    it('should not disable the submit button if an authToken is provided', async () => {
-        const { root } = await newSpecPage({
-            components: [BusinessForm],
-            html: `<justifi-business-form auth-token="auth-token"></justifi-business-form>`,
-        });
-        const submitButton = root.querySelector('.jfi-submit-button');
-        expect(submitButton).not.toHaveAttribute('disabled');
+        expect(consoleSpy).toHaveBeenCalledWith('Warning: Missing business-id. The form requires an existing business-id to function.');
     });
     it('should not log a warning if an authToken is provided', async () => {
         await newSpecPage({
             components: [BusinessForm],
-            html: `<justifi-business-form auth-token="some-token"></justifi-business-form>`,
+            html: `<justifi-business-form business-id="biz_123" auth-token="some-token"></justifi-business-form>`,
         });
         expect(consoleSpy).not.toHaveBeenCalled();
     });

package/dist/collection/components/details/utils.js

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
-export const LoadingState = (h("main", { part: "detail-loading-state", class: "p-4 d-flex justify-content-center text-center", style: { fontSize: '1.2rem' } }, h("div", { part: "detail-loading-spinner", class: "spinner-border spinner-border-sm", role: "status" }, h("span", { class: "visually-hidden" }, "Loading..."))));
+export const LoadingState = () => (h("main", { part: "detail-loading-state", class: "p-4 d-flex justify-content-center text-center", style: { fontSize: '1.2rem' } }, h("div", { part: "detail-loading-spinner", class: "spinner-border spinner-border-sm", role: "status" }, h("span", { class: "visually-hidden" }, "Loading..."))));
 export const ErrorState = (errorMessage) => (h("main", { part: "detail-empty-state", class: "p-4 d-flex justify-content-center text-center", style: { fontSize: '1.2rem' } }, h("div", null, errorMessage)));
-export const DetailSection = ({ sectionTitle }, children) => (h("div", { part: "detail-section", class: "mt-4" }, h("h5", { part: "detail-section-title" }, sectionTitle), h("hr", null), h("div", { class: "d-table gap-2 w-100" }, children)));
+export const DetailSection = (props, children) => (h("div", { part: "detail-section", class: "mt-4" }, h("h5", { part: "detail-section-title" }, props.sectionTitle), h("hr", null), h("div", { class: "d-table gap-2 w-100" }, ...children)));
 export const DetailItem = ({ title, value, }) => title && value ? (h("div", { class: "d-table-row gap-2" }, h("span", { part: "detail-section-item-title", class: "fw-bold d-table-cell px-2" }, title), h("span", { part: "detail-section-item-data", class: "flex-1 d-table-cell px-2 text-wrap", innerHTML: value }))) : null;
 export const EntityHeadInfoItem = ({ title, value, classes, }) => (h("div", { part: "detail-head-info-item", class: `d-flex flex-column ${classes}` }, h("span", { part: "detail-head-info-item-title", class: "fw-bold border-1 border-bottom ps-2 pe-2" }, title), h("span", { part: "detail-head-info-item-data", class: "pt-2 ps-2 pe-2" }, value)));
 export const EntityHeadInfo = ({ title, slot, badge }, children) => (h("div", { slot: slot, part: "detail-head", class: "p-2" }, h("div", { class: "d-flex flex-row align-items-center gap-2 mb-2" }, h("h1", { class: "m-0", part: "detail-title" }, title), badge), h("div", { part: "detail-head-info", class: "d-flex flex-row align-items-top" }, children)));

package/dist/collection/components/pagination-menu/test/pagination-menu.spec.js

@@ -0,0 +1,87 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { PaginationMenu } from "../pagination-menu";
+import { ExtendedPagingDefaults } from "../../../api";
+const mockExtendedPagingInfo = {
+    has_previous: false,
+    has_next: true,
+    start_cursor: '',
+    end_cursor: '',
+    handleClickNext: jest.fn((after_cursor) => {
+        // Implementation for the mock; could just be empty for basic tests
+        console.log(`Mock handleClickNext called with after_cursor: ${after_cursor}`);
+    }),
+    handleClickPrevious: jest.fn((before_cursor) => {
+        console.log(`Mock handleClickPrevious called with before_cursor: ${before_cursor}`);
+    }),
+    amount: 0
+};
+describe('pagination-menu', () => {
+    it('initializes with default property values', async () => {
+        const page = await newSpecPage({
+            components: [PaginationMenu],
+            html: `<pagination-menu></pagination-menu>`,
+        });
+        expect(page.rootInstance.paging).toEqual(ExtendedPagingDefaults);
+        expect(page.rootInstance.params).toEqual({});
+    });
+    it('sets appropriate aria-labels for accessibility', async () => {
+        const page = await newSpecPage({
+            components: [PaginationMenu],
+            html: `<pagination-menu></pagination-menu>`,
+        });
+        expect(page.root.shadowRoot.querySelector('nav').getAttribute('aria-label')).toBe('Table pagination');
+    });
+    it('reflects passed properties', async () => {
+        const mockPagingInfo = mockExtendedPagingInfo;
+        const page = await newSpecPage({
+            components: [PaginationMenu],
+            html: `<pagination-menu></pagination-menu>`,
+        });
+        page.root.paging = mockPagingInfo;
+        await page.waitForChanges();
+        expect(page.rootInstance.paging).toBe(mockPagingInfo);
+    });
+    it('disables/enables buttons based on paging info', async () => {
+        const page = await newSpecPage({
+            components: [PaginationMenu],
+            html: `<pagination-menu></pagination-menu>`,
+        });
+        page.root.paging = {
+            has_previous: false,
+            has_next: true,
+            start_cursor: '',
+            end_cursor: '',
+            handleClickNext: jest.fn(),
+            handleClickPrevious: jest.fn(),
+            amount: 0
+        };
+        await page.waitForChanges();
+        const previousButton = page.root.shadowRoot.querySelector('.page-item:first-child');
+        const nextButton = page.root.shadowRoot.querySelector('.page-item:last-child');
+        // Convert classList to a string for the assertion
+        const previousButtonClasses = previousButton.className;
+        const nextButtonClasses = nextButton.className;
+        expect(previousButtonClasses).toContain('disabled');
+        expect(nextButtonClasses).not.toContain('disabled');
+    });
+    it('emits events on button clicks', async () => {
+        const mockPagingInfo = {
+            has_previous: true,
+            has_next: true,
+            handleClickPrevious: jest.fn(),
+            handleClickNext: jest.fn(),
+        };
+        const page = await newSpecPage({
+            components: [PaginationMenu],
+            html: `<pagination-menu></pagination-menu>`,
+        });
+        page.root.paging = mockPagingInfo;
+        await page.waitForChanges();
+        const previousButton = page.root.shadowRoot.querySelector('.page-item:first-child .page-link');
+        const nextButton = page.root.shadowRoot.querySelector('.page-item:last-child .page-link');
+        previousButton.click();
+        expect(mockPagingInfo.handleClickPrevious).toHaveBeenCalled();
+        nextButton.click();
+        expect(mockPagingInfo.handleClickNext).toHaveBeenCalled();
+    });
+});

package/dist/collection/components/payment-details/get-payment-details.js

@@ -0,0 +1,17 @@
+import { Payment } from "../../api";
+import { getErrorMessage } from "../../api/services/utils";
+export const makeGetPaymentDetails = ({ id, authToken, service }) => async ({ onSuccess, onError }) => {
+    try {
+        const response = await service.fetchPayment(id, authToken);
+        if (!response.error) {
+            onSuccess({ payment: new Payment(response.data) });
+        }
+        else {
+            const responseError = getErrorMessage(response.error);
+            onError(`Error trying to fetch data : ${responseError}`);
+        }
+    }
+    catch (error) {
+        onError(`Error trying to fetch data : ${error}`);
+    }
+};

package/dist/collection/components/payment-details/payment-details-core.js

@@ -0,0 +1,86 @@
+import { Host, h } from "@stencil/core";
+import { MapPaymentStatusToBadge, formatCurrency, formatDate, formatTime, snakeCaseToHumanReadable } from "../../utils/utils";
+import { CodeBlock, DetailItem, DetailSection, EntityHeadInfo, EntityHeadInfoItem, ErrorState, LoadingState } from "../details/utils";
+export class PaymentDetailsCore {
+    constructor() {
+        this.getPaymentDetails = undefined;
+        this.payment = undefined;
+        this.loading = true;
+        this.errorMessage = undefined;
+    }
+    componentWillLoad() {
+        if (this.getPaymentDetails) {
+            this.fetchData();
+        }
+    }
+    updateOnPropChange() {
+        this.fetchData();
+    }
+    fetchData() {
+        this.loading = true;
+        this.getPaymentDetails({
+            onSuccess: ({ payment }) => {
+                this.payment = payment;
+                this.loading = false;
+                this.errorMessage = null;
+            },
+            onError: (error) => {
+                this.errorMessage = error;
+                this.loading = false;
+            },
+        });
+    }
+    render() {
+        var _a;
+        return (h(Host, null, this.loading && LoadingState(), !this.loading && this.errorMessage && ErrorState(this.errorMessage), !this.loading && !this.errorMessage &&
+            this.payment && (h("justifi-details", { "error-message": this.errorMessage }, h(EntityHeadInfo, { slot: "head-info", badge: h("span", { slot: 'badge', innerHTML: MapPaymentStatusToBadge(this.payment.status) }), title: `${formatCurrency(this.payment.amount)} ${(_a = this.payment) === null || _a === void 0 ? void 0 : _a.currency.toUpperCase()}` }, h(EntityHeadInfoItem, { classes: "border-1 border-end", title: "Updated At", value: `${formatDate(this.payment.updated_at)} ${formatTime(this.payment.updated_at)}` }), h(EntityHeadInfoItem, { classes: "border-1 border-end", title: "Created At", value: `${formatDate(this.payment.created_at)} ${formatTime(this.payment.created_at)}` }), h(EntityHeadInfoItem, { title: "ID", value: this.payment.id })), h("div", { slot: 'detail-sections' }, h(DetailSection, { sectionTitle: "Details" }, h(DetailItem, { title: "Amount", value: formatCurrency(this.payment.amount) }), h(DetailItem, { title: "Fees", value: formatCurrency(this.payment.fee_amount) }), h(DetailItem, { title: "Refunded", value: formatCurrency(this.payment.amount_refunded) }), h(DetailItem, { title: "Net", value: formatCurrency(this.payment.balance) }), h(DetailItem, { title: "Status", value: MapPaymentStatusToBadge(this.payment.status) }), h(DetailItem, { title: "Payment ID", value: this.payment.id }), h(DetailItem, { title: "Processing Fees", value: formatCurrency(this.payment.fee_amount) }), h(DetailItem, { title: "Statement Descriptor", value: this.payment.statement_descriptor }), h(DetailItem, { title: "Description", value: this.payment.description })), this.payment.payment_method.card && (h(DetailSection, { sectionTitle: "Payment Method" }, h(DetailItem, { title: "ID", value: this.payment.payment_method.card.id }), h(DetailItem, { title: "Payment Type", value: "Card" }), h(DetailItem, { title: "Last 4 Numbers", value: this.payment.payment_method.lastFourDigits }), h(DetailItem, { title: "Brand", value: snakeCaseToHumanReadable(this.payment.payment_method.card.brand) }), h(DetailItem, { title: "Cardholder", value: this.payment.payment_method.payersName }))), this.payment.payment_method.bank_account && (h(DetailSection, { sectionTitle: "Payment Method" }, h(DetailItem, { title: "ID", value: this.payment.payment_method.bank_account.id }), h(DetailItem, { title: "Last 4 Numbers", value: this.payment.payment_method.lastFourDigits }), h(DetailItem, { title: "Bank Name", value: this.payment.payment_method.bank_account.brand }), h(DetailItem, { title: "Account Owner", value: this.payment.payment_method.payersName }))), h(DetailSection, { sectionTitle: 'Metadata' }, h(CodeBlock, { metadata: this.payment.metadata })))))));
+    }
+    static get is() { return "payment-details-core"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["payment-details.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["payment-details.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "getPaymentDetails": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Function",
+                    "resolved": "Function",
+                    "references": {
+                        "Function": {
+                            "location": "global",
+                            "id": "global::Function"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                }
+            }
+        };
+    }
+    static get states() {
+        return {
+            "payment": {},
+            "loading": {},
+            "errorMessage": {}
+        };
+    }
+    static get watchers() {
+        return [{
+                "propName": "getPaymentDetails",
+                "methodName": "updateOnPropChange"
+            }];
+    }
+}

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

@@ -1,8 +1,7 @@
-import { Host, h } from "@stencil/core";
-import { Api, Payment } from "../../api";
-import { MapPaymentStatusToBadge, formatCurrency, formatDate, formatTime, snakeCaseToHumanReadable } from "../../utils/utils";
-import { CodeBlock, DetailItem, DetailSection, EntityHeadInfo, EntityHeadInfoItem, ErrorState, LoadingState } from "../details/utils";
-import { config } from "../../../config";
+import { h } from "@stencil/core";
+import { PaymentService } from "../../api/services/payment.service";
+import { makeGetPaymentDetails } from "./get-payment-details";
+import { ErrorState } from "../details/utils";
 /**
   * @exportedPart detail-loading-spinner
   * @exportedPart detail-loading-state
@@ -29,61 +28,38 @@ import { config } from "../../../config";
 */
 export class PaymentDetails {
     constructor() {
+        this.paymentService = new PaymentService();
         this.paymentId = undefined;
         this.authToken = undefined;
-        this.payment = undefined;
-        this.loading = true;
-        this.errorMessage = undefined;
+        this.getPaymentDetails = undefined;
+        this.errorMessage = null;
     }
-    updateOnPropChange() {
-        this.fetchData();
+    componentWillLoad() {
+        this.initializeGetPaymentDetails();
     }
-    connectedCallback() {
-        this.fetchData();
+    propChanged() {
+        this.initializeGetPaymentDetails();
     }
-    async fetchData() {
-        if (!this.paymentId || !this.authToken) {
-            this.errorMessage = "Can not fetch any data without a PaymentID and an AuthToken";
-            this.loading = false;
-            return;
+    initializeGetPaymentDetails() {
+        if (this.paymentId && this.authToken) {
+            this.getPaymentDetails = makeGetPaymentDetails({
+                id: this.paymentId,
+                authToken: this.authToken,
+                service: new PaymentService(),
+            });
         }
-        this.loading = true;
-        try {
-            const endpoint = `payments/${this.paymentId}`;
-            const response = await Api(this.authToken, config.proxyApiOrigin).get(endpoint);
-            if (!response.error) {
-                this.payment = new Payment(response.data);
-            }
-            else {
-                const responseError = typeof response.error === 'string' ? response.error : response.error.message;
-                this.errorMessage = `Error trying to fetch data : ${responseError}`;
-                console.error(this.errorMessage);
-            }
-        }
-        catch (error) {
-            this.errorMessage = `Error trying to fetch data : ${error}`;
-            console.error(this.errorMessage);
-        }
-        finally {
-            this.loading = false;
+        else {
+            this.errorMessage = 'Payment ID and Auth Token are required';
         }
     }
     render() {
-        return (h(Host, null, this.loading && LoadingState, !this.loading && this.errorMessage && ErrorState(this.errorMessage), !this.loading && !this.errorMessage &&
-            this.payment && (h("justifi-details", { "error-message": this.errorMessage }, h(EntityHeadInfo, { slot: "head-info", badge: h("span", { slot: 'badge', innerHTML: MapPaymentStatusToBadge(this.payment.status) }), title: `${formatCurrency(this.payment.amount)} ${this.payment.currency.toUpperCase()}` }, h(EntityHeadInfoItem, { classes: "border-1 border-end", title: "Updated At", value: `${formatDate(this.payment.updated_at)} ${formatTime(this.payment.updated_at)}` }), h(EntityHeadInfoItem, { classes: "border-1 border-end", title: "Created At", value: `${formatDate(this.payment.created_at)} ${formatTime(this.payment.created_at)}` }), h(EntityHeadInfoItem, { title: "ID", value: this.payment.id })), h("div", { slot: 'detail-sections' }, h(DetailSection, { sectionTitle: "Details" }, h(DetailItem, { title: "Amount", value: formatCurrency(this.payment.amount) }), h(DetailItem, { title: "Fees", value: formatCurrency(this.payment.fee_amount) }), h(DetailItem, { title: "Refunded", value: formatCurrency(this.payment.amount_refunded) }), h(DetailItem, { title: "Net", value: formatCurrency(this.payment.balance) }), h(DetailItem, { title: "Status", value: MapPaymentStatusToBadge(this.payment.status) }), h(DetailItem, { title: "Payment ID", value: this.payment.id }), h(DetailItem, { title: "Processing Fees", value: formatCurrency(this.payment.fee_amount) }), h(DetailItem, { title: "Statement Descriptor", value: this.payment.statement_descriptor }), h(DetailItem, { title: "Description", value: this.payment.description })), this.payment.payment_method.card && (h(DetailSection, { sectionTitle: "Payment Method" }, h(DetailItem, { title: "ID", value: this.payment.payment_method.card.id }), h(DetailItem, { title: "Payment Type", value: "Card" }), h(DetailItem, { title: "Last 4 Numbers", value: this.payment.payment_method.lastFourDigits }), h(DetailItem, { title: "Brand", value: snakeCaseToHumanReadable(this.payment.payment_method.card.brand) }), h(DetailItem, { title: "Cardholder", value: this.payment.payment_method.payersName }))), this.payment.payment_method.bank_account && (h(DetailSection, { sectionTitle: "Payment Method" }, h(DetailItem, { title: "ID", value: this.payment.payment_method.bank_account.id }), h(DetailItem, { title: "Last 4 Numbers", value: this.payment.payment_method.lastFourDigits }), h(DetailItem, { title: "Bank Name", value: this.payment.payment_method.bank_account.brand }), h(DetailItem, { title: "Account Owner", value: this.payment.payment_method.payersName }))), h(DetailSection, { sectionTitle: 'Metadata' }, h(CodeBlock, { metadata: this.payment.metadata })))))));
+        if (this.errorMessage) {
+            return ErrorState(this.errorMessage);
+        }
+        return (h("payment-details-core", { getPaymentDetails: this.getPaymentDetails }));
     }
     static get is() { return "justifi-payment-details"; }
     static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["payment-details.scss"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["payment-details.css"]
-        };
-    }
     static get properties() {
         return {
             "paymentId": {
@@ -124,18 +100,17 @@ export class PaymentDetails {
     }
     static get states() {
         return {
-            "payment": {},
-            "loading": {},
+            "getPaymentDetails": {},
             "errorMessage": {}
         };
     }
     static get watchers() {
         return [{
                 "propName": "paymentId",
-                "methodName": "updateOnPropChange"
+                "methodName": "propChanged"
             }, {
                 "propName": "authToken",
-                "methodName": "updateOnPropChange"
+                "methodName": "propChanged"
             }];
     }
 }

package/dist/collection/components/payment-details/test/get-payment-details.spec.js

@@ -0,0 +1,64 @@
+import { Payment } from "../../../api";
+import { PaymentService } from "../../../api/services/payment.service";
+import { makeGetPaymentDetails } from "../get-payment-details";
+import mockResponse from "../../../api/mockData/mockPaymentDetailSuccess.json";
+// Mock the PaymentService class
+jest.mock('../../../api/services/payment.service');
+describe('getPaymentDetails', () => {
+    const paymentId = '123';
+    const authToken = '123';
+    let mockServiceInstance;
+    beforeEach(() => {
+        jest.clearAllMocks();
+        // Create a new instance of the mocked PaymentService
+        mockServiceInstance = new PaymentService();
+        // Explicitly mock fetchPayment as a jest mock function
+        mockServiceInstance.fetchPayment = jest.fn();
+    });
+    it('should call onSuccess with payment on successful fetch', async () => {
+        const onSuccess = jest.fn();
+        const onError = jest.fn();
+        // Mock fetchPayment to resolve with mockResponse
+        mockServiceInstance.fetchPayment.mockResolvedValue(mockResponse);
+        const getPaymentDetails = makeGetPaymentDetails({
+            id: paymentId,
+            authToken: authToken,
+            service: mockServiceInstance,
+        });
+        await getPaymentDetails({ onSuccess, onError });
+        expect(onSuccess).toHaveBeenCalledWith({
+            payment: expect.any(Payment),
+        });
+        expect(onError).not.toHaveBeenCalled();
+    });
+    it('should call onError with an error message on API failure', async () => {
+        const mockError = new Error('Error fetching payment');
+        const onSuccess = jest.fn();
+        const onError = jest.fn();
+        // Mock fetchPayment to reject with mockError
+        mockServiceInstance.fetchPayment.mockRejectedValue(mockError);
+        const getPaymentDetails = makeGetPaymentDetails({
+            id: paymentId,
+            authToken: authToken,
+            service: mockServiceInstance,
+        });
+        await getPaymentDetails({ onSuccess, onError });
+        expect(onSuccess).not.toHaveBeenCalled();
+        expect(onError).toHaveBeenCalledWith(`Error trying to fetch data : ${mockError}`);
+    });
+    it('should call onError with an error message on API failure', async () => {
+        const mockError = new Error('Error fetching payment');
+        const onSuccess = jest.fn();
+        const onError = jest.fn();
+        // Mock fetchPayment to reject with mockError
+        mockServiceInstance.fetchPayment.mockRejectedValue(mockError);
+        const getPaymentDetails = makeGetPaymentDetails({
+            id: paymentId,
+            authToken: authToken,
+            service: mockServiceInstance,
+        });
+        await getPaymentDetails({ onSuccess, onError });
+        expect(onSuccess).not.toHaveBeenCalled();
+        expect(onError).toHaveBeenCalledWith(`Error trying to fetch data : ${mockError}`);
+    });
+});

package/dist/collection/components/payment-details/test/payment-details-core.spec.js

@@ -0,0 +1,47 @@
+import { newSpecPage } from "@stencil/core/testing";
+import mockPaymentDetailsResponse from "../../../api/mockData/mockPaymentDetailSuccess.json";
+import { PaymentDetailsCore } from "../payment-details-core";
+import { Details } from "../../details/details";
+import { makeGetPaymentDetails } from "../get-payment-details";
+describe('payment-details-core', () => {
+    const components = [PaymentDetailsCore, Details];
+    it('it renders properly with fetched data', async () => {
+        const mockPaymentService = {
+            fetchPayment: jest.fn().mockResolvedValue(mockPaymentDetailsResponse),
+        };
+        const page = await newSpecPage({
+            components,
+            html: `<payment-details-core></payment-details-core>`,
+        });
+        page.rootInstance.componentWillLoad = () => { };
+        page.rootInstance.getPaymentDetails = makeGetPaymentDetails({
+            id: '123',
+            authToken: '123',
+            service: mockPaymentService
+        });
+        page.rootInstance.fetchData();
+        await page.waitForChanges();
+        expect(page.rootInstance.payment).toEqual(expect.objectContaining({ id: mockPaymentDetailsResponse.data.id }));
+        expect(mockPaymentService.fetchPayment).toHaveBeenCalled();
+        expect(page.root).toMatchSnapshot();
+    });
+    it('displays an error state on failed data fetch', async () => {
+        const mockService = {
+            fetchPayment: jest.fn().mockRejectedValue(new Error('Fetch error'))
+        };
+        const getPaymentDetails = makeGetPaymentDetails({
+            id: 'some-id',
+            authToken: 'some-auth-token',
+            service: mockService
+        });
+        const page = await newSpecPage({
+            components,
+            html: '<payment-details-core></payment-details-core>',
+        });
+        page.rootInstance.componentWillLoad = () => { };
+        page.rootInstance.getPaymentDetails = getPaymentDetails;
+        page.rootInstance.fetchData();
+        await page.waitForChanges();
+        expect(page.root).toMatchSnapshot();
+    });
+});

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

@@ -0,0 +1,31 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { PaymentDetails } from "../payment-details";
+import { PaymentDetailsCore } from "../payment-details-core";
+import { Details } from "../../details/details";
+describe('payment-details', () => {
+    const components = [PaymentDetails, PaymentDetailsCore, Details];
+    it('renders an error message when paymentId and authToken are not provided', async () => {
+        const page = await newSpecPage({
+            components,
+            html: '<justifi-payment-details></justifi-payment-details>',
+        });
+        await page.waitForChanges();
+        expect(page.root).toMatchSnapshot();
+    });
+    it('renders an error message when paymentId is not provided', async () => {
+        const page = await newSpecPage({
+            components,
+            html: '<justifi-payment-details auth-token="abc"></justifi-payment-details>',
+        });
+        await page.waitForChanges();
+        expect(page.root).toMatchSnapshot();
+    });
+    it('renders an error message when authToken is not provided', async () => {
+        const page = await newSpecPage({
+            components,
+            html: '<justifi-payment-details payment-id="abc"></justifi-payment-details>',
+        });
+        await page.waitForChanges();
+        expect(page.root).toMatchSnapshot();
+    });
+});

package/dist/collection/components/payments-list/get-payments.js

@@ -0,0 +1,20 @@
+import { Payment } from "../../api";
+import { getErrorMessage } from "../../api/services/utils";
+export const makeGetPayments = ({ id, authToken, service }) => async ({ params, onSuccess, onError }) => {
+    var _a;
+    try {
+        const response = await service.fetchPayments(id, authToken, params);
+        if (!response.error) {
+            const pagingInfo = Object.assign({}, response.page_info);
+            const payments = ((_a = response.data) === null || _a === void 0 ? void 0 : _a.map((dataItem) => new Payment(dataItem))) || [];
+            onSuccess({ payments, pagingInfo });
+        }
+        else {
+            const responseError = getErrorMessage(response.error);
+            return onError(responseError);
+        }
+    }
+    catch (error) {
+        return onError(error.message || error);
+    }
+};