491f0cd08a
* Copyright headers 1 * Licence headers 2 * Copyright Headers 3 * Copyright Headers 4 * Copyright Headers 5 * Copyright Headers 6 * Copyright headers 7 * Add copyright headers for html and config file * Replace license files and update package.json * Update with CLA * lint
80 lines
3.1 KiB
TypeScript
80 lines
3.1 KiB
TypeScript
/*
|
|
Copyright 2024 New Vector Ltd.
|
|
Copyright 2022 The Matrix.org Foundation C.I.C.
|
|
|
|
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
|
|
Please see LICENSE files in the repository root for full details.
|
|
*/
|
|
|
|
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): void => {
|
|
PosthogTrackers.trackInteraction("WebUserOnboardingHeaderSendDm", ev);
|
|
defaultDispatcher.dispatch({ action: "view_create_chat" });
|
|
};
|
|
|
|
interface Props {
|
|
useCase: UseCase | null;
|
|
}
|
|
|
|
export function UserOnboardingHeader({ useCase }: Props): JSX.Element {
|
|
let title: string;
|
|
let description = _t("onboarding|free_e2ee_messaging_unlimited_voip", {
|
|
brand: SdkConfig.get("brand"),
|
|
});
|
|
let image: string;
|
|
let actionLabel: string;
|
|
|
|
switch (useCase) {
|
|
case UseCase.PersonalMessaging:
|
|
title = _t("onboarding|personal_messaging_title");
|
|
image = require("../../../../res/img/user-onboarding/PersonalMessaging.png");
|
|
actionLabel = _t("onboarding|personal_messaging_action");
|
|
break;
|
|
case UseCase.WorkMessaging:
|
|
title = _t("onboarding|work_messaging_title");
|
|
description = _t("onboarding|free_e2ee_messaging_unlimited_voip", {
|
|
brand: SdkConfig.get("brand"),
|
|
});
|
|
image = require("../../../../res/img/user-onboarding/WorkMessaging.png");
|
|
actionLabel = _t("onboarding|work_messaging_action");
|
|
break;
|
|
case UseCase.CommunityMessaging:
|
|
title = _t("onboarding|community_messaging_title");
|
|
description = _t("onboarding|community_messaging_description");
|
|
image = require("../../../../res/img/user-onboarding/CommunityMessaging.png");
|
|
actionLabel = _t("onboarding|community_messaging_action");
|
|
break;
|
|
default:
|
|
title = _t("onboarding|welcome_to_brand", {
|
|
brand: SdkConfig.get("brand"),
|
|
});
|
|
image = require("../../../../res/img/user-onboarding/PersonalMessaging.png");
|
|
actionLabel = _t("onboarding|personal_messaging_action");
|
|
break;
|
|
}
|
|
|
|
return (
|
|
<div className="mx_UserOnboardingHeader">
|
|
<div className="mx_UserOnboardingHeader_content">
|
|
<Heading size="1">
|
|
{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>
|
|
);
|
|
}
|