Skip to content

fixed the partner wishlist tutorial flow bug #340

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ND68 merged 1 commit into from
Apr 14, 2026
Merged

fixed the partner wishlist tutorial flow bug #340

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
196 changes: 100 additions & 96 deletions src/components/AddToWishlistModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Comment thread
ND68 marked this conversation as resolved.

{/* 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>
</>
)}

Expand Down
24 changes: 21 additions & 3 deletions src/components/Tutorial.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -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;
}
Comment thread
ND68 marked this conversation as resolved.

Expand All @@ -283,6 +288,7 @@ export default function Tutorial({
if (!response.ok) {
if (!cancelled) {
setServerTutorialCompleted(sessionTutorialCompleted);
setIsCompletionSynced(true);
}
return;
}
Expand All @@ -299,6 +305,7 @@ export default function Tutorial({
[tutorialField]: latestValue,
});
}
setIsCompletionSynced(true);
return;
}
} catch (error) {
Expand All @@ -307,6 +314,7 @@ export default function Tutorial({

if (!cancelled) {
setServerTutorialCompleted(sessionTutorialCompleted);
setIsCompletionSynced(true);
}
})();

Expand All @@ -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;
}

Expand All @@ -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) {
Expand Down Expand Up @@ -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;
}

Expand Down
5 changes: 4 additions & 1 deletion src/screens/Wishlist/PartnerWishlistScreen.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"]',
Expand All @@ -127,6 +129,7 @@ const tutorialSteps: TutorialStep[] = [
</div>
),
placement: "left",
isFixed: true,
},
{
target: "body",
Expand Down
Loading