Usage

The Authentified React Widget comes with 2 components: A provider, and a button. The provider wraps your order list, and provides the ability to check the resale status of items within it.

Add the Provider

Wrap your orders page with the Authentified Provider:

import { AuthentifiedProvider } from "@authentified/react-widget"
import Orders from "./components/orders"

export default function OrderPage({ orders }) {
  return <AuthentifiedProvider>
    <Orders orders={orders}>
  </AuthentifiedProvider>
}

Add the button

Then you need to loop through the orders, then again through the items to output the button next to each item.

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

const ResellButton = ({ lineItemId, productId, orderId, shopId }) => {
  return (
    <AuthentifiedButton className="btn btn-secondary"
      lineItemId={lineItemId}
      productId={productId}
      orderId={orderId}
      shopId={shopId}
    />
  )
}

export default function OrdersComponent({ orders, customer }) {
  // Find your store ID by going to https://admin.shopify.com/store/{your_store_name}/settings/general.json
  const STORE_ID = 12345678910
  return orders.map(order => (
    <section key={order.id}>
      <h3>#{order.id}</h3>
      <div>
        {order.lineItems.map(lineItem => (
          <ResellButton lineItemId={lineItem.id} orderId={order.id} product={lineItem.product.id} shopId={STORE_ID} />
        ))}
      </div>
    </section>
  ))
}

NOTE

If you are using the Storefront API to output orders, the OrderLineItem does not come with an id property, so you will need to use the variantId instead

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

const ResellButton = ({ variantId, productId, orderId, shopId }) => {
  return (
    <AuthentifiedButton className="btn btn-secondary"
      variantId={variantId}
      productId={productId}
      orderId={orderId}
      shopId={shopId}
    />
  )
}

export default function OrdersComponent({ orders, customer }) {
  // Find your store ID by going to https://admin.shopify.com/store/{your_store_name}/settings/general.json
  const STORE_ID = 12345678910
  return orders.map(order => (
    <section key={order.id}>
      <h3>#{order.id}</h3>
      <div>
        {order.lineItems.map(lineItem => (
          <ResellButton variantId={lineItem.variant.id} orderId={order.id} product={lineItem.product.id} shopId={STORE_ID} />
        ))}
      </div>
    </section>
  ))
}

Offline Orders

By default, orders are assumed to be from Shopify. If you wish to consign offline orders, you need to specify the type prop.

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

const OfflineResellButton = ({ variantId, productId, orderId, shopId }) => {
  return (
    <AuthentifiedButton className="btn btn-secondary"
      variantId={variantId}
      productId={productId}
      orderId={orderId}
      shopId={shopId}
      type="offline"
    />
  )
}

Types

export interface AuthentifiedProviderProps extends PropsWithChildren {
  baseUrl?: string
  environment?: "production" | "development"
}

export type AuthentifiedButtonOrderType = "offline" | "shopify"

export type AuthentifiedButtonScope = "lineItem" | "order"

export interface AuthentifiedButtonCommonProps extends HTMLAttributes<HTMLAnchorElement> {
  orderId: number | string
  shopId: number | string
  customerId: number | string
  scope?: AuthentifiedButtonScope
  type?: AuthentifiedButtonOrderType
}

export type AuthentifiedButtonLineItemIdButtonProps = {
  lineItemId: number | string
  variantId?: never
}

export type AuthentifiedButtonVariantIdButtonProps = {
  lineItemId?: never
  variantId: number | string
}

export type AuthentifiedOrderButtonProps = AuthentifiedButtonCommonProps & {
  scope: "order"
  variantId?: never
  productId?: never
  lineItemId?: never
}

export type AuthentifiedLineItemButtonProps = AuthentifiedButtonCommonProps & {
  scope: "lineItem"
  productId: number | string
} & (AuthentifiedButtonLineItemIdButtonProps | AuthentifiedButtonVariantIdButtonProps)

export type AuthentifiedButtonProps = AuthentifiedLineItemButtonProps | AuthentifiedOrderButtonProps