@justifi/webcomponents 4.7.4 → 4.7.6

package/dist/collection/components/payment-method-form/test/payment-method-form.spec.js

@@ -3,81 +3,81 @@ import { h } from "@stencil/core";
 import { newSpecPage } from "@stencil/core/testing";
 import { PaymentMethodForm } from "../payment-method-form";
 describe('justifi-payment-method-form', () => {
-  it('renders an iframe', async () => {
-    const page = await newSpecPage({
-      components: [PaymentMethodForm],
-      template: () => h("justifi-payment-method-form", { paymentMethodFormType: 'card' }),
-    });
-    expect(page.root).toEqualHtml(`
+    it('renders an iframe', async () => {
+        const page = await newSpecPage({
+            components: [PaymentMethodForm],
+            template: () => h("justifi-payment-method-form", { paymentMethodFormType: 'card' }),
+        });
+        expect(page.root).toEqualHtml(`
     <justifi-payment-method-form>
       <iframe id='justifi-payment-method-form-card' src='${config.iframeOrigin}/card'></iframe>
     </justifi-payment-method-form>
   `);
-  });
-  it('renders a card iframe when paymentMethodFormType is card', async () => {
-    const page = await newSpecPage({
-      components: [PaymentMethodForm],
-      template: () => h("justifi-payment-method-form", { paymentMethodFormType: 'card' }),
     });
-    expect(page.root).toEqualHtml(`
+    it('renders a card iframe when paymentMethodFormType is card', async () => {
+        const page = await newSpecPage({
+            components: [PaymentMethodForm],
+            template: () => h("justifi-payment-method-form", { paymentMethodFormType: 'card' }),
+        });
+        expect(page.root).toEqualHtml(`
     <justifi-payment-method-form>
       <iframe id='justifi-payment-method-form-card' src='${config.iframeOrigin}/card'></iframe>
     </justifi-payment-method-form>
   `);
-  });
-  it('renders a bank iframe when paymentMethodFormType is bank', async () => {
-    const page = await newSpecPage({
-      components: [PaymentMethodForm],
-      template: () => h("justifi-payment-method-form", { paymentMethodFormType: 'bankAccount' }),
     });
-    expect(page.root).toEqualHtml(`
+    it('renders a bank iframe when paymentMethodFormType is bank', async () => {
+        const page = await newSpecPage({
+            components: [PaymentMethodForm],
+            template: () => h("justifi-payment-method-form", { paymentMethodFormType: 'bankAccount' }),
+        });
+        expect(page.root).toEqualHtml(`
     <justifi-payment-method-form>
       <iframe id='justifi-payment-method-form-bankAccount' src='${config.iframeOrigin}/bankAccount'></iframe>
     </justifi-payment-method-form>
   `);
-  });
-  it('renders a card iframe with validationMode when paymentMethodFormType is card and paymentMethodFormValidationMode is set', async () => {
-    const page = await newSpecPage({
-      components: [PaymentMethodForm],
-      template: () => h("justifi-payment-method-form", { paymentMethodFormType: 'bankAccount', paymentMethodFormValidationMode: 'onChange' }),
     });
-    expect(page.root).toEqualHtml(`
+    it('renders a card iframe with validationMode when paymentMethodFormType is card and paymentMethodFormValidationMode is set', async () => {
+        const page = await newSpecPage({
+            components: [PaymentMethodForm],
+            template: () => h("justifi-payment-method-form", { paymentMethodFormType: 'bankAccount', paymentMethodFormValidationMode: 'onChange' }),
+        });
+        expect(page.root).toEqualHtml(`
       <justifi-payment-method-form>
         <iframe id='justifi-payment-method-form-bankAccount' src='${config.iframeOrigin}/bankAccount?validationMode=onChange'></iframe>
       </justifi-payment-method-form>
     `);
-  });
-  it('renders a card iframe with validationMode when paymentMethodFormType is card and paymentMethodFormValidationMode is set', async () => {
-    const page = await newSpecPage({
-      components: [PaymentMethodForm],
-      template: () => h("justifi-payment-method-form", { paymentMethodFormType: 'bankAccount', paymentMethodFormValidationMode: 'onBlur' }),
     });
-    expect(page.root).toEqualHtml(`
+    it('renders a card iframe with validationMode when paymentMethodFormType is card and paymentMethodFormValidationMode is set', async () => {
+        const page = await newSpecPage({
+            components: [PaymentMethodForm],
+            template: () => h("justifi-payment-method-form", { paymentMethodFormType: 'bankAccount', paymentMethodFormValidationMode: 'onBlur' }),
+        });
+        expect(page.root).toEqualHtml(`
       <justifi-payment-method-form>
         <iframe id='justifi-payment-method-form-bankAccount' src='${config.iframeOrigin}/bankAccount?validationMode=onBlur'></iframe>
       </justifi-payment-method-form>
     `);
-  });
-  it('renders a card iframe with iframeOrigin when paymentMethodFormType is card and iframeOrigin is set', async () => {
-    const page = await newSpecPage({
-      components: [PaymentMethodForm],
-      template: () => h("justifi-payment-method-form", { paymentMethodFormType: 'card', iframeOrigin: '${config.iframeOrigin}' }),
     });
-    expect(page.root).toEqualHtml(`
+    it('renders a card iframe with iframeOrigin when paymentMethodFormType is card and iframeOrigin is set', async () => {
+        const page = await newSpecPage({
+            components: [PaymentMethodForm],
+            template: () => h("justifi-payment-method-form", { paymentMethodFormType: 'card', iframeOrigin: '${config.iframeOrigin}' }),
+        });
+        expect(page.root).toEqualHtml(`
       <justifi-payment-method-form>
         <iframe id='justifi-payment-method-form-card' src='${config.iframeOrigin}/card'></iframe>
       </justifi-payment-method-form>
     `);
-  });
-  it('renders a card iframe with singleLine when paymentMethodFormType is card and singleLine is set', async () => {
-    const page = await newSpecPage({
-      components: [PaymentMethodForm],
-      template: () => h("justifi-payment-method-form", { paymentMethodFormType: 'card', singleLine: true }),
     });
-    expect(page.root).toEqualHtml(`
+    it('renders a card iframe with singleLine when paymentMethodFormType is card and singleLine is set', async () => {
+        const page = await newSpecPage({
+            components: [PaymentMethodForm],
+            template: () => h("justifi-payment-method-form", { paymentMethodFormType: 'card', singleLine: true }),
+        });
+        expect(page.root).toEqualHtml(`
       <justifi-payment-method-form>
         <iframe id='justifi-payment-method-form-card' src='${config.iframeOrigin}/card?singleLine=true'></iframe>
       </justifi-payment-method-form>
     `);
-  });
+    });
 });

package/dist/collection/components/payments-list/payments-list.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;

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

@@ -2,7 +2,6 @@ import { Host, h } from "@stencil/core";
 import { Api, Payment, pagingDefaults } from "../../api";
 import { MapPaymentStatusToBadge, formatCurrency, formatDate, formatTime } from "../../utils/utils";
 import { config } from "../../../config";
-import { tableExportedParts } from "../table/exported-parts";
 /**
   * @exportedPart table-head: Table head
   * @exportedPart table-head-row: Head row
@@ -23,189 +22,189 @@ import { tableExportedParts } from "../table/exported-parts";
   * @exportedPart next-button-text: Text for Next button
 */
 export class PaymentsList {
-  constructor() {
-    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.payments = [];
-    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.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.payments = [];
+        this.loading = true;
+        this.errorMessage = undefined;
+        this.paging = pagingDefaults;
+        this.params = undefined;
     }
-    this.loading = true;
-    try {
-      const api = Api(this.authToken, config.proxyApiOrigin);
-      const endpoint = `account/${this.accountId}/payments`;
-      const response = await api.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 Payment(dataItem));
-        this.payments = data;
-      }
-      else {
-        const responseError = typeof response.error === 'string' ? response.error : response.error.message;
-        console.error(`Error fetching payments: ${responseError}`);
-        this.errorMessage = 'No results';
-      }
+    updateOnPropChange() {
+        this.fetchData();
     }
-    catch (error) {
-      console.error(`Error fetching payments: ${error.message}`);
-      this.errorMessage = 'No results';
+    connectedCallback() {
+        this.fetchData();
     }
-    finally {
-      this.loading = false;
-    }
-  }
-  render() {
-    return (h(Host, { exportparts: tableExportedParts }, h("justifi-table", { rowClickHandler: e => {
-        const clickedPaymentID = e.target.closest('tr').dataset.rowEntityId;
-        if (!clickedPaymentID) {
-          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.payments.find((payment) => payment.id === clickedPaymentID));
-      }, entityId: this.payments.map((payment) => payment.id), columnData: [
-        ['Made On', 'The date and time each payment was made'],
-        ['Amount', 'The dollar amount of each payment'],
-        ['Description', 'The payment description, if you provided one'],
-        ['Cardholder', 'The name associated with the payment method'],
-        ['Payment Method', 'The brand and last 4 digits of the payment method'],
-        ['Status', 'The current status of each payment'],
-        ['Payment ID', 'The unique identifier of each payment']
-      ], rowData: this.payments.map((payment) => ([
-        {
-          type: 'head',
-          value: `
-                    <div>${formatDate(payment.created_at)}</div>
-                    <div>${formatTime(payment.created_at)}</div>
-                  `,
-        },
-        formatCurrency(payment.amount),
-        payment.description,
-        payment.payment_method.payersName,
-        payment.payment_method.lastFourDigits,
-        {
-          type: 'inner',
-          value: MapPaymentStatusToBadge(payment.status)
-        },
-        payment.id
-      ])), 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-payments-list"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["payments-list.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["payments-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 {
-      "payments": {},
-      "loading": {},
-      "errorMessage": {},
-      "paging": {},
-      "params": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "rowClicked",
-        "name": "payment-row-clicked",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "Payment",
-          "resolved": "Payment",
-          "references": {
-            "Payment": {
-              "location": "import",
-              "path": "../../api",
-              "id": "src/api/index.ts::Payment"
+        this.loading = true;
+        try {
+            const api = Api(this.authToken, config.proxyApiOrigin);
+            const endpoint = `account/${this.accountId}/payments`;
+            const response = await api.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 Payment(dataItem));
+                this.payments = data;
             }
-          }
+            else {
+                const responseError = typeof response.error === 'string' ? response.error : response.error.message;
+                console.error(`Error fetching payments: ${responseError}`);
+                this.errorMessage = 'No results';
+            }
+        }
+        catch (error) {
+            console.error(`Error fetching payments: ${error.message}`);
+            this.errorMessage = 'No results';
         }
-      }];
-  }
-  static get watchers() {
-    return [{
-        "propName": "accountId",
-        "methodName": "updateOnPropChange"
-      }, {
-        "propName": "authToken",
-        "methodName": "updateOnPropChange"
-      }, {
-        "propName": "params",
-        "methodName": "updateOnPropChange"
-      }];
-  }
+        finally {
+            this.loading = false;
+        }
+    }
+    render() {
+        return (h(Host, null, h("justifi-table", { rowClickHandler: e => {
+                const clickedPaymentID = e.target.closest('tr').dataset.rowEntityId;
+                if (!clickedPaymentID) {
+                    return;
+                }
+                this.rowClicked.emit(this.payments.find((payment) => payment.id === clickedPaymentID));
+            }, entityId: this.payments.map((payment) => payment.id), columnData: [
+                ['Made On', 'The date and time each payment was made'],
+                ['Amount', 'The dollar amount of each payment'],
+                ['Description', 'The payment description, if you provided one'],
+                ['Cardholder', 'The name associated with the payment method'],
+                ['Payment Method', 'The brand and last 4 digits of the payment method'],
+                ['Status', 'The current status of each payment'],
+                ['Payment ID', 'The unique identifier of each payment']
+            ], rowData: this.payments.map((payment) => ([
+                {
+                    type: 'head',
+                    value: `
+                    <div class='fw-bold'>${formatDate(payment.created_at)}</div>
+                    <div class='fw-bold'>${formatTime(payment.created_at)}</div>
+                  `,
+                },
+                formatCurrency(payment.amount),
+                payment.description,
+                payment.payment_method.payersName,
+                payment.payment_method.lastFourDigits,
+                {
+                    type: 'inner',
+                    value: MapPaymentStatusToBadge(payment.status)
+                },
+                payment.id
+            ])), 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-payments-list"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["payments-list.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["payments-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 {
+            "payments": {},
+            "loading": {},
+            "errorMessage": {},
+            "paging": {},
+            "params": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "rowClicked",
+                "name": "payment-row-clicked",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "Payment",
+                    "resolved": "Payment",
+                    "references": {
+                        "Payment": {
+                            "location": "import",
+                            "path": "../../api",
+                            "id": "src/api/index.ts::Payment"
+                        }
+                    }
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "accountId",
+                "methodName": "updateOnPropChange"
+            }, {
+                "propName": "authToken",
+                "methodName": "updateOnPropChange"
+            }, {
+                "propName": "params",
+                "methodName": "updateOnPropChange"
+            }];
+    }
 }

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

@@ -1,33 +1,33 @@
 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(`
+    it('renders properly', async () => {
+        const page = await newSpecPage({
+            components: [PaymentsList],
+            html: `<justifi-payments-list></justifi-payments-list>`,
+        });
+        expect(page.root).toEqualHtml(`
     <justifi-payments-list>
       <mock:shadow-root>
         <justifi-table error-message="Can not fetch any data without an AccountID and an AuthToken">
       </mock:shadow-root>
     </justifi-table>
     `);
-  });
-  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>`,
+    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();
     });
-    const error = page.root.__shadowRoot.querySelector('.error-state');
-    expect(error).toBeDefined();
-  });
 });