@justifi/webcomponents 4.17.0 → 4.19.0-rc

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

@@ -1,194 +0,0 @@
-import { Host, h } from "@stencil/core";
-import { Api, pagingDefaults } from "../../api";
-import { Business } from "../../api/Business";
-import { formatDate, snakeCaseToHumanReadable } from "../../utils/utils";
-import { config } from "../../../config";
-/**
- * @exportedPart table-head: Table head
- * @exportedPart table-head-row: Head row
- * @exportedPart table-head-cell: Individual head cell
- * @exportedPart table-body: Body of the table
- * @exportedPart table-row: Row of the table
- * @exportedPart table-cell: Individual cell of the table
- * @exportedPart loading-state-cell: Row for loading state
- * @exportedPart loading-state-spinner: Spinner element for loading state
- * @exportedPart error-state: Row for Error state
- * @exportedPart empty-state: Row for Emtpy state
- * @exportedPart pagination-bar: Pagination bar
- * @exportedPart arrow: Both paging buttons
- * @exportedPart arrow-left: Previous page button
- * @exportedPart arrow-right: Next page button
- * @exportedPart arrow-disabled: Disabled state for paging buttons
- */
-export class BusinessList {
-    constructor() {
-        this.mapProductStatusToBadge = (status) => {
-            return (status && 'bg-success') || 'bg-secondary';
-        };
-        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.accountId = undefined;
-        this.authToken = undefined;
-        this.businesses = [];
-        this.loading = true;
-        this.errorMessage = undefined;
-        this.paging = pagingDefaults;
-        this.params = undefined;
-    }
-    updateOnPropChange() {
-        this.fetchData();
-    }
-    connectedCallback() {
-        this.fetchData();
-    }
-    async fetchData() {
-        var _a;
-        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;
-        const endpoint = `entities/business`;
-        let accountIDParam = { account_id: this.accountId };
-        const response = await Api({ authToken: this.authToken, apiOrigin: config.proxyApiOrigin })
-            .get(endpoint, Object.assign(Object.assign({}, accountIDParam), this.params));
-        if (!response.error) {
-            this.paging = Object.assign(Object.assign({}, this.paging), response.page_info);
-            const data = (_a = response === null || response === void 0 ? void 0 : response.data) === null || _a === void 0 ? void 0 : _a.map(dataItem => new Business(dataItem));
-            this.businesses = data;
-        }
-        else {
-            this.errorMessage =
-                typeof response.error === 'string'
-                    ? response.error
-                    : response.error.message;
-        }
-        this.loading = false;
-    }
-    render() {
-        return (h(Host, { key: '5804c528d78363f4857f82f769677f808cc144b9' }, h("justifi-table", { key: '120a6396d239224410b24997652bde4e2c2625bf', columnData: [
-                ['Legal Name', 'The name associated with this Business'],
-                ['Business Classification', 'The business classification'],
-                ['Tax ID', 'The tax ID associated with this business'],
-                ['Industry', 'The industry this business participates in'],
-                [
-                    'Product Ready',
-                    'List of our products that are used by this business',
-                ],
-                ['Created at', 'Date this business was created'],
-            ], rowData: this.businesses.map((business) => [
-                business.legal_name,
-                snakeCaseToHumanReadable(business.classification),
-                business.tax_id,
-                business.industry,
-                {
-                    type: 'inner',
-                    value: `
-                    <div class="d-flex flex-nowrap gap-1">
-                      <span class="badge ${this.mapProductStatusToBadge(business.product_categories.credit)}">Credit</span>
-                      <span class="badge ${this.mapProductStatusToBadge(business.product_categories.insurance)}">Insurance</span>
-                      <span class="badge ${this.mapProductStatusToBadge(business.product_categories.lending)}">Lending</span>
-                      <span class="badge ${this.mapProductStatusToBadge(business.product_categories.payment)}">Payment</span>
-                    </div>
-                  `,
-                },
-                formatDate(business.created_at),
-            ]), 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 "justifi-business-list"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["business-list.scss"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["business-list.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "accountId": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [{
-                            "name": "required",
-                            "text": undefined
-                        }, {
-                            "name": "type",
-                            "text": "{string}"
-                        }, {
-                            "name": "memberof",
-                            "text": "PaymentsList"
-                        }],
-                    "text": "The Account ID to fetch payments.\nThis is required to fetch any data."
-                },
-                "attribute": "account-id",
-                "reflect": false
-            },
-            "authToken": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [{
-                            "name": "required",
-                            "text": undefined
-                        }, {
-                            "name": "type",
-                            "text": "{string}"
-                        }],
-                    "text": "The Auth Token to fetch payments.\nThis is required to fetch any data."
-                },
-                "attribute": "auth-token",
-                "reflect": false
-            }
-        };
-    }
-    static get states() {
-        return {
-            "businesses": {},
-            "loading": {},
-            "errorMessage": {},
-            "paging": {},
-            "params": {}
-        };
-    }
-    static get watchers() {
-        return [{
-                "propName": "accountId",
-                "methodName": "updateOnPropChange"
-            }, {
-                "propName": "authToken",
-                "methodName": "updateOnPropChange"
-            }, {
-                "propName": "params",
-                "methodName": "updateOnPropChange"
-            }];
-    }
-}

package/dist/collection/components/business-list/business-list.stories.js

@@ -1,68 +0,0 @@
-import { config } from "../../../config";
-export default {
-    title: 'dev/Components/BusinessList',
-    component: 'justifi-business-list',
-    parameters: {},
-};
-class BusinessListArgs {
-    constructor(args) {
-        this['auth-token'] = args['auth-token'] || config.proxyAuthToken;
-        this['account-id'] = args['account-id'] || config.exampleAccountId;
-    }
-}
-const Template = (args) => {
-    return `
-    <justifi-business-list
-      data-testid="justifi-business-list"
-      auth-token="${args['auth-token']}"
-      account-id="${args['account-id']}"
-    />
-  `;
-};
-export const Example = Template.bind({});
-Example.args = new BusinessListArgs({});
-export const Styled = Template.bind({});
-Styled.args = new BusinessListArgs({});
-Styled.decorators = [
-    (Story) => `
-    ${Story()}
-    <style>
-      justifi-business-list::part(table-head-cell) {
-        background-color: #F4F4F6;
-      }
-      justifi-business-list::part(pagination-bar) {
-        background-color: #F4F4F6;
-      }
-      justifi-business-list::part(arrow) {
-        --bs-btn-disabled-bg: #212529;
-        --bs-btn-disabled-border-color: #212529;
-        --bs-btn-bg: #212529;
-        --bs-btn-border-color: #212529;
-        --bs-btn-hover-bg: #fccc32;
-        --bs-btn-hover-border-color: #fccc32;
-      }
-      justifi-business-list::part(error-state) {
-        color: red;
-        background-color: #EEEEF5;
-      }
-      justifi-business-list::part(loading-state-cell) {
-        background-color: #EEEEF5;
-      }
-      justifi-business-list::part(table-row) {
-        background-color: #EEEEF5;
-      }
-      justifi-business-list::part(table-row-even) {
-        background-color: #F4F4F6;
-      }
-    </style>
-  `,
-];
-export const Contained = Template.bind({});
-Contained.decorators = [
-    (Story) => `
-    <div style="position: relative; width: 900px; height: 300px; overflow-x: hidden;">
-      ${Story()}
-    </div>
-  `,
-];
-Contained.args = new BusinessListArgs({});

package/dist/collection/components/business-list/example.js

@@ -1,12 +0,0 @@
-import { head } from '../../../storybook-pages/example-parts';
-
-export default `<!DOCTYPE html>
-<html dir="ltr" lang="en">
-
-${head('justifi-business-list')}
-
-<body>
-  <justifi-business-list></justifi-business-list>
-</body>
-
-</html>`;