Avoid hardcoding branding in user onboarding

Author: justjanne

src/components/views/user-onboarding/UserOnboardingFeedback.tsx

@@ -32,10 +32,14 @@ export function UserOnboardingFeedback() {
         <div className="mx_UserOnboardingFeedback">
             <div className="mx_UserOnboardingFeedback_content">
                 <Heading size="h4" className="mx_UserOnboardingFeedback_title">
-                    { _t("How are you finding Element so far?") }
+                    { _t("How are you finding %(brand)s so far?", {
+                        brand: SdkConfig.get("brand"),
+                    }) }
                 </Heading>
                 <div className="mx_UserOnboardingFeedback_text">
-                    { _t("We’d appreciate any feedback on how you’re finding Element.") }
+                    { _t("We’d appreciate any feedback on how you’re finding %(brand)s.", {
+                        brand: SdkConfig.get("brand"),
+                    }) }
                 </div>
             </div>
             <AccessibleButton

src/components/views/user-onboarding/UserOnboardingList.tsx

@@ -62,7 +62,7 @@ export function UserOnboardingList({ completedTasks, waitingTasks }: Props) {
             </div>
             <ol className="mx_UserOnboardingList_list">
                 { tasks.map(([task, completed]) => (
-                    <UserOnboardingTask key={task.title} completed={completed} task={task} />
+                    <UserOnboardingTask key={task.id} completed={completed} task={task} />
                 )) }
             </ol>
         </div>

src/components/views/user-onboarding/UserOnboardingTask.tsx

@@ -27,6 +27,9 @@ interface Props {
 }
 
 export function UserOnboardingTask({ task, completed = false }: Props) {
+    const title = typeof task.title === "function" ? task.title() : task.title;
+    const description = typeof task.description === "function" ? task.description() : task.description;
+
     return (
         <li className={classNames("mx_UserOnboardingTask", {
             "mx_UserOnboardingTask_completed": completed,
@@ -42,10 +45,10 @@ export function UserOnboardingTask({ task, completed = false }: Props) {
                 id={`mx_UserOnboardingTask_${task.id}`}
                 className="mx_UserOnboardingTask_content">
                 <Heading size="h4" className="mx_UserOnboardingTask_title">
-                    { task.title }
+                    { title }
                 </Heading>
                 <div className="mx_UserOnboardingTask_description">
-                    { task.description }
+                    { description }
                 </div>
             </div>
             { task.action && (!task.action.hideOnComplete || !completed) && (

src/hooks/useUserOnboardingTasks.ts

@@ -25,14 +25,15 @@ import { _t } from "../languageHandler";
 import Modal from "../Modal";
 import { Notifier } from "../Notifier";
 import PosthogTrackers from "../PosthogTrackers";
+import SdkConfig from "../SdkConfig";
 import { UseCase } from "../settings/enums/UseCase";
 import { useSettingValue } from "./useSettings";
 import { UserOnboardingContext } from "./useUserOnboardingContext";
 
 export interface UserOnboardingTask {
     id: string;
-    title: string;
-    description: string;
+    title: string | (() => string);
+    description: string | (() => string);
     relevant?: UseCase[];
     action?: {
         label: string;
@@ -95,8 +96,12 @@ const tasks: InternalUserOnboardingTask[] = [
     },
     {
         id: "download-apps",
-        title: _t("Download Element"),
-        description: _t("Don’t miss a thing by taking Element with you"),
+        title: () => _t("Download %(brand)s", {
+            brand: SdkConfig.get("brand"),
+        }),
+        description: () => _t("Don’t miss a thing by taking %(brand)s with you", {
+            brand: SdkConfig.get("brand"),
+        }),
         completed: (ctx: UserOnboardingContext) => {
             return Boolean(ctx.devices.filter(it => it.device_id !== ctx.myDevice).length);
         },