ui-landing-page 6.1.0

package/src/components/LandingPage/common/ui-kit/organisms/LexicalLetterSection/LexicalletterSection.tsx

@@ -0,0 +1,175 @@
+import { BaseSectionProps } from "../../../../models/base-section";
+import { parse } from "@phygitallabs/helpers";
+import { useEffect, useRef, useState } from "react";
+import { Field } from "../../types/base";
+import BackgroundImage from "../../moleculars/BackgroundImage";
+import {
+  LexicalStateIterator,
+  SerializedEditorState,
+} from '@phygitallabs/core-ui/components/rich-editor';
+import SectionFullScreen from "../../../SectionFullScreen";
+import { debounce } from 'lodash-es';
+
+interface Props extends BaseSectionProps {}
+interface SectionData {
+  background: Field;
+  description: Field;
+}
+
+const LexicalLetterSection = (props: Props) => {
+  const { id, sectionData } = props;
+  const { background, description } = sectionData as SectionData;
+
+  const lexicalStateRef = useRef<SerializedEditorState | null>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const [htmlPages, setHtmlPages] = useState<string[]>([]);
+
+  const handlePagination = () => {
+    if (!containerRef.current || !lexicalStateRef.current || !canvasRef.current)
+      return;
+
+    const LINE_HEIGHT = 28;
+    const containerWidth = containerRef.current.offsetWidth;
+    const containerHeight = containerRef.current.offsetHeight;
+    const maxLinePerPage = Math.floor(containerHeight / LINE_HEIGHT);
+
+    const pages: string[] = [];
+    let pageContent = "";
+    let currentLine = "";
+    let currentLineHtml = "";
+    let currentLineNumber = 0;
+
+    //CANVAS
+    const canvas = canvasRef.current;
+    const ctx = canvas.getContext("2d")!;
+    const style = window.getComputedStyle(containerRef.current);
+    const { fontSize, fontWeight, fontStyle, fontFamily } = style;
+    ctx.font = `${fontStyle} ${fontWeight} ${fontSize} ${fontFamily}`;
+
+    const addNewLineToPageContent = () => {
+      pageContent += currentLineHtml;
+      currentLineNumber++;
+    };
+
+    const resetNewPage = () => {
+      pageContent = "";
+      currentLineNumber = 0;
+    };
+
+    const handlePushPageAndReset = () => {
+      pages.push(pageContent);
+      resetNewPage();
+    };
+
+    const checkLastLineAndPush = () => {
+      const isLastLine = currentLineNumber === maxLinePerPage;
+      if (isLastLine) {
+        handlePushPageAndReset();
+      }
+    };
+
+    const handleLineBreak = () => {
+      currentLineHtml += "<br>";
+      addNewLineToPageContent();
+      checkLastLineAndPush();
+      currentLine = "";
+      currentLineHtml = "";
+    };
+
+    const lexicalIterator = new LexicalStateIterator(lexicalStateRef.current);
+    while (lexicalIterator.hasNext()) {
+      const currentNode = lexicalIterator.next()!;
+      const nextNode = lexicalIterator.lookNext();
+      const nodeType = currentNode?.type;
+      switch (nodeType) {
+        case "paragraph":
+          const children = currentNode.children;
+          if (children.length === 0) handleLineBreak();
+          break;
+        case "linebreak":
+          handleLineBreak();
+          break;
+        case "text":
+          const textContent = currentNode.text as string;
+          const isBold = (currentNode.format as unknown as number) === 1;
+          const words = textContent.split(" ");
+          for (let i = 0; i < words.length; i++) {
+            const isLastWordOfParagraph =
+              i === words.length - 1 && nextNode?.type === "paragraph";
+            let word = words[i];
+            let htmlWord = word;
+            if (isBold) htmlWord = `<span className="font-bold">${word}</span>`;
+            const separator = i === 0 ? "" : " ";
+            const currentLineStillHasSpace =
+              ctx.measureText(`${currentLine}${separator}${word}`).width <
+              containerWidth;
+            if (currentLineStillHasSpace) {
+              currentLine += `${separator}${word}`;
+              currentLineHtml += `${separator}${htmlWord}`;
+              if (isLastWordOfParagraph) handleLineBreak();
+            } else {
+              addNewLineToPageContent();
+              checkLastLineAndPush();
+              currentLine = ` ${word}`;
+              currentLineHtml = ` ${htmlWord}`;
+            }
+          }
+      }
+    }
+    addNewLineToPageContent();
+    handlePushPageAndReset();
+    setHtmlPages(pages);
+  };
+
+  const renderRestPages = () => {
+    if (htmlPages.length <= 1) return;
+    const pages = htmlPages.slice(1, htmlPages.length);
+    const renderedPages = pages.map((p, index) => {
+      return (
+        <SectionFullScreen key={index} name={`${id}-${index}`}>
+          <BackgroundImage field={background} />
+          <div className="relative z-50 h-full w-full px-5 pt-[60px]">
+            <div className="h-full w-full text-justify text-base leading-7">
+              {parse(p)}
+            </div>
+          </div>
+        </SectionFullScreen>
+      );
+    });
+    return renderedPages;
+  };
+
+  useEffect(() => {
+    const serializedState = description?.value?.serializedState;
+    if (!serializedState) return;
+    lexicalStateRef.current = JSON.parse(serializedState);
+    handlePagination();
+  }, [description?.value]);
+
+  useEffect(() => {
+    const debouncedHandleResize = debounce(handlePagination, 200);
+    window.addEventListener("resize", debouncedHandleResize);
+    return () => window.removeEventListener("resize", debouncedHandleResize);
+  }, []);
+
+  return (
+    <>
+      <SectionFullScreen name={id}>
+        <BackgroundImage field={background} />
+        <div className="relative z-40 h-full w-full px-5 pb-4 pt-[60px]">
+          <div
+            ref={containerRef}
+            className="h-full w-full text-justify text-base leading-7"
+          >
+            {!!htmlPages[0] && parse(htmlPages[0])}
+          </div>
+        </div>
+        <canvas ref={canvasRef} className="invisible" />
+      </SectionFullScreen>
+      {renderRestPages()}
+    </>
+  );
+};
+
+export default LexicalLetterSection;

