diff --git a/src/components/App/index.tsx b/src/components/App/index.tsx index 73de9c0..f4255ee 100755 --- a/src/components/App/index.tsx +++ b/src/components/App/index.tsx @@ -300,7 +300,7 @@ function App(): JSX.Element { element={} /> - {/* Additional Purchases Palmistry */} + {/* Additional Purchases Main */} }> }> } /> @@ -311,7 +311,7 @@ function App(): JSX.Element { } /> - {/* Additional Purchases Palmistry End */} + {/* Additional Purchases Main End */} { 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); } diff --git a/src/components/CompatibilityV2/pages/BirthdatePartner/index.tsx b/src/components/CompatibilityV2/pages/BirthdatePartner/index.tsx index f382ae1..3e2c69f 100644 --- a/src/components/CompatibilityV2/pages/BirthdatePartner/index.tsx +++ b/src/components/CompatibilityV2/pages/BirthdatePartner/index.tsx @@ -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) => { diff --git a/src/components/CompatibilityV2/pages/Camera/index.tsx b/src/components/CompatibilityV2/pages/Camera/index.tsx index 8649f40..89d6761 100644 --- a/src/components/CompatibilityV2/pages/Camera/index.tsx +++ b/src/components/CompatibilityV2/pages/Camera/index.tsx @@ -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(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 && ( diff --git a/src/components/CompatibilityV2/pages/Email/index.tsx b/src/components/CompatibilityV2/pages/Email/index.tsx index 7026813..d92faad 100644 --- a/src/components/CompatibilityV2/pages/Email/index.tsx +++ b/src/components/CompatibilityV2/pages/Email/index.tsx @@ -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"]); }; diff --git a/src/components/CompatibilityV2/pages/Payment/index.tsx b/src/components/CompatibilityV2/pages/Payment/index.tsx index 7749d48..dd13431 100644 --- a/src/components/CompatibilityV2/pages/Payment/index.tsx +++ b/src/components/CompatibilityV2/pages/Payment/index.tsx @@ -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); }; diff --git a/src/components/CompatibilityV2/pages/SaveOff/index.tsx b/src/components/CompatibilityV2/pages/SaveOff/index.tsx index 67a4f59..0a9c251 100644 --- a/src/components/CompatibilityV2/pages/SaveOff/index.tsx +++ b/src/components/CompatibilityV2/pages/SaveOff/index.tsx @@ -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 ( <> diff --git a/src/components/CompatibilityV2/pages/SecretDiscount/index.tsx b/src/components/CompatibilityV2/pages/SecretDiscount/index.tsx index b7380d9..2b2ca2a 100644 --- a/src/components/CompatibilityV2/pages/SecretDiscount/index.tsx +++ b/src/components/CompatibilityV2/pages/SecretDiscount/index.tsx @@ -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(); }; diff --git a/src/components/CompatibilityV2/pages/TrialChoice/index.tsx b/src/components/CompatibilityV2/pages/TrialChoice/index.tsx index bb1ec05..73fa0fb 100644 --- a/src/components/CompatibilityV2/pages/TrialChoice/index.tsx +++ b/src/components/CompatibilityV2/pages/TrialChoice/index.tsx @@ -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 (
{!isLoading && ( diff --git a/src/components/CompatibilityV2/pages/TrialPayment/index.tsx b/src/components/CompatibilityV2/pages/TrialPayment/index.tsx index 6311153..3f571bc 100644 --- a/src/components/CompatibilityV2/pages/TrialPayment/index.tsx +++ b/src/components/CompatibilityV2/pages/TrialPayment/index.tsx @@ -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({}); @@ -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 ( <> diff --git a/src/components/EmailEnterPage/index.tsx b/src/components/EmailEnterPage/index.tsx index 8bce3be..572f672 100755 --- a/src/components/EmailEnterPage/index.tsx +++ b/src/components/EmailEnterPage/index.tsx @@ -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 () => { diff --git a/src/components/HomePage/index.tsx b/src/components/HomePage/index.tsx index 476465e..977f617 100644 --- a/src/components/HomePage/index.tsx +++ b/src/components/HomePage/index.tsx @@ -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> diff --git a/src/components/PalmistryV1/components/PaymentModalV1/PaymentForm/index.tsx b/src/components/PalmistryV1/components/PaymentModalV1/PaymentForm/index.tsx index 28194f9..1f6402d 100644 --- a/src/components/PalmistryV1/components/PaymentModalV1/PaymentForm/index.tsx +++ b/src/components/PalmistryV1/components/PaymentModalV1/PaymentForm/index.tsx @@ -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); } diff --git a/src/components/PalmistryV1/pages/Camera/index.tsx b/src/components/PalmistryV1/pages/Camera/index.tsx index a5c31c2..96256c0 100644 --- a/src/components/PalmistryV1/pages/Camera/index.tsx +++ b/src/components/PalmistryV1/pages/Camera/index.tsx @@ -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 && ( diff --git a/src/components/PalmistryV1/pages/Email/index.tsx b/src/components/PalmistryV1/pages/Email/index.tsx index 0fd042b..a072421 100644 --- a/src/components/PalmistryV1/pages/Email/index.tsx +++ b/src/components/PalmistryV1/pages/Email/index.tsx @@ -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"]); }; diff --git a/src/components/PalmistryV1/pages/Payment/index.tsx b/src/components/PalmistryV1/pages/Payment/index.tsx index 5735a5c..0c9c00f 100644 --- a/src/components/PalmistryV1/pages/Payment/index.tsx +++ b/src/components/PalmistryV1/pages/Payment/index.tsx @@ -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); }; diff --git a/src/components/PalmistryV1/pages/SaveOff/index.tsx b/src/components/PalmistryV1/pages/SaveOff/index.tsx index 11cae47..3572447 100644 --- a/src/components/PalmistryV1/pages/SaveOff/index.tsx +++ b/src/components/PalmistryV1/pages/SaveOff/index.tsx @@ -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} /> diff --git a/src/components/PalmistryV1/pages/SecretDiscount/index.tsx b/src/components/PalmistryV1/pages/SecretDiscount/index.tsx index 365f2a5..efcac70 100644 --- a/src/components/PalmistryV1/pages/SecretDiscount/index.tsx +++ b/src/components/PalmistryV1/pages/SecretDiscount/index.tsx @@ -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(); }; diff --git a/src/components/PalmistryV1/pages/TrialChoice/index.tsx b/src/components/PalmistryV1/pages/TrialChoice/index.tsx index cd1527c..92411d4 100644 --- a/src/components/PalmistryV1/pages/TrialChoice/index.tsx +++ b/src/components/PalmistryV1/pages/TrialChoice/index.tsx @@ -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 && ( diff --git a/src/components/PalmistryV1/pages/TrialPayment/index.tsx b/src/components/PalmistryV1/pages/TrialPayment/index.tsx index fa430fc..5df25d0 100644 --- a/src/components/PalmistryV1/pages/TrialPayment/index.tsx +++ b/src/components/PalmistryV1/pages/TrialPayment/index.tsx @@ -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 /> diff --git a/src/components/Payment/nmi/CheckoutForm/index.tsx b/src/components/Payment/nmi/CheckoutForm/index.tsx index 1386b10..81c9a5f 100644 --- a/src/components/Payment/nmi/CheckoutForm/index.tsx +++ b/src/components/Payment/nmi/CheckoutForm/index.tsx @@ -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(); diff --git a/src/components/PaymentPage/results/SuccessPage/index.tsx b/src/components/PaymentPage/results/SuccessPage/index.tsx index f9c1dca..e6ad6d6 100644 --- a/src/components/PaymentPage/results/SuccessPage/index.tsx +++ b/src/components/PaymentPage/results/SuccessPage/index.tsx @@ -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 ( diff --git a/src/components/pages/ABDesign/v1/pages/EmailEnterPage/index.tsx b/src/components/pages/ABDesign/v1/pages/EmailEnterPage/index.tsx index 38fe7f9..57fb54e 100644 --- a/src/components/pages/ABDesign/v1/pages/EmailEnterPage/index.tsx +++ b/src/components/pages/ABDesign/v1/pages/EmailEnterPage/index.tsx @@ -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 () => { diff --git a/src/components/pages/ABDesign/v1/pages/Onboarding/index.tsx b/src/components/pages/ABDesign/v1/pages/Onboarding/index.tsx index 1ea6267..f778fa0 100644 --- a/src/components/pages/ABDesign/v1/pages/Onboarding/index.tsx +++ b/src/components/pages/ABDesign/v1/pages/Onboarding/index.tsx @@ -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} diff --git a/src/components/pages/ABDesign/v1/pages/TrialChoice/index.tsx b/src/components/pages/ABDesign/v1/pages/TrialChoice/index.tsx index f0950da..ef8bc26 100644 --- a/src/components/pages/ABDesign/v1/pages/TrialChoice/index.tsx +++ b/src/components/pages/ABDesign/v1/pages/TrialChoice/index.tsx @@ -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); }; diff --git a/src/components/pages/ABDesign/v1/pages/TrialChoiceVideo/index.tsx b/src/components/pages/ABDesign/v1/pages/TrialChoiceVideo/index.tsx index 19370e0..bf8d883 100644 --- a/src/components/pages/ABDesign/v1/pages/TrialChoiceVideo/index.tsx +++ b/src/components/pages/ABDesign/v1/pages/TrialChoiceVideo/index.tsx @@ -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", { diff --git a/src/components/pages/ABDesign/v1/pages/TrialPayment/components/PersonalVideo/index.tsx b/src/components/pages/ABDesign/v1/pages/TrialPayment/components/PersonalVideo/index.tsx index cc68ce9..c6492e6 100644 --- a/src/components/pages/ABDesign/v1/pages/TrialPayment/components/PersonalVideo/index.tsx +++ b/src/components/pages/ABDesign/v1/pages/TrialPayment/components/PersonalVideo/index.tsx @@ -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 ( diff --git a/src/components/pages/ABDesign/v1/pages/TrialPayment/index.tsx b/src/components/pages/ABDesign/v1/pages/TrialPayment/index.tsx index af18f9a..2a0e60c 100644 --- a/src/components/pages/ABDesign/v1/pages/TrialPayment/index.tsx +++ b/src/components/pages/ABDesign/v1/pages/TrialPayment/index.tsx @@ -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(); }; diff --git a/src/components/pages/Auth/index.tsx b/src/components/pages/Auth/index.tsx index dbc3d8d..1d9d1f6 100644 --- a/src/components/pages/Auth/index.tsx +++ b/src/components/pages/Auth/index.tsx @@ -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 () => { diff --git a/src/components/pages/GetInformationPartner/index.tsx b/src/components/pages/GetInformationPartner/index.tsx index 8244c5b..550bfb5 100644 --- a/src/components/pages/GetInformationPartner/index.tsx +++ b/src/components/pages/GetInformationPartner/index.tsx @@ -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()); }; diff --git a/src/components/pages/Mike/v1/pages/EmailEnterPage/index.tsx b/src/components/pages/Mike/v1/pages/EmailEnterPage/index.tsx index 5eaa535..6757952 100644 --- a/src/components/pages/Mike/v1/pages/EmailEnterPage/index.tsx +++ b/src/components/pages/Mike/v1/pages/EmailEnterPage/index.tsx @@ -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 () => { diff --git a/src/components/pages/Mike/v1/pages/TrialPayment/index.tsx b/src/components/pages/Mike/v1/pages/TrialPayment/index.tsx index de1ced9..f868188 100644 --- a/src/components/pages/Mike/v1/pages/TrialPayment/index.tsx +++ b/src/components/pages/Mike/v1/pages/TrialPayment/index.tsx @@ -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); }; diff --git a/src/components/pages/SinglePaymentPage/ResultPayment/SuccessPaymentPage/index.tsx b/src/components/pages/SinglePaymentPage/ResultPayment/SuccessPaymentPage/index.tsx index 849250b..8a3c023 100644 --- a/src/components/pages/SinglePaymentPage/ResultPayment/SuccessPaymentPage/index.tsx +++ b/src/components/pages/SinglePaymentPage/ResultPayment/SuccessPaymentPage/index.tsx @@ -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 ( diff --git a/src/components/pages/TrialChoice/index.tsx b/src/components/pages/TrialChoice/index.tsx index 7ae2575..7368324 100755 --- a/src/components/pages/TrialChoice/index.tsx +++ b/src/components/pages/TrialChoice/index.tsx @@ -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); }; diff --git a/src/components/pages/TrialPayment/index.tsx b/src/components/pages/TrialPayment/index.tsx index 48bf730..34f8ba5 100755 --- a/src/components/pages/TrialPayment/index.tsx +++ b/src/components/pages/TrialPayment/index.tsx @@ -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); }; diff --git a/src/components/palmistry/AdditionalPurchases/pages/SkipTrial/index.tsx b/src/components/palmistry/AdditionalPurchases/pages/SkipTrial/index.tsx index 8beb511..421eb35 100644 --- a/src/components/palmistry/AdditionalPurchases/pages/SkipTrial/index.tsx +++ b/src/components/palmistry/AdditionalPurchases/pages/SkipTrial/index.tsx @@ -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); } diff --git a/src/components/palmistry/payment-screen/payment-screen.tsx b/src/components/palmistry/payment-screen/payment-screen.tsx index cb165b1..9013bbd 100644 --- a/src/components/palmistry/payment-screen/payment-screen.tsx +++ b/src/components/palmistry/payment-screen/payment-screen.tsx @@ -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 diff --git a/src/components/palmistry/step-email/step-email.tsx b/src/components/palmistry/step-email/step-email.tsx index 98c12ca..c4150d6 100644 --- a/src/components/palmistry/step-email/step-email.tsx +++ b/src/components/palmistry/step-email/step-email.tsx @@ -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); }; diff --git a/src/hooks/authentication/use-authentication.ts b/src/hooks/authentication/use-authentication.ts index a4791e2..a377f5c 100644 --- a/src/hooks/authentication/use-authentication.ts +++ b/src/hooks/authentication/use-authentication.ts @@ -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) { diff --git a/src/hooks/personalVideo/usePersonalVideo.ts b/src/hooks/personalVideo/usePersonalVideo.ts index 7503aec..c6186dd 100644 --- a/src/hooks/personalVideo/usePersonalVideo.ts +++ b/src/hooks/personalVideo/usePersonalVideo.ts @@ -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); } diff --git a/src/init.tsx b/src/init.tsx index d4c82a8..51a3660 100755 --- a/src/init.tsx +++ b/src/init.tsx @@ -88,7 +88,7 @@ const init = async () => { return ( <React.Fragment> - <HeadData /> + {isProduction && <HeadData />} <I18nextProvider i18n={i18nextInstance}> <Provider store={store}> <BrowserRouter> diff --git a/src/routerComponents/Compatibility/v2/index.tsx b/src/routerComponents/Compatibility/v2/index.tsx index 6f563a9..ec5cb34 100644 --- a/src/routerComponents/Compatibility/v2/index.tsx +++ b/src/routerComponents/Compatibility/v2/index.tsx @@ -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()} /> } > diff --git a/src/routerComponents/Palmistry/v1/index.tsx b/src/routerComponents/Palmistry/v1/index.tsx index 3460d1c..fee2d5b 100644 --- a/src/routerComponents/Palmistry/v1/index.tsx +++ b/src/routerComponents/Palmistry/v1/index.tsx @@ -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()} /> } > diff --git a/src/routes.ts b/src/routes.ts index e9b62b0..7cddda8 100755 --- a/src/routes.ts +++ b/src/routes.ts @@ -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("/"), diff --git a/src/services/metric/metricService.ts b/src/services/metric/metricService.ts index 537325c..815ae77 100644 --- a/src/services/metric/metricService.ts +++ b/src/services/metric/metricService.ts @@ -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") { diff --git a/src/utils/Helmet/index.tsx b/src/utils/Helmet/index.tsx index 5204981..83f3c9c 100644 --- a/src/utils/Helmet/index.tsx +++ b/src/utils/Helmet/index.tsx @@ -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>