medusa-ui-common 2.0.0

package/src/common/components/delete-button/index.tsx

@@ -0,0 +1,158 @@
+"use client"
+
+import { deleteLineItem } from "medusa-storefront-data/cart"
+import { addToWishlist } from "medusa-wishlist-logic/server"
+import { Spinner, Trash } from "@medusajs/icons"
+import { clx, Button, Heading, Text } from "@medusajs/ui"
+import Modal from "medusa-ui-common/common/components/modal"
+import { useState } from "react"
+import { useWishlist } from "medusa-ui-common/context/wishlist-context"
+import { trackAddToWishlist } from "medusa-storefront-analytics"
+
+import Image from "next/image"
+import X from "medusa-ui-common/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) {
+      trackAddToWishlist({ content_ids: [productId] })
+      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/src/common/components/discount-code/index.tsx

@@ -0,0 +1,220 @@
+"use client"
+
+import { Badge, Heading, Input, Label, Text } from "@medusajs/ui"
+import React from "react"
+
+import { applyPromotions } from "medusa-storefront-data/cart"
+import { convertToLocale } from "medusa-ui-common/util/money"
+import { HttpTypes } from "@medusajs/types"
+import Trash from "medusa-ui-common/common/icons/trash"
+import ErrorMessage from "medusa-ui-common/common/components/error-message"
+import { SubmitButton } from "medusa-ui-common/common/components/submit-button"
+
+type DiscountCodeProps = {
+  cart: HttpTypes.StoreCart & {
+    promotions: HttpTypes.StorePromotion[]
+  }
+}
+
+const DiscountCode: React.FC<DiscountCodeProps> = ({ cart }) => {
+  const [isOpen, setIsOpen] = React.useState(false)
+  const [errorMessage, setErrorMessage] = React.useState("")
+  const [successMessage, setSuccessMessage] = React.useState("")
+
+  const { promotions = [] } = cart
+  const removePromotionCode = async (code: string) => {
+    const validPromotions = promotions.filter(
+      (promotion) => promotion.code !== code
+    )
+
+    await applyPromotions(
+      validPromotions.filter((p) => p.code !== undefined).map((p) => p.code!)
+    )
+    setSuccessMessage("")
+  }
+
+  const addPromotionCode = async (formData: FormData) => {
+    setErrorMessage("")
+    setSuccessMessage("")
+
+    const code = formData.get("code")
+    if (!code) {
+      return
+    }
+    const input = document.getElementById("promotion-input") as HTMLInputElement
+    const codes = promotions
+      .filter((p) => p.code !== undefined)
+      .map((p) => p.code!)
+    codes.push(code.toString())
+
+    try {
+      const updatedCart = await applyPromotions(codes)
+      const hasDiscount = (updatedCart?.discount_total || 0) > 0
+      
+      if (hasDiscount) {
+        setSuccessMessage("Coupon applied successfully!")
+      } else {
+        setErrorMessage("Coupon added, but it doesn't apply to the items in your bag.")
+      }
+    } catch (e: any) {
+      setErrorMessage("Invalid coupon code. Please check the code and try again.")
+    }
+
+    if (input) {
+      input.value = ""
+    }
+  }
+
+  return (
+    <div
+      className="border border-gray-200 rounded-lg p-6 flex flex-col"
+      style={{ width: '480px', maxWidth: '100%' }}
+    >
+      {/* COUPONS Heading */}
+      <Heading className="text-lg font-bold text-gray-900 mb-4 uppercase">
+        COUPONS
+      </Heading>
+
+      {/* Apply Coupons Button */}
+      <button
+        onClick={() => setIsOpen(!isOpen)}
+        type="button"
+        className="w-full rounded-lg p-4 flex items-center justify-between transition-colors border border-purple-200"
+        style={{ backgroundColor: '#D195FF33' }}
+        data-testid="add-discount-button"
+      >
+        <div className="flex items-center gap-3">
+          {/* Percentage Icon - White circle with black % symbol */}
+          <div className="w-10 h-10 rounded-full bg-white flex items-center justify-center flex-shrink-0 shadow-sm">
+            <span className="text-gray-900 font-bold text-xl">%</span>
+          </div>
+
+          {/* Text Content */}
+          <div className="flex flex-col items-start">
+            <span className="font-bold text-base text-gray-900">
+              Apply Coupons
+            </span>
+            <span className="text-sm text-gray-500">
+              View all offers
+            </span>
+          </div>
+        </div>
+
+        {/* Chevron Icon */}
+        <svg
+          className="w-5 h-5 text-gray-900"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M9 5l7 7-7 7"
+          />
+        </svg>
+      </button>
+
+      {/* Promotion Code Input Form */}
+      {isOpen && (
+        <form action={(a) => addPromotionCode(a)} className="w-full mt-4">
+          <div className="flex w-full gap-x-2">
+            <Input
+              className="size-full"
+              id="promotion-input"
+              name="code"
+              type="text"
+              autoFocus={false}
+              placeholder="Enter coupon code"
+              data-testid="discount-input"
+            />
+            <SubmitButton
+              variant="secondary"
+              className="!bg-[#8B5AB1] hover:!bg-[#7a4a9f] text-white border-0"
+              data-testid="discount-apply-button"
+            >
+              Apply
+            </SubmitButton>
+          </div>
+
+          <ErrorMessage
+            error={errorMessage}
+            data-testid="discount-error-message"
+          />
+
+          {successMessage && (
+            <div
+              className="mt-2 text-sm text-green-500"
+              data-testid="discount-success-message"
+            >
+              {successMessage}
+            </div>
+          )}
+        </form>
+      )}
+
+      {/* Applied Promotions - Clean Card Redesign */}
+      {promotions.length > 0 && (
+        <div className="w-full flex flex-col mt-6 pt-4 border-t border-gray-100">
+          <Heading className="text-sm font-bold mb-3 text-gray-900 uppercase tracking-tight">
+            Promotion(s) applied:
+          </Heading>
+
+          <div className="flex flex-col gap-y-2">
+            {promotions.map((promotion) => {
+              return (
+                <div
+                  key={promotion.id}
+                  className="flex items-center justify-between w-full p-3 rounded-xl border border-purple-100 bg-purple-50/50 transition-all hover:bg-purple-50 group"
+                  data-testid="discount-row"
+                >
+                  <div className="flex items-center gap-x-3 overflow-hidden">
+                    {/* Tag Icon */}
+                    <div className="flex-shrink-0 text-[#8B5AB1]">
+                      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
+                        <path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"></path>
+                        <line x1="7" y1="7" x2="7.01" y2="7"></line>
+                      </svg>
+                    </div>
+
+                    <div className="flex flex-col overflow-hidden">
+                      <span className="font-bold truncate text-sm uppercase tracking-wider" style={{ color: '#8B5AB1' }} data-testid="discount-code">
+                        {promotion.code}
+                      </span>
+                      {promotion.application_method?.value !== undefined && (
+                        <span className="text-xs font-bold" style={{ color: '#FE5FB7' }}>
+                          {promotion.application_method.type === "percentage"
+                            ? `${promotion.application_method.value}% OFF`
+                            : `${convertToLocale({
+                                amount: +promotion.application_method.value,
+                                currency_code: promotion.application_method.currency_code || "INR",
+                              })} OFF`}
+                        </span>
+                      )}
+                    </div>
+                  </div>
+
+                  {!promotion.is_automatic && (
+                    <button
+                      className="p-2 text-gray-400 hover:text-red-500 hover:bg-red-50 rounded-full transition-all"
+                      onClick={() => {
+                        if (!promotion.code) return
+                        removePromotionCode(promotion.code)
+                      }}
+                      data-testid="remove-discount-button"
+                    >
+                      <Trash size={16} />
+                    </button>
+                  )}
+                </div>
+              )
+            })}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default DiscountCode

package/src/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/src/common/components/error-message/index.tsx

@@ -0,0 +1,13 @@
+const ErrorMessage = ({ error, 'data-testid': dataTestid }: { error?: string | null, 'data-testid'?: string }) => {
+  if (!error) {
+    return null
+  }
+
+  return (
+    <div className="pt-2 text-rose-500 text-small-regular" data-testid={dataTestid}>
+      <span>{error}</span>
+    </div>
+  )
+}
+
+export default ErrorMessage

package/src/common/components/filter-checkbox-group/index.tsx

@@ -0,0 +1,134 @@
+import { Heading } from "@medusajs/ui"
+import CheckboxWithLabel from "medusa-ui-common/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/src/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/src/common/components/input/index.tsx

@@ -0,0 +1,79 @@
+import { Label } from "@medusajs/ui"
+import React, { useEffect, useImperativeHandle, useState } from "react"
+
+import Eye from "medusa-ui-common/common/icons/eye"
+import EyeOff from "medusa-ui-common/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