@justifi/webcomponents 4.7.5 → 4.7.6

package/dist/collection/components/business-form/business-form.css

@@ -7727,6 +7727,101 @@ progress {
     display: none !important;
   }
 }
+.alert {
+  --bs-alert-bg: transparent;
+  --bs-alert-padding-x: 1rem;
+  --bs-alert-padding-y: 1rem;
+  --bs-alert-margin-bottom: 1rem;
+  --bs-alert-color: inherit;
+  --bs-alert-border-color: transparent;
+  --bs-alert-border: var(--bs-border-width) solid var(--bs-alert-border-color);
+  --bs-alert-border-radius: var(--bs-border-radius);
+  --bs-alert-link-color: inherit;
+  position: relative;
+  padding: var(--bs-alert-padding-y) var(--bs-alert-padding-x);
+  margin-bottom: var(--bs-alert-margin-bottom);
+  color: var(--bs-alert-color);
+  background-color: var(--bs-alert-bg);
+  border: var(--bs-alert-border);
+  border-radius: var(--bs-alert-border-radius);
+}
+
+.alert-heading {
+  color: inherit;
+}
+
+.alert-link {
+  font-weight: 700;
+  color: var(--bs-alert-link-color);
+}
+
+.alert-dismissible {
+  padding-right: 3rem;
+}
+.alert-dismissible .btn-close {
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: 2;
+  padding: 1.25rem 1rem;
+}
+
+.alert-primary {
+  --bs-alert-color: var(--bs-primary-text-emphasis);
+  --bs-alert-bg: var(--bs-primary-bg-subtle);
+  --bs-alert-border-color: var(--bs-primary-border-subtle);
+  --bs-alert-link-color: var(--bs-primary-text-emphasis);
+}
+
+.alert-secondary {
+  --bs-alert-color: var(--bs-secondary-text-emphasis);
+  --bs-alert-bg: var(--bs-secondary-bg-subtle);
+  --bs-alert-border-color: var(--bs-secondary-border-subtle);
+  --bs-alert-link-color: var(--bs-secondary-text-emphasis);
+}
+
+.alert-success {
+  --bs-alert-color: var(--bs-success-text-emphasis);
+  --bs-alert-bg: var(--bs-success-bg-subtle);
+  --bs-alert-border-color: var(--bs-success-border-subtle);
+  --bs-alert-link-color: var(--bs-success-text-emphasis);
+}
+
+.alert-info {
+  --bs-alert-color: var(--bs-info-text-emphasis);
+  --bs-alert-bg: var(--bs-info-bg-subtle);
+  --bs-alert-border-color: var(--bs-info-border-subtle);
+  --bs-alert-link-color: var(--bs-info-text-emphasis);
+}
+
+.alert-warning {
+  --bs-alert-color: var(--bs-warning-text-emphasis);
+  --bs-alert-bg: var(--bs-warning-bg-subtle);
+  --bs-alert-border-color: var(--bs-warning-border-subtle);
+  --bs-alert-link-color: var(--bs-warning-text-emphasis);
+}
+
+.alert-danger {
+  --bs-alert-color: var(--bs-danger-text-emphasis);
+  --bs-alert-bg: var(--bs-danger-bg-subtle);
+  --bs-alert-border-color: var(--bs-danger-border-subtle);
+  --bs-alert-link-color: var(--bs-danger-text-emphasis);
+}
+
+.alert-light {
+  --bs-alert-color: var(--bs-light-text-emphasis);
+  --bs-alert-bg: var(--bs-light-bg-subtle);
+  --bs-alert-border-color: var(--bs-light-border-subtle);
+  --bs-alert-link-color: var(--bs-light-text-emphasis);
+}
+
+.alert-dark {
+  --bs-alert-color: var(--bs-dark-text-emphasis);
+  --bs-alert-bg: var(--bs-dark-bg-subtle);
+  --bs-alert-border-color: var(--bs-dark-border-subtle);
+  --bs-alert-link-color: var(--bs-dark-text-emphasis);
+}
+
 :host {
   font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   font-size: 1rem;

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

@@ -4,16 +4,26 @@ import businessFormSchema from "./business-form-schema";
 import { Api } from "../../api";
 import { parseForPatching } from "./helpers";
 import { config } from "../../../config";
+import { FormAlert } from "../form/utils";
 /**
  * @exportedPart label: Label for inputs
  * @exportedPart input: The input fields
  * @exportedPart input-invalid: Invalid state for inputfs
  */
 export class BusinessForm {
+    get submitDisabled() {
+        return !this.authToken || this.isLoading || this.serverError;
+    }
+    get showErrors() {
+        return this.serverError && !this.hideErrors;
+    }
     constructor() {
         this.authToken = undefined;
         this.businessId = undefined;
+        this.hideErrors = undefined;
         this.isLoading = false;
+        this.serverError = false;
+        this.errorMessage = '';
         this.sendData = this.sendData.bind(this);
         this.fetchData = this.fetchData.bind(this);
     }
@@ -50,7 +60,8 @@ export class BusinessForm {
             }
         }
         catch (error) {
-            console.error('Error sending data:', error);
+            this.serverError = true;
+            this.errorMessage = error.message;
         }
         finally {
             this.isLoading = false;
@@ -63,7 +74,8 @@ export class BusinessForm {
             this.formController.setInitialValues(response.data);
         }
         catch (error) {
-            console.error('Error fetching data:', error);
+            this.serverError = true;
+            this.errorMessage = `Error fetching data: ${error.message}`;
         }
         finally {
             this.isLoading = false;
@@ -74,7 +86,7 @@ export class BusinessForm {
         this.formController.validateAndSubmit(this.sendData);
     }
     render() {
-        return (h(Host, { exportparts: "label,input,input-invalid" }, h("form", { onSubmit: event => this.validateAndSubmit(event) }, h("div", { class: "row gap-3" }, h("div", { class: "col-12 mb-4" }, h("h1", null, "Business Information")), h("div", { class: "col-12 mb-4" }, h("justifi-business-generic-info", { formController: this.formController })), h("div", { class: "col-12 mb-4" }, h("justifi-legal-address-form", { formController: this.formController })), h("div", { class: "col-12 mb-4" }, h("justifi-additional-questions", { formController: this.formController })), h("div", { class: "col-12 mb-4" }, h("justifi-business-representative", { formController: this.formController })), h("div", { class: "col-12 mb-4" }, h("justifi-business-owners", { isEditing: !!this.businessId, formController: this.formController })), h("div", { class: "col-12 d-flex flex-row-reverse" }, h("button", { type: "submit", class: "btn btn-primary jfi-submit-button", disabled: !this.authToken || this.isLoading }, this.isLoading ? 'Loading...' : 'Submit'))))));
+        return (h(Host, { exportparts: "label,input,input-invalid" }, h("form", { onSubmit: event => this.validateAndSubmit(event) }, h("div", { class: "row gap-3" }, h("div", { class: "col-12 mb-4" }, h("h1", null, "Business Information")), this.showErrors && FormAlert(this.errorMessage), h("div", { class: "col-12 mb-4" }, h("justifi-business-generic-info", { formController: this.formController })), h("div", { class: "col-12 mb-4" }, h("justifi-legal-address-form", { formController: this.formController })), h("div", { class: "col-12 mb-4" }, h("justifi-additional-questions", { formController: this.formController })), h("div", { class: "col-12 mb-4" }, h("justifi-business-representative", { formController: this.formController })), h("div", { class: "col-12 mb-4" }, h("justifi-business-owners", { isEditing: !!this.businessId, formController: this.formController })), h("div", { class: "col-12 d-flex flex-row-reverse" }, h("button", { type: "submit", class: "btn btn-primary jfi-submit-button", disabled: this.submitDisabled }, this.isLoading ? 'Loading...' : 'Submit'))))));
     }
     static get is() { return "justifi-business-form"; }
     static get originalStyleUrls() {
@@ -122,12 +134,31 @@ export class BusinessForm {
                 },
                 "attribute": "business-id",
                 "reflect": false
+            },
+            "hideErrors": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "hide-errors",
+                "reflect": false
             }
         };
     }
     static get states() {
         return {
-            "isLoading": {}
+            "isLoading": {},
+            "serverError": {},
+            "errorMessage": {}
         };
     }
 }

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

