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

develop

Browse Source
This commit is contained in:
Daniil Chemerkin 2025-02-11 20:39:01 +00:00
parent c15be49c0b
commit 6d817e1923
46 changed files with 438 additions and 237 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -300,7 +300,7 @@ function App(): JSX.Element {
element={<MarketingLandingV1Routes />}
/>
{/* Additional Purchases Palmistry */}
{/* Additional Purchases Main */}
<Route element={<PrivateOutlet />}>
<Route element={<AdditionalPurchasesPalmistry />}>
<Route path={routes.client.skipTrial()} element={<SkipTrial />} />
@ -311,7 +311,7 @@ function App(): JSX.Element {
<Route path={routes.client.addGuides()} element={<AddGuides />} />
</Route>
</Route>
{/* Additional Purchases Palmistry End */}
{/* Additional Purchases Main End */}
<Route
path={routes.client.getInformationPartner()}

17
src/components/CompatibilityV2/components/PaymentModalV1/PaymentForm/index.tsx
View File

@ -9,7 +9,6 @@ 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';
@ -64,15 +63,15 @@ function PaymentForm({
const onPaymentSuccess = () => {
setIsPaymentSuccess(true);
metricService.reachGoal(EGoals.PAYMENT_SUCCESS);
if (activeProduct) {
metricService.reachGoal(EGoals.PURCHASE, [EMetrics.FACEBOOK], {
currency: "USD",
value: ((activeProduct.trialPrice || 100) / 100).toFixed(2),
});
}
// metricService.reachGoal(EGoals.PAYMENT_SUCCESS);
// if (activeProduct) {
// metricService.reachGoal(EGoals.PURCHASE, [EMetrics.FACEBOOK], {
// currency: "USD",
// value: ((activeProduct.trialPrice || 100) / 100).toFixed(2),
// });
// }
setTimeout(() => {
navigate(routes.client.skipTrial());
navigate(routes.client.compatibilityV2SkipTrial());
}, 1500);
}

2
src/components/CompatibilityV2/pages/BirthdatePartner/index.tsx
View File

@ -19,7 +19,7 @@ function BirthdatePartner() {
const navigate = useNavigate();
const dispatch = useDispatch();
const { partnerBirthdate } = useSelector(selectors.selectQuestionnaire);
const [birthdate, setBirthdate] = useState(partnerBirthdate);
const [birthdate, setBirthdate] = useState(partnerBirthdate || "");
const [isDisabled, setIsDisabled] = useState(true);
const handleValid = (_birthdate: string) => {

14
src/components/CompatibilityV2/pages/Camera/index.tsx
View File

@ -7,13 +7,14 @@ import { useDispatch } from "react-redux";
import { actions } from "@/store";
import { useNavigate } from "react-router-dom";
import routes from "@/routes";
import { useState } from "react";
import { useEffect, 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";
import metricService, { EGoals, EMetrics } from "@/services/metric/metricService";
const isProduction = import.meta.env.MODE === "production";
@ -32,6 +33,7 @@ function Camera() {
const [toastVisible, setToastVisible] = useState<EToastVisible | null>(null);
const handleNext = () => {
metricService.reachGoal(EGoals.CAMERA_SUCCESS, [EMetrics.YANDEX, EMetrics.KLAVIYO]);
navigate(routes.client.compatibilityV2ScannedPhoto());
};
@ -152,6 +154,16 @@ function Camera() {
reader.readAsDataURL(event.target.files[0]);
};
useEffect(() => {
metricService.reachGoal(EGoals.CAMERA_OPEN, [EMetrics.YANDEX, EMetrics.KLAVIYO]);
}, []);
useEffect(() => {
if (toastVisible === EToastVisible.try_again) {
metricService.reachGoal(EGoals.CAMERA_ERROR, [EMetrics.YANDEX, EMetrics.KLAVIYO]);
}
}, [toastVisible]);
return (
<>
{!isProduction && uploadMenuModalIsOpen && (

18
src/components/CompatibilityV2/pages/Email/index.tsx
View File

@ -13,9 +13,7 @@ import Loader, { LoaderColor } from "@/components/Loader";
import Policy from "@/components/Policy";
import { useTranslations } from "@/hooks/translations";
import { ELocalesPlacement } from "@/locales";
import metricService, {
EGoals,
EMetrics,
import {
useMetricABFlags,
} from "@/services/metric/metricService";
import NameInput from "@/components/pages/ABDesign/v1/pages/EmailEnterPage/NameInput";
@ -82,13 +80,13 @@ function Email() {
},
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]);
// 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"]);
};

28
src/components/CompatibilityV2/pages/Payment/index.tsx
View File

@ -15,8 +15,8 @@ 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";
import metricService, { EGoals, EMetrics } from "@/services/metric/metricService";
const placementKey = EPlacementKeys['aura.placement.compatibility.v2'];
@ -41,22 +41,28 @@ function Payment() {
const onPaymentError = (error?: string) => {
setIsPaymentError(true);
if (error === "Product not found") {
navigate(routes.client.compatibilityV2TrialChoice());
return navigate(routes.client.compatibilityV2TrialChoice());
}
metricService.reachGoal(EGoals.PAYMENT_ERROR, [EMetrics.YANDEX, EMetrics.KLAVIYO]);
}
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),
});
}
// metricService.reachGoal(EGoals.PAYMENT_SUCCESS);
// if (activeProductFromStore) {
// metricService.reachGoal(EGoals.PURCHASE, [EMetrics.FACEBOOK], {
// currency: "USD",
// value: ((activeProductFromStore.trialPrice || 100) / 100).toFixed(2),
// });
// }
metricService.reachGoal(EGoals.PAYMENT_SUCCESS, [EMetrics.YANDEX, EMetrics.KLAVIYO]);
metricService.reachGoal(EGoals.PURCHASE, [EMetrics.FACEBOOK], {
currency: "USD",
value: ((activeProductFromStore?.trialPrice || 100) / 100).toFixed(2),
});
setTimeout(() => {
navigate(routes.client.skipTrial());
navigate(routes.client.compatibilityV2SkipTrial());
}, 1500);
}
@ -67,6 +73,8 @@ function Payment() {
const showModal = () => {
// dispatch(actions.compatibilityV2.setIsShowPaymentModalV1(true));
metricService.reachGoal(EGoals.PAYMENT_METHODS_OPENED, [EMetrics.YANDEX, EMetrics.KLAVIYO]);
metricService.reachGoal(EGoals.AURA_PAYMENT_METHODS_OPENED, [EMetrics.KLAVIYO]);
setIsPaymentModalOpen(true);
};

6
src/components/CompatibilityV2/pages/SaveOff/index.tsx
View File

@ -10,6 +10,8 @@ import { usePaywall } from "@/hooks/paywall/usePaywall";
import { EPlacementKeys } from "@/api/resources/Paywall";
import { addCurrency, ELocalesPlacement } from "@/locales";
import { useTranslations } from "@/hooks/translations";
import { useEffect } from "react";
import metricService, { EGoals, EMetrics } from "@/services/metric/metricService";
const placementKey = EPlacementKeys["aura.placement.compatibility.v2.secret.discount"]
@ -30,6 +32,10 @@ function SaveOff() {
navigate(routes.client.compatibilityV2SecretDiscount());
}
useEffect(() => {
metricService.reachGoal(EGoals.DISCOUNT_PAGE_VISIT, [EMetrics.YANDEX, EMetrics.KLAVIYO]);
}, []);
return (
<>
<Blob className={styles.blob} />

9
src/components/CompatibilityV2/pages/SecretDiscount/index.tsx
View File

@ -18,6 +18,7 @@ import { useDynamicSize } from "@/hooks/useDynamicSize";
import Header from "../../components/Header";
import PaymentModal from "@/components/Payment/PaymentModal";
import PaymentForm from "@/components/Payment/nmi/PaymentForm";
import metricService, { EGoals, EMetrics } from "@/services/metric/metricService";
const placementKey = EPlacementKeys["aura.placement.compatibility.v2.secret.discount"]
@ -60,6 +61,11 @@ function SecretDiscount() {
// });
const onPaymentSuccess = () => {
metricService.reachGoal(EGoals.PAYMENT_SUCCESS, [EMetrics.YANDEX, EMetrics.KLAVIYO]);
metricService.reachGoal(EGoals.PURCHASE, [EMetrics.FACEBOOK], {
currency: "USD",
value: ((activeProduct?.trialPrice || 100) / 100).toFixed(2),
});
return navigate(routes.client.paymentSuccess())
}
@ -68,10 +74,13 @@ function SecretDiscount() {
}
const onPaymentError = () => {
metricService.reachGoal(EGoals.PAYMENT_ERROR, [EMetrics.YANDEX, EMetrics.KLAVIYO]);
return navigate(routes.client.paymentFail())
}
const openPaymentModal = () => {
metricService.reachGoal(EGoals.PAYMENT_METHODS_OPENED, [EMetrics.YANDEX, EMetrics.KLAVIYO]);
metricService.reachGoal(EGoals.AURA_PAYMENT_METHODS_OPENED, [EMetrics.KLAVIYO]);
setIsPaymentModalOpen(true);
// showCreditCardForm();
};

10
src/components/CompatibilityV2/pages/TrialChoice/index.tsx
View File

@ -11,7 +11,7 @@ import {
getDefaultLocaleByLanguage,
language,
} from "@/locales";
import { useState } from "react";
import { useEffect, useState } from "react";
import Button from "../../components/Button";
import routes from "@/routes";
import { useNavigate } from "react-router-dom";
@ -19,6 +19,7 @@ import Loader from "@/components/Loader";
import { useTranslations } from "@/hooks/translations";
// import { useMetricABFlags } from "@/services/metric/metricService";
import { getLongText } from "./abText";
import metricService, { EGoals, EMetrics } from "@/services/metric/metricService";
function TrialChoice() {
const { translate } = useTranslations(ELocalesPlacement.CompatibilityV2);
@ -41,6 +42,8 @@ function TrialChoice() {
const homeConfig = useSelector(selectors.selectHome);
const handlePriceItem = () => {
metricService.reachGoal(EGoals.SELECT_TRIAL, [EMetrics.YANDEX, EMetrics.KLAVIYO]);
metricService.reachGoal(EGoals.AURA_SELECT_TRIAL, [EMetrics.KLAVIYO]);
setIsDisabled(false);
};
@ -56,6 +59,11 @@ function TrialChoice() {
navigate(routes.client.compatibilityV2TrialPayment());
};
useEffect(() => {
metricService.reachGoal(EGoals.TRIAL_CHOICE_PAGE_VISIT, [EMetrics.YANDEX, EMetrics.KLAVIYO]);
metricService.reachGoal(EGoals.AURA_TRIAL_CHOICE_PAGE_VISIT, [EMetrics.KLAVIYO]);
}, []);
return (
<div className={styles.container}>
{!isLoading && (

7
src/components/CompatibilityV2/pages/TrialPayment/index.tsx
View File

@ -21,6 +21,8 @@ import { selectors } from "@/store";
import { getZodiacSignByDate } from "@/services/zodiac-sign";
import { useDynamicSize } from "@/hooks/useDynamicSize";
import { formatDateToLocale } from "@/locales/localFormats";
import { useEffect } from "react";
import metricService, { EGoals, EMetrics } from "@/services/metric/metricService";
function TrialPayment() {
const { height, elementRef } = useDynamicSize<HTMLDivElement>({});
@ -42,6 +44,11 @@ function TrialPayment() {
navigate(routes.client.compatibilityV2Payment());
};
useEffect(() => {
metricService.reachGoal(EGoals.TRIAL_PAYMENT_PAGE_VISIT, [EMetrics.YANDEX, EMetrics.KLAVIYO]);
metricService.reachGoal(EGoals.AURA_TRIAL_PAYMENT_PAGE_VISIT, [EMetrics.KLAVIYO]);
}, []);
return (
<>
<Title className={styles["information-title"]}>

14
src/components/EmailEnterPage/index.tsx
View File

@ -15,10 +15,6 @@ import { useAuthentication } from "@/hooks/authentication/use-authentication";
import { ESourceAuthorization } from "@/api/resources/User";
import { EPlacementKeys, IPaywallProduct } from "@/api/resources/Paywall";
import { usePaywall } from "@/hooks/paywall/usePaywall";
import metricService, {
EGoals,
EMetrics,
} from "@/services/metric/metricService";
interface IEmailEnterPage {
redirectUrl?: string;
@ -92,11 +88,11 @@ function EmailEnterPage({
const handleClick = () => {
authorize();
metricService.reachGoal(EGoals.ENTERED_EMAIL, [
EMetrics.KLAVIYO,
EMetrics.YANDEX,
EMetrics.FACEBOOK,
]);
// metricService.reachGoal(EGoals.ENTERED_EMAIL, [
// EMetrics.KLAVIYO,
// EMetrics.YANDEX,
// EMetrics.FACEBOOK,
// ]);
};
const authorize = async () => {

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

@ -31,6 +31,7 @@ import { useDynamicSize } from "@/hooks/useDynamicSize";
import { PDFKey } from "@/api/resources/UserPDF";
import Loader, { LoaderColor } from "../Loader";
import { sleep } from "@/services/date";
import metricService, { EGoals, EMetrics } from "@/services/metric/metricService";
// import WallpapersZodiacSign from "../WallpapersZodiacSign";
// import ThermalSlider from "../ThermalSlider";
// import MoonPhaseTracker from "../MoonPhaseTracker";
@ -338,9 +339,9 @@ function HomePage(): JSX.Element {
ref={buttonsRef}
className={`${styles["content__buttons"]}
`}
// ${
// isShowNavbar ? styles["content__buttons--hidden"] : ""
// }
// ${
// isShowNavbar ? styles["content__buttons--hidden"] : ""
// }
>
<Onboarding
targetRef={buttonsRef.current as HTMLDivElement}
@ -354,12 +355,14 @@ function HomePage(): JSX.Element {
{PDFPalmistry?.status !== "not_allowed" && (
<BlurringSubstrate
style={{ color: "#fff" }}
className={`${styles["content__buttons-item"]} ${
getIsPDFLoading(PDFPalmistry, isPendingPalmistryPDF)
? styles["content__buttons-loading"]
: ""
}`}
clickHandler={() => handlePDF(PDFPalmistry)}
className={`${styles["content__buttons-item"]} ${getIsPDFLoading(PDFPalmistry, isPendingPalmistryPDF)
? styles["content__buttons-loading"]
: ""
}`}
clickHandler={() => {
metricService.reachGoal(EGoals.PDF_PALM_OPEN, [EMetrics.YANDEX, EMetrics.KLAVIYO]);
handlePDF(PDFPalmistry)
}}
>
<>
{getIsPDFLoading(PDFPalmistry, isPendingPalmistryPDF) && (
@ -375,23 +378,25 @@ function HomePage(): JSX.Element {
{PDFCompatibility?.status !== "not_allowed" && (
<BlurringSubstrate
style={{ color: "#fff" }}
className={`${styles["content__buttons-item"]} ${
getIsPDFLoading(PDFCompatibility, isPendingCompatibilityPDF)
? styles["content__buttons-loading"]
: ""
}`}
clickHandler={() => handlePDF(PDFCompatibility)}
className={`${styles["content__buttons-item"]} ${getIsPDFLoading(PDFCompatibility, isPendingCompatibilityPDF)
? styles["content__buttons-loading"]
: ""
}`}
clickHandler={() => {
metricService.reachGoal(EGoals.PDF_COMP_OPEN, [EMetrics.YANDEX, EMetrics.KLAVIYO]);
handlePDF(PDFCompatibility)
}}
>
<>
{getIsPDFLoading(
PDFCompatibility,
isPendingCompatibilityPDF
) && (
<Loader
color={LoaderColor.White}
className={styles["buttons-loader"]}
/>
)}
<Loader
color={LoaderColor.White}
className={styles["buttons-loader"]}
/>
)}
<strong>Your Personalized READING</strong>
</>
</BlurringSubstrate>

23
src/components/PalmistryV1/components/PaymentModalV1/PaymentForm/index.tsx
View File

@ -9,7 +9,6 @@ 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';
@ -64,18 +63,18 @@ function PaymentForm({
const onPaymentSuccess = () => {
setIsPaymentSuccess(true);
metricService.reachGoal(EGoals.PAYMENT_SUCCESS);
metricService.reachGoal(EGoals.PAYMENT_SUCCESS_PALMISTRY, [
EMetrics.YANDEX,
]);
if (activeProduct) {
metricService.reachGoal(EGoals.PURCHASE, [EMetrics.FACEBOOK], {
currency: "USD",
value: ((activeProduct.trialPrice || 100) / 100).toFixed(2),
});
}
// metricService.reachGoal(EGoals.PAYMENT_SUCCESS);
// metricService.reachGoal(EGoals.PAYMENT_SUCCESS_PALMISTRY, [
// EMetrics.YANDEX,
// ]);
// if (activeProduct) {
// metricService.reachGoal(EGoals.PURCHASE, [EMetrics.FACEBOOK], {
// currency: "USD",
// value: ((activeProduct.trialPrice || 100) / 100).toFixed(2),
// });
// }
setTimeout(() => {
navigate(routes.client.skipTrial());
navigate(routes.client.palmistryV1SkipTrial());
}, 1500);
}

14
src/components/PalmistryV1/pages/Camera/index.tsx
View File

@ -7,13 +7,14 @@ import { useDispatch } from "react-redux";
import { actions } from "@/store";
import { useNavigate } from "react-router-dom";
import routes from "@/routes";
import { useState } from "react";
import { useEffect, 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";
import metricService, { EGoals, EMetrics } from "@/services/metric/metricService";
const isProduction = import.meta.env.MODE === "production";
@ -32,6 +33,7 @@ function Camera() {
const [toastVisible, setToastVisible] = useState<EToastVisible | null>(null);
const handleNext = () => {
metricService.reachGoal(EGoals.CAMERA_SUCCESS, [EMetrics.YANDEX, EMetrics.KLAVIYO]);
navigate(routes.client.palmistryV1ScannedPhoto());
};
@ -152,6 +154,16 @@ function Camera() {
reader.readAsDataURL(event.target.files[0]);
};
useEffect(() => {
metricService.reachGoal(EGoals.CAMERA_OPEN, [EMetrics.YANDEX, EMetrics.KLAVIYO]);
}, []);
useEffect(() => {
if (toastVisible === EToastVisible.try_again) {
metricService.reachGoal(EGoals.CAMERA_ERROR, [EMetrics.YANDEX, EMetrics.KLAVIYO]);
}
}, [toastVisible]);
return (
<>
{!isProduction && uploadMenuModalIsOpen && (

18
src/components/PalmistryV1/pages/Email/index.tsx
View File

@ -13,9 +13,7 @@ import Loader, { LoaderColor } from "@/components/Loader";
import Policy from "@/components/Policy";
import { useTranslations } from "@/hooks/translations";
import { ELocalesPlacement } from "@/locales";
import metricService, {
EGoals,
EMetrics,
import {
useMetricABFlags,
} from "@/services/metric/metricService";
import NameInput from "@/components/pages/ABDesign/v1/pages/EmailEnterPage/NameInput";
@ -82,13 +80,13 @@ function Email() {
},
ESourceAuthorization["aura.palmistry.new"]
);
metricService.reachGoal(EGoals.LEAD, [EMetrics.FACEBOOK]);
metricService.reachGoal(EGoals.ENTERED_EMAIL, [
EMetrics.KLAVIYO,
EMetrics.YANDEX,
EMetrics.FACEBOOK,
]);
metricService.reachGoal(EGoals.ENTERED_EMAIL_PALMISTRY, [EMetrics.YANDEX]);
// metricService.reachGoal(EGoals.LEAD, [EMetrics.FACEBOOK]);
// metricService.reachGoal(EGoals.ENTERED_EMAIL, [
// EMetrics.KLAVIYO,
// EMetrics.YANDEX,
// EMetrics.FACEBOOK,
// ]);
// metricService.reachGoal(EGoals.ENTERED_EMAIL_PALMISTRY, [EMetrics.YANDEX]);
await authorization(email, ESourceAuthorization["aura.palmistry.new"]);
};

28
src/components/PalmistryV1/pages/Payment/index.tsx
View File

@ -13,10 +13,10 @@ import { EPlacementKeys } from "@/api/resources/Paywall";
import { useNavigate } from "react-router-dom";
import { useEffect, useState } from "react";
import routes from "@/routes";
import metricService, { EGoals, EMetrics } from "@/services/metric/metricService";
import PaymentModal from "@/components/Payment/PaymentModal";
import PaymentForm from "@/components/Payment/nmi/PaymentForm";
import Toast from "@/components/pages/ABDesign/v1/components/Toast";
import metricService, { EGoals, EMetrics } from "@/services/metric/metricService";
const placementKey = EPlacementKeys['aura.placement.palmistry.redesign'];
@ -41,22 +41,28 @@ function Payment() {
const onPaymentError = (error?: string) => {
setIsPaymentError(true);
if (error === "Product not found") {
navigate(routes.client.palmistryV1TrialChoice());
return navigate(routes.client.palmistryV1TrialChoice());
}
metricService.reachGoal(EGoals.PAYMENT_ERROR, [EMetrics.YANDEX, EMetrics.KLAVIYO]);
}
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),
});
}
// metricService.reachGoal(EGoals.PAYMENT_SUCCESS);
// if (activeProductFromStore) {
// metricService.reachGoal(EGoals.PURCHASE, [EMetrics.FACEBOOK], {
// currency: "USD",
// value: ((activeProductFromStore.trialPrice || 100) / 100).toFixed(2),
// });
// }
metricService.reachGoal(EGoals.PAYMENT_SUCCESS, [EMetrics.YANDEX, EMetrics.KLAVIYO]);
metricService.reachGoal(EGoals.PURCHASE, [EMetrics.FACEBOOK], {
currency: "USD",
value: ((activeProductFromStore?.trialPrice || 100) / 100).toFixed(2),
});
setTimeout(() => {
navigate(routes.client.skipTrial());
navigate(routes.client.palmistryV1SkipTrial());
}, 1500);
}
@ -67,6 +73,8 @@ function Payment() {
const showModal = () => {
// dispatch(actions.compatibilityV2.setIsShowPaymentModalV1(true));
metricService.reachGoal(EGoals.PAYMENT_METHODS_OPENED, [EMetrics.YANDEX, EMetrics.KLAVIYO]);
metricService.reachGoal(EGoals.AURA_PAYMENT_METHODS_OPENED, [EMetrics.KLAVIYO]);
setIsPaymentModalOpen(true);
};

6
src/components/PalmistryV1/pages/SaveOff/index.tsx
View File

@ -10,6 +10,8 @@ import { usePaywall } from "@/hooks/paywall/usePaywall";
import { EPlacementKeys } from "@/api/resources/Paywall";
import { addCurrency, ELocalesPlacement } from "@/locales";
import { useTranslations } from "@/hooks/translations";
import { useEffect } from "react";
import metricService, { EGoals, EMetrics } from "@/services/metric/metricService";
const placementKey = EPlacementKeys["aura.placement.palmistry.secret.discount"]
@ -32,6 +34,10 @@ function SaveOff() {
navigate(routes.client.palmistryV1SecretDiscount());
}
useEffect(() => {
metricService.reachGoal(EGoals.DISCOUNT_PAGE_VISIT, [EMetrics.YANDEX, EMetrics.KLAVIYO]);
}, []);
return (
<>
<Blob className={styles.blob} />

9
src/components/PalmistryV1/pages/SecretDiscount/index.tsx
View File

@ -17,6 +17,7 @@ import { useDynamicSize } from "@/hooks/useDynamicSize";
import Header from "../../components/Header";
import PaymentModal from "@/components/Payment/PaymentModal";
import PaymentForm from "@/components/Payment/nmi/PaymentForm";
import metricService, { EGoals, EMetrics } from "@/services/metric/metricService";
// import { getFormattedPrice } from "@/utils/price.utils";
const placementKey = EPlacementKeys["aura.placement.palmistry.secret.discount"]
@ -60,6 +61,11 @@ function SecretDiscount() {
// });
const onPaymentSuccess = () => {
metricService.reachGoal(EGoals.PAYMENT_SUCCESS, [EMetrics.YANDEX, EMetrics.KLAVIYO]);
metricService.reachGoal(EGoals.PURCHASE, [EMetrics.FACEBOOK], {
currency: "USD",
value: ((activeProduct?.trialPrice || 100) / 100).toFixed(2),
});
return navigate(routes.client.paymentSuccess())
}
@ -68,6 +74,7 @@ function SecretDiscount() {
// }
const onPaymentError = () => {
metricService.reachGoal(EGoals.PAYMENT_ERROR, [EMetrics.YANDEX, EMetrics.KLAVIYO]);
return navigate(routes.client.paymentFail())
}
@ -76,6 +83,8 @@ function SecretDiscount() {
}
const openPaymentModal = () => {
metricService.reachGoal(EGoals.PAYMENT_METHODS_OPENED, [EMetrics.YANDEX, EMetrics.KLAVIYO]);
metricService.reachGoal(EGoals.AURA_PAYMENT_METHODS_OPENED, [EMetrics.KLAVIYO]);
setIsPaymentModalOpen(true);
// showCreditCardForm();
};

10
src/components/PalmistryV1/pages/TrialChoice/index.tsx
View File

@ -11,7 +11,7 @@ import {
getDefaultLocaleByLanguage,
language,
} from "@/locales";
import { useState } from "react";
import { useEffect, useState } from "react";
import Button from "../../components/Button";
import routes from "@/routes";
import { useNavigate } from "react-router-dom";
@ -19,6 +19,7 @@ import Loader from "@/components/Loader";
import { useTranslations } from "@/hooks/translations";
// import { useMetricABFlags } from "@/services/metric/metricService";
import { getLongText } from "./abText";
import metricService, { EGoals, EMetrics } from "@/services/metric/metricService";
function TrialChoice() {
const { translate } = useTranslations(ELocalesPlacement.PalmistryV1);
@ -41,6 +42,8 @@ function TrialChoice() {
const homeConfig = useSelector(selectors.selectHome);
const handlePriceItem = () => {
metricService.reachGoal(EGoals.SELECT_TRIAL, [EMetrics.YANDEX, EMetrics.KLAVIYO]);
metricService.reachGoal(EGoals.AURA_SELECT_TRIAL, [EMetrics.KLAVIYO]);
setIsDisabled(false);
};
@ -56,6 +59,11 @@ function TrialChoice() {
navigate(routes.client.palmistryV1TrialPayment());
};
useEffect(() => {
metricService.reachGoal(EGoals.TRIAL_CHOICE_PAGE_VISIT, [EMetrics.YANDEX, EMetrics.KLAVIYO]);
metricService.reachGoal(EGoals.AURA_TRIAL_CHOICE_PAGE_VISIT, [EMetrics.KLAVIYO]);
}, []);
return (
<div className={styles.container}>
{!isLoading && (

7
src/components/PalmistryV1/pages/TrialPayment/index.tsx
View File

@ -15,6 +15,8 @@ import { useTranslations } from "@/hooks/translations";
import { ELocalesPlacement } from "@/locales";
import { usePreloadImages } from "@/hooks/preload/images";
import useTimer from "@/hooks/palmistry/use-timer";
import { useEffect } from "react";
import metricService, { EGoals, EMetrics } from "@/services/metric/metricService";
function TrialPayment() {
const { translate } = useTranslations(ELocalesPlacement.PalmistryV1);
@ -28,6 +30,11 @@ function TrialPayment() {
navigate(routes.client.palmistryV1Payment());
};
useEffect(() => {
metricService.reachGoal(EGoals.TRIAL_PAYMENT_PAGE_VISIT, [EMetrics.YANDEX, EMetrics.KLAVIYO]);
metricService.reachGoal(EGoals.AURA_TRIAL_PAYMENT_PAGE_VISIT, [EMetrics.KLAVIYO]);
}, []);
return (
<>
<AppNumberOne />

4
src/components/Payment/nmi/CheckoutForm/index.tsx
View File

@ -48,7 +48,7 @@ export default function CheckoutForm({
onError(error);
}
}, [error, onError]);
}, [error]);
useEffect(() => {
if (isModalClosed && onModalClosed) {
@ -60,7 +60,7 @@ export default function CheckoutForm({
if (isPaymentSuccess && onSuccess) {
onSuccess();
}
}, [isPaymentSuccess, onSuccess]);
}, [isPaymentSuccess]);
const handleSubmit = (e: React.FormEvent<HTMLFormElement> | React.MouseEvent<HTMLButtonElement>) => {
e.preventDefault();

14
src/components/PaymentPage/results/SuccessPage/index.tsx
View File

@ -7,10 +7,6 @@ import MainButton from "@/components/MainButton";
import { useDispatch, useSelector } from "react-redux";
import { actions, selectors } from "@/store";
import { useEffect } from "react";
import metricService, {
EGoals,
EMetrics,
} from "@/services/metric/metricService";
import { ELocalesPlacement } from "@/locales";
function PaymentSuccessPage(): JSX.Element {
@ -25,11 +21,11 @@ function PaymentSuccessPage(): JSX.Element {
};
useEffect(() => {
metricService.reachGoal(EGoals.PAYMENT_SUCCESS);
metricService.reachGoal(EGoals.PURCHASE, [EMetrics.FACEBOOK], {
currency: "USD",
value: ((currentProduct?.trialPrice || 100) / 100).toFixed(2),
});
// metricService.reachGoal(EGoals.PAYMENT_SUCCESS);
// metricService.reachGoal(EGoals.PURCHASE, [EMetrics.FACEBOOK], {
// currency: "USD",
// value: ((currentProduct?.trialPrice || 100) / 100).toFixed(2),
// });
}, [currentProduct?.trialPrice]);
return (

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

@ -18,10 +18,6 @@ import { ESourceAuthorization } from "@/api/resources/User";
import { useAuthentication } from "@/hooks/authentication/use-authentication";
import { usePaywall } from "@/hooks/paywall/usePaywall";
import { EPlacementKeys, IPaywallProduct } from "@/api/resources/Paywall";
import metricService, {
EGoals,
EMetrics,
} from "@/services/metric/metricService";
import { ELottieKeys, useLottie } from "@/hooks/lottie/useLottie";
import { ELocalesPlacement } from "@/locales";
import { useSession } from "@/hooks/session/useSession";
@ -116,11 +112,11 @@ function EmailEnterPage({
);
}
authorize();
metricService.reachGoal(EGoals.ENTERED_EMAIL, [
EMetrics.KLAVIYO,
EMetrics.YANDEX,
EMetrics.FACEBOOK,
]);
// metricService.reachGoal(EGoals.ENTERED_EMAIL, [
// EMetrics.KLAVIYO,
// EMetrics.YANDEX,
// EMetrics.FACEBOOK,
// ]);
};
const authorize = async () => {

21
src/components/pages/ABDesign/v1/pages/Onboarding/index.tsx
View File

@ -12,6 +12,7 @@ import { useSelector } from "react-redux";
import { selectors } from "@/store";
import metricService, {
EGoals,
EMetrics,
useMetricABFlags,
} from "@/services/metric/metricService";
import { useTranslations } from "@/hooks/translations";
@ -44,6 +45,9 @@ function OnboardingPage() {
const path = searchParams.get("path");
const handleNext = useCallback(() => {
if (path === "compatibility") {
return navigate(routes.client.home());
}
if (path === "palmistry") {
return navigate(routes.client.home());
}
@ -98,8 +102,9 @@ function OnboardingPage() {
useEffect(() => {
progressInterval.current = setInterval(() => {
setProgress((prev) => {
if (prev === 99 && generatingVideo)
[metricService.reachGoal(EGoals.ROSE_LOADING_END)];
if (prev === 99 && generatingVideo) {
metricService.reachGoal(EGoals.ROSE_LOADING_END, [EMetrics.YANDEX, EMetrics.KLAVIYO]);
};
if (prev >= 100) return prev;
return prev + 1;
});
@ -110,7 +115,7 @@ function OnboardingPage() {
}, [generatingVideo, getProgressIntervalTiming]);
useEffect(() => {
metricService.reachGoal(EGoals.ROSE_LOADING_START);
metricService.reachGoal(EGoals.ROSE_LOADING_START, [EMetrics.YANDEX, EMetrics.KLAVIYO]);
}, []);
return (
@ -127,9 +132,8 @@ function OnboardingPage() {
)}
<footer className={styles.footer}>
<div
className={`${styles["progress-bar__text-container"]} ${
isLoadingEnd && styles.hide
}`}
className={`${styles["progress-bar__text-container"]} ${isLoadingEnd && styles.hide
}`}
>
<Title variant="h2" className={styles["progress-bar__title"]}>
{translate("/onboarding.loader_title")}
@ -137,9 +141,8 @@ function OnboardingPage() {
<p className={styles["progress-bar__percentage"]}>{progress}%</p>
</div>
<ProgressBarLine
containerClassName={`${styles["progress-bar__container"]} ${
isLoadingEnd && styles.hide
}`}
containerClassName={`${styles["progress-bar__container"]} ${isLoadingEnd && styles.hide
}`}
lineClassName={styles["progress-bar__line"]}
lineColor={"#3750A8"}
value={progress}

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

@ -124,7 +124,7 @@ function TrialChoicePage() {
}, [countUsers]);
const handlePriceItem = () => {
metricService.reachGoal(EGoals.AURA_SELECT_TRIAL);
metricService.reachGoal(EGoals.AURA_SELECT_TRIAL, [EMetrics.YANDEX, EMetrics.KLAVIYO]);
setIsDisabled(false);
};

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

@ -80,7 +80,7 @@ function TrialChoiceVideoPage() {
}, [countUsers]);
const handlePriceItem = () => {
metricService.reachGoal(EGoals.AURA_SELECT_TRIAL);
metricService.reachGoal(EGoals.AURA_SELECT_TRIAL, [EMetrics.YANDEX, EMetrics.KLAVIYO]);
setIsDisabled(false);
};
@ -176,8 +176,8 @@ function TrialChoiceVideoPage() {
style={
arrowLeft
? {
left: arrowLeft,
}
left: arrowLeft,
}
: {}
}
/>
@ -221,9 +221,8 @@ function TrialChoiceVideoPage() {
isActiveBlur={true}
>
<QuestionnaireGreenButton
className={`${styles.button} ${
isDisabled ? styles.disabled : ""
}`}
className={`${styles.button} ${isDisabled ? styles.disabled : ""
}`}
onClick={handleNext}
>
{getText("text.button.1", {

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

@ -3,10 +3,10 @@ import ReactPlayer from "react-player";
import styles from "./styles.module.css";
import Loader from "@/components/Loader";
import PlayButton from "../../../../ui/PlayButton";
import metricService, { EGoals } from "@/services/metric/metricService";
import PlayPauseButton from "../../../../ui/PlayPauseButton";
import { useDispatch, useSelector } from "react-redux";
import { actions, selectors } from "@/store";
import metricService, { EGoals, EMetrics } from "@/services/metric/metricService";
interface IPersonalVideoProps {
gender: string;
@ -47,19 +47,19 @@ const PersonalVideo = React.memo<IPersonalVideoProps>(
setIsStarted(true);
setIsError(false);
if (onVideoStart) onVideoStart();
metricService.reachGoal(EGoals.ROSE_VIDEO_PLAY_START);
metricService.reachGoal(EGoals.ROSE_VIDEO_PLAY_START, [EMetrics.YANDEX, EMetrics.KLAVIYO]);
};
const onEnded = () => {
metricService.reachGoal(EGoals.ROSE_VIDEO_PLAY_END);
metricService.reachGoal(EGoals.ROSE_VIDEO_PLAY_END, [EMetrics.YANDEX, EMetrics.KLAVIYO]);
};
const handlePlayPause = () => {
setIsPlaying(!isVideoPlaying);
if (isVideoPlaying)
metricService.reachGoal(EGoals.ROSE_VIDEO_PLAY_USER_PLAY);
metricService.reachGoal(EGoals.ROSE_VIDEO_PLAY_USER_PLAY, [EMetrics.YANDEX, EMetrics.KLAVIYO]);
if (!isVideoPlaying)
metricService.reachGoal(EGoals.ROSE_VIDEO_PLAY_USER_STOP);
metricService.reachGoal(EGoals.ROSE_VIDEO_PLAY_USER_STOP, [EMetrics.YANDEX, EMetrics.KLAVIYO]);
};
return (

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

@ -22,13 +22,10 @@ import BackgroundTopBlob from "../../ui/BackgroundTopBlob";
import { useDynamicSize } from "@/hooks/useDynamicSize";
import { EPlacementKeys } from "@/api/resources/Paywall";
import { usePaywall } from "@/hooks/paywall/usePaywall";
import metricService, {
EGoals,
EMetrics,
} from "@/services/metric/metricService";
import { useTranslations } from "@/hooks/translations";
import { ELocalesPlacement } from "@/locales";
import { usePayment } from "@/hooks/payment/nmi/usePayment";
import metricService, { EGoals, EMetrics } from "@/services/metric/metricService";
const placementKey = EPlacementKeys["aura.placement.redesign.main"]
@ -60,16 +57,16 @@ function TrialPaymentPage() {
const { subPlan } = useParams();
const {
error,
isPaymentSuccess,
showCreditCardForm,
isModalClosed
} = usePayment({
placementKey,
activeProduct: activeProduct || products[0],
paymentFormType: "lightbox"
});
const {
error,
isPaymentSuccess,
showCreditCardForm,
isModalClosed
} = usePayment({
placementKey,
activeProduct: activeProduct || products[0],
paymentFormType: "lightbox"
});
// const [isPaymentModalOpen, setIsPaymentModalOpen] = useState(false);
@ -157,7 +154,7 @@ function TrialPaymentPage() {
};
const openPaymentModal = () => {
metricService.reachGoal(EGoals.AURA_PAYMENT_METHODS_OPENED);
metricService.reachGoal(EGoals.AURA_PAYMENT_METHODS_OPENED, [EMetrics.YANDEX, EMetrics.KLAVIYO]);
// setIsPaymentModalOpen(true);
showCreditCardForm();
};

14
src/components/pages/Auth/index.tsx
View File

@ -11,10 +11,6 @@ import { actions, selectors } from "@/store";
import { usePaywall } from "@/hooks/paywall/usePaywall";
import { EPlacementKeys, IPaywallProduct } from "@/api/resources/Paywall";
import { ELottieKeys, useLottie } from "@/hooks/lottie/useLottie";
import metricService, {
EGoals,
EMetrics,
} from "@/services/metric/metricService";
import BackgroundTopBlob from "../ABDesign/v1/ui/BackgroundTopBlob";
import Title from "@/components/Title";
import EmailInput from "../ABDesign/v1/pages/EmailEnterPage/EmailInput";
@ -123,11 +119,11 @@ function Auth({ redirectUrl = routes.client.home() }: IAuthPage) {
const handleClick = async () => {
authorize();
metricService.reachGoal(EGoals.ENTERED_EMAIL, [
EMetrics.KLAVIYO,
EMetrics.YANDEX,
EMetrics.FACEBOOK,
]);
// metricService.reachGoal(EGoals.ENTERED_EMAIL, [
// EMetrics.KLAVIYO,
// EMetrics.YANDEX,
// EMetrics.FACEBOOK,
// ]);
};
const authorize = async () => {

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

@ -14,9 +14,12 @@ function GetInformationPartnerPage() {
const handleBack = () => {
if (path === "palmistry") {
return navigate(routes.client.skipTrial());
return navigate(routes.client.palmistryV1SkipTrial());
// return navigate(routes.client.addGuides());
}
if (path === "compatibility") {
return navigate(routes.client.compatibilityV2SkipTrial());
}
navigate(routes.client.addConsultationV1());
};
@ -26,6 +29,9 @@ function GetInformationPartnerPage() {
`${routes.client.palmistryOnboardingV1()}?path=palmistry`
);
}
if (path === "compatibility") {
return navigate(`${routes.client.palmistryOnboardingV1()}?path=compatibility`);
}
navigate(routes.client.home());
};

3
src/components/pages/Mike/v1/pages/EmailEnterPage/index.tsx
View File

@ -12,7 +12,6 @@ import { ESourceAuthorization } from "@/api/resources/User";
import { useAuthentication } from "@/hooks/authentication/use-authentication";
import { usePaywall } from "@/hooks/paywall/usePaywall";
import { EPlacementKeys, IPaywallProduct } from "@/api/resources/Paywall";
import metricService, {EGoals, EMetrics} from "@/services/metric/metricService";
import { ELottieKeys, useLottie } from "@/hooks/lottie/useLottie";
import ButtonBack from "../../components/ButtonBack";
import { Button } from "../../ui/Button";
@ -100,7 +99,7 @@ function EmailEnterPage({
const handleClick = () => {
authorize();
metricService.reachGoal(EGoals.ENTERED_EMAIL, [EMetrics.KLAVIYO, EMetrics.YANDEX, EMetrics.FACEBOOK]);
// metricService.reachGoal(EGoals.ENTERED_EMAIL, [EMetrics.KLAVIYO, EMetrics.YANDEX, EMetrics.FACEBOOK]);
};
const authorize = async () => {

4
src/components/pages/Mike/v1/pages/TrialPayment/index.tsx
View File

@ -10,7 +10,6 @@ import { Navigate, useNavigate, useParams } from "react-router-dom";
import { EPlacementKeys, IPaywallProduct } from "@/api/resources/Paywall";
import { usePaywall } from "@/hooks/paywall/usePaywall";
import routes from "@/routes";
import metricService, { EGoals } from "@/services/metric/metricService";
import Modal from "@/components/Modal";
import ButtonBack from "../../components/ButtonBack";
import { Message } from "../../components/Message";
@ -24,6 +23,7 @@ import PointsList from "../../components/PointsList";
import OftenAsk from "../../components/OftenAsk";
import PaymentModal from "@/components/PaymentModal";
import { useTranslations } from "@/hooks/translations";
import metricService, { EGoals, EMetrics } from "@/services/metric/metricService";
function TrialPaymentPage() {
const dispatch = useDispatch();
@ -90,7 +90,7 @@ function TrialPaymentPage() {
};
const openStripeModal = () => {
metricService.reachGoal(EGoals.AURA_PAYMENT_METHODS_OPENED);
metricService.reachGoal(EGoals.AURA_PAYMENT_METHODS_OPENED, [EMetrics.YANDEX, EMetrics.KLAVIYO]);
setIsOpenPaymentModal(true);
};

4
src/components/pages/SinglePaymentPage/ResultPayment/SuccessPaymentPage/index.tsx
View File

@ -5,7 +5,7 @@ import MainButton from "@/components/MainButton";
import { useNavigate } from "react-router-dom";
import routes from "@/routes";
import { useEffect } from "react";
import metricService, { EGoals } from "@/services/metric/metricService";
import metricService, { EGoals, EMetrics } from "@/services/metric/metricService";
function SuccessPaymentPage(): JSX.Element {
const { translate } = useTranslations();
@ -16,7 +16,7 @@ function SuccessPaymentPage(): JSX.Element {
: "The information has been sent to your email";
useEffect(() => {
metricService.reachGoal(EGoals.PAYMENT_SUCCESS);
metricService.reachGoal(EGoals.PAYMENT_SUCCESS, [EMetrics.YANDEX, EMetrics.KLAVIYO]);
}, []);
return (

4
src/components/pages/TrialChoice/index.tsx
View File

@ -10,7 +10,7 @@ import MainButton from "@/components/MainButton";
import { usePaywall } from "@/hooks/paywall/usePaywall";
import { EPlacementKeys } from "@/api/resources/Paywall";
import { getRandomArbitrary } from "@/services/random-value";
import metricService, { EGoals } from "@/services/metric/metricService";
import metricService, { EGoals, EMetrics } from "@/services/metric/metricService";
function TrialChoicePage() {
const dispatch = useDispatch();
@ -34,7 +34,7 @@ function TrialChoicePage() {
});
const handlePriceItem = () => {
metricService.reachGoal(EGoals.AURA_SELECT_TRIAL);
metricService.reachGoal(EGoals.AURA_SELECT_TRIAL, [EMetrics.YANDEX, EMetrics.KLAVIYO]);
setIsDisabled(false);
};

4
src/components/pages/TrialPayment/index.tsx
View File

@ -21,7 +21,7 @@ import { trialPaymentPointsList } from "@/data/pointsLists";
import { trialPaymentReviews } from "@/data/reviews";
import { usePaywall } from "@/hooks/paywall/usePaywall";
import { EPlacementKeys, IPaywallProduct } from "@/api/resources/Paywall";
import metricService, { EGoals } from "@/services/metric/metricService";
import metricService, { EGoals, EMetrics } from "@/services/metric/metricService";
function TrialPaymentPage() {
const dispatch = useDispatch();
@ -103,7 +103,7 @@ function TrialPaymentPage() {
};
const openStripeModal = () => {
metricService.reachGoal(EGoals.AURA_PAYMENT_METHODS_OPENED);
metricService.reachGoal(EGoals.AURA_PAYMENT_METHODS_OPENED, [EMetrics.YANDEX, EMetrics.KLAVIYO]);
setIsOpenPaymentModal(true);
};

17
src/components/palmistry/AdditionalPurchases/pages/SkipTrial/index.tsx
View File

@ -9,7 +9,7 @@ import { useCallback, useEffect, useState } from "react";
import { useApi } from "@/api";
import { useAuth } from "@/auth";
import { useNavigate } from "react-router-dom";
import routes from "@/routes";
import routes, { compatibilityV2Prefix } from "@/routes";
import { loadStripe, Stripe, StripeElementLocale } from "@stripe/stripe-js";
import { ResponseGet } from "@/api/resources/SinglePayment";
import { Elements } from "@stripe/react-stripe-js";
@ -17,9 +17,10 @@ import CheckoutForm from "@/components/PaymentPage/methods/CheckoutForm";
import { useSinglePayment } from "@/hooks/payment/useSinglePayment";
import { useTranslations } from "@/hooks/translations";
import ThankYouBanner from "../../components/ThankYouBanner";
import metricService, { EGoals, EMetrics } from "@/services/metric/metricService";
const currentProductKey = "skip.trial.subscription.aura";
const returnUrl = `${window.location.host}${routes.client.addConsultant()}`;
const returnUrl = `${window.location.host}${routes.client.getInformationPartner()}?path=palmistry`;
function SkipTrial() {
const { translate } = useTranslations(ELocalesPlacement.PalmistryV1);
@ -55,6 +56,9 @@ function SkipTrial() {
}, [checkProductPurchased, navigate, token]);
const handleNext = () => {
if (window.location.pathname.includes(compatibilityV2Prefix)) {
return navigate(`${routes.client.getInformationPartner()}?path=compatibility`);
}
navigate(`${routes.client.getInformationPartner()}?path=palmistry`);
}
@ -81,11 +85,13 @@ function SkipTrial() {
}, [stripePublicKey]);
const goPremiumBundle = () => {
metricService.reachGoal(EGoals.SKIP_TRIAL_NOT_SELECT, [EMetrics.YANDEX, EMetrics.KLAVIYO]);
handleNext();
};
const buy = async () => {
if (!user?.id || !product) return;
metricService.reachGoal(EGoals.SKIP_TRIAL_SELECT, [EMetrics.YANDEX, EMetrics.KLAVIYO]);
const { _id, key } = product;
const paymentInfo = {
@ -120,13 +126,18 @@ function SkipTrial() {
("payment" in response && response.payment.status === "paid") ||
("invoiceId" in response && response.invoiceId === "paid")
) {
goPremiumBundle();
handleNext();
metricService.reachGoal(EGoals.SKIP_TRIAL_SUCCESS, [EMetrics.YANDEX, EMetrics.KLAVIYO]);
return;
} else if ("paymentIntent" in response) {
setClientSecret(response.paymentIntent.data.client_secret);
setStripePublicKey(response.paymentIntent.data.public_key);
return;
}
metricService.reachGoal(EGoals.SKIP_TRIAL_ERROR, [EMetrics.YANDEX, EMetrics.KLAVIYO]);
} catch (error) {
console.log("Error: ", error);
metricService.reachGoal(EGoals.SKIP_TRIAL_ERROR, [EMetrics.YANDEX, EMetrics.KLAVIYO]);
} finally {
setIsLoading(false);
}

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

@ -14,11 +14,8 @@ import PaymentModalNew from "@/components/PaymentModalNew";
import { addCurrency, ELocalesPlacement } from "@/locales";
import { getPriceCentsToDollars } from "@/services/price";
import routes from "@/routes";
import metricService, {
EGoals,
EMetrics,
} from "@/services/metric/metricService";
import { useTranslations } from "@/hooks/translations";
import metricService, { EGoals, EMetrics } from "@/services/metric/metricService";
export default function PaymentScreen() {
const { translate } = useTranslations(ELocalesPlacement.PalmistryV0);
@ -36,16 +33,16 @@ export default function PaymentScreen() {
React.useEffect(() => {
if (subscriptionStatus === "subscribed") {
metricService.reachGoal(EGoals.PAYMENT_SUCCESS);
metricService.reachGoal(EGoals.PAYMENT_SUCCESS, [EMetrics.YANDEX, EMetrics.KLAVIYO]);
metricService.reachGoal(EGoals.PAYMENT_SUCCESS_PALMISTRY, [
EMetrics.YANDEX,
]);
if (activeProductFromStore) {
metricService.reachGoal(EGoals.PURCHASE, [EMetrics.FACEBOOK], {
currency: "USD",
value: ((activeProductFromStore.trialPrice || 100) / 100).toFixed(2),
});
}
// if (activeProductFromStore) {
// metricService.reachGoal(EGoals.PURCHASE, [EMetrics.FACEBOOK], {
// currency: "USD",
// value: ((activeProductFromStore.trialPrice || 100) / 100).toFixed(2),
// });
// }
setTimeout(() => {
// steps.goNext();
navigate(routes.client.skipTrial());
@ -301,11 +298,10 @@ export default function PaymentScreen() {
style={{ minHeight: `${height}px` }}
>
<div
className={`payment-screen__widget${
subscriptionStatus === "subscribed"
className={`payment-screen__widget${subscriptionStatus === "subscribed"
? " payment-screen__widget_success"
: ""
}`}
}`}
>
{subscriptionStatus !== "subscribed" && (
<PaymentModalNew

18
src/components/palmistry/step-email/step-email.tsx
View File

@ -9,10 +9,6 @@ import Title from "@/components/Title";
import Loader, { LoaderColor } from "@/components/Loader";
import { useAuthentication } from "@/hooks/authentication/use-authentication";
import { ESourceAuthorization } from "@/api/resources/User";
import metricService, {
EGoals,
EMetrics,
} from "@/services/metric/metricService";
import { useSession } from "@/hooks/session/useSession";
import { ELocalesPlacement } from "@/locales";
@ -76,13 +72,13 @@ export default function StepEmail() {
ESourceAuthorization["aura.palmistry"]
);
await authorization(email, ESourceAuthorization["aura.palmistry"]);
metricService.reachGoal(EGoals.ENTERED_EMAIL_PALMISTRY, [EMetrics.YANDEX]);
metricService.reachGoal(EGoals.ENTERED_EMAIL, [
EMetrics.KLAVIYO,
EMetrics.YANDEX,
EMetrics.FACEBOOK,
]);
metricService.reachGoal(EGoals.LEAD, [EMetrics.FACEBOOK]);
// metricService.reachGoal(EGoals.ENTERED_EMAIL_PALMISTRY, [EMetrics.YANDEX]);
// metricService.reachGoal(EGoals.ENTERED_EMAIL, [
// EMetrics.KLAVIYO,
// EMetrics.YANDEX,
// EMetrics.FACEBOOK,
// ]);
// metricService.reachGoal(EGoals.LEAD, [EMetrics.FACEBOOK]);
setIsAuth(true);
};

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

@ -4,7 +4,7 @@ import { useAuth } from "@/auth";
import { getClientTimezone } from "@/locales";
import { getDateAsString } from "@/services/date";
import { filterNullKeysOfObject } from "@/services/filter-object";
import metricService, { EGoals } from "@/services/metric/metricService";
import metricService, { EGoals, EMetrics } from "@/services/metric/metricService";
import { actions, selectors } from "@/store";
import moment from "moment";
import { useCallback, useMemo, useState } from "react";
@ -140,6 +140,8 @@ export const useAuthentication = () => {
message
}
}
metricService.reachGoal(EGoals.ENTERED_EMAIL, [EMetrics.YANDEX, EMetrics.KLAVIYO]);
metricService.reachGoal(EGoals.LEAD, [EMetrics.FACEBOOK]);
const { user } = await api.getUser({ token });
const { user: userMe } = await api.getMe({ token });
if (userId?.length) {
@ -167,6 +169,10 @@ export const useAuthentication = () => {
setError(null)
const payload = getAuthorizationPayload(email, source);
const { token, userId: userIdFromApi, generatingVideo, videoId, authCode } = await api.authorization(payload);
if (!!token) {
metricService.reachGoal(EGoals.ENTERED_EMAIL, [EMetrics.YANDEX, EMetrics.KLAVIYO]);
metricService.reachGoal(EGoals.LEAD, [EMetrics.FACEBOOK]);
}
const { user } = await api.getUser({ token });
const { user: userMe } = await api.getMe({ token });
const userId = userIdFromApi || userMe?._id;
@ -186,7 +192,7 @@ export const useAuthentication = () => {
}
dispatch(actions.personalVideo.updateStatus({ generatingVideo: generatingVideo || false, videoId: videoId || "" }));
if (generatingVideo) {
metricService.reachGoal(EGoals.ROSE_VIDEO_CREATION_START)
metricService.reachGoal(EGoals.ROSE_VIDEO_CREATION_START, [EMetrics.YANDEX, EMetrics.KLAVIYO]);
}
dispatch(actions.status.update("registred"));
} catch (error) {

4
src/hooks/personalVideo/usePersonalVideo.ts
View File

@ -1,5 +1,5 @@
import { useApi } from "@/api";
import metricService, { EGoals } from "@/services/metric/metricService";
import metricService, { EGoals, EMetrics } from "@/services/metric/metricService";
import { actions, selectors } from "@/store";
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
@ -44,7 +44,7 @@ export const usePersonalVideo = () => {
const video = await getTargetUserVideo();
if (!video) return setIsVideoReady(true);
if (video.videoUrl.length) {
metricService.reachGoal(EGoals.ROSE_VIDEO_CREATED)
metricService.reachGoal(EGoals.ROSE_VIDEO_CREATED, [EMetrics.YANDEX, EMetrics.KLAVIYO]);
dispatch(actions.personalVideo.updateUrl(video.videoUrl));
return setIsVideoReady(true);
}

2
src/init.tsx
View File

@ -88,7 +88,7 @@ const init = async () => {
return (
<React.Fragment>
<HeadData />
{isProduction && <HeadData />}
<I18nextProvider i18n={i18nextInstance}>
<Provider store={store}>
<BrowserRouter>

23
src/routerComponents/Compatibility/v2/index.tsx
View File

@ -37,6 +37,11 @@ import PalmsInformationPartner from "@/components/CompatibilityV2/pages/PalmsInf
import DateEvent from "@/components/CompatibilityV2/pages/DateEvent";
import RomanticGestures from "@/components/CompatibilityV2/pages/RomanticGestures";
import CheckingPhone from "@/components/CompatibilityV2/pages/CheckingPhone";
import { PrivateOutlet } from "@/components/App";
import AdditionalPurchasesPalmistry from "@/components/palmistry/AdditionalPurchases";
import SkipTrial from "@/components/palmistry/AdditionalPurchases/pages/SkipTrial";
import AddConsultant from "@/components/palmistry/AdditionalPurchases/pages/AddConsultant";
import AddGuides from "@/components/palmistry/AdditionalPurchases/pages/AddGuides";
const removePrefix = (path: string) => path.replace(compatibilityV2Prefix, "");
@ -49,6 +54,22 @@ function CompatibilityV2Routes() {
return (
<Routes>
<Route element={<PrivateOutlet />}>
<Route element={<AdditionalPurchasesPalmistry />}>
<Route
path={removePrefix(routes.client.compatibilityV2SkipTrial())}
element={<SkipTrial />}
/>
<Route
path={removePrefix(routes.client.compatibilityV2AddConsultant())}
element={<AddConsultant />}
/>
<Route
path={removePrefix(routes.client.compatibilityV2AddGuides())}
element={<AddGuides />}
/>
</Route>
</Route>
<Route
path={removePrefix(routes.client.compatibilityV2Onboarding())}
element={<OnboardingPage />}
@ -61,7 +82,7 @@ function CompatibilityV2Routes() {
<Route
element={
<CheckSubscriptionOutlet
subscribedReturnUrl={routes.client.skipTrial()}
subscribedReturnUrl={routes.client.compatibilityV2SkipTrial()}
/>
}
>

23
src/routerComponents/Palmistry/v1/index.tsx
View File

@ -31,6 +31,11 @@ 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";
import { PrivateOutlet } from "@/components/App";
import AdditionalPurchasesPalmistry from "@/components/palmistry/AdditionalPurchases";
import SkipTrial from "@/components/palmistry/AdditionalPurchases/pages/SkipTrial";
import AddConsultant from "@/components/palmistry/AdditionalPurchases/pages/AddConsultant";
import AddGuides from "@/components/palmistry/AdditionalPurchases/pages/AddGuides";
const removePrefix = (path: string) => path.replace(palmistryV1Prefix, "");
@ -43,6 +48,22 @@ function PalmistryV1Routes() {
return (
<Routes>
<Route element={<PrivateOutlet />}>
<Route element={<AdditionalPurchasesPalmistry />}>
<Route
path={removePrefix(routes.client.palmistryV1SkipTrial())}
element={<SkipTrial />}
/>
<Route
path={removePrefix(routes.client.palmistryV1AddConsultant())}
element={<AddConsultant />}
/>
<Route
path={removePrefix(routes.client.palmistryV1AddGuides())}
element={<AddGuides />}
/>
</Route>
</Route>
<Route
path={removePrefix(routes.client.palmistryOnboardingV1())}
element={<OnboardingPage />}
@ -55,7 +76,7 @@ function PalmistryV1Routes() {
<Route
element={
<CheckSubscriptionOutlet
subscribedReturnUrl={routes.client.skipTrial()}
subscribedReturnUrl={routes.client.palmistryV1SkipTrial()}
/>
}
>

12
src/routes.ts
View File

@ -130,11 +130,21 @@ const routes = {
unlimitedReadings: () => [host, "unlimited-readings"].join("/"),
addConsultation: () => [host, "add-consultation"].join("/"),
// Additional Purchases Palmistry
// Additional Purchases Main
skipTrial: () => [host, "skip-trial"].join("/"),
addConsultant: () => [host, "add-consultant"].join("/"),
addGuides: () => [host, "add-guides"].join("/"),
// Additional Purchases PalmistryV1
palmistryV1SkipTrial: () => [palmistryV1Prefix, "skip-trial"].join("/"),
palmistryV1AddConsultant: () => [palmistryV1Prefix, "add-consultant"].join("/"),
palmistryV1AddGuides: () => [palmistryV1Prefix, "add-guides"].join("/"),
// Additional Purchases CompatibilityV2
compatibilityV2SkipTrial: () => [compatibilityV2Prefix, "skip-trial"].join("/"),
compatibilityV2AddConsultant: () => [compatibilityV2Prefix, "add-consultant"].join("/"),
compatibilityV2AddGuides: () => [compatibilityV2Prefix, "add-guides"].join("/"),
// Advisors
advisors: () => [host, "advisors"].join("/"),
advisorChat: (id: string) => [host, "advisors", id].join("/"),

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

@ -2,10 +2,48 @@ import Clarity from "@microsoft/clarity";
import { useExperiments } from "yandex-metrica-ab-react";
export enum EGoals {
// ENTERED_EMAIL = "EnteredEmail",
// LEAD = "Lead",
// PURCHASE = "Purchase",
// PAYMENT_SUCCESS = "PaymentSuccess",
// ROSE_VIDEO_CREATION_START = 'RoseVideoCreationStart',
// ROSE_LOADING_START = "RoseLoadingStart",
// ROSE_VIDEO_CREATED = "RoseVideoCreated",
// ROSE_LOADING_END = "RoseLoadingEnd",
// ROSE_VIDEO_PLAY_START = "RoseVideoPlayStart",
// ROSE_VIDEO_PLAY_END = "RoseVideoPlayEnd",
// ROSE_VIDEO_PLAY_USER_STOP = "RoseVideoPlayUserStop",
// ROSE_VIDEO_PLAY_USER_PLAY = "RoseVideoPlayUserPlay",
// AURA_PAYMENT_METHODS_OPENED = "AuraPaymentMethodsOpened",
// AURA_SELECT_TRIAL = "AuraSelectTrial",
// AURA_TRIAL_CHOICE_PAGE_VISIT = "AuraTrialChoicePageVisit",
// AURA_TRIAL_PAYMENT_PAGE_VISIT = "AuraTrialPaymentPageVisit",
PAYMENT_SUCCESS_PALMISTRY = "PaymentSuccessPalmistry",
ENTERED_EMAIL_PALMISTRY = "EnteredEmailPalmistry",
// new
CAMERA_OPEN = "CameraOpen",
CAMERA_ERROR = "CameraError",
CAMERA_SUCCESS = "CameraSuccess",
ENTERED_EMAIL = "EnteredEmail",
LEAD = "Lead",
TRIAL_CHOICE_PAGE_VISIT = "TrialChoicePageVisit",
SELECT_TRIAL = "SelectTrial",
TRIAL_PAYMENT_PAGE_VISIT = "TrialPaymentPageVisit",
PAYMENT_METHODS_OPENED = "PaymentMethodsOpened",
PAYMENT_SUCCESS = "PaymentSuccess",
PURCHASE = "Purchase",
PAYMENT_ERROR = "PaymentError",
SKIP_TRIAL_SELECT = "SkipTrialSelect",
SKIP_TRIAL_NOT_SELECT = "SkipTrialNotSelect",
SKIP_TRIAL_SUCCESS = "SkipTrialSuccess",
SKIP_TRIAL_ERROR = "SkipTrialError",
PDF_COMP_OPEN = "PDFCompOpen",
PDF_PALM_OPEN = "PDFPalmOpen",
DISCOUNT_PAGE_VISIT = "DiscountPageVisit",
AURA_SELECT_TRIAL = "AuraSelectTrial",
AURA_PAYMENT_METHODS_OPENED = "AuraPaymentMethodsOpened",
AURA_TRIAL_CHOICE_PAGE_VISIT = "AuraTrialChoicePageVisit",
AURA_TRIAL_PAYMENT_PAGE_VISIT = "AuraTrialPaymentPageVisit",
ROSE_VIDEO_CREATION_START = 'RoseVideoCreationStart',
ROSE_LOADING_START = "RoseLoadingStart",
ROSE_VIDEO_CREATED = "RoseVideoCreated",
@ -14,12 +52,10 @@ export enum EGoals {
ROSE_VIDEO_PLAY_END = "RoseVideoPlayEnd",
ROSE_VIDEO_PLAY_USER_STOP = "RoseVideoPlayUserStop",
ROSE_VIDEO_PLAY_USER_PLAY = "RoseVideoPlayUserPlay",
AURA_PAYMENT_METHODS_OPENED = "AuraPaymentMethodsOpened",
AURA_SELECT_TRIAL = "AuraSelectTrial",
AURA_TRIAL_CHOICE_PAGE_VISIT = "AuraTrialChoicePageVisit",
AURA_TRIAL_PAYMENT_PAGE_VISIT = "AuraTrialPaymentPageVisit",
PAYMENT_SUCCESS_PALMISTRY = "PaymentSuccessPalmistry",
ENTERED_EMAIL_PALMISTRY = "EnteredEmailPalmistry"
// FB
LEAD = "Lead",
PURCHASE = "Purchase",
}
export enum EFlags {
@ -46,6 +82,11 @@ const environments = import.meta.env
const metricCounterNumber = Number(environments.AURA_YANDEX_COUNTER_NUMBER)
const checkIsAvailableYandexMetric = () => {
const isProduction = environments.MODE === "production";
if (!isProduction) {
console.log("ANALYTIC IS NOT WORKING: Not production")
return false;
};
if (typeof window.ym !== "function") {
console.error("Yandex.Metric not found")
return false
@ -54,6 +95,11 @@ const checkIsAvailableYandexMetric = () => {
}
const checkIsAvailableYandexMetricAB = () => {
const isProduction = environments.MODE === "production";
if (!isProduction) {
console.log("ANALYTIC IS NOT WORKING: Not production")
return false;
};
if (typeof window.ymab !== "function") {
console.error("Yandex.Metric not found")
return false
@ -82,8 +128,10 @@ const userParams = (parameters: Partial<IUserParams>) => {
window.klaviyo.push(['identify', parameters]);
}
const reachGoal = (goal: EGoals, usingMetrics = [EMetrics.KLAVIYO, EMetrics.YANDEX], options?: unknown) => {
const reachGoal = (goal: EGoals, usingMetrics: EMetrics[], options?: unknown) => {
console.log("goal: ", goal);
const isProduction = environments.MODE === "production";
if (!isProduction) return console.log("ANALYTIC IS NOT WORKING: Not production");
if (usingMetrics.includes(EMetrics.YANDEX)) {
if (typeof window.ym !== "function") {

43
src/utils/Helmet/index.tsx
View File

@ -1,16 +1,21 @@
import { getDefaultLocaleByLanguage, language } from "@/locales";
import routes, { chatsPrefix } from "@/routes";
import { chatsPrefix, compatibilityV2Prefix, palmistryV1Prefix } from "@/routes";
import { Helmet } from "react-helmet";
const routesPalmistry = [
"/palmistry",
routes.client.skipTrial(),
routes.client.addConsultant(),
routes.client.addGuides(),
// "/palmistry",
// routes.client.skipTrial(),
// routes.client.addConsultant(),
// routes.client.addGuides(),
palmistryV1Prefix
];
const routesChats = [chatsPrefix];
const routesCompatibility2 = [
compatibilityV2Prefix
]
const isRouteInclude = (url: string, routes: string[]) => {
for (const route of routes) {
if (url.includes(route)) {
@ -24,7 +29,7 @@ const HeadData = () => {
const locale = getDefaultLocaleByLanguage(language);
const isPalmistry = isRouteInclude(window.location.pathname, routesPalmistry);
const isChats = isRouteInclude(window.location.pathname, routesChats);
const isCompatibility = !isPalmistry && !isChats
const isCompatibility = isRouteInclude(window.location.pathname, routesCompatibility2);
// Palmistry
const FBScriptPalmistry1 = `
@ -39,16 +44,16 @@ s.parentNode.insertBefore(t,s)}(window, document,'script',
fbq('init', '456294924152594');
fbq('track', 'PageView');`;
// const FBScriptPalmistry2 = `!function(f,b,e,v,n,t,s)
// {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
// n.callMethod.apply(n,arguments):n.queue.push(arguments)};
// if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
// n.queue=[];t=b.createElement(e);t.async=!0;
// t.src=v;s=b.getElementsByTagName(e)[0];
// s.parentNode.insertBefore(t,s)}(window, document,'script',
// 'https://connect.facebook.net/en_US/fbevents.js');
// fbq('init', '1046770063554120');
// fbq('track', 'PageView');`;
// const FBScriptPalmistry2 = `!function(f,b,e,v,n,t,s)
// {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
// n.callMethod.apply(n,arguments):n.queue.push(arguments)};
// if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
// n.queue=[];t=b.createElement(e);t.async=!0;
// t.src=v;s=b.getElementsByTagName(e)[0];
// s.parentNode.insertBefore(t,s)}(window, document,'script',
// 'https://connect.facebook.net/en_US/fbevents.js');
// fbq('init', '1046770063554120');
// fbq('track', 'PageView');`;
const FBScriptPalmistry3 = `
!function(f,b,e,v,n,t,s)
@ -194,13 +199,13 @@ fbq('track', 'PageView');`;
<script>{FBScriptPalmistryES1}</script>
)}
{isPalmistry && locale === "es-419" && (
<script>{FBScriptPalmistryES1}</script>
<script>{FBScriptPalmistryES1}</script>
)}
{isPalmistry && locale === "es" && (
<script>{FBScriptPalmistryES2}</script>
)}
{isPalmistry && locale === "es-419" && (
<script>{FBScriptPalmistryES2}</script>
<script>{FBScriptPalmistryES2}</script>
)}
{isPalmistry && locale?.includes("pt") && (
<script>{FBScriptPalmistryPT1}</script>
@ -219,7 +224,7 @@ fbq('track', 'PageView');`;
<script>{FBScriptCompatibilityES}</script>
)}
{isCompatibility && locale === "es-419" && (
<script>{FBScriptCompatibilityES}</script>
<script>{FBScriptCompatibilityES}</script>
)}
{isCompatibility && locale === "en" && (
<script>{FBScriptCompatibilityEN}</script>