npm - @justifi/webcomponents - Versions diffs - 6.7.0 → 6.7.2 - Mend

@justifi/webcomponents 6.7.0 → 6.7.2

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 (167) hide show

package/docs/merchant-tools/order-terminals/index.mdx ADDED Viewed

@@ -0,0 +1,84 @@
+---
+id: merchant-tools/order-terminals/index
+title: Order Terminals
+description: Guided purchasing flow for ordering in-person terminals and accessories.
+sidebar_position: 50
+---
+import { PropsTable, PartsTable } from '@justifi/webcomponents/docs/helpers';
+## Overview
+Component to render a form for terminal order requests.
+## Usage
+<pre>
+  <code className="language-html">{`<justifi-order-terminals
+  account-id="acc_123"
+  auth-token="wct_terminals"
+  shipping-contact="contact_456"
+/>`}</code>
+</pre>
+## Props, Events & Methods
+<div
+  dangerouslySetInnerHTML={{
+    __html: PropsTable([
+      {
+        name: 'account-id',
+        type: 'string',
+        required: true,
+        description: 'Merchant placing the order.',
+      },
+      {
+        name: 'auth-token',
+        type: 'string',
+        required: true,
+        description: 'Token with `write:terminals` scope.',
+      },
+      {
+        name: 'shipping-contact',
+        type: 'string',
+        description:
+          'Optional saved contact ID; when omitted the component collects address info inline.',
+      },
+      {
+        name: 'allowed-products',
+        type: 'string',
+        description: 'Comma-separated SKU list to limit which devices appear.',
+      },
+    ]),
+  }}
+/>
+### Events
+- `submitted`: Fires when an order is placed; includes order ID and device list.
+- `error-event`: Emits network or validation errors.
+### Public methods
+1. `submit()` – Trigger the order (useful if you host CTAs externally).
+## Theming & Layout
+<div
+  dangerouslySetInnerHTML={{
+    __html: PartsTable([
+      {
+        name: 'font-family',
+        description: 'Controls the font family for the component.',
+      },
+      {
+        name: 'color',
+        description: 'Controls the text color.',
+      },
+      {
+        name: 'background-color',
+        description: 'Controls the background color.',
+      },
+    ]),
+  }}
+/>

package/docs/merchant-tools/payment-details/index.mdx ADDED Viewed

@@ -0,0 +1,132 @@
+---
+id: merchant-tools/payment-details/index
+title: Payment Details
+description: Detailed view for a single payment, including customer data, timeline events, and dispute shortcuts.
+sidebar_position: 30
+---
+import {
+  PropsTable,
+  PartsTable,
+  getWebcomponentsVersion,
+} from '@justifi/webcomponents/docs/helpers';
+## Overview
+Component to display detailed information about a specific payment.
+## Usage
+<pre><code className="language-html">{`<!DOCTYPE html>
+<html dir="ltr" lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
+  <title>justifi-payment-details</title>
+<script
+  type="module"
+  src="https://cdn.jsdelivr.net/npm/@justifi/webcomponents@${getWebcomponentsVersion()}/dist/webcomponents/webcomponents.esm.js"
+></script>
+<script
+  nomodule
+  src="https://cdn.jsdelivr.net/npm/@justifi/webcomponents@${getWebcomponentsVersion()}/dist/webcomponents/webcomponents.js"
+></script>
+  <style>
+      ::part(font-family) {
+        font-family: georgia;
+      }
+      ::part(color) {
+        color: darkslategray;
+      }
+      ::part(background-color) {
+        background-color: transparent;
+      }
+    </style>
+</head>
+<body>
+  <justifi-payment-details payment-id="py_123" auth-token="authToken" />
+</body>
+<script>
+  (function () {
+    const paymentDetails = document.querySelector('justifi-payment-details');
+    paymentDetails.addEventListener('error-event', (event) => {
+      // here is where you would handle the error
+      console.error('error-event', event.detail);
+    });
+  })();
+</script>
+</html>`}</code></pre>
+## Props, Events & Methods
+<div
+  dangerouslySetInnerHTML={{
+    __html: PropsTable([
+      {
+        name: 'account-id',
+        type: 'string',
+        required: true,
+        description: 'Owning platform account for authorization.',
+      },
+      {
+        name: 'auth-token',
+        type: 'string',
+        required: true,
+        description: 'Token with `read:payments` scope.',
+      },
+      {
+        name: 'payment-id',
+        type: 'string',
+        required: true,
+        description: 'Payment to display.',
+      },
+      {
+        name: 'show-actions',
+        type: 'boolean',
+        defaultValue: 'true',
+        description: 'Hide when you only need a read-only audit surface.',
+      },
+    ]),
+  }}
+/>
+### Events
+- `refund-requested`: emitted when an operator clicks the refund CTA.
+- `dispute-opened`: indicates that the “Open dispute” action was invoked.
+### Public methods
+1. `refresh()` – Re-fetch the payment to reflect new statuses after an action.
+## Theming & Layout
+<div
+  dangerouslySetInnerHTML={{
+    __html: PartsTable([
+      {
+        name: 'font-family',
+        description: 'Controls the font family for the component.',
+      },
+      {
+        name: 'color',
+        description: 'Controls the text color.',
+      },
+      {
+        name: 'background-color',
+        description: 'Controls the background color.',
+      },
+    ]),
+  }}
+/>

