ui-landing-page 6.1.0

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

@@ -0,0 +1,105 @@
+import SectionFullScreen from "../../../../../LandingPage/common/SectionFullScreen";
+import { ImageNomion as Image } from '@phygitallabs/core-ui/components/image-nomion';
+import { Field } from "../../types/base";
+import { Media } from "../../../../../LandingPage/models/general";
+import { BaseSectionProps } from "../../../../../LandingPage/models/base-section";
+import CarouselCustom from "../../../../../LandingPage/common/CarouselCustom";
+import { useEffect, useRef, useState } from "react";
+import TitleCustom from "../../moleculars/Title";
+import { FadeInMotionV2 } from "../../../../../LandingPage/common/FadeInMotion";
+import { HandTap } from "@phosphor-icons/react";
+import { Typography } from "../../atomics";
+
+interface Props extends BaseSectionProps {}
+
+interface SectionData {
+  image: Field<Media[]>;
+  title: Field<string>;
+  caption: Field<string>;
+}
+const HorizontalImageListSection = (props: Props) => {
+  const { id, sectionData } = props;
+  const {
+    image = {
+      value: [],
+    },
+    title = {
+      value: "",
+    },
+  } = { ...sectionData } as SectionData;
+
+  const filterImage = image.value?.filter((item) => item && item?.url);
+  if (filterImage?.length === 0) {
+    return null;
+  }
+
+  const [pageIndex, setPageIndex] = useState<number>(1);
+  const [openHandSwipe, setOpenHandSwipe] = useState<boolean>(true);
+  const oneTimeClick = useRef(true);
+  const pageLength = filterImage?.length;
+
+  useEffect(() => {
+    if (pageIndex > 1 && oneTimeClick.current) {
+      setOpenHandSwipe(false);
+      oneTimeClick.current = false;
+    }
+  }, [pageIndex]);
+
+  return (
+    <SectionFullScreen className="relative" name={id}>
+      {pageIndex === 1 && pageLength > 1 && openHandSwipe && (
+        <div className="absolute h-screen w-1/3 bg-gradient-to-l right-0 from-black/40 to-black/0 z-[10] pointer-events-none">
+          <div className="w-fit flex items-end flex-col absolute top-1/2 -translate-y-1/2 animate-bounce-x right-4">
+            <HandTap size={40} color="white" />
+            <Typography
+              variant="p"
+              className="w-[100px] text-white text-right font-semibold text-xs mt-2"
+            >
+              Chạm bên phải để tiếp tục
+            </Typography>
+          </div>
+        </div>
+      )}
+      <FadeInMotionV2 delay={0.2} isVisible>
+        <>
+          {pageIndex === 1 && (
+            <TitleCustom
+              field={title}
+              className="absolute top-12 z-10 w-full text-center"
+            />
+          )}
+          <div className="h-full w-full !absolute z-0">
+            <CarouselCustom
+              slidesPerView={1}
+              className="h-full [&_.swiper-pagination-bullet-active]:!bg-gray-600 [&_.swiper-pagination-bullet]:!hidden"
+              listItem={filterImage?.map((item, index) => {
+                return (
+                  <div
+                    key={index}
+                    className="w-full h-full items-center flex justify-center"
+                  >
+                    <Image
+                      src={item.url}
+                      className="w-full h-full object-contain"
+                    />
+                  </div>
+                );
+              })}
+              onSlideChange={(swiper) => {
+                setPageIndex(swiper.realIndex + 1);
+              }}
+              lazyPreloadPrevNext={2}
+            />
+          </div>
+          {pageLength >= 2 && (
+            <div className="absolute z-10 bottom-4 !bg-white p-1 !rounded-sm text-black text-center left-1/2 -translate-x-1/2">
+              {pageIndex}/{pageLength}
+            </div>
+          )}
+        </>
+      </FadeInMotionV2>
+    </SectionFullScreen>
+  );
+};
+
+export default HorizontalImageListSection;

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

