npm - @justifi/webcomponents - Versions diffs - 4.7.3 → 4.7.5 - Mend

@justifi/webcomponents 4.7.3 → 4.7.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (649) hide show

package/dist/collection/components/payment-details/payment-details.stories.js DELETED Viewed

@@ -1,47 +0,0 @@
-import { config } from "../../../config";
-export default {
-  title: 'Components/PaymentDetails',
-  component: 'justifi-payment-details',
-  parameters: {},
-};
-class PaymentDetailsArgs {
-  constructor(args) {
-    this['auth-token'] = args['auth-token'] || config.proxyAuthToken;
-    this['payment-id'] = args['payment-id'] || config.examplePaymentId;
-  }
-}
-const Template = (args) => {
-  return (`
-    <justifi-payment-details
-      data-testid="justifi-payment-details"
-      auth-token="${args['auth-token']}"
-      payment-id="${args['payment-id']}"
-    />
-  `);
-};
-export const Basic = Template.bind({});
-Basic.args = new PaymentDetailsArgs({});
-export const Styled = Template.bind({});
-Styled.args = new PaymentDetailsArgs({});
-Styled.decorators = [
-  (Story) => `
-    ${Story()}
-    <style>
-      justifi-payment-details::part(detail-head) {
-        background-color: rgba(100, 200, 250, 0.2);
-        border-left: 4px solid rgba(100, 200, 250, 1);
-      }
-      justifi-payment-details::part(detail-info-item-title),
-      justifi-payment-details::part(detail-method-item-title) {
-        border-radius: 3px;
-        background-color: rgba(0, 0, 0, 0.8);
-        text-align: center;
-        padding: 0 10px;
-        color: white !important;
-      }
-      justifi-payment-details::part(detail-metadata) {
-        background-color: rgba(100,100,100,0.2)
-      }
-    </style>
-  `
-];

package/dist/collection/components/payment-form/example.js DELETED Viewed

@@ -1,23 +0,0 @@
-import { head } from '../../../storybook-pages/example-parts';
-export default `<!DOCTYPE html>
-<html dir="ltr" lang="en">
-${head('justifi-payment-form')}
-<body>
-  <justifi-payment-form bank-account="true" card="true"></justifi-payment-form>
-</body>
-<script>
-  (function () {
-    var paymentForm = document.querySelector('justifi-payment-form');
-    paymentForm.addEventListener('submitted', (data) => {
-      // here is where you would submit a payment with the token
-      console.log('data');
-    });
-  })();
-</script>
-</html>`;

package/dist/collection/components/payment-form/payment-form.stories.js DELETED Viewed

