@salifbiaye/create-boutique 0.1.1

package/templates/storefront/src/modules/checkout/components/submit-button/index.tsx

@@ -0,0 +1,32 @@
+"use client"
+
+import { Button } from "@medusajs/ui"
+import React from "react"
+import { useFormStatus } from "react-dom"
+
+export function SubmitButton({
+  children,
+  variant = "primary",
+  className,
+  "data-testid": dataTestId,
+}: {
+  children: React.ReactNode
+  variant?: "primary" | "secondary" | "transparent" | "danger" | null
+  className?: string
+  "data-testid"?: string
+}) {
+  const { pending } = useFormStatus()
+
+  return (
+    <Button
+      size="large"
+      className={className}
+      type="submit"
+      isLoading={pending}
+      variant={variant || "primary"}
+      data-testid={dataTestId}
+    >
+      {children}
+    </Button>
+  )
+}

package/templates/storefront/src/modules/checkout/templates/checkout-form/index.tsx

@@ -0,0 +1,38 @@
+import { listCartShippingMethods } from "@lib/data/fulfillment"
+import { listCartPaymentMethods } from "@lib/data/payment"
+import { HttpTypes } from "@medusajs/types"
+import Addresses from "@modules/checkout/components/addresses"
+import Payment from "@modules/checkout/components/payment"
+import Review from "@modules/checkout/components/review"
+import Shipping from "@modules/checkout/components/shipping"
+
+export default async function CheckoutForm({
+  cart,
+  customer,
+}: {
+  cart: HttpTypes.StoreCart | null
+  customer: HttpTypes.StoreCustomer | null
+}) {
+  if (!cart) {
+    return null
+  }
+
+  const shippingMethods = await listCartShippingMethods(cart.id)
+  const paymentMethods = await listCartPaymentMethods(cart.region?.id ?? "")
+
+  if (!shippingMethods || !paymentMethods) {
+    return null
+  }
+
+  return (
+    <div className="w-full grid grid-cols-1 gap-y-8">
+      <Addresses cart={cart} customer={customer} />
+
+      <Shipping cart={cart} availableShippingMethods={shippingMethods} />
+
+      <Payment cart={cart} availablePaymentMethods={paymentMethods} />
+
+      <Review cart={cart} />
+    </div>
+  )
+}

package/templates/storefront/src/modules/checkout/templates/checkout-summary/index.tsx