@@ -0,0 +1,2 @@
+import { h } from "@stencil/core";
+export const FormAlert = (message) => (h("div", { class: 'alert alert-danger d-flex align-items-center', role: 'alert' }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", fill: "currentColor", class: "bi bi-exclamation-triangle-fill flex-shrink-0 me-2", viewBox: "0 0 16 16", role: "img", "aria-label": "Warning:" }, h("path", { d: "M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z" })), h("div", null, message)));

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

@@ -97,8 +97,8 @@ export class PaymentsList {
                 {
                     type: 'head',
                     value: `
-                    <div>${formatDate(payment.created_at)}</div>
-                    <div>${formatTime(payment.created_at)}</div>
+                    <div class='fw-bold'>${formatDate(payment.created_at)}</div>
+                    <div class='fw-bold'>${formatTime(payment.created_at)}</div>
                   `,
                 },
                 formatCurrency(payment.amount),

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

@@ -117,8 +117,8 @@ export class PayoutsList {
                 {
                     type: 'head',
                     value: `
-                    <div>${formatDate(payout.created_at)}</div>
-                    <div>${formatTime(payout.created_at)}</div>
+                    <div class='fw-bold'>${formatDate(payout.created_at)}</div>
+                    <div class='fw-bold'>${formatTime(payout.created_at)}</div>
                   `,
                 },
                 payout.payout_type,

package/dist/collection/components/subaccounts-list/subaccounts-list.js

@@ -67,8 +67,8 @@ export class SubaccountsList {
                 {
                     type: 'head',
                     value: `
-                    <div>${subaccount.dateString}</div>
-                    <div>${subaccount.timeString}</div>
+                    <div class='fw-bold'>${subaccount.dateString}</div>
+                    <div class='fw-bold'>${subaccount.timeString}</div>
                   `,
                 },
                 subaccount.name,

package/dist/collection/components/table/table.js

@@ -1,20 +1,9 @@
 import { Host, h } from "@stencil/core";
 import { ExtendedPagingDefaults } from "../../api/Pagination";
 import { tableExportedParts } from "./exported-parts";
+import { EmptyState, ErrorState, LoadingState } from "./utils";
 export class Table {
     constructor() {
-        this.emptyState = () => {
-            var _a;
-            return (h("tr", null, h("td", { class: "empty-state", part: "empty-state", colSpan: (_a = this.columnData) === null || _a === void 0 ? void 0 : _a.length, style: { textAlign: 'center' } }, "No results")));
-        };
-        this.errorState = () => {
-            var _a;
-            return (h("tr", null, h("td", { class: "error-state", part: "error-state", colSpan: (_a = this.columnData) === null || _a === void 0 ? void 0 : _a.length, style: { textAlign: 'center' } }, "An unexpected error occurred: ", this.errorMessage)));
-        };
-        this.loadingState = () => {
-            var _a;
-            return (h("tr", null, h("td", { class: "loading-state", part: "loading-state-cell", colSpan: (_a = this.columnData) === null || _a === void 0 ? void 0 : _a.length, style: { textAlign: 'center' } }, h("div", { part: "loading-state-spinner", class: "spinner-border", role: "status" }, h("span", { class: "visually-hidden" }, "Loading...")))));
-        };
         this.loading = true;
         this.errorMessage = '';
         this.rowData = [];
@@ -24,25 +13,29 @@ export class Table {
         this.entityId = undefined;
         this.rowClickHandler = undefined;
     }
-    showEmptyState() {
-        return this.rowData ? this.rowData.length < 1 : true;
+    get showEmptyState() {
+        return !this.loading && !this.errorMessage && this.rowData.length < 1;
+    }
+    get showErrorState() {
+        return !this.loading && !!this.errorMessage;
+    }
+    get showRowData() {
+        return !this.showEmptyState && !this.showErrorState;
     }
     render() {
-        var _a, _b, _c;
-        return (h(Host, { exportparts: tableExportedParts }, this.columnData ?
-            h("div", { class: "table-wrapper" }, h("table", { class: "table table-hover" }, h("thead", { class: "table-head sticky-top", part: "table-head" }, h("tr", { class: "table-light text-nowrap", part: 'table-head-row' }, (_a = this.columnData) === null || _a === void 0 ? void 0 : _a.map((column) => h("th", { part: "table-head-cell", scope: "col", title: Array.isArray(column) ? column[1] : '' }, !Array.isArray(column) ? column : column[0])))), h("tbody", { class: "table-body", part: 'table-body' }, this.loading ? this.loadingState() :
-                this.errorMessage ? this.errorState() :
-                    this.showEmptyState() ? this.emptyState() :
-                        (_b = this.rowData) === null || _b === void 0 ? void 0 : _b.map((data, index) => {
-                            return (h("tr", { "data-row-entity-id": this.entityId[index], onClick: e => this.rowClickHandler ? this.rowClickHandler(e) : null, part: `table-row${index % 2 ? ' table-row-even' : ' table-row-odd'}` }, data.map((dataEntry) => {
-                                return (!(dataEntry === null || dataEntry === void 0 ? void 0 : dataEntry.type)
-                                    ? h("td", { part: "table-cell" }, dataEntry)
-                                    : h("th", { scope: "row", part: "table-cell" }, h("td", { part: "table-cell", innerHTML: dataEntry.value })));
-                            })));
-                        })), this.paging &&
-                h("tfoot", { class: "sticky-bottom" }, h("tr", { class: "table-light align-middle" }, h("td", { part: "pagination-bar", colSpan: (_c = this.columnData) === null || _c === void 0 ? void 0 : _c.length }, h("pagination-menu", { paging: this.paging, params: this.params }))))))
-            :
-                h("div", { "data-test-id": "empty-error-state" }, "Column data is required")));
+        var _a, _b;
+        return (h(Host, { exportparts: tableExportedParts }, h("div", { class: "table-wrapper" }, h("table", { class: "table table-hover" }, h("thead", { class: "table-head sticky-top", part: "table-head" }, h("tr", { class: "table-light text-nowrap", part: 'table-head-row' }, (_a = this.columnData) === null || _a === void 0 ? void 0 : _a.map((column) => h("th", { part: "table-head-cell", scope: "col", title: Array.isArray(column) ? column[1] : '' }, !Array.isArray(column) ? column : column[0])))), h("tbody", { class: "table-body", part: 'table-body' }, this.loading && LoadingState(this.columnData.length), this.showEmptyState && EmptyState(this.columnData.length), this.showErrorState && ErrorState(this.columnData.length, this.errorMessage), this.showRowData && (this.rowData.map((data, index) => {
+            return (h("tr", { "data-row-entity-id": this.entityId[index], onClick: e => this.rowClickHandler ? this.rowClickHandler(e) : null, part: `table-row ${index % 2 ? 'table-row-even' : 'table-row-odd'}` }, data.map((dataEntry) => {
+                let nestedHtml = dataEntry === null || dataEntry === void 0 ? void 0 : dataEntry.type;
+                if (nestedHtml) {
+                    return (h("td", { part: "table-cell", innerHTML: dataEntry.value }));
+                }
+                else {
+                    return (h("td", { part: "table-cell" }, dataEntry));
+                }
+            })));
+        }))), this.paging &&
+            h("tfoot", { class: "sticky-bottom" }, h("tr", { class: "table-light align-middle" }, h("td", { part: "pagination-bar", colSpan: (_b = this.columnData) === null || _b === void 0 ? void 0 : _b.length }, h("pagination-menu", { paging: this.paging, params: this.params }))))))));
     }
     static get is() { return "justifi-table"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/table/test/table.spec.js

@@ -2,21 +2,29 @@ import { h } from "@stencil/core";
 import { newSpecPage } from "@stencil/core/testing";
 import { Table } from "../table";
 describe('justifi-table', () => {
-    it('does not render properly without columnData', async () => {
+    it('enters loading state when loading is true', async () => {
         const page = await newSpecPage({
             components: [Table],
-            html: `<justifi-table></justifi-table>`,
+            template: () => h("justifi-table", { columnData: ['test', 'test'], loading: true })
         });
-        const error = page.root.shadowRoot.querySelector('[data-test-id="empty-error-state"]');
-        expect(error).toBeTruthy();
+        const loading = page.root.shadowRoot.querySelector('.loading-state');
+        expect(loading).toBeTruthy();
+        const loadingSpinner = page.root.shadowRoot.querySelector('.spinner-border');
+        expect(loadingSpinner).toBeTruthy();
+        const error = await page.root.shadowRoot.querySelector('.error-state');
+        expect(error).toBeNull();
     });
-    it('stops loading', async () => {
+    it('renders the empty state when no data is passed', async () => {
         const page = await newSpecPage({
             components: [Table],
             template: () => h("justifi-table", { columnData: ['test', 'test'], loading: false })
         });
-        const loading = page.root.shadowRoot.querySelector('.loading-state');
-        expect(loading).toBeNull();
+        const empty = page.root.shadowRoot.querySelector('.empty-state');
+        expect(empty).toBeTruthy();
+        const emptyStateMessage = empty.innerHTML;
+        expect(emptyStateMessage).toBe('No results');
+        const error = await page.root.shadowRoot.querySelector('.error-state');
+        expect(error).toBeNull();
     });
     it('renders the state and displays error message passed', async () => {
         const ERROR_TEXT = 'error-123';
@@ -24,18 +32,20 @@ describe('justifi-table', () => {
             components: [Table],
             template: () => h("justifi-table", { columnData: ['test', 'test'], loading: false, errorMessage: ERROR_TEXT })
         });
+        const loading = page.root.shadowRoot.querySelector('.loading-state');
+        expect(loading).toBeNull();
         const error = page.root.shadowRoot.querySelector('.error-state');
-        expect(error).not.toBeNull();
+        expect(error).toBeTruthy();
         const errorText = error.innerHTML;
         expect(errorText).toBe(`An unexpected error occurred: ${ERROR_TEXT}`);
     });
     it('renders the pagination bar when pagination is passed', async () => {
         const PAG = {
-            amount: 25,
+            amount: 50,
             start_cursor: '',
             end_cursor: '',
             has_previous: false,
-            has_next: false,
+            has_next: true,
             handleClickNext: () => { },
             handleClickPrevious: () => { }
         };
@@ -43,8 +53,8 @@ describe('justifi-table', () => {
             components: [Table],
             template: () => h("justifi-table", { columnData: ['test', 'test'], loading: false, paging: PAG })
         });
-        const error = page.root.shadowRoot.querySelector('[part="pagination-bar"]');
-        expect(error).not.toBeNull();
+        const paginationBar = page.root.shadowRoot.querySelector('[part="pagination-bar"]');
+        expect(paginationBar).toBeTruthy();
     });
     it('has an ID for each row', async () => {
         const page = await newSpecPage({
@@ -52,7 +62,13 @@ describe('justifi-table', () => {
             template: () => h("justifi-table", { entityId: ['123'], rowData: [['test']], columnData: ['test', 'test'], loading: false })
         });
         const row = page.root.shadowRoot.querySelector('[data-row-entity-id]');
-        expect(row).not.toBeNull();
+        expect(row).toBeTruthy();
         expect(row.dataset.rowEntityId).toBe('123');
+        const loading = page.root.shadowRoot.querySelector('.loading-state');
+        expect(loading).toBeNull();
+        const empty = page.root.shadowRoot.querySelector('.empty-state');
+        expect(empty).toBeNull();
+        const error = await page.root.shadowRoot.querySelector('.error-state');
+        expect(error).toBeNull();
     });
 });

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

@@ -0,0 +1,4 @@
+import { h } from "@stencil/core";
+export const LoadingState = (columnSpan) => (h("tr", null, h("td", { class: "loading-state", part: "loading-state-cell", colSpan: columnSpan, style: { textAlign: 'center' } }, h("div", { part: "loading-state-spinner", class: "spinner-border", role: "status" }, h("span", { class: "visually-hidden" }, "Loading...")))));
+export const EmptyState = (columnSpan) => (h("tr", null, h("td", { class: "empty-state", part: "empty-state", colSpan: columnSpan, style: { textAlign: 'center' } }, "No results")));
+export const ErrorState = (columnSpan, errorMessage) => (h("tr", null, h("td", { class: "error-state", part: "error-state", colSpan: columnSpan, style: { textAlign: 'center' } }, "An unexpected error occurred: ", errorMessage)));

package/dist/docs.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2024-01-26T21:40:50",
+  "timestamp": "2024-02-09T22:26:47",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.10.0",
@@ -2139,6 +2139,27 @@
           ],
           "optional": true,
           "required": false
+        },
+        {
+          "name": "hideErrors",
+          "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "hide-errors",
+          "reflectToAttr": false,
+          "docs": "",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": true,
+          "required": false
         }
       ],
       "methods": [],
@@ -2221,7 +2242,7 @@
       "usage": {},
       "props": [
         {
-          "name": "accountId",
+          "name": "authToken",
           "type": "string",
           "complexType": {
             "original": "string",
@@ -2229,7 +2250,7 @@
             "references": {}
           },
           "mutable": false,
-          "attr": "account-id",
+          "attr": "auth-token",
           "reflectToAttr": false,
           "docs": "",
           "docsTags": [],
@@ -2242,7 +2263,7 @@
           "required": false
         },
         {
-          "name": "authToken",
+          "name": "businessId",
           "type": "string",
           "complexType": {
             "original": "string",
@@ -2250,7 +2271,7 @@
             "references": {}
           },
           "mutable": false,
-          "attr": "auth-token",
+          "attr": "business-id",
           "reflectToAttr": false,
           "docs": "",
           "docsTags": [],
@@ -2259,25 +2280,25 @@
               "type": "string"
             }
           ],
-          "optional": false,
+          "optional": true,
           "required": false
         },
         {
-          "name": "businessId",
-          "type": "string",
+          "name": "hideErrors",
+          "type": "boolean",
           "complexType": {
-            "original": "string",
-            "resolved": "string",
+            "original": "boolean",
+            "resolved": "boolean",
             "references": {}
           },
           "mutable": false,
-          "attr": "business-id",
+          "attr": "hide-errors",
           "reflectToAttr": false,
           "docs": "",
           "docsTags": [],
           "values": [
             {
-              "type": "string"
+              "type": "boolean"
             }
           ],
           "optional": true,
@@ -5425,22 +5446,6 @@
       "styles": [],
       "slots": [],
       "parts": [
-        {
-          "name": "empty-state",
-          "docs": ""
-        },
-        {
-          "name": "error-state",
-          "docs": ""
-        },
-        {
-          "name": "loading-state-cell",
-          "docs": ""
-        },
-        {
-          "name": "loading-state-spinner",
-          "docs": ""
-        },
         {
           "name": "pagination-bar",
           "docs": ""