@pradip1995/create-storefront 1.0.1

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

@@ -0,0 +1,333 @@
+"use client"
+
+import { useState, useRef } from "react"
+import { retrieveCustomer, uploadFiles } from "@core/data/customer"
+import { submitReview, updateReview } from "@core/data/reviews"
+
+type ReviewModalProps = {
+    productId: string
+    productTitle: string
+    isOpen: boolean
+    close: () => void
+    existingReview?: any // Optional
+    onSuccess?: () => void // Optional callback for refetching
+}
+
+export default function ReviewModal({
+    productId,
+    productTitle,
+    isOpen,
+    close,
+    existingReview,
+    onSuccess,
+}: ReviewModalProps) {
+    const [rating, setRating] = useState(existingReview?.rating || 0)
+    const [title, setTitle] = useState(existingReview?.title || "")
+    const [description, setDescription] = useState(existingReview?.description || "")
+    const [isSubmitting, setIsSubmitting] = useState(false)
+    const [images, setImages] = useState<string[]>(existingReview?.images || [])
+    const [isUploading, setIsUploading] = useState(false)
+    const [isSubmitted, setIsSubmitted] = useState(false)
+    const [error, setError] = useState<string | null>(null)
+    const modalRef = useRef<HTMLDivElement>(null)
+    const fileInputRef = useRef<HTMLInputElement>(null)
+
+    // Close on outside click
+    const handleBackdropClick = (e: React.MouseEvent) => {
+        if (modalRef.current && !modalRef.current.contains(e.target as Node)) {
+            handleClose()
+        }
+    }
+
+    const handleClose = () => {
+        close()
+        // Reset state after a tiny delay to allow exit animation if needed
+        setTimeout(() => {
+            setIsSubmitted(false)
+            setError(null)
+        }, 300)
+    }
+
+    if (!isOpen) return null
+
+    const handleImageUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
+        const files = e.target.files
+        if (!files || files.length === 0) return
+
+        setIsUploading(true)
+        setError(null)
+        try {
+            const formData = new FormData()
+            for (let i = 0; i < files.length; i++) {
+                if (files[i].size > 5 * 1024 * 1024) {
+                    setError("Please upload images smaller than 5MB.")
+                    setIsUploading(false)
+                    return
+                }
+                formData.append("files", files[i])
+            }
+
+            const result = await uploadFiles(formData)
+            if (result.success && result.files) {
+                const newImageUrls = result.files.map((f: any) => f.url)
+                setImages((prev) => [...prev, ...newImageUrls].slice(0, 4)) // Limit to 4 images
+            } else {
+                setError(result.error || "Failed to upload images")
+            }
+        } catch (error) {
+            setError("An error occurred during upload")
+        } finally {
+            setIsUploading(false)
+        }
+    }
+
+    const removeImage = (index: number) => {
+        setImages((prev) => prev.filter((_, i) => i !== index))
+    }
+
+    const handleSubmit = async (e: React.FormEvent) => {
+        e.preventDefault()
+        setIsSubmitting(true)
+        setError(null)
+        
+        if (rating === 0) {
+            setError("Please select a rating before submitting.")
+            setIsSubmitting(false)
+            return
+        }
+
+        try {
+            const customer = await retrieveCustomer()
+
+            if (!customer) {
+                setError("Please login to submit a review.")
+                setIsSubmitting(false)
+                return
+            }
+
+            let result;
+
+            if (existingReview?.id) {
+                // Update existing review
+                result = await updateReview({
+                    id: existingReview.id,
+                    rating,
+                    title,
+                    description,
+                    images: images,
+                })
+            } else {
+                // Submit new review
+                result = await submitReview({
+                    product_id: productId,
+                    rating,
+                    title,
+                    description,
+                    images: images,
+                })
+            }
+
+            if (result.success) {
+                // Track form submission in Google Analytics
+                if (typeof window !== 'undefined') {
+                    (window as any).dataLayer = (window as any).dataLayer || [];
+                    (window as any).dataLayer.push({
+                        event: 'form_submit',
+                        form_type: existingReview ? 'product_review_update' : 'product_review_submit'
+                    });
+                }
+
+                setIsSubmitted(true)
+                setTitle("")
+                setDescription("")
+                setRating(0)
+                setImages([])
+
+                // Auto close modal after 1.5 seconds
+                setTimeout(() => {
+                    handleClose()
+                    if (onSuccess) onSuccess()
+                }, 1500)
+            } else {
+                setError(result.error || "Failed to submit review")
+            }
+        } catch (error) {
+            setError("An error occurred. Please try again.")
+        } finally {
+            setIsSubmitting(false)
+        }
+    }
+
+    return (
+        <div
+            className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm p-4"
+            onClick={handleBackdropClick}
+        >
+            <div
+                ref={modalRef}
+                className="bg-white rounded-xl shadow-2xl w-full max-w-md overflow-hidden animate-in fade-in zoom-in duration-200"
+            >
+                <div className="bg-[#8B5AB1] p-4 text-white flex justify-between items-center">
+                    <h2 className="text-xl font-bold">
+                        {isSubmitted ? (existingReview ? "Update Successful" : "Review Submitted") : existingReview ? "Edit Review" : "Write a Review"}
+                    </h2>
+                    <button onClick={handleClose} className="text-white hover:text-gray-200">
+                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                            <line x1="18" y1="6" x2="6" y2="18"></line>
+                            <line x1="6" y1="6" x2="18" y2="18"></line>
+                        </svg>
+                    </button>
+                </div>
+
+                {isSubmitted ? (
+                    <div className="p-8 text-center space-y-4 animate-in fade-in slide-in-from-bottom-4 duration-300">
+                        <div className="flex justify-center">
+                            <div className="bg-green-100 rounded-full p-4 text-green-600">
+                                <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3">
+                                    <polyline points="20 6 9 17 4 12"></polyline>
+                                </svg>
+                            </div>
+                        </div>
+                        <div>
+                            <h3 className="text-2xl font-bold text-gray-900 mb-2">Thank You!</h3>
+                            <p className="text-gray-600">
+                                Your review for <span className="font-semibold">{productTitle}</span> has been {existingReview ? "updated" : "submitted"} successfully.
+                            </p>
+                        </div>
+                        <button
+                            onClick={handleClose}
+                            className="w-full bg-[#8B5AB1] text-white font-bold py-3 px-4 rounded-lg hover:bg-[#7a4a9a] active:bg-[#693e84] transition-colors shadow-md hover:shadow-lg transform active:scale-[0.98]"
+                        >
+                            Close
+                        </button>
+                    </div>
+                ) : (
+                    <form onSubmit={handleSubmit} className="p-6 space-y-4 max-h-[80vh] overflow-y-auto no-scrollbar">
+                        <div>
+                            <label className="block text-sm font-medium text-gray-700 mb-1">Product</label>
+                            <p className="text-gray-900 font-medium">{productTitle}</p>
+                        </div>
+
+                        <div>
+                            <label className="block text-sm font-medium text-gray-700 mb-1">Rating</label>
+                            <div className="flex gap-1">
+                                {[1, 2, 3, 4, 5].map((star) => (
+                                    <button
+                                        key={star}
+                                        type="button"
+                                        onClick={() => setRating(star)}
+                                        className="focus:outline-none transition-transform hover:scale-110"
+                                    >
+                                        <svg
+                                            width="32"
+                                            height="32"
+                                            viewBox="0 0 24 24"
+                                            fill={star <= rating ? "#FFD700" : "none"}
+                                            stroke={star <= rating ? "#FFD700" : "#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>
+                                    </button>
+                                ))}
+                            </div>
+                        </div>
+
+                        <div>
+                            <label className="block text-sm font-medium text-gray-700 mb-1">Title</label>
+                            <input
+                                type="text"
+                                required
+                                value={title}
+                                onChange={(e) => setTitle(e.target.value)}
+                                className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent outline-none transition-all"
+                                placeholder="Great product!"
+                            />
+                        </div>
+
+                        <div>
+                            <label className="block text-sm font-medium text-gray-700 mb-1">Review</label>
+                            <textarea
+                                required
+                                value={description}
+                                onChange={(e) => setDescription(e.target.value)}
+                                rows={4}
+                                className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent outline-none transition-all resize-none"
+                                placeholder="Share your experience..."
+                            />
+                        </div>
+
+                        {/* Image Upload Section */}
+                        <div>
+                            <label className="block text-sm font-medium text-gray-700 mb-2">Images (Max 4)</label>
+                            <div className="flex flex-wrap gap-2 mb-2">
+                                {images.map((url, index) => (
+                                    <div key={index} className="relative w-20 h-20 rounded-lg overflow-hidden border border-gray-200">
+                                        <img src={url} alt="Review" className="w-full h-full object-cover" />
+                                        <button
+                                            type="button"
+                                            onClick={() => removeImage(index)}
+                                            className="absolute top-1 right-1 bg-red-500 text-white rounded-full p-0.5 hover:bg-red-600 shadow-md"
+                                        >
+                                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3">
+                                                <line x1="18" y1="6" x2="6" y2="18"></line>
+                                                <line x1="6" y1="6" x2="18" y2="18"></line>
+                                            </svg>
+                                        </button>
+                                    </div>
+                                ))}
+                                {images.length < 4 && (
+                                    <button
+                                        type="button"
+                                        onClick={() => fileInputRef.current?.click()}
+                                        disabled={isUploading}
+                                        className="w-20 h-20 border-2 border-dashed border-gray-300 rounded-lg flex flex-col items-center justify-center text-gray-400 hover:border-[#8B5AB1] hover:text-[#8B5AB1] transition-all"
+                                    >
+                                        {isUploading ? (
+                                            <div className="w-5 h-5 border-2 border-current border-t-transparent rounded-full animate-spin"></div>
+                                        ) : (
+                                            <>
+                                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                                                    <line x1="12" y1="5" x2="12" y2="19"></line>
+                                                    <line x1="5" y1="12" x2="19" y2="12"></line>
+                                                </svg>
+                                                <span className="text-[10px] mt-1 font-medium">Add Photo</span>
+                                            </>
+                                        )}
+                                    </button>
+                                )}
+                            </div>
+                            <p className="text-[10px] text-gray-400 mt-1 font-medium">Please upload images smaller than 5MB.</p>
+                            <input
+                                ref={fileInputRef}
+                                type="file"
+                                accept="image/*"
+                                multiple
+                                onChange={handleImageUpload}
+                                className="hidden"
+                            />
+                        </div>
+
+                        {error && (
+                            <div className="p-3 bg-red-50 border border-red-200 rounded-lg text-red-600 text-sm font-medium animate-in fade-in slide-in-from-top-1 duration-200">
+                                {error}
+                            </div>
+                        )}
+
+                        <button
+                            type="submit"
+                            disabled={isSubmitting || isUploading}
+                            data-ga-event={existingReview ? "review_update" : "review_submit"}
+                            data-ga-label={existingReview ? "Update Review" : "Submit Review"}
+                            className="w-full bg-[#8B5AB1] text-white font-bold py-3 px-4 rounded-lg hover:bg-[#7a4a9a] active:bg-[#693e84] transition-colors disabled:opacity-50 disabled:cursor-not-allowed shadow-md hover:shadow-lg transform active:scale-[0.98]"
+                        >
+                            <span className="pointer-events-none block">
+                                {isSubmitting ? "Submitting..." : existingReview ? "Update Review" : "Submit Review"}
+                            </span>
+                        </button>
+                    </form>
+                )}
+            </div>
+        </div>
+    )
+}

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