@@ -1,129 +0,0 @@
-import { config } from "../../../config";
-export default {
-  title: 'Components/PaymentForm',
-  component: 'justifi-payment-form',
-  argTypes: {},
-};
-const Template = (args) => {
-  // The <div> here should be replaced by a `display` property in the cardForm potentially
-  return `
-    <div>
-      <justifi-payment-form
-        card=${args.card}
-        bank-account='${args['bank-account']}'
-        email='${args.email}'
-        client-id='${args['client-id']}'
-        account-id='${args['account-id']}'
-        submit-button-text='${args['submit-button-text']}'
-        iframe-origin='${config.iframeOrigin}'
-      />
-    </div>
-    <style>
-      :root {
-        ${args.cssVariables}
-      }
-    </style>
-    <script>
-    (async () => {
-      await customElements.whenDefined('justifi-payment-form');
-      const paymentForm = document.querySelector('justifi-payment-form');
-      paymentForm.addEventListener('submitted', async (event) => {
-        // here is where you would submit a payment with the token
-        console.log(event.detail);
-        // after the payment succeeds or fails, the form submit button can be enabled again
-        await paymentForm.enableSubmitButton();
-      });
-    })()
-    </script>
-  `;
-};
-export const Basic = Template.bind({});
-Basic.args = {
-  'bank-account': true,
-  'card': true,
-  'email': '',
-  'client-id': '',
-  'account-id': '',
-  'submit-button-text': '',
-  'iframe-origin': '',
-};
-export const Styled = Template.bind({});
-Styled.args = {
-  'bank-account': true,
-  'card': true,
-  'email': '',
-  'client-id': '',
-  'account-id': '',
-  'submit-button-text': '',
-  'iframe-origin': '',
-  'cssVariables': `
-  --jfi-primary-color: #212529;
-  --jfi-load-google-font: 'Roboto Mono:wght@200;400;700;900';
-  --jfi-layout-font-family: Roboto Mono, Calibri, sans-serif;
-  --jfi-layout-padding: 4px;
-  --jfi-layout-form-control-spacing-x: .5rem;
-  --jfi-layout-form-control-spacing-y: 1rem;
-  --jfi-form-label-font-weight: 700;
-  --jfi-form-label-font-family: Calibri, sans-serif;
-  --jfi-form-label-margin: 0 0 .5rem 0;
-  --jfi-form-control-background-color: #F4F4F6;
-  --jfi-form-control-background-color-hover: #EEEEF5;
-  --jfi-form-control-border-color: rgba(0, 0, 0, 0.42);
-  --jfi-form-control-border-color-hover: rgba(0, 0, 0, 0.62);
-  --jfi-form-control-border-color-focus: #fccc32;
-  --jfi-form-control-border-color-error: #C12727;
-  --jfi-form-control-border-top-width: 0;
-  --jfi-form-control-border-left-width: 0;
-  --jfi-form-control-border-bottom-width: 1px;
-  --jfi-form-control-border-right-width: 0;
-  --jfi-form-control-border-radius: 4px 4px 0 0;
-  --jfi-form-control-border-style: solid;
-  --jfi-form-control-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-  --jfi-form-control-box-shadow-focus: none;
-  --jfi-form-control-box-shadow-error-focus: none;
-  --jfi-form-control-border-style: solid;
-  --jfi-form-control-color: #212529;
-  --jfi-form-control-font-size: 1rem;
-  --jfi-form-control-font-weight: 400;
-  --jfi-form-control-line-height: 2;
-  --jfi-form-control-margin: 0;
-  --jfi-form-control-padding: .5rem .875rem;
-  --jfi-error-message-color: #C12727;
-  --jfi-error-message-margin: .25rem 0 0 0;
-  --jfi-error-message-font-size: .875rem;
-  --jfi-submit-button-color: white;
-  --jfi-submit-button-background-color: #3F3F47;
-  --jfi-submit-button-border-color: var(--jfi-primary-color);
-  --jfi-submit-button-padding: 0.375rem 0.75rem;
-  --jfi-submit-button-font-size: 1rem;
-  --jfi-submit-button-border-radius: 1px;
-  --jfi-submit-button-color-hover: white;
-  --jfi-submit-button-background-color-hover: var(--jfi-primary-color);
-  --jfi-submit-button-border-color-hover: var(--jfi-primary-color);
-  --jfi-submit-button-color-focus: white;
-  --jfi-submit-button-background-color-focus: var(--jfi-primary-color);
-  --jfi-submit-button-border-color-focus: var(--jfi-primary-color);
-  --jfi-submit-button-color-active: white;
-  --jfi-submit-button-background-color-active: var(--jfi-primary-color);
-  --jfi-submit-button-border-color-active: var(--jfi-primary-color);
-  --jfi-submit-button-width: 100%;
-  --jfi-submit-button-box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 1px -2px, rgba(0, 0, 0, 0.14) 0px 2px 2px 0px, rgba(0, 0, 0, 0.12) 0px 1px 5px 0px;
-  --jfi-radio-button-color: var(--jfi-primary-color);
-  --jfi-radio-button-background-color: transparent;
-  --jfi-radio-button-color-selected: white;
-  --jfi-radio-button-background-color-selected: var(--jfi-primary-color);
-  --jfi-radio-button-border-color: var(--jfi-primary-color);
-  --jfi-radio-button-border-color-selected: var(--jfi-primary-color);
-  --jfi-radio-button-padding: 0.375rem 0.75rem;
-  --jfi-radio-button-font-size: 1rem;
-  --jfi-radio-button-color-hover: var(--jfi-primary-color);
-  --jfi-radio-button-color-selected-hover: white;
-  --jfi-radio-button-background-color-hover: transparent;
-  --jfi-radio-button-background-color-selected-hover: var(--jfi-primary-color);
-  --jfi-radio-button-border-color-selected-hover: var(--jfi-primary-color);
-  --jfi-radio-button-border-color-hover: var(--jfi-primary-color);
-  --jfi-radio-button-group-width: 100%;
-  `,
-};

