SAMPLE ORDER MODAL

Allow creators to order discounted samples of their products before selling.

PREVIEW

CODE

sample-order-modal-example.tsxtsx

1import { SampleOrderModal } from '@/components/fanbace/creator';
2import { useSampleOrder } from '@/lib/sdk';
3 
4export default function ProductPage({ product }) {
5  const { submitOrder, loading } = useSampleOrder();
6 
7  const handleOrder = async (variants) => {
8    await submitOrder(product.id, variants);
9  };
10 
11  return (
12    <SampleOrderModal
13      product={product}
14      onSubmit={handleOrder}
15    />
16  );
17}

PROPS

Prop	Type	Default	Description
product	Product	-	Product to order samples for
open	boolean	-	Controlled open state
onOpenChange	(open: boolean) => void	-	Callback when modal open state changes
onSubmit	(variants: any[]) => void	-	Callback when order is submitted

MODAL STATES

Closed State

Click button to open modal

Different Product

Hoodie with different variants

USAGE EXAMPLES

IN PRODUCT DASHBOARD

Show on product detail pages

1function ProductDashboard({ product }) {
2  const { submitSampleOrder } = useSampleOrder();
3 
4  return (
5    <div>
6      <ProductDetails product={product} />
7 
8      <div className="flex gap-2 mt-4">
9        <Button onClick={() => publishProduct(product.id)}>
10          Publish Product
11        </Button>
12 
13        <SampleOrderModal
14          product={product}
15          onSubmit={async (variants) => {
16            await submitSampleOrder({
17              productId: product.id,
18              variants,
19            });
20          }}
21        />
22      </div>
23    </div>
24  );
25}

WITH PRE-SELECTED VARIANTS

Auto-select specific variants

1function QuickSampleOrder({ product }) {
2  const [open, setOpen] = useState(false);
3  const [preSelected, setPreSelected] = useState({});
4 
5  const handleQuickOrder = () => {
6    // Pre-select one of each size in black
7    const blackVariants = product.variants
8      .filter(v => v.attributes.color === 'Black')
9      .reduce((acc, v) => ({ ...acc, [v.id]: 1 }), {});
10 
11    setPreSelected(blackVariants);
12    setOpen(true);
13  };
14 
15  return (
16    <>
17      <Button onClick={handleQuickOrder}>
18        Order Black Samples
19      </Button>
20 
21      <SampleOrderModal
22        product={product}
23        open={open}
24        onOpenChange={setOpen}
25        defaultSelection={preSelected}
26      />
27    </>
28  );
29}

WITH ADDRESS AUTOCOMPLETE

Pre-fill from user profile

1function SampleOrderWithAddress({ product }) {
2  const { user } = useUser();
3 
4  return (
5    <SampleOrderModal
6      product={product}
7      defaultAddress={{
8        name: user.name,
9        line1: user.address.street,
10        city: user.address.city,
11        state: user.address.state,
12        postalCode: user.address.zip,
13        country: user.address.country,
14      }}
15    />
16  );
17}