diff --git a/res/css/_components.pcss b/res/css/_components.pcss index 6903f473e13..3525aa2ba0f 100644 --- a/res/css/_components.pcss +++ b/res/css/_components.pcss @@ -324,6 +324,10 @@ @import "./views/toasts/_IncomingCallToast.pcss"; @import "./views/toasts/_NonUrgentEchoFailureToast.pcss"; @import "./views/typography/_Heading.pcss"; +@import "./views/user-onboarding/_UserOnboardingHeader.pcss"; +@import "./views/user-onboarding/_UserOnboardingList.pcss"; +@import "./views/user-onboarding/_UserOnboardingPage.pcss"; +@import "./views/user-onboarding/_UserOnboardingTask.pcss"; @import "./views/verification/_VerificationShowSas.pcss"; @import "./views/voip/CallView/_CallViewButtons.pcss"; @import "./views/voip/_CallPreview.pcss"; diff --git a/res/css/_spacing.pcss b/res/css/_spacing.pcss index 4022cb1f47b..a0cb4bd4825 100644 --- a/res/css/_spacing.pcss +++ b/res/css/_spacing.pcss @@ -25,3 +25,5 @@ $spacing-24: 24px; $spacing-28: 28px; $spacing-32: 32px; $spacing-40: 40px; +$spacing-48: 48px; +$spacing-64: 64px; diff --git a/res/css/views/user-onboarding/_UserOnboardingHeader.pcss b/res/css/views/user-onboarding/_UserOnboardingHeader.pcss new file mode 100644 index 00000000000..05579af4fa6 --- /dev/null +++ b/res/css/views/user-onboarding/_UserOnboardingHeader.pcss @@ -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. +*/ + +.mx_UserOnboardingHeader { + display: flex; + flex-direction: row; + padding: $spacing-32; + border-radius: 16px; + background: $system; + gap: $spacing-64; + + @media (max-width: 1280px) { + margin: $spacing-32; + } + + .mx_UserOnboardingHeader_content { + display: flex; + flex-direction: column; + flex-basis: 50%; + flex-shrink: 1; + flex-grow: 1; + min-width: 0; + gap: $spacing-24; + margin-right: auto; + + .mx_AccessibleButton { + margin-top: auto; + align-self: flex-start; + padding: $spacing-12 $spacing-24; + } + } + + .mx_UserOnboardingHeader_image { + flex-basis: 30%; + flex-shrink: 1; + flex-grow: 1; + align-self: center; + height: calc(100% + $spacing-64 + $spacing-64); + aspect-ratio: 4 / 3; + object-fit: contain; + min-width: 0; + min-height: 0; + margin-top: -$spacing-64; + margin-bottom: -$spacing-64; + } +} diff --git a/res/css/views/user-onboarding/_UserOnboardingList.pcss b/res/css/views/user-onboarding/_UserOnboardingList.pcss new file mode 100644 index 00000000000..80e04dbe00f --- /dev/null +++ b/res/css/views/user-onboarding/_UserOnboardingList.pcss @@ -0,0 +1,100 @@ +/* +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. +*/ + +.mx_UserOnboardingList { + display: flex; + flex-direction: column; + + .mx_UserOnboardingList_header { + display: flex; + flex-direction: row; + gap: 12px; + align-items: center; + + animation-duration: 300ms; + animation-timing-function: cubic-bezier(0, 0, 0.58, 1); + animation-name: mx_UserOnboardingList_slideIn; + animation-fill-mode: backwards; + will-change: opacity; + animation-delay: 800ms; + + .mx_UserOnboardingList_hint { + color: $secondary-content; + } + } + + .mx_UserOnboardingList_progress { + display: flex; + flex-direction: column; + + animation-duration: 300ms; + animation-timing-function: cubic-bezier(0, 0, 0.58, 1); + animation-name: mx_UserOnboardingList_slideIn; + animation-fill-mode: backwards; + will-change: opacity; + animation-delay: 1500ms; + + .mx_ProgressBar { + width: auto; + margin-top: $spacing-16; + height: 16px; + + @mixin ProgressBarBorderRadius 16px; + } + + .mx_UserOnboardingFeedback { + margin-top: $spacing-16; + } + } + + .mx_UserOnboardingList_list { + display: grid; + grid-template-columns: max-content 1fr max-content; + + appearance: none; + list-style: none; + margin: $spacing-32 0 0; + padding: 0; + + grid-gap: $spacing-24; + + animation-duration: 300ms; + animation-timing-function: cubic-bezier(0, 0, 0.58, 1); + animation-name: mx_UserOnboardingList_slideIn; + animation-fill-mode: backwards; + will-change: opacity; + animation-delay: 2200ms; + } +} + +.mx_UserOnboardingList_slideIn { + animation-duration: 300ms; + animation-timing-function: cubic-bezier(0, 0, 0.58, 1); + animation-name: mx_UserOnboardingList_slideIn; + animation-fill-mode: backwards; + will-change: opacity; +} + +@keyframes mx_UserOnboardingList_slideIn { + 0% { + transform: translate(0, 8px); + opacity: 0; + } + 100% { + transform: translate(0, 0); + opacity: 1; + } +} diff --git a/res/css/views/user-onboarding/_UserOnboardingPage.pcss b/res/css/views/user-onboarding/_UserOnboardingPage.pcss new file mode 100644 index 00000000000..dfa55e5d26c --- /dev/null +++ b/res/css/views/user-onboarding/_UserOnboardingPage.pcss @@ -0,0 +1,34 @@ +/* +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. +*/ + +.mx_UserOnboardingPage { + width: 100%; + height: 100%; + + align-self: stretch; + margin-bottom: auto; + + display: flex; + flex-direction: column; + box-sizing: border-box; + + gap: $spacing-64; + padding: $spacing-64 100px; + + @media (max-width: 1280px) { + padding: $spacing-48 $spacing-32; + } +} diff --git a/res/css/views/user-onboarding/_UserOnboardingTask.pcss b/res/css/views/user-onboarding/_UserOnboardingTask.pcss new file mode 100644 index 00000000000..477656672d9 --- /dev/null +++ b/res/css/views/user-onboarding/_UserOnboardingTask.pcss @@ -0,0 +1,106 @@ +/* +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. +*/ + +.mx_UserOnboardingTask { + display: contents; + + .mx_UserOnboardingTask_number { + grid-column: 1; + color: $secondary-content; + width: 32px; + height: 32px; + text-align: center; + border: 2px solid $quinary-content; + border-radius: 32px; + line-height: 32px; + align-self: center; + position: relative; + } + + .mx_UserOnboardingTask_content { + grid-column: 2; + display: flex; + flex-direction: column; + flex-grow: 1; + flex-shrink: 1; + + transition: all 500ms; + + .mx_UserOnboardingTask_description { + font-size: $font-12px; + } + } + + .mx_UserOnboardingTask_action.mx_AccessibleButton { + grid-column: 3; + min-width: 180px; + } + + &.mx_UserOnboardingTask_completed { + .mx_UserOnboardingTask_number { + &::before { + content: ""; + position: absolute; + inset: -2px; + background: $accent; + border-radius: 32px; + + animation-duration: 300ms; + animation-fill-mode: both; + animation-name: mx_UserOnboardingTask_spring; + will-change: opacity, transform; + } + + &::after { + background-color: $background; + content: ""; + mask-repeat: no-repeat; + mask-position: center; + mask-size: contain; + width: 16px; + height: 16px; + position: absolute; + left: calc(50% - 8px); + top: calc(50% - 8px); + mask-image: url("$(res)/img/element-icons/check-white.svg"); + + animation-duration: 300ms; + animation-fill-mode: both; + animation-name: mx_UserOnboardingTask_spring; + will-change: opacity, transform; + } + } + + .mx_UserOnboardingTask_content { + opacity: 0.6; + } + } +} + +@keyframes mx_UserOnboardingTask_spring { + 0% { + opacity: 0; + transform: scale(0.6); + } + 50% { + opacity: 1; + transform: scale(1.2); + } + 100% { + opacity: 1; + transform: scale(1); + } +} diff --git a/res/img/user-onboarding/CommunityMessaging.png b/res/img/user-onboarding/CommunityMessaging.png new file mode 100644 index 00000000000..2620c84b526 Binary files /dev/null and b/res/img/user-onboarding/CommunityMessaging.png differ diff --git a/res/img/user-onboarding/PersonalMessaging.png b/res/img/user-onboarding/PersonalMessaging.png new file mode 100644 index 00000000000..8dce18ad909 Binary files /dev/null and b/res/img/user-onboarding/PersonalMessaging.png differ diff --git a/res/img/user-onboarding/WorkMessaging.png b/res/img/user-onboarding/WorkMessaging.png new file mode 100644 index 00000000000..17455a780c1 Binary files /dev/null and b/res/img/user-onboarding/WorkMessaging.png differ diff --git a/src/MatrixClientPeg.ts b/src/MatrixClientPeg.ts index e8296afc521..8881e7ef49d 100644 --- a/src/MatrixClientPeg.ts +++ b/src/MatrixClientPeg.ts @@ -98,6 +98,12 @@ export interface IMatrixClientPeg { */ userRegisteredWithinLastHours(hours: number): boolean; + /** + * If the current user has been registered by this device then this + * returns a boolean of whether it was after a given timestamp. + */ + userRegisteredAfter(date: Date): boolean; + /** * Replace this MatrixClientPeg's client with a client instance that has * homeserver / identity server URLs and active credentials @@ -168,6 +174,15 @@ class MatrixClientPegClass implements IMatrixClientPeg { } } + public userRegisteredAfter(timestamp: Date): boolean { + try { + const registrationTime = parseInt(window.localStorage.getItem("mx_registration_time"), 10); + return timestamp.getTime() <= registrationTime; + } catch (e) { + return false; + } + } + public replaceUsingCreds(creds: IMatrixClientCreds): void { this.currentClientCreds = creds; this.createClient(creds); diff --git a/src/components/structures/LoggedInView.tsx b/src/components/structures/LoggedInView.tsx index 87869b65511..d7f437b437d 100644 --- a/src/components/structures/LoggedInView.tsx +++ b/src/components/structures/LoggedInView.tsx @@ -34,7 +34,6 @@ import { SettingLevel } from "../../settings/SettingLevel"; import ResizeHandle from '../views/elements/ResizeHandle'; import { CollapseDistributor, Resizer } from '../../resizer'; import MatrixClientContext from "../../contexts/MatrixClientContext"; -import HomePage from "./HomePage"; import ResizeNotifier from "../../utils/ResizeNotifier"; import PlatformPeg from "../../PlatformPeg"; import { DefaultTagID } from "../../stores/room-list/models"; @@ -71,6 +70,7 @@ import { SwitchSpacePayload } from "../../dispatcher/payloads/SwitchSpacePayload import LegacyGroupView from "./LegacyGroupView"; import { IConfigOptions } from "../../IConfigOptions"; import LeftPanelLiveShareWarning from '../views/beacon/LeftPanelLiveShareWarning'; +import { UserOnboardingPage } from '../views/user-onboarding/UserOnboardingPage'; // We need to fetch each pinned message individually (if we don't already have it) // so each pinned message may trigger a request. Limit the number per room for sanity. @@ -635,7 +635,7 @@ class LoggedInView extends React.Component { break; case PageTypes.HomePage: - pageElement = ; + pageElement = ; break; case PageTypes.UserView: diff --git a/src/components/structures/UserView.tsx b/src/components/structures/UserView.tsx index 7754336b2bd..fb7c12bedd0 100644 --- a/src/components/structures/UserView.tsx +++ b/src/components/structures/UserView.tsx @@ -22,13 +22,13 @@ import { RoomMember } from "matrix-js-sdk/src/models/room-member"; import { MatrixClientPeg } from "../../MatrixClientPeg"; import Modal from '../../Modal'; import { _t } from '../../languageHandler'; -import HomePage from "./HomePage"; import ErrorDialog from "../views/dialogs/ErrorDialog"; import MainSplit from "./MainSplit"; import RightPanel from "./RightPanel"; import Spinner from "../views/elements/Spinner"; import ResizeNotifier from "../../utils/ResizeNotifier"; import { RightPanelPhases } from "../../stores/right-panel/RightPanelStorePhases"; +import { UserOnboardingPage } from "../views/user-onboarding/UserOnboardingPage"; interface IProps { userId?: string; @@ -92,7 +92,7 @@ export default class UserView extends React.Component { resizeNotifier={this.props.resizeNotifier} />; return ( - + ); } else { return (
); diff --git a/src/components/views/user-onboarding/UserOnboardingHeader.tsx b/src/components/views/user-onboarding/UserOnboardingHeader.tsx new file mode 100644 index 00000000000..0bbbb8f653b --- /dev/null +++ b/src/components/views/user-onboarding/UserOnboardingHeader.tsx @@ -0,0 +1,83 @@ +/* +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 { UseCase } from "../../../settings/enums/UseCase"; +import AccessibleButton, { ButtonEvent } from "../../views/elements/AccessibleButton"; +import Heading from "../../views/typography/Heading"; + +const onClickSendDm = (ev: ButtonEvent) => { + PosthogTrackers.trackInteraction("WebHomeCreateChatButton", ev); + defaultDispatcher.dispatch({ action: 'view_create_chat' }); +}; + +interface Props { + useCase: UseCase; +} + +export function UserOnboardingHeader({ useCase }: Props) { + let title: string; + let description: string; + let image; + + 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, " + + "Element is a great way to stay in touch."); + image = require("../../../../res/img/user-onboarding/PersonalMessaging.png"); + 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," + + " Element is a great way to stay in touch."); + image = require("../../../../res/img/user-onboarding/WorkMessaging.png"); + 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"); + break; + default: + title = _t("Welcome to Element."); + description = _t("With free end-to-end encrypted messaging, and unlimited voice and video calls," + + " Element is a great way to stay in touch."); + image = require("../../../../res/img/user-onboarding/PersonalMessaging.png"); + break; + } + + return ( +
+
+ + { title } + +

+ { description } +

+ + { _t("Start your first chat") } + +
+ +
+ ); +} diff --git a/src/components/views/user-onboarding/UserOnboardingList.tsx b/src/components/views/user-onboarding/UserOnboardingList.tsx new file mode 100644 index 00000000000..d89e14c82f0 --- /dev/null +++ b/src/components/views/user-onboarding/UserOnboardingList.tsx @@ -0,0 +1,60 @@ +/* +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 { useMemo } from "react"; +import * as React from "react"; + +import { useUserOnboardingTasks, UserOnboardingTask as Task } from "../../../hooks/useUserOnboardingTasks"; +import { _t } from "../../../languageHandler"; +import ProgressBar from "../../views/elements/ProgressBar"; +import Heading from "../../views/typography/Heading"; +import { UserOnboardingTask } from "./UserOnboardingTask"; + +export function UserOnboardingList() { + const [completedTasks, waitingTasks] = useUserOnboardingTasks(); + + 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 ( +
+
+ + { waiting > 0 ? _t("Only %(count)s steps to go", { + count: waiting, + }) : _t("You did it!") } + +
+ { _t("Complete these to get the most out of Element") } +
+
+
+ +
+
    + { tasks.map(([task, completed], index) => ( + + )) } +
+
+ ); +} diff --git a/src/components/views/user-onboarding/UserOnboardingPage.tsx b/src/components/views/user-onboarding/UserOnboardingPage.tsx new file mode 100644 index 00000000000..283959775f5 --- /dev/null +++ b/src/components/views/user-onboarding/UserOnboardingPage.tsx @@ -0,0 +1,56 @@ +/* +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 * as React from "react"; + +import { useSettingValue } from "../../../hooks/useSettings"; +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; +} + +// 2022-07-01 00:00 UTC +const USER_ONBOARDING_CUTOFF_DATE = new Date(1_656_633_600); + +export function UserOnboardingPage({ justRegistered = false }: Props) { + const config = SdkConfig.get(); + const pageUrl = getHomePageUrl(config); + + const useCase = useSettingValue("FTUE.useCaseSelection") as UseCase | null; + + // Only show new onboarding list to users who registered after a given date or have chosen a use case + if (useCase === null || !MatrixClientPeg.userRegisteredAfter(USER_ONBOARDING_CUTOFF_DATE)) { + return ; + } + + if (pageUrl) { + return ; + } + + return + + + ; +} diff --git a/src/components/views/user-onboarding/UserOnboardingTask.tsx b/src/components/views/user-onboarding/UserOnboardingTask.tsx new file mode 100644 index 00000000000..3303f92cc8b --- /dev/null +++ b/src/components/views/user-onboarding/UserOnboardingTask.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 * 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; + index: number; +} + +export function UserOnboardingTask({ task, completed = false, index }: Props) { + return ( +
  • +
    + { index } +
    +
    + + { task.title } + +
    + { task.description } +
    +
    + { task.action && (!task.action.hideOnComplete || !completed) && ( + + { task.action.label } + + ) } +
    • + ); +} diff --git a/src/hooks/useUserOnboardingContext.ts b/src/hooks/useUserOnboardingContext.ts new file mode 100644 index 00000000000..8b1d6bcfb4f --- /dev/null +++ b/src/hooks/useUserOnboardingContext.ts @@ -0,0 +1,62 @@ +/* +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 { useCallback, useEffect, useState } from "react"; +import { ClientEvent, IMyDevice, Room } from "matrix-js-sdk/src/matrix"; + +import { MatrixClientPeg } from "../MatrixClientPeg"; +import DMRoomMap from "../utils/DMRoomMap"; +import { useEventEmitter } from "./useEventEmitter"; + +export interface UserOnboardingContext { + avatar: string | null; + myDevice: string; + devices: IMyDevice[]; + dmRooms: {[userId: string]: Room}; +} + +export function useUserOnboardingContext(): UserOnboardingContext | null { + const [context, setContext] = useState(null); + + const cli = MatrixClientPeg.get(); + const handler = useCallback(async () => { + const profile = await cli.getProfileInfo(cli.getUserId()); + + const myDevice = cli.getDeviceId(); + const devices = await cli.getDevices(); + + const dmRooms = DMRoomMap.shared().getUniqueRoomsWithIndividuals() ?? {}; + setContext({ + avatar: profile?.avatar_url ?? null, + myDevice, + devices: devices.devices, + dmRooms: dmRooms, + }); + }, [cli]); + + useEventEmitter(cli, ClientEvent.AccountData, handler); + useEffect(() => { + const handle = setInterval(handler, 2000); + handler(); + return () => { + if (handle) { + clearInterval(handle); + } + }; + }, [handler]); + + return context; +} diff --git a/src/hooks/useUserOnboardingTasks.ts b/src/hooks/useUserOnboardingTasks.ts new file mode 100644 index 00000000000..6ead62cc358 --- /dev/null +++ b/src/hooks/useUserOnboardingTasks.ts @@ -0,0 +1,139 @@ +/* +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 { useMemo } from "react"; + +import SpotlightDialog, { Filter } from "../components/views/dialogs/spotlight/SpotlightDialog"; +import { UserTab } from "../components/views/dialogs/UserTab"; +import { ButtonEvent } from "../components/views/elements/AccessibleButton"; +import { Action } from "../dispatcher/actions"; +import defaultDispatcher from "../dispatcher/dispatcher"; +import { _t } from "../languageHandler"; +import Modal from "../Modal"; +import { Notifier } from "../Notifier"; +import { UseCase } from "../settings/enums/UseCase"; +import { useSettingValue } from "./useSettings"; +import { UserOnboardingContext, useUserOnboardingContext } from "./useUserOnboardingContext"; + +export interface UserOnboardingTask { + title: string; + description: string; + relevant?: UseCase[]; + action?: { + label: string; + onClick?: (ev?: ButtonEvent) => void; + href?: string; + hideOnComplete?: boolean; + }; +} + +interface InternalUserOnboardingTask extends UserOnboardingTask { + completed: (ctx: UserOnboardingContext) => boolean; +} + +const hasOpenDMs = (ctx: UserOnboardingContext) => Boolean(Object.entries(ctx.dmRooms).length); + +const onClickFindPeople = (ev: ButtonEvent) => { + Modal.createDialog( + SpotlightDialog, + { initialFilter: Filter.People }, + "mx_SpotlightDialog_wrapper", + false, + true, + ); +}; + +const tasks: InternalUserOnboardingTask[] = [ + { + title: _t("Create account"), + description: _t("You made it!"), + completed: () => true, + }, + { + title: _t("Find and invite your friends"), + description: _t("It’s what you’re here for, so lets get to it"), + completed: hasOpenDMs, + relevant: [UseCase.PersonalMessaging, UseCase.Skip], + action: { + label: _t("Find friends"), + onClick: onClickFindPeople, + }, + }, + { + title: _t("Find and invite your co-workers"), + description: _t("Get stuff done by finding your teammates"), + completed: hasOpenDMs, + relevant: [UseCase.WorkMessaging], + action: { + label: _t("Find people"), + onClick: onClickFindPeople, + }, + }, + { + title: _t("Find and invite your community members"), + description: _t("Get stuff done by finding your teammates"), + completed: hasOpenDMs, + relevant: [UseCase.CommunityMessaging], + action: { + label: _t("Find people"), + onClick: onClickFindPeople, + }, + }, + { + title: _t("Download Element"), + description: _t("Don’t miss a thing by taking Element with you"), + completed: (ctx: UserOnboardingContext) => { + return Boolean(ctx.devices.filter(it => it.device_id !== ctx.myDevice).length); + }, + action: { + label: _t("Download apps"), + href: "https://element.io/get-started#download", + }, + }, + { + title: _t("Set up your profile"), + description: _t("Make sure people know it’s really you"), + completed: (info: UserOnboardingContext) => Boolean(info.avatar), + action: { + label: _t("Your profile"), + onClick: () => defaultDispatcher.dispatch({ + action: Action.ViewUserSettings, + initialTabId: UserTab.General, + }), + }, + }, + { + title: _t("Turn on notifications"), + description: _t("Don’t miss a reply or important message"), + completed: () => Notifier.isPossible(), + action: { + label: _t("Enable notifications"), + onClick: () => Notifier.setEnabled(true), + hideOnComplete: true, + }, + }, +]; + +export function useUserOnboardingTasks(): [UserOnboardingTask[], UserOnboardingTask[]] { + const useCase = useSettingValue("FTUE.useCaseSelection") ?? UseCase.Skip; + const relevantTasks = useMemo( + () => tasks.filter(it => !it.relevant || it.relevant.includes(useCase)), + [useCase], + ); + const onboardingInfo = useUserOnboardingContext(); + const completedTasks = relevantTasks.filter(it => onboardingInfo && it.completed(onboardingInfo)); + return [completedTasks, relevantTasks.filter(it => !completedTasks.includes(it))]; +} diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index 4070b8ffe19..ee9d55e8c13 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -993,6 +993,24 @@ "When rooms are upgraded": "When rooms are upgraded", "My Ban List": "My Ban List", "This is your list of users/servers you have blocked - don't leave the room!": "This is your list of users/servers you have blocked - don't leave the room!", + "Create account": "Create account", + "You made it!": "You made it!", + "Find and invite your friends": "Find and invite your friends", + "It’s what you’re here for, so lets get to it": "It’s what you’re here for, so lets get to it", + "Find friends": "Find friends", + "Find and invite your co-workers": "Find and invite your co-workers", + "Get stuff done by finding your teammates": "Get stuff done by finding your teammates", + "Find people": "Find people", + "Find and invite your community members": "Find and invite your community members", + "Download Element": "Download Element", + "Don’t miss a thing by taking Element with you": "Don’t miss a thing by taking Element with you", + "Download apps": "Download apps", + "Set up your profile": "Set up your profile", + "Make sure people know it’s really you": "Make sure people know it’s really you", + "Your profile": "Your profile", + "Turn on notifications": "Turn on notifications", + "Don’t miss a reply or important message": "Don’t miss a reply or important message", + "Enable notifications": "Enable notifications", "Sends the given message with confetti": "Sends the given message with confetti", "sends confetti": "sends confetti", "Sends the given message with fireworks": "Sends the given message with fireworks", @@ -1129,6 +1147,16 @@ "Anchor": "Anchor", "Headphones": "Headphones", "Folder": "Folder", + "Secure messaging for friends and family.": "Secure messaging for friends and family.", + "With free end-to-end encrypted messaging, and unlimited voice and video calls, Element is a great way to stay in touch.": "With free end-to-end encrypted messaging, and unlimited voice and video calls, Element is a great way to stay in touch.", + "Secure messaging for work.": "Secure messaging for work.", + "Community ownership.": "Community ownership.", + "Keep ownership and control of community discussion.\nScale to support millions, with powerful moderation and interoperability.": "Keep ownership and control of community discussion.\nScale to support millions, with powerful moderation and interoperability.", + "Welcome to Element.": "Welcome to Element.", + "Start your first chat": "Start your first chat", + "Only %(count)s steps to go|other": "Only %(count)s steps to go", + "You did it!": "You did it!", + "Complete these to get the most out of Element": "Complete these to get the most out of Element", "Your server isn't responding to some requests.": "Your server isn't responding to some requests.", "Decline (%(counter)s)": "Decline (%(counter)s)", "Accept to continue:": "Accept to continue:", @@ -3252,7 +3280,6 @@ "Continue with previous account": "Continue with previous account", "Log in to your new account.": "Log in to your new account.", "Registration Successful": "Registration Successful", - "Create account": "Create account", "Host account on": "Host account on", "Decide where your account is hosted": "Decide where your account is hosted", "It looks like you don't have a Security Key or any other devices you can verify against. This device will not be able to access old encrypted messages. In order to verify your identity on this device, you'll need to reset your verification keys.": "It looks like you don't have a Security Key or any other devices you can verify against. This device will not be able to access old encrypted messages. In order to verify your identity on this device, you'll need to reset your verification keys.",