rentgen/components/report-window/email-content.tsx
Arkadiusz Wieczorek 534f9f3db6 Add minor UI fixes
2022-07-03 19:35:36 +02:00

101 lines
4.9 KiB
TypeScript
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

import { RequestCluster } from '../../request-cluster';
import { getDate } from '../../util';
import deduceProblems from './deduce-problems';
import { Explainers } from './explainers';
import { ParsedAnswers } from './parse-answers';
import { v } from './verbs';
import './email-content.scss';
import { Fragment, useState } from 'react';
declare var PLUGIN_NAME: string;
declare var PLUGIN_URL: string;
export default function EmailContent({
answers,
visited_url,
clusters,
}: {
answers: ParsedAnswers;
visited_url: string;
clusters: Record<string, RequestCluster>;
}) {
const _ = (key: string) => v(key, answers.zaimek);
const problems = deduceProblems(answers, clusters);
const explainers = Array.from(
new Set(
problems
.map((problem) => problem.getNecessaryExplainers())
.reduce((a, b) => a.concat(b), [])
)
).map((explainer_key) => Explainers[explainer_key]);
const [copied, setCopy] = useState<boolean>(false);
function copyTextToClipboard() {
// Should be changed in the future to Clipboard API (https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/write#browser_compatibility)
let r = document.createRange();
r.selectNode(document.querySelector('.mail-container__content'));
window.getSelection().addRange(r);
document.execCommand('copy');
window.getSelection().removeAllRanges();
setCopy(true);
}
return (
<Fragment>
<div className="generator-container">
<h1>Treść maila</h1>
<div className="mail-container">
<div className="mail-container__header">
<div className="mail-container__header--control"></div>
</div>
<article className="mail-container__content">
<p>Dzień dobry,</p>
<p>
w dniu {getDate()} {_('odwiedziłem')} stronę {visited_url}. Po
podejrzeniu ruchu sieciowego generowanego przez stronę za pomocą
wtyczki <a href={PLUGIN_URL}>{PLUGIN_NAME}</a> w przeglądarce Firefox{' '}
{_('mam')} pytania dotyczące przetwarzania {_('moich')} danych
osobowych, na które nie {_('znalazłem')} odpowiedzi nigdzie na Państwa
stronie.
</p>
{problems.map((problem) => problem.getEmailContent())}
{explainers.map((explainer) => explainer(answers.zaimek))}
<h2>Państwa rola jako współadministratora danych osobowych</h2>
<p>
{_('Zwracam')} Państwa uwagę na fakt, że w myśl{' '}
<a href="https://curia.europa.eu/juris/document/document.jsf?text=&docid=216555&pageIndex=0&doclang=PL&mode=lst&dir=&occ=first&part=1&cid=1254905">
treści wyroku TSUE w sprawie C-40/17
</a>{' '}
poprzez wysyłanie moich danych w wyżej opisanym zakresie stają się
Państwo współadministratorem moich danych osobowych, dlatego ciąży na
Państwu obowiązek odpowiedzi na moje pytania na mocy Art. 12 i 13
Rozporządzenia 2016/679 Parlamentu Europejskiego i Rady (UE) z dnia 27
kwietnia 2016 r. w sprawie ochrony osób fizycznych w związku z
przetwarzaniem danych osobowych i w sprawie swobodnego przepływu takich
danych oraz uchylenia dyrektywy 95/46/WE (ogólne rozporządzenie o
ochronie danych, dalej: RODO).
</p>
</article>
</div>
<div className="buttons-container">
<button className="sv_next_btn" onClick={() => copyTextToClipboard()}>
{copied ? 'Skopiowano!' : 'Kopiuj treść wiadomości'}
</button>
</div>
{copied ? (
<section className="greeting-text">
<strong>Przed Tobą ostatni krok! 😊</strong>
<p>
<a href="mailto:?subject=Zapytanie o przetwarzanie moich danych osobowych przez Państwa stronę">
Przejdź do swojego klienta pocztowego
</a>
, załącz zrzuty ekranów, wklej treść wiadomości i wyślij do
administratorów witryny {visited_url.split('/').slice(0, 3).join('/')}.
</p>
</section>
) : null}
</div>
</Fragment>
);
}