@salifbiaye/create-boutique 0.1.1

package/templates/storefront/src/modules/skeletons/templates/skeleton-cart-page/index.tsx

@@ -0,0 +1,65 @@
+import { Table } from "@medusajs/ui"
+
+import repeat from "@lib/util/repeat"
+import SkeletonCartItem from "@modules/skeletons/components/skeleton-cart-item"
+import SkeletonCodeForm from "@modules/skeletons/components/skeleton-code-form"
+import SkeletonOrderSummary from "@modules/skeletons/components/skeleton-order-summary"
+
+const SkeletonCartPage = () => {
+  return (
+    <div className="py-12">
+      <div className="content-container">
+        <div className="grid grid-cols-1 small:grid-cols-[1fr_360px] gap-x-40">
+          <div className="flex flex-col bg-white p-6 gap-y-6">
+            <div className="bg-white flex items-start justify-between">
+              <div className="flex flex-col gap-y-2">
+                <div className="w-60 h-8 bg-gray-200 animate-pulse" />
+                <div className="w-48 h-6 bg-gray-200 animate-pulse" />
+              </div>
+              <div>
+                <div className="w-14 h-8 bg-gray-200 animate-pulse" />
+              </div>
+            </div>
+            <div>
+              <div className="pb-3 flex items-center">
+                <div className="w-20 h-12 bg-gray-200 animate-pulse" />
+              </div>
+              <Table>
+                <Table.Header className="border-t-0">
+                  <Table.Row>
+                    <Table.HeaderCell className="!pl-0">
+                      <div className="w-10 h-6 bg-gray-200 animate-pulse" />
+                    </Table.HeaderCell>
+                    <Table.HeaderCell></Table.HeaderCell>
+                    <Table.HeaderCell>
+                      <div className="w-16 h-6 bg-gray-200 animate-pulse" />
+                    </Table.HeaderCell>
+                    <Table.HeaderCell>
+                      <div className="w-12 h-6 bg-gray-200 animate-pulse" />
+                    </Table.HeaderCell>
+                    <Table.HeaderCell className="!pr-0">
+                      <div className="flex justify-end">
+                        <div className="w-12 h-6 bg-gray-200 animate-pulse" />
+                      </div>
+                    </Table.HeaderCell>
+                  </Table.Row>
+                </Table.Header>
+                <Table.Body>
+                  {repeat(4).map((index) => (
+                    <SkeletonCartItem key={index} />
+                  ))}
+                </Table.Body>
+              </Table>
+            </div>
+          </div>
+          <div className="flex flex-col gap-y-8">
+            <SkeletonOrderSummary />
+            <SkeletonCodeForm />
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default SkeletonCartPage

package/templates/storefront/src/modules/skeletons/templates/skeleton-order-confirmed/index.tsx

@@ -0,0 +1,21 @@
+import SkeletonOrderConfirmedHeader from "@modules/skeletons/components/skeleton-order-confirmed-header"
+import SkeletonOrderInformation from "@modules/skeletons/components/skeleton-order-information"
+import SkeletonOrderItems from "@modules/skeletons/components/skeleton-order-items"
+
+const SkeletonOrderConfirmed = () => {
+  return (
+    <div className="bg-gray-50 py-6 min-h-[calc(100vh-64px)] animate-pulse">
+      <div className="content-container flex justify-center">
+        <div className="max-w-4xl h-full bg-white w-full p-10">
+          <SkeletonOrderConfirmedHeader />
+
+          <SkeletonOrderItems />
+
+          <SkeletonOrderInformation />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default SkeletonOrderConfirmed

package/templates/storefront/src/modules/skeletons/templates/skeleton-product-grid/index.tsx

@@ -0,0 +1,23 @@
+import repeat from "@lib/util/repeat"
+import SkeletonProductPreview from "@modules/skeletons/components/skeleton-product-preview"
+
+const SkeletonProductGrid = ({
+  numberOfProducts = 8,
+}: {
+  numberOfProducts?: number
+}) => {
+  return (
+    <ul
+      className="grid grid-cols-2 small:grid-cols-3 medium:grid-cols-4 gap-x-6 gap-y-8 flex-1"
+      data-testid="products-list-loader"
+    >
+      {repeat(numberOfProducts).map((index) => (
+        <li key={index}>
+          <SkeletonProductPreview />
+        </li>
+      ))}
+    </ul>
+  )
+}
+
+export default SkeletonProductGrid

package/templates/storefront/src/modules/store/components/pagination/index.tsx

@@ -0,0 +1,114 @@
+"use client"
+
+import { clx } from "@medusajs/ui"
+import { usePathname, useRouter, useSearchParams } from "next/navigation"
+
+export function Pagination({
+  page,
+  totalPages,
+  'data-testid': dataTestid
+}: {
+  page: number
+  totalPages: number
+  'data-testid'?: string
+}) {
+  const router = useRouter()
+  const pathname = usePathname()
+  const searchParams = useSearchParams()
+
+  // Helper function to generate an array of numbers within a range
+  const arrayRange = (start: number, stop: number) =>
+    Array.from({ length: stop - start + 1 }, (_, index) => start + index)
+
+  // Function to handle page changes
+  const handlePageChange = (newPage: number) => {
+    const params = new URLSearchParams(searchParams)
+    params.set("page", newPage.toString())
+    router.push(`${pathname}?${params.toString()}`)
+  }
+
+  // Function to render a page button
+  const renderPageButton = (
+    p: number,
+    label: string | number,
+    isCurrent: boolean
+  ) => (
+    <button
+      key={p}
+      className={clx("txt-xlarge-plus text-ui-fg-muted", {
+        "text-ui-fg-base hover:text-ui-fg-subtle": isCurrent,
+      })}
+      disabled={isCurrent}
+      onClick={() => handlePageChange(p)}
+    >
+      {label}
+    </button>
+  )
+
+  // Function to render ellipsis
+  const renderEllipsis = (key: string) => (
+    <span
+      key={key}
+      className="txt-xlarge-plus text-ui-fg-muted items-center cursor-default"
+    >
+      ...
+    </span>
+  )
+
+  // Function to render page buttons based on the current page and total pages
+  const renderPageButtons = () => {
+    const buttons = []
+
+    if (totalPages <= 7) {
+      // Show all pages
+      buttons.push(
+        ...arrayRange(1, totalPages).map((p) =>
+          renderPageButton(p, p, p === page)
+        )
+      )
+    } else {
+      // Handle different cases for displaying pages and ellipses
+      if (page <= 4) {
+        // Show 1, 2, 3, 4, 5, ..., lastpage
+        buttons.push(
+          ...arrayRange(1, 5).map((p) => renderPageButton(p, p, p === page))
+        )
+        buttons.push(renderEllipsis("ellipsis1"))
+        buttons.push(
+          renderPageButton(totalPages, totalPages, totalPages === page)
+        )
+      } else if (page >= totalPages - 3) {
+        // Show 1, ..., lastpage - 4, lastpage - 3, lastpage - 2, lastpage - 1, lastpage
+        buttons.push(renderPageButton(1, 1, 1 === page))
+        buttons.push(renderEllipsis("ellipsis2"))
+        buttons.push(
+          ...arrayRange(totalPages - 4, totalPages).map((p) =>
+            renderPageButton(p, p, p === page)
+          )
+        )
+      } else {
+        // Show 1, ..., page - 1, page, page + 1, ..., lastpage
+        buttons.push(renderPageButton(1, 1, 1 === page))
+        buttons.push(renderEllipsis("ellipsis3"))
+        buttons.push(
+          ...arrayRange(page - 1, page + 1).map((p) =>
+            renderPageButton(p, p, p === page)
+          )
+        )
+        buttons.push(renderEllipsis("ellipsis4"))
+        buttons.push(
+          renderPageButton(totalPages, totalPages, totalPages === page)
+        )
+      }
+    }
+
+    return buttons
+  }
+
+  // Render the component
+  return (
+    <div className="flex justify-center w-full mt-12">
+      <div className="flex gap-3 items-end" data-testid={dataTestid}>{renderPageButtons()}</div>
+    </div>
+  )
+}

package/templates/storefront/src/modules/store/components/refinement-list/index.tsx

@@ -0,0 +1,41 @@
+"use client"
+
+import { usePathname, useRouter, useSearchParams } from "next/navigation"
+import { useCallback } from "react"
+
+import SortProducts, { SortOptions } from "./sort-products"
+
+type RefinementListProps = {
+  sortBy: SortOptions
+  search?: boolean
+  'data-testid'?: string
+}
+
+const RefinementList = ({ sortBy, 'data-testid': dataTestId }: RefinementListProps) => {
+  const router = useRouter()
+  const pathname = usePathname()
+  const searchParams = useSearchParams()
+
+  const createQueryString = useCallback(
+    (name: string, value: string) => {
+      const params = new URLSearchParams(searchParams)
+      params.set(name, value)
+
+      return params.toString()
+    },
+    [searchParams]
+  )
+
+  const setQueryParams = (name: string, value: string) => {
+    const query = createQueryString(name, value)
+    router.push(`${pathname}?${query}`)
+  }
+
+  return (
+    <div className="flex small:flex-col gap-12 py-4 mb-8 small:px-0 pl-6 small:min-w-[250px] small:ml-[1.675rem]">
+      <SortProducts sortBy={sortBy} setQueryParams={setQueryParams} data-testid={dataTestId} />
+    </div>
+  )
+}
+
+export default RefinementList

package/templates/storefront/src/modules/store/components/refinement-list/sort-products/index.tsx

@@ -0,0 +1,48 @@
+"use client"
+
+import FilterRadioGroup from "@modules/common/components/filter-radio-group"
+
+export type SortOptions = "price_asc" | "price_desc" | "created_at"
+
+type SortProductsProps = {
+  sortBy: SortOptions
+  setQueryParams: (name: string, value: SortOptions) => void
+  "data-testid"?: string
+}
+
+const sortOptions = [
+  {
+    value: "created_at",
+    label: "store.latest",
+  },
+  {
+    value: "price_asc",
+    label: "store.priceAsc",
+  },
+  {
+    value: "price_desc",
+    label: "store.priceDesc",
+  },
+]
+
+const SortProducts = ({
+  "data-testid": dataTestId,
+  sortBy,
+  setQueryParams,
+}: SortProductsProps) => {
+  const handleChange = (value: SortOptions) => {
+    setQueryParams("sortBy", value)
+  }
+
+  return (
+    <FilterRadioGroup
+      title="store.sortBy"
+      items={sortOptions}
+      value={sortBy}
+      handleChange={handleChange}
+      data-testid={dataTestId}
+    />
+  )
+}
+
+export default SortProducts

package/templates/storefront/src/modules/store/templates/index.tsx

@@ -0,0 +1,42 @@
+import { Suspense } from "react"
+
+import { t } from "@lib/boutique/i18n"
+
+import SkeletonProductGrid from "@modules/skeletons/templates/skeleton-product-grid"
+import RefinementList from "@modules/store/components/refinement-list"
+import { SortOptions } from "@modules/store/components/refinement-list/sort-products"
+
+import PaginatedProducts from "./paginated-products"
+
+const StoreTemplate = ({
+  sortBy,
+  page,
+}: {
+  sortBy?: SortOptions
+  page?: string
+}) => {
+  const pageNumber = page ? parseInt(page) : 1
+  const sort = sortBy || "created_at"
+
+  return (
+    <div
+      className="flex flex-col small:flex-row small:items-start py-6 content-container"
+      data-testid="category-container"
+    >
+      <RefinementList sortBy={sort} />
+      <div className="w-full">
+        <div className="mb-8 text-2xl-semi">
+          <h1 className="ub-head" data-testid="store-page-title">{t("footer.all")}</h1>
+        </div>
+        <Suspense fallback={<SkeletonProductGrid />}>
+          <PaginatedProducts
+            sortBy={sort}
+            page={pageNumber}
+          />
+        </Suspense>
+      </div>
+    </div>
+  )
+}
+
+export default StoreTemplate

package/templates/storefront/src/modules/store/templates/paginated-products.tsx

@@ -0,0 +1,80 @@
+import { listProductsWithSort } from "@lib/data/products"
+import { getRegion } from "@lib/data/regions"
+import { ProductGrid } from "@modules/ub/product-card"
+import { Pagination } from "@modules/store/components/pagination"
+import { SortOptions } from "@modules/store/components/refinement-list/sort-products"
+
+const PRODUCT_LIMIT = 12
+
+type PaginatedProductsParams = {
+  limit: number
+  collection_id?: string[]
+  category_id?: string[]
+  id?: string[]
+  order?: string
+}
+
+export default async function PaginatedProducts({
+  sortBy,
+  page,
+  collectionId,
+  categoryId,
+  productsIds,
+}: {
+  sortBy?: SortOptions
+  page: number
+  collectionId?: string
+  categoryId?: string
+  productsIds?: string[]
+}) {
+  const queryParams: PaginatedProductsParams = {
+    limit: 12,
+  }
+
+  if (collectionId) {
+    queryParams["collection_id"] = [collectionId]
+  }
+
+  if (categoryId) {
+    queryParams["category_id"] = [categoryId]
+  }
+
+  if (productsIds) {
+    queryParams["id"] = productsIds
+  }
+
+  if (sortBy === "created_at") {
+    queryParams["order"] = "created_at"
+  }
+
+  const region = await getRegion()
+
+  if (!region) {
+    return null
+  }
+
+  let {
+    response: { products, count },
+  } = await listProductsWithSort({
+    page,
+    queryParams,
+    sortBy,
+  })
+
+  const totalPages = Math.ceil(count / PRODUCT_LIMIT)
+
+  return (
+    <>
+      <div data-testid="products-list">
+        <ProductGrid products={products} />
+      </div>
+      {totalPages > 1 && (
+        <Pagination
+          data-testid="product-pagination"
+          page={page}
+          totalPages={totalPages}
+        />
+      )}
+    </>
+  )
+}

package/templates/storefront/src/modules/ub/button.tsx

@@ -0,0 +1,41 @@
+import Link from "next/link"
+import { Icon } from "./icons"
+
+type Variant = "primary" | "dark" | "ghost"
+
+/** Bouton des maquettes : libellé + pastille-flèche (visibles selon le preset du thème). */
+export default function Button({
+  href,
+  children,
+  variant = "primary",
+  small,
+  full,
+  className = "",
+}: {
+  href: string
+  children: React.ReactNode
+  variant?: Variant
+  small?: boolean
+  full?: boolean
+  className?: string
+}) {
+  const cls = ["ub-btn", `ub-btn--${variant}`, small && "ub-btn--sm", full && "ub-btn--full", className]
+    .filter(Boolean)
+    .join(" ")
+
+  return (
+    <Link className={cls} href={href}>
+      <span>{children}</span>
+      {variant === "primary" && (
+        <>
+          <span className="ub-btn__icon">
+            <Icon name="arrowUpRight" />
+          </span>
+          <span className="ub-btn__arrow" style={small ? { width: 28, height: 28 } : undefined}>
+            <Icon name="arrowUpRight" />
+          </span>
+        </>
+      )}
+    </Link>
+  )
+}

package/templates/storefront/src/modules/ub/campaign-blocks.tsx

@@ -0,0 +1,197 @@
+import Link from "next/link"
+import { connection } from "next/server"
+import type { Campaign } from "@lib/boutique/campaign"
+import { t } from "@lib/boutique/i18n"
+import Button from "./button"
+import Countdown from "./countdown"
+import { Icon, type IconName } from "./icons"
+
+/** Titre avec le mot mis en couleur : `highlight` est retrouvé dans `title` (sinon ajouté à la fin), rendu en <em>. Jamais de HTML. */
+export function HighlightedTitle({ title, highlight }: { title: string; highlight?: string }) {
+  if (!highlight) return <>{title}</>
+
+  const i = title.indexOf(highlight)
+  if (i < 0) {
+    return (
+      <>
+        {title} <em>{highlight}</em>
+      </>
+    )
+  }
+  return (
+    <>
+      {title.slice(0, i)}
+      <em>{highlight}</em>
+      {title.slice(i + highlight.length)}
+    </>
+  )
+}
+
+async function CampaignCountdown({ endsAt }: { endsAt: string }) {
+  await connection()
+  return (
+    <Countdown
+      endsAt={endsAt}
+      serverNow={Date.now()}
+      labels={{
+        label: t("countdown.label"),
+        days: t("countdown.days"),
+        hours: t("countdown.hours"),
+        mins: t("countdown.mins"),
+        secs: t("countdown.secs"),
+      }}
+    />
+  )
+}
+
+export function Hero({ campaign }: { campaign: Campaign }) {
+  const { hero } = campaign
+  // Un nom de fichier (seed/images/…) n'est une image qu'une fois importé dans le stockage
+  // par le backend (étape 2) : seules les URL absolues sont affichées.
+  const image = hero.image && /^https?:\/\//.test(hero.image) ? hero.image : undefined
+  const trust: [IconName, string, string][] = [
+    ["truck", t("hero.trust.shipping"), t("hero.trust.shippingSub")],
+    ["lock", t("hero.trust.secure"), t("hero.trust.secureSub")],
+    ["returns", t("hero.trust.returns"), t("hero.trust.returnsSub")],
+  ]
+
+  return (
+    <section className="ub-hero">
+      <div className="ub-wrap ub-hero__in">
+        <div className="ub-hero__text">
+          {hero.eyebrow && (
+            <p className="ub-eyebrow">
+              <span className="ub-eyebrow__dot" />
+              <span>{hero.eyebrow}</span>
+            </p>
+          )}
+          <h1 className="ub-hero__title ub-head">
+            <HighlightedTitle title={hero.title} highlight={hero.highlight} />
+          </h1>
+          {hero.sub && <p className="ub-hero__sub">{hero.sub}</p>}
+          {/* Compte à rebours : selon le thème (CSS), sauf choix explicite dans l'admin */}
+          {campaign.showCountdown !== false && (
+            <div className={`ub-hero__cd${campaign.showCountdown ? " ub-cd-on" : ""}`}>
+              <CampaignCountdown endsAt={campaign.endsAt} />
+            </div>
+          )}
+          <div className="ub-hero__actions">
+            <Button href="/store">{hero.cta}</Button>
+            {hero.cta2 && (
+              <Button href="/store" variant="ghost">
+                {hero.cta2}
+              </Button>
+            )}
+          </div>
+          <ul className="ub-hero__trust">
+            {trust.map(([icon, title, sub]) => (
+              <li key={icon}>
+                <Icon name={icon} />
+                <span>
+                  {title}
+                  <small>{sub}</small>
+                </span>
+              </li>
+            ))}
+          </ul>
+        </div>
+        <div className="ub-hero__media">
+          <div className="ub-hero__blob" />
+          {image ? (
+            // eslint-disable-next-line @next/next/no-img-element
+            <img className="ub-hero__photo" src={image} alt={t("hero.photo")} />
+          ) : (
+            <div className="ub-hero__photo ub-ph" role="img" aria-label={t("hero.photo")} />
+          )}
+          {hero.bubble.some(Boolean) && (
+            <div className="ub-bubble">
+              <span>{hero.bubble[0]}</span>
+              <b>{hero.bubble[1]}</b>
+              <span>{hero.bubble[2]}</span>
+            </div>
+          )}
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export function TrustBar({ freeShipping }: { freeShipping?: string }) {
+  const items: [IconName, string, string][] = [
+    ["truck", t("trust.shipping"), freeShipping ? t("trust.shippingSub", { freeShipping }) : t("trust.shippingSubAll")],
+    ["shield", t("trust.secure"), t("trust.secureSub")],
+    ["returns", t("trust.returns"), t("trust.returnsSub")],
+    ["headset", t("trust.support"), t("trust.supportSub")],
+  ]
+
+  return (
+    <section className="ub-section" style={{ paddingBottom: 0 }}>
+      <div className="ub-wrap">
+        <ul className="ub-trust">
+          {items.map(([icon, title, sub]) => (
+            <li key={icon}>
+              <span className="ub-trust__ic">
+                <Icon name={icon} />
+              </span>
+              <span>
+                <b>{title}</b>
+                <small>{sub}</small>
+              </span>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </section>
+  )
+}
+
+export function PromoBanner({ campaign }: { campaign: Campaign }) {
+  const { promo } = campaign
+  const promoImage = promo.image && /^https?:\/\//.test(promo.image) ? promo.image : undefined
+
+  return (
+    <section className="ub-section" style={{ paddingTop: 0 }}>
+      <div className="ub-wrap">
+        <div className="ub-promo">
+          {promo.seal && <div className="ub-promo__seal">{promo.seal}</div>}
+          <div className="ub-promo__text">
+            <p className="ub-eyebrow">
+              <span>{promo.eyebrow}</span>
+            </p>
+            <div>
+              <h2 className="ub-head">{promo.title}</h2>
+              <p>{promo.text}</p>
+            </div>
+            {campaign.showCountdown !== false && (
+              <div className={`ub-promo__cd${campaign.showCountdown ? " ub-cd-on" : ""}`}>
+                <CampaignCountdown endsAt={campaign.endsAt} />
+              </div>
+            )}
+            <Button href="/store">{promo.cta}</Button>
+          </div>
+          {promoImage ? (
+            <div className="ub-promo__media" style={{ display: "block", overflow: "hidden" }}>
+              {/* eslint-disable-next-line @next/next/no-img-element */}
+              <img src={promoImage} alt="" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
+            </div>
+          ) : (
+            <div className="ub-promo__media ub-ph" />
+          )}
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export function SectionHead({ title, href }: { title: string; href?: string }) {
+  return (
+    <div className="ub-sec-head">
+      <h2 className="ub-head">{title}</h2>
+      {href && (
+        <Link className="ub-more" href={href}>
+          {t("section.viewAll")} <Icon name="arrowRight" />
+        </Link>
+      )}
+    </div>
+  )
+}