package/src/components/LandingPage/common/ui-kit/organisms/LexicalLetterSection/index.tsx

@@ -0,0 +1,2 @@
+export { default as LexicalLetterSectionUI } from "./LexicalletterSection";
+export { default as AudioLexicalLetterSectionUI } from "./AudioLexicalLetterSection";

package/src/components/LandingPage/common/ui-kit/organisms/MetaverseSection/index.tsx

@@ -0,0 +1,208 @@
+import parse from "html-react-parser";
+import { useEffect, useRef, useState } from "react";
+import {
+  LexicalStateIterator,
+  SerializedEditorState,
+} from '@phygitallabs/core-ui/components/rich-editor';
+import { debounce } from 'lodash-es';
+import { Field } from "../../types/base";
+import { BaseSectionProps } from "../../../../../LandingPage/models/base-section";
+import SectionFullScreen from "../../../SectionFullScreen";
+import IconExternalLink from "../../../icons/IconExternalLink";
+import { ImageNomion as Image } from '@phygitallabs/core-ui/components/image-nomion';
+
+interface SectionData {
+  text: Field;
+  button_info: Field;
+  image?: Field;
+}
+
+export interface Props extends BaseSectionProps {
+  className?: string;
+}
+const MetaverseSection = (props: any) => {
+  const { id, sectionData } = props;
+  const {
+    text,
+    button_info: buttonInfo,
+    image,
+  } = { ...sectionData } as SectionData;
+
+  const buttonInfoValue = buttonInfo?.value;
+  const imageValue = image?.value;
+  const textValue = text?.value || "";
+
+  const lexicalStateRef = useRef<SerializedEditorState | null>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const [htmlPages, setHtmlPages] = useState<string[]>([]);
+
+  const handlePagination = () => {
+    if (!containerRef.current || !lexicalStateRef.current || !canvasRef.current)
+      return;
+
+    const LINE_HEIGHT = 28;
+    const containerWidth = containerRef.current.offsetWidth;
+    const containerHeight = containerRef.current.offsetHeight;
+    const maxLinePerPage = Math.floor(containerHeight / LINE_HEIGHT);
+
+    const pages: string[] = [];
+    let pageContent = "";
+    let currentLine = "";
+    let currentLineHtml = "";
+    let currentLineNumber = 0;
+
+    //CANVAS
+    const canvas = canvasRef.current;
+    const ctx = canvas.getContext("2d")!;
+    const style = window.getComputedStyle(containerRef.current);
+    const { fontSize, fontWeight, fontStyle, fontFamily } = style;
+    ctx.font = `${fontStyle} ${fontWeight} ${fontSize} ${fontFamily}`;
+
+    const addNewLineToPageContent = () => {
+      pageContent += currentLineHtml;
+      currentLineNumber++;
+    };
+
+    const resetNewPage = () => {
+      pageContent = "";
+      currentLineNumber = 0;
+    };
+
+    const handlePushPageAndReset = () => {
+      pages.push(pageContent);
+      resetNewPage();
+    };
+
+    const checkLastLineAndPush = () => {
+      const isLastLine = currentLineNumber === maxLinePerPage;
+      if (isLastLine) {
+        handlePushPageAndReset();
+      }
+    };
+
+    const handleLineBreak = () => {
+      currentLineHtml += "<br>";
+      addNewLineToPageContent();
+      checkLastLineAndPush();
+      currentLine = "";
+      currentLineHtml = "";
+    };
+
+    const lexicalIterator = new LexicalStateIterator(lexicalStateRef.current);
+    while (lexicalIterator.hasNext()) {
+      const currentNode = lexicalIterator.next()!;
+      const nextNode = lexicalIterator.lookNext();
+      const nodeType = currentNode?.type;
+      switch (nodeType) {
+        case "paragraph":
+          const children = currentNode.children;
+          if (children.length === 0) handleLineBreak();
+          break;
+        case "linebreak":
+          handleLineBreak();
+          break;
+        case "text":
+          const textContent = currentNode.text as string;
+          const isBold = (currentNode.format as unknown as number) === 1;
+          const words = textContent.split(" ");
+          for (let i = 0; i < words.length; i++) {
+            const isLastWordOfParagraph =
+              i === words.length - 1 && nextNode?.type === "paragraph";
+            const word = words[i];
+            let htmlWord = word;
+            if (isBold) htmlWord = `<span className="font-bold">${word}</span>`;
+            const separator = i === 0 ? "" : " ";
+            const currentLineStillHasSpace =
+              ctx.measureText(`${currentLine}${separator}${word}`).width <
+              containerWidth;
+            if (currentLineStillHasSpace) {
+              currentLine += `${separator}${word}`;
+              currentLineHtml += `${separator}${htmlWord}`;
+              if (isLastWordOfParagraph) handleLineBreak();
+            } else {
+              addNewLineToPageContent();
+              checkLastLineAndPush();
+              currentLine = ` ${word}`;
+              currentLineHtml = ` ${htmlWord}`;
+            }
+          }
+      }
+    }
+    addNewLineToPageContent();
+    handlePushPageAndReset();
+    setHtmlPages(pages);
+  };
+
+  const renderRestPages = () => {
+    if (htmlPages.length <= 1) return;
+    const pages = htmlPages.slice(1, htmlPages.length);
+    const renderedPages = pages.map((p, index) => {
+      return (
+        <SectionFullScreen key={index} name={`${id}-${index}`}>
+          {/* <BackgroundImage field={background} /> */}
+          <div className="relative z-50 h-full w-full px-5 pt-[60px]">
+            <div className="h-full w-full text-justify text-base leading-7">
+              {parse(p)}
+            </div>
+          </div>
+        </SectionFullScreen>
+      );
+    });
+    return renderedPages;
+  };
+
+  useEffect(() => {
+    lexicalStateRef.current = textValue
+      ? JSON.parse(textValue?.serializedState)
+      : undefined;
+    handlePagination();
+  }, [textValue]);
+
+  useEffect(() => {
+    const debouncedHandleResize = debounce(handlePagination, 200);
+    window.addEventListener("resize", debouncedHandleResize);
+    return () => window.removeEventListener("resize", debouncedHandleResize);
+  }, []);
+
+  return (
+    <>
+      <SectionFullScreen name={id}>
+        {/* <BackgroundImage field={background} /> */}
+
+        <div className="relative z-0 h-full w-full px-5 pb-4 pt-[60px]">
+          <div
+            ref={containerRef}
+            className="h-full w-full text-justify text-base leading-7"
+          >
+            {!!htmlPages[0] && !!imageValue?.url && (
+              <div>
+                <Image
+                  src={imageValue?.url}
+                  alt="image"
+                  className="mb-4 h-auto w-full"
+                />
+              </div>
+            )}
+            {!!htmlPages[0] && parse(htmlPages[0])}
+            {!!htmlPages[0] && !!buttonInfoValue?.label && (
+              <a
+                href={buttonInfoValue.url}
+                target="_blank"
+                className="absolute mt-4 flex w-full items-center justify-center text-black"
+              >
+                <div className="flex w-fit text-lg font-medium -translate-x-5 items-center justify-center gap-2 rounded-xl bg-white px-4 py-3">
+                  {buttonInfoValue.label} <IconExternalLink />
+                </div>
+              </a>
+            )}
+          </div>
+        </div>
+        <canvas ref={canvasRef} className="invisible" />
+      </SectionFullScreen>
+      {renderRestPages()}
+    </>
+  );
+};
+
+export default MetaverseSection;