@@ -0,0 +1,227 @@
+"use client"
+
+import React, { useState, useEffect } from "react"
+import { useParams } from "next/navigation"
+
+type ShareButtonProps = {
+    productTitle: string
+    productHandle: string
+}
+
+export default function ShareButton({ productTitle, productHandle }: ShareButtonProps) {
+    const { countryCode } = useParams() as { countryCode: string }
+    const [isOpen, setIsOpen] = useState(false)
+    const [copied, setCopied] = useState(false)
+
+    const productUrl = typeof window !== "undefined"
+        ? `${window.location.origin}/${countryCode}/products/${productHandle}`
+        : ""
+
+    const socialLinks = [
+        {
+            name: "WhatsApp",
+            icon: (
+                <svg viewBox="0 0 24 24" fill="currentColor" className="w-6 h-6">
+                    <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.414 0 .018 5.396.015 12.03c0 2.12.553 4.189 1.606 6.06L0 24l6.104-1.599a11.82 11.82 0 005.94 1.59h.005c6.634 0 12.032-5.396 12.035-12.03.001-3.213-1.252-6.234-3.528-8.511z" />
+                </svg>
+            ),
+            url: `https://api.whatsapp.com/send?text=${encodeURIComponent(`Check this out: ${productTitle}\n\n${productUrl}`)}`,
+            color: "#25D366"
+        },
+        {
+            name: "Facebook",
+            icon: (
+                <svg viewBox="0 0 24 24" fill="currentColor" className="w-6 h-6">
+                    <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z" />
+                </svg>
+            ),
+            url: `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(productUrl)}`,
+            color: "#1877F2"
+        },
+        {
+            name: "Instagram",
+            icon: (
+                <img
+                    src="https://upload.wikimedia.org/wikipedia/commons/e/e7/Instagram_logo_2016.svg"
+                    alt="Instagram"
+                    className="w-7 h-7 object-contain"
+                />
+            ),
+            url: `https://www.instagram.com/`,
+            color: "#E4405F",
+            gradient: "linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%)"
+        },
+        {
+            name: "Twitter",
+            icon: (
+                <svg viewBox="0 0 24 24" fill="currentColor" className="w-6 h-6">
+                    <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
+                </svg>
+            ),
+            url: `https://twitter.com/intent/tweet?url=${encodeURIComponent(productUrl)}&text=${encodeURIComponent(`Check out ${productTitle}`)}`,
+            color: "#000000"
+        },
+        {
+            name: "Telegram",
+            icon: (
+                <svg viewBox="0 0 24 24" fill="currentColor" className="w-6 h-6 ml-0.5">
+                    <path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm5.894 8.221l-1.97 9.28c-.145.658-.537.818-1.084.508l-3-2.21-1.446 1.394c-.14.14-.26.26-.53.26l.213-3.05 5.56-5.022c.24-.213-.054-.334-.373-.121l-6.869 4.326-2.96-.924c-.64-.203-.658-.64.135-.954l11.566-4.458c.538-.196 1.006.128.832.941z" />
+                </svg>
+            ),
+            url: `https://t.me/share/url?url=${encodeURIComponent(productUrl)}&text=${encodeURIComponent(`Check out ${productTitle}`)}`,
+            color: "#26A5E4"
+        }
+    ]
+
+    const copyToClipboard = () => {
+        navigator.clipboard.writeText(productUrl)
+        setCopied(true)
+        setTimeout(() => setCopied(false), 2000)
+    }
+
+    // Prevent scroll when modal is open
+    useEffect(() => {
+        if (isOpen) {
+            document.body.style.overflow = "hidden"
+        } else {
+            document.body.style.overflow = "unset"
+        }
+        return () => {
+            document.body.style.overflow = "unset"
+        }
+    }, [isOpen])
+
+    return (
+        <>
+            {/* Share Trigger Button - Updated to match uploaded image */}
+            <button
+                onClick={() => setIsOpen(true)}
+                data-ga-event="product_share_open"
+                data-ga-label={productTitle}
+                className="flex items-center gap-2 text-[#8B5AB1] transition-all duration-300 py-1.5 px-0 rounded-md flex-shrink-0 group bg-transparent hover:text-[#7a4a9a] active:scale-95"
+                title="Share"
+            >
+                <svg
+                    width="20"
+                    height="20"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    strokeWidth="2.5"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    className="w-5 h-5 transition-transform group-hover:scale-110"
+                >
+                    <circle cx="18" cy="5" r="3" />
+                    <circle cx="6" cy="12" r="3" />
+                    <circle cx="18" cy="19" r="3" />
+                    <line x1="8.59" y1="13.51" x2="15.42" y2="17.49" />
+                    <line x1="15.41" y1="6.51" x2="8.59" y2="10.49" />
+                </svg>
+                <span className="text-sm font-semibold tracking-tight">Share</span>
+            </button>
+
+            {/* Modern Center Popup Modal */}
+            {isOpen && (
+                <div className="fixed inset-0 z-[999] flex items-center justify-center p-2 sm:p-4">
+                    {/* Simple Dark Blur Backdrop */}
+                    <div
+                        className="absolute inset-0 bg-black/20 backdrop-blur-md"
+                        onClick={() => setIsOpen(false)}
+                    />
+
+                    {/* Modal Content - No Animation */}
+                    <div className="relative w-full max-w-[420px] bg-white rounded-[24px] sm:rounded-[32px] shadow-[0_32px_80px_-20px_rgba(0,0,0,0.3)] border border-white/20 overflow-hidden">
+
+                        {/* Modal Header */}
+                        <div className="p-4 sm:p-6 pb-2 sm:pb-4 flex items-center justify-between">
+                            <div>
+                                <h3 className="text-lg sm:text-xl font-bold text-gray-900 leading-none mb-1">Spread the Joy</h3>
+                                <p className="text-[10px] sm:text-xs text-gray-400 font-medium tracking-tight">Tell your friends about Chocomelon</p>
+                            </div>
+                            <button
+                                onClick={() => setIsOpen(false)}
+                                className="w-8 h-8 sm:w-10 sm:h-10 flex items-center justify-center rounded-full bg-gray-50 hover:bg-gray-100 text-gray-400 hover:text-gray-900 transition-all active:scale-90"
+                            >
+                                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
+                                    <path d="M18 6L6 18M6 6l12 12" strokeLinecap="round" strokeLinejoin="round" />
+                                </svg>
+                            </button>
+                        </div>
+
+                        {/* Social Sharing Grid */}
+                        <div className="px-4 sm:px-6 py-4 sm:py-6 grid grid-cols-5 gap-2 sm:gap-4">
+                            {socialLinks.map((social) => (
+                                <a
+                                    key={social.name}
+                                    href={social.url}
+                                    target="_blank"
+                                    rel="noopener noreferrer"
+                                    data-ga-event="product_share_click"
+                                    data-ga-label={`${social.name} - ${productTitle}`}
+                                    className="flex flex-col items-center gap-1.5 group outline-none"
+                                >
+                                    <div
+                                        className="w-10 h-10 min-[360px]:w-11 min-[360px]:h-11 sm:w-14 sm:h-14 rounded-[12px] min-[360px]:rounded-[16px] sm:rounded-[20px] flex items-center justify-center text-white transition-all duration-300 group-hover:scale-110 group-active:scale-95 shadow-lg"
+                                        style={{
+                                            background: (social as any).gradient || social.color,
+                                            boxShadow: `0 8px 16px -4px ${social.color}40`
+                                        }}
+                                    >
+                                        <div className="scale-75 sm:scale-100 flex items-center justify-center">
+                                            {social.icon}
+                                        </div>
+                                    </div>
+                                    <span className="text-[9px] sm:text-[11px] font-bold text-gray-500 group-hover:text-[#8B5AB1] transition-colors truncate w-full text-center">{social.name}</span>
+                                </a>
+                            ))}
+                        </div>
+
+                        {/* Link Copy Section */}
+                        <div className="px-6 pb-6">
+                            <div className="bg-gray-50/80 rounded-[24px] p-3.5 border border-gray-100 group transition-all hover:bg-white hover:shadow-inner">
+                                <div className="flex items-center justify-between mb-2">
+                                    <span className="text-[10px] font-bold text-gray-400 uppercase tracking-widest">Shareable Link</span>
+                                    {copied && (
+                                        <span className="text-[10px] font-bold text-green-500 animate-in fade-in slide-in-from-right-2">Link Copied!</span>
+                                    )}
+                                </div>
+                                <div className="flex items-center gap-3">
+                                    <div className="flex-1 overflow-hidden">
+                                        <p className="text-xs text-gray-600 truncate font-semibold">{productUrl}</p>
+                                    </div>
+                                    <button
+                                        onClick={() => {
+                                            copyToClipboard();
+                                            // Handle manual event push for clipboard
+                                            if (typeof window !== 'undefined' && (window as any).gtag) {
+                                                (window as any).gtag('event', 'product_share_click', {
+                                                    event_category: 'engagement',
+                                                    event_label: `Copy Link - ${productTitle}`
+                                                });
+                                            }
+                                        }}
+                                        className={`h-9 px-4 rounded-[14px] text-xs font-bold transition-all active:scale-95 shadow-md ${copied
+                                            ? 'bg-green-500 text-white shadow-green-100'
+                                            : 'bg-[#8B5AB1] text-white hover:bg-[#7a4a9a] shadow-purple-100'
+                                            }`}
+                                    >
+                                        {copied ? "Done" : "Copy"}
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+
+                        {/* Brand Footer Decoration */}
+                        <div className="h-2 w-full flex">
+                            <div className="flex-1 bg-pink-400"></div>
+                            <div className="flex-1 bg-yellow-400"></div>
+                            <div className="flex-1 bg-blue-400"></div>
+                            <div className="flex-1 bg-purple-500"></div>
+                        </div>
+                    </div>
+                </div>
+            )}
+        </>
+    )
+}

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

