chore: add empty page state for product categories

src/components/fundamentals/icons/swatch-icon/index.tsx

@@ -0,0 +1,34 @@
+import React from "react"
+import IconProps from "../types/icon-type"
+
+type ISwatchIconProps = IconProps & {
+ accentColor?: string
+}
+
+const SwatchIcon: React.FC<ISwatchIconProps> = ({
+ size = "24px",
+ color = "currentColor",
+ accentColor = "#F43F5E",
+ ...attributes
+}) => {
+ return (
+ <svg
+ width={size}
+ height={size}
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ {...attributes}
+ >
+ <path
+ d="M3.415 16.585C3.70519 16.8753 4.04973 17.1055 4.42892 17.2626C4.80812 17.4197 5.21455 17.5006 5.625 17.5006M3.415 16.585C4.00105 17.1711 4.7962 17.5006 5.625 17.5006M3.415 16.585C2.82895 15.9989 2.5 15.2038 2.5 14.375V3.4375C2.5 2.92 2.92 2.5 3.4375 2.5H7.8125C8.33 2.5 8.75 2.92 8.75 3.4375V6.83083M5.625 17.5006C6.03545 17.5006 6.44188 17.4197 6.82108 17.2626C7.20027 17.1055 7.54481 16.8753 7.835 16.585M5.625 17.5006C6.4538 17.5006 7.24895 17.1711 7.835 16.585M5.625 17.5006L16.5625 17.5C17.08 17.5 17.5 17.08 17.5 16.5625V12.1875C17.5 11.67 17.08 11.25 16.5625 11.25H13.1692M7.835 16.585L13.1692 11.25M7.835 16.585C8.42105 15.9989 8.75 15.2038 8.75 14.375V6.83083M13.1692 11.25L15.5683 8.85C15.935 8.485 15.935 7.89167 15.5683 7.525L12.475 4.43083C12.1083 4.065 11.515 4.065 11.15 4.43083L8.75 6.83083M5.625 14.375H5.63167V14.3817H5.625V14.375Z"
+ stroke={color}
+ strokeWidth="1.5"
+ strokeLinecap="round"
+ strokeLinejoin="round"
+ />
+ </svg>
+ )
+}
+
+export default SwatchIcon

src/components/organisms/body-card.tsx

