ui-landing-page 6.1.0

package/src/components/LandingPage/common/ui-kit/organisms/BaoNgayNay2025Section/GenerateGreeting.tsx

@@ -0,0 +1,528 @@
+import { useRef, useState } from "react";
+import SectionFullScreen from "../../../../../LandingPage/common/SectionFullScreen";
+import { Drawer, Image, Input, message } from "antd";
+import { SparkleIcon } from "../../../../../LandingPage/common/icons/SparkleIcon";
+import {
+  ArrowRight,
+  ArrowsCounterClockwise,
+  CaretLeft,
+  DownloadSimple,
+  Sparkle,
+  X,
+} from "@phosphor-icons/react";
+import {
+  CARD_SAMPLE,
+  GREETING_TEMPLATES,
+  GREETING_TEMPLATES_IMAGES_VALUE,
+} from "./constant";
+import { cn, isIOS } from "@phygitallabs/helpers";
+import { CopyrightByPGLIcon } from "../../../../../LandingPage/common/icons/CopyrightByPGLIcon";
+import { UploadImage } from "./UploadImage";
+import { motion } from "framer-motion";
+import { useMedia } from "../../../../../LandingPage/hooks";
+import { AudioTheme, audioThemeId } from "./AudioTheme";
+import { handleDownloadImageByHtml2Canvas } from "../../../../utils/helper";
+
+const BaseButton = ({
+  children,
+  onClick,
+}: {
+  children: React.ReactNode;
+  onClick: () => void;
+}) => (
+  <button
+    type="button"
+    onClick={onClick}
+    className="bg-[#CE2E0E] flex items-center justify-center gap-2 text-white font-semibold text-base w-full px-5 py-3 rounded-md"
+  >
+    {children}
+  </button>
+);
+
+const OverLayImage = ({
+  src,
+  text,
+  ownerName,
+  className,
+}: {
+  src: string;
+  text: string;
+  ownerName: string;
+  className?: string;
+}) => {
+  return (
+    <div
+      className={cn(
+        "relative h-full border-2 border-white rounded-lg",
+        !!className && className
+      )}
+    >
+      <div className="absolute top-2 right-2 z-10">
+        <Image
+          src="https://storage.googleapis.com/assets-fygito/images/user_id/ngaynay-logo-white.png"
+          width={67}
+          height={21}
+        />
+      </div>
+      <img
+        src={src}
+        id="card-tet-image"
+        className="object-cover rounded-lg w-full absolute bottom-0 h-full"
+      />
+      <div className="text-[10px] rounded-b-lg absolute bottom-0 w-full left-1/2 -translate-x-1/2">
+        <div className="space-y-2 h-1/3 bg-gradient-to-b from-black/0 to-black p-4 rounded-b-lg">
+          <p className="text-white font-medium break-words max-w-full">
+            {text}
+          </p>
+          <svg
+            width="228"
+            height="1"
+            viewBox="0 0 228 1"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <line
+              x1="0.5"
+              y1="0.5"
+              x2="227.5"
+              y2="0.5"
+              stroke="#BBBBBB"
+              stroke-linecap="round"
+              stroke-dasharray="4 4"
+            />
+          </svg>
+
+          <div className="flex items-center gap-4 justify-between w-full">
+            <p className="text-white truncate">Từ: {ownerName}</p>
+            <div className="flex-shrink-0">
+              <CopyrightByPGLIcon />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export const GreetingSelector = ({
+  currentGreetingTemplate,
+  handleSelectGreetingTemplate,
+  className,
+  isBadge = true,
+}: {
+  currentGreetingTemplate: string;
+  handleSelectGreetingTemplate: (template: string) => void;
+  className?: string;
+  isBadge?: boolean;
+}) => {
+  return (
+    <div className={cn("flex flex-col gap-4", !!className && className)}>
+      {isBadge && (
+        <div className="text-xs text-center flex items-center justify-center gap-2 text-black font-medium bg-[#FFF8F6] p-2 rounded-full border border-[#FFCAC0]">
+          <SparkleIcon />
+          <span>AI sẽ giúp tạo thiệp theo ý tưởng của bạn</span>
+        </div>
+      )}
+      <div className="flex flex-col gap-2">
+        <p className="text-sm font-medium text-[#CE2E0E]">Ý tưởng lời chúc</p>
+        <Input.TextArea
+          rows={3}
+          placeholder="Nhập ý tưởng lời chúc"
+          defaultValue={GREETING_TEMPLATES[0]}
+          onChange={(e) => handleSelectGreetingTemplate(e.target.value)}
+          value={currentGreetingTemplate}
+        />
+        <div className="w-full h-auto flex items-center overflow-x-scroll no-scrollbar">
+          <div className="w-full inline-flex gap-2">
+            {GREETING_TEMPLATES.map((template) => (
+              <p
+                onClick={() => handleSelectGreetingTemplate(template)}
+                className={cn(
+                  "flex-shrink-0 max-w-[200px] text-black truncate text-sm font-medium py-2 px-3 rounded-full border border-[#E8E8E8]",
+                  currentGreetingTemplate === template &&
+                    "border-[#CE2E0E] text-[#CE2E0E]"
+                )}
+              >
+                {template}
+              </p>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+type SelectImageMode = "default" | "gallery";
+
+const SELECT_IMAGE_MODE = [
+  {
+    label: "Hình nền",
+    value: "default",
+  },
+  {
+    label: "Chọn ảnh của bạn",
+    value: "gallery",
+  },
+];
+
+export const GreetingImageSelector = ({
+  currentGreetingImage,
+  handleSelectGreetingImage,
+}: {
+  currentGreetingImage?: string;
+  handleSelectGreetingImage: (image: string) => void;
+}) => {
+  const [imageMode, setImageMode] = useState<SelectImageMode>("default");
+
+  const handleSelectImageMode = (mode: SelectImageMode) => {
+    setImageMode(mode);
+    if (!currentGreetingImage) {
+      handleSelectGreetingImage(GREETING_TEMPLATES_IMAGES_VALUE[0]);
+    }
+  };
+
+  return (
+    <div className="space-y-3">
+      <div className="flex items-center justify-between w-full gap-2">
+        {SELECT_IMAGE_MODE.map((mode) => (
+          <div
+            className={cn(
+              "text-sm font-medium text-black w-full text-center p-2",
+              imageMode === mode.value &&
+                "text-[#CE2E0E] border-b-2 border-[#CE2E0E]"
+            )}
+            onClick={() => handleSelectImageMode(mode.value as SelectImageMode)}
+          >
+            {mode.label}
+          </div>
+        ))}
+      </div>
+      {imageMode === "default" && (
+        <div className="w-full overflow-scroll">
+          <div className="flex gap-4">
+            {GREETING_TEMPLATES_IMAGES_VALUE.map((image) => (
+              <img
+                src={image}
+                className={cn(
+                  "object-cover",
+                  image === currentGreetingImage && "border border-[#CE2E0E]"
+                )}
+                width={60}
+                height={80}
+                onClick={() => handleSelectGreetingImage(image)}
+              />
+            ))}
+          </div>
+        </div>
+      )}
+      {imageMode === "gallery" && (
+        <UploadImage
+          currentImage={currentGreetingImage}
+          handleSetImage={(url) => handleSelectGreetingImage(url)}
+        />
+      )}
+    </div>
+  );
+};
+
+export const GenerateGreeting = ({
+  generateGreeting,
+  ownerName,
+}: {
+  generateGreeting: any;
+  ownerName: string;
+}) => {
+  const [step, setStep] = useState<number>(0);
+  const isFinalStep = step === 2;
+  const { play, resetTime, pause, setVolume } = useMedia();
+
+  const playAuido = () => {
+    setVolume(audioThemeId, 0.5);
+    play(audioThemeId);
+  };
+
+  const killAudio = () => {
+    pause(audioThemeId);
+    resetTime(audioThemeId);
+  };
+
+  const [openDrawerSelectGreeting, setOpenDrawerSelectGreeting] =
+    useState(false);
+  const [openDrawerGenerateGreeting, setOpenDrawerGenerateGreeting] =
+    useState(false);
+
+  const handleOpenDrawerSelectGreeting = () => {
+    setOpenDrawerSelectGreeting(true);
+  };
+  const handleCloseDrawerSelectGreeting = () => {
+    setOpenDrawerSelectGreeting(false);
+  };
+
+  const handleOpenDrawerGenerateGreeting = () =>
+    setOpenDrawerGenerateGreeting(true);
+  const handleCloseDrawerGenerateGreeting = () =>
+    setOpenDrawerGenerateGreeting(false);
+
+  const handleResetAllState = () => {
+    setOpenDrawerGenerateGreeting(false);
+    killAudio();
+    setTimeout(() => {
+      setStep(0);
+      setCurrentGreetingTemplate(GREETING_TEMPLATES[0]);
+      setCurrentGreetingImage(GREETING_TEMPLATES_IMAGES_VALUE[0]);
+      setOpenDrawerSelectGreeting(false);
+    }, 500);
+  };
+
+  const [currentGreetingTemplate, setCurrentGreetingTemplate] = useState(
+    GREETING_TEMPLATES[0]
+  );
+  const [currentGreetingImage, setCurrentGreetingImage] = useState<string>(
+    GREETING_TEMPLATES_IMAGES_VALUE[0]
+  );
+
+  const handleSelectGreetingTemplate = (template: string) => {
+    setCurrentGreetingTemplate(template);
+  };
+
+  const handleSelectGreetingImage = (image: string) => {
+    setCurrentGreetingImage(image);
+  };
+
+  const handleGenerateGreeting = async () => {
+    await generateGreeting.mutate(
+      {
+        text: currentGreetingTemplate,
+      },
+      {
+        onSuccess: () => {
+          handleCloseDrawerSelectGreeting();
+          handleOpenDrawerGenerateGreeting();
+          playAuido();
+        },
+      }
+    );
+  };
+
+  const handleGenerateNewGreetingAgain = async () => {
+    await generateGreeting.mutateAsync({
+      text: currentGreetingTemplate,
+    });
+  };
+
+  const giftRef = useRef<HTMLDivElement>(null);
+  const handleDownloadGreeting = async () => {
+    await handleDownloadImageByHtml2Canvas(
+      giftRef,
+      ownerName,
+      () => {
+        message.success(isIOS() ? "Đã lưu vào tệp" : "Đã lưu vào hình");
+      },
+      () => {
+        message.error("Đã có lỗi xảy ra");
+      }
+    );
+  };
+
+  const CloseIcon = () => <X onClick={handleResetAllState} size={24} />;
+  const generateTitle = (step: number) => {
+    if (step === 0) {
+      return (
+        <div className="flex text-black items-center justify-between gap-2">
+          <div />
+          <p className="text-base font-semibold text-center">Chọn nền thiệp</p>
+          <CloseIcon />
+        </div>
+      );
+    } else if (step === 1) {
+      return (
+        <div className="flex text-black items-center justify-between gap-2">
+          <CaretLeft onClick={() => setStep(0)} size={24} />
+          <p className="text-base font-semibold text-center">Chọn ảnh nền</p>
+          <CloseIcon />
+        </div>
+      );
+    }
+    return (
+      <div className="flex text-black items-center justify-end">
+        <CloseIcon />
+      </div>
+    );
+  };
+
+  const generateStep = (step: number) => {
+    if (step === 0) {
+      return (
+        <GreetingSelector
+          currentGreetingTemplate={currentGreetingTemplate}
+          handleSelectGreetingTemplate={handleSelectGreetingTemplate}
+          isBadge={false}
+          className="overflow-y-scroll"
+        />
+      );
+    } else if (step === 1) {
+      return (
+        <GreetingImageSelector
+          currentGreetingImage={currentGreetingImage}
+          handleSelectGreetingImage={handleSelectGreetingImage}
+        />
+      );
+    }
+  };
+
+  const handleRenderButton = (step: number) => {
+    if (step === 0) {
+      return (
+        <BaseButton onClick={() => setStep(1)}>
+          Chọn nền thiệp <ArrowRight size={20} />
+        </BaseButton>
+      );
+    } else if (step === 1) {
+      return (
+        <BaseButton onClick={() => setStep(2)}>
+          <span className="flex items-center gap-2">Hoàn thành</span>
+        </BaseButton>
+      );
+    }
+    return (
+      <BaseButton onClick={handleDownloadGreeting}>
+        <span className="flex items-center gap-2">
+          <DownloadSimple size={20} /> Tải thiệp
+        </span>
+      </BaseButton>
+    );
+  };
+
+  return (
+    <>
+      <AudioTheme />
+      <SectionFullScreen
+        name="generate-greeting"
+        className="my-16 flex flex-col w-full justify-center items-cente gap-4"
+      >
+        <div className="h-[400px] w-full flex justify-center items-center">
+          <OverLayImage
+            src={CARD_SAMPLE}
+            className="w-[300px] h-full"
+            text="Mừng xuân mới, chúc mọi người luôn dồi dào sức khỏe, tươi vui, và một năm mới đầy ắp những điều may mắn!"
+            ownerName={ownerName}
+          />
+        </div>
+        <div className="text-xl font-semibold flex flex-col items-center whitespace-nowrap">
+          <p>Tạo thiệp chúc mừng năm mới với</p>
+          <span className="flex items-center gap-2">
+            công nghệ AI <SparkleIcon />
+          </span>
+        </div>
+        <button
+          type="button"
+          onClick={handleOpenDrawerSelectGreeting}
+          className="bg-[#CE2E0E] text-white font-semibold text-base w-full px-5 py-3 rounded-md"
+        >
+          <span>Tạo thiệp AI</span>
+        </button>
+      </SectionFullScreen>
+      <Drawer
+        open={openDrawerSelectGreeting}
+        onClose={handleCloseDrawerSelectGreeting}
+        placement="bottom"
+        height={"auto"}
+        closeIcon={null}
+        classNames={{
+          content: "!bg-white !rounded-t-xl",
+          header: "!hidden",
+        }}
+        footer={
+          <button
+            type="button"
+            onClick={handleGenerateGreeting}
+            disabled={generateGreeting.isPending}
+            className={cn(
+              "bg-[#CE2E0E] text-white font-semibold text-base w-full px-5 py-3 rounded-md",
+              generateGreeting.isPending && "cursor-not-allowed bg-[#CE2E0E]/50"
+            )}
+          >
+            {!generateGreeting.isPending ? (
+              <span className="flex items-center gap-2 justify-center">
+                Tạo thiệp <Sparkle size={20} weight="fill" />
+              </span>
+            ) : (
+              <span>Đang tạo...</span>
+            )}
+          </button>
+        }
+      >
+        <GreetingSelector
+          currentGreetingTemplate={currentGreetingTemplate}
+          handleSelectGreetingTemplate={handleSelectGreetingTemplate}
+        />
+      </Drawer>
+      <Drawer
+        open={openDrawerGenerateGreeting}
+        onClose={handleCloseDrawerGenerateGreeting}
+        placement="right"
+        width={"100%"}
+        title={generateTitle(step)}
+        closeIcon={null}
+        classNames={{
+          content:
+            "!bg-[url('https://s3-sgn10.fptcloud.com/phygix-assets/nomion/static/ngaynay/bg-ngaynay-generator-min.webp')] !p-0",
+          body: "!p-0",
+          header: "!border-none",
+        }}
+      >
+        {isFinalStep ? (
+          <div className="flex flex-col gap-4 items-center justify-center h-full p-4">
+            <p className="text-xl font-semibold text-black">
+              Thiệp đã sẵn sàng để gửi tặng
+            </p>
+            <div ref={giftRef}>
+              <OverLayImage
+                className="min-h-[320px] max-h-[360px] max-w-[270px] min-w-[240px]"
+                ownerName={ownerName}
+                src={currentGreetingImage}
+                text={generateGreeting.data}
+              />
+            </div>
+            {handleRenderButton(step)}
+          </div>
+        ) : (
+          <div className="relative h-full">
+            <div className="flex w-full pb-[300px] pt-14 h-full flex-col overflow-scroll gap-4 items-center justify-center">
+              <OverLayImage
+                className="min-h-[320px] max-h-[360px] min-w-[260px] max-w-[]"
+                ownerName={ownerName}
+                src={currentGreetingImage}
+                text={generateGreeting.data}
+              />
+
+              <button
+                type="button"
+                onClick={handleGenerateNewGreetingAgain}
+                disabled={generateGreeting.isPending}
+                className={cn(
+                  "flex items-center gap-2 text-black font-medium bg-white p-2 shadow-xl rounded-md",
+                  generateGreeting.isPending && "opacity-50"
+                )}
+              >
+                <ArrowsCounterClockwise weight="fill" size={20} />
+                {generateGreeting.isPending ? "Đang tạo..." : "Tạo bài khác"}
+              </button>
+            </div>
+            <motion.div
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              exit={{ opacity: 0 }}
+              transition={{ duration: 1 }}
+              className="fixed bottom-0 z-10 space-y-4 left-0 right-0 w-full bg-white p-4 rounded-t-xl"
+            >
+              <div className="overflow-y-scroll">{generateStep(step)}</div>
+              {handleRenderButton(step)}
+            </motion.div>
+          </div>
+        )}
+      </Drawer>
+    </>
+  );
+};

package/src/components/LandingPage/common/ui-kit/organisms/BaoNgayNay2025Section/HomeSection.tsx

@@ -0,0 +1,130 @@
+// @ts-nocheck
+import { FC, useEffect } from "react";
+import SectionFullScreen from "../../../SectionFullScreen/index";
+import { BaseSectionProps } from "../../../../models/base-section";
+import { Media, MediaType, PageSteps } from "../../../../models/general";
+import { motion } from "framer-motion";
+import Video from "../../../Video";
+import ThreeModelViewer from "../../../3DModel";
+import { FadeInMotion } from "../../../FadeInMotion";
+import Title from "../../moleculars/Title";
+import TagName from "../../moleculars/TagName";
+import AuthorModal from "../../moleculars/AuthorModal";
+import MetaInfoModal from "../../moleculars/MetaInfoModal";
+import BackgroundImage from "../../moleculars/BackgroundImage";
+import { Field } from "../../types/base";
+import { twMerge } from "tailwind-merge";
+import { Typography } from "../../atomics";
+import ListButton from "../../moleculars/ListButton";
+import { ImageNomion as Image } from '@phygitallabs/core-ui/components/image-nomion';
+import { getContentFromLexicalValue } from "@phygitallabs/helpers";
+import { replaceKeysInDescription } from "../../../../utils/helper";
+import RenderMedia from "../../moleculars/RenderMedia";
+
+export interface HomeSectionData {
+  image: Media;
+  title: string;
+  tag: string[];
+  publish: string;
+  owner: {
+    honorific: string;
+    name: string;
+    position: string;
+  };
+}
+
+interface HomeSectionProps extends BaseSectionProps {
+  data: HomeSectionData;
+}
+
+export const HomeSection = ({ data, configTheme }: HomeSectionProps) => {
+  const { image, title, tag, owner } = data;
+  const { honorific, name } = owner;
+
+  return (
+    <SectionFullScreen name="home" className="!h-auto space-y-10">
+      <div className="relative min-h-auto flex w-full justify-center">
+        <img
+          src={image.url}
+          alt="Media"
+          className="w-4/5 h-full object-cover"
+        />
+      </div>
+      <div className="z-10 flex w-full flex-col justify-between gap-4">
+        {/* <Title
+          field={{
+            value: title,
+          }}
+          configTheme={configTheme}
+        /> */}
+        <TagName
+          field={{
+            value: tag,
+          }}
+          configTheme={{
+            background_color: "#fff",
+            primary_color: "#CE2E0E",
+          }}
+          variant="tag-outline"
+        />
+        {/* <Typography
+          variant="span"
+          className="font-thin"
+          style={{ color: configTheme?.secondary_color }}
+        >
+          {publish}
+        </Typography> */}
+        <Typography variant="span" className="font-thin text-[#838383]">
+          Sở hữu:{" "}
+          <span
+            className="font-semibold underline"
+            style={{ color: configTheme?.primary_color }}
+          >
+            {honorific} {name}
+          </span>
+        </Typography>
+        <div className="space-y-4 mt-12">
+          <ListButton
+            field={{
+              value: [
+                {
+                  label: "KỶ NGUYÊN MỚI",
+                  link: "https://ngaynay.vn/ky-nguyen-vuon-minh/",
+                },
+                {
+                  label: "ĐỌC BÁO TẾT",
+                  link: "https://ngaynay.vn/epaper/409-418/",
+                },
+              ],
+            }}
+            configTheme={{
+              background_color: "#fff",
+              primary_color: "#CE2E0E",
+            }}
+            classNameItem="text-base font-medium uppercase"
+          />
+          <ListButton
+            field={{
+              value: [
+                {
+                  label: "NGAYNAY.VN",
+                  link: "http://ngaynay.vn/",
+                },
+                {
+                  label: "E-PAPER",
+                  link: "https://ngaynay.vn/e-paper/",
+                },
+                {
+                  label: "SPECIAL TODAY",
+                  link: "https://ngaynay.vn/pay/",
+                },
+              ],
+            }}
+            classNameWrapper="grid-cols-3"
+            classNameItem="border border-[#D9D9D9] font-medium text-[#202020] text-xs uppercase"
+          />
+        </div>
+      </div>
+    </SectionFullScreen>
+  );
+};