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

Merge branch 'develop' into 'main'

Browse Source 
Develop

See merge request witapp/aura-webapp!269
This commit is contained in:
Daniil Chemerkin 2024-07-20 21:06:15 +00:00
commit 9f8b88bfd1
29 changed files with 168 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -16,6 +16,7 @@ import Stepper from "../Stepper";
import { useLottie } from "@/hooks/lottie/useLottie";
import { useMetricABFlags } from "@/services/metric/metricService.ts";
import { preloadImages } from "@/hooks/preload/images";
import { useTouchAction } from "@/hooks/touchAction/useTouchAction";
function QuestionnairePage(): JSX.Element {
const { question, stepId } = useParams();
@ -36,6 +37,11 @@ function QuestionnairePage(): JSX.Element {
useLottie({
preloadKey: currentQuestion?.lottie?.preloadKey,
});
useTouchAction(
currentQuestion?.answers?.length && currentQuestion?.answers?.length < 3
? "none"
: currentQuestion?.touchAction
);
useEffect(() => {
if (currentQuestion?.preloadImages?.length) {

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

@ -13,6 +13,7 @@
background-repeat: no-repeat;
color: #fff;
padding-top: 26px;
padding-bottom: calc(0dvh + 64px);
width: 100%;
max-width: 460px;
}

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

@ -188,6 +188,7 @@ export const stepsQuestionary: IStep[] = [
id: "birthdate",
question: "What's your date of birth?",
preloadImages: ["/single-zodiac-info.webp"],
touchAction: "none",
answersElement: <BirthdateCustomAnswer />,
navigateToUrl: routes.client.singleZodiacInfoV1(),
},
@ -226,6 +227,7 @@ export const stepsQuestionary: IStep[] = [
question: "Where were you born?",
description:
"This determines the time zone at the place of your birth.",
touchAction: "none",
answersElement: <BirthPlaceCustomAnswer />,
backgroundImage: "/birthPlace.webp",
backgroundColor: "#0000004d",
@ -544,6 +546,7 @@ export const stepsQuestionary: IStep[] = [
{
id: "partnerBirthdate",
question: "What’s your partner’s date of birth?",
touchAction: "none",
answersElement: <BirthdateCustomAnswer affiliation="partner" />,
},
// TODO: add compatibility page
@ -575,6 +578,7 @@ export const stepsQuestionary: IStep[] = [
{
id: "partnerBirthPlace",
question: "Where was your partner born?",
touchAction: "none",
description:
"If you don’t know the exact place of birth just type in the country of birth.",
answersElement: <BirthPlaceCustomAnswer affiliation="partner" />,

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

@ -11,9 +11,9 @@
background-position-x: center;
background-size: cover;
color: #fff;
padding-top: 64px;
background-color: #0F1323;
padding-top: 32px;
padding-bottom: calc(0dvh + 64px);
width: 100%;
max-width: 460px;
}

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

@ -39,6 +39,7 @@ function AlmostTherePage() {
return (
<section className={`${styles.page} page`}>
<div className={styles["background_wrap"]} />
<Header
isBackButtonVisible={false}
classNameTitle={styles["header-title"]}

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

@ -6,17 +6,30 @@
grid-template-rows: repeat(4, min-content);
min-height: 100vh;
gap: 40px;
color: #fff;
background-color: #0F1323;
padding-top: 32px;
padding-bottom: calc(0dvh + 64px);
width: 100%;
max-width: 460px;
}
.page > * {
z-index: 1;
}
.background_wrap {
z-index: 0;
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-image: url("/almost-there.webp");
background-position-y: top;
background-position-x: center;
background-size: contain;
background-repeat: no-repeat;
color: #fff;
padding-top: 64px;
background-color: #0F1323;
padding-top: 32px;
background-image: url("/almost-there.webp");
width: 100%;
max-width: 460px;
}
.header-title {

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

@ -12,6 +12,7 @@
background-size: cover;
color: #fff;
padding-top: 32px;
padding-bottom: calc(0dvh + 64px);
width: 100%;
max-width: 460px;
}

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

@ -9,6 +9,7 @@
background-repeat: no-repeat;
color: #fff;
padding: 33px 16px;
padding-bottom: calc(0dvh + 64px);
background-color: #171717;
width: 100%;
max-width: 460px;

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

@ -13,6 +13,7 @@ import BackgroundTopBlob from "../../ui/BackgroundTopBlob";
import Header from "../../components/Header";
import { ELottieKeys, useLottie } from "@/hooks/lottie/useLottie";
import { usePreloadImages } from "@/hooks/preload/images";
import { useTouchAction } from "@/hooks/touchAction/useTouchAction";
function LoadingInRelationshipPage() {
const navigate = useNavigate();
@ -51,6 +52,7 @@ function LoadingInRelationshipPage() {
"/crystal_ball.webp",
"/technologist.webp",
]);
useTouchAction("none");
useLottie({
preloadKey: ELottieKeys.key,

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

@ -9,6 +9,7 @@
background: #0F1323;
color: #fff;
padding-top: 32px;
padding-bottom: calc(0dvh + 64px);
width: 100%;
max-width: 460px;
}

1
src/components/pages/ABDesign/v1/pages/NotAlone/index.tsx
View File

@ -29,6 +29,7 @@ function NotAlonePage() {
return (
<section className={`${styles.page} page`}>
<div className={styles["background_wrap"]} />
<Header
isBackButtonVisible={false}
classNameTitle={styles["header-title"]}

24
src/components/pages/ABDesign/v1/pages/NotAlone/styles.module.css
View File

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

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

@ -12,6 +12,7 @@
background-size: cover;
color: #fff;
padding-top: 32px;
padding-bottom: calc(0dvh + 64px);
width: 100%;
max-width: 460px;
}

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

@ -12,6 +12,7 @@
background-size: cover;
color: #fff;
padding-top: 32px;
padding-bottom: calc(0dvh + 64px);
width: 100%;
max-width: 460px;
}

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

@ -12,6 +12,7 @@
background-size: cover;
color: #fff;
padding-top: 32px;
padding-bottom: calc(0dvh + 64px);
width: 100%;
max-width: 460px;
}

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

@ -12,6 +12,7 @@
background-repeat: no-repeat;
color: #fff;
padding-top: 32px;
padding-bottom: calc(0dvh + 64px);
width: 100%;
max-width: 460px;
}

1
src/components/pages/ABDesign/v1/pages/RelationshipAlmostThere/index.tsx
View File

@ -25,6 +25,7 @@ function RelationshipAlmostTherePage() {
return (
<section className={`${styles.page} page`}>
<div className={styles["background_wrap"]} />
<Header
classNameTitle={styles["header-title"]}
isBackButtonVisible={false}

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

@ -12,11 +12,29 @@
background-repeat: no-repeat;
color: #fff;
padding: 32px 16px;
padding-bottom: calc(0dvh + 64px);
background-color: #171717;
width: 100%;
max-width: 460px;
}
.page > * {
z-index: 1;
}
.background_wrap {
z-index: 0;
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-image: url("/almost-there.webp");
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
.title {
font-size: 28px;
line-height: auto;

1
src/components/pages/ABDesign/v1/pages/RelationshipZodiacInfo/index.tsx
View File

@ -55,6 +55,7 @@ function RelationshipZodiacInfoPage() {
return (
<section className={`${styles.page} page`}>
<div className={styles["background_wrap"]} />
<Header
isBackButtonVisible={false}
classNameTitle={styles["header-title"]}

18
src/components/pages/ABDesign/v1/pages/RelationshipZodiacInfo/styles.module.css
View File

@ -15,10 +15,28 @@
background-repeat: no-repeat;
color: #fff;
padding-top: 32px;
padding-bottom: calc(0dvh + 64px);
width: 100%;
max-width: 460px;
}
.page > * {
z-index: 1;
}
.background_wrap {
z-index: 0;
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-size: cover;
background-image: url("/single-zodiac-info.webp");
background-position: center;
background-repeat: no-repeat;
}
.image-container {
display: grid;
align-items: center;

7
src/components/pages/ABDesign/v1/pages/Satisfied/index.tsx
View File

@ -39,12 +39,13 @@ function Satisfied() {
};
return (
<section
className={`${styles.page} page`}
<section className={`${styles.page} page`}>
<div
className={styles["background_wrap"]}
style={{
backgroundImage: `url(/satisfied-${satisfied}.webp)`,
}}
>
/>
<Header
classNameTitle={styles["header-title"]}
isBackButtonVisible={false}

23
src/components/pages/ABDesign/v1/pages/Satisfied/styles.module.css
View File

@ -2,16 +2,11 @@
position: relative;
height: fit-content;
min-height: 100dvh;
background-position-y: top;
background-position-x: center;
background-repeat: no-repeat;
background-size: contain;
color: #fff;
padding-top: 32px;
background-color: #0F1323;
width: 100%;
max-width: 460px;
background-image: url(/satisfied-yes.webp);
display: grid;
justify-content: center;
justify-items: center;
@ -19,6 +14,24 @@
padding-bottom: calc(0dvh + 160px);
}
.page > * {
z-index: 1;
}
.background_wrap {
z-index: 0;
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-image: url(/satisfied-yes.webp);
background-position-y: top;
background-position-x: center;
background-repeat: no-repeat;
background-size: contain;
}
.title {
font-size: 27px;
line-height: 125%;

3
src/components/pages/ABDesign/v1/pages/SingleZodiacInfo/index.tsx
View File

@ -15,7 +15,7 @@ function SingleZodiacInfoPage() {
const birthdate = useSelector(selectors.selectQuestionnaire).birthdate;
const gender = useSelector(selectors.selectQuestionnaire).gender;
const zodiac = getZodiacSignByDate(birthdate);
const zodiacInfo = zodiacSignsInfo[gender as keyof IZodicSignsInfo].find(
const zodiacInfo = zodiacSignsInfo[gender as keyof IZodicSignsInfo]?.find(
(sign) => sign.name === zodiac
);
@ -27,6 +27,7 @@ function SingleZodiacInfoPage() {
return (
<section className={`${styles.page} page`}>
<div className={styles["background_wrap"]} />
<div className={styles.substrate} />
<Header
isBackButtonVisible={false}

19
src/components/pages/ABDesign/v1/pages/SingleZodiacInfo/styles.module.css
View File

@ -9,13 +9,9 @@
flex-direction: column;
gap: 40px;
background-color: #0F1323;
background-image: url("/single-zodiac-info.webp");
background-position: center;
background-size: cover;
background-repeat: no-repeat;
color: #fff;
padding-top: 32px;
padding-bottom: 32px;
padding-bottom: calc(0dvh + 64px);
width: 100%;
max-width: 460px;
}
@ -24,6 +20,19 @@
z-index: 1;
}
.background_wrap {
z-index: 0;
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-size: cover;
background-image: url("/single-zodiac-info.webp");
background-position: center;
background-repeat: no-repeat;
}
.image {
height: 285px;
}

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

@ -12,6 +12,7 @@
background-size: cover;
color: #fff;
padding-top: 32px;
padding-bottom: calc(0dvh + 64px);
width: 100%;
max-width: 460px;
}

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

@ -12,6 +12,7 @@
background-size: cover;
color: #fff;
padding-top: 32px;
padding-bottom: calc(0dvh + 64px);
width: 100%;
max-width: 460px;
}

19
src/data.tsx
View File

@ -55,6 +55,7 @@ export interface IStep {
export interface IQuestion {
id: string;
question: string;
touchAction?: string;
answers?: IAnswer[];
answersElement?: JSX.Element;
answerClassName?: string;
@ -106,8 +107,8 @@ export const aboutUsAnswersA: IAnswer[] = [
id: "other",
answer: "Other",
icon: "",
}
]
},
];
export const aboutUsAnswersB: IAnswer[] = [
{
id: "forbes",
@ -128,8 +129,8 @@ export const aboutUsAnswersB: IAnswer[] = [
id: "other",
answer: "Other",
icon: "",
}
]
},
];
export const aboutUsAnswersNormal: IAnswer[] = [
{
@ -210,12 +211,12 @@ export const aboutUsAnswersNormal: IAnswer[] = [
];
export const aboutUsAnswers: {
[key: string]: IAnswer[]
[key: string]: IAnswer[];
} = {
'aboutUsAnswersA': aboutUsAnswersNormal,
'aboutUsAnswersB': aboutUsAnswersB,
'aboutUsAnswersNormal': aboutUsAnswersA
}
aboutUsAnswersA: aboutUsAnswersNormal,
aboutUsAnswersB: aboutUsAnswersB,
aboutUsAnswersNormal: aboutUsAnswersA,
};
const currentlyAffectingAnswers: IAnswer[] = [
{

11
src/hooks/touchAction/useTouchAction.ts Normal file
View File

@ -0,0 +1,11 @@
import { useEffect } from "react"
export const useTouchAction = (touchAction = 'pan-y') => {
useEffect(() => {
document.body.style.touchAction = touchAction
return () => {
document.body.style.touchAction = 'pan-y'
}
}, [touchAction])
}

4
src/index.css
View File

@ -256,3 +256,7 @@ html {
input, textarea {
font-size: 16px !important;
}
html, body {
touch-action: pan-y;
}