Component catalog

"use client";
import { CataloguePage } from "@cimplify/sdk/react";
import { useRouter } from "next/navigation";

export default function Shop() {
  const router = useRouter();
  return (
    <CataloguePage
      pageSize={24}
      defaultSort={{ by: "popularity", order: "desc" }}
      onProductClick={(p) => router.push(`/products/${p.slug ?? p.id}`)}
    />
  );
}

"use client";
import { ProductPage } from "@cimplify/sdk/react";
import { useParams } from "next/navigation";
import Image from "next/image";

export default function Product() {
  const { slug } = useParams<{ slug: string }>();
  return (
    <ProductPage
      productId={slug}
      renderImage={(p) => <Image {...p} width={1200} height={1200} />}
    />
  );
}

"use client";
import { CartPage } from "@cimplify/sdk/react";
import { useRouter } from "next/navigation";

export default function Cart() {
  const router = useRouter();
  return (
    <CartPage
      onCheckout={() => router.push("/checkout")}
      onContinueShopping={() => router.push("/shop")}
      showDiscount
      checkoutLabel="Proceed to checkout"
    />
  );
}

"use client";
import { CheckoutPage } from "@cimplify/sdk/react";
import { useRouter } from "next/navigation";

export default function Checkout() {
  const router = useRouter();
  return (
    <CheckoutPage
      title="Checkout"
      onComplete={(r) => router.push(`/orders/${r.order?.id}`)}
      onError={(e) => console.error(e.code, e.message)}
    />
  );
}

<SearchPage
  placeholder="Search products"
  searchOptions={{ query: q, limit: 24 }}
  onQuickAdd={(p) => addItem(p)}
/>

"use client";
import { CimplifyAccount } from "@cimplify/sdk/react";

export default function AccountOrders() {
  return <CimplifyAccount section="orders" />;
}

<CartDrawerProvider openOnAdd>
  {children}
</CartDrawerProvider>

<CartDrawer
  title="Your cart"
  freeShippingThreshold={500}
  onCheckout={() => router.push("/checkout")}
  onContinueShopping={() => close()}
  onShop={() => router.push("/shop")}
/>

import { Price } from "@cimplify/sdk/react";

<Price amount={product.price} />            // uses provider currency
<Price amount="29.99" currency="USD" />     // explicit
<Price amount={item.adjustment} prefix="+" />

const [qty, setQty] = useState(1);

<QuantitySelector
  value={qty}
  onChange={setQty}
  min={1}
  max={10}
/>

<DealBanner
  limit={3}
  onDealClick={(d) => router.push(`/deals/${d.slug}`)}
/>

<DeliveryEstimate
  latitude={5.55}
  longitude={-0.196}
  country="GH"
  onFeeCalculated={(f) => setShippingFee(f.amount)}
/>

<ChatWidget
  businessName="Akua's Bakery"
  greeting="Hi! How can we help?"
  starters={[
    { id: "delivery", label: "Where's my order?" },
    { id: "hours", label: "What are your hours?" },
  ]}
  position="bottom-right"
/>