add tour for move goal feature

src/common/ZButton.tsx

@@ -0,0 +1,23 @@
+import { darkModeState } from "@src/store";
+import React from "react";
+import { useRecoilValue } from "recoil";
+
+interface ZButtonProps {
+  children: React.ReactNode;
+  onClick?: () => void;
+  className?: string;
+}
+
+const ZButton: React.FC<ZButtonProps> = ({ children, onClick, className }) => {
+  const darkModeStatus = useRecoilValue(darkModeState);
+
+  const combinedClassName = `${className} default-btn${darkModeStatus ? "-dark" : ""}`;
+
+  return (
+    <button type="button" className={combinedClassName} onClick={onClick}>
+      {children}
+    </button>
+  );
+};
+
+export default ZButton;

src/components/GoalsComponents/GoalConfigModal/ConfigGoal.tsx

@@ -4,7 +4,7 @@ import React, { useEffect, useState } from "react";
 import { Slider } from "antd";
 import { displayToast, openDevMode } from "@src/store";
 import { useRecoilState, useRecoilValue, useSetRecoilState } from "recoil";
-import { useLocation } from "react-router-dom";
+import { useLocation, useNavigate } from "react-router-dom";
 
 import plingSound from "@assets/pling.mp3";
 
@@ -20,13 +20,14 @@ import { displayAddGoal, selectedColorIndex, displayUpdateGoal, goalsHistory } f
 import { getGoal } from "@src/api/GoalsAPI";
 import ZAccordion from "@src/common/Accordion";
 import { getGoalHintItem } from "@src/api/HintsAPI";
+import { moveGoalState } from "@src/store/moveGoalState";
+import ZButton from "@src/common/ZButton";
 import { colorPalleteList, calDays, convertOnFilterToArray } from "../../../utils";
 
 import "./ConfigGoal.scss";
 import CustomDatePicker from "./CustomDatePicker";
 import HintToggle from "./ConfigGoal/HintToggle";
 import useVirtualKeyboardOpen from "../../../hooks/useVirtualKeyBoardOpen";
-import { moveGoalState } from "@src/store/moveGoalState";
 
 const onDays = [...calDays.slice(1), "Sun"];
 
