From 9d05eefd560ed2d03e9ec86e5ed5de84b47f8457 Mon Sep 17 00:00:00 2001
From: Christel Westerberg <christel.westerberg@scandichotels.com>
Date: Thu, 8 Feb 2024 16:16:04 +0100
Subject: [PATCH] feat: init live preview sdk

---
 .env.example => .env.local.example            |  2 +
 .../current-content-page/page.tsx             |  5 +-
 .../(live)/current-content-page/template.tsx  | 17 +++++
 app/[lang]/{ => (live)}/layout.tsx            |  4 +-
 app/[lang]/(preview)/layout.tsx               | 65 +++++++++++++++++++
 app/[lang]/(preview)/preview/page.tsx         | 62 ++++++++++++++++++
 app/[lang]/page.tsx                           |  7 --
 env/schema.mjs                                |  8 ++-
 lib/graphql/Fragments/Blocks/Hero.graphql     | 30 +++++++++
 lib/previewRequest.ts                         | 34 ++++++++++
 middleware.ts                                 | 20 +++++-
 package-lock.json                             | 38 +++++++++++
 package.json                                  |  1 +
 types/requests/blocks/hero.ts                 | 24 +++++++
 .../utils/{pageLink.ts => pagelink.ts}        |  0
 15 files changed, 302 insertions(+), 15 deletions(-)
 rename .env.example => .env.local.example (56%)
 rename app/[lang]/{ => (live)}/current-content-page/page.tsx (96%)
 create mode 100644 app/[lang]/(live)/current-content-page/template.tsx
 rename app/[lang]/{ => (live)}/layout.tsx (97%)
 create mode 100644 app/[lang]/(preview)/layout.tsx
 create mode 100644 app/[lang]/(preview)/preview/page.tsx
 delete mode 100644 app/[lang]/page.tsx
 create mode 100644 lib/graphql/Fragments/Blocks/Hero.graphql
 create mode 100644 lib/previewRequest.ts
 create mode 100644 types/requests/blocks/hero.ts
 rename types/requests/utils/{pageLink.ts => pagelink.ts} (100%)

diff --git a/.env.example b/.env.local.example
similarity index 56%
rename from .env.example
rename to .env.local.example
index 3fe666e0d..9ea6c3014 100644
--- a/.env.example
+++ b/.env.local.example
@@ -2,3 +2,5 @@ CMS_ACCESS_TOKEN=""
 CMS_API_KEY=""
 CMS_ENVIRONMENT="development"
 CMS_URL="https://eu-graphql.contentstack.com/stacks/${CMS_API_KEY}?environment=${CMS_ENVIRONMENT}"
+CMS_PREVIEW_URL="graphql-preview.contentstack.com/stacks/${CMS_API_KEY}?environment=${CMS_ENVIRONMENT}";
+CMS_PREVIEW_TOKEN=""
\ No newline at end of file
diff --git a/app/[lang]/current-content-page/page.tsx b/app/[lang]/(live)/current-content-page/page.tsx
similarity index 96%
rename from app/[lang]/current-content-page/page.tsx
rename to app/[lang]/(live)/current-content-page/page.tsx
index dafb03931..7612cdc5a 100644
--- a/app/[lang]/current-content-page/page.tsx
+++ b/app/[lang]/(live)/current-content-page/page.tsx
@@ -1,7 +1,7 @@
 import { notFound } from "next/navigation"
 
-import { request } from "@/lib/request"
-import { GetCurrentBlockPage } from "@/lib/graphql/Query/CurrentBlockPage.graphql"
+import { request } from "@/lib/request";
+import { GetCurrentBlockPage } from "@/lib/graphql/Query/CurrentBlockPage.graphql";
 
 import Aside from "@/components/Current/Aside"
 import Blocks from "@/components/Current/Blocks"
