v1 convert to Agility

pages/[...pages].tsx

@@ -1,74 +0,0 @@
-import type {
-  GetStaticPathsContext,
-  GetStaticPropsContext,
-  InferGetStaticPropsType,
-} from 'next'
-import { Text } from '@components/ui'
-import { Layout } from '@components/common'
-import getSlug from '@lib/get-slug'
-import { missingLocaleInPages } from '@lib/usage-warns'
-import { getConfig } from '@framework/api'
-import getPage from '@framework/api/operations/get-page'
-import getAllPages from '@framework/api/operations/get-all-pages'
-import { defaultPageProps } from '@lib/defaults'
-
-export async function getStaticProps({
-  preview,
-  params,
-  locale,
-}: GetStaticPropsContext<{ pages: string[] }>) {
-  const config = getConfig({ locale })
-  const { pages } = await getAllPages({ preview, config })
-  const path = params?.pages.join('/')
-  const slug = locale ? `${locale}/${path}` : path
-
-  const pageItem = pages.find((p) => (p.url ? getSlug(p.url) === slug : false))
-  const data =
-    pageItem &&
-    (await getPage({ variables: { id: pageItem.id! }, config, preview }))
-  const page = data?.page
-
-  if (!page) {
-    // We throw to make sure this fails at build time as this is never expected to happen
-    throw new Error(`Page with slug '${slug}' not found`)
-  }
-
-  return {
-    props: { ...defaultPageProps, pages, page },
-    revalidate: 60 * 60, // Every hour
-  }
-}
-
-export async function getStaticPaths({ locales }: GetStaticPathsContext) {
-  const { pages } = await getAllPages()
-  const [invalidPaths, log] = missingLocaleInPages()
-  const paths = pages
-    .map((page) => page.url)
-    .filter((url) => {
-      if (!url || !locales) return url
-      // If there are locales, only include the pages that include one of the available locales
-      if (locales.includes(getSlug(url).split('/')[0])) return url
-
-      invalidPaths.push(url)
-    })
-  log()
-
-  return {
-    paths,
-    // Fallback shouldn't be enabled here or otherwise this route
-    // will catch every page, even 404s, and we don't want that
-    fallback: false,
-  }
-}
-
-export default function Pages({
-  page,
-}: InferGetStaticPropsType<typeof getStaticProps>) {
-  return (
-    <div className="max-w-2xl mx-auto py-20">
-      {page?.body && <Text html={page.body} />}
-    </div>
-  )
-}
-
-Pages.Layout = Layout

pages/[...slug].tsx

@@ -0,0 +1,92 @@
+import type {
+	GetStaticPathsContext,
+	GetStaticPropsContext,
+	InferGetStaticPropsType,
+
+} from 'next'
+
+
+
+import { Layout } from '@components/common'
+import { missingLocaleInPages } from '@lib/usage-warns'
+
+import { defaultPageProps } from '@lib/defaults'
+
+import AgilityPage from "components/agility-global/AgilityPage"
+
+import { getConfig } from '@framework/api'
+import getProduct from '@framework/api/operations/get-product'
+
+import { getAgilityPageProps, getAgilityPaths } from "framework/agility/agility.node";
+import getAllProductPaths from '@framework/api/operations/get-all-product-paths'
+
+
+export async function getStaticProps({ preview, params, locale }: GetStaticPropsContext<{ slug: string[] }>) {
+
+	let productCode: string | null = null
+
+	//check if this page is a product...
+	if (params?.slug.length === 2
+		&& params?.slug[0] === "product") {
+		productCode = params.slug[1]
+		params.slug[1] = "product-details"
+	}
+
+	const page = await getAgilityPageProps({ preview, params, locale });
+
+	if (productCode) {
+		const config = getConfig({ locale })
+		const { product } = await getProduct({
+			variables: { slug: productCode },
+			config,
+			preview,
+		})
+
+		if (product !== null) {
+			page.dynamicPageItem = product
+		} else {
+			throw new Error(`Product not found`)
+		}
+	}
+
+	const pages = await getAgilityPaths()
+
+	if (!page) {
+		// We throw to make sure this fails at build time as this is never expected to happen
+		throw new Error(`Page not found`)
+	}
+
+	return {
+		props: { ...defaultPageProps, pages, page },
+		revalidate: 60 * 60, // Every hour
+	}
+}
+
+export async function getStaticPaths({ locales }: GetStaticPathsContext) {
+
+	//get the paths configured in agility
+	let agilityPaths = await getAgilityPaths()
+
+	//remove product/product-details from the agility paths (special details page...)
+	agilityPaths = agilityPaths.filter(p => p !== "/product/product-details")
+
+	//get the product paths from the commerce api
+	const { products } = await getAllProductPaths()
+	const productPaths = products.map(p => `/product${p.node.path}`)
+
+	const paths = [...agilityPaths, ...productPaths]
+
+	return {
+		paths,
+		fallback: true,
+	}
+}
+
+export default function Pages({ page }: InferGetStaticPropsType<typeof getStaticProps>) {
+
+	return (
+		<AgilityPage  {...page} />
+	)
+}
+
+Pages.Layout = Layout