@@ -49,6 +50,7 @@ const roundOffHours = (hrsValue: string) => {
 
 const ConfigGoal = ({ goal, action }: { action: "Update" | "Create"; goal: GoalItem }) => {
   const isKeyboardOpen = useVirtualKeyboardOpen();
+  const navigate = useNavigate();
 
   const { t } = useTranslation();
   const { state }: { state: ILocationState } = useLocation();
@@ -70,10 +72,8 @@ const ConfigGoal = ({ goal, action }: { action: "Update" | "Create"; goal: GoalI
   const [hints, setHints] = useState(false);
 
   const handleMove = () => {
-    setMoveGoal({
-      ...moveGoal,
-      goal,
-    });
+    setMoveGoal(goal);
+    navigate("/MyGoals", { state: { ...state, displayUpdateGoal: undefined } });
   };
 
   useEffect(() => {
@@ -323,7 +323,7 @@ const ConfigGoal = ({ goal, action }: { action: "Update" | "Create"; goal: GoalI
             onChange={(e) => setTitle(e.target.value)}
             inputMode="text"
           />
-          <button onClick={handleMove}>Move</button>
+          <ZButton onClick={handleMove}>Move</ZButton>
         </div>
         <div
           style={{

src/components/GoalsComponents/MyGoal/MoveGoalGuide.tsx

@@ -0,0 +1,28 @@
+import React, { useRef } from "react";
+import { Tour } from "antd";
+import type { TourProps } from "antd";
+import { useRecoilState } from "recoil";
+import { moveGoalState } from "@src/store/moveGoalState";
+
+const MoveGoalGuide: React.FC = ({ goalComponentRef }: { goalComponentRef: React.MutableRefObject<null> }) => {
+  const [moveGoal, setMoveGoal] = useRecoilState(moveGoalState);
+
+  const steps: TourProps["steps"] = [
+    {
+      title: "Navigate to the goal you want to move into.",
+      target: () => goalComponentRef.current,
+      nextButtonProps: {
+        children: "Close",
+      },
+      placement: "bottom",
+      className: "move-goal-guide",
+    },
+  ];
+  return (
+    <div>
+      <Tour closable open={!!moveGoal} onClose={() => setMoveGoal(null)} steps={steps} />
+    </div>
+  );
+};
+
+export default MoveGoalGuide;

src/components/GoalsComponents/MyGoal/MyGoal.tsx

@@ -5,13 +5,16 @@ import { useRecoilState, useRecoilValue } from "recoil";
 import { darkModeState, displayPartnerMode } from "@src/store";
 import { displayGoalId, displayUpdateGoal, goalsHistory, displayChangesModal, TAction } from "@src/store/GoalsState";
 import { ILocationState, ImpossibleGoal } from "@src/Interfaces";
+import { moveGoalState } from "@src/store/moveGoalState";
+import { moveGoalHierarchy } from "@src/helpers/GoalController";
 
+import ZButton from "@src/common/ZButton";
 import GoalAvatar from "../GoalAvatar";
 import GoalSummary from "./GoalSummary/GoalSummary";
 import GoalDropdown from "./GoalDropdown";
 import GoalTitle from "./GoalTitle";
-import { moveGoalState } from "@src/store/moveGoalState";
-import { moveGoalHierarchy } from "@src/helpers/GoalController";
+
+import "./index.scss";
 
 interface MyGoalProps {
   actionType: TAction;
@@ -105,13 +108,9 @@ const MyGoal: React.FC<MyGoalProps> = ({ goal, actionType, showActions, setShowA
 
   const handleMove = () => {
     console.log("goal moved");
-
-    if (moveGoal.goal == null) return;
-    setMoveGoal({
-      ...moveGoal,
-      parentGoalId: goal.id,
-    });
-    moveGoalHierarchy(moveGoal.goal, goal.id);
+    if (moveGoal == null) return;
+    moveGoalHierarchy(moveGoal, goal.id);
+    setMoveGoal(null);
   };
 
   return (
@@ -133,9 +132,11 @@ const MyGoal: React.FC<MyGoalProps> = ({ goal, actionType, showActions, setShowA
           </div>
           <div aria-hidden className="goal-tile" onClick={handleGoalClick}>
             <GoalTitle goal={goal} isImpossible={goal.impossible} />
-            <button type="button" onClick={handleMove}>
-              Move here
-            </button>
+            {moveGoal && goal.id !== moveGoal.id && (
+              <ZButton className="move-goal-button" onClick={handleMove}>
+                +
+              </ZButton>
+            )}
           </div>
         </div>
         {!showPartnerMode && goal.participants?.length > 0 && <GoalAvatar goal={goal} />}

src/components/GoalsComponents/MyGoal/index.scss

@@ -0,0 +1,6 @@
+.move-goal-guide {
+  width: 250px;
+  .ant-tour-title {
+    font-size: 14px;
+  }
+}

src/components/index.scss

@@ -68,3 +68,30 @@
     width: 70% !important;
   }
 }
+
+/* Default Button */
+.primary-btn,
+.primary-btn-dark {
+  font-weight: 600 !important;
+  background: transparent;
+  border-radius: 5px;
+  padding: 8px 15px;
+  border: none;
+  margin-top: 20px;
+  width: max-content;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  place-self: flex-end;
+  background: var(--selection-color);
+  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
+  font-size: 0.875em;
+  img {
+    margin-right: 10px;
+  }
+}
+.primary-btn-dark {
+  img {
+    filter: brightness(0) invert(1);
+  }
+}

src/pages/GoalsPage/MyGoals.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 /* eslint-disable jsx-a11y/click-events-have-key-events */
-import React, { useState, useEffect, ChangeEvent } from "react";
+import React, { useState, useEffect, ChangeEvent, useRef } from "react";
 import { useRecoilState, useRecoilValue } from "recoil";
 
 import ZinZenTextLight from "@assets/images/LogoTextLight.svg";
@@ -29,6 +29,7 @@ import DisplayChangesModal from "@components/GoalsComponents/DisplayChangesModal
 import { TrashItem } from "@src/models/TrashItem";
 import { getDeletedGoals } from "@src/api/TrashAPI";
 import { priotizeImpossibleGoals } from "@src/utils/priotizeImpossibleGoals";
+import MoveGoalGuide from "@components/GoalsComponents/MyGoal/MoveGoalGuide";
 
 export const MyGoals = () => {
   let debounceTimeout: ReturnType<typeof setTimeout>;
@@ -98,11 +99,15 @@ export const MyGoals = () => {
     }
   }, [selectedGoalId, displaySearch]);
 
+  const goalWrapperRef = useRef(null);
+
   return (
     <AppLayout title="myGoals" debounceSearch={debounceSearch}>
       {showShareModal && <ShareGoalModal goal={showShareModal} />}
       {showChangesModal && <DisplayChangesModal />}
-      <div className="myGoals-container">
+      <div className="myGoals-container" ref={goalWrapperRef}>
+        <MoveGoalGuide goalComponentRef={goalWrapperRef} />
+
         {selectedGoalId === "root" ? (
           <div className="my-goals-content">
             {showAddGoal && <ConfigGoal action="Create" goal={createGoalObjectFromTags({})} />}

src/store/moveGoalState.ts

@@ -3,8 +3,5 @@ import { atom } from "recoil";
 
 export const moveGoalState = atom({
   key: "moveGoalState",
-  default: {
-    parentGoalId: "",
-    goal: null as GoalItem | null,
-  },
+  default: null as GoalItem | null,
 });