fix: fix error store and edits

package-lock.json

@@ -33,7 +33,7 @@
         "@vitejs/plugin-react": "^4.0.0",
         "eslint": "^8.41.0",
         "eslint-plugin-react-hooks": "^4.6.0",
-        "eslint-plugin-react-refresh": "^0.4.1",
+        "eslint-plugin-react-refresh": "^0.4.3",
         "typescript": "^5.0.4",
         "vite": "^4.3.8"
       }
@@ -1756,9 +1756,9 @@
       }
     },
     "node_modules/eslint-plugin-react-refresh": {
-      "version": "0.4.1",
+      "version": "0.4.3",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-react-refresh/-/eslint-plugin-react-refresh-0.4.1.tgz",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react-refresh/-/eslint-plugin-react-refresh-0.4.3.tgz",
-      "integrity": "sha512-QgrvtRJkmV+m4w953LS146+6RwEe5waouubFVNLBfOjXJf6MLczjymO8fOcKj9jMS8aKkTCMJqiPu2WEeFI99A==",
+      "integrity": "sha512-Hh0wv8bUNY877+sI0BlCUlsS0TYYQqvzEwJsJJPM2WF4RnTStSnSR3zdJYa2nPOJgg3UghXi54lVyMSmpCalzA==",
       "dev": true,
       "peerDependencies": {
         "eslint": ">=7"
@@ -4627,9 +4627,9 @@
       "requires": {}
     },
     "eslint-plugin-react-refresh": {
-      "version": "0.4.1",
+      "version": "0.4.3",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-react-refresh/-/eslint-plugin-react-refresh-0.4.1.tgz",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react-refresh/-/eslint-plugin-react-refresh-0.4.3.tgz",
-      "integrity": "sha512-QgrvtRJkmV+m4w953LS146+6RwEe5waouubFVNLBfOjXJf6MLczjymO8fOcKj9jMS8aKkTCMJqiPu2WEeFI99A==",
+      "integrity": "sha512-Hh0wv8bUNY877+sI0BlCUlsS0TYYQqvzEwJsJJPM2WF4RnTStSnSR3zdJYa2nPOJgg3UghXi54lVyMSmpCalzA==",
       "dev": true,
       "requires": {}
     },

package.json

@@ -35,7 +35,7 @@
     "@vitejs/plugin-react": "^4.0.0",
     "eslint": "^8.41.0",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react-refresh": "^0.4.1",
+    "eslint-plugin-react-refresh": "^0.4.3",
     "typescript": "^5.0.4",
     "vite": "^4.3.8"
   }

src/components/App/index.tsx

