From 2971a0dcf50ed906addec1c26e286c9b1860ff3c Mon Sep 17 00:00:00 2001
From: Shane Edwards <shane.edwards9@gmail.com>
Date: Thu, 6 Dec 2018 12:14:40 +0000
Subject: [PATCH] Your household interview led - User journey built to the
 household summary page

---
 _data/your-household-interview-led.yml        |   6 +
 .../footer-eq-default-transactional.html      |   2 +-
 .../assets/household.js                       |   2 +-
 .../your-household-interview-led/bundle.js    |   4 +-
 .../does-anyone-else-live-here.html           | 145 +++++++++
 .../your-household-interview-led/index.html   |  25 +-
 .../is-anyone-related.html                    | 100 +++++++
 .../section-intro.html                        |   9 +-
 .../your-household-interview-led/style.css    |   4 -
 .../your-household-interview-led/summary.html | 276 ++++++++++++++++++
 .../temp-types-feedback.html                  | 138 +++++++++
 .../temp-types-living-away.html               | 138 +++++++++
 .../temp-types-question.html                  | 173 +++++++++++
 .../visitors.html                             | 127 ++++++++
 .../who-else-to-add.html                      |  38 ++-
 15 files changed, 1152 insertions(+), 35 deletions(-)
 create mode 100644 _prototypes/your-household-interview-led/does-anyone-else-live-here.html
 create mode 100644 _prototypes/your-household-interview-led/is-anyone-related.html
 create mode 100644 _prototypes/your-household-interview-led/summary.html
 create mode 100644 _prototypes/your-household-interview-led/temp-types-feedback.html
 create mode 100644 _prototypes/your-household-interview-led/temp-types-living-away.html
 create mode 100644 _prototypes/your-household-interview-led/temp-types-question.html
 create mode 100644 _prototypes/your-household-interview-led/visitors.html

diff --git a/_data/your-household-interview-led.yml b/_data/your-household-interview-led.yml
index f22315174c..5638b23576 100644
--- a/_data/your-household-interview-led.yml
+++ b/_data/your-household-interview-led.yml
@@ -3,3 +3,9 @@ navigationItemsHousehold:
   state: current
 - label: Accommodation
   state: incomplete
+
+navigationItemsHouseholdComplete:
+- label: People in your household
+  state: complete
+- label: Accommodation
+  state: incomplete
diff --git a/_includes/footer-eq-default-transactional.html b/_includes/footer-eq-default-transactional.html
index de7b09d3b6..8b644f1355 100644
--- a/_includes/footer-eq-default-transactional.html
+++ b/_includes/footer-eq-default-transactional.html
@@ -1,4 +1,4 @@
-<footer class="footer" role="contentinfo">
+<footer class="footer u-mt-xl u-pt-xl" role="contentinfo">
     <div class="container">
         <div class="grid">
             <div class="grid__col col-12@m">
diff --git a/_prototypes/your-household-interview-led/assets/household.js b/_prototypes/your-household-interview-led/assets/household.js
index 2fb9d62ca7..1f4daa2f37 100644
--- a/_prototypes/your-household-interview-led/assets/household.js
+++ b/_prototypes/your-household-interview-led/assets/household.js
@@ -127,7 +127,7 @@ export const tempAwayQuestionSentenceMap = {
   'less-twelve': 'People who are temporarily outside the UK for less than 12' +
     ' months',
   'usually-temp': 'People staying temporarily who usually live in the UK but' +
-    ' do not have another UK address, for example, relatives, friends',
+    ' do not have another UK address',
   'other': 'Other people who usually live here, including anyone temporarily' +
     ' away from home'
 };