@@ -0,0 +1,31 @@
+import { T } from "@lib/boutique/i18n-client"
+import { Heading } from "@medusajs/ui"
+
+import ItemsPreviewTemplate from "@modules/cart/templates/preview"
+import DiscountCode from "@modules/checkout/components/discount-code"
+import CartTotals from "@modules/common/components/cart-totals"
+import Divider from "@modules/common/components/divider"
+
+const CheckoutSummary = ({ cart }: { cart: any }) => {
+  return (
+    <div className="sticky top-0 flex flex-col-reverse small:flex-col gap-y-8 py-8 small:py-0 ">
+      <div className="w-full bg-white flex flex-col">
+        <Divider className="my-6 small:hidden" />
+        <Heading
+          level="h2"
+          className="flex flex-row text-3xl-regular items-baseline"
+        >
+          <T k="checkout.inYourCart" />
+        </Heading>
+        <Divider className="my-6" />
+        <CartTotals totals={cart} />
+        <ItemsPreviewTemplate cart={cart} />
+        <div className="my-6">
+          <DiscountCode cart={cart} />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default CheckoutSummary

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

@@ -0,0 +1,44 @@
+import { Suspense } from "react"
+
+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 "@modules/store/templates/paginated-products"
+import { HttpTypes } from "@medusajs/types"
+
+export default function CollectionTemplate({
+  sortBy,
+  collection,
+  page,
+}: {
+  sortBy?: SortOptions
+  collection: HttpTypes.StoreCollection
+  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">
+      <RefinementList sortBy={sort} />
+      <div className="w-full">
+        <div className="mb-8 text-2xl-semi">
+          <h1>{collection.title}</h1>
+        </div>
+        <Suspense
+          fallback={
+            <SkeletonProductGrid
+              numberOfProducts={collection.products?.length}
+            />
+          }
+        >
+          <PaginatedProducts
+            sortBy={sort}
+            page={pageNumber}
+            collectionId={collection.id}
+          />
+        </Suspense>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,84 @@
+"use client"
+
+
+import { T } from "@lib/boutique/i18n-client"
+import { convertToLocale } from "@lib/util/money"
+import React from "react"
+
+type CartTotalsProps = {
+  totals: {
+    total?: number | null
+    subtotal?: number | null
+    tax_total?: number | null
+    currency_code: string
+    item_subtotal?: number | null
+    shipping_subtotal?: number | null
+    discount_subtotal?: number | null
+  }
+}
+
+const CartTotals: React.FC<CartTotalsProps> = ({ totals }) => {
+  const {
+    currency_code,
+    total,
+    tax_total,
+    item_subtotal,
+    shipping_subtotal,
+    discount_subtotal,
+  } = totals
+
+  return (
+    <div>
+      <div className="flex flex-col gap-y-2 txt-medium text-ui-fg-subtle ">
+        <div className="flex items-center justify-between">
+          <span><T k="cart.subtotalExcl" /></span>
+          <span data-testid="cart-subtotal" data-value={item_subtotal || 0}>
+            {convertToLocale({ amount: item_subtotal ?? 0, currency_code })}
+          </span>
+        </div>
+        <div className="flex items-center justify-between">
+          <span><T k="cart.shipping" /></span>
+          <span data-testid="cart-shipping" data-value={shipping_subtotal || 0}>
+            {convertToLocale({ amount: shipping_subtotal ?? 0, currency_code })}
+          </span>
+        </div>
+        {!!discount_subtotal && (
+          <div className="flex items-center justify-between">
+            <span><T k="cart.discount" /></span>
+            <span
+              className="text-ui-fg-interactive"
+              data-testid="cart-discount"
+              data-value={discount_subtotal || 0}
+            >
+              -{" "}
+              {convertToLocale({
+                amount: discount_subtotal ?? 0,
+                currency_code,
+              })}
+            </span>
+          </div>
+        )}
+        <div className="flex justify-between">
+          <span className="flex gap-x-1 items-center ">Taxes</span>
+          <span data-testid="cart-taxes" data-value={tax_total || 0}>
+            {convertToLocale({ amount: tax_total ?? 0, currency_code })}
+          </span>
+        </div>
+      </div>
+      <div className="h-px w-full border-b border-gray-200 my-4" />
+      <div className="flex items-center justify-between text-ui-fg-base mb-2 txt-medium ">
+        <span><T k="cart.total" /></span>
+        <span
+          className="txt-xlarge-plus"
+          data-testid="cart-total"
+          data-value={total || 0}
+        >
+          {convertToLocale({ amount: total ?? 0, currency_code })}
+        </span>
+      </div>
+      <div className="h-px w-full border-b border-gray-200 mt-4" />
+    </div>
+  )
+}
+
+export default CartTotals

package/templates/storefront/src/modules/common/components/checkbox/index.tsx

@@ -0,0 +1,44 @@
+import { T } from "@lib/boutique/i18n-client"
+import { Checkbox, Label } from "@medusajs/ui"
+import React from "react"
+
+type CheckboxProps = {
+  checked?: boolean
+  onChange?: () => void
+  label: string
+  name?: string
+  'data-testid'?: string
+}
+
+const CheckboxWithLabel: React.FC<CheckboxProps> = ({
+  checked = true,
+  onChange,
+  label,
+  name,
+  'data-testid': dataTestId
+}) => {
+  return (
+    <div className="flex items-center space-x-2 ">
+      <Checkbox
+        className="text-base-regular flex items-center gap-x-2"
+        id="checkbox"
+        role="checkbox"
+        type="button"
+        checked={checked}
+        aria-checked={checked}
+        onClick={onChange}
+        name={name}
+        data-testid={dataTestId}
+      />
+      <Label
+        htmlFor="checkbox"
+        className="!transform-none !txt-medium"
+        size="large"
+      >
+        <T k={label} />
+      </Label>
+    </div>
+  )
+}
+
+export default CheckboxWithLabel

package/templates/storefront/src/modules/common/components/delete-button/index.tsx

@@ -0,0 +1,42 @@
+import { deleteLineItem } from "@lib/data/cart"
+import { Spinner, Trash } from "@medusajs/icons"
+import { clx } from "@medusajs/ui"
+import { useState } from "react"
+
+const DeleteButton = ({
+  id,
+  children,
+  className,
+}: {
+  id: string
+  children?: React.ReactNode
+  className?: string
+}) => {
+  const [isDeleting, setIsDeleting] = useState(false)
+
+  const handleDelete = async (id: string) => {
+    setIsDeleting(true)
+    await deleteLineItem(id).catch((err) => {
+      setIsDeleting(false)
+    })
+  }
+
+  return (
+    <div
+      className={clx(
+        "flex items-center justify-between text-small-regular",
+        className
+      )}
+    >
+      <button
+        className="flex gap-x-1 text-ui-fg-subtle hover:text-ui-fg-base cursor-pointer"
+        onClick={() => handleDelete(id)}
+      >
+        {isDeleting ? <Spinner className="animate-spin" /> : <Trash />}
+        <span>{children}</span>
+      </button>
+    </div>
+  )
+}
+
+export default DeleteButton

package/templates/storefront/src/modules/common/components/divider/index.tsx

@@ -0,0 +1,9 @@
+import { clx } from "@medusajs/ui"
+
+const Divider = ({ className }: { className?: string }) => (
+  <div
+    className={clx("h-px w-full border-b border-gray-200 mt-1", className)}
+  />
+)
+
+export default Divider

package/templates/storefront/src/modules/common/components/filter-radio-group/index.tsx

@@ -0,0 +1,61 @@
+import { EllipseMiniSolid } from "@medusajs/icons"
+import { Label, RadioGroup, Text, clx } from "@medusajs/ui"
+import { T } from "@lib/boutique/i18n-client"
+
+type FilterRadioGroupProps = {
+  title: string
+  items: {
+    value: string
+    label: string
+  }[]
+  value: any
+  handleChange: (...args: any[]) => void
+  "data-testid"?: string
+}
+
+const FilterRadioGroup = ({
+  title,
+  items,
+  value,
+  handleChange,
+  "data-testid": dataTestId,
+}: FilterRadioGroupProps) => {
+  return (
+    <div className="flex gap-x-3 flex-col gap-y-3">
+      <Text className="txt-compact-small-plus text-ui-fg-muted"><T k={title} /></Text>
+      <RadioGroup data-testid={dataTestId} onValueChange={handleChange}>
+        {items?.map((i) => (
+          <div
+            key={i.value}
+            className={clx("flex gap-x-2 items-center", {
+              "ml-[-23px]": i.value === value,
+            })}
+          >
+            {i.value === value && <EllipseMiniSolid />}
+            <RadioGroup.Item
+              checked={i.value === value}
+              className="hidden peer"
+              id={i.value}
+              value={i.value}
+            />
+            <Label
+              htmlFor={i.value}
+              className={clx(
+                "!txt-compact-small !transform-none text-ui-fg-subtle hover:cursor-pointer",
+                {
+                  "text-ui-fg-base": i.value === value,
+                }
+              )}
+              data-testid="radio-label"
+              data-active={i.value === value}
+            >
+              <T k={i.label} />
+            </Label>
+          </div>
+        ))}
+      </RadioGroup>
+    </div>
+  )
+}
+
+export default FilterRadioGroup

package/templates/storefront/src/modules/common/components/input/index.tsx

@@ -0,0 +1,79 @@
+import { Label } from "@medusajs/ui"
+import React, { useEffect, useImperativeHandle, useState } from "react"
+import { useT } from "@lib/boutique/i18n-client"
+
+import Eye from "@modules/common/icons/eye"
+import EyeOff from "@modules/common/icons/eye-off"
+
+type InputProps = Omit<
+  Omit<React.InputHTMLAttributes<HTMLInputElement>, "size">,
+  "placeholder"
+> & {
+  label: string
+  errors?: Record<string, unknown>
+  touched?: Record<string, unknown>
+  name: string
+  topLabel?: string
+}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ type, name, label, touched, required, topLabel, title, ...props }, ref) => {
+    const t = useT()
+    const inputRef = React.useRef<HTMLInputElement>(null)
+    const [showPassword, setShowPassword] = useState(false)
+    const [inputType, setInputType] = useState(type)
+
+    useEffect(() => {
+      if (type === "password" && showPassword) {
+        setInputType("text")
+      }
+
+      if (type === "password" && !showPassword) {
+        setInputType("password")
+      }
+    }, [type, showPassword])
+
+    useImperativeHandle(ref, () => inputRef.current!)
+
+    return (
+      <div className="flex flex-col w-full">
+        {topLabel && (
+          <Label className="mb-2 txt-compact-medium-plus">{t(topLabel)}</Label>
+        )}
+        <div className="flex relative z-0 w-full txt-compact-medium">
+          <input
+            type={inputType}
+            name={name}
+            placeholder=" "
+            required={required}
+            className="pt-4 pb-1 block w-full h-11 px-4 mt-0 bg-ui-bg-field border rounded-md appearance-none focus:outline-none focus:ring-0 focus:shadow-borders-interactive-with-active border-ui-border-base hover:bg-ui-bg-field-hover"
+            title={title ? t(title) : undefined}
+            {...props}
+            ref={inputRef}
+          />
+          <label
+            htmlFor={name}
+            onClick={() => inputRef.current?.focus()}
+            className="flex items-center justify-center mx-3 px-1 transition-all absolute duration-300 top-3 -z-1 origin-0 text-ui-fg-subtle"
+          >
+            {t(label)}
+            {required && <span className="text-rose-500">*</span>}
+          </label>
+          {type === "password" && (
+            <button
+              type="button"
+              onClick={() => setShowPassword(!showPassword)}
+              className="text-ui-fg-subtle px-4 focus:outline-none transition-all duration-150 outline-none focus:text-ui-fg-base absolute right-0 top-3"
+            >
+              {showPassword ? <Eye /> : <EyeOff />}
+            </button>
+          )}
+        </div>
+      </div>
+    )
+  }
+)
+
+Input.displayName = "Input"
+
+export default Input

package/templates/storefront/src/modules/common/components/interactive-link/index.tsx

@@ -0,0 +1,33 @@
+import { ArrowUpRightMini } from "@medusajs/icons"
+import { Text } from "@medusajs/ui"
+import LocalizedClientLink from "../localized-client-link"
+
+type InteractiveLinkProps = {
+  href: string
+  children?: React.ReactNode
+  onClick?: () => void
+}
+
+const InteractiveLink = ({
+  href,
+  children,
+  onClick,
+  ...props
+}: InteractiveLinkProps) => {
+  return (
+    <LocalizedClientLink
+      className="flex gap-x-1 items-center group"
+      href={href}
+      onClick={onClick}
+      {...props}
+    >
+      <Text className="text-ui-fg-interactive">{children}</Text>
+      <ArrowUpRightMini
+        className="group-hover:rotate-45 ease-in-out duration-150"
+        color="var(--fg-interactive)"
+      />
+    </LocalizedClientLink>
+  )
+}
+
+export default InteractiveLink

package/templates/storefront/src/modules/common/components/line-item-options/index.tsx

@@ -0,0 +1,26 @@
+import { HttpTypes } from "@medusajs/types"
+import { Text } from "@medusajs/ui"
+
+type LineItemOptionsProps = {
+  variant: HttpTypes.StoreProductVariant | undefined
+  "data-testid"?: string
+  "data-value"?: HttpTypes.StoreProductVariant
+}
+
+const LineItemOptions = ({
+  variant,
+  "data-testid": dataTestid,
+  "data-value": dataValue,
+}: LineItemOptionsProps) => {
+  return (
+    <Text
+      data-testid={dataTestid}
+      data-value={dataValue}
+      className="inline-block txt-medium text-ui-fg-subtle w-full overflow-hidden text-ellipsis"
+    >
+      Variant: {variant?.title}
+    </Text>
+  )
+}
+
+export default LineItemOptions

package/templates/storefront/src/modules/common/components/line-item-price/index.tsx

@@ -0,0 +1,63 @@
+import { getPercentageDiff } from "@lib/util/get-percentage-diff"
+import { convertToLocale } from "@lib/util/money"
+import { HttpTypes } from "@medusajs/types"
+import { clx } from "@medusajs/ui"
+
+type LineItemPriceProps = {
+  item: HttpTypes.StoreCartLineItem | HttpTypes.StoreOrderLineItem
+  style?: "default" | "tight"
+  currencyCode: string
+}
+
+const LineItemPrice = ({
+  item,
+  style = "default",
+  currencyCode,
+}: LineItemPriceProps) => {
+  const originalPrice = item.original_total ?? 0
+  const currentPrice = item.total ?? 0
+  const hasReducedPrice = currentPrice < originalPrice
+
+  return (
+    <div className="flex flex-col gap-x-2 text-ui-fg-subtle items-end">
+      <div className="text-left">
+        {hasReducedPrice && (
+          <>
+            <p>
+              {style === "default" && (
+                <span className="text-ui-fg-subtle">Original: </span>
+              )}
+              <span
+                className="line-through text-ui-fg-muted"
+                data-testid="product-original-price"
+              >
+                {convertToLocale({
+                  amount: originalPrice,
+                  currency_code: currencyCode,
+                })}
+              </span>
+            </p>
+            {style === "default" && (
+              <span className="text-ui-fg-interactive">
+                -{getPercentageDiff(originalPrice, currentPrice || 0)}%
+              </span>
+            )}
+          </>
+        )}
+        <span
+          className={clx("text-base-regular", {
+            "text-ui-fg-interactive": hasReducedPrice,
+          })}
+          data-testid="product-price"
+        >
+          {convertToLocale({
+            amount: currentPrice,
+            currency_code: currencyCode,
+          })}
+        </span>
+      </div>
+    </div>
+  )
+}
+
+export default LineItemPrice

package/templates/storefront/src/modules/common/components/line-item-unit-price/index.tsx

@@ -0,0 +1,62 @@
+import { convertToLocale } from "@lib/util/money"
+import { HttpTypes } from "@medusajs/types"
+import { clx } from "@medusajs/ui"
+
+type LineItemUnitPriceProps = {
+  item: HttpTypes.StoreCartLineItem | HttpTypes.StoreOrderLineItem
+  style?: "default" | "tight"
+  currencyCode: string
+}
+
+const LineItemUnitPrice = ({
+  item,
+  style = "default",
+  currencyCode,
+}: LineItemUnitPriceProps) => {
+  const total = item.total ?? 0
+  const original_total = item.original_total ?? 0
+  const hasReducedPrice = total < original_total
+
+  const percentage_diff = Math.round(
+    ((original_total - total) / original_total) * 100
+  )
+
+  return (
+    <div className="flex flex-col text-ui-fg-muted justify-center h-full">
+      {hasReducedPrice && (
+        <>
+          <p>
+            {style === "default" && (
+              <span className="text-ui-fg-muted">Original: </span>
+            )}
+            <span
+              className="line-through"
+              data-testid="product-unit-original-price"
+            >
+              {convertToLocale({
+                amount: original_total / item.quantity,
+                currency_code: currencyCode,
+              })}
+            </span>
+          </p>
+          {style === "default" && (
+            <span className="text-ui-fg-interactive">-{percentage_diff}%</span>
+          )}
+        </>
+      )}
+      <span
+        className={clx("text-base-regular", {
+          "text-ui-fg-interactive": hasReducedPrice,
+        })}
+        data-testid="product-unit-price"
+      >
+        {convertToLocale({
+          amount: total / item.quantity,
+          currency_code: currencyCode,
+        })}
+      </span>
+    </div>
+  )
+}
+
+export default LineItemUnitPrice

package/templates/storefront/src/modules/common/components/localized-client-link/index.tsx

@@ -0,0 +1,29 @@
+"use client"
+
+import Link from "next/link"
+import React from "react"
+
+/**
+ * Lien interne. Les URL n'ont plus de préfixe pays (/products/<handle>) :
+ * la région est fixée par l'instance. Gardé pour ne pas toucher tous les appels du starter.
+ */
+const LocalizedClientLink = ({
+  children,
+  href,
+  ...props
+}: {
+  children?: React.ReactNode
+  href: string
+  className?: string
+  onClick?: () => void
+  passHref?: true
+  [x: string]: any
+}) => {
+  return (
+    <Link href={href} {...props}>
+      {children}
+    </Link>
+  )
+}
+
+export default LocalizedClientLink