From 239b25ad347378f0284628153c5dfdb3934c9ccc Mon Sep 17 00:00:00 2001
From: Delasie Torkornoo <Delasie.Torkornoo@nrc-cnrc.gc.ca>
Date: Fri, 4 Oct 2024 10:44:48 -0400
Subject: [PATCH] feat: connect studio tour to editor tour (#346)

* feat: connect studio tour to editor tour

* chore: updated translations

* fix: implemented feedback from Eric

* chore: translations for the tour connection to the editor

---------

Co-authored-by: Eric Joanis <eric.joanis@nrc-cnrc.gc.ca>
(cherry picked from commit 8b89a0381cc52bc8fa0fd97ef735b145b3b73750)
---
 .../studio-web/src/app/app.component.html     |  1 +
 .../src/app/editor/editor.component.ts        |  4 ++
 packages/studio-web/src/app/shepherd.steps.ts | 38 +++++++++++++++++--
 .../src/app/studio/studio.component.ts        |  3 ++
 packages/studio-web/src/i18n/messages.es.json |  5 ++-
 packages/studio-web/src/i18n/messages.fr.json |  5 ++-
 packages/studio-web/src/i18n/messages.json    |  5 ++-
 7 files changed, 54 insertions(+), 7 deletions(-)

diff --git a/packages/studio-web/src/app/app.component.html b/packages/studio-web/src/app/app.component.html
index 952ee0b4..4df72dc8 100644
--- a/packages/studio-web/src/app/app.component.html
+++ b/packages/studio-web/src/app/app.component.html
@@ -13,6 +13,7 @@
       Studio
     </button>
     <button
+      id="goToEditor"
       class="nav__button plausible-event-name=Editor"
       mat-button
       [color]="currentURL === '/editor' ? 'accent' : ''"
diff --git a/packages/studio-web/src/app/editor/editor.component.ts b/packages/studio-web/src/app/editor/editor.component.ts
index 651278dd..eeb8e095 100644
--- a/packages/studio-web/src/app/editor/editor.component.ts
+++ b/packages/studio-web/src/app/editor/editor.component.ts
@@ -113,6 +113,10 @@ export class EditorComponent implements OnDestroy, OnInit, AfterViewInit {
       e.stopPropagation();
       segment.play();
     });
+
+    if (window.location.hash.endsWith("startTour=yes")) {
+      this.startTour();
+    }
   }
 
   ngOnInit(): void {}
diff --git a/packages/studio-web/src/app/shepherd.steps.ts b/packages/studio-web/src/app/shepherd.steps.ts
index da31049a..d45beb90 100644
--- a/packages/studio-web/src/app/shepherd.steps.ts
+++ b/packages/studio-web/src/app/shepherd.steps.ts
@@ -1,6 +1,5 @@
-import { title } from "process";
 import { environment } from "../environments/environment";
-import { text } from "stream/consumers";
+import Tour from "shepherd.js/src/types/tour";
 
 export const intro_step: any = {
   title: $localize`Welcome to ReadAlong Studio`,
@@ -385,10 +384,11 @@ export const readalong_go_back_step: any = {
       text: $localize`Back`,
       type: "back",
     },
+
     {
       classes: "shepherd-button-primary",
-      text: $localize`Finish`,
-      type: "cancel",
+      text: $localize`Next`,
+      type: "next",
     },
   ],
   id: "readalong-back",
@@ -508,6 +508,7 @@ export const readalong_editor_audio_wav: any = {
     },
   ],
 };
+
 export const readalong_editor_fix_text: any = {
   title: $localize`Fix Spelling Errors`,
   text: $localize`You can also fix spelling errors by clicking on a word and editing it.`,
@@ -528,3 +529,32 @@ export const readalong_editor_fix_text: any = {
     },
   ],
 };
