@salifbiaye/create-boutique 0.1.1

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

@@ -0,0 +1,118 @@
+import { Suspense } from "react"
+import { notFound } from "next/navigation"
+import { HttpTypes } from "@medusajs/types"
+
+import { t } from "@lib/boutique/i18n"
+import { listProducts } from "@lib/data/products"
+import { SectionHead } from "@modules/ub/campaign-blocks"
+import { Icon, type IconName } from "@modules/ub/icons"
+import BuyBox, { type BuyBoxLabels } from "@modules/ub/pdp/buy-box"
+import Gallery from "@modules/ub/pdp/gallery"
+import { ProductGrid } from "@modules/ub/product-card"
+
+type ProductTemplateProps = {
+  product: HttpTypes.StoreProduct
+  region: HttpTypes.StoreRegion
+  images: HttpTypes.StoreProductImage[]
+}
+
+function labels(): BuyBoxLabels {
+  return {
+    addToCart: t("pdp.addToCart"),
+    buyNow: t("pdp.buyNow"),
+    adding: t("pdp.adding"),
+    selectVariant: t("pdp.selectVariant"),
+    outOfStock: t("pdp.outOfStock"),
+    save: t("pdp.save"),
+  }
+}
+
+/** Prix et stock à jour (non mis en cache avec la page). */
+async function LiveBuyBox({ product, region }: { product: HttpTypes.StoreProduct; region: HttpTypes.StoreRegion }) {
+  const live = await listProducts({ queryParams: { id: [product.id] }, regionId: region.id }).then(
+    ({ response }) => response.products[0]
+  )
+  if (!live) return null
+  return <BuyBox product={live} labels={labels()} />
+}
+
+async function Related({ product }: { product: HttpTypes.StoreProduct }) {
+  const queryParams: HttpTypes.StoreProductListParams = { limit: 5, is_giftcard: false }
+  if (product.collection_id) queryParams.collection_id = [product.collection_id]
+
+  const products = await listProducts({ queryParams }).then(({ response }) =>
+    response.products.filter((p) => p.id !== product.id).slice(0, 4)
+  )
+  if (!products.length) return null
+
+  return (
+    <section className="ub-section" data-testid="related-products-container">
+      <div className="ub-wrap">
+        <SectionHead title={t("section.related")} href="/store" />
+        <ProductGrid products={products} />
+      </div>
+    </section>
+  )
+}
+
+const TRUST: [IconName, string][] = [
+  ["lock", "pdp.trust.secure"],
+  ["truck", "pdp.trust.fast"],
+  ["returns", "pdp.trust.money"],
+  ["shield", "pdp.trust.warranty"],
+]
+
+export default function ProductTemplate({ product, region, images }: ProductTemplateProps) {
+  if (!product?.id) notFound()
+
+  const gallery = images.filter((i) => !!i.url).map((i) => ({ id: i.id, url: i.url }))
+  if (!gallery.length && product.thumbnail) gallery.push({ id: "thumbnail", url: product.thumbnail })
+
+  return (
+    <>
+      <section className="ub-section" data-testid="product-container">
+        <div className="ub-wrap">
+          <div className="ub-pdp">
+            <Gallery images={gallery} alt={product.title ?? ""} />
+            <div className="ub-pdp__info">
+              <h1 className="ub-pdp__title ub-head" data-testid="product-title">
+                {product.title}
+              </h1>
+              {product.subtitle && <p className="ub-pdp__subtitle">{product.subtitle}</p>}
+              <Suspense fallback={<BuyBox product={product} labels={labels()} disabled />}>
+                <LiveBuyBox product={product} region={region} />
+              </Suspense>
+              {product.description && <p className="ub-pdp__desc">{product.description}</p>}
+              <ul className="ub-pdp__trust">
+                {TRUST.map(([icon, key]) => (
+                  <li key={key}>
+                    <Icon name={icon} />
+                    {t(key)}
+                  </li>
+                ))}
+              </ul>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <section className="ub-section" style={{ paddingTop: 0 }}>
+        <div className="ub-wrap">
+          <SectionHead title={t("pdp.faq")} />
+          <div className="ub-faq">
+            {[1, 2, 3].map((n) => (
+              <details key={n} open={n === 1}>
+                <summary>{t(`pdp.faq.q${n}`)}</summary>
+                <p>{t(`pdp.faq.a${n}`)}</p>
+              </details>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      <Suspense fallback={null}>
+        <Related product={product} />
+      </Suspense>
+    </>
+  )
+}

package/templates/storefront/src/modules/shipping/components/free-shipping-price-nudge/index.tsx

@@ -0,0 +1,285 @@
+"use client"
+
+
+import { T } from "@lib/boutique/i18n-client"
+import { convertToLocale } from "@lib/util/money"
+import { CheckCircleSolid, XMark } from "@medusajs/icons"
+import {
+  HttpTypes,
+  StoreCart,
+  StoreCartShippingOption,
+  StorePrice,
+} from "@medusajs/types"
+import { Button, clx } from "@medusajs/ui"
+import LocalizedClientLink from "@modules/common/components/localized-client-link"
+import { useState } from "react"
+import { StoreFreeShippingPrice } from "types/global"
+
+const computeTarget = (
+  cart: HttpTypes.StoreCart,
+  price: HttpTypes.StorePrice
+) => {
+  const priceRule = (price.price_rules || []).find(
+    (pr) => pr.attribute === "item_total"
+  )!
+
+  const currentAmount = cart.item_total
+  const targetAmount = parseFloat(priceRule.value)
+
+  if (priceRule.operator === "gt") {
+    return {
+      current_amount: currentAmount,
+      target_amount: targetAmount,
+      target_reached: currentAmount > targetAmount,
+      target_remaining:
+        currentAmount > targetAmount ? 0 : targetAmount + 1 - currentAmount,
+      remaining_percentage: (currentAmount / targetAmount) * 100,
+    }
+  } else if (priceRule.operator === "gte") {
+    return {
+      current_amount: currentAmount,
+      target_amount: targetAmount,
+      target_reached: currentAmount > targetAmount,
+      target_remaining:
+        currentAmount > targetAmount ? 0 : targetAmount - currentAmount,
+      remaining_percentage: (currentAmount / targetAmount) * 100,
+    }
+  } else if (priceRule.operator === "lt") {
+    return {
+      current_amount: currentAmount,
+      target_amount: targetAmount,
+      target_reached: targetAmount > currentAmount,
+      target_remaining:
+        targetAmount > currentAmount ? 0 : currentAmount + 1 - targetAmount,
+      remaining_percentage: (currentAmount / targetAmount) * 100,
+    }
+  } else if (priceRule.operator === "lte") {
+    return {
+      current_amount: currentAmount,
+      target_amount: targetAmount,
+      target_reached: targetAmount > currentAmount,
+      target_remaining:
+        targetAmount > currentAmount ? 0 : currentAmount - targetAmount,
+      remaining_percentage: (currentAmount / targetAmount) * 100,
+    }
+  } else {
+    return {
+      current_amount: currentAmount,
+      target_amount: targetAmount,
+      target_reached: currentAmount === targetAmount,
+      target_remaining:
+        targetAmount > currentAmount ? 0 : targetAmount - currentAmount,
+      remaining_percentage: (currentAmount / targetAmount) * 100,
+    }
+  }
+}
+
+export default function ShippingPriceNudge({
+  variant = "inline",
+  cart,
+  shippingOptions,
+}: {
+  variant?: "popup" | "inline"
+  cart: StoreCart
+  shippingOptions: StoreCartShippingOption[]
+}) {
+  if (!cart || !shippingOptions?.length) {
+    return
+  }
+
+  // Check if any shipping options have a conditional price based on item_total
+  const freeShippingPrice = shippingOptions
+    .map((shippingOption) => {
+      const calculatedPrice = shippingOption.calculated_price
+
+      if (!calculatedPrice) {
+        return
+      }
+
+      // Get all prices that are:
+      // 1. Currency code is same as the cart's
+      // 2. Have a rule that is set on item_total
+      const validCurrencyPrices = shippingOption.prices.filter(
+        (price) =>
+          price.currency_code === cart.currency_code &&
+          (price.price_rules || []).some(
+            (priceRule) => priceRule.attribute === "item_total"
+          )
+      )
+
+      return validCurrencyPrices.map((price) => {
+        return {
+          ...price,
+          shipping_option_id: shippingOption.id,
+          ...computeTarget(cart, price),
+        }
+      })
+    })
+    .flat(1)
+    .filter(Boolean)
+    // We focus here entirely on free shipping, but this can be edited to handle multiple layers
+    // of reduced shipping prices.
+    .find((price) => price?.amount === 0)
+
+  if (!freeShippingPrice) {
+    return
+  }
+
+  if (variant === "popup") {
+    return <FreeShippingPopup cart={cart} price={freeShippingPrice} />
+  } else {
+    return <FreeShippingInline cart={cart} price={freeShippingPrice} />
+  }
+}
+
+function FreeShippingInline({
+  cart,
+  price,
+}: {
+  cart: StoreCart
+  price: StorePrice & {
+    target_reached: boolean
+    target_remaining: number
+    remaining_percentage: number
+  }
+}) {
+  return (
+    <div className="bg-neutral-100 p-2 rounded-lg border">
+      <div className="space-y-1.5">
+        <div className="flex justify-between text-xs text-neutral-600">
+          <div>
+            {price.target_reached ? (
+              <div className="flex items-center gap-1.5">
+                <CheckCircleSolid className="text-green-500 inline-block" />{" "}
+                <T k="cart.freeShippingUnlocked" />
+              </div>
+            ) : (
+              `Unlock Free Shipping`
+            )}
+          </div>
+
+          <div
+            className={clx("visible", {
+              "opacity-0 invisible": price.target_reached,
+            })}
+          >
+            Only{" "}
+            <span className="text-neutral-950">
+              {convertToLocale({
+                amount: price.target_remaining,
+                currency_code: cart.currency_code,
+              })}
+            </span>{" "}
+            away
+          </div>
+        </div>
+        <div className="flex justify-between gap-1">
+          <div
+            className={clx(
+              "bg-gradient-to-r from-zinc-400 to-zinc-500 h-1 rounded-full max-w-full duration-500 ease-in-out",
+              {
+                "from-green-400 to-green-500": price.target_reached,
+              }
+            )}
+            style={{ width: `${price.remaining_percentage}%` }}
+          ></div>
+          <div className="bg-neutral-300 h-1 rounded-full w-fit flex-grow"></div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function FreeShippingPopup({
+  cart,
+  price,
+}: {
+  cart: StoreCart
+  price: StoreFreeShippingPrice
+}) {
+  const [isClosed, setIsClosed] = useState(false)
+
+  return (
+    <div
+      className={clx(
+        "fixed bottom-5 right-5 flex flex-col items-end gap-2 transition-all duration-500 ease-in-out z-10",
+        {
+          "opacity-0 invisible delay-1000": price.target_reached,
+          "opacity-0 invisible": isClosed,
+          "opacity-100 visible": !price.target_reached && !isClosed,
+        }
+      )}
+    >
+      <div>
+        <Button
+          className="rounded-full bg-neutral-900 shadow-none outline-none border-none text-[15px] p-2"
+          onClick={() => setIsClosed(true)}
+        >
+          <XMark />
+        </Button>
+      </div>
+
+      <div className="w-[400px] bg-[var(--ink)] text-[var(--bg)] p-6 rounded-lg ">
+        <div className="pb-4">
+          <div className="space-y-3">
+            <div className="flex justify-between text-[15px] text-neutral-400">
+              <div>
+                {price.target_reached ? (
+                  <div className="flex items-center gap-1.5">
+                    <CheckCircleSolid className="text-green-500 inline-block" />{" "}
+                    <T k="cart.freeShippingUnlocked" />
+                  </div>
+                ) : (
+                  `Unlock Free Shipping`
+                )}
+              </div>
+
+              <div
+                className={clx("visible", {
+                  "opacity-0 invisible": price.target_reached,
+                })}
+              >
+                Only{" "}
+                <span className="text-white">
+                  {convertToLocale({
+                    amount: price.target_remaining,
+                    currency_code: cart.currency_code,
+                  })}
+                </span>{" "}
+                away
+              </div>
+            </div>
+            <div className="flex justify-between gap-1">
+              <div
+                className={clx(
+                  "bg-gradient-to-r from-zinc-400 to-zinc-500 h-1.5 rounded-full max-w-full duration-500 ease-in-out",
+                  {
+                    "from-green-400 to-green-500": price.target_reached,
+                  }
+                )}
+                style={{ width: `${price.remaining_percentage}%` }}
+              ></div>
+              <div className="bg-zinc-600 h-1.5 rounded-full w-fit flex-grow"></div>
+            </div>
+          </div>
+        </div>
+
+        <div className="flex gap-3">
+          <LocalizedClientLink
+            className="rounded-2xl bg-transparent shadow-none outline-none border-[1px] border-white text-[15px] py-2.5 px-4"
+            href="/cart"
+          >
+            <T k="cart.viewCart" />
+          </LocalizedClientLink>
+
+          <LocalizedClientLink
+            className="flex-grow rounded-2xl bg-white text-neutral-950 shadow-none outline-none border-[1px] border-white text-[15px] py-2.5 px-4 text-center"
+            href="/store"
+          >
+            <T k="cart.viewProducts" />
+          </LocalizedClientLink>
+        </div>
+      </div>
+    </div>
+  )
+}

package/templates/storefront/src/modules/skeletons/components/skeleton-button/index.tsx

@@ -0,0 +1,5 @@
+const SkeletonButton = () => {
+  return <div className="w-full min-h-[50px] px-5 py-[10px] bg-gray-100"></div>
+}
+
+export default SkeletonButton

package/templates/storefront/src/modules/skeletons/components/skeleton-card-details/index.tsx

@@ -0,0 +1,10 @@
+const SkeletonCardDetails = () => {
+  return (
+    <div className="flex flex-col gap-1 my-4 transition-all duration-150 ease-in-out">
+      <div className="h-4 bg-ui-bg-component-pressed rounded-md w-1/4 animate-pulse mb-1"></div>
+      <div className="pt-3 pb-1 block w-full h-11 px-4 mt-0 bg-ui-bg-field border rounded-md appearance-none border-ui-border-base animate-pulse" />
+    </div>
+  )
+}
+
+export default SkeletonCardDetails

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

@@ -0,0 +1,35 @@
+import { Table } from "@medusajs/ui"
+
+const SkeletonCartItem = () => {
+  return (
+    <Table.Row className="w-full m-4">
+      <Table.Cell className="!pl-0 p-4 w-24">
+        <div className="flex w-24 h-24 p-4 bg-gray-200 rounded-large animate-pulse" />
+      </Table.Cell>
+      <Table.Cell className="text-left">
+        <div className="flex flex-col gap-y-2">
+          <div className="w-32 h-4 bg-gray-200 animate-pulse" />
+          <div className="w-24 h-4 bg-gray-200 animate-pulse" />
+        </div>
+      </Table.Cell>
+      <Table.Cell>
+        <div className="flex gap-2 items-center">
+          <div className="w-6 h-8 bg-gray-200 animate-pulse" />
+          <div className="w-14 h-10 bg-gray-200 animate-pulse" />
+        </div>
+      </Table.Cell>
+      <Table.Cell>
+        <div className="flex gap-2">
+          <div className="w-12 h-6 bg-gray-200 animate-pulse" />
+        </div>
+      </Table.Cell>
+      <Table.Cell className="!pr-0 text-right">
+        <div className="flex gap-2 justify-end">
+          <div className="w-12 h-6 bg-gray-200 animate-pulse" />
+        </div>
+      </Table.Cell>
+    </Table.Row>
+  )
+}
+
+export default SkeletonCartItem

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

@@ -0,0 +1,30 @@
+const SkeletonCartTotals = ({ header = true }) => {
+  return (
+    <div className="flex flex-col">
+      {header && <div className="w-32 h-4 bg-gray-100 mb-4"></div>}
+      <div className="flex items-center justify-between">
+        <div className="w-32 h-3 bg-gray-100"></div>
+        <div className="w-32 h-3 bg-gray-100"></div>
+      </div>
+
+      <div className="flex items-center justify-between my-4">
+        <div className="w-24 h-3 bg-gray-100"></div>
+        <div className="w-24 h-3 bg-gray-100"></div>
+      </div>
+
+      <div className="flex items-center justify-between">
+        <div className="w-28 h-3 bg-gray-100 "></div>
+        <div className="w-20 h-3 bg-gray-100"></div>
+      </div>
+
+      <div className="w-full border-b border-gray-200 border-dashed my-4"></div>
+
+      <div className="flex items-center justify-between">
+        <div className="w-32 h-6 bg-gray-100 mb-4"></div>
+        <div className="w-24 h-6 bg-gray-100 mb-4"></div>
+      </div>
+    </div>
+  )
+}
+
+export default SkeletonCartTotals

package/templates/storefront/src/modules/skeletons/components/skeleton-code-form/index.tsx

@@ -0,0 +1,13 @@
+const SkeletonCodeForm = () => {
+  return (
+    <div className="w-full flex flex-col">
+      <div className="bg-gray-100 h-7 w-24 mb-4"></div>
+      <div className="grid grid-cols-[1fr_80px] gap-x-2">
+        <div className="bg-gray-100 h-12"></div>
+        <div className="bg-gray-100 h-12"></div>
+      </div>
+    </div>
+  )
+}
+
+export default SkeletonCodeForm

package/templates/storefront/src/modules/skeletons/components/skeleton-line-item/index.tsx

@@ -0,0 +1,35 @@
+import { Table } from "@medusajs/ui"
+
+const SkeletonLineItem = () => {
+  return (
+    <Table.Row className="w-full m-4">
+      <Table.Cell className="p-4 w-24">
+        <div className="flex w-24 h-24 p-4 bg-gray-200 animate-pulse" />
+      </Table.Cell>
+      <Table.Cell className="text-left">
+        <div className="flex flex-col gap-y-2">
+          <div className="w-32 h-4 bg-gray-200 animate-pulse" />
+          <div className="w-24 h-4 bg-gray-200 animate-pulse" />
+        </div>
+      </Table.Cell>
+      <Table.Cell>
+        <div className="flex gap-2 items-center">
+          <div className="w-6 h-8 bg-gray-200 animate-pulse" />
+          <div className="w-14 h-10 bg-gray-200 animate-pulse" />
+        </div>
+      </Table.Cell>
+      <Table.Cell>
+        <div className="flex gap-2">
+          <div className="w-12 h-6 bg-gray-200 animate-pulse" />
+        </div>
+      </Table.Cell>
+      <Table.Cell>
+        <div className="flex gap-2 justify-end">
+          <div className="w-12 h-6 bg-gray-200 animate-pulse" />
+        </div>
+      </Table.Cell>
+    </Table.Row>
+  )
+}
+
+export default SkeletonLineItem

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

@@ -0,0 +1,14 @@
+const SkeletonOrderConfirmedHeader = () => {
+  return (
+    <div className="flex flex-col gap-y-2 pb-10 animate-pulse">
+      <div className="w-2/5 h-4 bg-gray-100"></div>
+      <div className="w-3/6 h-6 bg-gray-100"></div>
+      <div className="flex gap-x-4">
+        <div className="w-16 h-4 bg-gray-100"></div>
+        <div className="w-12 h-4 bg-gray-100"></div>
+      </div>
+    </div>
+  )
+}
+
+export default SkeletonOrderConfirmedHeader

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

@@ -0,0 +1,36 @@
+import SkeletonCartTotals from "@modules/skeletons/components/skeleton-cart-totals"
+
+const SkeletonOrderInformation = () => {
+  return (
+    <div>
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 py-10 border-b border-gray-200">
+        <div className="flex flex-col">
+          <div className="w-32 h-4 bg-gray-100 mb-4"></div>
+          <div className="w-2/6 h-3 bg-gray-100"></div>
+          <div className="w-3/6 h-3 bg-gray-100 my-2"></div>
+          <div className="w-1/6 h-3 bg-gray-100"></div>
+        </div>
+        <div className="flex flex-col">
+          <div className="w-32 h-4 bg-gray-100 mb-4"></div>
+          <div className="w-2/6 h-3 bg-gray-100"></div>
+          <div className="w-3/6 h-3 bg-gray-100 my-2"></div>
+          <div className="w-2/6 h-3 bg-gray-100"></div>
+          <div className="w-1/6 h-3 bg-gray-100 mt-2"></div>
+          <div className="w-32 h-4 bg-gray-100 my-4"></div>
+          <div className="w-1/6 h-3 bg-gray-100"></div>
+        </div>
+      </div>
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 py-10">
+        <div className="flex flex-col">
+          <div className="w-32 h-4 bg-gray-100 mb-4"></div>
+          <div className="w-2/6 h-3 bg-gray-100"></div>
+          <div className="w-3/6 h-3 bg-gray-100 my-4"></div>
+        </div>
+
+        <SkeletonCartTotals />
+      </div>
+    </div>
+  )
+}
+
+export default SkeletonOrderInformation

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

@@ -0,0 +1,43 @@
+const SkeletonOrderItems = () => {
+  return (
+    <div className="flex flex-col gap-y-4 py-10 border-y border-gray-200">
+      <div className="grid grid-cols-[122px_1fr] gap-x-4">
+        <div className="w-full aspect-[29/34] bg-gray-100"></div>
+        <div className="flex items-start justify-between">
+          <div className="flex flex-col gap-y-2">
+            <div className="w-48 h-6 bg-gray-100"></div>
+            <div className="w-24 h-4 bg-gray-100"></div>
+            <div className="w-32 h-4 bg-gray-100"></div>
+          </div>
+          <div className="w-32 h-6 bg-gray-100"></div>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-[122px_1fr] gap-x-4">
+        <div className="w-full aspect-[29/34] bg-gray-100"></div>
+        <div className="flex items-start justify-between">
+          <div className="flex flex-col gap-y-2">
+            <div className="w-48 h-6 bg-gray-100"></div>
+            <div className="w-24 h-4 bg-gray-100"></div>
+            <div className="w-32 h-4 bg-gray-100"></div>
+          </div>
+          <div className="w-32 h-6 bg-gray-100"></div>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-[122px_1fr] gap-x-4">
+        <div className="w-full aspect-[29/34] bg-gray-100"></div>
+        <div className="flex items-start justify-between">
+          <div className="flex flex-col gap-y-2">
+            <div className="w-48 h-6 bg-gray-100"></div>
+            <div className="w-24 h-4 bg-gray-100"></div>
+            <div className="w-32 h-4 bg-gray-100"></div>
+          </div>
+          <div className="w-32 h-6 bg-gray-100"></div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default SkeletonOrderItems

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

@@ -0,0 +1,15 @@
+import SkeletonButton from "@modules/skeletons/components/skeleton-button"
+import SkeletonCartTotals from "@modules/skeletons/components/skeleton-cart-totals"
+
+const SkeletonOrderSummary = () => {
+  return (
+    <div className="grid-cols-1">
+      <SkeletonCartTotals header={false} />
+      <div className="mt-4">
+        <SkeletonButton />
+      </div>
+    </div>
+  )
+}
+
+export default SkeletonOrderSummary

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

@@ -0,0 +1,15 @@
+import { Container } from "@medusajs/ui"
+
+const SkeletonProductPreview = () => {
+  return (
+    <div className="animate-pulse">
+      <Container className="aspect-[9/16] w-full bg-gray-100 bg-ui-bg-subtle" />
+      <div className="flex justify-between text-base-regular mt-2">
+        <div className="w-2/5 h-6 bg-gray-100"></div>
+        <div className="w-1/5 h-6 bg-gray-100"></div>
+      </div>
+    </div>
+  )
+}
+
+export default SkeletonProductPreview