+ 2108 N ST STE 5446 SACRAMENTO, CA 95816, US + + ); +} + +export default Address; diff --git a/src/components/CompatibilityV2/components/Address/styles.module.scss b/src/components/CompatibilityV2/components/Address/styles.module.scss new file mode 100644 index 0000000..df6890f --- /dev/null +++ b/src/components/CompatibilityV2/components/Address/styles.module.scss @@ -0,0 +1,7 @@ +.address { + font-size: 16px; + color: #2c2c2c; + text-align: center; + line-height: 125%; + margin-top: 12px; +} diff --git a/src/components/CompatibilityV2/components/Answer/index.tsx b/src/components/CompatibilityV2/components/Answer/index.tsx new file mode 100644 index 0000000..2829ab5 --- /dev/null +++ b/src/components/CompatibilityV2/components/Answer/index.tsx @@ -0,0 +1,36 @@ +import { ButtonHTMLAttributes } from "react"; +import styles from "./styles.module.scss"; + +interface IAnswer { + id: string; + title: string; +} + +type TAnswerProps = { + answer: IAnswer; + isSelected?: boolean; + selectedClassName?: string; +} & ButtonHTMLAttributes
+ 
+
+ );
+}
+
+export default AppNumberOne;
diff --git a/src/components/CompatibilityV2/components/AppNumberOne/styles.module.scss b/src/components/CompatibilityV2/components/AppNumberOne/styles.module.scss
new file mode 100644
index 0000000..4ae1e47
--- /dev/null
+++ b/src/components/CompatibilityV2/components/AppNumberOne/styles.module.scss
@@ -0,0 +1,18 @@
+.container {
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+
+.text {
+ font-size: 14px;
+ text-align: center;
+ line-height: 125%;
+ max-width: 305px;
+
+ & > span {
+ color: #275ca7;
+ font-weight: 500;
+ }
+}
diff --git a/src/components/CompatibilityV2/components/Button/index.tsx b/src/components/CompatibilityV2/components/Button/index.tsx
new file mode 100644
index 0000000..d16d940
--- /dev/null
+++ b/src/components/CompatibilityV2/components/Button/index.tsx
@@ -0,0 +1,12 @@
+import MainButton, { ButtonProps } from "@/components/MainButton";
+import styles from "./styles.module.scss";
+
+function Button(props: ButtonProps) {
+ return (
+
+ + {translate("app_number_one.text", { + color: {translate("app_number_one.color")}, + })} +
+
+ {/* {width} {height} */}
+
+
+ setIsVideoReady(true)}
+ onUserMediaError={(error) => {
+ setIsVideoReady(false);
+ console.error(error);
+ onError(error);
+ }}
+ />
+
+
+
+
+ );
+}
+
+export default EmailSubstrate;
diff --git a/src/components/CompatibilityV2/components/EmailSubstrate/styles.module.scss b/src/components/CompatibilityV2/components/EmailSubstrate/styles.module.scss
new file mode 100644
index 0000000..19fca5b
--- /dev/null
+++ b/src/components/CompatibilityV2/components/EmailSubstrate/styles.module.scss
@@ -0,0 +1,35 @@
+.container {
+ width: 100%;
+ height: 46px;
+ padding: 13px;
+ display: grid;
+ grid-template-columns: 1fr 36px;
+ align-content: center;
+ justify-content: flex-end;
+ align-items: center;
+ gap: 4px;
+ background-color: #9ab6ca;
+ border-radius: 8px 0 0 8px;
+}
+
+.email {
+ font-size: 16px;
+ line-height: 125%;
+ color: #fff;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap;
+ text-align: right;
+}
+
+.icon {
+ width: 36px;
+ height: 36px;
+ background-color: #4c596c83;
+ font-size: 24px;
+ color: #fff;
+ border-radius: 50%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
diff --git a/src/components/CompatibilityV2/components/Footer/index.tsx b/src/components/CompatibilityV2/components/Footer/index.tsx
new file mode 100644
index 0000000..53a315e
--- /dev/null
+++ b/src/components/CompatibilityV2/components/Footer/index.tsx
@@ -0,0 +1,29 @@
+import { compatibilityV2Prefix } from "@/routes";
+import styles from "./styles.module.scss";
+import Address from "../Address";
+import { useTranslations } from "@/hooks/translations";
+import { ELocalesPlacement } from "@/locales";
+
+function Footer() {
+ const { translate } = useTranslations(ELocalesPlacement.CompatibilityV2);
+
+ return (
+
+ );
+}
+
+export default Footer;
diff --git a/src/components/CompatibilityV2/components/Footer/styles.module.scss b/src/components/CompatibilityV2/components/Footer/styles.module.scss
new file mode 100644
index 0000000..ae37d88
--- /dev/null
+++ b/src/components/CompatibilityV2/components/Footer/styles.module.scss
@@ -0,0 +1,41 @@
+.footer {
+ width: 100%;
+ margin: 30px 0 62px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+
+ & > hr {
+ width: 100%;
+ height: 2px;
+ background-color: #224e90;
+ border: none;
+ margin-bottom: 40px;
+ }
+}
+
+.text {
+ font-size: 18px;
+ font-weight: 500;
+}
+
+.links {
+ width: 100%;
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ flex-wrap: wrap;
+ gap: 20px;
+ margin-top: 26px;
+
+ & > .link {
+ display: flex;
+ flex-direction: row;
+ align-items: end;
+ gap: 5px;
+ font-size: 18px;
+ font-weight: 500;
+ color: #224e90;
+ text-decoration: none;
+ }
+}
diff --git a/src/components/CompatibilityV2/components/Guarantees/index.tsx b/src/components/CompatibilityV2/components/Guarantees/index.tsx
new file mode 100644
index 0000000..3fd0947
--- /dev/null
+++ b/src/components/CompatibilityV2/components/Guarantees/index.tsx
@@ -0,0 +1,65 @@
+import { ELocalesPlacement } from "@/locales";
+import styles from "./styles.module.scss";
+import { useTranslations } from "@/hooks/translations";
+
+function Guarantees() {
+ const { translate } = useTranslations(ELocalesPlacement.CompatibilityV2);
+ return (
+ {email}
+{email[0]?.toUpperCase()}
+
+
+ );
+}
+
+export default Guarantees;
diff --git a/src/components/CompatibilityV2/components/Guarantees/styles.module.scss b/src/components/CompatibilityV2/components/Guarantees/styles.module.scss
new file mode 100644
index 0000000..02c4fb8
--- /dev/null
+++ b/src/components/CompatibilityV2/components/Guarantees/styles.module.scss
@@ -0,0 +1,29 @@
+.guarantees {
+ width: 100%;
+ display: flex;
+ justify-content: space-between;
+ gap: 30px;
+ margin-top: 30px;
+}
+
+.guarantee {
+ width: 100%;
+ display: flex;
+ justify-content: space-between;
+ gap: 8px;
+ max-width: 155px;
+ align-items: center;
+ & > svg {
+ min-width: 24px;
+ min-height: 24px;
+ max-width: 24px;
+ max-height: 24px;
+ }
+
+ & > span {
+ color: #4b536a;
+ font-weight: 600;
+ font-size: 12px;
+ line-height: 18px;
+ }
+}
diff --git a/src/components/CompatibilityV2/components/Header/index.tsx b/src/components/CompatibilityV2/components/Header/index.tsx
new file mode 100644
index 0000000..59652bb
--- /dev/null
+++ b/src/components/CompatibilityV2/components/Header/index.tsx
@@ -0,0 +1,42 @@
+import styles from "./styles.module.css";
+// import Title from "@/components/Title";
+import { useNavigate } from "react-router-dom";
+import BackButton from "@/components/PalmistryV1/components/BackButton";
+
+interface IHeaderProps {
+ isBackButtonVisible?: boolean;
+ className?: string;
+ classNameTitle?: string;
+ arrowColor?: string;
+ onBack?: () => void;
+}
+
+function Header({
+ className = "",
+ classNameTitle = "",
+ isBackButtonVisible = true,
+ arrowColor = "#353E75",
+ onBack,
+}: IHeaderProps) {
+ classNameTitle
+ const navigate = useNavigate();
+ const handleBack = onBack ? onBack : () => navigate(-1);
+ return (
+
+
+
+ {translate("/payment.guarantees.no_commitment")}
+
+
+
+
+
+ {translate("/payment.guarantees.30_day_money_back")}
+
+
+ {!isBackButtonVisible && }
+ {isBackButtonVisible &&
+ AURA
+ */}
+
+
+
+ );
+}
+
+export default Header;
diff --git a/src/components/CompatibilityV2/components/Header/styles.module.css b/src/components/CompatibilityV2/components/Header/styles.module.css
new file mode 100644
index 0000000..553b22f
--- /dev/null
+++ b/src/components/CompatibilityV2/components/Header/styles.module.css
@@ -0,0 +1,15 @@
+.container {
+ display: grid;
+ width: 100%;
+ grid-template-columns: 23px 1fr 23px;
+ align-items: center;
+ justify-items: center;
+}
+
+.title {
+ color: #2c2c2c;
+ font-size: 32px;
+ margin: 0;
+ line-height: 100%;
+}
+
\ No newline at end of file
diff --git a/src/components/CompatibilityV2/components/HowWork/index.tsx b/src/components/CompatibilityV2/components/HowWork/index.tsx
new file mode 100644
index 0000000..be7aa71
--- /dev/null
+++ b/src/components/CompatibilityV2/components/HowWork/index.tsx
@@ -0,0 +1,78 @@
+import Title from "@/components/Title";
+import styles from "./styles.module.scss";
+import { compatibilityV2Prefix } from "@/routes";
+import { useMemo, useRef } from "react";
+import MoneyBackGuarantee from "../MoneyBackGuarantee";
+import { useTranslations } from "@/hooks/translations";
+import { ELocalesPlacement } from "@/locales";
+
+interface IPoint {
+ icon: string;
+ title: string;
+ text: string;
+}
+
+function HowWork() {
+ const { translate } = useTranslations(ELocalesPlacement.CompatibilityV2);
+ const textContainersRef = useRef([] as HTMLDivElement[]);
+
+ const points: IPoint[] = useMemo(
+ () => [
+ {
+ icon: `${compatibilityV2Prefix}/check-mark.svg`,
+ title: translate("/trial-payment.how_work.point1_title"),
+ text: translate("/trial-payment.how_work.point1_text"),
+ },
+ {
+ icon: `${compatibilityV2Prefix}/check-mark.svg`,
+ title: translate("/trial-payment.how_work.point2_title"),
+ text: translate("/trial-payment.how_work.point2_text"),
+ },
+ {
+ icon: `${compatibilityV2Prefix}/circle-in-ring.svg`,
+ title: translate("/trial-payment.how_work.point3_title"),
+ text: translate("/trial-payment.how_work.point3_text"),
+ },
+ {
+ icon: `${compatibilityV2Prefix}/ring.svg`,
+ title: translate("/trial-payment.how_work.point4_title"),
+ text: translate("/trial-payment.how_work.point4_text"),
+ },
+ ],
+ [translate]
+ );
+
+ return (
+
+ {points.map((point, index) => (
+
+ );
+}
+
+export default HowWork;
diff --git a/src/components/CompatibilityV2/components/HowWork/styles.module.scss b/src/components/CompatibilityV2/components/HowWork/styles.module.scss
new file mode 100644
index 0000000..ec0831c
--- /dev/null
+++ b/src/components/CompatibilityV2/components/HowWork/styles.module.scss
@@ -0,0 +1,53 @@
+.container {
+ width: 100vw;
+ max-width: 508px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ gap: 16px;
+ background: linear-gradient(to bottom, #4b88ff31, #ffffff30);
+ border-radius: 30px;
+ padding: 24px 28px 40px;
+}
+
+.block {
+ display: flex;
+ flex-direction: row;
+ gap: 6px;
+ & > .left-side {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 18px;
+
+ & > .vertical-line {
+ width: 3px;
+ height: 60px;
+ background-color: #057dd4;
+ border-radius: 3px;
+ }
+ }
+
+ & > .text-container {
+ display: flex;
+ flex-direction: column;
+ gap: 5px;
+ height: fit-content;
+ & > .title {
+ font-size: 24px;
+ line-height: 100%;
+ color: #057dd4;
+ text-align: left;
+ margin: 0;
+ font-weight: 500;
+ }
+ & > .text {
+ font-size: 20px;
+ line-height: 125%;
+ color: #2f2e37;
+ text-align: left;
+ margin: 0;
+ }
+ }
+}
diff --git a/src/components/CompatibilityV2/components/JoinedToday/index.tsx b/src/components/CompatibilityV2/components/JoinedToday/index.tsx
new file mode 100644
index 0000000..e442c93
--- /dev/null
+++ b/src/components/CompatibilityV2/components/JoinedToday/index.tsx
@@ -0,0 +1,41 @@
+import styles from "./styles.module.scss";
+import { useEffect, useState } from "react";
+import { getRandomArbitrary } from "@/services/random-value";
+import { useTranslations } from "@/hooks/translations";
+import { ELocalesPlacement } from "@/locales";
+import Infinite from "../../images/SVG/Infinite";
+import People from "../../images/SVG/People";
+
+function JoinedToday() {
+ const { translate } = useTranslations(ELocalesPlacement.CompatibilityV2);
+ const [countUsers, setCountUsers] = useState(752);
+
+ useEffect(() => {
+ const randomDelay = getRandomArbitrary(3000, 5000);
+ const countUsersTimeOut = setTimeout(() => {
+ setCountUsers((prevState) => prevState + 1);
+ }, randomDelay);
+ return () => clearTimeout(countUsersTimeOut);
+ }, [countUsers]);
+
+ return (
+
+
+ ))}
+
+ 
+
+
+
+ (textContainersRef.current[index] = el as HTMLDivElement)
+ }
+ >
+
+ {point.title}
+
+
+ {point.text}
+
+
+ );
+}
+
+export default JoinedToday;
diff --git a/src/components/CompatibilityV2/components/JoinedToday/styles.module.scss b/src/components/CompatibilityV2/components/JoinedToday/styles.module.scss
new file mode 100644
index 0000000..f646c84
--- /dev/null
+++ b/src/components/CompatibilityV2/components/JoinedToday/styles.module.scss
@@ -0,0 +1,19 @@
+.container {
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ gap: 5px;
+ background-color: #c8dbff30;
+ border-radius: 30px;
+ padding: 19px 12px;
+ margin-top: 12px;
+}
+
+.row {
+ width: 100%;
+ display: grid;
+ grid-template-columns: 41px 1fr;
+ gap: 10px;
+}
diff --git a/src/components/CompatibilityV2/components/MoneyBackGuarantee/index.tsx b/src/components/CompatibilityV2/components/MoneyBackGuarantee/index.tsx
new file mode 100644
index 0000000..46686ef
--- /dev/null
+++ b/src/components/CompatibilityV2/components/MoneyBackGuarantee/index.tsx
@@ -0,0 +1,22 @@
+import { compatibilityV2Prefix } from "@/routes";
+import styles from "./styles.module.scss";
+import Title from "@/components/Title";
+import { useTranslations } from "@/hooks/translations";
+import { ELocalesPlacement } from "@/locales";
+
+function MoneyBackGuarantee() {
+ const { translate } = useTranslations(ELocalesPlacement.CompatibilityV2);
+ return (
+
+
+ + {translate("/trial-payment.joined_today.text1")} +
+
+
+ + {translate("/trial-payment.joined_today.text2", { + count: countUsers, + })} +
+
+ 
+
+ {translate("/trial-payment.money_back_guarantee.title")}
+
+
+ );
+}
+
+export default MoneyBackGuarantee;
diff --git a/src/components/CompatibilityV2/components/MoneyBackGuarantee/styles.module.scss b/src/components/CompatibilityV2/components/MoneyBackGuarantee/styles.module.scss
new file mode 100644
index 0000000..199ce3c
--- /dev/null
+++ b/src/components/CompatibilityV2/components/MoneyBackGuarantee/styles.module.scss
@@ -0,0 +1,20 @@
+.container {
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 6px;
+}
+
+.title {
+ font-size: 20px;
+ font-weight: 600;
+ line-height: 125%;
+ color: #224e90;
+ margin: 0;
+}
+
+.text {
+ font-size: 18px;
+ max-width: 288px;
+}
diff --git a/src/components/CompatibilityV2/components/PalmIsReady/index.tsx b/src/components/CompatibilityV2/components/PalmIsReady/index.tsx
new file mode 100644
index 0000000..2f2e79e
--- /dev/null
+++ b/src/components/CompatibilityV2/components/PalmIsReady/index.tsx
@@ -0,0 +1,65 @@
+import Title from "@/components/Title";
+import styles from "./styles.module.scss";
+import { compatibilityV2Prefix } from "@/routes";
+import { useTranslations } from "@/hooks/translations";
+import { ELocalesPlacement } from "@/locales";
+
+function PalmIsReady() {
+ const { translate } = useTranslations(ELocalesPlacement.CompatibilityV2);
+
+ return (
+
+ + {translate("/trial-payment.money_back_guarantee.text")} +
+
+
+ {translate("/trial-payment.palm_is_ready.title", {
+ color: (
+ <span>{translate("/trial-payment.palm_is_ready.title_color")}</span>
+ ),
+ })}
+
+
+ );
+}
+
+export default PalmIsReady;
diff --git a/src/components/CompatibilityV2/components/PalmIsReady/styles.module.scss b/src/components/CompatibilityV2/components/PalmIsReady/styles.module.scss
new file mode 100644
index 0000000..c9f4d02
--- /dev/null
+++ b/src/components/CompatibilityV2/components/PalmIsReady/styles.module.scss
@@ -0,0 +1,72 @@
+.container {
+ width: 100%;
+ height: fit-content;
+ background: linear-gradient(to bottom, #c8dbff 0%, #ffffff 100%);
+ border-radius: 30px;
+ padding: 35px 0 0 15px;
+ margin-top: 16px;
+ overflow: hidden;
+}
+
+.title {
+ margin: 0;
+ font-size: 32px;
+ line-height: 125%;
+ text-align: left;
+
+ &>span {
+ color: #275ca7;
+ }
+}
+
+.description {
+ font-size: 22px;
+ line-height: 125%;
+ margin-top: 26px;
+ font-weight: 500;
+}
+
+.text {
+ font-size: 16px;
+ line-height: 125%;
+ margin-top: 12px;
+
+ &>span {
+ color: #275ca7;
+ font-size: 18px;
+ font-weight: 500;
+ }
+}
+
+.choose-text {
+ font-size: 16px;
+ line-height: 125%;
+ margin-top: 18px;
+ font-weight: 500;
+}
+
+.avatars-container {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: nowrap;
+ margin: 12px 0 0 15px;
+
+ &>img {
+ margin-right: -18px;
+ width: 49px;
+ height: 49px;
+ }
+}
+
+.girl-image {
+ float: right;
+ margin-top: 33px;
+ margin-right: 10px;
+ width: 144px;
+ shape-outside: var(--compatibilityV2-prefix-girl-image);
+ -webkit-shape-outside: var(--compatibilityV2-prefix-girl-image);
+ shape-image-threshold: 0;
+ -webkit-shape-image-threshold: 0;
+ // shape-margin: 10px;
+ // -webkit-shape-margin: 10px;
+}
\ No newline at end of file
diff --git a/src/components/CompatibilityV2/components/PalmsSayAbout/PointRing.tsx b/src/components/CompatibilityV2/components/PalmsSayAbout/PointRing.tsx
new file mode 100644
index 0000000..53ce3f9
--- /dev/null
+++ b/src/components/CompatibilityV2/components/PalmsSayAbout/PointRing.tsx
@@ -0,0 +1,46 @@
+import { getRandomArbitrary } from "@/services/random-value";
+
+interface IPointRingProps {
+ gradientColor?: string[];
+}
+
+function PointRing({
+ gradientColor = ["#C68829", "#95661F"],
+}: IPointRingProps) {
+ const id = getRandomArbitrary(0, 10000);
+
+ return (
+
+ );
+}
+
+export default PointRing;
diff --git a/src/components/CompatibilityV2/components/PalmsSayAbout/index.tsx b/src/components/CompatibilityV2/components/PalmsSayAbout/index.tsx
new file mode 100644
index 0000000..fefb269
--- /dev/null
+++ b/src/components/CompatibilityV2/components/PalmsSayAbout/index.tsx
@@ -0,0 +1,242 @@
+import Title from "@/components/Title";
+import styles from "./styles.module.scss";
+import PointRing from "./PointRing";
+import { ELocalesPlacement } from "@/locales";
+import { useTranslations } from "@/hooks/translations";
+import PhotoReady from "../PhotoReady";
+import { useSelector } from "react-redux";
+import { selectors } from "@/store";
+import { useMemo } from "react";
+import { compatibilityV2Prefix } from "@/routes";
+import { IPalmistryLine } from "@/api/resources/Palmistry";
+import { ICompatibilityV2FingerLocal } from "@/store/compatibilityV2";
+import { useMetricABFlags } from "@/services/metric/metricService";
+
+function PalmsSayAbout() {
+ const { translate } = useTranslations(ELocalesPlacement.CompatibilityV2);
+ const lines = useSelector(selectors.selectCompatibilityV2Lines);
+ const fingers = useSelector(selectors.selectCompatibilityV2Fingers);
+
+ const { flags } = useMetricABFlags();
+ const isReal = flags?.palmOnPayment?.[0] === "real";
+
+ const filterByName = (
+ array: Array
+ 
+
+
+ + {translate("/trial-payment.palm_is_ready.description")} +
++ {translate("/trial-payment.palm_is_ready.text1", { + color: ( + + {translate("/trial-payment.palm_is_ready.text1_color")} + + ), + })} +
++ {translate("/trial-payment.palm_is_ready.text2")} +
+
+ 
+ 
+ 
+ 
+
+
+
+
+
+
+
+ {translate("/trial-payment.palms_say_about.title")}
+
+
+ );
+}
+
+export default PalmsSayAbout;
diff --git a/src/components/CompatibilityV2/components/PalmsSayAbout/styles.module.scss b/src/components/CompatibilityV2/components/PalmsSayAbout/styles.module.scss
new file mode 100644
index 0000000..27e1599
--- /dev/null
+++ b/src/components/CompatibilityV2/components/PalmsSayAbout/styles.module.scss
@@ -0,0 +1,58 @@
+.container {
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ border-radius: 30px;
+ background: linear-gradient(to bottom, #5891ff31, #ffffff31);
+ padding: 15px 6px 27px;
+ margin-top: 40px;
+}
+
+.title {
+ font-size: 28px;
+ font-weight: 600;
+ max-width: 274px;
+}
+
+.row {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: space-between;
+ gap: 12px;
+ margin-bottom: 12px;
+
+ &:nth-child(even) {
+ flex-direction: row-reverse;
+ }
+}
+
+.points {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 10px;
+}
+
+.point {
+ display: grid;
+ grid-template-columns: 16px 1fr;
+ gap: 2px;
+
+ & > .text {
+ font-size: 16px;
+ line-height: 125%;
+ color: #000;
+
+ & > span {
+ color: #cc8551;
+ font-weight: 600;
+ font-size: 18px;
+ }
+ }
+}
+
+.photo-ready {
+ max-width: 90px;
+}
diff --git a/src/components/CompatibilityV2/components/PaymentInformation/index.tsx b/src/components/CompatibilityV2/components/PaymentInformation/index.tsx
new file mode 100644
index 0000000..fd55da1
--- /dev/null
+++ b/src/components/CompatibilityV2/components/PaymentInformation/index.tsx
@@ -0,0 +1,52 @@
+import Title from "@/components/Title";
+import Timer from "../Timer";
+import styles from "./styles.module.scss";
+import { useSelector } from "react-redux";
+import { selectors } from "@/store";
+import { getFormattedPrice } from "@/utils/price.utils";
+import { addCurrency, ELocalesPlacement } from "@/locales";
+import { compatibilityV2Prefix } from "@/routes";
+import { useTranslations } from "@/hooks/translations";
+
+function PaymentInformation() {
+ const { translate } = useTranslations(ELocalesPlacement.CompatibilityV2);
+ const activeProductFromStore = useSelector(selectors.selectActiveProduct);
+ const fullPrice = activeProductFromStore?.price || 0;
+ const trialPrice = activeProductFromStore?.trialPrice || 0;
+ const currency = useSelector(selectors.selectCurrency);
+
+ return (
+
+
+
+ {!!love.lines.length && !!love.fingers.length && isReal && (
+ 
+ )}
+
+
+ )}
+
+
+
+
+ + {translate("/trial-payment.palms_say_about.point1", { + color: ( + + {translate("/trial-payment.palms_say_about.point1_color")} + + ), + })} +
+
+
+ + {translate("/trial-payment.palms_say_about.point2")} +
+
+ {!!head.lines.length && !!head.fingers.length && isReal && (
+ 
+ )}
+
+
+ )}
+
+
+
+
+ + {translate("/trial-payment.palms_say_about.point3", { + color: ( + + {translate("/trial-payment.palms_say_about.point3_color")} + + ), + })} +
+
+
+ + {translate("/trial-payment.palms_say_about.point4")} +
+
+ {!!life.lines.length && !!life.fingers.length && isReal && (
+ 
+ )}
+
+
+ )}
+
+
+
+
+ + {translate("/trial-payment.palms_say_about.point5", { + color: ( + + {translate("/trial-payment.palms_say_about.point5_color")} + + ), + })} +
+
+
+ + {translate("/trial-payment.palms_say_about.point6")} +
+
+ {!!fate.lines.length && !!fate.fingers.length && isReal && (
+ 
+ )}
+
+
+ )}
+
+
+
+
+ + {translate("/trial-payment.palms_say_about.point7", { + color: ( + + {translate("/trial-payment.palms_say_about.point7_color")} + + ), + })} +
+
+
+ + {translate("/trial-payment.palms_say_about.point8")} +
+
+ {!!pinky.fingers.length && isReal && (
+ 
+ )}
+
+
+ )}
+
+
+
+
+ + {translate("/trial-payment.palms_say_about.point9")} +
+
+
+ {translate("/payment.payment_information.title", {
+ trialDuration: activeProductFromStore?.trialDuration,
+ })}
+
+
+ );
+}
+
+export default PaymentInformation;
diff --git a/src/components/CompatibilityV2/components/PaymentInformation/styles.module.scss b/src/components/CompatibilityV2/components/PaymentInformation/styles.module.scss
new file mode 100644
index 0000000..2e98102
--- /dev/null
+++ b/src/components/CompatibilityV2/components/PaymentInformation/styles.module.scss
@@ -0,0 +1,92 @@
+.container {
+ width: calc(100% + 34px);
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 12px;
+ border-radius: 8px;
+ background: linear-gradient(to bottom, #c8dbff 0%, #ffffff 100%);
+ padding: 13px 40px 10px 15px;
+ margin-top: 16px;
+}
+
+.offer-reserved {
+ width: 100%;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: space-between;
+ gap: 12px;
+ font-size: 15px;
+ color: #2c2c2c;
+}
+
+.title {
+ font-style: 20px;
+ font-weight: 600;
+ line-height: 125%;
+ color: #000;
+ margin: 0;
+ text-align: left;
+ width: 100%;
+}
+
+hr {
+ width: calc(100% + 39px);
+ height: 1px;
+ background-color: #224e9026;
+ border: none;
+ margin: 0;
+ margin-left: -7px;
+}
+
+.total-container {
+ width: 100%;
+}
+
+.total-today {
+ width: 100%;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: space-between;
+ gap: 12px;
+ font-size: 16px;
+ padding: 0;
+
+ &>.total-today-price {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ gap: 12px;
+
+ &>s {
+ font-size: 16px;
+ color: #726D6D;
+ line-height: 125%;
+ margin-top: 3px;
+ }
+
+ &>strong {
+ font-size: 24px;
+ font-weight: 800;
+ line-height: 125%;
+ color: #224e90;
+ margin: 0;
+ }
+ }
+}
+
+.code-applied {
+ width: 100%;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ gap: 6px;
+ font-size: 14px;
+ color: #1b811f;
+
+ &>b {
+ font-weight: 500;
+ }
+}
\ No newline at end of file
diff --git a/src/components/CompatibilityV2/components/PaymentModal/index.tsx b/src/components/CompatibilityV2/components/PaymentModal/index.tsx
new file mode 100644
index 0000000..f9bc247
--- /dev/null
+++ b/src/components/CompatibilityV2/components/PaymentModal/index.tsx
@@ -0,0 +1,77 @@
+import { useSearchParams } from "react-router-dom";
+import styles from "./styles.module.scss";
+import { HTMLAttributes, useState } from "react";
+import { useSelector } from "react-redux";
+import { selectors } from "@/store";
+import PaymentModalNew from "@/components/PaymentModalNew";
+import { EPlacementKeys } from "@/api/resources/Paywall";
+import routes from "@/routes";
+
+function PaymentModal(props: HTMLAttributes
+
+ {translate("/payment.payment_information.personalized_offer")}
+
+
+
+
+ +
+
+ {translate("/payment.payment_information.total_today")}
+
+ {addCurrency(getFormattedPrice(fullPrice), currency)}
+
+ {addCurrency(getFormattedPrice(trialPrice), currency)}
+
+
+ +
+ 
+ {translate("/payment.payment_information.code_applied", {
+ bold: {translate("/payment.payment_information.code_applied_bold")},
+ })}
+
+
+ {translate("/payment.payment_information.code_applied", {
+ bold: {translate("/payment.payment_information.code_applied_bold")},
+ })}
+
+
+ )}
+
+ );
+}
+
+export default PaymentModal;
diff --git a/src/components/CompatibilityV2/components/PaymentModal/styles.module.scss b/src/components/CompatibilityV2/components/PaymentModal/styles.module.scss
new file mode 100644
index 0000000..2134380
--- /dev/null
+++ b/src/components/CompatibilityV2/components/PaymentModal/styles.module.scss
@@ -0,0 +1,66 @@
+.container {
+ height: 100%;
+}
+
+.widget {
+ position: fixed;
+ background: #fff;
+ bottom: 0;
+ box-shadow: 0 -2px 16px rgba(18, 22, 32, 0.1);
+ width: 100%;
+ padding: 12px 20px;
+ text-align: center;
+ text-align: -webkit-center;
+ transition: 0.5s height;
+ max-width: 560px;
+ // margin-left: -66px;
+ // left: 50%;
+ // transform: translate(-50%, 0);
+ left: 0;
+ right: 0;
+ margin: 0 auto;
+}
+
+.widget_success {
+ height: 400px;
+}
+
+.success {
+ width: 100%;
+ height: 100%;
+ background: #fff;
+ z-index: 99;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ gap: 30px;
+ padding: 40px;
+
+ & > .icon {
+ width: 100px;
+ height: 100px;
+ max-width: 50%;
+ flex-shrink: 0;
+ }
+
+ & > .text {
+ font-size: 24px;
+ line-height: 32px;
+ text-align: center;
+ color: #121620;
+ }
+}
+
+@media screen and (max-width: 560px) {
+ .widget {
+ width: 100%;
+ padding: 12px 20px;
+ text-align: center;
+ text-align: -webkit-center;
+ transition: height 1s linear;
+ max-width: 560px;
+ margin-left: 0;
+ left: 0;
+ }
+}
diff --git a/src/components/CompatibilityV2/components/PaymentModalV1/PaymentForm/index.tsx b/src/components/CompatibilityV2/components/PaymentModalV1/PaymentForm/index.tsx
new file mode 100644
index 0000000..fd55767
--- /dev/null
+++ b/src/components/CompatibilityV2/components/PaymentModalV1/PaymentForm/index.tsx
@@ -0,0 +1,175 @@
+import { useTranslations } from '@/hooks/translations';
+import { addCurrency, ELocalesPlacement } from '@/locales';
+import styles from "./styles.module.scss";
+import { LegacyRef, useRef, useState } from 'react';
+import { useSelector } from 'react-redux';
+import { selectors } from '@/store';
+import { EPlacementKeys, IPaywallProduct } from '@/api/resources/Paywall';
+import cn from "classnames";
+import { getFormattedPrice } from '@/utils/price.utils';
+import SecurityPayments from '@/components/pages/TrialPayment/components/SecurityPayments';
+import Title from '@/components/Title';
+import metricService, { EGoals, EMetrics } from '@/services/metric/metricService';
+import { useNavigate } from 'react-router-dom';
+import routes from '@/routes';
+import CreditCardIcon from '@/components/PaymentModalNew/PaymentCardModal/CreditCardIcon';
+import NMIPaymentForm from '@/components/Payment/nmi/PaymentForm';
+import PaymentModal from '@/components/Payment/PaymentModal';
+
+const placementKey = EPlacementKeys['aura.placement.compatibility.v2'];
+
+interface IPaymentFormProps {
+ activeProduct: IPaywallProduct;
+}
+
+function PaymentForm({
+ activeProduct,
+}: IPaymentFormProps) {
+ const navigate = useNavigate();
+ const { translate } = useTranslations(ELocalesPlacement.CompatibilityV2);
+ const ref = useRef
+ {subscriptionStatus !== "subscribed" && (
+
+
+
+
+
+ )}
+ Payment success
+ }
+ className={styles["payment-modal"]}
+ >
+
+ Something went wrong
+
+
+ );
+ }
+
+ if (isPaymentSuccess) {
+ return (
+ }
+ className={styles["payment-modal"]}
+ >
+
+ );
+ }
+
+ return (
+
+
+
+
+ Payment success
+ }
+ className={cn(
+ styles.paymentModalContainer
+ )}
+ >
+
+
+
+
+
+ );
+}
+
+export default PaymentForm
\ No newline at end of file
diff --git a/src/components/CompatibilityV2/components/PaymentModalV1/PaymentForm/styles.module.scss b/src/components/CompatibilityV2/components/PaymentModalV1/PaymentForm/styles.module.scss
new file mode 100644
index 0000000..7967d39
--- /dev/null
+++ b/src/components/CompatibilityV2/components/PaymentModalV1/PaymentForm/styles.module.scss
@@ -0,0 +1,94 @@
+.paymentModalContainer {
+ display: flex;
+ flex-direction: column;
+ position: relative;
+ margin: -12px -20px;
+ padding: 12px 20px;
+ gap: 6px;
+
+ transition: height 1s ease-out;
+
+ .address {
+ color: gray;
+ font-size: 10px;
+ margin-bottom: 16px;
+ text-transform: uppercase;
+ }
+
+ .infoContainer>* {
+ padding-top: 16px;
+ }
+
+ .paymentCreditCard {
+ background: #066fde;
+ color: #fff !important;
+ gap: 6px;
+ display: flex;
+ font-size: 14px;
+ line-height: 18px;
+ align-items: center;
+ font-weight: 400;
+ min-height: 48px;
+ border-radius: 5px;
+ justify-content: center;
+ cursor: pointer;
+ }
+
+ &Loading {
+ background: rgba(215, 213, 213, .5);
+ }
+
+ .paymentModalLoader {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ gap: 25px;
+ color: #2f2e37;
+ position: absolute;
+ width: 100%;
+ margin-left: -20px;
+ }
+
+ .paymentModalPrice {
+ color: #066fde;
+ font-size: 16px;
+ font-weight: 700;
+ line-height: 25px;
+ text-align: center;
+ margin-bottom: 12px;
+ }
+}
+
+
+.success {
+ width: 100%;
+ height: 100%;
+ background: #fff;
+ z-index: 99;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ gap: 30px;
+ padding: 40px;
+
+ &>.icon {
+ width: 100px;
+ height: 100px;
+ max-width: 50%;
+ flex-shrink: 0;
+ }
+
+ &>.text {
+ font-size: 24px;
+ line-height: 32px;
+ text-align: center;
+ color: #121620;
+ }
+}
+
+.modal-content {
+ overflow-x: hidden;
+
+}
\ No newline at end of file
diff --git a/src/components/CompatibilityV2/components/PaymentModalV1/index.tsx b/src/components/CompatibilityV2/components/PaymentModalV1/index.tsx
new file mode 100644
index 0000000..1e07d48
--- /dev/null
+++ b/src/components/CompatibilityV2/components/PaymentModalV1/index.tsx
@@ -0,0 +1,32 @@
+import { selectors } from '@/store';
+import { HTMLAttributes } from 'react';
+import { useSelector } from 'react-redux';
+import styles from "./styles.module.scss";
+import PaymentForm from './PaymentForm';
+
+function PaymentModalV1(props: HTMLAttributes
+ {translate(
+ "/payment.total_due",
+ {
+ trialPrice: addCurrency(
+ getFormattedPrice(activeProduct.trialPrice || 0),
+ currency
+ ),
+ },
+ ELocalesPlacement.CompatibilityV2
+ )}
+
+ setIsPaymentModalOpen(true)}
+ // onClick={() => showCreditCardForm()}
+ >
+
+ {/* Credit / Debit Card
+
+
+ + {translate( + "payment_modal.address", + undefined, + ELocalesPlacement.V1 + )} +
+
+
+ )
+ }
+
+ );
+}
+
+export default PaymentModalV1;
\ No newline at end of file
diff --git a/src/components/CompatibilityV2/components/PaymentModalV1/styles.module.scss b/src/components/CompatibilityV2/components/PaymentModalV1/styles.module.scss
new file mode 100644
index 0000000..2134380
--- /dev/null
+++ b/src/components/CompatibilityV2/components/PaymentModalV1/styles.module.scss
@@ -0,0 +1,66 @@
+.container {
+ height: 100%;
+}
+
+.widget {
+ position: fixed;
+ background: #fff;
+ bottom: 0;
+ box-shadow: 0 -2px 16px rgba(18, 22, 32, 0.1);
+ width: 100%;
+ padding: 12px 20px;
+ text-align: center;
+ text-align: -webkit-center;
+ transition: 0.5s height;
+ max-width: 560px;
+ // margin-left: -66px;
+ // left: 50%;
+ // transform: translate(-50%, 0);
+ left: 0;
+ right: 0;
+ margin: 0 auto;
+}
+
+.widget_success {
+ height: 400px;
+}
+
+.success {
+ width: 100%;
+ height: 100%;
+ background: #fff;
+ z-index: 99;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ gap: 30px;
+ padding: 40px;
+
+ & > .icon {
+ width: 100px;
+ height: 100px;
+ max-width: 50%;
+ flex-shrink: 0;
+ }
+
+ & > .text {
+ font-size: 24px;
+ line-height: 32px;
+ text-align: center;
+ color: #121620;
+ }
+}
+
+@media screen and (max-width: 560px) {
+ .widget {
+ width: 100%;
+ padding: 12px 20px;
+ text-align: center;
+ text-align: -webkit-center;
+ transition: height 1s linear;
+ max-width: 560px;
+ margin-left: 0;
+ left: 0;
+ }
+}
diff --git a/src/components/CompatibilityV2/components/PhotoReady/index.tsx b/src/components/CompatibilityV2/components/PhotoReady/index.tsx
new file mode 100644
index 0000000..b3bf02a
--- /dev/null
+++ b/src/components/CompatibilityV2/components/PhotoReady/index.tsx
@@ -0,0 +1,105 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import styles from "./styles.module.scss";
+import { useSelector } from "react-redux";
+import { selectors } from "@/store";
+import { IPalmistryLine, IPalmistryPoint } from "@/api/resources/Palmistry";
+import { ICompatibilityV2FingerLocal } from "@/store/compatibilityV2";
+
+interface IPhotoReadyProps {
+ className?: string;
+ lines: IPalmistryLine[];
+ fingers: ICompatibilityV2FingerLocal[];
+}
+
+function PhotoReady({ className = "", lines, fingers }: IPhotoReadyProps) {
+ const photo = useSelector(selectors.selectCompatibilityV2Photo);
+
+ const imageRef = useRef
+
+
+ 
setIsImageLoaded(true)}
+ />
+ {!!imageHeight && !!imageWidth && (
+
+ )}
+
+ );
+}
+
+export default PhotoReady;
diff --git a/src/components/CompatibilityV2/components/PhotoReady/styles.module.scss b/src/components/CompatibilityV2/components/PhotoReady/styles.module.scss
new file mode 100644
index 0000000..9f5ba6b
--- /dev/null
+++ b/src/components/CompatibilityV2/components/PhotoReady/styles.module.scss
@@ -0,0 +1,43 @@
+.container {
+ position: relative;
+}
+
+.svg-objects {
+ height: 100%;
+ left: 0;
+ position: absolute;
+ top: 0;
+ width: 100%;
+}
+
+.line {
+ stroke-linecap: round;
+ stroke-linejoin: round;
+ stroke-width: 2px;
+ fill-rule: evenodd;
+ clip-rule: evenodd;
+ stroke-miterlimit: 1.5;
+ stroke-dasharray: 500;
+ stroke: #fff;
+ fill: none;
+ stroke-dashoffset: 0;
+}
+
+.line-heart {
+ stroke: #f8d90f;
+ /* animation-delay: 4.5s; */
+}
+
+.line-life {
+ stroke: #e51c39;
+}
+
+.line-head {
+ stroke: #00d114;
+ /* animation-delay: 1.5s; */
+}
+
+.line-fate {
+ stroke: #05ced8;
+ /* animation-delay: 3s; */
+}
diff --git a/src/components/CompatibilityV2/components/Review/index.tsx b/src/components/CompatibilityV2/components/Review/index.tsx
new file mode 100644
index 0000000..fd967f0
--- /dev/null
+++ b/src/components/CompatibilityV2/components/Review/index.tsx
@@ -0,0 +1,36 @@
+import { compatibilityV2Prefix } from "@/routes";
+import styles from "./styles.module.scss";
+
+export interface IReviewProps {
+ username: string;
+ tagline: string;
+ stars?: number;
+ avatar: string;
+ text: string;
+}
+
+function Review({ username, tagline, stars = 5, avatar, text }: IReviewProps) {
+ return (
+
+
+ );
+}
+
+export default Review;
diff --git a/src/components/CompatibilityV2/components/Review/styles.module.scss b/src/components/CompatibilityV2/components/Review/styles.module.scss
new file mode 100644
index 0000000..8de8b34
--- /dev/null
+++ b/src/components/CompatibilityV2/components/Review/styles.module.scss
@@ -0,0 +1,38 @@
+.container {
+ width: 100%;
+ border-radius: 30px;
+ background: linear-gradient(to bottom, #4b88ff31 0%, #ffffff30 100%);
+ padding: 18px 12px 12px;
+}
+
+.header {
+ margin-left: 8px;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ gap: 6px;
+
+ & > .info {
+ display: flex;
+ flex-direction: column;
+ align-items: start;
+ gap: 2px;
+
+ & > .stars {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ gap: 1px;
+ }
+ }
+}
+
+.tagline {
+ color: #224e90;
+ line-height: 125%;
+}
+
+.text {
+ margin-top: 16px;
+ line-height: 125%;
+}
diff --git a/src/components/CompatibilityV2/components/Reviews/index.tsx b/src/components/CompatibilityV2/components/Reviews/index.tsx
new file mode 100644
index 0000000..a5c1b68
--- /dev/null
+++ b/src/components/CompatibilityV2/components/Reviews/index.tsx
@@ -0,0 +1,43 @@
+import { compatibilityV2Prefix } from "@/routes";
+import Review, { IReviewProps } from "../Review";
+import styles from "./styles.module.scss";
+import { useMemo } from "react";
+import { useTranslations } from "@/hooks/translations";
+import { ELocalesPlacement } from "@/locales";
+
+function Reviews() {
+ const { translate } = useTranslations(ELocalesPlacement.CompatibilityV2);
+ const reviews: IReviewProps[] = useMemo(
+ () => [
+ {
+ avatar: `${compatibilityV2Prefix}/reviews/rebecca.png`,
+ username: translate("/trial-payment.reviews.username1"),
+ tagline: translate("/trial-payment.reviews.tagline1"),
+ text: translate("/trial-payment.reviews.text1"),
+ },
+ {
+ avatar: `${compatibilityV2Prefix}/reviews/mika.png`,
+ username: translate("/trial-payment.reviews.username2"),
+ tagline: translate("/trial-payment.reviews.tagline2"),
+ text: translate("/trial-payment.reviews.text2"),
+ },
+ {
+ avatar: `${compatibilityV2Prefix}/reviews/amanda.png`,
+ username: translate("/trial-payment.reviews.username3"),
+ tagline: translate("/trial-payment.reviews.tagline3"),
+ text: translate("/trial-payment.reviews.text3"),
+ },
+ ],
+ [translate]
+ );
+
+ return (
+
+ 
+
+
+
+ {username}
+
+ {Array.from({ length: stars }).map((_, index) => (
+ 
+ ))}
+
+
+ ))}
+ {tagline}
+{text}
+
+ {reviews.map((review, index) => (
+
+ );
+}
+
+export default Reviews;
diff --git a/src/components/CompatibilityV2/components/Reviews/styles.module.scss b/src/components/CompatibilityV2/components/Reviews/styles.module.scss
new file mode 100644
index 0000000..5574b33
--- /dev/null
+++ b/src/components/CompatibilityV2/components/Reviews/styles.module.scss
@@ -0,0 +1,6 @@
+.container {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 10px;
+}
diff --git a/src/components/CompatibilityV2/components/SecretDiscountTable/index.tsx b/src/components/CompatibilityV2/components/SecretDiscountTable/index.tsx
new file mode 100644
index 0000000..137885d
--- /dev/null
+++ b/src/components/CompatibilityV2/components/SecretDiscountTable/index.tsx
@@ -0,0 +1,68 @@
+import Title from "@/components/Title";
+import styles from "./styles.module.scss";
+import { images } from "../../data";
+import { usePaywall } from "@/hooks/paywall/usePaywall";
+import { addCurrency, ELocalesPlacement } from "@/locales";
+import { EPlacementKeys } from "@/api/resources/Paywall";
+import { Currency } from "@/components/PaymentTable";
+import { useTranslations } from "@/hooks/translations";
+
+const placementKey = EPlacementKeys["aura.placement.compatibility.v2.secret.discount"]
+
+const getPrice = (price: number, currency: Currency) => {
+ if (price % 100 === 0) {
+ return addCurrency(price / 100, currency);
+ }
+ return addCurrency(
+ (price / 100).toFixed(2),
+ currency
+ );
+}
+
+function SecretDiscountTable() {
+ const { products, currency, getText } = usePaywall({
+ placementKey,
+ localesPlacement: ELocalesPlacement.EmailMarketingPalmistryV2,
+ });
+ const { translate } = useTranslations(ELocalesPlacement.EmailMarketingPalmistryV2);
+
+ // const activeProduct = products.find(product => product?.trialPrice === activeProductFromStore?.trialPrice) || products[0]
+ const activeProduct = products[0]
+ // const price = activeProduct?.price || 0;
+ const trialPrice = activeProduct?.trialPrice || 0;
+ // const trialDuration = activeProduct?.trialDuration || 7;
+
+ return (
+
+
+ {translate("secret-discount.secret-discount-table_title")}
+
+
+
+ )
+}
+
+export default SecretDiscountTable
\ No newline at end of file
diff --git a/src/components/CompatibilityV2/components/SecretDiscountTable/styles.module.scss b/src/components/CompatibilityV2/components/SecretDiscountTable/styles.module.scss
new file mode 100644
index 0000000..f8b1ced
--- /dev/null
+++ b/src/components/CompatibilityV2/components/SecretDiscountTable/styles.module.scss
@@ -0,0 +1,110 @@
+.container {
+ background-color: #fff;
+ border-radius: 13px;
+ width: calc(100% + 24px);
+ padding: 16px 0 22px;
+ box-shadow: 2px 11px 17px -1px rgba(0, 0, 0, 0.13);
+ margin-top: 42px;
+ color: #363636;
+}
+
+.title {
+ font-size: 20px;
+ font-weight: 600;
+ line-height: 24px;
+ margin-bottom: 0;
+}
+
+.subtitle {
+ font-size: 13px;
+ font-weight: 400;
+ line-height: 16px;
+ margin-top: 5px;
+ text-align: center;
+}
+
+.applied {
+ width: 100%;
+ background-color: #293D68;
+ padding: 7px 10px;
+ margin-top: 12px;
+ display: flex;
+ align-items: center;
+ justify-content: start;
+ gap: 10px;
+ color: #fff;
+
+ &>img {
+ width: 17px;
+ }
+
+ &>.title {
+ font-size: 15px;
+ font-weight: 500;
+ line-height: 19px;
+ }
+
+ &>.old-discount {
+ font-size: 15px;
+ color: #B2B2B2;
+ text-decoration: line-through;
+ margin-left: 4px;
+ }
+
+ &>.new-discount {
+ color: #fff;
+ font-size: 20px;
+ font-weight: 600;
+ line-height: 19px;
+ margin-left: 4px;
+ }
+}
+
+.grid-line {
+ display: grid;
+ grid-template-columns: 1fr 22px 22px;
+ align-items: center;
+ gap: 28px;
+ margin-top: 8px;
+ padding: 0 24px 0 10px;
+
+ &>p {
+ font-size: 12px;
+ font-weight: 400;
+ line-height: 130%;
+ margin-bottom: 0;
+ }
+
+ &.days-14>span {
+ font-size: 12px;
+ font-weight: 400;
+ line-height: 130%;
+
+ &.old-price {
+ text-decoration: line-through;
+ }
+ }
+
+ &.save {
+ margin-top: 2px;
+ }
+
+ &.total-today {
+
+ &>p,
+ span {
+ font-size: 16px;
+ font-weight: 800;
+ line-height: 130%;
+ margin-top: 8px;
+ }
+ }
+}
+
+hr {
+ display: block;
+ width: 100%;
+ margin: 0;
+ background-color: #363636;
+ margin-top: 6px;
+}
\ No newline at end of file
diff --git a/src/components/CompatibilityV2/components/Stars/index.tsx b/src/components/CompatibilityV2/components/Stars/index.tsx
new file mode 100644
index 0000000..3e40d10
--- /dev/null
+++ b/src/components/CompatibilityV2/components/Stars/index.tsx
@@ -0,0 +1,18 @@
+import StarSVG from "../../images/SVG/Star";
+import styles from "./styles.module.scss";
+
+interface IStarsProps {
+ stars?: number;
+}
+
+function Stars({ stars = 5 }: IStarsProps) {
+ return (
+ + {translate("secret-discount.secret-discount-table_subtitle")} +
+
+ ![Gift]({images("discount/gift.png")})
+
+ {translate("secret-discount.secret-discount-table_discount-applied")}
+
+ {getText("old.discount")}
+ {getText("new.discount")}
+
+
+
+
+ {translate("secret-discount.secret-discount-table_cost-after-trial", { days: getText("trial.duration") })}
+ {addCurrency(Number(getText("old.price")), currency)} + {getPrice(trialPrice, currency)} +
+
+ {translate("secret-discount.secret-discount-table_you-save", { amount: addCurrency(Number(getText("save")), currency) })}
++
+
+ {translate("secret-discount.secret-discount-table_total-today")}
+ {getPrice(trialPrice, currency)} +
+ {Array.from({ length: stars }).map((_, index) => (
+
+ );
+}
+
+export default Stars;
diff --git a/src/components/CompatibilityV2/components/Stars/styles.module.scss b/src/components/CompatibilityV2/components/Stars/styles.module.scss
new file mode 100644
index 0000000..795cd11
--- /dev/null
+++ b/src/components/CompatibilityV2/components/Stars/styles.module.scss
@@ -0,0 +1,6 @@
+.container {
+ display: flex;
+ flex-direction: row;
+ gap: 1px;
+ width: fit-content;
+}
diff --git a/src/components/CompatibilityV2/components/StepperBar/index.tsx b/src/components/CompatibilityV2/components/StepperBar/index.tsx
new file mode 100644
index 0000000..ca0f4af
--- /dev/null
+++ b/src/components/CompatibilityV2/components/StepperBar/index.tsx
@@ -0,0 +1,35 @@
+import styles from "./styles.module.scss";
+import { useDynamicSize } from "@/hooks/useDynamicSize";
+import CircleArrow from "@/components/pages/ABDesign/v1/ui/CircleArrow";
+
+interface IStepperBarProps {
+ length: number;
+ currentStep: number;
+ color?: string;
+ className?: string;
+}
+
+function StepperBar({
+ length,
+ currentStep,
+ color = "#7337A8",
+ className = "",
+}: IStepperBarProps) {
+ const { width, elementRef } = useDynamicSize
+
+ );
+}
+
+export default StepperBar;
diff --git a/src/components/CompatibilityV2/components/StepperBar/styles.module.scss b/src/components/CompatibilityV2/components/StepperBar/styles.module.scss
new file mode 100644
index 0000000..97d7ee8
--- /dev/null
+++ b/src/components/CompatibilityV2/components/StepperBar/styles.module.scss
@@ -0,0 +1,38 @@
+.container {
+ width: 100%;
+ display: grid;
+ gap: 15px;
+}
+
+.step-container {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: center;
+ gap: 0;
+ width: 100%;
+}
+
+.circle {
+ width: 16px;
+ height: 16px;
+ border-radius: 50%;
+ border-width: 1px;
+ border-style: solid;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 8px;
+}
+
+.line-container {
+ height: 6px;
+ width: 100%;
+ background-color: #d2d1f9;
+}
+
+.line {
+ height: 100%;
+ /* width: 0; */
+ transition: width 0.4s linear 0s;
+}
diff --git a/src/components/CompatibilityV2/components/Timer/index.tsx b/src/components/CompatibilityV2/components/Timer/index.tsx
new file mode 100644
index 0000000..f2fc96c
--- /dev/null
+++ b/src/components/CompatibilityV2/components/Timer/index.tsx
@@ -0,0 +1,15 @@
+import useTimer from "@/hooks/palmistry/use-timer";
+import styles from "./styles.module.scss";
+
+function Timer() {
+ const time = useTimer();
+ const [minutes, seconds] = time.split(":");
+ return (
+
+
+ );
+}
+
+export default Timer;
diff --git a/src/components/CompatibilityV2/components/Timer/styles.module.scss b/src/components/CompatibilityV2/components/Timer/styles.module.scss
new file mode 100644
index 0000000..9114fcb
--- /dev/null
+++ b/src/components/CompatibilityV2/components/Timer/styles.module.scss
@@ -0,0 +1,16 @@
+.container {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ gap: 12px;
+}
+
+.minutes,
+.seconds {
+ font-size: 20px;
+ color: #000;
+ font-weight: 500;
+ background-color: #fff;
+ border-radius: 4px;
+ padding: 8px 4px;
+}
diff --git a/src/components/CompatibilityV2/components/WhatIncluded/index.tsx b/src/components/CompatibilityV2/components/WhatIncluded/index.tsx
new file mode 100644
index 0000000..c47fecb
--- /dev/null
+++ b/src/components/CompatibilityV2/components/WhatIncluded/index.tsx
@@ -0,0 +1,60 @@
+import Title from "@/components/Title";
+import styles from "./styles.module.scss";
+import { compatibilityV2Prefix } from "@/routes";
+import { useTranslations } from "@/hooks/translations";
+import { ELocalesPlacement } from "@/locales";
+
+function WhatIncluded() {
+ const { translate } = useTranslations(ELocalesPlacement.CompatibilityV2);
+ return (
+ {minutes}
:
+ {seconds}
+
+
+ {translate("/trial-payment.what_included.title")}
+
+
+ );
+}
+
+export default WhatIncluded;
diff --git a/src/components/CompatibilityV2/components/WhatIncluded/styles.module.scss b/src/components/CompatibilityV2/components/WhatIncluded/styles.module.scss
new file mode 100644
index 0000000..bc5f4d9
--- /dev/null
+++ b/src/components/CompatibilityV2/components/WhatIncluded/styles.module.scss
@@ -0,0 +1,32 @@
+.container {
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ border-radius: 30px;
+ background: linear-gradient(to bottom, #5891ff31, #ffffff31);
+ padding: 18px 29px 35px;
+ margin-top: 31px;
+}
+
+.title {
+ font-size: 28px;
+ color: #222222;
+}
+
+.row {
+ width: 100%;
+ display: grid;
+ grid-template-columns: 42px 1fr;
+ align-items: center;
+ gap: 12px;
+ margin-bottom: 12px;
+
+ & > .text {
+ font-size: 16px;
+
+ & > b {
+ font-size: 18px;
+ }
+ }
+}
diff --git a/src/components/CompatibilityV2/data/index.tsx b/src/components/CompatibilityV2/data/index.tsx
new file mode 100644
index 0000000..3369fe1
--- /dev/null
+++ b/src/components/CompatibilityV2/data/index.tsx
@@ -0,0 +1,2 @@
+export const answerTimeOut = 600;
+export const images = (path: string) => (`/v2/compatibility/${path}`)
diff --git a/src/components/CompatibilityV2/images/SVG/Air/index.tsx b/src/components/CompatibilityV2/images/SVG/Air/index.tsx
new file mode 100644
index 0000000..1326401
--- /dev/null
+++ b/src/components/CompatibilityV2/images/SVG/Air/index.tsx
@@ -0,0 +1,75 @@
+function AirSVG() {
+ return (
+
+ );
+}
+
+export default AirSVG;
diff --git a/src/components/CompatibilityV2/images/SVG/Blob/index.tsx b/src/components/CompatibilityV2/images/SVG/Blob/index.tsx
new file mode 100644
index 0000000..6273fff
--- /dev/null
+++ b/src/components/CompatibilityV2/images/SVG/Blob/index.tsx
@@ -0,0 +1,18 @@
+import { SVGProps } from "react"
+
+function Blob(props: SVGProps
+ 
+
+
+ + {translate("/trial-payment.what_included.point1", { + bold: ( + {translate("/trial-payment.what_included.point1_bold")} + ), + })} +
+
+ 
+
+
+ + {translate("/trial-payment.what_included.point2", { + bold: ( + {translate("/trial-payment.what_included.point2_bold")} + ), + })} +
+
+ 
+
+
+ + {translate("/trial-payment.what_included.point3", { + bold: ( + {translate("/trial-payment.what_included.point3_bold")} + ), + })} +
+
+ 
+
+
+ + {translate("/trial-payment.what_included.point4")} +
+
+ 
+
+
+ + {translate("/trial-payment.what_included.point5")} +
+
+
+ {translate("/birthdate.title")}
+
+ setIsDisabled(true)}
+ inputClassName="date-picker-input"
+ />
+
+ 
+
+ );
+}
+
+export default Birthdate;
diff --git a/src/components/CompatibilityV2/pages/Birthdate/styles.module.scss b/src/components/CompatibilityV2/pages/Birthdate/styles.module.scss
new file mode 100644
index 0000000..0d9f9df
--- /dev/null
+++ b/src/components/CompatibilityV2/pages/Birthdate/styles.module.scss
@@ -0,0 +1,22 @@
+.page-container {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+
+.title {
+ margin-bottom: 0;
+ font-size: 27px;
+}
+
+.description {
+ margin: 16px 0 25px;
+ text-align: center;
+ font-size: 20px;
+}
+
+.image {
+ margin-top: 56px;
+}
diff --git a/src/components/CompatibilityV2/pages/BirthdatePartner/index.tsx b/src/components/CompatibilityV2/pages/BirthdatePartner/index.tsx
new file mode 100644
index 0000000..f382ae1
--- /dev/null
+++ b/src/components/CompatibilityV2/pages/BirthdatePartner/index.tsx
@@ -0,0 +1,88 @@
+import Title from "@/components/Title";
+import styles from "./styles.module.scss";
+import { DatePicker } from "@/components/DateTimePicker";
+import { useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { actions, selectors } from "@/store";
+import Button from "../../components/Button";
+import metricService from "@/services/metric/metricService";
+import routes, { compatibilityV2Prefix } from "@/routes";
+import { useNavigate } from "react-router-dom";
+import { useTranslations } from "@/hooks/translations";
+import { ELocalesPlacement } from "@/locales";
+import { useSession } from "@/hooks/session/useSession";
+import { ESourceAuthorization } from "@/api/resources/User";
+
+function BirthdatePartner() {
+ const { translate } = useTranslations(ELocalesPlacement.CompatibilityV2);
+ const { updateSession } = useSession();
+ const navigate = useNavigate();
+ const dispatch = useDispatch();
+ const { partnerBirthdate } = useSelector(selectors.selectQuestionnaire);
+ const [birthdate, setBirthdate] = useState(partnerBirthdate);
+ const [isDisabled, setIsDisabled] = useState(true);
+
+ const handleValid = (_birthdate: string) => {
+ setBirthdate(_birthdate);
+ setIsDisabled(_birthdate === "");
+ };
+
+ const getAge = () => {
+ const today = new Date();
+ const birthDate = new Date(birthdate);
+ let age = today?.getFullYear() - birthDate?.getFullYear();
+ const m = today?.getMonth() - birthDate?.getMonth();
+ if (m < 0 || (m === 0 && today?.getDate() < birthDate?.getDate())) {
+ age--;
+ }
+ return age;
+ };
+
+ const handleNext = () => {
+ const age = getAge();
+ metricService.userParams({
+ age,
+ });
+ // dispatch(actions.form.addDate(birthdate));
+ dispatch(actions.questionnaire.update({ partnerBirthdate: birthdate }));
+ navigate(routes.client.compatibilityV2PalmsInformationPartner());
+ updateSession(
+ {
+ partner: {
+ birthdate: `${birthdate} 00:00`,
+ },
+ },
+ ESourceAuthorization["aura.compatibility.v2"]
+ );
+ };
+
+ return (
+ {translate("/birthdate.text")}
+
+
+
+ {translate("/birthdate-partner.title")}
+
+ setIsDisabled(true)}
+ inputClassName="date-picker-input"
+ />
+
+
+
+ );
+}
+
+export default BirthdatePartner;
diff --git a/src/components/CompatibilityV2/pages/BirthdatePartner/styles.module.scss b/src/components/CompatibilityV2/pages/BirthdatePartner/styles.module.scss
new file mode 100644
index 0000000..0d9f9df
--- /dev/null
+++ b/src/components/CompatibilityV2/pages/BirthdatePartner/styles.module.scss
@@ -0,0 +1,22 @@
+.page-container {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+
+.title {
+ margin-bottom: 0;
+ font-size: 27px;
+}
+
+.description {
+ margin: 16px 0 25px;
+ text-align: center;
+ font-size: 20px;
+}
+
+.image {
+ margin-top: 56px;
+}
diff --git a/src/components/CompatibilityV2/pages/Camera/index.tsx b/src/components/CompatibilityV2/pages/Camera/index.tsx
new file mode 100644
index 0000000..8649f40
--- /dev/null
+++ b/src/components/CompatibilityV2/pages/Camera/index.tsx
@@ -0,0 +1,221 @@
+import styles from "./styles.module.scss";
+import { DataURIToBlob } from "@/services/data";
+import { useApi } from "@/api";
+import { IPalmistryFinger, IPalmistryLine } from "@/api/resources/Palmistry";
+import { ICompatibilityV2FingerLocal } from "@/store/compatibilityV2";
+import { useDispatch } from "react-redux";
+import { actions } from "@/store";
+import { useNavigate } from "react-router-dom";
+import routes from "@/routes";
+import { useState } from "react";
+import Loader, { LoaderColor } from "@/components/Loader";
+import UploadModal from "@/components/palmistry/upload-modal/upload-modal";
+import Toast from "@/components/pages/ABDesign/v1/components/Toast";
+import { useTranslations } from "@/hooks/translations";
+import { ELocalesPlacement } from "@/locales";
+import CameraModal from "../../components/CameraModal";
+
+const isProduction = import.meta.env.MODE === "production";
+
+enum EToastVisible {
+ "try_again" = "try_again",
+ "try_again_or_next" = "try_again_or_next",
+}
+
+function Camera() {
+ const { translate } = useTranslations(ELocalesPlacement.CompatibilityV2);
+ const navigate = useNavigate();
+ const api = useApi();
+ const dispatch = useDispatch();
+ const [isLoading, setIsLoading] = useState(false);
+ const [uploadMenuModalIsOpen, setUploadMenuModalIsOpen] = useState(false);
+ const [toastVisible, setToastVisible] = useState{translate("/birthdate-partner.text")}
+
+
+ {translate("/camera.bad_photo")}
+
+
+
+ {translate("/camera.do_better")}
+
+
+
+
+
+
+
+ {translate("/checking-phone.title")}
+
+ {answers.map((answers, index) => (
+ handleClick(answers.id)}
+ />
+ ))}
+
+ );
+}
+
+export default CheckingPhone;
diff --git a/src/components/CompatibilityV2/pages/CheckingPhone/styles.module.scss b/src/components/CompatibilityV2/pages/CheckingPhone/styles.module.scss
new file mode 100644
index 0000000..5bfbb7c
--- /dev/null
+++ b/src/components/CompatibilityV2/pages/CheckingPhone/styles.module.scss
@@ -0,0 +1,3 @@
+.container {
+ width: 100%;
+}
diff --git a/src/components/CompatibilityV2/pages/DateEvent/index.tsx b/src/components/CompatibilityV2/pages/DateEvent/index.tsx
new file mode 100644
index 0000000..fd7a471
--- /dev/null
+++ b/src/components/CompatibilityV2/pages/DateEvent/index.tsx
@@ -0,0 +1,91 @@
+import Title from "@/components/Title";
+import styles from "./styles.module.scss";
+import { DatePicker } from "@/components/DateTimePicker";
+import { useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { actions, selectors } from "@/store";
+import Button from "../../components/Button";
+import metricService from "@/services/metric/metricService";
+import routes, { compatibilityV2Prefix } from "@/routes";
+import { useNavigate } from "react-router-dom";
+import { useTranslations } from "@/hooks/translations";
+import { ELocalesPlacement } from "@/locales";
+import { useSession } from "@/hooks/session/useSession";
+import { ESourceAuthorization } from "@/api/resources/User";
+
+function DateEvent() {
+ const { translate } = useTranslations(ELocalesPlacement.CompatibilityV2);
+ const { updateSession } = useSession();
+ const navigate = useNavigate();
+ const dispatch = useDispatch();
+ const { dateEvent: dateEventFromStore, relationshipStatus } = useSelector(selectors.selectCompatibilityV2Answers);
+ const translateSeparator = relationshipStatus === "single" ? "single" : "relationship";
+
+ const [dateEvent, setDateEvent] = useState(dateEventFromStore);
+ const [isDisabled, setIsDisabled] = useState(true);
+
+ const handleValid = (_birthdate: string) => {
+ setDateEvent(_birthdate);
+ setIsDisabled(_birthdate === "");
+ };
+
+ const getAge = () => {
+ const today = new Date();
+ const date = new Date(dateEvent);
+ let age = today?.getFullYear() - date?.getFullYear();
+ const m = today?.getMonth() - date?.getMonth();
+ if (m < 0 || (m === 0 && today?.getDate() < date?.getDate())) {
+ age--;
+ }
+ return age;
+ };
+
+ const handleNext = () => {
+ const age = getAge();
+ metricService.userParams({
+ age,
+ });
+ // dispatch(actions.form.addDate(birthdate));
+ dispatch(actions.compatibilityV2Answers.update({ dateEvent }));
+ navigate(routes.client.compatibilityV2HeadOrHeart());
+ updateSession(
+ {
+ answers: {
+ date_event: `${dateEvent} 00:00`,
+ }
+ },
+ ESourceAuthorization["aura.compatibility.v2"]
+ );
+ };
+
+ return (
+
+
+ {translate(`/date-event.${translateSeparator}.title`)}
+
+ setIsDisabled(true)}
+ inputClassName="date-picker-input"
+ differenceOfMaximumAndCurrentYear={0}
+ />
+
+
+
+ );
+}
+
+export default DateEvent;
diff --git a/src/components/CompatibilityV2/pages/DateEvent/styles.module.scss b/src/components/CompatibilityV2/pages/DateEvent/styles.module.scss
new file mode 100644
index 0000000..0d9f9df
--- /dev/null
+++ b/src/components/CompatibilityV2/pages/DateEvent/styles.module.scss
@@ -0,0 +1,22 @@
+.page-container {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+
+.title {
+ margin-bottom: 0;
+ font-size: 27px;
+}
+
+.description {
+ margin: 16px 0 25px;
+ text-align: center;
+ font-size: 20px;
+}
+
+.image {
+ margin-top: 56px;
+}
diff --git a/src/components/CompatibilityV2/pages/ElementResonates/index.tsx b/src/components/CompatibilityV2/pages/ElementResonates/index.tsx
new file mode 100644
index 0000000..9a5db65
--- /dev/null
+++ b/src/components/CompatibilityV2/pages/ElementResonates/index.tsx
@@ -0,0 +1,106 @@
+import Title from "@/components/Title";
+import styles from "./styles.module.scss";
+import Answer from "../../components/Answer";
+import { useDispatch, useSelector } from "react-redux";
+import { actions, selectors } from "@/store";
+import { sleep } from "@/services/date";
+import { useNavigate } from "react-router-dom";
+import routes from "@/routes";
+import { answerTimeOut } from "../../data";
+import { useTranslations } from "@/hooks/translations";
+import { ELocalesPlacement } from "@/locales";
+import { useMemo } from "react";
+import WaterSVG from "../../images/SVG/Water";
+import FireSVG from "../../images/SVG/Fire";
+import AirSVG from "../../images/SVG/Air";
+import EarthSVG from "../../images/SVG/Earth";
+import { ELottieKeys, useLottie } from "@/hooks/lottie/useLottie";
+import { IAnswersSessionCompatibilityV2 } from "@/api/resources/Session";
+import { useSession } from "@/hooks/session/useSession";
+import { ESourceAuthorization } from "@/api/resources/User";
+import DarknessSVG from "../../images/SVG/Darkness";
+import LightSVG from "../../images/SVG/Light";
+
+function ElementResonates() {
+ const { translate } = useTranslations(ELocalesPlacement.CompatibilityV2);
+ const { updateSession } = useSession();
+ const navigate = useNavigate();
+ const dispatch = useDispatch();
+ const { elementResonates } = useSelector(selectors.selectCompatibilityV2Answers);
+ useLottie({
+ preloadKey: ELottieKeys.letScan,
+ });
+
+ const answers: {
+ id: IAnswersSessionCompatibilityV2["element_resonates"];
+ title: string;
+ Icon: JSX.Element;
+ }[] = useMemo(
+ () => [
+ {
+ id: "air",
+ title: translate("/element-resonates.answer3"),
+ Icon: {translate(`/date-event.${translateSeparator}.text`)}
+
+
+
+ {translate("/element-resonates.title")}
+
+ {answers.map(({ Icon, ...answers }, index) => (
+ handleClick(answers.id)}
+ className={styles.answer}
+ >
+ {Icon}
+
+ ))}
+
+ );
+}
+
+export default ElementResonates;
diff --git a/src/components/CompatibilityV2/pages/ElementResonates/styles.module.scss b/src/components/CompatibilityV2/pages/ElementResonates/styles.module.scss
new file mode 100644
index 0000000..4a0a092
--- /dev/null
+++ b/src/components/CompatibilityV2/pages/ElementResonates/styles.module.scss
@@ -0,0 +1,9 @@
+.container {
+ width: 100%;
+}
+
+.answer {
+ justify-content: flex-start;
+ padding-left: 15px;
+ gap: 6px;
+}
diff --git a/src/components/CompatibilityV2/pages/Email/index.tsx b/src/components/CompatibilityV2/pages/Email/index.tsx
new file mode 100644
index 0000000..7026813
--- /dev/null
+++ b/src/components/CompatibilityV2/pages/Email/index.tsx
@@ -0,0 +1,194 @@
+import Title from "@/components/Title";
+import styles from "./styles.module.scss";
+import EmailInput from "@/components/pages/ABDesign/v1/pages/EmailEnterPage/EmailInput";
+import { useCallback, useEffect, useState } from "react";
+import { useDispatch } from "react-redux";
+import { actions } from "@/store";
+import Button from "../../components/Button";
+import { useAuthentication } from "@/hooks/authentication/use-authentication";
+import { ESourceAuthorization } from "@/api/resources/User";
+import { useNavigate } from "react-router-dom";
+import routes from "@/routes";
+import Loader, { LoaderColor } from "@/components/Loader";
+import Policy from "@/components/Policy";
+import { useTranslations } from "@/hooks/translations";
+import { ELocalesPlacement } from "@/locales";
+import metricService, {
+ EGoals,
+ EMetrics,
+ useMetricABFlags,
+} from "@/services/metric/metricService";
+import NameInput from "@/components/pages/ABDesign/v1/pages/EmailEnterPage/NameInput";
+import { useSession } from "@/hooks/session/useSession";
+
+function Email() {
+ const { updateSession } = useSession();
+ const dispatch = useDispatch();
+ const navigate = useNavigate();
+ const { error, isLoading, token, user, authorization } = useAuthentication();
+ const { translate } = useTranslations(ELocalesPlacement.CompatibilityV2);
+
+ const [email, setEmail] = useState("");
+ const [name, setName] = useState("");
+ const [isValidEmail, setIsValidEmail] = useState(false);
+ const [isValidName, setIsValidName] = useState(true);
+ const [isDisabled, setIsDisabled] = useState(true);
+ const [isAuth, setIsAuth] = useState(false);
+
+ const { flags } = useMetricABFlags();
+ const auraVideoTrial = flags?.auraVideoTrial?.[0];
+
+ const handleValidEmail = (email: string) => {
+ dispatch(actions.form.addEmail(email));
+ setEmail(email);
+ setIsValidEmail(true);
+ };
+
+ const handleValidName = (name: string) => {
+ if (name) {
+ dispatch(
+ actions.user.update({
+ username: name,
+ })
+ );
+ }
+ setName(name);
+ setIsValidName(true);
+ };
+
+ useEffect(() => {
+ if (isValidName && isValidEmail) {
+ setIsDisabled(false);
+ } else {
+ setIsDisabled(true);
+ }
+ }, [isValidEmail, email, isValidName, name]);
+
+ const handleClick = () => {
+ authorize();
+ // metricService.reachGoal(EGoals.ENTERED_EMAIL, [
+ // EMetrics.KLAVIYO,
+ // EMetrics.YANDEX,
+ // EMetrics.FACEBOOK,
+ // ]);
+ };
+
+ const authorize = async () => {
+ updateSession(
+ {
+ profile: {
+ name,
+ },
+ },
+ ESourceAuthorization["aura.compatibility.v2"]
+ );
+ metricService.reachGoal(EGoals.LEAD, [EMetrics.FACEBOOK]);
+ metricService.reachGoal(EGoals.ENTERED_EMAIL, [
+ EMetrics.KLAVIYO,
+ EMetrics.YANDEX,
+ EMetrics.FACEBOOK,
+ ]);
+ metricService.reachGoal(EGoals.ENTERED_EMAIL, [EMetrics.YANDEX]);
+ await authorization(email, ESourceAuthorization["aura.compatibility.v2"]);
+ };
+
+ const handleNext = useCallback(() => {
+ if (auraVideoTrial === "on") {
+ return navigate(routes.client.compatibilityV2TrialChoiceVideo());
+ }
+ return navigate(routes.client.compatibilityV2TrialChoice());
+ }, [auraVideoTrial, navigate]);
+
+ useEffect(() => {
+ if (user && token?.length && !isLoading && !error) {
+ setIsAuth(true);
+ dispatch(actions.paywalls.resetIsMustUpdate());
+ const timeout = setTimeout(() => {
+ handleNext();
+ }, 1000);
+ return () => {
+ clearTimeout(timeout);
+ };
+ }
+ }, [dispatch, error, handleNext, isLoading, token?.length, user]);
+
+ return (
+ <>
+ {answers.title}
+{translate("/email.not_share")}
+ +
+
+ {translate("/favorite-color.title")}
+
+ {answers.map((answers, index) => (
+ handleClick(answers.id)}
+ className={styles.answer}
+ selectedClassName={styles.selected}
+ >
+
+ ))}
+
+ );
+}
+
+export default FavoriteColor;
diff --git a/src/components/CompatibilityV2/pages/FavoriteColor/styles.module.scss b/src/components/CompatibilityV2/pages/FavoriteColor/styles.module.scss
new file mode 100644
index 0000000..d33ee7a
--- /dev/null
+++ b/src/components/CompatibilityV2/pages/FavoriteColor/styles.module.scss
@@ -0,0 +1,23 @@
+.container {
+ width: 100%;
+}
+
+.answer {
+ justify-content: flex-start;
+ padding-left: 70px;
+ gap: 6px;
+ object-fit: cover;
+ background-repeat: no-repeat;
+ position: relative;
+ overflow: hidden;
+
+ &.selected {
+ transform: scale(1.02);
+ }
+}
+
+.tab {
+ position: absolute;
+ left: 0;
+ top: 0;
+}
diff --git a/src/components/CompatibilityV2/pages/FindHappiness/index.tsx b/src/components/CompatibilityV2/pages/FindHappiness/index.tsx
new file mode 100644
index 0000000..a434de2
--- /dev/null
+++ b/src/components/CompatibilityV2/pages/FindHappiness/index.tsx
@@ -0,0 +1,86 @@
+import routes, { compatibilityV2Prefix } from "@/routes";
+import styles from "./styles.module.scss";
+import Title from "@/components/Title";
+import Button from "../../components/Button";
+import { useLocation, useNavigate } from "react-router-dom";
+import { useTranslations } from "@/hooks/translations";
+import { ELocalesPlacement } from "@/locales";
+import { useDispatch } from "react-redux";
+import { useEffect } from "react";
+import { actions } from "@/store";
+// import StarSVG from "../../images/SVG/Star";
+import { usePreloadImages } from "@/hooks/preload/images";
+
+function FindHappiness() {
+ const navigate = useNavigate();
+ const dispatch = useDispatch();
+ const location = useLocation();
+ const { translate } = useTranslations(ELocalesPlacement.CompatibilityV2);
+ usePreloadImages(["/male-gender.webp", "/female-gender.webp"]);
+
+ useEffect(() => {
+ const feature = location.pathname.replace(
+ routes.client.compatibilityV2Welcome(),
+ ""
+ );
+ dispatch(
+ actions.userConfig.setFeature(
+ feature.includes("/v1/gender") ? "" : feature
+ )
+ );
+ }, [dispatch, location.pathname]);
+
+ return (
+ <>
+ {/* {answers.title}
+
+
*/}
+
+ 
+
+
+ -
+
- {translate("/find-your-happiness.point1")} +
- + {translate("/find-your-happiness.point2")} + +
+
+ -
+
- {translate("/find-your-happiness.point3")} +
- {translate("/find-your-happiness.point4")} +
+
+
+ -
+
- + {translate("/find-your-happiness.advantage1")} + +
- + {translate("/find-your-happiness.advantage2")} + +
- + {translate("/find-your-happiness.advantage3")} + +
+
+
+ + {translate("/find-your-happiness.text")} +
+ + ); +} + +export default FindHappiness; diff --git a/src/components/CompatibilityV2/pages/FindHappiness/styles.module.scss b/src/components/CompatibilityV2/pages/FindHappiness/styles.module.scss new file mode 100644 index 0000000..e3e7350 --- /dev/null +++ b/src/components/CompatibilityV2/pages/FindHappiness/styles.module.scss @@ -0,0 +1,77 @@ +.blocks-container { + width: 100%; + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + gap: 10px; + + & > .block { + display: flex; + flex-direction: row; + align-items: center; + max-height: 80px; + padding: 12px 9px; + border: solid 2px #3871c1; + border-radius: 10px; + gap: 6px; + + & > ol { + list-style-type: disc; + padding-left: 15px; + + & > li { + margin-bottom: 2px; + font-size: 12px; + } + } + } +} + +.image { + width: 100%; + max-width: 250px; + margin-top: -21px; + min-height: 341px; +} + +.title { + margin-bottom: 0; +} + +.description { + text-align: center; + font-size: 14px; +} + +.button-container { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + position: sticky; + bottom: 0dvh; + padding: 16px 0; + -webkit-backdrop-filter: blur(2px); + backdrop-filter: blur(2px); +} + +.advantages { + width: 100%; + text-align: center; + margin: 16px 0; + display: flex; + flex-direction: column; + gap: 8px; +} + +.list { + list-style: disc; + padding-left: 20px; + margin: 0; + text-align: left; +} + +.list li { + margin-bottom: 8px; +} \ No newline at end of file diff --git a/src/components/CompatibilityV2/pages/Gender/index.tsx b/src/components/CompatibilityV2/pages/Gender/index.tsx new file mode 100644 index 0000000..0801db6 --- /dev/null +++ b/src/components/CompatibilityV2/pages/Gender/index.tsx @@ -0,0 +1,111 @@ +import styles from "./styles.module.scss"; +import Title from "@/components/Title"; +import { useDispatch, useSelector } from "react-redux"; +import { actions, selectors } from "@/store"; +import { Gender } from "@/data"; +import PrivacyPolicy from "@/components/pages/ABDesign/v1/components/PrivacyPolicy"; +// import Toast from "@/components/pages/ABDesign/v1/components/Toast"; +import { useTranslations } from "@/hooks/translations"; +import { ELocalesPlacement } from "@/locales"; +import { useCallback, useEffect, useState } from "react"; +import { sleep } from "@/services/date"; +import metricService from "@/services/metric/metricService"; +import { genders } from "@/components/pages/ABDesign/v1/data/genders"; +import { useNavigate } from "react-router-dom"; +import routes from "@/routes"; +import { usePreloadImages } from "@/hooks/preload/images"; +import { ELottieKeys, useLottie } from "@/hooks/lottie/useLottie"; +import { useSession } from "@/hooks/session/useSession"; +import { EGender, ESourceAuthorization } from "@/api/resources/User"; +import AlreadyHaveAccount from "@/components/ui/AlreadyHaveAccount"; +import Answer from "../../components/Answer"; + +function GenderPage() { + const { translate } = useTranslations(ELocalesPlacement.CompatibilityV2); + const dispatch = useDispatch(); + const navigate = useNavigate(); + const { createSession, updateSession } = useSession(); + const { checked: privacyPolicyChecked } = useSelector( + selectors.selectPrivacyPolicy + ); + + const { gender } = useSelector(selectors.selectQuestionnaire); + const [isSelected, setIsSelected] = useState(false); + usePreloadImages(["/v1/palmistry/hand-with-eye.svg"]); + useLottie({ + preloadKey: ELottieKeys.handSymbols, + }); + + const localGenders = genders.map((gender) => ({ + id: gender.id, + title: translate(gender.id, undefined, ELocalesPlacement.V1), + })); + + const selectGender = (_gender: Gender | null) => { + dispatch(actions.privacyPolicy.updateChecked(true)); + setIsSelected(true); + dispatch(actions.questionnaire.update({ gender: _gender?.id })); + }; + + const handleNext = useCallback(async () => { + if (!gender) return; + dispatch(actions.privacyPolicy.updateChecked(true)); + await sleep(1000); + metricService.userParams({ + gender: genders.find((g) => g.id === gender)?.name, + }); + const session = await createSession( + ESourceAuthorization["aura.compatibility.v2"] + ); + if (session?.sessionId?.length) { + updateSession( + { + profile: { + gender: EGender[gender as keyof typeof EGender], + }, + }, + ESourceAuthorization["aura.compatibility.v2"], + session.sessionId + ); + } + return navigate(routes.client.compatibilityV2Birthdate()); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [gender, navigate]); + + useEffect(() => { + if (privacyPolicyChecked && gender && isSelected) { + handleNext(); + } + }, [gender, handleNext, isSelected, privacyPolicyChecked]); + + return ( + <> +{translate("/gender.description", {
+ br:
,
+ })}
+ {localGenders.map((_gender, index) => (
+ selectGender(genders.find((g) => g.id === _gender.id) ?? null)}
+ />
+ ))}
+
+ {translate("/gender-partner.description", {
+ br:
,
+ })}
+ {localGenders?.map((_gender, index) => (
+ selectGender(genders.find((g) => g.id === _gender?.id) ?? null)}
+ />
+ ))}
+
+ {/*
+
+ {translate("/head-or-heart.title")}
+
+ {answers.map((answers, index) => (
+ handleClick(answers.id)}
+ />
+ ))}
+
+ );
+}
+
+export default HeadOrHeart;
diff --git a/src/components/CompatibilityV2/pages/HeadOrHeart/styles.module.scss b/src/components/CompatibilityV2/pages/HeadOrHeart/styles.module.scss
new file mode 100644
index 0000000..5bfbb7c
--- /dev/null
+++ b/src/components/CompatibilityV2/pages/HeadOrHeart/styles.module.scss
@@ -0,0 +1,3 @@
+.container {
+ width: 100%;
+}
diff --git a/src/components/CompatibilityV2/pages/HeadOrHeartResult/index.tsx b/src/components/CompatibilityV2/pages/HeadOrHeartResult/index.tsx
new file mode 100644
index 0000000..eaf9474
--- /dev/null
+++ b/src/components/CompatibilityV2/pages/HeadOrHeartResult/index.tsx
@@ -0,0 +1,140 @@
+// import { ELottieKeys, useLottie } from "@/hooks/lottie/useLottie";
+import styles from "./styles.module.scss";
+// import { DotLottieReact } from "@lottiefiles/dotlottie-react";
+import Title from "@/components/Title";
+import { useTranslations } from "@/hooks/translations";
+import { ELocalesPlacement } from "@/locales";
+import { getZodiacSignByDate } from "@/services/zodiac-sign";
+import { useSelector } from "react-redux";
+import { selectors } from "@/store";
+import Button from "../../components/Button";
+import { useNavigate } from "react-router-dom";
+import routes from "@/routes";
+
+// const animations = {
+// both: ELottieKeys.scalesNeutralPalmistry,
+// heart: ELottieKeys.scalesHeartPalmistry,
+// head: ELottieKeys.scalesHeadPalmistry,
+// depends: ELottieKeys.scalesNeutralPalmistry,
+// };
+
+function HeadOrHeartResult() {
+ const navigate = useNavigate();
+ const { translate } = useTranslations(ELocalesPlacement.CompatibilityV2);
+ const { headOrHeart } = useSelector(selectors.selectCompatibilityV2Answers);
+ const { gender, partnerGender, partnerBirthdate } = useSelector(selectors.selectQuestionnaire);
+
+ // const { animationData } = useLottie({
+ // loadKey: animations[headOrHeart as keyof typeof animations],
+ // });
+
+ const birthdate = useSelector(selectors.selectBirthdate);
+ const zodiacSign = getZodiacSignByDate(birthdate);
+ const zodiacSignPartner = getZodiacSignByDate(partnerBirthdate);
+
+ const handleBack = () => {
+ navigate(-1);
+ };
+
+ const handleNext = () => {
+ // navigate(`${routes.client.compatibilityV2RelateFollowing()}/1`);
+ navigate(routes.client.compatibilityV2LetScan());
+ };
+
+ return (
+
+ {animationData && (
+
*/}
+
+
+
+
+
+
+ {translate("/let-scan.title")}
+
+
+ );
+}
+
+export default LetScan;
diff --git a/src/components/CompatibilityV2/pages/LetScan/styles.module.scss b/src/components/CompatibilityV2/pages/LetScan/styles.module.scss
new file mode 100644
index 0000000..5baae3c
--- /dev/null
+++ b/src/components/CompatibilityV2/pages/LetScan/styles.module.scss
@@ -0,0 +1,39 @@
+.page {
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+
+.image {
+ margin-top: 80px;
+}
+
+.title {
+ margin-top: 36px;
+}
+
+.text {
+ font-size: 20px;
+ text-align: center;
+ line-height: 125%;
+}
+
+.button {
+ margin-top: 30px;
+}
+
+.biometric {
+ text-align: center;
+ line-height: 125%;
+ margin-top: 20px;
+
+ & > svg {
+ display: none;
+ }
+}
+
+.lottie-animation {
+ aspect-ratio: 116 / 87;
+ max-width: 360px;
+}
\ No newline at end of file
diff --git a/src/components/CompatibilityV2/pages/PalmsInformation/index.tsx b/src/components/CompatibilityV2/pages/PalmsInformation/index.tsx
new file mode 100644
index 0000000..7f6f85d
--- /dev/null
+++ b/src/components/CompatibilityV2/pages/PalmsInformation/index.tsx
@@ -0,0 +1,93 @@
+import routes from "@/routes";
+import styles from "./styles.module.scss";
+import Title from "@/components/Title";
+import Button from "../../components/Button";
+import Policy from "@/components/Policy";
+import { useTranslations } from "@/hooks/translations";
+import { useNavigate } from "react-router-dom";
+import { ELocalesPlacement } from "@/locales";
+// import { DotLottieReact } from "@lottiefiles/dotlottie-react";
+import { ELottieKeys, useLottie } from "@/hooks/lottie/useLottie";
+import { selectors } from "@/store";
+import { useSelector } from "react-redux";
+import { images } from "../../data";
+import { getZodiacSignByDate } from "@/services/zodiac-sign";
+
+function PalmsInformation() {
+ const { translate } = useTranslations(ELocalesPlacement.CompatibilityV2);
+ const { gender, birthdate } = useSelector(selectors.selectQuestionnaire);
+ const zodiacSign = getZodiacSignByDate(birthdate);
+ const navigate = useNavigate();
+ // const { animationData } =
+ useLottie({
+ // loadKey: ELottieKeys.handSymbols,
+ preloadKey: ELottieKeys.scalesHeadPalmistry,
+ });
+
+ const handleNext = () => {
+ navigate(routes.client.compatibilityV2RelationshipStatus());
+ };
+
+ return (
+ {translate("/let-scan.text")}
+ +
+ {/* {animationData && (
+
+ {translate(`/palms-information.${zodiacSign.toLowerCase()}.title`)}
+
+
+ {translate("privacy_policy", {
+ eulaLink: (
+
+ {translate("eula_link")}
+
+ ),
+ privacyLink: (
+
+ {translate("privacy_notice")}
+
+ ),
+ clickHere: (
+
+ {translate("policy_here")}
+
+ ),
+ })}
+
+
+ );
+}
+
+export default PalmsInformation;
diff --git a/src/components/CompatibilityV2/pages/PalmsInformation/styles.module.scss b/src/components/CompatibilityV2/pages/PalmsInformation/styles.module.scss
new file mode 100644
index 0000000..bd40adf
--- /dev/null
+++ b/src/components/CompatibilityV2/pages/PalmsInformation/styles.module.scss
@@ -0,0 +1,59 @@
+.page-container {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding-top: 16px;
+}
+
+.title {
+ font-size: 27px;
+ text-align: left;
+ font-weight: 500;
+ margin-top: 42px;
+ max-width: 400px;
+}
+
+.lottie-animation {
+ aspect-ratio: 233 / 261;
+ max-width: 360px;
+}
+
+.zodiac {
+ position: relative;
+ width: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ margin-bottom: -150px;
+
+ & > img {
+ height: 100%;
+ position: relative;
+ z-index: -2;
+ }
+
+ &::after {
+ content: "";
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ height: 60%;
+ background: linear-gradient(to bottom,
+ rgba(255, 255, 255, 0) 0%,
+ rgba(255, 255, 255, .7) 10%,
+ rgba(255, 255, 255, 1) 15%,
+ rgba(255, 255, 255, 1) 30%,
+ rgba(255, 255, 255, 1) 40%,
+ rgba(255, 255, 255, 1) 100%);
+ pointer-events: none;
+ z-index: -1;
+ }
+}
+
+.description {
+ white-space: pre-line;
+ margin-bottom: 24px;
+}
\ No newline at end of file
diff --git a/src/components/CompatibilityV2/pages/PalmsInformationPartner/index.tsx b/src/components/CompatibilityV2/pages/PalmsInformationPartner/index.tsx
new file mode 100644
index 0000000..b493506
--- /dev/null
+++ b/src/components/CompatibilityV2/pages/PalmsInformationPartner/index.tsx
@@ -0,0 +1,93 @@
+import routes from "@/routes";
+import styles from "./styles.module.scss";
+import Title from "@/components/Title";
+import Button from "../../components/Button";
+import { useTranslations } from "@/hooks/translations";
+import { useNavigate } from "react-router-dom";
+import { ELocalesPlacement } from "@/locales";
+// import { DotLottieReact } from "@lottiefiles/dotlottie-react";
+import { ELottieKeys, useLottie } from "@/hooks/lottie/useLottie";
+import { selectors } from "@/store";
+import { useSelector } from "react-redux";
+import { images } from "../../data";
+import { getZodiacSignByDate } from "@/services/zodiac-sign";
+
+function PalmsInformationPartner() {
+ const { translate } = useTranslations(ELocalesPlacement.CompatibilityV2);
+ const { partnerGender, partnerBirthdate } = useSelector(selectors.selectQuestionnaire);
+
+ const zodiacSign = getZodiacSignByDate(partnerBirthdate);
+ const navigate = useNavigate();
+ // const { animationData } =
+ useLottie({
+ // loadKey: ELottieKeys.handSymbols,
+ preloadKey: ELottieKeys.scalesHeadPalmistry,
+ });
+
+ const handleNext = () => {
+ navigate(routes.client.compatibilityV2DateEvent());
+ };
+
+ return (
+
+ }.webp`)})
+
+
+ + {translate(`/palms-information.${zodiacSign.toLowerCase()}.description`)} +
+ +
+ {/* {animationData && (
+
+ {translate(`/palms-information-partner.${zodiacSign?.toLowerCase()}.title`)}
+
+
+ {translate("privacy_policy", {
+ eulaLink: (
+
+ {translate("eula_link")}
+
+ ),
+ privacyLink: (
+
+ {translate("privacy_notice")}
+
+ ),
+ clickHere: (
+
+ {translate("policy_here")}
+
+ ),
+ })}
+ */}
+
+ );
+}
+
+export default PalmsInformationPartner;
diff --git a/src/components/CompatibilityV2/pages/PalmsInformationPartner/styles.module.scss b/src/components/CompatibilityV2/pages/PalmsInformationPartner/styles.module.scss
new file mode 100644
index 0000000..bd40adf
--- /dev/null
+++ b/src/components/CompatibilityV2/pages/PalmsInformationPartner/styles.module.scss
@@ -0,0 +1,59 @@
+.page-container {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding-top: 16px;
+}
+
+.title {
+ font-size: 27px;
+ text-align: left;
+ font-weight: 500;
+ margin-top: 42px;
+ max-width: 400px;
+}
+
+.lottie-animation {
+ aspect-ratio: 233 / 261;
+ max-width: 360px;
+}
+
+.zodiac {
+ position: relative;
+ width: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ margin-bottom: -150px;
+
+ & > img {
+ height: 100%;
+ position: relative;
+ z-index: -2;
+ }
+
+ &::after {
+ content: "";
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ height: 60%;
+ background: linear-gradient(to bottom,
+ rgba(255, 255, 255, 0) 0%,
+ rgba(255, 255, 255, .7) 10%,
+ rgba(255, 255, 255, 1) 15%,
+ rgba(255, 255, 255, 1) 30%,
+ rgba(255, 255, 255, 1) 40%,
+ rgba(255, 255, 255, 1) 100%);
+ pointer-events: none;
+ z-index: -1;
+ }
+}
+
+.description {
+ white-space: pre-line;
+ margin-bottom: 24px;
+}
\ No newline at end of file
diff --git a/src/components/CompatibilityV2/pages/Payment/index.tsx b/src/components/CompatibilityV2/pages/Payment/index.tsx
new file mode 100644
index 0000000..7749d48
--- /dev/null
+++ b/src/components/CompatibilityV2/pages/Payment/index.tsx
@@ -0,0 +1,175 @@
+import { useSelector } from "react-redux";
+import PaymentInformation from "../../components/PaymentInformation";
+import styles from "./styles.module.scss";
+import { selectors } from "@/store";
+import { getFormattedPrice } from "@/utils/price.utils";
+import Guarantees from "../../components/Guarantees";
+import Button from "../../components/Button";
+import { addCurrency, ELocalesPlacement } from "@/locales";
+import { useTranslations } from "@/hooks/translations";
+import Stars from "../../components/Stars";
+import { usePaywall } from "@/hooks/paywall/usePaywall";
+import { EPlacementKeys } from "@/api/resources/Paywall";
+import { useNavigate } from "react-router-dom";
+import { useEffect, useState } from "react";
+import routes from "@/routes";
+import PaymentModal from "@/components/Payment/PaymentModal";
+import PaymentForm from "@/components/Payment/nmi/PaymentForm";
+import metricService, { EGoals, EMetrics } from "@/services/metric/metricService";
+import Toast from "@/components/pages/ABDesign/v1/components/Toast";
+
+const placementKey = EPlacementKeys['aura.placement.compatibility.v2'];
+
+function Payment() {
+ const navigate = useNavigate();
+ const { products, currency, getText } = usePaywall({
+ placementKey: EPlacementKeys["aura.placement.compatibility.v2"],
+ localesPlacement: ELocalesPlacement.CompatibilityV2,
+ });
+ const { translate } = useTranslations(ELocalesPlacement.CompatibilityV2);
+ const activeProductFromStore = useSelector(selectors.selectActiveProduct);
+
+ const trialPrice = activeProductFromStore?.trialPrice || 0;
+ const fullPrice = activeProductFromStore?.price || 0;
+ // const isShowPaymentModal = useSelector(
+ // selectors.selectCompatibilityV2IsShowPaymentModalV1
+ // );
+ const [isPaymentSuccess, setIsPaymentSuccess] = useState(false);
+ const [isPaymentError, setIsPaymentError] = useState(false);
+ const [isPaymentModalOpen, setIsPaymentModalOpen] = useState(false);
+
+ const onPaymentError = (error?: string) => {
+ setIsPaymentError(true);
+ if (error === "Product not found") {
+ navigate(routes.client.compatibilityV2TrialChoice());
+ }
+ }
+
+ const onPaymentSuccess = () => {
+ setIsPaymentSuccess(true);
+ metricService.reachGoal(EGoals.PAYMENT_SUCCESS);
+ if (activeProductFromStore) {
+ metricService.reachGoal(EGoals.PURCHASE, [EMetrics.FACEBOOK], {
+ currency: "USD",
+ value: ((activeProductFromStore.trialPrice || 100) / 100).toFixed(2),
+ });
+ }
+
+ setTimeout(() => {
+ navigate(routes.client.skipTrial());
+ }, 1500);
+ }
+
+ const onModalClosed = () => {
+ setIsPaymentModalOpen(false);
+ navigate(routes.client.compatibilityV2SaveOff());
+ }
+
+ const showModal = () => {
+ // dispatch(actions.compatibilityV2.setIsShowPaymentModalV1(true));
+ setIsPaymentModalOpen(true);
+ };
+
+ useEffect(() => {
+ window.onpopstate = function (_event) {
+ if (document.location.toString() === `${window.location.origin}${routes.client.compatibilityV2TrialPayment()}`) {
+ return navigate(routes.client.compatibilityV2SaveOff());
+ }
+ };
+ return () => {
+ setTimeout(() => {
+ window.onpopstate = null;
+ }, 0);
+ };
+
+ }, [])
+
+ useEffect(() => {
+ if (!products.length) return;
+ const _targetProduct = products.find(product => product._id === activeProductFromStore?._id);
+ if (!_targetProduct || !activeProductFromStore) {
+ navigate(routes.client.compatibilityV2TrialChoice());
+ }
+ }, [products, activeProductFromStore]);
+
+ return (
+ <>
+
+ }.webp`)})
+
+
+ + {translate(`/palms-information-partner.${zodiacSign?.toLowerCase()}.description`)} +
+ + {/*
+
+ + {translate("/payment.app_number_one", { + color: {translate("/payment.app_number_one_color")}, + })} +
+
+ {translate("/payment.will_be_charged", {
+ // trialPrice: addCurrency(getFormattedPrice(trialPrice), currency),
+ // fullPrice: (
+ // {addCurrency(getFormattedPrice(fullPrice), currency)}
+ // ),
+ splitPrice: addCurrency(getFormattedPrice(
+ (
+ fullPrice / (
+ Number(getText("split.price.value")) || 2
+ )
+ )
+ ), currency),
+ save: addCurrency(
+ getFormattedPrice(fullPrice - trialPrice),
+ currency
+ ),
+ emailReminder: (
+ {translate("/payment.will_be_charged_email_reminder")}
+ ),
+ trialInfo: (
+
+ {translate("/payment.will_be_charged_trial_info", {
+ trialDuration: activeProductFromStore?.trialDuration,
+ trialPrice: addCurrency(
+ getFormattedPrice(trialPrice),
+ currency
+ ),
+ })}
+
+ ),
+ })}
+
+ Something went wrong
+Payment successful
+
+
+ {translate("/relate-following.title")}
+
+ {/*
+ );
+}
+
+export default RelateFollowing;
diff --git a/src/components/CompatibilityV2/pages/RelateFollowing/styles.module.scss b/src/components/CompatibilityV2/pages/RelateFollowing/styles.module.scss
new file mode 100644
index 0000000..bde342c
--- /dev/null
+++ b/src/components/CompatibilityV2/pages/RelateFollowing/styles.module.scss
@@ -0,0 +1,62 @@
+.title {
+ font-size: 27px;
+ text-align: center;
+ margin-bottom: 16px;
+}
+
+.question {
+ width: 85%;
+ margin: 0 auto;
+ text-align: center;
+ line-height: 125%;
+ font-size: 20px;
+}
+
+.buttons-container {
+ width: 100%;
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ gap: 11px;
+ margin-top: 30px;
+
+ & > .button {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ text-align: center;
+ width: 60px;
+ height: 60px;
+ background-color: #f1f1f1;
+ border: none;
+ border-radius: 5px;
+ box-shadow: 0px 3px 3px #00000024;
+ font-size: 29px;
+ color: #000;
+ cursor: pointer;
+
+ &.selected {
+ background-color: #fff;
+ outline: solid #3f70b8 2px;
+ }
+ }
+}
+
+.buttons-text-container {
+ width: 100%;
+ max-width: 344px;
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ margin: 30px auto 0;
+ gap: 8px;
+
+ & > span {
+ width: fit-content;
+ font-size: 20px;
+ line-height: 125%;
+ font-weight: 500;
+ max-width: 84px;
+ text-align: left;
+ }
+}
diff --git a/src/components/CompatibilityV2/pages/RelationshipStatus/index.tsx b/src/components/CompatibilityV2/pages/RelationshipStatus/index.tsx
new file mode 100644
index 0000000..3585094
--- /dev/null
+++ b/src/components/CompatibilityV2/pages/RelationshipStatus/index.tsx
@@ -0,0 +1,87 @@
+import Title from "@/components/Title";
+import styles from "./styles.module.scss";
+import Answer from "../../components/Answer";
+import { useDispatch, useSelector } from "react-redux";
+import { actions, selectors } from "@/store";
+import { sleep } from "@/services/date";
+import { useNavigate } from "react-router-dom";
+import routes from "@/routes";
+import { answerTimeOut } from "../../data";
+import { useTranslations } from "@/hooks/translations";
+import { ELocalesPlacement } from "@/locales";
+import { useMemo } from "react";
+import { ELottieKeys, useLottie } from "@/hooks/lottie/useLottie";
+import { useSession } from "@/hooks/session/useSession";
+import { IAnswersSessionCompatibilityV2 } from "@/api/resources/Session";
+import { ESourceAuthorization } from "@/api/resources/User";
+
+function RelationshipStatus() {
+ const { translate } = useTranslations(ELocalesPlacement.CompatibilityV2);
+ const { updateSession } = useSession();
+ const navigate = useNavigate();
+ const dispatch = useDispatch();
+ const { relationshipStatus } = useSelector(
+ selectors.selectCompatibilityV2Answers
+ );
+ useLottie({
+ preloadKey: ELottieKeys.scalesNeutralPalmistry,
+ });
+
+ const answers: {
+ id: IAnswersSessionCompatibilityV2["relationship_status"];
+ title: string;
+ }[] = useMemo(
+ () => [
+ {
+ id: "single",
+ title: translate("/relationship-status.answer1"),
+ },
+ {
+ id: "in_relationship",
+ title: translate("/relationship-status.answer2"),
+ },
+ {
+ id: "engaged",
+ title: translate("/relationship-status.answer3"),
+ },
+ {
+ id: "divorced",
+ title: translate("/relationship-status.answer4"),
+ },
+ // {
+ // id: "complicated",
+ // title: translate("/relationship-status.answer5"),
+ // },
+ ],
+ [translate]
+ );
+
+ const handleClick = async (id: IAnswersSessionCompatibilityV2["relationship_status"]) => {
+ dispatch(actions.compatibilityV2Answers.update({ relationshipStatus: id }));
+ updateSession({
+ answers: {
+ relationship_status: id,
+ },
+ }, ESourceAuthorization["aura.compatibility.v2"]);
+ if (id !== relationshipStatus) await sleep(answerTimeOut);
+ navigate(`${routes.client.compatibilityV2RelateFollowing()}/1`);
+ };
+
+ return (
+
+ {questions[parseInt(questionId) - 1].title}
+
+ {Array.from({ length: 5 }).map((_, index) => (
+
+ ))}
+
+
+ {translate("/relate-following.strongly_disagree")}
+ {translate("/relate-following.strongly_agree")}
+
+
+
+ {translate("/relationship-status.title")}
+
+ {answers.map((answers, index) => (
+ handleClick(answers.id)}
+ />
+ ))}
+
+ );
+}
+
+export default RelationshipStatus;
diff --git a/src/components/CompatibilityV2/pages/RelationshipStatus/styles.module.scss b/src/components/CompatibilityV2/pages/RelationshipStatus/styles.module.scss
new file mode 100644
index 0000000..5bfbb7c
--- /dev/null
+++ b/src/components/CompatibilityV2/pages/RelationshipStatus/styles.module.scss
@@ -0,0 +1,3 @@
+.container {
+ width: 100%;
+}
diff --git a/src/components/CompatibilityV2/pages/RomanticGestures/index.tsx b/src/components/CompatibilityV2/pages/RomanticGestures/index.tsx
new file mode 100644
index 0000000..3bee891
--- /dev/null
+++ b/src/components/CompatibilityV2/pages/RomanticGestures/index.tsx
@@ -0,0 +1,79 @@
+import Title from "@/components/Title";
+import styles from "./styles.module.scss";
+import Answer from "../../components/Answer";
+import { useDispatch, useSelector } from "react-redux";
+import { actions, selectors } from "@/store";
+import { sleep } from "@/services/date";
+import { useNavigate } from "react-router-dom";
+import routes from "@/routes";
+import { answerTimeOut } from "../../data";
+import { useTranslations } from "@/hooks/translations";
+import { ELocalesPlacement } from "@/locales";
+import { useMemo } from "react";
+import { ELottieKeys, useLottie } from "@/hooks/lottie/useLottie";
+import { useSession } from "@/hooks/session/useSession";
+import { IAnswersSessionCompatibilityV2 } from "@/api/resources/Session";
+import { ESourceAuthorization } from "@/api/resources/User";
+
+function RomanticGestures() {
+ const { translate } = useTranslations(ELocalesPlacement.CompatibilityV2);
+ const { updateSession } = useSession();
+ const navigate = useNavigate();
+ const dispatch = useDispatch();
+ const { romanticGestures } = useSelector(
+ selectors.selectCompatibilityV2Answers
+ );
+ useLottie({
+ preloadKey: ELottieKeys.scalesNeutralPalmistry,
+ });
+
+ const answers: {
+ id: IAnswersSessionCompatibilityV2["romantic_gestures"];
+ title: string;
+ }[] = useMemo(
+ () => [
+ {
+ id: "love",
+ title: translate("/romantic-gestures.answer1"),
+ },
+ {
+ id: "neutral",
+ title: translate("/romantic-gestures.answer2"),
+ },
+ {
+ id: "dislike",
+ title: translate("/romantic-gestures.answer3"),
+ },
+ ],
+ [translate]
+ );
+
+ const handleClick = async (id: IAnswersSessionCompatibilityV2["romantic_gestures"]) => {
+ dispatch(actions.compatibilityV2Answers.update({ romanticGestures: id }));
+ updateSession({
+ answers: {
+ romantic_gestures: id,
+ },
+ }, ESourceAuthorization["aura.compatibility.v2"]);
+ if (id !== romanticGestures) await sleep(answerTimeOut);
+ navigate(routes.client.compatibilityV2CheckingPhone());
+ };
+
+ return (
+
+
+ {translate("/romantic-gestures.title")}
+
+ {answers.map((answers, index) => (
+ handleClick(answers.id)}
+ />
+ ))}
+
+ );
+}
+
+export default RomanticGestures;
diff --git a/src/components/CompatibilityV2/pages/RomanticGestures/styles.module.scss b/src/components/CompatibilityV2/pages/RomanticGestures/styles.module.scss
new file mode 100644
index 0000000..5bfbb7c
--- /dev/null
+++ b/src/components/CompatibilityV2/pages/RomanticGestures/styles.module.scss
@@ -0,0 +1,3 @@
+.container {
+ width: 100%;
+}
diff --git a/src/components/CompatibilityV2/pages/SaveOff/index.tsx b/src/components/CompatibilityV2/pages/SaveOff/index.tsx
new file mode 100644
index 0000000..67a4f59
--- /dev/null
+++ b/src/components/CompatibilityV2/pages/SaveOff/index.tsx
@@ -0,0 +1,72 @@
+import styles from "./styles.module.scss";
+import Blob from "../../images/SVG/Blob";
+import { images } from "../../data";
+import Title from "@/components/Title";
+import Button from "../../components/Button";
+import Blob2 from "../../images/SVG/Blob2";
+import { useNavigate } from "react-router-dom";
+import routes from "@/routes";
+import { usePaywall } from "@/hooks/paywall/usePaywall";
+import { EPlacementKeys } from "@/api/resources/Paywall";
+import { addCurrency, ELocalesPlacement } from "@/locales";
+import { useTranslations } from "@/hooks/translations";
+
+const placementKey = EPlacementKeys["aura.placement.compatibility.v2.secret.discount"]
+
+function SaveOff() {
+ const { translate } = useTranslations(ELocalesPlacement.EmailMarketingCompatibilityV2);
+ const { products, currency, getText } = usePaywall({
+ placementKey,
+ localesPlacement: ELocalesPlacement.EmailMarketingCompatibilityV2,
+ });
+ // const activeProductFromStore = useSelector(selectors.selectActiveProduct);
+ // const activeProduct = products.find(product => product?.trialPrice === activeProductFromStore?.trialPrice) || products[0]
+ const activeProduct = products[0]
+ const trialPrice = (activeProduct?.trialPrice || 0) / 100;
+
+ const navigate = useNavigate();
+
+ const handleNext = () => {
+ navigate(routes.client.compatibilityV2SecretDiscount());
+ }
+
+ return (
+ <>
+ ![gift]({images("discount/gift.svg")})
+ + {translate("save-off.instead", { + price: {addCurrency(trialPrice, currency)}, + oldPrice: + {translate("save-off.instead-old-price", { + oldPrice: addCurrency(getText("old.price") as string, currency) + })} + + })} +
+
+ ![fire]({images("discount/fire.png")})
+ {translate("save-off.trial-duration", {
+ // days: trialDuration
+ trialDuration: getText("trial.duration"),
+ oldTrialDuration: {translate("save-off.old-trial-duration", {
+ oldTrialDuration: getText("old.trial.duration")
+ })},
+ })}
+
+
+ {translate("save-off.discount-offer", { discount: getText("discount") })}
+
+
+ {translate("/scan-instruction.title")}
+
+
+ );
+}
+
+export default ScanInstruction;
diff --git a/src/components/CompatibilityV2/pages/ScanInstruction/styles.module.scss b/src/components/CompatibilityV2/pages/ScanInstruction/styles.module.scss
new file mode 100644
index 0000000..b5e2f5f
--- /dev/null
+++ b/src/components/CompatibilityV2/pages/ScanInstruction/styles.module.scss
@@ -0,0 +1,27 @@
+.page {
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+
+.button {
+ margin-top: 40px;
+}
+
+.description {
+ font-style: 14px;
+ line-height: 125%;
+ text-align: center;
+ margin-top: 20px;
+}
+
+.biometric {
+ text-align: center;
+ line-height: 125%;
+ margin-top: 20px;
+
+ & > svg {
+ display: none;
+ }
+}
diff --git a/src/components/CompatibilityV2/pages/ScannedPhoto/index.tsx b/src/components/CompatibilityV2/pages/ScannedPhoto/index.tsx
new file mode 100644
index 0000000..1fbcfc9
--- /dev/null
+++ b/src/components/CompatibilityV2/pages/ScannedPhoto/index.tsx
@@ -0,0 +1,306 @@
+import { useSelector } from "react-redux";
+import styles from "./styles.module.scss";
+import { selectors } from "@/store";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { IPalmistryLine } from "@/api/resources/Palmistry";
+import Title from "@/components/Title";
+import { ICompatibilityV2FingerLocal } from "@/store/compatibilityV2";
+import { useNavigate } from "react-router-dom";
+import routes from "@/routes";
+import ScannedPhotoElement from "@/components/palmistry/scanned-photo/scanned-photo";
+import { useTranslations } from "@/hooks/translations";
+import { ELocalesPlacement } from "@/locales";
+import ProgressBarLine from "@/components/ui/ProgressBarLine";
+import Modal from "@/components/Modal";
+
+const drawElementChangeDelay = 1500;
+const startDelay = 500;
+
+interface IPoint {
+ title1: string;
+ title2: string;
+ modal: {
+ title: string;
+ description: string;
+ answerLeft: string;
+ answerRight: string;
+ }
+}
+
+function ScannedPhoto() {
+ const { translate } = useTranslations(ELocalesPlacement.CompatibilityV2);
+ const navigate = useNavigate();
+ const photo = useSelector(selectors.selectCompatibilityV2Photo);
+ const fingers = useSelector(selectors.selectCompatibilityV2Fingers);
+ const lines = useSelector(selectors.selectCompatibilityV2Lines);
+
+ const changeTitleTimeOut = useRef+ {translate("/scanned-photo.title")} +
+ ++ {translate("/scanned-photo.text")} +
+ + + {isPause && ( ++ {translate(loadingProfilePoints[getCurrentIndex()].modal.description)} +
+
+
+ setIsPause(false)}>
+
+ + {translate(loadingProfilePoints[getCurrentIndex()].modal.answerLeft)} +
+ setIsPause(false)}>
+
+ + {translate(loadingProfilePoints[getCurrentIndex()].modal.answerRight)} +
+
+ {loadingProfilePoints.map(({ title1, title2 }, index) => (
+
}
+ (pointsRef.current[index] = el as HTMLDivElement)}
+ key={`point-${index}`}
+ >
+
+ ))}
+
+
+ {translate(getProgressValue(index) > 50 ? title2 : title1)}
+
+
+ + {getProgressValue(index)}% +
+
+
+ + {translate("secret-discount.policy", { + days: getText("trial.duration"), + oldDays: getText("old.trial.duration"), + trialPrice: addCurrency(trialPrice, currency), + price: addCurrency( + ( + Number(getText("old.price")) + / ( + Number(getText("split.price.value")) || 2 + ) + ), currency), + })} +
++
+ AURA ya ha ayudado a millones de personas a encontrar la felicidad y + descubrir toda la verdad sobre sus relaciones. +
+
+ Tu análisis del destino, que cambiará tu vida por completo, ¡está casi + listo! Antes de proporcionártelo, nos gustaría ofrecerte la oportunidad + de elegir la cantidad que consideres razonable para probar AURA durante + 7 días y que creas justa para los cambios que te sucederán: +
+
+ • Descubrirás todos los secretos más íntimos que las estrellas tienen + preparados para ti y resolverás problemas de relación en solo un mes; +
+
+ • Pondrás fin, de una vez por todas, a asuntos pendientes y olvidarás + los problemas que te han estado atormentando durante años (si no + décadas); +
+
+ • Ahorrarás cientos de dólares en predicciones astrológicas falsas y + adivinos no profesionales; +
+
+ • Recibirás no solo un análisis personal, sino también horóscopos + diarios personalizados, aprenderás quién y cómo está drenando tu energía + y obtendrás otras lecturas personalizadas. +
+
+ El período de prueba de 7 días nos cuesta $13.76, pero por favor elige + la cantidad que más te convenga: + + ); + } + return ( + <> + AURA is the only accurate app with reliable fate line analysis, verified + by professionals and guaranteed to provide precise predictions. +
+
+ AURA has already helped millions of people find happiness and discover the + whole truth about their relationships. +
+
+ Your fate analysis, which will completely change your life, is almost + ready! Before we provide it to you, we would like to offer you the + opportunity to choose the amount you consider reasonable to try AURA for 7 + days and which you think is fair for the changes that will happen to you: +
+
+ You will discover all the most intimate secrets that the stars have + prepared for you and solve relationship issues within just one month; +
+
+ You will once and for all put the finishing touches on unresolved issues + and forget about problems that have been haunting you for years (if not + decades); +
+
+ You will save hundreds of dollars on fake and unprofessional astrological + predictions and fortune tellers; +
+
+ You will receive not only a personal analysis but also personalized daily + horoscopes, learn who and how is draining your energy, and get other + personalized readings. +
+
A 7-day trial period costs us $13.76, but please choose the amount + that suits you best: + + ); +}; diff --git a/src/components/CompatibilityV2/pages/TrialChoice/index.tsx b/src/components/CompatibilityV2/pages/TrialChoice/index.tsx new file mode 100644 index 0000000..bb1ec05 --- /dev/null +++ b/src/components/CompatibilityV2/pages/TrialChoice/index.tsx @@ -0,0 +1,98 @@ +import { useDispatch, useSelector } from "react-redux"; +import EmailSubstrate from "../../components/EmailSubstrate"; +import styles from "./styles.module.scss"; +import { actions, selectors } from "@/store"; +// import Title from "@/components/Title"; +import PriceList from "@/components/pages/ABDesign/v1/components/PriceList"; +import { usePaywall } from "@/hooks/paywall/usePaywall"; +import { EPlacementKeys } from "@/api/resources/Paywall"; +import { + ELocalesPlacement, + getDefaultLocaleByLanguage, + language, +} from "@/locales"; +import { useState } from "react"; +import Button from "../../components/Button"; +import routes from "@/routes"; +import { useNavigate } from "react-router-dom"; +import Loader from "@/components/Loader"; +import { useTranslations } from "@/hooks/translations"; +// import { useMetricABFlags } from "@/services/metric/metricService"; +import { getLongText } from "./abText"; + +function TrialChoice() { + const { translate } = useTranslations(ELocalesPlacement.CompatibilityV2); + const navigate = useNavigate(); + const dispatch = useDispatch(); + const { products, isLoading, currency, getText } = usePaywall({ + placementKey: EPlacementKeys["aura.placement.compatibility.v2"], + localesPlacement: ELocalesPlacement.CompatibilityV2, + }); + + const locale = getDefaultLocaleByLanguage(language); + + // const { flags } = useMetricABFlags(); + // const isLongText = flags?.text?.[0] === "on"; + + const [isDisabled, setIsDisabled] = useState(true); + + const selectedPrice = useSelector(selectors.selectSelectedPrice); + const email = useSelector(selectors.selectEmail); + const homeConfig = useSelector(selectors.selectHome); + + const handlePriceItem = () => { + setIsDisabled(false); + }; + + const handleNext = () => { + if (isDisabled) { + return; + } + dispatch( + actions.siteConfig.update({ + home: { pathFromHome: homeConfig.pathFromHome, isShowNavbar: false }, + }) + ); + navigate(routes.client.compatibilityV2TrialPayment()); + }; + + return ( +
+ {!isLoading && (
+ <>
+
+ {getText("text.0")}
+
+ )} */}
+
+ );
+}
+
+export default TrialChoice;
diff --git a/src/components/CompatibilityV2/pages/TrialChoice/styles.module.scss b/src/components/CompatibilityV2/pages/TrialChoice/styles.module.scss
new file mode 100644
index 0000000..f470c34
--- /dev/null
+++ b/src/components/CompatibilityV2/pages/TrialChoice/styles.module.scss
@@ -0,0 +1,108 @@
+.container {
+ position: relative;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+
+.email-substrate {
+ display: grid;
+ grid-template-columns: 1fr 36px;
+ align-content: center;
+ position: absolute;
+ max-width: calc(100% + 9px);
+ top: -18px;
+ right: -26px;
+ height: 46px;
+}
+
+.title {
+ font-size: 28px;
+ line-height: 125%;
+ margin-top: 44px;
+ color: #2c2c2c;
+ font-weight: 500;
+}
+
+.prices-container {
+ justify-content: center;
+ gap: 10px;
+ width: fit-content;
+ margin: 0 auto;
+}
+
+.price-item {
+ border: solid #2c2c2c 1px;
+ width: 70px;
+ height: 65px;
+ font-size: 20px;
+ font-weight: 500;
+
+ &:last-child::after {
+ content: "";
+ position: absolute;
+ width: 2px;
+ height: 20px;
+ background-color: #224e90;
+ bottom: -30px;
+ left: 50%;
+ }
+
+ &.price-item-active {
+ border: solid #224e90 3px !important;
+ background-color: transparent;
+ color: #224e90;
+ }
+}
+
+.price-container {
+ position: relative;
+ width: 100%;
+ margin-top: 10px;
+ display: flex;
+ flex-direction: column;
+ gap: 32px;
+}
+
+.auxiliary-text {
+ font-size: 15px;
+ line-height: 125%;
+ font-weight: 600;
+ color: #0244a5;
+ width: 100%;
+ text-align: center;
+}
+
+.cursor {
+ position: absolute;
+ width: 2px;
+ height: 20px;
+ background-color: #224e90;
+ top: 71px;
+ right: 34px;
+}
+
+.loader {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+}
+
+.button {
+ margin-top: 20px;
+ transition: background 0.2s ease, color 0.2s ease;
+
+ &:disabled {
+ border: solid #224e90 1px;
+ background: none;
+ color: #120d0d;
+ opacity: 1;
+ }
+}
+
+.text {
+ white-space: pre-wrap;
+ margin-top: 40px;
+ margin-bottom: 6px;
+}
diff --git a/src/components/CompatibilityV2/pages/TrialChoiceVideo/index.tsx b/src/components/CompatibilityV2/pages/TrialChoiceVideo/index.tsx
new file mode 100644
index 0000000..0b6c9e5
--- /dev/null
+++ b/src/components/CompatibilityV2/pages/TrialChoiceVideo/index.tsx
@@ -0,0 +1,96 @@
+import { useDispatch, useSelector } from "react-redux";
+import EmailSubstrate from "../../components/EmailSubstrate";
+import styles from "./styles.module.scss";
+import { actions, selectors } from "@/store";
+import PriceList from "@/components/pages/ABDesign/v1/components/PriceList";
+import { usePaywall } from "@/hooks/paywall/usePaywall";
+import { EPlacementKeys } from "@/api/resources/Paywall";
+import { ELocalesPlacement } from "@/locales";
+import { useEffect, useRef, useState } from "react";
+import Button from "../../components/Button";
+import routes from "@/routes";
+import { useNavigate, useOutletContext } from "react-router-dom";
+import Loader from "@/components/Loader";
+import { useTranslations } from "@/hooks/translations";
+import { IOutletContext } from "@/routerComponents/Compatibility/v2/LayoutPersonalVideo";
+
+function TrialChoiceVideo() {
+ const { translate } = useTranslations(ELocalesPlacement.CompatibilityV2);
+ const navigate = useNavigate();
+ const dispatch = useDispatch();
+ const { products, isLoading, currency, getText } = usePaywall({
+ placementKey: EPlacementKeys["aura.placement.compatibility.v2"],
+ localesPlacement: ELocalesPlacement.V1,
+ });
+
+ const [isDisabled, setIsDisabled] = useState(true);
+
+ const selectedPrice = useSelector(selectors.selectSelectedPrice);
+ const email = useSelector(selectors.selectEmail);
+ const homeConfig = useSelector(selectors.selectHome);
+
+ const containerVideoRef = useRef{getLongText(locale)}
+ +
+
+
+
+
+ )}
+ {isLoading && {getText("text.1")}
+
+
+ {!isLoading && isVisibleElements && (
+ <>
+
+ );
+}
+
+export default TrialChoiceVideo;
diff --git a/src/components/CompatibilityV2/pages/TrialChoiceVideo/styles.module.scss b/src/components/CompatibilityV2/pages/TrialChoiceVideo/styles.module.scss
new file mode 100644
index 0000000..87bcdd7
--- /dev/null
+++ b/src/components/CompatibilityV2/pages/TrialChoiceVideo/styles.module.scss
@@ -0,0 +1,134 @@
+.container {
+ position: relative;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+
+.email-substrate {
+ display: grid;
+ grid-template-columns: 1fr 36px;
+ align-content: center;
+ position: absolute;
+ max-width: calc(100% + 9px);
+ top: -18px;
+ right: -26px;
+ height: 46px;
+ filter: opacity(0);
+ will-change: opacity;
+ animation: appearance 1s forwards;
+}
+
+.title {
+ font-size: 28px;
+ line-height: 125%;
+ margin-top: 44px;
+ color: #2c2c2c;
+ font-weight: 500;
+ filter: opacity(0);
+ will-change: opacity;
+ animation: appearance 1s forwards 0.5s;
+}
+
+.prices-container {
+ justify-content: center;
+ gap: 10px;
+ width: fit-content;
+ margin: 0 auto;
+ filter: opacity(0);
+ will-change: opacity;
+ animation: appearance 1s forwards 1s;
+}
+
+.price-item {
+ border: solid #2c2c2c 1px;
+ width: 70px;
+ height: 65px;
+ font-size: 20px;
+ font-weight: 500;
+
+ &:last-child::after {
+ content: "";
+ position: absolute;
+ width: 2px;
+ height: 20px;
+ background-color: #224e90;
+ bottom: -30px;
+ left: 50%;
+ }
+
+ &.price-item-active {
+ border: solid #224e90 3px !important;
+ background-color: transparent;
+ color: #224e90;
+ }
+}
+
+.price-container {
+ position: relative;
+ width: 100%;
+ margin-top: 10px;
+ display: flex;
+ flex-direction: column;
+ gap: 32px;
+}
+
+.auxiliary-text {
+ font-size: 15px;
+ line-height: 125%;
+ font-weight: 600;
+ color: #0244a5;
+ width: 100%;
+ text-align: center;
+ filter: opacity(0);
+ will-change: opacity;
+ animation: appearance 1s forwards 1s;
+}
+
+.cursor {
+ position: absolute;
+ width: 2px;
+ height: 20px;
+ background-color: #224e90;
+ top: 71px;
+ right: 34px;
+}
+
+.loader {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+}
+
+.button {
+ margin-top: 20px;
+ transition: background 0.2s ease, color 0.2s ease;
+ filter: opacity(0);
+ will-change: opacity;
+ animation: appearance 1s forwards 1.5s;
+
+ &:disabled {
+ border: solid #224e90 1px;
+ background: none;
+ color: #120d0d;
+ opacity: 1;
+ }
+}
+
+.personal-video {
+ display: block;
+ margin-top: 44px !important;
+ border-radius: 0 !important;
+ background-image: url("/trial-choice-preview.png") !important;
+}
+
+@keyframes appearance {
+ 0% {
+ filter: opacity(0);
+ }
+
+ 100% {
+ filter: opacity(1);
+ }
+}
diff --git a/src/components/CompatibilityV2/pages/TrialPayment/index.tsx b/src/components/CompatibilityV2/pages/TrialPayment/index.tsx
new file mode 100644
index 0000000..6311153
--- /dev/null
+++ b/src/components/CompatibilityV2/pages/TrialPayment/index.tsx
@@ -0,0 +1,173 @@
+import Title from "@/components/Title";
+import AppNumberOne from "../../components/AppNumberOne";
+import Button from "../../components/Button";
+import JoinedToday from "../../components/JoinedToday";
+import PalmIsReady from "../../components/PalmIsReady";
+import styles from "./styles.module.scss";
+import HowWork from "../../components/HowWork";
+import WhatIncluded from "../../components/WhatIncluded";
+import PalmsSayAbout from "../../components/PalmsSayAbout";
+import Reviews from "../../components/Reviews";
+import routes, { compatibilityV2Prefix } from "@/routes";
+import Footer from "../../components/Footer";
+import { useNavigate } from "react-router-dom";
+import { useTranslations } from "@/hooks/translations";
+import { ELocalesPlacement, language } from "@/locales";
+import { usePreloadImages } from "@/hooks/preload/images";
+import useTimer from "@/hooks/palmistry/use-timer";
+import { images } from "../../data";
+import { useSelector } from "react-redux";
+import { selectors } from "@/store";
+import { getZodiacSignByDate } from "@/services/zodiac-sign";
+import { useDynamicSize } from "@/hooks/useDynamicSize";
+import { formatDateToLocale } from "@/locales/localFormats";
+
+function TrialPayment() {
+ const { height, elementRef } = useDynamicSize
+
+
+
+
+ )}
+ {isLoading && {getText("text.1")}
+
+ }.webp`)})
+ {relationshipStatus !== "single" && }.webp`)})
}
+
+ {(relationshipStatus === "single" || !partnerBirthdate) &&
+
+ {relationshipStatus !== "single" && }
+ + {translate("/trial-payment.information-description-single", { + color: + {translate("/trial-payment.information-description-single-color", { + zodiacSign: zodiacSign?.toLowerCase().charAt(0).toUpperCase() + zodiacSign?.toLowerCase().slice(1), + birthdate: formatDateToLocale(birthdate, language), + })} + , + eventDescription: dateEvent ? + {translate("/trial-payment.information-description-single-event-description", { + dateEvent: formatDateToLocale(dateEvent, language), + })} + : "", + })} +
+ } + {relationshipStatus !== "single" && partnerBirthdate && ++ {translate("/trial-payment.information-description-with-partner", { + color: + {translate("/trial-payment.information-description-with-partner-color", { + zodiacSign: zodiacSign?.toLowerCase().charAt(0).toUpperCase() + zodiacSign?.toLowerCase().slice(1), + partnerZodiacSign: partnerZodiacSign?.toLowerCase().charAt(0).toUpperCase() + partnerZodiacSign?.toLowerCase().slice(1), + birthdate: formatDateToLocale(birthdate, language), + partnerBirthdate: formatDateToLocale(partnerBirthdate, language), + })} + , + colorProfile: + {translate("/trial-payment.information-description-with-partner-color", { + zodiacSign: zodiacSign?.toLowerCase().charAt(0).toUpperCase() + zodiacSign?.toLowerCase().slice(1), + partnerZodiacSign: partnerZodiacSign?.toLowerCase().charAt(0).toUpperCase() + partnerZodiacSign?.toLowerCase().slice(1), + birthdate: formatDateToLocale(birthdate, language), + partnerBirthdate: formatDateToLocale(partnerBirthdate, language), + })} + , + colorPartner: + {translate("/trial-payment.information-description-with-partner-color", { + zodiacSign: zodiacSign?.toLowerCase().charAt(0).toUpperCase() + zodiacSign?.toLowerCase().slice(1), + partnerZodiacSign: partnerZodiacSign?.toLowerCase().charAt(0).toUpperCase() + partnerZodiacSign?.toLowerCase().slice(1), + birthdate: formatDateToLocale(birthdate, language), + partnerBirthdate: formatDateToLocale(partnerBirthdate, language), + })} + , + eventDescription: dateEvent ? + {translate("/trial-payment.information-description-with-partner-event-description", { + dateEvent: formatDateToLocale(dateEvent, language), + })} + : "", + })} +
+ } + +
+
+
+
+
+
+
+ );
+}
+
+export default TrialPayment;
diff --git a/src/components/CompatibilityV2/pages/TrialPayment/styles.module.scss b/src/components/CompatibilityV2/pages/TrialPayment/styles.module.scss
new file mode 100644
index 0000000..73ea61d
--- /dev/null
+++ b/src/components/CompatibilityV2/pages/TrialPayment/styles.module.scss
@@ -0,0 +1,157 @@
+.get-prediction {
+ margin-top: 26px;
+ font-size: 24px;
+ font-weight: 500;
+}
+
+.how-work {
+ margin-top: 40px;
+}
+
+.begin-trial {
+ margin-top: -20px;
+}
+
+.why-love {
+ font-size: 28px;
+ margin: 40px 18px 20px;
+ font-weight: 700;
+
+ &>span {
+ color: #224e90;
+ }
+}
+
+.success-story {
+ font-size: 20px;
+ font-weight: 500;
+ margin-top: 22px;
+}
+
+.as-seen-in {
+ font-size: 32px;
+ margin-top: 50px;
+
+ &>span {
+ color: #224e90;
+ }
+}
+
+.partners {
+ width: 100%;
+}
+
+
+
+.paywall__get-prediction {
+ position: fixed;
+ bottom: 0dvh;
+ left: 0;
+ align-items: center;
+ background: #eff2fd;
+ box-shadow: 0 -3px 11px rgba(0, 0, 0, .15);
+ color: #4a567a;
+ display: flex;
+ font-size: 14px;
+ padding: 12px 24px;
+ transition: all 0.5s;
+ width: 100%;
+ z-index: 10;
+}
+
+.paywall__get-prediction-timer {
+ font-family: "SF Mono Bold, sans-serif";
+ border-radius: 4px;
+ background: initial;
+ display: inline;
+ margin: 5px;
+ min-width: 62px;
+ padding: 0;
+}
+
+.paywall__get-prediction-timer>span {
+ color: #066fde;
+ font-size: 14px;
+ font-weight: 700;
+ line-height: 22px;
+}
+
+.paywall__get-prediction-button {
+ font-weight: 700;
+ font-size: 18px;
+ line-height: 26px;
+ min-height: auto;
+ min-width: auto;
+ padding: 6px 8px;
+ white-space: normal;
+ width: auto;
+}
+
+.information-title {
+ font-size: 24px;
+ font-weight: 700;
+ margin-bottom: 0;
+}
+
+.zodiac-images {
+ position: relative;
+ width: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ gap: 0px;
+ margin-top: 8px;
+
+ &.with-partner {
+ & > img:first-child {
+ margin-right: -30%;
+ }
+
+ & > img:last-child {
+ // margin-left: -10px;
+ z-index: -3;
+ }
+
+ & > img {
+ width: 50%;
+ }
+ }
+
+ img {
+ position: relative;
+ width: 70%;
+ object-fit: cover;
+ z-index: -2;
+ }
+
+ &::after {
+ content: "";
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ height: 60%;
+ background: linear-gradient(to bottom,
+ rgba(255, 255, 255, 0) 0%,
+ rgba(255, 255, 255, .7) 10%,
+ rgba(255, 255, 255, 1) 15%,
+ rgba(255, 255, 255, 1) 30%,
+ rgba(255, 255, 255, 1) 40%,
+ rgba(255, 255, 255, 1) 100%);
+ pointer-events: none;
+ z-index: -1;
+ }
+}
+
+.information-description {
+ text-align: left;
+ font-size: 16px;
+ line-height: 125%;
+ font-weight: 400;
+ margin-top: 8px;
+ margin-bottom: 8px;
+
+ & > span {
+ color: #146DA5;
+ }
+}
\ No newline at end of file
diff --git a/src/components/CompatibilityV2/pages/WhatAspects/index.tsx b/src/components/CompatibilityV2/pages/WhatAspects/index.tsx
new file mode 100644
index 0000000..ec222e4
--- /dev/null
+++ b/src/components/CompatibilityV2/pages/WhatAspects/index.tsx
@@ -0,0 +1,82 @@
+import Title from "@/components/Title";
+import styles from "./styles.module.scss";
+import Answer from "../../components/Answer";
+import { useDispatch, useSelector } from "react-redux";
+import { actions, selectors } from "@/store";
+import { sleep } from "@/services/date";
+import { useNavigate } from "react-router-dom";
+import routes from "@/routes";
+import { answerTimeOut } from "../../data";
+import { ELocalesPlacement } from "@/locales";
+import { useTranslations } from "@/hooks/translations";
+import { useMemo } from "react";
+import { ELottieKeys, useLottie } from "@/hooks/lottie/useLottie";
+import { useSession } from "@/hooks/session/useSession";
+import { IAnswersSessionCompatibilityV2 } from "@/api/resources/Session";
+import { ESourceAuthorization } from "@/api/resources/User";
+
+function WhatAspects() {
+ const { translate } = useTranslations(ELocalesPlacement.CompatibilityV2);
+ const { updateSession } = useSession();
+ const dispatch = useDispatch();
+ const navigate = useNavigate();
+ const { whatAspects } = useSelector(selectors.selectCompatibilityV2Answers);
+ useLottie({
+ preloadKey: ELottieKeys.scalesHeartPalmistry,
+ });
+
+ const aspects: { id: IAnswersSessionCompatibilityV2["what_aspects"]; title: string }[] =
+ useMemo(
+ () => [
+ {
+ id: "love_relationships",
+ title: translate("/what-aspects.answer1"),
+ },
+ {
+ id: "health_vitality",
+ title: translate("/what-aspects.answer2"),
+ },
+ {
+ id: "career_destiny",
+ title: translate("/what-aspects.answer3"),
+ },
+ {
+ id: "life_transitions",
+ title: translate("/what-aspects.answer4"),
+ },
+ ],
+ [translate]
+ );
+
+ const handleClick = async (id: IAnswersSessionCompatibilityV2["what_aspects"]) => {
+ dispatch(actions.compatibilityV2Answers.update({ whatAspects: id }));
+ updateSession(
+ {
+ answers: {
+ what_aspects: id,
+ },
+ },
+ ESourceAuthorization["aura.compatibility.v2"]
+ );
+ if (id !== whatAspects) await sleep(answerTimeOut);
+ navigate(routes.client.compatibilityV2RelationshipStatus());
+ };
+
+ return (
+
+ {translate("/paywall.offer_reserved.title", undefined, ELocalesPlacement.PalmistryV0)}
+
+ {time}
+
+
+
+
+
+
+ {translate("/what-aspects.title")}
+
+ {aspects.map((aspect, index) => (
+ handleClick(aspect.id)}
+ />
+ ))}
+
+ );
+}
+
+export default WhatAspects;
diff --git a/src/components/CompatibilityV2/pages/WhatAspects/styles.module.scss b/src/components/CompatibilityV2/pages/WhatAspects/styles.module.scss
new file mode 100644
index 0000000..5bfbb7c
--- /dev/null
+++ b/src/components/CompatibilityV2/pages/WhatAspects/styles.module.scss
@@ -0,0 +1,3 @@
+.container {
+ width: 100%;
+}
diff --git a/src/components/DateTimePicker/DatePicker.tsx b/src/components/DateTimePicker/DatePicker.tsx
index 600f1d1..792e351 100644
--- a/src/components/DateTimePicker/DatePicker.tsx
+++ b/src/components/DateTimePicker/DatePicker.tsx
@@ -9,25 +9,27 @@ import { ELocalesPlacement, language } from "@/locales";
import { getDateInputLocaleFormat } from "@/locales/localFormats";
export function DatePicker(
- props: FormField
+ {!isBackButtonVisible && }
+ {isBackButtonVisible &&
+ AURA
+ */}
+
+
+
+ );
+}
+
+export default Header;
diff --git a/src/components/PalmistryV1/components/Header/styles.module.css b/src/components/PalmistryV1/components/Header/styles.module.css
new file mode 100644
index 0000000..553b22f
--- /dev/null
+++ b/src/components/PalmistryV1/components/Header/styles.module.css
@@ -0,0 +1,15 @@
+.container {
+ display: grid;
+ width: 100%;
+ grid-template-columns: 23px 1fr 23px;
+ align-items: center;
+ justify-items: center;
+}
+
+.title {
+ color: #2c2c2c;
+ font-size: 32px;
+ margin: 0;
+ line-height: 100%;
+}
+
\ No newline at end of file
diff --git a/src/components/PalmistryV1/components/PalmIsReady/index.tsx b/src/components/PalmistryV1/components/PalmIsReady/index.tsx
index 7d65a53..b07ada1 100644
--- a/src/components/PalmistryV1/components/PalmIsReady/index.tsx
+++ b/src/components/PalmistryV1/components/PalmIsReady/index.tsx
@@ -9,7 +9,7 @@ function PalmIsReady() {
return (
+ {translate("secret-discount.secret-discount-table_subtitle")} +
+
+ ![Gift]({images("gift.png")})
+
+ {translate("secret-discount.secret-discount-table_discount-applied")}
+
+ {getText("old.discount")}
+ {getText("new.discount")}
+
+
+
+
+ {translate("secret-discount.secret-discount-table_cost-after-trial", { days: getText("trial.duration") })}
+ {addCurrency(Number(getText("old.price")), currency)} + {getPrice(trialPrice, currency)} +
+
+ {translate("secret-discount.secret-discount-table_you-save", { amount: addCurrency(Number(getText("save")), currency) })}
++
+
+ {translate("secret-discount.secret-discount-table_total-today")}
+ {getPrice(trialPrice, currency)} +{test}
}
{!isLoading && !uploadMenuModalIsOpen && (
//
{translate("/payment.app_number_one", {
@@ -37,10 +112,17 @@ function Payment() {
{translate("/payment.will_be_charged", {
- trialPrice: addCurrency(getFormattedPrice(trialPrice), currency),
- fullPrice: (
- {addCurrency(getFormattedPrice(fullPrice), currency)}
- ),
+ // trialPrice: addCurrency(getFormattedPrice(trialPrice), currency),
+ // fullPrice: (
+ // {addCurrency(getFormattedPrice(fullPrice), currency)}
+ // ),
+ splitPrice: addCurrency(getFormattedPrice(
+ (
+ fullPrice / (
+ Number(getText("split.price.value")) || 2
+ )
+ )
+ ), currency),
save: addCurrency(
getFormattedPrice(fullPrice - trialPrice),
currency
@@ -62,10 +144,28 @@ function Payment() {
})}
Something went wrong
+Payment successful
+![gift]({images("gift.svg")})
+ + {translate("save-off.instead", { + price: {addCurrency(trialPrice, currency)}, + oldPrice: + {translate("save-off.instead-old-price", { + oldPrice: addCurrency(getText("old.price") as string, currency) + })} + + })} +
+
+ ![fire]({images("fire.png")})
+ {translate("save-off.trial-duration", {
+ // days: trialDuration
+ trialDuration: getText("trial.duration"),
+ oldTrialDuration: {translate("save-off.old-trial-duration", {
+ oldTrialDuration: getText("old.trial.duration")
+ })},
+ })}
+
+
+ {translate("save-off.discount-offer", { discount: getText("discount") })}
+
{translate("/scanned-photo.title")}
@@ -112,9 +127,8 @@ function ScannedPhoto() {
{translate("/scanned-photo.text")}
diff --git a/src/components/PalmistryV1/pages/ScannedPhoto/styles.module.scss b/src/components/PalmistryV1/pages/ScannedPhoto/styles.module.scss
index 2fb2b95..b175e19 100644
--- a/src/components/PalmistryV1/pages/ScannedPhoto/styles.module.scss
+++ b/src/components/PalmistryV1/pages/ScannedPhoto/styles.module.scss
@@ -1,6 +1,6 @@
.page {
width: 100%;
- padding: 74px 16px;
+ padding: 0 16px 16px;
margin: 0 auto;
max-width: 560px;
height: fit-content;
@@ -8,7 +8,7 @@
display: flex;
flex-direction: column;
align-items: center;
- gap: 40px;
+ gap: 0px;
--font-family-main: "SF Pro Text", sans-serif;
--stone-grey: #95959d;
@@ -85,6 +85,8 @@
min-height: 36px;
margin: 0;
font-size: 24px;
+ margin-bottom: 16px;
+
&::first-letter {
text-transform: uppercase;
}
@@ -159,4 +161,4 @@
100% {
stroke-dashoffset: 0;
}
-}
+}
\ No newline at end of file
diff --git a/src/components/PalmistryV1/pages/SecretDiscount/index.tsx b/src/components/PalmistryV1/pages/SecretDiscount/index.tsx
new file mode 100644
index 0000000..365f2a5
--- /dev/null
+++ b/src/components/PalmistryV1/pages/SecretDiscount/index.tsx
@@ -0,0 +1,155 @@
+import styles from "./styles.module.scss";
+import Blob3 from "../../images/SVG/Blob3";
+import Blob4 from "../../images/SVG/Blob4";
+import Title from "@/components/Title";
+import SecretDiscountTable from "../../components/SecretDiscountTable";
+import Button from "../../components/Button";
+import { usePaywall } from "@/hooks/paywall/usePaywall";
+import { EPlacementKeys } from "@/api/resources/Paywall";
+import { addCurrency, ELocalesPlacement } from "@/locales";
+import { useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import routes from "@/routes";
+import { useDispatch } from "react-redux";
+import { actions } from "@/store";
+import { useTranslations } from "@/hooks/translations";
+import { useDynamicSize } from "@/hooks/useDynamicSize";
+import Header from "../../components/Header";
+import PaymentModal from "@/components/Payment/PaymentModal";
+import PaymentForm from "@/components/Payment/nmi/PaymentForm";
+// import { getFormattedPrice } from "@/utils/price.utils";
+
+const placementKey = EPlacementKeys["aura.placement.palmistry.secret.discount"]
+
+function SecretDiscount() {
+ const { width, elementRef } = useDynamicSize({ defaultWidth: 560 });
+ const { height, elementRef: policyContainerRef } = useDynamicSize({ defaultWidth: 560, defaultHeight: 193 });
+ const dispatch = useDispatch();
+ const navigate = useNavigate();
+ const { products, currency, getText } = usePaywall({
+ placementKey,
+ localesPlacement: ELocalesPlacement.EmailMarketingPalmistryV2,
+ });
+ const { translate } = useTranslations(ELocalesPlacement.EmailMarketingPalmistryV2);
+
+ // const activeProductFromStore = useSelector(selectors.selectActiveProduct);
+ // const activeProduct = products.find(product => product?.trialPrice === activeProductFromStore?.trialPrice) || products[0]
+ const activeProduct = products[0]
+ // const price = (activeProduct?.price || 0) / 100;
+ const trialPrice = (activeProduct?.trialPrice || 0) / 100;
+ // const trialDuration = activeProduct?.trialDuration || 7;
+ const [isPaymentModalOpen, setIsPaymentModalOpen] = useState(false);
+
+ useEffect(() => {
+ if (!activeProduct) return;
+ dispatch(actions.payment.update({
+ activeProduct
+ }))
+ }, [activeProduct])
+
+ // const [isPaymentModalOpen, setIsPaymentModalOpen] = useState(false);
+
+ // const {
+ // error,
+ // isPaymentSuccess,
+ // showCreditCardForm,
+ // } = usePayment({
+ // placementKey,
+ // activeProduct,
+ // paymentFormType: "lightbox"
+ // });
+
+ const onPaymentSuccess = () => {
+ return navigate(routes.client.paymentSuccess())
+ }
+
+ // const onModalClosed = () => {
+ // // setIsPaymentModalOpen(false);
+ // }
+
+ const onPaymentError = () => {
+ return navigate(routes.client.paymentFail())
+ }
+
+ const onModalClosed = () => {
+ setIsPaymentModalOpen(false);
+ }
+
+ const openPaymentModal = () => {
+ setIsPaymentModalOpen(true);
+ // showCreditCardForm();
+ };
+
+ // useEffect(() => {
+ // if (error) {
+ // onPaymentError();
+ // }
+ // }, [error])
+
+ // useEffect(() => {
+ // if (isPaymentSuccess) {
+ // onPaymentSuccess();
+ // }
+ // }, [isPaymentSuccess])
+
+ return (
+
+
+
+
+
+ )} */}
+
+ {translate("secret-discount.title")}
+
+
+ {translate("secret-discount.policy", {
+ days: getText("trial.duration"),
+ oldDays: getText("old.trial.duration"),
+ trialPrice: addCurrency(trialPrice, currency),
+ price: addCurrency(
+ (
+ Number(getText("old.price"))
+ / (
+ Number(getText("split.price.value")) || 2
+ )
+ ), currency),
+ })}
+
+
+ )
+}
+
+export default SecretDiscount
\ No newline at end of file
diff --git a/src/components/PalmistryV1/pages/SecretDiscount/styles.module.scss b/src/components/PalmistryV1/pages/SecretDiscount/styles.module.scss
new file mode 100644
index 0000000..8454dba
--- /dev/null
+++ b/src/components/PalmistryV1/pages/SecretDiscount/styles.module.scss
@@ -0,0 +1,75 @@
+.container {
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding: 20px 26px;
+ min-height: 100dvh;
+ max-width: 560px;
+ margin: 0 auto;
+ position: relative;
+ overflow: hidden;
+}
+
+.header {
+ padding: 8px 0 30px;
+
+ &>button {
+ margin-left: -12px;
+ }
+}
+
+.blob3 {
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: -1;
+}
+
+.title {
+ padding: 15px 0;
+ background-color: #F096C4;
+ margin: 0;
+ margin-top: 32px;
+ line-height: 100%;
+ width: calc(100% + 52px);
+ font-size: 20px;
+ font-weight: 600;
+ color: #fff;
+ text-transform: uppercase;
+ white-space: nowrap;
+}
+
+.button {
+ font-size: 18px;
+ font-weight: 600;
+ padding: 16px 0;
+ margin-top: 30px;
+}
+
+.policy-container {
+ position: absolute;
+ width: calc(100%);
+ max-width: 560px;
+ height: fit-content;
+ bottom: 0;
+ left: 50%;
+ transform: translateX(-50%);
+
+ &>.policy {
+ width: 100%;
+ margin: 34px 0;
+ padding: 0 14px;
+ font-size: 13px;
+ font-weight: 400;
+ line-height: 130%;
+ color: #fff;
+ }
+
+ .blob4 {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ z-index: -1;
+ }
+}
\ No newline at end of file
diff --git a/src/components/PalmistryV1/pages/TrialPayment/styles.module.scss b/src/components/PalmistryV1/pages/TrialPayment/styles.module.scss
index 2daa132..be96acf 100644
--- a/src/components/PalmistryV1/pages/TrialPayment/styles.module.scss
+++ b/src/components/PalmistryV1/pages/TrialPayment/styles.module.scss
@@ -83,6 +83,6 @@
min-height: auto;
min-width: auto;
padding: 6px 8px;
- white-space: nowrap;
+ white-space: normal;
width: auto;
}
\ No newline at end of file
diff --git a/src/components/PalmistryV2/components/Answer/styles.module.scss b/src/components/PalmistryV2/components/Answer/styles.module.scss
index 57f6408..4fdc96e 100644
--- a/src/components/PalmistryV2/components/Answer/styles.module.scss
+++ b/src/components/PalmistryV2/components/Answer/styles.module.scss
@@ -13,6 +13,7 @@
border: none;
color: #000;
transition: background 0.4s ease-in-out, transform 0.4s ease-in-out;
+ line-height: 100%;
cursor: pointer;
&.selected {
diff --git a/src/components/Payment/PaymentMethodsChoice/index.tsx b/src/components/Payment/PaymentMethodsChoice/index.tsx
new file mode 100644
index 0000000..fb78075
--- /dev/null
+++ b/src/components/Payment/PaymentMethodsChoice/index.tsx
@@ -0,0 +1,44 @@
+import { EPaymentMethod } from "@/data/paymentMethods";
+import styles from "./styles.module.css";
+
+export interface IPaymentMethod {
+ id: EPaymentMethod;
+ icon: string;
+ title: string;
+}
+
+interface IPaymentMethodsChoiceProps {
+ selectedPaymentMethod: EPaymentMethod;
+ onSelectPaymentMethod: (method: EPaymentMethod) => void;
+ paymentMethods: IPaymentMethod[];
+}
+
+function PaymentMethodsChoice({
+ selectedPaymentMethod,
+ paymentMethods,
+ onSelectPaymentMethod,
+}: IPaymentMethodsChoiceProps) {
+ return (
+
+ {paymentMethods.map((method, index) => (
+ onSelectPaymentMethod(method.id)}
+ key={index}
+ >
+
+ 
+
+
+ {method.title}
+
+
+
+ ))}
+
+ );
+}
+
+export default PaymentMethodsChoice;
diff --git a/src/components/Payment/PaymentMethodsChoice/styles.module.css b/src/components/Payment/PaymentMethodsChoice/styles.module.css
new file mode 100644
index 0000000..e49921b
--- /dev/null
+++ b/src/components/Payment/PaymentMethodsChoice/styles.module.css
@@ -0,0 +1,53 @@
+.payment-methods {
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 13px;
+}
+
+.payment-method {
+ width: 100%;
+ background-color: #fff;
+ border-radius: 11px;
+ padding: 17px 12px;
+ display: grid;
+ grid-template-columns: 70px 1fr 42px;
+ align-items: center;
+ justify-items: center;
+}
+
+.payment-method-title {
+ font-size: 16px;
+ font-weight: 400;
+ padding-left: 24px;
+ text-align: left;
+ border-left: 1px solid #DADADA;
+ height: 25px;
+ display: flex;
+ align-items: center;
+ width: 100%;
+}
+
+.checkbox {
+ width: 18px;
+ height: 18px;
+ border-radius: 50%;
+ border: 1px solid #D2D2D2;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.payment-method.active .checkbox {
+ border-color: #191919;
+}
+
+.payment-method.active .checkbox::after {
+ content: "";
+ display: block;
+ width: 12px;
+ height: 12px;
+ border-radius: 50%;
+ background-color: #191919;
+}
diff --git a/src/components/Payment/PaymentModal/index.tsx b/src/components/Payment/PaymentModal/index.tsx
new file mode 100644
index 0000000..b6e345f
--- /dev/null
+++ b/src/components/Payment/PaymentModal/index.tsx
@@ -0,0 +1,55 @@
+import { ReactNode, useEffect, useState } from "react";
+import styles from "./styles.module.scss";
+
+interface IPaymentModalProps {
+ children: ReactNode;
+ open?: boolean;
+ onClose: () => void;
+}
+
+function PaymentModal({ children, open = false, onClose }: IPaymentModalProps) {
+ const [isOpen, setIsOpen] = useState(open);
+ const [isClosing, setIsClosing] = useState(false);
+
+ useEffect(() => {
+ if (open || !isOpen) {
+ return setIsOpen(open);
+ }
+
+ setIsClosing(true);
+ const timeout = setTimeout(() => {
+ setIsClosing(false);
+ setIsOpen(false);
+ }, 750);
+
+ return () => clearTimeout(timeout);
+ }, [open]);
+
+ useEffect(() => {
+ if (isOpen) {
+ document.body.style.overflow = "hidden";
+ } else {
+ document.body.style.overflow = "auto";
+ }
+ }, [isOpen]);
+
+ if (!isOpen) return <>;
+
+ return (
+
+ e.stopPropagation()}>
+
+ 
+
+ {children}
+
+
+ )
+}
+
+export default PaymentModal
\ No newline at end of file
diff --git a/src/components/Payment/PaymentModal/styles.module.scss b/src/components/Payment/PaymentModal/styles.module.scss
new file mode 100644
index 0000000..040d0ab
--- /dev/null
+++ b/src/components/Payment/PaymentModal/styles.module.scss
@@ -0,0 +1,81 @@
+.container {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100vw;
+ height: 100dvh;
+ background-color: rgba(0, 0, 0, 0.5);
+ z-index: 1000;
+ cursor: pointer;
+
+ &>.modal {
+ position: absolute;
+ bottom: 0dvh;
+ left: 50%;
+ transform: translate(-50%, 0);
+ width: 100vw;
+ max-width: 500px;
+ height: fit-content;
+ max-height: calc(100dvh - 24px);
+ background-color: #F1F5FF;
+ border-radius: 17px 17px 0 0;
+ padding: 20px 24px 42px;
+ box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
+ z-index: 1000;
+ animation: slideUp .8s cubic-bezier(0.6, 0.24, 0.1, 0.91);
+ pointer-events: all;
+ overflow-y: auto;
+ overflow-x: hidden;
+ cursor: default;
+
+ &>.backArrowContainer {
+ position: sticky;
+ top: 20px;
+ left: 0px;
+ margin-left: -100%;
+ z-index: 1000;
+ width: fit-content;
+ height: fit-content;
+ background: #fff;
+ padding: 6px 12px;
+ border-radius: 50%;
+ cursor: pointer;
+
+ &>.backArrow {
+ width: 11px;
+ height: 20px;
+ margin-left: -2px;
+ cursor: pointer;
+ }
+ }
+ }
+
+
+ &.closing>.modal {
+ animation: slideDown .8s cubic-bezier(0.6, 0.24, 0.1, 0.91);
+ }
+}
+
+@keyframes slideUp {
+ 0% {
+ display: none;
+ transform: translate(-50%, 100%);
+ }
+
+ 100% {
+ display: block;
+ transform: translate(-50%, 0);
+ }
+}
+
+@keyframes slideDown {
+ 0% {
+ display: block;
+ transform: translate(-50%, 0);
+ }
+
+ 100% {
+ transform: translate(-50%, 100%);
+ display: none;
+ }
+}
\ No newline at end of file
diff --git a/src/components/Payment/SecurityPayments/index.tsx b/src/components/Payment/SecurityPayments/index.tsx
new file mode 100644
index 0000000..a09ba84
--- /dev/null
+++ b/src/components/Payment/SecurityPayments/index.tsx
@@ -0,0 +1,10 @@
+import styles from "./styles.module.css";
+
+function SecurityPayments() {
+ return
+ 
+ Guaranteed security payments
+ ;
+}
+
+export default SecurityPayments;
diff --git a/src/components/Payment/SecurityPayments/styles.module.css b/src/components/Payment/SecurityPayments/styles.module.css
new file mode 100644
index 0000000..ff54fbd
--- /dev/null
+++ b/src/components/Payment/SecurityPayments/styles.module.css
@@ -0,0 +1,12 @@
+.container {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: center;
+ gap: 8px;
+}
+
+.text {
+ font-size: 13px;
+ font-weight: 400;
+}
diff --git a/src/components/Payment/nmi/CheckoutForm/index.tsx b/src/components/Payment/nmi/CheckoutForm/index.tsx
index 65abd17..1386b10 100644
--- a/src/components/Payment/nmi/CheckoutForm/index.tsx
+++ b/src/components/Payment/nmi/CheckoutForm/index.tsx
@@ -3,6 +3,7 @@ import { useEffect } from "react";
import styles from "./styles.module.scss";
import { usePayment } from "@/hooks/payment/nmi/usePayment";
import { EPlacementKeys, IPaywallProduct } from "@/api/resources/Paywall";
+import SecurityPayments from "../../SecurityPayments";
export type TConfirmType = "payment" | "setup";
@@ -75,50 +76,55 @@ export default function CheckoutForm({
id="payment-form"
onSubmit={handleSubmit}
>
-
-
-
- {formValidation.ccnumber.message && (
-
- {formValidation.ccnumber.message}
+
+ 
+
+
+
+ {formValidation.ccnumber.message && (
+
+ {formValidation.ccnumber.message}
+
+ )}
+
+
+
+
+
+
+ {formValidation.ccexp.message && (
+
+ {formValidation.ccexp.message}
+
+ )}
- )}
-
-
-
-
-
- {formValidation.ccexp.message && (
-
- {formValidation.ccexp.message}
-
- )}
-
-
-
-
-
- {formValidation.cvv.message && (
-
- {formValidation.cvv.message}
-
- )}
+
+
+
+ {formValidation.cvv.message && (
+
+ {formValidation.cvv.message}
+
+ )}
+
+
- 
+ 
{isLoading ? "Processing..." : "Pay Now"}
diff --git a/src/components/Payment/nmi/CheckoutForm/styles.module.scss b/src/components/Payment/nmi/CheckoutForm/styles.module.scss
index 8e227a3..2a45dfe 100644
--- a/src/components/Payment/nmi/CheckoutForm/styles.module.scss
+++ b/src/components/Payment/nmi/CheckoutForm/styles.module.scss
@@ -44,25 +44,27 @@
.button {
min-height: 0;
- height: 50px;
+ height: 67px;
text-transform: uppercase;
- background-color: #4caf50;
- border-radius: 25px;
- font-size: 16px;
- gap: 8px;
+ background-color: #224E90;
+ border-radius: 9px;
+ font-size: 20px;
+ font-weight: 300;
+ letter-spacing: 0.07em;
+ gap: 12px;
opacity: 1;
transition: opacity 0.2s ease;
- margin-top: 8px;
+ margin-top: 10px;
&:disabled {
- opacity: 0.7;
+ opacity: 0.4;
cursor: not-allowed;
}
}
.button>img {
- height: 18px;
- margin-top: -5px;
+ height: 22px;
+ // margin-top: -5px;
}
.form {
@@ -70,6 +72,9 @@
max-width: 500px;
margin: 0 auto;
padding: 0;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
}
.hide {
@@ -77,15 +82,23 @@
}
.formRow {
+ display: flex;
+ flex-direction: column;
margin-bottom: 16px;
+ &.cardNumberRow {
+ width: fit-content;
+ margin: 0 auto 16px;
+ }
label {
display: block;
- margin-bottom: 0.5rem;
- font-weight: 500;
+ margin-bottom: 5px;
+ font-weight: 400;
text-align: left;
- padding-left: 12px;
+
+ padding-left: 7px;
+ font-size: 16px;
}
}
@@ -93,6 +106,31 @@
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
+ max-width: 302px;
+ margin-inline: auto;
+}
+
+@media (max-width: 280px) {
+ .formGroup {
+ grid-template-columns: 1fr;
+ gap: 0;
+ }
+
+ .fieldContainer {
+ &.cardExpiry {
+ max-width: none !important;
+ }
+
+ &.cardCvv {
+ max-width: none !important;
+ }
+ }
+
+ .formRow {
+ &:nth-child(2) {
+ margin-left: 0 !important;
+ }
+ }
}
.input {
@@ -109,13 +147,36 @@
}
}
+:global {
+ .CollectJSInlineIframe {
+ width: fit-content !important;
+ max-width: 100% !important;
+ height: 100% !important;
+ border: none !important;
+ }
+
+ #CollectJSInlineccnumber {
+ max-width: 292px !important;
+ }
+
+ #CollectJSInlineccexp {
+ max-width: 130px !important;
+ }
+
+ #CollectJSInlinecvv {
+ max-width: 68px !important;
+ }
+}
+
.fieldContainer {
- border: 1px solid #e2e8f0;
- border-radius: 6px;
+ background-color: #F0F5FF;
+ border: 0.5px solid #CDCDCD;
+ border-radius: 11px;
overflow: hidden;
transition: border-color 0.2s;
- padding: 8px;
- min-height: 40px;
+ padding: 2px;
+ height: 52px;
+ width: 100%;
&:focus-within {
border-color: #3b82f6;
@@ -124,11 +185,50 @@
&.invalid {
border-color: #dc3545;
}
+
+ &.cardNumber {
+ width: fit-content !important;
+ margin: 0 auto !important;
+ padding-left: 6px !important;
+ }
+
+ &.cardExpiry {
+ max-width: 150px;
+ padding: 2px 12px;
+
+ }
+
+ &.cardCvv {
+ max-width: 100px;
+ padding: 2px 12px;
+ }
}
.errorMessage {
color: #dc3545;
font-size: 12px;
- margin: 4px 0;
- min-height: 20px;
-}
\ No newline at end of file
+ margin-top: 4px;
+}
+
+.formContainer {
+ position: relative;
+ width: calc(100% + 30px);
+ max-width: 356px;
+ background-color: #fff;
+ border-radius: 11px;
+ box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
+ padding: 46px 12px 6px;
+ margin-bottom: 21px;
+}
+
+.cardIcon {
+ position: absolute;
+ top: 10px;
+ left: 12px;
+}
+
+// @media (max-width: 376px) {
+// .formContainer {
+// margin-left: -15px;
+// }
+// }
\ No newline at end of file
diff --git a/src/components/Payment/nmi/PaymentForm/index.tsx b/src/components/Payment/nmi/PaymentForm/index.tsx
index b08a634..ae21f6b 100644
--- a/src/components/Payment/nmi/PaymentForm/index.tsx
+++ b/src/components/Payment/nmi/PaymentForm/index.tsx
@@ -5,26 +5,23 @@ import { useSelector } from "react-redux";
import { selectors } from "@/store";
import Loader from "@/components/Loader";
import Title from "@/components/Title";
-import PaymentMethodsChoice from "@/components/pages/ABDesign/v1/pages/TrialPayment/components/PaymentMethodsChoice";
-import { paymentMethods } from "@/data/paymentMethods";
import { EPlacementKeys, IPaywallProduct } from "@/api/resources/Paywall";
-import SecurityPayments from "@/components/pages/ABDesign/v1/pages/TrialPayment/components/SecurityPayments";
import CheckoutForm from "../CheckoutForm";
-
-const paymentMethodsButtons = paymentMethods(null);
+import PaymentMethodsChoice from "../../PaymentMethodsChoice";
+import { EPaymentMethod } from "@/data/paymentMethods";
const getPrice = (product: IPaywallProduct | null) => {
if (!product) {
return 0;
}
- return (product.trialPrice === 100 ? 99 : product.trialPrice || 0) / 100;
+ return (product.trialPrice || 0) / 100;
}
interface IPaymentFormProps {
isSinglePayment?: boolean;
className?: string;
placementKey: EPlacementKeys;
- onPaymentError?: () => void;
+ onPaymentError?: (error?: string) => void;
onPaymentSuccess?: () => void;
onModalClosed?: () => void;
}
@@ -36,6 +33,13 @@ function PaymentForm({ isSinglePayment = false, className, placementKey, onPayme
const isLoading = false;
+ const paymentMethodsButtons = [
+ {
+ id: EPaymentMethod.CREDIT_CARD,
+ icon: "/payment-form/credit-card.svg",
+ title: translate("payment_modal.credit_card")
+ }
+ ]
return (
<>
@@ -88,7 +92,6 @@ function PaymentForm({ isSinglePayment = false, className, placementKey, onPayme
onModalClosed={onModalClosed}
/>}
- {translate("payment_modal.address")}
diff --git a/src/components/Payment/nmi/PaymentForm/styles.module.scss b/src/components/Payment/nmi/PaymentForm/styles.module.scss
index 0488cc8..e9af641 100644
--- a/src/components/Payment/nmi/PaymentForm/styles.module.scss
+++ b/src/components/Payment/nmi/PaymentForm/styles.module.scss
@@ -4,8 +4,12 @@
align-items: center;
justify-content: center;
min-height: 250px;
- gap: 25px;
- color: #2f2e37;
+ gap: 0;
+ color: #000;
+
+ & * {
+ font-family: "SF Pro Text", sans-serif;
+ }
}
.payment-modal.hide {
@@ -15,18 +19,25 @@
}
.title {
- font-weight: 700;
+ font-weight: 500;
font-size: 20px;
line-height: 20px;
text-align: center;
margin: 0;
+ margin-bottom: 48px;
}
.sub-plan-description {
- font-size: 12px;
+ font-size: 13px;
text-align: center;
line-height: 150%;
white-space: pre-wrap;
+ font-weight: 300;
+ margin: 28px 0;
+
+ &>b {
+ font-weight: 500;
+ }
}
.payment-method-container {
@@ -37,8 +48,11 @@
}
.address {
- margin-bottom: 24px;
text-transform: uppercase;
+ font-size: 13px;
+ font-weight: 300;
+ text-align: center;
+ margin-top: 16px;
}
.payment-method {
diff --git a/src/components/pages/ABDesign/v1/components/Toast/index.tsx b/src/components/pages/ABDesign/v1/components/Toast/index.tsx
index 6f94359..02b1afd 100644
--- a/src/components/pages/ABDesign/v1/components/Toast/index.tsx
+++ b/src/components/pages/ABDesign/v1/components/Toast/index.tsx
@@ -3,7 +3,7 @@ import ErrorIcon from "./ErrorIcon";
import styles from "./styles.module.css";
interface IToastProps {
- variant: "error";
+ variant: "error" | "success";
children: React.ReactNode;
classNameContainer?: string;
classNameToast?: string;
@@ -19,6 +19,7 @@ function Toast({
{variant === "error" && ;
+ className?: string;
+ isDecorationShown?: boolean;
};
export default function StepScanPhoto(props: Props) {
- const className = ["scanned-photo"];
+ const { className: classNameProp = "", isDecorationShown = true } = props;
+ const className = ["scanned-photo", classNameProp];
const { lines, drawElementChangeDelay, fingers, drawElements } = props;
const imageRef = useRef(null);
const linesRef = useRef([]);
@@ -39,9 +42,8 @@ export default function StepScanPhoto(props: Props) {
const getCoordinatesString = useCallback(
(points: IPalmistryPoint[]) => {
- const coordinatesString = `M ${points[0]?.x * imageWidth} ${
- points[0]?.y * imageHeight
- }`;
+ const coordinatesString = `M ${points[0]?.x * imageWidth} ${points[0]?.y * imageHeight
+ }`;
return points.reduce(
(acc, point) =>
`${acc} L ${point?.x * imageWidth} ${point?.y * imageHeight}`,
@@ -69,24 +71,25 @@ export default function StepScanPhoto(props: Props) {
>
- 
setIsImageLoaded(true)}
+
+ setIsImageLoaded(true)}
// width={imageWidth}
// height={imageHeight}
- />
+ />
+
{!!imageHeight && !!imageWidth && (
(value < 10 ? `0${value}` : value);
@@ -15,35 +15,43 @@ const buildTimeCaption = (time: number) => {
export default function useTimer() {
const [timeLeft, setTimeLeft] = React.useState(null);
+ const calculateTimeLeft = React.useCallback(() => {
+ const startTime = localStorage.getItem(startTimeKey);
+ if (!startTime) return initialTimeLeft;
+
+ const elapsedTime = Date.now() - parseInt(startTime);
+ return Math.max(0, initialTimeLeft - elapsedTime);
+ }, []);
+
const time = React.useMemo(() => {
if (timeLeft == null) return buildTimeCaption(initialTimeLeft);
-
return buildTimeCaption(timeLeft);
}, [timeLeft]);
React.useEffect(() => {
- const storedTimeLeft = localStorage.getItem(storageKey);
- setTimeLeft(storedTimeLeft ? parseInt(storedTimeLeft) : initialTimeLeft);
- }, []);
+ const startTime = localStorage.getItem(startTimeKey);
+ if (!startTime) {
+ // Первый запуск таймера
+ localStorage.setItem(startTimeKey, Date.now().toString());
+ }
+ setTimeLeft(calculateTimeLeft());
+ }, [calculateTimeLeft]);
React.useEffect(() => {
if (timeLeft === null) return;
if (timeLeft <= 0) {
- localStorage.removeItem(storageKey);
+ // localStorage.removeItem(startTimeKey);
return;
}
const interval = setInterval(() => {
- const newTimeLeft = timeLeft - 1000;
-
+ const newTimeLeft = calculateTimeLeft();
setTimeLeft(newTimeLeft);
-
- localStorage.setItem(storageKey, `${newTimeLeft}`);
}, 1000);
return () => clearInterval(interval);
- }, [timeLeft]);
+ }, [timeLeft, calculateTimeLeft]);
return time;
}
diff --git a/src/hooks/payment/nmi/usePayment.ts b/src/hooks/payment/nmi/usePayment.ts
index 3292d82..dafb596 100644
--- a/src/hooks/payment/nmi/usePayment.ts
+++ b/src/hooks/payment/nmi/usePayment.ts
@@ -88,18 +88,41 @@ export const usePayment = ({
primaryColor: '#066fde',
theme: "material",
price: formPrice,
+ styleSniffer: true,
+ customCss: {
+ "background-color": "#F0F5FF",
+ "height": "51px",
+ "padding": "11px 0",
+ "letter-spacing": "6px",
+ "border": "none",
+ "font-size": "18px",
+ "margin-right": "auto",
+ "margin-left": "auto"
+ },
+ focusCss: {
+ "border": "none",
+ },
+ placeholderCss: {
+ "letter-spacing": "6px",
+ "font-size": "18px",
+ },
fields: {
ccnumber: {
- placeholder: '1234 1234 1234 1234',
- selector: '#card-number'
+ placeholder: '____ ____ ____ ____',
+ selector: '#card-number',
+ title: "Card Number",
+ // enableCardBrandPreviews: true
},
ccexp: {
- placeholder: 'MM/YY',
- selector: '#card-expiry'
+ placeholder: '__ / __',
+ selector: '#card-expiry',
+ title: "Card Expiry"
},
cvv: {
placeholder: 'CVC',
- selector: '#card-cvv'
+ selector: '#card-cvv',
+ title: "Card CVC",
+ display: "hide"
}
},
validationCallback: (field: string, status: boolean, message: string) => {
@@ -154,8 +177,6 @@ export const usePayment = ({
const submitInlineForm = () => {
try {
setIsSubmitting(true);
- console.log("submitInlineForm");
-
window.CollectJS.startPaymentRequest();
} catch (error: any) {
console.error('Payment form error:', error);
diff --git a/src/hooks/paywall/defaultPaywalls.ts b/src/hooks/paywall/defaultPaywalls.ts
index 8f8f0c7..56c4579 100644
--- a/src/hooks/paywall/defaultPaywalls.ts
+++ b/src/hooks/paywall/defaultPaywalls.ts
@@ -820,5 +820,330 @@ export const defaultPaywalls: { [key in EPlacementKeys]: IPaywall } = {
"currency": "usd"
}
]
- }
+ },
+ "aura.placement.palmistry.secret.discount": {
+ "_id": "67a2672aa7f516fa5349d44c",
+ "key": "aura.paywall.palmistry.secret.discount",
+ "name": "Palmistry Secret Discount",
+ "properties": [
+ {
+ "key": "full.price",
+ "value": "45",
+ "_id": "6683454db852ddedb5d6b46b"
+ },
+ {
+ "key": "discount",
+ "value": "70",
+ "_id": "6683454db852ddedb5d6b46c"
+ },
+ {
+ "key": "old.discount",
+ "value": "-30%",
+ "_id": "6683454db852ddedb5d6b46d"
+ },
+ {
+ "key": "new.discount",
+ "value": "-50%",
+ "_id": "6683454db852ddedb5d6b46e"
+ },
+ {
+ "key": "old.price",
+ "value": "19",
+ "_id": "67a2686fa7f516fa5349db6b"
+ },
+ {
+ "key": "save",
+ "value": "30",
+ "_id": "67a2686fa7f516fa5349db6c"
+ }
+ ],
+ "products": [
+ {
+ "_id": "66589439ef0d180993cdb72f",
+ "key": "compatibility.secret.discount.trial.0",
+ "productId": "prod_PnStTEBzrPLgvL",
+ "name": "Сompatibility AURA Secret Discount | Trial $0.99",
+ "priceId": "price_1PpFlMIlX4lgwUxrUTeWDFoI",
+ "type": "subscription",
+ "description": "Description",
+ "discountPrice": null,
+ "discountPriceId": null,
+ "isDiscount": false,
+ "isFreeTrial": false,
+ "isTrial": true,
+ "price": 900,
+ "trialDuration": 3,
+ "trialPrice": 100,
+ "trialPriceId": "price_1PpFoNIlX4lgwUxrP4l0lbE5",
+ "currency": "usd"
+ },
+ {
+ "_id": "6658946cef0d180993cdb79f",
+ "key": "compatibility.secret.discount.trial.1",
+ "productId": "prod_PnStTEBzrPLgvL",
+ "name": "Сompatibility AURA Secret Discount | Trial $5.00",
+ "priceId": "price_1PpFlMIlX4lgwUxrUTeWDFoI",
+ "type": "subscription",
+ "description": "Description",
+ "discountPrice": null,
+ "discountPriceId": null,
+ "isDiscount": false,
+ "isFreeTrial": false,
+ "isTrial": true,
+ "price": 900,
+ "trialDuration": 3,
+ "trialPrice": 500,
+ "trialPriceId": "price_1PpFpMIlX4lgwUxrKX7uwKMa",
+ "currency": "usd"
+ },
+ {
+ "_id": "66589544ef0d180993cdb7dc",
+ "key": "compatibility.secret.discount.trial.2",
+ "productId": "prod_PnStTEBzrPLgvL",
+ "name": "Сompatibility AURA Secret Discount | Trial $9.00",
+ "priceId": "price_1PpFlMIlX4lgwUxrUTeWDFoI",
+ "type": "subscription",
+ "description": "Description",
+ "discountPrice": null,
+ "discountPriceId": null,
+ "isDiscount": false,
+ "isFreeTrial": false,
+ "isTrial": true,
+ "price": 900,
+ "trialDuration": 3,
+ "trialPrice": 900,
+ "trialPriceId": "price_1PpFpiIlX4lgwUxrGp2qwZph",
+ "currency": "usd"
+ },
+ {
+ "_id": "66589591ef0d180993cdb88e",
+ "key": "compatibility.secret.discount.trial.3",
+ "productId": "prod_PnStTEBzrPLgvL",
+ "name": "Сompatibility AURA Secret Discount | Trial $13.76",
+ "priceId": "price_1PpFlMIlX4lgwUxrUTeWDFoI",
+ "type": "subscription",
+ "description": "Description",
+ "discountPrice": null,
+ "discountPriceId": null,
+ "isDiscount": false,
+ "isFreeTrial": false,
+ "isTrial": true,
+ "price": 900,
+ "trialDuration": 3,
+ "trialPrice": 1376,
+ "trialPriceId": "price_1PpFqfIlX4lgwUxrgGygG1Qf",
+ "currency": "usd"
+ }
+ ]
+ },
+ "aura.placement.compatibility.v2": {
+ "_id": "66565a0ee4ad13456f7d0079",
+ "key": "aura.paywall.compatibility.v2",
+ "name": "Compatibility V2",
+ "properties": [
+ {
+ "key": "text.0",
+ "value": "We've helped millions of people to\nreveal the destiny of their love life\nand what the future holds for them\nand their families.",
+ "_id": "664542bbfe0a8eb4ee0b4f27"
+ },
+ {
+ "key": "text.1",
+ "value": "It costs us $13.21 to compensate our AURA\nemployees for the trial, but please choose the\namount you are comfortable with.",
+ "_id": "664542bbfe0a8eb4ee0b4f29"
+ }
+ ],
+ "products": [
+ {
+ "_id": "65ff043dfc0fcfc4be550035",
+ "key": "compatibility.pdf.trial.0",
+ "productId": "prod_PnStTEBzrPLgvL",
+ "name": "Сompatibility AURA | Trial $0.99",
+ "priceId": "price_1PpFiwIlX4lgwUxruq9bpp0j",
+ "type": "subscription",
+ "description": "Description",
+ "discountPrice": null,
+ "discountPriceId": null,
+ "isDiscount": false,
+ "isFreeTrial": false,
+ "isTrial": true,
+ "price": 1900,
+ "trialDuration": 7,
+ "trialPrice": 99,
+ "trialPriceId": "price_1PpFoNIlX4lgwUxrP4l0lbE5",
+ "currency": "usd"
+ },
+ {
+ "_id": "66420b6e859ff1199d3a6e88",
+ "key": "compatibility.pdf.trial.1",
+ "productId": "prod_PnStTEBzrPLgvL",
+ "name": "Сompatibility AURA | Trial $5.00",
+ "priceId": "price_1PpFiwIlX4lgwUxruq9bpp0j",
+ "type": "subscription",
+ "description": "Description",
+ "discountPrice": null,
+ "discountPriceId": null,
+ "isDiscount": false,
+ "isFreeTrial": false,
+ "isTrial": true,
+ "price": 1900,
+ "trialDuration": 7,
+ "trialPrice": 500,
+ "trialPriceId": "price_1PpFpMIlX4lgwUxrKX7uwKMa",
+ "currency": "usd"
+ },
+ {
+ "_id": "66420be1859ff1199d3a6e89",
+ "key": "compatibility.pdf.trial.2",
+ "productId": "prod_PnStTEBzrPLgvL",
+ "name": "Сompatibility AURA | Trial $9.00",
+ "priceId": "price_1PpFiwIlX4lgwUxruq9bpp0j",
+ "type": "subscription",
+ "description": "Description",
+ "discountPrice": null,
+ "discountPriceId": null,
+ "isDiscount": false,
+ "isFreeTrial": false,
+ "isTrial": true,
+ "price": 1900,
+ "trialDuration": 7,
+ "trialPrice": 900,
+ "trialPriceId": "price_1PpFpiIlX4lgwUxrGp2qwZph",
+ "currency": "usd"
+ },
+ {
+ "_id": "66420c1c859ff1199d3a6e8a",
+ "key": "compatibility.pdf.trial.3",
+ "productId": "prod_PnStTEBzrPLgvL",
+ "name": "Сompatibility AURA | Trial $13.76",
+ "priceId": "price_1PpFiwIlX4lgwUxruq9bpp0j",
+ "type": "subscription",
+ "description": "Description",
+ "discountPrice": null,
+ "discountPriceId": null,
+ "isDiscount": false,
+ "isFreeTrial": false,
+ "isTrial": true,
+ "price": 1900,
+ "trialDuration": 7,
+ "trialPrice": 1200,
+ "trialPriceId": "price_1PqzysIlX4lgwUxrai849j9H",
+ "currency": "usd"
+ }
+ ]
+ },
+ "aura.placement.compatibility.v2.secret.discount": {
+ "_id": "67a2672aa7f516fa5349d44c",
+ "key": "aura.paywall.compatibility.v2.secret.discount",
+ "name": "Compatibility V2 Secret Discount",
+ "properties": [
+ {
+ "key": "full.price",
+ "value": "45",
+ "_id": "6683454db852ddedb5d6b46b"
+ },
+ {
+ "key": "discount",
+ "value": "70",
+ "_id": "6683454db852ddedb5d6b46c"
+ },
+ {
+ "key": "old.discount",
+ "value": "-30%",
+ "_id": "6683454db852ddedb5d6b46d"
+ },
+ {
+ "key": "new.discount",
+ "value": "-50%",
+ "_id": "6683454db852ddedb5d6b46e"
+ },
+ {
+ "key": "old.price",
+ "value": "19",
+ "_id": "67a2686fa7f516fa5349db6b"
+ },
+ {
+ "key": "save",
+ "value": "30",
+ "_id": "67a2686fa7f516fa5349db6c"
+ }
+ ],
+ "products": [
+ {
+ "_id": "66589439ef0d180993cdb72f",
+ "key": "compatibility.secret.discount.trial.0",
+ "productId": "prod_PnStTEBzrPLgvL",
+ "name": "Сompatibility AURA Secret Discount | Trial $0.99",
+ "priceId": "price_1PpFlMIlX4lgwUxrUTeWDFoI",
+ "type": "subscription",
+ "description": "Description",
+ "discountPrice": null,
+ "discountPriceId": null,
+ "isDiscount": false,
+ "isFreeTrial": false,
+ "isTrial": true,
+ "price": 900,
+ "trialDuration": 3,
+ "trialPrice": 100,
+ "trialPriceId": "price_1PpFoNIlX4lgwUxrP4l0lbE5",
+ "currency": "usd"
+ },
+ {
+ "_id": "6658946cef0d180993cdb79f",
+ "key": "compatibility.secret.discount.trial.1",
+ "productId": "prod_PnStTEBzrPLgvL",
+ "name": "Сompatibility AURA Secret Discount | Trial $5.00",
+ "priceId": "price_1PpFlMIlX4lgwUxrUTeWDFoI",
+ "type": "subscription",
+ "description": "Description",
+ "discountPrice": null,
+ "discountPriceId": null,
+ "isDiscount": false,
+ "isFreeTrial": false,
+ "isTrial": true,
+ "price": 900,
+ "trialDuration": 3,
+ "trialPrice": 500,
+ "trialPriceId": "price_1PpFpMIlX4lgwUxrKX7uwKMa",
+ "currency": "usd"
+ },
+ {
+ "_id": "66589544ef0d180993cdb7dc",
+ "key": "compatibility.secret.discount.trial.2",
+ "productId": "prod_PnStTEBzrPLgvL",
+ "name": "Сompatibility AURA Secret Discount | Trial $9.00",
+ "priceId": "price_1PpFlMIlX4lgwUxrUTeWDFoI",
+ "type": "subscription",
+ "description": "Description",
+ "discountPrice": null,
+ "discountPriceId": null,
+ "isDiscount": false,
+ "isFreeTrial": false,
+ "isTrial": true,
+ "price": 900,
+ "trialDuration": 3,
+ "trialPrice": 900,
+ "trialPriceId": "price_1PpFpiIlX4lgwUxrGp2qwZph",
+ "currency": "usd"
+ },
+ {
+ "_id": "66589591ef0d180993cdb88e",
+ "key": "compatibility.secret.discount.trial.3",
+ "productId": "prod_PnStTEBzrPLgvL",
+ "name": "Сompatibility AURA Secret Discount | Trial $13.76",
+ "priceId": "price_1PpFlMIlX4lgwUxrUTeWDFoI",
+ "type": "subscription",
+ "description": "Description",
+ "discountPrice": null,
+ "discountPriceId": null,
+ "isDiscount": false,
+ "isFreeTrial": false,
+ "isTrial": true,
+ "price": 900,
+ "trialDuration": 3,
+ "trialPrice": 1376,
+ "trialPriceId": "price_1PpFqfIlX4lgwUxrgGygG1Qf",
+ "currency": "usd"
+ }
+ ]
+ },
}
\ No newline at end of file
diff --git a/src/locales/index.ts b/src/locales/index.ts
index f59cec8..f38bb67 100644
--- a/src/locales/index.ts
+++ b/src/locales/index.ts
@@ -85,6 +85,8 @@ export enum ELocalesPlacement {
Chats = "chats",
EmailMarketingCompatibilityV1 = "email-marketing-comp-v1",
EmailMarketingPalmistryV2 = "email-marketing-palmistry-v2",
+ EmailMarketingCompatibilityV2 = "email-marketing-comp-v2",
+ CompatibilityV2 = "compatibility-v2",
}
interface ITranslationJSON {
diff --git a/src/locales/localFormats.ts b/src/locales/localFormats.ts
index ee0db30..e17385c 100644
--- a/src/locales/localFormats.ts
+++ b/src/locales/localFormats.ts
@@ -1,14 +1,52 @@
export const getDateInputLocaleFormat = (locale: string) => {
- const dateFormat = new Intl.DateTimeFormat(locale, { year: "numeric", month: "numeric", day: "numeric" }).formatToParts().filter((part) => part.type !== "literal").map((part) => {
- if (["year", "relatedYear"].includes(part.type as string)) {
+ const dateFormat = new Intl.DateTimeFormat(locale, { year: "numeric", month: "numeric", day: "numeric" })?.formatToParts()?.filter((part) => part.type !== "literal")?.map((part) => {
+ if (["year", "relatedYear"].includes(part?.type as string)) {
return "y";
}
- if (["month"].includes(part.type as string)) {
+ if (["month"].includes(part?.type as string)) {
return "m";
}
- if (["day"].includes(part.type as string)) {
+ if (["day"].includes(part?.type as string)) {
return "d";
}
});
return [...new Set(dateFormat)]
-}
\ No newline at end of file
+}
+
+/**
+ * Преобразует дату из формата "YYYY-MM-DD" в локализованный формат с учетом региональных настроек.
+ * Важно: функция ожидает дату в формате "YYYY-MM-DD" для корректной работы во всех часовых поясах.
+ *
+ * @param dateString - Строка даты в формате "YYYY-MM-DD" (например, "2011-01-01")
+ * @param locale - Код локали (например, "en", "ru")
+ * @returns Отформатированная дата в соответствии с локальным форматом (например, "01.01.2011" для ru)
+ *
+ * @example
+ * formatDateToLocale("2011-01-01", "ru") // returns "01.01.2011"
+ * formatDateToLocale("2011-01-01", "en") // returns "01.01.2011"
+ */
+export const formatDateToLocale = (dateString: string, locale: string): string => {
+ // Разбираем дату из формата YYYY-MM-DD
+ try {
+ const [year, month, day] = dateString?.split(" ")?.[0]?.split('-')?.map(Number);
+ // Создаем дату с явным указанием компонентов для избежания проблем с часовыми поясами
+ const date = new Date(year, month - 1, day);
+
+
+ const format = getDateInputLocaleFormat(locale);
+
+ const parts = {
+ y: date?.getFullYear(),
+ m: String(date?.getMonth() + 1)?.padStart(2, '0'),
+ d: String(date?.getDate())?.padStart(2, '0')
+ };
+
+ return format?.map(part => parts[part as keyof typeof parts])?.join('.');
+ } catch (error) {
+ console.error(error);
+ console.error("Wrong date format: ", dateString);
+ return "";
+ }
+}
+
+
diff --git a/src/routerComponents/Compatibility/v2/CheckSubscriptionOutlet/index.tsx b/src/routerComponents/Compatibility/v2/CheckSubscriptionOutlet/index.tsx
new file mode 100644
index 0000000..a8f1b30
--- /dev/null
+++ b/src/routerComponents/Compatibility/v2/CheckSubscriptionOutlet/index.tsx
@@ -0,0 +1,29 @@
+import { useAuth } from "@/auth";
+import routes from "@/routes";
+import { selectors } from "@/store";
+import { useSelector } from "react-redux";
+import { Navigate, Outlet } from "react-router-dom";
+
+interface ICheckSubscriptionOutletProps {
+ subscribedReturnUrl?: string;
+ unsubscribedReturnUrl?: string;
+}
+
+function CheckSubscriptionOutlet({
+ subscribedReturnUrl = routes.client.home(),
+ unsubscribedReturnUrl,
+}: ICheckSubscriptionOutletProps) {
+ const status = useSelector(selectors.selectStatus);
+ const { user } = useAuth();
+
+ if (user && status === "subscribed") {
+ return (null);
+ useSchemeColorByElement(mainRef.current, "section.page, .page, section", [
+ location,
+ ]);
+ const isShowPaymentModal = useSelector(
+ selectors.selectCompatibilityV2IsShowPaymentModalV1
+ );
+
+ const [searchParams] = useSearchParams();
+ const subscriptionStatus =
+ searchParams.get("redirect_status") === "succeeded" ? "subscribed" : "lead";
+
+ const getIsBackButtonVisible = () => {
+ for (const route of isBackButtonVisibleRoutes) {
+ if (location.pathname.includes(route)) return true;
+ }
+ return false;
+ };
+
+ useEffect(() => {
+ dispatch(actions.compatibilityV2.setIsShowPaymentModalV1(false));
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [location]);
+
+ return (
+ <>
+
+
+
+ {/* */}
+
+
+ );
+}
+
+export default Layout;
diff --git a/src/routerComponents/Compatibility/v2/Layout/styles.module.css b/src/routerComponents/Compatibility/v2/Layout/styles.module.css
new file mode 100644
index 0000000..5a4a749
--- /dev/null
+++ b/src/routerComponents/Compatibility/v2/Layout/styles.module.css
@@ -0,0 +1,33 @@
+.main {
+ align-items: center;
+ padding: 20px 26px;
+ height: fit-content;
+ min-height: 100dvh;
+ max-width: 560px;
+ margin: 0 auto;
+}
+
+.header {
+ padding: 8px 0 30px;
+}
+
+.header-title {
+ color: #275CA7;
+}
+
+.page {
+ width: 100%;
+ height: fit-content;
+ padding-bottom: 32px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+
+.payment-modal-hide {
+ transform: translateY(150%);
+}
+
+.payment-modal-active {
+ animation: appearance 1s;
+}
\ No newline at end of file
diff --git a/src/routerComponents/Compatibility/v2/LayoutPersonalVideo/index.tsx b/src/routerComponents/Compatibility/v2/LayoutPersonalVideo/index.tsx
new file mode 100644
index 0000000..723b800
--- /dev/null
+++ b/src/routerComponents/Compatibility/v2/LayoutPersonalVideo/index.tsx
@@ -0,0 +1,71 @@
+import routes from "@/routes";
+import styles from "./styles.module.scss";
+import PersonalVideo from "@/components/pages/ABDesign/v1/pages/TrialPayment/components/PersonalVideo";
+import { actions, selectors } from "@/store";
+import { useDispatch, useSelector } from "react-redux";
+import { Outlet, useLocation } from "react-router-dom";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { getDefaultLocaleByLanguage, language } from "@/locales";
+
+export interface IOutletContext {
+ containerVideoRef: React.RefObject;
+ isVisibleElements: boolean;
+ setIsVisibleElements: (value: boolean) => void;
+ setShowElements: (value: () => void) => void;
+}
+
+function LayoutPersonalVideo() {
+ const dispatch = useDispatch();
+ const location = useLocation();
+ const { gender } = useSelector(selectors.selectQuestionnaire);
+ const [isVisibleElements, setIsVisibleElements] = useState(false);
+ const showElementsTimer = useRef();
+ const containerVideoRef = useRef(null);
+
+ const locale = getDefaultLocaleByLanguage(language);
+
+ const videoUrl =
+ locale === "es"
+ ? "/trial-choice-palmistry-es.mp4"
+ : "/trial-choice-palmistry.mp4";
+
+ const showElements = useCallback(() => {
+ showElementsTimer.current = setTimeout(() => {
+ setIsVisibleElements(true);
+ }, 29_000);
+ }, [setIsVisibleElements]);
+
+ useEffect(() => {
+ if (location.pathname !== routes.client.compatibilityV2TrialChoiceVideo()) {
+ dispatch(actions.personalVideo.updateIsVideoPlaying(false));
+ }
+ }, [dispatch, location.pathname]);
+
+ return (
+ <>
+ (null);
+ useSchemeColorByElement(mainRef.current, "section.page, .page, section", [
+ location,
+ ]);
+
+ const getCurrentStep = () => {
+ let index = 0;
+ for (const route of stepperRoutes) {
+ if (location.pathname.includes(route)) {
+ if (location.pathname.includes(routes.client.compatibilityV2BirthdatePartner())) {
+ return 8;
+ }
+ if (location.pathname.includes(routes.client.compatibilityV2PalmsInformationPartner())) {
+ return 9;
+ }
+ return index + 1;
+ }
+
+
+ index++;
+
+ }
+ return 0;
+ };
+
+ return (
+ <>
+
+
+ );
+}
+
+export default CompatibilityV2Routes;
diff --git a/src/routerComponents/Palmistry/v1/LayoutPalmistryV1/index.tsx b/src/routerComponents/Palmistry/v1/LayoutPalmistryV1/index.tsx
index ffb3210..154da66 100644
--- a/src/routerComponents/Palmistry/v1/LayoutPalmistryV1/index.tsx
+++ b/src/routerComponents/Palmistry/v1/LayoutPalmistryV1/index.tsx
@@ -1,4 +1,3 @@
-import Header from "@/components/pages/ABDesign/v1/components/Header";
import styles from "./styles.module.css";
import { useSchemeColorByElement } from "@/hooks/useSchemeColorByElement";
import { useEffect, useRef } from "react";
@@ -7,6 +6,7 @@ import routes from "@/routes";
import { useDispatch, useSelector } from "react-redux";
import { actions, selectors } from "@/store";
import PaymentModalV1 from "@/components/PalmistryV1/components/PaymentModalV1";
+import Header from "@/components/PalmistryV1/components/Header";
const isBackButtonVisibleRoutes = [
routes.client.palmistryV1Birthdate(),
diff --git a/src/routerComponents/Palmistry/v1/index.tsx b/src/routerComponents/Palmistry/v1/index.tsx
index 0e40443..3460d1c 100644
--- a/src/routerComponents/Palmistry/v1/index.tsx
+++ b/src/routerComponents/Palmistry/v1/index.tsx
@@ -29,6 +29,8 @@ import CheckSubscriptionOutlet from "./CheckSubscriptionOutlet";
import TrialChoiceVideo from "@/components/PalmistryV1/pages/TrialChoiceVideo";
import LayoutPersonalVideo from "./LayoutPersonalVideo";
import OnboardingPage from "@/components/pages/ABDesign/v1/pages/Onboarding";
+import SaveOff from "@/components/PalmistryV1/pages/SaveOff";
+import SecretDiscount from "@/components/PalmistryV1/pages/SecretDiscount";
const removePrefix = (path: string) => path.replace(palmistryV1Prefix, "");
@@ -45,6 +47,10 @@ function PalmistryV1Routes() {
path={removePrefix(routes.client.palmistryOnboardingV1())}
element={>) {
+ return { ...state, ...action.payload };
+ },
+ setIsShowPaymentModalV1(state, action: PayloadAction) {
+ return { ...state, isShowPaymentModalV1: action.payload };
+ }
+ },
+ extraReducers: (builder) => builder.addCase("reset", () => initialState),
+});
+
+export const { actions } = compatibilityV2Slice;
+export const selectCompatibilityV2Lines = createSelector(
+ (state: { compatibilityV2: ICompatibilityV2 }) => state.compatibilityV2.lines,
+ (compatibilityV2) => compatibilityV2
+);
+export const selectCompatibilityV2Fingers = createSelector(
+ (state: { compatibilityV2: ICompatibilityV2 }) => state.compatibilityV2.fingers,
+ (compatibilityV2) => compatibilityV2
+);
+export const selectCompatibilityV2Photo = createSelector(
+ (state: { compatibilityV2: ICompatibilityV2 }) => state.compatibilityV2.photo,
+ (compatibilityV2) => compatibilityV2
+);
+export const selectCompatibilityV2FromRedesign = createSelector(
+ (state: { compatibilityV2: ICompatibilityV2 }) => state.compatibilityV2.fromRedesign,
+ (compatibilityV2) => compatibilityV2
+);
+export const selectCompatibilityV2IsShowPaymentModalV1 = createSelector(
+ (state: { compatibilityV2: ICompatibilityV2 }) => state.compatibilityV2.isShowPaymentModalV1,
+ (compatibilityV2) => compatibilityV2
+);
+export default compatibilityV2Slice.reducer;
diff --git a/src/store/compatibilityV2Answers.ts b/src/store/compatibilityV2Answers.ts
new file mode 100644
index 0000000..955afea
--- /dev/null
+++ b/src/store/compatibilityV2Answers.ts
@@ -0,0 +1,42 @@
+import { createSlice, createSelector } from "@reduxjs/toolkit";
+import type { PayloadAction } from "@reduxjs/toolkit";
+
+export interface ICompatibilityV2Answers {
+ whatAspects: string;
+ relationshipStatus: string;
+ elementResonates: string;
+ favoriteColor: string;
+ headOrHeart: string;
+ dateEvent: string;
+ romanticGestures: string;
+ checkingPhone: string;
+}
+
+const initialState: ICompatibilityV2Answers = {
+ whatAspects: "",
+ relationshipStatus: "",
+ elementResonates: "",
+ favoriteColor: "",
+ headOrHeart: "",
+ dateEvent: "",
+ romanticGestures: "",
+ checkingPhone: "",
+};
+
+const compatibilityV2AnswersSlice = createSlice({
+ name: "compatibilityV2Answers",
+ initialState,
+ reducers: {
+ update(state, action: PayloadAction>) {
+ return { ...state, ...action.payload };
+ },
+ },
+ extraReducers: (builder) => builder.addCase("reset", () => initialState),
+});
+
+export const { actions } = compatibilityV2AnswersSlice;
+export const selectCompatibilityV2Answers = createSelector(
+ (state: { compatibilityV2Answers: ICompatibilityV2Answers }) => state.compatibilityV2Answers,
+ (compatibilityV2Answers) => compatibilityV2Answers
+);
+export default compatibilityV2AnswersSlice.reducer;
diff --git a/src/store/index.ts b/src/store/index.ts
index 2300bdc..3ec278f 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -15,6 +15,10 @@ import palmistryV1Answers, {
actions as palmistryV1AnswersActions,
selectPalmistryV1Answers,
} from "./palmistryV1Answers";
+import compatibilityV2Answers, {
+ actions as compatibilityV2AnswersActions,
+ selectCompatibilityV2Answers,
+} from "./compatibilityV2Answers";
import user, { actions as userActions, selectUser } from "./user";
import form, {
actions as formActions,
@@ -78,6 +82,14 @@ import palmistry, {
selectPalmistryLines,
selectPalmistryPhoto
} from "./palmistry";
+import compatibilityV2, {
+ actions as compatibilityV2Actions,
+ selectCompatibilityV2Fingers,
+ selectCompatibilityV2FromRedesign,
+ selectCompatibilityV2IsShowPaymentModalV1,
+ selectCompatibilityV2Lines,
+ selectCompatibilityV2Photo
+} from "./compatibilityV2";
import { selectPaywallsIsMustUpdate, selectPaywalls } from "./paywalls";
import privacyPolicy, { actions as privacyPolicyActions, selectPrivacyPolicy } from "./privacyPolicy";
import personalVideo, { actions as personalVideoActions, selectPersonalVideo } from "./personalVideo";
@@ -103,8 +115,10 @@ export const actions = {
onboardingConfig: onboardingConfigActions,
questionnaire: questionnaireActions,
palmistryV1Answers: palmistryV1AnswersActions,
+ compatibilityV2Answers: compatibilityV2AnswersActions,
userConfig: userConfigActions,
palmistry: palmistryActions,
+ compatibilityV2: compatibilityV2Actions,
privacyPolicy: privacyPolicyActions,
personalVideo: personalVideoActions,
chats: chatsActions,
@@ -159,7 +173,12 @@ export const selectors = {
selectCurrentChatId,
selectIsAutoRefill,
selectIsPayedFirstPurchase,
- selectDateEndChatting,
+ selectDateEndChatting,selectCompatibilityV2Fingers,
+ selectCompatibilityV2FromRedesign,
+ selectCompatibilityV2IsShowPaymentModalV1,
+ selectCompatibilityV2Lines,
+ selectCompatibilityV2Photo,
+ selectCompatibilityV2Answers,
...formSelectors,
};
@@ -182,6 +201,8 @@ export const reducer = combineReducers({
palmistryV1Answers,
userConfig,
palmistry,
+ compatibilityV2,
+ compatibilityV2Answers,
paywalls,
privacyPolicy,
personalVideo,
diff --git a/src/store/paywalls.ts b/src/store/paywalls.ts
index 1933c67..27c2554 100644
--- a/src/store/paywalls.ts
+++ b/src/store/paywalls.ts
@@ -28,6 +28,9 @@ const initialState: TPaywalls = {
"aura.placement.email.palmistry": null,
"aura.placement.email.palmistry.discount": null,
"aura.placement.email.compatibility.discount": null,
+ "aura.placement.palmistry.secret.discount": null,
+ "aura.placement.compatibility.v2": null,
+ "aura.placement.compatibility.v2.secret.discount": null,
isMustUpdate: {
"aura.placement.v1.mike": true,
"aura.placement.main": true,
@@ -40,6 +43,9 @@ const initialState: TPaywalls = {
"aura.placement.email.palmistry": true,
"aura.placement.email.palmistry.discount": true,
"aura.placement.email.compatibility.discount": true,
+ "aura.placement.palmistry.secret.discount": true,
+ "aura.placement.compatibility.v2": true,
+ "aura.placement.compatibility.v2.secret.discount": true,
},
}
diff --git a/src/store/session.ts b/src/store/session.ts
index de90f3c..173bf5a 100644
--- a/src/store/session.ts
+++ b/src/store/session.ts
@@ -13,7 +13,8 @@ const initialState: TSessions = {
"aura.moons": "",
"aura.main.new": "",
"aura.palmistry.new": "",
- "aura.chats": ""
+ "aura.chats": "",
+ "aura.compatibility.v2": "",
}
const sessionSlice = createSlice({
+
+ + {translate("secret-discount.policy", { + days: getText("trial.duration"), + oldDays: getText("old.trial.duration"), + trialPrice: addCurrency(trialPrice, currency), + price: addCurrency( + ( + Number(getText("old.price")) + / ( + Number(getText("split.price.value")) || 2 + ) + ), currency), + })} +
+
+ {paymentMethods.map((method, index) => (
+
+ );
+}
+
+export default PaymentMethodsChoice;
diff --git a/src/components/Payment/PaymentMethodsChoice/styles.module.css b/src/components/Payment/PaymentMethodsChoice/styles.module.css
new file mode 100644
index 0000000..e49921b
--- /dev/null
+++ b/src/components/Payment/PaymentMethodsChoice/styles.module.css
@@ -0,0 +1,53 @@
+.payment-methods {
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 13px;
+}
+
+.payment-method {
+ width: 100%;
+ background-color: #fff;
+ border-radius: 11px;
+ padding: 17px 12px;
+ display: grid;
+ grid-template-columns: 70px 1fr 42px;
+ align-items: center;
+ justify-items: center;
+}
+
+.payment-method-title {
+ font-size: 16px;
+ font-weight: 400;
+ padding-left: 24px;
+ text-align: left;
+ border-left: 1px solid #DADADA;
+ height: 25px;
+ display: flex;
+ align-items: center;
+ width: 100%;
+}
+
+.checkbox {
+ width: 18px;
+ height: 18px;
+ border-radius: 50%;
+ border: 1px solid #D2D2D2;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.payment-method.active .checkbox {
+ border-color: #191919;
+}
+
+.payment-method.active .checkbox::after {
+ content: "";
+ display: block;
+ width: 12px;
+ height: 12px;
+ border-radius: 50%;
+ background-color: #191919;
+}
diff --git a/src/components/Payment/PaymentModal/index.tsx b/src/components/Payment/PaymentModal/index.tsx
new file mode 100644
index 0000000..b6e345f
--- /dev/null
+++ b/src/components/Payment/PaymentModal/index.tsx
@@ -0,0 +1,55 @@
+import { ReactNode, useEffect, useState } from "react";
+import styles from "./styles.module.scss";
+
+interface IPaymentModalProps {
+ children: ReactNode;
+ open?: boolean;
+ onClose: () => void;
+}
+
+function PaymentModal({ children, open = false, onClose }: IPaymentModalProps) {
+ const [isOpen, setIsOpen] = useState(open);
+ const [isClosing, setIsClosing] = useState(false);
+
+ useEffect(() => {
+ if (open || !isOpen) {
+ return setIsOpen(open);
+ }
+
+ setIsClosing(true);
+ const timeout = setTimeout(() => {
+ setIsClosing(false);
+ setIsOpen(false);
+ }, 750);
+
+ return () => clearTimeout(timeout);
+ }, [open]);
+
+ useEffect(() => {
+ if (isOpen) {
+ document.body.style.overflow = "hidden";
+ } else {
+ document.body.style.overflow = "auto";
+ }
+ }, [isOpen]);
+
+ if (!isOpen) return <>;
+
+ return (
+ onSelectPaymentMethod(method.id)}
+ key={index}
+ >
+
+ ))}
+
+
+
+
+ {method.title}
+
+
+
+
+ )
+}
+
+export default PaymentModal
\ No newline at end of file
diff --git a/src/components/Payment/PaymentModal/styles.module.scss b/src/components/Payment/PaymentModal/styles.module.scss
new file mode 100644
index 0000000..040d0ab
--- /dev/null
+++ b/src/components/Payment/PaymentModal/styles.module.scss
@@ -0,0 +1,81 @@
+.container {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100vw;
+ height: 100dvh;
+ background-color: rgba(0, 0, 0, 0.5);
+ z-index: 1000;
+ cursor: pointer;
+
+ &>.modal {
+ position: absolute;
+ bottom: 0dvh;
+ left: 50%;
+ transform: translate(-50%, 0);
+ width: 100vw;
+ max-width: 500px;
+ height: fit-content;
+ max-height: calc(100dvh - 24px);
+ background-color: #F1F5FF;
+ border-radius: 17px 17px 0 0;
+ padding: 20px 24px 42px;
+ box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
+ z-index: 1000;
+ animation: slideUp .8s cubic-bezier(0.6, 0.24, 0.1, 0.91);
+ pointer-events: all;
+ overflow-y: auto;
+ overflow-x: hidden;
+ cursor: default;
+
+ &>.backArrowContainer {
+ position: sticky;
+ top: 20px;
+ left: 0px;
+ margin-left: -100%;
+ z-index: 1000;
+ width: fit-content;
+ height: fit-content;
+ background: #fff;
+ padding: 6px 12px;
+ border-radius: 50%;
+ cursor: pointer;
+
+ &>.backArrow {
+ width: 11px;
+ height: 20px;
+ margin-left: -2px;
+ cursor: pointer;
+ }
+ }
+ }
+
+
+ &.closing>.modal {
+ animation: slideDown .8s cubic-bezier(0.6, 0.24, 0.1, 0.91);
+ }
+}
+
+@keyframes slideUp {
+ 0% {
+ display: none;
+ transform: translate(-50%, 100%);
+ }
+
+ 100% {
+ display: block;
+ transform: translate(-50%, 0);
+ }
+}
+
+@keyframes slideDown {
+ 0% {
+ display: block;
+ transform: translate(-50%, 0);
+ }
+
+ 100% {
+ transform: translate(-50%, 100%);
+ display: none;
+ }
+}
\ No newline at end of file
diff --git a/src/components/Payment/SecurityPayments/index.tsx b/src/components/Payment/SecurityPayments/index.tsx
new file mode 100644
index 0000000..a09ba84
--- /dev/null
+++ b/src/components/Payment/SecurityPayments/index.tsx
@@ -0,0 +1,10 @@
+import styles from "./styles.module.css";
+
+function SecurityPayments() {
+ return e.stopPropagation()}>
+
+
+
+
+ {children}
+
+
+
+
;
+}
+
+export default SecurityPayments;
diff --git a/src/components/Payment/SecurityPayments/styles.module.css b/src/components/Payment/SecurityPayments/styles.module.css
new file mode 100644
index 0000000..ff54fbd
--- /dev/null
+++ b/src/components/Payment/SecurityPayments/styles.module.css
@@ -0,0 +1,12 @@
+.container {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: center;
+ gap: 8px;
+}
+
+.text {
+ font-size: 13px;
+ font-weight: 400;
+}
diff --git a/src/components/Payment/nmi/CheckoutForm/index.tsx b/src/components/Payment/nmi/CheckoutForm/index.tsx
index 65abd17..1386b10 100644
--- a/src/components/Payment/nmi/CheckoutForm/index.tsx
+++ b/src/components/Payment/nmi/CheckoutForm/index.tsx
@@ -3,6 +3,7 @@ import { useEffect } from "react";
import styles from "./styles.module.scss";
import { usePayment } from "@/hooks/payment/nmi/usePayment";
import { EPlacementKeys, IPaywallProduct } from "@/api/resources/Paywall";
+import SecurityPayments from "../../SecurityPayments";
export type TConfirmType = "payment" | "setup";
@@ -75,50 +76,55 @@ export default function CheckoutForm({
id="payment-form"
onSubmit={handleSubmit}
>
-
+ Guaranteed security payments
+
-
-
- {formValidation.ccnumber.message && (
-
diff --git a/src/components/pages/ABDesign/v1/components/Toast/styles.module.css b/src/components/pages/ABDesign/v1/components/Toast/styles.module.css
index 202a15a..7cab7c7 100644
--- a/src/components/pages/ABDesign/v1/components/Toast/styles.module.css
+++ b/src/components/pages/ABDesign/v1/components/Toast/styles.module.css
@@ -16,6 +16,11 @@
background-color: #ffdcdc;
}
+.toast.success {
+ background-color: #d9ffd9;
+}
+
+
@keyframes appearance {
0% {
transform: translateY(100%);
diff --git a/src/components/palmistry/scanned-photo/scanned-photo.css b/src/components/palmistry/scanned-photo/scanned-photo.css
index 11015af..ffd6388 100644
--- a/src/components/palmistry/scanned-photo/scanned-photo.css
+++ b/src/components/palmistry/scanned-photo/scanned-photo.css
@@ -29,11 +29,39 @@
z-index: 5;
}
+@keyframes fadeOut {
+ from {
+ opacity: 1;
+ }
+
+ to {
+ opacity: 0;
+ }
+}
+
+.scanned-photo__stick_hidden,
+.scanned-photo__decoration_hidden {
+ animation: fadeOut 0.5s ease-in-out forwards !important;
+ visibility: visible !important;
+}
+
+.scanned-photo__image-container {
+ width: 100%;
+ height: 100%;
+ position: relative;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
.scanned-photo__image {
/* height: 100%; */
/* object-fit: cover; */
object-fit: contain;
- width: 100%;
+ width: auto;
+ border-radius: 15px;
+ height: 100%;
+ max-height: 380px;
}
.scanned-photo__svg-objects {
@@ -101,24 +129,16 @@
animation: scanned-photo-corners-opacity 1.5s cubic-bezier(0.37, 0, 0.63, 1);
/* animation-delay: 13.5s; */
animation-fill-mode: forwards;
- background: linear-gradient(
- to right,
- var(--strong-blue-text) 2px,
- transparent 2px
- )
- 0 0,
- linear-gradient(to right, var(--strong-blue-text) 2px, transparent 2px) 0
- 100%,
- linear-gradient(to left, var(--strong-blue-text) 2px, transparent 2px) 100%
- 0,
- linear-gradient(to left, var(--strong-blue-text) 2px, transparent 2px) 100%
- 100%,
+ background: linear-gradient(to right,
+ var(--strong-blue-text) 2px,
+ transparent 2px) 0 0,
+ linear-gradient(to right, var(--strong-blue-text) 2px, transparent 2px) 0 100%,
+ linear-gradient(to left, var(--strong-blue-text) 2px, transparent 2px) 100% 0,
+ linear-gradient(to left, var(--strong-blue-text) 2px, transparent 2px) 100% 100%,
linear-gradient(to bottom, var(--strong-blue-text) 2px, transparent 2px) 0 0,
- linear-gradient(to bottom, var(--strong-blue-text) 2px, transparent 2px)
- 100% 0,
+ linear-gradient(to bottom, var(--strong-blue-text) 2px, transparent 2px) 100% 0,
linear-gradient(to top, var(--strong-blue-text) 2px, transparent 2px) 0 100%,
- linear-gradient(to top, var(--strong-blue-text) 2px, transparent 2px) 100%
- 100%;
+ linear-gradient(to top, var(--strong-blue-text) 2px, transparent 2px) 100% 100%;
background-repeat: no-repeat;
background-size: 15px 15px;
height: 100%;
@@ -130,7 +150,7 @@
opacity: 0;
}
-.scanned-photo__decoration__corners > svg {
+.scanned-photo__decoration__corners>svg {
position: absolute;
}
@@ -186,15 +206,19 @@
10% {
opacity: 0;
}
+
20% {
opacity: 0.7;
}
+
40% {
opacity: 0.3;
}
+
50% {
opacity: 0.6;
}
+
100% {
opacity: 1;
}
@@ -205,10 +229,12 @@
opacity: 1;
top: 0;
}
+
50% {
opacity: 1;
top: 100%;
}
+
100% {
opacity: 1;
top: 0;
@@ -225,4 +251,4 @@
100% {
stroke-dashoffset: 0;
}
-}
+}
\ No newline at end of file
diff --git a/src/components/palmistry/scanned-photo/scanned-photo.tsx b/src/components/palmistry/scanned-photo/scanned-photo.tsx
index 54af11b..a92df81 100644
--- a/src/components/palmistry/scanned-photo/scanned-photo.tsx
+++ b/src/components/palmistry/scanned-photo/scanned-photo.tsx
@@ -15,10 +15,13 @@ type Props = {
drawElementChangeDelay: number;
startDelay: number;
drawElements: Array;
+ className?: string;
+ isDecorationShown?: boolean;
};
export default function StepScanPhoto(props: Props) {
- const className = ["scanned-photo"];
+ const { className: classNameProp = "", isDecorationShown = true } = props;
+ const className = ["scanned-photo", classNameProp];
const { lines, drawElementChangeDelay, fingers, drawElements } = props;
const imageRef = useRef(null);
const linesRef = useRef([]);
@@ -39,9 +42,8 @@ export default function StepScanPhoto(props: Props) {
const getCoordinatesString = useCallback(
(points: IPalmistryPoint[]) => {
- const coordinatesString = `M ${points[0]?.x * imageWidth} ${
- points[0]?.y * imageHeight
- }`;
+ const coordinatesString = `M ${points[0]?.x * imageWidth} ${points[0]?.y * imageHeight
+ }`;
return points.reduce(
(acc, point) =>
`${acc} L ${point?.x * imageWidth} ${point?.y * imageHeight}`,
@@ -69,24 +71,25 @@ export default function StepScanPhoto(props: Props) {
>
- {formValidation.ccnumber.message}
+
diff --git a/src/components/Payment/nmi/PaymentForm/styles.module.scss b/src/components/Payment/nmi/PaymentForm/styles.module.scss
index 0488cc8..e9af641 100644
--- a/src/components/Payment/nmi/PaymentForm/styles.module.scss
+++ b/src/components/Payment/nmi/PaymentForm/styles.module.scss
@@ -4,8 +4,12 @@
align-items: center;
justify-content: center;
min-height: 250px;
- gap: 25px;
- color: #2f2e37;
+ gap: 0;
+ color: #000;
+
+ & * {
+ font-family: "SF Pro Text", sans-serif;
+ }
}
.payment-modal.hide {
@@ -15,18 +19,25 @@
}
.title {
- font-weight: 700;
+ font-weight: 500;
font-size: 20px;
line-height: 20px;
text-align: center;
margin: 0;
+ margin-bottom: 48px;
}
.sub-plan-description {
- font-size: 12px;
+ font-size: 13px;
text-align: center;
line-height: 150%;
white-space: pre-wrap;
+ font-weight: 300;
+ margin: 28px 0;
+
+ &>b {
+ font-weight: 500;
+ }
}
.payment-method-container {
@@ -37,8 +48,11 @@
}
.address {
- margin-bottom: 24px;
text-transform: uppercase;
+ font-size: 13px;
+ font-weight: 300;
+ text-align: center;
+ margin-top: 16px;
}
.payment-method {
diff --git a/src/components/pages/ABDesign/v1/components/Toast/index.tsx b/src/components/pages/ABDesign/v1/components/Toast/index.tsx
index 6f94359..02b1afd 100644
--- a/src/components/pages/ABDesign/v1/components/Toast/index.tsx
+++ b/src/components/pages/ABDesign/v1/components/Toast/index.tsx
@@ -3,7 +3,7 @@ import ErrorIcon from "./ErrorIcon";
import styles from "./styles.module.css";
interface IToastProps {
- variant: "error";
+ variant: "error" | "success";
children: React.ReactNode;
classNameContainer?: string;
classNameToast?: string;
@@ -19,6 +19,7 @@ function Toast({
+
+
-
+
{isLoading ? "Processing..." : "Pay Now"}
diff --git a/src/components/Payment/nmi/CheckoutForm/styles.module.scss b/src/components/Payment/nmi/CheckoutForm/styles.module.scss
index 8e227a3..2a45dfe 100644
--- a/src/components/Payment/nmi/CheckoutForm/styles.module.scss
+++ b/src/components/Payment/nmi/CheckoutForm/styles.module.scss
@@ -44,25 +44,27 @@
.button {
min-height: 0;
- height: 50px;
+ height: 67px;
text-transform: uppercase;
- background-color: #4caf50;
- border-radius: 25px;
- font-size: 16px;
- gap: 8px;
+ background-color: #224E90;
+ border-radius: 9px;
+ font-size: 20px;
+ font-weight: 300;
+ letter-spacing: 0.07em;
+ gap: 12px;
opacity: 1;
transition: opacity 0.2s ease;
- margin-top: 8px;
+ margin-top: 10px;
&:disabled {
- opacity: 0.7;
+ opacity: 0.4;
cursor: not-allowed;
}
}
.button>img {
- height: 18px;
- margin-top: -5px;
+ height: 22px;
+ // margin-top: -5px;
}
.form {
@@ -70,6 +72,9 @@
max-width: 500px;
margin: 0 auto;
padding: 0;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
}
.hide {
@@ -77,15 +82,23 @@
}
.formRow {
+ display: flex;
+ flex-direction: column;
margin-bottom: 16px;
+ &.cardNumberRow {
+ width: fit-content;
+ margin: 0 auto 16px;
+ }
label {
display: block;
- margin-bottom: 0.5rem;
- font-weight: 500;
+ margin-bottom: 5px;
+ font-weight: 400;
text-align: left;
- padding-left: 12px;
+
+ padding-left: 7px;
+ font-size: 16px;
}
}
@@ -93,6 +106,31 @@
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
+ max-width: 302px;
+ margin-inline: auto;
+}
+
+@media (max-width: 280px) {
+ .formGroup {
+ grid-template-columns: 1fr;
+ gap: 0;
+ }
+
+ .fieldContainer {
+ &.cardExpiry {
+ max-width: none !important;
+ }
+
+ &.cardCvv {
+ max-width: none !important;
+ }
+ }
+
+ .formRow {
+ &:nth-child(2) {
+ margin-left: 0 !important;
+ }
+ }
}
.input {
@@ -109,13 +147,36 @@
}
}
+:global {
+ .CollectJSInlineIframe {
+ width: fit-content !important;
+ max-width: 100% !important;
+ height: 100% !important;
+ border: none !important;
+ }
+
+ #CollectJSInlineccnumber {
+ max-width: 292px !important;
+ }
+
+ #CollectJSInlineccexp {
+ max-width: 130px !important;
+ }
+
+ #CollectJSInlinecvv {
+ max-width: 68px !important;
+ }
+}
+
.fieldContainer {
- border: 1px solid #e2e8f0;
- border-radius: 6px;
+ background-color: #F0F5FF;
+ border: 0.5px solid #CDCDCD;
+ border-radius: 11px;
overflow: hidden;
transition: border-color 0.2s;
- padding: 8px;
- min-height: 40px;
+ padding: 2px;
+ height: 52px;
+ width: 100%;
&:focus-within {
border-color: #3b82f6;
@@ -124,11 +185,50 @@
&.invalid {
border-color: #dc3545;
}
+
+ &.cardNumber {
+ width: fit-content !important;
+ margin: 0 auto !important;
+ padding-left: 6px !important;
+ }
+
+ &.cardExpiry {
+ max-width: 150px;
+ padding: 2px 12px;
+
+ }
+
+ &.cardCvv {
+ max-width: 100px;
+ padding: 2px 12px;
+ }
}
.errorMessage {
color: #dc3545;
font-size: 12px;
- margin: 4px 0;
- min-height: 20px;
-}
\ No newline at end of file
+ margin-top: 4px;
+}
+
+.formContainer {
+ position: relative;
+ width: calc(100% + 30px);
+ max-width: 356px;
+ background-color: #fff;
+ border-radius: 11px;
+ box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
+ padding: 46px 12px 6px;
+ margin-bottom: 21px;
+}
+
+.cardIcon {
+ position: absolute;
+ top: 10px;
+ left: 12px;
+}
+
+// @media (max-width: 376px) {
+// .formContainer {
+// margin-left: -15px;
+// }
+// }
\ No newline at end of file
diff --git a/src/components/Payment/nmi/PaymentForm/index.tsx b/src/components/Payment/nmi/PaymentForm/index.tsx
index b08a634..ae21f6b 100644
--- a/src/components/Payment/nmi/PaymentForm/index.tsx
+++ b/src/components/Payment/nmi/PaymentForm/index.tsx
@@ -5,26 +5,23 @@ import { useSelector } from "react-redux";
import { selectors } from "@/store";
import Loader from "@/components/Loader";
import Title from "@/components/Title";
-import PaymentMethodsChoice from "@/components/pages/ABDesign/v1/pages/TrialPayment/components/PaymentMethodsChoice";
-import { paymentMethods } from "@/data/paymentMethods";
import { EPlacementKeys, IPaywallProduct } from "@/api/resources/Paywall";
-import SecurityPayments from "@/components/pages/ABDesign/v1/pages/TrialPayment/components/SecurityPayments";
import CheckoutForm from "../CheckoutForm";
-
-const paymentMethodsButtons = paymentMethods(null);
+import PaymentMethodsChoice from "../../PaymentMethodsChoice";
+import { EPaymentMethod } from "@/data/paymentMethods";
const getPrice = (product: IPaywallProduct | null) => {
if (!product) {
return 0;
}
- return (product.trialPrice === 100 ? 99 : product.trialPrice || 0) / 100;
+ return (product.trialPrice || 0) / 100;
}
interface IPaymentFormProps {
isSinglePayment?: boolean;
className?: string;
placementKey: EPlacementKeys;
- onPaymentError?: () => void;
+ onPaymentError?: (error?: string) => void;
onPaymentSuccess?: () => void;
onModalClosed?: () => void;
}
@@ -36,6 +33,13 @@ function PaymentForm({ isSinglePayment = false, className, placementKey, onPayme
const isLoading = false;
+ const paymentMethodsButtons = [
+ {
+ id: EPaymentMethod.CREDIT_CARD,
+ icon: "/payment-form/credit-card.svg",
+ title: translate("payment_modal.credit_card")
+ }
+ ]
return (
<>
@@ -88,7 +92,6 @@ function PaymentForm({ isSinglePayment = false, className, placementKey, onPayme
onModalClosed={onModalClosed}
/>}
-
+
+
+
+ {formValidation.ccnumber.message && (
+
+
+
+ {formValidation.ccnumber.message}
+
+ )}
+
+
-
+
+
+ {formValidation.ccexp.message && (
+
- )}
-
+ {formValidation.ccexp.message}
+
+ )}
-
+
-
-
- {formValidation.ccexp.message && (
-
-
-
- {formValidation.ccexp.message}
-
- )}
-
-
-
- {formValidation.cvv.message && (
-
- {formValidation.cvv.message}
-
- )}
+
+
+
+ {formValidation.cvv.message && (
+
+ {formValidation.cvv.message}
+
+ )}
+
+
{isLoading ? "Processing..." : "Pay Now"}
{translate("payment_modal.address")}
{variant === "error" &&
- setIsImageLoaded(true)}
+
+ setIsImageLoaded(true)}
// width={imageWidth}
// height={imageHeight}
- />
+ />
+
{!!imageHeight && !!imageWidth && (
@@ -203,9 +202,8 @@ export default function StepScanPhoto(props: Props) {
>
(value < 10 ? `0${value}` : value);
@@ -15,35 +15,43 @@ const buildTimeCaption = (time: number) => {
export default function useTimer() {
const [timeLeft, setTimeLeft] = React.useState(null);
+ const calculateTimeLeft = React.useCallback(() => {
+ const startTime = localStorage.getItem(startTimeKey);
+ if (!startTime) return initialTimeLeft;
+
+ const elapsedTime = Date.now() - parseInt(startTime);
+ return Math.max(0, initialTimeLeft - elapsedTime);
+ }, []);
+
const time = React.useMemo(() => {
if (timeLeft == null) return buildTimeCaption(initialTimeLeft);
-
return buildTimeCaption(timeLeft);
}, [timeLeft]);
React.useEffect(() => {
- const storedTimeLeft = localStorage.getItem(storageKey);
- setTimeLeft(storedTimeLeft ? parseInt(storedTimeLeft) : initialTimeLeft);
- }, []);
+ const startTime = localStorage.getItem(startTimeKey);
+ if (!startTime) {
+ // Первый запуск таймера
+ localStorage.setItem(startTimeKey, Date.now().toString());
+ }
+ setTimeLeft(calculateTimeLeft());
+ }, [calculateTimeLeft]);
React.useEffect(() => {
if (timeLeft === null) return;
if (timeLeft <= 0) {
- localStorage.removeItem(storageKey);
+ // localStorage.removeItem(startTimeKey);
return;
}
const interval = setInterval(() => {
- const newTimeLeft = timeLeft - 1000;
-
+ const newTimeLeft = calculateTimeLeft();
setTimeLeft(newTimeLeft);
-
- localStorage.setItem(storageKey, `${newTimeLeft}`);
}, 1000);
return () => clearInterval(interval);
- }, [timeLeft]);
+ }, [timeLeft, calculateTimeLeft]);
return time;
}
diff --git a/src/hooks/payment/nmi/usePayment.ts b/src/hooks/payment/nmi/usePayment.ts
index 3292d82..dafb596 100644
--- a/src/hooks/payment/nmi/usePayment.ts
+++ b/src/hooks/payment/nmi/usePayment.ts
@@ -88,18 +88,41 @@ export const usePayment = ({
primaryColor: '#066fde',
theme: "material",
price: formPrice,
+ styleSniffer: true,
+ customCss: {
+ "background-color": "#F0F5FF",
+ "height": "51px",
+ "padding": "11px 0",
+ "letter-spacing": "6px",
+ "border": "none",
+ "font-size": "18px",
+ "margin-right": "auto",
+ "margin-left": "auto"
+ },
+ focusCss: {
+ "border": "none",
+ },
+ placeholderCss: {
+ "letter-spacing": "6px",
+ "font-size": "18px",
+ },
fields: {
ccnumber: {
- placeholder: '1234 1234 1234 1234',
- selector: '#card-number'
+ placeholder: '____ ____ ____ ____',
+ selector: '#card-number',
+ title: "Card Number",
+ // enableCardBrandPreviews: true
},
ccexp: {
- placeholder: 'MM/YY',
- selector: '#card-expiry'
+ placeholder: '__ / __',
+ selector: '#card-expiry',
+ title: "Card Expiry"
},
cvv: {
placeholder: 'CVC',
- selector: '#card-cvv'
+ selector: '#card-cvv',
+ title: "Card CVC",
+ display: "hide"
}
},
validationCallback: (field: string, status: boolean, message: string) => {
@@ -154,8 +177,6 @@ export const usePayment = ({
const submitInlineForm = () => {
try {
setIsSubmitting(true);
- console.log("submitInlineForm");
-
window.CollectJS.startPaymentRequest();
} catch (error: any) {
console.error('Payment form error:', error);
diff --git a/src/hooks/paywall/defaultPaywalls.ts b/src/hooks/paywall/defaultPaywalls.ts
index 8f8f0c7..56c4579 100644
--- a/src/hooks/paywall/defaultPaywalls.ts
+++ b/src/hooks/paywall/defaultPaywalls.ts
@@ -820,5 +820,330 @@ export const defaultPaywalls: { [key in EPlacementKeys]: IPaywall } = {
"currency": "usd"
}
]
- }
+ },
+ "aura.placement.palmistry.secret.discount": {
+ "_id": "67a2672aa7f516fa5349d44c",
+ "key": "aura.paywall.palmistry.secret.discount",
+ "name": "Palmistry Secret Discount",
+ "properties": [
+ {
+ "key": "full.price",
+ "value": "45",
+ "_id": "6683454db852ddedb5d6b46b"
+ },
+ {
+ "key": "discount",
+ "value": "70",
+ "_id": "6683454db852ddedb5d6b46c"
+ },
+ {
+ "key": "old.discount",
+ "value": "-30%",
+ "_id": "6683454db852ddedb5d6b46d"
+ },
+ {
+ "key": "new.discount",
+ "value": "-50%",
+ "_id": "6683454db852ddedb5d6b46e"
+ },
+ {
+ "key": "old.price",
+ "value": "19",
+ "_id": "67a2686fa7f516fa5349db6b"
+ },
+ {
+ "key": "save",
+ "value": "30",
+ "_id": "67a2686fa7f516fa5349db6c"
+ }
+ ],
+ "products": [
+ {
+ "_id": "66589439ef0d180993cdb72f",
+ "key": "compatibility.secret.discount.trial.0",
+ "productId": "prod_PnStTEBzrPLgvL",
+ "name": "Сompatibility AURA Secret Discount | Trial $0.99",
+ "priceId": "price_1PpFlMIlX4lgwUxrUTeWDFoI",
+ "type": "subscription",
+ "description": "Description",
+ "discountPrice": null,
+ "discountPriceId": null,
+ "isDiscount": false,
+ "isFreeTrial": false,
+ "isTrial": true,
+ "price": 900,
+ "trialDuration": 3,
+ "trialPrice": 100,
+ "trialPriceId": "price_1PpFoNIlX4lgwUxrP4l0lbE5",
+ "currency": "usd"
+ },
+ {
+ "_id": "6658946cef0d180993cdb79f",
+ "key": "compatibility.secret.discount.trial.1",
+ "productId": "prod_PnStTEBzrPLgvL",
+ "name": "Сompatibility AURA Secret Discount | Trial $5.00",
+ "priceId": "price_1PpFlMIlX4lgwUxrUTeWDFoI",
+ "type": "subscription",
+ "description": "Description",
+ "discountPrice": null,
+ "discountPriceId": null,
+ "isDiscount": false,
+ "isFreeTrial": false,
+ "isTrial": true,
+ "price": 900,
+ "trialDuration": 3,
+ "trialPrice": 500,
+ "trialPriceId": "price_1PpFpMIlX4lgwUxrKX7uwKMa",
+ "currency": "usd"
+ },
+ {
+ "_id": "66589544ef0d180993cdb7dc",
+ "key": "compatibility.secret.discount.trial.2",
+ "productId": "prod_PnStTEBzrPLgvL",
+ "name": "Сompatibility AURA Secret Discount | Trial $9.00",
+ "priceId": "price_1PpFlMIlX4lgwUxrUTeWDFoI",
+ "type": "subscription",
+ "description": "Description",
+ "discountPrice": null,
+ "discountPriceId": null,
+ "isDiscount": false,
+ "isFreeTrial": false,
+ "isTrial": true,
+ "price": 900,
+ "trialDuration": 3,
+ "trialPrice": 900,
+ "trialPriceId": "price_1PpFpiIlX4lgwUxrGp2qwZph",
+ "currency": "usd"
+ },
+ {
+ "_id": "66589591ef0d180993cdb88e",
+ "key": "compatibility.secret.discount.trial.3",
+ "productId": "prod_PnStTEBzrPLgvL",
+ "name": "Сompatibility AURA Secret Discount | Trial $13.76",
+ "priceId": "price_1PpFlMIlX4lgwUxrUTeWDFoI",
+ "type": "subscription",
+ "description": "Description",
+ "discountPrice": null,
+ "discountPriceId": null,
+ "isDiscount": false,
+ "isFreeTrial": false,
+ "isTrial": true,
+ "price": 900,
+ "trialDuration": 3,
+ "trialPrice": 1376,
+ "trialPriceId": "price_1PpFqfIlX4lgwUxrgGygG1Qf",
+ "currency": "usd"
+ }
+ ]
+ },
+ "aura.placement.compatibility.v2": {
+ "_id": "66565a0ee4ad13456f7d0079",
+ "key": "aura.paywall.compatibility.v2",
+ "name": "Compatibility V2",
+ "properties": [
+ {
+ "key": "text.0",
+ "value": "We've helped millions of people to\nreveal the destiny of their love life\nand what the future holds for them\nand their families.",
+ "_id": "664542bbfe0a8eb4ee0b4f27"
+ },
+ {
+ "key": "text.1",
+ "value": "It costs us $13.21 to compensate our AURA\nemployees for the trial, but please choose the\namount you are comfortable with.",
+ "_id": "664542bbfe0a8eb4ee0b4f29"
+ }
+ ],
+ "products": [
+ {
+ "_id": "65ff043dfc0fcfc4be550035",
+ "key": "compatibility.pdf.trial.0",
+ "productId": "prod_PnStTEBzrPLgvL",
+ "name": "Сompatibility AURA | Trial $0.99",
+ "priceId": "price_1PpFiwIlX4lgwUxruq9bpp0j",
+ "type": "subscription",
+ "description": "Description",
+ "discountPrice": null,
+ "discountPriceId": null,
+ "isDiscount": false,
+ "isFreeTrial": false,
+ "isTrial": true,
+ "price": 1900,
+ "trialDuration": 7,
+ "trialPrice": 99,
+ "trialPriceId": "price_1PpFoNIlX4lgwUxrP4l0lbE5",
+ "currency": "usd"
+ },
+ {
+ "_id": "66420b6e859ff1199d3a6e88",
+ "key": "compatibility.pdf.trial.1",
+ "productId": "prod_PnStTEBzrPLgvL",
+ "name": "Сompatibility AURA | Trial $5.00",
+ "priceId": "price_1PpFiwIlX4lgwUxruq9bpp0j",
+ "type": "subscription",
+ "description": "Description",
+ "discountPrice": null,
+ "discountPriceId": null,
+ "isDiscount": false,
+ "isFreeTrial": false,
+ "isTrial": true,
+ "price": 1900,
+ "trialDuration": 7,
+ "trialPrice": 500,
+ "trialPriceId": "price_1PpFpMIlX4lgwUxrKX7uwKMa",
+ "currency": "usd"
+ },
+ {
+ "_id": "66420be1859ff1199d3a6e89",
+ "key": "compatibility.pdf.trial.2",
+ "productId": "prod_PnStTEBzrPLgvL",
+ "name": "Сompatibility AURA | Trial $9.00",
+ "priceId": "price_1PpFiwIlX4lgwUxruq9bpp0j",
+ "type": "subscription",
+ "description": "Description",
+ "discountPrice": null,
+ "discountPriceId": null,
+ "isDiscount": false,
+ "isFreeTrial": false,
+ "isTrial": true,
+ "price": 1900,
+ "trialDuration": 7,
+ "trialPrice": 900,
+ "trialPriceId": "price_1PpFpiIlX4lgwUxrGp2qwZph",
+ "currency": "usd"
+ },
+ {
+ "_id": "66420c1c859ff1199d3a6e8a",
+ "key": "compatibility.pdf.trial.3",
+ "productId": "prod_PnStTEBzrPLgvL",
+ "name": "Сompatibility AURA | Trial $13.76",
+ "priceId": "price_1PpFiwIlX4lgwUxruq9bpp0j",
+ "type": "subscription",
+ "description": "Description",
+ "discountPrice": null,
+ "discountPriceId": null,
+ "isDiscount": false,
+ "isFreeTrial": false,
+ "isTrial": true,
+ "price": 1900,
+ "trialDuration": 7,
+ "trialPrice": 1200,
+ "trialPriceId": "price_1PqzysIlX4lgwUxrai849j9H",
+ "currency": "usd"
+ }
+ ]
+ },
+ "aura.placement.compatibility.v2.secret.discount": {
+ "_id": "67a2672aa7f516fa5349d44c",
+ "key": "aura.paywall.compatibility.v2.secret.discount",
+ "name": "Compatibility V2 Secret Discount",
+ "properties": [
+ {
+ "key": "full.price",
+ "value": "45",
+ "_id": "6683454db852ddedb5d6b46b"
+ },
+ {
+ "key": "discount",
+ "value": "70",
+ "_id": "6683454db852ddedb5d6b46c"
+ },
+ {
+ "key": "old.discount",
+ "value": "-30%",
+ "_id": "6683454db852ddedb5d6b46d"
+ },
+ {
+ "key": "new.discount",
+ "value": "-50%",
+ "_id": "6683454db852ddedb5d6b46e"
+ },
+ {
+ "key": "old.price",
+ "value": "19",
+ "_id": "67a2686fa7f516fa5349db6b"
+ },
+ {
+ "key": "save",
+ "value": "30",
+ "_id": "67a2686fa7f516fa5349db6c"
+ }
+ ],
+ "products": [
+ {
+ "_id": "66589439ef0d180993cdb72f",
+ "key": "compatibility.secret.discount.trial.0",
+ "productId": "prod_PnStTEBzrPLgvL",
+ "name": "Сompatibility AURA Secret Discount | Trial $0.99",
+ "priceId": "price_1PpFlMIlX4lgwUxrUTeWDFoI",
+ "type": "subscription",
+ "description": "Description",
+ "discountPrice": null,
+ "discountPriceId": null,
+ "isDiscount": false,
+ "isFreeTrial": false,
+ "isTrial": true,
+ "price": 900,
+ "trialDuration": 3,
+ "trialPrice": 100,
+ "trialPriceId": "price_1PpFoNIlX4lgwUxrP4l0lbE5",
+ "currency": "usd"
+ },
+ {
+ "_id": "6658946cef0d180993cdb79f",
+ "key": "compatibility.secret.discount.trial.1",
+ "productId": "prod_PnStTEBzrPLgvL",
+ "name": "Сompatibility AURA Secret Discount | Trial $5.00",
+ "priceId": "price_1PpFlMIlX4lgwUxrUTeWDFoI",
+ "type": "subscription",
+ "description": "Description",
+ "discountPrice": null,
+ "discountPriceId": null,
+ "isDiscount": false,
+ "isFreeTrial": false,
+ "isTrial": true,
+ "price": 900,
+ "trialDuration": 3,
+ "trialPrice": 500,
+ "trialPriceId": "price_1PpFpMIlX4lgwUxrKX7uwKMa",
+ "currency": "usd"
+ },
+ {
+ "_id": "66589544ef0d180993cdb7dc",
+ "key": "compatibility.secret.discount.trial.2",
+ "productId": "prod_PnStTEBzrPLgvL",
+ "name": "Сompatibility AURA Secret Discount | Trial $9.00",
+ "priceId": "price_1PpFlMIlX4lgwUxrUTeWDFoI",
+ "type": "subscription",
+ "description": "Description",
+ "discountPrice": null,
+ "discountPriceId": null,
+ "isDiscount": false,
+ "isFreeTrial": false,
+ "isTrial": true,
+ "price": 900,
+ "trialDuration": 3,
+ "trialPrice": 900,
+ "trialPriceId": "price_1PpFpiIlX4lgwUxrGp2qwZph",
+ "currency": "usd"
+ },
+ {
+ "_id": "66589591ef0d180993cdb88e",
+ "key": "compatibility.secret.discount.trial.3",
+ "productId": "prod_PnStTEBzrPLgvL",
+ "name": "Сompatibility AURA Secret Discount | Trial $13.76",
+ "priceId": "price_1PpFlMIlX4lgwUxrUTeWDFoI",
+ "type": "subscription",
+ "description": "Description",
+ "discountPrice": null,
+ "discountPriceId": null,
+ "isDiscount": false,
+ "isFreeTrial": false,
+ "isTrial": true,
+ "price": 900,
+ "trialDuration": 3,
+ "trialPrice": 1376,
+ "trialPriceId": "price_1PpFqfIlX4lgwUxrgGygG1Qf",
+ "currency": "usd"
+ }
+ ]
+ },
}
\ No newline at end of file
diff --git a/src/locales/index.ts b/src/locales/index.ts
index f59cec8..f38bb67 100644
--- a/src/locales/index.ts
+++ b/src/locales/index.ts
@@ -85,6 +85,8 @@ export enum ELocalesPlacement {
Chats = "chats",
EmailMarketingCompatibilityV1 = "email-marketing-comp-v1",
EmailMarketingPalmistryV2 = "email-marketing-palmistry-v2",
+ EmailMarketingCompatibilityV2 = "email-marketing-comp-v2",
+ CompatibilityV2 = "compatibility-v2",
}
interface ITranslationJSON {
diff --git a/src/locales/localFormats.ts b/src/locales/localFormats.ts
index ee0db30..e17385c 100644
--- a/src/locales/localFormats.ts
+++ b/src/locales/localFormats.ts
@@ -1,14 +1,52 @@
export const getDateInputLocaleFormat = (locale: string) => {
- const dateFormat = new Intl.DateTimeFormat(locale, { year: "numeric", month: "numeric", day: "numeric" }).formatToParts().filter((part) => part.type !== "literal").map((part) => {
- if (["year", "relatedYear"].includes(part.type as string)) {
+ const dateFormat = new Intl.DateTimeFormat(locale, { year: "numeric", month: "numeric", day: "numeric" })?.formatToParts()?.filter((part) => part.type !== "literal")?.map((part) => {
+ if (["year", "relatedYear"].includes(part?.type as string)) {
return "y";
}
- if (["month"].includes(part.type as string)) {
+ if (["month"].includes(part?.type as string)) {
return "m";
}
- if (["day"].includes(part.type as string)) {
+ if (["day"].includes(part?.type as string)) {
return "d";
}
});
return [...new Set(dateFormat)]
-}
\ No newline at end of file
+}
+
+/**
+ * Преобразует дату из формата "YYYY-MM-DD" в локализованный формат с учетом региональных настроек.
+ * Важно: функция ожидает дату в формате "YYYY-MM-DD" для корректной работы во всех часовых поясах.
+ *
+ * @param dateString - Строка даты в формате "YYYY-MM-DD" (например, "2011-01-01")
+ * @param locale - Код локали (например, "en", "ru")
+ * @returns Отформатированная дата в соответствии с локальным форматом (например, "01.01.2011" для ru)
+ *
+ * @example
+ * formatDateToLocale("2011-01-01", "ru") // returns "01.01.2011"
+ * formatDateToLocale("2011-01-01", "en") // returns "01.01.2011"
+ */
+export const formatDateToLocale = (dateString: string, locale: string): string => {
+ // Разбираем дату из формата YYYY-MM-DD
+ try {
+ const [year, month, day] = dateString?.split(" ")?.[0]?.split('-')?.map(Number);
+ // Создаем дату с явным указанием компонентов для избежания проблем с часовыми поясами
+ const date = new Date(year, month - 1, day);
+
+
+ const format = getDateInputLocaleFormat(locale);
+
+ const parts = {
+ y: date?.getFullYear(),
+ m: String(date?.getMonth() + 1)?.padStart(2, '0'),
+ d: String(date?.getDate())?.padStart(2, '0')
+ };
+
+ return format?.map(part => parts[part as keyof typeof parts])?.join('.');
+ } catch (error) {
+ console.error(error);
+ console.error("Wrong date format: ", dateString);
+ return "";
+ }
+}
+
+
diff --git a/src/routerComponents/Compatibility/v2/CheckSubscriptionOutlet/index.tsx b/src/routerComponents/Compatibility/v2/CheckSubscriptionOutlet/index.tsx
new file mode 100644
index 0000000..a8f1b30
--- /dev/null
+++ b/src/routerComponents/Compatibility/v2/CheckSubscriptionOutlet/index.tsx
@@ -0,0 +1,29 @@
+import { useAuth } from "@/auth";
+import routes from "@/routes";
+import { selectors } from "@/store";
+import { useSelector } from "react-redux";
+import { Navigate, Outlet } from "react-router-dom";
+
+interface ICheckSubscriptionOutletProps {
+ subscribedReturnUrl?: string;
+ unsubscribedReturnUrl?: string;
+}
+
+function CheckSubscriptionOutlet({
+ subscribedReturnUrl = routes.client.home(),
+ unsubscribedReturnUrl,
+}: ICheckSubscriptionOutletProps) {
+ const status = useSelector(selectors.selectStatus);
+ const { user } = useAuth();
+
+ if (user && status === "subscribed") {
+ return (null);
+ useSchemeColorByElement(mainRef.current, "section.page, .page, section", [
+ location,
+ ]);
+ const isShowPaymentModal = useSelector(
+ selectors.selectCompatibilityV2IsShowPaymentModalV1
+ );
+
+ const [searchParams] = useSearchParams();
+ const subscriptionStatus =
+ searchParams.get("redirect_status") === "succeeded" ? "subscribed" : "lead";
+
+ const getIsBackButtonVisible = () => {
+ for (const route of isBackButtonVisibleRoutes) {
+ if (location.pathname.includes(route)) return true;
+ }
+ return false;
+ };
+
+ useEffect(() => {
+ dispatch(actions.compatibilityV2.setIsShowPaymentModalV1(false));
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [location]);
+
+ return (
+ <>
+
+
+
+ {/* */}
+
+
+ );
+}
+
+export default Layout;
diff --git a/src/routerComponents/Compatibility/v2/Layout/styles.module.css b/src/routerComponents/Compatibility/v2/Layout/styles.module.css
new file mode 100644
index 0000000..5a4a749
--- /dev/null
+++ b/src/routerComponents/Compatibility/v2/Layout/styles.module.css
@@ -0,0 +1,33 @@
+.main {
+ align-items: center;
+ padding: 20px 26px;
+ height: fit-content;
+ min-height: 100dvh;
+ max-width: 560px;
+ margin: 0 auto;
+}
+
+.header {
+ padding: 8px 0 30px;
+}
+
+.header-title {
+ color: #275CA7;
+}
+
+.page {
+ width: 100%;
+ height: fit-content;
+ padding-bottom: 32px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+
+.payment-modal-hide {
+ transform: translateY(150%);
+}
+
+.payment-modal-active {
+ animation: appearance 1s;
+}
\ No newline at end of file
diff --git a/src/routerComponents/Compatibility/v2/LayoutPersonalVideo/index.tsx b/src/routerComponents/Compatibility/v2/LayoutPersonalVideo/index.tsx
new file mode 100644
index 0000000..723b800
--- /dev/null
+++ b/src/routerComponents/Compatibility/v2/LayoutPersonalVideo/index.tsx
@@ -0,0 +1,71 @@
+import routes from "@/routes";
+import styles from "./styles.module.scss";
+import PersonalVideo from "@/components/pages/ABDesign/v1/pages/TrialPayment/components/PersonalVideo";
+import { actions, selectors } from "@/store";
+import { useDispatch, useSelector } from "react-redux";
+import { Outlet, useLocation } from "react-router-dom";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { getDefaultLocaleByLanguage, language } from "@/locales";
+
+export interface IOutletContext {
+ containerVideoRef: React.RefObject;
+ isVisibleElements: boolean;
+ setIsVisibleElements: (value: boolean) => void;
+ setShowElements: (value: () => void) => void;
+}
+
+function LayoutPersonalVideo() {
+ const dispatch = useDispatch();
+ const location = useLocation();
+ const { gender } = useSelector(selectors.selectQuestionnaire);
+ const [isVisibleElements, setIsVisibleElements] = useState(false);
+ const showElementsTimer = useRef();
+ const containerVideoRef = useRef(null);
+
+ const locale = getDefaultLocaleByLanguage(language);
+
+ const videoUrl =
+ locale === "es"
+ ? "/trial-choice-palmistry-es.mp4"
+ : "/trial-choice-palmistry.mp4";
+
+ const showElements = useCallback(() => {
+ showElementsTimer.current = setTimeout(() => {
+ setIsVisibleElements(true);
+ }, 29_000);
+ }, [setIsVisibleElements]);
+
+ useEffect(() => {
+ if (location.pathname !== routes.client.compatibilityV2TrialChoiceVideo()) {
+ dispatch(actions.personalVideo.updateIsVideoPlaying(false));
+ }
+ }, [dispatch, location.pathname]);
+
+ return (
+ <>
+ (null);
+ useSchemeColorByElement(mainRef.current, "section.page, .page, section", [
+ location,
+ ]);
+
+ const getCurrentStep = () => {
+ let index = 0;
+ for (const route of stepperRoutes) {
+ if (location.pathname.includes(route)) {
+ if (location.pathname.includes(routes.client.compatibilityV2BirthdatePartner())) {
+ return 8;
+ }
+ if (location.pathname.includes(routes.client.compatibilityV2PalmsInformationPartner())) {
+ return 9;
+ }
+ return index + 1;
+ }
+
+
+ index++;
+
+ }
+ return 0;
+ };
+
+ return (
+ <>
+
+
+ );
+}
+
+export default CompatibilityV2Routes;
diff --git a/src/routerComponents/Palmistry/v1/LayoutPalmistryV1/index.tsx b/src/routerComponents/Palmistry/v1/LayoutPalmistryV1/index.tsx
index ffb3210..154da66 100644
--- a/src/routerComponents/Palmistry/v1/LayoutPalmistryV1/index.tsx
+++ b/src/routerComponents/Palmistry/v1/LayoutPalmistryV1/index.tsx
@@ -1,4 +1,3 @@
-import Header from "@/components/pages/ABDesign/v1/components/Header";
import styles from "./styles.module.css";
import { useSchemeColorByElement } from "@/hooks/useSchemeColorByElement";
import { useEffect, useRef } from "react";
@@ -7,6 +6,7 @@ import routes from "@/routes";
import { useDispatch, useSelector } from "react-redux";
import { actions, selectors } from "@/store";
import PaymentModalV1 from "@/components/PalmistryV1/components/PaymentModalV1";
+import Header from "@/components/PalmistryV1/components/Header";
const isBackButtonVisibleRoutes = [
routes.client.palmistryV1Birthdate(),
diff --git a/src/routerComponents/Palmistry/v1/index.tsx b/src/routerComponents/Palmistry/v1/index.tsx
index 0e40443..3460d1c 100644
--- a/src/routerComponents/Palmistry/v1/index.tsx
+++ b/src/routerComponents/Palmistry/v1/index.tsx
@@ -29,6 +29,8 @@ import CheckSubscriptionOutlet from "./CheckSubscriptionOutlet";
import TrialChoiceVideo from "@/components/PalmistryV1/pages/TrialChoiceVideo";
import LayoutPersonalVideo from "./LayoutPersonalVideo";
import OnboardingPage from "@/components/pages/ABDesign/v1/pages/Onboarding";
+import SaveOff from "@/components/PalmistryV1/pages/SaveOff";
+import SecretDiscount from "@/components/PalmistryV1/pages/SecretDiscount";
const removePrefix = (path: string) => path.replace(palmistryV1Prefix, "");
@@ -45,6 +47,10 @@ function PalmistryV1Routes() {
path={removePrefix(routes.client.palmistryOnboardingV1())}
element={>) {
+ return { ...state, ...action.payload };
+ },
+ setIsShowPaymentModalV1(state, action: PayloadAction) {
+ return { ...state, isShowPaymentModalV1: action.payload };
+ }
+ },
+ extraReducers: (builder) => builder.addCase("reset", () => initialState),
+});
+
+export const { actions } = compatibilityV2Slice;
+export const selectCompatibilityV2Lines = createSelector(
+ (state: { compatibilityV2: ICompatibilityV2 }) => state.compatibilityV2.lines,
+ (compatibilityV2) => compatibilityV2
+);
+export const selectCompatibilityV2Fingers = createSelector(
+ (state: { compatibilityV2: ICompatibilityV2 }) => state.compatibilityV2.fingers,
+ (compatibilityV2) => compatibilityV2
+);
+export const selectCompatibilityV2Photo = createSelector(
+ (state: { compatibilityV2: ICompatibilityV2 }) => state.compatibilityV2.photo,
+ (compatibilityV2) => compatibilityV2
+);
+export const selectCompatibilityV2FromRedesign = createSelector(
+ (state: { compatibilityV2: ICompatibilityV2 }) => state.compatibilityV2.fromRedesign,
+ (compatibilityV2) => compatibilityV2
+);
+export const selectCompatibilityV2IsShowPaymentModalV1 = createSelector(
+ (state: { compatibilityV2: ICompatibilityV2 }) => state.compatibilityV2.isShowPaymentModalV1,
+ (compatibilityV2) => compatibilityV2
+);
+export default compatibilityV2Slice.reducer;
diff --git a/src/store/compatibilityV2Answers.ts b/src/store/compatibilityV2Answers.ts
new file mode 100644
index 0000000..955afea
--- /dev/null
+++ b/src/store/compatibilityV2Answers.ts
@@ -0,0 +1,42 @@
+import { createSlice, createSelector } from "@reduxjs/toolkit";
+import type { PayloadAction } from "@reduxjs/toolkit";
+
+export interface ICompatibilityV2Answers {
+ whatAspects: string;
+ relationshipStatus: string;
+ elementResonates: string;
+ favoriteColor: string;
+ headOrHeart: string;
+ dateEvent: string;
+ romanticGestures: string;
+ checkingPhone: string;
+}
+
+const initialState: ICompatibilityV2Answers = {
+ whatAspects: "",
+ relationshipStatus: "",
+ elementResonates: "",
+ favoriteColor: "",
+ headOrHeart: "",
+ dateEvent: "",
+ romanticGestures: "",
+ checkingPhone: "",
+};
+
+const compatibilityV2AnswersSlice = createSlice({
+ name: "compatibilityV2Answers",
+ initialState,
+ reducers: {
+ update(state, action: PayloadAction>) {
+ return { ...state, ...action.payload };
+ },
+ },
+ extraReducers: (builder) => builder.addCase("reset", () => initialState),
+});
+
+export const { actions } = compatibilityV2AnswersSlice;
+export const selectCompatibilityV2Answers = createSelector(
+ (state: { compatibilityV2Answers: ICompatibilityV2Answers }) => state.compatibilityV2Answers,
+ (compatibilityV2Answers) => compatibilityV2Answers
+);
+export default compatibilityV2AnswersSlice.reducer;
diff --git a/src/store/index.ts b/src/store/index.ts
index 2300bdc..3ec278f 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -15,6 +15,10 @@ import palmistryV1Answers, {
actions as palmistryV1AnswersActions,
selectPalmistryV1Answers,
} from "./palmistryV1Answers";
+import compatibilityV2Answers, {
+ actions as compatibilityV2AnswersActions,
+ selectCompatibilityV2Answers,
+} from "./compatibilityV2Answers";
import user, { actions as userActions, selectUser } from "./user";
import form, {
actions as formActions,
@@ -78,6 +82,14 @@ import palmistry, {
selectPalmistryLines,
selectPalmistryPhoto
} from "./palmistry";
+import compatibilityV2, {
+ actions as compatibilityV2Actions,
+ selectCompatibilityV2Fingers,
+ selectCompatibilityV2FromRedesign,
+ selectCompatibilityV2IsShowPaymentModalV1,
+ selectCompatibilityV2Lines,
+ selectCompatibilityV2Photo
+} from "./compatibilityV2";
import { selectPaywallsIsMustUpdate, selectPaywalls } from "./paywalls";
import privacyPolicy, { actions as privacyPolicyActions, selectPrivacyPolicy } from "./privacyPolicy";
import personalVideo, { actions as personalVideoActions, selectPersonalVideo } from "./personalVideo";
@@ -103,8 +115,10 @@ export const actions = {
onboardingConfig: onboardingConfigActions,
questionnaire: questionnaireActions,
palmistryV1Answers: palmistryV1AnswersActions,
+ compatibilityV2Answers: compatibilityV2AnswersActions,
userConfig: userConfigActions,
palmistry: palmistryActions,
+ compatibilityV2: compatibilityV2Actions,
privacyPolicy: privacyPolicyActions,
personalVideo: personalVideoActions,
chats: chatsActions,
@@ -159,7 +173,12 @@ export const selectors = {
selectCurrentChatId,
selectIsAutoRefill,
selectIsPayedFirstPurchase,
- selectDateEndChatting,
+ selectDateEndChatting,selectCompatibilityV2Fingers,
+ selectCompatibilityV2FromRedesign,
+ selectCompatibilityV2IsShowPaymentModalV1,
+ selectCompatibilityV2Lines,
+ selectCompatibilityV2Photo,
+ selectCompatibilityV2Answers,
...formSelectors,
};
@@ -182,6 +201,8 @@ export const reducer = combineReducers({
palmistryV1Answers,
userConfig,
palmistry,
+ compatibilityV2,
+ compatibilityV2Answers,
paywalls,
privacyPolicy,
personalVideo,
diff --git a/src/store/paywalls.ts b/src/store/paywalls.ts
index 1933c67..27c2554 100644
--- a/src/store/paywalls.ts
+++ b/src/store/paywalls.ts
@@ -28,6 +28,9 @@ const initialState: TPaywalls = {
"aura.placement.email.palmistry": null,
"aura.placement.email.palmistry.discount": null,
"aura.placement.email.compatibility.discount": null,
+ "aura.placement.palmistry.secret.discount": null,
+ "aura.placement.compatibility.v2": null,
+ "aura.placement.compatibility.v2.secret.discount": null,
isMustUpdate: {
"aura.placement.v1.mike": true,
"aura.placement.main": true,
@@ -40,6 +43,9 @@ const initialState: TPaywalls = {
"aura.placement.email.palmistry": true,
"aura.placement.email.palmistry.discount": true,
"aura.placement.email.compatibility.discount": true,
+ "aura.placement.palmistry.secret.discount": true,
+ "aura.placement.compatibility.v2": true,
+ "aura.placement.compatibility.v2.secret.discount": true,
},
}
diff --git a/src/store/session.ts b/src/store/session.ts
index de90f3c..173bf5a 100644
--- a/src/store/session.ts
+++ b/src/store/session.ts
@@ -13,7 +13,8 @@ const initialState: TSessions = {
"aura.moons": "",
"aura.main.new": "",
"aura.palmistry.new": "",
- "aura.chats": ""
+ "aura.chats": "",
+ "aura.compatibility.v2": "",
}
const sessionSlice = createSlice({