Implement Use Case Selection screen (#8984)

* Introduce new splash page wrapper
* Introduce new use case selection screen

src/components/views/elements/UseCaseSelection.tsx

@@ -0,0 +1,86 @@
+/*
+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 React, { useEffect, useState } from 'react';
+
+import { _t } from "../../../languageHandler";
+import { UseCase } from "../../../settings/enums/UseCase";
+import SplashPage from "../../structures/SplashPage";
+import AccessibleButton from "../elements/AccessibleButton";
+import { UseCaseSelectionButton } from "./UseCaseSelectionButton";
+
+interface Props {
+    onFinished: (useCase: UseCase) => void;
+}
+
+const TIMEOUT = 1500;
+
+export function UseCaseSelection({ onFinished }: Props) {
+    const [selection, setSelected] = useState<UseCase | null>(null);
+
+    useEffect(() => {
+        if (selection) {
+            setSelected(selection);
+            let handler: number | null = setTimeout(() => {
+                handler = null;
+                onFinished(selection);
+            }, TIMEOUT);
+            return () => {
+                clearTimeout(handler);
+                handler = null;
+            };
+        }
+    }, [selection, onFinished]);
+
+    return (
+        <SplashPage className={classNames(
+            "mx_UseCaseSelection", {
+                "mx_UseCaseSelection_selected": selection !== null,
+            },
+        )}>
+            <div className="mx_UseCaseSelection_title mx_UseCaseSelection_slideIn">
+                <h1>{ _t("You're in") }</h1>
+            </div>
+            <div className="mx_UseCaseSelection_info mx_UseCaseSelection_slideInDelayed">
+                <h2>{ _t("Who will you chat to the most?") }</h2>
+                <h4>{ _t("We'll help you get connected.") }</h4>
+            </div>
+            <div className="mx_UseCaseSelection_options mx_UseCaseSelection_slideInDelayed">
+                <UseCaseSelectionButton
+                    useCase={UseCase.PersonalMessaging}
+                    selected={selection === UseCase.PersonalMessaging}
+                    onClick={setSelected}
+                />
+                <UseCaseSelectionButton
+                    useCase={UseCase.WorkMessaging}
+                    selected={selection === UseCase.WorkMessaging}
+                    onClick={setSelected}
+                />
+                <UseCaseSelectionButton
+                    useCase={UseCase.CommunityMessaging}
+                    selected={selection === UseCase.CommunityMessaging}
+                    onClick={setSelected}
+                />
+            </div>
+            <div className="mx_UseCaseSelection_skip mx_UseCaseSelection_slideInDelayed">
+                <AccessibleButton kind="link" onClick={async () => setSelected(UseCase.Skip)}>
+                    { _t("Skip") }
+                </AccessibleButton>
+            </div>
+        </SplashPage>
+    );
+}

src/components/views/elements/UseCaseSelectionButton.tsx

@@ -0,0 +1,59 @@
+/*
+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 React from "react";
+
+import { _t } from "../../../languageHandler";
+import { UseCase } from "../../../settings/enums/UseCase";
+import AccessibleButton from "./AccessibleButton";
+
+interface Props {
+    useCase: UseCase;
+    selected: boolean;
+    onClick: (useCase: UseCase) => void;
+}
+
+export function UseCaseSelectionButton({ useCase, onClick, selected }: Props) {
+    let label: string;
+    switch (useCase) {
+        case UseCase.PersonalMessaging:
+            label = _t("Friends and family");
+            break;
+        case UseCase.WorkMessaging:
+            label = _t("Coworkers and teams");
+            break;
+        case UseCase.CommunityMessaging:
+            label = _t("Online community members");
+            break;
+    }
+
+    return (
+        <AccessibleButton
+            className={classNames("mx_UseCaseSelectionButton", {
+                "mx_UseCaseSelectionButton_selected": selected,
+            })}
+            onClick={async () => onClick(useCase)}>
+            <div className={classNames("mx_UseCaseSelectionButton_icon", {
+                "mx_UseCaseSelectionButton_messaging": useCase === UseCase.PersonalMessaging,
+                "mx_UseCaseSelectionButton_work": useCase === UseCase.WorkMessaging,
+                "mx_UseCaseSelectionButton_community": useCase === UseCase.CommunityMessaging,
+            })} />
+            <span>{ label }</span>
+            <div className="mx_UseCaseSelectionButton_selectedIcon" />
+        </AccessibleButton>
+    );
+}