@cartbase/storefront 0.21.0 → 0.22.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cartbase/storefront",
-  "version": "0.21.0",
+  "version": "0.22.0",
   "description": "Storefront SDK + UI component library for Cartbase stores: typed API client, checkout orchestration, cart drawer, product/catalog components, tracking. Source-shipped TypeScript — add it to transpilePackages.",
   "license": "MIT",
   "repository": {
@@ -102,6 +102,7 @@
     "./tracking/use-engagement-time": "./src/tracking/use-engagement-time.ts",
     "./tracking/page-views": "./src/tracking/page-views.tsx",
     "./tracking/live-heartbeat": "./src/tracking/live-heartbeat.tsx",
+    "./tracking/once": "./src/tracking/once.ts",
     "./checkout": "./src/checkout/index.ts",
     "./checkout/context": "./src/checkout/context.tsx",
     "./checkout/labels": "./src/checkout/labels.ts",
@@ -111,17 +112,29 @@
     "./checkout/payment-button": "./src/checkout/payment-button.tsx",
     "./checkout/econt-office-selector": "./src/checkout/econt-office-selector.tsx",
     "./checkout/boxnow-locker-selector": "./src/checkout/boxnow-locker-selector.tsx",
+    "./checkout/pigeon-office-selector": "./src/checkout/pigeon-office-selector.tsx",
+    "./checkout/pickup-point-selector": "./src/checkout/pickup-point-selector.tsx",
+    "./checkout/pickup-option": "./src/checkout/pickup-option.ts",
+    "./checkout/carrier-marks": "./src/checkout/carrier-marks.ts",
+    "./checkout/fulfillment-option": "./src/checkout/fulfillment-option.ts",
     "./checkout/address-select": "./src/checkout/address-select.tsx",
     "./checkout/company-details": "./src/checkout/company-details.tsx",
     "./checkout/discount-section": "./src/checkout/discount-section.tsx",
     "./checkout/gift-card-section": "./src/checkout/gift-card-section.tsx",
     "./checkout/line-item-card": "./src/checkout/line-item-card.tsx",
     "./checkout/order-summary": "./src/checkout/order-summary.tsx",
+    "./checkout/mobile-checkout-top-bar": "./src/checkout/mobile-checkout-top-bar.tsx",
+    "./checkout/mobile-checkout-bottom-bar": "./src/checkout/mobile-checkout-bottom-bar.tsx",
+    "./checkout/mobile-order-summary-body": "./src/checkout/mobile-order-summary-body.tsx",
+    "./checkout/summary-math": "./src/checkout/summary-math.ts",
+    "./checkout/card-offer": "./src/checkout/card-offer.ts",
     "./checkout/address-form": "./src/checkout/address-form.tsx",
     "./checkout/shipping-method-list": "./src/checkout/shipping-method-list.tsx",
     "./checkout/payment-method-list": "./src/checkout/payment-method-list.tsx",
     "./checkout/checkout-client": "./src/checkout/checkout-client.tsx",
+    "./checkout/checkout-error-screen": "./src/checkout/checkout-error-screen.tsx",
     "./checkout/use-checkout-orchestration": "./src/checkout/use-checkout-orchestration.ts",
+    "./checkout/use-checkout-funnel": "./src/checkout/use-checkout-funnel.ts",
     "./checkout/payment-error-copy": "./src/checkout/payment-error-copy.ts",
     "./checkout/address-error-copy": "./src/checkout/address-error-copy.ts",
     "./checkout/promotion-error-copy": "./src/checkout/promotion-error-copy.ts",

package/src/api/checkout.ts

@@ -142,6 +142,21 @@ export interface StorePaymentProcessorEntry {
   id: string
   is_enabled: boolean
   created_at?: string
+  /**
+   * How the BROWSER reaches this processor (2026-09-18). Stripe entries
+   * carry the publishable key to load Stripe.js with; under Connect it is
+   * CARTBASE's key, not the merchant's, and `account_id` names the
+   * merchant's linked account. `CheckoutClient` reads both off this entry,
+   * so a merchant who connected Stripe in the admin has already told their
+   * storefront everything: nothing is pasted into a storefront env.
+   *
+   * Public by construction — a publishable key is made to ship to browsers,
+   * and the account id travels on every Elements request. Secret keys and
+   * webhook secrets are never on this wire.
+   */
+  publishable_key?: string
+  /** The merchant's linked Stripe account (`acct_…`), Connect stores only. */
+  account_id?: string
 }
 
 /** A merchant PAYMENT METHOD entry (pp_* kill, 20260811250000): methods

package/src/api/http.ts

@@ -98,6 +98,15 @@ export class StorefrontClient {
     }
   }
 
+  /**
+   * The platform this store talks to, without a trailing slash. Read by the
+   * parts that point at something the platform serves rather than answers,
+   * such as the carrier marks on the checkout's shipping rows.
+   */
+  get origin(): string {
+    return this.config.baseUrl.replace(/\/+$/, "")
+  }
+
   /** The low-level typed request. Domain modules call this — apps rarely should. */
   async request<T>(path: string, opts: RequestOptions = {}): Promise<T> {
     const url = new URL(

package/src/api/integrations.ts

@@ -116,3 +116,124 @@ export async function listBoxNowLockers(
 ): Promise<BoxNowLockersResponse> {
   return client.get("/api/store/integrations/boxnow/lockers")
 }
+
+/** One Pigeon Express pickup point, the allowlisted fields the door serves. */
+export interface PigeonOffice {
+  /**
+   * Pigeon's own catalogue id, which the waybill needs verbatim. It arrives
+   * as a NUMBER on the wire (the carrier's catalogue is numeric), so a
+   * caller that stores it stringifies at the edge and never assumes.
+   */
+  id: string | number
+  code?: string | null
+  name: string
+  /** "office" or "locker": one catalogue, told apart by this. */
+  type: string
+  city?: string | null
+  address?: string | null
+  postal_code?: string | null
+  phone?: string | null
+  latitude?: number | null
+  longitude?: number | null
+  max_weight?: number | null
+  max_dimensions?: string | null
+}
+
+export interface PigeonOfficesResponse {
+  offices: PigeonOffice[]
+  /** Present only when the carrier is not connected or refused. */
+  message?: string
+}
+
+/**
+ * GET /api/store/integrations/pigeon/offices — the Pigeon Express pickup
+ * points for the checkout picker. Pigeon's catalogue is credentialed, so
+ * unlike Econt the browser can never ask the carrier itself: the platform
+ * holds the carrier's answer per store and query for ten minutes and serves
+ * allowlisted fields only.
+ *
+ * Auth: anon (the store's key).
+ * Errors: 503 when Pigeon is not connected for the store, 502 when Pigeon
+ * itself fails; both carry an empty `offices` list.
+ */
+export async function listPigeonOffices(
+  client: StorefrontClient,
+  opts: { q?: string; type?: "office" | "locker" } = {}
+): Promise<PigeonOfficesResponse> {
+  const query = new URLSearchParams()
+  if (opts.q) query.set("q", opts.q)
+  if (opts.type) query.set("type", opts.type)
+  const suffix = query.size > 0 ? `?${query.toString()}` : ""
+  return client.get(`/api/store/integrations/pigeon/offices${suffix}`)
+}
+
+// ---------------------------------------------------------------------------
+// Pickup points — ONE door, every carrier (2026-09-18)
+// ---------------------------------------------------------------------------
+
+/** Where a parcel can be collected, in the one shape every carrier answers in. */
+export interface StorePickupPoint {
+  /** `econt`, `speedy`, `boxnow`, `pigeon`. */
+  provider: string
+  mode: "office" | "locker"
+  /** THEIR id, exactly as the order will carry it. */
+  id: string
+  name: string
+  city: string
+  address: string
+  postal_code: string
+  phone: string
+  /** The carrier's own coordinates, for "nearest to me". Null when absent. */
+  latitude: number | null
+  longitude: number | null
+}
+
+/**
+ * What the chosen point is called on the cart and on the order, for this
+ * carrier and this mode. Travels with the answer so a storefront writes the
+ * point under the names THIS carrier's booking reads without carrying a copy
+ * of that map: the names are declared once on the platform, and the waybill
+ * compositions read the same declaration.
+ */
+export interface PickupPointKeys {
+  point: string
+  name: string | null
+  city: string | null
+  address: string | null
+  phone: string | null
+  postal: string | null
+}
+
+export interface PickupPointsResponse {
+  points: StorePickupPoint[]
+  keys: PickupPointKeys
+}
+
+/**
+ * GET /api/store/integrations/:provider/pickup-points — every carrier's
+ * offices and lockers, one shape, one ranking, the store twin of the admin's
+ * own picker door.
+ *
+ * Search is the CARRIER'S where the carrier searches (Speedy by office name
+ * and by town, Pigeon by name compensated with town and postcode) and the
+ * platform's where it does not (Econt and BoxNow publish whole catalogues,
+ * held per store for ten minutes and ranked so a town's own offices beat an
+ * office on a street that shares the town's name). A storefront sends the
+ * query and gets the right answer either way.
+ *
+ * Auth: anon (the store's key).
+ * Errors: 400 when `mode` is missing or the carrier does not serve it, 404
+ * for an unknown carrier, 503 when the store has not connected it.
+ */
+export async function listPickupPoints(
+  client: StorefrontClient,
+  provider: string,
+  opts: { mode: "office" | "locker"; q?: string; limit?: number }
+): Promise<PickupPointsResponse> {
+  const query = new URLSearchParams({ mode: opts.mode })
+  if (opts.q) query.set("q", opts.q)
+  if (opts.limit) query.set("limit", String(opts.limit))
+  return client.get(
+    `/api/store/integrations/${encodeURIComponent(provider)}/pickup-points?${query.toString()}`
+  )
+}

package/src/checkout/card-offer.ts

@@ -0,0 +1,68 @@
+import { isStripeLike } from "../lib/payment-constants"
+
+/**
+ * Is there a card at this checkout, and how does the browser reach it?
+ *
+ * One row answers both. The `pp_stripe` entry of
+ * `GET /api/store/payment-providers` carries its own `publishable_key` and,
+ * for a store that linked Stripe by Connect, the merchant's `account_id`.
+ * Reading the two apart is what broke: a store could offer a card it had no
+ * way to charge, and a shopper met a card form that never loaded.
+ *
+ * A card with no key is NOT an offer. Stripe.js cannot load without a
+ * publishable key, so the tab would sit on a loading skeleton for ever and
+ * the checkout would read as broken. It is a misconfiguration, never the
+ * shopper's problem, so the caller hides the tab and tells the merchant's
+ * checkout error log instead.
+ *
+ * `env` is the storefront's own `NEXT_PUBLIC_STRIPE_KEY` and
+ * `NEXT_PUBLIC_STRIPE_ACCOUNT_ID`, the fallback for a storefront running its
+ * own Stripe outside the platform. It is taken as a PAIR, never mixed with
+ * the store's: a platform key with no account charges the platform, and a
+ * merchant account under the wrong key is refused by Stripe.
+ */
+
+/** What a processor entry has to carry for the browser to use it. */
+export type CardEntryLike = {
+  id: string
+  publishable_key?: string
+  account_id?: string
+}
+
+export type CardOffer = {
+  /** The entry, whether or not it can be mounted. */
+  entry: CardEntryLike | null
+  /** True when the browser has a publishable key for it. */
+  mountable: boolean
+  /** The key to load Stripe.js with, the store's before the storefront's. */
+  publishableKey: string | undefined
+  /** The merchant's linked account, Connect stores only. */
+  accountId: string | undefined
+}
+
+const NO_CARD: CardOffer = {
+  entry: null,
+  mountable: false,
+  publishableKey: undefined,
+  accountId: undefined,
+}
+
+export function resolveCardOffer(
+  methods: ReadonlyArray<Record<string, unknown>> | null | undefined,
+  env?: { key?: string; accountId?: string }
+): CardOffer {
+  const entry = methods?.find(
+    (m) => "id" in m && isStripeLike(m.id as string)
+  ) as CardEntryLike | undefined
+  if (!entry) return NO_CARD
+  // The store's answer wins, as one pair or not at all.
+  const fromStore = !!entry.publishable_key
+  const publishableKey = fromStore ? entry.publishable_key : env?.key
+  const accountId = fromStore ? entry.account_id : env?.accountId
+  return {
+    entry,
+    mountable: !!publishableKey,
+    publishableKey,
+    accountId,
+  }
+}

package/src/checkout/carrier-marks.ts

@@ -0,0 +1,53 @@
+/**
+ * The carrier's own mark beside its name on a checkout shipping row.
+ *
+ * A shopper picks a courier by recognising it, and until 2026-09-18 a store
+ * got names only unless it hunted down logo files and passed a map of its
+ * own (store-package card). The marks are the platform's: the same files
+ * the admin's integrations screens wear, served from the platform the store
+ * already talks to, so a carrier we add tomorrow arrives with its mark and
+ * no store copies an image anywhere.
+ *
+ * Keyed by the carrier's fulfillment option id, which the platform's
+ * registry owns and a shipping option carries in `data.id`. Both modes of a
+ * carrier wear the same mark: it names the courier, not the destination.
+ */
+
+const MARK: Record<string, { carrier: string; alt: string }> = {
+  "econt-address": { carrier: "econt", alt: "Econt" },
+  "econt-office": { carrier: "econt", alt: "Econt" },
+  "speedy-address": { carrier: "speedy", alt: "Speedy" },
+  "speedy-office": { carrier: "speedy", alt: "Speedy" },
+  "boxnow-locker": { carrier: "boxnow", alt: "BOX NOW" },
+  "pigeon-address": { carrier: "pigeon", alt: "Pigeon Express" },
+  "pigeon-office": { carrier: "pigeon", alt: "Pigeon Express" },
+  "pigeon-locker": { carrier: "pigeon", alt: "Pigeon Express" },
+}
+
+/**
+ * The default `logoByFulfillmentOptionId` map for a checkout's shipping
+ * list. A store that passes its own map keeps it: this is the floor, not a
+ * ceiling.
+ *
+ * `origin` is the SDK client's own (`client.origin`), which in a storefront
+ * is the shop's own address, because the store API ships no CORS headers and
+ * every storefront reaches it through a same-origin `/api/store/*` rewrite.
+ * So the mark is asked for under that same path, which is the one address a
+ * storefront can always reach; the platform answers it with the file it
+ * already serves. Pointing at the platform's own `/integrations/…` instead
+ * is what made every mark 404, since that path is not proxied and the shop's
+ * own domain has no such file (found on the workbench before release).
+ */
+export function carrierMarks(
+  origin: string
+): Record<string, { src: string; alt: string }> {
+  const base = origin.replace(/\/+$/, "")
+  const marks: Record<string, { src: string; alt: string }> = {}
+  for (const [optionId, mark] of Object.entries(MARK)) {
+    marks[optionId] = {
+      src: `${base}/api/store/integrations/marks/${mark.carrier}`,
+      alt: mark.alt,
+    }
+  }
+  return marks
+}

package/src/checkout/checkout-client.tsx

@@ -7,6 +7,10 @@ import type { Cart } from "../api/carts"
 import type { StoreShippingOption } from "../api/checkout"
 import type { StoreCustomer } from "../api/customers"
 import { CheckoutAddressForm } from "./address-form"
+import { carrierMarks } from "./carrier-marks"
+import { DiscountSection } from "./discount-section"
+import { MobileCheckoutBottomBar } from "./mobile-checkout-bottom-bar"
+import { MobileCheckoutTopBar } from "./mobile-checkout-top-bar"
 import { OrderSummary } from "./order-summary"
 import { CheckoutPaymentMethodList } from "./payment-method-list"
 import { CheckoutShippingMethodList } from "./shipping-method-list"
@@ -41,9 +45,13 @@ import {
  *    cart returned by promo/gift-card/quantity calls is handed up so the
  *    host updates its cart state (`router.refresh()` in an RSC app) AND
  *    the hook's `syncPaymentAmount` re-aligns any pending session.
- *  - The mobile top/bottom summary bars of the @1click layout are not in
- *    this batch's scope; the desktop-first layout stands alone and
- *    stores compose their own mobile bars from the hook + OrderSummary.
+ *
+ * On a phone the summary column would be a wall of items above the form, so
+ * it is replaced by two bars carrying the same content behind one tap: the
+ * total at the top of the page, and, above Place order, a card with the
+ * first item and the total. Both open onto `MobileOrderSummaryBody`, all
+ * three surfaces take their numbers from `checkoutTotals`, and the promo
+ * field is exposed above the bottom bar rather than left two taps deep.
  */
 
 type CheckoutClientProps = {
@@ -147,7 +155,23 @@ export function CheckoutClient({
       amount={o.optimisticTotalCents}
       appearance={appearance}
       fonts={fonts}
+      // The store's own Stripe, off the card entry the listing already
+      // carried here. Nothing for a storefront to configure: connecting
+      // Stripe in the admin is the whole setup.
+      publishableKey={o.cardPublishableKey}
+      stripeAccountId={o.cardStripeAccountId}
     >
+      {/* The phone's first sight of the order: the total, one tap from what
+          makes it up. Above the form, as the desktop summary is beside it. */}
+      <MobileCheckoutTopBar
+        client={client}
+        cart={o.summaryCart}
+        optimisticShippingCost={o.optimisticShippingCost}
+        optimisticMethodFee={o.optimisticMethodFee}
+        showGiftCards={showGiftCards}
+        onCartChange={handleCartChange}
+      />
+
       <div className="max-w-[1140px] mx-auto px-5 py-8 sm:py-12">
         <div className="flex flex-col sm:flex-row sm:justify-center gap-8 sm:gap-12">
           {/* ═══ LEFT: FORM ════════════════════════════════════════════ */}
@@ -174,20 +198,27 @@ export function CheckoutClient({
               onSelect={o.handleSelectShipping}
               addressReady={o.addressReady}
               currencyCode={cart.currency_code}
-              econt={{
-                selectedOffice: o.selectedEcontOffice,
-                onSelectOffice: o.handleSelectEcontOffice,
-                userCity: o.formData["shipping_address.city"] ?? "",
-                userAddress: o.formData["shipping_address.address_1"] ?? "",
-              }}
-              boxnow={{
+              // ONE picker, every carrier (2026-09-18). This used to mount
+              // three: an Econt one that called the carrier from the browser,
+              // a BoxNow one and a Pigeon one that each called a store route
+              // written for them alone, and nothing for Speedy, whose
+              // catalogue is credentialed and can never be reached from a
+              // browser at all. So a store could offer delivery to a Speedy
+              // office and give the shopper no way to name one. All four are
+              // the same question, answered by one platform door. The three
+              // components stay exported for a store that mounts its own.
+              pickup={{
                 client,
-                selectedLocker: o.selectedBoxnowLocker,
-                onSelectLocker: o.handleSelectBoxnowLocker,
+                selectedPoint: o.selectedPickupPoint,
+                onSelectPoint: o.handleSelectPickupPoint,
                 userCity: o.formData["shipping_address.city"] ?? "",
                 userAddress: o.formData["shipping_address.address_1"] ?? "",
               }}
-              logoByFulfillmentOptionId={logoByFulfillmentOptionId}
+              // Every carrier wears its own mark without the store lifting a
+              // finger; a store that passes its own map keeps it.
+              logoByFulfillmentOptionId={
+                logoByFulfillmentOptionId ?? carrierMarks(client.origin)
+              }
             />
 
             <CheckoutPaymentMethodList
@@ -197,6 +228,7 @@ export function CheckoutClient({
               paymentTab={o.paymentTab}
               onPaymentTab={o.handlePaymentTab}
               deliveryReady={o.deliveryReady}
+              nothingToPay={o.nothingToPay}
               paymentError={o.paymentError}
               onPaymentElementChange={o.handlePaymentElementChange}
               performBuyClick={o.performBuyClick}
@@ -207,6 +239,32 @@ export function CheckoutClient({
               total={o.optimisticTotal}
               logError={logError}
               extraTabs={extraPaymentTabs}
+              beforePaymentButton={
+                // Phone only: the desktop summary already carries both, and
+                // an empty slot would still take its margin above the button.
+                <div className="sm:hidden space-y-3">
+                  {/* The code field itself, open: inside a closed bar it
+                      would be the second tap and a shopper holding a code
+                      would never reach it. */}
+                  <DiscountSection
+                    client={client}
+                    cart={o.summaryCart}
+                    alwaysOpen
+                    onCartChange={handleCartChange}
+                  />
+                  {/* What they are paying for, last thing before they pay.
+                      Its own promo door is off: the field above is the one. */}
+                  <MobileCheckoutBottomBar
+                    client={client}
+                    cart={o.summaryCart}
+                    optimisticShippingCost={o.optimisticShippingCost}
+                    optimisticMethodFee={o.optimisticMethodFee}
+                    showGiftCards={showGiftCards}
+                    hideDiscount
+                    onCartChange={handleCartChange}
+                  />
+                </div>
+              }
             />
           </div>
 

package/src/checkout/checkout-error-screen.tsx

@@ -0,0 +1,113 @@
+"use client"
+
+import { useEffect, useRef } from "react"
+
+import { reportCheckoutError } from "../api/checkout"
+import type { StorefrontClient } from "../api/http"
+import { useCheckoutLabels } from "./context"
+
+/**
+ * CheckoutErrorScreen — what a shopper sees when the checkout PAGE fails,
+ * as opposed to a call inside it.
+ *
+ * Next renders a route's `error.tsx` in place of the page when anything in
+ * it throws, a server component included, through the RSC bridge. Without
+ * one, a checkout that throws shows the framework's own error page: a
+ * shopper at the moment of paying is handed a stack trace or a blank
+ * screen, their cart looks lost, and nobody is told. The kit's own
+ * failures already reach the merchant's checkout error log; this closes
+ * the one class that never did, because the component that reports them
+ * was the component that died.
+ *
+ * Mount it as the route's boundary:
+ *
+ *   // src/app/checkout/error.tsx
+ *   "use client"
+ *   import { CheckoutErrorScreen } from "@cartbase/storefront/checkout"
+ *   import { storeClient } from "@/lib/store"
+ *
+ *   export default function CheckoutError(props) {
+ *     return <CheckoutErrorScreen {...props} client={storeClient} />
+ *   }
+ *
+ * The copy comes from the label pack when a `CheckoutProvider` stands
+ * above the boundary (a provider in the route's LAYOUT does; one inside
+ * the page does not, because the page is what Next replaced). Pass the
+ * three strings for a store whose provider sits inside the page.
+ */
+
+export type CheckoutErrorScreenProps = {
+  /** Next's error boundary argument. */
+  error: Error & { digest?: string }
+  /** Next's retry: re-renders the route's tree. */
+  reset: () => void
+  /**
+   * The SDK transport. With it the failure reaches the merchant's checkout
+   * error log; without it the screen still renders, and nobody hears.
+   */
+  client?: StorefrontClient
+  /** The cart the shopper was checking out, when the store knows it. */
+  cartId?: string
+  /** Copy override, for a boundary that stands outside the provider. */
+  title?: string
+  body?: string
+  retryLabel?: string
+}
+
+export function CheckoutErrorScreen({
+  error,
+  reset,
+  client,
+  cartId,
+  title,
+  body,
+  retryLabel,
+}: CheckoutErrorScreenProps) {
+  const labels = useCheckoutLabels()
+  // React runs effects twice in development's strict mode, and a retry
+  // that fails again remounts this component: the ref keeps one failure to
+  // one report instead of filling the merchant's log with copies.
+  const reportedRef = useRef<string | null>(null)
+
+  useEffect(() => {
+    if (!client) return
+    const key = error.digest ?? error.message ?? "unknown"
+    if (reportedRef.current === key) return
+    reportedRef.current = key
+
+    void reportCheckoutError(client, {
+      error_type: "error_boundary_checkout",
+      message: error.message || String(error),
+      ...(cartId ? { cart_id: cartId } : {}),
+      context: {
+        digest: error.digest ?? null,
+        err_name: error.name ?? null,
+        // Enough of the stack to find the component, short enough to stay
+        // inside the sink's limit.
+        err_stack: error.stack?.slice(0, 1500) ?? null,
+        path:
+          typeof window !== "undefined" ? window.location.pathname : null,
+      },
+    })
+  }, [client, cartId, error])
+
+  return (
+    <div className="min-h-[60vh] flex items-center justify-center px-5 py-16">
+      <div className="max-w-md text-center">
+        <h1 className="text-xl font-semibold text-foreground mb-2">
+          {title ?? labels.errorTitle}
+        </h1>
+        <p className="text-sm text-muted-foreground mb-5">
+          {body ?? labels.errorBody}
+        </p>
+        <button
+          type="button"
+          onClick={reset}
+          className="inline-flex items-center justify-center h-11 px-5 rounded-xl bg-foreground text-card text-sm font-semibold transition-colors hover:bg-foreground/90"
+        >
+          {retryLabel ?? labels.errorRetry}
+        </button>
+      </div>
+    </div>
+  )
+}