Add email to Apply journey (#319)

Added more info to the final screen to help users anticipate what's
coming next.

---------

Co-authored-by: Frankie Roberto <[email protected]>

Author: Anna-Sutton

app/routes/apply.js

@@ -35,15 +35,18 @@ module.exports = router => {
       nextPage = '/apply/check-your-email'
     }
 
-    // Reset answers
-    data.organisationCode = null
-    data.vaccineTypes = null
-    data.firstName = null
-    data.lastName = null
-    data.email = null
-    data.clinician = null
-
     res.redirect(nextPage)
   })
 
+  // Welcome email mockup
+  router.get('/apply/welcome-email', (req, res) => {
+    const data = req.session.data
+    const organisationCode = data.organisationCode
+    const organisation = data.organisations.find((organisation) => organisation.id === organisationCode)
+
+    res.render('apply/welcome-email', {
+      organisation
+    })
+  })
+
 }

app/views/apply/check-your-email.html

@@ -12,9 +12,21 @@
 
       <h2 class="nhsuk-heading-l">{{ pageName }}</h2>
 
-      <p>We've sent you a welcome email with details of how to access the service.
+      <p>We've set up an account for you as a lead administrator for Addlestone Pharmacy.</p>
+
+      <p>You will now get a welcome email which includes:</p>
+        <ul>
+        <li>how to log in</li>
+        <li>how to add more users to your pharmacy
+        <li>links to our training webinars and user guide</li>
+        </ul>
       <p>If you cannot find the email, check your spam or junk.</p>
 
+      <hr class="nhsuk-section-break nhsuk-section-break--xl nhsuk-section-break--visible">
+
+      <p><a href="/apply/welcome-email">[Go to email inbox]</a></p>
+
+
     </div>
   </div>
 {% endblock %}

app/views/apply/welcome-email.html

@@ -0,0 +1,56 @@
+{% extends 'layout.html' %}
+
+{% set pageName = "Email inbox" %}
+
+{% block header %}
+{% endblock %}
+
+{% block footer %}
+{% endblock %}
+
+{% block content %}
+  <div class="nhsuk-grid-row">
+    <div class="nhsuk-grid-column-full">
+
+      <h1 class="nhsuk-heading-l">Email inbox</h1>
+
+      <div class="app-email-preview">
+
+      <p>Dear {{ data.firstName }} {{ data.lastName }},</p>
+      <p>You have successfully signed up to use NHS Record a vaccination service at {{ organisation.name }}.</p>
+      <p>Here's what you need to do next:</p>
+
+      <h2 class="nhsuk-heading-s">1. Activate your Okta account</h2>
+      <p>We've created an Okta account for you to securely access the service.</p>
+      <p>You’ll receive a ‘Welcome to Okta’ email (from <a href="mailto:[email protected]">[email protected]</a>). You need to activate the link within 7 days.</p>
+      <p>If you cannot find the email, check your spam or junk.</p>
+
+      <h2 class="nhsuk-heading-s">2. Log in to the Record a vaccination service</h2>
+      <p>Once you’ve activated your Okta account, log in to <a href="https://www.ravs.england.nhs.uk">www.ravs.england.nhs.uk</a> using your Okta username and password.</p>
+      <p>You can also access the service through your Okta account by clicking ‘RAVS (PROD) app’.</p>
+
+      <h2 class="nhsuk-heading-s">3. Get ready to record vaccinations</h2>
+      <p>Once you've logged in:</p>
+      <ul class="nhsuk-list nhsuk-list--bullet">
+        <li>go to the ‘Vaccines’ section and add vaccines for your  organisation</li>
+        <li>go to ‘Manage users’ to add more users to your  organisation</li>
+      </ul>
+
+      <h2 class="nhsuk-heading-s">Training and support</h2>
+      <p>To help you get started, you can:</p>
+      <ul class="nhsuk-list nhsuk-list--bullet">
+        <li><a href="https://outlook.office365.com/book/[email protected]">book a training webinar</a></li>
+        <li><a href="https://guide.ravs.england.nhs.uk/?wt.mc_id=INVITEEMAIL">check our user guide</a></li>
+      </ul>
+
+      <p>Kind regards,</p>
+      <p>NHS Record a vaccination</p>
+
+      <h2 class="nhsuk-heading-s">Helpdesk</h2>
+      <p>Email: <a href="mailto:[email protected]">[email protected]</a>
+      <br>Phone: 0333 038 4268 (select option 3)
+      <br>Monday to Friday: 8am to 6pm</p>
+    </div>
+  </div>
+
+{% endblock %}