@salifbiaye/create-boutique 0.1.1

package/templates/storefront/src/lib/data/regions.ts

@@ -0,0 +1,70 @@
+"use server"
+
+import { getBoutique } from "@lib/boutique/config"
+import { sdk } from "@lib/config"
+import medusaError from "@lib/util/medusa-error"
+import { HttpTypes } from "@medusajs/types"
+import { getCacheOptions } from "./cookies"
+
+export const listRegions = async () => {
+  const next = {
+    ...(await getCacheOptions("regions")),
+  }
+
+  return sdk.client
+    .fetch<{ regions: HttpTypes.StoreRegion[] }>(`/store/regions`, {
+      method: "GET",
+      next,
+      cache: "force-cache",
+    })
+    .then(({ regions }) => regions)
+    .catch(medusaError)
+}
+
+export const retrieveRegion = async (id: string) => {
+  const next = {
+    ...(await getCacheOptions(["regions", id].join("-"))),
+  }
+
+  return sdk.client
+    .fetch<{ region: HttpTypes.StoreRegion }>(`/store/regions/${id}`, {
+      method: "GET",
+      next,
+      cache: "force-cache",
+    })
+    .then(({ region }) => region)
+    .catch(medusaError)
+}
+
+let boutiqueRegion: HttpTypes.StoreRegion | undefined
+
+/**
+ * Région de la boutique. Le seed crée une région par boutique, nommée par son slug
+ * (devise de la boutique + pays de shipsTo) : deux boutiques de même devise mais de
+ * pays différents ne se mélangent donc pas. À défaut, région avec sa devise et son pays.
+ * Fixée par la config de l'instance, jamais par l'URL ni par un cookie.
+ */
+export const getRegion = async (): Promise<HttpTypes.StoreRegion> => {
+  if (boutiqueRegion) return boutiqueRegion
+
+  const { country, currency, slug } = getBoutique()
+  const regions = (await listRegions()) ?? []
+
+  const region =
+    regions.find((r) => r.name === slug && r.currency_code?.toLowerCase() === currency) ??
+    regions.find(
+      (r) =>
+        r.currency_code?.toLowerCase() === currency &&
+        r.countries?.some((c) => c?.iso_2?.toLowerCase() === country)
+    )
+
+  if (!region) {
+    throw new Error(
+      `[boutique] aucune région Medusa pour ${slug} (pays « ${country} », devise « ${currency} »). ` +
+        `Régions disponibles : ${regions.map((r) => `${r.name} (${r.currency_code})`).join(", ") || "aucune"}`
+    )
+  }
+
+  boutiqueRegion = region
+  return region
+}

package/templates/storefront/src/lib/data/variants.ts

@@ -0,0 +1,38 @@
+"use server"
+
+import { sdk } from "@lib/config"
+import { HttpTypes } from "@medusajs/types"
+
+import { getAuthHeaders, getCacheOptions } from "./cookies"
+
+export const retrieveVariant = async (
+  variant_id: string
+): Promise<HttpTypes.StoreProductVariant | null> => {
+  const authHeaders = await getAuthHeaders()
+
+  if (!authHeaders) return null
+
+  const headers = {
+    ...authHeaders,
+  }
+
+  const next = {
+    ...(await getCacheOptions("variants")),
+  }
+
+  return await sdk.client
+    .fetch<{ variant: HttpTypes.StoreProductVariant }>(
+      `/store/product-variants/${variant_id}`,
+      {
+        method: "GET",
+        query: {
+          fields: "*images",
+        },
+        headers,
+        next,
+        cache: "force-cache",
+      }
+    )
+    .then(({ variant }) => variant)
+    .catch(() => null)
+}

package/templates/storefront/src/lib/hooks/use-in-view.tsx

@@ -0,0 +1,29 @@
+import { RefObject, useEffect, useState } from "react"
+
+export const useIntersection = (
+  element: RefObject<HTMLDivElement | null>,
+  rootMargin: string
+) => {
+  const [isVisible, setState] = useState(false)
+
+  useEffect(() => {
+    if (!element.current) {
+      return
+    }
+
+    const el = element.current
+
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        setState(entry.isIntersecting)
+      },
+      { rootMargin }
+    )
+
+    observer.observe(el)
+
+    return () => observer.unobserve(el)
+  }, [element, rootMargin])
+
+  return isVisible
+}

package/templates/storefront/src/lib/hooks/use-toggle-state.tsx

