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

162 lines
7.6 KiB
TypeScript
Raw Permalink 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.

This file contains Unicode characters that might be confused with other characters. 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 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';
import emailIntro from './email-intro';
import { reportIntro } from './report-intro';
import { downloadText } from '../../util';
import { getFakeClusterData } from './fake-clusters';
const SS_URL = 'http://65.108.60.135:3000';
export default function EmailContent({
answers,
visited_url,
clusters,
scrRequestPath,
downloadFiles,
user_role,
}: {
answers: ParsedAnswers;
visited_url: string;
clusters: Record<string, RequestCluster>;
scrRequestPath: string;
downloadFiles: Function;
user_role: string;
}) {
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();
const container = document.querySelector('.mail-container__content');
if (!container) return;
r.selectNode(container);
window.getSelection()?.addRange(r);
document.execCommand('copy');
window.getSelection()?.removeAllRanges();
setCopy(true);
}
const mode = answers.user_role === 'user' ? 'email' : 'report';
const email_tone = answers.email_type === 'polite_information' ? 'polite' : 'official';
return (
<Fragment>
<div className="generator-container">
<h1>Treść {mode === 'email' ? 'maila' : 'raportu'}</h1>
<div className="mail-container">
<div className="mail-container__header">
<div className="mail-container__header--control"></div>
</div>
<article className="mail-container__content">
{mode === 'email'
? emailIntro(email_tone, _, visited_url)
: reportIntro(visited_url)}
{problems.map((problem, index) => {
const Component = problem.getEmailContent.bind(problem);
return <Component mode={mode} tone={email_tone} key={index} />;
})}
{explainers.map((explainer) => explainer(answers.zaimek))}
<h2>Państwa rola jako współadministratora danych osobowych</h2>
{mode == 'email' ? (
<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, nawet
jeżeli nie Państwo bezpośrednimi autorami osadzonych na Państwa
stronie skryptów czy innych zasobów ujawniających dane użytkowników
Państwa strony podmiotom trzecim. 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) RODO
</p>
) : (
<p>
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>
, ponoszą Państwo współodpowiedzialność za skrypty i inne zasoby
ujawniajace dane osobowe na Państwa stronie, nawet jeżeli nie
Państwo ich bezpośrednimi autorami.
</p>
)}
</article>
</div>
<div
className={
scrRequestPath
? 'buttons-email-container'
: 'buttons-email-container buttons-email-container--single'
}
>
{scrRequestPath ? (
<button
className="sv_prev_btn"
onClick={() => downloadFiles(`${SS_URL}${scrRequestPath}`)}
>
Pobierz zrzuty ekranów
</button>
) : null}
<button
className={
scrRequestPath ? 'sv_next_btn' : 'sv_next_btn sv_next_btn--single'
}
onClick={() => copyTextToClipboard()}
>
{copied ? 'Skopiowano!' : 'Kopiuj treść'}
</button>
</div>
{copied && user_role === 'user' ? (
<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 className="diag-toolbox">
<a
href="#"
onClick={() =>
downloadText(
'diag.json',
JSON.stringify({
answers,
fake_clusters_data: getFakeClusterData(clusters),
visited_url,
})
)
}
>
Pobierz plik diagnostyczny
</a>
</div>
</div>
</Fragment>
);
}