ui-landing-page 6.1.0

package/src/components/LandingPage/hooks/audio/useMediaContext.tsx

@@ -0,0 +1,126 @@
+import { createContext, useContext, useState } from "react";
+
+interface MediaInfo {
+  id: string;
+  type: "audio" | "video";
+  element: HTMLAudioElement | HTMLVideoElement;
+  status?: "playing" | "paused";
+}
+
+interface MediaContextType {
+  currentPlayingId: string | null;
+  registerMedia: (info: MediaInfo) => void;
+  unregisterMedia: (id: string) => void;
+  play: (id: string) => void;
+  pause: (id: string) => void;
+  getMediaStatus: (id: string) => "playing" | "paused";
+  resetTime: (id: string) => void;
+  setVolume: (id: string, volume: number) => void;
+}
+
+const MediaContext = createContext<MediaContextType>({
+  currentPlayingId: null,
+  registerMedia: () => {},
+  unregisterMedia: () => {},
+  play: () => {},
+  pause: () => {},
+  getMediaStatus: () => "paused",
+  resetTime: () => {},
+  setVolume: () => {},
+});
+
+export const MediaProvider = ({ children }: { children: React.ReactNode }) => {
+  const [currentPlayingId, setCurrentPlayingId] = useState<string | null>(null);
+  const [mediaElements, setMediaElements] = useState<Map<string, MediaInfo>>(
+    new Map()
+  );
+
+  const registerMedia = (info: MediaInfo) => {
+    setMediaElements((prev) => {
+      const newMap = new Map(prev);
+      newMap.set(info.id, info);
+      return newMap;
+    });
+  };
+
+  const unregisterMedia = (id: string) => {
+    setMediaElements((prev) => {
+      const newMap = new Map(prev);
+      newMap.delete(id);
+      return newMap;
+    });
+  };
+
+  const play = (id: string) => {
+    mediaElements.forEach((media) => {
+      if (media.id !== id && media.element) {
+        media.element.pause();
+        media.status = "paused";
+      }
+    });
+    setCurrentPlayingId(id);
+    const mediaInfo = mediaElements.get(id);
+    if (mediaInfo) {
+      mediaInfo.status = "playing";
+      mediaInfo.element?.play();
+    }
+  };
+
+  const pause = (id: string) => {
+    if (currentPlayingId === id) {
+      const mediaInfo = mediaElements.get(id);
+      if (mediaInfo) {
+        mediaInfo.element?.pause();
+        mediaInfo.status = "paused";
+      }
+      setCurrentPlayingId(null);
+    }
+  };
+
+  const getMediaStatus = (id: string) => {
+    const mediaInfo = mediaElements.get(id);
+    return mediaInfo?.status || "paused";
+  };
+
+  const resetTime = (id: string) => {
+    const mediaInfo = mediaElements.get(id);
+    if (mediaInfo) {
+      mediaInfo.element.currentTime = 0;
+    }
+  };
+
+  const setVolume = (id: string, volume = 50) => {
+    const mediaInfo = mediaElements.get(id);
+    if (mediaInfo) {
+      mediaInfo.element.volume = volume;
+    }
+  };
+
+  return (
+    <MediaContext.Provider
+      value={{
+        currentPlayingId,
+        registerMedia,
+        unregisterMedia,
+        play,
+        pause,
+        getMediaStatus,
+        resetTime,
+        setVolume,
+      }}
+    >
+      {children}
+    </MediaContext.Provider>
+  );
+};
+
+export const useMedia = () => {
+  const context = useContext(MediaContext);
+  if (!context) {
+    throw new Error("useMedia must be used within a MediaProvider");
+  }
+  return context;
+};
+
+// For backward compatibility
+export const useAudio = useMedia;

package/src/components/LandingPage/hooks/index.tsx

@@ -0,0 +1,5 @@
+export * from "./useBookMenuContext";
+export * from "./useFullScreenContext";
+export * from "./useImageOrientation";
+export * from "./usePGLModalContext";
+export * from "./audio";

package/src/components/LandingPage/hooks/useBookMenuContext.tsx

@@ -0,0 +1,43 @@
+import { createContext, useContext, useState } from "react";
+
+export interface Chapter {
+  id: string;
+  chapterTitle: string | undefined;
+  pageNumber: number;
+}
+
+const BookMenuContext = createContext<{
+  menu: Chapter[] | null;
+  setMenu: React.Dispatch<React.SetStateAction<Chapter[] | null>>;
+  firstPage: number;
+  setFirstPage: React.Dispatch<React.SetStateAction<number>>;
+} | null>(null);
+
+export const BookMenuProvider = ({ children }: any) => {
+  const [menu, setMenu] = useState<Chapter[] | null>(null);
+  const [firstPage, setFirstPage] = useState<number>(0);
+  return (
+    <BookMenuContext.Provider
+      value={{ menu, setMenu, firstPage, setFirstPage }}>
+      {children}
+    </BookMenuContext.Provider>
+  );
+};
+
+export const useMenuContext = () => {
+  const value = useContext(BookMenuContext);
+  if (!value) return null;
+  return {
+    menu: value.menu,
+    setMenu: value.setMenu,
+  };
+};
+
+export const useFirstPageContext = () => {
+  const value = useContext(BookMenuContext);
+  if (!value) return null;
+  return {
+    setFirstPage: value.setFirstPage,
+    firstPage: value.firstPage,
+  };
+};

