@justifi/webcomponents 4.18.0 → 4.19.0

package/dist/collection/components/payment-balance-transactions/payment-balance-transactions.js

@@ -1,143 +0,0 @@
-import { h } from "@stencil/core";
-import { Api, PaymentBalanceTransaction, pagingDefaults, } from "../../api";
-import { formatCurrency, formatDate, formatTime, snakeCaseToHumanReadable, } from "../../utils/utils";
-import { config } from "../../../config";
-import StyledHost from "../../utils/styled-host/styled-host";
-export class PaymentBalanceTransactions {
-    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.paymentId = undefined;
-        this.balanceTransactions = [];
-        this.loading = true;
-        this.errorMessage = undefined;
-        this.paging = pagingDefaults;
-        this.params = undefined;
-    }
-    updateOnPropChange() {
-        this.fetchData();
-    }
-    connectedCallback() {
-        this.fetchData();
-    }
-    async fetchData() {
-        this.loading = true;
-        if (!this.accountId || !this.paymentId) {
-            this.errorMessage = 'Missing required props: accountId or paymentId';
-            this.loading = false;
-            return;
-        }
-        const endpoint = `account/${this.accountId}/payments/${this.paymentId}/payment_balance_transactions`;
-        const response = await Api({ authToken: this.authToken, apiOrigin: config.proxyApiOrigin }).get(endpoint, this.params);
-        if (!response.error) {
-            this.paging = Object.assign(Object.assign({}, this.paging), response.page_info);
-            this.balanceTransactions = response.data.map(dataItem => new PaymentBalanceTransaction(dataItem));
-        }
-        else {
-            this.errorMessage =
-                typeof response.error === 'string'
-                    ? response.error
-                    : response.error.message;
-        }
-        this.loading = false;
-    }
-    render() {
-        return (h(StyledHost, { key: 'ec76a5bb9d5222491facd9bea6bf5f3c404bb5c4' }, h("justifi-table", { key: 'bfecb9c52a10750e01b2cc82dd5d558cf4e83081', columnData: [
-                ['Processed On', 'The date each transaction occurred'],
-                ['Type', 'The type of each transaction'],
-                ['ID', 'The unique identifier of each transaction'],
-                ['Amout', 'The dollar amount of each transaction'],
-                [
-                    'Balance',
-                    'The running total amount of this payment that belongs to you',
-                ],
-            ], entityId: this.balanceTransactions.map(transaction => transaction.id), rowData: this.balanceTransactions.map(balanceTransaction => [
-                h("div", null, h("div", null, formatDate(balanceTransaction.created_at)), h("div", null, formatTime(balanceTransaction.created_at))),
-                snakeCaseToHumanReadable(balanceTransaction.payment_balance_txn_type),
-                balanceTransaction.payment_id,
-                formatCurrency(balanceTransaction.amount),
-                formatCurrency(balanceTransaction.balance),
-            ]), 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-payment-balance-transactions"; }
-    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
-            },
-            "paymentId": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "payment-id",
-                "reflect": false
-            }
-        };
-    }
-    static get states() {
-        return {
-            "balanceTransactions": {},
-            "loading": {},
-            "errorMessage": {},
-            "paging": {},
-            "params": {}
-        };
-    }
-    static get watchers() {
-        return [{
-                "propName": "params",
-                "methodName": "updateOnPropChange"
-            }];
-    }
-}

package/dist/collection/components/payment-balance-transactions/payment-balance-transactions.stories.js

@@ -1,32 +0,0 @@
-import { config } from "../../../config";
-export default {
-    title: 'dev/Components/PaymentBalanceTransactions',
-    component: 'justifi-payment-balance-transactions',
-    parameters: {},
-};
-class PaymentBalanceTransactionsArgs {
-    constructor(args) {
-        this['auth-token'] = args['auth-token'] || config.proxyAuthToken;
-        this['payment-id'] = args['payment-id'] || config.examplePaymentId;
-        this['account-id'] = args['account-id'] || config.exampleAccountId;
-    }
-}
-const Template = (args) => {
-    return `
-    <justifi-payment-balance-transactions
-      data-testid="justifi-payment-balance-transactions"
-      auth-token="${args['auth-token']}"
-      payment-id="${args['payment-id']}"
-      account-id="${args['account-id']}"
-    />
-  `;
-};
-export const Example = Template.bind({});
-Example.args = new PaymentBalanceTransactionsArgs({});
-export const Styled = Template.bind({});
-Styled.args = new PaymentBalanceTransactionsArgs({});
-Styled.decorators = [
-    (Story) => `
-    ${Story()}
-  `,
-];

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

@@ -1,12 +0,0 @@
-import { head } from '../../../storybook-pages/example-parts';
-
-export default `<!DOCTYPE html>
-<html dir="ltr" lang="en">
-
-${head('justifi-proceeds-list')}
-
-<body>
-  <justifi-proceeds-list></justifi-proceeds-list>
-</body>
-
-</html>`;

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