@@ -0,0 +1,46 @@
+"use client"
+import { useState } from "react"
+import { useWishlist } from "@core/context/wishlist-context"
+import LoginPopup from "@modules/common/components/login-popup"
+
+const WishlistIcon = ({ productId }: { productId: string }) => {
+  const { isWishlisted, toggleWishlist } = useWishlist()
+  const [isToggling, setIsToggling] = useState(false)
+  const [showLogin, setShowLogin] = useState(false)
+  
+  const wishlisted = isWishlisted(productId)
+
+  const handleToggle = async () => {
+    setIsToggling(true)
+    const res = await toggleWishlist(productId)
+    if (!res.success && res.error?.toLowerCase().includes("login")) {
+      setShowLogin(true)
+    }
+    setIsToggling(false)
+  }
+
+  return (
+    <>
+      <button 
+        onClick={handleToggle} 
+        disabled={isToggling}
+        className="p-2 rounded-full hover:bg-gray-100 transition-colors flex items-center justify-center gap-1.5"
+        aria-label="Wishlist"
+      >
+        <svg
+          width="20"
+          height="20"
+          viewBox="0 0 24 24"
+          fill={wishlisted ? "#ef4444" : "none"}
+          stroke={wishlisted ? "#ef4444" : "#4A5568"}
+          strokeWidth="2"
+          className={isToggling ? "animate-pulse" : "hover:scale-110 transition-transform"}
+        >
+          <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" />
+        </svg>
+      </button>
+      {showLogin && <LoginPopup isOpen={showLogin} onClose={() => setShowLogin(false)} />}
+    </>
+  )
+}
+export default WishlistIcon

package/templates/storefront/src/modules/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