2023-05-05 11:44:35 +02:00
|
|
|
/*
|
2024-09-06 10:22:13 +02:00
|
|
|
Copyright 2022-2024 New Vector Ltd.
|
2023-05-05 11:44:35 +02:00
|
|
|
|
2024-09-06 10:22:13 +02:00
|
|
|
SPDX-License-Identifier: AGPL-3.0-only
|
|
|
|
|
Please see LICENSE in the repository root for full details.
|
2023-05-05 11:44:35 +02:00
|
|
|
*/
|
|
|
|
|
|
2023-09-22 18:05:13 -04:00
|
|
|
import { FC, useCallback } from "react";
|
2023-05-05 11:44:35 +02:00
|
|
|
import { randomString } from "matrix-js-sdk/src/randomstring";
|
|
|
|
|
import { useTranslation } from "react-i18next";
|
2024-08-28 08:44:39 -04:00
|
|
|
import { Button } from "@vector-im/compound-web";
|
2024-09-10 09:49:35 +02:00
|
|
|
import { logger } from "matrix-js-sdk/src/logger";
|
2023-05-05 11:44:35 +02:00
|
|
|
|
|
|
|
|
import { FieldRow, InputField, ErrorMessage } from "../input/Input";
|
|
|
|
|
import { useSubmitRageshake, useRageshakeRequest } from "./submit-rageshake";
|
|
|
|
|
import { Body } from "../typography/Typography";
|
2023-06-07 16:22:44 +02:00
|
|
|
import feedbackStyles from "../input/FeedbackInput.module.css";
|
2023-05-05 11:44:35 +02:00
|
|
|
|
|
|
|
|
interface Props {
|
|
|
|
|
roomId?: string;
|
|
|
|
|
}
|
|
|
|
|
|
2023-09-22 18:05:13 -04:00
|
|
|
export const FeedbackSettingsTab: FC<Props> = ({ roomId }) => {
|
2023-05-05 11:44:35 +02:00
|
|
|
const { t } = useTranslation();
|
2023-05-05 19:36:23 +02:00
|
|
|
const { submitRageshake, sending, sent, error } = useSubmitRageshake();
|
2023-05-05 11:44:35 +02:00
|
|
|
const sendRageshakeRequest = useRageshakeRequest();
|
|
|
|
|
|
|
|
|
|
const onSubmitFeedback = useCallback(
|
2023-06-30 16:43:28 +01:00
|
|
|
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
|
|
|
// @ts-ignore
|
2023-05-05 11:44:35 +02:00
|
|
|
(e) => {
|
|
|
|
|
e.preventDefault();
|
|
|
|
|
const data = new FormData(e.target);
|
|
|
|
|
const descriptionData = data.get("description");
|
|
|
|
|
const description =
|
|
|
|
|
typeof descriptionData === "string" ? descriptionData : "";
|
|
|
|
|
const sendLogs = Boolean(data.get("sendLogs"));
|
|
|
|
|
const rageshakeRequestId = randomString(16);
|
|
|
|
|
|
|
|
|
|
submitRageshake({
|
|
|
|
|
description,
|
|
|
|
|
sendLogs,
|
|
|
|
|
rageshakeRequestId,
|
|
|
|
|
roomId,
|
2024-09-10 09:49:35 +02:00
|
|
|
}).catch((e) => {
|
|
|
|
|
logger.error("Failed to send feedback rageshake", e);
|
2023-05-05 11:44:35 +02:00
|
|
|
});
|
|
|
|
|
|
|
|
|
|
if (roomId && sendLogs) {
|
|
|
|
|
sendRageshakeRequest(roomId, rageshakeRequestId);
|
|
|
|
|
}
|
|
|
|
|
},
|
2023-10-11 10:42:04 -04:00
|
|
|
[submitRageshake, roomId, sendRageshakeRequest],
|
2023-05-05 11:44:35 +02:00
|
|
|
);
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<div>
|
2024-08-28 08:44:39 -04:00
|
|
|
<h4>{t("settings.feedback_tab_h4")}</h4>
|
2023-11-20 13:00:43 +00:00
|
|
|
<Body>{t("settings.feedback_tab_body")}</Body>
|
2023-05-05 11:44:35 +02:00
|
|
|
<form onSubmit={onSubmitFeedback}>
|
|
|
|
|
<FieldRow>
|
|
|
|
|
<InputField
|
2023-06-07 16:22:44 +02:00
|
|
|
className={feedbackStyles.feedback}
|
2023-05-05 11:44:35 +02:00
|
|
|
id="description"
|
|
|
|
|
name="description"
|
2023-11-20 13:00:43 +00:00
|
|
|
label={t("settings.feedback_tab_description_label")}
|
|
|
|
|
placeholder={t("settings.feedback_tab_description_label")}
|
2023-05-05 11:44:35 +02:00
|
|
|
type="textarea"
|
2023-05-05 19:36:23 +02:00
|
|
|
disabled={sending || sent}
|
2023-05-05 11:44:35 +02:00
|
|
|
/>
|
|
|
|
|
</FieldRow>
|
2024-09-11 14:53:50 +01:00
|
|
|
{!sent && (
|
2023-05-05 11:44:35 +02:00
|
|
|
<FieldRow>
|
2023-05-05 19:36:23 +02:00
|
|
|
<InputField
|
|
|
|
|
id="sendLogs"
|
|
|
|
|
name="sendLogs"
|
2023-11-20 13:00:43 +00:00
|
|
|
label={t("settings.feedback_tab_send_logs_label")}
|
2023-05-05 19:36:23 +02:00
|
|
|
type="checkbox"
|
|
|
|
|
defaultChecked
|
|
|
|
|
/>
|
|
|
|
|
<Button type="submit" disabled={sending}>
|
2023-11-30 17:31:12 +01:00
|
|
|
{sending ? t("submitting") : t("action.submit")}
|
2023-05-05 19:36:23 +02:00
|
|
|
</Button>
|
2023-05-05 11:44:35 +02:00
|
|
|
</FieldRow>
|
|
|
|
|
)}
|
2024-09-11 14:53:50 +01:00
|
|
|
<FieldRow>
|
|
|
|
|
{error && <ErrorMessage error={error} />}
|
|
|
|
|
{sent && <Body> {t("settings.feedback_tab_thank_you")}</Body>}
|
|
|
|
|
</FieldRow>
|
2023-05-05 11:44:35 +02:00
|
|
|
</form>
|
|
|
|
|
</div>
|
|
|
|
|
);
|
2023-09-22 18:05:13 -04:00
|
|
|
};
|
