@authentified/react-widget

This is the Authentified React widget, which is an alternative to Authentified's customer UI extension. This is primarily designed for brands who have not yet migrated to Shopify's new customer accounts.

Installation

Install the package via npm:

npm install @authentified/react-widget

Or with yarn:

yarn add @authentified/react-widget

Or with pnpm:

pnpm add @authentified/react-widget

Usage

AuthentifiedProvider

Wrap your orders page with the AuthentifiedProvider.

import { AuthentifiedProvider } from "@authentified/react-widget"

export default function OrderPage({ orders }) {
  return <AuthentifiedProvider>{/* Your orders component */}</AuthentifiedProvider>
}

AuthentifiedButton

Use the AuthentifiedButton component to render a button that allows users to interact with consignment items. Depending on your data, you can use either lineItemId or variantId to identify the consignment.

Props

• productId: string - The product ID associated with the consignment.
• orderId: number | string - The order ID associated with the consignment.
• shopId: number | string - The shop ID associated with the consignment.
• type: "shopify" | "offline" - Specifies whether the order is from Shopify or offline. Default is "shopify".
• lineItemId: number | string - The line item ID (used when type is "shopify").
• variantId: number | string - The variant ID (used when type is "shopify" or "offline").
• renderAvailable: (url: string) => React.ReactNode - Function to render when the consignment is available.
• renderDraft: (url: string) => React.ReactNode - Function to render when the consignment is in draft status.
• renderInReview: (url: string) => React.ReactNode - Function to render when the consignment is under review.
• renderRejected: (url: string) => React.ReactNode - Function to render when the consignment is rejected.
• renderListed: (url: string) => React.ReactNode - Function to render when the consignment is listed.
• renderDelisted: (url: string) => React.ReactNode - Function to render when the consignment is delisted.
• renderSold: (url: string) => React.ReactNode - Function to render when the consignment is sold.
• renderAwaitingPostage: (url: string) => React.ReactNode - Function to render when the consignment is awaiting postage.
• renderPosted: (url: string) => React.ReactNode - Function to render when the consignment is posted.
• renderLoading: () => React.ReactNode - Function to render while the consignment status is loading.

Examples

Using lineItemId

If you are fetching orders via the Shopify Admin GraphQL API, use the lineItemId - this is our preferred method:

import { AuthentifiedButton } from "@authentified/react-widget"

const ConsignmentButton = ({ lineItemId, productId, orderId, shopId }) => {
  return <AuthentifiedButton lineItemId={lineItemId} productId={productId} orderId={orderId} shopId={shopId} type="shopify" />
}

Using variantId

If you are using the Shopify Storefront API, the lineItemId is not available so you will need to use a variantId:

import { AuthentifiedButton } from "@authentified/react-widget"

const ConsignmentButton = ({ variantId, productId, orderId, shopId }) => {
  return <AuthentifiedButton variantId={variantId} productId={productId} orderId={orderId} shopId={shopId} type="shopify" />
}

Offline Orders

For offline orders, use variantId and type="offline":

import { AuthentifiedButton } from "@authentified/react-widget"

const OfflineConsignmentButton = ({ variantId, productId, orderId, shopId }) => {
  return <AuthentifiedButton variantId={variantId} productId={productId} orderId={orderId} shopId={shopId} type="offline" />
}

Custom Render Props

Each consignment status can be customised using render props to match your branding and UI/UX requirements.

const OfflineConsignmentButton = ({ variantId, productId, orderId, shopId }) => {
  return (
    <AuthentifiedButton
      variantId={variantId}
      productId={productId}
      orderId={orderId}
      shopId={shopId}
      type="offline"
      renderAvailable={(url) => (
        <a href={url} className="btn btn-primary">
          Available
        </a>
      )}
      renderSold={() => <span className="badge badge-success">Sold</span>}
      renderLoading={() => <span>Loading...</span>}
    />
  )
}

Docs

Docs can be found on our docs website

• Installation
• Usage
• Render Props

CHANGELOG

You can either read our CHANGELOG, or visit our Canny site