ui-landing-page 6.1.0

package/src/components/LandingPage/common/ui-kit/organisms/TetLuckyMoneySection/LuckeyMoneySectionAdvance.tsx

@@ -0,0 +1,197 @@
+import { Media } from "../../../../models/general";
+import { BaseSectionProps } from "../../../../models/base-section";
+import SectionFullScreen from "../../../SectionFullScreen";
+import { ImageNomion as Image } from '@phygitallabs/core-ui/components/image-nomion';
+import type { Field } from "../../types/base";
+import { getContentFromLexicalValue } from "@phygitallabs/helpers";
+import { useRef, useState } from "react";
+import { twMerge } from "tailwind-merge";
+import { generateRandomNumberFromWeights } from "../../../../utils/helper";
+
+interface LuckyMoneySectionAdvanceData {
+  title: Field<string>;
+  description: Field;
+  button_label: Field<string>;
+  icon_image: Field<Media>;
+  money_rate: Field<MoneyRate>;
+  cover: Field<{
+    background: string;
+    title: string;
+  }>;
+}
+
+const FINISH_TEXT = [
+  "Quá đã!",
+  "Lấy may đầu năm nhé!",
+  "yeahhh bạn nhận được:",
+  "Anh là kẻ may mắn, luôn là kẻ may mắn",
+];
+
+const WAITING_TEXT = "Chờ xíu, chờ xíu...";
+
+interface MoneyRate {
+  [key: string | number]: number;
+}
+
+export interface LuckyMoneySectionAdvanceProps extends BaseSectionProps {}
+
+function LuckyMoneySectionAdvance({
+  sectionData,
+  id,
+}: LuckyMoneySectionAdvanceProps) {
+  const [showGift, setShowGift] = useState(false);
+  const [randomNumber, setShowRandomNumber] = useState(0);
+  const data = sectionData as LuckyMoneySectionAdvanceData;
+  const { money_rate, icon_image, title, description, button_label, cover } =
+    data || {};
+  const titleValue = title?.value;
+  const descriptionValue = description?.value;
+  const moneyRate = money_rate?.value;
+  const iconValue = icon_image?.value;
+  const iconImage = `https://s3-sgn10.fptcloud.com/phygix-assets/nomion/static/tet-2025/snake-meme-${iconValue}.png`;
+  const buttonLabel = button_label?.value || "THỬ VẬN MAY";
+
+  const [showLuckyMoney, setShowLuckyMoney] = useState(false);
+  const coverValue = cover?.value;
+  const bgValue = coverValue?.background;
+  const coverBackground = `https://s3-sgn10.fptcloud.com/phygix-assets/nomion/static/tet-2025/tet-bg-${bgValue}.gif`;
+  const coverTitle = coverValue?.title || "LÌ XÌ NÀO!";
+
+  // create a ref, and play in handleShowGift
+  const audioRef = useRef<HTMLAudioElement>(null);
+  const { rate_10, rate_20, rate_50, rate_100, rate_200, rate_500 } =
+    moneyRate || {
+      rate_10: 6,
+      rate_20: 5,
+      rate_50: 4,
+      rate_100: 3,
+      rate_200: 2,
+      rate_500: 1,
+    };
+
+  const moneyRateValue = {
+    10: Number(rate_10),
+    20: Number(rate_20),
+    50: Number(rate_50),
+    100: Number(rate_100),
+    200: Number(rate_200),
+    500: Number(rate_500),
+  };
+
+  const handleShowGift = () => {
+    setShowGift(true);
+    if (audioRef.current) {
+      audioRef.current.play();
+    }
+    setTimeout(() => {
+      const randomNumber = generateRandomNumberFromWeights(moneyRateValue);
+      console.log("randomNumber", randomNumber);
+      setShowRandomNumber(Number(randomNumber));
+    }, 5000);
+  };
+
+  if (!showLuckyMoney)
+    return (
+      <SectionFullScreen className="max-h-full" name={id}>
+        <div className="flex flex-col items-center justify-center h-full relative">
+          <Image
+            src={coverBackground}
+            alt="tet-2025"
+            className="object-cover"
+          />
+          <div
+            onClick={() => setShowLuckyMoney(true)}
+            className="absolute text-[#243E9F] bg-white rounded-lg w-auto top-1/2 text-lg right-8 z-10 flex items-center justify-center px-4 py-1"
+          >
+            <p className="line-clamp-1 font-medium text-center">{coverTitle}</p>
+          </div>
+        </div>
+      </SectionFullScreen>
+    );
+  return (
+    <SectionFullScreen className="min-h-[100vh] bg-[#243E9F] py-10" name={id}>
+      <audio
+        src="https://s3-sgn10.fptcloud.com/phygix-assets/nomion/static/tet-2025/xo-so.mp3"
+        ref={audioRef}
+      />
+      <div className="flex flex-col items-center justify-start h-full relative pt-10 px-4">
+        {!showGift && (
+          <>
+            {titleValue && (
+              <p className="text-4xl line-clamp-3 font-bold text-[#FEBDE1] mb-6 text-center">
+                {titleValue}
+              </p>
+            )}
+            {descriptionValue && (
+              <p className="text-base text-[#FAEDCD] mb-6">
+                {getContentFromLexicalValue(descriptionValue)}
+              </p>
+            )}
+            <button
+              className="px-2 py-1 text-black rounded-md bg-white font-bold"
+              onClick={handleShowGift}
+              type="button"
+            >
+              {buttonLabel}
+            </button>
+            <div className="h-full flex-1 flex justify-end flex-col">
+              <Image
+                src={iconImage}
+                alt="tet-2025"
+                className="object-contain !w-auto !h-auto m-auto"
+                width="auto"
+                height="auto"
+              />
+            </div>
+          </>
+        )}
+        <div
+          className={twMerge(
+            "w-full h-full items-center justify-center flex-col gap-20",
+            showGift && !randomNumber ? "flex" : "hidden"
+          )}
+        >
+          <p className="text-3xl whitespace-nowrap text-center font-bold text-[#FEBDE1]">
+            {WAITING_TEXT}
+          </p>
+          <Image
+            src="https://s3-sgn10.fptcloud.com/phygix-assets/nomion/static/tet-2025/tien-lixi.gif"
+            alt="tet-2025"
+            width="auto"
+            height="auto"
+          />
+        </div>
+        <div
+          className={twMerge(
+            "w-full h-full items-center justify-center relative",
+            randomNumber ? "flex" : "hidden"
+          )}
+        >
+          <div className="absolute top-0 left-0 z-10">
+            <Image
+              src="https://s3-sgn10.fptcloud.com/phygix-assets/nomion/static/tet-2025/gift-success.gif"
+              alt="tet-2025"
+              width="100%"
+              height="100%"
+            />
+          </div>
+
+          <div className="w-full h-full flex items-center justify-center flex-col gap-20">
+            <p className="text-3xl text-wrap text-center font-bold text-[#FEBDE1]">
+              {FINISH_TEXT[randomNumber % 4]}
+            </p>
+            <Image
+              src={`https://s3-sgn10.fptcloud.com/phygix-assets/nomion/static/tet-2025/${randomNumber}k.webp`}
+              alt="tet-2025"
+              width="auto"
+              height="auto"
+            />
+          </div>
+        </div>
+      </div>
+      {/* <div className="absolute bottom-0 left-0 w-full h-full bg-black"></div> */}
+    </SectionFullScreen>
+  );
+}
+
+export default LuckyMoneySectionAdvance;

