Merge pull request #195 from znmustic/develop

#173, #137
codeforcroatia · Sep 26, 2023 · 42ccf2e · 42ccf2e
2 parents e47adf0 + a41ba27
commit 42ccf2e
Show file tree

Hide file tree

Showing 6 changed files with 193 additions and 2 deletions.
diff --git a/perllib/FixMyStreet/App/Controller/Report/New.pm b/perllib/FixMyStreet/App/Controller/Report/New.pm
@@ -115,6 +115,8 @@ sub report_new : Path : Args(0) {
     $c->detach('generate_map') unless $c->forward('check_for_errors');
     $c->forward('save_user_and_report');
     $c->forward('redirect_or_confirm_creation');
+    $c->stash->{show_notification} = 'true';
+    $c->stash->{template} = 'report/new/fill_in_details.html';
 }
 
 # This is for the new phonegap versions of the app. It looks a lot like

diff --git a/templates/web/popravitodev/report/new/fill_in_details.html b/templates/web/popravitodev/report/new/fill_in_details.html
@@ -10,18 +10,22 @@
     INCLUDE 'header.html', title => loc('Reporting a problem');
 %]
 
+[% IF show_notification == 'true' %]
+<main class="mobile-hidden">
+[% ELSE %]
 <main>
+[% END %]
 
     [% IF report.used_map %]
 
-    <form action="[% c.uri_for('/report/new') %]" method="post" name="mapForm" id="mapForm"[% IF c.cobrand.allow_photo_upload %] enctype="multipart/form-data"[% END %] class="validate">
+    <form method="post" name="mapForm" id="mapForm"[% IF c.cobrand.allow_photo_upload %] enctype="multipart/form-data"[% END %] class="validate">
         [% IF c.req.params.map_override %]
             <input type="hidden" name="map_override" value="[% c.req.params.map_override | html %]">
         [% END %]
 
     [% ELSE %]
 
-    <form action="[% c.uri_for('/report/new') %]" method="post" name="mapSkippedForm"[% IF c.cobrand.allow_photo_upload %] enctype="multipart/form-data"[% END %] class="validate form-nomap">
+    <form method="post" name="mapSkippedForm"[% IF c.cobrand.allow_photo_upload %] enctype="multipart/form-data"[% END %] class="validate form-nomap">
         <input type="hidden" name="skipped" value="1">
 
     [% END %]
@@ -61,6 +65,10 @@
     </form>
 </main>
 
+    [% IF show_notification == 'true' %]
+        [% INCLUDE 'tokens/confirm_problem.html' %]
+    [% END %]
+
     [% INCLUDE 'footer.html' %]
 
     <script src="/cobrands/[% c.cobrand.asset_moniker %]/menu.js"></script>

