✨ Add pro init and explicit ID (#2648)

* ✨ Add pro init and explicit ID

* 🎨 Fix formatting for quotes in JSX

* 🔧 Add pro config with ID

landing/src/layouts/MainPage.astro

@@ -182,15 +182,22 @@ const shepherdIncludeCode = `
 
   (function () {
     function init() {
-      var shepherd = setupShepherd();
+      // connect to shepherd pro
+      Shepherd.init(
+        import.meta.env.PUBLIC_SHEPHERD_PUBLIC_KEY,
+        import.meta.env.PUBLIC_SHEPHERD_FRONTEND_API
+      );
+      // wait for shepherd to be ready
       setTimeout(function () {
+        const shepherd = setupShepherd();
         shepherd.start();
       }, 400);
     }
 
     function setupShepherd() {
       // @ts-expect-error TODO
-      var shepherd = new Shepherd.Tour({
+      const shepherd = new Shepherd.Tour({
+        id: 'ts4udfrnm7o95ny7e9qbjo3t',
         defaultStepOptions: {
           cancelIcon: {
             enabled: true

shepherd.js/src/tour.ts

@@ -57,6 +57,10 @@ export interface TourOptions {
    * set to false.
    */
   exitOnEsc?: boolean;
+  /**
+   * Explicitly set the id for the tour. If not set, the id will be a generated uuid.
+   */
+  id?: string;
   /**
    * Navigating the tour via left and right arrow keys will be enabled
    * unless this is explicitly set to false.
@@ -185,7 +189,7 @@ export class Tour extends Evented {
       })(event);
     });
 
-    this._setTourID();
+    this._setTourID(options.id);
 
     const { apiKey, apiPath } = Shepherd;
     // If we have an API key, then setup Pro features
@@ -529,13 +533,15 @@ export class Tour extends Evented {
   }
 
   /**
-   * Sets this.id to `${tourName}--${uuid}`
+   * Sets this.id to a provided tourName and id or `${tourName}--${uuid}`
+   * @param {string} optionsId - True if we are going forward, false if backward
    * @private
    */
-  _setTourID() {
+  _setTourID(optionsId: string | undefined) {
     const tourName = this.options.tourName || 'tour';
+    const tourId = optionsId || uuid();
 
-    this.id = `${tourName}--${uuid()}`;
+    this.id = `${tourName}--${tourId}`;
   }
 }