@pradip1995/create-storefront 1.0.1

package/templates/storefront/src/modules/products/components/related-products/index.tsx

@@ -0,0 +1,152 @@
+'use client'
+
+import React, { useState, useEffect } from "react"
+import { listProducts } from "@core/data/products"
+import { getRegion } from "@core/data/regions"
+import { HttpTypes } from "@medusajs/types"
+import ProductCard from "@registry/components/product-card"
+
+type RelatedProductsProps = {
+  product: HttpTypes.StoreProduct
+  countryCode: string
+}
+
+export default function RelatedProducts({
+  product,
+  countryCode,
+}: RelatedProductsProps) {
+  const [region, setRegion] = useState<HttpTypes.StoreRegion | null>(null)
+  const [allProducts, setAllProducts] = useState<HttpTypes.StoreProduct[]>([])
+  const [currentIndex, setCurrentIndex] = useState(0)
+
+  // Fetch data on client side
+  useEffect(() => {
+    async function fetchData() {
+      const fetchedRegion = await getRegion(countryCode)
+      if (!fetchedRegion) {
+        return
+      }
+      setRegion(fetchedRegion)
+
+      const queryParams: HttpTypes.StoreProductListParams = {
+        limit: 20, // Fetch more products for carousel
+        is_giftcard: false,
+      }
+
+      if (fetchedRegion?.id) {
+        queryParams.region_id = fetchedRegion.id
+      }
+      if (product.collection_id) {
+        queryParams.collection_id = [product.collection_id]
+      }
+      if (product.tags) {
+        queryParams.tag_id = product.tags
+          .map((t) => t.id)
+          .filter(Boolean) as string[]
+      }
+
+      const result = await listProducts({
+        queryParams,
+        countryCode,
+      })
+
+      if (result && result.response) {
+        setAllProducts(
+          result.response.products.filter(
+            (responseProduct) => responseProduct.id !== product.id
+          )
+        )
+      } else {
+        setAllProducts([])
+      }
+    }
+    fetchData()
+  }, [product, countryCode])
+
+  // Get current 4 products to display
+  const currentProducts = allProducts.slice(currentIndex, currentIndex + 4)
+  const maxIndex = Math.max(0, allProducts.length - 4)
+
+  const handlePrevious = () => {
+    setCurrentIndex((prev) => Math.max(0, prev - 4))
+  }
+
+  const handleNext = () => {
+    setCurrentIndex((prev) => Math.min(maxIndex, prev + 4))
+  }
+
+  if (!region || !allProducts.length) {
+    return null
+  }
+
+  const canGoPrevious = currentIndex > 0
+  const canGoNext = currentIndex < maxIndex
+
+  return (
+    <>
+      <div className="mt-16 pt-8">
+        <div className="flex items-center justify-between mb-8">
+          <h2 className="text-2xl font-bold text-gray-900">
+            You May Also Like
+          </h2>
+          <div className="flex items-center gap-2">
+            <button
+              onClick={handlePrevious}
+              disabled={!canGoPrevious}
+              className={`w-10 h-10 rounded-full bg-white border border-gray-300 flex items-center justify-center transition-colors ${canGoPrevious
+                ? 'hover:bg-gray-50 cursor-pointer'
+                : 'opacity-50 cursor-not-allowed'
+                }`}
+              aria-label="Previous products"
+            >
+              <svg
+                width="16"
+                height="16"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="black"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              >
+                <polyline points="15 18 9 12 15 6"></polyline>
+              </svg>
+            </button>
+            <button
+              onClick={handleNext}
+              disabled={!canGoNext}
+              className={`w-10 h-10 rounded-full bg-[#8B5AB1] flex items-center justify-center transition-colors ${canGoNext
+                ? 'hover:bg-[#7a4a9a] cursor-pointer'
+                : 'opacity-50 cursor-not-allowed'
+                }`}
+              aria-label="Next products"
+            >
+              <svg
+                width="16"
+                height="16"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="white"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              >
+                <polyline points="9 18 15 12 9 6"></polyline>
+              </svg>
+            </button>
+          </div>
+        </div>
+
+        <div className="related-products-container">
+          <ul className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3 sm:gap-4 md:gap-5 lg:gap-6 justify-items-center">
+            {currentProducts.map((product) => (
+              <li key={product.id} className="w-full flex justify-center">
+                <ProductCard region={region} product={product} />
+              </li>
+            ))}
+          </ul>
+        </div>
+      </div>
+    </>
+  )
+}

package/templates/storefront/src/modules/products/components/review-modal/index.tsx

@@ -0,0 +1 @@
+export { default } from "@modules/common/components/product/review-modal"

package/templates/storefront/src/modules/products/components/share-button/index.tsx

@@ -0,0 +1 @@
+export { default } from "@modules/common/components/product/share-button"

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

