Icky 173 (vercel#9)

* Initial commit related to getAllPages

* Initial Changes

* Making documentListName configurable

* fixing dynamic page rendering and adding typescript code

Co-authored-by: amolnadagonde <amol.nadagonde@kibocommerce.com>
Co-authored-by: kibo-sushant <sushant.jadhav@blueconchtech.com>

framework/kibocommerce/api/index.ts

@@ -18,7 +18,8 @@ export interface KiboCommerceConfig extends CommerceAPIConfig {
   sharedSecret?: string
   storeApiFetch<T>(endpoint: string, options?: RequestInit): Promise<T>
   customerCookieMaxAgeInDays: number,
-  currencyCode: string
+  currencyCode: string,
+  documentListName: string
 }
 
 const config: KiboCommerceConfig = {
@@ -27,6 +28,7 @@ const config: KiboCommerceConfig = {
   cartCookie: process.env.KIBO_CART_COOKIE || '',
   customerCookie: process.env.KIBO_CUSTOMER_COOKIE || '',
   cartCookieMaxAge: 2592000,
+  documentListName: 'siteSnippets@mozu',
   fetch: createFetchGraphqlApi(() => getCommerceApi().getConfig()),
   // REST API
   apiHost: process.env.KIBO_API_HOST || '',
@@ -52,7 +54,7 @@ export const provider = { config, operations }
 export type KiboCommerceProvider = typeof provider
 export type KiboCommerceAPI<
   P extends KiboCommerceProvider = KiboCommerceProvider
-> = CommerceAPI<P | any>
+  > = CommerceAPI<P | any>
 
 export function getCommerceApi<P extends KiboCommerceProvider>(
   customProvider: P = provider as any

framework/kibocommerce/api/operations/get-all-pages.ts

@@ -1,19 +1,46 @@
-export type Page = { url: string }
-export type GetAllPagesResult = { pages: Page[] }
-import type { KiboCommerceConfig } from '../index'
+import type { OperationContext } from '@commerce/api/operations'
+import type { Page } from "../../types/page";
+import type { KiboCommerceConfig, KiboCommerceProvider } from '../index'
+import { getAllPagesQuery } from '../queries/get-all-pages-query'
 
-export default function getAllPagesOperation() {
-  function getAllPages({
+export type GetAllPagesResult<
+  T extends { pages: Page[] } = { pages: Page[] }
+  > = T
+
+export default function getAllPagesOperation({
+  commerce,
+}: OperationContext<KiboCommerceProvider>) {
+
+  async function getAllPages({
+    query = getAllPagesQuery,
     config,
-    preview,
+    variables,
   }: {
     url?: string
     config?: Partial<KiboCommerceConfig>
+    variables?: any
     preview?: boolean
-  }): Promise<GetAllPagesResult> {
-    return Promise.resolve({
-      pages: [],
-    })
+    query?: string
+  } = {}): Promise<GetAllPagesResult> {
+    const cfg = commerce.getConfig(config)
+    variables = {
+      documentListName: cfg.documentListName
+    }
+    const { data } = await cfg.fetch(query, { variables });
+
+    const pages = data.documentListDocuments.items.map((page: any) => {
+      return {
+        id: page.id,
+        name: page.name.charAt(0).toUpperCase() + page.name.slice(1),
+        url: page.properties.url,
+        body: page.properties.body,
+        is_visible: page.properties.is_visible,
+        sort_order: page.properties.sort_order
+      }
+    });
+
+    return { pages }
   }
+
   return getAllPages
-}
+}

framework/kibocommerce/api/operations/get-page.ts

@@ -1,13 +1,42 @@
-export type Page = any
-export type GetPageResult = { page?: Page }
+import type {
+  OperationContext,
+} from '@commerce/api/operations'
+import type { KiboCommerceConfig, KiboCommerceProvider } from '..'
+import { normalizePage } from '../../../bigcommerce/lib/normalize'
+import { getPageQuery } from '../queries/get-page-query'
 
-export type PageVariables = {
-  id: number
-}
+export default function getPageOperation({
+  commerce,
+}: OperationContext<KiboCommerceProvider>) {
+  async function getPage<T extends any>({
+    url,
+    variables,
+    config,
+    preview,
+  }: {
+    url?: string
+    variables: any
+    config?: Partial<KiboCommerceConfig>
+    preview?: boolean
+  }): Promise<any> {
+    // RecursivePartial forces the method to check for every prop in the data, which is
+    // required in case there's a custom `url`
+    const cfg = commerce.getConfig(config)
+    const pageVariables = { documentListName: cfg.documentListName,  filter: `id eq ${variables.id}`}
 
-export default function getPageOperation() {
-  function getPage(): Promise<GetPageResult> {
-    return Promise.resolve({})
+    const { data } = await cfg.fetch<any>(getPageQuery, {variables: pageVariables})
+
+    const firstPage = data.documentListDocuments.items?.[0].properties;
+    const page = firstPage as any
+
+    if (preview || page?.is_visible) {
+      const normalizedPage =  { page: normalizePage(page as any) }
+      normalizedPage.page.name = url as string;
+
+      return normalizedPage
+    }
+    return {}
   }
+
   return getPage
-}
+}

framework/kibocommerce/api/queries/get-all-pages-query.ts

@@ -0,0 +1,11 @@
+export const getAllPagesQuery = /* GraphQL */`
+query($documentListName: String!) {
+    documentListDocuments(documentListName:$documentListName){
+      items {
+        id
+        name
+        listFQN
+        properties
+      }
+    }
+  }`;

framework/kibocommerce/api/queries/get-page-query.ts

@@ -0,0 +1,11 @@
+export const getPageQuery = /* GraphQL */`
+query($documentListName: String!, $filter: String!) {
+    documentListDocuments(documentListName: $documentListName, filter: $filter){
+            startIndex
+            totalCount
+            items {
+                properties
+            }
+        }
+    }
+`;

framework/kibocommerce/types/page.ts

@@ -0,0 +1,11 @@
+import * as Core from '@commerce/types/page'
+export * from '@commerce/types/page'
+
+export type Page = Core.Page
+
+export type PageTypes = {
+    page: Page
+}
+
+export type GetAllPagesOperation = Core.GetAllPagesOperation<PageTypes>
+export type GetPageOperation = Core.GetPageOperation<PageTypes>

pages/[...pages].tsx

@@ -7,7 +7,6 @@ import commerce from '@lib/api/commerce'
 import { Text } from '@components/ui'
 import { Layout } from '@components/common'
 import getSlug from '@lib/get-slug'
-import { missingLocaleInPages } from '@lib/usage-warns'
 import type { Page } from '@commerce/types/page'
 import { useRouter } from 'next/router'
 
@@ -17,19 +16,23 @@ export async function getStaticProps({
   locale,
   locales,
 }: GetStaticPropsContext<{ pages: string[] }>) {
+
   const config = { locale, locales }
   const pagesPromise = commerce.getAllPages({ config, preview })
   const siteInfoPromise = commerce.getSiteInfo({ config, preview })
   const { pages } = await pagesPromise
   const { categories } = await siteInfoPromise
   const path = params?.pages.join('/')
   const slug = locale ? `${locale}/${path}` : path
+
   const pageItem = pages.find((p: Page) =>
     p.url ? getSlug(p.url) === slug : false
   )
+
   const data =
     pageItem &&
     (await commerce.getPage({
+      url: pageItem.url,
       variables: { id: pageItem.id! },
       config,
       preview,
@@ -51,20 +54,14 @@ export async function getStaticProps({
 export async function getStaticPaths({ locales }: GetStaticPathsContext) {
   const config = { locales }
   const { pages }: { pages: Page[] } = await commerce.getAllPages({ config })
-  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)
+    .map((page) => {
+      return { params: { slug : page?.url?.split('/'), pages : [page?.url?.split('/')[1]] } }
     })
-  log()
 
   return {
-    paths,
+    paths: paths,
     fallback: 'blocking',
   }
 }