Refactor/wizard translations

components/interview/interfaces/name-generator/NameGenerator.tsx

@@ -10,6 +10,7 @@ import { cn } from '~/lib/utils';
 import { interfaceWrapperClasses } from '../../ui/SimpleShell';
 import { withOnboardingWizard } from '~/components/onboard-wizard/withOnboardingWizard';
 import { type InterviewStage } from '../../ui/InterviewShell';
+import { useTranslations } from 'next-intl';
 import { type TNodeType } from '~/schemas/protocol/codebook/entities';
 
 const demoPrompts = [
@@ -96,36 +97,42 @@ function NameGenerator(_props: InterviewStage) {
   );
 }
 
-export default withOnboardingWizard(NameGenerator, {
-  id: 'name-generator',
-  name: {
-    en: 'Name Generator Help',
-  },
-  priority: 'Task',
-  description: {
-    en: [
+export default withOnboardingWizard(NameGenerator, (_props) => {
+  // TODO: get the stage id from the props
+  const stageId = '1';
+
+  let t = useTranslations(`Protocol.Stages.${stageId}.Wizard`);
+
+  // hacky way to check if the translation exists. This tells us if there are stage-level translations for the wizard
+  if (t('Name').includes(`Protocol.Stages.${stageId}.Wizard.Name`)) {
+    // use the default stage type wizard steps. will either be user-supplied or our defaults
+    t = useTranslations('Interview.Wizards.NameGenerator');
+  }
+
+  return {
+    id: 'name-generator',
+    name: t('Name'),
+    priority: 'Task',
+    description: [
       {
         type: 'paragraph',
         children: [
           {
-            text: 'Help with the current task, including how to add new people, how to delete people, and how to edit people.',
+            text: t('Description'),
           },
         ],
       },
     ],
-  },
-  steps: [
-    {
-      title: {
-        en: 'Welcome to the Name Generator',
-      },
-      content: {
-        en: [
+    steps: [
+      {
+        title: t('Steps.Welcome.Title'),
+
+        content: [
           {
             type: 'paragraph',
             children: [
               {
-                text: 'This is the name generator interface. This interface allows you to nominate people. First, read the prompt and think about the people who meet the criteria.',
+                text: t('Steps.Welcome.Text'),
               },
             ],
           },
@@ -139,60 +146,48 @@ export default withOnboardingWizard(NameGenerator, {
           },
         ],
       },
-    },
-    {
-      targetElementId: 'data-wizard-prompts',
-      title: {
-        en: 'Prompts',
-      },
-      content: {
-        en: [
+      {
+        targetElementId: 'data-wizard-prompts',
+        title: t('Steps.Prompts.Title'),
+        content: [
           {
             type: 'paragraph',
             children: [
               {
-                text: 'These are the prompts. They help you think about the people you want to nominate.',
+                text: t('Steps.Prompts.Text'),
               },
             ],
           },
         ],
       },
-    },
-    {
-      targetElementId: 'data-wizard-task-step-2',
-      title: {
-        en: 'Side Panels',
-      },
-      content: {
-        en: [
+      {
+        targetElementId: 'data-wizard-task-step-2',
+        title: t('Steps.SidePanels.Title'),
+        content: [
           {
             type: 'paragraph',
             children: [
               {
-                text: 'These are side panels. They show the people you have already mentioned. You can drag and drop a person into the main area to nominate them.',
+                text: t('Steps.SidePanels.Text'),
               },
             ],
           },
         ],
       },
-    },
-    {
-      targetElementId: 'data-wizard-task-step-3',
-      title: {
-        en: 'Adding a person',
-      },
-      content: {
-        en: [
+      {
+        targetElementId: 'data-wizard-task-step-3',
+        title: t('Steps.AddPerson.Title'),
+        content: [
           {
             type: 'paragraph',
             children: [
               {
-                text: 'Click this button to add a new person',
+                text: t('Steps.AddPerson.Text'),
               },
             ],
           },
         ],
       },
-    },
-  ],
+    ],
+  };
 });

components/interview/ui/HelpButton.tsx

@@ -1,10 +1,9 @@
 import { HelpCircle } from 'lucide-react';
 import { NavButtonWithTooltip } from './NavigationButton';
-import { useLocale, useTranslations } from 'next-intl';
+import { useTranslations } from 'next-intl';
 import { useWizardController } from '~/components/onboard-wizard/useWizardController';
 import { env } from '~/env';
 import { WIZARD_LOCAL_STORAGE_KEY } from '~/lib/onboarding-wizard/Provider';
-import { getLocalisedValue } from '~/lib/localisation/utils';
 import { renderLocalisedValue } from '~/components/RenderRichText';
 import { useDialog } from '~/lib/dialogs/DialogProvider';
 import { Button } from '~/components/ui/Button';
@@ -17,7 +16,6 @@ import Form from '~/components/ui/form/Form';
 export default function HelpButton({ id }: { id?: string }) {
   const { openDialog } = useDialog();
   const { wizards, setActiveWizard } = useWizardController();
-  const locale = useLocale();
 
   const t = useTranslations('Interview.Navigation');
   const t2 = useTranslations('Components.ContextualHelp');
@@ -40,12 +38,10 @@ export default function HelpButton({ id }: { id?: string }) {
                 .map((wizard) => (
                   <Card
                     key={wizard.id}
-                    title={getLocalisedValue(wizard.name, locale)}
+                    title={wizard.name}
                     onClick={() => resolve(wizard.id)}
                   >
-                    {renderLocalisedValue(
-                      getLocalisedValue(wizard.description, locale),
-                    )}
+                    {renderLocalisedValue(wizard.description)}
                   </Card>
                 ))}
               <Card

components/interview/ui/Navigation.tsx

@@ -100,54 +100,46 @@ const Navigation = ({
   );
 };
 
-export default withOnboardingWizard(Navigation, {
-  id: 'general-interview-information',
-  name: {
-    en: 'General Interview Information',
-  },
-  priority: 'Navigation',
-  description: {
-    en: [
+export default withOnboardingWizard(Navigation, () => {
+  const t = useTranslations('Interview.Wizards.General');
+
+  return {
+    id: 'general-interview-information',
+    name: t('Name'),
+    priority: 'Navigation',
+    description: [
       {
         type: 'paragraph',
         children: [
           {
-            text: 'Help with the general interview process, including how to navigate the interview, and general tips to help you get started.',
+            text: t('Description'),
           },
         ],
       },
     ],
-  },
-  steps: [
-    {
-      title: {
-        en: 'Welcome to the Interview!',
-      },
-      content: {
-        en: [
+    steps: [
+      {
+        title: t('Steps.Welcome.Title'),
+        content: [
           {
             type: 'paragraph',
             children: [
               {
-                text: 'Before you begin, here are some general tips to help you navigate the interview process.',
+                text: t('Steps.Welcome.Text'),
               },
             ],
           },
         ],
       },
-    },
-    {
-      targetElementId: 'navigation-bar',
-      title: {
-        en: 'Navigation Bar',
-      },
-      content: {
-        en: [
+      {
+        targetElementId: 'navigation-bar',
+        title: t('Steps.NavigationBar.Title'),
+        content: [
           {
             type: 'paragraph',
             children: [
               {
-                text: 'The navigation bar helps you move through the interview process, and get help if you need it.',
+                text: t('Steps.NavigationBar.Text'),
               },
             ],
           },
@@ -161,24 +153,20 @@ export default withOnboardingWizard(Navigation, {
           },
         ],
       },
-    },
-    {
-      targetElementId: 'interview-movement',
-      title: {
-        en: 'Navigating the Interview',
-      },
-      content: {
-        en: [
+      {
+        targetElementId: 'interview-movement',
+        title: t('Steps.InterviewMovement.Title'),
+        content: [
           {
             type: 'paragraph',
             children: [
               {
-                text: 'Use the back and forward buttons to move through the interview, and track your progress using the progress bar.',
+                text: t('Steps.InterviewMovement.Text'),
               },
             ],
           },
         ],
       },
-    },
-  ],
+    ],
+  };
 });

components/onboard-wizard/WizardStep.tsx

@@ -2,19 +2,15 @@ import Popover from '~/components/ui/Popover';
 import { Button } from '../ui/Button';
 import { useWizardController } from './useWizardController';
 import RenderRichText from '../RenderRichText';
-import { useLocale, useTranslations } from 'next-intl';
+import { useTranslations } from 'next-intl';
 import { useElementPosition } from '~/lib/onboarding-wizard/utils';
 import { type Step } from '~/lib/onboarding-wizard/store';
-import { getLocalisedValue } from '~/lib/localisation/utils';
 import Form from '../ui/form/Form';
 import { generatePublicId } from '~/lib/generatePublicId';
 import { ControlledDialog } from '~/lib/dialogs/ControlledDialog';
 
 export default function WizardStep({ step }: { step: Step }) {
   const { title, content, targetElementId } = step;
-  const locale = useLocale();
-  const localisedStepContent = getLocalisedValue(content, locale);
-  const localisedStepTitle = getLocalisedValue(title, locale);
 
   const {
     closeWizard,
@@ -30,7 +26,7 @@ export default function WizardStep({ step }: { step: Step }) {
 
   const renderContent = () => (
     <>
-      <RenderRichText value={localisedStepContent} />
+      <RenderRichText value={content} />
       <Form.Footer
         primaryAction={
           hasNextStep ? (
@@ -60,7 +56,7 @@ export default function WizardStep({ step }: { step: Step }) {
   if (position) {
     return (
       <Popover
-        title={localisedStepTitle}
+        title={title}
         content={renderContent()}
         modal
         isOpen
@@ -85,7 +81,7 @@ export default function WizardStep({ step }: { step: Step }) {
     <ControlledDialog
       id={generatePublicId()}
       open
-      title={localisedStepTitle}
+      title={title}
       closeDialog={closeWizard}
     >
       {renderContent()}

components/onboard-wizard/withOnboardingWizard.tsx

@@ -4,9 +4,10 @@ import OnboardWizard from './OnboardWizard';
 // A HOC that wraps a stage with an onboarding wizard
 export function withOnboardingWizard<P extends object>(
   WrappedComponent: React.ComponentType<P>,
-  wizard: Wizard,
+  getWizard: (props: P) => Wizard, // function to create a wizard
 ) {
   const WithOnboardingWizard = (props: P) => {
+    const wizard = getWizard(props);
     return (
       <>
         <OnboardWizard wizard={wizard} />

lib/db/sample-data/dev-protocol.ts

@@ -51,6 +51,28 @@ export const devProtocol: Protocol = {
         Stages: {
           '1': {
             Label: 'Générateur de noms',
+            Wizard: {
+              Name: 'French wizard stage specific override',
+              Description: 'Description!',
+              Steps: {
+                Welcome: {
+                  Title: 'Title - Welcome override',
+                  Text: 'Stage specific override',
+                },
+                Prompts: {
+                  Title: 'Title - Prompts override',
+                  Text: 'Stage specific override',
+                },
+                SidePanels: {
+                  Title: 'Title - Side Panels override',
+                  Text: 'Stage specific override',
+                },
+                AddPerson: {
+                  Title: 'Title - Add Person override',
+                  Text: 'Stage specific override',
+                },
+              },
+            },
           },
         },
         Prompts: {
@@ -66,6 +88,20 @@ export const devProtocol: Protocol = {
           },
         },
       },
+      Interview: {
+        Wizards: {
+          General: {
+            Name: "Informations générales sur l'entretien",
+            Description: "Description de l'étape",
+            Steps: {
+              Welcome: {
+                Title: 'Bienvenue',
+                Text: "Bienvenue dans l'entretien",
+              },
+            },
+          },
+        },
+      },
     },
   },
   codebook: {