{ _t("Preferences") }
- { !SettingsStore.getValue("feature_breadcrumbs_v2") &&
+ { roomListSettings.length > 0 &&
{ _t("Room list") }
- { this.renderGroup(PreferencesUserSettingsTab.ROOM_LIST_SETTINGS) }
+ { this.renderGroup(roomListSettings) }
}
diff --git a/src/components/views/user-onboarding/UserOnboardingHeader.tsx b/src/components/views/user-onboarding/UserOnboardingHeader.tsx
new file mode 100644
index 0000000000..264a0c64bc
--- /dev/null
+++ b/src/components/views/user-onboarding/UserOnboardingHeader.tsx
@@ -0,0 +1,98 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import * as React from "react";
+
+import defaultDispatcher from "../../../dispatcher/dispatcher";
+import { _t } from "../../../languageHandler";
+import PosthogTrackers from "../../../PosthogTrackers";
+import SdkConfig from "../../../SdkConfig";
+import { UseCase } from "../../../settings/enums/UseCase";
+import AccessibleButton, { ButtonEvent } from "../../views/elements/AccessibleButton";
+import Heading from "../../views/typography/Heading";
+
+const onClickSendDm = (ev: ButtonEvent) => {
+ PosthogTrackers.trackInteraction("WebUserOnboardingHeaderSendDm", ev);
+ defaultDispatcher.dispatch({ action: 'view_create_chat' });
+};
+
+interface Props {
+ useCase: UseCase;
+}
+
+export function UserOnboardingHeader({ useCase }: Props) {
+ let title: string;
+ let description: string;
+ let image;
+ let actionLabel: string;
+
+ switch (useCase) {
+ case UseCase.PersonalMessaging:
+ title = _t("Secure messaging for friends and family");
+ description = _t("With free end-to-end encrypted messaging, and unlimited voice and video calls, " +
+ "%(brand)s is a great way to stay in touch.", {
+ brand: SdkConfig.get("brand"),
+ });
+ image = require("../../../../res/img/user-onboarding/PersonalMessaging.png");
+ actionLabel = _t("Start your first chat");
+ break;
+ case UseCase.WorkMessaging:
+ title = _t("Secure messaging for work");
+ description = _t("With free end-to-end encrypted messaging, and unlimited voice and video calls," +
+ " %(brand)s is a great way to stay in touch.", {
+ brand: SdkConfig.get("brand"),
+ });
+ image = require("../../../../res/img/user-onboarding/WorkMessaging.png");
+ actionLabel = _t("Find your co-workers");
+ break;
+ case UseCase.CommunityMessaging:
+ title = _t("Community ownership");
+ description = _t("Keep ownership and control of community discussion.\n" +
+ "Scale to support millions, with powerful moderation and interoperability.");
+ image = require("../../../../res/img/user-onboarding/CommunityMessaging.png");
+ actionLabel = _t("Find your people");
+ break;
+ default:
+ title = _t("Welcome to %(brand)s", {
+ brand: SdkConfig.get("brand"),
+ });
+ description = _t("With free end-to-end encrypted messaging, and unlimited voice and video calls," +
+ " %(brand)s is a great way to stay in touch.", {
+ brand: SdkConfig.get("brand"),
+ });
+ image = require("../../../../res/img/user-onboarding/PersonalMessaging.png");
+ actionLabel = _t("Start your first chat");
+ break;
+ }
+
+ return (
+
+ 
+
+ );
+}
diff --git a/src/components/views/user-onboarding/UserOnboardingList.tsx b/src/components/views/user-onboarding/UserOnboardingList.tsx
new file mode 100644
index 0000000000..dd7860ede9
--- /dev/null
+++ b/src/components/views/user-onboarding/UserOnboardingList.tsx
@@ -0,0 +1,66 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import * as React from "react";
+import { useMemo } from "react";
+
+import { UserOnboardingTask as Task } from "../../../hooks/useUserOnboardingTasks";
+import { _t } from "../../../languageHandler";
+import SdkConfig from "../../../SdkConfig";
+import ProgressBar from "../../views/elements/ProgressBar";
+import Heading from "../../views/typography/Heading";
+import { UserOnboardingTask } from "./UserOnboardingTask";
+
+interface Props {
+ completedTasks: Task[];
+ waitingTasks: Task[];
+}
+
+export function UserOnboardingList({ completedTasks, waitingTasks }: Props) {
+ const completed = completedTasks.length;
+ const waiting = waitingTasks.length;
+ const total = completed + waiting;
+
+ const tasks = useMemo(() => [
+ ...completedTasks.map((it): [Task, boolean] => [it, true]),
+ ...waitingTasks.map((it): [Task, boolean] => [it, false]),
+ ], [completedTasks, waitingTasks]);
+
+ return (
+
+
+ { title }
+ .
+
+
+ { actionLabel }
+
+
+ + { description } +
+
+
+ );
+}
diff --git a/src/components/views/user-onboarding/UserOnboardingPage.tsx b/src/components/views/user-onboarding/UserOnboardingPage.tsx
new file mode 100644
index 0000000000..7ca1323298
--- /dev/null
+++ b/src/components/views/user-onboarding/UserOnboardingPage.tsx
@@ -0,0 +1,84 @@
+/*
+Copyright 2020-2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { useEffect, useState } from "react";
+import * as React from "react";
+
+import { useInitialSyncComplete } from "../../../hooks/useIsInitialSyncComplete";
+import { useSettingValue } from "../../../hooks/useSettings";
+import { useUserOnboardingTasks } from "../../../hooks/useUserOnboardingTasks";
+import { MatrixClientPeg } from "../../../MatrixClientPeg";
+import SdkConfig from "../../../SdkConfig";
+import { UseCase } from "../../../settings/enums/UseCase";
+import { getHomePageUrl } from "../../../utils/pages";
+import AutoHideScrollbar from "../../structures/AutoHideScrollbar";
+import EmbeddedPage from "../../structures/EmbeddedPage";
+import HomePage from "../../structures/HomePage";
+import { UserOnboardingHeader } from "./UserOnboardingHeader";
+import { UserOnboardingList } from "./UserOnboardingList";
+
+interface Props {
+ justRegistered?: boolean;
+}
+
+// We decided to only show the new user onboarding page to new users
+// For now, that means we set the cutoff at 2022-07-01 00:00 UTC
+const USER_ONBOARDING_CUTOFF_DATE = new Date(1_656_633_600);
+export function showUserOnboardingPage(useCase: UseCase): boolean {
+ return useCase !== null || MatrixClientPeg.userRegisteredAfter(USER_ONBOARDING_CUTOFF_DATE);
+}
+
+const ANIMATION_DURATION = 2800;
+export function UserOnboardingPage({ justRegistered = false }: Props) {
+ const config = SdkConfig.get();
+ const pageUrl = getHomePageUrl(config);
+
+ const useCase = useSettingValue
+
+ { waiting > 0 ? _t("Only %(count)s steps to go", {
+ count: waiting,
+ }) : _t("You did it!") }
+
+
+
+ { _t("Complete these to get the most out of %(brand)s", {
+ brand: SdkConfig.get("brand"),
+ }) }
+
+
+
+ -
+ { tasks.map(([task, completed]) => (
+
+
+ { task.title }
+
+
+ { task.action && (!task.action.hideOnComplete || !completed) && (
+
+ { task.description }
+
+