@justifi/webcomponents 4.7.6 → 4.8.0

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

@@ -0,0 +1,86 @@
+import { Host, h } from "@stencil/core";
+import { MapPayoutStatusToBadge, formatCurrency, formatDate, formatTime } from "../../utils/utils";
+import { CodeBlock, DetailItem, DetailSection, EntityHeadInfo, EntityHeadInfoItem, ErrorState, LoadingState } from "../details/utils";
+export class PayoutDetailsCore {
+    constructor() {
+        this.getPayout = undefined;
+        this.payout = undefined;
+        this.loading = true;
+        this.errorMessage = null;
+    }
+    componentWillLoad() {
+        if (this.getPayout) {
+            this.fetchData();
+        }
+    }
+    getPayoutWatcher() {
+        this.fetchData();
+    }
+    fetchData() {
+        this.loading = true;
+        this.getPayout({
+            onSuccess: (payout) => {
+                this.errorMessage = null;
+                this.payout = payout;
+                this.loading = false;
+            },
+            onError: (errorMessage) => {
+                this.errorMessage = errorMessage;
+                console.error(this.errorMessage);
+                this.loading = false;
+            },
+        });
+    }
+    render() {
+        var _a;
+        return (h(Host, null, this.loading && LoadingState(), !this.loading && this.errorMessage && ErrorState(this.errorMessage), !this.loading && this.payout && (h("justifi-details", { "error-message": this.errorMessage }, h(EntityHeadInfo, { slot: "head-info", badge: h("span", { slot: 'badge', innerHTML: MapPayoutStatusToBadge((_a = this.payout) === null || _a === void 0 ? void 0 : _a.status) }), title: `${formatCurrency(this.payout.amount)} ${this.payout.currency.toUpperCase()}` }, h(EntityHeadInfoItem, { classes: "border-1 border-end", title: "Updated At", value: `${formatDate(this.payout.updated_at)} ${formatTime(this.payout.updated_at)}` }), h(EntityHeadInfoItem, { classes: "border-1 border-end", title: "Created At", value: `${formatDate(this.payout.created_at)} ${formatTime(this.payout.created_at)}` }), h(EntityHeadInfoItem, { title: "ID", value: this.payout.id })), h("div", { slot: 'detail-sections' }, h(DetailSection, { sectionTitle: "Details" }, h(DetailItem, { title: "Date paid", value: formatDate(this.payout.deposits_at) }), h(DetailItem, { title: "Statement Description", value: this.payout.description }), h(DetailItem, { title: "Payout Method", value: this.payout.delivery_method }), h(DetailItem, { title: "Amount", value: formatCurrency(this.payout.amount) }), h(DetailItem, { title: "Fee", value: formatCurrency(this.payout.fees_total) })), h(DetailSection, { sectionTitle: "Account" }, h(DetailItem, { title: "ID", value: this.payout.account_id }), h(DetailItem, { title: "Account Type", value: this.payout.bank_account.account_type }), h(DetailItem, { title: "Institution", value: this.payout.bank_account.account_type }), h(DetailItem, { title: "Routing Number", value: this.payout.bank_account.routing_number }), h(DetailItem, { title: "Account Number", value: this.payout.bank_account.account_number_last4 })), h(DetailSection, { sectionTitle: 'Metadata' }, h(CodeBlock, { metadata: this.payout.metadata })))))));
+    }
+    static get is() { return "payout-details-core"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["payout-details.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["payout-details.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "getPayout": {
+                "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 {
+            "payout": {},
+            "loading": {},
+            "errorMessage": {}
+        };
+    }
+    static get watchers() {
+        return [{
+                "propName": "getPayout",
+                "methodName": "getPayoutWatcher"
+            }];
+    }
+}

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

@@ -1,90 +1,40 @@
-import { Host, h } from "@stencil/core";
-import { Api, Payout } from "../../api";
-import { MapPayoutStatusToBadge, formatCurrency, formatDate, formatTime } from "../../utils/utils";
-import { CodeBlock, DetailItem, DetailSection, EntityHeadInfo, EntityHeadInfoItem, ErrorState, LoadingState } from "../details/utils";
-import { config } from "../../../config";
-/**
-  * @exportedPart detail-loading-spinner
-  * @exportedPart detail-loading-state
-  * @exportedPart detail-empty-state
-  * @exportedPart detail-head
-  * @exportedPart detail-title
-  * @exportedPart detail-method
-  * @exportedPart detail-info
-  * @exportedPart detail-info-item
-  * @exportedPart detail-info-item-title
-  * @exportedPart detail-info-item-data
-  * @exportedPart detail-metadata
-  * @exportedPart detail-metadata-title
-  * @exportedPart detail-method-title
-  * @exportedPart detail-method-data
-  * @exportedPart detail-section
-  * @exportedPart detail-section-title
-  * @exportedPart detail-section-item-title
-  * @exportedPart detail-section-item-data
-  * @exportedPart detail-head-info
-  * @exportedPart detail-head-info-item
-  * @exportedPart detail-head-info-item-title
-  * @exportedPart detail-head-info-item-data
-*/
-export class PaymentDetails {
+import { h } from "@stencil/core";
+import { PayoutService } from "../../api/services/payout.service";
+import { makeGetPayoutDetails } from "./get-payout-details";
+import { ErrorState } from "../details/utils";
+export class PayoutDetails {
     constructor() {
         this.payoutId = undefined;
         this.authToken = undefined;
-        this.payout = undefined;
-        this.loading = true;
-        this.errorMessage = undefined;
+        this.getPayout = undefined;
+        this.errorMessage = null;
     }
-    updateOnPropChange() {
-        this.fetchData();
+    componentWillLoad() {
+        this.initializeGetPayout();
     }
-    connectedCallback() {
-        this.fetchData();
+    propChanged() {
+        this.initializeGetPayout();
     }
-    async fetchData() {
-        this.errorMessage = '';
-        if (!this.payoutId || !this.authToken) {
-            this.errorMessage = "Can not fetch any data without a PayoutID and an AuthToken";
-            this.loading = false;
-            return;
+    initializeGetPayout() {
+        if (this.payoutId && this.authToken) {
+            this.getPayout = makeGetPayoutDetails({
+                id: this.payoutId,
+                authToken: this.authToken,
+                service: new PayoutService()
+            });
         }
-        this.loading = true;
-        try {
-            const endpoint = `payouts/${this.payoutId}`;
-            const response = await Api(this.authToken, config.proxyApiOrigin).get(endpoint);
-            if (!response.error) {
-                this.payout = new Payout(response.data);
-            }
-            else {
-                const responseError = typeof response.error === 'string' ? response.error : response.error.message;
-                this.errorMessage = `Error fetching payout details: ${responseError}`;
-                console.error(this.errorMessage);
-            }
-        }
-        catch (error) {
-            this.errorMessage = `Error fetching payout details: ${error}`;
-            console.error(this.errorMessage);
-        }
-        finally {
-            this.loading = false;
+        else {
+            this.errorMessage = 'Failed to load payout details. payoutId or authToken is not provided.';
         }
     }
     render() {
-        var _a;
-        return (h(Host, null, this.loading && LoadingState, !this.loading && this.errorMessage && ErrorState(this.errorMessage), !this.loading && this.payout && (h("justifi-details", { "error-message": this.errorMessage }, h(EntityHeadInfo, { slot: "head-info", badge: h("span", { slot: 'badge', innerHTML: MapPayoutStatusToBadge((_a = this.payout) === null || _a === void 0 ? void 0 : _a.status) }), title: `${formatCurrency(this.payout.amount)} ${this.payout.currency.toUpperCase()}` }, h(EntityHeadInfoItem, { classes: "border-1 border-end", title: "Updated At", value: `${formatDate(this.payout.updated_at)} ${formatTime(this.payout.updated_at)}` }), h(EntityHeadInfoItem, { classes: "border-1 border-end", title: "Created At", value: `${formatDate(this.payout.created_at)} ${formatTime(this.payout.created_at)}` }), h(EntityHeadInfoItem, { title: "ID", value: this.payout.id })), h("div", { slot: 'detail-sections' }, h(DetailSection, { sectionTitle: "Details" }, h(DetailItem, { title: "Date paid", value: formatDate(this.payout.deposits_at) }), h(DetailItem, { title: "Statement Description", value: this.payout.description }), h(DetailItem, { title: "Payout Method", value: this.payout.delivery_method }), h(DetailItem, { title: "Amount", value: formatCurrency(this.payout.amount) }), h(DetailItem, { title: "Fee", value: formatCurrency(this.payout.fees_total) })), h(DetailSection, { sectionTitle: "Account" }, h(DetailItem, { title: "ID", value: this.payout.account_id }), h(DetailItem, { title: "Account Type", value: this.payout.bank_account.account_type }), h(DetailItem, { title: "Institution", value: this.payout.bank_account.account_type }), h(DetailItem, { title: "Routing Number", value: this.payout.bank_account.routing_number }), h(DetailItem, { title: "Account Number", value: this.payout.bank_account.account_number_last4 })), h(DetailSection, { sectionTitle: 'Metadata' }, h(CodeBlock, { metadata: this.payout.metadata })))))));
+        if (this.errorMessage) {
+            return ErrorState(this.errorMessage);
+        }
+        return (h("payout-details-core", { getPayout: this.getPayout }));
     }
     static get is() { return "justifi-payout-details"; }
     static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["payout-details.scss"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["payout-details.css"]
-        };
-    }
     static get properties() {
         return {
             "payoutId": {
@@ -125,18 +75,17 @@ export class PaymentDetails {
     }
     static get states() {
         return {
-            "payout": {},
-            "loading": {},
+            "getPayout": {},
             "errorMessage": {}
         };
     }
     static get watchers() {
         return [{
                 "propName": "payoutId",
-                "methodName": "updateOnPropChange"
+                "methodName": "propChanged"
             }, {
                 "propName": "authToken",
-                "methodName": "updateOnPropChange"
+                "methodName": "propChanged"
             }];
     }
 }

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

@@ -0,0 +1,55 @@
+import { Payout } from "../../../api";
+import { PayoutService } from "../../../api/services/payout.service";
+import { makeGetPayoutDetails } from "../get-payout-details";
+import mockResponse from "../../../api/mockData/mockPayoutDetailsSuccess.json";
+describe('getPayout', () => {
+    const mockId = '123';
+    const mockAuthToken = '123';
+    let mockServiceInstance;
+    beforeEach(() => {
+        jest.clearAllMocks();
+        mockServiceInstance = new PayoutService();
+        mockServiceInstance.fetchPayout = jest.fn();
+    });
+    it('should call onSuccess with payout on successful fetch', async () => {
+        const onSuccess = jest.fn();
+        const onError = jest.fn();
+        mockServiceInstance.fetchPayout.mockResolvedValue(mockResponse);
+        const getPayout = makeGetPayoutDetails({
+            id: mockId,
+            authToken: mockAuthToken,
+            service: mockServiceInstance,
+        });
+        await getPayout({ onSuccess, onError });
+        expect(onSuccess).toHaveBeenCalledWith(expect.any(Payout));
+        expect(onError).not.toHaveBeenCalled();
+    });
+    it('should call onError with an error message on API failure', async () => {
+        const mockError = new Error('Error fetching payout');
+        const onSuccess = jest.fn();
+        const onError = jest.fn();
+        mockServiceInstance.fetchPayout.mockRejectedValue(mockError);
+        const getPayout = makeGetPayoutDetails({
+            id: mockId,
+            authToken: mockAuthToken,
+            service: mockServiceInstance,
+        });
+        await getPayout({ onSuccess, onError });
+        expect(onSuccess).not.toHaveBeenCalled();
+        expect(onError).toHaveBeenCalledWith(`Error fetching payout details: ${mockError}`);
+    });
+    it('should call onError with an error message on API failure with error message', async () => {
+        const mockError = new Error('Error fetching payout');
+        const onSuccess = jest.fn();
+        const onError = jest.fn();
+        mockServiceInstance.fetchPayout.mockRejectedValue(mockError);
+        const getPayout = makeGetPayoutDetails({
+            id: mockId,
+            authToken: mockAuthToken,
+            service: mockServiceInstance,
+        });
+        await getPayout({ onSuccess, onError });
+        expect(onSuccess).not.toHaveBeenCalled();
+        expect(onError).toHaveBeenCalledWith(`Error fetching payout details: ${mockError}`);
+    });
+});

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

@@ -0,0 +1,72 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { PayoutDetailsCore } from "../payout-details-core";
+import mockPayoutDetailSuccess from "../../../api/mockData/mockPayoutDetailsSuccess.json";
+import { makeGetPayoutDetails } from "../get-payout-details";
+describe('payout-details-core', () => {
+    it('renders loading state initially', async () => {
+        // Define a mock getPayout function as part of the component initialization
+        const mockGetPayout = jest.fn().mockImplementation(({ onSuccess }) => {
+            // Simulate an asynchronous operation without resolving immediately
+            setTimeout(() => onSuccess({ /* mock data */}), 1000);
+        });
+        // Initialize the page with the mock getPayout function included in the component tag
+        const page = await newSpecPage({
+            components: [PayoutDetailsCore],
+            html: `<payout-details-core></payout-details-core>`,
+        });
+        page.rootInstance.componentWillLoad = () => { };
+        page.rootInstance.getPayout = mockGetPayout;
+        // Wait for any state changes to complete
+        await page.waitForChanges();
+        // Assert the loading state is visible in the snapshot
+        expect(page.root).toMatchSnapshot();
+    });
+    it('fetches payout details on connected callback', async () => {
+        const mockService = {
+            fetchPayout: jest.fn().mockResolvedValue(mockPayoutDetailSuccess),
+        };
+        const getPayout = makeGetPayoutDetails({
+            id: 'some-id',
+            authToken: 'some-auth-token',
+            service: mockService,
+        });
+        const page = await newSpecPage({
+            components: [PayoutDetailsCore],
+            html: '<payout-details-core></payout-details-core>',
+        });
+        page.rootInstance.componentWillLoad = () => { };
+        page.rootInstance.getPayout = getPayout;
+        page.rootInstance.fetchData();
+        await page.waitForChanges();
+        expect(mockService.fetchPayout).toHaveBeenCalled(); // Verify the mock service method was called
+        expect(page.rootInstance.payout).toEqual(expect.objectContaining({
+            "id": mockPayoutDetailSuccess.id, // Verify the component state was updated with mock data
+        }));
+        expect(page.root).toMatchSnapshot(); // Verify the rendered output
+    });
+    it('handles fetch payout error correctly', async () => {
+        // Mock the service method that gets called by getPayout
+        const mockService = {
+            fetchPayout: jest.fn().mockRejectedValue(new Error('Fetch error'))
+        };
+        // Real getPayout function but with mocked service
+        const realGetPayoutWithMockedService = makeGetPayoutDetails({
+            id: 'some-id', // Use appropriate id
+            authToken: 'some-auth-token', // Use appropriate auth token
+            service: mockService // Injecting the mocked service
+        });
+        const page = await newSpecPage({
+            components: [PayoutDetailsCore],
+            html: '<payout-details-core></payout-details-core>',
+        });
+        page.rootInstance.componentWillLoad = () => { };
+        // Inject the getPayout function with mocked service into the component
+        page.rootInstance.getPayout = realGetPayoutWithMockedService;
+        // Manually call fetchData if necessary, depending on how your component is set up
+        await page.rootInstance.fetchData();
+        await page.waitForChanges();
+        // Assertions to verify the error handling
+        expect(page.rootInstance.errorMessage).toBe('Error fetching payout details: Error: Fetch error');
+        expect(page.root).toMatchSnapshot();
+    });
+});

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

@@ -0,0 +1,13 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { PayoutDetails } from "../payout-details";
+import { PayoutDetailsCore } from "../payout-details-core";
+describe('payout-details', () => {
+    it('renders error state when no payoutId or authToken', async () => {
+        const page = await newSpecPage({
+            components: [PayoutDetails, PayoutDetailsCore],
+            html: '<justifi-payout-details></justifi-payout-details>',
+        });
+        await page.waitForChanges();
+        expect(page.root).toMatchSnapshot();
+    });
+});

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

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

package/dist/collection/components/payouts-list/payouts-list-core.js

@@ -0,0 +1,181 @@
+import { Host, h } from "@stencil/core";
+import { PayoutStatuses, PayoutStatusesSafeNames, pagingDefaults } from "../../api";
+import { formatCurrency, formatDate, formatTime } from "../../utils/utils";
+import { tableExportedParts } from "../table/exported-parts";
+export class PayoutsListCore {
+    constructor() {
+        this.mapStatusToBadge = (status) => {
+            switch (status) {
+                case PayoutStatuses.scheduled:
+                    return `<span class="badge bg-primary" title='Batched and scheduled to be transferred'>${PayoutStatusesSafeNames[status]}</span>`;
+                case PayoutStatuses.in_transit:
+                    return `<span class="badge bg-primary" title='Transfer to your bank account has been initiated'>${PayoutStatusesSafeNames[status]}</span>`;
+                case PayoutStatuses.failed:
+                    return `<span class="badge bg-danger" title='Transfer to your bank account failed'>${PayoutStatusesSafeNames[status]}</span>`;
+                case PayoutStatuses.canceled:
+                    return `<span class="badge bg-danger" title='Transfer to your bank account failed'>${PayoutStatusesSafeNames[status]}</span>`;
+                case PayoutStatuses.forwarded:
+                    return `<span class="badge bg-secondary" title='This payout initially failed; the funds have been forwarded to your next successful payout'>${PayoutStatusesSafeNames[status]}</span>`;
+                case PayoutStatuses.paid:
+                    return `<span class="badge bg-success" title='Successfully deposited into your bank account'>${PayoutStatusesSafeNames[status]}</span>`;
+            }
+        };
+        this.handleClickPrevious = (beforeCursor) => {
+            const newParams = Object.assign({}, this.params);
+            delete newParams.after_cursor;
+            this.params = (Object.assign(Object.assign({}, newParams), { before_cursor: beforeCursor }));
+        };
+        this.handleClickNext = (afterCursor) => {
+            const newParams = Object.assign({}, this.params);
+            delete newParams.before_cursor;
+            this.params = (Object.assign(Object.assign({}, newParams), { after_cursor: afterCursor }));
+        };
+        this.getPayouts = undefined;
+        this.payouts = [];
+        this.loading = true;
+        this.errorMessage = undefined;
+        this.paging = pagingDefaults;
+        this.params = undefined;
+    }
+    componentWillLoad() {
+        if (this.getPayouts) {
+            this.fetchData();
+        }
+    }
+    updateOnPropChange() {
+        this.fetchData();
+    }
+    fetchData() {
+        this.loading = true;
+        this.getPayouts({
+            params: this.params,
+            onSuccess: ({ payouts, pagingInfo }) => {
+                this.payouts = payouts;
+                this.paging = pagingInfo;
+                this.loading = false;
+            },
+            onError: (errorMessage) => {
+                this.errorMessage = errorMessage;
+                this.loading = false;
+            },
+        });
+    }
+    ;
+    render() {
+        return (h(Host, { exportedparts: tableExportedParts }, h("justifi-table", { rowClickHandler: (e) => {
+                const clickedPayoutID = e.target.closest('tr').dataset.rowEntityId;
+                if (!clickedPayoutID) {
+                    return;
+                }
+                this.rowClicked.emit(this.payouts.find((payout) => payout.id === clickedPayoutID));
+            }, columnData: [
+                ['Paid Out On', 'The date each transaction occurred'],
+                ['Type', 'The type of each transaction'],
+                ['Account', 'The ID of the account associated with each payout'],
+                ['Paid Out To', 'The bank account to which each payout was transferred'],
+                ['Payments', 'Sum of payments in each payout'],
+                ['Refunds', 'Sum of refunds in each payout'],
+                ['Fees', 'Sum of fees in each payout'],
+                ['Other', 'Sum of less common transactions in each payout (disputes, ACH returns, fee refunds, and forwarded balances due to failed payouts)'],
+                ['Payout Amount', 'The net sum of all transactions in each payout. This is the amount you\'ll see reflected on your bank statement'],
+                ['Status', 'The real-time status of each payout']
+            ], entityId: this.payouts.map((payout) => payout.id), rowData: this.payouts.map((payout) => ([
+                {
+                    type: 'head',
+                    value: `
+                    <div class='fw-bold'>${formatDate(payout.created_at)}</div>
+                    <div class='fw-bold'>${formatTime(payout.created_at)}</div>
+                  `,
+                },
+                payout.payout_type,
+                payout.account_id,
+                `${payout.bank_account.full_name} ${payout.bank_account.account_number_last4}`,
+                formatCurrency(payout.payments_total),
+                formatCurrency(payout.refunds_total),
+                formatCurrency(payout.fees_total),
+                formatCurrency(payout.other_total),
+                formatCurrency(payout.amount),
+                {
+                    type: 'inner',
+                    value: this.mapStatusToBadge(payout.status)
+                }
+            ])), loading: this.loading, "error-message": this.errorMessage, params: this.params, paging: Object.assign(Object.assign({}, this.paging), { handleClickNext: this.handleClickNext, handleClickPrevious: this.handleClickPrevious }) })));
+    }
+    static get is() { return "payouts-list-core"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["payouts-list.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["payouts-list.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "getPayouts": {
+                "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 {
+            "payouts": {},
+            "loading": {},
+            "errorMessage": {},
+            "paging": {},
+            "params": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "rowClicked",
+                "name": "payout-row-clicked",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "Payout",
+                    "resolved": "Payout",
+                    "references": {
+                        "Payout": {
+                            "location": "import",
+                            "path": "../../api",
+                            "id": "src/api/index.ts::Payout"
+                        }
+                    }
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "params",
+                "methodName": "updateOnPropChange"
+            }, {
+                "propName": "getPayouts",
+                "methodName": "updateOnPropChange"
+            }];
+    }
+}