imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Implement Use Case Selection screen (#8984)

Browse source 
* Introduce new splash page wrapper
* Introduce new use case selection screen
This commit is contained in:
Janne Mareike Koschinski 2022-07-13 15:43:44 +02:00 • committed by GitHub
parent bda272dce4
commit f5f79158ed
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
24 changed files with 597 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

46
src/components/structures/MatrixChat.tsx
View file

@ -68,6 +68,7 @@ import { FontWatcher } from '../../settings/watchers/FontWatcher';
import { storeRoomAliasInCache } from '../../RoomAliasCache';
import ToastStore from "../../stores/ToastStore";
import * as StorageManager from "../../utils/StorageManager";
import { UseCase } from "../../settings/enums/UseCase";
import type LoggedInViewType from "./LoggedInView";
import LoggedInView from './LoggedInView';
import { Action } from "../../dispatcher/actions";
@ -129,6 +130,7 @@ import { SnakedObject } from "../../utils/SnakedObject";
import { leaveRoomBehaviour } from "../../utils/leave-behaviour";
import VideoChannelStore from "../../stores/VideoChannelStore";
import { IRoomStateEventsActionPayload } from "../../actions/MatrixActionCreators";
import { UseCaseSelection } from '../views/elements/UseCaseSelection';
// legacy export
export { default as Views } from "../../Views";
@ -755,7 +757,8 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
this.state.view !== Views.LOGIN &&
this.state.view !== Views.REGISTER &&
this.state.view !== Views.COMPLETE_SECURITY &&
this.state.view !== Views.E2E_SETUP
this.state.view !== Views.E2E_SETUP &&
this.state.view !== Views.USE_CASE_SELECTION
) {
this.onLoggedIn();
}
@ -1206,6 +1209,40 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
private async onLoggedIn() {
ThemeController.isLogin = false;
this.themeWatcher.recheck();
StorageManager.tryPersistStorage();
if (
MatrixClientPeg.currentUserIsJustRegistered() &&
SettingsStore.getValue("FTUE.useCaseSelection") === null
) {
this.setStateForNewView({ view: Views.USE_CASE_SELECTION });
// Listen to changes in settings and hide the use case screen if appropriate - this is necessary because
// account settings can still be changing at this point in app init (due to the initial sync being cached,
// then subsequent syncs being received from the server)
//
// This seems unlikely for something that should happen directly after registration, but if a user does
// their initial login on another device/browser than they registered on, we want to avoid asking this
// question twice
//
// initPosthogAnalyticsToast pioneered this technique, we’re just reusing it here.
SettingsStore.watchSetting("FTUE.useCaseSelection", null,
(originalSettingName, changedInRoomId, atLevel, newValueAtLevel, newValue) => {
if (newValue !== null && this.state.view === Views.USE_CASE_SELECTION) {
this.onShowPostLoginScreen();
}
});
} else {
return this.onShowPostLoginScreen();
}
}
private async onShowPostLoginScreen(useCase?: UseCase) {
if (useCase) {
PosthogAnalytics.instance.setProperty("ftueUseCaseSelection", useCase);
SettingsStore.setValue("FTUE.useCaseSelection", null, SettingLevel.ACCOUNT, useCase);
}
this.setStateForNewView({ view: Views.LOGGED_IN });
// If a specific screen is set to be shown after login, show that above
// all else, as it probably means the user clicked on something already.
@ -1243,8 +1280,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
this.showScreenAfterLogin();
}
StorageManager.tryPersistStorage();
// Will be moved to a pre-login flow as well
if (PosthogAnalytics.instance.isEnabled() && SettingsStore.isLevelSupported(SettingLevel.ACCOUNT)) {
this.initPosthogAnalyticsToast();
}
@ -2005,6 +2041,10 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
fragmentAfterLogin={fragmentAfterLogin}
/>
);
} else if (this.state.view === Views.USE_CASE_SELECTION) {
view = (
<UseCaseSelection onFinished={useCase => this.onShowPostLoginScreen(useCase)} />
);
} else {
logger.error(`Unknown view ${this.state.view}`);
}

27
src/components/structures/SplashPage.tsx Normal file
View file

@ -0,0 +1,27 @@
/*
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, { DetailedHTMLProps, HTMLAttributes, ReactNode } from "react";
interface Props extends DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement> {
className?: string;
children?: ReactNode;
}
export default function SplashPage({ children, className, ...other }: Props) {
const classes = classNames(className, "mx_SplashPage");
return <main {...other} className={classes}>
{ children }
</main>;
}

86
src/components/views/elements/UseCaseSelection.tsx Normal file
View file

@ -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>
);
}

59
src/components/views/elements/UseCaseSelectionButton.tsx Normal file
View file

@ -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>
);
}