@justifi/webcomponents 4.4.0 → 4.5.0

package/dist/components/table.js.map

@@ -0,0 +1 @@
+{"file":"table.js","mappings":"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","names":[],"sources":["src/components/table/table-utils.ts","src/components/table/table.scss?tag=justifi-table&encapsulation=shadow","src/components/table/table.tsx"],"sourcesContent":["export interface PagingInfo {\n  amount: number,\n  start_cursor: string,\n  end_cursor: string,\n  has_previous: boolean,\n  has_next: boolean,\n}\n\nexport const pagingDefaults = {\n  amount: 25,\n  start_cursor: '',\n  end_cursor: '',\n  has_previous: false,\n  has_next: false,\n}\n","@import \"reboot\";\n@import \"tables\";\n@import \"buttons\";\n@import \"badge\";\n@import \"grid\";\n@import \"bootstrap-utilities\";\n@import \"pagination\";\n\n:host {\n  @include host-base-styles;\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\nimport { PagingInfo, pagingDefaults } from '../table/table-utils';\n\ninterface ExtendedPagingInfo extends PagingInfo {\n  onPrev: () => void;\n  onNext: () => void;\n}\n\nconst ExtendedPagingDefaults: ExtendedPagingInfo = {\n  ...pagingDefaults,\n  onPrev: () => {},\n  onNext: () => {},\n}\n\nexport interface TableProps {\n  loading: boolean;\n  errorMessage: string;\n  columnData: (string|string[])[];\n  rowData: any[];\n  paging: ExtendedPagingInfo;\n}\n\n@Component({\n  tag: 'justifi-table',\n  styleUrl: './table.scss',\n  shadow: true,\n})\n\nexport class Table {\n  @Prop() loading: TableProps['loading'] = true;\n  @Prop() errorMessage: TableProps['errorMessage'] = '';\n  @Prop() rowData: TableProps['rowData'] = [];\n  @Prop() columnData!: TableProps['columnData'];\n  @Prop() paging: TableProps['paging'] = ExtendedPagingDefaults;\n  @Prop() entityId: string[];\n  @Prop() rowClickHandler: (e: any) => any;\n\n  showEmptyState() {\n    return this.rowData ? this.rowData.length < 1 : true;\n  }\n\n  emptyState = () => (\n    <tr>\n      <td class=\"empty-state\" part=\"empty-state\" colSpan={this.columnData?.length} 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={this.columnData?.length} 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={this.columnData?.length} 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      <nav aria-label=\"Table pagination\" class=\"d-flex justify-content-end gap-3\">\n        <ul class=\"pagination m-0\">\n          <li\n            onClick={(e) => {\n              e.preventDefault();\n              this.paging.onPrev();\n            }}\n            part={`previous-button${this.paging.has_previous ? '' : ' button-disabled'}`}\n            class={`page-item ${this.paging.has_previous ? '' : ' disabled'}`}\n          >\n            <a href=\"#\" class=\"page-link\">\n              <span class=\"me-1\" part=\"arrow arrow-left\">&laquo;</span>\n              <span part=\"previous-button-text\">Previous</span>\n            </a>\n          </li>\n          <li\n            onClick={(e) => {\n              e.preventDefault();\n              this.paging.onNext();\n            }}\n            part={`${this.paging.has_next ? '' : ' button-disabled'}`}\n            class={`page-item ${this.paging.has_next ? '' : ' disabled'}`}\n          >\n            <a href=\"#\" class=\"page-link\">\n              <span part=\"next-button-text\">Next</span>\n              <span class=\"ms-1\" part=\"arrow arrow-right\">&raquo;</span>\n            </a>\n          </li>\n        </ul>\n      </nav>\n    )\n  };\n\n  render() {\n    return (\n      <Host exportparts=\"\n        table-head,table-head-row,table-head-cell,table-body,table-row,table-row-even,\n        table-row-odd,table-cell,loading-state-cell,loading-state-spinner,error-state,\n        empty-state,pagination-bar,arrow,arrow-left,arrow-right,button-disabled,\n        previous-button-text,next-button-text\n      \">\n        {this.columnData ?\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              {\n                this.columnData?.map((column) =>\n                  <th part=\"table-head-cell\" scope=\"col\" title={Array.isArray(column) ? column[1] : ''}>\n                    {!Array.isArray(column) ? column : column[0]}\n                  </th>\n                )\n              }\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.rowData?.map((data, index) => {\n                return (\n                <tr\n                  data-row-entity-id={this.entityId[index]}\n                  onClick={e => this.rowClickHandler ? this.rowClickHandler(e) : null}\n                  part={`table-row${index%2 ? ' table-row-even' : ' table-row-odd'}`}\n                >\n                  {\n                    data.map((dataEntry: any) =>\n                      { return (\n                          !dataEntry?.type\n                          ? <td part=\"table-cell\">{dataEntry}</td>\n                          : <th scope=\"row\" part=\"table-cell\">\n                              <td part=\"table-cell\" innerHTML={dataEntry.value}></td>\n                            </th>\n                        )\n                      }\n                    )\n                  }\n                </tr>\n                )\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={this.columnData?.length}>\n                  {this.paginationBar()}\n                </td>\n              </tr>\n            </tfoot>\n          }\n        </table>\n        :\n        <div data-test-id=\"empty-error-state\">Column data is required</div>}\n      </Host>\n    )\n  }\n}\n"],"version":3}