@@ -19,6 +19,7 @@ export default async function CurrentContentPage({
   searchParams,
 }: PageArgs<LangParams, UriParams>) {
   try {
+    console.log({ searchParams });
     if (!searchParams.uri) {
       throw new Error("Bad URI")
     }
diff --git a/app/[lang]/(live)/current-content-page/template.tsx b/app/[lang]/(live)/current-content-page/template.tsx
new file mode 100644
index 000000000..c451c9d9f
--- /dev/null
+++ b/app/[lang]/(live)/current-content-page/template.tsx
@@ -0,0 +1,17 @@
+import Header from "@/components/Current/Header";
+
+import type { LangParams, PageArgs, UriParams } from "@/types/params";
+
+export default function CurrentContentpageTemplate({ children, params, searchParams }: React.PropsWithChildren<PageArgs<LangParams, UriParams>>) {
+  // if (!searchParams.uri) {
+  //   throw new Error("Bad URI");
+  // }
+
+  return (
+    <>
+      {/* <Header lang={params.lang} pathname={searchParams.uri} /> */}
+      {children}
+    </>
+  );
+}
+
diff --git a/app/[lang]/layout.tsx b/app/[lang]/(live)/layout.tsx
similarity index 97%
rename from app/[lang]/layout.tsx
rename to app/[lang]/(live)/layout.tsx
index e8a85080f..797078b88 100644
--- a/app/[lang]/layout.tsx
+++ b/app/[lang]/(live)/layout.tsx
@@ -1,5 +1,5 @@
-import "../core.css";
-import "../scandic.css";
+import "../../core.css";
+import "../../scandic.css";
 
 import Footer from "@/components/Current/Footer";
 import LangPopup from "@/components/Current/LangPopup";
diff --git a/app/[lang]/(preview)/layout.tsx b/app/[lang]/(preview)/layout.tsx
new file mode 100644
index 000000000..7d3d7086f
--- /dev/null
+++ b/app/[lang]/(preview)/layout.tsx
@@ -0,0 +1,65 @@
+import "../../core.css";
+import "../../scandic.css";
+
+import Footer from "@/components/Current/Footer";
+import LangPopup from "@/components/Current/LangPopup";
+import Script from "next/script";
+import SkipToMainContent from "@/components/SkipToMainContent";
+
+import type { Metadata } from "next";
+import type { LangParams, LayoutArgs } from "@/types/params";
+import ContentstackLivePreview from "@contentstack/live-preview-utils";
+
+export const metadata: Metadata = {
+  description: "New web",
+  title: "Scandic Hotels New Web",
+};
+
+ContentstackLivePreview.init();
+
+export default function RootLayout({
+  children,
+  params,
+}: React.PropsWithChildren<LayoutArgs<LangParams>>) {
+  return (
+    <html lang={params.lang}>
+      <head>
+        <Script
+          data-cookieconsent="ignore"
+          src="/Static/dist/js/head.js?85c84c9e24ae8da3e7af"
+        />
+        <Script
+          data-cookieconsent="ignore"
+          src="/Static/dist/js/inline.js?00133e5a37de35c51a5d"
+        />
+        <Script
+          data-cookieconsent="ignore"
+          src="/Static/dist/js/main.js?89d0030e1a04b3b46d0b"
+        />
+        <Script
+          data-cookieconsent="ignore"
+          src="/Static/dist/js/ng/polyfills.js?1705409330990"
+        />
+        <Script
+          data-cookieconsent="ignore"
+          src="/Static/dist/js/ng/runtime.js?1705409330990"
+        />
+        <Script
+          data-cookieconsent="ignore"
+          src="/Static/dist/js/ng/main.js?1705409330990"
+        />
+        <Script
+          data-cookieconsent="ignore"
+          src="/Static/dist/js/main-ng.js?336b801d6b38eff10884"
+          strategy="lazyOnload"
+        />
+      </head>
+      <body>
+        <LangPopup lang={params.lang} />
+        <SkipToMainContent lang={params.lang} />
+        {children}
+        <Footer lang={params.lang} />
+      </body>
+    </html>
+  );
+}
diff --git a/app/[lang]/(preview)/preview/page.tsx b/app/[lang]/(preview)/preview/page.tsx
new file mode 100644
index 000000000..5ef07917d
--- /dev/null
+++ b/app/[lang]/(preview)/preview/page.tsx
@@ -0,0 +1,62 @@
+import { notFound } from "next/navigation";
+import fs from "node:fs/promises";
+import path from "node:path";
+
+import { request } from "@/lib/request";
+import { GetCurrentBlockPage } from "@/lib/graphql/Query/CurrentBlockPage.graphql";
+
+import type { PageArgs, LangParams, UriParams } from "@/types/params";
+import type { GetCurrentBlockPageData } from "@/types/requests/currentBlockPage";
+
+export default async function CurrentContentPage({
+  params,
+  searchParams,
+}: PageArgs<LangParams, UriParams>) {
+  try {
+    console.log({ searchParams });
+    if (!searchParams.uri) {
+      throw new Error("Bad URI");
+    }
+
+    // const response = await request<GetCurrentBlockPageData>(GetCurrentBlockPage, { locale: params.lang, url: searchParams.uri })
+
+    // console.log(response.data.all_current_blocks_page.items[0].blocks)
+
+    const filePath = path.join(
+      process.cwd(),
+      "mockCms",
+      params.lang,
+      searchParams.uri,
+      "data.json"
+    );
+
+    const data = await fs.readFile(filePath, { encoding: "utf-8" });
+
+    if (!data) {
+      throw new Error("No data");
+    }
+
+    const json = JSON.parse(data);
+
+    return (
+      <>
+        {json.hero ? (
+          <div
+            dangerouslySetInnerHTML={{ __html: json.hero }}
+            className="hero-content-overlay hero-content-widget"
+          />
+        ) : null}
+        {json.content ? (
+          <main
+            className="main l-sections-wrapper"
+            role="main"
+            id="maincontent"
+            dangerouslySetInnerHTML={{ __html: json.content }}
+          />
+        ) : null}
+      </>
+    );
+  } catch (err) {
+    return notFound();
+  }
+}
diff --git a/app/[lang]/page.tsx b/app/[lang]/page.tsx
deleted file mode 100644
index 2eb2d5927..000000000
--- a/app/[lang]/page.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-export default async function Home() {
-  return (
-    <main>
-      <h1>Hello world!</h1>
-    </main>
-  );
-}
diff --git a/env/schema.mjs b/env/schema.mjs
index e49c8cf8d..3f6785e79 100644
--- a/env/schema.mjs
+++ b/env/schema.mjs
@@ -10,9 +10,11 @@ export const serverSchema = z.object({
   CMS_API_KEY: z.string(),
   CMS_ENVIRONMENT: z.enum(["development", "production", "staging", "test"]),
   CMS_URL: z.string(),
+  CMS_PREVIEW_URL: z.string(),
+  CMS_PREVIEW_TOKEN: z.string(),
   NODE_ENV: z.enum(["development", "test", "production"]),
   PRINT_QUERY: z.boolean().default(false),
-})
+});
 
 /**
  * You can't destruct `process.env` as a regular object in the Next.js
@@ -24,9 +26,11 @@ export const serverEnv = {
   CMS_API_KEY: process.env.CMS_API_KEY,
   CMS_ENVIRONMENT: process.env.CMS_ENVIRONMENT,
   CMS_URL: process.env.CMS_URL,
+  CMS_PREVIEW_URL: process.env.CMS_PREVIEW_URL,
+  CMS_PREVIEW_TOKEN: process.env.CMS_PREVIEW_TOKEN,
   NODE_ENV: process.env.NODE_ENV,
   PRINT_QUERY: process.env.PRINT_QUERY,
-}
+};
 
 /**
  * Specify your client-side environment variables schema here.
diff --git a/lib/graphql/Fragments/Blocks/Hero.graphql b/lib/graphql/Fragments/Blocks/Hero.graphql
new file mode 100644
index 000000000..5111ffc77
--- /dev/null
+++ b/lib/graphql/Fragments/Blocks/Hero.graphql
@@ -0,0 +1,30 @@
+#import "../PageLinks.graphql"
+
+fragment HeroBlock on CurrentBlocksPageBlocksHero {
+  hero {
+    imagesConnection {
+      totalCount
+      edges {
+        node {
+          title
+          url
+        }
+      }
+    }
+    ingress {
+      json
+      embedded_itemsConnection {
+        edges {
+          node {
+            ...CurrentBlocksPageLink
+            ...TempPageLink
+            ... on SysAsset {
+              title
+              url
+            }
+          }
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/lib/previewRequest.ts b/lib/previewRequest.ts
new file mode 100644
index 000000000..4b9398f01
--- /dev/null
+++ b/lib/previewRequest.ts
@@ -0,0 +1,34 @@
+import "server-only";
+import { request as graphqlRequest } from "graphql-request";
+
+import { env } from "@/env/server.mjs";
+
+import type { Data } from "@/types/request";
+import type { DocumentNode } from "graphql";
+import ContentstackLivePreview from "@contentstack/live-preview-utils";
+
+export async function request<T>(
+  query: string | DocumentNode,
+  variables?: {}
+): Promise<Data<T>> {
+  try {
+    const hash = ContentstackLivePreview.hash;
+
+    const response = await graphqlRequest<T>({
+      document: query,
+      requestHeaders: {
+        access_token: env.CMS_ACCESS_TOKEN,
+        "Content-Type": "application/json",
+        preview_token: env.CMS_PREVIEW_TOKEN,
+        live_preview: hash,
+      },
+      url: env.CMS_PREVIEW_URL,
+      variables,
+    });
+
+    return { data: response };
+  } catch (error) {
+    console.error(error);
+    throw new Error("Something went wrong");
+  }
+}
diff --git a/middleware.ts b/middleware.ts
index a00fab231..aa5e7bec9 100644
--- a/middleware.ts
+++ b/middleware.ts
@@ -1,3 +1,4 @@
+import ContentstackLivePreview from "@contentstack/live-preview-utils";
 import { NextResponse } from "next/server";
 import type { NextRequest } from "next/server";
 
@@ -32,8 +33,23 @@ export async function middleware(request: NextRequest) {
     ""
   );
 
-  const searchParams = new URLSearchParams(request.nextUrl.searchParams)
-  searchParams.set("uri", pathNameWithoutLocale)
+  const searchParams = new URLSearchParams(request.nextUrl.searchParams);
+  searchParams.set("uri", pathNameWithoutLocale);
+
+  if (request.nextUrl.pathname.includes("preview")) {
+    if (request.nextUrl.searchParams.get("hash")) {
+      ContentstackLivePreview.setConfigFromParams(request.nextUrl.searchParams);
+
+      return NextResponse.rewrite(
+        new URL(
+          `/${locale}/current-content-page?${searchParams.toString()}`,
+          request.url
+        )
+      );
+    } else {
+      return Response.json("Not found!!!", { status: 404 });
+    }
+  }
 
   switch (contentType) {
     case "currentContentPage":
diff --git a/package-lock.json b/package-lock.json
index d8c221c9c..fffc109ef 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
       "version": "0.1.0",
       "dependencies": {
         "class-variance-authority": "^0.7.0",
+        "@contentstack/live-preview-utils": "^1.4.0",
         "graphql": "16.8.1",
         "graphql-request": "6.1.0",
         "graphql-tag": "2.12.6",
@@ -51,6 +52,17 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@contentstack/live-preview-utils": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@contentstack/live-preview-utils/-/live-preview-utils-1.4.0.tgz",
+      "integrity": "sha512-74N9ACoUwSrvmbtqoy8CkX7H/OmA3cjnOmaKMq6qoVI1r9kJjO+gqQevBPxs17nurbNL2XjXU56hbHZagWL4nw==",
+      "dependencies": {
+        "just-camel-case": "^4.0.2",
+        "morphdom": "^2.6.1",
+        "mustache": "^4.2.0",
+        "uuid": "^8.3.2"
+      }
+    },
     "node_modules/@eslint-community/eslint-utils": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz",
@@ -2498,6 +2510,11 @@
         "node": ">=4.0"
       }
     },
+    "node_modules/just-camel-case": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/just-camel-case/-/just-camel-case-4.0.2.tgz",
+      "integrity": "sha512-df6QI/EIq+6uHe/wtaa9Qq7/pp4wr4pJC/r1+7XhVL6m5j03G6h9u9/rIZr8rDASX7CxwDPQnZjffCo2e6PRLw=="
+    },
     "node_modules/keyv": {
       "version": "4.5.4",
       "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
@@ -2625,12 +2642,25 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/morphdom": {
+      "version": "2.7.2",
+      "resolved": "https://registry.npmjs.org/morphdom/-/morphdom-2.7.2.tgz",
+      "integrity": "sha512-Dqb/lHFyTi7SZpY0a5R4I/0Edo+iPMbaUexsHHsLAByyixCDiLHPHyVoKVmrpL0THcT7V9Cgev9y21TQYq6wQg=="
+    },
     "node_modules/ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
       "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
       "dev": true
     },
+    "node_modules/mustache": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/mustache/-/mustache-4.2.0.tgz",
+      "integrity": "sha512-71ippSywq5Yb7/tVYyGbkBggbU8H3u5Rz56fH60jGFgr8uHwxs+aSKeqmluIVzM0m0kB7xQjKS6qPfd0b2ZoqQ==",
+      "bin": {
+        "mustache": "bin/mustache"
+      }
+    },
     "node_modules/nanoid": {
       "version": "3.3.7",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
@@ -3681,6 +3711,14 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/uuid": {
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
+      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
+      "bin": {
+        "uuid": "dist/bin/uuid"
+      }
+    },
     "node_modules/watchpack": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",
diff --git a/package.json b/package.json
index 70753f7c0..edd6d2932 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "class-variance-authority": "^0.7.0",
+    "@contentstack/live-preview-utils": "^1.4.0",
     "graphql": "16.8.1",
     "graphql-request": "6.1.0",
     "graphql-tag": "2.12.6",
diff --git a/types/requests/blocks/hero.ts b/types/requests/blocks/hero.ts
new file mode 100644
index 000000000..7c6762c70
--- /dev/null
+++ b/types/requests/blocks/hero.ts
@@ -0,0 +1,24 @@
+import type { SysAsset } from "../utils/asset"
+import type { Edges } from "../utils/edges"
+import type { ExternalLink } from "../utils/externalLink"
+import type { PageLink } from "../utils/pagelink";
+import type { Typename } from "../utils/typename"
+
+export type Hero = {
+  hero: {
+    imagesConnection: Edges<{
+      title: string
+      url: string
+    }>
+    ingress: {
+      json: JSON
+      embedded_itemsConnection: Edges<
+        | ExternalLink
+        | PageLink
+        | SysAsset
+      >
+    }
+  }
+}
+
+export type HeroBlockData = Typename<Hero, "CurrentBlocksPageBlocksHero">
diff --git a/types/requests/utils/pageLink.ts b/types/requests/utils/pagelink.ts
similarity index 100%
rename from types/requests/utils/pageLink.ts
rename to types/requests/utils/pagelink.ts