@pradip1995/create-storefront 1.0.1

package/templates/storefront/src/modules/order/templates/order-completed-template.tsx

@@ -0,0 +1,233 @@
+import { Heading, Text } from "@medusajs/ui"
+import { cookies as nextCookies } from "next/headers"
+import Image from "next/image"
+import Link from "next/link"
+import LocalizedClientLink from "@modules/common/components/localized-client-link"
+
+import OnboardingCta from "@modules/order/components/onboarding-cta"
+import OrderConfirmationBackHandler from "@modules/order/components/order-confirmation-back-handler"
+import { HttpTypes } from "@medusajs/types"
+import Thumbnail from "@modules/products/components/thumbnail"
+import { convertToLocale } from "@core/util/money"
+import OrderPurchaseTracker from "@modules/order/components/order-purchase-tracker"
+
+type OrderCompletedTemplateProps = {
+  order: HttpTypes.StoreOrder
+}
+
+export default async function OrderCompletedTemplate({
+  order,
+}: OrderCompletedTemplateProps) {
+  const cookies = await nextCookies()
+
+  const isOnboarding = cookies.get("_medusa_onboarding")?.value === "true"
+
+  const shippingAddress = order.shipping_address
+  const fullName = `${shippingAddress?.first_name || ""} ${shippingAddress?.last_name || ""}`.trim()
+  const phone = shippingAddress?.phone ? (shippingAddress.phone.startsWith("+") ? shippingAddress.phone : `+${shippingAddress.phone}`) : ""
+  const address = [
+    shippingAddress?.address_1,
+    shippingAddress?.address_2,
+    shippingAddress?.city,
+    shippingAddress?.province,
+    shippingAddress?.postal_code,
+    shippingAddress?.country_code?.toUpperCase(),
+  ]
+    .filter(Boolean)
+    .join(", ")
+
+  return (
+    <div className="min-h-[calc(100vh-64px)] bg-[#FFFAFE] py-12">
+      <div className="content-container max-w-4xl mx-auto">
+        <OrderPurchaseTracker order={order} />
+        {isOnboarding && <OnboardingCta orderId={order.id} />}
+
+        <div className="flex flex-col gap-8" data-testid="order-complete-container">
+          <OrderConfirmationBackHandler />
+          {/* Top Illustration Section */}
+          <div className="flex justify-center items-center pb-2 pt-2">
+            <div className="relative w-full max-w-2xl h-64">
+              <Image
+                src="/Successful purchase-pana 1.png"
+                alt="Order Successful"
+                fill
+                className="object-contain"
+                priority
+              />
+            </div>
+          </div>
+
+          {/* Order Confirmed Heading */}
+          <div className="text-center">
+            <Heading
+              level="h1"
+              className="text-4xl font-bold mb-2"
+              style={{ color: '#8B5AB1' }}
+            >
+              Order Confirmed
+            </Heading>
+            <Text className="text-gray-700 text-lg max-w-2xl mx-auto">
+              Your order is confirmed. You will receive an order confirmation email/SMS shortly with the expected delivery date for your items.
+            </Text>
+          </div>
+
+          {/* Delivery Details Card */}
+          <div className="bg-[#FFFAFE] rounded-lg p-6 shadow-md border" style={{ borderColor: '#C0C0C0' }}>
+            <div className="flex flex-col md:flex-row justify-between items-start gap-6">
+              <div className="flex-1">
+                <Text className="text-gray-600 text-sm mb-2">Delivering to:</Text>
+                <Text className="text-lg font-semibold text-gray-900 mb-1">
+                  {fullName || "Customer"} {phone && `| ${phone}`}
+                </Text>
+                <Text className="text-gray-700 mt-2">
+                  {address || "Address not available"}
+                </Text>
+                {cookies.get("_medusa_jwt")?.value && (
+                  <LocalizedClientLink
+                    href={`/orders/${order.id}`}
+                    className="inline-block mt-4 px-4 py-2 border text-sm font-medium transition-colors"
+                    style={{
+                      borderColor: '#8B5AB1',
+                      color: '#8B5AB1',
+                      borderRadius: '30px'
+                    }}
+                  >
+                    Order Details &gt;
+                  </LocalizedClientLink>
+                )}
+              </div>
+              <div className="flex-shrink-0">
+                <div className="relative w-32 h-32">
+                  <Image
+                    src="/BIKE.png"
+                    alt="Delivery"
+                    fill
+                    className="object-contain"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* Order Items Card */}
+          <div className="bg-[#FFFAFE] rounded-lg p-6 shadow-md border" style={{ borderColor: '#C0C0C0' }}>
+            <Heading
+              level="h2"
+              className="text-2xl font-bold mb-6"
+              style={{ color: '#8B5AB1' }}
+            >
+              Order Items
+            </Heading>
+            <div className="space-y-6">
+              {order.items?.map((item) => (
+                <LocalizedClientLink 
+                  key={item.id} 
+                  href={`/products/${item.variant?.product?.handle}`}
+                  className="flex items-center gap-6 pb-6 border-b last:border-b-0 last:pb-0 group" 
+                  style={{ borderColor: '#F3F4F6' }}
+                >
+                  <div className="w-20 h-20 sm:w-24 sm:h-24 flex-shrink-0 bg-gray-50 rounded-xl overflow-hidden border border-gray-100 group-hover:opacity-80 transition-opacity">
+                    <Thumbnail
+                      thumbnail={item.thumbnail}
+                      variantImages={item.variant?.images}
+                      images={item.variant?.product?.images}
+                      size="square"
+                    />
+                  </div>
+                  <div className="flex-1 min-w-0">
+                    <Text className="text-[10px] uppercase tracking-wider text-gray-400 font-semibold block mb-1">
+                      Chocomelon Baby
+                    </Text>
+                    <Heading level="h3" className="font-bold text-[#04122C] text-lg mb-1 truncate group-hover:text-[#8B5AB1] transition-colors">
+                      {item.product_title || item.title}
+                    </Heading>
+                    <div className="flex flex-wrap items-center gap-x-4 gap-y-1">
+                      <Text className="text-sm font-medium text-gray-500">
+                        {item.variant?.title && `Variant: ${item.variant.title}`}
+                      </Text>
+                      {item.variant?.title && <Text className="text-sm font-medium text-gray-300">|</Text>}
+                      <Text className="text-sm font-medium text-gray-500">
+                        Qty: {item.quantity}
+                      </Text>
+                    </div>
+                  </div>
+                  <div className="text-right flex flex-col items-end gap-1">
+                    <Text className="font-bold text-[#04122C] text-lg whitespace-nowrap">
+                      {convertToLocale({
+                        amount: item.total || (item.unit_price || 0) * (item.quantity || 0),
+                        currency_code: order.currency_code,
+                      })}
+                    </Text>
+                    <Text className="text-xs text-gray-400 whitespace-nowrap">
+                      {convertToLocale({
+                        amount: item.unit_price || 0,
+                        currency_code: order.currency_code,
+                      })} Each
+                    </Text>
+                  </div>
+                </LocalizedClientLink>
+              ))}
+            </div>
+
+            {/* Order Summary */}
+            <div className="mt-8 pt-6 border-t border-gray-100 space-y-3">
+              <div className="flex justify-between items-center text-gray-600">
+                <Text>Subtotal</Text>
+                <Text className="font-medium">{convertToLocale({ amount: order.subtotal || 0, currency_code: order.currency_code })}</Text>
+              </div>
+              <div className="flex justify-between items-center text-gray-600">
+                <Text>Shipping</Text>
+                <Text className="font-medium">{convertToLocale({ amount: order.shipping_total || 0, currency_code: order.currency_code })}</Text>
+              </div>
+              {(order.tax_total || 0) > 0 && (
+                <div className="flex justify-between items-center text-gray-600">
+                  <Text>Tax</Text>
+                  <Text className="font-medium">{convertToLocale({ amount: order.tax_total || 0, currency_code: order.currency_code })}</Text>
+                </div>
+              )}
+              {(order.discount_total || 0) > 0 && (
+                <div className="flex justify-between items-center text-red-500">
+                  <Text>Discount</Text>
+                  <Text className="font-medium">-{convertToLocale({ amount: order.discount_total || 0, currency_code: order.currency_code })}</Text>
+                </div>
+              )}
+              <div className="flex justify-between items-center mt-6 pt-4 border-t-2" style={{ borderColor: '#F3F4F6' }}>
+                <Text className="text-xl font-bold text-gray-900">Total Amount Paid</Text>
+                <Text className="text-2xl font-black" style={{ color: '#8B5AB1' }}>
+                  {convertToLocale({ amount: order.total || 0, currency_code: order.currency_code })}
+                </Text>
+              </div>
+            </div>
+          </div>
+
+          {/* Action Buttons */}
+          <div className="flex flex-col sm:flex-row gap-4 justify-center">
+            <LocalizedClientLink
+              href="/store"
+              className="px-16 py-3 border-2 text-center font-semibold transition-colors bg-[#FFFAFE]"
+              style={{
+                borderColor: '#8B5AB1',
+                color: '#8B5AB1',
+                borderRadius: '30px',
+                minWidth: '250px'
+              }}
+            >
+              Continue Shopping
+            </LocalizedClientLink>
+            <LocalizedClientLink
+              href={cookies.get("_medusa_jwt")?.value ? "/account/orders" : `/account?view=guest&email=${order.email}`}
+              className="px-16 py-3 text-center font-semibold text-white transition-colors"
+              style={{
+                backgroundColor: '#8B5AB1',
+                borderRadius: '30px',
+                minWidth: '250px'
+              }}
+            >
+              {cookies.get("_medusa_jwt")?.value ? "View Orders" : "Track Guest Order"}
+            </LocalizedClientLink>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

package/templates/storefront/src/modules/order/templates/order-details-template.tsx

@@ -0,0 +1,128 @@
+"use client"
+
+import { HttpTypes } from "@medusajs/types"
+import React from "react"
+
+import { downloadInvoice, cancelOrder, reorderOrder } from "@core/data/orders"
+import { hasReturnableItems } from "@core/util/returns"
+import { useRouter, useParams } from "next/navigation"
+import CancelOrderModal from "@modules/order/components/cancel-order-modal"
+import OrderRedesign from "@modules/order/components/order-redesign"
+
+type OrderDetailsTemplateProps = {
+  order: HttpTypes.StoreOrder
+}
+
+const OrderDetailsTemplate: React.FC<OrderDetailsTemplateProps> = ({
+  order,
+}) => {
+  const router = useRouter()
+  const params = useParams()
+  const countryCode = params.countryCode as string
+  const [isDownloading, setIsDownloading] = React.useState(false)
+  const [isCancelling, setIsCancelling] = React.useState(false)
+  const [isReordering, setIsReordering] = React.useState(false)
+  const [showCancelModal, setShowCancelModal] = React.useState(false)
+  const [inventoryIssues, setInventoryIssues] = React.useState<any[] | null>(null)
+
+  const handleDownloadInvoice = async () => {
+    setIsDownloading(true)
+    try {
+      const result = await downloadInvoice(order.id)
+
+      if (!result.success) {
+        alert(result.error || "Failed to download invoice")
+        setIsDownloading(false)
+        return
+      }
+
+      if (result.data) {
+        // Convert base64 to blob
+        const byteCharacters = atob(result.data)
+        const byteNumbers = new Array(byteCharacters.length)
+        for (let i = 0; i < byteCharacters.length; i++) {
+          byteNumbers[i] = byteCharacters.charCodeAt(i)
+        }
+        const byteArray = new Uint8Array(byteNumbers)
+        const blob = new Blob([byteArray], { type: "application/pdf" })
+
+        const url = window.URL.createObjectURL(blob)
+        const a = document.createElement("a")
+        a.href = url
+        a.download = `invoice-${order.display_id}.pdf`
+        document.body.appendChild(a)
+        a.click()
+        window.URL.revokeObjectURL(url)
+        document.body.removeChild(a)
+      }
+    } catch (error) {
+      alert("An error occurred while downloading the invoice.")
+    } finally {
+      setIsDownloading(false)
+    }
+  }
+
+  const handleCancelOrderConfirm = async (reasonId: string) => {
+    setIsCancelling(true)
+    const result = await cancelOrder(order.id, reasonId)
+    if (result.success) {
+      alert("Order cancelled successfully")
+      setShowCancelModal(false)
+      router.refresh()
+    } else {
+      alert(result.error || "Failed to cancel order")
+    }
+    setIsCancelling(false)
+  }
+
+  const handleReorder = async (skipVariantIds?: string[], forceReorder: boolean = false) => {
+    setIsReordering(true)
+    setInventoryIssues(null)
+    const result = await reorderOrder(order.id, skipVariantIds, forceReorder)
+    if (result.success) {
+      const cartId = (result as any).data?.cart?.id || (result as any).data?.id || (result as any).data?.cart_id
+      const checkoutUrl = countryCode ? `/${countryCode}/checkout` : "/checkout"
+      window.location.assign(cartId ? `${checkoutUrl}?cart_id=${cartId}` : checkoutUrl)
+    } else {
+      if ((result as any).inventory_issues) {
+        setInventoryIssues((result as any).inventory_issues)
+      } else {
+        alert(result.error || "Failed to reorder")
+      }
+    }
+    setIsReordering(false)
+  }
+
+  const isCancelled = order.status === "canceled"
+  const canCancel = !isCancelled && order.status !== "archived"
+
+  return (
+    <div className="py-6 min-h-[calc(100vh-64px)] bg-[#FFFAFE] overflow-x-hidden">
+      <div className="w-full max-w-[1400px] mx-auto px-[5px] min-[500px]:px-4 md:px-6 lg:px-8 flex flex-col gap-y-6 overflow-x-hidden">
+        <OrderRedesign
+          order={order}
+          handleDownloadInvoice={handleDownloadInvoice}
+          isDownloading={isDownloading}
+          handleCancelOrder={async () => setShowCancelModal(true)}
+          isCancelling={isCancelling}
+          handleReorder={handleReorder}
+          isReordering={isReordering}
+          canCancel={canCancel}
+          isCancelled={isCancelled}
+          hasReturnableItems={hasReturnableItems(order)}
+          inventoryIssues={inventoryIssues}
+          setInventoryIssues={setInventoryIssues}
+        />
+      </div>
+
+      <CancelOrderModal
+        isOpen={showCancelModal}
+        isSubmitting={isCancelling}
+        onClose={() => setShowCancelModal(false)}
+        onConfirm={handleCancelOrderConfirm}
+      />
+    </div>
+  )
+}
+
+export default OrderDetailsTemplate

package/templates/storefront/src/modules/products/components/image-gallery/index.tsx

@@ -0,0 +1,297 @@
+'use client'
+
+import { useState, useMemo, useEffect } from "react"
+import { HttpTypes } from "@medusajs/types"
+import Image from "next/image"
+import { useSearchParams } from "next/navigation"
+import { getDefaultImageIndexForSelection, getImagesForSelection } from "@core/util/product"
+import { clx } from "@medusajs/ui"
+
+type ImageGalleryProps = {
+  images: HttpTypes.StoreProductImage[]
+  product?: HttpTypes.StoreProduct
+}
+
+import { useRef } from "react"
+import { useProductContext } from "@modules/products/context/product-context"
+
+const ImageGallery = ({ images: initialImages, product }: ImageGalleryProps) => {
+  const { selectedOptions } = useProductContext()
+  const scrollContainerRef = useRef<HTMLDivElement>(null)
+
+  const hasOptionSelection = useMemo(
+    () => Object.values(selectedOptions).some(Boolean),
+    [selectedOptions]
+  )
+
+  // Compute images from full or partial option selection (deduped for color-only picks)
+  const images = useMemo(() => {
+    if (product && hasOptionSelection) {
+      return getImagesForSelection(product, selectedOptions)
+    }
+    return initialImages
+  }, [product, selectedOptions, hasOptionSelection, initialImages])
+
+  const [selectedImageIndex, setSelectedImageIndex] = useState(0)
+  const [showRightButton, setShowRightButton] = useState(false)
+  const [showLeftButton, setShowLeftButton] = useState(false)
+
+  // Check if scrolling is needed
+  const checkScroll = () => {
+    const container = scrollContainerRef.current
+    if (container) {
+      const canScrollLeft = container.scrollLeft > 0
+      const canScrollRight = Math.ceil(container.scrollLeft + container.clientWidth) < container.scrollWidth
+
+      setShowLeftButton(canScrollLeft)
+      setShowRightButton(canScrollRight)
+    }
+  }
+
+  // Select the variant's assigned image by default when the selection changes
+  useEffect(() => {
+    const defaultIndex = product
+      ? getDefaultImageIndexForSelection(product, selectedOptions, images)
+      : 0
+
+    setSelectedImageIndex(defaultIndex)
+    setTimeout(checkScroll, 100)
+  }, [selectedOptions, images, product])
+
+  // Handle manual scroll
+  const scrollTo = (direction: 'left' | 'right') => {
+    const container = scrollContainerRef.current
+    if (container) {
+      // Scroll by exactly one thumbnail width (container is divided into 4)
+      const scrollAmount = container.clientWidth / 4
+      const directionMultiplier = direction === 'left' ? -1 : 1
+      container.scrollBy({ left: scrollAmount * directionMultiplier, behavior: 'smooth' })
+    }
+  }
+
+  const [zoomPosition, setZoomPosition] = useState({ x: 0, y: 0, percentX: 0, percentY: 0 })
+  const [isZooming, setIsZooming] = useState(false)
+  const [isPageScrolling, setIsPageScrolling] = useState(false)
+  const scrollTimeoutRef = useRef<NodeJS.Timeout | null>(null)
+  const containerRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    const handleScroll = () => {
+      setIsPageScrolling(true)
+      setIsZooming(false) // Force reset zoom instantly when scrolling starts
+      
+      // If the entire page reaches the top, reset the gallery scroll too
+      if (window.scrollY === 0) {
+        const scrollContainer = document.getElementById('product-gallery-container')
+        if (scrollContainer && scrollContainer.scrollTop > 0) {
+          scrollContainer.scrollTo({ top: 0, behavior: 'smooth' })
+        }
+      }
+
+      if (scrollTimeoutRef.current) {
+        clearTimeout(scrollTimeoutRef.current)
+      }
+      scrollTimeoutRef.current = setTimeout(() => {
+        setIsPageScrolling(false)
+      }, 300)
+    }
+
+    window.addEventListener("scroll", handleScroll, { passive: true })
+    return () => {
+      window.removeEventListener("scroll", handleScroll)
+      if (scrollTimeoutRef.current) clearTimeout(scrollTimeoutRef.current)
+    }
+  }, [])
+
+  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
+    if (isPageScrolling) {
+      if (isZooming) setIsZooming(false)
+      return
+    }
+    const { left, top, width, height } = e.currentTarget.getBoundingClientRect()
+    const pxX = e.clientX - left
+    const pxY = e.clientY - top
+    const x = (pxX / width) * 100
+    const y = (pxY / height) * 100
+    
+    setZoomPosition({ 
+      x: pxX, 
+      y: pxY, 
+      percentX: x, 
+      percentY: y 
+    })
+    
+    if (!isZooming) setIsZooming(true)
+  }
+
+  const selectedImage = images[selectedImageIndex]
+
+  const zoomFactor = 2
+  const lensSize = 200
+
+  return (
+    <div className="flex flex-col gap-3 sm:gap-4 min-[768px]:gap-4 min-[1023px]:gap-4 min-[1360px]:gap-4">
+      {/* Main Image - Top */}
+      {selectedImage && (
+        <div
+          ref={containerRef}
+          className="relative z-0 bg-surface-muted w-full aspect-square max-w-full group/main"
+        >
+          {!!selectedImage.url && (
+            <>
+              {/* Image Container */}
+              <div className="relative w-full h-full overflow-hidden">
+                <Image
+                  src={selectedImage.url}
+                  priority={true}
+                  className="w-full h-full object-cover"
+                  alt="Product main image"
+                  fill
+                  sizes="(max-width: 768px) 100vw, 50vw"
+                />
+              </div>
+
+              <div
+                className="absolute inset-0 z-20 cursor-zoom-in"
+                onMouseEnter={() => !isPageScrolling && setIsZooming(true)}
+                onMouseLeave={() => setIsZooming(false)}
+                onMouseMove={handleMouseMove}
+                onWheel={() => setIsZooming(false)}
+              />
+
+              {/* View Similar Button - Expanding on Hover */}
+              <button
+                onClick={(e) => {
+                  e.stopPropagation()
+                  const element = document.getElementById('related-products')
+                  if (element) {
+                    element.scrollIntoView({ behavior: 'smooth' })
+                  }
+                }}
+                className="absolute bottom-4 right-4 z-30 bg-white text-heading px-3 py-2 flex items-center gap-2 shadow-brand-sm hover:shadow-brand transition-all text-[11px] font-semibold uppercase tracking-[var(--letter-spacing-nav)]"
+              >
+                <span>View similar</span>
+              </button>
+
+              {/* Lens Zoom - Using a nested Image for maximum reliability */}
+              {isZooming && !isPageScrolling && containerRef.current && (
+                <div
+                  key={`lens-${selectedImageIndex}`}
+                  className="absolute pointer-events-none z-10 rounded-full border-2 border-white/80 shadow-[0_0_30px_rgba(0,0,0,0.4)] overflow-hidden hidden sm:block"
+                  style={{
+                    width: `${lensSize}px`,
+                    height: `${lensSize}px`,
+                    left: `${zoomPosition.percentX}%`,
+                    top: `${zoomPosition.percentY}%`,
+                    transform: 'translate(-50%, -50%)',
+                  }}
+                >
+                  <div 
+                    className="absolute"
+                    style={{
+                      width: `${containerRef.current.offsetWidth * zoomFactor}px`,
+                      height: `${containerRef.current.offsetHeight * zoomFactor}px`,
+                      left: `${-zoomPosition.x * zoomFactor + lensSize / 2}px`,
+                      top: `${-zoomPosition.y * zoomFactor + lensSize / 2}px`,
+                    }}
+                  >
+                    <Image
+                      src={selectedImage.url}
+                      fill
+                      className="object-cover"
+                      alt="Zoomed view"
+                      sizes="100vw"
+                    />
+                  </div>
+                </div>
+              )}
+            </>
+          )}
+        </div>
+      )}
+
+      {/* All Images - Bottom Row */}
+      {images.length > 0 && (
+        <div className="relative group/gallery flex flex-col gap-1">
+          {/* Navigation Buttons Overlay */}
+          {(showLeftButton || showRightButton) && (
+            <>
+              <button
+                onClick={() => scrollTo('left')}
+                disabled={!showLeftButton}
+                className={`absolute left-1 top-1/2 -translate-y-1/2 w-8 h-8 bg-black/50 hover:bg-black/70 text-white rounded-full flex items-center justify-center transition-all z-40 opacity-0 group-hover/gallery:opacity-100 shadow-lg ${!showLeftButton ? 'hidden' : ''
+                  }`}
+                aria-label="Scroll left"
+              >
+                <svg
+                  className="w-5 h-5"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
+                </svg>
+              </button>
+              <button
+                onClick={() => scrollTo('right')}
+                disabled={!showRightButton}
+                className={`absolute right-3 top-1/2 -translate-y-1/2 w-8 h-8 bg-black/50 hover:bg-black/70 text-white rounded-full flex items-center justify-center transition-all z-40 opacity-0 group-hover/gallery:opacity-100 shadow-lg ${!showRightButton ? 'hidden' : ''
+                  }`}
+                aria-label="Scroll right"
+              >
+                <svg
+                  className="w-5 h-5"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+                </svg>
+              </button>
+            </>
+          )}
+
+          <div
+            ref={scrollContainerRef}
+            onScroll={checkScroll}
+            className="flex flex-row gap-3 sm:gap-4 min-[768px]:gap-4 min-[1023px]:gap-4 min-[1024px]:gap-5 min-[1360px]:gap-6 overflow-x-auto pb-1 no-scrollbar scroll-smooth px-1 snap-x snap-mandatory"
+          >
+            {images.map((image, index) => (
+              <div
+                key={image.id}
+                onClick={() => {
+                  setSelectedImageIndex(index)
+                  const scrollContainer = document.getElementById('product-gallery-container')
+                  if (scrollContainer) {
+                    scrollContainer.scrollTo({ top: 0, behavior: 'smooth' })
+                  }
+                }}
+                className="relative overflow-hidden bg-surface-muted cursor-pointer transition-opacity hover:opacity-80 flex-shrink-0 aspect-square w-[calc(25%-9px)] sm:w-[calc(25%-12px)] min-[1024px]:w-[calc(25%-15px)] min-[1360px]:w-[calc(25%-18px)] snap-start"
+                id={image.id}
+                style={{
+                  border:
+                    selectedImageIndex === index
+                      ? "2px solid var(--color-brand-accent)"
+                      : "2px solid transparent",
+                }}
+              >
+                {!!image.url && (
+                  <Image
+                    src={image.url}
+                    priority={index <= 1 ? true : false}
+                    className="w-full h-full object-cover"
+                    alt={`Product image ${index + 1}`}
+                    fill
+                    sizes="(max-width: 640px) 25vw, 15vw"
+                  />
+                )}
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default ImageGallery