@@ -0,0 +1,91 @@
+import { Container, clx } from "@medusajs/ui"
+import Image from "next/image"
+import React from "react"
+
+import PlaceholderImage from "@modules/common/icons/placeholder-image"
+
+type ThumbnailProps = {
+  thumbnail?: string | null
+  // TODO: Fix image typings
+  images?: any[] | null
+  variantImages?: any[] | null // Variant-specific images (highest priority)
+  size?: "small" | "medium" | "large" | "full" | "square"
+  isFeatured?: boolean
+  className?: string
+  "data-testid"?: string
+}
+
+// Function to get the first variant image (prioritize variant images)
+const getFilteredVariantImage = (
+  variantImages: any[] | null | undefined,
+  thumbnail: string | null | undefined,
+  productImages: any[] | null | undefined
+): string | null => {
+  if (!variantImages || variantImages.length === 0) {
+    return null
+  }
+
+  // If variant images exist, always use the first variant image
+  // This ensures the correct variant image is shown even if it matches product images
+  // The variant image is what the user selected, so it should be prioritized
+  return variantImages[0]?.url || null
+}
+
+const Thumbnail: React.FC<ThumbnailProps> = ({
+  thumbnail,
+  images,
+  variantImages,
+  size = "small",
+  isFeatured,
+  className,
+  "data-testid": dataTestid,
+}) => {
+  // Priority: filtered variantImages (first image) > thumbnail > images
+  // Filter out common images from variant images
+  const filteredVariantImage = getFilteredVariantImage(variantImages, thumbnail, images)
+  const initialImage = filteredVariantImage || thumbnail || images?.[0]?.url
+
+  return (
+    <Container
+      className={clx(
+        "relative w-full overflow-hidden p-4 bg-ui-bg-subtle shadow-elevation-card-rest rounded-large group-hover:shadow-elevation-card-hover transition-shadow ease-in-out duration-150",
+        className,
+        {
+          "aspect-[11/14]": isFeatured,
+          "aspect-[9/16]": !isFeatured && size !== "square",
+          "aspect-[1/1]": size === "square",
+          "w-[180px]": size === "small",
+          "w-[290px]": size === "medium",
+          "w-[440px]": size === "large",
+          "w-full": size === "full",
+        }
+      )}
+      data-testid={dataTestid}
+    >
+      <ImageOrPlaceholder image={initialImage} size={size} />
+    </Container>
+  )
+}
+
+const ImageOrPlaceholder = ({
+  image,
+  size,
+}: Pick<ThumbnailProps, "size"> & { image?: string }) => {
+  return image ? (
+    <Image
+      src={image}
+      alt="Thumbnail"
+      className="absolute inset-0 object-cover object-center"
+      draggable={false}
+      quality={50}
+      sizes="(max-width: 576px) 280px, (max-width: 768px) 360px, (max-width: 992px) 480px, 800px"
+      fill
+    />
+  ) : (
+    <div className="w-full h-full absolute inset-0 flex items-center justify-center">
+      <PlaceholderImage size={size === "small" ? 16 : 24} />
+    </div>
+  )
+}
+
+export default Thumbnail

package/templates/storefront/src/modules/products/components/wishlist-icon/index.tsx

@@ -0,0 +1 @@
+export { default } from "@modules/common/components/product/wishlist-icon"

package/templates/storefront/src/modules/products/context/product-context.tsx

@@ -0,0 +1,52 @@
+"use client"
+
+import React, { createContext, useContext, useState, useEffect } from "react"
+import { useSearchParams } from "next/navigation"
+
+interface ProductContextType {
+    selectedVariantId: string | undefined
+    selectedOptions: Record<string, string | undefined>
+    setSelectedVariantId: (id: string | undefined) => void
+    setSelectedOptions: (options: Record<string, string | undefined>) => void
+}
+
+const ProductContext = createContext<ProductContextType | undefined>(undefined)
+
+export const ProductProvider = ({ children }: { children: React.ReactNode }) => {
+    const searchParams = useSearchParams()
+    const initialVariantId = searchParams.get("v_id") || undefined
+    const [selectedVariantId, setSelectedVariantId] = useState<string | undefined>(
+        initialVariantId
+    )
+    const [selectedOptions, setSelectedOptions] = useState<
+        Record<string, string | undefined>
+    >({})
+
+    useEffect(() => {
+        const vId = searchParams.get("v_id")
+        if (vId) {
+            setSelectedVariantId(vId)
+        }
+    }, [searchParams])
+
+    return (
+        <ProductContext.Provider
+            value={{
+                selectedVariantId,
+                selectedOptions,
+                setSelectedVariantId,
+                setSelectedOptions,
+            }}
+        >
+            {children}
+        </ProductContext.Provider>
+    )
+}
+
+export const useProductContext = () => {
+    const context = useContext(ProductContext)
+    if (context === undefined) {
+        throw new Error("useProductContext must be used within a ProductProvider")
+    }
+    return context
+}

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

@@ -0,0 +1,26 @@
+import { ProductPage } from "@controllers/product/product-page"
+import { HttpTypes } from "@medusajs/types"
+
+type ProductTemplateProps = {
+  product: HttpTypes.StoreProduct
+  region: HttpTypes.StoreRegion
+  countryCode: string
+  images: HttpTypes.StoreProductImage[]
+  selectedVariantId?: string | null
+}
+
+export default async function ProductTemplate({
+  product,
+  region,
+  countryCode,
+  images,
+}: ProductTemplateProps) {
+  return (
+    <ProductPage
+      product={product}
+      region={region}
+      countryCode={countryCode}
+      images={images}
+    />
+  )
+}

package/templates/storefront/src/modules/products/templates/product-actions-wrapper/index.tsx

@@ -0,0 +1 @@
+export { default } from "@controllers/product/product-actions-wrapper"

package/templates/storefront/src/modules/products/templates/product-info/index.tsx

@@ -0,0 +1,2 @@
+/** @deprecated Use theme slot via registry in controllers. */
+export { default } from "@theme/slots/product/ProductInfo"

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

@@ -0,0 +1,283 @@
+"use client"
+
+import { convertToLocale } from "@core/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" />{" "}
+                Free Shipping unlocked!
+              </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-black text-white 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" />{" "}
+                    Free Shipping unlocked!
+                  </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"
+          >
+            View cart
+          </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"
+          >
+            View products
+          </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