@justifi/webcomponents 6.7.1 → 6.7.2

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

@@ -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

@@ -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

@@ -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

@@ -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.',
+      },
+    ]),
+  }}
+/>

package/docs/merchant-tools/terminal-orders-list/index.mdx

@@ -0,0 +1,85 @@
+---
+id: merchant-tools/terminal-orders-list/index
+title: Terminal Orders List
+description: Reporting table of hardware orders with fulfillment status and tracking info.
+sidebar_position: 51
+---
+
+import { PropsTable, PartsTable } from '@justifi/webcomponents/docs/helpers';
+
+## Overview
+
+Component to render a formated list of terminal device orders for the requested account.
+
+## Usage
+
+<pre>
+  <code className="language-html">{`<justifi-terminal-orders-list
+  account-id="acc_123"
+  auth-token="wct_terminals"
+/>`}</code>
+</pre>
+
+## Props, Events & Methods
+
+<div
+  dangerouslySetInnerHTML={{
+    __html: PropsTable([
+      {
+        name: 'account-id',
+        type: 'string',
+        required: true,
+        description: 'Restricts orders to a merchant/platform.',
+      },
+      {
+        name: 'auth-token',
+        type: 'string',
+        required: true,
+        description: 'Token with `read:terminals` scope.',
+      },
+      {
+        name: 'columns',
+        type: 'string',
+        defaultValue: 'created_at,order_number,items,status,tracking_number',
+        description: 'Customize visible columns.',
+      },
+    ]),
+  }}
+/>
+
+### Events
+
+- `click-event`: Surfaces the order ID for navigation.
+
+### Public methods
+
+1. `refresh()` – Reload order data.
+
+## 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/terminals-list/index.mdx

@@ -0,0 +1,93 @@
+---
+id: merchant-tools/terminals-list/index
+title: Terminals List
+description: Inventory table showing active, inactive, and assigned terminals in the field.
+sidebar_position: 52
+---
+
+import { PropsTable, PartsTable } from '@justifi/webcomponents/docs/helpers';
+
+## Overview
+
+Component to render a formated list of terminals for the requested account.
+
+## Usage
+
+<pre>
+  <code className="language-html">{`<justifi-terminals-list
+  account-id="acc_123"
+  auth-token="wct_terminals"
+  filters='{"status":"online"}'
+/>`}</code>
+</pre>
+
+## Props, Events & Methods
+
+<div
+  dangerouslySetInnerHTML={{
+    __html: PropsTable([
+      {
+        name: 'account-id',
+        type: 'string',
+        required: true,
+        description: 'Scope inventory to a merchant/platform.',
+      },
+      {
+        name: 'auth-token',
+        type: 'string',
+        required: true,
+        description: 'Token with `read:terminals` scope.',
+      },
+      {
+        name: 'filters',
+        type: 'string | Record<string, unknown>',
+        description:
+          'Optional JSON to preset status, location, or software filters.',
+      },
+      {
+        name: 'columns',
+        type: 'string',
+        defaultValue: 'name,status,location,last_check_in',
+        description: 'Customize visible columns.',
+      },
+    ]),
+  }}
+/>
+
+### Events
+
+- `click-event`: Row click event that surfaces `terminal_id`.
+- `filter-changed`: Emits when the built-in filters change.
+
+### Public methods
+
+1. `refresh()` – Reloads terminal data.
+
+## 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/modular-checkout/complete-examples/index.mdx

