fix: breath page, onboarding compatibility, create profile items size, home page

src/components/BreathPage/index.tsx

@@ -40,7 +40,7 @@ function BreathPage({ leoApng }: BreathPageProps): JSX.Element {
 
     const navigateTimeOut = setTimeout(() => {
       navigate(routes.client.breathResult());
-    }, 60_000);
+    }, 50_000);
 
     return () => {
       clearTimeout(navigateTimeOut);
@@ -106,26 +106,7 @@ function BreathPage({ leoApng }: BreathPageProps): JSX.Element {
   useApiCall<UserCallbacks.IUserCallbacks>(createCallback);
 
   const handleCross = () => {
-    if (homeConfig.pathFromHome === EPathsFromHome.compatibility) {
+    navigate(routes.client.breathResult());
-      dispatch(
-        actions.siteConfig.update({
-          home: {
-            pathFromHome: EPathsFromHome.compatibility,
-            isShowNavbar: true,
-          },
-        })
-      );
-      return navigate(routes.client.home());
-    }
-    if (homeConfig.pathFromHome === EPathsFromHome.breath) {
-      dispatch(
-        actions.siteConfig.update({
-          home: { pathFromHome: EPathsFromHome.breath, isShowNavbar: false },
-        })
-      );
-      return navigate(routes.client.compatibility());
-    }
-    return navigate(routes.client.home());
   };
 
   return (

src/components/Compatibility/index.tsx

@@ -26,24 +26,29 @@ function CompatibilityPage(): JSX.Element {
   const { t, i18n } = useTranslation();
   const navigate = useNavigate();
   const dispatch = useDispatch();
-  const [isDisabled, setIsDisabled] = useState(true);
-  const [isDisabledName, setIsDisabledName] = useState(true);
-  const [isDisabledDate, setIsDisabledDate] = useState(true);
-  const [isChangeDate, setIsChangeDate] = useState(false);
-  const [currentOnboarding, setCurrentOnboarding] = useState(0);
-  const [name, setName] = useState<string>("");
-  const [selectedDate, setSelectedDate] = useState<string | IDate>("");
-  const [compatCategory, setCompatCategory] = useState(1);
   const homeConfig = useSelector(selectors.selectHome);
   const showNavbarFooter = homeConfig.isShowNavbar;
   const birthdate = useSelector(selectors.selectBirthdate);
   const onboardingCompatibility = useSelector(
     selectors.selectOnboardingCompatibility
   );
+  
+  const [isDisabled, setIsDisabled] = useState(true);
+  const [isDisabledName, setIsDisabledName] = useState(true);
+  const [isDisabledSelfName, setIsDisabledSelfName] = useState(true);
+  isDisabledSelfName;
+  const [isDisabledDate, setIsDisabledDate] = useState(true);
+  const [isChangeDate, setIsChangeDate] = useState(false);
+  const [currentOnboarding, setCurrentOnboarding] = useState(0);
+  const [name, setName] = useState<string>("");
+  const [selfName, setSelfName] = useState<string>("");
+  const [selectedDate, setSelectedDate] = useState<string | IDate>("");
+  const [compatCategory, setCompatCategory] = useState(1);
   const zodiacSign = getZodiacSignByDate(birthdate);
   const [asset, setAsset] = useState<Asset>();
   const api = useApi();
-  const inputRef = useRef<HTMLInputElement>(null);
+  const inputSelfNameRef = useRef<HTMLInputElement>(null);
+  const inputNameRef = useRef<HTMLInputElement>(null);
   const dateRef = useRef<HTMLInputElement>(null);
   const categoriesRef = useRef<HTMLInputElement>(null);
   const mainButtonRef = useRef<HTMLInputElement>(null);
@@ -123,6 +128,14 @@ function CompatibilityPage(): JSX.Element {
   }, [api, locale]);
   const { data } = useApiCall<AICompatCategories.CompatCategory[]>(loadData);
 
+  const handleValidSelfName = (name: string) => {
+    console.log(name);
+    
+    setIsDisabledSelfName(!name.length);
+    setSelfName(name);
+    checkAllDisabled();
+  };
+
   const handleValidName = (name: string) => {
     setIsDisabledName(!name.length);
     setName(name);
@@ -137,6 +150,7 @@ function CompatibilityPage(): JSX.Element {
   };
 
   const checkAllDisabled = () => {
+    // isDisabledSelfName
     setIsDisabled(isDisabledName || isDisabledDate);
   };
 
@@ -144,10 +158,9 @@ function CompatibilityPage(): JSX.Element {
     setCompatCategory(parseInt(event.target.value));
   };
 
-  const handleNameOnboarding = () => {
+  const scrollToElementOnboarding = (nextOnboarding: number, ref: HTMLElement | null) => {
-    if (!name.length) return;
+    setCurrentOnboarding(nextOnboarding);
-    setCurrentOnboarding(1);
+    ref?.scrollIntoView({ behavior: "smooth" });
-    dateRef.current?.scrollIntoView({ behavior: "smooth" });
   };
 
   return (
@@ -166,33 +179,81 @@ function CompatibilityPage(): JSX.Element {
         {t("compatibility")}
       </Title> */}
       <div className={styles.content}>
-        <Title variant="h2" className={styles.iam}>
+        {onboardingCompatibility && (
-          {t("iAm")}
+          <Title variant="h2" className={styles.iam}>
-        </Title>
+            {t("iAm")}
+          </Title>
+        )}
+        {!onboardingCompatibility && (
+          <div
+            className={styles["input-container__name-container"]}
+            style={{ zIndex: currentOnboarding === 0 ? 100 : 1 }}
+            ref={inputSelfNameRef}
+          >
+            <NameInput
+              name="selfName"
+              value={selfName}
+              placeholder={t("au.name.my_name")}
+              onKeyDown={(e) => {
+                if (!selfName.length) return;
+                if (e.key === "Enter") {
+                  (e.target as HTMLInputElement).blur();
+                }
+              }}
+              onValid={handleValidSelfName}
+              onInvalid={() => setIsDisabledSelfName(true)}
+              onBlur={() => {
+                if (!selfName.length) return;
+                setCurrentOnboarding(1);
+                inputNameRef.current?.scrollIntoView({ behavior: "smooth" });
+              }}
+            />
+          </div>
+        )}
         <Title variant="h3" className={styles.plus}>
           +
         </Title>
         <div className={styles["inputs-container"]}>
-          {!onboardingCompatibility?.isShown && (
+          {!onboardingCompatibility && (
             <>
               {currentOnboarding === 0 && (
                 <Onboarding
-                  targetRef={inputRef.current as HTMLDivElement}
+                  targetRef={inputSelfNameRef.current as HTMLDivElement}
                   isShow={currentOnboarding === 0}
                   direction={EDirectionOnboarding.BOTTOM}
                   showBackground={true}
+                >
+                  <TextWithFinger
+                    text={t("au.onboarding.my_name")}
+                    direction={EDirectionOnboarding.BOTTOM}
+                    crossClickHandler={() => {
+                      if (!selfName.length) return;
+                      scrollToElementOnboarding(1, inputNameRef.current);
+                    }}
+                  />
+                </Onboarding>
+              )}
+              {currentOnboarding === 1 && (
+                <Onboarding
+                  targetRef={inputNameRef.current as HTMLDivElement}
+                  isShow={currentOnboarding === 1}
+                  direction={EDirectionOnboarding.BOTTOM}
+                  showBackground={true}
                 >
                   <TextWithFinger
                     text={t("au.web_onbording.name")}
                     direction={EDirectionOnboarding.BOTTOM}
-                    crossClickHandler={handleNameOnboarding}
+                    crossClickHandler={() => {
+                      if (!name.length) return;
+                      scrollToElementOnboarding(2, dateRef.current);
+                    }}
                   />
                 </Onboarding>
               )}
-              {currentOnboarding === 1 && (
+              {currentOnboarding === 2 && (
                 <Onboarding
                   targetRef={dateRef.current as HTMLDivElement}
-                  isShow={currentOnboarding === 1}
+                  isShow={currentOnboarding === 2}
                   direction={EDirectionOnboarding.BOTTOM}
                   showBackground={true}
                 >
@@ -200,7 +261,7 @@ function CompatibilityPage(): JSX.Element {
                     <button
                       className={styles["compatibility-onboarding__button"]}
                       disabled={!isChangeDate}
-                      onClick={() => setCurrentOnboarding(2)}
+                      onClick={() => setCurrentOnboarding(3)}
                     >
                       Done
                     </button>
@@ -212,10 +273,10 @@ function CompatibilityPage(): JSX.Element {
                   </>
                 </Onboarding>
               )}
-              {currentOnboarding === 3 && (
+              {currentOnboarding === 4 && (
                 <Onboarding
                   targetRef={mainButtonRef.current as HTMLDivElement}
-                  isShow={currentOnboarding === 3}
+                  isShow={currentOnboarding === 4}
                   direction={EDirectionOnboarding.TOP}
                   showBackground={true}
                 >
@@ -230,13 +291,13 @@ function CompatibilityPage(): JSX.Element {
           )}
           <div
             className={styles["input-container__name-container"]}
-            style={{ zIndex: currentOnboarding === 0 ? 99 : 1 }}
+            style={{ zIndex: currentOnboarding === 1 ? 99 : 1 }}
-            ref={inputRef}
+            ref={inputNameRef}
           >
             <NameInput
               name="name"
               value={name}
-              placeholder={t("name")}
+              placeholder={t("au.name.person")}
               onKeyDown={(e) => {
                 if (!name.length) return;
                 if (e.key === "Enter") {
@@ -247,23 +308,23 @@ function CompatibilityPage(): JSX.Element {
               onInvalid={() => setIsDisabledName(true)}
               onBlur={() => {
                 if (!name.length) return;
-                setCurrentOnboarding(1);
+                setCurrentOnboarding(2);
                 dateRef.current?.scrollIntoView({ behavior: "smooth" });
               }}
             />
           </div>
           <div
             className={styles["input-container__date-container"]}
-            style={{ zIndex: currentOnboarding === 1 ? 99 : 1 }}
+            style={{ zIndex: currentOnboarding === 2 ? 99 : 1 }}
             ref={dateRef}
           >
             <DatePicker onDateChange={handleValidDate} />
           </div>
         </div>
-        {currentOnboarding === 2 && !onboardingCompatibility?.isShown && (
+        {currentOnboarding === 3 && !onboardingCompatibility && (
           <Onboarding
             targetRef={categoriesRef.current as HTMLDivElement}
-            isShow={currentOnboarding === 2}
+            isShow={currentOnboarding === 3}
             direction={EDirectionOnboarding.TOP}
             showBackground={true}
           >
@@ -271,21 +332,21 @@ function CompatibilityPage(): JSX.Element {
               text={t("au.web_onbording.category")}
               direction={EDirectionOnboarding.TOP}
               showCross={true}
-              crossClickHandler={() => setCurrentOnboarding(3)}
+              crossClickHandler={() => setCurrentOnboarding(4)}
             />
           </Onboarding>
         )}
         {data && data.length && (
           <div
             className={styles["compatibility-categories"]}
-            style={{ zIndex: currentOnboarding === 2 ? 99 : 1 }}
+            style={{ zIndex: currentOnboarding === 3 ? 99 : 1 }}
             ref={categoriesRef}
           >
             {data.map((item, index) => (
               <div
                 className="compatibility-categories__item"
                 key={index}
-                onClick={() => setCurrentOnboarding(3)}
+                onClick={() => setCurrentOnboarding(4)}
               >
                 <input
                   className={`${styles["compatibility-categories__input"]} ${
@@ -308,7 +369,7 @@ function CompatibilityPage(): JSX.Element {
         <div
           style={{
             position: "relative",
-            zIndex: currentOnboarding === 3 ? 99 : 1,
+            zIndex: currentOnboarding === 4 ? 99 : 1,
           }}
           ref={mainButtonRef}
         >

src/components/CreateProfilePage/ProcessFlow.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import ProcessItem from "./ProcessItem"
 import styles from './styles.module.css'
 
@@ -32,15 +32,28 @@ const getMultiplier = (currentIdx: number, length: number): number => {
   return Math.max(length - (currentIdx + 1) - 1, 0)
 }
 
-const calculateTop = (currentIdx: number, length: number): number => {
+const calculateTop = (currentIdx: number, length: number, items: HTMLDivElement[]): number => {
-  const itemHeight = 63
+
-  return getMultiplier(currentIdx, length) * itemHeight
+  return items.slice(currentIdx + 2).reduce((accumulator, item) => {
+    if (!item) return accumulator;
+    return accumulator + item.clientHeight
+  }, 1) + 8 * getMultiplier(currentIdx, length)
+  
+  // const itemHeight = 63
+  // return getMultiplier(currentIdx, length) * itemHeight1?.clientHeight
 }
 
 function ProcessFlow({ items, onDone }: ProcessFlowProps): JSX.Element {
   const [status, setStatus] = useState(ProcessStatus.Idle)
   const [doneTaskIdx, setDoneTaskIdx] = useState(-1)
+  const itemsRef = useRef([] as HTMLDivElement[]);
   const tasks = items.map(({ task }) => task)
+  const [rerender, setRerender] = useState(false);
+  rerender
+
+  useEffect(() => {
+    setRerender((prev) => !prev);
+  }, [itemsRef])
 
   useEffect(() => {
     if (status !== ProcessStatus.Idle) return
@@ -54,8 +67,9 @@ function ProcessFlow({ items, onDone }: ProcessFlowProps): JSX.Element {
     return <ProcessItem
       key={idx}
       label={label}
-      top={calculateTop(doneTaskIdx, items.length)}
+      top={calculateTop(doneTaskIdx, items.length, itemsRef.current)}
       isDone={idx <= doneTaskIdx}
+      refItem={(el) => (itemsRef.current[idx] = el as HTMLDivElement)}
     />
   }
   return (

src/components/CreateProfilePage/ProcessItem.tsx

@@ -1,3 +1,4 @@
+import { LegacyRef } from "react"
 import Loader, { LoaderColor } from "../Loader"
 import styles from "./styles.module.css"
 
@@ -5,12 +6,13 @@ type ProcessItemProps = {
   top: number
   label: string
   isDone: boolean
+  refItem: LegacyRef<HTMLDivElement>
 }
 
-function ProcessItem({ top, label, isDone }: ProcessItemProps): JSX.Element {
+function ProcessItem({ top, label, isDone, refItem }: ProcessItemProps): JSX.Element {
 
   return (
-    <div className={styles['process-item']} style={{ top: top }}>
+    <div ref={refItem} className={styles['process-item']} style={{ top: top }}>
       <div className={styles['process-item__pick']}>
         {
           isDone

src/components/CreateProfilePage/styles.module.css

@@ -43,9 +43,9 @@
 
 .process-item {
   display: flex;
-  font-size: 24px;
+  font-size: 20px;
   font-weight: 400;
-  margin-bottom: 24px;
+  margin-bottom: 8px;
   line-height: 32px;
   position: relative;
   transition: top 0.4s ease-in-out;

src/components/HomePage/index.tsx

@@ -202,7 +202,8 @@ function HomePage(): JSX.Element {
                   variant="h3"
                   className={styles["content__daily-forecast-title"]}
                 >
-                  {forecast.category}
+                  {/* {forecast.category} */}
+                  {t("aura.personal_aura.button")}
                 </Title>
                 <p className={styles["content__daily-forecast-body"]}>
                   {forecast.body}

src/store/compatibility.ts

@@ -5,6 +5,7 @@ import type { PayloadAction } from "@reduxjs/toolkit";
 interface ICompatibility {
   rightUser: IUser;
   categoryId: number;
+  selfName: string;
 }
 
 interface IUser {
@@ -18,6 +19,7 @@ const initialState: ICompatibility = {
     birthDate: "",
   },
   categoryId: 1,
+  selfName: "I am",
 };
 
 const compatibilitySlice = createSlice({
@@ -25,7 +27,7 @@ const compatibilitySlice = createSlice({
   initialState,
   reducers: {
     update(state, action: PayloadAction<Partial<ICompatibility>>) {
-      return { ...state, ...action.payload };
+      return { ...initialState, ...state, ...action.payload };
     },
   },
   extraReducers: (builder) => builder.addCase("reset", () => initialState),
@@ -40,4 +42,8 @@ export const selectCategoryId = createSelector(
   (state: { compatibility: ICompatibility }) => state.compatibility.categoryId,
   (compatibility) => compatibility
 );
+export const selectSelfName = createSelector(
+  (state: { compatibility: ICompatibility }) => state.compatibility.selfName,
+  (compatibility) => compatibility
+);
 export default compatibilitySlice.reducer;

src/store/index.ts

@@ -32,7 +32,7 @@ import subscriptionPlans, {
 } from "./subscriptionPlan";
 import status, { actions as userStatusActions, selectStatus } from "./status";
 import compatibility, {
-  actions as compatibilityActions,
+  actions as compatibilityActions, selectSelfName,
 } from "./compatibility";
 import userCallbacks, {
   actions as userCallbacksActions,
@@ -68,6 +68,7 @@ export const selectors = {
   selectPlanById,
   selectAuraCoordinates,
   selectRightUser,
+  selectSelfName,
   selectCategoryId,
   selectSelectedPrice,
   selectUserCallbacksDescription,