Merge branch 'revert-ee65a4ac' into 'develop'

Revert "Merge branch 'AW-103-lottie' into 'develop'" See merge request witapp/aura-webapp!184
2024-06-17 21:34:02 +00:00 · 2024-06-17 21:34:02 +00:00 · 16acee2d09
commit 16acee2d09
parent ee65a4aceb 5d92220adc
12 changed files with 39 additions and 68 deletions
--- a/src/components/pages/ABDesign/v1/pages/AlmostThere/index.tsx
+++ b/src/components/pages/ABDesign/v1/pages/AlmostThere/index.tsx
@ -4,7 +4,8 @@ import MainButton from "@/components/MainButton";
 import { useNavigate } from "react-router-dom";
 import routes from "@/routes";
 import Header from "../../components/Header";
-import { DotLottiePlayer } from "@dotlottie/react-player";
+import LottieAnimation from "@/lotties/v1/magnifyingGlassAndPlanet.json";
+import Lottie from "lottie-react";

 function AlmostTherePage() {
  const navigate = useNavigate();
@ -25,11 +26,7 @@ function AlmostTherePage() {
        isBackButtonVisible={false}
        classNameTitle={styles["header-title"]}
      />
-      <DotLottiePlayer
-        src="https://lottie.host/7e1e77e6-46a3-4122-8584-7555539d1b15/ASrDx8yoMC.lottie"
-        autoplay
-        loop={false}
-      />
+      <Lottie animationData={LottieAnimation} loop={false} />
      <div>
        <Title variant="h1" className={styles.title}>
          Almost there! <br /> Now let's tailor your plan by understanding the{" "}
--- a/src/components/pages/ABDesign/v1/pages/Both/index.tsx
+++ b/src/components/pages/ABDesign/v1/pages/Both/index.tsx
@ -9,7 +9,8 @@ import { getZodiacSignByDate } from "@/services/zodiac-sign";
 import { useDynamicSize } from "@/hooks/useDynamicSize";
 import Header from "../../components/Header";
 import BackgroundTopBlob from "../../ui/BackgroundTopBlob";
-import { DotLottiePlayer } from "@dotlottie/react-player";
+import LottieScalesNeutral from "@/lotties/v1/scales-neutral.json";
+import Lottie from "lottie-react";

 function BothPage() {
  const navigate = useNavigate();
@ -34,11 +35,10 @@ function BothPage() {
      />
      <Header isBackButtonVisible={false} />
      <div className={styles["image-container"]}>
-        <DotLottiePlayer
+        <Lottie
          className={styles["lottie-animation"]}
-          src="https://lottie.host/ddd2cb46-d62f-4808-a10d-1dd5ce8d42d2/6hgUBBGjaJ.lottie"
-          autoplay
          loop={false}
+          animationData={LottieScalesNeutral}
        />
      </div>
      <div>
--- a/src/components/pages/ABDesign/v1/pages/EmailConfirm/index.tsx
+++ b/src/components/pages/ABDesign/v1/pages/EmailConfirm/index.tsx
@ -6,7 +6,8 @@ import Header from "../../components/Header";
 import BackgroundTopBlob from "../../ui/BackgroundTopBlob";
 import { useDynamicSize } from "@/hooks/useDynamicSize";
 import QuestionnaireGreenButton from "../../ui/GreenButton";
-import { DotLottiePlayer } from "@dotlottie/react-player";
+import LottieAnimation from "@/lotties/v1/hand-and-stars.json";
+import Lottie from "lottie-react";

 function EmailConfirmPage() {
  const navigate = useNavigate();
@ -25,11 +26,10 @@ function EmailConfirmPage() {
      />
      <Header className={styles.header} />
      <div className={styles["top-section"]}>
-        <DotLottiePlayer
+        <Lottie
          className={styles["lottie-animation"]}
-          src="https://lottie.host/25105d46-cc0a-4f76-9ad0-5e64e3eb0e52/OenfEsMruV.lottie"
-          autoplay
          loop={false}
+          animationData={LottieAnimation}
        />
        <Title className={styles.title}>
          Get access to your{" "}
--- a/src/components/pages/ABDesign/v1/pages/GoalSetup/index.tsx
+++ b/src/components/pages/ABDesign/v1/pages/GoalSetup/index.tsx
@ -6,7 +6,8 @@ import routes from "@/routes";
 import { useDynamicSize } from "@/hooks/useDynamicSize";
 import BackgroundTopBlob from "../../ui/BackgroundTopBlob";
 import Header from "../../components/Header";
-import { DotLottiePlayer } from "@dotlottie/react-player";
+import LottieAnimation from "@/lotties/v1/zodiac-signs-map.json";
+import Lottie from "lottie-react";

 function GoalSetupPage() {
  const navigate = useNavigate();
@ -29,9 +30,9 @@ function GoalSetupPage() {
      />
      <Header isBackButtonVisible={false} />
      <div className={styles["image-container"]}>
-        <DotLottiePlayer
+        <Lottie
+          animationData={LottieAnimation}
          className={styles["lottie-animation"]}
-          src="https://lottie.host/a86e1531-7028-4688-a836-ea9d71dafa3b/Pe5G1g9s9L.lottie"
          autoplay
          loop={false}
        />
--- a/src/components/pages/ABDesign/v1/pages/GoalSetup/styles.module.css
+++ b/src/components/pages/ABDesign/v1/pages/GoalSetup/styles.module.css
@ -76,9 +76,6 @@

 .text-container {
    margin-top: 68px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
 }

 .lottie-animation {
--- a/src/components/pages/ABDesign/v1/pages/NotAlone/index.tsx
+++ b/src/components/pages/ABDesign/v1/pages/NotAlone/index.tsx
@ -7,7 +7,8 @@ import { selectors } from "@/store";
 import { useSelector } from "react-redux";
 import { getZodiacSignByDate } from "@/services/zodiac-sign";
 import Header from "../../components/Header";
-import { DotLottiePlayer } from "@dotlottie/react-player";
+import Lottie from "lottie-react";
+import LottieUmbrella from "@/lotties/v1/umbrella.json";

 function NotAlonePage() {
  const navigate = useNavigate();
@ -28,11 +29,7 @@ function NotAlonePage() {
        isBackButtonVisible={false}
        classNameTitle={styles["header-title"]}
      />
-      <DotLottiePlayer
-        src="https://lottie.host/e353e80c-fd4a-4eca-a930-d9bf923466e0/G4sxbtkhIA.lottie"
-        autoplay
-        loop={false}
-      />
+      <Lottie loop={false} animationData={LottieUmbrella} />
      <div>
        <Title variant="h1" className={styles.title}>
          You’re not alone.
--- a/src/components/pages/ABDesign/v1/pages/PartnerThing/index.tsx
+++ b/src/components/pages/ABDesign/v1/pages/PartnerThing/index.tsx
@ -9,7 +9,8 @@ import { getZodiacSignByDate } from "@/services/zodiac-sign";
 import { useDynamicSize } from "@/hooks/useDynamicSize";
 import Header from "../../components/Header";
 import BackgroundTopBlob from "../../ui/BackgroundTopBlob";
-import { DotLottiePlayer } from "@dotlottie/react-player";
+import LottieScalesHeart from "@/lotties/v1/compass.json";
+import Lottie from "lottie-react";

 function PartnerThingPage() {
  const navigate = useNavigate();
@ -34,11 +35,7 @@ function PartnerThingPage() {
      />
      <Header isBackButtonVisible={false} />
      <div className={styles.circle}>
-        <DotLottiePlayer
-          src="https://lottie.host/15b235d7-b8c9-487f-8d65-73143afc9ecc/czTjX9Lwp1.lottie"
-          autoplay
-          loop={false}
-        />
+        <Lottie loop={false} animationData={LottieScalesHeart} />
      </div>
      <div>
        <Title variant="h1" className={styles.title}>
--- a/src/components/pages/ABDesign/v1/pages/QuestionnaireIntermediate/index.tsx
+++ b/src/components/pages/ABDesign/v1/pages/QuestionnaireIntermediate/index.tsx
@ -5,9 +5,10 @@ import { useNavigate } from "react-router-dom";
 import routes from "@/routes";
 import { useSelector } from "react-redux";
 import { selectors } from "@/store";
+import LottieKey from "@/lotties/v1/key.json";
 import Header from "../../components/Header";
 import { textVariables } from "../../data/textVariables";
-import { DotLottiePlayer } from "@dotlottie/react-player";
+import Lottie from "lottie-react";

 function QuestionnaireIntermediatePage() {
  const navigate = useNavigate();
@ -44,11 +45,7 @@ function QuestionnaireIntermediatePage() {
        isBackButtonVisible={false}
        classNameTitle={styles["header-title"]}
      />
-      <DotLottiePlayer
-        src="https://lottie.host/a80ec293-6f3d-4d21-a19e-9dfb40b86a14/clQys1OEAL.lottie"
-        autoplay
-        loop={false}
-      />
+      <Lottie loop={false} animationData={LottieKey} />
      <div>
        {path && (
          <Title variant="h1" className={styles.title}>
--- a/src/components/pages/ABDesign/v1/pages/RelationshipAlmostThere/index.tsx
+++ b/src/components/pages/ABDesign/v1/pages/RelationshipAlmostThere/index.tsx
@ -4,7 +4,8 @@ import MainButton from "@/components/MainButton";
 import { useNavigate } from "react-router-dom";
 import routes from "@/routes";
 import Header from "../../components/Header";
-import { DotLottiePlayer } from "@dotlottie/react-player";
+import LottieAnimation from "@/lotties/v1/magnifyingGlassAndPlanet.json";
+import Lottie from "lottie-react";

 function RelationshipAlmostTherePage() {
  const navigate = useNavigate();
@ -23,11 +24,7 @@ function RelationshipAlmostTherePage() {
        classNameTitle={styles["header-title"]}
        isBackButtonVisible={false}
      />
-      <DotLottiePlayer
-        src="https://lottie.host/7e1e77e6-46a3-4122-8584-7555539d1b15/ASrDx8yoMC.lottie"
-        autoplay
-        loop={false}
-      />
+      <Lottie animationData={LottieAnimation} loop={false} />
      <div>
        <Title variant="h1" className={styles.title}>
          <strong>Almost there!</strong> <br /> Now let's begin tailoring your
--- a/src/components/pages/ABDesign/v1/pages/Satisfied/index.tsx
+++ b/src/components/pages/ABDesign/v1/pages/Satisfied/index.tsx
@ -7,7 +7,9 @@ import { selectors } from "@/store";
 import { useSelector } from "react-redux";
 import { getZodiacSignByDate } from "@/services/zodiac-sign";
 import Header from "../../components/Header";
-import { DotLottiePlayer } from "@dotlottie/react-player";
+import LottieSun from "@/lotties/v1/sun.json";
+import LottieUmbrella from "@/lotties/v1/umbrella.json";
+import Lottie from "lottie-react";

 function Satisfied() {
  const navigate = useNavigate();
@ -40,19 +42,9 @@ function Satisfied() {
        classNameTitle={styles["header-title"]}
        isBackButtonVisible={false}
      />
-      {satisfied === "yes" && (
-        <DotLottiePlayer
-          src="https://lottie.host/da11de16-a8a4-47f3-bf0c-36302131f174/hdmkQ2wPxz.lottie"
-          autoplay
-          loop={false}
-        />
-      )}
+      {satisfied === "yes" && <Lottie loop={false} animationData={LottieSun} />}
      {satisfied === "no" && (
-        <DotLottiePlayer
-          src="https://lottie.host/e353e80c-fd4a-4eca-a930-d9bf923466e0/G4sxbtkhIA.lottie"
-          autoplay
-          loop={false}
-        />
+        <Lottie loop={false} animationData={LottieUmbrella} />
      )}
      <div>
        {satisfied === "yes" && (
--- a/src/components/pages/ABDesign/v1/pages/WithHead/index.tsx
+++ b/src/components/pages/ABDesign/v1/pages/WithHead/index.tsx
@ -9,7 +9,8 @@ import { getZodiacSignByDate } from "@/services/zodiac-sign";
 import { useDynamicSize } from "@/hooks/useDynamicSize";
 import BackgroundTopBlob from "../../ui/BackgroundTopBlob";
 import Header from "../../components/Header";
-import { DotLottiePlayer } from "@dotlottie/react-player";
+import LottieScalesWithHead from "@/lotties/v1/scales-head.json";
+import Lottie from "lottie-react";

 function WithHeadPage() {
  const navigate = useNavigate();
@ -34,11 +35,10 @@ function WithHeadPage() {
      />
      <Header isBackButtonVisible={false} />
      <div className={styles["image-container"]}>
-        <DotLottiePlayer
+        <Lottie
          className={styles["lottie-animation"]}
-          src="https://lottie.host/19fe41d7-d26f-431c-b063-8e123ce3d57a/HiucMMidQT.lottie"
-          autoplay
          loop={false}
+          animationData={LottieScalesWithHead}
        />
      </div>
      <div>
--- a/src/components/pages/ABDesign/v1/pages/WithHeart/index.tsx
+++ b/src/components/pages/ABDesign/v1/pages/WithHeart/index.tsx
@ -9,7 +9,8 @@ import { getZodiacSignByDate } from "@/services/zodiac-sign";
 import { useDynamicSize } from "@/hooks/useDynamicSize";
 import BackgroundTopBlob from "../../ui/BackgroundTopBlob";
 import Header from "../../components/Header";
-import { DotLottiePlayer } from "@dotlottie/react-player";
+import LottieScalesHeart from "@/lotties/v1/scales-heart.json";
+import Lottie from "lottie-react";

 function WithHeartPage() {
  const navigate = useNavigate();
@ -34,12 +35,7 @@ function WithHeartPage() {
      />
      <Header isBackButtonVisible={false} />
      <div className={styles["image-container"]}>
-        <DotLottiePlayer
-          className={styles["lottie-animation"]}
-          src="https://lottie.host/9eb3f7a1-83c2-495a-9342-c234bfebc40c/0T90l2xSWl.lottie"
-          autoplay
-          loop={false}
-        />
+        <Lottie className={styles["lottie-animation"]} loop={false} animationData={LottieScalesHeart} />
      </div>
      <div>
        <Title variant="h1" className={styles.title}>