@@ -225,9 +225,7 @@ function Layout({ setIsSpecialOfferOpen }: LayoutProps): JSX.Element {
       {showNavbar ? (
         <Navbar isOpen={isMenuOpen} closeMenu={() => setIsMenuOpen(false)} />
       ) : null}
-      {
+      {showNavbarFooter && hasNavbarFooter(location.pathname) ? (
-      // showNavbarFooter && 
-      hasNavbarFooter(location.pathname) ? (
         <NavbarFooter items={navbarItems} />
       ) : null}
     </div>

src/components/Compatibility/index.tsx

@@ -18,8 +18,9 @@ import {
 } from "@/services/zodiac-sign";
 import { Asset } from "@/api/resources/Assets";
 import { getRandomArbitrary } from "@/services/random-value";
-import Onboarding, { EDirectionOnboarding } from "../Onboarding";
+import Onboarding from "../Onboarding";
 import TextWithFinger from "../TextWithFinger";
+import { EDirectionOnboarding } from "@/types";
 
 function CompatibilityPage(): JSX.Element {
   const { t, i18n } = useTranslation();
@@ -143,6 +144,12 @@ function CompatibilityPage(): JSX.Element {
     setCompatCategory(parseInt(event.target.value));
   };
 
+  const handleNameOnboarding = () => {
+    if (!name.length) return;
+    setCurrentOnboarding(1);
+    dateRef.current?.scrollIntoView({ behavior: "smooth" });
+  };
+
   return (
     <section
       className={`${styles.page} page`}
@@ -166,59 +173,61 @@ function CompatibilityPage(): JSX.Element {
           +
         </Title>
         <div className={styles["inputs-container"]}>
-          {!onboardingCompatibility.isShown && <>
+          {!onboardingCompatibility?.isShown && (
-            {currentOnboarding === 0 && (
+            <>
-              <Onboarding
+              {currentOnboarding === 0 && (
-                targetRef={inputRef.current as HTMLDivElement}
+                <Onboarding
-                isShow={currentOnboarding === 0}
+                  targetRef={inputRef.current as HTMLDivElement}
-                direction={EDirectionOnboarding.BOTTOM}
+                  isShow={currentOnboarding === 0}
-                showBackground={true}
-              >
-                <TextWithFinger
-                  text={t("au.web_onbording.name")}
                   direction={EDirectionOnboarding.BOTTOM}
-                  crossClickHandler={() => setCurrentOnboarding(1)}
+                  showBackground={true}
-                />
+                >
-              </Onboarding>
-            )}
-            {currentOnboarding === 1 && (
-              <Onboarding
-                targetRef={dateRef.current as HTMLDivElement}
-                isShow={currentOnboarding === 1}
-                direction={EDirectionOnboarding.BOTTOM}
-                showBackground={true}
-              >
-                <>
-                  <button
-                    className={styles["compatibility-onboarding__button"]}
-                    disabled={!isChangeDate}
-                    onClick={() => setCurrentOnboarding(2)}
-                  >
-                    Done
-                  </button>
                   <TextWithFinger
-                    text={t("au.web_onbording.date")}
+                    text={t("au.web_onbording.name")}
                     direction={EDirectionOnboarding.BOTTOM}
+                    crossClickHandler={handleNameOnboarding}
+                  />
+                </Onboarding>
+              )}
+              {currentOnboarding === 1 && (
+                <Onboarding
+                  targetRef={dateRef.current as HTMLDivElement}
+                  isShow={currentOnboarding === 1}
+                  direction={EDirectionOnboarding.BOTTOM}
+                  showBackground={true}
+                >
+                  <>
+                    <button
+                      className={styles["compatibility-onboarding__button"]}
+                      disabled={!isChangeDate}
+                      onClick={() => setCurrentOnboarding(2)}
+                    >
+                      Done
+                    </button>
+                    <TextWithFinger
+                      text={t("au.web_onbording.date")}
+                      direction={EDirectionOnboarding.BOTTOM}
+                      showCross={false}
+                    />
+                  </>
+                </Onboarding>
+              )}
+              {currentOnboarding === 3 && (
+                <Onboarding
+                  targetRef={mainButtonRef.current as HTMLDivElement}
+                  isShow={currentOnboarding === 3}
+                  direction={EDirectionOnboarding.TOP}
+                  showBackground={true}
+                >
+                  <TextWithFinger
+                    text={""}
+                    direction={EDirectionOnboarding.TOP}
                     showCross={false}
                   />
-                </>
+                </Onboarding>
-              </Onboarding>
+              )}
-            )}
+            </>
-            {currentOnboarding === 3 && (
+          )}
-              <Onboarding
-                targetRef={mainButtonRef.current as HTMLDivElement}
-                isShow={currentOnboarding === 3}
-                direction={EDirectionOnboarding.TOP}
-                showBackground={true}
-              >
-                <TextWithFinger
-                  text={""}
-                  direction={EDirectionOnboarding.TOP}
-                  showCross={false}
-                />
-              </Onboarding>
-            )}
-          </>}
           <div
             className={styles["input-container__name-container"]}
             style={{ zIndex: currentOnboarding === 0 ? 99 : 1 }}
@@ -251,7 +260,7 @@ function CompatibilityPage(): JSX.Element {
             <DatePicker onDateChange={handleValidDate} />
           </div>
         </div>
-        {currentOnboarding === 2 && !onboardingCompatibility.isShown && (
+        {currentOnboarding === 2 && !onboardingCompatibility?.isShown && (
           <Onboarding
             targetRef={categoriesRef.current as HTMLDivElement}
             isShow={currentOnboarding === 2}

src/components/HomePage/index.tsx

@@ -46,7 +46,7 @@ function HomePage(): JSX.Element {
   const onboardingConfigHome = useSelector(selectors.selectOnboardingHome);
 
   const [isShowOnboardingHome, setIsShowOnboardingHome] = useState(
-    !onboardingConfigHome.isShown
+    !onboardingConfigHome?.isShown
   );
 
   useEffect(() => {
@@ -166,7 +166,10 @@ function HomePage(): JSX.Element {
               isShowNavbar ? styles["content__buttons--hidden"] : ""
             }`}
           >
-            <Onboarding targetRef={buttonsRef.current as HTMLDivElement} isShow={isShowOnboardingHome}>
+            <Onboarding
+              targetRef={buttonsRef.current as HTMLDivElement}
+              isShow={isShowOnboardingHome}
+            >
               <TextWithFinger
                 text={t("au.web_onbording.start")}
                 crossClickHandler={() => setIsShowOnboardingHome(false)}

src/components/Navbar/index.tsx

@@ -1,5 +1,5 @@
 import { useTranslation } from 'react-i18next'
-import { Link } from 'react-router-dom'
+import { Link, useNavigate } from 'react-router-dom'
 import { useAuth } from '@/auth'
 import { useLegal } from '@/legal'
 import routes from '@/routes'
@@ -15,8 +15,15 @@ const capitalize = (str: string) => str.charAt(0).toUpperCase() + str.slice(1)
 function Navbar({ isOpen, closeMenu }: NavbarProps): JSX.Element {
   const { logout } = useAuth()
   const { t } = useTranslation()
+  const navigate = useNavigate()
   const legal = useLegal()
   const combinedClassNames = ['navbar', isOpen && 'navbar--open'].filter(Boolean).join(' ')
+
+  const handleLogout = () => {
+    navigate(routes.client.birthday())
+    logout()
+  }
+
   return (
     <aside className={combinedClassNames}>
       <div className='navbar__overlay' onClick={closeMenu}></div>
@@ -37,7 +44,7 @@ function Navbar({ isOpen, closeMenu }: NavbarProps): JSX.Element {
             {t('contact_us')}
           </a>
           <hr />
-          <a href='#' onClick={logout}>Log Out</a>
+          <a href='#' onClick={handleLogout}>Log Out</a>
         </nav>
       </div>
     </aside>

src/components/NavbarFooter/index.tsx

@@ -1,7 +1,7 @@
 import { Link } from "react-router-dom";
 import styles from "./styles.module.css";
 import Onboarding from "../Onboarding";
-import { useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import TextWithFinger from "../TextWithFinger";
 import { useDispatch, useSelector } from "react-redux";
 import { actions, selectors } from "@/store";
@@ -28,11 +28,18 @@ function NavbarFooter({ items }: INavbarHomeProps): JSX.Element {
   );
 
   const [isShowOnboardingNavbarFooter, setIsShowOnboardingNavbarFooter] =
-    useState(!onboardingConfigNavbarFooter.isShown);
+    useState(!onboardingConfigNavbarFooter?.isShown);
   const [selectedOnboarding, setSelectedOnboarding] = useState(3);
+  const [rerender, setRerender] = useState(false);
+  console.log(rerender);
 
   const buttonsRef = useRef([] as HTMLDivElement[]);
 
+  useEffect(() => {
+    setRerender((prev) => !prev);
+  }, [buttonsRef])
+  
+
   const setShownOnboarding = () => {
     setIsShowOnboardingNavbarFooter(false);
     dispatch(

src/components/Onboarding/index.tsx

@@ -1,12 +1,6 @@
 import { useEffect, useRef, useState } from "react";
 import styles from "./styles.module.css";
-
+import { EDirectionOnboarding } from "@/types";
-export enum EDirectionOnboarding {
-  LEFT = "left",
-  RIGHT = "right",
-  TOP = "top",
-  BOTTOM = "bottom",
-}
 
 interface OnboardingProps {
   targetRef: HTMLElement;
@@ -34,8 +28,7 @@ const getCoordinates = (
             targetRef.offsetTop +
             targetRef.offsetHeight / 2 -
             onboardingRef.current.offsetHeight / 2,
-          left:
+          left: targetRef.offsetLeft - onboardingRef.current.offsetWidth,
-            targetRef.offsetLeft - onboardingRef.current.offsetWidth,
         };
       case EDirectionOnboarding.RIGHT:
         return {
@@ -84,7 +77,7 @@ function Onboarding({
   isShow,
   direction = EDirectionOnboarding.TOP,
   showBackground = false,
-  classNameContainer = '',
+  classNameContainer = "",
   children,
 }: OnboardingProps): JSX.Element {
   const onboardingRef = useRef<HTMLDivElement>(null);
@@ -93,21 +86,29 @@ function Onboarding({
     left: 0,
   });
   useEffect(() => {
+    if (!onboardingRef.current || !targetRef) {
+      return;
+    }
     setCoordinates(getCoordinates(targetRef, direction, onboardingRef));
   }, [direction, targetRef, children]);
-  const [top, left] = [coordinates.top, coordinates.left];
 
   if (!isShow) {
     return <></>;
   }
 
   return (
-    <div className={getClassNameContainer(direction, showBackground, classNameContainer)}>
+    <div
+      className={getClassNameContainer(
+        direction,
+        showBackground,
+        classNameContainer
+      )}
+    >
       <div
         className={`${styles["onboarding"]} ${
           !targetRef || !onboardingRef.current ? styles["hide"] : ""
         }`}
-        style={{ top: `${top}px`, left: `${left}px` }}
+        style={{ top: `${coordinates.top}px`, left: `${coordinates.left}px` }}
         ref={onboardingRef}
       >
         {children}

src/components/TextWithFinger/index.tsx

@@ -1,4 +1,4 @@
-import { EDirectionOnboarding } from "../Onboarding";
+import { EDirectionOnboarding } from "@/types";
 import styles from "./styles.module.css";
 
 interface TextWithFingerProps {

src/store/index.ts

@@ -47,19 +47,6 @@ import {
 } from "./userCallbacks";
 
 const preloadedState = loadStore();
-export const reducer = combineReducers({
-  token,
-  user,
-  form,
-  status,
-  subscriptionPlans,
-  aura,
-  payment,
-  compatibility,
-  userCallbacks,
-  siteConfig,
-  onboardingConfig,
-});
 export const actions = {
   token: tokenActions,
   user: userActions,
@@ -94,6 +81,21 @@ export const selectors = {
   selectOnboardingNavbarFooter,
   ...formSelectors,
 };
+
+export const reducer = combineReducers({
+  token,
+  user,
+  form,
+  status,
+  subscriptionPlans,
+  aura,
+  payment,
+  compatibility,
+  userCallbacks,
+  siteConfig,
+  onboardingConfig,
+});
+
 export type RootState = ReturnType<typeof reducer>;
 export const store = configureStore({
   reducer,

src/store/onboarding.ts

@@ -36,7 +36,7 @@ const onboardingConfigSlice = createSlice({
   initialState,
   reducers: {
     update(state, action: PayloadAction<Partial<IOnboardingConfig>>) {
-      return { ...state, ...action.payload };
+      return { ...initialState, ...state, ...action.payload };
     },
   },
   extraReducers: (builder) => builder.addCase("reset", () => initialState),
@@ -44,7 +44,9 @@ const onboardingConfigSlice = createSlice({
 
 export const { actions } = onboardingConfigSlice;
 export const selectOnboarding = createSelector(
-  (state: { onboardingConfig: IOnboardingConfig }) => state.onboardingConfig,
+  (state: { onboardingConfig: IOnboardingConfig }) => {
+    return state.onboardingConfig
+  },
   (onboardingConfig) => onboardingConfig
 );
 export const selectOnboardingHome = createSelector(

src/types.ts

@@ -6,6 +6,13 @@ declare global {
   }
 }
 
+export enum EDirectionOnboarding {
+  LEFT = "left",
+  RIGHT = "right",
+  TOP = "top",
+  BOTTOM = "bottom",
+}
+
 export interface FormField<T> {
   name: string
   value: T