@pradip1995/create-storefront 1.0.1

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

@@ -0,0 +1,156 @@
+"use client"
+
+import { deleteLineItem } from "@core/data/cart"
+import { addToWishlist } from "@core/data/wishlist"
+import { Spinner, Trash } from "@medusajs/icons"
+import { clx, Button, Heading, Text } from "@medusajs/ui"
+import Modal from "@modules/common/components/modal"
+import { useState } from "react"
+import { useWishlist } from "@core/context/wishlist-context"
+
+import Image from "next/image"
+import X from "@modules/common/icons/x"
+
+const DeleteButton = ({
+  id,
+  productId,
+  thumbnail,
+  children,
+  className,
+  onAfterDelete,
+  "data-testid": dataTestId,
+}: {
+  id: string
+  productId?: string
+  thumbnail?: string | null
+  children?: React.ReactNode
+  className?: string
+  onAfterDelete?: () => void
+  "data-testid"?: string
+}) => {
+  const [isDeleting, setIsDeleting] = useState(false)
+  const [showModal, setShowModal] = useState(false)
+  const [wishlistLoading, setWishlistLoading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const { refreshWishlist } = useWishlist()
+
+  const handleDelete = async () => {
+    setIsDeleting(true)
+    setShowModal(false)
+    try {
+      await deleteLineItem(id)
+      onAfterDelete?.()
+    } catch {
+      // keep isDeleting false on error
+    } finally {
+      setIsDeleting(false)
+    }
+  }
+
+  const handleMoveToWishlist = async () => {
+    if (!productId) {
+      handleDelete()
+      return
+    }
+    
+    setWishlistLoading(true)
+    setError(null)
+    
+    const result = await addToWishlist(productId)
+    
+    if (result.success) {
+      await refreshWishlist()
+      await handleDelete()
+    } else {
+      setError(result.error || "Please login to move items to wishlist.")
+      setWishlistLoading(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 items-center"
+          onClick={() => setShowModal(true)}
+          data-testid={dataTestId}
+        >
+          {isDeleting ? <Spinner className="animate-spin" /> : <Trash />}
+          <span>{children}</span>
+        </button>
+      </div>
+
+      <Modal isOpen={showModal} close={() => setShowModal(false)} size="medium">
+        <div className="flex flex-col bg-white overflow-hidden rounded-sm relative">
+          {/* Close Icon */}
+          <button 
+            onClick={() => setShowModal(false)}
+            className="absolute top-4 right-4 text-black hover:opacity-70 transition-opacity z-10"
+          >
+            <X size={24} />
+          </button>
+
+          {/* Body Content */}
+          <div className="p-6 flex gap-6 pr-12">
+            {/* Product Thumbnail */}
+            <div className="w-24 h-24 sm:w-28 sm:h-28 flex-shrink-0 bg-gray-50 rounded-sm overflow-hidden border border-gray-100 shadow-sm">
+              {thumbnail ? (
+                <Image 
+                  src={thumbnail} 
+                  alt="Product" 
+                  width={120} 
+                  height={120} 
+                  className="w-full h-full object-cover"
+                />
+              ) : (
+                <div className="w-full h-full flex items-center justify-center text-gray-300 bg-gray-50 uppercase text-[10px] font-bold">No Image</div>
+              )}
+            </div>
+
+            {/* Title and Description */}
+            <div className="flex flex-col justify-center">
+              <h3 className="text-[17px] font-bold text-gray-800 mb-1.5 leading-tight">Move from Bag</h3>
+              <p className="text-[15px] text-gray-500 leading-snug font-medium max-w-[280px]">
+                Are you sure you want to move this item from bag?
+              </p>
+              
+              {error && (
+                <p className="text-red-500 text-[11px] font-bold mt-2 uppercase tracking-wide">{error}</p>
+              )}
+            </div>
+          </div>
+
+          {/* Footer with side-by-side buttons and separator */}
+          <div className="flex border-t border-gray-100 h-[52px]">
+            <button
+              onClick={handleDelete}
+              disabled={isDeleting}
+              className="flex-1 h-full flex items-center justify-center text-[13px] font-bold text-gray-500 tracking-wider hover:bg-gray-50 transition-colors uppercase"
+            >
+              {isDeleting ? <Spinner className="animate-spin" /> : "REMOVE"}
+            </button>
+            
+            {/* Vertical Separator */}
+            <div className="w-px bg-gray-100 h-full" />
+
+            <button
+              onClick={handleMoveToWishlist}
+              disabled={wishlistLoading}
+              className="flex-1 h-full flex items-center justify-center text-[13px] font-bold tracking-wider hover:bg-gray-50 transition-colors uppercase"
+              style={{ color: '#D25C78' }} // Pinkish color from reference
+            >
+              {wishlistLoading ? <Spinner className="animate-spin" /> : "MOVE TO WISHLIST"}
+            </button>
+          </div>
+        </div>
+      </Modal>
+    </>
+  )
+}
+
+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-checkbox-group/index.tsx

@@ -0,0 +1,134 @@
+import { Heading } from "@medusajs/ui"
+import CheckboxWithLabel from "@modules/common/components/checkbox"
+import React from "react"
+
+type FilterCheckboxGroupProps = {
+    title: string
+    items: { value: string; label: string }[]
+    values: string[]
+    handleChange: (value: string) => void
+    isColor?: boolean
+    'data-testid'?: string
+}
+
+const FilterCheckboxGroup = ({
+    title,
+    items,
+    values,
+    handleChange,
+    isColor,
+    'data-testid': dataTestId,
+}: FilterCheckboxGroupProps) => {
+    const [isOpen, setIsOpen] = React.useState(true)
+    const [showAll, setShowAll] = React.useState(false)
+
+    // Optimistic local state — reflects clicks instantly without waiting for server
+    const [optimisticValues, setOptimisticValues] = React.useState<string[]>(values)
+
+    // Sync back when server props update (after navigation completes)
+    React.useEffect(() => {
+        setOptimisticValues(values)
+    }, [values])
+
+    const initialItemsCount = 6
+    const hasMore = items?.length > initialItemsCount
+
+    // Auto-expand if a selected item is hidden or if any item is selected
+    React.useEffect(() => {
+        if (values && values.length > 0) {
+            setIsOpen(true)
+            if (hasMore && items) {
+                const hiddenItems = items.slice(initialItemsCount)
+                const isAnyHiddenItemSelected = hiddenItems.some(item => values.includes(item.value))
+                if (isAnyHiddenItemSelected) {
+                    setShowAll(true)
+                }
+            }
+        }
+    }, [values, items, hasMore])
+
+    const handleOptimisticChange = (value: string) => {
+        // Immediately toggle locally — no flicker
+        setOptimisticValues((prev) =>
+            prev.includes(value) ? prev.filter((v) => v !== value) : [...prev, value]
+        )
+        // Trigger actual URL navigation in background
+        handleChange(value)
+    }
+
+    const displayedItems = showAll ? items : items?.slice(0, initialItemsCount)
+
+    return (
+        <div className="flex flex-col border-b border-gray-100 pb-4 last:border-0 last:pb-0">
+            <button
+                onClick={() => setIsOpen(!isOpen)}
+                className="flex items-center justify-between w-full group transition-all py-1"
+            >
+                <Heading
+                    level="h3"
+                    className="text-sm font-bold text-gray-900 uppercase tracking-wider group-hover:text-[#8B5AB1] transition-colors"
+                >
+                    {title}
+                </Heading>
+                <span
+                    className={`transform transition-transform duration-300 text-gray-400 group-hover:text-[#8B5AB1] ${isOpen ? "" : "-rotate-180"}`}
+                >
+                    <svg
+                        width="18"
+                        height="18"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        strokeWidth="2.5"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                    >
+                        <polyline points="18 15 12 9 6 15"></polyline>
+                    </svg>
+                </span>
+            </button>
+
+            <div
+                className={`flex flex-col gap-y-1 transition-all duration-300 ease-in-out ${isOpen ? "mt-3 opacity-100 px-0.5" : "max-h-0 opacity-0 invisible overflow-hidden"}`}
+                style={isOpen ? { maxHeight: showAll ? '1000px' : '300px' } : {}}
+            >
+                {displayedItems?.map((i) => (
+                    <CheckboxWithLabel
+                        key={i.value}
+                        label={i.label}
+                        color={isColor ? i.value : undefined}
+                        checked={optimisticValues.includes(i.value)}
+                        onChange={() => handleOptimisticChange(i.value)}
+                        data-testid={dataTestId}
+                        data-ga-event="filter_checkbox_click"
+                        data-ga-label={`${title} - ${i.label}`}
+                    />
+                ))}
+
+                {hasMore && isOpen && (
+                    <button
+                        onClick={() => setShowAll(!showAll)}
+                        className="text-xs font-bold text-[#8B5AB1] hover:underline mt-2 flex items-center gap-1 uppercase tracking-tight"
+                    >
+                        {showAll ? "View Less" : `View More (${items.length - initialItemsCount})`}
+                        <svg
+                            width="12"
+                            height="12"
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                            strokeWidth="3"
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            className={`transform transition-transform ${showAll ? "rotate-180" : ""}`}
+                        >
+                            <polyline points="6 9 12 15 18 9"></polyline>
+                        </svg>
+                    </button>
+                )}
+            </div>
+        </div>
+    )
+}
+
+export default FilterCheckboxGroup

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

@@ -0,0 +1,62 @@
+import { EllipseMiniSolid } from "@medusajs/icons"
+import { Label, RadioGroup, Text, clx } from "@medusajs/ui"
+
+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">{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}
+              data-ga-event="filter_sort_click"
+              data-ga-label={i.label}
+            >
+              {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 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, ...props }, ref) => {
+    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">{topLabel}</Label>
+        )}
+        <div className="flex relative z-0 w-full txt-compact-medium overflow-visible">
+          <input
+            type={inputType}
+            name={name}
+            placeholder=" "
+            required={required}
+            className="peer pt-6 pb-2 block w-full h-12 px-4 mt-0 bg-white border rounded-md appearance-none focus:outline-none focus:border-[#8B5AB1] focus:ring-0 hover:bg-gray-50 transition-colors duration-200 antialiased"
+            style={{ borderColor: '#C0C0C0' }}
+            {...props}
+            ref={inputRef}
+          />
+          {label && (
+            <label
+              htmlFor={name}
+              onClick={() => inputRef.current?.focus()}
+              className="flex items-center justify-center absolute left-4 px-1 transition-all duration-300 top-1/2 -translate-y-1/2 origin-0 text-ui-fg-subtle pointer-events-none peer-focus:top-2 peer-focus:translate-y-0 peer-focus:text-[11px] peer-focus:text-[#8B5AB1] peer-focus:z-10 peer-[:not(:placeholder-shown)]:top-2 peer-[:not(:placeholder-shown)]:translate-y-0 peer-[:not(:placeholder-shown)]:text-[11px] peer-[:not(:placeholder-shown)]:z-10"
+            >
+              {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,64 @@
+import { getPercentageDiff } from "@core/util/get-percentage-diff"
+import { convertToLocale } from "@core/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 { total, original_total } = item
+  const originalPrice = original_total
+  const currentPrice = total
+  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,61 @@
+import { convertToLocale } from "@core/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, original_total } = item
+  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,32 @@
+"use client"
+
+import Link from "next/link"
+import { useParams } from "next/navigation"
+import React from "react"
+
+/**
+ * Use this component to create a Next.js `<Link />` that persists the current country code in the url,
+ * without having to explicitly pass it as a prop.
+ */
+const LocalizedClientLink = ({
+  children,
+  href,
+  ...props
+}: {
+  children?: React.ReactNode
+  href: string
+  className?: string
+  onClick?: () => void
+  passHref?: true
+  [x: string]: any
+}) => {
+  const { countryCode } = useParams()
+
+  return (
+    <Link href={`/${countryCode}${href}`} {...props}>
+      {children}
+    </Link>
+  )
+}
+
+export default LocalizedClientLink