@justifi/webcomponents 6.5.1-rc.4 → 6.5.1-rc.7

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

@@ -5,7 +5,7 @@ description: Paginated reporting table for monitoring active and past checkouts.
 sidebar_position: 26
 ---
 
-import { PropsTable, PartsTable } from '../../helpers';
+import { PropsTable, PartsTable } from '@justifi/webcomponents/docs/helpers';
 
 ## Overview
 
@@ -15,11 +15,13 @@ Component to render a formated list of checkouts for the requested account.
 
 ### Basic list with filters
 
-<pre><code className="language-html">{`<justifi-checkouts-list-filters></justifi-checkouts-list-filters>
+<pre>
+  <code className="language-html">{`<justifi-checkouts-list-filters></justifi-checkouts-list-filters>
 <justifi-checkouts-list
   account-id="acc_123"
   auth-token="wct_reportingToken"
-/>`}</code></pre>
+/>`}</code>
+</pre>
 
 ### Custom columns
 
@@ -27,30 +29,28 @@ Pass a comma-separated list to the `columns` prop (`created_at,payment_amount,st
 
 ## Props, Events & Methods
 
-<div
-  dangerouslySetInnerHTML={{
-    __html: PropsTable([
-      {
-        name: 'account-id',
-        type: 'string',
-        required: true,
-        description: 'Platform or sub-account whose checkouts should appear.',
-      },
-      {
-        name: 'auth-token',
-        type: 'string',
-        required: true,
-        description: 'Token with `read:checkouts` scope.',
-      },
-      {
-        name: 'columns',
-        type: 'string',
-        defaultValue:
-          'created_at,payment_amount,payment_description,payment_mode,status',
-        description: 'Controls which table columns render and their order.',
-      },
-    ]),
-  }}
+<PropsTable
+  rows={[
+    {
+      name: 'account-id',
+      type: 'string',
+      required: true,
+      description: 'Platform or sub-account whose checkouts should appear.',
+    },
+    {
+      name: 'auth-token',
+      type: 'string',
+      required: true,
+      description: 'Token with `read:checkouts` scope.',
+    },
+    {
+      name: 'columns',
+      type: 'string',
+      defaultValue:
+        'created_at,payment_amount,payment_description,payment_mode,status',
+      description: 'Controls which table columns render and their order.',
+    },
+  ]}
 />
 
 ### Events
@@ -65,43 +65,29 @@ Pass a comma-separated list to the `columns` prop (`created_at,payment_amount,st
 
 ## 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.',
-      },
-    ]),
-  }}
+<PartsTable
+  parts={[
+    {
+      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.',
+    },
+  ]}
 />
 
 - Filters component emits custom events; ensure both components share the same container so spacing stays consistent.
-
-## Static examples
-
-### Listening for row clicks
-
-<pre><code className="language-js">{`const list = document.querySelector('justifi-checkouts-list');
-
-list.addEventListener('click-event', (event) => {
-if (event.detail.name === 'row') {
-router.navigate('/checkouts/' + event.detail.checkout_id);
-}
-});`}</code></pre>

package/docs/merchant-tools/gross-payments-chart/index.mdx

@@ -5,7 +5,7 @@ description: Visualizes gross payment volume over time with tooltips and range s
 sidebar_position: 43
 ---
 
-import { PropsTable, PartsTable } from '../../helpers';
+import { PropsTable, PartsTable } from '@justifi/webcomponents/docs/helpers';
 
 ## Overview
 
@@ -15,16 +15,19 @@ Component to render chart displaying last 30 days of gross payment data.
 
 ### Chart monthly volume
 
-<pre><code className="language-html">{`<justifi-gross-payment-chart
+<pre>
+  <code className="language-html">{`<justifi-gross-payment-chart
   account-id="acc_123"
   auth-token="wct_reporting"
   interval="month"
   range="12m"
-/>`}</code></pre>
+/>`}</code>
+</pre>
 
 ## Props, Events & Methods
 
-<div dangerouslySetInnerHTML={{ __html: PropsTable([
+<PropsTable
+  rows={[
     {
       name: 'account-id',
       type: 'string',
@@ -49,7 +52,8 @@ Component to render chart displaying last 30 days of gross payment data.
       defaultValue: '30d',
       description: 'Total timeframe (e.g., `7d`, `3m`, `12m`).',
     },
-  ]) }} />
+  ]}
+/>
 
 ### Events
 