+
+export const readalong_go_to_editor: any = {
+  title: $localize`Go to the Editor`,
+  text: $localize`Once you've downloaded your ReadAlong, you can reload it into the Editor to continue editing it.`,
+  attachTo: {
+    element: "#goToEditor",
+    on: "bottom",
+  },
+  buttons: [
+    {
+      classes: "shepherd-button-primary",
+      text: $localize`Back`,
+      type: "back",
+    },
+    {
+      classes: "shepherd-button-primary",
+      text: $localize`Finish`,
+      type: "cancel",
+    },
+    {
+      classes: "shepherd-button-warning",
+      text: $localize`Editor`,
+      action: function () {
+        if (this) (this as unknown as Tour).complete();
+        window.location.hash = "#/editor?startTour=yes";
+      },
+    },
+  ],
+};
diff --git a/packages/studio-web/src/app/studio/studio.component.ts b/packages/studio-web/src/app/studio/studio.component.ts
index 99ba2392..70d84cc8 100644
--- a/packages/studio-web/src/app/studio/studio.component.ts
+++ b/packages/studio-web/src/app/studio/studio.component.ts
@@ -32,6 +32,7 @@ import {
   readalong_go_back_step,
   text_file_step,
   text_write_step,
+  readalong_go_to_editor,
 } from "../shepherd.steps";
 import { DemoComponent } from "../demo/demo.component";
 import { UploadComponent } from "../upload/upload.component";
@@ -241,6 +242,7 @@ export class StudioComponent implements OnDestroy, OnInit {
                   ?.shadowRoot?.querySelector("#title__slot__container"),
                 on: "bottom",
               };
+
               this.shepherdService.next();
               // Strangely, adding steps actually removes all previous steps so we need to start the tour again here.
               this.shepherdService.addSteps([
@@ -252,6 +254,7 @@ export class StudioComponent implements OnDestroy, OnInit {
                 readalong_add_translation_step,
                 readalong_export_step,
                 readalong_go_back_step,
+                readalong_go_to_editor,
               ]);
               this.shepherdService.start();
             });
diff --git a/packages/studio-web/src/i18n/messages.es.json b/packages/studio-web/src/i18n/messages.es.json
index bbcb002e..29506a6b 100644
--- a/packages/studio-web/src/i18n/messages.es.json
+++ b/packages/studio-web/src/i18n/messages.es.json
@@ -74,7 +74,6 @@
     "668489750030842261": "Pero tenga cuidado, regresar al paso anterior quiere decir que perderá sus traducciones y sus imágenes.",
     "3430021493872613524": "Advertencia: Utilizar la fecha de atrás del buscador hace que usted salga de la app y puede que también borre todo su texto y su audio así que se debe evitar usar este botón. ",
     "5849788734463744687": "En su lugar, use el botón «Paso 1» para regresar y cambiar su texto o audio.",
-    "65984904390749158": "Terminar",
     "5175388690035905510": "Editor para su ReadAlong exportados",
     "5831797882771509684": "Este editor le permite modificar su ReadAlong exportado. Tenga en cuenta que esta herramienta solo acepta el formato HTML offline.",
     "5429481539069429354": "Seleccione un fichero",
@@ -87,6 +86,10 @@
     "9150310094905104116": "Esto representa visualmente el alineamiento audio-texto de su ReadAlong. Haga clic en la forma de onda para escuchar una palabra. Mueve las barras en los bordes de una palabra para ajustar su alineamiento. Luego haga clic en el «play» botón del ReadAlong para observar los resultados de sus ajustes en el resaltado de texto de su ReadAlong.",
     "444446810820436138": "Corregir errores de ortografía",
     "2773189193481434399": "Puede corregir errores de ortografía haciendo clic en una palabra y editándola.",
+    "4796729421526127263": "Ir al Editor",
+    "1630288581226787121": "Después de haber descargado su ReadAlong, puede volver a abrirlo en el Editor para continuar editándolo.",
+    "65984904390749158": "Terminar",
+    "3742657416068781599": "Al editor",
     "8428348909593474745": "Paso 1",
     "3614618598824071164": " Esta es una herramienta diseñada para ayudarlo a crear su propio 'readalong' que resalta las palabras a medida que se pronuncian. Puede ver {$START_LINK}{$START_TAG_MAT_ICON}launch{$CLOSE_TAG_MAT_ICON} este ejemplo en el idioma cree oriental{$CLOSE_LINK} para tener una mejor idea de qué es un 'readalong'. ",
     "5224223351795929492": "Para empezar a crear su propio 'readalong' siga el tour del sitio haciendo clic en el botón «Siga el tour» y siguiendo los pasos descritos aquí debajo.",