@@ -0,0 +1,27 @@
+import { BaseSectionProps } from "../../../../models/base-section";
+import SectionFullScreen from "../../../SectionFullScreen";
+import { Field } from "../../types/base";
+import { ImageNomion as Image } from '@phygitallabs/core-ui/components/image-nomion';
+
+interface Props extends BaseSectionProps {}
+interface SectionData {
+  image: Field;
+}
+const ImagePaddingSection = (props: Props) => {
+  const { id, sectionData } = props;
+  const { image } = sectionData as SectionData;
+
+  return (
+    <>
+      <SectionFullScreen className="pt-[48px] flex items-start" name={id}>
+        <Image
+          src={image.value?.url}
+          alt="image"
+          className="h-full w-full object-contain"
+        />
+      </SectionFullScreen>
+    </>
+  );
+};
+
+export default ImagePaddingSection;

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

@@ -0,0 +1,43 @@
+import { BaseSectionProps } from "../../../../models/base-section";
+import { Field } from "../../types/base";
+import ImageTextSection from "../ImageTextSection";
+import { mapValues } from 'lodash-es';
+
+interface ImageTextSectionProps extends BaseSectionProps {
+  sectionData: SectionData;
+  translations?: any;
+}
+
+interface SectionData {
+  sections: Field<ImageTextSectionData[]>;
+}
+
+interface ImageTextSectionData {
+  title: Field;
+  image: Field;
+  text: Field;
+
+  background: Field;
+  coverTitle: Field;
+}
+
+const ImageTextArraySection = (props: ImageTextSectionProps) => {
+  const { id, sectionData, configTheme, translations } = props;
+  const sections = sectionData?.sections?.value;
+  if (!sections) return null;
+
+  return sections.map((section, index) => {
+    const sectionId = index === 0 ? id : `${id}-${index}`;
+    const formattedSection = mapValues(section, (data) => ({ value: data }));
+    return (
+      <ImageTextSection
+        id={sectionId}
+        sectionData={formattedSection}
+        configTheme={configTheme}
+        translations={translations}
+      />
+    );
+  });
+};
+
+export default ImageTextArraySection;

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

@@ -0,0 +1,114 @@
+import type { FC } from "react";
+import { useRef } from "react";
+import { ImageNomion as Image } from '@phygitallabs/core-ui/components/image-nomion';
+import SectionFullScreen from "../../../SectionFullScreen";
+import { FadeInMotion } from "../../../FadeInMotion";
+import type { BaseSectionProps } from "../../../../models/base-section";
+import useImageOrientation from "../../../../hooks/useImageOrientation";
+import CollasibleText from "../../moleculars/CollasibleText";
+import type { Field, FieldConfig, ThemeConfig } from "../../types/base";
+import BackgroundImage from "../../moleculars/BackgroundImage";
+import TitleCustom from "../../moleculars/Title";
+import ReadmoreModal from "../../moleculars/ReadmoreModal";
+import { parse } from "@phygitallabs/helpers";
+import { getPrimaryStyling } from "../../../../utils/helper";
+
+type ImageTextSectionProps = BaseSectionProps & {
+  translations?: any;
+};
+
+export interface ImageTextSectionData {
+  title: Field<string>;
+  image: Field<string>;
+  text: Field<string>;
+  background: Field<string>;
+  coverTitle: Field<string>;
+  centerSubtitle: Field<string>;
+}
+
+const ImageTextSection: FC<ImageTextSectionProps> = ({
+  id,
+  sectionData,
+  configTheme,
+  translations,
+}) => {
+  const {
+    title = {},
+    image = {},
+    text = {},
+    background = {},
+    centerSubtitle = {},
+  } = sectionData ?? ({} as ImageTextSectionData);
+
+  const isSnapScroll = configTheme?.scroll_snap ?? true;
+
+  const textContainer = useRef<HTMLDivElement | null>(null);
+  const { isAlreadyLoad } = useImageOrientation(image?.value?.url);
+  const shouldRenderImage = image?.value?.url;
+  const configField = text?.style_config;
+
+  const renderText = () => {
+    if (!isSnapScroll) {
+      return (
+        <div
+          className="relative"
+          style={{
+            ...getPrimaryStyling(
+              configTheme as ThemeConfig,
+              configField as FieldConfig
+            ),
+          }}
+        >
+          {parse(text?.value)}
+        </div>
+      );
+    }
+    return (
+      <div
+        className="relative h-full w-full overflow-hidden"
+        ref={textContainer}
+      >
+        {isAlreadyLoad ? (
+          <CollasibleText
+            configTheme={configTheme}
+            expandedComponent={
+              <ReadmoreModal
+                configTheme={configTheme}
+                field={text}
+                readMoreText={translations?.readMore || "Read more"}
+              />
+            }
+            field={text}
+            ref={textContainer}
+            sectionId={id!}
+          />
+        ) : null}
+      </div>
+    );
+  };
+
+  return (
+    <SectionFullScreen name={id} isSnapScroll={isSnapScroll}>
+      <BackgroundImage field={background} />
+      <div className="z-10 flex h-full w-full flex-col items-center justify-center gap-3 bg-cover bg-center px-[16px] pt-[60px] sm:gap-[24px]">
+        <TitleCustom configTheme={configTheme} field={title} lineText />
+
+        <FadeInMotion className="max-h-[50%] w-full items-center" delay={0.5}>
+          {shouldRenderImage ? (
+            <Image
+              alt="image"
+              className="h-full w-full object-contain"
+              src={image?.value.url}
+            />
+          ) : null}
+        </FadeInMotion>
+        <FadeInMotion className="w-full justify-center text-center" delay={0.5}>
+          <TitleCustom configTheme={configTheme} field={centerSubtitle} />
+        </FadeInMotion>
+        {renderText()}
+      </div>
+    </SectionFullScreen>
+  );
+};
+
+export default ImageTextSection;

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

