feat: wallpaper page zodiac metas, cross compatibility result page, fix button start breath page, fix percents user aura

src/api/api.ts

@@ -18,7 +18,8 @@ import {
   AICompats,
   AIRequests,
   UserCallbacks,
-  Translations
+  Translations,
+  Zodiacs
 } from './resources'
 
 const api = {
@@ -44,6 +45,7 @@ const api = {
   createUserCallbacks: createMethod<UserCallbacks.PayloadPost, UserCallbacks.Response>(UserCallbacks.createRequestPost),
   getUserCallbacks: createMethod<UserCallbacks.PayloadGet, UserCallbacks.Response>(UserCallbacks.createRequestGet),
   getTranslations: createMethod<Translations.Payload, Translations.Response>(Translations.createRequest),
+  getZodiacs: createMethod<Zodiacs.Payload, Zodiacs.Response>(Zodiacs.createRequest),
 }
 
 export type ApiContextValue = typeof api

src/api/resources/Zodiacs.ts

@@ -0,0 +1,33 @@
+import routes from "@/routes";
+import { AuthPayload } from "../types";
+import { getAuthHeaders } from "../utils";
+
+export interface Payload extends AuthPayload {
+    zodiac: string;
+}
+
+export interface Response {
+  zodiac: Zodiac;
+}
+
+export interface Zodiac {
+  sign: string;
+  metas: ZodiacMeta[];
+  aurapic: string | null;
+  paragraphs: ZodiacParagraph[];
+}
+
+export interface ZodiacMeta {
+  value: number;
+  label: string;
+}
+
+export interface ZodiacParagraph {
+  title: string;
+  content: string[] | ZodiacParagraph[];
+}
+
+export const createRequest = ({ zodiac, token }: Payload): Request => {
+  const url = new URL(routes.server.zodiacs(zodiac));
+  return new Request(url, { method: "GET", headers: getAuthHeaders(token) });
+};

src/api/resources/index.ts

@@ -17,3 +17,4 @@ export * as AICompats from './AICompats'
 export * as AIRequests from './AIRequests'
 export * as UserCallbacks from './UserCallbacks'
 export * as Translations from './Translations'
+export * as Zodiacs from './Zodiacs'

src/components/BreathPage/index.tsx

@@ -168,7 +168,7 @@ function BreathPage(): JSX.Element {
           </div>
         )}
         <FullScreenModal isOpen={isOpenModal}>
