@pradip1995/create-storefront 1.0.1

package/templates/storefront/src/theme/valero/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
+