@@ -0,0 +1,20 @@
+---
+id: modular-checkout/complete-examples/index
+title: Modular Checkout Complete Examples
+sidebar_label: Complete Examples
+description: Storybook-driven layouts that demonstrate real-world checkout flows.
+---
+
+Reference these Storybook stories when you need production-ready layout
+patterns or want to hand designers a live sandbox.
+
+- [Layout 1](https://storybook.justifi.ai/?path=/docs/modular-checkout-complete-examples-layout-1--docs):
+  responsive two-column layout with summary pinned on desktop.
+- [Layout 2](https://storybook.justifi.ai/?path=/docs/modular-checkout-complete-examples-layout-2--docs):
+  hero-style payment rail picker plus collapsible summaries.
+- [Layout 3](https://storybook.justifi.ai/?path=/docs/modular-checkout-complete-examples-layout-3--docs):
+  condensed layout optimized for embedded partner portals.
+
+> These examples map 1:1 with production code, so you can inspect the DOM,
+> props, and CSS custom properties without digging through story sources.
+

package/docs/modular-checkout/index.mdx

@@ -0,0 +1,20 @@
+---
+id: modular-checkout/index
+title: Modular Checkout
+description: Orientation hub for the JustiFi modular checkout experience.
+---
+
+Modular Checkout stitches every payment surface, summary view, and auxiliary
+experience into one cohesive flow. Use this hub to jump into the right phase of
+the journey:
+
+- [Introduction](./introduction/index) for architecture, props, events, and
+  theming guidance.
+- [Complete Examples](./complete-examples/index) for Storybook layouts that
+  demonstrate multi-step funnels.
+- [Sub-components](./sub-components/index) for deep dives on each child element
+  (card form, bank form, payment method picker, etc.).
+
+> Ship custom layouts fast: combine `[sub-components](./sub-components/index)`
+> with the patterns in `[Example](./example/index)` so you can validate UX
+> decisions before plumbing real data.

package/docs/modular-checkout/introduction/index.mdx

@@ -0,0 +1,102 @@
+---
+id: modular-checkout/introduction/index
+title: Modular Checkout
+sidebar_label: Introduction
+description: Layout manager that composes payment, summary, and confirmation subcomponents into a cohesive flow.
+sidebar_position: 21
+---
+
+import { PropsTable, PartsTable } from '@justifi/webcomponents/docs/helpers';
+
+## Overview
+
+The `justifi-modular-checkout` wrapper component serves as a container for checkout-related sub components. It manages the tokenization of payment methods, billing information, insurance, and overall form submission to complete the checkout. It also supports saving a payment method to a payment method group for future use.
+
+## Usage
+
+<pre>
+  <code className="language-html">{`<justifi-modular-checkout
+  account-id="acc_123"
+  auth-token="wct_checkout"
+  checkout-id="chk_456"
+>
+  <justifi-modular-checkout-card-form slot="payment-methods" />
+  <justifi-modular-checkout-summary slot="summary" />
+</justifi-modular-checkout>`}</code>
+</pre>
+
+## Props, Events & Methods
+
+<div
+  dangerouslySetInnerHTML={{
+    __html: PropsTable([
+      {
+        name: 'account-id',
+        type: 'string',
+        required: true,
+        description: 'Platform or merchant account for the checkout session.',
+      },
+      {
+        name: 'auth-token',
+        type: 'string',
+        required: true,
+        description:
+          'Token with scopes for reading checkout data and tokenizing payment methods.',
+      },
+      {
+        name: 'checkout-id',
+        type: 'string',
+        required: true,
+        description:
+          'Server-side checkout object controlling totals and allowed rails.',
+      },
+      {
+        name: 'submit-label',
+        type: 'string',
+        defaultValue: 'Pay now',
+        description: 'Override the CTA copy.',
+      },
+      {
+        name: 'locale',
+        type: 'string',
+        defaultValue: 'en-US',
+        description: 'Controls currency format + copy.',
+      },
+    ]),
+  }}
+/>
+
+### Events
+
+- `completed`: Fired when all nested components finish and a payment succeeds.
+- `error`: Emitted when nested components report a failure (validation, network, etc.).
+- `step-changed`: Surfaces stepper transitions for analytics.
+
+### Public methods
+
+1. `submit()` – Programmatically trigger the checkout CTA.
+2. `reset()` – Reset the flow back to the first step and clear transient state.
+
+## Theming & Layout
+
+- Slots expose `::part(summary)` and `::part(payment-methods)` so you can adjust spacing for each region.
+
+<div
+  dangerouslySetInnerHTML={{
+    __html: PartsTable([
+      {
+        name: 'shell',
+        description: 'Outer wrapper that surrounds the full modular checkout.',
+      },
+      {
+        name: 'payment-methods',
+        description: 'Region that houses card/bank/alternative rails.',
+      },
+      {
+        name: 'summary',
+        description: 'Order summary slot, typically on the right on desktop.',
+      },
+      { name: 'cta', description: 'Primary submit button container.' },
+    ]),
+  }}
+/>