package/src/components/LandingPage/hooks/useFullScreenContext.tsx

@@ -0,0 +1,86 @@
+import clsx from "clsx";
+import {
+  createContext,
+  CSSProperties,
+  useContext,
+  useEffect,
+  useState,
+} from "react";
+import { MediaProvider } from "./audio";
+
+const FullScreenContext = createContext<any>(undefined);
+
+const handleClickMenu = (target: string) => {
+  const container = document.getElementById("snap-container");
+  const targetEle = document.getElementById(target)!;
+  const top = targetEle?.offsetTop;
+  if (container) {
+    container.scrollTo({
+      top,
+      behavior: "smooth",
+    });
+  }
+  // e.stopPropagation();
+};
+
+export function FullScreen({
+  children,
+  currentSectionId,
+  style,
+  isSnapScroll = true,
+}: any & CSSProperties) {
+  const [currentSection, setCurrentSection] = useState<string>("");
+  const [currentSize, setCurrentSize] = useState<any>({
+    height: 0,
+    width: 0,
+  });
+
+  console.log("isSnapScroll", isSnapScroll);
+  useEffect(() => {
+    handleClickMenu(currentSectionId);
+  }, [currentSectionId]);
+
+  const [isSwipeHomePage, setIsSwipeHomePage] = useState<boolean>(false);
+  return (
+    <FullScreenContext.Provider
+      value={{
+        currentSection,
+        setCurrentSection,
+        currentSize,
+        setCurrentSize,
+        isSwipeHomePage,
+        setIsSwipeHomePage,
+      }}
+    >
+      <MediaProvider>
+        <div
+          id="snap-container"
+          className={clsx(
+            "info relative m-auto h-full w-full snap-both snap-mandatory flex-col items-center justify-center overflow-x-hidden",
+            !isSnapScroll && "!snap-none"
+          )}
+          style={style}
+        >
+          {children}
+        </div>
+      </MediaProvider>
+    </FullScreenContext.Provider>
+  );
+}
+
+export const useSwipeHomePage = () => {
+  const { isSwipeHomePage, setIsSwipeHomePage } = useContext(FullScreenContext);
+  return { isSwipeHomePage, setIsSwipeHomePage };
+};
+
+export function useFullScreenContext(section?: string) {
+  const { currentSection, setCurrentSection, currentSize, setCurrentSize } =
+    useContext(FullScreenContext);
+  return {
+    currentSection,
+    setCurrentSection,
+    currentSize,
+    setCurrentSize,
+    isInViewport: currentSection === section,
+  };
+}

package/src/components/LandingPage/hooks/useImageOrientation.tsx

@@ -0,0 +1,24 @@
+import { useEffect, useState } from "react";
+
+type Orientation = "vertical" | "horizontal";
+const useImageOrientation = (src: string) => {
+  const [orientation, setOrientation] = useState<Orientation | null>(null);
+  const [isAlreadyLoad, setIsAlreadyLoad] = useState(false);
+
+  useEffect(() => {
+    if (!src) {
+      setIsAlreadyLoad(true);
+      return;
+    }
+    const img = new Image();
+    img.onload = () => {
+      setIsAlreadyLoad(true);
+      setOrientation(img.width > img.height ? "horizontal" : "vertical");
+    };
+    img.src = src;
+  }, [src]);
+
+  return { orientation, isAlreadyLoad };
+};
+
+export default useImageOrientation;

package/src/components/LandingPage/hooks/usePGLModalContext.tsx

