@justifi/webcomponents 4.8.2 → 4.9.0

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

@@ -0,0 +1,119 @@
+import { Host, h } from "@stencil/core";
+import { Chart, BarController, Colors, BarElement, CategoryScale, LinearScale, Legend, Tooltip, Title } from "chart.js";
+import { generateChartOptions } from "./chart-utils";
+import { ErrorState, LoadingState } from "../details/utils";
+Chart.register(Colors, BarController, BarElement, CategoryScale, LinearScale, Legend, Tooltip, Title);
+export class GrossPaymentChartCore {
+    constructor() {
+        this.getGrossPayment = undefined;
+        this.grossVolumeReport = undefined;
+        this.loading = true;
+        this.errorMessage = '';
+    }
+    componentDidLoad() {
+        if (this.getGrossPayment) {
+            this.fetchData();
+        }
+    }
+    propChanged() {
+        if (this.getGrossPayment) {
+            this.fetchData();
+        }
+    }
+    grossVolumeReportChanged(grossVolumeReport) {
+        if (grossVolumeReport) {
+            if (!this.chart) {
+                this.initChart(grossVolumeReport);
+            }
+            else {
+                this.updateChartData(grossVolumeReport);
+            }
+        }
+    }
+    async fetchData() {
+        this.loading = true;
+        this.getGrossPayment({
+            onSuccess: (data) => {
+                this.loading = false;
+                this.grossVolumeReport = data;
+            },
+            onError: (error) => {
+                this.loading = false;
+                this.errorMessage = error;
+            }
+        });
+    }
+    initChart(grossVolumeReport) {
+        const { dates, total } = grossVolumeReport;
+        const reversedDates = dates.reverse();
+        const endDate = reversedDates[dates.length - 1].date;
+        const chartOptions = generateChartOptions(total, reversedDates, endDate);
+        this.chart = new Chart(this.chartRef.getContext('2d'), chartOptions);
+    }
+    updateChartData(grossVolumeReport) {
+        const newData = grossVolumeReport.dates.map((date) => date.value);
+        this.chart.data.datasets.forEach((dataset) => {
+            dataset.data = newData;
+        });
+        this.chart.update();
+    }
+    disconnectedCallback() {
+        if (this.chart) {
+            this.chart.destroy();
+        }
+    }
+    render() {
+        return (h(Host, null, this.loading && LoadingState(), !this.errorMessage ? h("canvas", { id: "chart", ref: (elem) => this.chartRef = elem }) : ErrorState(this.errorMessage)));
+    }
+    static get is() { return "gross-payment-chart-core"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["gross-payment-chart.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["gross-payment-chart.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "getGrossPayment": {
+                "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 {
+            "grossVolumeReport": {},
+            "loading": {},
+            "errorMessage": {}
+        };
+    }
+    static get watchers() {
+        return [{
+                "propName": "getGrossPayment",
+                "methodName": "propChanged"
+            }, {
+                "propName": "grossVolumeReport",
+                "methodName": "grossVolumeReportChanged"
+            }];
+    }
+}

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

@@ -1,84 +1,40 @@
-import { Host, h } from "@stencil/core";
-import { Api } from "../../api";
-import { Chart, BarController, Colors, BarElement, CategoryScale, LinearScale, Legend, Tooltip, Title } from "chart.js";
-import { generateChartOptions } from "./chart-utils";
+import { h } from "@stencil/core";
+import { ReportsService } from "../../api/services/reports.service";
+import { makeGetGrossPaymentChartData } from "./get-gross-payment-chart-data";
 import { ErrorState } from "../details/utils";
-import { config } from "../../../config";
 export class GrossPaymentChart {
     constructor() {
         this.accountId = undefined;
         this.authToken = undefined;
-        this.data = undefined;
-        this.total = undefined;
-        this.dates = undefined;
-        this.endDate = undefined;
-        this.loading = true;
-        this.errorMessage = '';
+        this.getGrossPayment = undefined;
+        this.errorMessage = null;
     }
-    updateOnPropChange() {
-        this.fetchData();
+    componentWillLoad() {
+        this.initializeGetGrossPayment();
     }
-    connectedCallback() {
-        this.fetchData();
+    propChanged() {
+        this.initializeGetGrossPayment();
     }
-    componentDidRender() {
-        this.renderChart();
-    }
-    async fetchData() {
-        if (!this.accountId || !this.authToken) {
-            this.errorMessage = "Can not fetch any data without an AccountID and an AuthToken";
-            this.loading = false;
-            return;
-        }
-        this.loading = true;
-        try {
-            const api = Api(this.authToken, config.proxyApiOrigin);
-            const endpoint = `account/${this.accountId}/reports/gross_volume`;
-            const response = await api.get(endpoint);
-            if (!response.error) {
-                this.total = response === null || response === void 0 ? void 0 : response.data.total;
-                this.dates = response === null || response === void 0 ? void 0 : response.data.dates.reverse();
-                this.endDate = this.dates[this.dates.length - 1].date;
-            }
-            else {
-                this.errorMessage = `Error trying to fetch data : ${response.error}`;
-                console.error(this.errorMessage);
-            }
-        }
-        catch (error) {
-            this.errorMessage = `Error trying to fetch data : ${error}`;
-            console.error(this.errorMessage);
-        }
-        finally {
-            this.loading = false;
-        }
-    }
-    renderChart() {
-        if (this.chart) {
-            this.chart.update();
+    initializeGetGrossPayment() {
+        if (this.accountId && this.authToken) {
+            this.getGrossPayment = makeGetGrossPaymentChartData({
+                id: this.accountId,
+                authToken: this.authToken,
+                service: new ReportsService(),
+            });
         }
-        else if (this.chartRef && this.endDate) {
-            Chart.register(Colors, BarController, BarElement, CategoryScale, LinearScale, Legend, Tooltip, Title);
-            this.chart = new Chart(this.chartRef.getContext("2d"), generateChartOptions(this.total, this.dates, this.endDate));
-            this.chart.render();
+        else {
+            this.errorMessage = 'Account ID and Auth Token are required';
         }
     }
     render() {
-        return (h(Host, null, this.errorMessage ? ErrorState(this.errorMessage)
-            : h("canvas", { id: "chart", ref: (elem) => this.chartRef = elem })));
+        if (this.errorMessage) {
+            return ErrorState(this.errorMessage);
+        }
+        return (h("gross-payment-chart-core", { getGrossPayment: this.getGrossPayment }));
     }
     static get is() { return "justifi-gross-payment-chart"; }
     static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["gross-payment-chart.scss"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["gross-payment-chart.css"]
-        };
-    }
     static get properties() {
         return {
             "accountId": {
@@ -119,21 +75,17 @@ export class GrossPaymentChart {
     }
     static get states() {
         return {
-            "data": {},
-            "total": {},
-            "dates": {},
-            "endDate": {},
-            "loading": {},
+            "getGrossPayment": {},
             "errorMessage": {}
         };
     }
     static get watchers() {
         return [{
                 "propName": "accountId",
-                "methodName": "updateOnPropChange"
+                "methodName": "propChanged"
             }, {
                 "propName": "authToken",
-                "methodName": "updateOnPropChange"
+                "methodName": "propChanged"
             }];
     }
 }

package/dist/collection/components/gross-payment-chart/test/get-gross-payment-chart-data.spec.js

@@ -0,0 +1,69 @@
+import { makeGetGrossPaymentChartData } from "../get-gross-payment-chart-data";
+import { ReportsService } from "../../../api/services/reports.service";
+import { mockGrossVolumeReport } from "../../../api/mockData/mockGrossVolumeReport";
+const mockFetchGrossVolumeChartData = jest.fn().mockResolvedValue({
+    data: mockGrossVolumeReport,
+    error: null,
+});
+jest.mock('../../../api/services/reports.service', () => ({
+    ReportsService: jest.fn().mockImplementation(() => ({
+        fetchGrossVolumeChartData: mockFetchGrossVolumeChartData,
+    })),
+}));
+describe('makeGetGrossPaymentChartData', () => {
+    const mockId = 'test-id';
+    const mockAuthToken = 'test-token';
+    let mockService;
+    beforeEach(() => {
+        jest.clearAllMocks();
+        mockService = new ReportsService();
+        mockService.fetchGrossVolumeChartData = mockFetchGrossVolumeChartData;
+    });
+    it('calls onSuccess with data on successful fetch', async () => {
+        mockFetchGrossVolumeChartData.mockResolvedValue({
+            data: mockGrossVolumeReport,
+            error: null,
+        });
+        const onSuccess = jest.fn();
+        const onError = jest.fn();
+        const getGrossPaymentChartData = makeGetGrossPaymentChartData({
+            id: mockId,
+            authToken: mockAuthToken,
+            service: mockService,
+        });
+        await getGrossPaymentChartData({ onSuccess, onError });
+        expect(onSuccess).toHaveBeenCalledWith(mockGrossVolumeReport);
+        expect(onError).not.toHaveBeenCalled();
+    });
+    it('calls onError with message on API error', async () => {
+        const mockError = 'API error';
+        mockFetchGrossVolumeChartData.mockResolvedValue({
+            error: mockError,
+            data: null,
+        });
+        const onSuccess = jest.fn();
+        const onError = jest.fn();
+        const getGrossPaymentChartData = makeGetGrossPaymentChartData({
+            id: mockId,
+            authToken: mockAuthToken,
+            service: mockService,
+        });
+        await getGrossPaymentChartData({ onSuccess, onError });
+        expect(onError).toHaveBeenCalledWith(`Error trying to fetch data : ${mockError}`);
+        expect(onSuccess).not.toHaveBeenCalled();
+    });
+    it('calls onError with message on exception', async () => {
+        const mockError = new Error('Network error');
+        mockFetchGrossVolumeChartData.mockRejectedValue(mockError);
+        const onSuccess = jest.fn();
+        const onError = jest.fn();
+        const getGrossPaymentChartData = makeGetGrossPaymentChartData({
+            id: mockId,
+            authToken: mockAuthToken,
+            service: mockService,
+        });
+        await getGrossPaymentChartData({ onSuccess, onError });
+        expect(onError).toHaveBeenCalledWith(`Error trying to fetch data : ${mockError}`);
+        expect(onSuccess).not.toHaveBeenCalled();
+    });
+});

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

@@ -0,0 +1,64 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { GrossPaymentChartCore } from "../gross-payment-chart-core";
+import mockSuccessResponse from "../../../api/mockResponses/mockGrossVolumeReportSuccess.json";
+import { makeGetGrossPaymentChartData } from "../get-gross-payment-chart-data";
+const mockDataResponse = mockSuccessResponse;
+// To prevent this error https://github.com/reactchartjs/react-chartjs-2/issues/155
+jest.mock('chart.js', () => ({
+    Chart: () => null,
+}));
+describe('gross-payment-chart', () => {
+    it('should initialize with default states', async () => {
+        const page = await newSpecPage({
+            components: [GrossPaymentChartCore],
+            html: `<gross-payment-chart-core />`,
+        });
+        expect(page.rootInstance.loading).toBeTruthy();
+        expect(page.rootInstance.errorMessage).toBe('');
+    });
+    it('updates the state properly', async () => {
+        const mockGetSuccessResponse = {
+            fetchGrossVolumeChartData: jest.fn().mockResolvedValue(mockDataResponse)
+        };
+        const getGrossPayment = makeGetGrossPaymentChartData({
+            id: 'my-account-id',
+            authToken: 'my-token',
+            service: mockGetSuccessResponse
+        });
+        const page = await newSpecPage({
+            components: [GrossPaymentChartCore],
+            html: `<gross-payment-chart-core />`,
+        });
+        page.rootInstance.componentWillLoad = () => { };
+        page.rootInstance.getGrossPayment = getGrossPayment;
+        page.rootInstance.fetchData();
+        await page.waitForChanges();
+        expect(page.rootInstance.grossVolumeReport).toEqual(mockDataResponse.data);
+    });
+    it('matches the snapshot when in loading state', async () => {
+        const page = await newSpecPage({
+            components: [GrossPaymentChartCore],
+            html: `<gross-payment-chart-core></gross-payment-chart-core>`,
+        });
+        expect(page.root).toMatchSnapshot();
+    });
+    // tests error state
+    it('matches the snapshot when in error state', async () => {
+        const getGrossPayment = makeGetGrossPaymentChartData({
+            id: 'my-account-id',
+            authToken: 'my-token',
+            service: {
+                fetchGrossVolumeChartData: jest.fn().mockRejectedValue('Error message')
+            }
+        });
+        const page = await newSpecPage({
+            components: [GrossPaymentChartCore],
+            html: `<gross-payment-chart-core></gross-payment-chart-core>`,
+        });
+        page.rootInstance.componentWillLoad = () => { };
+        page.rootInstance.getGrossPayment = getGrossPayment;
+        page.rootInstance.fetchData();
+        await page.waitForChanges();
+        expect(page.root).toMatchSnapshot();
+    });
+});

package/dist/collection/components/gross-payment-chart/test/gross-payment-chart.spec.js

@@ -1,14 +1,29 @@
 import { newSpecPage } from "@stencil/core/testing";
 import { GrossPaymentChart } from "../gross-payment-chart";
-describe('gross-payment-chart', () => {
-    it('renders', async () => {
+import { GrossPaymentChartCore } from "../gross-payment-chart-core";
+describe('GrossPaymentChart', () => {
+    it('renders an error when no accountId and authToken is passed', async () => {
         const page = await newSpecPage({
-            components: [GrossPaymentChart],
-            html: `<gross-payment-chart></gross-payment-chart>`,
+            components: [GrossPaymentChart, GrossPaymentChartCore],
+            html: '<justifi-gross-payment-chart></justifi-gross-payment-chart>',
         });
-        expect(page.root).toEqualHtml(`
-      <gross-payment-chart>
-      </gross-payment-chart>
-    `);
+        await page.waitForChanges();
+        expect(page.root).toMatchSnapshot();
+    });
+    it('renders an error when no accountId is passed', async () => {
+        const page = await newSpecPage({
+            components: [GrossPaymentChart, GrossPaymentChartCore],
+            html: '<justifi-gross-payment-chart auth-token="abc"></justifi-gross-payment-chart>',
+        });
+        await page.waitForChanges();
+        expect(page.root).toMatchSnapshot();
+    });
+    it('renders an error when no authToken is passed', async () => {
+        const page = await newSpecPage({
+            components: [GrossPaymentChart, GrossPaymentChartCore],
+            html: '<justifi-gross-payment-chart account-id="abc"></justifi-gross-payment-chart>',
+        });
+        await page.waitForChanges();
+        expect(page.root).toMatchSnapshot();
     });
 });

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

@@ -1,6 +1,6 @@
 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";
+import { CodeBlock, DetailItem, DetailSectionTitle, EntityHeadInfo, EntityHeadInfoItem, ErrorState, LoadingState } from "../details/utils";
 export class PaymentDetailsCore {
     constructor() {
         this.getPaymentDetails = undefined;
@@ -33,7 +33,13 @@ export class PaymentDetailsCore {
     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 })))))));
+            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(DetailSectionTitle, { sectionTitle: "Details" }), h("div", { class: "d-table gap-2 w-100" }, 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(DetailSectionTitle, { sectionTitle: "Payment Method" }),
+            h("div", { class: "d-table gap-2 w-100" }, 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(DetailSectionTitle, { sectionTitle: "Payment Method" }),
+            h("div", { class: "d-table gap-2 w-100" }, 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(DetailSectionTitle, { sectionTitle: 'Metadata' }), h("div", { class: "d-table gap-2 w-100" }, h(CodeBlock, { metadata: this.payment.metadata })))))));
     }
     static get is() { return "payment-details-core"; }
     static get originalStyleUrls() {

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

@@ -17,7 +17,6 @@ import { ErrorState } from "../details/utils";
   * @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

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

@@ -204,7 +204,7 @@ export class PaymentForm {
                 },
                 "complexType": {
                     "original": "CreatePaymentMethodResponse",
-                    "resolved": "BankAccountCreateResponse | CardCreateResponse | PaymentMethodErrorResponse",
+                    "resolved": "BankAccountCreateResponse | CardCreateResponse",
                     "references": {
                         "CreatePaymentMethodResponse": {
                             "location": "import",

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

@@ -212,7 +212,7 @@ export class PaymentMethodForm {
                 },
                 "complexType": {
                     "original": "CreatePaymentMethodResponse",
-                    "resolved": "BankAccountCreateResponse | CardCreateResponse | PaymentMethodErrorResponse",
+                    "resolved": "BankAccountCreateResponse | CardCreateResponse",
                     "references": {
                         "CreatePaymentMethodResponse": {
                             "location": "import",

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

@@ -1,6 +1,6 @@
 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";
+import { CodeBlock, DetailItem, DetailSectionTitle, EntityHeadInfo, EntityHeadInfoItem, ErrorState, LoadingState } from "../details/utils";
 export class PayoutDetailsCore {
     constructor() {
         this.getPayout = undefined;
@@ -33,7 +33,7 @@ export class PayoutDetailsCore {
     }
     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 })))))));
+        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(DetailSectionTitle, { sectionTitle: "Details" }), h("div", { class: "d-table gap-2 w-100" }, 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(DetailSectionTitle, { sectionTitle: "Account" }), h("div", { class: "d-table gap-2 w-100" }, 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(DetailSectionTitle, { sectionTitle: 'Metadata' }), h("div", { class: "d-table gap-2 w-100" }, h(CodeBlock, { metadata: this.payout.metadata })))))));
     }
     static get is() { return "payout-details-core"; }
     static get originalStyleUrls() {

package/dist/collection/components/subaccount-details/subaccount-account-details/subaccount-account-details.js

@@ -1,5 +1,5 @@
 import { Host, h } from "@stencil/core";
-import { DetailItem, DetailSection } from "../../details/utils";
+import { DetailItem, DetailSectionTitle } from "../../details/utils";
 export class SubaccountAccountDetails {
     constructor() {
         this.subaccount = undefined;
@@ -7,7 +7,7 @@ export class SubaccountAccountDetails {
     }
     render() {
         var _a, _b, _c;
-        return (h(Host, null, h("div", { class: 'p-2' }, h(DetailSection, { sectionTitle: 'Account Details' }, h("div", { class: "row gy-3" }, h("div", { class: "col-12 col-md-6" }, h(DetailItem, { title: 'Name', value: (_a = this.subaccount) === null || _a === void 0 ? void 0 : _a.name }), h(DetailItem, { title: 'Terms of Service Accepted', value: (_c = (_b = this.onboardingData) === null || _b === void 0 ? void 0 : _b.payload) === null || _c === void 0 ? void 0 : _c.terms_and_conditions.accepted.toString() }), h(DetailItem, { title: 'Business Entity', value: 'something here' })))))));
+        return (h(Host, null, h("div", { class: 'p-2' }, h(DetailSectionTitle, { sectionTitle: 'Account Details' }), h("div", { class: "d-table gap-2 w-100" }, h("div", { class: "row gy-3" }, h("div", { class: "col-12 col-md-6" }, h(DetailItem, { title: 'Name', value: (_a = this.subaccount) === null || _a === void 0 ? void 0 : _a.name }), h(DetailItem, { title: 'Terms of Service Accepted', value: (_c = (_b = this.onboardingData) === null || _b === void 0 ? void 0 : _b.payload) === null || _c === void 0 ? void 0 : _c.terms_and_conditions.accepted.toString() }), h(DetailItem, { title: 'Business Entity', value: 'something here' })))))));
     }
     static get is() { return "subaccount-account-details"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/subaccount-details/subaccount-bank-details/subaccount-bank-details.js

@@ -1,12 +1,12 @@
 import { Host, h } from "@stencil/core";
-import { DetailItem, DetailSection } from "../../details/utils";
+import { DetailItem, DetailSectionTitle } from "../../details/utils";
 export class SubaccountBankDetails {
     constructor() {
         this.data = undefined;
     }
     render() {
         var _a, _b, _c, _d, _e;
-        return (h(Host, null, h(DetailSection, { sectionTitle: 'Bank Account Details' }, h("div", { class: "row gy-3" }, h("div", { class: "col-12 col-md-6" }, h(DetailItem, { title: "Bank Name", value: (_a = this.data) === null || _a === void 0 ? void 0 : _a.bank_name }), h(DetailItem, { title: "Account Type", value: (_b = this.data) === null || _b === void 0 ? void 0 : _b.account_type }), h(DetailItem, { title: "Account Number", value: (_c = this.data) === null || _c === void 0 ? void 0 : _c.account_number }), h(DetailItem, { title: "Routing Number", value: (_d = this.data) === null || _d === void 0 ? void 0 : _d.routing_number }), h(DetailItem, { title: "Account Nickname", value: (_e = this.data) === null || _e === void 0 ? void 0 : _e.account_nickname }))))));
+        return (h(Host, null, h(DetailSectionTitle, { sectionTitle: 'Bank Account Details' }), h("div", { class: "d-table gap-2 w-100" }, h("div", { class: "row gy-3" }, h("div", { class: "col-12 col-md-6" }, h(DetailItem, { title: "Bank Name", value: (_a = this.data) === null || _a === void 0 ? void 0 : _a.bank_name }), h(DetailItem, { title: "Account Type", value: (_b = this.data) === null || _b === void 0 ? void 0 : _b.account_type }), h(DetailItem, { title: "Account Number", value: (_c = this.data) === null || _c === void 0 ? void 0 : _c.account_number }), h(DetailItem, { title: "Routing Number", value: (_d = this.data) === null || _d === void 0 ? void 0 : _d.routing_number }), h(DetailItem, { title: "Account Nickname", value: (_e = this.data) === null || _e === void 0 ? void 0 : _e.account_nickname }))))));
     }
     static get is() { return "subaccount-bank-details"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/subaccount-details/subaccount-merchant-details/subaccount-merchant-details.js

@@ -1,5 +1,5 @@
 import { Host, h } from "@stencil/core";
-import { DetailItem, DetailSection } from "../../details/utils";
+import { DetailItem, DetailSectionTitle } from "../../details/utils";
 import { formatLegalAddress, snakeCaseToHumanReadable } from "../../../utils/utils";
 export class SubaccountMerchantDetails {
     constructor() {
@@ -7,7 +7,7 @@ export class SubaccountMerchantDetails {
     }
     render() {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3;
-        return (h(Host, null, h("div", { class: 'p-2' }, h(DetailSection, { sectionTitle: 'Merchant Details' }, h("div", { class: "row gy-3" }, h("div", { class: "col-12 col-md-6" }, h(DetailItem, { title: 'Doing Business As', value: (_d = (_c = (_b = (_a = this.onboardingData) === null || _a === void 0 ? void 0 : _a.payload) === null || _b === void 0 ? void 0 : _b.business_details) === null || _c === void 0 ? void 0 : _c.doing_business_as) === null || _d === void 0 ? void 0 : _d.name }), h(DetailItem, { title: 'Website', value: (_g = (_f = (_e = this.onboardingData) === null || _e === void 0 ? void 0 : _e.payload) === null || _f === void 0 ? void 0 : _f.business_details) === null || _g === void 0 ? void 0 : _g.url }), h(DetailItem, { title: 'Business Email', value: (_k = (_j = (_h = this.onboardingData) === null || _h === void 0 ? void 0 : _h.payload) === null || _j === void 0 ? void 0 : _j.business_details) === null || _k === void 0 ? void 0 : _k.email }), h(DetailItem, { title: 'Phone Number', value: (_o = (_m = (_l = this.onboardingData) === null || _l === void 0 ? void 0 : _l.payload) === null || _m === void 0 ? void 0 : _m.business_details) === null || _o === void 0 ? void 0 : _o.phone }), h(DetailItem, { title: 'Address', value: ((_r = (_q = (_p = this.onboardingData) === null || _p === void 0 ? void 0 : _p.payload) === null || _q === void 0 ? void 0 : _q.business_details) === null || _r === void 0 ? void 0 : _r.legal) ? `${formatLegalAddress((_u = (_t = (_s = this.onboardingData) === null || _s === void 0 ? void 0 : _s.payload) === null || _t === void 0 ? void 0 : _t.business_details) === null || _u === void 0 ? void 0 : _u.legal)}` : '' })), h("div", { class: "col-12 col-md-6" }, h(DetailItem, { title: 'Business Structure', value: ((_x = (_w = (_v = this.onboardingData) === null || _v === void 0 ? void 0 : _v.payload) === null || _w === void 0 ? void 0 : _w.business_details) === null || _x === void 0 ? void 0 : _x.structure) ? snakeCaseToHumanReadable((_0 = (_z = (_y = this.onboardingData) === null || _y === void 0 ? void 0 : _y.payload) === null || _z === void 0 ? void 0 : _z.business_details) === null || _0 === void 0 ? void 0 : _0.structure) : '' }), h(DetailItem, { title: 'Business Type', value: (_3 = (_2 = (_1 = this.onboardingData) === null || _1 === void 0 ? void 0 : _1.payload) === null || _2 === void 0 ? void 0 : _2.business_details) === null || _3 === void 0 ? void 0 : _3.type })))))));
+        return (h(Host, null, h("div", { class: 'p-2' }, h(DetailSectionTitle, { sectionTitle: 'Merchant Details' }), h("div", { class: "d-table gap-2 w-100" }, h("div", { class: "row gy-3" }, h("div", { class: "col-12 col-md-6" }, h(DetailItem, { title: 'Doing Business As', value: (_d = (_c = (_b = (_a = this.onboardingData) === null || _a === void 0 ? void 0 : _a.payload) === null || _b === void 0 ? void 0 : _b.business_details) === null || _c === void 0 ? void 0 : _c.doing_business_as) === null || _d === void 0 ? void 0 : _d.name }), h(DetailItem, { title: 'Website', value: (_g = (_f = (_e = this.onboardingData) === null || _e === void 0 ? void 0 : _e.payload) === null || _f === void 0 ? void 0 : _f.business_details) === null || _g === void 0 ? void 0 : _g.url }), h(DetailItem, { title: 'Business Email', value: (_k = (_j = (_h = this.onboardingData) === null || _h === void 0 ? void 0 : _h.payload) === null || _j === void 0 ? void 0 : _j.business_details) === null || _k === void 0 ? void 0 : _k.email }), h(DetailItem, { title: 'Phone Number', value: (_o = (_m = (_l = this.onboardingData) === null || _l === void 0 ? void 0 : _l.payload) === null || _m === void 0 ? void 0 : _m.business_details) === null || _o === void 0 ? void 0 : _o.phone }), h(DetailItem, { title: 'Address', value: ((_r = (_q = (_p = this.onboardingData) === null || _p === void 0 ? void 0 : _p.payload) === null || _q === void 0 ? void 0 : _q.business_details) === null || _r === void 0 ? void 0 : _r.legal) ? `${formatLegalAddress((_u = (_t = (_s = this.onboardingData) === null || _s === void 0 ? void 0 : _s.payload) === null || _t === void 0 ? void 0 : _t.business_details) === null || _u === void 0 ? void 0 : _u.legal)}` : '' })), h("div", { class: "col-12 col-md-6" }, h(DetailItem, { title: 'Business Structure', value: ((_x = (_w = (_v = this.onboardingData) === null || _v === void 0 ? void 0 : _v.payload) === null || _w === void 0 ? void 0 : _w.business_details) === null || _x === void 0 ? void 0 : _x.structure) ? snakeCaseToHumanReadable((_0 = (_z = (_y = this.onboardingData) === null || _y === void 0 ? void 0 : _y.payload) === null || _z === void 0 ? void 0 : _z.business_details) === null || _0 === void 0 ? void 0 : _0.structure) : '' }), h(DetailItem, { title: 'Business Type', value: (_3 = (_2 = (_1 = this.onboardingData) === null || _1 === void 0 ? void 0 : _1.payload) === null || _2 === void 0 ? void 0 : _2.business_details) === null || _3 === void 0 ? void 0 : _3.type })))))));
     }
     static get is() { return "subaccount-merchant-details"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/subaccount-details/subaccount-owners-details/subaccount-owners-details.js

@@ -1,11 +1,11 @@
 import { Host, h } from "@stencil/core";
-import { DetailItem, DetailSection } from "../../details/utils";
+import { DetailItem, DetailSectionTitle } from "../../details/utils";
 export class SubaccountOwnersDetails {
     constructor() {
         this.data = undefined;
     }
     render() {
-        return (h(Host, null, h("div", { class: 'p-2' }, h(DetailSection, { sectionTitle: 'Owners' }, h("div", { class: "row gy-3" }, this.data && this.data.map((owner) => {
+        return (h(Host, null, h("div", { class: 'p-2' }, h(DetailSectionTitle, { sectionTitle: 'Owners' }), h("div", { class: "d-table gap-2 w-100" }, h("div", { class: "row gy-3" }, this.data && this.data.map((owner) => {
             return (h("div", { class: "col-12 col-md-6" }, h(DetailItem, { title: 'Owner Name', value: owner.name }), h(DetailItem, { title: 'Owner Title', value: owner.title }), h(DetailItem, { title: 'Owner Email', value: owner.email }), h(DetailItem, { title: 'Owner Phone', value: owner.phone })));
         }))))));
     }

package/dist/collection/components/subaccount-details/subaccount-representative-details/subaccount-representative-details.js

@@ -1,5 +1,5 @@
 import { Host, h } from "@stencil/core";
-import { DetailItem, DetailSection } from "../../details/utils";
+import { DetailItem, DetailSectionTitle } from "../../details/utils";
 import { formatMediumDate } from "../../../utils/utils";
 export class SubaccountRepresentativeDetails {
     constructor() {
@@ -7,7 +7,7 @@ export class SubaccountRepresentativeDetails {
     }
     render() {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-        return (h(Host, null, h("div", { class: 'p-2' }, h(DetailSection, { sectionTitle: 'Representative' }, h("div", { class: "row gy-3" }, h("div", { class: "col-12 col-md-6" }, h(DetailItem, { title: "Name", value: (_a = this.data) === null || _a === void 0 ? void 0 : _a.name }), h(DetailItem, { title: "Date of Birth", value: formatMediumDate(new Date(Number((_b = this.data) === null || _b === void 0 ? void 0 : _b.dob_year), Number((_c = this.data) === null || _c === void 0 ? void 0 : _c.dob_month) - 1, Number((_d = this.data) === null || _d === void 0 ? void 0 : _d.dob_day))) }), h(DetailItem, { title: "Email", value: (_e = this.data) === null || _e === void 0 ? void 0 : _e.email }), h(DetailItem, { title: "Last 4 SSN Digits", value: (_f = this.data) === null || _f === void 0 ? void 0 : _f.ssn_last4 })), h("div", { class: "col-12 col-md-6" }, h(DetailItem, { title: "Title", value: (_g = this.data) === null || _g === void 0 ? void 0 : _g.title }), h(DetailItem, { title: "Phone", value: (_h = this.data) === null || _h === void 0 ? void 0 : _h.phone }), h(DetailItem, { title: "Representative Address", value: (_j = this.data) === null || _j === void 0 ? void 0 : _j.address_line1 })))))));
+        return (h(Host, null, h("div", { class: 'p-2' }, h(DetailSectionTitle, { sectionTitle: 'Representative' }), h("div", { class: "d-table gap-2 w-100" }, h("div", { class: "row gy-3" }, h("div", { class: "col-12 col-md-6" }, h(DetailItem, { title: "Name", value: (_a = this.data) === null || _a === void 0 ? void 0 : _a.name }), h(DetailItem, { title: "Date of Birth", value: formatMediumDate(new Date(Number((_b = this.data) === null || _b === void 0 ? void 0 : _b.dob_year), Number((_c = this.data) === null || _c === void 0 ? void 0 : _c.dob_month) - 1, Number((_d = this.data) === null || _d === void 0 ? void 0 : _d.dob_day))) }), h(DetailItem, { title: "Email", value: (_e = this.data) === null || _e === void 0 ? void 0 : _e.email }), h(DetailItem, { title: "Last 4 SSN Digits", value: (_f = this.data) === null || _f === void 0 ? void 0 : _f.ssn_last4 })), h("div", { class: "col-12 col-md-6" }, h(DetailItem, { title: "Title", value: (_g = this.data) === null || _g === void 0 ? void 0 : _g.title }), h(DetailItem, { title: "Phone", value: (_h = this.data) === null || _h === void 0 ? void 0 : _h.phone }), h(DetailItem, { title: "Representative Address", value: (_j = this.data) === null || _j === void 0 ? void 0 : _j.address_line1 })))))));
     }
     static get is() { return "subaccount-representative-details"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/subaccount-details/subaccount-terms-details/subaccount-terms-details.js

@@ -1,12 +1,12 @@
 import { Host, h } from "@stencil/core";
-import { DetailItem, DetailSection } from "../../details/utils";
+import { DetailItem, DetailSectionTitle } from "../../details/utils";
 export class SubaccountTermsDetails {
     constructor() {
         this.data = undefined;
     }
     render() {
         var _a, _b, _c, _d;
-        return (h(Host, null, h(DetailSection, { sectionTitle: 'Terms and Conditions' }, h("div", { class: "row gy-3" }, h("div", { class: "col-12 col-md-6" }, h(DetailItem, { title: "IP", value: (_a = this.data) === null || _a === void 0 ? void 0 : _a.ip }), h(DetailItem, { title: "Accepted?", value: (_c = (_b = this.data) === null || _b === void 0 ? void 0 : _b.accepted) === null || _c === void 0 ? void 0 : _c.toString() }), h(DetailItem, { title: "User Agent", value: (_d = this.data) === null || _d === void 0 ? void 0 : _d.user_agent }))))));
+        return (h(Host, null, h(DetailSectionTitle, { sectionTitle: 'Terms and Conditions' }), h("div", { class: "d-table gap-2 w-100" }, h("div", { class: "row gy-3" }, h("div", { class: "col-12 col-md-6" }, h(DetailItem, { title: "IP", value: (_a = this.data) === null || _a === void 0 ? void 0 : _a.ip }), h(DetailItem, { title: "Accepted?", value: (_c = (_b = this.data) === null || _b === void 0 ? void 0 : _b.accepted) === null || _c === void 0 ? void 0 : _c.toString() }), h(DetailItem, { title: "User Agent", value: (_d = this.data) === null || _d === void 0 ? void 0 : _d.user_agent }))))));
     }
     static get is() { return "subaccount-terms-details"; }
     static get encapsulation() { return "shadow"; }