package/src/components/LandingPage/common/ui-kit/organisms/TetLuckyMoneySection/LuckyMoneySection.tsx

@@ -0,0 +1,164 @@
+import { Media } from "../../../../models/general";
+import { BaseSectionProps } from "../../../../models/base-section";
+import SectionFullScreen from "../../../SectionFullScreen";
+import { ImageNomion as Image } from '@phygitallabs/core-ui/components/image-nomion';
+import type { Field } from "../../types/base";
+import { getContentFromLexicalValue } from "@phygitallabs/helpers";
+import { useRef, useState } from "react";
+import { twMerge } from "tailwind-merge";
+
+interface LuckyMoneySectionData {
+  title: Field<string>;
+  description: Field;
+  button_label: Field<string>;
+  icon_image: Field<Media>;
+  money_rate: Field<MoneyRate>;
+  audio: Field<Media>;
+}
+
+interface MoneyRate {
+  [key: string]: number;
+}
+
+export interface LuckyMoneySectionProps extends BaseSectionProps {}
+
+function LuckyMoneySection({ sectionData, id }: LuckyMoneySectionProps) {
+  const [showGift, setShowGift] = useState(false);
+  const [randomNumber, setShowRandomNumber] = useState(0);
+  const data = sectionData as LuckyMoneySectionData;
+  const { money_rate, icon_image, title, description, button_label, audio } =
+    data || {};
+  const titleValue = title?.value;
+  const descriptionValue = description?.value;
+  const moneyRate = money_rate?.value;
+  const iconValue = icon_image?.value;
+  const iconImage = `https://s3-sgn10.fptcloud.com/phygix-assets/nomion/static/tet-2025/snake-meme-${iconValue}.png`;
+  const buttonLabel = button_label?.value;
+  const audioValue = audio?.value?.url;
+
+  // create a ref, and play in handleShowGift
+  const audioRef = useRef<HTMLAudioElement>(null);
+  const { rate_10, rate_20, rate_50, rate_100, rate_200, rate_500 } =
+    moneyRate || {
+      rate_10: 6,
+      rate_20: 5,
+      rate_50: 4,
+      rate_100: 3,
+      rate_200: 2,
+      rate_500: 1,
+    };
+
+  const moneyRateValue = {
+    10: rate_10,
+    20: rate_20,
+    50: rate_50,
+    100: rate_100,
+    200: rate_200,
+    500: rate_500,
+  };
+
+  const generateRandomNumber = (rate = moneyRateValue) => {
+    const totalQuantity = Object.values(rate).reduce(
+      (acc, curr) => acc + curr,
+      0
+    );
+    const randomNumber = Math.floor(Math.random() * totalQuantity) + 1;
+    const array = Array.from({ length: totalQuantity }, (_, index) => {
+      return Object.keys(rate)[
+        Math.floor(
+          index /
+            (rate as any)[Object.keys(rate)[index % Object.keys(rate).length]]
+        )
+      ];
+    });
+    const key = array[randomNumber - 1];
+    return key;
+  };
+
+  const handleShowGift = () => {
+    setShowGift(true);
+    if (audioRef.current) {
+      audioRef.current.play();
+    }
+    setTimeout(() => {
+      const randomNumber = generateRandomNumber();
+      setShowRandomNumber(Number(randomNumber));
+    }, 5000);
+  };
+
+  return (
+    <SectionFullScreen className="min-h-[100vh] bg-[#243E9F] py-10" name={id}>
+      <audio src={audioValue} ref={audioRef} />
+      <div className="flex flex-col items-center justify-start h-full relative pt-10 px-4">
+        {!showGift && (
+          <>
+            {titleValue && (
+              <p className="text-4xl font-bold text-[#FEBDE1] mb-6 text-center">
+                {titleValue}
+              </p>
+            )}
+            {descriptionValue && (
+              <p className="text-base text-[#FAEDCD] mb-6">
+                {getContentFromLexicalValue(descriptionValue)}
+              </p>
+            )}
+            <button
+              className="px-2 py-1 text-black rounded-md bg-white font-bold"
+              onClick={handleShowGift}
+              type="button"
+            >
+              {buttonLabel}
+            </button>
+            <div className="h-full flex-1 flex justify-end flex-col">
+              <Image
+                src={iconImage}
+                alt="tet-2025"
+                className="object-contain !w-auto !h-auto m-auto"
+                width="auto"
+                height="auto"
+              />
+            </div>
+          </>
+        )}
+        <div
+          className={twMerge(
+            "w-full h-full items-center justify-center",
+            showGift && !randomNumber ? "flex" : "hidden"
+          )}
+        >
+          <Image
+            src="https://s3-sgn10.fptcloud.com/phygix-assets/nomion/static/tet-2025/tien-lixi.gif"
+            alt="tet-2025"
+            width="auto"
+            height="auto"
+          />
+        </div>
+        <div
+          className={twMerge(
+            "w-full h-full items-center justify-center relative",
+            randomNumber ? "flex" : "hidden"
+          )}
+        >
+          <div className="absolute top-0 left-0 z-10">
+            <Image
+              src="https://s3-sgn10.fptcloud.com/phygix-assets/nomion/static/tet-2025/gift-success.gif"
+              alt="tet-2025"
+              width="100%"
+              height="100%"
+            />
+          </div>
+
+          <Image
+            src={`https://s3-sgn10.fptcloud.com/phygix-assets/nomion/static/tet-2025/${randomNumber}k.webp`}
+            alt="tet-2025"
+            width="auto"
+            height="auto"
+          />
+        </div>
+      </div>
+      {/* <div className="absolute bottom-0 left-0 w-full h-full bg-black"></div> */}
+    </SectionFullScreen>
+  );
+}
+
+export default LuckyMoneySection;

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

