Merge branch 'develop' into 'AW-106-klaviyo-metric'

# Conflicts:
#   src/services/metric/metricService.ts

environments/.env.production

@@ -6,4 +6,4 @@ AURA_PREFIX=api/v1
 AURA_OPEN_AI_HOST=https://api.openai.com
 AURA_OPEN_AI_PREFIX=v1
 AURA_YANDEX_COUNTER_NUMBER=95799066
-AURA_PERSONAL_VIDEO_TIME_LIMIT=120
+AURA_PERSONAL_VIDEO_TIME_LIMIT=100

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": "8.0.2",
     "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/User.ts

@@ -173,6 +173,7 @@ export interface ICreateAuthorizePayload {
   partner?: Partial<Exclude<ICreateAuthorizeUser, "relationship_status">>;
   sign?: boolean;
   signDate?: string;
+  feature?: string;
 }
 
 export interface ICreateAuthorizeResponse {

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/DateTimePicker/utils.ts

@@ -25,7 +25,7 @@ export const getDaysInMonth = (year: number, month: number): number => {
 export const format = (hour: string, minute: string, period: string) => {
   const formattedHour = hour === '12' ? (period === 'AM' ? '00' : '12') : (period === 'PM' ? String(Number(hour) + 12) : hour)
   const formattedMinute = normalize(minute, 2)
-  return `${formattedHour}:${formattedMinute}`
+  return `${normalize(formattedHour, 2)}:${formattedMinute}`
 }
 
 export const parse = (value: string) => {

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 || ""} ${
+      className={`${styles["modal"]} ${className} ${isOpen ? styles.open : ""}`}
-        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/Modal/index.tsx

@@ -9,6 +9,7 @@ interface ModalProps {
   containerClassName?: string;
   type?: "hidden" | "normal";
   onClose?: () => void;
+  removeNoScroll?: boolean;
 }
 
 function Modal({
@@ -19,6 +20,7 @@ function Modal({
   containerClassName = "",
   type = "normal",
   onClose,
+  removeNoScroll = true
 }: ModalProps): JSX.Element {
   const handleClose = (event: React.MouseEvent) => {
     if (event.target !== event.currentTarget) return;
@@ -27,6 +29,10 @@ function Modal({
   };
 
   useEffect(() => {
+    if (!removeNoScroll) {
+      return;
+    }
+
     if (open) {
       document.body.classList.add("no-scroll");
     }
@@ -34,7 +40,7 @@ function Modal({
     return () => {
       document.body.classList.remove("no-scroll");
     };
-  }, [open]);
+  }, [open, removeNoScroll]);
 
   if (!open && type === "normal") return <></>;
   return (

src/components/PDFViewer/index.tsx

@@ -0,0 +1,90 @@
+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 [numPages, setNumPages] = useState<number>(0);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [isLoadingDocument, setIsLoadingDocument] = useState<boolean>(true);
+  const [paginationPage, setPaginationPage] = useState(1);
+  const [isLoadingPage, setIsLoadingPage] = useState<boolean>(true);
+
+  const handleChange = (_event: React.ChangeEvent<unknown>, value: number) => {
+    setIsLoadingPage(true);
+    setPaginationPage(value);
+  };
+
+  function onDocumentLoadSuccess({ numPages }: { numPages: number }): void {
+    setNumPages(numPages);
+    setIsLoadingDocument(false);
+  }
+
+  return (
+    <>
+      <div
+        ref={containerRef}
+        style={{
+          minHeight: "calc(100dvh - 32px)",
+        }}
+      >
+        {isLoadingDocument && (
+          <Loader
+            color={LoaderColor.White}
+            className={styles["document-loader"]}
+          />
+        )}
+        <Document
+          loading={<></>}
+          file={file}
+          onLoadSuccess={onDocumentLoadSuccess}
+          className={className}
+        >
+          {Array.from({ length: pagesOfPaginationPageLength }, (_, i) => {
+            return (
+              <Page
+                loading={<></>}
+                key={i}
+                pageNumber={
+                  i + pagesOfPaginationPageLength * (paginationPage - 1) + 1
+                }
+                width={width}
+                className={styles["pdf-page"]}
+                onRenderSuccess={() => {
+                  setIsLoadingPage(false);
+                }}
+              >
+                {isLoadingPage && (
+                  <Loader
+                    className={styles["pdf-page__loader"]}
+                    color={LoaderColor.Black}
+                  />
+                )}
+              </Page>
+            );
+          })}
+        </Document>
+      </div>
+      {!isLoadingDocument && (
+        <Pagination
+          classes={{ ul: styles["pagination-list"] }}
+          className={styles.pagination}
+          count={Math.ceil(numPages / pagesOfPaginationPageLength)}
+          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: 0dvh;
+  background-color: #fff;
+}
+
+.pagination-list {
+  justify-content: center;
+}

src/components/PaymentModal/index.tsx

@@ -149,7 +149,10 @@ function PaymentModal({
               <>
                 <p className={styles["sub-plan-description"]}>
                   You will be charged only{" "}
-                  <b>${getPrice(_activeProduct)} for your 3-day trial.</b>
+                  <b>
+                    ${getPrice(_activeProduct)} for your{" "}
+                    {_activeProduct?.trialDuration}-day trial.
+                  </b>
                 </p>
                 <p className={styles["sub-plan-description"]}>
                   We`ll <b>email you a reminder</b> before your trial period

src/components/PaymentModalNew/PaymentCardModal/index.tsx

@@ -14,6 +14,7 @@ interface IPaymentCardModalProps {
   returnUrl?: string;
   isOpen: boolean;
   setIsOpen: Dispatch<SetStateAction<boolean>>;
+  removeNoScroll?: boolean;
 }
 
 export default function PaymentCardModal({
@@ -24,9 +25,10 @@ export default function PaymentCardModal({
   returnUrl,
   isOpen,
   setIsOpen,
+  removeNoScroll,
 }: IPaymentCardModalProps) {
   return (
-    <Modal open={isOpen} onClose={() => setIsOpen(false)}>
+    <Modal open={isOpen} onClose={() => setIsOpen(false)} removeNoScroll={removeNoScroll}>
       <Elements stripe={stripePromise} options={{clientSecret}}>
         <CheckoutForm
           confirmType={paymentType}

src/components/PaymentModalNew/index.tsx

@@ -128,15 +128,18 @@ export default function PaymentModalNew({
                   />
               </Elements>
 
+              <div style={!isOpenCardModal ? {visibility: 'hidden', position: 'absolute'} : {}}>
                   <PaymentCardModal
-                  isOpen={isOpenCardModal}
+                      isOpen={true}
                       setIsOpen={setIsOpenCardModal}
                       clientSecret={clientSecret}
                       stripePromise={stripePromise}
                       paymentType={paymentType}
                       paymentIntentId={paymentIntentId}
                       returnUrl={returnUrl}
+                      removeNoScroll={isOpenCardModal}
                   />
+              </div>
             {!isLoading &&
                 <>
                     <div className={styles.infoContainer}>

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/pages/AdditionalDiscount/index.tsx

@@ -3,9 +3,33 @@ import styles from "./styles.module.css";
 import MainButton from "@/components/MainButton";
 import { useNavigate } from "react-router-dom";
 import routes from "@/routes";
+import { usePaywall } from "@/hooks/paywall/usePaywall";
+import { EPlacementKeys } from "@/api/resources/Paywall";
+import { actions, selectors } from "@/store";
+import { useDispatch, useSelector } from "react-redux";
+import { useEffect } from "react";
 
 function AdditionalDiscount() {
   const navigate = useNavigate();
+  const dispatch = useDispatch();
+  const activeProduct = useSelector(selectors.selectActiveProduct);
+  const { products, getText } = usePaywall({
+    placementKey: EPlacementKeys["aura.placement.secret.discount"],
+  });
+
+  useEffect(() => {
+    if (!products.length) return;
+    const _activeProduct = products.find(
+      (p) => p.trialPrice === activeProduct?.trialPrice
+    );
+    if (!_activeProduct) {
+      dispatch(actions.payment.update({ activeProduct: products[0] }));
+    }
+    if (_activeProduct) {
+      dispatch(actions.payment.update({ activeProduct: _activeProduct }));
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [dispatch, products]);
 
   const handleNext = () => {
     navigate(routes.client.trialPaymentWithDiscountV1());
@@ -14,21 +38,25 @@ function AdditionalDiscount() {
   return (
     <section className={`${styles.page} page`}>
       <Title variant="h2" className={styles.title}>
-        Save 65% off!
+        Save {(getText("discount.1") as string).replace("-", "")} off!
       </Title>
       <img src="/friends.webp" alt="Friends" style={{ minHeight: "180px" }} />
       <div className={styles["discount-point"]}>
         <img src="/fire.webp" alt="Fire" />
         <p className={styles["discount-point-description"]}>
-          65% off on your personalized plan
+          {(getText("discount.1") as string).replace("-", "")} off on your
+          personalized plan
         </p>
       </div>
       <div className={styles["discount-point"]}>
         <img src="/present.webp" alt="Present" />
-        <p className={styles["discount-point-description"]}>7-day trial</p>
+        <p className={styles["discount-point-description"]}>
+          {activeProduct?.trialDuration}-day trial
+        </p>
       </div>
       <p className={styles["discount-description"]}>
-        <span>$9</span> instead of $19
+        <span>${(activeProduct?.price || 0) / 100}</span> instead of $
+        {Number(getText("full.price")) / 100}
       </p>
       <MainButton className={styles.button} onClick={handleNext}>
         Get secret discount!

src/components/pages/ABDesign/v1/pages/Gender/index.tsx

@@ -6,7 +6,7 @@ import routes from "@/routes";
 import { actions, selectors } from "@/store";
 import { useEffect, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
-import { useNavigate, useParams } from "react-router-dom";
+import { useLocation, useNavigate, useParams } from "react-router-dom";
 import BackgroundTopBlob from "../../ui/BackgroundTopBlob";
 import { useDynamicSize } from "@/hooks/useDynamicSize";
 import Header from "../../components/Header";
@@ -22,6 +22,7 @@ interface IGenderPageProps {
 function GenderPage({ productKey }: IGenderPageProps): JSX.Element {
   const dispatch = useDispatch();
   const navigate = useNavigate();
+  const location = useLocation();
   const { targetId } = useParams();
   const { width: pageWidth, elementRef: pageRef } = useDynamicSize({});
   const [selectedGender, setSelectedGender] = useState<Gender | null>(null);
@@ -30,9 +31,11 @@ function GenderPage({ productKey }: IGenderPageProps): JSX.Element {
   );
 
   useEffect(() => {
+    const feature = location.pathname.replace("/v1/gender/", "");
     const isShowTryApp = targetId === "i";
     dispatch(actions.userConfig.addIsShowTryApp(isShowTryApp));
-  }, [dispatch, targetId]);
+    dispatch(actions.userConfig.setFeature(feature.includes("/v1/gender") ? "" : feature));
+  }, [dispatch, location.pathname, targetId]);
 
   useEffect(() => {
     if (privacyPolicyChecked && selectedGender) {

src/components/pages/ABDesign/v1/pages/Satisfied/index.tsx

@@ -42,7 +42,7 @@ function Satisfied() {
     <section
       className={`${styles.page} page`}
       style={{
-        backgroundImage: `url(/satisfied-${satisfied}.png)`,
+        backgroundImage: `url(/satisfied-${satisfied}.webp)`,
       }}
     >
       <Header
@@ -50,12 +50,13 @@ function Satisfied() {
         isBackButtonVisible={false}
       />
       {satisfied === "yes" && (
-        <div
+        // <div
-          style={{
+        //   style={{
-            width: "100%",
+        //     width: "100%",
-            aspectRatio: "337 / 406",
+        //     aspectRatio: "337 / 406",
-          }}
+        //   }}
-        >
+        // >
+        <>
           {animationSun && (
             <DotLottieReact
               className={`${styles["lottie-animation"]} ym-hide-content`}
@@ -64,7 +65,8 @@ function Satisfied() {
               loop={false}
             />
           )}
-        </div>
+        </>
+        // </div>
       )}
       {satisfied === "no" && (
         <div

src/components/pages/ABDesign/v1/pages/Satisfied/styles.module.css

@@ -75,3 +75,8 @@
   background-color: #fff;
   color: #0f1323;
 }
+
+.lottie-animation {
+  width: 100%;
+  aspect-ratio: 337 / 406;
+}

src/components/pages/ABDesign/v1/pages/TrialChoice/index.tsx

@@ -15,11 +15,13 @@ import { EPlacementKeys } from "@/api/resources/Paywall";
 import { getRandomArbitrary } from "@/services/random-value";
 import Loader from "@/components/Loader";
 import metricService, { EGoals } from "@/services/metric/metricService";
+import PersonalVideo from "../TrialPayment/components/PersonalVideo";
 
 function TrialChoicePage() {
   const dispatch = useDispatch();
   const navigate = useNavigate();
   const selectedPrice = useSelector(selectors.selectSelectedPrice);
+  const activeProduct = useSelector(selectors.selectActiveProduct);
   const homeConfig = useSelector(selectors.selectHome);
   const email = useSelector(selectors.selectEmail);
   const [isDisabled, setIsDisabled] = useState(true);
@@ -30,6 +32,8 @@ function TrialChoicePage() {
     placementKey: EPlacementKeys["aura.placement.redesign.main"],
   });
 
+  const { videoUrl } = useSelector(selectors.selectPersonalVideo);
+
   useEffect(() => {
     const randomDelay = getRandomArbitrary(3000, 5000);
     const countUsersTimeOut = setTimeout(() => {
@@ -58,17 +62,36 @@ function TrialChoicePage() {
       ref={pageRef}
       style={{
         backgroundColor: gender === "male" ? "#C1E5FF" : "#f7ebff",
+        paddingTop: !videoUrl.length ? "15px" : "0px",
       }}
     >
+      {!videoUrl.length && (
+        <>
           <BackgroundTopBlob
             width={pageWidth}
             className={styles["background-top-blob"]}
             height={180}
           />
           <Header className={styles.header} />
+        </>
+      )}
+      {!!videoUrl.length && (
+        <PersonalVideo
+          gender={gender}
+          url={videoUrl}
+          classNameContainer={styles["personal-video"]}
+        />
+      )}
       {!isLoading && (
         <>
-          <p className={styles.text} style={{ marginTop: "60px" }}>
+          <p
+            className={styles.text}
+            style={{
+              marginTop: !videoUrl.length
+                ? "60px"
+                : "calc((100% + 84px) / 16* 9 + 16px)",
+            }}
+          >
             {getText("text.0", {
               replacementSelector: "b",
               color: "#1C38EA",
@@ -82,6 +105,13 @@ function TrialChoicePage() {
           <p className={`${styles.text} ${styles.bold} ${styles.blue}`}>
             {getText("text.2", {
               color: "#1C38EA",
+              replacement: {
+                target: "${trialDuration}",
+                replacement:
+                  activeProduct?.trialDuration?.toString() ||
+                  products[0]?.trialDuration?.toString() ||
+                  "3",
+              },
             })}
           </p>
           <div className={styles["price-container"]}>
@@ -119,6 +149,7 @@ function TrialChoicePage() {
             />
           </div>
           <p className={styles.email}>{email}</p>
+          {!isDisabled && (
             <QuestionnaireGreenButton
               className={styles.button}
               disabled={isDisabled}
@@ -128,6 +159,7 @@ function TrialChoicePage() {
                 color: "#1C38EA",
               })}
             </QuestionnaireGreenButton>
+          )}
           <p className={styles["auxiliary-text"]}>
             {getText("text.4", {
               color: "#1C38EA",

src/components/pages/ABDesign/v1/pages/TrialChoice/styles.module.css

@@ -5,7 +5,7 @@
   min-height: 100dvh;
   height: fit-content;
   background-color: #fff0f0;
-  padding: 15px 42px 60px;
+  padding: 0 42px 126px;
   width: 100%;
   max-width: 500px;
 }
@@ -133,10 +133,17 @@
   font-size: 18px;
   min-height: 0;
   height: 50px;
+  position: fixed;
+  bottom: calc(0dvh + 16px);
+  width: calc(100% - 84px);
 }
 
 .email {
   font-weight: 500;
+  word-break: break-all;
+  white-space: normal;
+  line-height: 1.3;
+  text-align: center;
 }
 
 .loader {
@@ -145,3 +152,11 @@
   left: 50%;
   transform: translate(-50%, -50%);
 }
+
+.personal-video {
+  position: fixed !important;
+  top: 0dvh;
+  z-index: 30;
+  margin-top: 0 !important;
+  border-radius: 0 !important;
+}

src/components/pages/ABDesign/v1/pages/TrialPayment/components/PaymentTable/index.tsx

@@ -4,11 +4,13 @@ import CustomButton from "../CustomButton";
 import GuardPayments from "../GuardPayments";
 import { useState } from "react";
 import FullScreenModal from "@/components/FullScreenModal";
-import { IPaywallProduct } from "@/api/resources/Paywall";
+import { EPlacementKeys, IPaywallProduct } from "@/api/resources/Paywall";
+import { usePaywall } from "@/hooks/paywall/usePaywall";
 
 interface IPaymentTableProps {
   product: IPaywallProduct;
   gender: string;
+  placementKey: EPlacementKeys;
   buttonClick: () => void;
 }
 
@@ -16,7 +18,15 @@ const getPrice = (product: IPaywallProduct) => {
   return (product.trialPrice || 0) / 100;
 };
 
-function PaymentTable({ gender, product, buttonClick }: IPaymentTableProps) {
+function PaymentTable({
+  gender,
+  product,
+  placementKey,
+  buttonClick,
+}: IPaymentTableProps) {
+  const { getText } = usePaywall({
+    placementKey,
+  });
   const [isOpenPrivacyModal, setIsOpenPrivacyModal] = useState<boolean>(false);
   const handleSubscriptionPolicyClick = (event: React.MouseEvent) => {
     event.preventDefault();
@@ -63,8 +73,10 @@ function PaymentTable({ gender, product, buttonClick }: IPaymentTableProps) {
           <div className={styles["table-element"]}>
             <p>Your cost per 2 weeks after trial</p>
             <div>
-              <span className={styles.discount}>$65</span>
+              <span className={styles.discount}>
-              <span>${product.trialPrice / 100}</span>
+                ${Number(getText("full.price")) / 100}
+              </span>
+              <span>${product.price / 100}</span>
             </div>
           </div>
         </div>
@@ -75,10 +87,11 @@ function PaymentTable({ gender, product, buttonClick }: IPaymentTableProps) {
       <GuardPayments />
       <p className={styles.policy}>
         You are enrolling in 2 weeks subscription. By continuing you agree that
-        if you don't cancel prior to the end of the 3-day trial for the $
+        if you don't cancel prior to the end of the {product?.trialDuration}-day
-        {getPrice(product)} you will automatically be charged $19 every 2 weeks
+        trial for the ${getPrice(product)} you will automatically be charged $
-        until you cancel in settings. Learn more about cancellation and refund
+        {product.price / 100}{" "}
-        policy in{" "}
+        every 2 weeks until you cancel in settings. Learn more about
+        cancellation and refund policy in{" "}
         <a onClick={handleSubscriptionPolicyClick}>Subscription policy</a>
       </p>
     </>

src/components/pages/ABDesign/v1/pages/TrialPayment/components/PersonalVideo/styles.module.css

@@ -1,5 +1,6 @@
 .container {
     width: 100%;
+    max-width: 500px;
     margin: 24px 0 16px;
     position: relative;
     overflow: hidden;

src/components/pages/ABDesign/v1/pages/TrialPayment/components/WithPartnerInformation/index.tsx

@@ -69,7 +69,7 @@ function WithPartnerInformation(props: IWithPartnerInformationProps) {
         <ul>
           <li>
             <h6>Zodiac sign</h6>
-            <p>{partnerZodiacSign.length ? partnerZodiacSign : "-"}</p>
+            <p>{partnerZodiacSign?.length ? partnerZodiacSign : "-"}</p>
           </li>
           <li>
             <h6>Gender</h6>

src/components/pages/ABDesign/v1/pages/TrialPayment/index.tsx

@@ -24,7 +24,6 @@ import { useDynamicSize } from "@/hooks/useDynamicSize";
 import { EPlacementKeys, IPaywallProduct } from "@/api/resources/Paywall";
 import { usePaywall } from "@/hooks/paywall/usePaywall";
 import PaymentModal from "@/components/PaymentModal";
-import PersonalVideo from "./components/PersonalVideo";
 import metricService, { EGoals } from "@/services/metric/metricService";
 
 function TrialPaymentPage() {
@@ -55,7 +54,6 @@ function TrialPaymentPage() {
     "single" | "partner"
   >("single");
   const { subPlan } = useParams();
-  const { videoUrl } = useSelector(selectors.selectPersonalVideo);
 
   useEffect(() => {
     if (subPlan) {
@@ -137,13 +135,6 @@ function TrialPaymentPage() {
       </div>
       <Header className={styles.header} />
       <TrialPaymentHeader buttonClick={openStripeModal} />
-      {!!videoUrl.length && (
-        <PersonalVideo
-          gender={gender}
-          url={videoUrl}
-          classNameContainer={styles["personal-video"]}
-        />
-      )}
       {singleOrWithPartner === "partner" && (
         <WithPartnerInformation
           zodiacSign={zodiacSign}
@@ -172,6 +163,7 @@ function TrialPaymentPage() {
         gender={gender}
         product={activeProduct}
         buttonClick={openStripeModal}
+        placementKey={EPlacementKeys["aura.placement.redesign.main"]}
       />
       <YourReading
         gender={gender}
@@ -189,6 +181,7 @@ function TrialPaymentPage() {
         gender={gender}
         product={activeProduct}
         buttonClick={openStripeModal}
+        placementKey={EPlacementKeys["aura.placement.redesign.main"]}
       />
     </section>
   );

src/components/pages/ABDesign/v1/pages/TrialPayment/styles.module.css

@@ -42,9 +42,3 @@
   padding: 0 14px;
   width: 100%;
 }
-
-.personal-video {
-  position: sticky !important;
-  top: 62px;
-  z-index: 30;
-}

src/components/pages/ABDesign/v1/pages/TrialPaymentWithDiscount/PaymentDiscountTable/index.tsx

@@ -2,7 +2,8 @@ import Title from "@/components/Title";
 import styles from "./styles.module.css";
 import { useSelector } from "react-redux";
 import { selectors } from "@/store";
-import { IPaywallProduct } from "@/api/resources/Paywall";
+import { EPlacementKeys, IPaywallProduct } from "@/api/resources/Paywall";
+import { usePaywall } from "@/hooks/paywall/usePaywall";
 
 const getPrice = (product: IPaywallProduct | null) => {
   if (!product) {
@@ -12,6 +13,9 @@ const getPrice = (product: IPaywallProduct | null) => {
 };
 
 function PaymentDiscountTable() {
+  const { getText } = usePaywall({
+    placementKey: EPlacementKeys["aura.placement.secret.discount"],
+  });
   const activeProduct = useSelector(selectors.selectActiveProduct);
 
   return (
@@ -30,14 +34,16 @@ function PaymentDiscountTable() {
           <p className={styles.description}>Secret discount applied!</p>
         </div>
         <div className={styles.side}>
-          <span className={styles.discount}>-30%</span>
+          <span className={styles.discount}>{getText("discount.0")}</span>
-          <strong>-50%</strong>
+          <strong>{getText("discount.1")}</strong>
         </div>
       </div>
       <div className={styles["cost-container"]}>
         <p>Your cost per 14 days after trial:</p>
         <div className={styles.side}>
-          <span className={styles.discount}>$19</span>
+          <span className={styles.discount}>
+            ${Number(getText("full.price")) / 100}
+          </span>
           <strong>${(activeProduct?.price || 0) / 100}</strong>
         </div>
       </div>

src/components/pages/ABDesign/v1/pages/TrialPaymentWithDiscount/index.tsx

@@ -3,39 +3,20 @@ import styles from "./styles.module.css";
 import MainButton from "@/components/MainButton";
 import PaymentDiscountTable from "./PaymentDiscountTable";
 import Modal from "@/components/Modal";
-import { useEffect, useState } from "react";
+import { useState } from "react";
-import { actions, selectors } from "@/store";
+import { selectors } from "@/store";
-import { useDispatch, useSelector } from "react-redux";
+import { useSelector } from "react-redux";
-import { usePaywall } from "@/hooks/paywall/usePaywall";
 import { EPlacementKeys } from "@/api/resources/Paywall";
 import PaymentModal from "@/components/PaymentModal";
 
 function TrialPaymentWithDiscount() {
-  const dispatch = useDispatch();
-  const { products } = usePaywall({
-    placementKey: EPlacementKeys["aura.placement.secret.discount"],
-  });
-  const productFromStore = useSelector(selectors.selectActiveProduct);
   const [isOpenPaymentModal, setIsOpenPaymentModal] = useState<boolean>(false);
+  const activeProduct = useSelector(selectors.selectActiveProduct);
 
   const handleClose = () => {
     setIsOpenPaymentModal(false);
   };
 
-  useEffect(() => {
-    if (!products.length) return;
-    const activeProduct = products.find(
-      (p) => p.trialPrice === productFromStore?.trialPrice
-    );
-    if (!activeProduct) {
-      dispatch(actions.payment.update({ activeProduct: products[0] }));
-    }
-    if (activeProduct) {
-      dispatch(actions.payment.update({ activeProduct }));
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [dispatch, products]);
-
   return (
     <section className={`${styles.page} page`}>
       <Modal open={isOpenPaymentModal} onClose={handleClose} type="hidden">
@@ -56,14 +37,14 @@ function TrialPaymentWithDiscount() {
         className={styles.button}
         onClick={() => setIsOpenPaymentModal(true)}
       >
-        Start your 3-day trial
+        Start your {activeProduct?.trialDuration}-day trial
       </MainButton>
       <p className={styles.policy}>
-        By continuing you agree that if you don't cancel prior to the end of the
+        By continuing you agree that if you don't cancel prior to the end of the{" "}
-        3-days trial, you will automatically be charged $
+        {activeProduct?.trialDuration}-days trial, you will automatically be
-        {(productFromStore?.price || 0) / 100} for the introductory period of 14
+        charged ${(activeProduct?.price || 0) / 100} for the introductory
-        days thereafter the standard rate of $
+        period of 14 days thereafter the standard rate of $
-        {(productFromStore?.price || 0) / 100} every 14 days until you cancel in
+        {(activeProduct?.price || 0) / 100} every 14 days until you cancel in
         settings. Learn more about cancellation and refund policy in
         Subscription terms.
       </p>

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/components/pages/EmailLetters/MarketingTrialPayment/index.tsx

@@ -7,14 +7,15 @@ import PaymentModal from "@/components/PaymentModal";
 import { useEffect, useState } from "react";
 import { usePaywall } from "@/hooks/paywall/usePaywall";
 import { EPlacementKeys } from "@/api/resources/Paywall";
-import { useDispatch } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
-import { actions } from "@/store";
+import { actions, selectors } from "@/store";
 
 function MarketingTrialPayment() {
   const dispatch = useDispatch();
   const [isOpenPaymentModal, setIsOpenPaymentModal] = useState<boolean>(false);
+  const activeProduct = useSelector(selectors.selectActiveProduct);
 
-  const { products } = usePaywall({
+  const { products, getText } = usePaywall({
     placementKey: EPlacementKeys["aura.placement.email.marketing"],
   });
 
@@ -48,7 +49,7 @@ function MarketingTrialPayment() {
         <div className={styles.wrapper}>
           <div className={styles.banner}>Special Offer</div>
           <Title variant="h2" className={styles.title}>
-            Start your 7-day trial
+            Start your {activeProduct?.trialDuration}-day trial
           </Title>
           <p className={styles.description}>No pressure. Cancel anytime</p>
           <div className={styles["total-today"]}>
@@ -67,16 +68,16 @@ function MarketingTrialPayment() {
               Your cost per 2 weeks after trial
             </p>
             <p className={styles.value}>
-              <span className={styles["old-price"]}>$29</span>
+              <span className={styles["old-price"]}>${Number(getText("full.price")) / 100}</span>
-              <span className={styles["new-price"]}>$19</span>
+              <span className={styles["new-price"]}>${(activeProduct?.price || 0) / 100}</span>
             </p>
           </div>
-          <p className={styles["sale-description"]}>Save $10 every period</p>
+          <p className={styles["sale-description"]}>{getText("text.save")}</p>
           <div className={styles.line} />
           <p className={styles["text-description"]}>
             You will be charged only{" "}
             <b>
-              ${(products[0]?.trialPrice / 100).toFixed(2) || 0} for your 7-day
+              ${(products[0]?.trialPrice / 100).toFixed(2) || 0} for your {activeProduct?.trialDuration}-day
               trial.
             </b>{" "}
             Subscription <b>renews automatically</b> until cancelled. You{" "}
@@ -87,8 +88,8 @@ function MarketingTrialPayment() {
             <p>Get access</p>
           </MainButton>
           <p className={styles.policy}>
-            By continuing you agree that if you don't cancel prior to the end of
+            By continuing you agree that if you don`t cancel prior to the end of
-            the 3-days trial, you will automatically be charged $19 every 2
+            the {activeProduct?.trialDuration}-days trial, you will automatically be charged ${(activeProduct?.price || 0) / 100} every 2
             weeks until you cancel in settings. Learn more about cancellation
             and refund policy in Subscription terms
           </p>

src/components/palmistry/payment-screen/payment-screen.tsx

@@ -46,6 +46,7 @@ export default function PaymentScreen() {
 
   const [minutes, seconds] = time.split(":");
 
+  const returnUrl = window.location.origin + '/palmistry/payment';
   return (
     <div className="payment-screen">
       <div className="payment-screen__header">
@@ -124,7 +125,7 @@ export default function PaymentScreen() {
           </div>
         </div>
 
-        <h1 className="payment-screen__title">Start your 7-day trial</h1>
+        <h1 className="payment-screen__title">Start your {activeProductFromStore?.trialDuration}-day trial</h1>
 
         <div className="payment-screen__total-today">
           <span>Total today</span>
@@ -162,7 +163,7 @@ export default function PaymentScreen() {
         <div className="payment-screen__prices">
           <span>
             You will be charged only{" "}
-            <b>${getFormattedPrice(trialPrice)} for your 7-day trial.</b>
+            <b>${getFormattedPrice(trialPrice)} for your {activeProductFromStore?.trialDuration}-day trial.</b>
           </span>
 
           <span>
@@ -256,7 +257,7 @@ export default function PaymentScreen() {
               <PaymentModalNew
                 setHeight={setHeight}
                 activeProduct={activeProductFromStore}
-                returnUrl={window.location.href}
+                returnUrl={returnUrl}
                 placementKey={EPlacementKeys["aura.placement.palmistry.main"]}
               />
             )}

src/components/palmistry/steps-manager/steps-manager.tsx

@@ -78,12 +78,14 @@ export default function StepsManager() {
         )}
 
       <main className="steps-manager__main">
-        {nonSliderSteps.includes(steps.current as Step) && (
+        {(nonSliderSteps.includes(steps.current as Step) || steps.current === Step.Paywall) && (
+          <div style={steps.current === Step.Paywall ? {visibility: 'hidden', position: 'absolute'} : {}}>
             <PalmistryContainerWrapper currentStep={steps.current as Step}>
-            {steps.current === Step.Payment && <PaymentScreen />}
+              {[Step.Paywall, Step.Payment].includes(steps.current as Step) && <PaymentScreen />}
               {steps.current === Step.Discount && <DiscountScreen/>}
               {steps.current === Step.PremiumBundle && <PremiumBundleScreen/>}
             </PalmistryContainerWrapper>
+          </div>
         )}
 
         {!nonSliderSteps.includes(steps.current as Step) && (

src/hooks/authentication/use-authentication.ts

@@ -15,6 +15,7 @@ import { useDispatch, useSelector } from "react-redux";
 
 export const useAuthentication = () => {
     const api = useApi();
+    const feature = useSelector(selectors.selectFeature)
     const { i18n } = useTranslation();
     const dispatch = useDispatch();
     const [isLoading, setIsLoading] = useState(false);
@@ -98,7 +99,8 @@ export const useAuthentication = () => {
                 },
             },
             sign: checked,
-            signDate: dateOfCheck
+            signDate: dateOfCheck,
+            feature
         })
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [

src/hooks/paywall/usePaywall.tsx

@@ -83,14 +83,12 @@ export function usePaywall({ placementKey }: IUsePaywallProps) {
   }, [getPaywallByPlacementKey, placementKey, isMustUpdate]);
 
   const getText = useCallback(
-    (
+    (key: string, options?: IGetTextProps) => {
-      key: string,
+      const {
-      {
         replacementSelector = "span",
         color = "inherit",
         replacement,
-      }: IGetTextProps
+      } = options || {};
-    ) => {
       const property = properties.find((property) => property.key === key);
       if (!property) return "";
       const text = property.value;

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.js`;
 
 const environments = import.meta.env;
 

src/routerComponents/ABDesign/v1/index.tsx

@@ -38,7 +38,7 @@ function ABDesignV1Routes() {
     <Routes>
       <Route element={<LayoutABDesignV1 />}>
         <Route path={routes.client.genderV1()} element={<GenderPage />}>
-          <Route path=":targetId" element={<GenderPage />} />
+          <Route path=":targetId*" element={<GenderPage />} />
         </Route>
         <Route
           path={routes.client.questionnaireV1()}

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("/"),

src/store/index.ts

@@ -48,6 +48,7 @@ import userConfig, {
   actions as userConfigActions,
   selectUserDeviceType,
   selectIsShowTryApp,
+  selectFeature,
   selectIsForceShortPath,
 } from "./userConfig";
 import compatibilities, {
@@ -121,6 +122,7 @@ export const selectors = {
   selectQuestionnaire,
   selectUserDeviceType,
   selectIsShowTryApp,
+  selectFeature,
   selectIsForceShortPath,
   selectOpenAiToken,
   selectPalmistryLines,

src/store/userConfig.ts

@@ -10,12 +10,14 @@ interface IUserConfig {
   deviceType: EUserDeviceType;
   isShowTryApp: boolean;
   isForceShortPath: boolean;
+  feature: string;
 }
 
 const initialState: IUserConfig = {
   deviceType: EUserDeviceType.ios,
   isShowTryApp: false,
   isForceShortPath: false,
+  feature: "",
 };
 
 const userConfigSlice = createSlice({
@@ -37,6 +39,10 @@ const userConfigSlice = createSlice({
       state.isForceShortPath = action.payload;
       return state;
     },
+    setFeature(state, action: PayloadAction<string>) {
+      state.feature = action.payload;
+      return state;
+    },
   },
   extraReducers: (builder) => builder.addCase("reset", () => initialState),
 });
@@ -54,4 +60,8 @@ export const selectIsForceShortPath = createSelector(
   (state: { userConfig: IUserConfig }) => state.userConfig.isForceShortPath,
   (userConfig) => userConfig
 );
+export const selectFeature = createSelector(
+  (state: { userConfig: IUserConfig }) => state.userConfig.feature,
+  (userConfig) => userConfig
+);
 export default userConfigSlice.reducer;