@@ -61,21 +65,15 @@ Component to render chart displaying last 30 days of gross payment data.
 
 ## Theming & Layout
 
-<div dangerouslySetInnerHTML={{ __html: PartsTable([
-    { name: 'chart', description: 'SVG/Canvas container for the line chart.' },
+<PartsTable
+  parts={[
+    {
+      name: 'chart',
+      description: 'SVG/Canvas container for the line chart.',
+    },
     {
       name: 'tooltip',
       description: 'Floating tooltip bubble when hovering/focusing a point.',
     },
-  ]) }} />
-
-## Static examples
-
-### Toggle ranges
-
-<pre><code className="language-js">{`const chart = document.querySelector('justifi-gross-payment-chart');
-
-document.querySelector('#range').addEventListener('change', (event) => {
-chart.setAttribute('range', event.target.value);
-chart.refresh();
-});`}</code></pre>
+  ]}
+/>

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

@@ -5,7 +5,7 @@ description: Guided purchasing flow for ordering in-person terminals and accesso
 sidebar_position: 50
 ---
 
-import { PropsTable, PartsTable } from '../../helpers';
+import { PropsTable, PartsTable } from '@justifi/webcomponents/docs/helpers';
 
 ## Overview
 
@@ -13,15 +13,18 @@ Component to render a form for terminal order requests.
 
 ## Usage
 
-<pre><code className="language-html">{`<justifi-order-terminals
+<pre>
+  <code className="language-html">{`<justifi-order-terminals
   account-id="acc_123"
   auth-token="wct_terminals"
   shipping-contact="contact_456"
-/>`}</code></pre>
+/>`}</code>
+</pre>
 
 ## Props, Events & Methods
 
-<div dangerouslySetInnerHTML={{ __html: PropsTable([
+<PropsTable
+  rows={[
     {
       name: 'account-id',
       type: 'string',
@@ -45,7 +48,8 @@ Component to render a form for terminal order requests.
       type: 'string',
       description: 'Comma-separated SKU list to limit which devices appear.',
     },
-  ]) }} />
+  ]}
+/>
 
 ### Events
 
@@ -58,7 +62,8 @@ Component to render a form for terminal order requests.
 
 ## Theming & Layout
 
-<div dangerouslySetInnerHTML={{ __html: PartsTable([
+<PartsTable
+  parts={[
     {
       name: 'font-family',
       description: 'Controls the font family for the component.',
@@ -71,14 +76,5 @@ Component to render a form for terminal order requests.
       name: 'background-color',
       description: 'Controls the background color.',
     },
-  ]) }} />
-
-## Static examples
-
-### Restrict SKUs
-
-<pre><code className="language-html">{`<justifi-order-terminals
-  account-id="acc_123"
-  auth-token="wct_terminals"
-  allowed-products="WISEPAD_3,WISEPOS_E"
-/>`}</code></pre>
+  ]}
+/>

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

@@ -5,8 +5,11 @@ description: Detailed view for a single payment, including customer data, timeli
 sidebar_position: 30
 ---
 
-import { PropsTable, PartsTable } from '../../helpers';
-import { getWebcomponentsVersion } from '@justifi/webcomponents/docs/helpers';
+import {
+  PropsTable,
+  PartsTable,
+  getWebcomponentsVersion,
+} from '@justifi/webcomponents/docs/helpers';
 
 ## Overview
 
@@ -67,7 +70,8 @@ Component to display detailed information about a specific payment.
 
 ## Props, Events & Methods
 
-<div dangerouslySetInnerHTML={{ __html: PropsTable([
+<PropsTable
+  rows={[
     {
       name: 'account-id',
       type: 'string',
@@ -92,7 +96,8 @@ Component to display detailed information about a specific payment.
       defaultValue: 'true',
       description: 'Hide when you only need a read-only audit surface.',
     },
-  ]) }} />
+  ]}
+/>
 
 ### Events
 
@@ -105,7 +110,8 @@ Component to display detailed information about a specific payment.
 
 ## Theming & Layout
 
