Render Props

By default the Authentified Button handles rendering of links, link text, and state by default. However we also offer brands the ability to customise how the button looks for listings with certain states. The most common use case for this may be to change the button colour when an item is in a state that isn't available (e.g. sold, withdrawn, in review)

The full list of states are:

State	Description	Prop
Available	The item can be consigned with Authentified	renderAvailable
Draft	The listing is not complete	renderDraft
In Review	The listing has been is being reviewed by Authentified	renderInReview
Awaiting Price Confirmation	The item has been conditionally sold and is awaiting postage	renderAwaitingPriceConfirmation
Awaiting Publish	The item is ready to be listed	renderAwaitingPublish
Listed	The item has been reviewed by Authentified and has been listed	renderListed
Delisted	The item has been delisted by Authentified	renderDelisted
Awaiting Postage	The item has been conditionally sold and is awaiting postage	renderAwaitingPostage
Posted	The item has been sold and is enroute to the buyer	renderPosted
Sold	The item has been sold	renderSold
Excluded	The item cannot be resold	renderExcluded

There is also a renderLoading render prop. By default the button just renders the text "Consign with Authentified" regardless of loading state, this gives you the ability to render some kind of loading indicator within the button.

NOTE

The default behaviour if an "Excluded" state is found is to hide the button completely.

Examples

Change button label

This example uses the renderSold prop to change the look and feel of the button when it's in a Sold state

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

const renderSold = (url: string) => {
  return <a href={url} className="bg-success btn-primary">Sold!</a>
}

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

Loading state

This example uses the renderLoading prop to render a spinner component inside the button

import { Spinner } from "~/components/ui/spinner"
import { AuthentifiedProvider, AuthentifiedButton } from "@authentified/react-widget"

const renderLoading = () => {
  return <Spinner />
}

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