181 lines
6.1 KiB
Vue
181 lines
6.1 KiB
Vue
<style scoped>
|
|
.logo {
|
|
max-width: 200px;
|
|
height: auto;
|
|
}
|
|
</style>
|
|
<template>
|
|
<div class="container py-5">
|
|
<div class="row justify-content-center">
|
|
<div class="col-lg-7">
|
|
<!-- Confirmation Card -->
|
|
<div class="card shadow-sm border-info mb-4">
|
|
<div class="card-header bg-info text-white">
|
|
<h3 class="my-2">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="24"
|
|
height="24"
|
|
fill="currentColor"
|
|
class="bi bi-bell-fill me-2"
|
|
viewBox="0 0 16 16"
|
|
>
|
|
<path
|
|
d="M8 16a2 2 0 0 0 2-2H6a2 2 0 0 0 2 2zm.995-14.901a1 1 0 1 0-1.99 0A5.002 5.002 0 0 0 3 6c0 1.098-.5 6-2 7h14c-1.5-1-2-5.902-2-7 0-2.42-1.72-4.44-4.005-4.901z"
|
|
/>
|
|
</svg>
|
|
Notifications Registered
|
|
</h3>
|
|
</div>
|
|
<div class="card-body p-4 text-center">
|
|
<div class="mb-4">
|
|
<div class="display-1 text-info mb-3">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="80"
|
|
height="80"
|
|
fill="currentColor"
|
|
class="bi bi-check-circle-fill"
|
|
viewBox="0 0 16 16"
|
|
>
|
|
<path
|
|
d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<h4 class="mb-3">Thank You!</h4>
|
|
<p class="lead">
|
|
Your contact information has been successfully registered for
|
|
report updates.
|
|
</p>
|
|
<div class="alert alert-secondary py-3 mt-3">
|
|
<strong>Report ID: </strong>
|
|
<span class="fs-5">{{ formatReportID(id) }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<hr class="my-4" />
|
|
|
|
<!-- What to Expect Section -->
|
|
<div class="text-start mb-4">
|
|
<h5>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="18"
|
|
height="18"
|
|
fill="currentColor"
|
|
class="bi bi-info-circle me-2"
|
|
viewBox="0 0 16 16"
|
|
>
|
|
<path
|
|
d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"
|
|
/>
|
|
<path
|
|
d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"
|
|
/>
|
|
</svg>
|
|
What to Expect
|
|
</h5>
|
|
<ul class="list-group list-group-flush">
|
|
<li class="list-group-item bg-transparent">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="16"
|
|
height="16"
|
|
fill="currentColor"
|
|
class="bi bi-envelope-check me-2 text-success"
|
|
viewBox="0 0 16 16"
|
|
>
|
|
<path
|
|
d="M2 2a2 2 0 0 0-2 2v8.01A2 2 0 0 0 2 14h5.5a.5.5 0 0 0 0-1H2a1 1 0 0 1-.966-.741l5.64-3.471L8 9.583l7-4.2V8.5a.5.5 0 0 0 1 0V4a2 2 0 0 0-2-2H2Zm3.708 6.208L1 11.105V5.383l4.708 2.825ZM1 4.217V4a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v.217l-7 4.2-7-4.2Z"
|
|
/>
|
|
<path
|
|
d="M16 12.5a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Zm-1.993-1.679a.5.5 0 0 0-.686.172l-1.17 1.95-.547-.547a.5.5 0 0 0-.708.708l.774.773a.75.75 0 0 0 1.174-.144l1.335-2.226a.5.5 0 0 0-.172-.686Z"
|
|
/>
|
|
</svg>
|
|
A confirmation message has been sent to your contact
|
|
information.
|
|
</li>
|
|
<li class="list-group-item bg-transparent">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="16"
|
|
height="16"
|
|
fill="currentColor"
|
|
class="bi bi-clipboard-check me-2 text-success"
|
|
viewBox="0 0 16 16"
|
|
>
|
|
<path
|
|
fill-rule="evenodd"
|
|
d="M10.854 7.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L7.5 9.793l2.646-2.647a.5.5 0 0 1 .708 0z"
|
|
/>
|
|
<path
|
|
d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z"
|
|
/>
|
|
<path
|
|
d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z"
|
|
/>
|
|
</svg>
|
|
You will receive updates when:
|
|
<ul class="mt-2">
|
|
<li>Your report is assigned to a specialist</li>
|
|
<li>A site visit is scheduled</li>
|
|
<li>Treatment or remediation is completed</li>
|
|
<li>The case is resolved</li>
|
|
</ul>
|
|
</li>
|
|
<li class="list-group-item bg-transparent">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="16"
|
|
height="16"
|
|
fill="currentColor"
|
|
class="bi bi-search me-2 text-success"
|
|
viewBox="0 0 16 16"
|
|
>
|
|
<path
|
|
d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"
|
|
/>
|
|
</svg>
|
|
You can check your report status anytime using your Report ID.
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Navigation Buttons -->
|
|
<div class="mt-4">
|
|
<RouterLink
|
|
:to="routes.StatusByID(props.id)"
|
|
class="btn btn-outline-primary me-2"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="16"
|
|
height="16"
|
|
fill="currentColor"
|
|
class="bi bi-search me-1"
|
|
viewBox="0 0 16 16"
|
|
>
|
|
<path
|
|
d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"
|
|
/>
|
|
</svg>
|
|
Check Report Status
|
|
</RouterLink>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import { formatReportID } from "@/format";
|
|
import { useRoutes } from "@/rmo/route/use";
|
|
|
|
interface Props {
|
|
id: string;
|
|
}
|
|
const props = defineProps<Props>();
|
|
const routes = useRoutes();
|
|
</script>
|