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 2024-07-17 18:55:56 +00:00
parent 1e6c587644
commit b9553518e0
11 changed files with 159 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -121,7 +121,7 @@ import LoadingPage from "../pages/LoadingPage";
import { EProductKeys, productUrls } from "@/data/products";
import SinglePaymentPage from "../pages/SinglePaymentPage";
import ABDesignV1Routes from "@/routerComponents/ABDesign/v1";
import metricService, {EGoals} from "@/services/metric/metricService";
import metricService, { EGoals } from "@/services/metric/metricService";
const isProduction = import.meta.env.MODE === "production";
@ -165,12 +165,12 @@ function App(): JSX.Element {
useEffect(() => {
if (location.pathname.includes("v1/trial-choice")) {
metricService.reachGoal(EGoals.AURA_TRIAL_CHOICE_PAGE_VISIT, true)
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.reachGoal(EGoals.AURA_TRIAL_PAYMENT_PAGE_VISIT, true);
}
// metricService.initMetricAB()
metricService.hit()
metricService.hit();
}, [location]);
useLayoutEffect(() => {
@ -287,7 +287,9 @@ function App(): JSX.Element {
return (
<Routes>
<Route element={<AuthorizedUserOutlet />}>
<Route path="*" element={<ABDesignV1Routes />} />
</Route>
<Route element={<Layout setIsSpecialOfferOpen={setIsSpecialOfferOpen} />}>
<Route path={routes.client.loadingPage()} element={<LoadingPage />} />
{/* Email - Pay - Email */}

2
src/components/Navbar/index.tsx
View File

@ -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()
}

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

@ -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<NodeJS.Timeout>();
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);

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

@ -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: <BirthdateCustomAnswer />,
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: <BirthPlaceCustomAnswer />,
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: <MultiplyAnswers answers={currentlyAffectingAnswers} />,
},
{
@ -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",

13
src/components/pages/ABDesign/v1/pages/AlmostThere/index.tsx
View File

@ -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,

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

@ -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/", "");

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

@ -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,

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

@ -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,

1
src/data.tsx
View File

@ -70,6 +70,7 @@ export interface IQuestion {
title?: "#fff";
description?: "#fff";
};
preloadImages?: string[];
}
export interface IAnswer {

15
src/hooks/preload/images.ts Normal file
View File

@ -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])
}

2
src/routes.ts
View File

@ -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();