-<div dangerouslySetInnerHTML={{ __html: PartsTable([
+<PartsTable
+  parts={[
     {
       name: 'font-family',
       description: 'Controls the font family for the component.',
@@ -118,14 +124,5 @@ Component to display detailed information about a specific payment.
       name: 'background-color',
       description: 'Controls the background color.',
     },
-  ]) }} />
-
-## Static examples
-
-### Hook into refund events
-
-<pre><code className="language-js">{`const details = document.querySelector('justifi-payment-details');
-
-details.addEventListener('refund-requested', ({ detail }) => {
-console.log('Starting refund flow for payment', detail.payment_id);
-});`}</code></pre>
+  ]}
+/>

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

@@ -5,7 +5,7 @@ description: Transaction-level ledger for payments, grouped by status and fundin
 sidebar_position: 32
 ---
 
-import { PropsTable, PartsTable } from '../../helpers';
+import { PropsTable, PartsTable } from '@justifi/webcomponents/docs/helpers';
 
 ## Overview
 
@@ -13,15 +13,18 @@ Component to display a list of payment transactions for a specific payment.
 
 ## Usage
 
-<pre><code className="language-html">{`<justifi-payment-transactions-list
+<pre>
+  <code className="language-html">{`<justifi-payment-transactions-list
   account-id="acc_123"
   auth-token="wct_reporting"
   filters='{"payment_id":"pay_456"}'
-/>`}</code></pre>
+/>`}</code>
+</pre>
 
 ## Props, Events & Methods
 
-<div dangerouslySetInnerHTML={{ __html: PropsTable([
+<PropsTable
+  rows={[
     {
       name: 'account-id',
       type: 'string',
@@ -46,7 +49,8 @@ Component to display a list of payment transactions for a specific payment.
       defaultValue: 'false',
       description: 'Adds export controls when true.',
     },
-  ]) }} />
+  ]}
+/>
 
 ### Events
 
@@ -59,7 +63,8 @@ Component to display a list of payment transactions for a specific payment.
 
 ## Theming & Layout
 
-<div dangerouslySetInnerHTML={{ __html: PartsTable([
+<PartsTable
+  parts={[
     {
       name: 'font-family',
       description: 'Controls the font family for the component.',
@@ -72,14 +77,5 @@ Component to display a list of payment transactions for a specific payment.
       name: 'background-color',
       description: 'Controls the background color.',
     },
-  ]) }} />
-
-## Static examples
-
-### Listening for filter changes
-
-<pre><code className="language-js">{`const ledger = document.querySelector('justifi-payment-transactions-list');
-
-ledger.addEventListener('filter-changed', (event) => {
-console.log('Filters now', event.detail);
-});`}</code></pre>
+  ]}
+/>

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

@@ -5,7 +5,7 @@ description: Paginated table of payments with filtering, export, and quick actio
 sidebar_position: 31
 ---
 
-import { PropsTable, PartsTable } from '../../helpers';
+import { PropsTable, PartsTable } from '@justifi/webcomponents/docs/helpers';
 
 ## Overview
 
@@ -13,7 +13,8 @@ Component to render a formated list of payments for the requested account.
 
 ## Usage
 
-<pre><code className="language-html">{`<div class="payments-report">
+<pre>
+  <code className="language-html">{`<div class="payments-report">
   <justifi-filters
     account-id="acc_123"
     auth-token="wct_reporting"
@@ -24,11 +25,13 @@ Component to render a formated list of payments for the requested account.
     auth-token="wct_reporting"
     columns="created_at,customer_name,payment_amount,status"
   ></justifi-payments-list>
-</div>`}</code></pre>
+</div>`}</code>
+</pre>
 
 ## Props, Events & Methods
 
-<div dangerouslySetInnerHTML={{ __html: PropsTable([
+<PropsTable
+  rows={[
     {
       name: 'account-id',
       type: 'string',
@@ -61,7 +64,8 @@ Component to render a formated list of payments for the requested account.
       defaultValue: 'false',
       description: 'Adds an export button that streams CSV data when true.',
     },
-  ]) }} />
+  ]}
+/>
 
 ### Events
 
