229 lines
13 KiB
TypeScript
229 lines
13 KiB
TypeScript
import Title from "@/components/Title";
|
|
import styles from "./styles.module.scss";
|
|
import { useNavigate } from "react-router-dom";
|
|
import routes from "@/routes";
|
|
import { useSelector } from "react-redux";
|
|
import { selectors } from "@/store";
|
|
import Button from "../../ui/Button";
|
|
import { useTranslations } from "@/hooks/translations";
|
|
import { ELocalesPlacement } from "@/locales";
|
|
|
|
function GoalSetup() {
|
|
const { translate } = useTranslations(ELocalesPlacement.Chats);
|
|
const navigate = useNavigate();
|
|
const { goal } = useSelector(selectors.selectAnswers);
|
|
|
|
const handleNext = () => {
|
|
navigate(routes.client.chatsReviews());
|
|
};
|
|
|
|
const handleBack = () => {
|
|
navigate(-1);
|
|
};
|
|
|
|
return (
|
|
<section className={styles.container}>
|
|
<p className={styles["title-text"]}>{translate("/goalSetup.title")}</p>
|
|
<div className={styles["image-container"]}>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 266 197"
|
|
width="266"
|
|
height="197"
|
|
preserveAspectRatio="xMidYMid slice"
|
|
style={{
|
|
width: "100%",
|
|
height: "100%",
|
|
transform: "translate3d(0px, 0px, 0px)",
|
|
contentVisibility: "visible",
|
|
}}
|
|
>
|
|
<defs>
|
|
<clipPath id="__lottie_element_21">
|
|
<rect width="266" height="197" x="0" y="0"></rect>
|
|
</clipPath>
|
|
<linearGradient
|
|
id="__lottie_element_25"
|
|
spreadMethod="pad"
|
|
gradientUnits="userSpaceOnUse"
|
|
x1="0"
|
|
y1="0"
|
|
x2="100"
|
|
y2="0"
|
|
>
|
|
<stop offset="0%" stopColor="rgb(254,243,226)"></stop>
|
|
<stop offset="50%" stopColor="rgb(250,233,183)"></stop>
|
|
<stop offset="100%" stopColor="rgb(247,194,146)"></stop>
|
|
</linearGradient>
|
|
<linearGradient
|
|
id="__lottie_element_29"
|
|
spreadMethod="pad"
|
|
gradientUnits="userSpaceOnUse"
|
|
x1="0"
|
|
y1="0"
|
|
x2="100"
|
|
y2="0"
|
|
>
|
|
<stop offset="0%" stopColor="rgb(254,243,226)"></stop>
|
|
<stop offset="50%" stopColor="rgb(250,233,183)"></stop>
|
|
<stop offset="100%" stopColor="rgb(247,194,146)"></stop>
|
|
</linearGradient>
|
|
</defs>
|
|
<g clipPath="url(#__lottie_element_21)">
|
|
<g
|
|
transform="matrix(1.8899999856948853,0,0,1.8899999856948853,177.87490844726562,133.66526794433594)"
|
|
opacity="1"
|
|
style={{ display: "block" }}
|
|
>
|
|
<g
|
|
opacity="1"
|
|
transform="matrix(1,0,0,1,8.59000015258789,8.256999969482422)"
|
|
>
|
|
<path
|
|
fill="rgb(249,233,183)"
|
|
fillOpacity="1"
|
|
d=" M0.21400000154972076,-8.006999969482422 C0.21400000154972076,-8.006999969482422 -0.26100000739097595,-8.006999969482422 -0.26100000739097595,-8.006999969482422 C-0.5460000038146973,-8.006999969482422 -0.7820000052452087,-7.802000045776367 -0.7820000052452087,-7.5279998779296875 C-1.0190000534057617,-4.316999912261963 -4.526000022888184,-1.0360000133514404 -7.867000102996826,-0.7400000095367432 C-8.126999855041504,-0.7179999947547913 -8.34000015258789,-0.49000000953674316 -8.34000015258789,-0.23899999260902405 C-8.34000015258789,-0.23899999260902405 -8.34000015258789,0.23800000548362732 -8.34000015258789,0.23800000548362732 C-8.34000015258789,0.5130000114440918 -8.12600040435791,0.7170000076293945 -7.8420000076293945,0.7400000095367432 C-4.525000095367432,0.9679999947547913 -1.1380000114440918,4.269999980926514 -0.7820000052452087,7.48199987411499 C-0.7590000033378601,7.7789998054504395 -0.49799999594688416,8.006999969482422 -0.16599999368190765,8.006999969482422 C-0.16599999368190765,8.006999969482422 0.16599999368190765,8.006999969482422 0.16599999368190765,8.006999969482422 C0.4970000088214874,8.006999969482422 0.7580000162124634,7.7789998054504395 0.781000018119812,7.460000038146973 C1.065999984741211,3.8610000610351562 4.074999809265137,0.8989999890327454 7.817999839782715,0.7170000076293945 C8.12600040435791,0.6949999928474426 8.34000015258789,0.46700000762939453 8.34000015258789,0.17100000381469727 C8.34000015258789,0.17100000381469727 8.34000015258789,-0.23899999260902405 8.34000015258789,-0.23899999260902405 C8.34000015258789,-0.5350000262260437 8.102999687194824,-0.7639999985694885 7.817999839782715,-0.7860000133514404 C4.051000118255615,-0.968999981880188 1.0190000534057617,-3.9519999027252197 0.781000018119812,-7.5970001220703125 C0.734000027179718,-7.802000045776367 0.49799999594688416,-8.006999969482422 0.21400000154972076,-8.006999969482422z"
|
|
></path>
|
|
</g>
|
|
</g>
|
|
<g
|
|
transform="matrix(0.5600000023841858,0,0,0.5600000023841858,76.72735595703125,42.38835906982422)"
|
|
opacity="1"
|
|
style={{ display: "block" }}
|
|
>
|
|
<g
|
|
opacity="1"
|
|
transform="matrix(1,0,0,1,16.518999099731445,16.518999099731445)"
|
|
>
|
|
<path
|
|
fill="rgb(249,233,183)"
|
|
fillOpacity="1"
|
|
d=" M14.789999961853027,-1.4789999723434448 C7.425000190734863,-1.4789999723434448 1.4789999723434448,-7.423999786376953 1.4789999723434448,-14.789999961853027 C1.4789999723434448,-15.618000030517578 0.828000009059906,-16.268999099731445 0,-16.268999099731445 C-0.828000009059906,-16.268999099731445 -1.4789999723434448,-15.618000030517578 -1.4789999723434448,-14.789999961853027 C-1.4789999723434448,-7.423999786376953 -7.425000190734863,-1.4789999723434448 -14.789999961853027,-1.4789999723434448 C-15.618000030517578,-1.4789999723434448 -16.268999099731445,-0.828000009059906 -16.268999099731445,0 C-16.268999099731445,0.828000009059906 -15.618000030517578,1.4800000190734863 -14.789999961853027,1.4800000190734863 C-7.425000190734863,1.4800000190734863 -1.4789999723434448,7.425000190734863 -1.4789999723434448,14.789999961853027 C-1.4789999723434448,15.619000434875488 -0.828000009059906,16.268999099731445 0,16.268999099731445 C0.828000009059906,16.268999099731445 1.4789999723434448,15.619000434875488 1.4789999723434448,14.789999961853027 C1.4789999723434448,7.425000190734863 7.425000190734863,1.4800000190734863 14.789999961853027,1.4800000190734863 C15.619000434875488,1.4800000190734863 16.268999099731445,0.828000009059906 16.268999099731445,0 C16.268999099731445,-0.828000009059906 15.619000434875488,-1.4789999723434448 14.789999961853027,-1.4789999723434448z"
|
|
></path>
|
|
</g>
|
|
</g>
|
|
<g
|
|
transform="matrix(1,0,0,1,167.4199981689453,35.08100128173828)"
|
|
opacity="1"
|
|
style={{ display: "block" }}
|
|
>
|
|
<g
|
|
opacity="1"
|
|
transform="matrix(1,0,0,1,5.567999839782715,5.568999767303467)"
|
|
>
|
|
<path
|
|
fill="rgb(249,233,183)"
|
|
fillOpacity="1"
|
|
d=" M4.835999965667725,-0.48399999737739563 C2.427999973297119,-0.48399999737739563 0.48399999737739563,-2.427999973297119 0.48399999737739563,-4.835999965667725 C0.48399999737739563,-5.10699987411499 0.2709999978542328,-5.318999767303467 0.0010000000474974513,-5.318999767303467 C-0.27000001072883606,-5.318999767303467 -0.4830000102519989,-5.10699987411499 -0.4830000102519989,-4.835999965667725 C-0.4830000102519989,-2.427999973297119 -2.427000045776367,-0.48399999737739563 -4.835000038146973,-0.48399999737739563 C-5.105999946594238,-0.48399999737739563 -5.317999839782715,-0.2709999978542328 -5.317999839782715,0 C-5.317999839782715,0.27000001072883606 -5.105999946594238,0.4830000102519989 -4.835000038146973,0.4830000102519989 C-2.427000045776367,0.4830000102519989 -0.4830000102519989,2.427000045776367 -0.4830000102519989,4.835000038146973 C-0.4830000102519989,5.105999946594238 -0.27000001072883606,5.318999767303467 0.0010000000474974513,5.318999767303467 C0.2709999978542328,5.318999767303467 0.48399999737739563,5.105999946594238 0.48399999737739563,4.835000038146973 C0.48399999737739563,2.427000045776367 2.427999973297119,0.4830000102519989 4.835999965667725,0.4830000102519989 C5.10699987411499,0.4830000102519989 5.317999839782715,0.27000001072883606 5.317999839782715,0 C5.317999839782715,-0.2709999978542328 5.10699987411499,-0.48399999737739563 4.835999965667725,-0.48399999737739563z"
|
|
></path>
|
|
</g>
|
|
</g>
|
|
<g
|
|
transform="matrix(1,0,0,1,133,98.5)"
|
|
opacity="1"
|
|
style={{ display: "block" }}
|
|
>
|
|
<g opacity="1" transform="matrix(1,0,0,1,0,0)">
|
|
<path
|
|
fill="url(#__lottie_element_29)"
|
|
fillOpacity="1"
|
|
d=" M85.75,-36.75 C84.01499938964844,-35.724998474121094 -84.75,76.25 -84.75,76.25 C-84.75,76.25 97.38899993896484,-16.871999740600586 98.75,-18 C100.93800354003906,-19.812999725341797 104,-25.5 100.25,-31.75 C96.5,-38 88.5,-38.375 85.75,-36.75z"
|
|
></path>
|
|
<path
|
|
strokeLinecap="butt"
|
|
strokeLinejoin="miter"
|
|
fillOpacity="0"
|
|
strokeMiterlimit="4"
|
|
stroke="rgb(255,255,255)"
|
|
strokeOpacity="1"
|
|
strokeWidth="0"
|
|
d=" M85.75,-36.75 C84.01499938964844,-35.724998474121094 -84.75,76.25 -84.75,76.25 C-84.75,76.25 97.38899993896484,-16.871999740600586 98.75,-18 C100.93800354003906,-19.812999725341797 104,-25.5 100.25,-31.75 C96.5,-38 88.5,-38.375 85.75,-36.75z"
|
|
></path>
|
|
</g>
|
|
</g>
|
|
<g
|
|
transform="matrix(1,0,0,1,353.5,-29.5)"
|
|
opacity="1"
|
|
style={{ display: "block" }}
|
|
>
|
|
<g opacity="1" transform="matrix(1,0,0,1,0,0)">
|
|
<path
|
|
fill="url(#__lottie_element_25)"
|
|
fillOpacity="1"
|
|
d=" M85.75,-36.75 C84.01499938964844,-35.724998474121094 -84.75,76.25 -84.75,76.25 C-84.75,76.25 97.38899993896484,-16.871999740600586 98.75,-18 C100.93800354003906,-19.812999725341797 104,-25.5 100.25,-31.75 C96.5,-38 88.5,-38.375 85.75,-36.75z"
|
|
></path>
|
|
<path
|
|
strokeLinecap="butt"
|
|
strokeLinejoin="miter"
|
|
fillOpacity="0"
|
|
strokeMiterlimit="4"
|
|
stroke="rgb(255,255,255)"
|
|
strokeOpacity="1"
|
|
strokeWidth="0"
|
|
d=" M85.75,-36.75 C84.01499938964844,-35.724998474121094 -84.75,76.25 -84.75,76.25 C-84.75,76.25 97.38899993896484,-16.871999740600586 98.75,-18 C100.93800354003906,-19.812999725341797 104,-25.5 100.25,-31.75 C96.5,-38 88.5,-38.375 85.75,-36.75z"
|
|
></path>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
<Title className={styles.title} variant="h2">
|
|
{goal === "about_ex" && <>{translate("/goalSetup.ex_title")}</>}
|
|
{goal === "give_advice" && (
|
|
<>{translate("/goalSetup.give_advice_title")}</>
|
|
)}
|
|
{goal === "give_guidance" && (
|
|
<>{translate("/goalSetup.future_title")}</>
|
|
)}
|
|
{goal === "all" && <>{translate("/goalSetup.all_title")}</>}
|
|
</Title>
|
|
<p className={styles.text}>
|
|
{goal === "about_ex" && (
|
|
<>
|
|
{translate("/goalSetup.ex_text", {
|
|
style: <span>{translate("/goalSetup.ex_text_style")}</span>,
|
|
})}
|
|
</>
|
|
)}
|
|
{goal === "give_advice" && (
|
|
<>
|
|
{translate("/goalSetup.give_advice_text", {
|
|
style: (
|
|
<span>{translate("/goalSetup.give_advice_title_style")}</span>
|
|
),
|
|
})}
|
|
</>
|
|
)}
|
|
{goal === "give_guidance" && (
|
|
<>
|
|
{translate("/goalSetup.future_text", {
|
|
style: <span>{translate("/goalSetup.future_title_style")}</span>,
|
|
})}
|
|
</>
|
|
)}
|
|
{goal === "all" && (
|
|
<>
|
|
{translate("/goalSetup.all_text", {
|
|
style: <span>{translate("/goalSetup.all_title_style")}</span>,
|
|
})}
|
|
</>
|
|
)}
|
|
</p>
|
|
<div className={styles.footer}>
|
|
<p>{translate("/goalSetup.change_goal")}</p>
|
|
<Button classNameContainer={styles.button} onClick={handleNext}>
|
|
{translate("continue")}
|
|
</Button>
|
|
<Button
|
|
classNameContainer={`${styles.button} ${styles["back-button"]}`}
|
|
onClick={handleBack}
|
|
>
|
|
{translate("back")}
|
|
</Button>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
export default GoalSetup;
|