diff --git a/packages/studio-web/src/i18n/messages.fr.json b/packages/studio-web/src/i18n/messages.fr.json
index ab0b05f3..2082e7d6 100644
--- a/packages/studio-web/src/i18n/messages.fr.json
+++ b/packages/studio-web/src/i18n/messages.fr.json
@@ -74,7 +74,6 @@
     "668489750030842261": "Mais attention, retourner en arrière vous fera perdre vos traductions et vos images.",
     "3430021493872613524": "Attention: si vous utilisez le bouton de retour de votre navigateur, vous quitterez l'appli au complet et perdrez probablement aussi tout votre texte et votre audio. ",
     "5849788734463744687": "Utilisez plutôt le bouton \"Étape 1\" pour retourner modifier votre texte ou votre audio.",
-    "65984904390749158": "Terminer",
     "5175388690035905510": "Éditeur pour votre ReadAlong",
     "5831797882771509684": "Cet outil vous permet de modifier votre ReadAlong. Notez que cet outil n'accepte que le format HTML hors réseau.",
     "5429481539069429354": "Choisir un fichier",
@@ -87,6 +86,10 @@
     "9150310094905104116": "Ceci représente visuellement l'alignement audio-texte de votre ReadAlong. Cliquez sur la forme d'onde pour écouter un mot. Déplacez les barres aux bordures d'un mot pour ajuster son alignement. Clickez ensuite sur le bouton de lecture du ReadAlong pour constater le résultat de vos ajustements sur le surlignage de votre ReadAlong.",
     "444446810820436138": "Corriger les fautes d'orthographe",
     "2773189193481434399": "Pour corriger une faute d'orthographe, cliquez sur un mot et modifiez-le.",
+    "4796729421526127263": "Passer à l'éditeur",
+    "1630288581226787121": "Après avoir téléchargé votre ReadAlong, vous pouvez le rouvrir dans l'Éditeur pour continuer à le modifier.",
+    "65984904390749158": "Terminer",
+    "3742657416068781599": "À l'éditeur",
     "8428348909593474745": "Étape 1",
     "3614618598824071164": " Cet outil vous aidera à créer une page interactive de lecture accompagnée, sur laquelle les mots sont surlignés lorsqu'ils sont lus à voix haute. Jetez un coup d'œil à {$START_LINK}{$START_TAG_MAT_ICON}launch{$CLOSE_TAG_MAT_ICON} cet exemple en cri de l'Est{$CLOSE_LINK} pour mieux comprendre le concept. ",
     "5224223351795929492": "Avant de commencer à en faire vous-même faites une visite guidée en cliquant sur le bouton « Visite guidée » puis suivez les étapes ci-dessous.",
diff --git a/packages/studio-web/src/i18n/messages.json b/packages/studio-web/src/i18n/messages.json
index aee51b6e..5c4e11a3 100644
--- a/packages/studio-web/src/i18n/messages.json
+++ b/packages/studio-web/src/i18n/messages.json
@@ -75,7 +75,6 @@
     "668489750030842261": "But be careful, going back to the previous step will mean you will lose all of your translations and images.",
     "3430021493872613524": "Warning: Using the browser's back button will leave the app and might also erase all your text and audio data, so it should be avoided. ",
     "5849788734463744687": "Instead, use the \"Step 1\" button to go back and change your text or audio.",
-    "65984904390749158": "Finish",
     "5175388690035905510": "Editor for your exported ReadAlong",
     "5831797882771509684": "This tool allows you to modify your exported ReadAlong. Note that this tool only accepts the Offline HTML format.",
     "5429481539069429354": "Choose File",
@@ -88,6 +87,10 @@
     "9150310094905104116": "This is a visual representation of the audio-to-text alignment in your read-along. You can click on the wave form of a word to hear it, and drag the bars at the word boundaries to adjust its alignment. Please click on the play button above to see how adjusting the word boundaries affects the highlighting of your readalong.",
     "444446810820436138": "Fix Spelling Errors",
     "2773189193481434399": "You can also fix spelling errors by clicking on a word and editing it.",
+    "4796729421526127263": "Go to the Editor",
+    "1630288581226787121": "Once you've downloaded your ReadAlong, you can reload it into the Editor to continue editing it.",
+    "65984904390749158": "Finish",
+    "3742657416068781599": "Editor",
     "8428348909593474745": "Step 1",
     "3614618598824071164": " This is a tool to help you make your own interactive 'readalong' that highlights words as they are spoken. Have a look at {$START_LINK}{$START_TAG_MAT_ICON}launch{$CLOSE_TAG_MAT_ICON} this example in East Cree{$CLOSE_LINK} to get a better idea of what these are. ",
     "5224223351795929492": " To get started making your own, click on the tour button below, and follow the steps. ",