package/dist/collection/components/payments-list/example.js DELETED Viewed

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

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

@@ -1,78 +0,0 @@
-import { config } from "../../../config";
-export default {
-  title: 'Components/PaymentsList',
-  component: 'justifi-payments-list',
-  parameters: {},
-  decorators: [
-    (Story) => `
-      ${Story()}
-      <script>
-        window.addEventListener('payment-row-clicked', (e) => {
-          console.log(e);
-        })
-      </script>
-    `
-  ]
-};
-class PaymentsListArgs {
-  constructor(args) {
-    this['auth-token'] = args['auth-token'] || config.proxyAuthToken;
-    this['account-id'] = args['account-id'] || config.exampleAccountId;
-  }
-}
-const Template = (args) => {
-  return (`
-    <justifi-payments-list
-      data-testid="justifi-payments-list"
-      auth-token="${args['auth-token']}"
-      account-id="${args['account-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({});

package/dist/collection/components/payout-details/example.js DELETED Viewed

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

package/dist/collection/components/payout-details/payout-details.stories.js DELETED Viewed

@@ -1,47 +0,0 @@
-import { config } from "../../../config";
-export default {
-  title: 'Components/PayoutDetails',
-  component: 'justifi-payout-details',
-  parameters: {}
-};
-class PayoutDetailsArgs {
-  constructor(args) {
-    this['auth-token'] = args['auth-token'] || config.proxyAuthToken;
-    this['payout-id'] = args['payout-id'] || config.examplePayoutId;
-  }
-}
-const Template = (args) => {
-  return (`
-    <justifi-payout-details
-      data-testid="justifi-payout-details"
-      auth-token="${args['auth-token']}"
-      payout-id="${args['payout-id']}"
-    />
-  `);
-};
-export const Basic = Template.bind({});
-Basic.args = new PayoutDetailsArgs({});
-export const Styled = Template.bind({});
-Styled.args = new PayoutDetailsArgs({});
-Styled.decorators = [
-  (Story) => `
-    ${Story()}
-    <style>
-      justifi-payout-details::part(detail-head) {
-        background-color: rgba(100, 200, 250, 0.2);
-        border-left: 4px solid rgba(100, 200, 250, 1);
-      }
-      justifi-payout-details::part(detail-info-item-title),
-      justifi-payout-details::part(detail-method-item-title) {
-        border-radius: 3px;
-        background-color: rgba(0, 0, 0, 0.8);
-        text-align: center;
-        padding: 0 10px;
-        color: white !important;
-      }
-      justifi-payout-details::part(detail-metadata) {
-        background-color: rgba(100,100,100,0.2)
-      }
-    </style>
-  `
-];

package/dist/collection/components/payouts-list/example.js DELETED Viewed

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

package/dist/collection/components/payouts-list/payouts-list.stories.js DELETED Viewed

@@ -1,69 +0,0 @@
-import { config } from "../../../config";
-export default {
-  title: 'Components/PayoutsList',
-  component: 'justifi-payouts-list',
-  parameters: {},
-  decorators: [
-    (Story) => `
-      ${Story()}
-      <script>
-        window.addEventListener('payout-row-clicked', (e) => {
-          console.log(e);
-        })
-      </script>
-    `
-  ]
-};
-class PayoutsListArgs {
-  constructor(args) {
-    this['auth-token'] = args['auth-token'] || config.proxyAuthToken;
-    this['account-id'] = args['account-id'] || config.exampleAccountId;
-  }
-}
-const Template = (args) => {
-  return (`
-    <justifi-payouts-list
-      data-testid="justifi-payouts-list"
-      auth-token="${args['auth-token']}"
-      account-id="${args['account-id']}"
-    />
-  `);
-};
-export const Basic = Template.bind({});
-Basic.args = new PayoutsListArgs({});
-export const Styled = Template.bind({});
-Styled.args = new PayoutsListArgs({});
-Styled.decorators = [
-  (Story) => `
-    ${Story()}
-    <style>
-      justifi-payouts-list::part(table-head-cell) {
-        background-color: #F4F4F6;
-      }
-      justifi-payouts-list::part(pagination-bar) {
-        background-color: #F4F4F6;
-      }
-      justifi-payouts-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-payouts-list::part(error-state) {
-        color: red;
-        background-color: #EEEEF5;
-      }
-      justifi-payouts-list::part(loading-state-cell) {
-        background-color: #EEEEF5;
-      }
-      justifi-payouts-list::part(table-row) {
-        background-color: #EEEEF5;
-      }
-      justifi-payouts-list::part(table-row-even) {
-        background-color: #F4F4F6;
-      }
-    </style>
-  `
-];

package/dist/components/Payout.js DELETED Viewed

@@ -1,179 +0,0 @@
-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 PaymentMethod {
-  constructor(paymentMethod) {
-    this.card = paymentMethod.card ? new Card(paymentMethod.card) : undefined;
-    this.bank_account = paymentMethod.bank_account
-      ? new BankAccount(paymentMethod.bank_account)
-      : undefined;
-  }
-  get payersName() {
-    if (this.card) {
-      return this.card.name;
-    }
-    else if (this.bank_account) {
-      return this.bank_account.name;
-    }
-    return null;
-  }
-  get lastFourDigits() {
-    if (this.card) {
-      return `**** ${this.card.acct_last_four}`;
-    }
-    else if (this.bank_account) {
-      return `**** ${this.bank_account.acct_last_four}`;
-    }
-    return null;
-  }
-}
-class BankAccount {
-  constructor(bankAccount) {
-    this.id = bankAccount.id;
-    this.acct_last_four = bankAccount.acct_last_four;
-    this.name = bankAccount.name;
-    this.brand = bankAccount.brand;
-    this.token = bankAccount.token;
-    this.created_at = bankAccount.created_at;
-    this.updated_at = bankAccount.updated_at;
-  }
-}
-class Card {
-  constructor(card) {
-    this.id = card.id || '';
-    this.acct_last_four = card.acct_last_four;
-    this.name = card.name;
-    this.brand = card.brand;
-    this.token = card.token;
-    this.created_at = card.created_at;
-    this.updated_at = card.updated_at;
-  }
-}
-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 = new PaymentMethod(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;
-    }
-  }
-}
-class PaymentBalanceTransaction {
-  constructor(balanceTransaction) {
-    this.id = balanceTransaction.id;
-    this.amount = balanceTransaction.amount;
-    this.balance = balanceTransaction.balance;
-    this.currency = balanceTransaction.currency;
-    this.financial_transaction_id = balanceTransaction.financial_transaction_id;
-    this.payment_id = balanceTransaction.payment_id;
-    this.payment_balance_txn_type = balanceTransaction.payment_balance_txn_type;
-    this.source_id = balanceTransaction.source_id;
-    this.source_type = balanceTransaction.source_type;
-    this.created_at = balanceTransaction.created_at;
-    this.updated_at = balanceTransaction.updated_at;
-  }
-  get displayTransactionId() {
-    return this.payment_balance_txn_type === 'payment_fee'
-      ? '--'
-      : this.source_id;
-  }
-}
-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 = {}));
-var PayoutStatusesSafeNames;
-(function (PayoutStatusesSafeNames) {
-  PayoutStatusesSafeNames["paid"] = "Paid";
-  PayoutStatusesSafeNames["failed"] = "Failed";
-  PayoutStatusesSafeNames["forwarded"] = "Forwarded";
-  PayoutStatusesSafeNames["scheduled"] = "Scheduled";
-  PayoutStatusesSafeNames["in_transit"] = "In Transit";
-  PayoutStatusesSafeNames["canceled"] = "Canceled";
-})(PayoutStatusesSafeNames || (PayoutStatusesSafeNames = {}));
-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;
-  }
-}
-export { PaymentBalanceTransaction as P, Payment as a, PaymentMethodTypes as b, Payout as c, PayoutStatuses as d, PayoutStatusesSafeNames as e };