package/src/components/LandingPage/common/ui-kit/organisms/NavigationSection/ModalWelcomeInput.tsx

@@ -0,0 +1,85 @@
+import { useState } from "react";
+import BaseModal from "../../atomics/ BaseModal";
+import Title from "../../moleculars/Title";
+import { ThemeConfig } from "../../types/base";
+import Typography from "../../atomics/Typography";
+import BaseButton from "../../atomics/BaseButton";
+import BaseInput from "../../atomics/BaseInput";
+
+interface Props {
+  isOpen: boolean;
+  toggleModal: () => void;
+  themeConfig?: ThemeConfig;
+}
+
+interface FormValue {
+  name: string;
+  dob: string;
+  scanCounter: Number;
+}
+
+export const MY_TAM_FORM_KEY = "myTamForm";
+
+const ModalWelcomeInput = (props: Props) => {
+  const { themeConfig, isOpen, toggleModal } = props;
+  const [formValue, setFormValue] = useState<FormValue>({
+    name: "",
+    dob: "",
+    scanCounter: 1,
+  });
+
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    if (formValue.name === "" || formValue.dob === "") return;
+    localStorage.setItem(MY_TAM_FORM_KEY, JSON.stringify(formValue));
+    toggleModal();
+  };
+  const handleFormValueChange = (fieldKey: keyof FormValue, value: string) => {
+    setFormValue((pre) => ({ ...pre, [fieldKey]: value }));
+  };
+
+  return (
+    <BaseModal isOpen={isOpen} toggleModal={toggleModal}>
+      <div className="flex flex-col items-center gap-2">
+        <Title
+          field={{
+            value: "Bạn đang sở hữu Album Ô cửa màu xanh bản vật lý số",
+          }}
+          configTheme={themeConfig}
+        />
+        <Typography variant="p" className="text-neutral-4 text-sm">
+          Album là cầu nối kết nối tâm hồn bạn với thế giới âm nhạc tràn ngập
+          cảm xúc. Không chỉ thưởng thức những bài tình ca ngọt ngào, cánh cửa
+          tâm trạng, cảm hứng sáng tác đằng sau mỗi ca khúc còn được gửi gắm qua
+          những lời nhắn, tâm tình đặc biệt từ Họa Mi Tóc Nâu.
+        </Typography>
+        <form
+          className="w-full space-y-3 flex flex-col items-center"
+          onSubmit={handleSubmit}>
+          <BaseInput
+            onChange={(e) => {
+              handleFormValueChange("name", e.target.value);
+            }}
+            value={formValue.name}
+            className="w-full"
+            placeholder="Tên hoặc biệt danh"
+          />
+          <BaseInput
+            onChange={(e) => {
+              handleFormValueChange("dob", e.target.value);
+            }}
+            value={formValue.dob}
+            className="w-full"
+            type="date"
+            placeholder="Ngày sinh"
+          />
+          <BaseButton type="submit">
+            <Typography variant="p"> Bắt đầu</Typography>
+          </BaseButton>
+        </form>
+      </div>
+    </BaseModal>
+  );
+};
+
+export default ModalWelcomeInput;

