rentgen/components/report-window/email-content.tsx

101 lines
4.9 KiB
TypeScript
Raw Normal View History

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';
2022-05-21 14:42:15 +02:00
import './email-content.scss';
import { Fragment, useState } from 'react';
declare var PLUGIN_NAME: string;
declare var PLUGIN_URL: string;
export default function EmailContent({
2022-04-24 22:11:33 +02:00
answers,
visited_url,
clusters,
}: {
2022-04-24 22:11:33 +02:00
answers: ParsedAnswers;
visited_url: string;
clusters: Record<string, RequestCluster>;
}) {
2022-04-24 22:11:33 +02:00
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);
}
2022-04-24 22:11:33 +02:00
return (
2022-05-22 16:49:24 +02:00
<Fragment>
2022-05-22 18:22:29 +02:00
<div className="generator-container">
<h1>Treść maila</h1>
<div className="mail-container">
<div className="mail-container__header">
<div className="mail-container__header--control"></div>
2022-05-22 16:49:24 +02:00
</div>
2022-05-22 18:22:29 +02:00
<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()}>
2022-07-03 19:35:36 +02:00
{copied ? 'Skopiowano!' : 'Kopiuj treść wiadomości'}
</button>
</div>
2022-07-03 19:35:36 +02:00
{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}
2022-05-22 16:49:24 +02:00
</div>
</Fragment>
2022-04-24 22:11:33 +02:00
);
}