medusa-ui-common 2.0.0

package/src/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/src/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/src/common/components/line-item-price/index.tsx

@@ -0,0 +1,64 @@
+import { getPercentageDiff } from "medusa-ui-common/util/get-percentage-diff"
+import { convertToLocale } from "medusa-ui-common/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 ?? 0
+  const currentPrice = 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/src/common/components/line-item-unit-price/index.tsx

@@ -0,0 +1,64 @@
+import { convertToLocale } from "medusa-ui-common/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 lineTotal = total ?? 0
+  const lineOriginal = original_total ?? lineTotal
+  const hasReducedPrice = lineTotal < lineOriginal
+
+  const percentage_diff =
+    lineOriginal > 0
+      ? Math.round(((lineOriginal - lineTotal) / lineOriginal) * 100)
+      : 0
+
+  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: lineOriginal / 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: lineTotal / item.quantity,
+          currency_code: currencyCode,
+        })}
+      </span>
+    </div>
+  )
+}
+
+export default LineItemUnitPrice

package/src/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

package/src/common/components/login-popup/index.tsx

@@ -0,0 +1,78 @@
+"use client"
+
+import { useRouter, usePathname } from "next/navigation"
+
+interface LoginPopupProps {
+  isOpen: boolean
+  onClose: () => void
+  countryCode?: string
+  message?: string
+}
+
+export default function LoginPopup({ isOpen, onClose, countryCode = "us", message = "Please login to add products to your wishlist." }: LoginPopupProps) {
+  const router = useRouter()
+  const pathname = usePathname()
+
+  const handleLoginClick = () => {
+    // Store current URL in localStorage for redirect after login
+    if (typeof window !== "undefined") {
+      const currentPath = pathname || window.location.pathname
+      // Add a special marker so the login component knows to keep the user on this page
+      const redirectWithContext = currentPath.includes('?')
+        ? `${currentPath}&login_context=keep`
+        : `${currentPath}?login_context=keep`
+
+      localStorage.setItem("loginRedirectUrl", redirectWithContext)
+    }
+    router.push(`/${countryCode}/account`)
+  }
+
+  if (!isOpen) {
+    return null
+  }
+
+  return (
+    <div className="fixed inset-0 z-[9999] flex items-center justify-center bg-white/10 backdrop-blur-md p-4 animate-in fade-in duration-200">
+      <div
+        className="bg-[#FFFAFE] rounded-2xl shadow-2xl p-8 max-w-sm w-full mx-auto border border-gray-100 transform transition-all scale-100 animate-in zoom-in-95 duration-200"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className="text-center">
+          <div className="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-purple-100 mb-4">
+            <svg className="h-6 w-6 text-[#8B5AB1]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
+            </svg>
+          </div>
+          <h2 className="text-xl font-bold text-gray-900 mb-2">
+            Login Required
+          </h2>
+          <p className="text-gray-500 mb-8 text-sm leading-relaxed">
+            {message}
+          </p>
+
+          <div className="grid grid-cols-2 gap-3">
+            <button
+              onClick={onClose}
+              className="px-4 py-2.5 border border-gray-200 rounded-xl font-semibold text-gray-600 hover:bg-gray-50 hover:border-gray-300 active:scale-95 transition-all duration-200"
+            >
+              Cancel
+            </button>
+            <button
+              onClick={handleLoginClick}
+              className="px-4 py-2.5 rounded-xl font-semibold text-white transition-all duration-200 hover:shadow-lg hover:shadow-purple-100 active:scale-95"
+              style={{ backgroundColor: '#8B5AB1' }}
+              onMouseEnter={(e) => {
+                e.currentTarget.style.backgroundColor = '#7a4a9a'
+              }}
+              onMouseLeave={(e) => {
+                e.currentTarget.style.backgroundColor = '#8B5AB1'
+              }}
+            >
+              Login
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/common/components/modal/index.tsx

@@ -0,0 +1,123 @@
+import { Dialog, Transition } from "@headlessui/react"
+import { clx } from "@medusajs/ui"
+import React, { Fragment } from "react"
+
+import { ModalProvider, useModal } from "medusa-ui-common/context/modal-context"
+import X from "medusa-ui-common/common/icons/x"
+
+type ModalProps = {
+  isOpen: boolean
+  close: () => void
+  size?: "tiny" | "xsmall" | "small" | "medium" | "large"
+  search?: boolean
+  children: React.ReactNode
+  'data-testid'?: string
+}
+
+const Modal = ({
+  isOpen,
+  close,
+  size = "medium",
+  search = false,
+  children,
+  'data-testid': dataTestId
+}: ModalProps) => {
+  return (
+    <Transition appear show={isOpen} as={Fragment}>
+      <Dialog as="div" className="relative z-[75]" onClose={close}>
+        <Transition.Child
+          as={Fragment}
+          enter="ease-out duration-300"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="ease-in duration-200"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <div className="fixed inset-0 bg-opacity-75 backdrop-blur-md  h-screen" />
+        </Transition.Child>
+
+        <div className="fixed inset-0 overflow-y-hidden">
+          <div
+            className={clx(
+              "flex min-h-full h-full justify-center p-4 text-center",
+              {
+                "items-center": !search,
+                "items-start": search,
+              }
+            )}
+          >
+            <Transition.Child
+              as={Fragment}
+              enter="ease-out duration-300"
+              enterFrom="opacity-0 scale-95"
+              enterTo="opacity-100 scale-100"
+              leave="ease-in duration-200"
+              leaveFrom="opacity-100 scale-100"
+              leaveTo="opacity-0 scale-95"
+            >
+              <Dialog.Panel
+                data-testid={dataTestId}
+                className={clx(
+                  "flex flex-col justify-start w-full transform p-0 text-left align-middle transition-all max-h-[90vh] overflow-hidden bg-white shadow-xl border rounded-[32px]",
+                  {
+                    "max-w-[320px] mx-auto": size === "tiny",
+                    "max-w-[320px] min-[400px]:max-w-[400px] min-[640px]:max-w-[450px] mx-auto": size === "xsmall",
+                    "max-w-md": size === "small",
+                    "max-w-xl": size === "medium",
+                    "max-w-3xl": size === "large",
+                    "bg-transparent shadow-none": search,
+                  }
+                )}
+              >
+                <ModalProvider close={close}>
+                  <div className="flex flex-col flex-1 h-full overflow-hidden">
+                    {children}
+                  </div>
+                </ModalProvider>
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition>
+  )
+}
+
+const Title: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const { close } = useModal()
+
+  return (
+    <Dialog.Title className="flex items-center justify-between px-6 small:px-8 py-5 border-b border-gray-100 flex-shrink-0">
+      <div className="text-xl small:text-2xl font-bold text-gray-900">{children}</div>
+      <div>
+        <button onClick={close} data-testid="close-modal-button" className="p-2 hover:bg-gray-100 rounded-full transition-colors text-gray-500">
+          <X size={24} />
+        </button>
+      </div>
+    </Dialog.Title>
+  )
+}
+
+const Description: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  return (
+    <Dialog.Description className="flex text-small-regular text-ui-fg-base items-center justify-center pt-2 pb-4 h-full">
+      {children}
+    </Dialog.Description>
+  )
+}
+
+const Body: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  return <div className="p-6 small:p-8 overflow-y-auto [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none] flex-1">{children}</div>
+}
+
+const Footer: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  return <div className="flex items-center justify-end gap-x-4 px-6 small:px-8 py-5 border-t border-gray-100 flex-shrink-0">{children}</div>
+}
+
+Modal.Title = Title
+Modal.Description = Description
+Modal.Body = Body
+Modal.Footer = Footer
+
+export default Modal