@@ -0,0 +1,46 @@
+import { createContext, useState, useContext } from "react";
+
+const PGLModalContext = createContext<{
+  isCertOpen: boolean;
+  isMilestoneOpen: boolean;
+  toggleCertModal: () => void;
+  toggleMilestoneModal: () => void;
+}>({
+  isCertOpen: false,
+  isMilestoneOpen: false,
+  toggleCertModal: () => {},
+  toggleMilestoneModal: () => {},
+});
+
+export function PGLModalProvider({ children }: { children: React.ReactNode }) {
+  const [isCertOpen, setIsCertOpen] = useState(false);
+  const [isMilestoneOpen, setIsMilestoneOpen] = useState(false);
+
+  const toggleCertModal = () => {
+    setIsCertOpen(!isCertOpen);
+  };
+  const toggleMilestoneModal = () => {
+    setIsMilestoneOpen(!isMilestoneOpen);
+  };
+
+  return (
+    <PGLModalContext.Provider
+      value={{
+        isCertOpen,
+        isMilestoneOpen,
+        toggleCertModal,
+        toggleMilestoneModal,
+      }}
+    >
+      {children}
+    </PGLModalContext.Provider>
+  );
+}
+
+export const usePGLModal = () => {
+  const context = useContext(PGLModalContext);
+  if (!context) {
+    throw new Error("usePGLModal must be used within a PGLModalProvider");
+  }
+  return context;
+};

package/src/components/LandingPage/models/base-section.ts

@@ -0,0 +1,16 @@
+import type { ThemeConfig } from "./theme";
+
+export interface BaseSectionProps {
+  id?: string;
+  sectionData?: any;
+  hasAnimation?: boolean;
+  pageIndex?: number;
+  configTheme?: ThemeConfig;
+  themes?: {
+    theme_color?: string;
+    theme_layout?: string;
+  };
+  hardCodeOption?: any;
+  type?: string;
+  translations?: any;
+}

package/src/components/LandingPage/models/general.ts

@@ -0,0 +1,67 @@
+export enum MediaType {
+  Image = "image",
+  Video = "video",
+  ThreeD = "3D",
+  Audio = "audio",
+}
+
+export interface Media {
+  type: MediaType;
+  url: string;
+  thumbnail_url?: string;
+}
+
+export enum Languages {
+  En = "en",
+  Vi = "vi",
+}
+
+export type Translation = Record<Languages, any>;
+
+export enum PageSteps {
+  Splash = "splash",
+  Video = "video",
+  Normal = "normal",
+}
+export enum OS {
+  Android = "Android",
+  iOS = "iOS",
+}
+
+export enum ProfileSocialType {
+  Facebook = "facebook",
+  Telegram = "telegram",
+  Instagram = "instagram",
+  Twitter = "twitter",
+  Youtube = "youtube",
+  Tiktok = "tiktok",
+  Website = "website",
+  Threads = "threads",
+  Linkedin = "linkedin",
+  Phone = "phone",
+}
+
+export enum ContactTypeEnum {
+  Phone = 0,
+  Email = 1,
+  Address = 2,
+  Website = 3,
+}
+
+export enum ContactValueTypeEnum {
+  Work = 0,
+  Home = 1,
+  Other = 2,
+  None = 3,
+}
+
+export interface ContactType {
+  contact_type: ContactTypeEnum;
+  type: ContactValueTypeEnum;
+  value: any;
+}
+
+export interface LexicalType {
+  serializedState: string;
+  htmlContent: string;
+}

package/src/components/LandingPage/models/theme.ts

@@ -0,0 +1,8 @@
+export interface ThemeConfig {
+  primary_font: string;
+  font_family: string;
+  background_color: string;
+  primary_color: string;
+  secondary_color: string;
+  scroll_snap?: boolean;
+}

package/src/components/LandingPage/utils/helper.ts