@@ -0,0 +1,46 @@
+import { useState } from "react"
+
+export type StateType = [boolean, () => void, () => void, () => void] & {
+  state: boolean
+  open: () => void
+  close: () => void
+  toggle: () => void
+}
+
+/**
+ *
+ * @param initialState - boolean
+ * @returns An array like object with `state`, `open`, `close`, and `toggle` properties
+ *  to allow both object and array destructuring
+ *
+ * ```
+ *  const [showModal, openModal, closeModal, toggleModal] = useToggleState()
+ *  // or
+ *  const { state, open, close, toggle } = useToggleState()
+ * ```
+ */
+
+const useToggleState = (initialState = false) => {
+  const [state, setState] = useState<boolean>(initialState)
+
+  const close = () => {
+    setState(false)
+  }
+
+  const open = () => {
+    setState(true)
+  }
+
+  const toggle = () => {
+    setState((state) => !state)
+  }
+
+  const hookData = [state, open, close, toggle] as StateType
+  hookData.state = state
+  hookData.open = open
+  hookData.close = close
+  hookData.toggle = toggle
+  return hookData
+}
+
+export default useToggleState

package/templates/storefront/src/lib/util/compare-addresses.ts

@@ -0,0 +1,28 @@
+import { isEqual, pick } from "lodash"
+
+export default function compareAddresses(address1: any, address2: any) {
+  return isEqual(
+    pick(address1, [
+      "first_name",
+      "last_name",
+      "address_1",
+      "company",
+      "postal_code",
+      "city",
+      "country_code",
+      "province",
+      "phone",
+    ]),
+    pick(address2, [
+      "first_name",
+      "last_name",
+      "address_1",
+      "company",
+      "postal_code",
+      "city",
+      "country_code",
+      "province",
+      "phone",
+    ])
+  )
+}

package/templates/storefront/src/lib/util/get-percentage-diff.ts

@@ -0,0 +1,6 @@
+export const getPercentageDiff = (original: number, calculated: number) => {
+  const diff = original - calculated
+  const decrease = (diff / original) * 100
+
+  return decrease.toFixed()
+}

package/templates/storefront/src/lib/util/get-product-price.ts

@@ -0,0 +1,79 @@
+import { HttpTypes } from "@medusajs/types"
+import { getPercentageDiff } from "./get-percentage-diff"
+import { convertToLocale } from "./money"
+
+export const getPricesForVariant = (variant: any) => {
+  if (!variant?.calculated_price?.calculated_amount) {
+    return null
+  }
+
+  return {
+    calculated_price_number: variant.calculated_price.calculated_amount,
+    calculated_price: convertToLocale({
+      amount: variant.calculated_price.calculated_amount,
+      currency_code: variant.calculated_price.currency_code,
+    }),
+    original_price_number: variant.calculated_price.original_amount,
+    original_price: convertToLocale({
+      amount: variant.calculated_price.original_amount,
+      currency_code: variant.calculated_price.currency_code,
+    }),
+    currency_code: variant.calculated_price.currency_code,
+    price_type: variant.calculated_price.calculated_price.price_list_type,
+    percentage_diff: getPercentageDiff(
+      variant.calculated_price.original_amount,
+      variant.calculated_price.calculated_amount
+    ),
+  }
+}
+
+export function getProductPrice({
+  product,
+  variantId,
+}: {
+  product: HttpTypes.StoreProduct
+  variantId?: string
+}) {
+  if (!product || !product.id) {
+    throw new Error("No product provided")
+  }
+
+  const cheapestPrice = () => {
+    if (!product || !product.variants?.length) {
+      return null
+    }
+
+    const cheapestVariant: any = product.variants
+      .filter((v: any) => !!v.calculated_price)
+      .sort((a: any, b: any) => {
+        return (
+          a.calculated_price.calculated_amount -
+          b.calculated_price.calculated_amount
+        )
+      })[0]
+
+    return getPricesForVariant(cheapestVariant)
+  }
+
+  const variantPrice = () => {
+    if (!product || !variantId) {
+      return null
+    }
+
+    const variant: any = product.variants?.find(
+      (v) => v.id === variantId || v.sku === variantId
+    )
+
+    if (!variant) {
+      return null
+    }
+
+    return getPricesForVariant(variant)
+  }
+
+  return {
+    product,
+    cheapestPrice: cheapestPrice(),
+    variantPrice: variantPrice(),
+  }
+}

package/templates/storefront/src/lib/util/isEmpty.ts