package/docs/merchant-tools/payment-transactions-list/index.mdx ADDED Viewed

@@ -0,0 +1,85 @@
+---
+id: merchant-tools/payment-transactions-list/index
+title: Payment Transactions List
+description: Transaction-level ledger for payments, grouped by status and funding state.
+sidebar_position: 32
+---
+import { PropsTable, PartsTable } from '@justifi/webcomponents/docs/helpers';
+## Overview
+Component to display a list of payment transactions for a specific payment.
+## Usage
+<pre>
+  <code className="language-html">{`<justifi-payment-transactions-list
+  account-id="acc_123"
+  auth-token="wct_reporting"
+  filters='{"payment_id":"pay_456"}'
+/>`}</code>
+</pre>
+## Props, Events & Methods
+<div
+  dangerouslySetInnerHTML={{
+    __html: PropsTable([
+      {
+        name: 'account-id',
+        type: 'string',
+        required: true,
+        description: 'Determines which transactions a user can view.',
+      },
+      {
+        name: 'auth-token',
+        type: 'string',
+        required: true,
+        description: 'Token with `read:payments` scope.',
+      },
+      {
+        name: 'filters',
+        type: 'string | Record<string, unknown>',
+        description:
+          'JSON string or object specifying filter criteria (payment_id, status, date range).',
+      },
+      {
+        name: 'enable-export',
+        type: 'boolean',
+        defaultValue: 'false',
+        description: 'Adds export controls when true.',
+      },
+    ]),
+  }}
+/>
+### Events
+- `filter-changed`: emits whenever the internal filter UI updates.
+- `error-event`: surfaces API or token failures.
+### Public methods
+1. `refresh()` – Re-run the ledger query.
+## Theming & Layout
+<div
+  dangerouslySetInnerHTML={{
+    __html: PartsTable([
+      {
+        name: 'font-family',
+        description: 'Controls the font family for the component.',
+      },
+      {
+        name: 'color',
+        description: 'Controls the text color.',
+      },
+      {
+        name: 'background-color',
+        description: 'Controls the background color.',
+      },
+    ]),
+  }}
+/>

package/docs/merchant-tools/payments-list/index.mdx ADDED Viewed

