@pradip1995/create-storefront 1.0.1

package/templates/storefront/src/modules/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/templates/storefront/src/modules/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 "@core/context/modal-context"
+import X from "@modules/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/templates/storefront/src/modules/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/templates/storefront/src/modules/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/templates/storefront/src/modules/common/components/product/product-rating/index.tsx

@@ -0,0 +1,172 @@
+"use client"
+
+import { useState, useEffect, useMemo } from "react"
+import { HttpTypes } from "@medusajs/types"
+import ReviewModal from "@modules/common/components/product/review-modal"
+import { fetchReviewsForProduct, fetchRatingForProduct } from "@core/data/reviews"
+
+import { retrieveCustomer } from "@core/data/customer"
+import LoginPopup from "@modules/common/components/login-popup"
+import { useParams } from "next/navigation"
+
+type ProductRatingProps = {
+    product: HttpTypes.StoreProduct & {
+        average_rating?: number | null
+        total_rating_count?: number | null
+    }
+    showButton?: boolean
+    buttonText?: string
+    showStars?: boolean
+}
+
+export default function ProductRating({
+    product,
+    showButton = true,
+    buttonText = "Rate this",
+    showStars = true
+}: ProductRatingProps) {
+    const [isReviewOpen, setIsReviewOpen] = useState(false)
+    const [reviews, setReviews] = useState<any[]>([])
+    const [ratingSummary, setRatingSummary] = useState<{ average_rating: number, total_reviews: number } | null>(null)
+    const [showLoginPopup, setShowLoginPopup] = useState(false)
+    const [isCheckingAuth, setIsCheckingAuth] = useState(false)
+    const { countryCode } = useParams() as { countryCode: string }
+
+    const fetchReviewsAndStatus = async () => {
+        try {
+            const [fetchedReviews, fetchedSummary] = await Promise.all([
+                fetchReviewsForProduct(product.id),
+                fetchRatingForProduct(product.id)
+            ])
+            setReviews(fetchedReviews)
+            setRatingSummary(fetchedSummary)
+        } catch (error) {
+            // Silence error
+        }
+    }
+
+    useEffect(() => {
+        fetchReviewsAndStatus()
+    }, [product.id])
+
+    // Use pre-calculated summary from backend
+    const averageRating = useMemo(() => {
+        return ratingSummary?.average_rating ?? product.average_rating ?? 0
+    }, [ratingSummary, product.average_rating])
+
+    const totalReviews = ratingSummary?.total_reviews ?? (product.total_rating_count || 0)
+
+    const handleRateClick = async () => {
+        setIsCheckingAuth(true)
+        try {
+            const customer = await retrieveCustomer()
+            if (customer) {
+                setIsReviewOpen(true)
+            } else {
+                setShowLoginPopup(true)
+            }
+        } catch (error) {
+            // Fallback to showing login popup on error
+            setShowLoginPopup(true)
+        } finally {
+            setIsCheckingAuth(false)
+        }
+    }
+
+    return (
+        <>
+            <div className="flex items-center gap-2">
+                {showStars && totalReviews > 0 && (
+                    <div className="flex items-center gap-1 cursor-pointer" onClick={handleRateClick}>
+                        <div className="flex">
+                            {[1, 2, 3, 4, 5].map((star) => {
+                                const isFilled = star <= averageRating
+                                const isHalfFilled = star > averageRating && star - 0.5 <= averageRating
+
+                                return (
+                                    <div key={star} className="relative" style={{ width: '20px', height: '20px' }}>
+                                        <svg
+                                            width="20"
+                                            height="20"
+                                            viewBox="0 0 24 24"
+                                            fill="none"
+                                            stroke={isFilled || isHalfFilled ? (averageRating >= 4 ? "#22c55e" : averageRating >= 3 ? "#FFD700" : "#ef4444") : "#D1D5DB"}
+                                            strokeWidth="2"
+                                        >
+                                            <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
+                                        </svg>
+                                        {isFilled && (
+                                            <svg
+                                                width="20"
+                                                height="20"
+                                                viewBox="0 0 24 24"
+                                                fill={averageRating >= 4 ? "#22c55e" : averageRating >= 3 ? "#FFD700" : "#ef4444"}
+                                                stroke={averageRating >= 4 ? "#22c55e" : averageRating >= 3 ? "#FFD700" : "#ef4444"}
+                                                strokeWidth="2"
+                                                className="absolute top-0 left-0"
+                                            >
+                                                <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
+                                            </svg>
+                                        )}
+                                        {isHalfFilled && (
+                                            <svg
+                                                width="20"
+                                                height="20"
+                                                viewBox="0 0 24 24"
+                                                fill={averageRating >= 4 ? "#22c55e" : averageRating >= 3 ? "#FFD700" : "#ef4444"}
+                                                stroke={averageRating >= 4 ? "#22c55e" : averageRating >= 3 ? "#FFD700" : "#ef4444"}
+                                                strokeWidth="2"
+                                                className="absolute top-0 left-0"
+                                                style={{ clipPath: 'inset(0 50% 0 0)' }}
+                                            >
+                                                <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
+                                            </svg>
+                                        )}
+                                    </div>
+                                )
+                            })}
+                        </div>
+                        {averageRating > 0 && (
+                            <span className="text-sm text-gray-700 font-medium">
+                                ({averageRating.toFixed(1)})
+                            </span>
+                        )}
+                    </div>
+                )}
+                {showButton && (
+                    <div className="relative group/ratingbtn">
+                        <button
+                            onClick={handleRateClick}
+                            disabled={isCheckingAuth}
+                            className="flex items-center gap-1.5 px-3 py-1.5 rounded-full border text-xs sm:text-sm font-bold transition-all duration-200 border-[#8B5AB1]/20 bg-[#8B5AB1]/5 text-[#8B5AB1] hover:bg-[#8B5AB1] hover:text-white hover:shadow-md hover:shadow-purple-100 active:scale-95 disabled:opacity-50 disabled:cursor-wait"
+                        >
+                            {isCheckingAuth ? (
+                                <span className="w-4 h-4 border-2 border-current border-t-transparent rounded-full animate-spin"></span>
+                            ) : (
+                                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
+                                    <path d="M12 20h9" /><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z" />
+                                </svg>
+                            )}
+                            {buttonText}
+                        </button>
+                    </div>
+                )}
+            </div>
+
+            <ReviewModal
+                productId={product.id}
+                productTitle={product.title || "Product"}
+                isOpen={isReviewOpen}
+                close={() => setIsReviewOpen(false)}
+                onSuccess={fetchReviewsAndStatus}
+            />
+
+            <LoginPopup
+                isOpen={showLoginPopup}
+                onClose={() => setShowLoginPopup(false)}
+                countryCode={countryCode}
+                message="Please login to submit a review for this product."
+            />
+        </>
+    )
+}