From b9553518e0e602daadfb92e1572f6f1b190c05fd Mon Sep 17 00:00:00 2001 From: Daniil Chemerkin Date: Wed, 17 Jul 2024 18:55:56 +0000 Subject: [PATCH] Develop --- src/components/App/index.tsx | 20 +++--- src/components/Navbar/index.tsx | 2 +- .../v1/components/Questionnaire/index.tsx | 10 ++- .../ABDesign/v1/data/stepsQuestionary.tsx | 62 +++++++++++++++++++ .../ABDesign/v1/pages/AlmostThere/index.tsx | 13 ++++ .../pages/ABDesign/v1/pages/Gender/index.tsx | 11 +++- .../ABDesign/v1/pages/GoalSetup/index.tsx | 8 +++ .../v1/pages/LoadingInRelationship/index.tsx | 29 +++++++++ src/data.tsx | 1 + src/hooks/preload/images.ts | 15 +++++ src/routes.ts | 2 +- 11 files changed, 159 insertions(+), 14 deletions(-) create mode 100644 src/hooks/preload/images.ts diff --git a/src/components/App/index.tsx b/src/components/App/index.tsx index 66ecc94..c59cef9 100755 --- a/src/components/App/index.tsx +++ b/src/components/App/index.tsx @@ -121,7 +121,7 @@ import LoadingPage from "../pages/LoadingPage"; import { EProductKeys, productUrls } from "@/data/products"; import SinglePaymentPage from "../pages/SinglePaymentPage"; import ABDesignV1Routes from "@/routerComponents/ABDesign/v1"; -import metricService, {EGoals} from "@/services/metric/metricService"; +import metricService, { EGoals } from "@/services/metric/metricService"; const isProduction = import.meta.env.MODE === "production"; @@ -164,13 +164,13 @@ function App(): JSX.Element { const birthPlace = user?.profile?.birthplace || birthPlaceFromStore; useEffect(() => { - if (location.pathname.includes("v1/trial-choice")) { - metricService.reachGoal(EGoals.AURA_TRIAL_CHOICE_PAGE_VISIT, true) - } else if (location.pathname.includes("v1/trial-payment")) { - metricService.reachGoal(EGoals.AURA_TRIAL_PAYMENT_PAGE_VISIT, true) - } - // metricService.initMetricAB() - metricService.hit() + if (location.pathname.includes("v1/trial-choice")) { + metricService.reachGoal(EGoals.AURA_TRIAL_CHOICE_PAGE_VISIT, true); + } else if (location.pathname.includes("v1/trial-payment")) { + metricService.reachGoal(EGoals.AURA_TRIAL_PAYMENT_PAGE_VISIT, true); + } + // metricService.initMetricAB() + metricService.hit(); }, [location]); useLayoutEffect(() => { @@ -287,7 +287,9 @@ function App(): JSX.Element { return ( - } /> + }> + } /> + }> } /> {/* Email - Pay - Email */} diff --git a/src/components/Navbar/index.tsx b/src/components/Navbar/index.tsx index 7c6b62f..a7a8368 100644 --- a/src/components/Navbar/index.tsx +++ b/src/components/Navbar/index.tsx @@ -21,7 +21,7 @@ function Navbar({ isOpen, closeMenu }: NavbarProps): JSX.Element { const handleLogout = () => { localStorage.removeItem('palmistry.firstUnpassedStep'); - navigate(routes.client.birthday()) + navigate(routes.client.genderV1()) logout() } diff --git a/src/components/pages/ABDesign/v1/components/Questionnaire/index.tsx b/src/components/pages/ABDesign/v1/components/Questionnaire/index.tsx index ceee7f6..361fe8f 100644 --- a/src/components/pages/ABDesign/v1/components/Questionnaire/index.tsx +++ b/src/components/pages/ABDesign/v1/components/Questionnaire/index.tsx @@ -14,7 +14,8 @@ import { stepsQuestionary } from "../../data/stepsQuestionary"; import Answer from "../../ui/Answer"; import Stepper from "../Stepper"; import { useLottie } from "@/hooks/lottie/useLottie"; -import {useMetricABFlags} from "@/services/metric/metricService.ts"; +import { useMetricABFlags } from "@/services/metric/metricService.ts"; +import { preloadImages } from "@/hooks/preload/images"; function QuestionnairePage(): JSX.Element { const { question, stepId } = useParams(); @@ -31,11 +32,16 @@ function QuestionnairePage(): JSX.Element { const { gender } = useSelector(selectors.selectQuestionnaire); const clickAnswerTimeOutRef = useRef(); const { flags } = useMetricABFlags(); - const aboutUsAnswersKey = flags?.aboutUsAnswers?.[0] + const aboutUsAnswersKey = flags?.aboutUsAnswers?.[0]; useLottie({ preloadKey: currentQuestion?.lottie?.preloadKey, }); + useEffect(() => { + if (currentQuestion?.preloadImages?.length) { + preloadImages(currentQuestion.preloadImages); + } + }, [currentQuestion]); useEffect(() => { const currentStepIndex = steps.findIndex((item) => item.id === stepId); diff --git a/src/components/pages/ABDesign/v1/data/stepsQuestionary.tsx b/src/components/pages/ABDesign/v1/data/stepsQuestionary.tsx index 1d96c35..f7be40c 100644 --- a/src/components/pages/ABDesign/v1/data/stepsQuestionary.tsx +++ b/src/components/pages/ABDesign/v1/data/stepsQuestionary.tsx @@ -21,6 +21,17 @@ export const stepsQuestionary: IStep[] = [ lottie: { preloadKey: ELottieKeys.goal, }, + preloadImages: [ + "/kiss.webp", + "/ring.webp", + "/thinking_face.webp", + "/star_struck.webp", + "/sparkles.webp", + "/woman-heart-man.webp", + "/hands_heart.webp", + "/two-hearts.webp", + "/broken_heart.webp", + ], answers: [ { id: "single", @@ -131,6 +142,11 @@ export const stepsQuestionary: IStep[] = [ { id: "parent", question: "Are you a parent?", + preloadImages: [ + "/hyperPersonalizedAstrology.webp", + "/birthdate-image-male.svg", + "/birthdate-image-female.svg", + ], answers: [ { id: "yes", @@ -171,12 +187,14 @@ export const stepsQuestionary: IStep[] = [ { id: "birthdate", question: "What's your date of birth?", + preloadImages: ["/single-zodiac-info.webp"], answersElement: , navigateToUrl: routes.client.singleZodiacInfoV1(), }, { id: "isBirthTime", question: "Do you know your time of birth?", + preloadImages: ["/hourglassV1.webp", "/birthPlace.webp"], answers: [ { id: "yes", @@ -211,6 +229,11 @@ export const stepsQuestionary: IStep[] = [ answersElement: , backgroundImage: "/birthPlace.webp", backgroundColor: "#0000004d", + preloadImages: [ + "/slightly_frowning_face.webp", + "/neutral_face.webp", + "/wink.webp", + ], textColor: { title: "#fff", description: "#fff", @@ -234,6 +257,7 @@ export const stepsQuestionary: IStep[] = [ question: "Do you relate to the statement below?", description: "“I really dislike being alone as much as I hate to admit it.”", + preloadImages: ["/DeWatermark3.webp"], answers: [ { id: "yes", @@ -308,6 +332,13 @@ export const stepsQuestionary: IStep[] = [ id: "tendToOverthink", question: "Do you tend to overthink?", backgroundImage: "/DeWatermark3.webp", + preloadImages: [ + "/bar_chart.webp", + "/scales.webp", + "/airplane.webp", + "/star_struck.webp", + "/flexed_biceps.webp", + ], answers: [ { id: "yes", @@ -327,6 +358,7 @@ export const stepsQuestionary: IStep[] = [ { id: "mostImportant", question: "What is most important to you?", + preloadImages: ["/DeWatermark2.webp"], answers: [ { id: "success", @@ -368,6 +400,13 @@ export const stepsQuestionary: IStep[] = [ { id: "emotionalControl", question: "Is emotional control tricky for you?", + preloadImages: [ + "/smiling_face_with_heart_eyes.webp", + "/pleading_face.webp", + "/face_with_raised_eyebrow.webp", + "/confused.webp", + "/smiling_face_with_smiling_eyes.webp", + ], answers: [ { id: "yes", @@ -557,6 +596,17 @@ export const stepsQuestionary: IStep[] = [ question: "Do you agree with the statement below?", description: "“My partner and I can talk about any issue together“", backgroundImage: "/lovely_bedroom.webp", + preloadImages: [ + "/cloud.webp", + "/down_arrow.webp", + "/down_arrow.webp", + "/woman_feeding_baby.webp", + "/anxious_face_with_sweat.webp", + "/family.webp", + "/jigsaw.webp", + "/hourglass.webp", + "/cross_mark.webp", + ], lottie: { preloadKey: ELottieKeys.umbrella, }, @@ -592,6 +642,7 @@ export const stepsQuestionary: IStep[] = [ id: "currentlyAffecting", question: "Are any of these factors currently affecting your relationship?", + preloadImages: ["/satisfied-yes.webp", "/satisfied-no.webp"], answersElement: , }, { @@ -631,6 +682,17 @@ export const stepsQuestionary: IStep[] = [ id: "satisfied", question: "Are you satisfied with how you and your partner communicate?", + preloadImages: [ + "/microscope.webp", + "/mountain.webp", + "/paperclip.webp", + "/blue_book.webp", + "/party_popper.webp", + "/scales.webp", + "/loudspeaker.webp", + "/shield.webp", + "/fearful_face.webp", + ], answers: [ { id: "yes", diff --git a/src/components/pages/ABDesign/v1/pages/AlmostThere/index.tsx b/src/components/pages/ABDesign/v1/pages/AlmostThere/index.tsx index 177df89..1fdef86 100644 --- a/src/components/pages/ABDesign/v1/pages/AlmostThere/index.tsx +++ b/src/components/pages/ABDesign/v1/pages/AlmostThere/index.tsx @@ -6,9 +6,22 @@ import routes from "@/routes"; import Header from "../../components/Header"; import { DotLottieReact } from "@lottiefiles/dotlottie-react"; import { ELottieKeys, useLottie } from "@/hooks/lottie/useLottie"; +import { usePreloadImages } from "@/hooks/preload/images"; function AlmostTherePage() { const navigate = useNavigate(); + usePreloadImages([ + "/raising_hands.webp", + "/fork_and_knife_with_plate.webp", + "/mountain.webp", + "/cityscape_at_dusk.webp", + "/national_park.webp", + "/parachute.webp", + "/microscope.webp", + "/paperclip.webp", + "/blue_book.webp", + "/party_popper.webp", + ]); const { animationData } = useLottie({ loadKey: ELottieKeys.magnifyingGlassAndPlanet, diff --git a/src/components/pages/ABDesign/v1/pages/Gender/index.tsx b/src/components/pages/ABDesign/v1/pages/Gender/index.tsx index e7c1041..c8748f7 100644 --- a/src/components/pages/ABDesign/v1/pages/Gender/index.tsx +++ b/src/components/pages/ABDesign/v1/pages/Gender/index.tsx @@ -15,6 +15,7 @@ import PrivacyPolicy from "../../components/PrivacyPolicy"; import Toast from "../../components/Toast"; import { DotLottieReact } from "@lottiefiles/dotlottie-react"; import { useMetricABFlags } from "@/services/metric/metricService"; +import { usePreloadImages } from "@/hooks/preload/images"; interface IGenderPageProps { productKey?: EProductKeys; @@ -31,7 +32,15 @@ function GenderPage({ productKey }: IGenderPageProps): JSX.Element { selectors.selectPrivacyPolicy ); const { flags } = useMetricABFlags(); - const isNextPageMentioned = flags?.isNextPageMentioned?.[0] + const isNextPageMentioned = flags?.isNextPageMentioned?.[0]; + + usePreloadImages([ + "/heart.webp", + "https://d2ecldjic51fgm.cloudfront.net/pub/assets/aura/emoji/twohearts-bc5e3e37.png", + "https://d2ecldjic51fgm.cloudfront.net/pub/assets/aura/emoji/ring-26f6592d.png", + "https://d2ecldjic51fgm.cloudfront.net/pub/assets/aura/emoji/brokenheart-9e2ba6fb.png", + "https://d2ecldjic51fgm.cloudfront.net/pub/assets/aura/emoji/thinkingface-aa0f3a72.png", + ]); useEffect(() => { const feature = location.pathname.replace("/v1/gender/", ""); diff --git a/src/components/pages/ABDesign/v1/pages/GoalSetup/index.tsx b/src/components/pages/ABDesign/v1/pages/GoalSetup/index.tsx index 69c008f..db4dea5 100644 --- a/src/components/pages/ABDesign/v1/pages/GoalSetup/index.tsx +++ b/src/components/pages/ABDesign/v1/pages/GoalSetup/index.tsx @@ -8,10 +8,18 @@ import BackgroundTopBlob from "../../ui/BackgroundTopBlob"; import Header from "../../components/Header"; import { DotLottieReact } from "@lottiefiles/dotlottie-react"; import { ELottieKeys, useLottie } from "@/hooks/lottie/useLottie"; +import { usePreloadImages } from "@/hooks/preload/images"; function GoalSetupPage() { const navigate = useNavigate(); const { width: pageWidth, elementRef } = useDynamicSize({}); + usePreloadImages([ + "/check_mark_button.webp", + "/cross_mark.webp", + "/man_student.webp", + "/face_with_monocle.webp", + "/slightly_smiling_face.webp", + ]); const { animationData } = useLottie({ loadKey: ELottieKeys.goal, diff --git a/src/components/pages/ABDesign/v1/pages/LoadingInRelationship/index.tsx b/src/components/pages/ABDesign/v1/pages/LoadingInRelationship/index.tsx index a18b976..b88bd18 100644 --- a/src/components/pages/ABDesign/v1/pages/LoadingInRelationship/index.tsx +++ b/src/components/pages/ABDesign/v1/pages/LoadingInRelationship/index.tsx @@ -12,6 +12,7 @@ import { useDynamicSize } from "@/hooks/useDynamicSize"; import BackgroundTopBlob from "../../ui/BackgroundTopBlob"; import Header from "../../components/Header"; import { ELottieKeys, useLottie } from "@/hooks/lottie/useLottie"; +import { usePreloadImages } from "@/hooks/preload/images"; function LoadingInRelationshipPage() { const navigate = useNavigate(); @@ -22,6 +23,34 @@ function LoadingInRelationshipPage() { return [getRandomArbitrary(300, 995), getRandomArbitrary(3, 995)]; }, []); const { width: pageWidth, elementRef: pageRef } = useDynamicSize({}); + usePreloadImages([ + "/works-traits-unhappy.webp", + "/works-traits-happy.webp", + "/works-traits-never_been.webp", + "/works-for-us-very-unhappy.webp", + "/works-for-us-unhappy.webp", + "/works-for-us-happy.webp", + "/thumbs_up.webp", + "/thumbs_more_up.webp", + "/thumbs_middle.webp", + "/thumbs_more_down.webp", + "/thumbs_down.webp", + "/almost-there.webp", + "/man.webp", + "/woman.webp", + "/almost-there.webp", + "/unamused.webp", + "/anxious_face_with_sweat.webp", + "/red-heart.webp", + "/brain.webp", + "/paperclip.webp", + "/questionV1.webp", + "/input_numbers.webp", + "/sunset.webp", + "/rised_hand.webp", + "/crystal_ball.webp", + "/technologist.webp", + ]); useLottie({ preloadKey: ELottieKeys.key, diff --git a/src/data.tsx b/src/data.tsx index d47a5fc..6d2a0ce 100755 --- a/src/data.tsx +++ b/src/data.tsx @@ -70,6 +70,7 @@ export interface IQuestion { title?: "#fff"; description?: "#fff"; }; + preloadImages?: string[]; } export interface IAnswer { diff --git a/src/hooks/preload/images.ts b/src/hooks/preload/images.ts new file mode 100644 index 0000000..acd12ff --- /dev/null +++ b/src/hooks/preload/images.ts @@ -0,0 +1,15 @@ +import { useEffect } from "react"; + +export const preloadImages = (images: string[]) => { + if (!images.length) return; + images.forEach((image) => { + const img = new Image(); + img.src = image + }); +} + +export const usePreloadImages = (images: string[]) => { + useEffect(() => { + preloadImages(images) + }, [images]) +} \ No newline at end of file diff --git a/src/routes.ts b/src/routes.ts index fdd76ee..c78e47d 100755 --- a/src/routes.ts +++ b/src/routes.ts @@ -513,7 +513,7 @@ export const hasFullDataModal = (path: string) => { export const getRouteBy = (status: UserStatus): string => { switch (status) { case "lead": - return routes.client.gender(); + return routes.client.genderV1(); case "registred": case "unsubscribed": return routes.client.trialPayment();