Merge pull request #3058 from uktrade/ET-103-task-validation-form

ET-103: task validation modal

config/env/test

@@ -51,3 +51,4 @@ FEATURE_PRODUCT_MARKET_SEARCH_ENABLED=True
 FEATURE_SHOW_USA_CTA=True
 FEATURE_SHOW_EU_CTA=True
 FEATURE_SHOW_CUSTOMS_AND_TAXES_DROPWDOWN=True
+FEATURE_SHOW_TASK_VALIDATION=True

config/settings.py

@@ -870,6 +870,8 @@
 FEATURE_SHOW_USA_CTA = env.bool('FEATURE_SHOW_USA_CTA', False)
 FEATURE_SHOW_EU_CTA = env.bool('FEATURE_SHOW_EU_CTA', False)
 FEATURE_SHOW_CUSTOMS_AND_TAXES_DROPWDOWN = env.bool('FEATURE_SHOW_CUSTOMS_AND_TAXES_DROPWDOWN', False)
+FEATURE_SHOW_TASK_VALIDATION = env.bool('FEATURE_SHOW_TASK_VALIDATION', False)
+
 
 MAX_COMPARE_PLACES_ALLOWED = env.int('MAX_COMPARE_PLACES_ALLOWED', 10)
 

contact/templates/domestic/contact/export-support/includes/topic-landing-card.html

@@ -7,7 +7,7 @@
                 <a href="{{ block.value.link_url }}"
                    rel="noopener noreferrer"
                    class="govuk-!-margin-right-6 govuk-!-margin-bottom-6 govuk-!-padding-6 {% if block.value.full_width == 'yes' %}govuk-!-padding-bottom-8{% endif %} great-topic-card {% if block.value.full_width == 'yes' %}great-topic-card--full-width{% else %}great-topic-card--half-width{% endif %}"
-                   data-ga-digital-entry-point>
+                   {% if features.FEATURE_SHOW_TASK_VALIDATION and block.value.title == 'Calculate how much duty you need to pay' or block.value.title == 'Find the right commodity code' %}data-task-validation{% else %}data-ga-digital-entry-point{% endif %}>
                     {% if block.value.image %}
                         <div>{% image block.value.image width-450 %}</div>
                     {% endif %}

contact/templates/domestic/contact/export-support/topic-landing.html

@@ -10,6 +10,11 @@
 {% block body_js %}
     {{ block.super }}
     <script src="{% static 'javascript/digital-entry-point.js' %}"></script>
+    {% if features.FEATURE_SHOW_TASK_VALIDATION %}
+        <script src="{% static 'javascript/great.utils.js' %}"></script>
+        <script src="{% static 'javascript/great.task-validation.js' %}"></script>
+        <script type="text/javascript">GreatFrontend.TaskValidation.init()</script>
+    {% endif %}
 {% endblock %}
 {% block content %}
     <div class="govuk-!-padding-bottom-9 great great-bg-light-blue">
@@ -23,6 +28,18 @@
                                 <h1 class="govuk-heading-xl govuk-!-margin-top-0 govuk-!-margin-bottom-8">{{ page.page_title }}</h1>
                             {% endif %}
                             {% if page.page_teaser %}{{ page.page_teaser| richtext | add_govuk_classes }}{% endif %}
+                            {% if features.FEATURE_SHOW_TASK_VALIDATION %}
+                                {# djlint:off H021 #}
+                                <div id="task-validation-form" class="great-modal" style="display:none;">
+                                    <div class="govuk-!-padding-8 great-modal__content">
+                                        <h2 id="task-validation-question"
+                                            class="govuk-heading-s govuk-!-margin-bottom-5"></h2>
+                                        <button class="govuk-button great-min-width-200-desktop">Yes</button>
+                                        <button class="govuk-button great-min-width-200-desktop">No</button>
+                                        <p class="govuk-body govuk-!-margin-top-5 govuk-!-margin-bottom-0">You're being sent to a service on www.gov.uk</p>
+                                    </div>
+                                </div>
+                            {% endif %}
                         </div>
                     </div>
                     {% if page.page_body %}

contact/urls.py

@@ -32,6 +32,7 @@
     OfficeFinderFormView,
     OfficeSuccessView,
     RoutingFormView,
+    TaskValidationView,
 )
 from core import snippet_slugs
 from core.views import QuerystringRedirectView
@@ -227,6 +228,13 @@
     path('contact/inline-feedback', skip_ga360(InlineFeedbackView.as_view()), name='contact-inline-feedback'),
 ]
 