@@ -0,0 +1,225 @@
+import { OS } from "../models/general";
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+import { FieldConfig, ThemeConfig } from "../common/ui-kit/types/base";
+import { CSSProperties } from "react";
+import html2canvas from "html2canvas-pro";
+
+export const shortenString = (text: string) => {
+  const prefix = text.slice(0, 4 + 2);
+  const suffix = text.slice(-4);
+  return prefix + "..." + suffix;
+};
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+
+export const containWhiteSpace = (string: string) => {
+  return / /.test(string);
+};
+
+export const detectMobileOperatingSystem = () => {
+  const userAgent = navigator.userAgent;
+
+  if (/android/i.test(userAgent)) {
+    return OS.Android;
+  } else if (/iPad|iPhone|iPod/i.test(userAgent)) {
+    return OS.iOS;
+  } else {
+    return "Unknown";
+  }
+};
+export const convertHexToRGBA = (hex: string, alpha: number) => {
+  const r = parseInt(hex?.slice(1, 3), 16),
+    g = parseInt(hex?.slice(3, 5), 16),
+    b = parseInt(hex?.slice(5, 7), 16);
+
+  if (alpha) {
+    return "rgba(" + r + ", " + g + ", " + b + ", " + alpha + ")";
+  } else {
+    return "rgb(" + r + ", " + g + ", " + b + ")";
+  }
+};
+
+export const splitByIndex = (str: string, index: number) => {
+  const result = [str.slice(0, index), str.slice(index)];
+
+  return result;
+};
+
+export const getPrimaryStyling = (
+  themeConfig: ThemeConfig,
+  fieldConfig: FieldConfig,
+  isTitle = false
+): CSSProperties => {
+  const styles = {
+    fontFamily:
+      fieldConfig?.font_family ||
+      (isTitle ? themeConfig?.primary_font : themeConfig?.font_family),
+    color:
+      fieldConfig?.text_color ||
+      (isTitle ? themeConfig?.primary_color : themeConfig?.secondary_color),
+  };
+  return styles;
+};
+
+export function checkEmptyArray<T>(arr: T[]): boolean {
+  return arr?.length > 0;
+}
+
+export const getKeysInDescription = (description: string): string[] => {
+  if (description === undefined || "") return [];
+  const regex = /\{([^}]+)\}/g;
+  const matches = description?.match(regex);
+  let keys: string[] = [];
+  if (matches) {
+    const keysArrayAfterMatch = matches?.map((match) => match.slice(1, -1));
+    keys = keysArrayAfterMatch.filter((item, index, array) => {
+      return array.indexOf(item) === index;
+    });
+  }
+  return keys;
+};
+
+export const replaceKeysInDescription = (
+  description: string,
+  extraInfo: any
+) => {
+  const keys = getKeysInDescription(description);
+  if (keys.length === 0) return description;
+  keys.forEach((key) => {
+    description = description?.replaceAll(`{${key}}`, extraInfo[key] ?? "");
+  });
+  return description;
+};
+
+export const handleDownloadImageByHtml2Canvas = async (
+  giftRef: React.RefObject<HTMLDivElement>,
+  fileName?: string,
+  onSuccess?: () => void,
+  onError?: () => void
+) => {
+  if (!giftRef.current) return;
+
+  try {
+    const canvas = await html2canvas(giftRef.current, {
+      allowTaint: true,
+      useCORS: true,
+      logging: true,
+    });
+    const image = canvas.toDataURL("image/png");
+
+    const link = document.createElement("a");
+    link.href = image;
+    link.download = fileName ? `${fileName}.png` : "undefined.png";
+    link.click();
+    onSuccess?.();
+  } catch (error) {
+    onError?.();
+    console.error("Failed to save gift:", error);
+  }
+};
+
+export const generateCanvasFromHTMLElement = async (
+  htmlElement: HTMLElement,
+) => {
+  if (!htmlElement) return null;
+
+  try {
+    const canvas = await html2canvas(htmlElement, {
+      allowTaint: true,
+      useCORS: true,
+      logging: true,
+    });
+    
+    return canvas;
+  } catch (error) {
+    console.error(error);
+    return null;
+  }
+};
+
+export const canvasToImageFile = async (
+  canvas: HTMLCanvasElement,
+  fileName: string = 'canvas-image',
+  fileType: string = 'image/png'
+): Promise<File | null> => {
+  try {
+    // Convert canvas to blob
+    const blob = await new Promise<Blob>((resolve) => {
+      canvas.toBlob((blob) => {
+        resolve(blob as Blob);
+      }, fileType);
+    });
+
+    // Create file from blob
+    const file = new File([blob], `${fileName}.${fileType.split('/')[1]}`, {
+      type: fileType,
+    });
+
+    return file;
+  } catch (error) {
+    console.error('Failed to convert canvas to file:', error);
+    return null;
+  }
+};
+
+export const downloadImage = async (image: string, fileName: string) => {
+  try {
+    // Fetch the image data
+    const response = await fetch(image);
+    const blob = await response.blob();
+    
+    // Create object URL from blob
+    const url = window.URL.createObjectURL(blob);
+    
+    // Create download link
+    const link = document.createElement("a");
+    link.href = url;
+    link.download = fileName ? `${fileName}.png` : "undefined.png";
+    
+    // Append to body, click, and cleanup
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    
+    // Revoke the object URL to free memory
+    window.URL.revokeObjectURL(url);
+
+  } catch (error) {
+    console.error('Error downloading image:', error);
+  }
+};
+
+export const openImageInNewTab = async (image: string) => {
+  try {
+    const link = document.createElement("a");
+    link.href = image;
+    link.target = "_blank";
+    link.click();
+
+  } catch (error) {
+    console.error('Error downloading image:', error);
+  }
+};
+
+export const generateRandomNumberFromWeights = (weights: any) => {
+  let total = 0;
+  for (const key in weights) {
+    total += (weights as any)[key];
+  }
+
+  // 2. Pick a random index in the total range
+  let random = Math.floor(Math.random() * total);
+
+  // 3. Walk through each key and subtract its weight
+  for (const key in weights) {
+    random -= (weights as any)[key];
+    if (random < 0) {
+      // 4. The running total is now negative, so we've found our random key
+      return Number(key);
+    }
+  }
+
+  return 0;
+};

package/src/constants/index.ts

@@ -0,0 +1 @@
+export * from "./templates/enum";