pages/blog.tsx

@@ -1,97 +0,0 @@
-import type { GetStaticPropsContext } from 'next'
-import { getConfig } from '@framework/api'
-import getAllPages from '@framework/api/operations/get-all-pages'
-import { Layout } from '@components/common'
-import { Container } from '@components/ui'
-
-export async function getStaticProps({
-  preview,
-  locale,
-}: GetStaticPropsContext) {
-  const config = getConfig({ locale })
-  const { pages } = await getAllPages({ config, preview })
-  return {
-    props: { pages },
-  }
-}
-
-export default function Blog() {
-  return (
-    <div className="pb-20">
-      <div className="text-center pt-40 pb-56 bg-violet">
-        <Container>
-          <h2 className="text-4xl tracking-tight leading-10 font-extrabold text-white sm:text-5xl sm:leading-none md:text-6xl">
-            Welcome to Acme, the simplest way to start publishing with Next.js
-          </h2>
-          <p className="mt-3 max-w-md mx-auto text-gray-100 sm:text-lg md:mt-5 md:text-xl md:max-w-3xl">
-            The Yeezy BOOST 350 V2 lineup continues to grow. We recently had the
-            ‘Carbon’ iteration, and now release details have been locked in for
-            this ‘Natural’ joint. Revealed by Yeezy Mafia earlier this year, the
-            shoe was originally called ‘Abez’, which translated to ‘Tin’ in
-            Hebrew. It’s now undergone a name change, and will be referred to as
-            ‘Natura`
-          </p>
-          <div className="mt-5 max-w-md mx-auto sm:flex sm:justify-center md:mt-12">
-            <div className="flex">
-              <div className="flex-shrink-0 inline-flex rounded-full border-2 border-white">
-                <img
-                  className="h-12 w-12 rounded-full"
-                  src="https://vercel.com/api/www/avatar/61182a9f6bda512b4d9263c9c8a60aabe0402f4c?s=204"
-                  alt="Avatar"
-                />
-              </div>
-              <div className="ml-4">
-                <div className="leading-6 font-medium text-white">
-                  José Rodriguez
-                </div>
-                <div className="leading-6 font-medium text-gray-200">
-                  CEO, Acme
-                </div>
-              </div>
-            </div>
-          </div>
-        </Container>
-      </div>
-      <Container>
-        <div className="-mt-96 mx-auto">
-          <img src="/jacket.png" alt="Jacket" />
-        </div>
-        {/** Replace by HTML Content */}
-        <div className="text-lg leading-7 font-medium py-6 text-justify max-w-6xl mx-auto">
-          <p className="py-6">
-            Biscuit oat cake wafer icing ice cream tiramisu pudding cupcake.
-            Candy canes bonbon dragée jujubes chocolate bar. Cotton candy gummi
-            bears toffee cake muffin caramels. Gummi bears danish liquorice ice
-            cream pie chocolate cake lemon drops tootsie roll tart. Biscuit
-            gingerbread fruitcake cake powder pudding cotton candy chocolate
-            bar. Sweet donut marshmallow powder gummies jelly tart powder.
-            Cheesecake bonbon caramels cupcake jujubes halvah donut dessert
-            chocolate bar. Jelly gummies liquorice lollipop chocolate bar
-            chocolate cake sugar plum. Lollipop toffee dragée chocolate bar
-            jelly beans biscuit. Halvah danish cheesecake. Tiramisu donut
-            lollipop pie donut caramels tiramisu. Jujubes candy canes pudding
-            danish fruitcake chupa chups jujubes carrot cake bonbon. Halvah
-            donut jelly halvah bonbon.
-          </p>
-          <p className="py-6">
-            Biscuit sugar plum sweet chocolate cake sesame snaps soufflé
-            topping. Gummies topping bonbon chocolate pudding cookie. Wafer
-            icing cake pastry. Gummies candy dessert chupa chups lemon drops.
-            Soufflé marshmallow oat cake chocolate jelly-o caramels pie marzipan
-            jelly beans. Cheesecake liquorice donut jujubes halvah ice cream
-            cotton candy cupcake sugar plum. Ice cream ice cream sweet roll
-            fruitcake icing. Muffin candy canes bonbon croissant gummies lemon
-            drops pie danish. Oat cake chocolate toffee cake jelly tart
-            caramels. Sweet donut cheesecake pastry pie sweet. Bonbon lollipop
-            brownie. Soufflé pudding macaroon cotton candy gingerbread. Biscuit
-            macaroon gummi bears candy canes chocolate cake lemon drops
-            marshmallow. Chocolate cake cotton candy marshmallow cake sweet
-            tootsie roll bonbon carrot cake sugar plum.
-          </p>
-        </div>
-      </Container>
-    </div>
-  )
-}
-
-Blog.Layout = Layout

pages/cart.tsx

@@ -1,145 +0,0 @@
-import type { GetStaticPropsContext } from 'next'
-import { getConfig } from '@framework/api'
-import getAllPages from '@framework/api/operations/get-all-pages'
-import useCart from '@framework/cart/use-cart'
-import usePrice from '@framework/use-price'
-import { Layout } from '@components/common'
-import { Button } from '@components/ui'
-import { Bag, Cross, Check } from '@components/icons'
-import { CartItem } from '@components/cart'
-import { Text } from '@components/ui'
-
-export async function getStaticProps({
-  preview,
-  locale,
-}: GetStaticPropsContext) {
-  const config = getConfig({ locale })
-  const { pages } = await getAllPages({ config, preview })
-  return {
-    props: { pages },
-  }
-}
-
-export default function Cart() {
-  const { data, isEmpty } = useCart()
-  const { price: subTotal } = usePrice(
-    data && {
-      amount: data.base_amount,
-      currencyCode: data.currency.code,
-    }
-  )
-  const { price: total } = usePrice(
-    data && {
-      amount: data.cart_amount,
-      currencyCode: data.currency.code,
-    }
-  )
-
-  const items = data?.line_items.physical_items ?? []
-
-  const error = null
-  const success = null
-
-  return (
-    <div className="grid lg:grid-cols-12">
-      <div className="lg:col-span-8">
-        {isEmpty ? (
-          <div className="flex-1 px-12 py-24 flex flex-col justify-center items-center ">
-            <span className="border border-dashed border-secondary flex items-center justify-center w-16 h-16 bg-primary p-12 rounded-lg text-primary">
-              <Bag className="absolute" />
-            </span>
-            <h2 className="pt-6 text-2xl font-bold tracking-wide text-center">
-              Your cart is empty
-            </h2>
-            <p className="text-accents-6 px-10 text-center pt-2">
-              Biscuit oat cake wafer icing ice cream tiramisu pudding cupcake.
-            </p>
-          </div>
-        ) : error ? (
-          <div className="flex-1 px-4 flex flex-col justify-center items-center">
-            <span className="border border-white rounded-full flex items-center justify-center w-16 h-16">
-              <Cross width={24} height={24} />
-            </span>
-            <h2 className="pt-6 text-xl font-light text-center">
-              We couldn’t process the purchase. Please check your card
-              information and try again.
-            </h2>
-          </div>
-        ) : success ? (
-          <div className="flex-1 px-4 flex flex-col justify-center items-center">
-            <span className="border border-white rounded-full flex items-center justify-center w-16 h-16">
-              <Check />
-            </span>
-            <h2 className="pt-6 text-xl font-light text-center">
-              Thank you for your order.
-            </h2>
-          </div>
-        ) : (
-          <div className="px-4 sm:px-6 flex-1">
-            <Text variant="pageHeading">My Cart</Text>
-            <Text variant="sectionHeading">Review your Order</Text>
-            <ul className="py-6 space-y-6 sm:py-0 sm:space-y-0 sm:divide-y sm:divide-accents-2 border-b border-accents-2">
-              {items.map((item) => (
-                <CartItem
-                  key={item.id}
-                  item={item}
-                  currencyCode={data?.currency.code!}
-                />
-              ))}
-            </ul>
-            <div className="my-6">
-              <Text>
-                Before you leave, take a look at these items. We picked them
-                just for you
-              </Text>
-              <div className="flex py-6 space-x-6">
-                {[1, 2, 3, 4, 5, 6].map((x) => (
-                  <div className="border border-accents-3 w-full h-24 bg-accents-2 bg-opacity-50 transform cursor-pointer hover:scale-110 duration-75" />
-                ))}
-              </div>
-            </div>
-          </div>
-        )}
-      </div>
-      <div className="lg:col-span-4">
-        <div className="flex-shrink-0 px-4 py-24 sm:px-6">
-          <div className="border-t border-accents-2">
-            <ul className="py-3">
-              <li className="flex justify-between py-1">
-                <span>Subtotal</span>
-                <span>{subTotal}</span>
-              </li>
-              <li className="flex justify-between py-1">
-                <span>Taxes</span>
-                <span>Calculated at checkout</span>
-              </li>
-              <li className="flex justify-between py-1">
-                <span>Estimated Shipping</span>
-                <span className="font-bold tracking-wide">FREE</span>
-              </li>
-            </ul>
-            <div className="flex justify-between border-t border-accents-2 py-3 font-bold mb-10">
-              <span>Total</span>
-              <span>{total}</span>
-            </div>
-          </div>
-          <div className="flex flex-row justify-end">
-            <div className="w-full lg:w-72">
-              {isEmpty ? (
-                <Button href="/" Component="a" width="100%">
-                  Continue Shopping
-                </Button>
-              ) : (
-                <Button href="/checkout" Component="a" width="100%">
-                  Proceed to Checkout
-                </Button>
-              )}
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-}
-
-Cart.Layout = Layout

pages/index.tsx

@@ -1,152 +1,2 @@
-import rangeMap from '@lib/range-map'
-import { Layout } from '@components/common'
-import { ProductCard } from '@components/product'
-import { Grid, Marquee, Hero } from '@components/ui'
-import HomeAllProductsGrid from '@components/common/HomeAllProductsGrid'
-import type { GetStaticPropsContext, InferGetStaticPropsType } from 'next'
-
-import { getConfig } from '@framework/api'
-import getAllProducts from '@framework/api/operations/get-all-products'
-import getSiteInfo from '@framework/api/operations/get-site-info'
-import getAllPages from '@framework/api/operations/get-all-pages'
-
-export async function getStaticProps({
-  preview,
-  locale,
-}: GetStaticPropsContext) {
-  const config = getConfig({ locale })
-
-  // Get Featured Products
-  const { products: featuredProducts } = await getAllProducts({
-    variables: { field: 'featuredProducts', first: 6 },
-    config,
-    preview,
-  })
-
-  // Get Best Selling Products
-  const { products: bestSellingProducts } = await getAllProducts({
-    variables: { field: 'bestSellingProducts', first: 6 },
-    config,
-    preview,
-  })
-
-  // Get Best Newest Products
-  const { products: newestProducts } = await getAllProducts({
-    variables: { field: 'newestProducts', first: 12 },
-    config,
-    preview,
-  })
-
-  const { categories, brands } = await getSiteInfo({ config, preview })
-  const { pages } = await getAllPages({ config, preview })
-
-  // These are the products that are going to be displayed in the landing.
-  // We prefer to do the computation at buildtime/servertime
-  const { featured, bestSelling } = (() => {
-    // Create a copy of products that we can mutate
-    const products = [...newestProducts]
-    // If the lists of featured and best selling products don't have enough
-    // products, then fill them with products from the products list, this
-    // is useful for new commerce sites that don't have a lot of products
-    return {
-      featured: rangeMap(6, (i) => featuredProducts[i] ?? products.shift())
-        .filter(nonNullable)
-        .sort((a, b) => a.node.prices.price.value - b.node.prices.price.value)
-        .reverse(),
-      bestSelling: rangeMap(
-        6,
-        (i) => bestSellingProducts[i] ?? products.shift()
-      ).filter(nonNullable),
-    }
-  })()
-
-  return {
-    props: {
-      featured,
-      bestSelling,
-      newestProducts,
-      categories,
-      brands,
-      pages,
-    },
-    revalidate: 14400,
-  }
-}
-
-const nonNullable = (v: any) => v
-
-export default function Home({
-  featured,
-  bestSelling,
-  brands,
-  categories,
-  newestProducts,
-}: InferGetStaticPropsType<typeof getStaticProps>) {
-  return (
-    <div>
-      <Grid>
-        {featured.slice(0, 3).map(({ node }, i) => (
-          <ProductCard
-            key={node.path}
-            product={node}
-            imgWidth={i === 0 ? 1080 : 540}
-            imgHeight={i === 0 ? 1080 : 540}
-            imgPriority
-            imgLoading="eager"
-          />
-        ))}
-      </Grid>
-      <Marquee variant="secondary">
-        {bestSelling.slice(3, 6).map(({ node }) => (
-          <ProductCard
-            key={node.path}
-            product={node}
-            variant="slim"
-            imgWidth={320}
-            imgHeight={320}
-            imgLayout="fixed"
-          />
-        ))}
-      </Marquee>
-      <Hero
-        headline="Release Details: The Yeezy BOOST 350 V2 ‘Natural'"
-        description="
-        The Yeezy BOOST 350 V2 lineup continues to grow. We recently had the
-        ‘Carbon’ iteration, and now release details have been locked in for
-        this ‘Natural’ joint. Revealed by Yeezy Mafia earlier this year, the
-        shoe was originally called ‘Abez’, which translated to ‘Tin’ in
-        Hebrew. It’s now undergone a name change, and will be referred to as
-        ‘Natural’."
-      />
-      <Grid layout="B">
-        {featured.slice(3, 6).map(({ node }, i) => (
-          <ProductCard
-            key={node.path}
-            product={node}
-            imgWidth={i === 1 ? 1080 : 540}
-            imgHeight={i === 1 ? 1080 : 540}
-          />
-        ))}
-      </Grid>
-      <Marquee>
-        {bestSelling.slice(0, 3).map(({ node }) => (
-          <ProductCard
-            key={node.path}
-            product={node}
-            variant="slim"
-            imgWidth={320}
-            imgHeight={320}
-            imgLayout="fixed"
-          />
-        ))}
-      </Marquee>
-      <HomeAllProductsGrid
-        categories={categories}
-        brands={brands}
-        newestProducts={newestProducts}
-      />
-    </div>
-  )
-}
-
-Home.Layout = Layout
+//this is just a pointer to the catch-all route and logic for all CMS driven pages (i.e. even rootpage is dynamic from the CMS)
+export { default, getStaticProps } from './[...slug]';

pages/orders.tsx

@@ -1,38 +0,0 @@
-import type { GetStaticPropsContext } from 'next'
-import { getConfig } from '@framework/api'
-import getAllPages from '@framework/api/operations/get-all-pages'
-import { Layout } from '@components/common'
-import { Container, Text } from '@components/ui'
-import { Bag } from '@components/icons'
-
-export async function getStaticProps({
-  preview,
-  locale,
-}: GetStaticPropsContext) {
-  const config = getConfig({ locale })
-  const { pages } = await getAllPages({ config, preview })
-  return {
-    props: { pages },
-  }
-}
-
-export default function Orders() {
-  return (
-    <Container>
-      <Text variant="pageHeading">My Orders</Text>
-      <div className="flex-1 p-24 flex flex-col justify-center items-center ">
-        <span className="border border-dashed border-secondary rounded-full flex items-center justify-center w-16 h-16 p-12 bg-primary text-primary">
-          <Bag className="absolute" />
-        </span>
-        <h2 className="pt-6 text-2xl font-bold tracking-wide text-center">
-          No orders found
-        </h2>
-        <p className="text-accents-6 px-10 text-center pt-2">
-          Biscuit oat cake wafer icing ice cream tiramisu pudding cupcake.
-        </p>
-      </div>
-    </Container>
-  )
-}
-
-Orders.Layout = Layout

pages/product/[slug].tsx

@@ -1,70 +0,0 @@
-import type {
-  GetStaticPathsContext,
-  GetStaticPropsContext,
-  InferGetStaticPropsType,
-} from 'next'
-import { useRouter } from 'next/router'
-import { Layout } from '@components/common'
-import { ProductView } from '@components/product'
-
-// Data
-
-import { getConfig } from '@framework/api'
-import getProduct from '@framework/api/operations/get-product'
-import getAllPages from '@framework/api/operations/get-all-pages'
-import getAllProductPaths from '@framework/api/operations/get-all-product-paths'
-
-export async function getStaticProps({
-  params,
-  locale,
-  preview,
-}: GetStaticPropsContext<{ slug: string }>) {
-  const config = getConfig({ locale })
-
-  const { pages } = await getAllPages({ config, preview })
-  const { product } = await getProduct({
-    variables: { slug: params!.slug },
-    config,
-    preview,
-  })
-
-  if (!product) {
-    throw new Error(`Product with slug '${params!.slug}' not found`)
-  }
-
-  return {
-    props: { pages, product },
-    revalidate: 200,
-  }
-}
-
-export async function getStaticPaths({ locales }: GetStaticPathsContext) {
-  const { products } = await getAllProductPaths()
-
-  return {
-    paths: locales
-      ? locales.reduce<string[]>((arr, locale) => {
-          // Add a product path for every locale
-          products.forEach((product) => {
-            arr.push(`/${locale}/product${product.node.path}`)
-          })
-          return arr
-        }, [])
-      : products.map((product) => `/product${product.node.path}`),
-    fallback: 'blocking',
-  }
-}
-
-export default function Slug({
-  product,
-}: InferGetStaticPropsType<typeof getStaticProps>) {
-  const router = useRouter()
-
-  return router.isFallback ? (
-    <h1>Loading...</h1> // TODO (BC) Add Skeleton Views
-  ) : (
-    <ProductView product={product} />
-  )
-}
-
-Slug.Layout = Layout

pages/profile.tsx

@@ -1,44 +0,0 @@
-import type { GetStaticPropsContext } from 'next'
-import { getConfig } from '@framework/api'
-import getAllPages from '@framework/api/operations/get-all-pages'
-import useCustomer from '@framework/use-customer'
-import { Layout } from '@components/common'
-import { Container, Text } from '@components/ui'
-
-export async function getStaticProps({
-  preview,
-  locale,
-}: GetStaticPropsContext) {
-  const config = getConfig({ locale })
-  const { pages } = await getAllPages({ config, preview })
-  return {
-    props: { pages },
-  }
-}
-
-export default function Profile() {
-  const { data } = useCustomer()
-  return (
-    <Container>
-      <Text variant="pageHeading">My Profile</Text>
-      {data && (
-        <div className="grid lg:grid-cols-12">
-          <div className="lg:col-span-8 pr-4">
-            <div>
-              <Text variant="sectionHeading">Full Name</Text>
-              <span>
-                {data.firstName} {data.lastName}
-              </span>
-            </div>
-            <div className="mt-5">
-              <Text variant="sectionHeading">Email</Text>
-              <span>{data.email}</span>
-            </div>
-          </div>
-        </div>
-      )}
-    </Container>
-  )
-}
-
-Profile.Layout = Layout

pages/search.tsx

@@ -1,458 +0,0 @@
-import cn from 'classnames'
-import type { GetStaticPropsContext, InferGetStaticPropsType } from 'next'
-import Link from 'next/link'
-import { useState } from 'react'
-import { useRouter } from 'next/router'
-import { getConfig } from '@framework/api'
-import getAllPages from '@framework/api/operations/get-all-pages'
-import getSiteInfo from '@framework/api/operations/get-site-info'
-import useSearch from '@framework/products/use-search'
-import { Layout } from '@components/common'
-import { ProductCard } from '@components/product'
-import { Container, Grid, Skeleton } from '@components/ui'
-
-import rangeMap from '@lib/range-map'
-import getSlug from '@lib/get-slug'
-import {
-  filterQuery,
-  getCategoryPath,
-  getDesignerPath,
-  useSearchMeta,
-} from '@lib/search'
-
-export async function getStaticProps({
-  preview,
-  locale,
-}: GetStaticPropsContext) {
-  const config = getConfig({ locale })
-  const { pages } = await getAllPages({ config, preview })
-  const { categories, brands } = await getSiteInfo({ config, preview })
-
-  return {
-    props: { pages, categories, brands },
-  }
-}
-
-const SORT = Object.entries({
-  'latest-desc': 'Latest arrivals',
-  'trending-desc': 'Trending',
-  'price-asc': 'Price: Low to high',
-  'price-desc': 'Price: High to low',
-})
-
-export default function Search({
-  categories,
-  brands,
-}: InferGetStaticPropsType<typeof getStaticProps>) {
-  const [activeFilter, setActiveFilter] = useState('')
-  const [toggleFilter, setToggleFilter] = useState(false)
-
-  const router = useRouter()
-  const { asPath } = router
-  const { q, sort } = router.query
-  // `q` can be included but because categories and designers can't be searched
-  // in the same way of products, it's better to ignore the search input if one
-  // of those is selected
-  const query = filterQuery({ sort })
-
-  const { pathname, category, brand } = useSearchMeta(asPath)
-  const activeCategory = categories.find(
-    (cat) => getSlug(cat.path) === category
-  )
-  const activeBrand = brands.find(
-    (b) => getSlug(b.node.path) === `brands/${brand}`
-  )?.node
-
-  const { data } = useSearch({
-    search: typeof q === 'string' ? q : '',
-    categoryId: activeCategory?.entityId,
-    brandId: activeBrand?.entityId,
-    sort: typeof sort === 'string' ? sort : '',
-  })
-
-  const handleClick = (event: any, filter: string) => {
-    if (filter !== activeFilter) {
-      setToggleFilter(true)
-    } else {
-      setToggleFilter(!toggleFilter)
-    }
-
-    setActiveFilter(filter)
-  }
-
-  return (
-    <Container>
-      <div className="grid grid-cols-1 lg:grid-cols-12 gap-4 mt-3 mb-20">
-        <div className="col-span-8 lg:col-span-2 order-1 lg:order-none">
-          {/* Categories */}
-          <div className="relative inline-block w-full">
-            <div className="lg:hidden">
-              <span className="rounded-md shadow-sm">
-                <button
-                  type="button"
-                  onClick={(e) => handleClick(e, 'categories')}
-                  className="flex justify-between w-full rounded-sm border border-gray-300 px-4 py-3 bg-white text-sm leading-5 font-medium text-gray-700 hover:text-gray-500 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-gray-50 active:text-gray-800 transition ease-in-out duration-150"
-                  id="options-menu"
-                  aria-haspopup="true"
-                  aria-expanded="true"
-                >
-                  {activeCategory?.name
-                    ? `Category: ${activeCategory?.name}`
-                    : 'All Categories'}
-                  <svg
-                    className="-mr-1 ml-2 h-5 w-5"
-                    xmlns="http://www.w3.org/2000/svg"
-                    viewBox="0 0 20 20"
-                    fill="currentColor"
-                  >
-                    <path
-                      fill-rule="evenodd"
-                      d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
-                      clip-rule="evenodd"
-                    />
-                  </svg>
-                </button>
-              </span>
-            </div>
-            <div
-              className={`origin-top-left absolute lg:relative left-0 mt-2 w-full rounded-md shadow-lg lg:shadow-none z-10 mb-10 lg:block ${
-                activeFilter !== 'categories' || toggleFilter !== true
-                  ? 'hidden'
-                  : ''
-              }`}
-            >
-              <div className="rounded-sm bg-white shadow-xs lg:bg-none lg:shadow-none">
-                <div
-                  role="menu"
-                  aria-orientation="vertical"
-                  aria-labelledby="options-menu"
-                >
-                  <ul>
-                    <li
-                      className={cn(
-                        'block text-sm leading-5 text-gray-700 lg:text-base lg:no-underline lg:font-bold lg:tracking-wide hover:bg-gray-100 lg:hover:bg-transparent hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900',
-                        {
-                          underline: !activeCategory?.name,
-                        }
-                      )}
-                    >
-                      <Link
-                        href={{ pathname: getCategoryPath('', brand), query }}
-                      >
-                        <a
-                          onClick={(e) => handleClick(e, 'categories')}
-                          className={
-                            'block lg:inline-block px-4 py-2 lg:p-0 lg:my-2 lg:mx-4'
-                          }
-                        >
-                          All Categories
-                        </a>
-                      </Link>
-                    </li>
-                    {categories.map((cat) => (
-                      <li
-                        key={cat.path}
-                        className={cn(
-                          'block text-sm leading-5 text-gray-700 hover:bg-gray-100 lg:hover:bg-transparent hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900',
-                          {
-                            underline:
-                              activeCategory?.entityId === cat.entityId,
-                          }
-                        )}
-                      >
-                        <Link
-                          href={{
-                            pathname: getCategoryPath(cat.path, brand),
-                            query,
-                          }}
-                        >
-                          <a
-                            onClick={(e) => handleClick(e, 'categories')}
-                            className={
-                              'block lg:inline-block px-4 py-2 lg:p-0 lg:my-2 lg:mx-4'
-                            }
-                          >
-                            {cat.name}
-                          </a>
-                        </Link>
-                      </li>
-                    ))}
-                  </ul>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          {/* Designs */}
-          <div className="relative inline-block w-full">
-            <div className="lg:hidden mt-3">
-              <span className="rounded-md shadow-sm">
-                <button
-                  type="button"
-                  onClick={(e) => handleClick(e, 'brands')}
-                  className="flex justify-between w-full rounded-sm border border-gray-300 px-4 py-3 bg-white text-sm leading-5 font-medium text-gray-900 hover:text-gray-500 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-gray-50 active:text-gray-800 transition ease-in-out duration-150"
-                  id="options-menu"
-                  aria-haspopup="true"
-                  aria-expanded="true"
-                >
-                  {activeBrand?.name
-                    ? `Design: ${activeBrand?.name}`
-                    : 'All Designs'}
-                  <svg
-                    className="-mr-1 ml-2 h-5 w-5"
-                    xmlns="http://www.w3.org/2000/svg"
-                    viewBox="0 0 20 20"
-                    fill="currentColor"
-                  >
-                    <path
-                      fill-rule="evenodd"
-                      d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
-                      clip-rule="evenodd"
-                    />
-                  </svg>
-                </button>
-              </span>
-            </div>
-            <div
-              className={`origin-top-left absolute lg:relative left-0 mt-2 w-full rounded-md shadow-lg lg:shadow-none z-10 mb-10 lg:block ${
-                activeFilter !== 'brands' || toggleFilter !== true
-                  ? 'hidden'
-                  : ''
-              }`}
-            >
-              <div className="rounded-sm bg-white shadow-xs lg:bg-none lg:shadow-none">
-                <div
-                  role="menu"
-                  aria-orientation="vertical"
-                  aria-labelledby="options-menu"
-                >
-                  <ul>
-                    <li
-                      className={cn(
-                        'block text-sm leading-5 text-gray-700 lg:text-base lg:no-underline lg:font-bold lg:tracking-wide hover:bg-gray-100 lg:hover:bg-transparent hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900',
-                        {
-                          underline: !activeBrand?.name,
-                        }
-                      )}
-                    >
-                      <Link
-                        href={{
-                          pathname: getDesignerPath('', category),
-                          query,
-                        }}
-                      >
-                        <a
-                          onClick={(e) => handleClick(e, 'brands')}
-                          className={
-                            'block lg:inline-block px-4 py-2 lg:p-0 lg:my-2 lg:mx-4'
-                          }
-                        >
-                          All Designers
-                        </a>
-                      </Link>
-                    </li>
-                    {brands.flatMap(({ node }) => (
-                      <li
-                        key={node.path}
-                        className={cn(
-                          'block text-sm leading-5 text-gray-700 hover:bg-gray-100 lg:hover:bg-transparent hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900',
-                          {
-                            underline: activeBrand?.entityId === node.entityId,
-                          }
-                        )}
-                      >
-                        <Link
-                          href={{
-                            pathname: getDesignerPath(node.path, category),
-                            query,
-                          }}
-                        >
-                          <a
-                            onClick={(e) => handleClick(e, 'brands')}
-                            className={
-                              'block lg:inline-block px-4 py-2 lg:p-0 lg:my-2 lg:mx-4'
-                            }
-                          >
-                            {node.name}
-                          </a>
-                        </Link>
-                      </li>
-                    ))}
-                  </ul>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        {/* Products */}
-        <div className="col-span-8 order-3 lg:order-none">
-          {(q || activeCategory || activeBrand) && (
-            <div className="mb-12 transition ease-in duration-75">
-              {data ? (
-                <>
-                  <span
-                    className={cn('animated', {
-                      fadeIn: data.found,
-                      hidden: !data.found,
-                    })}
-                  >
-                    Showing {data.products.length} results{' '}
-                    {q && (
-                      <>
-                        for "<strong>{q}</strong>"
-                      </>
-                    )}
-                  </span>
-                  <span
-                    className={cn('animated', {
-                      fadeIn: !data.found,
-                      hidden: data.found,
-                    })}
-                  >
-                    {q ? (
-                      <>
-                        There are no products that match "<strong>{q}</strong>"
-                      </>
-                    ) : (
-                      <>
-                        There are no products that match the selected category &
-                        designer
-                      </>
-                    )}
-                  </span>
-                </>
-              ) : q ? (
-                <>
-                  Searching for: "<strong>{q}</strong>"
-                </>
-              ) : (
-                <>Searching...</>
-              )}
-            </div>
-          )}
-
-          {data ? (
-            <Grid layout="normal">
-              {data.products.map(({ node }) => (
-                <ProductCard
-                  variant="simple"
-                  key={node.path}
-                  className="animated fadeIn"
-                  product={node}
-                  imgWidth={480}
-                  imgHeight={480}
-                />
-              ))}
-            </Grid>
-          ) : (
-            <Grid layout="normal">
-              {rangeMap(12, (i) => (
-                <Skeleton
-                  key={i}
-                  className="w-full animated fadeIn"
-                  height={325}
-                />
-              ))}
-            </Grid>
-          )}
-        </div>
-
-        {/* Sort */}
-        <div className="col-span-8 lg:col-span-2 order-2 lg:order-none">
-          <div className="relative inline-block w-full">
-            <div className="lg:hidden">
-              <span className="rounded-md shadow-sm">
-                <button
-                  type="button"
-                  onClick={(e) => handleClick(e, 'sort')}
-                  className="flex justify-between w-full rounded-sm border border-gray-300 px-4 py-3 bg-white text-sm leading-5 font-medium text-gray-700 hover:text-gray-500 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-gray-50 active:text-gray-800 transition ease-in-out duration-150"
-                  id="options-menu"
-                  aria-haspopup="true"
-                  aria-expanded="true"
-                >
-                  {sort ? `Sort: ${sort}` : 'Relevance'}
-                  <svg
-                    className="-mr-1 ml-2 h-5 w-5"
-                    xmlns="http://www.w3.org/2000/svg"
-                    viewBox="0 0 20 20"
-                    fill="currentColor"
-                  >
-                    <path
-                      fill-rule="evenodd"
-                      d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
-                      clip-rule="evenodd"
-                    />
-                  </svg>
-                </button>
-              </span>
-            </div>
-            <div
-              className={`origin-top-left absolute lg:relative left-0 mt-2 w-full rounded-md shadow-lg lg:shadow-none z-10 mb-10 lg:block ${
-                activeFilter !== 'sort' || toggleFilter !== true ? 'hidden' : ''
-              }`}
-            >
-              <div className="rounded-sm bg-white shadow-xs lg:bg-none lg:shadow-none">
-                <div
-                  role="menu"
-                  aria-orientation="vertical"
-                  aria-labelledby="options-menu"
-                >
-                  <ul>
-                    <li
-                      className={cn(
-                        'block text-sm leading-5 text-gray-700 lg:text-base lg:no-underline lg:font-bold lg:tracking-wide hover:bg-gray-100 lg:hover:bg-transparent hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900',
-                        {
-                          underline: !sort,
-                        }
-                      )}
-                    >
-                      <Link href={{ pathname, query: filterQuery({ q }) }}>
-                        <a
-                          onClick={(e) => handleClick(e, 'sort')}
-                          className={
-                            'block lg:inline-block px-4 py-2 lg:p-0 lg:my-2 lg:mx-4'
-                          }
-                        >
-                          Relevance
-                        </a>
-                      </Link>
-                    </li>
-                    {SORT.map(([key, text]) => (
-                      <li
-                        key={key}
-                        className={cn(
-                          'block text-sm leading-5 text-gray-700 hover:bg-gray-100 lg:hover:bg-transparent hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900',
-                          {
-                            underline: sort === key,
-                          }
-                        )}
-                      >
-                        <Link
-                          href={{
-                            pathname,
-                            query: filterQuery({ q, sort: key }),
-                          }}
-                        >
-                          <a
-                            onClick={(e) => handleClick(e, 'sort')}
-                            className={
-                              'block lg:inline-block px-4 py-2 lg:p-0 lg:my-2 lg:mx-4'
-                            }
-                          >
-                            {text}
-                          </a>
-                        </Link>
-                      </li>
-                    ))}
-                  </ul>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </Container>
-  )
-}
-
-Search.Layout = Layout

pages/wishlist.tsx

@@ -1,54 +0,0 @@
-import type { GetStaticPropsContext } from 'next'
-import { getConfig } from '@framework/api'
-import getAllPages from '@framework/api/operations/get-all-pages'
-import useWishlist from '@framework/wishlist/use-wishlist'
-import { Layout } from '@components/common'
-import { Heart } from '@components/icons'
-import { Text, Container } from '@components/ui'
-import { WishlistCard } from '@components/wishlist'
-import { defaultPageProps } from '@lib/defaults'
-
-export async function getStaticProps({
-  preview,
-  locale,
-}: GetStaticPropsContext) {
-  const config = getConfig({ locale })
-  const { pages } = await getAllPages({ config, preview })
-  return {
-    props: { ...defaultPageProps, pages },
-  }
-}
-
-export default function Wishlist() {
-  const { data, isEmpty } = useWishlist({ includeProducts: true })
-
-  return (
-    <Container>
-      <div className="mt-3 mb-20">
-        <Text variant="pageHeading">My Wishlist</Text>
-        <div className="group flex flex-col">
-          {isEmpty ? (
-            <div className="flex-1 px-12 py-24 flex flex-col justify-center items-center ">
-              <span className="border border-dashed border-secondary flex items-center justify-center w-16 h-16 bg-primary p-12 rounded-lg text-primary">
-                <Heart className="absolute" />
-              </span>
-              <h2 className="pt-6 text-2xl font-bold tracking-wide text-center">
-                Your wishlist is empty
-              </h2>
-              <p className="text-accents-6 px-10 text-center pt-2">
-                Biscuit oat cake wafer icing ice cream tiramisu pudding cupcake.
-              </p>
-            </div>
-          ) : (
-            data &&
-            data.items?.map((item) => (
-              <WishlistCard key={item.id} item={item} />
-            ))
-          )}
-        </div>
-      </div>
-    </Container>
-  )
-}
-
-Wishlist.Layout = Layout