diff --git a/_prototypes/your-household-interview-led/bundle.js b/_prototypes/your-household-interview-led/bundle.js
index a4ff5c0402..c499d3e3c4 100644
--- a/_prototypes/your-household-interview-led/bundle.js
+++ b/_prototypes/your-household-interview-led/bundle.js
@@ -392,7 +392,8 @@ window.ONS.helpers = {
 window.ONS.utils = {
   removeFromList,
   trailingNameS,
-  numberToPositionWord
+  numberToPositionWord,
+  getSignificant
 };
 
 $(populateHouseholdList);
@@ -404,3 +405,4 @@ $(tools);
 $(updateAllPreviousLinks);
 $(updateBySurveyType);
 $(updateSignificantDate);
+
diff --git a/_prototypes/your-household-interview-led/does-anyone-else-live-here.html b/_prototypes/your-household-interview-led/does-anyone-else-live-here.html
new file mode 100644
index 0000000000..e8e2672155
--- /dev/null
+++ b/_prototypes/your-household-interview-led/does-anyone-else-live-here.html
@@ -0,0 +1,145 @@
+---
+title: Census Coverage Survey
+project: your-household
+globalcss: false
+layout: eq-default-extras
+cdn: v1.8.4
+hideSaveLater: true
+footer: minimal
+---
+
+<link rel="stylesheet" href="../style.css"/>
+<div class="page__subheader">
+    <div class="container">
+        <a class="js-previous-link mars" href="../do-you-live-here">Previous</a>
+    </div>
+</div>
+
+<div class="page__container container">
+    <div class="grid grid--reverse">
+        <div class="grid__col col-4@m">
+            {% include navigation.html
+            title="Your household"
+            items=site.data.your-household-interview-led.navigationItemsHousehold
+            %}
+        </div>
+        <div class="grid__col col-7@m pull-1@m">
+            <main role="main" id="main" class="page__main">
+                <form id="form" name="trav" class="form qa-questionnaire-form"
+                      role="form" autocomplete="off" novalidate="">
+                    <input type="hidden" name="previous"
+                           value="does-anyone-else-live-here"/>
+                    <div class="group" id="rsi">
+                        <div class="block" id="total-retail-turnover">
+                            <section class="section">
+                                <div class="question u-mb-s">
+                                    <h1 id="question-title"
+                                        class="question__title saturn">
+                                        Does anybody else live at <span
+                                            class="address-text"></span>?
+                                    </h1>
+                                </div>
+
+                                <div id="member-list"></div>
+
+                                <div class="answer__fields js-fields">
+                                    <div class="field field--radio field--multiplechoice ">
+                                        <fieldset class="u-mb-xl">
+                                            <div class="field__item js-focusable-box">
+                                                <input class="input input--radio js-focusable"
+                                                       type="radio"
+                                                       name="does-anyone-else-live-here"
+                                                       id="yes-someone-else"
+                                                       value="yes">
+                                                <label class="label label--inline venus"
+                                                       for="yes-someone-else"
+                                                       id="yes-someone-else-label">
+                                                    <span
+                                                            class="yes-answer">Yes, I need to
+                                                        add
+                                                    another person</span>
+                                                    <span
+                                                            class="pluto u-db label--negative">Include partners, children, babies born on or before 19th August 2018, housemates, tenants and lodgers, students and schoolchildren who live away from home during term time</span>
+                                                </label>
+                                            </div>
+
+                                            <div class="field__item js-focusable-box">
+                                                <input class="input input--radio js-focusable"
+                                                       type="radio"
+                                                       name="does-anyone-else-live-here"
+                                                       id="no" value="no">
+                                                <label class="label label--inline venus"
+                                                       for="no">No, this is
+                                                    everyone</label>
+                                            </div>
+                                        </fieldset>
+                                    </div>
+                                </div>
+                            </section>
+                        </div>
+                    </div>
+                    <button class="btn btn--primary btn--lg qa-btn-submit venus"
+                            type="submit" name="">Save and continue
+                    </button>
+                </form>
+            </main>
+        </div>
+    </div>
+</div>
+
+<script src='/js/compiled/your-household-interview-led/bundle.js'></script>
+
+<script>
+  var yesbox = document.getElementById("yes-someone-else"),
+    storageAPI = window.ONS.storage;
+  $('.qa-btn-submit').click(function(e) {
+
+    /**
+     * Routing
+     */
+    if (!yesbox.checked) {
+      if (window.location.search.match(/journey=visitors/)) {
+        document.trav.action = "../summary";
+      }
+      else {
+        document.trav.action = "../temp-types-living-away";
+      }
+
+    } else {
+      document.trav.action = "../who-else-to-add";
+    }
+  });
+
+  $(function() {
+    var addressLines = (sessionStorage.getItem('address') || '').split(','),
+      addressLine1 = addressLines[0],
+      addressLine2 = addressLines[1],
+      householdMembers = storageAPI
+        .getAllHouseholdMembers().filter(storageAPI.isHouseholdMember),
+      nextPosition = householdMembers.length + 1;
+
+    if (window.location.search.match(/journey=visitors/)) {
+      $('#form')
+        .prepend('<input type="hidden" name="journey" value="visitors" />');
+      $('#question-title')
+        .html('Was there anyone else staying on ' + window.ONS.utils.getSignificant() + ' ' +
+          addressLine1 +
+          ', ' + addressLine2 + '?');
+      $('#member-list').html('<ul id="visitors-list"></ul>');
+      $('#yes-someone-else-label').html('Yes, I need to add another visitor');
+      window.ONS.helpers.populateVisitorList();
+    }
+    else {
+      $('#member-list').html('<ul id="household-members"></ul>');
+      window.ONS.helpers.populateHouseholdList();
+    }
+
+    if ((nextPosition) > 1) {
+      $('.yes-answer').html(
+        'Yes, I need to add a ' +
+        window.ONS.utils.numberToPositionWord(nextPosition) +
+        ' person'
+      );
+    }
+  });
+</script>
diff --git a/_prototypes/your-household-interview-led/index.html b/_prototypes/your-household-interview-led/index.html
index b01119c2e5..bf755dfae5 100644
--- a/_prototypes/your-household-interview-led/index.html
+++ b/_prototypes/your-household-interview-led/index.html
@@ -49,27 +49,14 @@
                                 please spare a little time for a short
                                 interview?</p>
 
-                            <div class="definition js-details u-mb-s"
-                                 data-hide-label="Click to collapse."
-                                 data-show-label="Click to expand.">
-
-                                <a href="#definition"
-                                   class="definition__link mars js-details-trigger u-no-js-hide icon--details"
-                                   aria-expanded="false"
-                                   data-js-accordion-event-label="Why your answer is important"
-                                   data-ga-label="definition-pattern-library"
-                                   data-ga-action="Definition click"
-                                   data-ga="click"
-                                   data-ga-category="Help">Why do I have to include my visitors? <span class="u-vh js-details-label">Click to expand.</span></a>
-
-                                <h3
-                                        class="venus u-no-js-show u-mb-no">Why do I have to include my visitors?</h3>
-
-                                <div id="definition" class="definition__main js-details-body">
-                                    <div class="definition__content mars">
+                            <div class="collapsible collapsible--simple js-collapsible js-collapsible-simple has-js" id="collapsible-0">
+                                <div class="js-collapsible-content">
+                                    <h3
+                                            class="collapsible__title js-collapsible-title icon--collapsible-simple u-fs-r--b" data-ga="click" data-ga-category="definition" data-ga-action="Close panel" data-ga-label="What is the Census Coverage Survey?" id="collapsible-0-collapsible-title-0" aria-controls="collapsible-0-collapsible-body-0" aria-expanded="false" aria-selected="false" tabindex="0">What is the Census Coverage Survey?</h3>
+                                    <div class="collapsible__body js-collapsible-body" id="collapsible-0-collapsible-body-0" aria-labelledby="collapsible-title-0" aria-hidden="true">
                                         <p>Lorem ipsum...</p>
+                                        <button class="btn--secondary btn--small js-collapsible-close u-no-js-hide" data-ga="click" data-ga-category="definition" data-ga-action="Close panel" data-ga-label="What is the Census Coverage Survey?">Hide this</button>
                                     </div>
-                                    <button class="btn btn--secondary btn--small definition__content-close-trigger js-details-trigger u-no-js-hide">Hide this</button>
                                 </div>
                             </div>
                         </div>
diff --git a/_prototypes/your-household-interview-led/is-anyone-related.html b/_prototypes/your-household-interview-led/is-anyone-related.html
new file mode 100644
index 0000000000..756e681e66
--- /dev/null
+++ b/_prototypes/your-household-interview-led/is-anyone-related.html
@@ -0,0 +1,100 @@
+---
+title: Census Coverage Survey
+project: your-household
+globalcss: false
+layout: eq-default-extras
+cdn: v1.8.4
+hideSaveLater: true
+footer: minimal
+---
+
+<link rel="stylesheet" href="../style.css"/>
+<div class="page__subheader">
+    <div class="container">
+        <a class="js-previous-link mars"
+           href="../does-anyone-else-live-here">Previous</a>
+    </div>
+</div>
+
+<div class="page__container container">
+    <div class="grid grid--reverse">
+        <div class="grid__col col-4@m">
+            {% include navigation.html
+            title="Your household"
+            items=site.data.your-household-interview-led.navigationItemsHousehold
+            %}
+        </div>
+        <div class="grid__col col-7@m pull-1@m">
+            <main role="main" id="main" class="page__main">
+                <form name="trav" class="form qa-questionnaire-form" role="form"
+                      autocomplete="off" novalidate="">
+                    <input type="hidden" name="away-journeys"
+                           value=""/>
+                    <div class="group">
+                        <div class="block">
+                            <section class="section">
+                                <div class="question u-mb-s"
+                                     id="total-retail-turnover-question">
+                                    <h1 class="question__title saturn js-heading">
+                                        Are any of these people related to
+                                        each other?
+                                    </h1>
+                                </div>
+
+                                <ul id="household-members" class="u-mb-l"></ul>
+
+                                <div class="answer__fields js-fields">
+                                    <div class="field field--radio field--multiplechoice ">
+                                        <fieldset class="u-mb-xl">
+                                            <div class="field__item js-focusable-box">
+                                                <input class="input input--radio js-focusable"
+                                                       type="radio"
+                                                       name="is-this-everyone"
+                                                       id="yes-someone-else"
+                                                       value="yes">
+                                                <label class="label label--inline venus"
+                                                       for="yes-someone-else"
+                                                       id="yes-someone-else-label">Yes, some or all are related
+                                                </label>
+                                            </div>
+
+                                            <div class="field__item js-focusable-box">
+                                                <input class="input input--radio js-focusable"
+                                                       type="radio"
+                                                       name="is-this-everyone"
+                                                       id="no" value="no">
+                                                <label class="label label--inline venus"
+                                                       for="no">No, all
+                                                    household members
+                                                    are unrelated</label>
+                                            </div>
+                                        </fieldset>
+                                    </div>
+                                </div>
+                            </section>
+                        </div>
+                    </div>
+                    <button class="btn btn--primary btn--lg qa-btn-submit venus"
+                            type="submit" name="">Save and continue
+                    </button>
+                </form>
+            </main>
+        </div>
+    </div>
+</div>
+
+<script src='/js/compiled/your-household-interview-led/bundle.js'></script>
+
+<div style="display:none">
+    <div id="question-list-item-template" class="field__item js-focusable-box">
+        <input class="input input--checkbox js-focusable js-exclusive-checkbox-group js-answer-field" name="away-type" value="" id="" type="checkbox" />
+        <label class="label label--inline venus js-answer-label"></label>
+    </div>
+</div>
+
+<script>
+    $('.qa-btn-submit').on('click', function (e) {
+      e.preventDefault();
+      window.location.href = '../visitors';
+    });
+</script>
diff --git a/_prototypes/your-household-interview-led/section-intro.html b/_prototypes/your-household-interview-led/section-intro.html
index 008b233a1a..cce137fe23 100644
--- a/_prototypes/your-household-interview-led/section-intro.html
+++ b/_prototypes/your-household-interview-led/section-intro.html
@@ -42,7 +42,11 @@ <h1 class="saturn">
 
                             <p class="mars"><strong class="card-number">1</strong>
                                 Turn to card for 1 for the definition of a
-                                household (not necessarily related) living at
+                                household</p>
+
+                            <p class="mars">A <strong>household</strong>,
+                                which is one person living alone or a group
+                                of people (not necessarily related) living at
                                 the same address who share cooking facilities
                                 and share a living room OR sitting room OR
                                 dining area.
@@ -51,7 +55,8 @@ <h1 class="saturn">
                     </div>
                 </div>
 
-                <button class="btn btn--primary btn--lg qa-btn-submit venus btn-submit"
+                <button
+                        class="btn btn--primary btn--lg qa-btn-submit venus btn-submit u-mb-l"
                         type="submit" name="">Continue
                 </button>
             </main>
diff --git a/_prototypes/your-household-interview-led/style.css b/_prototypes/your-household-interview-led/style.css
index bf1e622d90..1c33b28dab 100644
--- a/_prototypes/your-household-interview-led/style.css
+++ b/_prototypes/your-household-interview-led/style.css
@@ -52,10 +52,6 @@
     background : url('../img/icons/lockicon.svg') no-repeat left top;
 }
 
