npm - @justifi/webcomponents - Versions diffs - 6.5.1-rc.5 → 6.5.1-rc.7 - Mend

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

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

package/docs/modular-checkout/sub-components/saved-payment-methods.mdx CHANGED Viewed

@@ -5,7 +5,11 @@ description: Saved payment selector for Modular Checkout that handles defaulting
 sidebar_position: 26
 ---
-import { PropsTable, PartsTable, getWebcomponentsVersion } from '@justifi/webcomponents/docs/helpers';
+import {
+  PropsTable,
+  PartsTable,
+  getWebcomponentsVersion,
+} from '@justifi/webcomponents/docs/helpers';
 ## Overview
@@ -30,48 +34,51 @@ This component exposes **no public methods or properties** and is not intended f
   <title>justifi-saved-payment-methods</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>
-      /** These are the available parts for styling the component. */
-      ::part(text) {
-        // text styles
-      }
-      ::part(text-danger) {
-        // text danger styles
-      }
-      ::part(label) {
-        // label styles
-      }
-      ::part(input-radio) {
-        // input radio styles
-      }
-      ::part(input-radio-focused) {
-        // input radio focused styles
-      }
-      ::part(input-radio-checked) {
-        // input radio checked styles
-      }
-      ::part(input-radio-checked-focused) {
-        // input radio checked focused styles
-      }
-      ::part(input-radio-invalid) {
-        // input radio invalid styles
-      }
-    </style>
+<script
+  nomodule
+  src="https://cdn.jsdelivr.net/npm/@justifi/webcomponents@${getWebcomponentsVersion()}/dist/webcomponents/webcomponents.js"
+></script>
+<style>
+  /** These are the available parts for styling the component. */ ::part(text){' '}
+  {
+    // text styles
+  }
+  ::part(text-danger){' '}
+  {
+    // text danger styles
+  }
+  ::part(label){' '}
+  {
+    // label styles
+  }
+  ::part(input-radio){' '}
+  {
+    // input radio styles
+  }
+  ::part(input-radio-focused){' '}
+  {
+    // input radio focused styles
+  }
+  ::part(input-radio-checked){' '}
+  {
+    // input radio checked styles
+  }
+  ::part(input-radio-checked-focused){' '}
+  {
+    // input radio checked focused styles
+  }
+  ::part(input-radio-invalid){' '}
+  {
+    // input radio invalid styles
+  }
+</style>
 </head>
 <body>
-  <justifi-modular-checkout
-    auth-token="authToken"
-    checkout-id="ch_123"
-  >
+  <justifi-modular-checkout auth-token="authToken" checkout-id="ch_123">
     <justifi-saved-payment-methods />
   </justifi-modular-checkout>
 </body>
