rentgen/report-window/email-template-2-controls.tsx
2021-11-24 00:24:44 +01:00

100 lines
2.8 KiB
TypeScript

import React from "react";
import { Dispatch, SetStateAction } from "react";
import { toBase64 } from "../util";
import { EmailTemplate2Config } from "./email-template-2";
export default function EmailTemplate2Controls({
config,
setConfig,
}: {
config: EmailTemplate2Config;
setConfig: Dispatch<SetStateAction<EmailTemplate2Config>>;
}): JSX.Element {
return (
<div>
<div>
<label htmlFor="poup_type">Typ okienka o RODO:</label>
<select
id="poup_type"
value={config.popup_type}
onChange={(e) =>
setConfig((v) => ({
...v,
popup_type: e.target.value as EmailTemplate2Config["popup_type"],
}))
}
>
<option value="none">Brak jakiejkolwiek informacji</option>
<option value="passive_cookie_banner">
Pasywne powiadomienie o cookiesach
</option>
<option value="consent">Okienko z pytaniem o zgodę</option>
</select>
</div>
{config.popup_type !== "none" ? (
<div>
<label htmlFor="popup_screenshot">Zrzut ekranu okienka o RODO:</label>
<input
{...{
type: "file",
id: "popup_screenshot",
onChange: async (e) => {
const popup_screenshot_base64 = await toBase64(
e.target.files[0]
);
setConfig((v) => ({
...v,
popup_screenshot_base64,
}));
},
}}
/>
</div>
) : (
""
)}
{config.popup_type === "consent" ? (
<div>
<label htmlFor="acceptAllName">
Tekst na przycisku do zatwierdzania wszystkich zgód:
</label>
<input
{...{
type: "text",
value: config.popup_accept_all_text,
onChange: (e) =>
setConfig((v) => ({
...v,
popup_accept_all_text: e.target.value,
})),
}}
/>
</div>
) : (
""
)}
<div>
<label htmlFor="popup_action">
Czy coś klikn*ł*m w informacjach o RODO?
</label>
<select
id="popup_action"
value={config.popup_type}
onChange={(e) =>
setConfig((v) => ({
...v,
popup_action: e.target
.value as EmailTemplate2Config["popup_action"],
}))
}
>
<option value="ignored">Nic nie klin*ł*m</option>
<option value="accepted">
Kliknięte {config.popup_accept_all_text}
</option>
</select>
</div>
</div>
);
}