@@ -0,0 +1,191 @@
+// @ts-nocheck
+
+import { FadeInMotion } from "../../../FadeInMotion";
+import SectionFullScreen from "../../../SectionFullScreen";
+import { BaseSectionProps } from "../../../../models/base-section";
+import clsx from "clsx";
+import { FC, useEffect, useRef, useState } from "react";
+import { parse } from "@phygitallabs/helpers";
+import ClampLines from "react-clamp-lines";
+import { splitByIndex } from "../../../../utils/helper";
+import { Field } from "../../types/base";
+import BackgroundImage from "../../moleculars/BackgroundImage";
+import { Typography } from "../../atomics";
+
+interface LetterSectionProps extends BaseSectionProps {}
+
+interface LetterSection {
+  background: Field;
+  description: Field;
+}
+
+const getTheChildrenWithStrings = (p: React.ReactElement[]) => {
+  let paragraph = "";
+  p?.forEach((c: any) => {
+    if (typeof c === "string") paragraph += c;
+    if (c.type === "br") paragraph += "\n";
+    if (c.type === "em") paragraph += c.props.children;
+    if (c.type === "strong") {
+      let text = c.props?.children;
+      paragraph +=
+        typeof text === "string"
+          ? `<b className="font-semibold">${text}</b>`
+          : text.props?.children;
+    }
+  });
+  return paragraph;
+};
+
+const renderText = (textHtml: string) => {
+  const description = parse(textHtml) as
+    | React.ReactElement[]
+    | React.ReactElement;
+  let paragraph = "";
+  if (Array.isArray(description)) {
+    description.forEach((d) => {
+      if (d.type === "p") {
+        let p = d.props?.children;
+        if (typeof p === "string") paragraph += p;
+        if (p.type === "br") paragraph += "\n";
+        else if (Array.isArray(p)) paragraph += getTheChildrenWithStrings(p);
+      }
+      if (d.props.children?.type === "em") {
+        let em = d.props.children;
+        paragraph += em.props.children;
+      }
+      if (d.props.children?.type === "br") paragraph += "\n";
+      if (d.type === "ol") {
+        paragraph += "\n";
+        d.props.children.forEach((li: any) => {
+          paragraph += `- ${li.props.children}\n`;
+        });
+      }
+    });
+    return paragraph;
+  }
+  return description.props.children;
+};
+
+const LetterSection: FC<LetterSectionProps> = ({
+  id,
+  sectionData,
+  // configTheme,
+}) => {
+  const { background = {}, description = {} } =
+    sectionData ?? ({} as LetterSection);
+  const textContainer = useRef<HTMLDivElement | null>(null);
+  const [textContainerHeight, setTextContainerHeight] = useState(0);
+  const [letterArray, setLetterArray] = useState<string[]>([]);
+  const [currentContentLetter, setCurrentContentLetter] = useState("");
+
+  useEffect(() => {
+    if (!!textContainerHeight) return;
+    const interval = setInterval(() => {
+      if (!!textContainerHeight) return;
+      if (!textContainer.current) return;
+      setTextContainerHeight(textContainer.current?.clientHeight);
+      setCurrentContentLetter(renderText(description.value));
+      clearInterval(interval);
+    }, 500);
+    return () => clearInterval(interval);
+  }, []);
+
+  useEffect(() => {
+    if (!textContainerHeight) return;
+    const readMoreDiv = document.getElementById(
+      `clamped-content-${id}-img-text`
+    );
+    if (readMoreDiv?.innerText.endsWith("...")) {
+      let currentIndexToSplit = readMoreDiv?.innerText.lastIndexOf(" ");
+      for (
+        let i = currentIndexToSplit + 1;
+        i < currentContentLetter?.length;
+        i++
+      ) {
+        if (
+          currentContentLetter[i] === " " ||
+          currentContentLetter[i] === "\n" ||
+          currentContentLetter[i] === "."
+        ) {
+          currentIndexToSplit = i + 1;
+          break;
+        }
+      }
+
+      const letters = splitByIndex(currentContentLetter, currentIndexToSplit);
+      setCurrentContentLetter(letters[1]);
+      setLetterArray((prev) => [...prev, letters[0]]);
+    } else {
+      setLetterArray((prev) => [...prev, currentContentLetter]);
+    }
+  }, [textContainerHeight, currentContentLetter]);
+
+  return (
+    <>
+      <SectionFullScreen
+        name={id}
+        className={clsx(letterArray.length > 0 && "hidden")}
+      >
+        <div className="absolute left-0 top-0 -z-10 flex h-full w-full flex-col items-center justify-center px-4 pt-14">
+          {description.value && (
+            // <div className="flex h-full flex-1 flex-col items-center">
+            <div
+              className="relative h-full w-full overflow-hidden"
+              ref={textContainer}
+            >
+              <FadeInMotion duration={0.5} delay={0} className="h-full !gap-0">
+                <div
+                  className={clsx(
+                    "h-full whitespace-pre-line text-[16px] font-light leading-[20px]"
+                  )}
+                >
+                  {!!textContainerHeight && letterArray.length === 0 && (
+                    <>
+                      {renderText(description.value!)?.length >= 20 ? (
+                        <ClampLines
+                          id={`${id}-img-text`}
+                          text={currentContentLetter}
+                          lines={textContainerHeight / 20 - 2}
+                          buttons={false}
+                        />
+                      ) : (
+                        <Typography variant="p">
+                          {parse(description.value!)}
+                        </Typography>
+                      )}
+                    </>
+                  )}
+                </div>
+              </FadeInMotion>
+            </div>
+            // </div>
+          )}
+        </div>
+      </SectionFullScreen>
+      {letterArray?.map((letter, index) => (
+        <SectionFullScreen
+          name={index === 0 ? id : `${id}-${index}`}
+          key={index}
+        >
+          <BackgroundImage field={background} />
+          <div className="absolute left-0 top-0 z-50 flex h-full w-full flex-col items-center justify-center bg-cover bg-center px-[16px] pt-[60px]">
+            <div
+              className="relative h-full w-full overflow-hidden"
+              // ref={textContainer}
+            >
+              <FadeInMotion duration={0.5} delay={0} className="h-full !gap-0">
+                <div className="h-full whitespace-pre-line px-2">
+                  <Typography variant="p" className="leading-[20px]">
+                    {parse(letter!)}
+                  </Typography>
+                </div>
+              </FadeInMotion>
+            </div>
+          </div>
+        </SectionFullScreen>
+      ))}
+    </>
+  );
+};
+
+export default LetterSection;

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