@@ -94,11 +101,13 @@ This component exposes **no public methods or properties** and is not intended f
     });
   })();
 </script>
 </html>`}</code></pre>
 ## Props, Events & Methods
-<div dangerouslySetInnerHTML={{ __html: PropsTable([
+<PropsTable
+  rows={[
     {
       name: 'customer-id',
       type: 'string',
@@ -118,7 +127,8 @@ This component exposes **no public methods or properties** and is not intended f
       description:
         'Displays a control that reveals the card/bank forms when no method is selected.',
     },
-  ]) }} />
+  ]}
+/>
 ### Events
@@ -131,7 +141,8 @@ This component exposes **no public methods or properties** and is not intended f
 ## Theming & Layout
-<div dangerouslySetInnerHTML={{ __html: PartsTable([
+<PartsTable
+  parts={[
     {
       name: 'text',
       description: 'Text styles.',
@@ -164,14 +175,5 @@ This component exposes **no public methods or properties** and is not intended f
       name: 'input-radio-invalid',
       description: 'Radio input styles when invalid.',
     },
-  ]) }} />
-## Static examples
-### Fallback flow
-<pre><code className="language-js">{`const saved = document.querySelector('justifi-saved-payment-methods');
-saved.addEventListener('selection-changed', ({ detail }) => {
-if (!detail.payment_method_token) saved.clearSelection();
-});`}</code></pre>
+  ]}
+/>

package/docs/modular-checkout/sub-components/season-interruption-insurance.mdx CHANGED Viewed

@@ -5,7 +5,11 @@ description: Optional insurance add-on rail that pairs with Modular Checkout sum
 sidebar_position: 25
 ---
-import { PropsTable, PartsTable, getWebcomponentsVersion } from '@justifi/webcomponents/docs/helpers';
+import {
+  PropsTable,
+  PartsTable,
+  getWebcomponentsVersion,
+} from '@justifi/webcomponents/docs/helpers';
 ## Overview
@@ -22,7 +26,12 @@ Component to render a formated list of season interruption insurance for the req
   <title>justifi-season-interruption-insurance</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>
+<script
+  nomodule
+  src="https://cdn.jsdelivr.net/npm/@justifi/webcomponents@${getWebcomponentsVersion()}/dist/webcomponents/webcomponents.js"
+></script>
   <style>
       ::part(font-family) {
         font-family: georgia;
@@ -59,10 +68,11 @@ Component to render a formated list of season interruption insurance for the req
         box-shadow: 0 0 0 0.25rem rgba(0, 0, 0, 0.25);
       }
     </style>
 </head>
 <body>
-  <justifi-season-interruption-insurance
+  <justifi-season-interruption-insurance
     auth-token="your-auth-token"
     checkout-id="your-checkout-id"
     primary-identity-first-name="John"
@@ -79,7 +89,8 @@ Component to render a formated list of season interruption insurance for the req
 ## Props, Events & Methods
-<div dangerouslySetInnerHTML={{ __html: PropsTable([
+<PropsTable
+  rows={[
     {
       name: 'auth-token',
       type: 'string',
@@ -155,7 +166,8 @@ Component to render a formated list of season interruption insurance for the req
       type: 'string',
       description: 'Last name of the covered person.',
     },
-  ]) }} />
+  ]}
+/>
 ### Events
@@ -171,7 +183,8 @@ Component to render a formated list of season interruption insurance for the req
 - The host inherits the same typography tokens as other Modular Checkout rails via `StyledHost`, so it naturally matches surrounding content.
 - Use the exposed parts to restyle copy or validation messaging without affecting the radios themselves.
-<div dangerouslySetInnerHTML={{ __html: PartsTable([
+<PartsTable
+  parts={[
     {
       name: 'font-family',
       description: 'Controls the font family for the component.',
@@ -200,20 +213,5 @@ Component to render a formated list of season interruption insurance for the req
       name: 'input-radio-checked-focused',
       description: 'Radio input styles when checked and focused.',
     },
-  ]) }} />
-## Static examples
-### Validate selection before submission
-<pre><code className="language-js">{`const insurance = document.querySelector('justifi-season-interruption-insurance');
-const { isValid } = await insurance.validate();
-if (!isValid) {
-// surface inline validation by leaving the radio group untouched
-return;
-}
-// continue to submit the checkout
-`}</code></pre>
+  ]}
+/>

package/docs/modular-checkout/sub-components/sezzle-payment-method.mdx CHANGED Viewed

@@ -5,7 +5,11 @@ description: Sezzle BNPL rail for Modular Checkout, including disclosure copy an
 sidebar_position: 24
 ---
-import { PropsTable, PartsTable, getWebcomponentsVersion } from '@justifi/webcomponents/docs/helpers';
+import {
+  PropsTable,
+  PartsTable,
+  getWebcomponentsVersion,
+} from '@justifi/webcomponents/docs/helpers';
 ## Overview
@@ -28,48 +32,51 @@ This component exposes **no public methods or properties** and is not intended f
   <title>justifi-sezzle-payment-method</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>
-      /** These are the available parts for styling the component. */
-      ::part(text) {
-        // text styles
-      }
-      ::part(text-danger) {
-        // text danger styles
-      }
-      ::part(label) {
-        // label styles
-      }
-      ::part(input-radio) {
-        // input radio styles
-      }
-      ::part(input-radio-focused) {
-        // input radio focused styles
-      }
-      ::part(input-radio-checked) {
-        // input radio checked styles
-      }
-      ::part(input-radio-checked-focused) {
-        // input radio checked focused styles
-      }
-      ::part(input-radio-invalid) {
-        // input radio invalid styles
-      }
-    </style>
+<script
+  nomodule
+  src="https://cdn.jsdelivr.net/npm/@justifi/webcomponents@${getWebcomponentsVersion()}/dist/webcomponents/webcomponents.js"
+></script>
+<style>
+  /** These are the available parts for styling the component. */ ::part(text){' '}
+  {
+    // text styles
+  }
+  ::part(text-danger){' '}
+  {
+    // text danger styles
+  }
+  ::part(label){' '}
+  {
+    // label styles
+  }
+  ::part(input-radio){' '}
+  {
+    // input radio styles
+  }
+  ::part(input-radio-focused){' '}
+  {
+    // input radio focused styles
+  }
+  ::part(input-radio-checked){' '}
+  {
+    // input radio checked styles
+  }
+  ::part(input-radio-checked-focused){' '}
+  {
+    // input radio checked focused styles
+  }
+  ::part(input-radio-invalid){' '}
+  {
+    // input radio invalid styles
+  }
+</style>
 </head>
 <body>
-  <justifi-modular-checkout
-    auth-token="authToken"
-    checkout-id="ch_123"
-  >
+  <justifi-modular-checkout auth-token="authToken" checkout-id="ch_123">
     <justifi-sezzle-payment-method />
   </justifi-modular-checkout>
 </body>
@@ -92,33 +99,32 @@ This component exposes **no public methods or properties** and is not intended f
     });
   })();
 </script>
 </html>`}</code></pre>
 ## Props, Events & Methods
