Re-add notifications registered page
This commit is contained in:
parent
82b313f62f
commit
68adab88bc
5 changed files with 205 additions and 7 deletions
|
|
@ -16,6 +16,7 @@ import HomeBase from "@/rmo/view/Home.vue";
|
|||
import HomeDistrict from "@/rmo/view/district/Home.vue";
|
||||
import NuisanceBase from "@/rmo/view/Nuisance.vue";
|
||||
import NuisanceDistrict from "@/rmo/view/district/Nuisance.vue";
|
||||
import RegisterNotificationsComplete from "@/rmo/view/RegisterNotificationsComplete.vue";
|
||||
import ReportSubmitted from "@/rmo/view/ReportSubmitted.vue";
|
||||
import StatusBase from "@/rmo/view/Status.vue";
|
||||
import StatusByID from "@/rmo/view/StatusByID.vue";
|
||||
|
|
@ -125,12 +126,6 @@ const routes: RouteRecordRaw[] = [
|
|||
component: ComplianceMailer,
|
||||
props: true,
|
||||
},
|
||||
{
|
||||
path: "/submitted/:id",
|
||||
name: "ReportSubmitted",
|
||||
component: ReportSubmitted,
|
||||
props: true,
|
||||
},
|
||||
{
|
||||
path: "/status",
|
||||
name: "StatusBase",
|
||||
|
|
@ -142,6 +137,18 @@ const routes: RouteRecordRaw[] = [
|
|||
path: "/status/:id",
|
||||
props: true,
|
||||
},
|
||||
{
|
||||
path: "/submitted/:id",
|
||||
name: "ReportSubmitted",
|
||||
component: ReportSubmitted,
|
||||
props: true,
|
||||
},
|
||||
{
|
||||
path: "/submitted/:id/complete",
|
||||
name: ROUTE_NAMES.REGISTER_NOTIFICATIONS_COMPLETE,
|
||||
component: RegisterNotificationsComplete,
|
||||
props: true,
|
||||
},
|
||||
{
|
||||
path: "/water",
|
||||
name: "Water",
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ export const ROUTE_NAMES = {
|
|||
COMPLIANCE_PERMISSION: "compliance-permission",
|
||||
COMPLIANCE_PROCESS: "compliance-process",
|
||||
COMPLIANCE_SUBMIT: "compliance-submit",
|
||||
REGISTER_NOTIFICATIONS_COMPLETE: "register-notifications-complete",
|
||||
REVIEW_SITE: "review-site",
|
||||
} as const;
|
||||
|
||||
|
|
|
|||
|
|
@ -31,6 +31,16 @@ export function useRoutes() {
|
|||
);
|
||||
const ComplianceProcess = complianceRoute(ROUTE_NAMES.COMPLIANCE_PROCESS);
|
||||
const ComplianceSubmit = complianceRoute(ROUTE_NAMES.COMPLIANCE_SUBMIT);
|
||||
const RegisterNotificationsComplete = (
|
||||
publicID: string,
|
||||
): RouteLocationRaw => {
|
||||
return {
|
||||
name: ROUTE_NAMES.REGISTER_NOTIFICATIONS_COMPLETE,
|
||||
params: {
|
||||
public_id: publicID,
|
||||
},
|
||||
};
|
||||
};
|
||||
return {
|
||||
ComplianceAddress,
|
||||
ComplianceComplete,
|
||||
|
|
@ -41,5 +51,6 @@ export function useRoutes() {
|
|||
CompliancePermission,
|
||||
ComplianceProcess,
|
||||
ComplianceSubmit,
|
||||
RegisterNotificationsComplete,
|
||||
};
|
||||
}
|
||||
|
|
|
|||
177
ts/rmo/view/RegisterNotificationsComplete.vue
Normal file
177
ts/rmo/view/RegisterNotificationsComplete.vue
Normal file
|
|
@ -0,0 +1,177 @@
|
|||
<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">{{ 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">
|
||||
<a
|
||||
href="/status/{{ .ReportID }}"
|
||||
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
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
interface Props {
|
||||
id: string;
|
||||
}
|
||||
const props = defineProps<Props>();
|
||||
</script>
|
||||
|
|
@ -275,6 +275,7 @@
|
|||
import { ref, onMounted } from "vue";
|
||||
import { computedAsync } from "@vueuse/core";
|
||||
import { useRouter } from "vue-router";
|
||||
import { useRoutes } from "@/rmo/route/use";
|
||||
import { useStoreDistrict } from "@/rmo/store/district";
|
||||
import { useStorePublicReport } from "@/store/publicreport";
|
||||
import type { District, PublicReport } from "@/type/api";
|
||||
|
|
@ -305,6 +306,7 @@ const formData = ref<FormData>({
|
|||
subscribe: false,
|
||||
});
|
||||
const router = useRouter();
|
||||
const routes = useRoutes();
|
||||
const storeDistrict = useStoreDistrict();
|
||||
const storePublicReport = useStorePublicReport();
|
||||
|
||||
|
|
@ -332,7 +334,7 @@ const handleSubmit = async () => {
|
|||
|
||||
if (response.ok) {
|
||||
// Handle success (e.g., show a success message)
|
||||
console.log("Form submitted successfully");
|
||||
router.push(routes.RegisterNotificationsComplete(props.id));
|
||||
} else {
|
||||
// Handle error
|
||||
console.error("Form submission failed");
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue