@justifi/webcomponents 4.4.0 → 4.5.0

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

@@ -0,0 +1,209 @@
+import { Host, h } from "@stencil/core";
+import { Api } from "../../api";
+import { pagingDefaults } from "../table/table-utils";
+import { Business } from "../../api/Business";
+import { formatDate } from "../../utils/utils";
+/**
+  * @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.onPageChange = (direction) => {
+      return () => {
+        this.fetchData(direction);
+      };
+    };
+    this.mapProductStatusToBadge = (status) => {
+      return status && 'bg-success' || 'bg-secondary';
+    };
+    this.mapBusinessType = (type) => {
+      switch (type) {
+        case 'individual':
+          return 'Individual';
+        case 'non_profit':
+          return 'Non Profit';
+        case 'for_profit':
+          return 'For Profit';
+        case 'government_entity':
+          return 'Government Entity';
+      }
+    };
+    this.mapBusinessStructure = (type) => {
+      switch (type) {
+        case 'sole_proprietorship':
+          return 'Sole Proprietorship';
+        case 'single_llc':
+          return 'Single LLC';
+        case 'multi_llc':
+          return 'Multi LLC';
+        case 'private_partnership':
+          return 'Private Partnership';
+        case 'private_corporation':
+          return 'Private Corporation';
+        case 'unincorporated_association':
+          return 'Unincorporated Association';
+        case 'public_partnership':
+          return 'Public Partnership';
+        case 'public_corporation':
+          return 'Public Corporation';
+        case 'incorporated':
+          return 'Incorporated';
+        case 'unincorporated':
+          return 'Unincorporated';
+        case 'government_unit':
+          return 'Government Unit';
+        case 'government_instrumentality':
+          return 'Government Instrumentality';
+        case 'tax_exempt_government_instrumentality':
+          return 'Tax Exempt Government Instrumentality';
+      }
+    };
+    this.accountId = undefined;
+    this.authToken = undefined;
+    this.businesses = [];
+    this.loading = true;
+    this.errorMessage = undefined;
+    this.paging = pagingDefaults;
+  }
+  updateOnPropChange() {
+    this.fetchData();
+  }
+  connectedCallback() {
+    this.fetchData();
+  }
+  async fetchData(direction) {
+    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`;
+    const response = await Api(this.authToken, process.env.ENTITIES_API_ORIGIN).get(endpoint, {
+      account_id: this.accountId,
+      paging: this.paging,
+      direction: direction
+    });
+    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, null, h("justifi-table", { columnData: [
+        ['Legal Name', 'The name associated with this Business'],
+        ['Business Type', 'The business type'],
+        ['Business Structure', 'The business structure'],
+        ['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,
+        this.mapBusinessType(business.business_type),
+        this.mapBusinessStructure(business.business_structure),
+        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, paging: Object.assign(Object.assign({}, this.paging), { onPrev: this.onPageChange('prev'), onNext: this.onPageChange('next') }) })));
+  }
+  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": [],
+          "text": ""
+        },
+        "attribute": "account-id",
+        "reflect": false
+      },
+      "authToken": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "auth-token",
+        "reflect": false
+      }
+    };
+  }
+  static get states() {
+    return {
+      "businesses": {},
+      "loading": {},
+      "errorMessage": {},
+      "paging": {}
+    };
+  }
+  static get watchers() {
+    return [{
+        "propName": "accountId",
+        "methodName": "updateOnPropChange"
+      }, {
+        "propName": "authToken",
+        "methodName": "updateOnPropChange"
+      }];
+  }
+}
+//# sourceMappingURL=business-list.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"business-list.js","sourceRoot":"","sources":["../../../../src/components/business-list/business-list.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, State, Watch } from '@stencil/core';\nimport { Api, IApiResponseCollection } from '../../api';\nimport { PagingInfo, pagingDefaults } from '../table/table-utils';\nimport { Business } from '../../api/Business';\nimport { formatDate } from '../../utils/utils';\n\n/**\n  * @exportedPart table-head: Table head\n  * @exportedPart table-head-row: Head row\n  * @exportedPart table-head-cell: Individual head cell\n  * @exportedPart table-body: Body of the table\n  * @exportedPart table-row: Row of the table\n  * @exportedPart table-cell: Individual cell of the table\n  * @exportedPart loading-state-cell: Row for loading state\n  * @exportedPart loading-state-spinner: Spinner element for loading state\n  * @exportedPart error-state: Row for Error state\n  * @exportedPart empty-state: Row for Emtpy state\n  * @exportedPart pagination-bar: Pagination bar\n  * @exportedPart arrow: Both paging buttons\n  * @exportedPart arrow-left: Previous page button\n  * @exportedPart arrow-right: Next page button\n  * @exportedPart arrow-disabled: Disabled state for paging buttons\n*/\n@Component({\n  tag: 'justifi-business-list',\n  styleUrl: 'business-list.scss',\n  shadow: true,\n})\n\nexport class BusinessList {\n  @Prop() accountId: string;\n  @Prop() authToken: string;\n  @State() businesses: Business[] = [];\n  @State() loading: boolean = true;\n  @State() errorMessage: string;\n  @State() paging: PagingInfo = pagingDefaults;\n\n  @Watch('accountId')\n  @Watch('authToken')\n  updateOnPropChange() {\n    this.fetchData();\n  }\n\n  connectedCallback() {\n    this.fetchData();\n  }\n\n  onPageChange = (direction: string) => {\n    return () => {\n      this.fetchData(direction);\n    }\n  }\n\n  mapProductStatusToBadge = (status: boolean) => {\n    return status && 'bg-success' || 'bg-secondary';\n  }\n\n  mapBusinessType = (type: string) => {\n    switch (type) {\n      case 'individual':\n        return 'Individual'\n      case 'non_profit':\n        return 'Non Profit'\n      case 'for_profit':\n        return 'For Profit'\n      case 'government_entity':\n        return 'Government Entity'\n    }\n  }\n\n  mapBusinessStructure = (type: string) => {\n    switch (type) {\n      case 'sole_proprietorship':\n        return 'Sole Proprietorship'\n      case 'single_llc':\n        return 'Single LLC'\n      case 'multi_llc':\n        return 'Multi LLC'\n      case 'private_partnership':\n        return 'Private Partnership'\n      case 'private_corporation':\n        return 'Private Corporation'\n      case 'unincorporated_association':\n        return 'Unincorporated Association'\n      case 'public_partnership':\n        return 'Public Partnership'\n      case 'public_corporation':\n        return 'Public Corporation'\n      case 'incorporated':\n        return 'Incorporated'\n      case 'unincorporated':\n        return 'Unincorporated'\n      case 'government_unit':\n        return 'Government Unit'\n      case 'government_instrumentality':\n        return 'Government Instrumentality'\n      case 'tax_exempt_government_instrumentality':\n        return 'Tax Exempt Government Instrumentality'\n    }\n  }\n\n  async fetchData(direction?: string): Promise<void> {\n    if (!this.accountId || !this.authToken) {\n      this.errorMessage = \"Can not fetch any data without an AccountID and an AuthToken\";\n      this.loading = false;\n      return;\n    }\n    this.loading = true;\n    const endpoint = `entities/business`;\n\n    const response: IApiResponseCollection<Business[]> = await Api(this.authToken, process.env.ENTITIES_API_ORIGIN).get(endpoint, {\n      account_id: this.accountId,\n      paging: this.paging,\n      direction: direction\n    });\n    if (!response.error) {\n      this.paging = {\n        ...this.paging,\n        ...response.page_info\n      }\n\n      const data = response?.data?.map(dataItem => new Business(dataItem));\n      this.businesses = data;\n    } else {\n      this.errorMessage = typeof response.error === 'string' ? response.error : response.error.message;\n    }\n\n    this.loading = false;\n  }\n\n  render() {\n    return (\n      <Host>\n        <justifi-table\n          columnData={[\n            ['Legal Name', 'The name associated with this Business'],\n            ['Business Type', 'The business type'],\n            ['Business Structure', 'The business structure'],\n            ['Tax ID', 'The tax ID associated with this business'],\n            ['Industry', 'The industry this business participates in'],\n            ['Product Ready', 'List of our products that are used by this business'],\n            ['Created at', 'Date this business was created'],\n          ]}\n          rowData={\n            this.businesses.map((business) => (\n              [\n                business.legal_name,\n                this.mapBusinessType(business.business_type),\n                this.mapBusinessStructure(business.business_structure),\n                business.tax_id,\n                business.industry,\n                {\n                  type: 'inner',\n                  value: `\n                    <div class=\"d-flex flex-nowrap gap-1\">\n                      <span class=\"badge ${this.mapProductStatusToBadge(business.product_categories.credit)}\">Credit</span>\n                      <span class=\"badge ${this.mapProductStatusToBadge(business.product_categories.insurance)}\">Insurance</span>\n                      <span class=\"badge ${this.mapProductStatusToBadge(business.product_categories.lending)}\">Lending</span>\n                      <span class=\"badge ${this.mapProductStatusToBadge(business.product_categories.payment)}\">Payment</span>\n                    </div>\n                  `\n                },\n                formatDate(business.created_at),\n              ]\n            ))\n          }\n          loading={this.loading}\n          error-message={this.errorMessage}\n          paging={{\n            ...this.paging,\n            onPrev: this.onPageChange('prev'),\n            onNext: this.onPageChange('next')\n          }}\n        />\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,68 @@
+export default {
+  title: 'dev/Components/BusinessList',
+  component: 'justifi-business-list',
+  parameters: {}
+};
+class BusinessListArgs {
+  constructor(args) {
+    this['auth-token'] = args['auth-token'] || '';
+    this['account-id'] = args['account-id'] || '';
+  }
+}
+const Template = (args) => {
+  return (`
+    <justifi-business-list
+      data-testid="justifi-business-list"
+      auth-token="${args['auth-token']}"
+      account-id="${args['account-id']}"
+    />
+  `);
+};
+export const Basic = Template.bind({});
+Basic.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({});
+//# sourceMappingURL=business-list.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"business-list.stories.js","sourceRoot":"","sources":["../../../../src/components/business-list/business-list.stories.ts"],"names":[],"mappings":"AAAA,eAAe;EACb,KAAK,EAAE,6BAA6B;EACpC,SAAS,EAAE,uBAAuB;EAClC,UAAU,EAAE,EAAE;CACf,CAAC;AAEF,MAAM,gBAAgB;EAIpB,YAAY,IAAI;IACd,IAAI,CAAC,YAAY,CAAC,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC;IAC9C,IAAI,CAAC,YAAY,CAAC,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC;EAChD,CAAC;CACF;AAED,MAAM,QAAQ,GAAG,CAAC,IAAsB,EAAE,EAAE;EAC1C,OAAO,CAAC;;;oBAGU,IAAI,CAAC,YAAY,CAAC;oBAClB,IAAI,CAAC,YAAY,CAAC;;GAEnC,CAAC,CAAC;AACL,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACvC,KAAK,CAAC,IAAI,GAAG,IAAI,gBAAgB,CAAC,EAAE,CAAC,CAAC;AAEtC,MAAM,CAAC,MAAM,MAAM,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACxC,MAAM,CAAC,IAAI,GAAG,IAAI,gBAAgB,CAAC,EAAE,CAAC,CAAC;AACvC,MAAM,CAAC,UAAU,GAAG;EAClB,CAAC,KAAK,EAAE,EAAE,CAAC;MACP,KAAK,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BV;CACF,CAAA;AAED,MAAM,CAAC,MAAM,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC3C,SAAS,CAAC,UAAU,GAAG;EACrB,CAAC,KAAK,EAAE,EAAE,CAAC;;QAEL,KAAK,EAAE;;GAEZ;CACF,CAAA;AACD,SAAS,CAAC,IAAI,GAAG,IAAI,gBAAgB,CAAC,EAAE,CAAC,CAAC","sourcesContent":["export default {\n  title: 'dev/Components/BusinessList',\n  component: 'justifi-business-list',\n  parameters: {}\n};\n\nclass BusinessListArgs {\n  'auth-token': string;\n  'account-id': string;\n\n  constructor(args) {\n    this['auth-token'] = args['auth-token'] || '';\n    this['account-id'] = args['account-id'] || '';\n  }\n}\n\nconst Template = (args: BusinessListArgs) => {\n  return (`\n    <justifi-business-list\n      data-testid=\"justifi-business-list\"\n      auth-token=\"${args['auth-token']}\"\n      account-id=\"${args['account-id']}\"\n    />\n  `);\n};\n\nexport const Basic = Template.bind({});\nBasic.args = new BusinessListArgs({});\n\nexport const Styled = Template.bind({});\nStyled.args = new BusinessListArgs({});\nStyled.decorators = [\n  (Story) => `\n    ${Story()}\n    <style>\n      justifi-business-list::part(table-head-cell) {\n        background-color: #F4F4F6;\n      }\n      justifi-business-list::part(pagination-bar) {\n        background-color: #F4F4F6;\n      }\n      justifi-business-list::part(arrow) {\n        --bs-btn-disabled-bg: #212529;\n        --bs-btn-disabled-border-color: #212529;\n        --bs-btn-bg: #212529;\n        --bs-btn-border-color: #212529;\n        --bs-btn-hover-bg: #fccc32;\n        --bs-btn-hover-border-color: #fccc32;\n      }\n      justifi-business-list::part(error-state) {\n        color: red;\n        background-color: #EEEEF5;\n      }\n      justifi-business-list::part(loading-state-cell) {\n        background-color: #EEEEF5;\n      }\n      justifi-business-list::part(table-row) {\n        background-color: #EEEEF5;\n      }\n      justifi-business-list::part(table-row-even) {\n        background-color: #F4F4F6;\n      }\n    </style>\n  `\n]\n\nexport const Contained = Template.bind({});\nContained.decorators = [\n  (Story) => `\n    <div style=\"position: relative; width: 900px; height: 300px; overflow-x: hidden;\">\n      ${Story()}\n    </div>\n  `\n]\nContained.args = new BusinessListArgs({});\n"]}

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

@@ -0,0 +1,12 @@
+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>`;