-.footer {
-    margin-top : 7rem;
-}
-
 .btn--danger {
     background-color : #D0021B;
     border-color : #D0021B;
diff --git a/_prototypes/your-household-interview-led/summary.html b/_prototypes/your-household-interview-led/summary.html
new file mode 100644
index 0000000000..38b80a852d
--- /dev/null
+++ b/_prototypes/your-household-interview-led/summary.html
@@ -0,0 +1,276 @@
+---
+title: Census Coverage Survey
+project: your-household
+globalcss: false
+layout: eq-default-extras
+cdn: v1.8.4
+hideSaveLater: true
+footer: minimal
+---
+
+
+<link rel="stylesheet" href="../style.css"/>
+<div class="page__subheader">
+    <div class="container">
+        <a class="js-previous-link mars" href="../visitors">Previous</a>
+    </div>
+</div>
+
+<div class="page__container container">
+    <div class="grid grid--reverse">
+        <div class="grid__col col-4@m">
+            {% include navigation.html
+            title="Your household"
+            items=site.data.your-household-interview-led.navigationItemsHouseholdComplete
+            %}
+        </div>
+        <div class="grid__col col-7@m pull-1@m">
+            <main role="main" id="main" class="page__main">
+                <form name="trav" class="form qa-questionnaire-form" role="form"
+                      autocomplete="off" novalidate="">
+                    <div class="group" id="rsi">
+                        <div class="block" id="total-retail-turnover">
+                            <section class="section"
+                                     id="total-retail-turnover-section">
+                                <div class="question u-mb-s"
+                                     id="total-retail-turnover-question">
+                                    <h1
+                                            class="question__title saturn js-heading">
+                                        People who live here
+                                    </h1>
+                                </div>
+
+                                <!--<div class="panel panel&#45;&#45;simple panel&#45;&#45;success"
+                                     id="question-guidance-everyone-at-address-confirmation-question">
+                                    <strong class="u-mb-s">This sub section is
+                                        now complete</strong>
+                                    <ul class="mars"
+                                        style="list-style: none;padding: 0; margin-bottom: 0">
+                                        <li>You can check your answers below
+                                        </li>
+                                    </ul>
+                                </div>
+                                <br />-->
+
+                                <h2 class="neptune">Household members</h2>
+                                <ul id="household-members-summary"
+                                    class="list list--records list--people u-mb-s js-records"></ul>
+                                <p id="nobody-notice"
+                                   style="display:none;">Nobody usually
+                                    lives here</p>
+                                <p class="u-mb-xl">
+                                    <a href="../who-else-to-add?late-addition=true"
+                                       class="js-add-to-household">
+                                        Add someone to this household</a>
+                                </p>
+
+                                <div class="js-visitors-people-list">
+                                    <h2 class="neptune">Visitors staying
+                                        overnight on 19th August 2018</h2>
+                                    <ul id="visitors-summary"
+                                        class="list list--records list--people u-mb-s js-records"></ul>
+                                    <p class="u-mb-xl"><a
+                                            href="../who-else-to-add?journey=visitors">Add a visitor</a>
+                                    </p>
+                                </div>
+                            </section>
+                        </div>
+                    </div>
+                    <button class="btn btn--primary btn--lg qa-btn-submit venus"
+                            type="submit" name="">Continue
+                    </button>
+                </form>
+            </main>
+        </div>
+    </div>
+</div>
+
+<div id="modal" class="modal" style="display: none;">
+    <div class="modal__window">
+        <h1 class="saturn">Are you sure you want to remove <span
+                class="js-person-name"></span>?</h1>
+        <p class="u-mb-m">All of the data associated with this person will be
+            deleted</p>
+
+        <div class="modal__buttons btn-group">
+            <button class="btn btn-group__btn btn--secondary venus close-modal-button">Cancel
+            </button>
+            <button class="btn btn-group__btn venus remove-member-button">
+                Confirm
+            </button>
+
+            <!--<div class="btn-group">
+                <button class="btn btn-group__btn js-record-edit">Change</button>
+                <button class="btn btn-group__btn btn&#45;&#45;secondary js-record-remove">Remove</button>
+            </div>-->
+        </div>
+    </div>
+</div>
+
+<ul style="display:none;">
+    <li id="person-record-template" class="list__item">
+        <span class="list__item-name js-person-name"></span>
+        <div class="list__item-actions u-fr">
+            <span class="list__item-action">
+                <a class="js-record-edit" href="#">Change</a>
+            </span>
+            <!--<span class="list__item-action">
+                <button class="btn btn&#45;&#45;secondary btn&#45;&#45;small js-record-remove">Remove</button>
+            </span>-->
+        </div>
+    </li>
+</ul>
+
+<script src='/js/compiled/your-household-v8/bundle.js'></script>
+
+<style>
+    .list.list--records {
+        border-top: 1px solid #ccc;
+    }
+
+    .list.list--records .list__item {
+        margin-bottom: 0;
+        padding: 1rem 0;
+        border-bottom: 1px solid #ccc;
+    }
+
+    .list.list--people {
+        list-style-type: none;
+    }
+
+    .list.list--people .list__item {
+        background: url(/img/icons/person.svg) 0 1.3rem no-repeat;
+    }
+
+    .list.list--people .list__item-name {
+        padding-left: 2rem;
+    }
+
+    .list.list--people .list__item-actions {
+        margin-top: -4px;
+    }
+
+    .list.list--people .list__item-action + .list__item-action {
+        margin-left: .5rem;
+    }
+</style>
+
+<script>
+  var urlParams = new URLSearchParams(window.location.search),
+    surveyType = urlParams.get('survey'),
+    nextPage = surveyType
+      ? '../relationships/?survey=' + surveyType
+      : '../relationships',
+    altPage = surveyType && surveyType === 'lms' ? surveyType + '/' : '';
+
+  function createMemberItem(member) {
+    var $nodeEl = $('#person-record-template').clone(),
+      personNameText = member['@person'].fullName,
+      memberIsUser = isUser(member);
+
+    if (memberIsUser) {
+      personNameText += ' (You)';
+    }
+
+    $nodeEl.attr('id', '');
+    $nodeEl.find('.js-person-name').html(personNameText);
+    $nodeEl.find('.js-record-remove')
+      .on('click', removeMember_handler.bind(null, member));
+
+    $nodeEl.find('.js-record-edit').attr('href', (
+      memberIsUser
+        ? '../' + altPage + 'what-is-your-name/?noop=1&edit=true'
+        : '../' + altPage + 'who-else-to-add/?edit=' + member['@person'].id +
+          (member.type === window.ONS.storage.KEYS.VISITOR_TYPE ?
+           '&journey=visitors' : '')
+    ));
+
+    return $nodeEl;
+  }
+
+  function updateHouseholdMembersVisitors() {
+    var members = window.ONS.storage.getAllHouseholdMembers(),
+      userMember = members.filter(isUser)[0],
+      otherHouseholdMembers = members.filter(window.ONS.storage.isOtherHouseholdMember),
+      visitors = members.filter(window.ONS.storage.isVisitor),
+      householdMembers = otherHouseholdMembers;
+
+    $('#household-members-summary').html('');
+    $('#visitors-summary').html('');
+
+    if (userMember) {
+      householdMembers = [userMember].concat(otherHouseholdMembers);
+    }
+
+    $.each(householdMembers, function(i, member) {
+      $('#household-members-summary').append(createMemberItem(member));
+    });
+
+    if(!householdMembers.length) {
+      $('#nobody-notice').show();
+    }
+
+    if (visitors.length) {
+      $.each(visitors, function(i, member) {
+        $('#visitors-summary').append(createMemberItem(member));
+      });
+    }
+    else {
+      $('.js-visitors-people-list').hide();
+    }
+  }
+
+  function removeMember_handler(member, e) {
+    e.preventDefault();
+    var modal = $('#modal'),
+      original = modal.find('.remove-member-button'),
+      newNode = original.clone();
+
+    newNode.on('click', confirmRemoveMember_handler.bind(null, member));
+    original.replaceWith(newNode);
+
+    modal.find('.js-person-name').html(member['@person'].fullName);
+
+    modal.show();
+  }
+
+  function confirmRemoveMember_handler(member) {
+    window.ONS.storage.deleteHouseholdMember(member['@person'].id);
+    window.ONS.storage.deleteAllRelationshipsForMember(member['@person'].id);
+
+    updateHouseholdMembersVisitors();
+    $('#modal').hide();
+  }
+
+  $('#modal .close-modal-button').on('click', function(e) {
+    e.preventDefault();
+    $('#modal').hide();
+  });
+
+  $('.qa-btn-submit').on('click', function(e) {
+    e.preventDefault();
+
+    if (window.ONS.storage.getAllHouseholdMembers().length > 0) {
+      window.location.href = nextPage;
+    }
+    else {
+      alert('Journey for less than one person in household, not yet implemented');
+    }
+  });
+
+  function isUser(member) {
+    return member['@person'].id === window.ONS.storage.IDS.USER_HOUSEHOLD_MEMBER_ID;
+  } 
+
+  function updateContent () {
+    var $addToHousehould = $('.js-add-to-household');
+
+    if (surveyType === 'lms') {
+      $('.js-heading').html('About your household');
+      $addToHousehould.attr('href', '../lms/who-else-to-add/');
+    }
+  }
+
+  $(updateContent);
+  $(updateHouseholdMembersVisitors);
+</script>
diff --git a/_prototypes/your-household-interview-led/temp-types-feedback.html b/_prototypes/your-household-interview-led/temp-types-feedback.html
new file mode 100644
index 0000000000..59612921bb
--- /dev/null
+++ b/_prototypes/your-household-interview-led/temp-types-feedback.html
@@ -0,0 +1,138 @@
+---
+title: Census Coverage Survey
+project: your-household
+globalcss: false
+layout: eq-default-extras
+cdn: v1.8.4
+hideSaveLater: true
+footer: minimal
+---
+
+<link rel="stylesheet" href="../style.css"/>
+<div class="page__subheader">
+    <div class="container">
+        <a class="js-previous-link mars" href="../do-you-live-here">Previous</a>
+    </div>
+</div>
+
+<div class="page__container container">
+    <div class="grid grid--reverse">
+        <div class="grid__col col-4@m">
+            {% include navigation.html
+            title="Your household"
+            items=site.data.your-household-interview-led.navigationItemsHousehold
+            %}
+        </div>
+        <div class="grid__col col-7@m pull-1@m">
+            <main role="main" id="main" class="page__main">
+                <form id="form" name="trav" class="form qa-questionnaire-form"
+                      role="form" autocomplete="off" novalidate="">
+                    <div class="group">
+                        <div class="block">
+                            <section class="section">
+                                <div class="question u-mb-s">
+                                    <h1 id="question-title"
+                                        class="question__title saturn">
+                                        Is there anyone else apart from the people already included, who you need to add?
+                                    </h1>
+                                </div>
+
+                                <div
+                                        class="panel panel--simple panel--info u-mb-m">
+                                    <div class="panel__body">
+                                        <strong class="u-mb-xs u-d-b">Include
+                                        </strong>
+                                        <ul id="question-list"></ul>
+                                    </div>
+                                </div>
+
+                                <div id="member-list"></div>
+
+                                <div class="answer__fields js-fields">
+                                    <div class="field field--radio field--multiplechoice ">
+                                        <fieldset class="u-mb-xl">
+                                            <div class="field__item js-focusable-box">
+                                                <input class="input input--radio js-focusable"
+                                                       type="radio"
+                                                       name="is-this-everyone"
+                                                       id="yes-someone-else"
+                                                       value="yes">
+                                                <label class="label label--inline venus"
+                                                       for="yes-someone-else"
+                                                       id="yes-someone-else-label">Yes, I need to add someone
+                                                </label>
+                                            </div>
+
+                                            <div class="field__item js-focusable-box">
+                                                <input class="input input--radio js-focusable"
+                                                       type="radio"
+                                                       name="is-this-everyone"
+                                                       id="no" value="no">
+                                                <label class="label label--inline venus"
+                                                       for="no">No, this is everyone</label>
+                                            </div>
+                                        </fieldset>
+                                    </div>
+                                </div>
+                            </section>
+                        </div>
+                    </div>
+                    <button class="btn btn--primary btn--lg qa-btn-submit venus"
+                            type="submit" name="">Save and continue
+                    </button>
+                </form>
+            </main>
+        </div>
+    </div>
+</div>
+
+<script src='/js/compiled/your-household-interview-led/bundle.js'></script>
+
+<ul style="display:none;">
+    <li id="question-list-item-template" class="list__item"></li>
+</ul>
+
+<script>
+  var storageAPI = window.ONS.storage,
+      yesbox = document.getElementById("yes-someone-else"),
+      awayTypesStr = new URLSearchParams(window.location.search).get('away-types');
+
+  if(!awayTypesStr) {
+	  throw Error('No sentence for away type found');
+  }
+
+  var awayTypes = JSON.parse(awayTypesStr)/*,
+	  awayTypeOriginal = [].concat(awayTypes);
+	  awayType = awayTypes.shift()*/;
+
+  function updateQuestionList() {
+    $('#question-list').append(awayTypes.map(function(awayType) {
+      var $nodeEl = $('#question-list-item-template').clone();
+
+      $nodeEl.html(storageAPI.tempAwayQuestionSentenceMap[awayType]);
+
+      return $nodeEl;
+    }));
+  }
+
+  $('.qa-btn-submit').click(function(e) {
+  	e.preventDefault();
+
+    /**
+     * Routing
+     */
+    if (!yesbox.checked) {
+      window.location.href = '../is-anyone-related/';
+    } else {
+      window.location.href = '../temp-types-question?away-types=' +
+        JSON.stringify(awayTypes);
+    }
+  });
+
+  $(updateQuestionList);
+
+  $(function() {
+    $('#member-list').html('<ul id="household-members"></ul>');
+    window.ONS.helpers.populateHouseholdList();
+  });
+</script>
diff --git a/_prototypes/your-household-interview-led/temp-types-living-away.html b/_prototypes/your-household-interview-led/temp-types-living-away.html
new file mode 100644
index 0000000000..83883b13dc
--- /dev/null
+++ b/_prototypes/your-household-interview-led/temp-types-living-away.html
@@ -0,0 +1,138 @@
+---
+title: Census Coverage Survey
+project: your-household
+globalcss: false
+layout: eq-default-extras
+cdn: v1.8.4
+hideSaveLater: true
+footer: minimal
+---
+
+<link rel="stylesheet" href="../style.css"/>
+<div class="page__subheader">
+    <div class="container">
+        <a class="js-previous-link mars"
+           href="../does-anyone-else-live-here">Previous</a>
+    </div>
+</div>
+
+<div class="page__container container">
+    <div class="grid grid--reverse">
+        <div class="grid__col col-4@m">
+            {% include navigation.html
+            title="Your household"
+            items=site.data.your-household-interview-led.navigationItemsHousehold
+            %}
+        </div>
+        <div class="grid__col col-7@m pull-1@m">
+            <main role="main" id="main" class="page__main">
+                <form name="trav" class="form qa-questionnaire-form" role="form"
+                      autocomplete="off" novalidate="">
+                    <input type="hidden" name="away-journeys"
+                           value=""/>
+                    <div class="group">
+                        <div class="block">
+                            <section class="section">
+                                <div class="question u-mb-s"
+                                     id="total-retail-turnover-question">
+                                    <h1 class="question__title saturn js-heading">
+                                        <span class="js-heading-inner-part1"></span>
+                                    </h1>
+                                </div>
+
+                                <ul id="household-members" class="u-mb-l"></ul>
+
+                                <div
+                                        class="field field--checkbox field--multiplechoice field--exclusive u-mb-xl">
+                                    <fieldset>
+                                        <legend class="field__legend mars u-vh">Select all that apply:</legend>
+                                        <div class="field__label venus">Select all that apply:</div>
+                                        <div id="question-list"></div>
+                                        <div class="field__label u-mt-s venus" aria-hidden="true">Or</div>
+                                        <div class="field__item js-focusable-box">
+                                            <input
+                                                    class="input input--checkbox js-focusable js-exclusive-checkbox" name="away-type" value="no" id="none" type="checkbox" />
+                                            <label class="label label--inline venus " for="none">
+                                                <span class="u-vh">Or,</span>
+                                                No, there is no one else who is temporarily away or who should be included at this address
+                                                <span
+                                                        class="u-vh">. Selecting this will uncheck all other checkboxes</span>
+                                            </label>
+                                            <span class="js-exclusive-checkbox-alert u-vh" role="alert" aria-live="polite" data-adjective="deselected"></span>
+                                        </div>
+                                    </fieldset>
+                                </div>
+                            </section>
+                        </div>
+                    </div>
+                    <button class="btn btn--primary btn--lg qa-btn-submit venus"
+                            type="submit" name="">Save and continue
+                    </button>
+                </form>
+            </main>
+        </div>
+    </div>
+</div>
+
+<script src='/js/compiled/your-household-interview-led/bundle.js'></script>
+
+<div style="display:none">
+    <div id="question-list-item-template" class="field__item js-focusable-box">
+        <input class="input input--checkbox js-focusable js-exclusive-checkbox-group js-answer-field" name="away-type" value="" id="" type="checkbox" />
+        <label class="label label--inline venus js-answer-label"></label>
+    </div>
+</div>
+
+<script>
+  var storageAPI = window.ONS.storage,
+    members = storageAPI.getAllHouseholdMembers();
+
+  $('.qa-btn-submit').on('click', function(e) {
+    e.preventDefault();
+
+    var awayTypes = [], url;
+
+    $('[name=away-type]:checked').each(function (i, el) {
+      awayTypes.push($(el).val());
+    });
+
+    if($('[name=away-type]:checked').val() === "no") {
+        url = '../visitors/';
+    } else {
+        url = '../temp-types-question?away-types=' + JSON.stringify(awayTypes);
+    }
+
+    window.location = url;
+  });
+
+  function updateQuestionList() {
+    var items = storageAPI.tempAwayQuestionSentenceMap;
+
+    $('#question-list').html(
+      Object.keys(items).map(function(k) {
+        var $nodeEl = $('#question-list-item-template').clone(),
+            $field = $nodeEl.find('.js-answer-field'),
+            $label = $nodeEl.find('.js-answer-label');
+
+        $nodeEl.attr('id', '');
+        $label.html(items[k]);
+        $label.attr('for', k);
+        $field.attr('value', k);
+        $field.attr('id', k);
+
+        return $nodeEl;
+      })
+    );
+  }
+
+  function updateQuestion () {
+    $('.js-heading-inner-part1').html(members.length ?
+      'Apart from the people already added, is there anyone else you need to add?':
+      'Is there anyone you need to add?'
+    );
+  }
+
+  $(updateQuestionList);
+  $(updateQuestion);
+
+</script>
diff --git a/_prototypes/your-household-interview-led/temp-types-question.html b/_prototypes/your-household-interview-led/temp-types-question.html
new file mode 100644
index 0000000000..72058df3cc
--- /dev/null
+++ b/_prototypes/your-household-interview-led/temp-types-question.html
@@ -0,0 +1,173 @@
+---
+title: Census Coverage Survey
+project: your-household
+globalcss: false
+layout: eq-default-extras
+cdn: v1.8.4
+hideSaveLater: true
+footer: minimal
+---
+
+<link rel="stylesheet" href="../style.css"/>
+<div class="page__subheader">
+    <div class="container">
+        <a class="js-previous-link mars"
+           href="../does-anyone-else-live-here">Previous</a>
+    </div>
+</div>
+
+<div class="page__container container">
+    <div class="grid grid--reverse">
+        <div class="grid__col col-4@m">
+            {% include navigation.html
+            title="Your household"
+            items=site.data.your-household-interview-led.navigationItemsHousehold
+            %}
+        </div>
+        <div class="grid__col col-7@m pull-1@m">
+            <main role="main" id="main" class="page__main">
+                <form name="trav" class="form qa-questionnaire-form" role="form"
+                      autocomplete="off" novalidate="">
+                    <input type="hidden" name="away-journeys"
+                           value=""/>
+                    <div class="group">
+                        <div class="block">
+                            <section class="section">
+                                <div class="question u-mb-s"
+                                     id="total-retail-turnover-question">
+                                    <h1 class="question__title saturn">
+                                        Who do you need to add?
+                                    </h1>
+                                </div>
+
+                                <div
+                                        class="panel panel--simple panel--info u-mb-m">
+                                    <div class="panel__body">
+                                        <strong class="u-mb-xs u-d-b">Include
+                                        </strong>
+                                        <ul id="question-list"></ul>
+                                    </div>
+                                </div>
+
+                                <fieldset
+                                        class="question__fieldset js-question-fieldset">
+                                    <legend class="u-vh">What is your name?</legend>
+
+                                    <div class="question__answers">
+                                        <div class="question__answer">
+                                            <label class="label venus"
+                                                   for="first-name">
+                                                <div class="label__inner">
+                                                    First name
+                                                </div>
+                                            </label>
+                                            <input class="input input--text "
+                                                   id="first-name"
+                                                   data-qa="input-text" value=""/>
+                                        </div>
+
+                                        <div class="question__answer">
+                                            <label class="label venus ">
+                                                <div class="label__inner">
+                                                    Last name
+                                                </div>
+                                            </label>
+                                            <input class="input input--text "
+                                                   id="last-name"
+                                                   data-qa="input-text" value=""/>
+                                        </div>
+                                    </div>
+                                </fieldset>
+
+                                <p class="u-mb-xl u-mt-m">
+                                    <a class="mars"
+                                        href="../temp-types-living-away">Cancel and return to the previous question
+                                    </a>
+                                </p>
+                            </section>
+                        </div>
+                    </div>
+                    <button class="btn btn--primary btn--lg btn-submit venus"
+                            type="submit" name="">Save and continue
+                    </button>
+                </form>
+            </main>
+        </div>
+    </div>
+</div>
+
+<script src='/js/compiled/your-household-interview-led/bundle.js'></script>
+
+<ul style="display:none;">
+    <li id="question-list-item-template" class="list__item"></li>
+</ul>
+
+<script>
+  var storageAPI = window.ONS.storage,
+    userLiveAtAddress = storageAPI.doILiveHere(),
+    awayTypesStr = new URLSearchParams(window.location.search).get('away-types');
+
+  if(!awayTypesStr) {
+    throw Error('No sentence for away type found');
+  }
+
+  var awayTypes = JSON.parse(awayTypesStr),
+    awayType = [].concat(awayTypes).shift();
+
+
+  var editUserId = new URLSearchParams(window.location.search).get('edit'),
+    memberFound = null;
+
+  if (editUserId) {
+    memberFound = window.ONS.storage.getAllHouseholdMembers()
+      .filter(function(member) {
+        return member['@person'].id === editUserId;
+      })[0];
+  }
+
+  if (editUserId && !memberFound) {
+    throw Error('Member not found');
+  }
+
+  function updateQuestionList() {
+    $('#question-list').append(awayTypes.map(function(awayType) {
+      var $nodeEl = $('#question-list-item-template').clone();
+
+      $nodeEl.html(storageAPI.tempAwayQuestionSentenceMap[awayType]);
+
+      return $nodeEl;
+    }));
+  }
+
+  $('.js-question-sentence-by-type').html(storageAPI.tempAwayQuestionSentenceMap[awayType]);
+
+  $('.btn-submit').on('click', function(e) {
+    e.preventDefault();
+
+    var person = storageAPI.TYPES.person({
+      firstName: document.getElementById('first-name').value,
+      lastName: document.getElementById('last-name').value
+    });
+
+    var personType = storageAPI.KEYS['HOUSEHOLD_MEMBER_TYPE'];
+
+    if (editUserId && memberFound) {
+      person.id = editUserId;
+      window.ONS.storage['updateHouseholdMember'](person, {type: personType});
+    }
+    else {
+      window.ONS.storage['addHouseholdMember'](person, {type: personType});
+    }
+
+    window.location.href = '../temp-types-feedback?away-types=' +
+      JSON.stringify(awayTypes);
+
+    /*window.location = userLiveAtAddress
+      ? '../relationships/?redirect=../temp-types-feedback/?away-types=' +
+        JSON.stringify(awayTypes)
+      : '../temp-types-feedback/?away-types=' +
+        JSON.stringify(awayTypes);*/
+  });
+
+  $(updateQuestionList);
+</script>
diff --git a/_prototypes/your-household-interview-led/visitors.html b/_prototypes/your-household-interview-led/visitors.html
new file mode 100644
index 0000000000..2bf31d7ca4
--- /dev/null
+++ b/_prototypes/your-household-interview-led/visitors.html
@@ -0,0 +1,127 @@
+---
+title: Census Coverage Survey
+project: your-household
+globalcss: false
+layout: eq-default-extras
+cdn: v1.8.4
+hideSaveLater: true
+footer: minimal
+---
+
+<link rel="stylesheet" href="../style.css"/>
+<div class="page__subheader">
+    <div class="container">
+        <a class="js-previous-link mars" href="../temp-away-from-home">
+            Previous</a>
+    </div>
+</div>
+
+<div class="page__container container">
+    <div class="grid grid--reverse">
+        <div class="grid__col col-4@m">
+            {% include navigation.html
+            title="Your household"
+            items=site.data.your-household-interview-led.navigationItemsHousehold
+            %}
+        </div>
+        <div class="grid__col col-7@m pull-1@m">
+            <main role="main" id="main" class="page__main">
+                <form name="trav" class="form qa-questionnaire-form" role="form"
+                      autocomplete="off" novalidate="">
+                    <input type="hidden" name="previous" value="visitors"/>
+                    <input type="hidden" name="journey" value="visitors"/>
+                    <div class="group" id="rsi">
+                        <div class="block">
+                            <section class="section u-mb-xl">
+                                <div class="question">
+                                    <p class="mars"><strong
+                                            class="card-number">12</strong>
+                                        Turn to card for 12 for the
+                                        definition of a
+                                        household</p>
+
+                                    <h1 class="question__title saturn">
+                                        Were there any visitors staying with
+                                        your household overnight at
+                                        <span class="address-text"></span> on
+                                        <span class="js-significant-date"></span>?
+                                    </h1>
+                                </div>
+
+                                <div class="answer">
+                                    <div class="answer__fields js-fields">
+                                        <div class="field field--checkbox field--multiplechoice field--exclusive">
+                                            <fieldset>
+                                                <legend
+                                                        class="field__legend mars u-vh">Select all that apply:</legend>
+                                                <div class="field__label venus">Select all that apply:</div>
+                                                <div class="field__item js-focusable-box">
+                                                    <input
+                                                            class="input input--checkbox js-focusable js-exclusive-checkbox-group" name="away-type" value="usually-in-uk" id="usually-in-uk" type="checkbox" />
+                                                    <label class="label label--inline venus " for="usually-in-uk">
+                                                        People who usually live somewhere else in the UK, for example boy/girlfriends, friends or relatives
+                                                    </label>
+                                                </div>
+                                                <div class="field__item js-focusable-box">
+                                                    <input
+                                                            class="input input--checkbox js-focusable js-exclusive-checkbox-group" name="away-type" value="second-address" id="second-address" type="checkbox" />
+                                                    <label class="label label--inline venus " for="second-address">
+                                                        People staying here because it is their second address, for example, for work. Their permanent or family home is elsewhere
+                                                    </label>
+                                                </div>
+                                                <div class="field__item js-focusable-box">
+                                                    <input
+                                                            class="input input--checkbox js-focusable js-exclusive-checkbox-group" name="away-type" value="less-three" id="less-three" type="checkbox" />
+                                                    <label class="label label--inline venus " for="less-three">
+                                                        People who usually live outside the UK who are staying in the UK for less than three months
+                                                    </label>
+                                                </div>
+
+                                                <div class="field__item js-focusable-box">
+                                                    <input
+                                                            class="input input--checkbox js-focusable js-exclusive-checkbox-group" name="away-type" value="on-holiday" id="on-holiday" type="checkbox" />
+                                                    <label class="label label--inline venus " for="on-holiday">
+                                                        People here on holiday
+                                                    </label>
+                                                </div>
+                                                <div class="field__label u-mt-s venus" aria-hidden="true">Or</div>
+                                                <div class="field__item js-focusable-box">
+                                                    <input
+                                                            class="input input--checkbox js-focusable js-exclusive-checkbox" name="away-type" value="no" id="none" type="checkbox" />
+                                                    <label class="label label--inline venus " for="none">
+                                                        <span class="u-vh">Or,</span>
+                                                        No, there were no
+                                                        visitors staying overnight
+                                                        <span
+                                                                class="u-vh">. Selecting this will uncheck all other checkboxes</span>
+                                                    </label>
+                                                    <span class="js-exclusive-checkbox-alert u-vh" role="alert" aria-live="polite" data-adjective="deselected"></span>
+                                                </div>
+                                            </fieldset>
+                                        </div>
+                                    </div>
+                                </div>
+                            </section>
+                        </div>
+                    </div>
+                    <button class="btn btn--primary btn--lg qa-btn-submit venus"
+                            type="submit" name="">Save and continue
+                    </button>
+                </form>
+            </main>
+        </div>
+    </div>
+</div>
+
+<script src='/js/compiled/your-household-interview-led/bundle.js'></script>
+
+<script>
+  var nobox = document.getElementById("none");
+  $('.qa-btn-submit').click(function(e) {
+    if (!nobox.checked) {
+      document.trav.action = "../who-else-to-add";
+    } else {
+      document.trav.action = "../summary";
+    }
+  });
+</script>
diff --git a/_prototypes/your-household-interview-led/who-else-to-add.html b/_prototypes/your-household-interview-led/who-else-to-add.html
index 865efe5a8e..aae09631ad 100644
--- a/_prototypes/your-household-interview-led/who-else-to-add.html
+++ b/_prototypes/your-household-interview-led/who-else-to-add.html
@@ -46,7 +46,7 @@
                             <div id="member-list"></div>
 
                             <fieldset
-                                    class="question__fieldset js-question-fieldset u-mb-xl">
+                                    class="question__fieldset js-question-fieldset">
                                 <legend class="u-vh">What is your name?</legend>
 
                                 <div class="question__answers">
@@ -74,6 +74,12 @@
                                     </div>
                                 </div>
                             </fieldset>
+
+                            <p class="u-mb-xl u-mt-m">
+                                <a class="mars"
+                                   href="../temp-types-living-away">Cancel and return to the previous question
+                                </a>
+                            </p>
                         </div>
                     </div>
                 </div>
@@ -209,16 +215,34 @@ <h1 class="saturn">Are you sure you want to remove <span
         : '../does-anyone-else-live-here/';
     }*/
 
