fix for new design panels and add features

Always reopen the sidebar after finishing.
Add/fixs steps:
- Reactions
- Raise Hand
- Media Rea
- Profile Settings
- User List
- Apps Gallery
- Session Details
- Leave Button

src/locales/en.json

@@ -1,25 +1,32 @@
 {
-  "app.tour.audio": "Join the conference audio",
-  "app.tour.toggleMic": "Enable or disable your microphone",
-  "app.tour.selectorAudio": "Select audio devices",
-  "app.tour.leaveAudio": "Leave the conference audio",
-  "app.tour.video": "Enable or disable your camera",
-  "app.tour.screenshare": "Share your screen",
-  "app.tour.interactions": "Here you have several features related to interacting with the conference: raise/lower your hand, set a reaction, report if you are absent.",
+  "app.tour.audio": "Join the conference audio.",
+  "app.tour.toggleMic": "Enable or disable your microphone.",
+  "app.tour.selectorAudio": "Select audio devices.",
+  "app.tour.leaveAudio": "Leave the conference audio.",
+  "app.tour.video": "Enable or disable your camera.",
+  "app.tour.screenshare": "Share your screen.",
+  "app.tour.reactions": "Set a reaction.",
+  "app.tour.raiseHand": "Raise/lower your hand.",
   "app.tour.plusActions": "Here you will find more features.",
   "app.tour.whiteboard.title": "Whiteboard",
   "app.tour.whiteboard.intro": "This is the whiteboard. The presenter can draw or write over it.",
   "app.tour.whiteboard.upload": "If the presenter uploads a presentation or shares their screen, it will appear here.",
   "app.tour.whiteboard.toolbar": "Whiteboard drawing tools.",
   "app.tour.whiteboard.multiuser": "Allow other participants to edit the whiteboard simultaneously.",
   "app.tour.closePresentation": "Minimize or restore the presentation.",
+  "app.tour.mediaArea": "Here you can share other media with the participants.",
   "app.tour.userListToggle": "Open or hide the panel that contains the list of users.",
+  "app.tour.panel.profileSettings": "Configure your status, camera and microphone.",
+  "app.tour.panel.userList": "Open the list of participants.",
+  "app.tour.panel.appsGallery": "Enable or disable additional applications.",
   "app.tour.panel.sharedNotes": "Create notes collaboratively with other participants.",
   "app.tour.panel.chat": "Interact with other participants via chat.",
   "app.tour.panel.questions": "Send questions to the moderator/presenter.",
+  "app.tour.sessionDetails": "Click here to see the details of the session.",
   "app.tour.recording": "Starts or stops recording the conference.",
   "app.tour.connectionStatus": "Connectivity status of participants who have a bad connection.",
-  "app.tour.moreOptions": "Access more options, like evaluating the platform, accessing the settings or leaving the conference.",
+  "app.tour.leave": "Leave the conference.",
+  "app.tour.moreOptions": "Access more options, such as Fullscreen and Manage Layout.",
   "app.tour.endTour": "You learned the basics features. To go deeper, click on \"Learn more \".",
   "app.tour.startTour": "Start the tour",
   "app.tour.button.next": "Next",

src/locales/pt_BR.json

@@ -1,25 +1,32 @@
 {
-  "app.tour.audio": "Entre no áudio da conferência",
-  "app.tour.toggleMic": "Ative ou desative seu microfone",
-  "app.tour.selectorAudio": "Selecione seu dispositivo de áudio",
-  "app.tour.leaveAudio": "Saia do áudio da conferência",
+  "app.tour.audio": "Entre no áudio da conferência.",
+  "app.tour.toggleMic": "Ative ou desative seu microfone.",
+  "app.tour.selectorAudio": "Selecione seu dispositivo de áudio.",
+  "app.tour.leaveAudio": "Saia do áudio da conferência.",
   "app.tour.video": "Habilite ou desabilite a sua câmera.",
   "app.tour.screenshare": "Compartilhe sua tela com os demais participantes.",
-  "app.tour.interactions": "Aqui você tem diversas funcionalidades relacionadas à interação com a conferência: levantar a sua mão, definir uma reação, informar se você está ausente.",
+  "app.tour.reactions": "Defina uma reação.",
+  "app.tour.raiseHand": "Você pode levantar a sua mão por aqui.",
   "app.tour.plusActions": "Aqui você encontra mais funcionalidades.",
   "app.tour.whiteboard.title": "Quadro branco",
   "app.tour.whiteboard.intro": "Este é o quadro branco. O apresentador pode desenhar ou escrever sobre ele.",
   "app.tour.whiteboard.upload": "Se o apresentador carregar uma apresentação ou compartilhar sua tela, ela aparecerá aqui.",
   "app.tour.whiteboard.toolbar": "Aqui estão as ferramentas de desenho do quadro branco.",
   "app.tour.whiteboard.multiuser": "Neste botão, o apresentador pode permitir que os demais participantes possam editar o quadro branco simultaneamente.",
   "app.tour.closePresentation": "Minimize ou restaure a apresentação.",
+  "app.tour.mediaArea": "Aqui você pode compartilhar outras mídias com os participantes.",
   "app.tour.userListToggle": "Abra ou esconda o painel que contém a lista de usuários.",
+  "app.tour.panel.profileSettings": "Configure seu status, câmera e microfone.",
+  "app.tour.panel.userList": "Abra a lista de participantes.",
+  "app.tour.panel.appsGallery": "Habilite ou desabilite aplicativos adicionais.",
   "app.tour.panel.sharedNotes": "Crie notas colaborativamente com os demais participantes.",
   "app.tour.panel.chat": "Interaja com os demais participantes através de um chat.",
   "app.tour.panel.questions": "Envie perguntas ao moderador/apresentador.",
+  "app.tour.sessionDetails": "Clique aqui para ver os detalhes da sessão.",
   "app.tour.recording": "Apertando aqui, você inicia ou interrompe a gravação da conferência.",
   "app.tour.connectionStatus": "Visualize o estado da conectividade dos participantes que apresentam conexão ruim.",
-  "app.tour.moreOptions": "Acesse mais opções, como avaliar a plataforma, acessar as configurações ou sair da conferência.",
+  "app.tour.leave": "Saia da conferência.",
+  "app.tour.moreOptions": "Acesse mais opções, como Tela Cheia e Ajustar Layout.",
   "app.tour.endTour": "Você conheceu as funcionalidades básicas. Para se aprofundar mais, clique em \"Saber mais\".",
   "app.tour.startTour": "Iniciar o tour",
   "app.tour.button.next": "Próximo",

src/tour/component.tsx

@@ -6,7 +6,7 @@ import Shepherd from 'shepherd.js';
 import { IntlShape, createIntl, defineMessages } from 'react-intl';
 import {
   BbbPluginSdk, OptionsDropdownOption, PluginApi,
-  pluginLogger, UserListUiDataNames, IntlLocaleUiDataNames,
+  pluginLogger, IntlLocaleUiDataNames,
   LayoutPresentatioAreaUiDataNames, UiLayouts,
 } from 'bigbluebutton-html-plugin-sdk';
 import { TourPluginProps, Settings, ClientSettingsSubscriptionResultType } from './types';
@@ -36,7 +36,6 @@ export function startTour(
   intl: IntlShape,
   URLS: object,
   pluginApi: PluginApi,
-  userListOpened: boolean,
   presentationInitiallyOpened: boolean,
 ) {
   // Docs: https://docs.shepherdpro.com/guides/usage/
@@ -55,7 +54,6 @@ export function startTour(
     tour,
     URLS,
     pluginApi,
-    userListOpened,
     presentationInitiallyOpened,
   ).forEach((feature) => {
     feature.steps.forEach((step) => {
@@ -78,14 +76,9 @@ function TourPlugin(
 ): React.ReactElement<TourPluginProps> {
   BbbPluginSdk.initialize(uuid);
   const pluginApi: PluginApi = BbbPluginSdk.getPluginApi(uuid);
-  const [userListInitiallyOpened, setUserListInitiallyOpened] = React.useState(true);
   const [presentationInitiallyOpened, setPresentationInitiallyOpened] = React.useState(true);
   const [settings, setSettings] = React.useState<Settings>({});
 
-  const userListOpened = pluginApi.useUiData(UserListUiDataNames.USER_LIST_IS_OPEN, {
-    value: true,
-  });
-
   const currentLocale = pluginApi.useUiData(IntlLocaleUiDataNames.CURRENT_LOCALE, {
     locale: 'en',
     fallbackLocale: 'en',
@@ -129,13 +122,8 @@ function TourPlugin(
 
     // restores the panel state after finishing the tour
     endTourEvents.forEach((event) => Shepherd.on(event, () => {
-      if (userListInitiallyOpened !== userListOpened.value) {
-        if (userListInitiallyOpened) {
-          pluginApi.uiCommands.sidekickOptionsContainer.open();
-        } else {
-          pluginApi.uiCommands.sidekickOptionsContainer.close();
-        }
-      }
+      // reopen sidebar
+      pluginApi.uiCommands.sidekickOptionsContainer.open();
       // restores presentation state after finishing the tour
       if (presentationInitiallyOpened !== layoutInformation[0]?.isOpen) {
         if (presentationInitiallyOpened) {
@@ -151,15 +139,14 @@ function TourPlugin(
       // removes events
       endTourEvents.forEach((event) => Shepherd.off(event, undefined));
     };
-  }, [userListOpened, layoutInformation]);
+  }, [layoutInformation]);
 
   useEffect(() => {
     pluginApi.setOptionsDropdownItems([
       new OptionsDropdownOption({
         label: intl.formatMessage(intlMessages.start),
         icon: 'presentation',
         onClick: async () => {
-          setUserListInitiallyOpened(userListOpened.value);
           setPresentationInitiallyOpened(layoutInformation[0]?.isOpen);
           pluginLogger.info('Starting Tour');
           // ensure only userList is open (to also work on Mobile)
@@ -173,13 +160,12 @@ function TourPlugin(
             intl,
             settings?.url,
             pluginApi,
-            userListOpened.value,
             layoutInformation[0]?.isOpen,
           );
         },
       }),
     ]);
-  }, [userListOpened, currentLocale, settings, layoutInformation]);
+  }, [currentLocale, settings, layoutInformation]);
 
   return null;
 }