-<div
-  dangerouslySetInnerHTML={{
-    __html: PropsTable([
-      {
-        name: 'merchant-id',
-        type: 'string',
-        required: true,
-        description:
-          'Sezzle merchant identifier configured in your JustiFi account.',
-      },
-      {
-        name: 'terms-url',
-        type: 'string',
-        description: 'Overrides the default Sezzle terms link.',
-      },
-      {
-        name: 'locale',
-        type: 'string',
-        defaultValue: 'en-US',
-        description: 'Controls copy for disclosures.',
-      },
-    ]),
-  }}
+<PropsTable
+  rows={[
+    {
+      name: 'merchant-id',
+      type: 'string',
+      required: true,
+      description:
+        'Sezzle merchant identifier configured in your JustiFi account.',
+    },
+    {
+      name: 'terms-url',
+      type: 'string',
+      description: 'Overrides the default Sezzle terms link.',
+    },
+    {
+      name: 'locale',
+      type: 'string',
+      defaultValue: 'en-US',
+      description: 'Controls copy for disclosures.',
+    },
+  ]}
 />
 ### Events
@@ -135,49 +141,39 @@ This component exposes **no public methods or properties** and is not intended f
 - Respect Sezzle's branding by keeping the provided colors and logos intact.
-<div
-  dangerouslySetInnerHTML={{
-    __html: PartsTable([
-      {
-        name: 'text',
-        description: 'Text styles.',
-      },
-      {
-        name: 'text-danger',
-        description: 'Danger/error text styles.',
-      },
-      {
-        name: 'label',
-        description: 'Label styles.',
-      },
-      {
-        name: 'input-radio',
-        description: 'Radio input styles.',
-      },
-      {
-        name: 'input-radio-focused',
-        description: 'Radio input styles when focused.',
-      },
-      {
-        name: 'input-radio-checked',
-        description: 'Radio input styles when checked.',
-      },
-      {
-        name: 'input-radio-checked-focused',
-        description: 'Radio input styles when checked and focused.',
-      },
-      {
-        name: 'input-radio-invalid',
-        description: 'Radio input styles when invalid.',
-      },
-    ]),
-  }}
+<PartsTable
+  parts={[
+    {
+      name: 'text',
+      description: 'Text styles.',
+    },
+    {
+      name: 'text-danger',
+      description: 'Danger/error text styles.',
+    },
+    {
+      name: 'label',
+      description: 'Label styles.',
+    },
+    {
+      name: 'input-radio',
+      description: 'Radio input styles.',
+    },
+    {
+      name: 'input-radio-focused',
+      description: 'Radio input styles when focused.',
+    },
+    {
+      name: 'input-radio-checked',
+      description: 'Radio input styles when checked.',
+    },
+    {
+      name: 'input-radio-checked-focused',
+      description: 'Radio input styles when checked and focused.',
+    },
+    {
+      name: 'input-radio-invalid',
+      description: 'Radio input styles when invalid.',
+    },
+  ]}
 />
