Merge branch 'AW-103-lottie' into 'develop'

AW-103-lottie See merge request witapp/aura-webapp!180
2024-06-16 23:11:48 +00:00 · 2024-06-16 23:11:48 +00:00 · ee65a4aceb
commit ee65a4aceb
parent 8d4b4870b9 27e989d784
12 changed files with 68 additions and 39 deletions
--- a/src/components/pages/ABDesign/v1/pages/AlmostThere/index.tsx
+++ b/src/components/pages/ABDesign/v1/pages/AlmostThere/index.tsx
@ -4,8 +4,7 @@ import MainButton from "@/components/MainButton";
 import { useNavigate } from "react-router-dom";
 import routes from "@/routes";
 import Header from "../../components/Header";
-import LottieAnimation from "@/lotties/v1/magnifyingGlassAndPlanet.json";
-import Lottie from "lottie-react";
+import { DotLottiePlayer } from "@dotlottie/react-player";

 function AlmostTherePage() {
  const navigate = useNavigate();
@ -26,7 +25,11 @@ function AlmostTherePage() {
        isBackButtonVisible={false}
        classNameTitle={styles["header-title"]}
      />
-      <Lottie animationData={LottieAnimation} loop={false} />
+      <DotLottiePlayer
+        src="https://lottie.host/7e1e77e6-46a3-4122-8584-7555539d1b15/ASrDx8yoMC.lottie"
+        autoplay
+        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,8 +9,7 @@ import { getZodiacSignByDate } from "@/services/zodiac-sign";
 import { useDynamicSize } from "@/hooks/useDynamicSize";
 import Header from "../../components/Header";
 import BackgroundTopBlob from "../../ui/BackgroundTopBlob";
-import LottieScalesNeutral from "@/lotties/v1/scales-neutral.json";
-import Lottie from "lottie-react";
+import { DotLottiePlayer } from "@dotlottie/react-player";

 function BothPage() {
  const navigate = useNavigate();
@ -35,10 +34,11 @@ function BothPage() {
      />
      <Header isBackButtonVisible={false} />
      <div className={styles["image-container"]}>
-        <Lottie
+        <DotLottiePlayer
          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,8 +6,7 @@ import Header from "../../components/Header";
 import BackgroundTopBlob from "../../ui/BackgroundTopBlob";
 import { useDynamicSize } from "@/hooks/useDynamicSize";
 import QuestionnaireGreenButton from "../../ui/GreenButton";
-import LottieAnimation from "@/lotties/v1/hand-and-stars.json";
-import Lottie from "lottie-react";
+import { DotLottiePlayer } from "@dotlottie/react-player";

 function EmailConfirmPage() {
  const navigate = useNavigate();
@ -26,10 +25,11 @@ function EmailConfirmPage() {
      />
      <Header className={styles.header} />
      <div className={styles["top-section"]}>
-        <Lottie
+        <DotLottiePlayer
          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,8 +6,7 @@ import routes from "@/routes";
 import { useDynamicSize } from "@/hooks/useDynamicSize";
 import BackgroundTopBlob from "../../ui/BackgroundTopBlob";
 import Header from "../../components/Header";
-import LottieAnimation from "@/lotties/v1/zodiac-signs-map.json";
-import Lottie from "lottie-react";
+import { DotLottiePlayer } from "@dotlottie/react-player";

 function GoalSetupPage() {
  const navigate = useNavigate();
@ -30,9 +29,9 @@ function GoalSetupPage() {
      />
      <Header isBackButtonVisible={false} />
      <div className={styles["image-container"]}>
-        <Lottie
-          animationData={LottieAnimation}
+        <DotLottiePlayer
          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,6 +76,9 @@

 .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,8 +7,7 @@ import { selectors } from "@/store";
 import { useSelector } from "react-redux";
 import { getZodiacSignByDate } from "@/services/zodiac-sign";
 import Header from "../../components/Header";
-import Lottie from "lottie-react";
-import LottieUmbrella from "@/lotties/v1/umbrella.json";
+import { DotLottiePlayer } from "@dotlottie/react-player";

 function NotAlonePage() {
  const navigate = useNavigate();
@ -29,7 +28,11 @@ function NotAlonePage() {
        isBackButtonVisible={false}
        classNameTitle={styles["header-title"]}
      />
-      <Lottie loop={false} animationData={LottieUmbrella} />
+      <DotLottiePlayer
+        src="https://lottie.host/e353e80c-fd4a-4eca-a930-d9bf923466e0/G4sxbtkhIA.lottie"
+        autoplay
+        loop={false}
+      />
      <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,8 +9,7 @@ import { getZodiacSignByDate } from "@/services/zodiac-sign";
 import { useDynamicSize } from "@/hooks/useDynamicSize";
 import Header from "../../components/Header";
 import BackgroundTopBlob from "../../ui/BackgroundTopBlob";
-import LottieScalesHeart from "@/lotties/v1/compass.json";
-import Lottie from "lottie-react";
+import { DotLottiePlayer } from "@dotlottie/react-player";

 function PartnerThingPage() {
  const navigate = useNavigate();
@ -35,7 +34,11 @@ function PartnerThingPage() {
      />
      <Header isBackButtonVisible={false} />
      <div className={styles.circle}>
-        <Lottie loop={false} animationData={LottieScalesHeart} />
+        <DotLottiePlayer
+          src="https://lottie.host/15b235d7-b8c9-487f-8d65-73143afc9ecc/czTjX9Lwp1.lottie"
+          autoplay
+          loop={false}
+        />
      </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,10 +5,9 @@ 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 Lottie from "lottie-react";
+import { DotLottiePlayer } from "@dotlottie/react-player";

 function QuestionnaireIntermediatePage() {
  const navigate = useNavigate();
@ -45,7 +44,11 @@ function QuestionnaireIntermediatePage() {
        isBackButtonVisible={false}
        classNameTitle={styles["header-title"]}
      />
-      <Lottie loop={false} animationData={LottieKey} />
+      <DotLottiePlayer
+        src="https://lottie.host/a80ec293-6f3d-4d21-a19e-9dfb40b86a14/clQys1OEAL.lottie"
+        autoplay
+        loop={false}
+      />
      <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,8 +4,7 @@ import MainButton from "@/components/MainButton";
 import { useNavigate } from "react-router-dom";
 import routes from "@/routes";
 import Header from "../../components/Header";
-import LottieAnimation from "@/lotties/v1/magnifyingGlassAndPlanet.json";
-import Lottie from "lottie-react";
+import { DotLottiePlayer } from "@dotlottie/react-player";

 function RelationshipAlmostTherePage() {
  const navigate = useNavigate();
@ -24,7 +23,11 @@ function RelationshipAlmostTherePage() {
        classNameTitle={styles["header-title"]}
        isBackButtonVisible={false}
      />
-      <Lottie animationData={LottieAnimation} loop={false} />
+      <DotLottiePlayer
+        src="https://lottie.host/7e1e77e6-46a3-4122-8584-7555539d1b15/ASrDx8yoMC.lottie"
+        autoplay
+        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,9 +7,7 @@ import { selectors } from "@/store";
 import { useSelector } from "react-redux";
 import { getZodiacSignByDate } from "@/services/zodiac-sign";
 import Header from "../../components/Header";
-import LottieSun from "@/lotties/v1/sun.json";
-import LottieUmbrella from "@/lotties/v1/umbrella.json";
-import Lottie from "lottie-react";
+import { DotLottiePlayer } from "@dotlottie/react-player";

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

 function WithHeadPage() {
  const navigate = useNavigate();
@ -35,10 +34,11 @@ function WithHeadPage() {
      />
      <Header isBackButtonVisible={false} />
      <div className={styles["image-container"]}>
-        <Lottie
+        <DotLottiePlayer
          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,8 +9,7 @@ import { getZodiacSignByDate } from "@/services/zodiac-sign";
 import { useDynamicSize } from "@/hooks/useDynamicSize";
 import BackgroundTopBlob from "../../ui/BackgroundTopBlob";
 import Header from "../../components/Header";
-import LottieScalesHeart from "@/lotties/v1/scales-heart.json";
-import Lottie from "lottie-react";
+import { DotLottiePlayer } from "@dotlottie/react-player";

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