do not repeat guided tours, do not show multiple guided tours

Author: [email protected]

src/components/guided-modal-tour/index.js

@@ -2,6 +2,13 @@
  * Internal dependencies
  */
 import { TOUR_STEPS } from './tour-steps'
+import {
+	setActiveTour,
+	clearActiveTour,
+	isTourActive,
+	getActiveTourId,
+	addTourStateListener,
+} from './util'
 
 /**
  * External dependencies
@@ -42,6 +49,17 @@ const GuidedModalTour = props => {
 	// We need this to prevent the tour from being shown again if it's just completed.
 	const [ justCompleted, setJustCompleted ] = useState( false )
 
+	// Check if another tour is already active
+	const [ isAnotherTourActive, setIsAnotherTourActive ] = useState( isTourActive() && getActiveTourId() !== tourId )
+
+	// Listen for tour state changes
+	useEffect( () => {
+		const removeListener = addTourStateListener( activeId => {
+			setIsAnotherTourActive( activeId !== null && activeId !== tourId )
+		} )
+		return removeListener
+	}, [ tourId ] )
+
 	const {
 		steps = [],
 		condition = null,
@@ -53,6 +71,11 @@ const GuidedModalTour = props => {
 		return null
 	}
 
+	// If another tour is already active, don't show this tour
+	if ( isAnotherTourActive ) {
+		return null
+	}
+
 	// If there is a condition, check if it's met, if not, don't show the tour.
 	// condition can be true, false, or null. true will show the tour (even if
 	// it's already done), false will not show the tour, null will show the tour
@@ -71,13 +94,17 @@ const GuidedModalTour = props => {
 	}
 
 	return <ModalTour
+		tourId={ tourId }
 		steps={ steps }
 		hasConfetti={ hasConfetti }
 		initialize={ initialize }
 		onClose={ () => {
 			setIsDone( true )
 			setJustCompleted( true )
 
+			// Clear the active tour
+			clearActiveTour()
+
 			// Update the stackable_guided_tour_states setting
 			if ( ! guidedTourStates.includes( tourId ) ) {
 				// eslint-disable-next-line camelcase
@@ -98,6 +125,7 @@ const GuidedModalTour = props => {
 
 const ModalTour = props => {
 	const {
+		tourId,
 		steps,
 		onClose = NOOP,
 		hasConfetti = true,
@@ -141,6 +169,22 @@ const ModalTour = props => {
 		}, 50 )
 	}, [ initialize ] )
 
+	// Set active tour when modal becomes visible
+	useEffect( () => {
+		if ( isVisible ) {
+			setActiveTour( tourId )
+		}
+	}, [ isVisible, tourId ] )
+
+	// Clear active tour when component unmounts
+	useEffect( () => {
+		return () => {
+			if ( getActiveTourId() === tourId ) {
+				clearActiveTour()
+			}
+		}
+	}, [ tourId ] )
+
 	// While the modal is visible, just keep on force refreshing the modal in an interval to make sure the modal is always in the correct position.
 	useEffect( () => {
 		let interval

src/components/guided-modal-tour/tours/editor.js

@@ -1,12 +1,13 @@
 import { __ } from '@wordpress/i18n'
-import { i18n } from 'stackable'
+import { i18n, guidedTourStates } from 'stackable'
 import { createInterpolateElement } from '@wordpress/element'
 
 export const editor = {
 	hasConfetti: false,
 	condition: () => { // If provided, true will show the tour (even if it's already done), false will not show the tour, null will show the tour only once.
 		// Do not show the tour if there is a GET parameter that shows another tour.
-		return window?.location?.search?.includes( 'tour=' ) ? false : null
+		return window?.location?.search?.includes( 'tour=' ) ? false
+			: guidedTourStates.includes( 'design-library' ) ? false : null
 	},
 	steps: [
 		{

src/components/guided-modal-tour/util.js

@@ -0,0 +1,53 @@
+/**
+ * Global tour state management utilities
+ *
+ * This module provides functions to manage the global state of guided modal tours,
+ * ensuring that only one tour can be active at a time.
+ */
+
+// Global tour state
+let activeTourId = null
+const tourStateListeners = new Set()
+
+/**
+ * Set the currently active tour
+ *
+ * @param {string} tourId - The ID of the tour to set as active
+ */
+export const setActiveTour = tourId => {
+	activeTourId = tourId
+	tourStateListeners.forEach( listener => listener( tourId ) )
+}
+
+/**
+ * Clear the currently active tour
+ */
+export const clearActiveTour = () => {
+	activeTourId = null
+	tourStateListeners.forEach( listener => listener( null ) )
+}
+
+/**
+ * Check if any tour is currently active
+ *
+ * @return {boolean} True if a tour is active, false otherwise
+ */
+export const isTourActive = () => activeTourId !== null
+
+/**
+ * Get the currently active tour ID
+ *
+ * @return {string|null} The active tour ID or null if no tour is active
+ */
+export const getActiveTourId = () => activeTourId
+
+/**
+ * Add a listener for tour state changes
+ *
+ * @param {Function} listener - Function to call when tour state changes
+ * @return {Function} Function to remove the listener
+ */
+export const addTourStateListener = listener => {
+	tourStateListeners.add( listener )
+	return () => tourStateListeners.delete( listener )
+}