diff --git a/templates/web/popravitodev/tokens/confirm_problem.html b/templates/web/popravitodev/tokens/confirm_problem.html
@@ -0,0 +1,50 @@
+<div id="confirm-problem" class="modal">
+    <div class="modal-container">
+      <div class="confirmation-problem">
+        <span class="close-modal-btn" onclick="closeModal()">X</span>
+
+        <div class="row">
+          <img src="/cobrands/[% c.cobrand.asset_moniker %]/images/report-successful.png">
+        </div>
+
+        <div class="row">
+          <img src="/cobrands/[% c.cobrand.asset_moniker %]/images/Oval.svg">
+        </div>
+
+      [% IF c.cobrand.is_council %]
+        [% IF c.cobrand.owns_problem( report ) %]
+          [% TRY %]
+            [% INCLUDE 'tokens/_confirm_problem_council_id.html' %]
+          [% CATCH file %]
+            <h2>Your issue is on its way to the council.</h2>
+            <p>Your reference for this report is [% report.id %], please quote it in any enquiries.</p>
+          [% END %]
+        [% ELSE %]
+            <h2>Thank you for your report.</h2>
+            <p>
+                We don&rsquo;t handle this type of problem, so have passed it on to:
+            </p>
+            <p>
+                <b>[% report.body %]</b>
+            </p>
+            <p>
+                You can follow this problem on <a href="[% c.cobrand.relative_url_for_report( report ) %][% report.url %]">FixMyStreet.com</a>.
+            </p>
+         [% END %]
+
+      [% ELSE %]
+        <h2 class="text-centered">[% loc('Thank you for reporting this issue') %]!</h2>
+        [% IF report.bodies_str %]
+          <p>[% loc('We will send it to the relevant competent authority and let you know when it is resolved') %].</p>
+        [% END %]
+
+      [% END %]
+
+    [% TRY %][% INCLUDE 'tokens/_extras_confirm.html' %][% CATCH file %][% END %]
+
+      <button class="button confirm-modal-button" onclick="closeModal()" type="button">Ok</button>
+      </div>
+    </div>
+  </div>
+
+  <script src="/cobrands/[% c.cobrand.asset_moniker %]/hideConfirmationProblem.js"></script>  
diff --git a/web/cobrands/popravitodev/base.scss b/web/cobrands/popravitodev/base.scss
@@ -2573,6 +2573,126 @@ fieldset {
 .main-alert {
 	padding: 1.5rem;
 }
+
+.modal-background {
+	position: fixed;
+	width: 100%;
+	background-color: #606060;
+	opacity: 0.7;
+	height: 100% !important;
+	z-index: 5;
+	top: 0;
+}
+
+.confirmation-header {
+	background-color: white;
+	width: 25%;
+	height: 375px;
+	padding: 65px;
+	border-radius: 35px;
+	z-index: 8;
+	position: fixed;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+}
+
+.confirm-modal-button {
+	background-color: $primary;
+	color: white;
+	width: 375px;
+	height: 56px;
+	margin-top: 40px;
+}
+
+.confirm-button {
+	float: none;
+	margin-left: auto;
+	margin-right: auto;
+	margin-top: 100px;
+	width: 100%;
+}
+
+.confirmation-problem {
+	background-color:white;
+	text-align:center;
+	border-radius: 25px;
+	height: 525px;
+	width: 455px;
+	padding-top: 60px;
+	position: absolute;
+    top:0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    margin: auto;
+}
+
+.close-modal-btn {
+	position: absolute;
+	right: 15px;
+	cursor: pointer;
+	right: 25px;
+	top: 10px;
+	border: 2px solid;
+	border-color: white;
+	font-weight: bold;
+}
+
+.text-main {
+	margin-bottom: 0px !important;
+	margin-top: 50px !important;
+}
+
+.text-secondary {
+	margin-top: 0px !important;
+	margin-bottom: 20px !important;
+}
+
+.row {
+	width: 100%;
+}
+
+#confirm-problem h2 {
+	font-family: "Darker Grotesque";
+	font-size: 2rem;
+	width: 90%;
+	margin-bottom: 25px;
+}
+
+.text-centered {
+	margin-left: auto;
+	margin-right: auto;
+}
+
+.confirmation-problem > p {
+	width: 95%;
+	margin: auto;
+}
+
+@media only screen and (max-width: 769px) {
+
+	.mobile-hidden {
+		display: none;
+	}
+
+	.confirmation-problem {
+		position: static;
+		margin: auto;
+		width: 100%;
+	}
+
+	.confirm-modal-button {
+		height: 48px;
+		width:105px;
+	}
+
+	.with-bullets > li:first-child {
+		padding: 0 1.5rem 0 1.5rem;
+	}
+
+}
+
 //#146
 @media only screen and (max-width: 755px) {
 	.shadow-wrap {

diff --git a/web/cobrands/popravitodev/hideConfirmationProblem.js b/web/cobrands/popravitodev/hideConfirmationProblem.js
@@ -0,0 +1,8 @@
+function closeModal() {
+    const modal = document.getElementById("confirm-problem");
+    const form = document.getElementsByClassName("mobile-hidden");
+    if (form[0] !== undefined && form[0] !== null) {
+        form[0].classList.remove('mobile-hidden');
+    }
+    modal.style.display = 'none';
+}
diff --git a/web/cobrands/popravitodev/images/Oval.svg b/web/cobrands/popravitodev/images/Oval.svg