@@ -75,7 +79,8 @@ Component to render a formated list of payments for the requested account.
 
 ## Theming & Layout
 
-<div dangerouslySetInnerHTML={{ __html: PartsTable([
+<PartsTable
+  parts={[
     {
       name: 'font-family',
       description: 'Controls the font family for the component.',
@@ -96,16 +101,5 @@ Component to render a formated list of payments for the requested account.
       name: 'button-disabled',
       description: 'Disabled button styles.',
     },
-  ]) }} />
-
-## Static examples
-
-### Reacting to row clicks
-
-<pre><code className="language-js">{`const list = document.querySelector('justifi-payments-list');
-
-list.addEventListener('click-event', (event) => {
-if (event.detail.name === 'row') {
-router.push('/payments/' + event.detail.payment_id);
-}
-});`}</code></pre>
+  ]}
+/>

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

@@ -5,7 +5,7 @@ description: Drill-down view for a single payout, including ledger items and ban
 sidebar_position: 41
 ---
 
-import { PropsTable, PartsTable } from '../../helpers';
+import { PropsTable, PartsTable } from '@justifi/webcomponents/docs/helpers';
 
 ## Overview
 
@@ -13,43 +13,43 @@ Component to display detailed information about a specific payout.
 
 ## Usage
 
-<pre><code className="language-html">{`<justifi-payout-details
+<pre>
+  <code className="language-html">{`<justifi-payout-details
   account-id="acc_123"
   auth-token="wct_reporting"
   payout-id="po_456"
-/>`}</code></pre>
+/>`}</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.',
-      },
-    ]),
-  }}
+<PropsTable
+  rows={[
+    {
+      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
@@ -62,29 +62,19 @@ Component to display detailed information about a specific payout.
 
 ## 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.',
-      },
-    ]),
-  }}
+<PartsTable
+  parts={[
+    {
+      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.',
+    },
+  ]}
 />
-
-## Static examples
-
-### Auto-refresh
-
-<pre><code className="language-js">{`const payout = document.querySelector('justifi-payout-details');
-
-setInterval(() => payout.refresh(), 60_000);`}</code></pre>

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

@@ -5,7 +5,7 @@ description: Ledger of transactions contributing to a payout, with filtering and
 sidebar_position: 42
 ---
 
-import { PropsTable, PartsTable } from '../../helpers';
+import { PropsTable, PartsTable } from '@justifi/webcomponents/docs/helpers';
 
 ## Overview
 
@@ -13,15 +13,18 @@ Component to display a list of payout transactions for a specific payout.
 
 ## Usage
 
-<pre><code className="language-html">{`<justifi-payout-transactions-list
+<pre>
+  <code className="language-html">{`<justifi-payout-transactions-list
   account-id="acc_123"
   auth-token="wct_reporting"
   payout-id="po_456"
-/>`}</code></pre>
+/>`}</code>
+</pre>
 
 ## Props, Events & Methods
 
-<div dangerouslySetInnerHTML={{ __html: PropsTable([
+<PropsTable
+  rows={[
     {
       name: 'account-id',
       type: 'string',
@@ -46,7 +49,8 @@ Component to display a list of payout transactions for a specific payout.
       defaultValue: 'type,amount,source,status',
       description: 'Column ordering and selection.',
     },
-  ]) }} />
+  ]}
+/>
 
 ### Events
 
@@ -58,7 +62,8 @@ Component to display a list of payout transactions for a specific payout.
 
 ## Theming & Layout
 
-<div dangerouslySetInnerHTML={{ __html: PartsTable([
+<PartsTable
+  parts={[
     {
       name: 'font-family',
       description: 'Controls the font family for the component.',
@@ -71,14 +76,5 @@ Component to display a list of payout transactions for a specific payout.
       name: 'background-color',
       description: 'Controls the background color.',
     },
-  ]) }} />
-
-## Static examples
-
-### Open payment details
-
-<pre><code className="language-js">{`const payoutLedger = document.querySelector('justifi-payout-transactions-list');
-
-payoutLedger.addEventListener('click-event', ({ detail }) => {
-router.push('/payments/' + detail.transaction_id);
-});`}</code></pre>
+  ]}
+/>