Merge pull request #191 from EETagent/tech_support_contact

Invalid application data technical support modals

frontend/src/lib/components/modal/LinkErrorModal.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+	import { createEventDispatcher } from 'svelte';
+	import Modal from '../Modal.svelte';
+	import { SvelteToast, toast } from '@zerodevx/svelte-toast';
+
+	export let applications: number[];
+	let isOpened = true;
+
+	const dispatch = createEventDispatcher();
+
+	const close = () => {
+		isOpened = false;
+		dispatch('close');
+	};
+</script>
+
+{#if isOpened}
+	<SvelteToast />
+	<Modal on:close={close}>
+		<div class="w-[80vw] lg:w-[60vw] h-[40vh] flex flex-col items-center relative">
+            <div>
+				{#if applications.length === 1}
+					<h1 class="mt-6 text-4xl text-center text-sspsBlueDark font-bold">
+						Přihláška {applications[0]} <span class="underline">není</span>
+						Vaše?
+					</h1>
+					<h1 class="mt-6 text-4xl text-center text-sspsBlueDark font-bold">
+						Nebo jste podávali <span class="underline">dvě</span>
+						přihlášky?
+					</h1>
+				{:else}
+					<h1 class="mt-6 text-4xl text-center text-sspsBlueDark font-bold">
+						Přihlášky {applications[0]} a {applications[1]} <span class="underline">nejsou</span>
+						Vaše?
+					</h1>
+					<h1 class="mt-6 text-4xl text-center text-sspsBlueDark font-bold">
+						Nebo jste podávali jen <span class="underline">jednu</span>
+						přihlášku?
+					</h1>
+				{/if}
+                <h3 class="text-center mt-4"
+                    >Znamená to, že jsme udělali chybu v přepisu přihlášky.
+                </h3>
+                <h2 class="font-bold text-2xl text-center text-sspsBlueDark mt-12">
+                    Kontaktujte nás na telefonu +420 123 456 789,
+                </h2>
+                <h3 class="text-center mt-2">
+                    nebo nám napište na email na
+                    <a href="mailto:portfolio@ssps.cz " class="underline"> portfolio@ssps.cz </a>
+                </h3>
+                <h4 class="text-center absolute bottom-4 left-0 w-full">Omlouváme se za komplikace s přijímacím řízením SSPŠaG</h4>
+            </div>
+        </div>
+	</Modal>
+{/if}
+
+<style lang="postcss">
+</style>

frontend/src/lib/components/modal/PersonalIdErrorModal.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+	import { createEventDispatcher } from 'svelte';
+	import Modal from '../Modal.svelte';
+	import { SvelteToast, toast } from '@zerodevx/svelte-toast';
+
+	let isOpened = true;
+	export let personalIdNumber: string;
+
+	const dispatch = createEventDispatcher();
+
+	const close = () => {
+		isOpened = false;
+		dispatch('close');
+	};
+</script>
+
+{#if isOpened}
+	<SvelteToast />
+	<Modal on:close={close}>
+        <div class="w-[80vw] lg:w-[60vw] h-[40vh] flex flex-col items-center relative">
+            <div>
+                <h1 class="mt-6 text-4xl text-center text-sspsBlueDark font-bold">
+                    Vaše rodné číslo <span class="underline">není</span>
+                    '{personalIdNumber}'?
+                </h1>
+                <h3 class="text-center mt-4"
+                    >Znamená to, že jsme udělali chybu v přepisu přihlášky.
+                </h3>
+                <h2 class="font-bold text-2xl text-center text-sspsBlueDark mt-12">
+                    Kontaktujte nás na telefonu +420 123 456 789,
+                </h2>
+                <h3 class="text-center mt-2">
+                    nebo nám napište na email na
+                    <a href="mailto:portfolio@ssps.cz " class="underline"> portfolio@ssps.cz </a>
+                </h3>
+                <h4 class="text-center absolute bottom-4 left-0 w-full">Omlouváme se za komplikace s přijímacím řízením SSPŠaG</h4>
+            </div>
+        </div>
+	</Modal>
+{/if}
+
+<style lang="postcss">
+</style>

frontend/src/routes/(candidate)/(authenticated)/register/+page.svelte

@@ -26,6 +26,8 @@
 	import SchoolSelect from '$lib/components/select/SchoolSelect/SchoolSelect.svelte';
 	import PersonalIdConfirmCheckBox from '$lib/components/checkbox/PersonalIdConfirmCheckBox.svelte';
 	import { isPersonalIdNumberWithBirthdateValid } from '$lib/utils/personalIdFormat';
+	import PersonalIdErrorModal from '$lib/components/modal/PersonalIdErrorModal.svelte';
+	import LinkErrorModal from '$lib/components/modal/LinkErrorModal.svelte';
 
 	let pageIndex = 0;
 	let pagesFilled = [false, false, false, false, false, false, false, false];
@@ -203,7 +205,11 @@
 	// TODO: https://github.com/tjinauyeung/svelte-forms-lib/issues/171!! (Zatím tenhle mega typ)
 	$: typedErrors = errors as unknown as Writable<FormErrorType>;
 
-	$: console.log($typedErrors);
+	let visibleModals = {
+		personalIdModal: false,
+		linkErrorModal: false
+	};
+
 	const onSubmit = async (values: CandidateData) => {
 		if (pageIndex === 3) {
 			if (values.candidate.citizenship === 'Česká republika') {
@@ -285,11 +291,13 @@
 		switch (index) {
 			case 0:
 				if ($typedErrors['personalIdOk'] || $typedErrors['personalIdErr']) {
+					visibleModals.personalIdModal = true;
 					return true;
 				}
 				break;
 			case 1:
 				if ($typedErrors['linkOk'] || $typedErrors['linkError']) {
+					visibleModals.linkErrorModal = true;
 					return true;
 				}
 				break;
@@ -351,10 +359,10 @@
 			case 7:
 				// @ts-ignore
 				if (
-						$typedErrors['candidate']['firstSchool']['name'] ||
+					$typedErrors['candidate']['firstSchool']['name'] ||
-						$typedErrors['candidate']['firstSchool']['field'] ||
+					$typedErrors['candidate']['firstSchool']['field'] ||
-						$typedErrors['candidate']['secondSchool']['name'] ||
+					$typedErrors['candidate']['secondSchool']['name'] ||
-						$typedErrors['candidate']['secondSchool']['field']
+					$typedErrors['candidate']['secondSchool']['field']
 				) {
 					return true;
 				}
@@ -422,6 +430,14 @@
 
 <SplitLayout>
 	<SvelteToast />
+	{#if visibleModals.personalIdModal}
+		<PersonalIdErrorModal
+			on:close={(_) => (visibleModals.personalIdModal = false)}
+			personalIdNumber={baseCandidateDetails.personalIdNumber}
+		/>
+	{:else if visibleModals.linkErrorModal}
+		<LinkErrorModal applications={baseCandidateDetails.applications} on:close={(_) => (visibleModals.linkErrorModal = false)} />
+	{/if}
 	<div class="form relative bg-center">
 		<div class="bottom-5/24 absolute flex w-full flex-col md:h-auto">
 			<div class="<md:hidden self-center">