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.

1. Add the Provider

Wrap your line items with the AuthentifiedProvider.

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

export const OrdersPage = ({ orders }) => {
  return (
    <AuthentifiedProvider>
      <OrderListComponent orders={orders} />
    </AuthentifiedProvider>
  )
}

2. Add the button

Now that the AuthentifiedProvider is in place, you can add the button next to each line item in the customer's orders.

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

export const OrderListComponent = ({ orders }) {
  return (
    <section>
      {orders.map(order => (
        <article key={order.id}>
          <h2>{lineItem.product.name}</h2>
          <h3>#{order.id}</h3>
          <div>
            {order.lineItems.map(lineItem => (
              <AuthentifiedButton
                variantId={lineItem.id}
                productId={lineItem.product.id}
                orderId={order.id}
                shopId={process.env.SHOP_ID}
              />
            ))}
          </div>
        </article>
      ))}
    </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"

export const OrderListComponent = ({ orders }) {
  return (
    <section>
      {orders.map(order => (
        <article key={order.id}>
          <h2>{lineItem.product.name}</h2>
          <h3>#{order.id}</h3>
          <div>
            {order.lineItems.map(lineItem => (
              <AuthentifiedButton
                variantId={lineItem.variant.id}
                productId={lineItem.product.id}
                orderId={order.id}
                shopId={process.env.SHOP_ID}
              />
            ))}
          </div>
        </article>
      ))}
    </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"

export const OfflineOrderListComponent = ({ offlineOrders }) {
  return (
    <section>
      {offlineOrders.map(order => (
        <article key={order.id}>
          <h2>{lineItem.product.name}</h2>
          <h3>#{order.id}</h3>
          <div>
            {order.lineItems.map(lineItem => (
              <AuthentifiedButton
                variantId={lineItem.variant.id}
                productId={lineItem.product.id}
                orderId={order.id}
                shopId={process.env.SHOP_ID}
                type="offline"
              />
            ))}
          </div>
        </article>
      ))}
    </section>
  )
}