package/dist/components/utils.js

@@ -1,104 +1,3 @@
-var CaptureStrategy;
-(function (CaptureStrategy) {
-  CaptureStrategy["automatic"] = "automatic";
-  CaptureStrategy["manual"] = "manual";
-})(CaptureStrategy || (CaptureStrategy = {}));
-var PaymentMethodTypes;
-(function (PaymentMethodTypes) {
-  PaymentMethodTypes["card"] = "card";
-  PaymentMethodTypes["bankAccount"] = "bankAccount";
-})(PaymentMethodTypes || (PaymentMethodTypes = {}));
-var PaymentStatuses;
-(function (PaymentStatuses) {
-  PaymentStatuses["pending"] = "pending";
-  PaymentStatuses["authorized"] = "authorized";
-  PaymentStatuses["succeeded"] = "succeeded";
-  PaymentStatuses["failed"] = "failed";
-  PaymentStatuses["disputed"] = "disputed";
-  PaymentStatuses["fully_refunded"] = "fully_refunded";
-  PaymentStatuses["partially_refunded"] = "partially_refunded";
-})(PaymentStatuses || (PaymentStatuses = {}));
-var PaymentDisputedStatuses;
-(function (PaymentDisputedStatuses) {
-  // if a dispute is 'won', we don't show a dispute status, just general status
-  PaymentDisputedStatuses["lost"] = "lost";
-  PaymentDisputedStatuses["open"] = "open";
-})(PaymentDisputedStatuses || (PaymentDisputedStatuses = {}));
-class Payment {
-  constructor(payment) {
-    this.id = payment.id;
-    this.account_id = payment.account_id;
-    this.amount = payment.amount;
-    this.amount_disputed = payment.amount_disputed;
-    this.amount_refundable = payment.amount_refundable;
-    this.amount_refunded = payment.amount_refunded;
-    this.balance = payment.balance;
-    this.captured = payment.captured;
-    this.capture_strategy = payment.capture_strategy;
-    this.currency = payment.currency;
-    this.description = payment.description;
-    this.disputed = payment.disputed;
-    this.disputes = payment.disputes;
-    this.error_code = payment.error_code;
-    this.error_description = payment.error_description;
-    this.fee_amount = payment.fee_amount;
-    this.is_test = payment.is_test;
-    this.metadata = payment.metadata;
-    this.payment_method = payment.payment_method;
-    this.payment_intent_id = payment.payment_intent_id;
-    this.refunded = payment.refunded;
-    this.status = payment.status;
-    this.created_at = payment.created_at;
-    this.updated_at = payment.updated_at;
-  }
-  get disputedStatus() {
-    const lost = this.disputes.some(dispute => dispute.status === PaymentDisputedStatuses.lost);
-    // if a dispute is 'won', we don't show a dispute status, just general status
-    if (!this.disputed) {
-      return null;
-    }
-    else if (lost) {
-      return PaymentDisputedStatuses.lost;
-    }
-    else {
-      return PaymentDisputedStatuses.open;
-    }
-  }
-}
-
-var PayoutStatuses;
-(function (PayoutStatuses) {
-  PayoutStatuses["paid"] = "paid";
-  PayoutStatuses["failed"] = "failed";
-  PayoutStatuses["forwarded"] = "forwarded";
-  PayoutStatuses["scheduled"] = "scheduled";
-  PayoutStatuses["in_transit"] = "in_transit";
-  PayoutStatuses["canceled"] = "canceled";
-})(PayoutStatuses || (PayoutStatuses = {}));
-class Payout {
-  constructor(payout) {
-    this.id = payout.id;
-    this.account_id = payout.account_id;
-    this.amount = payout.amount;
-    this.bank_account = payout.bank_account;
-    this.currency = payout.currency;
-    this.delivery_method = payout.delivery_method || 'standard';
-    this.description = payout.description;
-    this.deposits_at = payout.deposits_at;
-    this.fees_total = payout.fees_total;
-    this.refunds_count = payout.refunds_count;
-    this.refunds_total = payout.refunds_total;
-    this.payments_count = payout.payments_count;
-    this.payments_total = payout.payments_total;
-    this.payout_type = payout.payout_type;
-    this.other_total = payout.other_total;
-    this.status = payout.status;
-    this.metadata = payout.metadata;
-    this.created_at = payout.created_at;
-    this.updated_at = payout.updated_at;
-  }
-}
-
 function _typeof$1(obj) {
   "@babel/helpers - typeof";
 
@@ -3966,7 +3865,47 @@ function extractComputedFontsToLoad() {
   const computedStyles = getComputedStyle(document.body);
   return ((_a = computedStyles === null || computedStyles === void 0 ? void 0 : computedStyles.getPropertyValue('--jfi-load-google-font')) === null || _a === void 0 ? void 0 : _a.trim().replace(/'|"/g, '').replace(' ', '+')) || null;
 }
+const MapPaymentStatusToBadge = (status) => {
+  switch (status) {
+    case "authorized":
+      return "<span class='badge bg-primary' title='This card payment was authorized, but not captured. It could still succeed or fail.'>Authorized</span>";
+    case "disputed":
+      return "<span class='badge bg-primary' title='The account holder disputed this payment. The amount has been returned and a fee assessed.'>Disputed</span>";
+    case "achFailed":
+      return "<span class='badge bg-danger' title='The funds couldn't be collected for this ACH payment (in addition to the original payment, an ACH return and fee will appear in a payout)'>Failed</span>";
+    case "failed":
+      return "<span class='badge bg-danger' title='This card payment didn't go through (it won't appear in a payout)'>Failed</span>";
+    case "fully_refunded":
+      return "<span class='badge bg-primary' title='The full amount of this payment has been refunded'>Fully Refunded</span>";
+    case "partially_refunded":
+      return "<span class='badge bg-primary' title='A portion of this payment has been refunded'>Partially Refunded</span>";
+    case "pending":
+      return "<span class='badge bg-secondary' title='This ACH payment was processed, but the funds haven't settled. It could still succeed or fail.'>Pending</span>";
+    case "succeeded":
+      return "<span class='badge bg-success' title='This payment was successfully captured'>Successful</span>";
+  }
+};
+const MapPayoutStatusToBadge = (status) => {
+  switch (status) {
+    case "canceled":
+      return "<span class='badge bg-danger' title='Transfer to your bank account failed'>Canceled</span>";
+    case "failed":
+      return "<span class='badge bg-danger' title='Transfer to your bank account failed'>Failed</span>";
+    case "forwarded":
+      return "<span class='badge bg-secondary' title='This payout initially failed; the funds have been forwarded to your next successful payout'>Forwarded</span>";
+    case "in_transit":
+      return "<span class='badge bg-primary' title='Transfer to your bank account has been initiated'>In Transit</span>";
+    case "paid":
+      return "<span class='badge bg-success' title='Successfully deposited into your bank account'>Paid</span>";
+    case "pending":
+      return "<span class='badge bg-primary' title='Batched and scheduled to be transferred'>Pending</span>";
+    case "scheduled":
+      return "<span class='badge bg-primary' title='Batched and scheduled to be transferred'>Scheduled</span>";
+    case "withdrawn":
+      return "<span class='badge bg-success' title='Negative payout balance successfully withdrawn from your bank account'>Withdrawn</span>";
+  }
+};
 
-export { PaymentMethodTypes as P, Payment as a, formatTime as b, formatCurrency as c, PayoutStatuses as d, extractComputedFontsToLoad as e, formatDate as f, Payout as g };
+export { MapPaymentStatusToBadge as M, formatCurrency as a, formatTime as b, MapPayoutStatusToBadge as c, extractComputedFontsToLoad as e, formatDate as f };
 
 //# sourceMappingURL=utils.js.map