From 5f628d12dd3a9b97706992f410b01f6e0710008a Mon Sep 17 00:00:00 2001
From: tifpham021 <tpham346@gatech.edu>
Date: Sun, 12 Apr 2026 15:19:03 -0400
Subject: [PATCH] fixed the partner wishlist tutorial flow bug and also added
 code so that tutorial isn't showing up after every refresh

---
 src/components/AddToWishlistModal.tsx         | 196 +++++++++---------
 src/components/Tutorial.tsx                   |  24 ++-
 .../Wishlist/PartnerWishlistScreen.tsx        |   5 +-
 3 files changed, 125 insertions(+), 100 deletions(-)

diff --git a/src/components/AddToWishlistModal.tsx b/src/components/AddToWishlistModal.tsx
index db04c715..98d858b9 100644
--- a/src/components/AddToWishlistModal.tsx
+++ b/src/components/AddToWishlistModal.tsx
@@ -224,114 +224,118 @@ export default function AddToWishlistModal({
           <form onSubmit={handleSubmit} className="space-y-5">
             {step === 1 && (
               <>
-                <ModalFormRow>
-                  <ModalTextField
-                    label="Title"
-                    name="name"
-                    placeholder="Placeholder name"
-                    required
-                    value={form.name}
-                    inputProps={{ "data-tutorial": "wishlist-title-input" }}
-                    onChange={(e) => {
-                      setForm((f) => ({ ...f, name: e.target.value }));
-                      setSuggestions([]);
-                    }}
-                  />
-                </ModalFormRow>
+                <div data-tutorial="wishlist-title-field">
+                  <ModalFormRow>
+                    <div className="grow" data-tutorial="wishlist-title-input-box">
+                      <ModalTextField
+                        label="Title"
+                        name="name"
+                        placeholder="Placeholder name"
+                        required
+                        value={form.name}
+                        onChange={(e) => {
+                          setForm((f) => ({ ...f, name: e.target.value }));
+                          setSuggestions([]);
+                        }}
+                      />
+                    </div>
+                  </ModalFormRow>
+                </div>
 
-                {/* Suggestions block (red highlighted) */}
-                {showSuggestions && (
-                  <>
-                    <div
-                      className="rounded-lg border border-red-primary bg-red-50/50 p-3 md:p-4"
-                      data-tutorial="wishlist-suggestions"
-                    >
-                      <div className="mb-3">
-                        {effectiveHardMatch ? (
-                          <h3 className="text-red-primary font-semibold text-lg">
-                            This item already exists in our inventory. <br />{" "}
-                            Please request that item instead.
-                          </h3>
+                <div data-tutorial="wishlist-suggestions">
+                  {/* Suggestions block (red highlighted) */}
+                  {showSuggestions && (
+                    <>
+                      <div className="rounded-lg border border-red-primary bg-red-50/50 p-3 md:p-4">
+                        <div className="mb-3">
+                          {effectiveHardMatch ? (
+                            <h3 className="text-red-primary font-semibold text-lg">
+                              This item already exists in our inventory. <br />{" "}
+                              Please request that item instead.
+                            </h3>
+                          ) : (
+                            <h3 className="text-red-primary font-semibold text-lg">
+                              Similar items are in our inventory. <br /> Please go
+                              to Items Page if any of these match.
+                            </h3>
+                          )}
+                        </div>
+
+                        {isTutorialSuggestions ? (
+                          <div className="overflow-hidden rounded border border-red-primary/25 bg-white">
+                            <div className="grid grid-cols-2 bg-red-primary/80 px-4 py-2 text-sm font-medium text-white">
+                              <span>Title</span>
+                              <span>Quantity</span>
+                            </div>
+                            {displaySuggestions.map((suggestion) => (
+                              <div
+                                key={suggestion.id}
+                                className="grid grid-cols-2 border-t border-gray-100 px-4 py-2 text-sm text-gray-900"
+                              >
+                                <span>{suggestion.title}</span>
+                                <span>{suggestion.quantity ?? "-"}</span>
+                              </div>
+                            ))}
+                          </div>
                         ) : (
-                          <h3 className="text-red-primary font-semibold text-lg">
-                            Similar items are in our inventory. <br /> Please go
-                            to Items Page if any of these match.
-                          </h3>
+                          <AdvancedBaseTable<AddToWishlistSuggestion>
+                            columns={suggestionColumns}
+                            fetchFn={suggestionFetchFn}
+                            rowId="id"
+                            headerClassName="bg-red-primary/80 text-white"
+                            rowCellStyles="border border-transparent bg-white"
+                            emptyState={
+                              <div className="py-3 text-sm text-red-700">
+                                No similar items found.
+                              </div>
+                            }
+                            toolBar={null}
+                            disablePagination
+                            disableFilters
+                          />
                         )}
                       </div>
 
-                      {isTutorialSuggestions ? (
-                        <div className="overflow-hidden rounded border border-red-primary/25 bg-white">
-                          <div className="grid grid-cols-2 bg-red-primary/80 px-4 py-2 text-sm font-medium text-white">
-                            <span>Title</span>
-                            <span>Quantity</span>
-                          </div>
-                          {displaySuggestions.map((suggestion) => (
-                            <div
-                              key={suggestion.id}
-                              className="grid grid-cols-2 border-t border-gray-100 px-4 py-2 text-sm text-gray-900"
-                            >
-                              <span>{suggestion.title}</span>
-                              <span>{suggestion.quantity ?? "-"}</span>
-                            </div>
-                          ))}
-                        </div>
-                      ) : (
-                        <AdvancedBaseTable<AddToWishlistSuggestion>
-                          columns={suggestionColumns}
-                          fetchFn={suggestionFetchFn}
-                          rowId="id"
-                          headerClassName="bg-red-primary/80 text-white"
-                          rowCellStyles="border border-transparent bg-white"
-                          emptyState={
-                            <div className="py-3 text-sm text-red-700">
-                              No similar items found.
-                            </div>
-                          }
-                          toolBar={null}
-                          disablePagination
-                          disableFilters
-                        />
-                      )}
-                    </div>
-
-                    <div className="mt-6 flex gap-4">
-                      <Link
-                        href={`/items?initialItems=${encodeURIComponent(
-                          JSON.stringify(displaySuggestions.map((s) => s.id))
-                        )}`}
-                        className="inline-block w-1/2 rounded-lg border border-red-primary px-4 py-2 font-medium text-red-primary hover:bg-red-50 active:translate-y-px text-center"
-                      >
-                        Go to Items Page
-                      </Link>
+                      <div className="mt-6 flex gap-4">
+                        <Link
+                          href={`/items?initialItems=${encodeURIComponent(
+                            JSON.stringify(displaySuggestions.map((s) => s.id))
+                          )}`}
+                          className="inline-block w-1/2 rounded-lg border border-red-primary px-4 py-2 font-medium text-red-primary hover:bg-red-50 active:translate-y-px text-center"
+                        >
+                          Go to Items Page
+                        </Link>
+
+                        {/* Continue → Step 2 */}
+                        <button
+                          type="button"
+                          onClick={goToStep2}
+                          disabled={effectiveHardMatch || !form.name.trim()}
+                          className={`w-1/2 rounded-lg px-4 py-2 font-medium text-white active:translate-y-px ${
+                            effectiveHardMatch || !form.name.trim()
+                              ? "bg-red-300 cursor-not-allowed"
+                              : "bg-red-primary hover:brightness-95"
+                          }`}
+                        >
+                          Continue with Wish
+                        </button>
+                      </div>
+                    </>
+                  )}
 
-                      {/* Continue → Step 2 */}
+                  {/* No suggestions but non-empty title */}
+                  {!searching &&
+                    displaySuggestions.length === 0 &&
+                    form.name !== "" && (
                       <button
                         type="button"
                         onClick={goToStep2}
-                        disabled={effectiveHardMatch || !form.name.trim()}
-                        className={`w-1/2 rounded-lg px-4 py-2 font-medium text-white active:translate-y-px ${
-                          effectiveHardMatch || !form.name.trim()
-                            ? "bg-red-300 cursor-not-allowed"
-                            : "bg-red-primary hover:brightness-95"
-                        }`}
+                        className="w-full rounded-lg px-4 py-2 font-medium text-white active:translate-y-px bg-red-primary hover:brightness-95"
                       >
                         Continue with Wish
                       </button>
-                    </div>
-                  </>
-                )}
-
-                {/* No suggestions but non-empty title */}
-                {!searching && displaySuggestions.length === 0 && form.name !== "" && (
-                  <button
-                    type="button"
-                    onClick={goToStep2}
-                    className="w-full rounded-lg px-4 py-2 font-medium text-white active:translate-y-px bg-red-primary hover:brightness-95"
-                  >
-                    Continue with Wish
-                  </button>
-                )}
+                    )}
+                </div>
               </>
             )}
 
diff --git a/src/components/Tutorial.tsx b/src/components/Tutorial.tsx
index acb6b1fb..fc1a91f0 100644
--- a/src/components/Tutorial.tsx
+++ b/src/components/Tutorial.tsx
@@ -80,6 +80,7 @@ export default function Tutorial({
   const [stepIndex, setStepIndex] = useState(0);
   const [run, setRun] = useState(false);
   const [viewportWidth, setViewportWidth] = useState<number | null>(null);
+  const [isCompletionSynced, setIsCompletionSynced] = useState(false);
   const [serverTutorialCompleted, setServerTutorialCompleted] = useState<
     boolean | null
   >(null);
@@ -264,11 +265,15 @@ export default function Tutorial({
   useEffect(() => {
     hasFetchedCompletionRef.current = false;
     lastNotifiedStepIndexRef.current = null;
+    setIsCompletionSynced(false);
     setServerTutorialCompleted(null);
   }, [type, user?.id]);
 
   useEffect(() => {
     if (!user?.id || hasFetchedCompletionRef.current) {
+      if (!user?.id) {
+        setIsCompletionSynced(true);
+      }
       return;
     }
 
@@ -283,6 +288,7 @@ export default function Tutorial({
         if (!response.ok) {
           if (!cancelled) {
             setServerTutorialCompleted(sessionTutorialCompleted);
+            setIsCompletionSynced(true);
           }
           return;
         }
@@ -299,6 +305,7 @@ export default function Tutorial({
               [tutorialField]: latestValue,
             });
           }
+          setIsCompletionSynced(true);
           return;
         }
       } catch (error) {
@@ -307,6 +314,7 @@ export default function Tutorial({
 
       if (!cancelled) {
         setServerTutorialCompleted(sessionTutorialCompleted);
+        setIsCompletionSynced(true);
       }
     })();
 
@@ -316,7 +324,12 @@ export default function Tutorial({
   }, [sessionTutorialCompleted, tutorialField, updateSession, user?.id]);
 
   useEffect(() => {
-    if (!user || isTutorialCompleted || tutorialSteps.length === 0) {
+    if (
+      !user ||
+      !isCompletionSynced ||
+      isTutorialCompleted ||
+      tutorialSteps.length === 0
+    ) {
       return;
     }
 
@@ -330,7 +343,7 @@ export default function Tutorial({
     setStepIndex(0);
     setRun(true);
     notifyStepChange(initialOriginalIndex);
-  }, [isTutorialCompleted, notifyStepChange, tutorialSteps, user]);
+  }, [isCompletionSynced, isTutorialCompleted, notifyStepChange, tutorialSteps, user]);
 
   useEffect(() => {
     if (!run || responsiveTutorialEntries.length === 0) {
@@ -501,7 +514,12 @@ export default function Tutorial({
     }
   }, [finishTutorial, notifyStepChange]);
 
-  if (!user || isTutorialCompleted || tutorialSteps.length === 0) {
+  if (
+    !user ||
+    !isCompletionSynced ||
+    isTutorialCompleted ||
+    tutorialSteps.length === 0
+  ) {
     return null;
   }
 
diff --git a/src/screens/Wishlist/PartnerWishlistScreen.tsx b/src/screens/Wishlist/PartnerWishlistScreen.tsx
index b2034563..3dc3c6f9 100644
--- a/src/screens/Wishlist/PartnerWishlistScreen.tsx
+++ b/src/screens/Wishlist/PartnerWishlistScreen.tsx
@@ -103,14 +103,16 @@ const tutorialSteps: TutorialStep[] = [
       </div>
     ),
     placement: "left",
+    isFixed: true,
   },
   {
-    target: '[data-tutorial="wishlist-title-input"]',
+    target: '[data-tutorial="wishlist-title-input-box"]',
     title: "Adding a Wishlist",
     content:
       "For this example, we will enter Bottled Water Cases as the item title.",
     placement: "left",
     isFixed: true,
+    spotlightPadding: 2,
   },
   {
     target: '[data-tutorial="wishlist-suggestions"]',
@@ -127,6 +129,7 @@ const tutorialSteps: TutorialStep[] = [
       </div>
     ),
     placement: "left",
+    isFixed: true,
   },
   {
     target: "body",