package/src/components/LandingPage/common/ui-kit/organisms/NavigationSection/index.tsx

@@ -0,0 +1,99 @@
+import { BaseSectionProps } from "../../../../models/base-section";
+import SectionFullScreen from "../../../SectionFullScreen";
+import IconReset from "../../../icons/IconReset";
+import BaseButton from "../../atomics/BaseButton";
+import Title from "../../moleculars/Title";
+import ModalWelcomeInput, { MY_TAM_FORM_KEY } from "./ModalWelcomeInput";
+import { useEffect, useState } from "react";
+import { parse } from "@phygitallabs/helpers";
+import { ImageNomion as Image } from '@phygitallabs/core-ui/components/image-nomion';
+
+interface Props extends BaseSectionProps {}
+
+const NavigationSection = (props: Props) => {
+  const { id, configTheme, sectionData } = props;
+  const [isOpen, setIsOpen] = useState(false);
+  const [processedGreetings, setProcessedGreetings] = useState("");
+  const htmlGreetingContent = sectionData?.greeting?.value?.htmlContent;
+
+  const toggleModal = () => setIsOpen((pre) => !pre);
+
+  useEffect(() => {
+    const data = localStorage.getItem(MY_TAM_FORM_KEY);
+    if (!data) return;
+    const mtLocalStorage = JSON.parse(data);
+    const name = mtLocalStorage?.name;
+    setProcessedGreetings(
+      htmlGreetingContent
+        ?.replaceAll("text-base", "text-sm")
+        ?.replaceAll("[name]", name)
+    );
+  }, [htmlGreetingContent, isOpen]);
+
+  useEffect(() => {
+    const value = localStorage.getItem(MY_TAM_FORM_KEY);
+    if (value) {
+      const data = JSON.parse(value);
+      const scanCounter = data?.scanCounter ?? 0;
+      console.log(data);
+      localStorage.setItem(
+        MY_TAM_FORM_KEY,
+        JSON.stringify({
+          ...data,
+          scanCounter: scanCounter + 1,
+        })
+      );
+      return;
+    }
+    toggleModal();
+  }, []);
+
+  const handleResetData = () => {
+    console.log("Click");
+    localStorage.removeItem(MY_TAM_FORM_KEY);
+  };
+
+  return (
+    <>
+      <SectionFullScreen className="space-y-3" name={id}>
+        <ModalWelcomeInput
+          isOpen={isOpen}
+          toggleModal={toggleModal}
+          themeConfig={configTheme}
+        />
+
+        <div className="pt-[48px] space-y-2">
+          <div className="bg-[#FFE4E6] p-3 mx-3 rounded-xl">
+            {parse(processedGreetings)}
+          </div>
+          <div className="relative h-[55svh] ">
+            <Image
+              src="https://storage.googleapis.com/assets-fygito/mytam-demo/intro-Home-_2_.webp"
+              alt="image"
+              className=" h-[55svh] w-full object-cover"
+            />
+            <img
+              src="https://storage.googleapis.com/assets-fygito/mytam-demo/ticket-_1__1.webp"
+              alt="image"
+              className="absolute top-1/2 -translate-y-1/2 h-[90%] left-1/2 -translate-x-1/2  object-contain"
+            />
+          </div>
+        </div>
+        <div className="space-y-3 px-4">
+          <Title field={{ value: "Xem live show" }} configTheme={configTheme} />
+          <Title
+            field={{ value: "Thư viện nội dung" }}
+            configTheme={configTheme}
+          />
+        </div>
+        <BaseButton
+          onClick={handleResetData}
+          className="absolute bottom-0 right-0 rounded-full z-50">
+          <IconReset />
+        </BaseButton>
+      </SectionFullScreen>
+    </>
+  );
+};
+
+export default NavigationSection;