@@ -1,205 +0,0 @@
-import { h } from "@stencil/core";
-import { Api, pagingDefaults } from "../../api";
-import { formatCurrency, formatDate } from "../../utils/utils";
-import { Proceed, ProceedStatuses, ProceedStatusesSafeNames } from "../../api/Proceed";
-import { config } from "../../../config";
-import StyledHost from "../../utils/styled-host/styled-host";
-/**
-  * @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 button-disabled: Disabled state for paging buttons
-  * @exportedPart previous-button-text: Text for Previous button
-  * @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;
-        }
-        this.loading = true;
-        const endpoint = `account/${this.accountId}/proceeds`;
-        const response = await Api({ authToken: this.authToken, apiOrigin: 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;
-        }
-        else {
-            this.errorMessage = typeof response.error === 'string' ? response.error : response.error.message;
-        }
-        this.loading = false;
-    }
-    render() {
-        return (h(StyledHost, { key: 'ea9ee482e1b439490ed258c37e75c47e5dc5f3bf' }, h("justifi-table", { key: 'a26da8b6e884e00bc0a8eac24025397fdc925d14', 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 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,69 +0,0 @@
-import { config } from "../../../config";
-export default {
-    title: 'dev/Components/ProceedsList',
-    component: 'justifi-proceeds-list',
-    parameters: {},
-    decorators: [
-        (Story) => `
-      ${Story()}
-      <script>
-        window.addEventListener('proceed-row-clicked', (e) => {
-          console.log(e);
-        })
-      </script>
-    `,
-    ],
-};
-class ProceedsListArgs {
-    constructor(args) {
-        this['auth-token'] = args['auth-token'] || config.privateAuthToken;
-        this['account-id'] = args['account-id'] || '';
-    }
-}
-const Template = (args) => {
-    return `
-    <justifi-proceeds-list
-      data-testid="justifi-proceeds-list"
-      auth-token="${args['auth-token']}"
-      account-id="${args['account-id']}"
-    />
-  `;
-};
-export const Example = Template.bind({});
-Example.args = new ProceedsListArgs({});
-export const Styled = Template.bind({});
-Styled.args = new ProceedsListArgs({});
-Styled.decorators = [
-    (Story) => `
-    ${Story()}
-    <style>
-      justifi-proceeds-list::part(table-head-cell) {
-        background-color: #F4F4F6;
-      }
-      justifi-proceeds-list::part(pagination-bar) {
-        background-color: #F4F4F6;
-      }
-      justifi-proceeds-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-proceeds-list::part(error-state) {
-        color: red;
-        background-color: #EEEEF5;
-      }
-      justifi-proceeds-list::part(loading-state-cell) {
-        background-color: #EEEEF5;
-      }
-      justifi-proceeds-list::part(table-row) {
-        background-color: #EEEEF5;
-      }
-      justifi-proceeds-list::part(table-row-even) {
-        background-color: #F4F4F6;
-      }
-    </style>
-  `,
-];

package/dist/collection/components/skeleton/skeleton.css

@@ -1,11 +0,0 @@
-@keyframes pulseAnimation {
-  0% {
-    opacity: 0.6;
-  }
-  50% {
-    opacity: 0.4;
-  }
-  100% {
-    opacity: 0.6;
-  }
-}

package/dist/collection/components/skeleton/skeleton.js

@@ -1,160 +0,0 @@
-import { h, Host } from "@stencil/core";
-export class Skeleton {
-    constructor() {
-        this.component = 'div';
-        this.height = undefined;
-        this.width = undefined;
-        this.variant = 'text';
-        this.componentClassName = undefined;
-        this.styles = undefined;
-    }
-    getVariantStyle() {
-        if (this.variant === 'text') {
-            return {
-                marginTop: 0,
-                marginBottom: 0,
-                height: 'auto',
-                transformOrigin: '0 55%',
-                transform: 'scale(1, 0.60)',
-                borderRadius: '4px/6.67px',
-                '::before': {
-                    content: '"\\00a0"',
-                },
-            };
-        }
-        else if (this.variant === 'circular') {
-            return {
-                borderRadius: '50%',
-            };
-        }
-        else if (this.variant === 'rounded') {
-            return {
-                borderRadius: '4px',
-            };
-        }
-        return {};
-    }
-    render() {
-        const TagType = this.component;
-        const combinedStyle = Object.assign(Object.assign(Object.assign({}, this.styles), this.getVariantStyle()), { animation: `pulseAnimation 2s ease-in-out 0.5s infinite`, width: this.width, height: this.height, backgroundColor: 'var(--jfi-skeleton-waveAnimation-bg, #f5f5f5)' });
-        return (h(Host, { key: '26efc1854b82225ebde973c9753c856b5021730c' }, h(TagType, { key: '81a6b8097f3b712eadc111a8d402632d058efe69', class: this.componentClassName, style: combinedStyle })));
-    }
-    static get is() { return "justifi-skeleton"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["skeleton.css"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["skeleton.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "component": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "component",
-                "reflect": false,
-                "defaultValue": "'div'"
-            },
-            "height": {
-                "type": "any",
-                "mutable": false,
-                "complexType": {
-                    "original": "string | number",
-                    "resolved": "number | string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "height",
-                "reflect": false
-            },
-            "width": {
-                "type": "any",
-                "mutable": false,
-                "complexType": {
-                    "original": "string | number",
-                    "resolved": "number | string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "width",
-                "reflect": false
-            },
-            "variant": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "'circular' | 'rectangular' | 'rounded' | 'text'",
-                    "resolved": "\"circular\" | \"rectangular\" | \"rounded\" | \"text\"",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "variant",
-                "reflect": false,
-                "defaultValue": "'text'"
-            },
-            "componentClassName": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "component-class-name",
-                "reflect": false
-            },
-            "styles": {
-                "type": "unknown",
-                "mutable": false,
-                "complexType": {
-                    "original": "{ [key: string]: any }",
-                    "resolved": "{ [key: string]: any; }",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                }
-            }
-        };
-    }
-}