package/src/common/components/native-select/index.tsx

@@ -0,0 +1,75 @@
+import { ChevronUpDown } from "@medusajs/icons"
+import { clx } from "@medusajs/ui"
+import {
+  SelectHTMLAttributes,
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from "react"
+
+export type NativeSelectProps = {
+  placeholder?: string
+  errors?: Record<string, unknown>
+  touched?: Record<string, unknown>
+} & SelectHTMLAttributes<HTMLSelectElement>
+
+const NativeSelect = forwardRef<HTMLSelectElement, NativeSelectProps>(
+  (
+    { placeholder = "Select...", defaultValue, className, children, ...props },
+    ref
+  ) => {
+    const innerRef = useRef<HTMLSelectElement>(null)
+    const [isPlaceholder, setIsPlaceholder] = useState(false)
+
+    useImperativeHandle<HTMLSelectElement | null, HTMLSelectElement | null>(
+      ref,
+      () => innerRef.current
+    )
+
+    useEffect(() => {
+      if (innerRef.current && innerRef.current.value === "") {
+        setIsPlaceholder(true)
+      } else {
+        setIsPlaceholder(false)
+      }
+    }, [innerRef.current?.value])
+
+    return (
+      <div>
+        <div
+          onFocus={() => innerRef.current?.focus()}
+          onBlur={() => innerRef.current?.blur()}
+          className={clx(
+            "relative flex items-center text-base-regular border bg-white rounded-lg hover:bg-gray-50",
+            className,
+            {
+              "text-ui-fg-muted": isPlaceholder,
+            }
+          )}
+          style={{ borderColor: '#C0C0C0' }}
+        >
+          <select
+            ref={innerRef}
+            defaultValue={defaultValue}
+            {...props}
+            className="appearance-none flex-1 bg-transparent border-none px-4 py-2.5 transition-colors duration-150 outline-none "
+          >
+            <option disabled value="">
+              {placeholder}
+            </option>
+            {children}
+          </select>
+          <span className="absolute right-4 inset-y-0 flex items-center pointer-events-none ">
+            <ChevronUpDown />
+          </span>
+        </div>
+      </div>
+    )
+  }
+)
+
+NativeSelect.displayName = "NativeSelect"
+
+export default NativeSelect

package/src/common/components/obfuscated-email/index.tsx

@@ -0,0 +1,30 @@
+"use client"
+
+import React, { useEffect, useState } from "react"
+
+interface ObfuscatedEmailProps {
+  email: string
+  className?: string
+}
+
+const ObfuscatedEmail: React.FC<ObfuscatedEmailProps> = ({ email, className }) => {
+  const [displayEmail, setDisplayEmail] = useState("")
+
+  useEffect(() => {
+    // Reveal the email only on the client side
+    setDisplayEmail(email)
+  }, [email])
+
+  if (!displayEmail) {
+    // Hide or show placeholder while loading
+    return <span className={className}>...</span>
+  }
+
+  return (
+    <a href={`mailto:${displayEmail}`} className={className}>
+      {displayEmail}
+    </a>
+  )
+}
+
+export default ObfuscatedEmail

package/src/common/components/processing-overlay/index.tsx

@@ -0,0 +1,83 @@
+"use client"
+
+import React, { useState, useEffect } from "react"
+
+const ProcessingOverlay = ({ 
+  isOpen, 
+  title,
+  subtitle = "Please do not refresh or close this window",
+  variant = "payment"
+}: { 
+  isOpen: boolean
+  title?: string
+  subtitle?: string
+  variant?: "payment" | "order"
+}) => {
+  const [messageIndex, setMessageIndex] = useState(0)
+  
+  const paymentMessages = [
+    "Securing your transaction...",
+    "Verifying with payment provider...",
+    "Finalizing your order...",
+    "Almost there...",
+    "Finishing up..."
+  ]
+  
+  const orderMessages = [
+    "Placing your order...",
+    "Preparing your confirmation...",
+    "Almost there...",
+    "Finalizing details...",
+    "Finishing up..."
+  ]
+  
+  const messages = variant === "payment" ? paymentMessages : orderMessages
+  const displayTitle = title || (variant === "payment" ? "Processing Payment" : "Placing Order")
+
+  useEffect(() => {
+    if (!isOpen) {
+      setMessageIndex(0)
+      return
+    }
+
+    const interval = setInterval(() => {
+      setMessageIndex((prev) => (prev + 1) % messages.length)
+    }, 3000)
+
+    return () => clearInterval(interval)
+  }, [isOpen, messages.length])
+
+  if (!isOpen) return null
+
+  return (
+    <div className="fixed inset-0 z-[9999] flex items-center justify-center bg-white/70 backdrop-blur-md animate-in fade-in duration-300">
+      <div className="bg-white p-8 rounded-2xl shadow-2xl border border-purple-100 flex flex-col items-center max-w-xs w-full mx-4 transform animate-in zoom-in-95 duration-300">
+        <div className="relative mb-2">
+          <img 
+            src="/uploads/profile-images/t-shirt.gif" 
+            alt="Placing order..."
+            className="w-32 h-32 object-contain mx-auto"
+          />
+        </div>
+
+        <h3 className="text-xl font-bold text-gray-900 mb-1 text-center">{displayTitle}</h3>
+        
+        <div className="h-6 flex items-center justify-center mb-2 text-center px-4">
+          <p key={messageIndex} className="text-[#8B5AB1] font-semibold text-sm animate-in slide-in-from-bottom-2 fade-in duration-500">
+            {messages[messageIndex]}
+          </p>
+        </div>
+
+        <div className="w-full bg-gray-100 h-1.5 rounded-full overflow-hidden mb-4">
+          <div className="h-full bg-[#8B5AB1] rounded-full animate-progress transition-all duration-500 ease-out"></div>
+        </div>
+
+        <p className="text-xs text-gray-400 text-center italic leading-relaxed">
+          {subtitle}
+        </p>
+      </div>
+    </div>
+  )
+}
+
+export default ProcessingOverlay

package/src/common/components/radio/index.tsx

@@ -0,0 +1,27 @@
+const Radio = ({ checked, 'data-testid': dataTestId }: { checked: boolean, 'data-testid'?: string }) => {
+  return (
+    <>
+      <button
+        type="button"
+        role="radio"
+        aria-checked="true"
+        data-state={checked ? "checked" : "unchecked"}
+        className="group relative flex h-5 w-5 items-center justify-center outline-none"
+        data-testid={dataTestId || 'radio-button'}
+      >
+        <div className="shadow-borders-base group-hover:shadow-borders-strong-with-shadow bg-ui-bg-base group-data-[state=checked]:bg-ui-bg-interactive group-data-[state=checked]:shadow-borders-interactive group-focus:!shadow-borders-interactive-with-focus group-disabled:!bg-ui-bg-disabled group-disabled:!shadow-borders-base flex h-[14px] w-[14px] items-center justify-center rounded-full transition-all">
+          {checked && (
+            <span
+              data-state={checked ? "checked" : "unchecked"}
+              className="group flex items-center justify-center"
+            >
+              <div className="bg-ui-bg-base shadow-details-contrast-on-bg-interactive group-disabled:bg-ui-fg-disabled rounded-full group-disabled:shadow-none h-1.5 w-1.5"></div>
+            </span>
+          )}
+        </div>
+      </button>
+    </>
+  )
+}
+
+export default Radio