-## Static examples
-### Track redirects
-<pre><code className="language-js">{`const sezzle = document.querySelector('justifi-sezzle-payment-method');
-sezzle.addEventListener('sezzle-redirect', () => analytics.track('sezzle_redirect_started'));`}</code></pre>

package/docs/modular-checkout/sub-components/summary.mdx CHANGED Viewed

@@ -5,7 +5,11 @@ description: Order summary block that lists line items, totals, and ancillary di
 sidebar_position: 27
 ---
-import { PropsTable, PartsTable, getWebcomponentsVersion } from '@justifi/webcomponents/docs/helpers';
+import {
+  PropsTable,
+  PartsTable,
+  getWebcomponentsVersion,
+} from '@justifi/webcomponents/docs/helpers';
 ## Overview
@@ -59,7 +63,8 @@ This component exposes **no public methods or properties** and is not intended f
 ## Props, Events & Methods
-<div dangerouslySetInnerHTML={{ __html: PropsTable([
+<PropsTable
+  rows={[
     {
       name: 'checkout-id',
       type: 'string',
@@ -79,7 +84,8 @@ This component exposes **no public methods or properties** and is not intended f
       defaultValue: 'true',
       description: 'Hide icons when you want an ultra-minimal summary.',
     },
-  ]) }} />
+  ]}
+/>
 ### Events
@@ -91,17 +97,11 @@ No custom events; summary listens to the parent checkout for updates automatical
 ## Theming & Layout
-<div dangerouslySetInnerHTML={{ __html: PartsTable([
+<PartsTable
+  parts={[
     {
       name: 'text',
       description: 'Text styles for the summary component.',
     },
-  ]) }} />
-## Static examples
-### Custom refresh
-<pre><code className="language-js">{`const summary = document.querySelector('justifi-modular-checkout-summary');
-document.querySelector('#recalculate').onclick = () => summary.refresh();`}</code></pre>
+  ]}
+/>

package/docs/payment-facilitation/dispute-management/index.mdx CHANGED Viewed

@@ -13,15 +13,18 @@ Component to render notification of disputed payments and allow platform to resp
 ## Usage
-<pre><code className="language-html">{`<justifi-dispute-management
+<pre>
+  <code className="language-html">{`<justifi-dispute-management
   account-id="acc_123"
   auth-token="wct_disputes"
   dispute-id="dp_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 render notification of disputed payments and allow platform to resp
       defaultValue: 'false',
       description: 'Disable response actions when true.',
     },
-  ]) }} />
+  ]}
+/>
 ### Events
@@ -60,7 +64,8 @@ Component to render notification of disputed payments and allow platform to resp
 ## Theming & Layout
-<div dangerouslySetInnerHTML={{ __html: PartsTable([
+<PartsTable
+  parts={[
     {
       name: 'font-family',
       description: 'Controls the font family for the component.',
@@ -85,14 +90,5 @@ Component to render notification of disputed payments and allow platform to resp
       name: 'button-disabled',
       description: 'Disabled button styles.',
     },
-  ]) }} />
-## Static examples
-### Listening for evidence uploads
-<pre><code className="language-js">{`const disputes = document.querySelector('justifi-dispute-management');
-disputes.addEventListener('evidence-uploaded', ({ detail }) => {
-toast.success('Uploaded ' + detail.file_name);
-});`}</code></pre>
+  ]}
+/>