diff --git a/src/components/pages/TrialPayment/components/PaymentTable/index.tsx b/src/components/pages/TrialPayment/components/PaymentTable/index.tsx index 6589343..6ef54a1 100755 --- a/src/components/pages/TrialPayment/components/PaymentTable/index.tsx +++ b/src/components/pages/TrialPayment/components/PaymentTable/index.tsx @@ -31,7 +31,10 @@ function PaymentTable({ subPlan, buttonClick }: IPaymentTableProps) {

Your cost per 2 weeks after trial

- ${subPlan.price_cents / 100} +
+ $65 + ${subPlan.price_cents / 100} +
diff --git a/src/components/pages/TrialPayment/components/PaymentTable/styles.module.css b/src/components/pages/TrialPayment/components/PaymentTable/styles.module.css index c148706..14f1a9c 100755 --- a/src/components/pages/TrialPayment/components/PaymentTable/styles.module.css +++ b/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; +} diff --git a/src/components/pages/TrialPayment/components/YourReading/index.tsx b/src/components/pages/TrialPayment/components/YourReading/index.tsx index 7e6a8bc..1c3d1ca 100755 --- a/src/components/pages/TrialPayment/components/YourReading/index.tsx +++ b/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 (
@@ -25,36 +45,11 @@ function YourReading({ gender, zodiacSign, buttonClick }: IYourReadingProps) { Content
    -
  1. -

    Compatibility with your partner in other areas of your life.

    -
  2. -
  3. -

    - Deep analysis of the relationships with your partner based on a - unique birth chart matching system -

    -
  4. -
  5. -

    - Simple and actionable guide to improving your relationship with - your partner -

    -
  6. -
  7. -

    - Warning about astrological events and practical advice that will - help you get through this period well -

    -
  8. -
  9. -

    Your horoscope and upcoming events for 2024

    -
  10. -
  11. -

    - Your unique strengths and weaknesses and how to get the most out - of them -

    -
  12. + {points.map((point, index) => ( +
  13. +

    {point}

    +
  14. + ))}
Personality diff --git a/src/components/pages/TrialPayment/index.tsx b/src/components/pages/TrialPayment/index.tsx index f25f973..4ff0337 100755 --- a/src/components/pages/TrialPayment/index.tsx +++ b/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 /> diff --git a/src/data/yourReading.ts b/src/data/yourReading.ts new file mode 100755 index 0000000..2ebd551 --- /dev/null +++ b/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", +];