feat: add yandex metric, smartlook manage

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

@@ -31,7 +31,10 @@ function PaymentTable({ subPlan, buttonClick }: IPaymentTableProps) {
           <hr />
           <div className={styles["table-element"]}>
             <p>Your cost per 2 weeks after trial</p>
-            <span>${subPlan.price_cents / 100}</span>
+            <div>
+              <span className={styles.discount}>$65</span>
+              <span>${subPlan.price_cents / 100}</span>
+            </div>
           </div>
         </div>
       </div>

src/components/pages/TrialPayment/components/PaymentTable/styles.module.css

@@ -81,3 +81,13 @@
   text-decoration: underline;
   font-weight: 600;
 }
+
+.discount {
+  text-decoration: line-through;
+  align-self: flex-end;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 22px;
+  color: rgb(130, 130, 130);
+  margin-right: 4px;
+}

src/components/pages/TrialPayment/components/YourReading/index.tsx

@@ -1,14 +1,34 @@
 import Title from "@/components/Title";
 import styles from "./styles.module.css";
 import CustomButton from "../CustomButton";
+import { useEffect, useState } from "react";
+import { yourReadingList } from "@/data/yourReading";
 
 interface IYourReadingProps {
   gender: string;
   zodiacSign: string;
+  singleOrWithPartner: "single" | "partner";
   buttonClick: () => void;
 }
 
-function YourReading({ gender, zodiacSign, buttonClick }: IYourReadingProps) {
+function YourReading({
+  gender,
+  zodiacSign,
+  singleOrWithPartner = "single",
+  buttonClick,
+}: IYourReadingProps) {
+  const [points, setPoints] = useState(yourReadingList);
+
+  useEffect(() => {
+    if (singleOrWithPartner === "single") {
+      return setPoints([
+        ...yourReadingList.slice(-2),
+        ...yourReadingList.slice(0, -2),
+      ]);
+    }
+    return setPoints(yourReadingList);
+  }, [singleOrWithPartner]);
+
   return (
     <div className={styles["your-reading"]}>
       <Title variant="h3" className={styles.title}>
@@ -25,36 +45,11 @@ function YourReading({ gender, zodiacSign, buttonClick }: IYourReadingProps) {
           Content
         </Title>
         <ol>
-          <li>
-            <p>Compatibility with your partner in other areas of your life.</p>
-          </li>
-          <li>
-            <p>
-              Deep analysis of the relationships with your partner based on a
-              unique birth chart matching system
-            </p>
-          </li>
-          <li>
-            <p>
-              Simple and actionable guide to improving your relationship with
-              your partner
-            </p>
-          </li>
-          <li>
-            <p>
-              Warning about astrological events and practical advice that will
-              help you get through this period well
-            </p>
-          </li>
-          <li>
-            <p>Your horoscope and upcoming events for 2024</p>
-          </li>
-          <li>
-            <p>
-              Your unique strengths and weaknesses and how to get the most out
-              of them
-            </p>
-          </li>
+          {points.map((point, index) => (
+            <li key={index}>
+              <p>{point}</p>
+            </li>
+          ))}
         </ol>
         <Title variant="h5" className={styles["secondary-title"]}>
           Personality

src/components/pages/TrialPayment/index.tsx

@@ -43,7 +43,7 @@ function TrialPaymentPage() {
     activeSubPlanFromStore
   );
   const [marginTopTitle, setMarginTopTitle] = useState<number>(360);
-  const [informationConditional, setInformationConditional] = useState<
+  const [singleOrWithPartner, setSingleOrWithPartner] = useState<
     "single" | "partner"
   >("single");
   const { subPlan } = useParams();
@@ -88,10 +88,10 @@ function TrialPaymentPage() {
   useEffect(() => {
     if (["relationship", "married"].includes(flowChoice)) {
       setMarginTopTitle(460);
-      setInformationConditional("partner");
+      setSingleOrWithPartner("partner");
       return;
     }
-    setInformationConditional("single");
+    setSingleOrWithPartner("single");
     setMarginTopTitle(340);
   }, [flowChoice]);
 
@@ -110,7 +110,7 @@ function TrialPaymentPage() {
   return (
     <section className={`${styles.page} page`}>
       <Header buttonClick={handleNext} />
-      {informationConditional === "partner" && (
+      {singleOrWithPartner === "partner" && (
         <WithPartnerInformation
           zodiacSign={zodiacSign}
           gender={gender}
@@ -122,7 +122,7 @@ function TrialPaymentPage() {
           partnerZodiacSign={partnerZodiacSign}
         />
       )}
-      {informationConditional === "single" && (
+      {singleOrWithPartner === "single" && (
         <PersonalInformation
           zodiacSign={zodiacSign}
           gender={gender}
@@ -143,6 +143,7 @@ function TrialPaymentPage() {
         gender={gender}
         zodiacSign={zodiacSign}
         buttonClick={handleNext}
+        singleOrWithPartner={singleOrWithPartner}
       />
       <Reviews />
       <YouGet />

src/data/yourReading.ts

@@ -0,0 +1,8 @@
+export const yourReadingList = [
+  "Compatibility with your partner in other areas of your life.",
+  "Deep analysis of the relationships with your partner based on a unique birth chart matching system",
+  "Simple and actionable guide to improving your relationship with your partner",
+  "Warning about astrological events and practical advice that will help you get through this period well",
+  "Your horoscope and upcoming events for 2024",
+  "Your unique strengths and weaknesses and how to get the most out of them",
+];