@justifi/webcomponents 4.7.4 → 4.7.6

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

@@ -23,192 +23,192 @@ import { config } from "../../../config";
   * @exportedPart next-button-text: Text for Next button
 */
 export class ProceedsList {
-  constructor() {
-    this.mapStatusToBadge = (status) => {
-      switch (status) {
-        case ProceedStatuses.scheduled:
-          return `<span class="badge bg-primary" title='Batched and scheduled to be transferred'>${ProceedStatusesSafeNames[status]}</span>`;
-        case ProceedStatuses.in_transit:
-          return `<span class="badge bg-primary" title='Transfer to your bank account has been initiated'>${ProceedStatusesSafeNames[status]}</span>`;
-        case ProceedStatuses.failed:
-          return `<span class="badge bg-danger" title='Transfer to your bank account failed'>${ProceedStatusesSafeNames[status]}</span>`;
-        case ProceedStatuses.canceled:
-          return `<span class="badge bg-danger" title='Transfer to your bank account failed'>${ProceedStatusesSafeNames[status]}</span>`;
-        case ProceedStatuses.forwarded:
-          return `<span class="badge bg-secondary" title='This payout initially failed; the funds have been forwarded to your next successful batch of proceeds'>${ProceedStatusesSafeNames[status]}</span>`;
-        case ProceedStatuses.paid:
-          return `<span class="badge bg-success" title='Successfully deposited into your bank account'>${ProceedStatusesSafeNames[status]}</span>`;
-      }
-    };
-    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.proceeds = [];
-    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;
+    constructor() {
+        this.mapStatusToBadge = (status) => {
+            switch (status) {
+                case ProceedStatuses.scheduled:
+                    return `<span class="badge bg-primary" title='Batched and scheduled to be transferred'>${ProceedStatusesSafeNames[status]}</span>`;
+                case ProceedStatuses.in_transit:
+                    return `<span class="badge bg-primary" title='Transfer to your bank account has been initiated'>${ProceedStatusesSafeNames[status]}</span>`;
+                case ProceedStatuses.failed:
+                    return `<span class="badge bg-danger" title='Transfer to your bank account failed'>${ProceedStatusesSafeNames[status]}</span>`;
+                case ProceedStatuses.canceled:
+                    return `<span class="badge bg-danger" title='Transfer to your bank account failed'>${ProceedStatusesSafeNames[status]}</span>`;
+                case ProceedStatuses.forwarded:
+                    return `<span class="badge bg-secondary" title='This payout initially failed; the funds have been forwarded to your next successful batch of proceeds'>${ProceedStatusesSafeNames[status]}</span>`;
+                case ProceedStatuses.paid:
+                    return `<span class="badge bg-success" title='Successfully deposited into your bank account'>${ProceedStatusesSafeNames[status]}</span>`;
+            }
+        };
+        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.proceeds = [];
+        this.loading = true;
+        this.errorMessage = undefined;
+        this.paging = pagingDefaults;
+        this.params = undefined;
     }
-    this.loading = true;
-    const endpoint = `account/${this.accountId}/proceeds`;
-    const response = await Api(this.authToken, config.privateApiOrigin)
-      .get(endpoint, 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 Proceed(dataItem));
-      this.proceeds = data;
+    updateOnPropChange() {
+        this.fetchData();
     }
-    else {
-      this.errorMessage = typeof response.error === 'string' ? response.error : response.error.message;
+    connectedCallback() {
+        this.fetchData();
     }
-    this.loading = false;
-  }
-  render() {
-    return (h(Host, null, h("justifi-table", { rowClickHandler: (e) => {
-        const clickedProceedID = e.target.closest('tr').dataset.rowEntityId;
-        if (!clickedProceedID) {
-          return;
+    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.rowClicked.emit(this.proceeds.find((proceed) => proceed.id === clickedProceedID));
-      }, entityId: this.proceeds.map((proceed) => proceed.id), columnData: [
-        ['Paid Out On', 'The date each batch of proceeds is transferred to your bank account'],
-        ['Paid Out To', 'The bank account to which each payout is sent'],
-        ['From Payments', 'The amount added related to payments in each payout'],
-        ['From Refunds', 'The amount deducted related to refunds in each payout'],
-        ['Other', 'The amount related to less common transactions in each payout (disputes, ACH returns, fee refunds, and forwarded balances due to failed payouts)'],
-        ['Proceeds Amount', 'The net sum of all transactions in each payout. This is the amount you\'ll see reflected on your bank statement.'],
-        ['Status', 'The real-time status of each payout'],
-      ], rowData: this.proceeds.map((proceed) => ([
-        {
-          type: 'head',
-          value: formatDate(proceed.deposits_at),
-        },
-        proceed.bank_account.full_name,
-        formatCurrency(proceed.payments_total),
-        formatCurrency(proceed.refunds_total),
-        formatCurrency(proceed.other_total),
-        formatCurrency(proceed.amount),
-        {
-          type: 'inner',
-          value: this.mapStatusToBadge(proceed.status)
+        this.loading = true;
+        const endpoint = `account/${this.accountId}/proceeds`;
+        const response = await Api(this.authToken, config.privateApiOrigin)
+            .get(endpoint, 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 Proceed(dataItem));
+            this.proceeds = data;
         }
-      ])), 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-proceeds-list"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["proceeds-list.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["proceeds-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 {
-      "proceeds": {},
-      "loading": {},
-      "errorMessage": {},
-      "paging": {},
-      "params": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "rowClicked",
-        "name": "proceed-row-clicked",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "Proceed",
-          "resolved": "Proceed",
-          "references": {
-            "Proceed": {
-              "location": "import",
-              "path": "../../api/Proceed",
-              "id": "src/api/Proceed.ts::Proceed"
-            }
-          }
+        else {
+            this.errorMessage = typeof response.error === 'string' ? response.error : response.error.message;
         }
-      }];
-  }
-  static get watchers() {
-    return [{
-        "propName": "accountId",
-        "methodName": "updateOnPropChange"
-      }, {
-        "propName": "authToken",
-        "methodName": "updateOnPropChange"
-      }, {
-        "propName": "params",
-        "methodName": "updateOnPropChange"
-      }];
-  }
+        this.loading = false;
+    }
+    render() {
+        return (h(Host, null, h("justifi-table", { rowClickHandler: (e) => {
+                const clickedProceedID = e.target.closest('tr').dataset.rowEntityId;
+                if (!clickedProceedID) {
+                    return;
+                }
+                this.rowClicked.emit(this.proceeds.find((proceed) => proceed.id === clickedProceedID));
+            }, entityId: this.proceeds.map((proceed) => proceed.id), columnData: [
+                ['Paid Out On', 'The date each batch of proceeds is transferred to your bank account'],
+                ['Paid Out To', 'The bank account to which each payout is sent'],
+                ['From Payments', 'The amount added related to payments in each payout'],
+                ['From Refunds', 'The amount deducted related to refunds in each payout'],
+                ['Other', 'The amount related to less common transactions in each payout (disputes, ACH returns, fee refunds, and forwarded balances due to failed payouts)'],
+                ['Proceeds Amount', 'The net sum of all transactions in each payout. This is the amount you\'ll see reflected on your bank statement.'],
+                ['Status', 'The real-time status of each payout'],
+            ], rowData: this.proceeds.map((proceed) => ([
+                {
+                    type: 'head',
+                    value: formatDate(proceed.deposits_at),
+                },
+                proceed.bank_account.full_name,
+                formatCurrency(proceed.payments_total),
+                formatCurrency(proceed.refunds_total),
+                formatCurrency(proceed.other_total),
+                formatCurrency(proceed.amount),
+                {
+                    type: 'inner',
+                    value: this.mapStatusToBadge(proceed.status)
+                }
+            ])), 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-proceeds-list"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["proceeds-list.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["proceeds-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 {
+            "proceeds": {},
+            "loading": {},
+            "errorMessage": {},
+            "paging": {},
+            "params": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "rowClicked",
+                "name": "proceed-row-clicked",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "Proceed",
+                    "resolved": "Proceed",
+                    "references": {
+                        "Proceed": {
+                            "location": "import",
+                            "path": "../../api/Proceed",
+                            "id": "src/api/Proceed.ts::Proceed"
+                        }
+                    }
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "accountId",
+                "methodName": "updateOnPropChange"
+            }, {
+                "propName": "authToken",
+                "methodName": "updateOnPropChange"
+            }, {
+                "propName": "params",
+                "methodName": "updateOnPropChange"
+            }];
+    }
 }

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

@@ -1,10 +1,10 @@
 import { config } from "../../../config";
 export default {
-  title: 'dev/Components/ProceedsList',
-  component: 'justifi-proceeds-list',
-  parameters: {},
-  decorators: [
-    (Story) => `
+    title: 'dev/Components/ProceedsList',
+    component: 'justifi-proceeds-list',
+    parameters: {},
+    decorators: [
+        (Story) => `
       ${Story()}
       <script>
         window.addEventListener('proceed-row-clicked', (e) => {
@@ -12,16 +12,16 @@ export default {
         })
       </script>
     `
-  ]
+    ]
 };
 class ProceedsListArgs {
-  constructor(args) {
-    this['auth-token'] = args['auth-token'] || config.privateAuthToken;
-    this['account-id'] = args['account-id'] || '';
-  }
+    constructor(args) {
+        this['auth-token'] = args['auth-token'] || config.privateAuthToken;
+        this['account-id'] = args['account-id'] || '';
+    }
 }
 const Template = (args) => {
-  return (`
+    return (`
     <justifi-proceeds-list
       data-testid="justifi-proceeds-list"
       auth-token="${args['auth-token']}"
@@ -34,7 +34,7 @@ Basic.args = new ProceedsListArgs({});
 export const Styled = Template.bind({});
 Styled.args = new ProceedsListArgs({});
 Styled.decorators = [
-  (Story) => `
+    (Story) => `
     ${Story()}
     <style>
       justifi-proceeds-list::part(table-head-cell) {

package/dist/collection/components/refund-form/refund-form-schema.js

@@ -1,13 +1,13 @@
 import * as yup from "yup";
 const RefundFormSchema = yup.object().shape({
-  amount: yup
-    .number()
-    .required('Amount is required')
-    .typeError('Amount must be a number')
-    .positive('Amount must be positive')
-    .test('amount', 'Refund amount cannot be more than the original payment amount', function (value) {
-    return value <= this.options.context.amount;
-  })
-    .nullable(),
+    amount: yup
+        .number()
+        .required('Amount is required')
+        .typeError('Amount must be a number')
+        .positive('Amount must be positive')
+        .test('amount', 'Refund amount cannot be more than the original payment amount', function (value) {
+        return value <= this.options.context.amount;
+    })
+        .nullable(),
 });
 export default RefundFormSchema;

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

@@ -93,6 +93,7 @@
   --bs-link-hover-color: #0a58ca;
   --bs-link-hover-color-rgb: 10, 88, 202;
   --bs-code-color: #d63384;
+  --bs-highlight-color: #212529;
   --bs-highlight-bg: #fff3cd;
   --bs-border-width: 1px;
   --bs-border-style: solid;
@@ -164,6 +165,8 @@
   --bs-link-color-rgb: 110, 168, 254;
   --bs-link-hover-color-rgb: 139, 185, 254;
   --bs-code-color: #e685b5;
+  --bs-highlight-color: #dee2e6;
+  --bs-highlight-bg: #664d03;
   --bs-border-color: #495057;
   --bs-border-color-translucent: rgba(255, 255, 255, 0.15);
   --bs-form-valid-color: #75b798;
@@ -712,6 +715,7 @@ small {
 
 mark {
   padding: 0.1875em;
+  color: var(--bs-highlight-color);
   background-color: var(--bs-highlight-bg);
 }
 
@@ -1021,7 +1025,7 @@ progress {
 
 .row-cols-3 > * {
   flex: 0 0 auto;
-  width: 33.3333333333%;
+  width: 33.33333333%;
 }
 
 .row-cols-4 > * {
@@ -1036,7 +1040,7 @@ progress {
 
 .row-cols-6 > * {
   flex: 0 0 auto;
-  width: 16.6666666667%;
+  width: 16.66666667%;
 }
 
 .col-auto {
@@ -1226,7 +1230,7 @@ progress {
   }
   .row-cols-sm-3 > * {
     flex: 0 0 auto;
-    width: 33.3333333333%;
+    width: 33.33333333%;
   }
   .row-cols-sm-4 > * {
     flex: 0 0 auto;
@@ -1238,7 +1242,7 @@ progress {
   }
   .row-cols-sm-6 > * {
     flex: 0 0 auto;
-    width: 16.6666666667%;
+    width: 16.66666667%;
   }
   .col-sm-auto {
     flex: 0 0 auto;
@@ -1395,7 +1399,7 @@ progress {
   }
   .row-cols-md-3 > * {
     flex: 0 0 auto;
-    width: 33.3333333333%;
+    width: 33.33333333%;
   }
   .row-cols-md-4 > * {
     flex: 0 0 auto;
@@ -1407,7 +1411,7 @@ progress {
   }
   .row-cols-md-6 > * {
     flex: 0 0 auto;
-    width: 16.6666666667%;
+    width: 16.66666667%;
   }
   .col-md-auto {
     flex: 0 0 auto;
@@ -1564,7 +1568,7 @@ progress {
   }
   .row-cols-lg-3 > * {
     flex: 0 0 auto;
-    width: 33.3333333333%;
+    width: 33.33333333%;
   }
   .row-cols-lg-4 > * {
     flex: 0 0 auto;
@@ -1576,7 +1580,7 @@ progress {
   }
   .row-cols-lg-6 > * {
     flex: 0 0 auto;
-    width: 16.6666666667%;
+    width: 16.66666667%;
   }
   .col-lg-auto {
     flex: 0 0 auto;
@@ -1733,7 +1737,7 @@ progress {
   }
   .row-cols-xl-3 > * {
     flex: 0 0 auto;
-    width: 33.3333333333%;
+    width: 33.33333333%;
   }
   .row-cols-xl-4 > * {
     flex: 0 0 auto;
@@ -1745,7 +1749,7 @@ progress {
   }
   .row-cols-xl-6 > * {
     flex: 0 0 auto;
-    width: 16.6666666667%;
+    width: 16.66666667%;
   }
   .col-xl-auto {
     flex: 0 0 auto;
@@ -1902,7 +1906,7 @@ progress {
   }
   .row-cols-xxl-3 > * {
     flex: 0 0 auto;
-    width: 33.3333333333%;
+    width: 33.33333333%;
   }
   .row-cols-xxl-4 > * {
     flex: 0 0 auto;
@@ -1914,7 +1918,7 @@ progress {
   }
   .row-cols-xxl-6 > * {
     flex: 0 0 auto;
-    width: 16.6666666667%;
+    width: 16.66666667%;
   }
   .col-xxl-auto {
     flex: 0 0 auto;
@@ -2438,7 +2442,7 @@ progress {
 }
 
 /*!
- * Bootstrap Utilities v5.3.1 (https://getbootstrap.com/)
+ * Bootstrap Utilities v5.3.2 (https://getbootstrap.com/)
  * Copyright 2011-2023 The Bootstrap Authors
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
  */
@@ -2537,6 +2541,7 @@ progress {
   --bs-link-hover-color: #0a58ca;
   --bs-link-hover-color-rgb: 10, 88, 202;
   --bs-code-color: #d63384;
+  --bs-highlight-color: #212529;
   --bs-highlight-bg: #fff3cd;
   --bs-border-width: 1px;
   --bs-border-style: solid;
@@ -2608,6 +2613,8 @@ progress {
   --bs-link-color-rgb: 110, 168, 254;
   --bs-link-hover-color-rgb: 139, 185, 254;
   --bs-code-color: #e685b5;
+  --bs-highlight-color: #dee2e6;
+  --bs-highlight-bg: #664d03;
   --bs-border-color: #495057;
   --bs-border-color-translucent: rgba(255, 255, 255, 0.15);
   --bs-form-valid-color: #75b798;
@@ -3118,15 +3125,15 @@ progress {
 }
 
 .shadow {
-  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
+  box-shadow: var(--bs-box-shadow) !important;
 }
 
 .shadow-sm {
-  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
+  box-shadow: var(--bs-box-shadow-sm) !important;
 }
 
 .shadow-lg {
-  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important;
+  box-shadow: var(--bs-box-shadow-lg) !important;
 }
 
 .shadow-none {