@@ -0,0 +1,109 @@
+---
+id: merchant-tools/payments-list/index
+title: Payments List
+description: Paginated table of payments with filtering, export, and quick actions for ops teams.
+sidebar_position: 31
+---
+import { PropsTable, PartsTable } from '@justifi/webcomponents/docs/helpers';
+## Overview
+Component to render a formated list of payments for the requested account.
+## Usage
+<pre>
+  <code className="language-html">{`<div class="payments-report">
+  <justifi-filters
+    account-id="acc_123"
+    auth-token="wct_reporting"
+    target="payments"
+  ></justifi-filters>
+  <justifi-payments-list
+    account-id="acc_123"
+    auth-token="wct_reporting"
+    columns="created_at,customer_name,payment_amount,status"
+  ></justifi-payments-list>
+</div>`}</code>
+</pre>
+## Props, Events & Methods
+<div
+  dangerouslySetInnerHTML={{
+    __html: PropsTable([
+      {
+        name: 'account-id',
+        type: 'string',
+        required: true,
+        description: 'Scope results to the platform or sub-account.',
+      },
+      {
+        name: 'auth-token',
+        type: 'string',
+        required: true,
+        description: 'Token with `read:payments` scope.',
+      },
+      {
+        name: 'columns',
+        type: 'string',
+        defaultValue:
+          'created_at,customer_name,payment_amount,payment_description,status',
+        description:
+          'Comma-delimited list that controls which columns render and their order.',
+      },
+      {
+        name: 'page-size',
+        type: 'number',
+        defaultValue: '25',
+        description: 'Override default pagination size.',
+      },
+      {
+        name: 'enable-export',
+        type: 'boolean',
+        defaultValue: 'false',
+        description: 'Adds an export button that streams CSV data when true.',
+      },
+    ]),
+  }}
+/>
+### Events
+- `click-event`: emitted when users select a row or click an inline action; `event.detail` surfaces `payment_id`.
+- `error-event`: surfaces API or token errors for logging.
+### Public methods
+1. `refresh()` – Re-run the underlying query (useful after applying filters).
+2. `exportCSV()` – Programmatically trigger an export if `enable-export` is true.
+## Theming & Layout
+<div
+  dangerouslySetInnerHTML={{
+    __html: PartsTable([
+      {
+        name: 'font-family',
+        description: 'Controls the font family for the component.',
+      },
+      {
+        name: 'color',
+        description: 'Controls the text color.',
+      },
+      {
+        name: 'background-color',
+        description: 'Controls the background color.',
+      },
+      {
+        name: 'button',
+        description: 'Button styles.',
+      },
+      {
+        name: 'button-disabled',
+        description: 'Disabled button styles.',
+      },
+    ]),
+  }}
+/>

package/docs/merchant-tools/payout-details/index.mdx ADDED Viewed

@@ -0,0 +1,84 @@
+---
+id: merchant-tools/payout-details/index
+title: Payout Details
+description: Drill-down view for a single payout, including ledger items and bank destination info.
+sidebar_position: 41
+---
+import { PropsTable, PartsTable } from '@justifi/webcomponents/docs/helpers';
+## Overview
+Component to display detailed information about a specific payout.
+## Usage
+<pre>
+  <code className="language-html">{`<justifi-payout-details
+  account-id="acc_123"
+  auth-token="wct_reporting"
+  payout-id="po_456"
+/>`}</code>
+</pre>
+## Props, Events & Methods
+<div
+  dangerouslySetInnerHTML={{
+    __html: PropsTable([
+      {
+        name: 'account-id',
+        type: 'string',
+        required: true,
+        description: 'Scope the payout to a platform or merchant.',
+      },
+      {
+        name: 'auth-token',
+        type: 'string',
+        required: true,
+        description: 'Token with `read:payouts` scope.',
+      },
+      {
+        name: 'payout-id',
+        type: 'string',
+        required: true,
+        description: 'Identifier for the payout you want to view.',
+      },
+      {
+        name: 'show-ledger',
+        type: 'boolean',
+        defaultValue: 'true',
+        description: 'Hide the ledger table when you only need summary data.',
+      },
+    ]),
+  }}
+/>
+### Events
+- `error-event`: Emits when payout data cannot be loaded.
+### Public methods
+1. `refresh()` – Reload payout data after remediation steps.
+## Theming & Layout
+<div
+  dangerouslySetInnerHTML={{
+    __html: PartsTable([
+      {
+        name: 'font-family',
+        description: 'Controls the font family for the component.',
+      },
+      {
+        name: 'color',
+        description: 'Controls the text color.',
+      },
+      {
+        name: 'background-color',
+        description: 'Controls the background color.',
+      },
+    ]),
+  }}
+/>

package/docs/merchant-tools/payout-transactions-list/index.mdx ADDED Viewed

