Add Skip Tour button to Shepherd.js tour and fix event listener clean…

[aadityabinodyadav]

Pull Request: Add a Skip Button to the Tour

Issue

CLOSES #260

Description

This pull request adds a "Skip Tour" button to the Shepherd.js tour in the template-playground application. The goal is to allow users to exit the onboarding tour at any step, improving user experience. Additionally, this PR fixes TypeScript errors that caused the initial deploy preview to fail.

Changes Made

1. Added "Skip Tour" Button to tour.ts

• File Modified: src/components/Tour.ts
• Summary:
  • Added a "Skip Tour" button to every step of the Shepherd.js tour.
  • Included the button in defaultStepOptions.buttons for all steps unless overridden.
  • Explicitly added it to each step’s buttons array.
  • Styled it with a red background (#ff4d4f) using the .skip-tour class.
  • The button calls tour.cancel() to end the tour.
• Details:
  • Added type annotation (: Tour) to fix TS7022: 'tour' implicitly has type 'any'.

2. Updated App.tsx

• File Modified: src/App.tsx
• Summary:
  • Reintroduced isTourRunning state and used it in JSX to display a "Tour is running..." message, fixing TS6133: 'isTourRunning' is declared but its value is never read.
  • Added back tour start logic with event listeners for complete and cancel to manage the state.
  • Ensured proper event listener cleanup.
• Details:
  • Removed the initial unused isTourRunning state and replaced it with a used version.

3. Code Snippets

• Updated tour.ts (partial):

  const tour: Tour = new Shepherd.Tour({
    defaultStepOptions: {
      classes: "shepherd-theme-arrows",
      scrollTo: true,
      buttons: [
        {
          text: "Skip Tour",
          classes: "skip-tour",
          action: () => tour.cancel(),
        },
      ],
    },
    useModalOverlay: true,
  });
  
  -Updated App.tsx (relevant section):

jsx

Collapse

Wrap

Copy
const [isTourRunning, setIsTourRunning] = useState(false);

useEffect(() => {
const showTour = searchParams.get("showTour") === "true";
if (showTour || !localStorage.getItem("hasVisited")) {
setIsTourRunning(true);
tour.start();
localStorage.setItem("hasVisited", "true");
tour.on("complete", () => setIsTourRunning(false));
tour.on("cancel", () => setIsTourRunning(false));
}
return () => {
tour.off("complete", () => setIsTourRunning(false));
tour.off("cancel", () => setIsTourRunning(false));
};
}, [searchParams]);

-Why These Changes?
1.User Experience: Adds a "Skip Tour" button for flexibility.
2.Consistency: Integrates the button within the tour UI.
3.Bug Fix: Resolves TypeScript errors that caused the deploy preview failure.

//Testing Instructions
1.Start the Tour:
Clear localStorage.hasVisited or use ?showTour=true.
2.Confirm the tour starts.
Verify the "Skip Tour" Button:
Check that the button appears in each step (red background).
Click it to ensure the tour ends.
3.Verify Tour State:
The "Tour is running..." message should appear during the tour and disappear when skipped or finished.
Check for Errors:
4.Ensure no console errors and the deploy preview passes (✅).

//Additional Notes

• Addressed deploy preview failure (❌) from the initial commit:
• Fixed TS6133: Used isTourRunning in JSX.
• Fixed TS7022: Added type annotation for tour.
• The new deploy preview should now pass.

//Checklist
-Added "Skip Tour" button to all tour steps in tour.ts.
-Fixed TS6133 and TS7022 errors.
-Tested locally (start, skip, complete).
-Ensured no runtime errors.

[netlify]

✅ Deploy Preview for ap-template-playground ready!

Name	Link
🔨 Latest commit	d93476d
🔍 Latest deploy log	https://app.netlify.com/sites/ap-template-playground/deploys/67d712ce683b1800082dffad
😎 Deploy Preview	https://deploy-preview-267--ap-template-playground.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[teja-pola]

#261 already solved this

[aadityabinodyadav]

@DianaLease let me know if there is something I can improve!

[aadityabinodyadav]

#261 already solved this

Thanks for the update!

[sanketshevkar]

Can you please rebase your branch and remove conflicts?

[sanketshevkar]

I don't see any discussion on the issue. Also I see two similar PRs? I'm a bit confused here. Was this resolution discussed with the issue reporter and the maintainers? Also I see a PR already raised by the issue reporter and I don't see any discussion about a similar being PR being raised. @aadityabinod

[aadityabinodyadav]

Hey everyone! I misunderstood issue #260 as a problem to solve, but it was a feature request with an existing PR. I’ve replied on my PR #267 , offering to collaborate or close if needed. Waiting for guidance—sorry for the mix-up 😅
@sanketshevkar

[DianaLease]

Hey everyone! I misunderstood issue #260 as a problem to solve, but it was a feature request with an existing PR. I’ve replied on my PR #267 , offering to collaborate or close if needed. Waiting for guidance—sorry for the mix-up 😅 @sanketshevkar

No worries, closing this one as a duplicate of #261