( WrappedComponent: React.ComponentType
, - wizard: Wizard, + getWizard: (props: P) => Wizard, // function to create a wizard ) { const WithOnboardingWizard = (props: P) => { + const wizard = getWizard(props); return ( <> diff --git a/lib/db/sample-data/dev-protocol.ts b/lib/db/sample-data/dev-protocol.ts index ab5d6c28..b18a1291 100644 --- a/lib/db/sample-data/dev-protocol.ts +++ b/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: { diff --git a/lib/localisation/locale.ts b/lib/localisation/locale.ts index cc097721..30a29d9e 100644 --- a/lib/localisation/locale.ts +++ b/lib/localisation/locale.ts @@ -14,6 +14,7 @@ import Negotiator from 'negotiator'; import { match } from '@formatjs/intl-localematcher'; import { getCurrentPath, getInterviewId } from '../serverUtils'; import type { ProtocolMessages } from '~/schemas/protocol/protocol'; +import deepmerge from 'deepmerge'; async function getProtocolLocales(interviewId: string): Promise { try { @@ -122,10 +123,9 @@ export async function getLocaleMessages( )) as { default: IntlMessages; }; - return { - ...mainMessages.default, - ...protocolMessages, - }; + + return deepmerge(mainMessages.default, protocolMessages); + } export async function setUserLocale(locale: Locale) { diff --git a/lib/localisation/messages/en.json b/lib/localisation/messages/en.json index e452ac4b..12ad3523 100644 --- a/lib/localisation/messages/en.json +++ b/lib/localisation/messages/en.json @@ -95,6 +95,52 @@ "LanguageSwitcher": "Change interview language", "Help": "Help menu", "Progress": "You have completed {percent}% of the interview" + }, + "Wizards": { + "General": { + "Name": "General Interview Information", + "Description": "Help with the general interview process, including how to navigate the interview, and general tips to help you get started.", + "Steps": { + "Welcome": { + "Title": "Welcome to the interview", + "Text": "Before you begin, here are some general tips to help you navigate the interview process." + }, + "NavigationBar": { + "Title": "Navigation Bar", + "Text": "The navigation bar helps you move through the interview process, and get help if you need it." + }, + "InterviewMovement": { + "Title": "Navigating the Interview", + "Text": "This is the third step of the interview. Here you will be introduced to the interview process and given an overview of what to expect." + }, + "Summary": { + "Title": "Summary", + "Text": "Use the back and forward buttons to move through the interview, and track your progress using the progress bar." + } + } + }, + "NameGenerator": { + "Name": "Name Generator Help", + "Description": "Help with the current task, including how to add new people, how to delete people, and how to edit people.", + "Steps": { + "Welcome": { + "Title": "Welcome to the Name Generator", + "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." + }, + "Prompts": { + "Title": "Prompts", + "Text": "These are the prompts. They help you think about the people you want to nominate." + }, + "SidePanels": { + "Title": "Side Panels", + "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." + }, + "AddPerson": { + "Title": "Adding a person", + "Text": "Click this button to add a new person" + } + } + } } }, "Generic": { diff --git a/lib/onboarding-wizard/store.ts b/lib/onboarding-wizard/store.ts index f3d0945f..47f43c13 100644 --- a/lib/onboarding-wizard/store.ts +++ b/lib/onboarding-wizard/store.ts @@ -1,5 +1,5 @@ import { createStore } from 'zustand'; -import type { LocalisedString, LocalisedRecord } from '~/schemas/shared'; +import type { JSONRichText } from '~/schemas/shared'; import { type LocalStorageState } from '~/lib/createLocalStorageStore'; const Priorities = { @@ -14,14 +14,14 @@ type Priority = keyof typeof Priorities; export type Step = { targetElementId?: string; - title: LocalisedString; - content: LocalisedRecord; + title: string; + content: JSONRichText; }; export type Wizard = { id: string; - name: LocalisedString; - description: LocalisedRecord; + name: string; + description: JSONRichText; steps: Step[]; priority: Priority; }; diff --git a/package.json b/package.json index bbab6ce0..78196f82 100644 --- a/package.json +++ b/package.json @@ -43,6 +43,7 @@ "@vercel/analytics": "^1.3.1", "@vercel/kv": "^2.0.0", "clsx": "^2.1.1", + "deepmerge": "^4.3.1", "eslint-config-prettier": "^9.1.0", "framer-motion": "12.0.0-alpha.1", "knip": "^5.30.2", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index c6cc96c0..a0fa3c32 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -88,6 +88,9 @@ importers: clsx: specifier: ^2.1.1 version: 2.1.1 + deepmerge: + specifier: ^4.3.1 + version: 4.3.1 eslint-config-prettier: specifier: ^9.1.0 version: 9.1.0(eslint@8.57.0) diff --git a/schemas/protocol/protocol.ts b/schemas/protocol/protocol.ts index 81a2f560..fe9ff80d 100644 --- a/schemas/protocol/protocol.ts +++ b/schemas/protocol/protocol.ts @@ -12,6 +12,19 @@ export const ProtocolMessagesSchema = z.object({ z.string(), z.object({ Label: z.string(), + Wizard: z + .object({ + Name: z.string(), + Description: z.string(), + Steps: z.record( + z.string(), + z.object({ + Title: z.string(), + Text: z.string(), + }), + ), + }) + .optional(), // Stage-specific overrides are optional }), ), Panels: z @@ -24,6 +37,36 @@ export const ProtocolMessagesSchema = z.object({ .optional(), Prompts: z.record(z.string(), z.string()).optional(), }), + Interview: z + .object({ + Wizards: z.object({ + General: z.object({ + Name: z.string().optional(), + Description: z.string().optional(), + Steps: z.object({ + Welcome: z + .object({ + Title: z.string(), + Text: z.string(), + }) + .optional(), + Overview: z + .object({ + Title: z.string(), + Text: z.string(), + }) + .optional(), + Summary: z + .object({ + Title: z.string(), + Text: z.string(), + }) + .optional(), + }), + }), + }), + }) + .optional(), }); const LocalisedStringsSchema = z.record(