Added links to pages in the footer

components/core/Footer/Footer.tsx

@@ -1,18 +1,25 @@
-import cn from 'classnames'
 import { FC } from 'react'
-import { Logo } from '@components/ui'
+import cn from 'classnames'
 import Link from 'next/link'
+import type { Page } from '@lib/bigcommerce/api/operations/get-all-pages'
+import getSlug from '@utils/get-slug'
+import { Logo } from '@components/ui'
 
 interface Props {
   className?: string
   children?: any
+  pages?: Page[]
 }
 
-const Footer: FC<Props> = ({ className }) => {
+const LEGAL_PAGES = ['terms-of-use', 'shipping-returns', 'privacy-policy']
+
+const Footer: FC<Props> = ({ className, pages }) => {
   const rootClassName = cn(
     'flex flex-col p-6 md:py-12 md:flex-row flex-wrap max-w-screen-xl m-auto',
     className
   )
+  const { sitePages, legalPages } = getPages(pages)
+
   return (
     <div className="bg-black text-white">
       <hr
@@ -30,29 +37,27 @@ const Footer: FC<Props> = ({ className }) => {
         </Link>
 
         <ul className="flex flex-initial flex-col divide-y divide-gray-700 md:divide-y-0 my-12 md:my-0 md:flex-1">
-          <li className="py-3 md:py-0 md:pb-4">
-            <Link href="/about">
-              <a className="text-gray-400 hover:text-white transition ease-in-out duration-100">
-                About
-              </a>
-            </Link>
-          </li>
+          {sitePages.map((page) => (
+            <li key={page.url} className="py-3 md:py-0 md:pb-4">
+              <Link href={page.url!}>
+                <a className="text-gray-400 hover:text-white transition ease-in-out duration-100">
+                  {page.name}
+                </a>
+              </Link>
+            </li>
+          ))}
+        </ul>
 
-          <li className="py-3 md:py-0 md:pb-4">
-            <Link href="/terms">
-              <a className="text-gray-400 hover:text-white transition ease-in-out duration-100">
-                Terms of Use
-              </a>
-            </Link>
-          </li>
-
-          <li className="py-3 md:py-0 md:pb-4">
-            <Link href="/privacy">
-              <a className="text-gray-400 hover:text-white transition ease-in-out duration-100">
-                Privacy Policy
-              </a>
-            </Link>
-          </li>
+        <ul className="flex flex-initial flex-col divide-y divide-gray-700 md:divide-y-0 my-12 md:my-0 md:flex-1">
+          {legalPages.map((page) => (
+            <li key={page.url} className="py-3 md:py-0 md:pb-4">
+              <Link href={page.url!}>
+                <a className="text-gray-400 hover:text-white transition ease-in-out duration-100">
+                  {page.name}
+                </a>
+              </Link>
+            </li>
+          ))}
         </ul>
 
         <small className="text-base">
@@ -63,4 +68,31 @@ const Footer: FC<Props> = ({ className }) => {
   )
 }
 
+function getPages(pages?: Page[]) {
+  const sitePages: Page[] = []
+  const legalPages: Page[] = []
+
+  if (pages) {
+    pages.forEach((page) => {
+      if (page.url) {
+        if (LEGAL_PAGES.includes(getSlug(page.url))) {
+          legalPages.push(page)
+        } else {
+          sitePages.push(page)
+        }
+      }
+    })
+  }
+
+  return {
+    sitePages: sitePages.sort(bySortOrder),
+    legalPages: legalPages.sort(bySortOrder),
+  }
+}
+
+// Sort pages by the sort order assigned in the BC dashboard
+function bySortOrder(a: Page, b: Page) {
+  return (a.sort_order ?? 0) - (b.sort_order ?? 0)
+}
+
 export default Footer

components/core/Layout/Layout.tsx

@@ -1,22 +1,27 @@
-import cn from 'classnames'
 import { FC } from 'react'
+import type { Page } from '@lib/bigcommerce/api/operations/get-all-pages'
 import { CommerceProvider } from '@lib/bigcommerce'
 import { Navbar, Featurebar, Footer } from '@components/core'
 import { Container, Sidebar } from '@components/ui'
 import { CartSidebarView } from '@components/cart'
 import { UIProvider, useUI } from '@components/ui/context'
 
-interface Props {
-  className?: string
-  children?: any
+interface LayoutProps {
+  pageProps: {
+    pages?: Page[]
+  }
 }
 
-const CoreLayout: FC<Props> = ({ className, children }) => {
-  const rootClassName = cn('h-full bg-primary', className)
+interface Props {
+  children?: any
+  pages?: Page[]
+}
+
+const CoreLayout: FC<Props> = ({ children, pages }) => {
   const { displaySidebar, closeSidebar } = useUI()
 
   return (
-    <div className={rootClassName}>
+    <div className="h-full bg-primary">
       <Featurebar
         title="Free Standard Shipping on orders over $99.99"
         description="Due to COVID-19, some orders may experience processing and delivery delays."
@@ -25,7 +30,7 @@ const CoreLayout: FC<Props> = ({ className, children }) => {
         <Navbar />
       </Container>
       <main className="fit">{children}</main>
-      <Footer />
+      <Footer pages={pages} />
       <Sidebar show={displaySidebar} close={closeSidebar}>
         <CartSidebarView />
       </Sidebar>
@@ -33,10 +38,10 @@ const CoreLayout: FC<Props> = ({ className, children }) => {
   )
 }
 
-const Layout: FC<Props> = (props) => (
+const Layout: FC<LayoutProps> = ({ children, pageProps }) => (
   <CommerceProvider locale="en-us">
     <UIProvider>
-      <CoreLayout {...props} />
+      <CoreLayout pages={pageProps.pages}>{children}</CoreLayout>
     </UIProvider>
   </CommerceProvider>
 )

lib/bigcommerce/api/operations/get-all-pages.ts

@@ -11,18 +11,22 @@ export type GetAllPagesResult<
 
 async function getAllPages(opts?: {
   config?: BigcommerceConfig
+  preview?: boolean
 }): Promise<GetAllPagesResult>
 
 async function getAllPages<T extends { pages: any[] }, V = any>(opts: {
   url: string
   config?: BigcommerceConfig
+  preview?: boolean
 }): Promise<GetAllPagesResult<T>>
 
 async function getAllPages({
   config,
+  preview,
 }: {
   url?: string
   config?: BigcommerceConfig
+  preview?: boolean
 } = {}): Promise<GetAllPagesResult> {
   config = getConfig(config)
   // RecursivePartial forces the method to check for every prop in the data, which is
@@ -30,9 +34,10 @@ async function getAllPages({
   const { data } = await config.storeApiFetch<
     RecursivePartial<{ data: Page[] }>
   >('/v3/content/pages')
+  const pages = (data as RecursiveRequired<typeof data>) ?? []
 
   return {
-    pages: (data as RecursiveRequired<typeof data>) ?? [],
+    pages: preview ? pages : pages.filter((p) => p.is_visible),
   }
 }
 

pages/_app.tsx

@@ -25,7 +25,7 @@ export default function MyApp({ Component, pageProps }: AppProps) {
       <ThemeProvider>
         <SSRProvider>
           <OverlayProvider>
-            <Layout>
+            <Layout pageProps={pageProps}>
               <Component {...pageProps} />
             </Layout>
           </OverlayProvider>

pages/index.tsx

@@ -17,13 +17,10 @@ export async function getStaticProps({ preview }: GetStaticPropsContext) {
 }
 
 export default function Home({
-  pages,
   products,
   categories,
   brands,
 }: InferGetStaticPropsType<typeof getStaticProps>) {
-  console.log('PAGES', pages)
-
   return (
     <div className="mt-3">
       <Grid items={products.slice(0, 3)} wrapper={ProductCard} />

pages/search.tsx

@@ -7,11 +7,11 @@ import useSearch from '@lib/bigcommerce/products/use-search'
 import { Layout } from '@components/core'
 import { Container, Grid, Skeleton } from '@components/ui'
 import { ProductCard } from '@components/product'
+import getSlug from '@utils/get-slug'
 import {
   filterQuery,
   getCategoryPath,
   getDesignerPath,
-  getSlug,
   useSearchMeta,
 } from '@utils/search'
 import { range } from 'lodash'

utils/get-slug.ts

@@ -0,0 +1,5 @@
+// Remove trailing and leading slash, usually included in nodes
+// returned by the BigCommerce API
+const getSlug = (path: string) => path.replace(/^\/|\/$/g, '')
+
+export default getSlug

utils/search.tsx

@@ -34,9 +34,6 @@ export const filterQuery = (query: any) =>
     return obj
   }, {})
 
-// Remove trailing and leading slash
-export const getSlug = (path: string) => path.replace(/^\/|\/$/g, '')
-
 export const getCategoryPath = (slug: string, brand?: string) =>
   `/search${brand ? `/designers/${brand}` : ''}${slug ? `/${slug}` : ''}`