New User Onboarding Task List (#9083)

* Improve type of AccessibleButton to accurately represent available props
* Update analytics events

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 (
+        <div className="mx_UserOnboardingHeader">
+            <div className="mx_UserOnboardingHeader_content">
+                <Heading size="h1">
+                    { title }
+                    <span className="mx_UserOnboardingHeader_dot">.</span>
+                </Heading>
+                <p>
+                    { description }
+                </p>
+                <AccessibleButton onClick={onClickSendDm} kind="primary">
+                    { actionLabel }
+                </AccessibleButton>
+            </div>
+            <img className="mx_UserOnboardingHeader_image" src={image} alt="" />
+        </div>
+    );
+}

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 (
+        <div className="mx_UserOnboardingList">
+            <div className="mx_UserOnboardingList_header">
+                <Heading size="h3" className="mx_UserOnboardingList_title">
+                    { waiting > 0 ? _t("Only %(count)s steps to go", {
+                        count: waiting,
+                    }) : _t("You did it!") }
+                </Heading>
+                <div className="mx_UserOnboardingList_hint">
+                    { _t("Complete these to get the most out of %(brand)s", {
+                        brand: SdkConfig.get("brand"),
+                    }) }
+                </div>
+            </div>
+            <div className="mx_UserOnboardingList_progress">
+                <ProgressBar value={completed} max={total} animated />
+            </div>
+            <ol className="mx_UserOnboardingList_list">
+                { tasks.map(([task, completed]) => (
+                    <UserOnboardingTask key={task.title} completed={completed} task={task} />
+                )) }
+            </ol>
+        </div>
+    );
+}

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<UseCase | null>("FTUE.useCaseSelection");
+    const [completedTasks, waitingTasks] = useUserOnboardingTasks();
+
+    const initialSyncComplete = useInitialSyncComplete();
+    const [showList, setShowList] = useState<boolean>(false);
+    useEffect(() => {
+        if (initialSyncComplete) {
+            let handler: number | null = setTimeout(() => {
+                handler = null;
+                setShowList(true);
+            }, ANIMATION_DURATION);
+            return () => {
+                clearTimeout(handler);
+                handler = null;
+            };
+        } else {
+            setShowList(false);
+        }
+    }, [initialSyncComplete, setShowList]);
+
+    // Only show new onboarding list to users who registered after a given date or have chosen a use case
+    if (!showUserOnboardingPage(useCase)) {
+        return <HomePage justRegistered={justRegistered} />;
+    }
+
+    if (pageUrl) {
+        return <EmbeddedPage className="mx_HomePage" url={pageUrl} scrollbar={true} />;
+    }
+
+    return <AutoHideScrollbar className="mx_UserOnboardingPage">
+        <UserOnboardingHeader useCase={useCase} />
+        { showList && (
+            <UserOnboardingList completedTasks={completedTasks} waitingTasks={waitingTasks} />
+        ) }
+    </AutoHideScrollbar>;
+}

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

@@ -0,0 +1,64 @@
+/*
+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 classNames from "classnames";
+import * as React from "react";
+
+import { UserOnboardingTask as Task } from "../../../hooks/useUserOnboardingTasks";
+import AccessibleButton from "../../views/elements/AccessibleButton";
+import Heading from "../../views/typography/Heading";
+
+interface Props {
+    task: Task;
+    completed?: boolean;
+}
+
+export function UserOnboardingTask({ task, completed = false }: Props) {
+    return (
+        <li className={classNames("mx_UserOnboardingTask", {
+            "mx_UserOnboardingTask_completed": completed,
+        })}>
+            <div
+                className="mx_UserOnboardingTask_number"
+                role="checkbox"
+                aria-disabled="true"
+                aria-checked={completed}
+                aria-labelledby={`mx_UserOnboardingTask_${task.id}`}
+            />
+            <div
+                id={`mx_UserOnboardingTask_${task.id}`}
+                className="mx_UserOnboardingTask_content">
+                <Heading size="h4" className="mx_UserOnboardingTask_title">
+                    { task.title }
+                </Heading>
+                <div className="mx_UserOnboardingTask_description">
+                    { task.description }
+                </div>
+            </div>
+            { task.action && (!task.action.hideOnComplete || !completed) && (
+                <AccessibleButton
+                    element="a"
+                    className="mx_UserOnboardingTask_action"
+                    kind="primary_outline"
+                    href={task.action.href}
+                    target="_blank"
+                    onClick={task.action.onClick}>
+                    { task.action.label }
+                </AccessibleButton>
+            ) }
+        </li>
+    );
+}