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

Merge branch 'develop' into 'main'

Browse Source 
Develop

See merge request witapp/aura-webapp!264
This commit is contained in:
Daniil Chemerkin 2024-07-18 23:43:30 +00:00
commit 015e64841e
22 changed files with 186 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/App/index.tsx
View File

@ -121,7 +121,7 @@ import LoadingPage from "../pages/LoadingPage";
import { EProductKeys, productUrls } from "@/data/products";
import SinglePaymentPage from "../pages/SinglePaymentPage";
import ABDesignV1Routes from "@/routerComponents/ABDesign/v1";
import metricService, { EGoals } from "@/services/metric/metricService";
import metricService from "@/services/metric/metricService";
const isProduction = import.meta.env.MODE === "production";
@ -164,11 +164,6 @@ function App(): JSX.Element {
const birthPlace = user?.profile?.birthplace || birthPlaceFromStore;
useEffect(() => {
if (location.pathname.includes("v1/trial-choice")) {
metricService.reachGoal(EGoals.AURA_TRIAL_CHOICE_PAGE_VISIT, true);
} else if (location.pathname.includes("v1/trial-payment")) {
metricService.reachGoal(EGoals.AURA_TRIAL_PAYMENT_PAGE_VISIT, true);
}
// metricService.initMetricAB()
metricService.hit();
}, [location]);

25
src/components/pages/ABDesign/v1/components/PriceItem/index.tsx
View File

@ -1,6 +1,9 @@
import { removeAfterDot, roundToWhole } from "@/services/price";
import styles from "./styles.module.css";
import Price, { Currency, Locale } from "@/components/PaymentTable/Price";
import { useEffect, useRef } from "react";
import { useDispatch } from "react-redux";
import { actions } from "@/store";
const currency = Currency.USD;
const locale = Locale.EN;
@ -22,12 +25,28 @@ function PriceItem({
classNameActive = "",
click,
}: PriceItemProps): JSX.Element {
const dispatch = useDispatch();
const _price = new Price(
roundToWhole(value === 1 ? 0.99 : value),
currency,
locale
);
const itemRef = useRef<HTMLDivElement>(null);
useEffect(() => {
if (value === 13.76 && itemRef.current?.offsetLeft) {
dispatch(
actions.siteConfig.updateTrialChoiceArrowOptions({
left: `${
itemRef.current.offsetLeft + itemRef.current.offsetWidth / 2 - 26
}px`,
})
);
}
}, [dispatch, value, itemRef.current?.offsetLeft]);
const compatClassName = () => {
const isPopular = id === "stripe.7";
const isActive = active;
@ -41,7 +60,11 @@ function PriceItem({
};
return (
<div onClick={itemClick} className={compatClassName()}>
<div
ref={value === 13.76 ? itemRef : null}
onClick={itemClick}
className={compatClassName()}
>
{removeAfterDot(_price.format())}
</div>
);

2
src/components/pages/ABDesign/v1/data/questionary.module.css
View File

@ -1,3 +1,3 @@
.relationship-goal-answer {
.small-font-size-answer {
font-size: 15px !important;
}

3
src/components/pages/ABDesign/v1/data/stepsQuestionary.tsx
View File

@ -846,6 +846,7 @@ export const stepsQuestionary: IStep[] = [
{
id: "aboutGoals",
question: "When you think about your relationship goals, you feel...?",
answerClassName: styles["small-font-size-answer"],
lottie: {
preloadKey: ELottieKeys.darts,
},
@ -1191,7 +1192,7 @@ export const stepsQuestionary: IStep[] = [
{
id: "relationshipGoal",
question: "When you think about your relationship goals, you feel...?",
answerClassName: styles["relationship-goal-answer"],
answerClassName: styles["small-font-size-answer"],
answers: [
{
id: "optimistic",

9
src/components/pages/ABDesign/v1/pages/AllRight/styles.module.css
View File

@ -86,4 +86,11 @@
background-color: #fff;
color: #0F1323;
}
.lottie-animation {
width: 100%;
height: 100%;
margin-left: 12px;
margin-top: 12px;
transform: scale(1.35);
}

4
src/components/pages/ABDesign/v1/pages/AlmostThere/styles.module.css
View File

@ -77,6 +77,6 @@
}
.lottie-animation {
width: 100%;
aspect-ratio: 401.27 / 353.27;
width: 68%;
aspect-ratio: 229 / 178;
}

8
src/components/pages/ABDesign/v1/pages/EmailConfirm/index.tsx
View File

@ -8,6 +8,7 @@ import { useDynamicSize } from "@/hooks/useDynamicSize";
import QuestionnaireGreenButton from "../../ui/GreenButton";
import { DotLottieReact } from "@lottiefiles/dotlottie-react";
import { ELottieKeys, useLottie } from "@/hooks/lottie/useLottie";
import { useEffect } from "react";
function EmailConfirmPage() {
const navigate = useNavigate();
@ -21,6 +22,13 @@ function EmailConfirmPage() {
navigate(routes.client.onboardingV1());
};
useEffect(() => {
document.body.classList.add(styles["body-email-confirm"]);
return () => {
document.body.classList.remove(styles["body-email-confirm"]);
};
}, []);
return (
<section className={`${styles.page} page`} ref={pageRef}>
<BackgroundTopBlob

7
src/components/pages/ABDesign/v1/pages/EmailConfirm/styles.module.css
View File

@ -1,9 +1,12 @@
.body-email-confirm {
background-color: #0F1323;
}
.page {
position: relative;
height: fit-content;
min-height: 100dvh;
display: flex;
justify-content: start;
align-items: center;
justify-content: space-between;
flex-direction: column;
@ -12,6 +15,7 @@
color: #fff;
width: 100%;
max-width: 460px;
overflow-y: auto;
}
.header {
@ -79,6 +83,7 @@
font-weight: normal;
line-height: 1.2;
font-size: 12px;
margin-top: 8px;
}
.lottie-animation {

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

@ -4,7 +4,7 @@ import { Gender } from "@/data";
import { EProductKeys } from "@/data/products";
import routes from "@/routes";
import { actions, selectors } from "@/store";
import { useEffect, useState } from "react";
import { useEffect, useMemo, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { useLocation, useNavigate, useParams } from "react-router-dom";
import BackgroundTopBlob from "../../ui/BackgroundTopBlob";
@ -34,13 +34,22 @@ function GenderPage({ productKey }: IGenderPageProps): JSX.Element {
const { flags } = useMetricABFlags();
const isNextPageMentioned = flags?.isNextPageMentioned?.[0];
usePreloadImages([
"/heart.webp",
"https://d2ecldjic51fgm.cloudfront.net/pub/assets/aura/emoji/twohearts-bc5e3e37.png",
"https://d2ecldjic51fgm.cloudfront.net/pub/assets/aura/emoji/ring-26f6592d.png",
"https://d2ecldjic51fgm.cloudfront.net/pub/assets/aura/emoji/brokenheart-9e2ba6fb.png",
"https://d2ecldjic51fgm.cloudfront.net/pub/assets/aura/emoji/thinkingface-aa0f3a72.png",
]);
const preloadImages = useMemo(() => {
const _preloadImages = [
"/heart.webp",
"https://d2ecldjic51fgm.cloudfront.net/pub/assets/aura/emoji/twohearts-bc5e3e37.png",
"https://d2ecldjic51fgm.cloudfront.net/pub/assets/aura/emoji/ring-26f6592d.png",
"https://d2ecldjic51fgm.cloudfront.net/pub/assets/aura/emoji/brokenheart-9e2ba6fb.png",
"https://d2ecldjic51fgm.cloudfront.net/pub/assets/aura/emoji/thinkingface-aa0f3a72.png",
];
if (isNextPageMentioned === "true") {
_preloadImages.push("/new-york-times.png");
_preloadImages.push("/partnersWithoutNewYorkTime.png");
}
return _preloadImages;
}, [isNextPageMentioned]);
usePreloadImages(preloadImages);
useEffect(() => {
const feature = location.pathname.replace("/v1/gender/", "");

4
src/components/pages/ABDesign/v1/pages/Gender/styles.module.css
View File

@ -4,7 +4,7 @@
align-items: center;
width: 100%;
max-width: 460px;
padding: 20px 24px;
padding: 20px 24px 116px;
color: #2C2C2C;
}
@ -120,6 +120,8 @@
}
.toast-container {
position: fixed;
bottom: calc(0dvh + 16px);
margin-top: 16px;
}

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

@ -88,4 +88,5 @@
.lottie-animation {
height: 100%;
aspect-ratio: 250 / 145;
margin-left: 9%;
}

9
src/components/pages/ABDesign/v1/pages/QuestionnaireIntermediate/index.tsx
View File

@ -41,10 +41,13 @@ function QuestionnaireIntermediatePage() {
return (
<section
className={`${styles.page} page`}
style={{
backgroundImage: `url(${backgroundImage})`,
}}
>
<div
className={styles["background-image"]}
style={{
backgroundImage: `url(${backgroundImage})`,
}}
/>
<Header
isBackButtonVisible={false}
classNameTitle={styles["header-title"]}

25
src/components/pages/ABDesign/v1/pages/QuestionnaireIntermediate/styles.module.css
View File

@ -6,16 +6,33 @@
justify-items: center;
grid-template-rows: repeat(4, min-content);
gap: 40px;
background: url("/couple_holding_hands_1.webp");
background-position-y: bottom;
background-position-x: center;
background-size: cover;
color: #fff;
padding-top: 64px;
background-color: #171717;
padding-top: 32px;
width: 100%;
max-width: 460px;
padding-bottom: calc(0dvh + 64px);
background-attachment: fixed;
}
.page > * {
z-index: 1;
}
.background-image {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
background: url("/couple_holding_hands_1.webp");
background-position-y: bottom;
background-position-x: center;
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
}
.header-title {

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

@ -1,7 +1,9 @@
.page {
position: relative;
display: grid;
justify-items: center;
grid-template-rows: repeat(4, min-content);
gap: 40px;
height: fit-content;
min-height: 100vh;
background: url("/almost-there.webp");
@ -68,6 +70,6 @@
}
.lottie-animation {
width: 100%;
aspect-ratio: 575 / 506;
width: 68%;
aspect-ratio: 229 / 178;
}

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

@ -14,7 +14,10 @@ import { usePaywall } from "@/hooks/paywall/usePaywall";
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 metricService, {
EGoals,
EMetrics,
} from "@/services/metric/metricService";
import PersonalVideo from "../TrialPayment/components/PersonalVideo";
enum EDisplayOptionButton {
@ -23,7 +26,7 @@ enum EDisplayOptionButton {
}
const displayOptionButton: EDisplayOptionButton =
EDisplayOptionButton.alwaysVisible;
EDisplayOptionButton.visibleIfChosen; //
function TrialChoicePage() {
const dispatch = useDispatch();
@ -39,9 +42,16 @@ function TrialChoicePage() {
const { products, isLoading, getText } = usePaywall({
placementKey: EPlacementKeys["aura.placement.redesign.main"],
});
const arrowLeft = useSelector(selectors.selectTrialChoiceArrowOptions)?.left;
const { videoUrl } = useSelector(selectors.selectPersonalVideo);
useEffect(() => {
metricService.reachGoal(EGoals.AURA_TRIAL_CHOICE_PAGE_VISIT, [
EMetrics.KLAVIYO,
]);
}, []);
useEffect(() => {
const randomDelay = getRandomArbitrary(3000, 5000);
const countUsersTimeOut = setTimeout(() => {
@ -130,7 +140,14 @@ function TrialChoicePage() {
classNameItemActive={`${styles["price-item-active"]} ${styles[gender]}`}
click={handlePriceItem}
/>
<p className={styles["auxiliary-text"]} style={{ maxWidth: "75%" }}>
<p
className={styles["auxiliary-text"]}
style={{
maxWidth: arrowLeft
? `${Number(arrowLeft.slice(0, -2)) - 8}px`
: "75%",
}}
>
{getText("text.3", {
color: "#1C38EA",
})}
@ -139,6 +156,13 @@ function TrialChoicePage() {
className={styles["arrow-image"]}
src="/arrow.svg"
alt={`Arrow to $${products.at(-1)?.trialPrice}`}
style={
arrowLeft
? {
left: arrowLeft,
}
: {}
}
/>
</div>
<div className={styles["emails-list-container"]}>

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

@ -15,7 +15,10 @@ interface IPaymentTableProps {
}
const getPrice = (product: IPaywallProduct) => {
return (product.trialPrice || 0) / 100;
if (product.trialPrice % 100 === 0) {
return product.trialPrice / 100;
}
return ((product.trialPrice || 0) / 100).toFixed(2);
};
function PaymentTable({
@ -71,12 +74,21 @@ function PaymentTable({
</div>
<hr />
<div className={styles["table-element"]}>
<p>Your cost per 2 weeks after trial</p>
{product.trialPrice !== 50 && (
<p>Your cost per 2 weeks after trial</p>
)}
{product.trialPrice === 50 && (
<p style={{ fontSize: "11px", lineHeight: "14px", color: "#8E8E93", marginRight: "8px" }}>
Your cost after the trial is fourteen dollars for every two
weeks or $0.50 per half-day
</p>
)}
<div>
<span className={styles.discount}>
${Number(getText("full.price")) / 100}
</span>
<span>${product.price / 100}</span>
{product.trialPrice !== 50 && <span>${product.price / 100}</span>}
{product.trialPrice === 50 && <span>${getPrice(product)}</span>}
</div>
</div>
</div>
@ -89,9 +101,8 @@ function PaymentTable({
You are enrolling in 2 weeks subscription. By continuing you agree that
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{" "}
{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>
</>

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

@ -24,7 +24,10 @@ import { useDynamicSize } from "@/hooks/useDynamicSize";
import { EPlacementKeys, IPaywallProduct } from "@/api/resources/Paywall";
import { usePaywall } from "@/hooks/paywall/usePaywall";
import PaymentModal from "@/components/PaymentModal";
import metricService, { EGoals } from "@/services/metric/metricService";
import metricService, {
EGoals,
EMetrics,
} from "@/services/metric/metricService";
function TrialPaymentPage() {
const dispatch = useDispatch();
@ -55,6 +58,12 @@ function TrialPaymentPage() {
>("single");
const { subPlan } = useParams();
useEffect(() => {
metricService.reachGoal(EGoals.AURA_TRIAL_PAYMENT_PAGE_VISIT, [
EMetrics.KLAVIYO,
]);
}, []);
useEffect(() => {
if (subPlan) {
const targetProduct = products.find(

2
src/components/pages/GetInformationPartner/index.tsx
View File

@ -19,7 +19,7 @@ function GetInformationPartnerPage() {
<section className={`${styles.page} page`}>
<video
className={styles["background-video"]}
loop={true}
loop={false}
autoPlay={true}
muted={true}
playsInline={true}

3
src/routerComponents/ABDesign/v1/LayoutABDesignV1/index.tsx
View File

@ -1,9 +1,10 @@
import styles from "./styles.module.css";
import { useSchemeColorByElement } from "@/hooks/useSchemeColorByElement";
import { useRef } from "react";
import { Outlet } from "react-router-dom";
import { Outlet, useLocation } from "react-router-dom";
function LayoutABDesignV1() {
const location = useLocation();
const mainRef = useRef<HTMLDivElement>(null);
useSchemeColorByElement(mainRef.current, "section.page, .page, section", [
location,

24
src/services/metric/metricService.ts
View File

@ -22,6 +22,11 @@ export enum EFlags {
aboutUsAnswers = 'Key for aboutUsAnswers'
}
export enum EMetrics {
YANDEX = "Yandex",
KLAVIYO = "Klaviyo",
}
interface IUserParams {
UserID: number | string;
genderFrom: string;
@ -64,19 +69,14 @@ const userParams = (parameters: Partial<IUserParams>) => {
window.klaviyo.push(['identify', parameters]);
}
const reachGoal = (goal: EGoals, onlyKlaviyo = false) => {
if (onlyKlaviyo) {
if (!window.klaviyo) return console.error("Klaviyo.Metric not found");
window.klaviyo.push(['track', goal]);
} else {
if (!checkIsAvailableYandexMetric()) return;
const reachGoal = (goal: EGoals, usingMetrics = [EMetrics.KLAVIYO, EMetrics.YANDEX]) => {
if (!checkIsAvailableYandexMetric()) return;
window.ym(metricCounterNumber, "reachGoal", goal)
console.log("goal: ", goal);
if (usingMetrics.includes(EMetrics.YANDEX)) window.ym(metricCounterNumber, "reachGoal", goal)
console.log("goal: ", goal);
if (!window.klaviyo) return console.error("Klaviyo.Metric not found");
window.klaviyo.push(['track', goal]);
}
if (!window.klaviyo) return console.error("Klaviyo.Metric not found");
if (usingMetrics.includes(EMetrics.KLAVIYO)) window.klaviyo.push(['track', goal]);
}
type THitOptions = {
@ -123,7 +123,7 @@ const initMetricAB = () => {
export const useMetricABFlags = () => {
return useExperiments<typeof EFlags>({
clientId: `metrika.${metricCounterNumber}`
})
})
}
export default { setUserID, userParams, reachGoal, hit, initMetric, initMetricAB }

2
src/store/index.ts
View File

@ -18,6 +18,7 @@ import paywalls, { actions as paywallsActions } from "./paywalls";
import siteConfig, {
selectHome,
selectOpenAiToken,
selectTrialChoiceArrowOptions,
actions as siteConfigActions,
} from "./siteConfig";
import onboardingConfig, {
@ -125,6 +126,7 @@ export const selectors = {
selectFeature,
selectIsForceShortPath,
selectOpenAiToken,
selectTrialChoiceArrowOptions,
selectPalmistryLines,
selectPalmistryFingers,
selectPaywalls,

11
src/store/siteConfig.ts
View File

@ -13,6 +13,9 @@ interface ISiteConfig {
pathFromHome: EPathsFromHome;
};
openAiToken: string;
trialChoiceArrowOptions: {
left?: string;
}
}
const initialState: ISiteConfig = {
@ -21,6 +24,7 @@ const initialState: ISiteConfig = {
pathFromHome: EPathsFromHome.compatibility,
},
openAiToken: "",
trialChoiceArrowOptions: {}
};
const siteConfigSlice = createSlice({
@ -30,6 +34,9 @@ const siteConfigSlice = createSlice({
update(state, action: PayloadAction<Partial<ISiteConfig>>) {
return { ...state, ...action.payload };
},
updateTrialChoiceArrowOptions(state, action: PayloadAction<Partial<ISiteConfig['trialChoiceArrowOptions']>>) {
return { ...state, trialChoiceArrowOptions: { ...state.trialChoiceArrowOptions, ...action.payload } }
}
},
extraReducers: (builder) => builder.addCase("reset", () => initialState),
});
@ -43,4 +50,8 @@ export const selectOpenAiToken = createSelector(
(state: { siteConfig: ISiteConfig }) => state.siteConfig.openAiToken,
(siteConfig) => siteConfig
);
export const selectTrialChoiceArrowOptions = createSelector(
(state: { siteConfig: ISiteConfig }) => state.siteConfig.trialChoiceArrowOptions,
(siteConfig) => siteConfig
);
export default siteConfigSlice.reducer;