@pradip1995/theme-valero 1.0.1

package/src/blocks/home/ShopByAge/index.tsx

@@ -0,0 +1,128 @@
+import Image from "next/image"
+import LocalizedClientLink from "@modules/common/components/localized-client-link"
+import { HttpTypes } from "@medusajs/types"
+import PlaceholderImage from "@modules/common/icons/placeholder-image"
+
+type ShopByAgeProps = {
+  collections: HttpTypes.StoreCollection[]
+}
+
+const getIconForCollection = (collection: HttpTypes.StoreCollection): string | null => {
+  // First try to get icon from metadata
+  const metadata = (collection as any)?.metadata || {}
+  const collectionIcon = metadata.collection_icon || null
+
+  if (collectionIcon) {
+    return collectionIcon
+  }
+
+  // Fallback to hardcoded logic if metadata doesn't have icon
+  const handle = collection.handle?.toLowerCase() || ""
+  const title = collection.title?.toLowerCase() || ""
+  const searchText = `${handle} ${title}`
+
+  if (searchText.includes("newborn") || searchText.includes("new-born") || searchText.includes("0-12")) {
+    return "/Newborn.svg"
+  }
+  if (searchText.includes("toddler") || searchText.includes("1-3")) {
+    return "/Toddler.svg"
+  }
+  if (searchText.includes("kids") || searchText.includes("kid") || searchText.includes("4-7")) {
+    return "/Kids.svg"
+  }
+  if (searchText.includes("juniors") || searchText.includes("junior") || searchText.includes("8-12")) {
+    return "/Juniors.svg"
+  }
+  if (searchText.includes("teens") || searchText.includes("teen") || searchText.includes("13-15")) {
+    return "/Teens.svg"
+  }
+  return null
+}
+
+const ShopByAge = ({ collections }: ShopByAgeProps) => {
+  if (!collections || collections.length === 0) {
+    return null
+  }
+
+  // Reverse collections so that last added appears last (API returns newest first)
+  const reversedCollections = [...collections].reverse()
+
+  return (
+    <div className="w-full py-8 sm:py-10 md:py-12 lg:py-16 px-4 sm:px-5 md:px-6">
+      <div className="max-w-[1440px] mx-auto">
+        <h2 className="text-xl sm:text-2xl md:text-3xl font-bold text-center mb-6 sm:mb-8 md:mb-10 lg:mb-12 text-gray-900">
+          Shop By Age
+        </h2>
+        <div className="grid grid-cols-2 min-[500px]:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4 sm:gap-5 md:gap-6 lg:gap-8 xl:gap-12 justify-items-center">
+          {reversedCollections.map((collection) => {
+            const metadata = (collection as any)?.metadata || {}
+            const collectionImage = metadata.image || (collection as any)?.thumbnail || null
+            const iconPath = getIconForCollection(collection)
+            const collectionAge = metadata.collection_age || null
+
+            return (
+              <LocalizedClientLink
+                key={collection.id}
+                href={`/store?collection=${collection.id}`}
+                data-ga-event="shop_by_age_click"
+                data-ga-label={collection.title || "Collection"}
+                data-ga-collection-name={collection.title || ""}
+                data-ga-collection-handle={collection.handle || ""}
+                data-ga-collection-id={collection.id || ""}
+                data-ga-collection-age={collectionAge || ""}
+                data-ga-section="Shop by Age"
+                className="flex flex-col items-center group transition-transform duration-200 hover:scale-105 w-full"
+              >
+                {/* Wrap all content in a div with pointer-events-none to force GTM to target the Link */}
+                <div className="flex flex-col items-center pointer-events-none">
+                  <div className="relative w-24 h-24 sm:w-28 sm:h-28 md:w-32 md:h-32 lg:w-40 lg:h-40 xl:w-[180px] xl:h-[180px] mb-2 sm:mb-3 md:mb-4 rounded-full overflow-hidden bg-gray-100 flex items-center justify-center">
+                    {collectionImage ? (
+                      <Image
+                        src={collectionImage}
+                        alt={collection.title || "Collection"}
+                        fill
+                        sizes="(max-width: 640px) 50vw, (max-width: 1024px) 25vw, 20vw"
+                        className="w-full h-full object-cover"
+                      />
+                    ) : iconPath ? (
+                      <Image
+                        src={iconPath}
+                        alt={collection.title || "Collection"}
+                        fill
+                        sizes="(max-width: 640px) 50vw, (max-width: 1024px) 25vw, 20vw"
+                        className="w-full h-full object-contain"
+                      />
+                    ) : (
+                      <div className="w-full h-full flex items-center justify-center">
+                        <PlaceholderImage size={80} />
+                      </div>
+                    )}
+                  </div>
+                  <h3 className="text-xs sm:text-sm md:text-base lg:text-lg font-semibold text-gray-900 mb-0.5 sm:mb-1 group-hover:text-pink-500 transition-colors text-center px-1">
+                    {collection.title}
+                  </h3>
+                  {collectionAge && (
+                    <p className="text-[10px] sm:text-xs md:text-sm text-gray-600 text-center mb-0.5 sm:mb-1 px-1">
+                      {collectionAge}
+                    </p>
+                  )}
+                  {collection.handle && !collectionAge && (
+                    <p className="text-[10px] sm:text-xs md:text-sm text-gray-600 text-center px-1">
+                      {collection.handle
+                        .split(" ")
+                        .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+                        .join(" ")}
+                    </p>
+                  )}
+                </div>
+              </LocalizedClientLink>
+            )
+          })}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default ShopByAge
+

package/src/blocks/home/ShopByCategory/index.tsx

@@ -0,0 +1,409 @@
+import Image from "next/image"
+import LocalizedClientLink from "@modules/common/components/localized-client-link"
+import { HttpTypes } from "@medusajs/types"
+import PlaceholderImage from "@modules/common/icons/placeholder-image"
+
+type ShopByCategoryProps = {
+  categories: HttpTypes.StoreProductCategory[]
+}
+
+const ShopByCategory = ({ categories }: ShopByCategoryProps) => {
+  if (!categories || categories.length === 0) {
+    return null
+  }
+
+  // Filter for subcategories (categories with parent_category_id)
+  const subcategories = categories.filter(
+    (category) => category.parent_category_id && category.parent_category
+  )
+
+  // Find Traditional and Dresses categories
+  const traditionalCategory = subcategories.find(c => {
+    const name = (c.name || "").toLowerCase()
+    return name.includes("traditional")
+  })
+
+  const dressesCategory = subcategories.find(c => {
+    const name = (c.name || "").toLowerCase()
+    return name.includes("dress")
+  })
+
+  // Get other categories (excluding Traditional and Dresses)
+  const otherCategories = subcategories.filter(c => {
+    const name = (c.name || "").toLowerCase()
+    return !name.includes("traditional") && !name.includes("dress")
+  })
+
+  // Build display order: first 3 other categories, then Traditional (index 3), Dresses (index 4), then 6th category
+  const displayCategories: typeof subcategories = []
+  let otherIndex = 0
+
+  // 1. Fill up to first 3 slots with other categories
+  while (displayCategories.length < 3 && otherIndex < otherCategories.length) {
+    displayCategories.push(otherCategories[otherIndex++])
+  }
+
+  // 2. Add Traditional or next other category
+  if (traditionalCategory) {
+    displayCategories.push(traditionalCategory)
+  } else if (otherIndex < otherCategories.length) {
+    displayCategories.push(otherCategories[otherIndex++])
+  }
+
+  // 3. Add Dresses or next other category
+  if (dressesCategory) {
+    displayCategories.push(dressesCategory)
+  } else if (otherIndex < otherCategories.length) {
+    displayCategories.push(otherCategories[otherIndex++])
+  }
+
+  // 4. Fill remaining slots with any remaining other categories
+  while (otherIndex < otherCategories.length) {
+    displayCategories.push(otherCategories[otherIndex++])
+  }
+
+  // No longer slice to 6 - allow all categories
+  const finalDisplayCategories = displayCategories
+
+  if (finalDisplayCategories.length === 0) {
+    return null
+  }
+
+  return (
+    <div className="w-full py-8 lg:py-16 bg-page-bg">
+      <div className="w-full px-4 sm:px-6 md:px-8 lg:px-12 xl:px-16">
+        <div className="w-full max-w-[1360px] mx-auto">
+          <h2 className="font-display text-2xl sm:text-3xl text-heading text-center mb-8 lg:mb-12">
+            Shop by category
+          </h2>
+          {/* Tablet Grid Layout - 768px to 1023px */}
+          <div
+            className="hidden md:grid lg:hidden gap-3 md:gap-4"
+            style={{
+              gridTemplateColumns: 'repeat(4, 1fr)',
+              gridAutoRows: 'minmax(280px, 350px)',
+            }}
+          >
+            {finalDisplayCategories.map((category, index) => {
+              // Calculate grid positioning based on 6-item repeating pattern
+              // Row A (Indices 0,1,2): Large (2 col), Small (1 col), Small (1 col)
+              // Row B (Indices 3,4,5): Small (1 col), Small (1 col), Large (2 col)
+
+              const positionInPattern = index % 6
+              const rowGroup = Math.floor(index / 6)
+              const rowBase = (rowGroup * 2) + 1
+
+              let gridColumn = ""
+              let gridRow = ""
+
+              if (positionInPattern === 0) {
+                gridColumn = "1 / 3" // Span 2 cols
+                gridRow = `${rowBase}`
+              } else if (positionInPattern === 1) {
+                gridColumn = "3"
+                gridRow = `${rowBase}`
+              } else if (positionInPattern === 2) {
+                gridColumn = "4"
+                gridRow = `${rowBase}`
+              } else if (positionInPattern === 3) {
+                gridColumn = "1"
+                gridRow = `${rowBase + 1}`
+              } else if (positionInPattern === 4) {
+                gridColumn = "2"
+                gridRow = `${rowBase + 1}`
+              } else if (positionInPattern === 5) {
+                gridColumn = "3 / 5" // Span 2 cols
+                gridRow = `${rowBase + 1}`
+              }
+
+              // Skip if position not set (shouldn't happen, but safety check)
+              if (!gridColumn || !gridRow) {
+                return null
+              }
+
+              // Get metadata
+              const metadata = (category as any)?.metadata || {}
+              const categoryImage = metadata.category_image || null
+              const backgroundColor = metadata.category_background_color || "#F3F4F6"
+              const showShopNow = metadata.show_shop_now === "true" || metadata.show_shop_now === true
+
+              // Get parent category name as subtitle
+              const parentCategory = (category as any)?.parent_category
+              const subtitle = parentCategory?.name || ""
+
+              // Get subcategory name as main title (in uppercase)
+              const mainTitle = (category.name || "").toUpperCase()
+
+              // Build category URL - use store page with category filter
+              const categoryUrl = category.id
+                ? `/store?category=${category.id}`
+                : "#"
+
+              return (
+                <LocalizedClientLink
+                  key={`tablet-${category.id}`}
+                  href={categoryUrl}
+                  data-ga-event="shop_by_category_click"
+                  data-ga-label={category.name || "Category"}
+                  data-ga-category-name={category.name || ""}
+                  data-ga-category-handle={category.handle || ""}
+                  data-ga-category-id={category.id || ""}
+                  data-ga-parent-category={subtitle || ""}
+                  className="relative rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-shadow duration-200 flex flex-col group w-full"
+                  style={{
+                    backgroundColor: backgroundColor,
+                    gridColumn: gridColumn,
+                    gridRow: gridRow,
+                    minHeight: "280px",
+                  }}
+                >
+                  <div className="flex flex-col h-full p-3 md:p-4 pb-0 md:pb-0 pointer-events-none">
+                    {/* Category Title */}
+                    <div className="mb-2 md:mb-3">
+                      {subtitle && (
+                        <p className="text-xs text-gray-700 mb-1">{subtitle}</p>
+                      )}
+                      <h3 className="text-sm md:text-base lg:text-lg font-bold text-gray-900">
+                        {mainTitle}
+                      </h3>
+                    </div>
+
+                    {/* Category Image */}
+                    <div className="flex-1 flex items-end justify-center relative" style={{ minHeight: 0 }}>
+                      {categoryImage ? (
+                        <div className="w-full h-full flex items-end justify-center">
+                          <Image
+                            src={categoryImage}
+                            alt={category.name || "Category"}
+                            fill
+                            sizes="(max-width: 768px) 50vw, (max-width: 1024px) 33vw, 25vw"
+                            className="object-contain object-bottom"
+                          />
+                        </div>
+                      ) : (
+                        <div className="w-full h-full flex items-end justify-center">
+                          <PlaceholderImage size={90} />
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                </LocalizedClientLink>
+              )
+            })}
+          </div>
+
+          {/* Desktop Grid Layout - 1024px and above */}
+          <div
+            className="hidden lg:grid gap-4 xl:gap-6"
+            style={{
+              gridTemplateColumns: 'repeat(4, 1fr)',
+              gridAutoRows: 'minmax(300px, 390px)',
+            }}
+          >
+            {finalDisplayCategories.map((category, index) => {
+              // Same 4-column logic for Desktop
+              const positionInPattern = index % 6
+              const rowGroup = Math.floor(index / 6)
+              const rowBase = (rowGroup * 2) + 1
+
+              let gridColumn = ""
+              let gridRow = ""
+
+              if (positionInPattern === 0) {
+                gridColumn = "1 / 3"
+                gridRow = `${rowBase}`
+              } else if (positionInPattern === 1) {
+                gridColumn = "3"
+                gridRow = `${rowBase}`
+              } else if (positionInPattern === 2) {
+                gridColumn = "4"
+                gridRow = `${rowBase}`
+              } else if (positionInPattern === 3) {
+                gridColumn = "1"
+                gridRow = `${rowBase + 1}`
+              } else if (positionInPattern === 4) {
+                gridColumn = "2"
+                gridRow = `${rowBase + 1}`
+              } else if (positionInPattern === 5) {
+                gridColumn = "3 / 5"
+                gridRow = `${rowBase + 1}`
+              }
+
+              // Skip if position not set (shouldn't happen, but safety check)
+              if (!gridColumn || !gridRow) {
+                return null
+              }
+
+              // Get metadata
+              const metadata = (category as any)?.metadata || {}
+              const categoryImage = metadata.category_image || null
+              const backgroundColor = metadata.category_background_color || "#F3F4F6"
+              const showShopNow = metadata.show_shop_now === "true" || metadata.show_shop_now === true
+
+              // Get parent category name as subtitle
+              const parentCategory = (category as any)?.parent_category
+              const subtitle = parentCategory?.name || ""
+
+              // Get subcategory name as main title (in uppercase)
+              const mainTitle = (category.name || "").toUpperCase()
+
+              // Build category URL - use store page with category filter
+              const categoryUrl = category.id
+                ? `/store?category=${category.id}`
+                : "#"
+
+              return (
+                <LocalizedClientLink
+                  key={category.id}
+                  href={categoryUrl}
+                  data-ga-event="shop_by_category_click"
+                  data-ga-label={category.name || "Category"}
+                  data-ga-category-name={category.name || ""}
+                  data-ga-category-handle={category.handle || ""}
+                  data-ga-category-id={category.id || ""}
+                  data-ga-parent-category={subtitle || ""}
+                  className="relative rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-shadow duration-200 flex flex-col group w-full"
+                  style={{
+                    backgroundColor: backgroundColor,
+                    gridColumn: gridColumn,
+                    gridRow: gridRow,
+                    minHeight: "300px",
+                  }}
+                >
+                  <div className="flex flex-col h-full p-4 sm:p-5 lg:p-6 pb-0 sm:pb-0 lg:pb-0 pointer-events-none">
+                    {/* Category Title */}
+                    <div className="mb-3 lg:mb-4">
+                      {subtitle && (
+                        <p className="text-xs sm:text-sm text-gray-700 mb-1">{subtitle}</p>
+                      )}
+                      <h3 className="text-lg sm:text-xl lg:text-2xl font-bold text-gray-900">
+                        {mainTitle}
+                      </h3>
+                    </div>
+
+                    {/* Category Image */}
+                    <div className="flex-1 flex items-end justify-center relative" style={{ minHeight: 0 }}>
+                      {categoryImage ? (
+                        <div className="w-full h-full flex items-end justify-center">
+                          <Image
+                            src={categoryImage}
+                            alt={category.name || "Category"}
+                            fill
+                            sizes="(max-width: 768px) 50vw, (max-width: 1024px) 33vw, 25vw"
+                            className="object-contain object-bottom"
+                          />
+                        </div>
+                      ) : (
+                        <div className="w-full h-full flex items-end justify-center">
+                          <PlaceholderImage size={110} />
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                </LocalizedClientLink>
+              )
+            })}
+          </div>
+
+          {/* Mobile Layout - Below 768px */}
+          <style dangerouslySetInnerHTML={{
+            __html: `
+              @media (min-width: 350px) and (max-width: 767px) {
+                .shop-category-mobile-container {
+                  grid-template-columns: repeat(2, 1fr) !important;
+                }
+              }
+              @media (min-width: 350px) and (max-width: 450px) {
+                .shop-category-mobile-card {
+                  aspect-ratio: 0.55 !important;
+                  min-height: 210px !important;
+                  height: 210px !important;
+                }
+              }
+              @media (min-width: 450px) and (max-width: 550px) {
+                .shop-category-mobile-card {
+                  aspect-ratio: 0.75 !important;
+                  min-height: 250px !important;
+                }
+              }
+              @media (min-width: 550px) and (max-width: 767px) {
+                .shop-category-mobile-card {
+                  aspect-ratio: 0.80 !important;
+                  min-height: 280px !important;
+                }
+              }
+            `
+          }} />
+          <div
+            className="grid grid-cols-1 md:hidden gap-3 sm:gap-4 shop-category-mobile-container"
+          >
+            {finalDisplayCategories.map((category) => {
+              const metadata = (category as any)?.metadata || {}
+              const categoryImage = metadata.category_image || null
+              const backgroundColor = metadata.category_background_color || "#F3F4F6"
+              const showShopNow = metadata.show_shop_now === "true" || metadata.show_shop_now === true
+
+              const parentCategory = (category as any)?.parent_category
+              const subtitle = parentCategory?.name || ""
+              const mainTitle = (category.name || "").toUpperCase()
+              const categoryUrl = category.id
+                ? `/store?category=${category.id}`
+                : "#"
+
+              return (
+                <LocalizedClientLink
+                  key={category.id}
+                  href={categoryUrl}
+                  data-ga-event="shop_by_category_click"
+                  data-ga-label={category.name || "Category"}
+                  data-ga-category-name={category.name || ""}
+                  data-ga-category-handle={category.handle || ""}
+                  data-ga-category-id={category.id || ""}
+                  data-ga-parent-category={subtitle || ""}
+                  className="relative rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-shadow duration-200 flex flex-col group w-full shop-category-mobile-card"
+                  style={{
+                    backgroundColor: backgroundColor,
+                    width: '100%',
+                    aspectRatio: '0.85', // Default aspect ratio
+                    minHeight: '300px',
+                  }}
+                >
+                  <div className="flex flex-col h-full p-4 sm:p-5 pb-0 sm:pb-0 pointer-events-none">
+                    <div className="mb-3">
+                      {subtitle && (
+                        <p className="text-xs sm:text-sm text-gray-700 mb-1">{subtitle}</p>
+                      )}
+                      <h3 className="text-lg sm:text-xl font-bold text-gray-900">
+                        {mainTitle}
+                      </h3>
+                    </div>
+                    <div className="flex-1 flex items-end justify-center relative" style={{ minHeight: 0 }}>
+                      {categoryImage ? (
+                        <div className="w-full h-full flex items-end justify-center">
+                          <Image
+                            src={categoryImage}
+                            alt={category.name || "Category"}
+                            fill
+                            sizes="(max-width: 768px) 50vw, (max-width: 1024px) 33vw, 25vw"
+                            className="object-contain object-bottom"
+                          />
+                        </div>
+                      ) : (
+                        <div className="w-full h-full flex items-end justify-center">
+                          <PlaceholderImage size={120} />
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                </LocalizedClientLink>
+              )
+            })}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default ShopByCategory
+