@justifi/webcomponents 4.2.2 → 4.4.0

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

@@ -1,36 +1,109 @@
-import { Host, h } from '@stencil/core';
-import { Api, Payment } from '../../api';
-import { formatCurrency, formatDate, formatTime } from '../../utils/utils';
+import { Host, h } from "@stencil/core";
+import { Api, Payment } from "../../api";
+import { formatCurrency, formatDate, formatTime } from "../../utils/utils";
+const pagingDefaults = {
+  amount: 25,
+  start_cursor: '',
+  end_cursor: '',
+  has_previous: false,
+  has_next: false,
+};
+/**
+  * @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 PaymentsList {
   constructor() {
+    // onChangeAmount = (e) => {
+    //   const newVal = e?.target?.value;
+    //   if (newVal) {
+    //     this.paging = pagingDefaults;
+    //     this.paging.amount = newVal;
+    //     this.fetchData();
+    //   }
+    // }
+    this.onPageChange = (direction) => {
+      return () => {
+        this.fetchData(direction);
+      };
+    };
+    this.emptyState = (h("tr", null, h("td", { class: "empty-state", part: "empty-state", colSpan: 7, style: { textAlign: 'center' } }, "No payments to show")));
+    this.errorState = () => (h("tr", null, h("td", { class: "error-state", part: "error-state", colSpan: 7, style: { textAlign: 'center' } }, "An unexpected error occurred: ", this.errorMessage)));
+    this.loadingState = (h("tr", null, h("td", { class: "loading-state", part: "loading-state-cell", colSpan: 7, style: { textAlign: 'center' } }, h("div", { part: "loading-state-spinner", class: "spinner-border", role: "status" }, h("span", { class: "visually-hidden" }, "Loading...")))));
+    this.paginationBar = () => {
+      return (h("div", { class: "pagination-bar d-flex justify-content-center gap-3" }, h("button", { onClick: this.onPageChange('prev'), part: `arrow arrow-left${this.paging.has_previous ? '' : ' arrow-disabled'}`, disabled: !this.paging.has_previous, class: `btn btn-primary pagination-btn pagination-prev-btn${this.paging.has_previous ? '' : ' disabled'}` }, "\u2190"), h("button", { onClick: this.onPageChange('next'), part: `arrow arrow-right${this.paging.has_next ? '' : ' arrow-disabled'}`, disabled: !this.paging.has_next, class: `btn btn-primary pagination-btn pagination-next-btn${this.paging.has_next ? '' : ' disabled'}` }, "\u2192")));
+    };
     this.accountId = undefined;
-    this.auth = {};
+    this.authToken = undefined;
     this.payments = [];
+    this.loading = true;
+    this.errorMessage = undefined;
+    this.paging = pagingDefaults;
   }
-  requestPropsChanged() {
+  updateOnPropChange() {
     this.fetchData();
   }
-  fetchData() {
-    const accountId = this.accountId;
-    const endpoint = `account/${accountId}/payments`;
-    Api(this.auth.token)
-      .get(endpoint)
-      .then((response) => {
-      const data = response.data.map(dataItem => new Payment(dataItem));
+  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 limit = this.paging.amount;
+    const cursor = `${direction === 'prev'
+      ? '&before_cursor=' + this.paging.start_cursor
+      : direction === 'next'
+        ? '&after_cursor=' + this.paging.end_cursor
+        : ''}`;
+    const endpoint = `account/${this.accountId}/payments?limit=${limit}${cursor ? cursor : ''}`;
+    const response = await Api(this.authToken).get(endpoint);
+    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 Payment(dataItem));
       this.payments = data;
-    });
+    }
+    else {
+      this.errorMessage = typeof response.error === 'string' ? response.error : response.error.message;
+    }
+    this.loading = false;
+  }
+  showEmptyState() {
+    return this.payments ? this.payments.length < 1 : true;
   }
   render() {
-    return (h(Host, null, h("table", { class: "justifi-table" }, h("thead", null, h("tr", null, h("th", { scope: "col", title: "The date and time each payment was made" }, "Made on"), h("th", { scope: "col", title: "The dollar amount of each payment" }, "Amount"), h("th", { scope: "col" }, "Account"), h("th", { scope: "col" }, "Description"), h("th", { scope: "col" }, "Payment ID"), h("th", { scope: "col" }, "Cardholder"), h("th", { scope: "col" }, "Payment Method"), h("th", { scope: "col" }, "Status"))), h("tbody", null, this.payments.map(payment => {
-      var _a, _b, _c, _d;
-      h("tr", null, h("td", null, h("div", null, formatDate(payment.created_at)), h("div", null, formatTime(payment.created_at))), h("td", null, formatCurrency(payment.amount)), h("td", null, payment.account_id), h("td", null, payment.description), h("td", null, payment.id), h("td", null, (_b = (_a = payment.payment_method) === null || _a === void 0 ? void 0 : _a.card) === null || _b === void 0 ? void 0 : _b.name), h("td", null, (_d = (_c = payment.payment_method) === null || _c === void 0 ? void 0 : _c.card) === null || _d === void 0 ? void 0 : _d.acct_last_four), h("td", null, payment.status));
-    })))));
+    var _a;
+    return (h(Host, { exportparts: "\n        table-head,table-head-row,table-head-cell,table-body,table-row,table-cell,\n        loading-state-cell,loading-state-spinner,error-state,empty-state,\n        pagination-bar,arrow,arrow-left,arrow-right,arrow-disabled\n      " }, h("table", { class: "table table-hover" }, h("thead", { class: "table-head sticky-top", part: "table-head" }, h("tr", { class: "table-light", part: 'table-head-row' }, h("th", { part: "table-head-cell", scope: "col", title: "The date and time each payment was made" }, "Made on"), h("th", { part: "table-head-cell", scope: "col", title: "The dollar amount of each payment" }, "Amount"), h("th", { part: "table-head-cell", scope: "col" }, "Description"), h("th", { part: "table-head-cell", scope: "col" }, "Cardholder"), h("th", { part: "table-head-cell", scope: "col" }, "Payment Method"), h("th", { part: "table-head-cell", scope: "col" }, "Status"), h("th", { part: "table-head-cell", scope: "col" }, "Payment ID"))), h("tbody", { class: "table-body", part: 'table-body' }, this.loading ? this.loadingState :
+      this.errorMessage ? this.errorState() :
+        this.showEmptyState() ? this.emptyState :
+          (_a = this.payments) === null || _a === void 0 ? void 0 : _a.map((payment, index) => {
+            var _a, _b, _c, _d;
+            return h("tr", { part: `table-row${index % 2 ? ' table-row-even' : ' table-row-odd'}` }, h("th", { scope: "row", part: "table-cell" }, h("div", null, formatDate(payment.created_at)), h("div", null, formatTime(payment.created_at))), h("td", { part: "table-cell" }, formatCurrency(payment.amount)), h("td", { part: "table-cell" }, payment.description), h("td", { part: "table-cell" }, (_b = (_a = payment.payment_method) === null || _a === void 0 ? void 0 : _a.card) === null || _b === void 0 ? void 0 : _b.name), h("td", { part: "table-cell" }, (_d = (_c = payment.payment_method) === null || _c === void 0 ? void 0 : _c.card) === null || _d === void 0 ? void 0 : _d.acct_last_four), h("td", { part: "table-cell" }, payment.status), h("td", { part: "table-cell" }, payment.id));
+          })), this.paging &&
+      h("tfoot", { class: "sticky-bottom" }, h("tr", { class: "table-light align-middle" }, h("td", { part: "pagination-bar", colSpan: 7 }, this.paginationBar()))))));
   }
   static get is() { return "justifi-payments-list"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
-      "$": ["payments-list.css"]
+      "$": ["payments-list.scss"]
     };
   }
   static get styleUrls() {
@@ -57,12 +130,12 @@ export class PaymentsList {
         "attribute": "account-id",
         "reflect": false
       },
-      "auth": {
-        "type": "unknown",
+      "authToken": {
+        "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "{ token?: string }",
-          "resolved": "{ token?: string; }",
+          "original": "string",
+          "resolved": "string",
           "references": {}
         },
         "required": false,
@@ -71,22 +144,26 @@ export class PaymentsList {
           "tags": [],
           "text": ""
         },
-        "defaultValue": "{}"
+        "attribute": "auth-token",
+        "reflect": false
       }
     };
   }
   static get states() {
     return {
-      "payments": {}
+      "payments": {},
+      "loading": {},
+      "errorMessage": {},
+      "paging": {}
     };
   }
   static get watchers() {
     return [{
         "propName": "accountId",
-        "methodName": "requestPropsChanged"
+        "methodName": "updateOnPropChange"
       }, {
-        "propName": "auth",
-        "methodName": "requestPropsChanged"
+        "propName": "authToken",
+        "methodName": "updateOnPropChange"
       }];
   }
 }

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

@@ -1 +1 @@
-{"version":3,"file":"payments-list.js","sourceRoot":"","sources":["../../../../src/components/payments-list/payments-list.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACvE,OAAO,EAAE,GAAG,EAA0B,OAAO,EAAE,MAAM,WAAW,CAAC;AACjE,OAAO,EAAE,cAAc,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAO3E,MAAM,OAAO,YAAY;;;gBAEY,EAAE;oBACN,EAAE;;EAIjC,mBAAmB;IACjB,IAAI,CAAC,SAAS,EAAE,CAAC;EACnB,CAAC;EAED,SAAS;IACP,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC;IACjC,MAAM,QAAQ,GAAG,WAAW,SAAS,WAAW,CAAC;IACjD,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC;OACjB,GAAG,CAAC,QAAQ,CAAC;OACb,IAAI,CAAC,CAAC,QAA2C,EAAE,EAAE;MACpD,MAAM,IAAI,GAAG,QAAQ,CAAC,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC,IAAI,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC;MAClE,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;IACvB,CAAC,CAAC,CAAC;EACP,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,aAAO,KAAK,EAAC,eAAe;QAC1B;UACE;YACE,UAAI,KAAK,EAAC,KAAK,EAAC,KAAK,EAAC,yCAAyC,cAE1D;YACL,UAAI,KAAK,EAAC,KAAK,EAAC,KAAK,EAAC,mCAAmC,aAEpD;YACL,UAAI,KAAK,EAAC,KAAK,cAAa;YAC5B,UAAI,KAAK,EAAC,KAAK,kBAAiB;YAChC,UAAI,KAAK,EAAC,KAAK,iBAAgB;YAC/B,UAAI,KAAK,EAAC,KAAK,iBAAgB;YAC/B,UAAI,KAAK,EAAC,KAAK,qBAAoB;YACnC,UAAI,KAAK,EAAC,KAAK,aAAY,CACxB,CACC;QACR,iBACG,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE;;UAC3B;YACE;cACE,eAAM,UAAU,CAAC,OAAO,CAAC,UAAU,CAAC,CAAO;cAC3C,eAAM,UAAU,CAAC,OAAO,CAAC,UAAU,CAAC,CAAO,CACxC;YACL,cAAK,cAAc,CAAC,OAAO,CAAC,MAAM,CAAC,CAAM;YACzC,cAAK,OAAO,CAAC,UAAU,CAAM;YAC7B,cAAK,OAAO,CAAC,WAAW,CAAM;YAC9B,cAAK,OAAO,CAAC,EAAE,CAAM;YACrB,cAAK,MAAA,MAAA,OAAO,CAAC,cAAc,0CAAE,IAAI,0CAAE,IAAI,CAAM;YAC7C,cAAK,MAAA,MAAA,OAAO,CAAC,cAAc,0CAAE,IAAI,0CAAE,cAAc,CAAM;YACvD,cAAK,OAAO,CAAC,MAAM,CAAM,CACtB,CAAC;QACR,CAAC,CAAC,CACI,CACF,CACH,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop, State, Watch } from '@stencil/core';\nimport { Api, IApiResponseCollection, Payment } from '../../api';\nimport { formatCurrency, formatDate, formatTime } from '../../utils/utils';\n\n@Component({\n  tag: 'justifi-payments-list',\n  styleUrl: 'payments-list.css',\n  shadow: true,\n})\nexport class PaymentsList {\n  @Prop() accountId: string;\n  @Prop() auth: { token?: string } = {};\n  @State() payments: Payment[] = [];\n\n  @Watch('accountId')\n  @Watch('auth')\n  requestPropsChanged() {\n    this.fetchData();\n  }\n\n  fetchData(): void {\n    const accountId = this.accountId;\n    const endpoint = `account/${accountId}/payments`;\n    Api(this.auth.token)\n      .get(endpoint)\n      .then((response: IApiResponseCollection<Payment[]>) => {\n        const data = response.data.map(dataItem => new Payment(dataItem));\n        this.payments = data;\n      });\n  }\n\n  render() {\n    return (\n      <Host>\n        <table class=\"justifi-table\">\n          <thead>\n            <tr>\n              <th scope=\"col\" title=\"The date and time each payment was made\">\n                Made on\n              </th>\n              <th scope=\"col\" title=\"The dollar amount of each payment\">\n                Amount\n              </th>\n              <th scope=\"col\">Account</th>\n              <th scope=\"col\">Description</th>\n              <th scope=\"col\">Payment ID</th>\n              <th scope=\"col\">Cardholder</th>\n              <th scope=\"col\">Payment Method</th>\n              <th scope=\"col\">Status</th>\n            </tr>\n          </thead>\n          <tbody>\n            {this.payments.map(payment => {\n              <tr>\n                <td>\n                  <div>{formatDate(payment.created_at)}</div>\n                  <div>{formatTime(payment.created_at)}</div>\n                </td>\n                <td>{formatCurrency(payment.amount)}</td>\n                <td>{payment.account_id}</td>\n                <td>{payment.description}</td>\n                <td>{payment.id}</td>\n                <td>{payment.payment_method?.card?.name}</td>\n                <td>{payment.payment_method?.card?.acct_last_four}</td>\n                <td>{payment.status}</td>\n              </tr>;\n            })}\n          </tbody>\n        </table>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"payments-list.js","sourceRoot":"","sources":["../../../../src/components/payments-list/payments-list.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, State, Watch } from '@stencil/core';\nimport { Api, IApiResponseCollection, Payment } from '../../api';\nimport { formatCurrency, formatDate, formatTime } from '../../utils/utils';\n\ninterface PagingInfo {\n  amount: number,\n  start_cursor: string,\n  end_cursor: string,\n  has_previous: boolean,\n  has_next: boolean,\n}\n\nconst pagingDefaults = {\n  amount: 25,\n  start_cursor: '',\n  end_cursor: '',\n  has_previous: false,\n  has_next: false,\n}\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-payments-list',\n  styleUrl: 'payments-list.scss',\n  shadow: true,\n})\n\nexport class PaymentsList {\n  @Prop() accountId: string;\n  @Prop() authToken: string;\n  @State() payments: Payment[] = [];\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  // onChangeAmount = (e) => {\n  //   const newVal = e?.target?.value;\n  //   if (newVal) {\n  //     this.paging = pagingDefaults;\n  //     this.paging.amount = newVal;\n  //     this.fetchData();\n  //   }\n  // }\n\n  onPageChange = (direction: string) => {\n    return () => {\n      this.fetchData(direction);\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 limit = this.paging.amount;\n    const cursor = `${\n      direction === 'prev'\n      ? '&before_cursor='+this.paging.start_cursor\n      : direction === 'next'\n        ? '&after_cursor='+this.paging.end_cursor\n        : ''\n    }`;\n    const endpoint = `account/${this.accountId}/payments?limit=${limit}${cursor ? cursor : ''}`;\n\n    const response: IApiResponseCollection<Payment[]> = await Api(this.authToken).get(endpoint);\n    if (!response.error) {\n      this.paging = {\n        ...this.paging,\n        ...response.page_info\n      }\n\n      const data = response?.data?.map(dataItem => new Payment(dataItem));\n      this.payments = data;\n    } else {\n      this.errorMessage = typeof response.error === 'string' ? response.error : response.error.message;\n    }\n\n    this.loading = false;\n  }\n\n  showEmptyState() {\n    return this.payments ? this.payments.length < 1 : true;\n  }\n\n  emptyState = (\n    <tr>\n      <td class=\"empty-state\" part=\"empty-state\" colSpan={7} style={{ textAlign: 'center' }}>No payments to show</td>\n    </tr>\n  );\n\n  errorState = () => (\n    <tr>\n      <td class=\"error-state\" part=\"error-state\" colSpan={7} style={{ textAlign: 'center' }}>\n        An unexpected error occurred: {this.errorMessage}\n      </td>\n    </tr>\n  );\n\n  loadingState = (\n    <tr>\n      <td class=\"loading-state\" part=\"loading-state-cell\" colSpan={7} style={{ textAlign: 'center' }}>\n        <div part=\"loading-state-spinner\" class=\"spinner-border\" role=\"status\">\n          <span class=\"visually-hidden\">Loading...</span>\n        </div>\n      </td>\n    </tr>\n  );\n\n  paginationBar = () => {\n    return (\n      <div class=\"pagination-bar d-flex justify-content-center gap-3\">\n        <button\n          onClick={this.onPageChange('prev')}\n          part={`arrow arrow-left${this.paging.has_previous ? '' : ' arrow-disabled'}`}\n          disabled={!this.paging.has_previous}\n          class={`btn btn-primary pagination-btn pagination-prev-btn${this.paging.has_previous ? '' : ' disabled'}`}\n        >&larr;</button>\n        {/* <select class=\"amount-select\" part=\"amount-select\" onChange={this.onChangeAmount}>\n          <option selected={this.paging.amount === 10} value={10}>10</option>\n          <option selected={this.paging.amount === 25} value={25}>25</option>\n          <option selected={this.paging.amount === 50} value={50}>50</option>\n        </select> */}\n        <button\n          onClick={this.onPageChange('next')}\n          part={`arrow arrow-right${this.paging.has_next ? '' : ' arrow-disabled'}`}\n          disabled={!this.paging.has_next}\n          class={`btn btn-primary pagination-btn pagination-next-btn${this.paging.has_next ? '' : ' disabled'}`}\n        >&rarr;</button>\n      </div>\n    )\n  };\n\n  render() {\n    return (\n      <Host exportparts=\"\n        table-head,table-head-row,table-head-cell,table-body,table-row,table-cell,\n        loading-state-cell,loading-state-spinner,error-state,empty-state,\n        pagination-bar,arrow,arrow-left,arrow-right,arrow-disabled\n      \">\n        <table class=\"table table-hover\">\n          <thead class=\"table-head sticky-top\" part=\"table-head\">\n            <tr class=\"table-light\" part='table-head-row'>\n              <th part=\"table-head-cell\" scope=\"col\" title=\"The date and time each payment was made\">\n                Made on\n              </th>\n              <th part=\"table-head-cell\" scope=\"col\" title=\"The dollar amount of each payment\">\n                Amount\n              </th>\n              <th part=\"table-head-cell\" scope=\"col\">Description</th>\n              <th part=\"table-head-cell\" scope=\"col\">Cardholder</th>\n              <th part=\"table-head-cell\" scope=\"col\">Payment Method</th>\n              <th part=\"table-head-cell\" scope=\"col\">Status</th>\n              <th part=\"table-head-cell\" scope=\"col\">Payment ID</th>\n            </tr>\n          </thead>\n          <tbody class=\"table-body\" part='table-body'>\n            {\n              this.loading ? this.loadingState :\n              this.errorMessage ? this.errorState() :\n              this.showEmptyState() ? this.emptyState :\n              this.payments?.map((payment, index) =>\n                <tr part={`table-row${index%2 ? ' table-row-even' : ' table-row-odd'}`}>\n                  <th scope=\"row\" part=\"table-cell\">\n                    <div>{formatDate(payment.created_at)}</div>\n                    <div>{formatTime(payment.created_at)}</div>\n                  </th>\n                  <td part=\"table-cell\">{formatCurrency(payment.amount)}</td>\n                  <td part=\"table-cell\">{payment.description}</td>\n                  <td part=\"table-cell\">{payment.payment_method?.card?.name}</td>\n                  <td part=\"table-cell\">{payment.payment_method?.card?.acct_last_four}</td>\n                  <td part=\"table-cell\">{payment.status}</td>\n                  <td part=\"table-cell\">{payment.id}</td>\n                </tr>\n              )\n            }\n          </tbody>\n          {this.paging &&\n            <tfoot class=\"sticky-bottom\">\n              <tr class=\"table-light align-middle\">\n                <td part=\"pagination-bar\" colSpan={7}>\n                  {this.paginationBar()}\n                </td>\n              </tr>\n            </tfoot>\n          }\n        </table>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,78 @@
+export default {
+  title: 'dev/Components/PaymentsList',
+  component: 'justifi-payments-list',
+  parameters: {},
+  argTypes: {
+    'client-id': {
+      control: 'text',
+      table: {
+        category: 'props',
+      }
+    },
+  },
+};
+class PaymentsListArgs {
+  constructor(args) {
+    this['auth-token'] = args['auth-token'] || '';
+    this['account-id'] = args['account-id'] || '';
+    this['client-id'] = args['client-id'] || '';
+  }
+}
+const Template = (args) => {
+  return (`
+    <justifi-payments-list
+      data-testid="justifi-payments-list"
+      auth-token="${args['auth-token']}"
+      account-id="${args['account-id']}"
+      client-id="${args['client-id']}"
+    />
+  `);
+};
+export const Basic = Template.bind({});
+Basic.args = new PaymentsListArgs({});
+export const Styled = Template.bind({});
+Styled.args = new PaymentsListArgs({});
+Styled.decorators = [
+  (Story) => `
+    ${Story()}
+    <style>
+      justifi-payments-list::part(table-head-cell) {
+        background-color: #F4F4F6;
+      }
+      justifi-payments-list::part(pagination-bar) {
+        background-color: #F4F4F6;
+      }
+      justifi-payments-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-payments-list::part(error-state) {
+        color: red;
+        background-color: #EEEEF5;
+      }
+      justifi-payments-list::part(loading-state-cell) {
+        background-color: #EEEEF5;
+      }
+      justifi-payments-list::part(table-row) {
+        background-color: #EEEEF5;
+      }
+      justifi-payments-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 PaymentsListArgs({});
+//# sourceMappingURL=payments-list.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"payments-list.stories.js","sourceRoot":"","sources":["../../../../src/components/payments-list/payments-list.stories.ts"],"names":[],"mappings":"AAAA,eAAe;EACb,KAAK,EAAE,6BAA6B;EACpC,SAAS,EAAE,uBAAuB;EAClC,UAAU,EAAE,EAAE;EACd,QAAQ,EAAE;IACR,WAAW,EAAE;MACX,OAAO,EAAE,MAAM;MACf,KAAK,EAAE;QACL,QAAQ,EAAE,OAAO;OAClB;KACF;GACF;CACF,CAAC;AAEF,MAAM,gBAAgB;EAKpB,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;IAC9C,IAAI,CAAC,WAAW,CAAC,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC;EAC9C,CAAC;CACF;AAED,MAAM,QAAQ,GAAG,CAAC,IAAsB,EAAE,EAAE;EAC1C,OAAO,CAAC;;;oBAGU,IAAI,CAAC,YAAY,CAAC;oBAClB,IAAI,CAAC,YAAY,CAAC;mBACnB,IAAI,CAAC,WAAW,CAAC;;GAEjC,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/PaymentsList',\n  component: 'justifi-payments-list',\n  parameters: {},\n  argTypes: {\n    'client-id': {\n      control: 'text',\n      table: {\n        category: 'props',\n      }\n    },\n  },\n};\n\nclass PaymentsListArgs {\n  'auth-token': string;\n  'account-id': string;\n  'client-id': string;\n\n  constructor(args) {\n    this['auth-token'] = args['auth-token'] || '';\n    this['account-id'] = args['account-id'] || '';\n    this['client-id'] = args['client-id'] || '';\n  }\n}\n\nconst Template = (args: PaymentsListArgs) => {\n  return (`\n    <justifi-payments-list\n      data-testid=\"justifi-payments-list\"\n      auth-token=\"${args['auth-token']}\"\n      account-id=\"${args['account-id']}\"\n      client-id=\"${args['client-id']}\"\n    />\n  `);\n};\n\nexport const Basic = Template.bind({});\nBasic.args = new PaymentsListArgs({});\n\nexport const Styled = Template.bind({});\nStyled.args = new PaymentsListArgs({});\nStyled.decorators = [\n  (Story) => `\n    ${Story()}\n    <style>\n      justifi-payments-list::part(table-head-cell) {\n        background-color: #F4F4F6;\n      }\n      justifi-payments-list::part(pagination-bar) {\n        background-color: #F4F4F6;\n      }\n      justifi-payments-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-payments-list::part(error-state) {\n        color: red;\n        background-color: #EEEEF5;\n      }\n      justifi-payments-list::part(loading-state-cell) {\n        background-color: #EEEEF5;\n      }\n      justifi-payments-list::part(table-row) {\n        background-color: #EEEEF5;\n      }\n      justifi-payments-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 PaymentsListArgs({});\n"]}

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

@@ -1,21 +1,85 @@
-// import { newSpecPage } from '@stencil/core/testing';
-// import { PaymentsList } from '../payments-list';
-describe('payments-list', () => {
-  it('passes', () => {
-    expect(true);
+import { newSpecPage } from "@stencil/core/testing";
+import { PaymentsList } from "../payments-list";
+describe('justifi-payments-list', () => {
+  it('renders properly', async () => {
+    const page = await newSpecPage({
+      components: [PaymentsList],
+      html: `<justifi-payments-list></justifi-payments-list>`,
+    });
+    expect(page.root).toEqualHtml(`
+    <justifi-payments-list exportparts="
+        table-head,table-head-row,table-head-cell,table-body,table-row,table-cell,
+        loading-state-cell,loading-state-spinner,error-state,empty-state,
+        pagination-bar,arrow,arrow-left,arrow-right,arrow-disabled
+      ">
+      <mock:shadow-root>
+        <table class="table table-hover">
+          <thead class="sticky-top table-head" part="table-head">
+            <tr class="table-light" part="table-head-row">
+              <th part="table-head-cell" scope="col" title="The date and time each payment was made">
+                Made on
+              </th>
+              <th part="table-head-cell" scope="col" title="The dollar amount of each payment">
+                Amount
+              </th>
+              <th part="table-head-cell" scope="col">
+                Description
+              </th>
+              <th part="table-head-cell" scope="col">
+                Cardholder
+              </th>
+              <th part="table-head-cell" scope="col">
+                Payment Method
+              </th>
+              <th part="table-head-cell" scope="col">
+                Status
+              </th>
+              <th part="table-head-cell" scope="col">
+                Payment ID
+              </th>
+            </tr>
+          </thead>
+          <tbody class="table-body" part="table-body">
+            <tr>
+              <td class="error-state" colspan="7" part="error-state" style="text-align: center;">
+                An unexpected error occurred: Can not fetch any data without an AccountID and an AuthToken
+              </td>
+            </tr>
+          </tbody>
+          <tfoot class="sticky-bottom">
+            <tr class="align-middle table-light">
+              <td colspan="7" part="pagination-bar">
+                <div class="d-flex gap-3 justify-content-center pagination-bar">
+                  <button class="btn btn-primary disabled pagination-btn pagination-prev-btn" disabled="" part="arrow arrow-left arrow-disabled">
+                    ←
+                  </button>
+                  <button class="btn btn-primary disabled pagination-btn pagination-next-btn" disabled="" part="arrow arrow-right arrow-disabled">
+                    →
+                  </button>
+                </div>
+              </td>
+            </tr>
+          </tfoot>
+        </table>
+      </mock:shadow-root>
+    </justifi-payments-list>
+    `);
+  });
+  it('stops loading', async () => {
+    const page = await newSpecPage({
+      components: [PaymentsList],
+      html: `<justifi-payments-list></justifi-payments-list>`,
+    });
+    const loading = page.root.__shadowRoot.querySelector('.loading-state');
+    expect(loading).toEqual(null);
+  });
+  it('renders an error when not given proper auth data', async () => {
+    const page = await newSpecPage({
+      components: [PaymentsList],
+      html: `<justifi-payments-list></justifi-payments-list>`,
+    });
+    const error = page.root.__shadowRoot.querySelector('.error-state');
+    expect(error).toBeDefined();
   });
-  // it('renders', async () => {
-  //   const page = await newSpecPage({
-  //     components: [PaymentsList],
-  //     html: `<payments-list></payments-list>`,
-  //   });
-  //   expect(page.root).toEqualHtml(`
-  //     <payments-list>
-  //       <mock:shadow-root>
-  //         <slot></slot>
-  //       </mock:shadow-root>
-  //     </payments-list>
-  //   `);
-  // });
 });
 //# sourceMappingURL=payments-list.spec.js.map

package/dist/collection/components/payments-list/test/payments-list.spec.js.map

@@ -1 +1 @@
-{"version":3,"file":"payments-list.spec.js","sourceRoot":"","sources":["../../../../../src/components/payments-list/test/payments-list.spec.tsx"],"names":[],"mappings":"AAAA,uDAAuD;AACvD,mDAAmD;AAEnD,QAAQ,CAAC,eAAe,EAAE,GAAG,EAAE;EAC7B,EAAE,CAAC,QAAQ,EAAE,GAAG,EAAE;IAChB,MAAM,CAAC,IAAI,CAAC,CAAC;EACf,CAAC,CAAC,CAAC;EACH,8BAA8B;EAC9B,qCAAqC;EACrC,kCAAkC;EAClC,+CAA+C;EAC/C,QAAQ;EACR,oCAAoC;EACpC,sBAAsB;EACtB,2BAA2B;EAC3B,wBAAwB;EACxB,4BAA4B;EAC5B,uBAAuB;EACvB,QAAQ;EACR,MAAM;AACR,CAAC,CAAC,CAAC","sourcesContent":["// import { newSpecPage } from '@stencil/core/testing';\n// import { PaymentsList } from '../payments-list';\n\ndescribe('payments-list', () => {\n  it('passes', () => {\n    expect(true);\n  });\n  // it('renders', async () => {\n  //   const page = await newSpecPage({\n  //     components: [PaymentsList],\n  //     html: `<payments-list></payments-list>`,\n  //   });\n  //   expect(page.root).toEqualHtml(`\n  //     <payments-list>\n  //       <mock:shadow-root>\n  //         <slot></slot>\n  //       </mock:shadow-root>\n  //     </payments-list>\n  //   `);\n  // });\n});\n"]}
+{"version":3,"file":"payments-list.spec.js","sourceRoot":"","sources":["../../../../../src/components/payments-list/test/payments-list.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAEhD,QAAQ,CAAC,uBAAuB,EAAE,GAAG,EAAE;EACrC,EAAE,CAAC,kBAAkB,EAAE,KAAK,IAAI,EAAE;IAChC,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,YAAY,CAAC;MAC1B,IAAI,EAAE,iDAAiD;KACxD,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAyD7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,eAAe,EAAE,KAAK,IAAI,EAAE;IAC7B,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,YAAY,CAAC;MAC1B,IAAI,EAAE,iDAAiD;KACxD,CAAC,CAAC;IAEH,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;IAEvE,MAAM,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;EAChC,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,kDAAkD,EAAE,KAAK,IAAI,EAAE;IAChE,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,YAAY,CAAC;MAC1B,IAAI,EAAE,iDAAiD;KACxD,CAAC,CAAC;IAEH,MAAM,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;IAEnE,MAAM,CAAC,KAAK,CAAC,CAAC,WAAW,EAAE,CAAC;EAC9B,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { PaymentsList } from '../payments-list';\n\ndescribe('justifi-payments-list', () => {\n  it('renders properly', async () => {\n    const page = await newSpecPage({\n      components: [PaymentsList],\n      html: `<justifi-payments-list></justifi-payments-list>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <justifi-payments-list exportparts=\"\n        table-head,table-head-row,table-head-cell,table-body,table-row,table-cell,\n        loading-state-cell,loading-state-spinner,error-state,empty-state,\n        pagination-bar,arrow,arrow-left,arrow-right,arrow-disabled\n      \">\n      <mock:shadow-root>\n        <table class=\"table table-hover\">\n          <thead class=\"sticky-top table-head\" part=\"table-head\">\n            <tr class=\"table-light\" part=\"table-head-row\">\n              <th part=\"table-head-cell\" scope=\"col\" title=\"The date and time each payment was made\">\n                Made on\n              </th>\n              <th part=\"table-head-cell\" scope=\"col\" title=\"The dollar amount of each payment\">\n                Amount\n              </th>\n              <th part=\"table-head-cell\" scope=\"col\">\n                Description\n              </th>\n              <th part=\"table-head-cell\" scope=\"col\">\n                Cardholder\n              </th>\n              <th part=\"table-head-cell\" scope=\"col\">\n                Payment Method\n              </th>\n              <th part=\"table-head-cell\" scope=\"col\">\n                Status\n              </th>\n              <th part=\"table-head-cell\" scope=\"col\">\n                Payment ID\n              </th>\n            </tr>\n          </thead>\n          <tbody class=\"table-body\" part=\"table-body\">\n            <tr>\n              <td class=\"error-state\" colspan=\"7\" part=\"error-state\" style=\"text-align: center;\">\n                An unexpected error occurred: Can not fetch any data without an AccountID and an AuthToken\n              </td>\n            </tr>\n          </tbody>\n          <tfoot class=\"sticky-bottom\">\n            <tr class=\"align-middle table-light\">\n              <td colspan=\"7\" part=\"pagination-bar\">\n                <div class=\"d-flex gap-3 justify-content-center pagination-bar\">\n                  <button class=\"btn btn-primary disabled pagination-btn pagination-prev-btn\" disabled=\"\" part=\"arrow arrow-left arrow-disabled\">\n                    ←\n                  </button>\n                  <button class=\"btn btn-primary disabled pagination-btn pagination-next-btn\" disabled=\"\" part=\"arrow arrow-right arrow-disabled\">\n                    →\n                  </button>\n                </div>\n              </td>\n            </tr>\n          </tfoot>\n        </table>\n      </mock:shadow-root>\n    </justifi-payments-list>\n    `);\n  });\n\n  it('stops loading', async () => {\n    const page = await newSpecPage({\n      components: [PaymentsList],\n      html: `<justifi-payments-list></justifi-payments-list>`,\n    });\n\n    const loading = page.root.__shadowRoot.querySelector('.loading-state');\n\n    expect(loading).toEqual(null);\n  });\n\n  it('renders an error when not given proper auth data', async () => {\n    const page = await newSpecPage({\n      components: [PaymentsList],\n      html: `<justifi-payments-list></justifi-payments-list>`,\n    });\n\n    const error = page.root.__shadowRoot.querySelector('.error-state');\n\n    expect(error).toBeDefined();\n  });\n});\n"]}