-    console.log(parseInt(window.sessionStorage.getItem('number-of-people')));
-    console.log(membersTotal);
 
-    if(parseInt(window.sessionStorage.getItem('number-of-people')) ===
+
+    /**
+     * Routing
+     */
+    if(editUserId) {
+      window.location = '../summary/';
+    } else if (window.location.search.match(/journey=visitors/)) {
+      window.location = '../does-anyone-else-live-here/?journey=visitors';
+    } else {
+      if(parseInt(window.sessionStorage.getItem('number-of-people')) ===
+        membersTotal + 1) {
+        window.location.href = '../temp-types-living-away';
+      }
+      else {
+        window.location.reload();
+      }
+    }
+
+
+
+    /*if(parseInt(window.sessionStorage.getItem('number-of-people')) ===
       membersTotal + 1) {
-      window.location.href = '../summary';
+      window.location.href = '../temp-types-living-away';
     }
     else {
       window.location.reload();
-    }
+    }*/
   });
 
   $(function() {
@@ -229,7 +253,7 @@ <h1 class="saturn">Are you sure you want to remove <span
       visitors = storageAPI.getAllHouseholdMembers()
         .filter(storageAPI.isVisitor),
       overrideTitle = 'Who ' + (visitors.length ? 'else ' : '') +
-        'is staying overnight on 19th August 2018 at ' +
+        'is staying overnight on ' + window.ONS.utils.getSignificant() + ' ' +
         addressLine1 + ', ' + addressLine2 + '?',
 
       overrideTitleStayingOutsideUK = 'Who do you need to add to ' +