+
+if settings.FEATURE_DIGITAL_POINT_OF_ENTRY:
+    urlpatterns += [
+        path('contact/task-validation', skip_ga360(TaskValidationView.as_view()), name='contact-task-validation'),
+    ]
+
+
 if settings.FEATURE_DIGITAL_POINT_OF_ENTRY:
     urlpatterns += [
         path(

contact/views.py

@@ -1031,3 +1031,31 @@ def post(self, request, *args, **kwargs):
 
             response.status_code = 303
             return response
+
+
+class TaskValidationView(GenericAPIView):
+    def post(self, request, *args, **kwargs):
+        data = self.request.data.copy()
+        data['userid'] = request.user.hashed_uuid if request.user.is_authenticated else None
+
+        email_address = request.user.email if request.user.is_authenticated else '[email protected]'
+
+        sender = Sender(
+            email_address=email_address,
+            country_code=None,
+        )
+
+        action = actions.SaveOnlyInDatabaseAction(
+            full_name='NA',
+            email_address=email_address,
+            subject='NA',
+            sender=sender,
+            form_url=self.request.get_full_path(),
+        )
+
+        save_result = action.save(data)
+
+        response = HttpResponse()
+        response.status_code = save_result.status_code
+
+        return response

core/context_processors.py

@@ -83,6 +83,7 @@ def feature_flags(request):
     retval['features']['FEATURE_SHOW_USA_CTA'] = settings.FEATURE_SHOW_USA_CTA
     retval['features']['FEATURE_SHOW_EU_CTA'] = settings.FEATURE_SHOW_EU_CTA
     retval['features']['FEATURE_SHOW_CUSTOMS_AND_TAXES_DROPWDOWN'] = settings.FEATURE_SHOW_CUSTOMS_AND_TAXES_DROPWDOWN
+    retval['features']['FEATURE_SHOW_TASK_VALIDATION'] = settings.FEATURE_SHOW_TASK_VALIDATION
 
     return retval
 

core/static/javascript/great.task-validation.js

@@ -0,0 +1,82 @@
+GreatFrontend = window.GreatFrontend || {}
+
+GreatFrontend.TaskValidation = {
+  init: () => {
+    const cards = document.querySelectorAll('[data-task-validation]')
+    const form = document.getElementById('task-validation-form')
+
+    const ga = (category, title, location) => {
+      window.dataLayer.push({
+        event: 'DEPCardClick',
+        category: category,
+        title: title,
+        location: location,
+      })
+    }
+
+    const redirectUserToCardHref = (href) => {
+      window.location = href
+    }
+
+    if (form) {
+      GreatFrontend.utils.hideElement(form)
+    }
+
+    if (cards.length >= 1) {
+      cards.forEach((card) => {
+        card.addEventListener('click', async (e) => {
+          e.preventDefault()
+
+          const href = card.href
+
+          const title = card.querySelector('[data-title]').dataset.title
+          const question = document.getElementById('task-validation-question')
+
+          if (title === 'Calculate how much duty you need to pay') {
+            question.innerHTML =
+              'We think you’re looking for the amount of duty you need to pay on your goods. Is this correct?'
+          }
+
+          if (title === 'Find the right commodity code') {
+            question.innerHTML =
+              'We think you’re looking for the correct commodity (HS) code for your product. Is this correct?'
+          }
+
+          if (sessionStorage.getItem('task_validation')) {
+            ga('service', title, 'main-area')
+            redirectUserToCardHref(href)
+          } else {
+            sessionStorage.setItem('task_validation', 'true')
+
+            if (form) {
+              GreatFrontend.utils.showElement(form)
+
+              form.querySelectorAll('button').forEach((button) => {
+                button.addEventListener('click', async (e) => {
+                  e.preventDefault()
+
+                  try {
+                    await fetch('/contact/task-validation', {
+                      method: 'POST',
+                      headers: {
+                        'Content-Type': 'application/json',
+                      },
+                      body: JSON.stringify({
+                        question: question,
+                        answer: button.innerText,
+                      }),
+                    })
+                    ga('service', title, 'main-area')
+                    redirectUserToCardHref(href)
+                  } catch (e) {
+                    console.log(e)
+                  }
+                })
+              })
+            }
+          }
+        })
+      })
+    }
+  },
+}

styles/great/_components.scss

@@ -706,7 +706,7 @@ figure.great-blockquote {
   &::before {
     box-sizing: initial;
     transform: rotate(135deg);
-    content: "";
+    content: '';
     border-style: solid;
     display: inline-block;
     height: 5px;
@@ -2121,3 +2121,39 @@ nav.great-breadcrumbs {
     display: block;
   }
 }
+
+.great-modal {
+  position: fixed;
+  inset: 0px;
+  z-index: 1000;
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+.great-modal__content {
+  position: absolute;
+  border: 1px solid rgb(204, 204, 204);
+  background: rgb(255, 255, 255);
+  overflow: auto;
+  border-radius: 4px;
+  outline: none;
+  max-width: 800px;
+  bottom: auto;
+  right: auto;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  max-height: calc(100vh - 30px);
+  width: calc(100vw - 30px);
+
+  button {
+    @include govuk-media-query($from: tablet) {
+      margin: 0;
+    }
+
+    &:first-of-type {
+      @include govuk-media-query($from: tablet) {
+        margin-right: 10px;
+      }
+    }
+  }
+}

styles/great/_utils.scss

@@ -167,7 +167,7 @@
   .great-font-bold {
     font-family: $great-font-bold !important;
   }
-  .great-font-weight-semi-bold{
+  .great-font-weight-semi-bold {
     font-weight: $font-weight-semi-bold !important;
   }
 
@@ -396,7 +396,6 @@
   font-family: $great-font;
 }
 
-
 .great-container {
   max-width: 1230px;
   margin: auto;
@@ -484,6 +483,12 @@
   max-width: 80%;
 }
 
+.great-min-width-200-desktop {
+  @include govuk-media-query($from: tablet) {
+    min-width: 200px;
+  }
+}
+
 .great-min-width-250-desktop {
   @include govuk-media-query($from: tablet) {
     min-width: 250px;