@@ -0,0 +1,11 @@
+export const isObject = (input: any) => input instanceof Object
+export const isArray = (input: any) => Array.isArray(input)
+export const isEmpty = (input: any) => {
+  return (
+    input === null ||
+    input === undefined ||
+    (isObject(input) && Object.keys(input).length === 0) ||
+    (isArray(input) && (input as any[]).length === 0) ||
+    (typeof input === "string" && input.trim().length === 0)
+  )
+}

package/templates/storefront/src/lib/util/medusa-error.ts

@@ -0,0 +1,22 @@
+export default function medusaError(error: any): never {
+  if (error.response) {
+    // The request was made and the server responded with a status code
+    // that falls out of the range of 2xx
+    const u = new URL(error.config.url, error.config.baseURL)
+    console.error("Resource:", u.toString())
+    console.error("Response data:", error.response.data)
+    console.error("Status code:", error.response.status)
+    console.error("Headers:", error.response.headers)
+
+    // Extracting the error message from the response data
+    const message = error.response.data.message || error.response.data
+
+    throw new Error(message.charAt(0).toUpperCase() + message.slice(1) + ".")
+  } else if (error.request) {
+    // The request was made but no response was received
+    throw new Error("No response received: " + error.request)
+  } else {
+    // Something happened in setting up the request that triggered an Error
+    throw new Error("Error setting up the request: " + error.message)
+  }
+}

package/templates/storefront/src/lib/util/money.ts

@@ -0,0 +1,35 @@
+import { isEmpty } from "./isEmpty"
+
+type ConvertToLocaleParams = {
+  amount: number
+  currency_code: string
+  minimumFractionDigits?: number
+  maximumFractionDigits?: number
+  locale?: string
+}
+
+/**
+ * Locale de l'instance (ex. "fr-FR") : côté serveur posée par getBoutique(),
+ * côté navigateur lue sur <html lang>. Serveur et client formatent donc pareil.
+ */
+const instanceLocale = () =>
+  typeof document !== "undefined"
+    ? document.documentElement.lang || "en-US"
+    : process.env.BOUTIQUE_LOCALE || "en-US"
+
+export const convertToLocale = ({
+  amount,
+  currency_code,
+  minimumFractionDigits,
+  maximumFractionDigits,
+  locale = instanceLocale(),
+}: ConvertToLocaleParams) => {
+  return currency_code && !isEmpty(currency_code)
+    ? new Intl.NumberFormat(locale, {
+        style: "currency",
+        currency: currency_code,
+        minimumFractionDigits,
+        maximumFractionDigits,
+      }).format(amount)
+    : amount.toString()
+}

package/templates/storefront/src/lib/util/product.ts

@@ -0,0 +1,5 @@
+import { HttpTypes } from "@medusajs/types";
+
+export const isSimpleProduct = (product: HttpTypes.StoreProduct): boolean => {
+    return product.options?.length === 1 && product.options[0].values?.length === 1;
+}

package/templates/storefront/src/lib/util/repeat.ts

@@ -0,0 +1,5 @@
+const repeat = (times: number) => {
+  return Array.from(Array(times).keys())
+}
+
+export default repeat

package/templates/storefront/src/lib/util/sort-products.ts

@@ -0,0 +1,50 @@
+import { HttpTypes } from "@medusajs/types"
+import { SortOptions } from "@modules/store/components/refinement-list/sort-products"
+
+interface MinPricedProduct extends HttpTypes.StoreProduct {
+  _minPrice?: number
+}
+
+/**
+ * Helper function to sort products by price until the store API supports sorting by price
+ * @param products
+ * @param sortBy
+ * @returns products sorted by price
+ */
+export function sortProducts(
+  products: HttpTypes.StoreProduct[],
+  sortBy: SortOptions
+): HttpTypes.StoreProduct[] {
+  let sortedProducts = products as MinPricedProduct[]
+
+  if (["price_asc", "price_desc"].includes(sortBy)) {
+    // Precompute the minimum price for each product
+    sortedProducts.forEach((product) => {
+      if (product.variants && product.variants.length > 0) {
+        product._minPrice = Math.min(
+          ...product.variants.map(
+            (variant) => variant?.calculated_price?.calculated_amount || 0
+          )
+        )
+      } else {
+        product._minPrice = Infinity
+      }
+    })
+
+    // Sort products based on the precomputed minimum prices
+    sortedProducts.sort((a, b) => {
+      const diff = a._minPrice! - b._minPrice!
+      return sortBy === "price_asc" ? diff : -diff
+    })
+  }
+
+  if (sortBy === "created_at") {
+    sortedProducts.sort((a, b) => {
+      return (
+        new Date(b.created_at!).getTime() - new Date(a.created_at!).getTime()
+      )
+    })
+  }
+
+  return sortedProducts
+}