@@ -32,6 +32,8 @@ const BodyCard: React.FC<BodyCardProps> = ({
  className,
  children,
  compact = false,
+ setBorders = false,
+ footerMinHeight = 24,
  ...rest
 }) => {
  const { isScrolled, scrollListener } = useScroll({ threshold: 16 })
@@ -50,41 +52,55 @@ const BodyCard: React.FC<BodyCardProps> = ({
  )}
  </div>
  <div
- className="pt-medium px-xlarge flex flex-col grow overflow-y-auto"
+ className={clsx("flex flex-col grow overflow-y-auto", {
+ "border-b border-solid border-grey-20": setBorders,
+ })}
  onScroll={scrollListener}
  >
- <div className="flex items-center justify-between mt-6 h-xlarge">
- {customHeader ? (
- <div>{customHeader}</div>
- ) : title ? (
- <h1 className="inter-xlarge-semibold text-grey-90">{title}</h1>
- ) : (
- <div />
- )}
+ <div
+ className={clsx("px-xlarge py-large", {
+ "border-b border-solid border-grey-20": setBorders,
+ })}
+ >
+ <div className="flex items-center justify-between">
+ <div>
+ {customHeader ? (
+ <div>{customHeader}</div>
+ ) : title ? (
+ <h1 className="inter-xlarge-semibold text-grey-90">{title}</h1>
+ ) : (
+ <div />
+ )}
+
+ {subtitle && (
+ <h3 className="inter-small-regular pt-1.5 text-grey-50">
+ {subtitle}
+ </h3>
+ )}
+ </div>
 
- <div className="flex items-center space-x-2">
- {status && status}
- <Actionables
- actions={actionables}
- forceDropdown={forceDropdown}
- customTrigger={customActionable}
- />
+ <div className="flex items-center space-x-2">
+ {status && status}
+ <Actionables
+ actions={actionables}
+ forceDropdown={forceDropdown}
+ customTrigger={customActionable}
+ />
+ </div>
  </div>
  </div>
- {subtitle && (
- <h3 className="inter-small-regular pt-1.5 text-grey-50">
- {subtitle}
- </h3>
- )}
- {children && (
- <div
- className={clsx("flex flex-col", {
- "my-large grow": !compact,
- })}
- >
- {children}
- </div>
- )}
+
+ <div className="px-xlarge">
+ {children && (
+ <div
+ className={clsx("flex flex-col", {
+ "my-large grow": !compact,
+ })}
+ >
+ {children}
+ </div>
+ )}
+ </div>
  </div>
  {events && events.length > 0 ? (
  <div className="pb-large pt-base px-xlarge border-t border-grey-20">
@@ -106,7 +122,7 @@ const BodyCard: React.FC<BodyCardProps> = ({
  </div>
  </div>
  ) : (
- <div className="min-h-[24px]" />
+ <div className={`min-h-[${footerMinHeight}px]`} />
  )}
  </div>
  )

src/components/organisms/sidebar/index.tsx

@@ -6,6 +6,7 @@ import GearIcon from "../../fundamentals/icons/gear-icon"
 import GiftIcon from "../../fundamentals/icons/gift-icon"
 import SaleIcon from "../../fundamentals/icons/sale-icon"
 import TagIcon from "../../fundamentals/icons/tag-icon"
+import SwatchIcon from "../../fundamentals/icons/swatch-icon"
 import UsersIcon from "../../fundamentals/icons/users-icon"
 import SidebarMenuItem from "../../molecules/sidebar-menu-item"
 import UserMenu from "../../molecules/user-menu"
@@ -55,6 +56,12 @@ const Sidebar: React.FC = () => {
  text={"Products"}
  triggerHandler={triggerHandler}
  />
+ <SidebarMenuItem
+ pageLink={"/a/product-categories"}
+ icon={<SwatchIcon size={ICON_SIZE} />}
+ text={"Product Categories"}
+ triggerHandler={triggerHandler}
+ />
  <SidebarMenuItem
  pageLink={"/a/customers"}
  icon={<UsersIcon size={ICON_SIZE} />}

src/domain/product-categories/index.tsx

@@ -0,0 +1,43 @@
+import BodyCard from "../../components/organisms/body-card"
+import ProductCategoryTable from "../../components/templates/customer-table"
+import ProductCategoriesPageTableHeader from "./header"
+import { Route, Routes } from "react-router-dom"
+import { useContext } from "react"
+
+const ProductCategoryIndex = () => {
+ const actions = [
+ {
+ label: "Add category",
+ onClick: () => {},
+ },
+ ]
+
+ return (
+ <div className="flex flex-col grow h-full">
+ <div className="w-full flex flex-col grow">
+ <BodyCard
+ className="h-full"
+ title="Product Categories"
+ subtitle="Helps you to keep your products organized."
+ actionables={actions}
+ setBorders={true}
+ footerMinHeight={40}
+ >
+ <div className="flex items-center justify-center min-h-[600px]">
+ <p className="text-grey-40">No product categories yet, use the above button to create your first category.</p>
+ </div>
+ </BodyCard>
+ </div>
+ </div>
+ )
+}
+
+const ProductCategories = () => {
+ return (
+ <Routes>
+ <Route index element={<ProductCategoryIndex />} />
+ </Routes>
+ )
+}
+
+export default ProductCategories

src/pages/a.jsx

@@ -17,6 +17,7 @@ import Orders from "../domain/orders"
 import DraftOrders from "../domain/orders/draft-orders"
 import Pricing from "../domain/pricing"
 import ProductsRoute from "../domain/products"
+import ProductCategories from "../domain/product-categories"
 import SalesChannels from "../domain/sales-channels"
 import Settings from "../domain/settings"
 import PublishableApiKeys from "../domain/publishable-api-keys"
@@ -42,6 +43,7 @@ const DashboardRoutes = () => {
  <Routes className="h-full">
  <Route path="oauth/:app_name" element={<Oauth />} />
  <Route path="products/*" element={<ProductsRoute />} />
+ <Route path="product-categories/*" element={<ProductCategories />} />
  <Route path="collections/*" element={<Collections />} />
  <Route path="gift-cards/*" element={<GiftCards />} />
  <Route path="orders/*" element={<Orders />} />