feat: add information with partner on trial payment page

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

@@ -1,11 +1,11 @@
-import { useSelector } from "react-redux";
 import styles from "./styles.module.css";
-import { selectors } from "@/store";
 import { stepsQuestionary } from "@/data";
 
-function Goal() {
+interface IGoalProps {
-  const { goal } = useSelector(selectors.selectQuestionnaire);
+  goal: string;
+}
 
+function Goal({ goal }: IGoalProps) {
   const getGoal = () => {
     const question = stepsQuestionary[0].questions.find(
       (question) => question.id === "goal"

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

@@ -2,15 +2,17 @@
   position: fixed;
   z-index: 10;
   top: 0px;
-  left: 0px;
+  left: 50%;
   height: 62px;
   width: 100%;
+  max-width: 560px;
   background-color: rgb(251, 251, 255);
   display: flex;
   -webkit-box-align: center;
   align-items: center;
   justify-content: space-between;
   padding: 8px 15px;
+  transform: translate(-50%, 0);
 }
 
 .button {

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

@@ -0,0 +1,86 @@
+import styles from "./styles.module.css";
+
+interface IWithPartnerInformationProps {
+  birthdate: string;
+  zodiacSign: string;
+  gender: string;
+  birthPlace: string;
+  partnerBirthDate: string;
+  partnerZodiacSign: string;
+  partnerGender: string;
+  partnerBirthPlace: string;
+}
+
+function WithPartnerInformation(props: IWithPartnerInformationProps) {
+  const {
+    birthdate,
+    zodiacSign,
+    gender,
+    birthPlace,
+    partnerBirthDate,
+    partnerZodiacSign,
+    partnerGender,
+    partnerBirthPlace,
+  } = props;
+
+  return (
+    <div className={styles["personal-information"]}>
+      <div className={styles["images-container"]}>
+        <div className={styles["image-container"]}>
+          <img
+            src={`/questionnaire/zodiacs/${gender}/${zodiacSign?.toLowerCase()}.webp`}
+            alt={`${gender} ${zodiacSign}`}
+          />
+          <p>You</p>
+        </div>
+        <div className={styles["image-container"]}>
+          <img
+            src={`/questionnaire/zodiacs/${partnerGender}/${partnerZodiacSign?.toLowerCase()}.webp`}
+            alt={`${partnerGender} ${partnerZodiacSign}`}
+          />
+          <p>Partner</p>
+        </div>
+      </div>
+      <div className={styles["text-information"]}>
+        <ul>
+          <li>
+            <h6>Zodiac sign</h6>
+            <p>{zodiacSign.length ? zodiacSign : "-"}</p>
+          </li>
+          <li>
+            <h6>Gender</h6>
+            <p>{gender.length ? gender : "-"}</p>
+          </li>
+          <li>
+            <h6>Date of birth</h6>
+            <p>{birthdate.length ? birthdate : "-"}</p>
+          </li>
+          <li>
+            <h6>Place of birth</h6>
+            <p>{birthPlace.length ? birthPlace : "-"}</p>
+          </li>
+        </ul>
+        <ul>
+          <li>
+            <h6>Zodiac sign</h6>
+            <p>{partnerZodiacSign.length ? partnerZodiacSign : "-"}</p>
+          </li>
+          <li>
+            <h6>Gender</h6>
+            <p>{partnerGender.length ? partnerGender : "-"}</p>
+          </li>
+          <li>
+            <h6>Date of birth</h6>
+            <p>{partnerBirthDate.length ? partnerBirthDate : "-"}</p>
+          </li>
+          <li>
+            <h6>Place of birth</h6>
+            <p>{partnerBirthPlace.length ? partnerBirthPlace : "-"}</p>
+          </li>
+        </ul>
+      </div>
+    </div>
+  );
+}
+
+export default WithPartnerInformation;

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

@@ -0,0 +1,80 @@
+.personal-information {
+  position: absolute;
+  width: 100%;
+  height: 460px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  background-color: #eaeef7;
+  padding: 10px 15px;
+}
+
+.images-container {
+  background: #fbfbff;
+  width: 100%;
+  height: fit-content;
+  min-height: 100px;
+  border-top-left-radius: 15px;
+  border-top-right-radius: 15px;
+  display: flex;
+  justify-content: space-around;
+  padding-top: 10px;
+  padding-bottom: 6px;
+}
+
+.image-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+  height: fit-content;
+}
+
+.image-container > img {
+  height: 196px;
+}
+
+.image-container > p {
+  font-weight: 600;
+  font-size: 16px;
+  line-height: 22px;
+  color: #d5c4c4;
+}
+
+.text-information {
+  background: #fbfbff;
+  border-radius: 0px 0px 20px 20px;
+  width: 100%;
+  display: flex;
+  position: relative;
+  padding: 8px 12px;
+}
+
+.text-information > ul {
+  flex: 1 1 0%;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  position: relative;
+}
+
+.text-information > ul > li {
+  width: 100%;
+}
+
+.text-information > ul > li > h6 {
+  font-weight: 700;
+  font-size: 12px;
+  line-height: 130%;
+  color: #454895;
+}
+
+.text-information > ul > li > p {
+  font-size: 14px;
+  line-height: 130%;
+  margin-top: 4px;
+  text-transform: capitalize;
+  color: #0f0f0f;
+}

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

@@ -98,6 +98,7 @@
   flex-direction: column;
   -webkit-box-pack: end;
   justify-content: end;
+  align-items: center;
   z-index: 1;
 }
 

src/components/pages/TrialPayment/index.tsx

@@ -18,6 +18,7 @@ import { useEffect, useState } from "react";
 import { useApi } from "@/api";
 import { getClientLocale } from "@/locales";
 import { Locale } from "@/components/PaymentTable";
+import WithPartnerInformation from "./components/WithPartnerInformation";
 
 const locale = getClientLocale() as Locale;
 
@@ -26,12 +27,25 @@ function TrialPaymentPage() {
   const navigate = useNavigate();
   const birthdate = useSelector(selectors.selectBirthdate);
   const zodiacSign = getZodiacSignByDate(birthdate);
-  const { gender, birthPlace } = useSelector(selectors.selectQuestionnaire);
+  const {
+    gender,
+    birthPlace,
+    partnerBirthPlace,
+    partnerBirthdate,
+    partnerGender,
+    goal,
+    flowChoice,
+  } = useSelector(selectors.selectQuestionnaire);
+  const partnerZodiacSign = getZodiacSignByDate(partnerBirthdate);
   const [subPlans, setSubPlans] = useState<ISubscriptionPlan[]>([]);
   const activeSubPlanFromStore = useSelector(selectors.selectActiveSubPlan);
   const [activeSubPlan, setActiveSubPlan] = useState<ISubscriptionPlan | null>(
     activeSubPlanFromStore
   );
+  const [marginTopTitle, setMarginTopTitle] = useState<number>(360);
+  const [informationConditional, setInformationConditional] = useState<
+    "single" | "partner"
+  >("single");
   const { subPlan } = useParams();
 
   useEffect(() => {
@@ -71,6 +85,16 @@ function TrialPaymentPage() {
     }
   }, [subPlan, subPlans]);
 
+  useEffect(() => {
+    if (["relationship", "married"].includes(flowChoice)) {
+      setMarginTopTitle(460);
+      setInformationConditional("partner");
+      return;
+    }
+    setInformationConditional("single");
+    setMarginTopTitle(340);
+  }, [flowChoice]);
+
   if (!activeSubPlan) {
     return <Navigate to={routes.client.trialChoice()} />;
   }
@@ -86,16 +110,34 @@ function TrialPaymentPage() {
   return (
     <section className={`${styles.page} page`}>
       <Header buttonClick={handleNext} />
-      <PersonalInformation
+      {informationConditional === "partner" && (
-        zodiacSign={zodiacSign}
+        <WithPartnerInformation
-        gender={gender}
+          zodiacSign={zodiacSign}
-        birthPlace={birthPlace}
+          gender={gender}
-        birthdate={birthdate}
+          birthPlace={birthPlace}
-      />
+          birthdate={birthdate}
-      <Title variant="h2" className={styles.title}>
+          partnerBirthPlace={partnerBirthPlace}
+          partnerBirthDate={partnerBirthdate}
+          partnerGender={partnerGender}
+          partnerZodiacSign={partnerZodiacSign}
+        />
+      )}
+      {informationConditional === "single" && (
+        <PersonalInformation
+          zodiacSign={zodiacSign}
+          gender={gender}
+          birthPlace={birthPlace}
+          birthdate={birthdate}
+        />
+      )}
+      <Title
+        variant="h2"
+        className={styles.title}
+        style={{ marginTop: `${marginTopTitle + 20}px` }}
+      >
         Your Personalized Clarity & Love Reading is ready!
       </Title>
-      <Goal />
+      <Goal goal={goal} />
       <PaymentTable subPlan={activeSubPlan} buttonClick={handleNext} />
       <YourReading
         gender={gender}