@@ -0,0 +1,141 @@
+import { BaseSectionProps } from "../../../../models/base-section";
+import { getContentFromLexicalValue } from "@phygitallabs/helpers";
+import { useEffect, useRef, useState } from "react";
+import { Field } from "../../types/base";
+import BackgroundImage from "../../moleculars/BackgroundImage";
+import SectionFullScreen from "../../../SectionFullScreen";
+import AudioPlayer from "../../moleculars/AudioPlayer";
+import { Media } from "../../../../../LandingPage/models/general";
+import { twMerge } from "tailwind-merge";
+import BaseModal from "../../atomics/ BaseModal";
+
+interface Props extends BaseSectionProps {
+  translations?: any;
+}
+interface SectionData {
+  background: Field;
+  description: Field;
+  audio: Field<Media>;
+  text_color?: Field<string>;
+}
+
+const AudioLexicalLetterSection = (props: Props) => {
+  const { id, sectionData, configTheme, translations } = props;
+  const { background, description, audio } = sectionData as SectionData;
+  const primaryColor = configTheme?.primary_color;
+  const audioRef = useRef<HTMLAudioElement>(null);
+  const contentRef = useRef<HTMLDivElement>(null);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [isOverflowing, setIsOverflowing] = useState(false);
+
+  const audioSrc = audio?.value?.url;
+  const isSnapScroll = configTheme?.scroll_snap ?? true;
+
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const checkOverflow = () => {
+    if (contentRef.current && isSnapScroll) {
+      const { scrollHeight, clientHeight } = contentRef.current;
+      setIsOverflowing(scrollHeight > clientHeight);
+    }
+  };
+
+  useEffect(() => {
+    checkOverflow();
+
+    const resizeObserver = new ResizeObserver(checkOverflow);
+    if (contentRef.current) {
+      resizeObserver.observe(contentRef.current);
+    }
+
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [description?.value, isSnapScroll]);
+
+  const toggleModal = () => {
+    setIsModalOpen(!isModalOpen);
+  };
+
+  const renderContent = () => {
+    const content =
+      description?.value && getContentFromLexicalValue(description.value);
+
+    if (!isSnapScroll) {
+      return <div className="h-full w-full text-base leading-7">{content}</div>;
+    }
+
+    return (
+      <div className="relative h-full w-full">
+        <div
+          ref={contentRef}
+          className="h-full w-full overflow-hidden text-base leading-7"
+          style={{
+            maskImage: isOverflowing
+              ? "linear-gradient(to bottom, black 70%, transparent 100%)"
+              : "none",
+            WebkitMaskImage: isOverflowing
+              ? "linear-gradient(to bottom, black 70%, transparent 100%)"
+              : "none",
+          }}
+        >
+          {content}
+        </div>
+
+        {isOverflowing && (
+          <button
+            type="button"
+            onClick={toggleModal}
+            className="absolute bottom-0 right-0 pb-2 text-center text-sm font-medium text-white hover:from-black/90 transition-all"
+            style={{ color: primaryColor }}
+          >
+            {translations?.readMore || "Read more"}
+          </button>
+        )}
+
+        <BaseModal
+          isOpen={isModalOpen}
+          toggleModal={toggleModal}
+          style={{
+            overflow: "scroll",
+          }}
+          className="max-w-4xl bg-white/20 border-none"
+          closeIconClassName="!border-none text-black"
+          hasExitIcon={true}
+        >
+          <div className="max-h-[70vh] overflow-y-auto text-base leading-7 p-4">
+            {content}
+          </div>
+        </BaseModal>
+      </div>
+    );
+  };
+
+  return (
+    <>
+      <SectionFullScreen
+        name={id}
+        style={{ color: primaryColor }}
+        isSnapScroll={isSnapScroll}
+      >
+        <BackgroundImage field={background} />
+        <div className="relative z-40 h-full w-full px-5 pb-4 pt-[60px]">
+          <div
+            ref={containerRef}
+            className={twMerge(
+              "h-full w-full text-base leading-7",
+              !!audioSrc && "h-[calc(100%-60px)]"
+            )}
+          >
+            {renderContent()}
+            {!!audioSrc && (
+              <AudioPlayer src={audioSrc} audioRef={audioRef} id={id!} />
+            )}
+          </div>
+        </div>
+      </SectionFullScreen>
+    </>
+  );
+};
+
+export default AudioLexicalLetterSection;