AW-131-pdf

add pdf viewer to home page

package.json

@@ -14,12 +14,16 @@
     "build:prod": "tsc && vite build --mode production"
   },
   "dependencies": {
+    "@emotion/react": "^11.11.4",
+    "@emotion/styled": "^11.11.5",
     "@lottiefiles/dotlottie-react": "^0.6.4",
+    "@mui/material": "^5.15.21",
     "@reduxjs/toolkit": "^1.9.5",
     "@smakss/react-scroll-direction": "^4.0.4",
     "@stripe/react-stripe-js": "^2.3.1",
     "@stripe/stripe-js": "^2.1.9",
     "apng-js": "^1.1.1",
+    "core-js": "^3.37.1",
     "framer-motion": "^11.0.8",
     "html-react-parser": "^3.0.16",
     "i18next": "^22.5.0",
@@ -31,6 +35,7 @@
     "react-dom": "^18.2.0",
     "react-ga4": "^2.1.0",
     "react-i18next": "^12.3.1",
+    "react-pdf": "^9.1.0",
     "react-player": "^2.16.0",
     "react-redux": "^8.0.5",
     "react-router-dom": "^6.11.2",
@@ -40,6 +45,7 @@
     "unique-names-generator": "^4.7.1"
   },
   "devDependencies": {
+    "@types/core-js": "^2.5.8",
     "@types/node": "^20.5.1",
     "@types/react": "^18.2.6",
     "@types/react-dom": "^18.2.4",

src/api/api.ts

@@ -30,6 +30,7 @@ import {
   Paywall,
   Payment,
   UserVideos,
+  UserPDF,
 } from './resources'
 
 const api = {
@@ -83,6 +84,8 @@ const api = {
   makePayment: createMethod<Payment.PayloadPost, Payment.ResponsePost>(Payment.createRequestPost),
   // User videos
   getUserVideos: createMethod<UserVideos.PayloadGet, UserVideos.ResponseGet>(UserVideos.createRequest),
+  // User PDF
+  getUserPDFCompatibility: createMethod<UserPDF.PayloadGet, UserPDF.ResponseGet>(UserPDF.createRequest),
 }
 
 export type ApiContextValue = typeof api

src/api/resources/UserPDF.ts

@@ -0,0 +1,21 @@
+import routes from "@/routes";
+import { getAuthHeaders } from "../utils";
+
+interface Payload {
+    token: string;
+}
+
+export type PayloadGet = Payload;
+
+export interface IUserPDFCompatibility {
+    url: string
+}
+
+type ResponseGetSuccess = IUserPDFCompatibility;
+
+export type ResponseGet = ResponseGetSuccess;
+
+export const createRequest = ({ token }: PayloadGet): Request => {
+    const url = new URL(routes.server.getUserPDFCompatibility());
+    return new Request(url, { method: "GET", headers: getAuthHeaders(token) });
+};

src/api/resources/index.ts

@@ -28,3 +28,4 @@ export * as Palmistry from "./Palmistry";
 export * as Paywall from "./Paywall";
 export * as Payment from "./Payment";
 export * as UserVideos from "./UserVideos";
+export * as UserPDF from "./UserPDF";

src/components/FullScreenModal/index.tsx

@@ -2,13 +2,15 @@ import styles from "./styles.module.css";
 
 interface IFullScreenModalProps {
   className?: string;
+  classNameContent?: string;
   style?: React.CSSProperties;
   children: JSX.Element;
   isOpen: boolean;
 }
 
 function FullScreenModal({
-  className,
+  className = "",
+  classNameContent = "",
   children,
   style,
   isOpen,
@@ -16,11 +18,11 @@ function FullScreenModal({
   return (
     <div
       style={{ ...style }}
-      className={`${styles["modal"]} ${className || ""} ${
-        isOpen ? styles.open : ""
-      }`}
+      className={`${styles["modal"]} ${className} ${isOpen ? styles.open : ""}`}
     >
-      <div className={styles["modal__content"]}>{children}</div>
+      <div className={`${styles["modal__content"]} ${classNameContent}`}>
+        {children}
+      </div>
     </div>
   );
 }

src/components/FullScreenModal/styles.module.css

@@ -15,12 +15,14 @@
   will-change: opacity;
   animation: disappearance 3s ease;
   animation-fill-mode: forwards;
+  pointer-events: none;
 }
 
 .open {
   opacity: 1;
   animation: appearance 3s ease;
   animation-fill-mode: forwards;
+  pointer-events: auto;
 }
 
 .modal__content {

src/components/HomePage/index.tsx

@@ -2,7 +2,7 @@ import { useNavigate } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import routes from "@/routes";
 import styles from "./styles.module.css";
-import { useApi, useApiCall } from "@/api";
+import { UserPDF, useApi, useApiCall } from "@/api";
 import { Asset } from "@/api/resources/Assets";
 import { useCallback, useEffect, useRef, useState } from "react";
 import BlurringSubstrate from "../BlurringSubstrate";
@@ -27,6 +27,10 @@ import TextWithFinger from "../TextWithFinger";
 //   IPredictionMoon,
 // } from "../PredictionMoonsSlider";
 import { predictionMoonsPeriods } from "@/data";
+import FullScreenModal from "../FullScreenModal";
+import { useDynamicSize } from "@/hooks/useDynamicSize";
+import PDFViewer from "../PDFViewer";
+import BackButton from "../pages/ABDesign/v1/ui/BackButton";
 // import WallpapersZodiacSign from "../WallpapersZodiacSign";
 // import ThermalSlider from "../ThermalSlider";
 // import MoonPhaseTracker from "../MoonPhaseTracker";
@@ -38,7 +42,6 @@ const buttonTextFormatter = (text: string): JSX.Element => {
   return (
     <>
       <strong>{sentences[0]}</strong>
-      <br />
       <span style={{ fontSize: "12px" }}>{sentences[1]}</span>
     </>
   );
@@ -56,7 +59,7 @@ function HomePage(): JSX.Element {
   const zodiacSign = getZodiacSignByDate(birthdate);
   const [asset, setAsset] = useState<Asset>();
   const [moonsAssets, setMoonsAssets] = useState<Asset[]>([]);
-  moonsAssets
+  moonsAssets;
   const api = useApi();
 
   const homeConfig = useSelector(selectors.selectHome);
@@ -64,15 +67,17 @@ function HomePage(): JSX.Element {
   const onboardingConfigHome = useSelector(selectors.selectOnboardingHome);
 
   const compatibilities = useSelector(selectors.selectCompatibilities);
-  compatibilities
+  compatibilities;
 
   const user = useSelector(selectors.selectUser);
-  user
+  user;
 
   const [isShowOnboardingHome, setIsShowOnboardingHome] = useState(
     !onboardingConfigHome?.isShown
   );
 
+  const [isShowPDF, setIsShowPDF] = useState(false);
+
   useEffect(() => {
     dispatch(
       actions.onboardingConfig.update({
@@ -83,6 +88,10 @@ function HomePage(): JSX.Element {
     );
   }, [dispatch]);
 
+  const handleCompatibilityPDF = () => {
+    setIsShowPDF(true);
+  };
+
   const handleCompatibility = () => {
     dispatch(
       actions.siteConfig.update({
@@ -123,6 +132,17 @@ function HomePage(): JSX.Element {
     // isPending
   } = useApiCall<Asset[]>(assetsData);
 
+  const getUserPDFCompatibility = useCallback(async () => {
+    const pdf = await api.getUserPDFCompatibility({
+      token,
+    });
+    return pdf;
+  }, [api, token]);
+
+  const { data: PDFCompatibility } = useApiCall<UserPDF.ResponseGet>(
+    getUserPDFCompatibility
+  );
+
   useEffect(() => {
     if (assets) {
       setAsset(assets[getRandomArbitrary(0, assets?.length || 0)]);
@@ -171,6 +191,14 @@ function HomePage(): JSX.Element {
     saveFile(asset.url.replace("http://", "https://"), buildFilename("1"));
   };
 
+  const downloadPDF = () => {
+    if (!PDFCompatibility?.url) return;
+    saveFile(
+      PDFCompatibility?.url.replace("http://", "https://"),
+      buildFilename("pdf-compatibility", "pdf")
+    );
+  };
+
   // const handleBestiesHoroscope = (item: Horoscope) => {
   //   const { name, birthDate } = item;
   //   navigate(
@@ -202,13 +230,37 @@ function HomePage(): JSX.Element {
   //   navigate(`${routes.client.nameHoroscopeResult()}?period=${item.period}`);
   // };
 
+  const { width, elementRef: pageRef } = useDynamicSize({});
+
   return (
     <section
       className={`${styles.page} page`}
       style={{
         backgroundImage: `url(${asset?.url.replace("http://", "https://")})`,
       }}
+      ref={pageRef}
     >
+      <FullScreenModal
+        isOpen={isShowPDF}
+        className={styles["pdf-modal"]}
+        classNameContent={styles["pdf-modal__content"]}
+      >
+        <>
+          <div className={styles["pdf-buttons"]}>
+            <BackButton
+              onClick={() => setIsShowPDF(false)}
+              className={styles["close-pdf-button"]}
+            />
+            <div className={styles["pdf-save"]} onClick={downloadPDF} />
+          </div>
+          <PDFViewer
+            width={width}
+            file={PDFCompatibility?.url}
+            className={styles["pdf-document"]}
+          />
+        </>
+      </FullScreenModal>
+
       {/* <div
         className={styles.background}
         style={{
@@ -256,6 +308,15 @@ function HomePage(): JSX.Element {
               crossClickHandler={() => setIsShowOnboardingHome(false)}
             />
           </Onboarding>
+          {!!PDFCompatibility?.url?.length && (
+            <BlurringSubstrate
+              style={{ color: "#fff" }}
+              className={styles["content__buttons-item"]}
+              clickHandler={handleCompatibilityPDF}
+            >
+              <strong>Your Personalized READING</strong>
+            </BlurringSubstrate>
+          )}
           <BlurringSubstrate
             style={{ color: "#fa71ea" }}
             className={styles["content__buttons-item"]}

src/components/HomePage/styles.module.css

@@ -103,7 +103,11 @@
 }
 
 .content__buttons-item {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-evenly;
   width: 100% !important;
+  min-height: 52px;
   border: solid #7b7570 2px;
   border-radius: 25px !important;
   text-align: center;
@@ -190,6 +194,72 @@
   width: 100%;
 }
 
+.pdf-modal {
+  overflow-y: scroll;
+  max-width: 560px;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.pdf-modal__content {
+  height: fit-content;
+  min-height: 100%;
+}
+
+.pdf-document {
+  margin-top: -39px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  min-height: 100%;
+}
+
+.pdf-buttons {
+  position: sticky;
+  top: 12px;
+  left: 0;
+  z-index: 33;
+  width: 100%;
+  height: 39px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px;
+}
+
+.close-pdf-button {
+  position: sticky;
+  padding: 6px;
+  width: 39px;
+  height: 39px;
+  background-color: #696969;
+  border-radius: 50%;
+  border: solid 1px #fff;
+}
+
+.pdf-save {
+  width: 39px;
+  height: 39px;
+  background-size: 70%;
+  background-image: url("/Save-icon.webp");
+  background-repeat: no-repeat;
+  background-position: center center;
+  -webkit-backdrop-filter: blur(14px);
+  background-color: #696969;
+  backdrop-filter: blur(14px);
+  border-radius: 100%;
+  cursor: pointer;
+}
+
+.close-pdf-button > svg {
+  margin-left: -3px;
+}
+
+.close-pdf-button > svg > path {
+  fill: #fff;
+}
+
 @keyframes pulse {
   0% {
     transform: scale(0.9);

src/components/PDFViewer/index.tsx

@@ -0,0 +1,88 @@
+import styles from "./styles.module.scss";
+import { useRef, useState } from "react";
+import { Document, DocumentProps, Page } from "react-pdf";
+import Loader, { LoaderColor } from "../Loader";
+import { File } from "node_modules/react-pdf/dist/esm/shared/types";
+import { Pagination } from "@mui/material";
+
+interface IPDFViewerProps {
+  width?: number;
+  file?: File;
+}
+
+const pagesOfPaginationPageLength = 1;
+
+function PDFViewer(props: IPDFViewerProps & DocumentProps = {}) {
+  const { width = 496, file, className = "" } = props;
+  const pageRenderWidth = 700;
+  const [numPages, setNumPages] = useState<number>(0);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [containerHeight, setContainerHeight] = useState<number>(0);
+  const [isLoadingDocument, setIsLoadingDocument] = useState<boolean>(true);
+  const [paginationPage, setPaginationPage] = useState(1);
+  const handleChange = (_event: React.ChangeEvent<unknown>, value: number) => {
+    setPaginationPage(value);
+  };
+
+  function onDocumentLoadSuccess({ numPages }: { numPages: number }): void {
+    setNumPages(numPages);
+    setIsLoadingDocument(false);
+  }
+
+  return (
+    <>
+      <div
+        ref={containerRef}
+        style={{
+          marginTop: `-${
+            ((containerHeight || 0) * (1 - width / pageRenderWidth)) / 2 + 39
+          }px`,
+          marginBottom: `-${
+            ((containerHeight || 0) * (1 - width / pageRenderWidth)) / 2
+          }px`,
+          transform: `scale(${width / (pageRenderWidth || 1)})`,
+          minHeight: "100dvh",
+        }}
+      >
+        {isLoadingDocument && (
+          <Loader
+            color={LoaderColor.White}
+            className={styles["document-loader"]}
+          />
+        )}
+        <Document
+          loading={<></>}
+          file={file}
+          onLoadSuccess={onDocumentLoadSuccess}
+          className={className}
+        >
+          {Array.from({ length: pagesOfPaginationPageLength }, (_, i) => (
+            <Page
+              loading={<></>}
+              key={i}
+              pageNumber={
+                i + pagesOfPaginationPageLength * (paginationPage - 1) + 1
+              }
+              width={pageRenderWidth}
+              className={styles["pdf-page"]}
+              onLoadSuccess={() => {
+                setContainerHeight(containerRef.current?.offsetHeight || 0);
+              }}
+            />
+          ))}
+        </Document>
+      </div>
+      {!isLoadingDocument && (
+        <Pagination
+          classes={{ ul: styles["pagination-list"] }}
+          className={styles.pagination}
+          count={Math.ceil(numPages / pagesOfPaginationPageLength)}
+          size="large"
+          onChange={handleChange}
+        />
+      )}
+    </>
+  );
+}
+
+export default PDFViewer;

src/components/PDFViewer/styles.module.scss

@@ -0,0 +1,34 @@
+.pdf-page {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  height: auto;
+}
+
+.document-loader {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 56;
+}
+
+.pdf-page__loader {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 56;
+}
+
+.pagination {
+  position: sticky;
+  bottom: 0;
+  background-color: #fff;
+}
+
+.pagination-list {
+  justify-content: center;
+}

src/components/WallpaperPage/utils.ts

@@ -12,7 +12,7 @@ export const saveFile = (url: string, filename: string): void => {
     })
 }
 
-export const buildFilename = (prefix: string): string => {
+export const buildFilename = (prefix: string, fileType = 'jpg'): string => {
   const date = new Date().toISOString().slice(0, 10)
-  return `${prefix}-${date}.jpg`
+  return `${prefix}-${date}.${fileType}`
 }

src/components/pages/ABDesign/v1/ui/BackButton/index.tsx

@@ -4,9 +4,11 @@ interface IBackButtonProps {
   onClick?: () => void;
 }
 
-function BackButton(props: IBackButtonProps) {
+function BackButton(
+  props: IBackButtonProps & React.HTMLAttributes<HTMLButtonElement>
+) {
   return (
-    <button className={styles.button} onClick={props.onClick}>
+    <button className={styles.button} onClick={props.onClick} {...props}>
       <svg
         width="11"
         height="20"

src/index.css

@@ -1,5 +1,7 @@
 @import "slick-carousel/slick/slick.css";
 @import "slick-carousel/slick/slick-theme.css";
+@import 'react-pdf/dist/Page/AnnotationLayer.css';
+@import 'react-pdf/dist/Page/TextLayer.css';
 
 * {
   box-sizing: border-box;

src/init.tsx

@@ -11,6 +11,10 @@ import { LegalContext, buildLegal } from "./legal";
 import { getClientLocale, buildResources, fallbackLng } from "./locales";
 import App from "./components/App";
 import metricService from "./services/metric/metricService";
+import "core-js/actual";
+import { pdfjs } from "react-pdf";
+
+pdfjs.GlobalWorkerOptions.workerSrc = `https://unpkg.com/pdfjs-dist@${pdfjs.version}/legacy/build/pdf.worker.min.mjs`;
 
 const environments = import.meta.env;
 

src/routes.ts

@@ -278,6 +278,10 @@ const routes = {
     getUserVideos: () =>
       [dApiHost, "users", "videos", "combined"].join("/"),
 
+    // User videos
+    getUserPDFCompatibility: () =>
+      [dApiHost, "users", "pdf", "compatibility"].join("/"),
+
   },
   openAi: {
     createThread: () => [openAIHost, openAiPrefix, "threads"].join("/"),