package/templates/storefront/src/modules/account/components/account-info/index.tsx

@@ -0,0 +1,140 @@
+import { T } from "@lib/boutique/i18n-client"
+import { Disclosure } from "@headlessui/react"
+import { Badge, Button, clx } from "@medusajs/ui"
+import { useEffect } from "react"
+
+import useToggleState from "@lib/hooks/use-toggle-state"
+import { useFormStatus } from "react-dom"
+
+type AccountInfoProps = {
+  label: string
+  currentInfo: string | React.ReactNode
+  isSuccess?: boolean
+  isError?: boolean
+  errorMessage?: string
+  clearState: () => void
+  children?: React.ReactNode
+  'data-testid'?: string
+}
+
+const AccountInfo = ({
+  label,
+  currentInfo,
+  isSuccess,
+  isError,
+  clearState,
+  errorMessage = "account.error",
+  children,
+  'data-testid': dataTestid
+}: AccountInfoProps) => {
+  const { state, close, toggle } = useToggleState()
+
+  const { pending } = useFormStatus()
+
+  const handleToggle = () => {
+    clearState()
+    setTimeout(() => toggle(), 100)
+  }
+
+  useEffect(() => {
+    if (isSuccess) {
+      close()
+    }
+  }, [isSuccess, close])
+
+  return (
+    <div className="text-small-regular" data-testid={dataTestid}>
+      <div className="flex items-end justify-between">
+        <div className="flex flex-col">
+          <span className="uppercase text-ui-fg-base"><T k={label} /></span>
+          <div className="flex items-center flex-1 basis-0 justify-end gap-x-4">
+            {typeof currentInfo === "string" ? (
+              <span className="font-semibold" data-testid="current-info">{currentInfo}</span>
+            ) : (
+              currentInfo
+            )}
+          </div>
+        </div>
+        <div>
+          <Button
+            variant="secondary"
+            className="w-[100px] min-h-[25px] py-1"
+            onClick={handleToggle}
+            type={state ? "reset" : "button"}
+            data-testid="edit-button"
+            data-active={state}
+          >
+            {state ? "Cancel" : "Edit"}
+          </Button>
+        </div>
+      </div>
+
+      {/* Success state */}
+      <Disclosure>
+        <Disclosure.Panel
+          static
+          className={clx(
+            "transition-[max-height,opacity] duration-300 ease-in-out overflow-hidden",
+            {
+              "max-h-[1000px] opacity-100": isSuccess,
+              "max-h-0 opacity-0": !isSuccess,
+            }
+          )}
+          data-testid="success-message"
+        >
+          <Badge className="p-2 my-4" color="green">
+            <span><T k="account.updated" vars={{ field: "" }} /></span>
+          </Badge>
+        </Disclosure.Panel>
+      </Disclosure>
+
+      {/* Error state  */}
+      <Disclosure>
+        <Disclosure.Panel
+          static
+          className={clx(
+            "transition-[max-height,opacity] duration-300 ease-in-out overflow-hidden",
+            {
+              "max-h-[1000px] opacity-100": isError,
+              "max-h-0 opacity-0": !isError,
+            }
+          )}
+          data-testid="error-message"
+        >
+          <Badge className="p-2 my-4" color="red">
+            <span><T k={errorMessage} /></span>
+          </Badge>
+        </Disclosure.Panel>
+      </Disclosure>
+
+      <Disclosure>
+        <Disclosure.Panel
+          static
+          className={clx(
+            "transition-[max-height,opacity] duration-300 ease-in-out overflow-visible",
+            {
+              "max-h-[1000px] opacity-100": state,
+              "max-h-0 opacity-0": !state,
+            }
+          )}
+        >
+          <div className="flex flex-col gap-y-2 py-4">
+            <div>{children}</div>
+            <div className="flex items-center justify-end mt-2">
+              <Button
+                isLoading={pending}
+                className="w-full small:max-w-[140px]"
+                type="submit"
+                data-testid="save-button"
+              >
+                <T k="form.saveChanges" />
+              </Button>
+            </div>
+          </div>
+        </Disclosure.Panel>
+      </Disclosure>
+    </div>
+  )
+}
+
+export default AccountInfo