diff --git a/src/components/pages/TrialPayment/components/Goal/index.tsx b/src/components/pages/TrialPayment/components/Goal/index.tsx index ec687fd..e97768c 100755 --- a/src/components/pages/TrialPayment/components/Goal/index.tsx +++ b/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() { - const { goal } = useSelector(selectors.selectQuestionnaire); +interface IGoalProps { + goal: string; +} +function Goal({ goal }: IGoalProps) { const getGoal = () => { const question = stepsQuestionary[0].questions.find( (question) => question.id === "goal" diff --git a/src/components/pages/TrialPayment/components/Header/styles.module.css b/src/components/pages/TrialPayment/components/Header/styles.module.css index a6baf9c..19868f1 100755 --- a/src/components/pages/TrialPayment/components/Header/styles.module.css +++ b/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 { diff --git a/src/components/pages/TrialPayment/components/WithPartnerInformation/index.tsx b/src/components/pages/TrialPayment/components/WithPartnerInformation/index.tsx new file mode 100755 index 0000000..138c017 --- /dev/null +++ b/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 ( +
+
+
+ {`${gender} +

You

+
+
+ {`${partnerGender} +

Partner

+
+
+
+ + +
+
+ ); +} + +export default WithPartnerInformation; diff --git a/src/components/pages/TrialPayment/components/WithPartnerInformation/styles.module.css b/src/components/pages/TrialPayment/components/WithPartnerInformation/styles.module.css new file mode 100755 index 0000000..a3450ff --- /dev/null +++ b/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; +} diff --git a/src/components/pages/TrialPayment/components/YourReading/styles.module.css b/src/components/pages/TrialPayment/components/YourReading/styles.module.css index 90a043e..c0b834e 100755 --- a/src/components/pages/TrialPayment/components/YourReading/styles.module.css +++ b/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; } diff --git a/src/components/pages/TrialPayment/index.tsx b/src/components/pages/TrialPayment/index.tsx index 8e5c027..f25f973 100755 --- a/src/components/pages/TrialPayment/index.tsx +++ b/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([]); const activeSubPlanFromStore = useSelector(selectors.selectActiveSubPlan); const [activeSubPlan, setActiveSubPlan] = useState( activeSubPlanFromStore ); + const [marginTopTitle, setMarginTopTitle] = useState(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 ; } @@ -86,16 +110,34 @@ function TrialPaymentPage() { return (
- - + {informationConditional === "partner" && ( + <WithPartnerInformation + zodiacSign={zodiacSign} + gender={gender} + birthPlace={birthPlace} + birthdate={birthdate} + 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! - +