gofnnp/w-aura
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'develop' into 'AW-106-klaviyo-metric'

Browse Source 
# Conflicts:
#   src/services/metric/metricService.ts
This commit is contained in:
Daniil Chemerkin 2024-07-09 17:35:20 +00:00
commit eba48cee50
45 changed files with 2758 additions and 240 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
environments/.env.production
View File

@ -6,4 +6,4 @@ AURA_PREFIX=api/v1
AURA_OPEN_AI_HOST=https://api.openai.com
AURA_OPEN_AI_PREFIX=v1
AURA_YANDEX_COUNTER_NUMBER=95799066
AURA_PERSONAL_VIDEO_TIME_LIMIT=120
AURA_PERSONAL_VIDEO_TIME_LIMIT=100

2308
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

6
package.json
View File

@ -14,12 +14,16 @@
"build:prod": "tsc && vite build --mode production"
},
"dependencies": {
"@emotion/react": "^11.11.4",
"@emotion/styled": "^11.11.5",
"@lottiefiles/dotlottie-react": "^0.6.4",
"@mui/material": "^5.15.21",
"@reduxjs/toolkit": "^1.9.5",
"@smakss/react-scroll-direction": "^4.0.4",
"@stripe/react-stripe-js": "^2.3.1",
"@stripe/stripe-js": "^2.1.9",
"apng-js": "^1.1.1",
"core-js": "^3.37.1",
"framer-motion": "^11.0.8",
"html-react-parser": "^3.0.16",
"i18next": "^22.5.0",
@ -31,6 +35,7 @@
"react-dom": "^18.2.0",
"react-ga4": "^2.1.0",
"react-i18next": "^12.3.1",
"react-pdf": "8.0.2",
"react-player": "^2.16.0",
"react-redux": "^8.0.5",
"react-router-dom": "^6.11.2",
@ -40,6 +45,7 @@
"unique-names-generator": "^4.7.1"
},
"devDependencies": {
"@types/core-js": "^2.5.8",
"@types/node": "^20.5.1",
"@types/react": "^18.2.6",
"@types/react-dom": "^18.2.4",

BIN
public/satisfied-no.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 201 KiB

3
src/api/api.ts
View File

@ -30,6 +30,7 @@ import {
Paywall,
Payment,
UserVideos,
UserPDF,
} from './resources'
const api = {
@ -83,6 +84,8 @@ const api = {
makePayment: createMethod<Payment.PayloadPost, Payment.ResponsePost>(Payment.createRequestPost),
// User videos
getUserVideos: createMethod<UserVideos.PayloadGet, UserVideos.ResponseGet>(UserVideos.createRequest),
// User PDF
getUserPDFCompatibility: createMethod<UserPDF.PayloadGet, UserPDF.ResponseGet>(UserPDF.createRequest),
}
export type ApiContextValue = typeof api

1
src/api/resources/User.ts
View File

@ -173,6 +173,7 @@ export interface ICreateAuthorizePayload {
partner?: Partial<Exclude<ICreateAuthorizeUser, "relationship_status">>;
sign?: boolean;
signDate?: string;
feature?: string;
}
export interface ICreateAuthorizeResponse {

21
src/api/resources/UserPDF.ts Normal file
View File

@ -0,0 +1,21 @@
import routes from "@/routes";
import { getAuthHeaders } from "../utils";
interface Payload {
token: string;
}
export type PayloadGet = Payload;
export interface IUserPDFCompatibility {
url: string
}
type ResponseGetSuccess = IUserPDFCompatibility;
export type ResponseGet = ResponseGetSuccess;
export const createRequest = ({ token }: PayloadGet): Request => {
const url = new URL(routes.server.getUserPDFCompatibility());
return new Request(url, { method: "GET", headers: getAuthHeaders(token) });
};

1
src/api/resources/index.ts
View File

@ -28,3 +28,4 @@ export * as Palmistry from "./Palmistry";
export * as Paywall from "./Paywall";
export * as Payment from "./Payment";
export * as UserVideos from "./UserVideos";
export * as UserPDF from "./UserPDF";

2
src/components/DateTimePicker/utils.ts
View File

@ -25,7 +25,7 @@ export const getDaysInMonth = (year: number, month: number): number => {
export const format = (hour: string, minute: string, period: string) => {
const formattedHour = hour === '12' ? (period === 'AM' ? '00' : '12') : (period === 'PM' ? String(Number(hour) + 12) : hour)
const formattedMinute = normalize(minute, 2)
return `${formattedHour}:${formattedMinute}`
return `${normalize(formattedHour, 2)}:${formattedMinute}`
}
export const parse = (value: string) => {

12
src/components/FullScreenModal/index.tsx
View File

@ -2,13 +2,15 @@ import styles from "./styles.module.css";
interface IFullScreenModalProps {
className?: string;
classNameContent?: string;
style?: React.CSSProperties;
children: JSX.Element;
isOpen: boolean;
}
function FullScreenModal({
className,
className = "",
classNameContent = "",
children,
style,
isOpen,
@ -16,11 +18,11 @@ function FullScreenModal({
return (
<div
style={{ ...style }}
className={`${styles["modal"]} ${className || ""} ${
isOpen ? styles.open : ""
}`}
className={`${styles["modal"]} ${className} ${isOpen ? styles.open : ""}`}
>
<div className={styles["modal__content"]}>{children}</div>
<div className={`${styles["modal__content"]} ${classNameContent}`}>
{children}
</div>
</div>
);
}

2
src/components/FullScreenModal/styles.module.css
View File

@ -15,12 +15,14 @@
will-change: opacity;
animation: disappearance 3s ease;
animation-fill-mode: forwards;
pointer-events: none;
}
.open {
opacity: 1;
animation: appearance 3s ease;
animation-fill-mode: forwards;
pointer-events: auto;
}
.modal__content {

71
src/components/HomePage/index.tsx
View File

@ -2,7 +2,7 @@ import { useNavigate } from "react-router-dom";
import { useTranslation } from "react-i18next";
import routes from "@/routes";
import styles from "./styles.module.css";
import { useApi, useApiCall } from "@/api";
import { UserPDF, useApi, useApiCall } from "@/api";
import { Asset } from "@/api/resources/Assets";
import { useCallback, useEffect, useRef, useState } from "react";
import BlurringSubstrate from "../BlurringSubstrate";
@ -27,6 +27,10 @@ import TextWithFinger from "../TextWithFinger";
// IPredictionMoon,
// } from "../PredictionMoonsSlider";
import { predictionMoonsPeriods } from "@/data";
import FullScreenModal from "../FullScreenModal";
import { useDynamicSize } from "@/hooks/useDynamicSize";
import PDFViewer from "../PDFViewer";
import BackButton from "../pages/ABDesign/v1/ui/BackButton";
// import WallpapersZodiacSign from "../WallpapersZodiacSign";
// import ThermalSlider from "../ThermalSlider";
// import MoonPhaseTracker from "../MoonPhaseTracker";
@ -38,7 +42,6 @@ const buttonTextFormatter = (text: string): JSX.Element => {
return (
<>
<strong>{sentences[0]}</strong>
<br />
<span style={{ fontSize: "12px" }}>{sentences[1]}</span>
</>
);
@ -56,7 +59,7 @@ function HomePage(): JSX.Element {
const zodiacSign = getZodiacSignByDate(birthdate);
const [asset, setAsset] = useState<Asset>();
const [moonsAssets, setMoonsAssets] = useState<Asset[]>([]);
moonsAssets
moonsAssets;
const api = useApi();
const homeConfig = useSelector(selectors.selectHome);
@ -64,15 +67,17 @@ function HomePage(): JSX.Element {
const onboardingConfigHome = useSelector(selectors.selectOnboardingHome);
const compatibilities = useSelector(selectors.selectCompatibilities);
compatibilities
compatibilities;
const user = useSelector(selectors.selectUser);
user
user;
const [isShowOnboardingHome, setIsShowOnboardingHome] = useState(
!onboardingConfigHome?.isShown
);
const [isShowPDF, setIsShowPDF] = useState(false);
useEffect(() => {
dispatch(
actions.onboardingConfig.update({
@ -83,6 +88,10 @@ function HomePage(): JSX.Element {
);
}, [dispatch]);
const handleCompatibilityPDF = () => {
setIsShowPDF(true);
};
const handleCompatibility = () => {
dispatch(
actions.siteConfig.update({
@ -123,6 +132,17 @@ function HomePage(): JSX.Element {
// isPending
} = useApiCall<Asset[]>(assetsData);
const getUserPDFCompatibility = useCallback(async () => {
const pdf = await api.getUserPDFCompatibility({
token,
});
return pdf;
}, [api, token]);
const { data: PDFCompatibility } = useApiCall<UserPDF.ResponseGet>(
getUserPDFCompatibility
);
useEffect(() => {
if (assets) {
setAsset(assets[getRandomArbitrary(0, assets?.length || 0)]);
@ -171,6 +191,14 @@ function HomePage(): JSX.Element {
saveFile(asset.url.replace("http://", "https://"), buildFilename("1"));
};
const downloadPDF = () => {
if (!PDFCompatibility?.url) return;
saveFile(
PDFCompatibility?.url.replace("http://", "https://"),
buildFilename("pdf-compatibility", "pdf")
);
};
// const handleBestiesHoroscope = (item: Horoscope) => {
// const { name, birthDate } = item;
// navigate(
@ -202,13 +230,37 @@ function HomePage(): JSX.Element {
// navigate(`${routes.client.nameHoroscopeResult()}?period=${item.period}`);
// };
const { width, elementRef: pageRef } = useDynamicSize({});
return (
<section
className={`${styles.page} page`}
style={{
backgroundImage: `url(${asset?.url.replace("http://", "https://")})`,
}}
ref={pageRef}
>
<FullScreenModal
isOpen={isShowPDF}
className={styles["pdf-modal"]}
classNameContent={styles["pdf-modal__content"]}
>
<>
<div className={styles["pdf-buttons"]}>
<BackButton
onClick={() => setIsShowPDF(false)}
className={styles["close-pdf-button"]}
/>
<div className={styles["pdf-save"]} onClick={downloadPDF} />
</div>
<PDFViewer
width={width}
file={PDFCompatibility?.url}
className={styles["pdf-document"]}
/>
</>
</FullScreenModal>
{/* <div
className={styles.background}
style={{
@ -256,6 +308,15 @@ function HomePage(): JSX.Element {
crossClickHandler={() => setIsShowOnboardingHome(false)}
/>
</Onboarding>
{!!PDFCompatibility?.url?.length && (
<BlurringSubstrate
style={{ color: "#fff" }}
className={styles["content__buttons-item"]}
clickHandler={handleCompatibilityPDF}
>
<strong>Your Personalized READING</strong>
</BlurringSubstrate>
)}
<BlurringSubstrate
style={{ color: "#fa71ea" }}
className={styles["content__buttons-item"]}

70
src/components/HomePage/styles.module.css
View File

@ -103,7 +103,11 @@
}
.content__buttons-item {
display: flex;
flex-direction: column;
justify-content: space-evenly;
width: 100% !important;
min-height: 52px;
border: solid #7b7570 2px;
border-radius: 25px !important;
text-align: center;
@ -190,6 +194,72 @@
width: 100%;
}
.pdf-modal {
overflow-y: scroll;
max-width: 560px;
left: 50%;
transform: translateX(-50%);
}
.pdf-modal__content {
height: fit-content;
min-height: 100%;
}
.pdf-document {
margin-top: -39px;
display: flex;
flex-direction: column;
align-items: center;
min-height: 100%;
}
.pdf-buttons {
position: sticky;
top: 12px;
left: 0;
z-index: 33;
width: 100%;
height: 39px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 12px;
}
.close-pdf-button {
position: sticky;
padding: 6px;
width: 39px;
height: 39px;
background-color: #696969;
border-radius: 50%;
border: solid 1px #fff;
}
.pdf-save {
width: 39px;
height: 39px;
background-size: 70%;
background-image: url("/Save-icon.webp");
background-repeat: no-repeat;
background-position: center center;
-webkit-backdrop-filter: blur(14px);
background-color: #696969;
backdrop-filter: blur(14px);
border-radius: 100%;
cursor: pointer;
}
.close-pdf-button > svg {
margin-left: -3px;
}
.close-pdf-button > svg > path {
fill: #fff;
}
@keyframes pulse {
0% {
transform: scale(0.9);

8
src/components/Modal/index.tsx
View File

@ -9,6 +9,7 @@ interface ModalProps {
containerClassName?: string;
type?: "hidden" | "normal";
onClose?: () => void;
removeNoScroll?: boolean;
}
function Modal({
@ -19,6 +20,7 @@ function Modal({
containerClassName = "",
type = "normal",
onClose,
removeNoScroll = true
}: ModalProps): JSX.Element {
const handleClose = (event: React.MouseEvent) => {
if (event.target !== event.currentTarget) return;
@ -27,6 +29,10 @@ function Modal({
};
useEffect(() => {
if (!removeNoScroll) {
return;
}
if (open) {
document.body.classList.add("no-scroll");
}
@ -34,7 +40,7 @@ function Modal({
return () => {
document.body.classList.remove("no-scroll");
};
}, [open]);
}, [open, removeNoScroll]);
if (!open && type === "normal") return <></>;
return (

90
src/components/PDFViewer/index.tsx Normal file
View File

@ -0,0 +1,90 @@
import styles from "./styles.module.scss";
import { useRef, useState } from "react";
import { Document, DocumentProps, Page } from "react-pdf";
import Loader, { LoaderColor } from "../Loader";
import { File } from "node_modules/react-pdf/dist/esm/shared/types";
import { Pagination } from "@mui/material";
interface IPDFViewerProps {
width?: number;
file?: File;
}
const pagesOfPaginationPageLength = 1;
function PDFViewer(props: IPDFViewerProps & DocumentProps = {}) {
const { width = 496, file, className = "" } = props;
const [numPages, setNumPages] = useState<number>(0);
const containerRef = useRef<HTMLDivElement>(null);
const [isLoadingDocument, setIsLoadingDocument] = useState<boolean>(true);
const [paginationPage, setPaginationPage] = useState(1);
const [isLoadingPage, setIsLoadingPage] = useState<boolean>(true);
const handleChange = (_event: React.ChangeEvent<unknown>, value: number) => {
setIsLoadingPage(true);
setPaginationPage(value);
};
function onDocumentLoadSuccess({ numPages }: { numPages: number }): void {
setNumPages(numPages);
setIsLoadingDocument(false);
}
return (
<>
<div
ref={containerRef}
style={{
minHeight: "calc(100dvh - 32px)",
}}
>
{isLoadingDocument && (
<Loader
color={LoaderColor.White}
className={styles["document-loader"]}
/>
)}
<Document
loading={<></>}
file={file}
onLoadSuccess={onDocumentLoadSuccess}
className={className}
>
{Array.from({ length: pagesOfPaginationPageLength }, (_, i) => {
return (
<Page
loading={<></>}
key={i}
pageNumber={
i + pagesOfPaginationPageLength * (paginationPage - 1) + 1
}
width={width}
className={styles["pdf-page"]}
onRenderSuccess={() => {
setIsLoadingPage(false);
}}
>
{isLoadingPage && (
<Loader
className={styles["pdf-page__loader"]}
color={LoaderColor.Black}
/>
)}
</Page>
);
})}
</Document>
</div>
{!isLoadingDocument && (
<Pagination
classes={{ ul: styles["pagination-list"] }}
className={styles.pagination}
count={Math.ceil(numPages / pagesOfPaginationPageLength)}
onChange={handleChange}
/>
)}
</>
);
}
export default PDFViewer;

34
src/components/PDFViewer/styles.module.scss Normal file
View File

@ -0,0 +1,34 @@
.pdf-page {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
height: auto;
}
.document-loader {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 56;
}
.pdf-page__loader {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 56;
}
.pagination {
position: sticky;
bottom: 0dvh;
background-color: #fff;
}
.pagination-list {
justify-content: center;
}

5
src/components/PaymentModal/index.tsx
View File

@ -149,7 +149,10 @@ function PaymentModal({
<>
<p className={styles["sub-plan-description"]}>
You will be charged only{" "}
<b>${getPrice(_activeProduct)} for your 3-day trial.</b>
<b>
${getPrice(_activeProduct)} for your{" "}
{_activeProduct?.trialDuration}-day trial.
</b>
</p>
<p className={styles["sub-plan-description"]}>
We`ll <b>email you a reminder</b> before your trial period

4
src/components/PaymentModalNew/PaymentCardModal/index.tsx
View File

@ -14,6 +14,7 @@ interface IPaymentCardModalProps {
returnUrl?: string;
isOpen: boolean;
setIsOpen: Dispatch<SetStateAction<boolean>>;
removeNoScroll?: boolean;
}
export default function PaymentCardModal({
@ -24,9 +25,10 @@ export default function PaymentCardModal({
returnUrl,
isOpen,
setIsOpen,
removeNoScroll,
}: IPaymentCardModalProps) {
return (
<Modal open={isOpen} onClose={() => setIsOpen(false)}>
<Modal open={isOpen} onClose={() => setIsOpen(false)} removeNoScroll={removeNoScroll}>
<Elements stripe={stripePromise} options={{clientSecret}}>
<CheckoutForm
confirmType={paymentType}

21
src/components/PaymentModalNew/index.tsx
View File

@ -128,15 +128,18 @@ export default function PaymentModalNew({
/>
</Elements>
<PaymentCardModal
isOpen={isOpenCardModal}
setIsOpen={setIsOpenCardModal}
clientSecret={clientSecret}
stripePromise={stripePromise}
paymentType={paymentType}
paymentIntentId={paymentIntentId}
returnUrl={returnUrl}
/>
<div style={!isOpenCardModal ? {visibility: 'hidden', position: 'absolute'} : {}}>
<PaymentCardModal
isOpen={true}
setIsOpen={setIsOpenCardModal}
clientSecret={clientSecret}
stripePromise={stripePromise}
paymentType={paymentType}
paymentIntentId={paymentIntentId}
returnUrl={returnUrl}
removeNoScroll={isOpenCardModal}
/>
</div>
{!isLoading &&
<>
<div className={styles.infoContainer}>

4
src/components/WallpaperPage/utils.ts
View File

@ -12,7 +12,7 @@ export const saveFile = (url: string, filename: string): void => {
})
}
export const buildFilename = (prefix: string): string => {
export const buildFilename = (prefix: string, fileType = 'jpg'): string => {
const date = new Date().toISOString().slice(0, 10)
return `${prefix}-${date}.jpg`
return `${prefix}-${date}.${fileType}`
}

36
src/components/pages/ABDesign/v1/pages/AdditionalDiscount/index.tsx
View File

@ -3,9 +3,33 @@ import styles from "./styles.module.css";
import MainButton from "@/components/MainButton";
import { useNavigate } from "react-router-dom";
import routes from "@/routes";
import { usePaywall } from "@/hooks/paywall/usePaywall";
import { EPlacementKeys } from "@/api/resources/Paywall";
import { actions, selectors } from "@/store";
import { useDispatch, useSelector } from "react-redux";
import { useEffect } from "react";
function AdditionalDiscount() {
const navigate = useNavigate();
const dispatch = useDispatch();
const activeProduct = useSelector(selectors.selectActiveProduct);
const { products, getText } = usePaywall({
placementKey: EPlacementKeys["aura.placement.secret.discount"],
});
useEffect(() => {
if (!products.length) return;
const _activeProduct = products.find(
(p) => p.trialPrice === activeProduct?.trialPrice
);
if (!_activeProduct) {
dispatch(actions.payment.update({ activeProduct: products[0] }));
}
if (_activeProduct) {
dispatch(actions.payment.update({ activeProduct: _activeProduct }));
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [dispatch, products]);
const handleNext = () => {
navigate(routes.client.trialPaymentWithDiscountV1());
@ -14,21 +38,25 @@ function AdditionalDiscount() {
return (
<section className={`${styles.page} page`}>
<Title variant="h2" className={styles.title}>
Save 65% off!
Save {(getText("discount.1") as string).replace("-", "")} off!
</Title>
<img src="/friends.webp" alt="Friends" style={{ minHeight: "180px" }} />
<div className={styles["discount-point"]}>
<img src="/fire.webp" alt="Fire" />
<p className={styles["discount-point-description"]}>
65% off on your personalized plan
{(getText("discount.1") as string).replace("-", "")} off on your
personalized plan
</p>
</div>
<div className={styles["discount-point"]}>
<img src="/present.webp" alt="Present" />
<p className={styles["discount-point-description"]}>7-day trial</p>
<p className={styles["discount-point-description"]}>
{activeProduct?.trialDuration}-day trial
</p>
</div>
<p className={styles["discount-description"]}>
<span>$9</span> instead of $19
<span>${(activeProduct?.price || 0) / 100}</span> instead of $
{Number(getText("full.price")) / 100}
</p>
<MainButton className={styles.button} onClick={handleNext}>
Get secret discount!

7
src/components/pages/ABDesign/v1/pages/Gender/index.tsx
View File

@ -6,7 +6,7 @@ import routes from "@/routes";
import { actions, selectors } from "@/store";
import { useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { useNavigate, useParams } from "react-router-dom";
import { useLocation, useNavigate, useParams } from "react-router-dom";
import BackgroundTopBlob from "../../ui/BackgroundTopBlob";
import { useDynamicSize } from "@/hooks/useDynamicSize";
import Header from "../../components/Header";
@ -22,6 +22,7 @@ interface IGenderPageProps {
function GenderPage({ productKey }: IGenderPageProps): JSX.Element {
const dispatch = useDispatch();
const navigate = useNavigate();
const location = useLocation();
const { targetId } = useParams();
const { width: pageWidth, elementRef: pageRef } = useDynamicSize({});
const [selectedGender, setSelectedGender] = useState<Gender | null>(null);
@ -30,9 +31,11 @@ function GenderPage({ productKey }: IGenderPageProps): JSX.Element {
);
useEffect(() => {
const feature = location.pathname.replace("/v1/gender/", "");
const isShowTryApp = targetId === "i";
dispatch(actions.userConfig.addIsShowTryApp(isShowTryApp));
}, [dispatch, targetId]);
dispatch(actions.userConfig.setFeature(feature.includes("/v1/gender") ? "" : feature));
}, [dispatch, location.pathname, targetId]);
useEffect(() => {
if (privacyPolicyChecked && selectedGender) {

18
src/components/pages/ABDesign/v1/pages/Satisfied/index.tsx
View File

@ -42,7 +42,7 @@ function Satisfied() {
<section
className={`${styles.page} page`}
style={{
backgroundImage: `url(/satisfied-${satisfied}.png)`,
backgroundImage: `url(/satisfied-${satisfied}.webp)`,
}}
>
<Header
@ -50,12 +50,13 @@ function Satisfied() {
isBackButtonVisible={false}
/>
{satisfied === "yes" && (
<div
style={{
width: "100%",
aspectRatio: "337 / 406",
}}
>
// <div
// style={{
// width: "100%",
// aspectRatio: "337 / 406",
// }}
// >
<>
{animationSun && (
<DotLottieReact
className={`${styles["lottie-animation"]} ym-hide-content`}
@ -64,7 +65,8 @@ function Satisfied() {
loop={false}
/>
)}
</div>
</>
// </div>
)}
{satisfied === "no" && (
<div

5
src/components/pages/ABDesign/v1/pages/Satisfied/styles.module.css
View File

@ -75,3 +75,8 @@
background-color: #fff;
color: #0f1323;
}
.lottie-animation {
width: 100%;
aspect-ratio: 337 / 406;
}

64
src/components/pages/ABDesign/v1/pages/TrialChoice/index.tsx
View File

@ -15,11 +15,13 @@ import { EPlacementKeys } from "@/api/resources/Paywall";
import { getRandomArbitrary } from "@/services/random-value";
import Loader from "@/components/Loader";
import metricService, { EGoals } from "@/services/metric/metricService";
import PersonalVideo from "../TrialPayment/components/PersonalVideo";
function TrialChoicePage() {
const dispatch = useDispatch();
const navigate = useNavigate();
const selectedPrice = useSelector(selectors.selectSelectedPrice);
const activeProduct = useSelector(selectors.selectActiveProduct);
const homeConfig = useSelector(selectors.selectHome);
const email = useSelector(selectors.selectEmail);
const [isDisabled, setIsDisabled] = useState(true);
@ -30,6 +32,8 @@ function TrialChoicePage() {
placementKey: EPlacementKeys["aura.placement.redesign.main"],
});
const { videoUrl } = useSelector(selectors.selectPersonalVideo);
useEffect(() => {
const randomDelay = getRandomArbitrary(3000, 5000);
const countUsersTimeOut = setTimeout(() => {
@ -58,17 +62,36 @@ function TrialChoicePage() {
ref={pageRef}
style={{
backgroundColor: gender === "male" ? "#C1E5FF" : "#f7ebff",
paddingTop: !videoUrl.length ? "15px" : "0px",
}}
>
<BackgroundTopBlob
width={pageWidth}
className={styles["background-top-blob"]}
height={180}
/>
<Header className={styles.header} />
{!videoUrl.length && (
<>
<BackgroundTopBlob
width={pageWidth}
className={styles["background-top-blob"]}
height={180}
/>
<Header className={styles.header} />
</>
)}
{!!videoUrl.length && (
<PersonalVideo
gender={gender}
url={videoUrl}
classNameContainer={styles["personal-video"]}
/>
)}
{!isLoading && (
<>
<p className={styles.text} style={{ marginTop: "60px" }}>
<p
className={styles.text}
style={{
marginTop: !videoUrl.length
? "60px"
: "calc((100% + 84px) / 16* 9 + 16px)",
}}
>
{getText("text.0", {
replacementSelector: "b",
color: "#1C38EA",
@ -82,6 +105,13 @@ function TrialChoicePage() {
<p className={`${styles.text} ${styles.bold} ${styles.blue}`}>
{getText("text.2", {
color: "#1C38EA",
replacement: {
target: "${trialDuration}",
replacement:
activeProduct?.trialDuration?.toString() ||
products[0]?.trialDuration?.toString() ||
"3",
},
})}
</p>
<div className={styles["price-container"]}>
@ -119,15 +149,17 @@ function TrialChoicePage() {
/>
</div>
<p className={styles.email}>{email}</p>
<QuestionnaireGreenButton
className={styles.button}
disabled={isDisabled}
onClick={handleNext}
>
{getText("text.button.1", {
color: "#1C38EA",
})}
</QuestionnaireGreenButton>
{!isDisabled && (
<QuestionnaireGreenButton
className={styles.button}
disabled={isDisabled}
onClick={handleNext}
>
{getText("text.button.1", {
color: "#1C38EA",
})}
</QuestionnaireGreenButton>
)}
<p className={styles["auxiliary-text"]}>
{getText("text.4", {
color: "#1C38EA",

17
src/components/pages/ABDesign/v1/pages/TrialChoice/styles.module.css
View File

@ -5,7 +5,7 @@
min-height: 100dvh;
height: fit-content;
background-color: #fff0f0;
padding: 15px 42px 60px;
padding: 0 42px 126px;
width: 100%;
max-width: 500px;
}
@ -133,10 +133,17 @@
font-size: 18px;
min-height: 0;
height: 50px;
position: fixed;
bottom: calc(0dvh + 16px);
width: calc(100% - 84px);
}
.email {
font-weight: 500;
word-break: break-all;
white-space: normal;
line-height: 1.3;
text-align: center;
}
.loader {
@ -144,4 +151,12 @@
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.personal-video {
position: fixed !important;
top: 0dvh;
z-index: 30;
margin-top: 0 !important;
border-radius: 0 !important;
}

29
src/components/pages/ABDesign/v1/pages/TrialPayment/components/PaymentTable/index.tsx
View File

@ -4,11 +4,13 @@ import CustomButton from "../CustomButton";
import GuardPayments from "../GuardPayments";
import { useState } from "react";
import FullScreenModal from "@/components/FullScreenModal";
import { IPaywallProduct } from "@/api/resources/Paywall";
import { EPlacementKeys, IPaywallProduct } from "@/api/resources/Paywall";
import { usePaywall } from "@/hooks/paywall/usePaywall";
interface IPaymentTableProps {
product: IPaywallProduct;
gender: string;
placementKey: EPlacementKeys;
buttonClick: () => void;
}
@ -16,7 +18,15 @@ const getPrice = (product: IPaywallProduct) => {
return (product.trialPrice || 0) / 100;
};
function PaymentTable({ gender, product, buttonClick }: IPaymentTableProps) {
function PaymentTable({
gender,
product,
placementKey,
buttonClick,
}: IPaymentTableProps) {
const { getText } = usePaywall({
placementKey,
});
const [isOpenPrivacyModal, setIsOpenPrivacyModal] = useState<boolean>(false);
const handleSubscriptionPolicyClick = (event: React.MouseEvent) => {
event.preventDefault();
@ -63,8 +73,10 @@ function PaymentTable({ gender, product, buttonClick }: IPaymentTableProps) {
<div className={styles["table-element"]}>
<p>Your cost per 2 weeks after trial</p>
<div>
<span className={styles.discount}>$65</span>
<span>${product.trialPrice / 100}</span>
<span className={styles.discount}>
${Number(getText("full.price")) / 100}
</span>
<span>${product.price / 100}</span>
</div>
</div>
</div>
@ -75,10 +87,11 @@ function PaymentTable({ gender, product, buttonClick }: IPaymentTableProps) {
<GuardPayments />
<p className={styles.policy}>
You are enrolling in 2 weeks subscription. By continuing you agree that
if you don't cancel prior to the end of the 3-day trial for the $
{getPrice(product)} you will automatically be charged $19 every 2 weeks
until you cancel in settings. Learn more about cancellation and refund
policy in{" "}
if you don't cancel prior to the end of the {product?.trialDuration}-day
trial for the ${getPrice(product)} you will automatically be charged $
{product.price / 100}{" "}
every 2 weeks until you cancel in settings. Learn more about
cancellation and refund policy in{" "}
<a onClick={handleSubscriptionPolicyClick}>Subscription policy</a>
</p>
</>

1
src/components/pages/ABDesign/v1/pages/TrialPayment/components/PersonalVideo/styles.module.css
View File

@ -1,5 +1,6 @@
.container {
width: 100%;
max-width: 500px;
margin: 24px 0 16px;
position: relative;
overflow: hidden;

2
src/components/pages/ABDesign/v1/pages/TrialPayment/components/WithPartnerInformation/index.tsx
View File

@ -69,7 +69,7 @@ function WithPartnerInformation(props: IWithPartnerInformationProps) {
<ul>
<li>
<h6>Zodiac sign</h6>
<p>{partnerZodiacSign.length ? partnerZodiacSign : "-"}</p>
<p>{partnerZodiacSign?.length ? partnerZodiacSign : "-"}</p>
</li>
<li>
<h6>Gender</h6>

11
src/components/pages/ABDesign/v1/pages/TrialPayment/index.tsx
View File

@ -24,7 +24,6 @@ import { useDynamicSize } from "@/hooks/useDynamicSize";
import { EPlacementKeys, IPaywallProduct } from "@/api/resources/Paywall";
import { usePaywall } from "@/hooks/paywall/usePaywall";
import PaymentModal from "@/components/PaymentModal";
import PersonalVideo from "./components/PersonalVideo";
import metricService, { EGoals } from "@/services/metric/metricService";
function TrialPaymentPage() {
@ -55,7 +54,6 @@ function TrialPaymentPage() {
"single" | "partner"
>("single");
const { subPlan } = useParams();
const { videoUrl } = useSelector(selectors.selectPersonalVideo);
useEffect(() => {
if (subPlan) {
@ -137,13 +135,6 @@ function TrialPaymentPage() {
</div>
<Header className={styles.header} />
<TrialPaymentHeader buttonClick={openStripeModal} />
{!!videoUrl.length && (
<PersonalVideo
gender={gender}
url={videoUrl}
classNameContainer={styles["personal-video"]}
/>
)}
{singleOrWithPartner === "partner" && (
<WithPartnerInformation
zodiacSign={zodiacSign}
@ -172,6 +163,7 @@ function TrialPaymentPage() {
gender={gender}
product={activeProduct}
buttonClick={openStripeModal}
placementKey={EPlacementKeys["aura.placement.redesign.main"]}
/>
<YourReading
gender={gender}
@ -189,6 +181,7 @@ function TrialPaymentPage() {
gender={gender}
product={activeProduct}
buttonClick={openStripeModal}
placementKey={EPlacementKeys["aura.placement.redesign.main"]}
/>
</section>
);

6
src/components/pages/ABDesign/v1/pages/TrialPayment/styles.module.css
View File

@ -41,10 +41,4 @@
top: 32px;
padding: 0 14px;
width: 100%;
}
.personal-video {
position: sticky !important;
top: 62px;
z-index: 30;
}

14
src/components/pages/ABDesign/v1/pages/TrialPaymentWithDiscount/PaymentDiscountTable/index.tsx
View File

@ -2,7 +2,8 @@ import Title from "@/components/Title";
import styles from "./styles.module.css";
import { useSelector } from "react-redux";
import { selectors } from "@/store";
import { IPaywallProduct } from "@/api/resources/Paywall";
import { EPlacementKeys, IPaywallProduct } from "@/api/resources/Paywall";
import { usePaywall } from "@/hooks/paywall/usePaywall";
const getPrice = (product: IPaywallProduct | null) => {
if (!product) {
@ -12,6 +13,9 @@ const getPrice = (product: IPaywallProduct | null) => {
};
function PaymentDiscountTable() {
const { getText } = usePaywall({
placementKey: EPlacementKeys["aura.placement.secret.discount"],
});
const activeProduct = useSelector(selectors.selectActiveProduct);
return (
@ -30,14 +34,16 @@ function PaymentDiscountTable() {
<p className={styles.description}>Secret discount applied!</p>
</div>
<div className={styles.side}>
<span className={styles.discount}>-30%</span>
<strong>-50%</strong>
<span className={styles.discount}>{getText("discount.0")}</span>
<strong>{getText("discount.1")}</strong>
</div>
</div>
<div className={styles["cost-container"]}>
<p>Your cost per 14 days after trial:</p>
<div className={styles.side}>
<span className={styles.discount}>$19</span>
<span className={styles.discount}>
${Number(getText("full.price")) / 100}
</span>
<strong>${(activeProduct?.price || 0) / 100}</strong>
</div>
</div>

39
src/components/pages/ABDesign/v1/pages/TrialPaymentWithDiscount/index.tsx
View File

@ -3,39 +3,20 @@ import styles from "./styles.module.css";
import MainButton from "@/components/MainButton";
import PaymentDiscountTable from "./PaymentDiscountTable";
import Modal from "@/components/Modal";
import { useEffect, useState } from "react";
import { actions, selectors } from "@/store";
import { useDispatch, useSelector } from "react-redux";
import { usePaywall } from "@/hooks/paywall/usePaywall";
import { useState } from "react";
import { selectors } from "@/store";
import { useSelector } from "react-redux";
import { EPlacementKeys } from "@/api/resources/Paywall";
import PaymentModal from "@/components/PaymentModal";
function TrialPaymentWithDiscount() {
const dispatch = useDispatch();
const { products } = usePaywall({
placementKey: EPlacementKeys["aura.placement.secret.discount"],
});
const productFromStore = useSelector(selectors.selectActiveProduct);
const [isOpenPaymentModal, setIsOpenPaymentModal] = useState<boolean>(false);
const activeProduct = useSelector(selectors.selectActiveProduct);
const handleClose = () => {
setIsOpenPaymentModal(false);
};
useEffect(() => {
if (!products.length) return;
const activeProduct = products.find(
(p) => p.trialPrice === productFromStore?.trialPrice
);
if (!activeProduct) {
dispatch(actions.payment.update({ activeProduct: products[0] }));
}
if (activeProduct) {
dispatch(actions.payment.update({ activeProduct }));
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [dispatch, products]);
return (
<section className={`${styles.page} page`}>
<Modal open={isOpenPaymentModal} onClose={handleClose} type="hidden">
@ -56,14 +37,14 @@ function TrialPaymentWithDiscount() {
className={styles.button}
onClick={() => setIsOpenPaymentModal(true)}
>
Start your 3-day trial
Start your {activeProduct?.trialDuration}-day trial
</MainButton>
<p className={styles.policy}>
By continuing you agree that if you don't cancel prior to the end of the
3-days trial, you will automatically be charged $
{(productFromStore?.price || 0) / 100} for the introductory period of 14
days thereafter the standard rate of $
{(productFromStore?.price || 0) / 100} every 14 days until you cancel in
By continuing you agree that if you don't cancel prior to the end of the{" "}
{activeProduct?.trialDuration}-days trial, you will automatically be
charged ${(activeProduct?.price || 0) / 100} for the introductory
period of 14 days thereafter the standard rate of $
{(activeProduct?.price || 0) / 100} every 14 days until you cancel in
settings. Learn more about cancellation and refund policy in
Subscription terms.
</p>

6
src/components/pages/ABDesign/v1/ui/BackButton/index.tsx
View File

@ -4,9 +4,11 @@ interface IBackButtonProps {
onClick?: () => void;
}
function BackButton(props: IBackButtonProps) {
function BackButton(
props: IBackButtonProps & React.HTMLAttributes<HTMLButtonElement>
) {
return (
<button className={styles.button} onClick={props.onClick}>
<button className={styles.button} onClick={props.onClick} {...props}>
<svg
width="11"
height="20"

21
src/components/pages/EmailLetters/MarketingTrialPayment/index.tsx
View File

@ -7,14 +7,15 @@ import PaymentModal from "@/components/PaymentModal";
import { useEffect, useState } from "react";
import { usePaywall } from "@/hooks/paywall/usePaywall";
import { EPlacementKeys } from "@/api/resources/Paywall";
import { useDispatch } from "react-redux";
import { actions } from "@/store";
import { useDispatch, useSelector } from "react-redux";
import { actions, selectors } from "@/store";
function MarketingTrialPayment() {
const dispatch = useDispatch();
const [isOpenPaymentModal, setIsOpenPaymentModal] = useState<boolean>(false);
const activeProduct = useSelector(selectors.selectActiveProduct);
const { products } = usePaywall({
const { products, getText } = usePaywall({
placementKey: EPlacementKeys["aura.placement.email.marketing"],
});
@ -48,7 +49,7 @@ function MarketingTrialPayment() {
<div className={styles.wrapper}>
<div className={styles.banner}>Special Offer</div>
<Title variant="h2" className={styles.title}>
Start your 7-day trial
Start your {activeProduct?.trialDuration}-day trial
</Title>
<p className={styles.description}>No pressure. Cancel anytime</p>
<div className={styles["total-today"]}>
@ -67,16 +68,16 @@ function MarketingTrialPayment() {
Your cost per 2 weeks after trial
</p>
<p className={styles.value}>
<span className={styles["old-price"]}>$29</span>
<span className={styles["new-price"]}>$19</span>
<span className={styles["old-price"]}>${Number(getText("full.price")) / 100}</span>
<span className={styles["new-price"]}>${(activeProduct?.price || 0) / 100}</span>
</p>
</div>
<p className={styles["sale-description"]}>Save $10 every period</p>
<p className={styles["sale-description"]}>{getText("text.save")}</p>
<div className={styles.line} />
<p className={styles["text-description"]}>
You will be charged only{" "}
<b>
${(products[0]?.trialPrice / 100).toFixed(2) || 0} for your 7-day
${(products[0]?.trialPrice / 100).toFixed(2) || 0} for your {activeProduct?.trialDuration}-day
trial.
</b>{" "}
Subscription <b>renews automatically</b> until cancelled. You{" "}
@ -87,8 +88,8 @@ function MarketingTrialPayment() {
<p>Get access</p>
</MainButton>
<p className={styles.policy}>
By continuing you agree that if you don't cancel prior to the end of
the 3-days trial, you will automatically be charged $19 every 2
By continuing you agree that if you don`t cancel prior to the end of
the {activeProduct?.trialDuration}-days trial, you will automatically be charged ${(activeProduct?.price || 0) / 100} every 2
weeks until you cancel in settings. Learn more about cancellation
and refund policy in Subscription terms
</p>

7
src/components/palmistry/payment-screen/payment-screen.tsx
View File

@ -46,6 +46,7 @@ export default function PaymentScreen() {
const [minutes, seconds] = time.split(":");
const returnUrl = window.location.origin + '/palmistry/payment';
return (
<div className="payment-screen">
<div className="payment-screen__header">
@ -124,7 +125,7 @@ export default function PaymentScreen() {
</div>
</div>
<h1 className="payment-screen__title">Start your 7-day trial</h1>
<h1 className="payment-screen__title">Start your {activeProductFromStore?.trialDuration}-day trial</h1>
<div className="payment-screen__total-today">
<span>Total today</span>
@ -162,7 +163,7 @@ export default function PaymentScreen() {
<div className="payment-screen__prices">
<span>
You will be charged only{" "}
<b>${getFormattedPrice(trialPrice)} for your 7-day trial.</b>
<b>${getFormattedPrice(trialPrice)} for your {activeProductFromStore?.trialDuration}-day trial.</b>
</span>
<span>
@ -256,7 +257,7 @@ export default function PaymentScreen() {
<PaymentModalNew
setHeight={setHeight}
activeProduct={activeProductFromStore}
returnUrl={window.location.href}
returnUrl={returnUrl}
placementKey={EPlacementKeys["aura.placement.palmistry.main"]}
/>
)}

14
src/components/palmistry/steps-manager/steps-manager.tsx
View File

@ -78,12 +78,14 @@ export default function StepsManager() {
)}
<main className="steps-manager__main">
{nonSliderSteps.includes(steps.current as Step) && (
<PalmistryContainerWrapper currentStep={steps.current as Step}>
{steps.current === Step.Payment && <PaymentScreen />}
{steps.current === Step.Discount && <DiscountScreen />}
{steps.current === Step.PremiumBundle && <PremiumBundleScreen />}
</PalmistryContainerWrapper>
{(nonSliderSteps.includes(steps.current as Step) || steps.current === Step.Paywall) && (
<div style={steps.current === Step.Paywall ? {visibility: 'hidden', position: 'absolute'} : {}}>
<PalmistryContainerWrapper currentStep={steps.current as Step}>
{[Step.Paywall, Step.Payment].includes(steps.current as Step) && <PaymentScreen />}
{steps.current === Step.Discount && <DiscountScreen/>}
{steps.current === Step.PremiumBundle && <PremiumBundleScreen/>}
</PalmistryContainerWrapper>
</div>
)}
{!nonSliderSteps.includes(steps.current as Step) && (

4
src/hooks/authentication/use-authentication.ts
View File

@ -15,6 +15,7 @@ import { useDispatch, useSelector } from "react-redux";
export const useAuthentication = () => {
const api = useApi();
const feature = useSelector(selectors.selectFeature)
const { i18n } = useTranslation();
const dispatch = useDispatch();
const [isLoading, setIsLoading] = useState(false);
@ -98,7 +99,8 @@ export const useAuthentication = () => {
},
},
sign: checked,
signDate: dateOfCheck
signDate: dateOfCheck,
feature
})
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [

8
src/hooks/paywall/usePaywall.tsx
View File

@ -83,14 +83,12 @@ export function usePaywall({ placementKey }: IUsePaywallProps) {
}, [getPaywallByPlacementKey, placementKey, isMustUpdate]);
const getText = useCallback(
(
key: string,
{
(key: string, options?: IGetTextProps) => {
const {
replacementSelector = "span",
color = "inherit",
replacement,
}: IGetTextProps
) => {
} = options || {};
const property = properties.find((property) => property.key === key);
if (!property) return "";
const text = property.value;

2
src/index.css
View File

@ -1,5 +1,7 @@
@import "slick-carousel/slick/slick.css";
@import "slick-carousel/slick/slick-theme.css";
@import 'react-pdf/dist/Page/AnnotationLayer.css';
@import 'react-pdf/dist/Page/TextLayer.css';
* {
box-sizing: border-box;

4
src/init.tsx
View File

@ -11,6 +11,10 @@ import { LegalContext, buildLegal } from "./legal";
import { getClientLocale, buildResources, fallbackLng } from "./locales";
import App from "./components/App";
import metricService from "./services/metric/metricService";
import "core-js/actual";
import { pdfjs } from "react-pdf";
pdfjs.GlobalWorkerOptions.workerSrc = `https://unpkg.com/pdfjs-dist@${pdfjs.version}/legacy/build/pdf.worker.min.js`;
const environments = import.meta.env;

2
src/routerComponents/ABDesign/v1/index.tsx
View File

@ -38,7 +38,7 @@ function ABDesignV1Routes() {
<Routes>
<Route element={<LayoutABDesignV1 />}>
<Route path={routes.client.genderV1()} element={<GenderPage />}>
<Route path=":targetId" element={<GenderPage />} />
<Route path=":targetId*" element={<GenderPage />} />
</Route>
<Route
path={routes.client.questionnaireV1()}

4
src/routes.ts
View File

@ -278,6 +278,10 @@ const routes = {
getUserVideos: () =>
[dApiHost, "users", "videos", "combined"].join("/"),
// User videos
getUserPDFCompatibility: () =>
[dApiHost, "users", "pdf", "compatibility"].join("/"),
},
openAi: {
createThread: () => [openAIHost, openAiPrefix, "threads"].join("/"),

2
src/store/index.ts
View File

@ -48,6 +48,7 @@ import userConfig, {
actions as userConfigActions,
selectUserDeviceType,
selectIsShowTryApp,
selectFeature,
selectIsForceShortPath,
} from "./userConfig";
import compatibilities, {
@ -121,6 +122,7 @@ export const selectors = {
selectQuestionnaire,
selectUserDeviceType,
selectIsShowTryApp,
selectFeature,
selectIsForceShortPath,
selectOpenAiToken,
selectPalmistryLines,

10
src/store/userConfig.ts
View File

@ -10,12 +10,14 @@ interface IUserConfig {
deviceType: EUserDeviceType;
isShowTryApp: boolean;
isForceShortPath: boolean;
feature: string;
}
const initialState: IUserConfig = {
deviceType: EUserDeviceType.ios,
isShowTryApp: false,
isForceShortPath: false,
feature: "",
};
const userConfigSlice = createSlice({
@ -37,6 +39,10 @@ const userConfigSlice = createSlice({
state.isForceShortPath = action.payload;
return state;
},
setFeature(state, action: PayloadAction<string>) {
state.feature = action.payload;
return state;
},
},
extraReducers: (builder) => builder.addCase("reset", () => initialState),
});
@ -54,4 +60,8 @@ export const selectIsForceShortPath = createSelector(
(state: { userConfig: IUserConfig }) => state.userConfig.isForceShortPath,
(userConfig) => userConfig
);
export const selectFeature = createSelector(
(state: { userConfig: IUserConfig }) => state.userConfig.feature,
(userConfig) => userConfig
);
export default userConfigSlice.reducer;