@@ -0,0 +1,84 @@
+---
+id: merchant-tools/payout-transactions-list/index
+title: Payout Transactions List
+description: Ledger of transactions contributing to a payout, with filtering and export support.
+sidebar_position: 42
+---
+import { PropsTable, PartsTable } from '@justifi/webcomponents/docs/helpers';
+## Overview
+Component to display a list of payout transactions for a specific payout.
+## Usage
+<pre>
+  <code className="language-html">{`<justifi-payout-transactions-list
+  account-id="acc_123"
+  auth-token="wct_reporting"
+  payout-id="po_456"
+/>`}</code>
+</pre>
+## Props, Events & Methods
+<div
+  dangerouslySetInnerHTML={{
+    __html: PropsTable([
+      {
+        name: 'account-id',
+        type: 'string',
+        required: true,
+        description: 'Authorization context.',
+      },
+      {
+        name: 'auth-token',
+        type: 'string',
+        required: true,
+        description: 'Token with `read:payouts` scope.',
+      },
+      {
+        name: 'payout-id',
+        type: 'string',
+        required: true,
+        description: 'Payout whose transactions should be displayed.',
+      },
+      {
+        name: 'columns',
+        type: 'string',
+        defaultValue: 'type,amount,source,status',
+        description: 'Column ordering and selection.',
+      },
+    ]),
+  }}
+/>
+### Events
+- `click-event`: row selection event that surfaces `transaction_id`.
+### Public methods
+1. `refresh()` – Reloads the ledger.
+## Theming & Layout
+<div
+  dangerouslySetInnerHTML={{
+    __html: PartsTable([
+      {
+        name: 'font-family',
+        description: 'Controls the font family for the component.',
+      },
+      {
+        name: 'color',
+        description: 'Controls the text color.',
+      },
+      {
+        name: 'background-color',
+        description: 'Controls the background color.',
+      },
+    ]),
+  }}
+/>

package/docs/merchant-tools/payouts-list/index.mdx ADDED Viewed

@@ -0,0 +1,92 @@
+---
+id: merchant-tools/payouts-list/index
+title: Payouts List
+description: Reporting table for outbound payouts including status, destination, and expected arrival.
+sidebar_position: 40
+---
+import { PropsTable, PartsTable } from '@justifi/webcomponents/docs/helpers';
+## Overview
+Component to render a formated list of payouts for the requested account.
+## Usage
+<pre>
+  <code className="language-html">{`<justifi-payouts-list
+  account-id="acc_123"
+  auth-token="wct_reporting"
+  columns="created_at,amount,destination,status"
+/>`}</code>
+</pre>
+## Props, Events & Methods
+<div
+  dangerouslySetInnerHTML={{
+    __html: PropsTable([
+      {
+        name: 'account-id',
+        type: 'string',
+        required: true,
+        description: 'Filters payouts to the merchant or platform account.',
+      },
+      {
+        name: 'auth-token',
+        type: 'string',
+        required: true,
+        description: 'Token with `read:payouts` scope.',
+      },
+      {
+        name: 'columns',
+        type: 'string',
+        defaultValue: 'created_at,amount,destination,status,expected_arrival',
+        description: 'Comma-separated list controlling table columns.',
+      },
+      {
+        name: 'timezone',
+        type: 'string',
+        defaultValue: 'UTC',
+        description: 'Controls formatting for timestamps.',
+      },
+    ]),
+  }}
+/>
+### Events
+- `click-event`: Fires when a row is clicked; `detail.payout_id` indicates which payout to drill into.
+### Public methods
+1. `refresh()` – Reload the payouts query.
+## Theming & Layout
+<div
+  dangerouslySetInnerHTML={{
+    __html: PartsTable([
+      {
+        name: 'font-family',
+        description: 'Controls the font family for the component.',
+      },
+      {
+        name: 'color',
+        description: 'Controls the text color.',
+      },
+      {
+        name: 'background-color',
+        description: 'Controls the background color.',
+      },
+      {
+        name: 'button',
+        description: 'Button styles.',
+      },
+      {
+        name: 'button-disabled',
+        description: 'Disabled button styles.',
+      },
+    ]),
+  }}
+/>