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
- -
-
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
-
-
+ {points.map((point, index) => (
+ -
+
{point}
+
+ ))}
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(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 (
- {informationConditional === "partner" && (
+ {singleOrWithPartner === "partner" && (
)}
- {informationConditional === "single" && (
+ {singleOrWithPartner === "single" && (
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",
+];