From b28625cc66d6b75803a2f111ad7f0c0b076906d1 Mon Sep 17 00:00:00 2001
From: Artur Gunka <arturel101010@mail.ru>
Date: Mon, 15 Jan 2024 16:55:29 +0200
Subject: [PATCH] WP stories

---
 .../src/defaultTemplates/index.ts             |  85 ++++--
 .../src/defaultTemplates/utils.ts             | 280 +++---------------
 .../src/types/DefaultTemplate.ts              |  53 +++-
 public/editor-client/src/types/global.d.ts    |   5 +-
 4 files changed, 143 insertions(+), 280 deletions(-)

diff --git a/public/editor-client/src/defaultTemplates/index.ts b/public/editor-client/src/defaultTemplates/index.ts
index 405432219b..de7d4f5768 100644
--- a/public/editor-client/src/defaultTemplates/index.ts
+++ b/public/editor-client/src/defaultTemplates/index.ts
@@ -5,7 +5,6 @@ import {
   CustomTemplatePage,
   DefaultBlock,
   DefaultBlockWithID,
-  DefaultTemplate,
   DefaultTemplateKits,
   DefaultTemplatePopup,
   KitItem,
@@ -18,13 +17,15 @@ import {
   LayoutsWithThumbs,
   Popups,
   PopupsWithThumbs,
-  Stories,
-  StoriesWithThumbs
+  StoriesAPI,
+  StoriesWithThumbs,
+  StoryPages
 } from "../types/DefaultTemplate";
 import { t } from "../utils/i18n";
 import { tempConverterKit } from "./tempConverters";
 import {
   convertLayouts,
+  convertStories,
   fetchAllLayouts,
   getUniqueLayoutsCategories
 } from "./utils";
@@ -207,46 +208,76 @@ const defaultPopups = (
 
 const defaultStories = (
   config: Config
-): DefaultTemplate<StoriesWithThumbs, BlocksArray<DefaultBlock>> => {
+): LayoutsDefaultTemplate<
+  StoriesWithThumbs,
+  BlocksArray<DefaultBlock>,
+  LayoutsPages
+> => {
+  // @ts-expect-error: temporary solution, wait until new API will come via config
   const { storiesUrl } = config.api.templates;
+  const apiLayoutsUrl =
+    "https://phplaravel-1109775-4184176.cloudwaysapps.com/api";
+  const imageUrl = "https://cloud-1de12d.b-cdn.net/media/iW=1024&iH=1024/";
 
   return {
     async getMeta(res, rej) {
       try {
-        const meta: Stories = await fetch(`${storiesUrl}/meta.json`).then((r) =>
-          r.json()
+        const meta = await fetchAllLayouts<StoriesAPI>(
+          `${apiLayoutsUrl}/get-story`,
+          50
         );
 
-        const data = {
-          ...meta,
-          stories: meta.stories.map((story) => {
-            return {
-              ...story,
-              thumbnailSrc: `${storiesUrl}/thumbs/${story.pages[0].id}.jpg`,
-              pages: story.pages.map((page) => {
-                return {
-                  ...page,
-                  thumbnailSrc: `${storiesUrl}/thumbs/${page.id}.jpg`
-                };
-              })
-            };
-          })
-        };
+        const converted = convertStories(meta, imageUrl);
+        const cats = getUniqueLayoutsCategories(meta);
 
-        res(data);
+        res({
+          stories: converted,
+          categories: cats
+        });
       } catch (e) {
         rej(t("Failed to load meta.json"));
       }
     },
-    async getData(res, rej, id) {
+    async getData(res, rej, kit) {
       try {
-        const data = await fetch(`${storiesUrl}/resolves/${id}.json`).then(
-          (r) => r.json()
-        );
-        res(data);
+        const data = await fetch(
+          `${apiLayoutsUrl}/get-story-page-data?project_id=${kit.layoutId}&page_slug=${kit.id}`
+        ).then((r) => r.json());
+
+        const pageData = Json.read(data.collection) as {
+          blocks: DefaultBlock[];
+        };
+
+        res({ blocks: pageData.blocks });
       } catch (e) {
         rej(t("Failed to load resolves for selected DefaultTemplate"));
       }
+    },
+    async getPages(res, rej, id) {
+      try {
+        const data = await fetch(
+          `${apiLayoutsUrl}/get-story-page?project_id=${id}}&per_page=20`
+        ).then((r) => r.json());
+        const parsedData: CustomTemplatePage[] = data.collections.map(
+          ({
+            slug,
+            thumbnailHeight,
+            thumbnailWidth,
+            thumbnail
+          }: StoryPages) => ({
+            id: slug,
+            title: slug,
+            thumbnailWidth,
+            thumbnailHeight,
+            thumbnailSrc: `${imageUrl}${thumbnail}`,
+            layoutId: id
+          })
+        );
+
+        res({ pages: parsedData, styles: [data.styles] });
+      } catch (e) {
+        rej(t("Failed to load pages for selected Stories"));
+      }
     }
   };
 };
diff --git a/public/editor-client/src/defaultTemplates/utils.ts b/public/editor-client/src/defaultTemplates/utils.ts
index 213b9fe11b..1622611bda 100644
--- a/public/editor-client/src/defaultTemplates/utils.ts
+++ b/public/editor-client/src/defaultTemplates/utils.ts
@@ -7,11 +7,15 @@ import {
   KitType,
   LayoutsAPI,
   LayoutTemplateWithThumbs,
-  Style
+  StoriesAPI,
+  StoriesTemplateWithThumbs
 } from "../types/DefaultTemplate";
 import { pipe } from "../utils/fp/pipe";
 
 type CatTypes = Kit | APIPopup;
+type LayStorType = LayoutsAPI | StoriesAPI;
+
+const BLANK_PAGE = "Blank";
 
 export const getUniqueKitCategories = (collections: CatTypes[]): Categories[] =>
   pipe(
@@ -28,11 +32,11 @@ export const getUniqueKitCategories = (collections: CatTypes[]): Categories[] =>
   )(collections);
 
 export const getUniqueLayoutsCategories = (
-  collections: LayoutsAPI[]
+  collections: LayStorType[]
 ): Categories[] =>
   pipe(
-    (collections: LayoutsAPI[]) =>
-      collections.map((collection: LayoutsAPI) => collection.categories),
+    (collections: LayStorType[]) =>
+      collections.map((collection: LayStorType) => collection.categories),
     (cats: string[]) => cats.map((it) => it.split(",")),
     flatten,
     (cats: string[]) => cats.map((cat) => cat.trim()),
@@ -173,244 +177,36 @@ export const convertLayouts = (
     }
   );
 
-export const getStyles = (): Array<Style> => [
-  {
-    colorPalette: [
-      { id: "color1", hex: "#A170D9" },
-      { id: "color2", hex: "#1C1C1C" },
-      { id: "color3", hex: "#05CAB6" },
-      { id: "color4", hex: "#B8E6E1" },
-      { id: "color5", hex: "#F5D4D1" },
-      { id: "color6", hex: "#EBEBEB" },
-      { id: "color7", hex: "#666666" },
-      { id: "color8", hex: "#FFFFFF" }
-    ],
-    fontStyles: [
-      {
-        deletable: "off",
-        id: "paragraph",
-        title: "Paragraph",
-        fontFamily: "overpass",
-        fontFamilyType: "google",
-        fontSize: 16,
-        fontSizeSuffix: "px",
-        fontWeight: 400,
-        lineHeight: 1.9,
-        letterSpacing: 0,
-        tabletFontSize: 15,
-        tabletFontSizeSuffix: "px",
-        tabletFontWeight: 400,
-        tabletLineHeight: 1.6,
-        tabletLetterSpacing: 0,
-        mobileFontSize: 15,
-        mobileFontSizeSuffix: "px",
-        mobileFontWeight: 400,
-        mobileLineHeight: 1.6,
-        mobileLetterSpacing: 0
-      },
-      {
-        deletable: "off",
-        id: "subtitle",
-        title: "Subtitle",
-        fontFamily: "overpass",
-        fontFamilyType: "google",
-        fontSize: 17,
-        fontSizeSuffix: "px",
-        fontWeight: 400,
-        lineHeight: 1.8,
-        letterSpacing: 0,
-        tabletFontSize: 17,
-        tabletFontSizeSuffix: "px",
-        tabletFontWeight: 400,
-        tabletLineHeight: 1.5,
-        tabletLetterSpacing: 0,
-        mobileFontSize: 16,
-        mobileFontSizeSuffix: "px",
-        mobileFontWeight: 400,
-        mobileLineHeight: 1.5,
-        mobileLetterSpacing: 0
-      },
-      {
-        deletable: "off",
-        id: "abovetitle",
-        title: "Above Title",
-        fontFamily: "overpass",
-        fontFamilyType: "google",
-        fontSize: 13,
-        fontSizeSuffix: "px",
-        fontWeight: 700,
-        lineHeight: 1.5,
-        letterSpacing: 1.1,
-        tabletFontSize: 13,
-        tabletFontSizeSuffix: "px",
-        tabletFontWeight: 700,
-        tabletLineHeight: 1.5,
-        tabletLetterSpacing: 1,
-        mobileFontSize: 13,
-        mobileFontSizeSuffix: "px",
-        mobileFontWeight: 700,
-        mobileLineHeight: 1.5,
-        mobileLetterSpacing: 1
-      },
-      {
-        deletable: "off",
-        id: "heading1",
-        title: "Heading 1",
-        fontFamily: "overpass",
-        fontFamilyType: "google",
-        fontSize: 46,
-        fontSizeSuffix: "px",
-        fontWeight: 700,
-        lineHeight: 1.3,
-        letterSpacing: -1.5,
-        tabletFontSize: 38,
-        tabletFontSizeSuffix: "px",
-        tabletFontWeight: 700,
-        tabletLineHeight: 1.2,
-        tabletLetterSpacing: -1,
-        mobileFontSize: 36,
-        mobileFontSizeSuffix: "px",
-        mobileFontWeight: 700,
-        mobileLineHeight: 1.3,
-        mobileLetterSpacing: -1
-      },
-      {
-        deletable: "off",
-        id: "heading2",
-        title: "Heading 2",
-        fontFamily: "overpass",
-        fontFamilyType: "google",
-        fontSize: 36,
-        fontSizeSuffix: "px",
-        fontWeight: 700,
-        lineHeight: 1.3,
-        letterSpacing: -1.5,
-        tabletFontSize: 30,
-        tabletFontSizeSuffix: "px",
-        tabletFontWeight: 700,
-        tabletLineHeight: 1.2,
-        tabletLetterSpacing: -1,
-        mobileFontSize: 28,
-        mobileFontSizeSuffix: "px",
-        mobileFontWeight: 700,
-        mobileLineHeight: 1.3,
-        mobileLetterSpacing: -1
-      },
-      {
-        deletable: "off",
-        id: "heading3",
-        title: "Heading 3",
-        fontFamily: "overpass",
-        fontFamilyType: "google",
-        fontSize: 28,
-        fontSizeSuffix: "px",
-        fontWeight: 700,
-        lineHeight: 1.4,
-        letterSpacing: -1.5,
-        tabletFontSize: 27,
-        tabletFontSizeSuffix: "px",
-        tabletFontWeight: 700,
-        tabletLineHeight: 1.3,
-        tabletLetterSpacing: -1,
-        mobileFontSize: 22,
-        mobileFontSizeSuffix: "px",
-        mobileFontWeight: 700,
-        mobileLineHeight: 1.3,
-        mobileLetterSpacing: -0.5
-      },
-      {
-        deletable: "off",
-        id: "heading4",
-        title: "Heading 4",
-        fontFamily: "overpass",
-        fontFamilyType: "google",
-        fontSize: 22,
-        fontSizeSuffix: "px",
-        fontWeight: 700,
-        lineHeight: 1.5,
-        letterSpacing: -0.5,
-        tabletFontSize: 22,
-        tabletFontSizeSuffix: "px",
-        tabletFontWeight: 700,
-        tabletLineHeight: 1.4,
-        tabletLetterSpacing: -0.5,
-        mobileFontSize: 20,
-        mobileFontSizeSuffix: "px",
-        mobileFontWeight: 700,
-        mobileLineHeight: 1.4,
-        mobileLetterSpacing: 0
-      },
-      {
-        deletable: "off",
-        id: "heading5",
-        title: "Heading 5",
-        fontFamily: "overpass",
-        fontFamilyType: "google",
-        fontSize: 20,
-        fontSizeSuffix: "px",
-        fontWeight: 700,
-        lineHeight: 1.6,
-        letterSpacing: 0,
-        tabletFontSize: 17,
-        tabletFontSizeSuffix: "px",
-        tabletFontWeight: 700,
-        tabletLineHeight: 1.7,
-        tabletLetterSpacing: 0,
-        mobileFontSize: 17,
-        mobileFontSizeSuffix: "px",
-        mobileFontWeight: 700,
-        mobileLineHeight: 1.8,
-        mobileLetterSpacing: 0
-      },
-      {
-        deletable: "off",
-        id: "heading6",
-        title: "Heading 6",
-        fontFamily: "overpass",
-        fontFamilyType: "google",
-        fontSize: 16,
-        fontSizeSuffix: "px",
-        fontWeight: 700,
-        lineHeight: 1.5,
-        letterSpacing: 0,
-        tabletFontSize: 16,
-        tabletFontSizeSuffix: "px",
-        tabletFontWeight: 700,
-        tabletLineHeight: 1.5,
-        tabletLetterSpacing: 0,
-        mobileFontSize: 16,
-        mobileFontSizeSuffix: "px",
-        mobileFontWeight: 700,
-        mobileLineHeight: 1.5,
-        mobileLetterSpacing: 0
-      },
-      {
-        deletable: "off",
-        id: "button",
-        title: "Button",
-        fontFamily: "overpass",
-        fontFamilyType: "google",
-        fontSize: 15,
-        fontSizeSuffix: "px",
-        fontWeight: 700,
-        lineHeight: 1.6,
-        letterSpacing: 0,
-        tabletFontSize: 17,
-        tabletFontSizeSuffix: "px",
-        tabletFontWeight: 700,
-        tabletLineHeight: 1.6,
-        tabletLetterSpacing: 0,
-        mobileFontSize: 15,
-        mobileFontSizeSuffix: "px",
-        mobileFontWeight: 700,
-        mobileLineHeight: 1.6,
-        mobileLetterSpacing: 0
-      }
-    ],
-    id: "bahcadtpvdhdphmhymrsgrwobyzhxcdzytyx",
-    title: "Overpass"
-  }
-];
+export const convertStories = (
+  collections: StoriesAPI[],
+  thumbUrl: string
+): StoriesTemplateWithThumbs[] =>
+  collections.map(
+    ({
+      categories,
+      pages,
+      id,
+      title,
+      thumbnail,
+      thumbnailWidth,
+      thumbnailHeight,
+      color
+    }) => {
+      return {
+        layoutId: id,
+        name: title,
+        cat: categories.length
+          ? categories.split(",").map((cat) => cat.trim())
+          : [],
+        color: color,
+        pagesCount: pages,
+        thumbnailSrc: `${thumbUrl}${thumbnail}`,
+        thumbnailWidth,
+        thumbnailHeight,
+        blank: title === BLANK_PAGE
+      };
+    }
+  );
 
 export const fetchAllElements = async <T>(
   url: string,
diff --git a/public/editor-client/src/types/DefaultTemplate.ts b/public/editor-client/src/types/DefaultTemplate.ts
index 771573858f..abe3b78e53 100644
--- a/public/editor-client/src/types/DefaultTemplate.ts
+++ b/public/editor-client/src/types/DefaultTemplate.ts
@@ -23,15 +23,6 @@ export interface BlocksArray<T> {
   blocks: Array<T>;
 }
 
-export interface Stories {
-  stories: Array<Template>;
-  categories: Array<Omit<Categories, "slug">>;
-}
-
-export interface StoriesWithThumbs extends Omit<Stories, "stories"> {
-  stories: Array<TemplateWithThumbs>;
-}
-
 export interface Block {
   id: string;
   cat: Array<number | string>;
@@ -275,3 +266,47 @@ export type LayoutsAPI = {
   color: string;
 };
 // endregion
+
+// region Story Types
+export interface Stories {
+  stories: Array<Template>;
+  categories: Array<Omit<Categories, "slug">>;
+}
+
+export interface StoriesWithThumbs extends Omit<Stories, "stories"> {
+  stories: Array<StoriesTemplateWithThumbs>;
+}
+
+export interface StoriesAPI {
+  title: string;
+  categories: string;
+  id: string;
+  pages: number;
+  thumbnail: string;
+  thumbnailWidth: number;
+  thumbnailHeight: number;
+  color: string
+}
+
+export interface StoriesTemplate {
+  layoutId: string;
+  name: string;
+  cat: Array<number | string>;
+  color: string;
+  pagesCount: number;
+  styles?: Array<Style>;
+}
+
+export interface StoriesTemplateWithThumbs extends StoriesTemplate {
+  thumbnailSrc: string;
+  thumbnailWidth: number;
+  thumbnailHeight: number;
+}
+
+export interface StoryPages {
+  slug: string;
+  thumbnailHeight: string;
+  thumbnailWidth: string;
+  thumbnail: string;
+}
+// endregion
diff --git a/public/editor-client/src/types/global.d.ts b/public/editor-client/src/types/global.d.ts
index 110a84c0b9..3f018aa020 100644
--- a/public/editor-client/src/types/global.d.ts
+++ b/public/editor-client/src/types/global.d.ts
@@ -150,9 +150,10 @@ export interface VISUAL_CONFIG {
       BlocksArray<DefaultBlockWithID>,
       LayoutsPages
     >;
-    defaultStories?: DefaultTemplate<
+    defaultStories?: LayoutsDefaultTemplate<
       StoriesWithThumbs,
-      BlocksArray<DefaultBlock> | DefaultBlock
+      BlocksArray<DefaultBlock> | DefaultBlock,
+      LayoutsPages
     >;
 
     //Collection Items