@@ -0,0 +1,2 @@
+export { default as LuckyMoneySection } from "./LuckyMoneySection";
+export { default as LuckyMoneySectionAdvance } from "./LuckeyMoneySectionAdvance";

package/src/components/LandingPage/common/ui-kit/organisms/TetLuckyMoneySection2/LuckyMoneySection2.tsx

@@ -0,0 +1,162 @@
+import { Media } from "../../../../models/general";
+import { BaseSectionProps } from "../../../../models/base-section";
+import SectionFullScreen from "../../../SectionFullScreen";
+import { ImageNomion as Image } from '@phygitallabs/core-ui/components/image-nomion';
+import type { Field } from "../../types/base";
+import { getContentFromLexicalValue } from "@phygitallabs/helpers";
+import { useRef, useState } from "react";
+import { twMerge } from "tailwind-merge";
+
+interface LuckyMoneySection2Data {
+  title: Field<string>;
+  description: Field;
+  button_label: Field<string>;
+  icon_image: Field<Media>;
+  money_rate: Field<MoneyRate>;
+  audio: Field<Media>;
+}
+
+interface MoneyRate {
+  [key: string]: number;
+}
+
+export interface LuckyMoneySection2Props extends BaseSectionProps {}
+
+function LuckyMoneySection2({ sectionData, id }: LuckyMoneySection2Props) {
+  const [showGift, setShowGift] = useState(false);
+  const [randomNumber, setShowRandomNumber] = useState(0);
+  const data = sectionData as LuckyMoneySection2Data;
+  const { money_rate, title, description, button_label, audio } = data || {};
+  const titleValue = title?.value;
+  const descriptionValue = description?.value;
+  const moneyRate = money_rate?.value;
+  const iconImage = `https://s3-sgn10.fptcloud.com/phygix-assets/nomion/static/tet-2025/meme-tet.png`;
+  const buttonLabel = button_label?.value || "Nhận lì xì";
+  const audioValue = audio?.value?.url;
+
+  // create a ref, and play in handleShowGift
+  const audioRef = useRef<HTMLAudioElement>(null);
+  const { rate_10, rate_20, rate_50, rate_100, rate_200, rate_500 } =
+    moneyRate || {
+      rate_10: 6,
+      rate_20: 5,
+      rate_50: 4,
+      rate_100: 3,
+      rate_200: 2,
+      rate_500: 1,
+    };
+
+  const moneyRateValue = {
+    10: rate_10,
+    20: rate_20,
+    50: rate_50,
+    100: rate_100,
+    200: rate_200,
+    500: rate_500,
+  };
+
+  const generateRandomNumber = (rate = moneyRateValue) => {
+    const totalQuantity = Object.values(rate).reduce(
+      (acc, curr) => acc + curr,
+      0
+    );
+    const randomNumber = Math.floor(Math.random() * totalQuantity) + 1;
+    const array = Array.from({ length: totalQuantity }, (_, index) => {
+      return Object.keys(rate)[
+        Math.floor(
+          index /
+            (rate as any)[Object.keys(rate)[index % Object.keys(rate).length]]
+        )
+      ];
+    });
+    const key = array[randomNumber - 1];
+    return key;
+  };
+
+  const handleShowGift = () => {
+    setShowGift(true);
+    if (audioRef.current) {
+      audioRef.current.play();
+    }
+    setTimeout(() => {
+      const randomNumber = Number(generateRandomNumber());
+      setShowRandomNumber(randomNumber);
+    }, 5000);
+  };
+
+  return (
+    <SectionFullScreen className="min-h-[100vh] bg-[#FBCD60] py-10" name={id}>
+      <audio src={audioValue} ref={audioRef} />
+      <div className="flex flex-col items-center justify-start h-full relative pt-10 px-4">
+        {!showGift && (
+          <>
+            {titleValue && (
+              <p className="text-4xl font-bold text-[#B52E10] mb-6 text-center">
+                {titleValue}
+              </p>
+            )}
+            {descriptionValue && (
+              <p className="text-base text-[#FAEDCD] mb-6">
+                {getContentFromLexicalValue(descriptionValue)}
+              </p>
+            )}
+            <button
+              className="px-2 py-1 text-black rounded-md bg-white font-bold"
+              onClick={handleShowGift}
+              type="button"
+            >
+              {buttonLabel}
+            </button>
+            <div className="h-full flex-1 flex justify-end flex-col">
+              <Image
+                src={iconImage}
+                alt="tet-2025"
+                className="object-contain !w-auto !h-auto m-auto"
+                width="auto"
+                height="auto"
+              />
+            </div>
+          </>
+        )}
+        <div
+          className={twMerge(
+            "w-full h-full items-center justify-center",
+            showGift && !randomNumber ? "flex" : "hidden"
+          )}
+        >
+          <Image
+            src="https://s3-sgn10.fptcloud.com/phygix-assets/nomion/static/tet-2025/tien-lixi.gif"
+            alt="tet-2025"
+            width="auto"
+            height="auto"
+          />
+        </div>
+        <div
+          className={twMerge(
+            "w-full h-full items-center justify-center relative",
+            randomNumber ? "flex" : "hidden"
+          )}
+        >
+          <div className="absolute top-0 left-0 z-10">
+            <Image
+              src="https://s3-sgn10.fptcloud.com/phygix-assets/nomion/static/tet-2025/gift-success.gif"
+              alt="tet-2025"
+              width="100%"
+              height="100%"
+            />
+          </div>
+
+          <Image
+            src={`https://s3-sgn10.fptcloud.com/phygix-assets/nomion/static/tet-2025/${randomNumber}k.webp`}
+            alt="tet-2025"
+            width="auto"
+            height="auto"
+          />
+        </div>
+      </div>
+      {/* <div className="absolute bottom-0 left-0 w-full h-full bg-black"></div> */}
+    </SectionFullScreen>
+  );
+}
+
+export default LuckyMoneySection2;