-          <StartBreathModalChild handleBegin={beginBreath} />
+          <StartBreathModalChild handleBegin={beginBreath} isShowNavbar={showNavbarFooter} />
         </FullScreenModal>
         {!isOpenModal && !isShowPreview && (
           <div className={styles["text-container"]}>

src/components/CompatResultPage/index.tsx

@@ -40,6 +40,8 @@ function CompatResultPage(): JSX.Element {
     }
   };
 
+  const handleCompatibility = () => navigate(routes.client.compatibility());
+
   const loadData = useCallback(async () => {
     const right_bday =
       typeof rightUser.birthDate === "string"
@@ -78,10 +80,16 @@ function CompatResultPage(): JSX.Element {
   useApiCall<AICompats.ICompat | AIRequests.IAiRequest>(loadData);
 
   const getPaddingBottomPage = () => {
-    if (homeConfig.pathFromHome === EPathsFromHome.compatibility && showNavbarFooter) return "246px";
+    if (
+      homeConfig.pathFromHome === EPathsFromHome.compatibility &&
+      showNavbarFooter
+    )
+      return "246px";
     if (showNavbarFooter) return "164px";
+    if (homeConfig.pathFromHome === EPathsFromHome.compatibility)
+      return "174px";
     return "108px";
-  }
+  };
 
   return (
     <section
@@ -96,9 +104,7 @@ function CompatResultPage(): JSX.Element {
           }}
         />
       </FullScreenModal>
-      {text !== "Loading..." && !showNavbarFooter && (
-        <div className={styles.cross} onClick={handleNext}></div>
-      )}
+      <div className={styles.cross} onClick={handleCompatibility}></div>
       <div className={styles["title-container"]}>
         <Title variant="h2">{t("you_and", { user: rightUser.name })}</Title>
       </div>
@@ -110,7 +116,10 @@ function CompatResultPage(): JSX.Element {
       </div>
       {text !== "Loading..." &&
         homeConfig.pathFromHome === EPathsFromHome.compatibility && (
-          <div className={styles["button-container"]} style={{ bottom: showNavbarFooter ? "75px" : "0" }}>
+          <div
+            className={styles["button-container"]}
+            style={{ bottom: showNavbarFooter ? "72px" : "0" }}
+          >
             <p className={styles["button-container__text"]}>
               {t("now-you-know")}
             </p>

src/components/StartBreathModalChild/index.tsx

@@ -4,15 +4,19 @@ import styles from "./styles.module.css";
 
 interface IStartBreathModalChildProps {
   handleBegin: () => void;
+  isShowNavbar: boolean;
 }
 
 function StartBreathModalChild({
   handleBegin,
+  isShowNavbar=false
 }: IStartBreathModalChildProps): JSX.Element {
   const { t } = useTranslation();
+  console.log(isShowNavbar);
+  
 
   return (
-    <section className={`${styles["start-breath"]} page`}>
+    <section className={`${styles["start-breath"]} page ${isShowNavbar ? styles["show-navbar"] : ""}`}>
       {/* <div className={styles.cross} onClick={handleBegin}></div> */}
       <div className={styles.text}>
         <Title variant="h4" className={styles["breathe-title"]}>

src/components/StartBreathModalChild/styles.module.css

@@ -24,6 +24,16 @@
   border: none;
 }
 
+.show-navbar {
+  padding-top: 52px;
+  justify-content: flex-start;
+}
+
+.show-navbar .begin {
+  position: absolute;
+  bottom: 172px;
+}
+
 .symbol {
   opacity: 0;
   will-change: opacity;

src/components/WallpaperPage/index.tsx

@@ -4,16 +4,21 @@ import { useAuth } from "@/auth";
 import { useApi, useApiCall, Assets, DailyForecasts } from "@/api";
 import { saveFile, buildFilename } from "./utils";
 import Loader, { LoaderColor } from "../Loader";
-import "./styles.css";
+import styles from "./styles.module.css";
 import { useSelector } from "react-redux";
 import { selectors } from "@/store";
-import { getCategoryIdByZodiacSign, getZodiacSignByDate } from "@/services/zodiac-sign";
+import {
+  getCategoryIdByZodiacSign,
+  getZodiacSignByDate,
+} from "@/services/zodiac-sign";
+import { Zodiac } from "@/api/resources/Zodiacs";
 
 type Forecasts = DailyForecasts.Forecast[];
 type PersonalAssets = Assets.Asset[];
 interface WallpaperData {
   assets: PersonalAssets;
   forecasts: Forecasts;
+  zodiac: Zodiac;
 }
 
 function WallpaperPage(): JSX.Element {
@@ -22,7 +27,7 @@ function WallpaperPage(): JSX.Element {
   const locale = i18n.language;
   const token =
     "eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOjIzNjEyLCJpYXQiOjE2OTM0MTg5MTAsImV4cCI6MTcwMjA1ODkxMCwianRpIjoiNzg5MjkwYWItODg0YS00MGUyLTkyNjEtOWI2OGEyNjkwNmE0IiwiZW1haWwiOiJvdGhlckBleGFtcGxlLmNvbSIsInN0YXRlIjoicHJvdmVuIiwibG9jIjoiZW4iLCJ0eiI6LTI4ODAwLCJ0eXBlIjoiZW1haWwiLCJpc3MiOiJjb20ubGlmZS5hdXJhIn0.J2ocWIv5jKzuKMcwMgWMiNMyGg5qLlMAeln-bQm_9lw";
-  
+
   const {
     user,
     // token
@@ -30,15 +35,16 @@ function WallpaperPage(): JSX.Element {
   const birthdate = useSelector(selectors.selectBirthdate);
   const zodiacSign = getZodiacSignByDate(birthdate);
   const category = user?.profile.sign?.sign || "";
-  console.log(category);
-  
+
   const loadData = useCallback(async () => {
     const { asset_categories } = await api.getAssetCategories({ locale });
     const categoryId = getCategoryIdByZodiacSign(zodiacSign, asset_categories);
     return Promise.all([
-      api.getAssets({ category: String(categoryId || "1"), }),
+      api.getZodiacs({ zodiac: zodiacSign.toLowerCase(), token }),
+      api.getAssets({ category: String(categoryId || "1") }),
       api.getDailyForecasts({ token }),
-    ]).then(([{ assets }, { user_daily_forecast }]) => ({
+    ]).then(([{ zodiac }, { assets }, { user_daily_forecast }]) => ({
+      zodiac,
       assets,
       forecasts: user_daily_forecast.forecasts,
     }));
@@ -46,25 +52,46 @@ function WallpaperPage(): JSX.Element {
   const { data, isPending } = useApiCall<WallpaperData>(loadData);
   const forecasts = data ? data.forecasts : [];
   const asset = data ? data.assets.at(0) : null;
+  const zodiacInfo = data ? data.zodiac : null;
 
   const handleClick = () =>
-    asset && saveFile(asset.url.replace("http://", "https://"), buildFilename(category));
+    asset &&
+    saveFile(asset.url.replace("http://", "https://"), buildFilename(category));
 
   return (
-    <section className="wallpaper-page">
-      <div className="wallpaper-image">
-        {asset ? <img src={asset.url} alt={category} /> : null}
-        {asset ? <div className="btn-download" onClick={handleClick} /> : null}
+    <section className={styles["wallpaper-page"]}>
+      <div
+        className={styles["wallpaper-image"]}
+        style={{ backgroundImage: `url(${asset?.url})` }}
+      >
+        <div className={styles["zodiac-metas"]}>
+          {zodiacInfo?.metas.map((meta, index) => (
+            <div key={index} className={styles["zodiac-meta"]}>
+              <p className={styles["zodiac-meta-label"]}>{meta.label}</p>
+              <p className={styles["zodiac-meta-value"]}>{meta.value}</p>
+            </div>
+          ))}
+        </div>
+        {asset ? (
+          <div className={styles["btn-download"]} onClick={handleClick} />
+        ) : null}
         {isPending ? <Loader color={LoaderColor.White} /> : null}
       </div>
-      <div className="wallpaper-content">
+      <div className={styles["wallpaper-content"]}>
         {isPending ? null : (
           <>
-            <h1 className="wallpaper-title">{t("analysis_background")}</h1>
+            <h1 className={styles["wallpaper-title"]}>
+              {t("analysis_background")}
+            </h1>
             {forecasts.map((forecast) => (
-              <div key={forecast.category_name} className="wallpaper-forecast">
-                <h2 className="wallpaper-subtitle">{forecast.category}</h2>
-                <p className="wallpaper-text">{forecast.body}</p>
+              <div
+                key={forecast.category_name}
+                className={styles["wallpaper-forecast"]}
+              >
+                <h2 className={styles["wallpaper-subtitle"]}>
+                  {forecast.category}
+                </h2>
+                <p className={styles["wallpaper-text"]}>{forecast.body}</p>
               </div>
             ))}
           </>

src/components/WallpaperPage/styles.module.css

@@ -13,10 +13,14 @@
 .wallpaper-image {
   display: flex;
   justify-content: center;
-  align-items: center;
+  align-items: flex-end;
   background-color: #04040a;
   width: 100%;
   height: 500px;
+  padding: 0 32px 32px;
+  background-position: center;
+  background-size: cover;
+  background-repeat: no-repeat;
 }
 
 .wallpaper-content {
@@ -65,4 +69,32 @@
   background-position: center;
   background-size: cover;
   background-repeat: no-repeat;
+}
+
+.zodiac-metas {
+  width: 100%;
+  height: fit-content;
+  padding: 16px;
+  background-color: #5d5d5d;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  border-radius: 16px;
+}
+
+.zodiac-meta {
+  display: flex;
+  flex-direction: row;
+  font-size: 18px;
+  gap: 8px;
+}
+
+.zodiac-meta-label {
+  font-weight: 400;
+  color: #fff;
+  text-transform: uppercase;
+}
+
+.zodiac-meta-value {
+  font-weight: 700;
 }

src/routes.ts

@@ -31,6 +31,7 @@ const routes = {
     user: () => [apiHost, prefix, "user.json"].join("/"),
     token: () => [apiHost, prefix, "auth", "token.json"].join("/"),
     elements: () => [apiHost, prefix, "elements.json"].join("/"),
+    zodiacs: (zodiac: string) => [apiHost, prefix, "zodiacs", `${zodiac}.json`].join("/"),
     element: (type: string) =>
       [apiHost, prefix, "elements", `${type}.json`].join("/"),
     apps: (bundleId: string) =>