From c305be43a0169936a67e6ea699b7f4a3c85aec7d Mon Sep 17 00:00:00 2001
From: Shane Edwards <shane.edwards9@gmail.com>
Date: Thu, 6 Dec 2018 16:50:34 +0000
Subject: [PATCH] Your household interview led - USer journey up to hub

---
 _data/your-household-interview-led.yml        |   7 +
 .../accommodation-kind.html                   | 115 ++++++++
 .../your-household-interview-led/hub.html     | 251 ++++++++++++++++++
 .../your-household-interview-led/summary.html |  16 +-
 .../who-else-to-add.html                      |  14 +-
 5 files changed, 376 insertions(+), 27 deletions(-)
 create mode 100644 _prototypes/your-household-interview-led/accommodation-kind.html
 create mode 100644 _prototypes/your-household-interview-led/hub.html

diff --git a/_data/your-household-interview-led.yml b/_data/your-household-interview-led.yml
index 5638b23576..384934e0fa 100644
--- a/_data/your-household-interview-led.yml
+++ b/_data/your-household-interview-led.yml
@@ -9,3 +9,10 @@ navigationItemsHouseholdComplete:
   state: complete
 - label: Accommodation
   state: incomplete
+
+navigationItemsAccommodation:
+- label: People in your household
+  state: complete
+  href: ../summary
+- label: Accommodation
+  state: current
diff --git a/_prototypes/your-household-interview-led/accommodation-kind.html b/_prototypes/your-household-interview-led/accommodation-kind.html
new file mode 100644
index 0000000000..7e98ee216e
--- /dev/null
+++ b/_prototypes/your-household-interview-led/accommodation-kind.html
@@ -0,0 +1,115 @@
+---
+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.navigationItemsAccommodation
+            %}
+        </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">
+                                    <p class="mars"><strong class="card-number">3</strong>
+                                        Turn to card 3</p>
+
+                                    <h1 class="question__title saturn js-heading">
+                                        What kind of accommodation is/was
+                                        <span class="address-text"></span> on
+                                        <span class="js-significant-date"></span>
+                                    </h1>
+                                </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="accommodation-kind"
+                                                       id="whole-house"
+                                                       value="yes">
+                                                <label class="label label--inline venus"
+                                                       for="whole-house"
+                                                       id="yes-someone-else-label">Whole house or bungalow
+                                                </label>
+                                            </div>
+
+                                            <div class="field__item js-focusable-box">
+                                                <input class="input input--radio js-focusable"
+                                                       type="radio"
+                                                       name="accommodation-kind"
+                                                       id="flat"
+                                                       value="flat">
+                                                <label class="label label--inline venus"
+                                                       for="flat">Flat, maisonette
+                                                    or apartment including
+                                                    bedsits</label>
+                                            </div>
+
+                                            <div class="field__item js-focusable-box">
+                                                <input class="input input--radio js-focusable"
+                                                       type="radio"
+                                                       name="accommodation-kind"
+                                                       id="caravan"
+                                                       value="no">
+                                                <label class="label label--inline venus"
+                                                       for="caravan">Caravan or
+                                                    other mobile or temporary
+                                                    structure</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 = '../hub';
+    });
+</script>
diff --git a/_prototypes/your-household-interview-led/hub.html b/_prototypes/your-household-interview-led/hub.html
new file mode 100644
index 0000000000..24afa6271d
--- /dev/null
+++ b/_prototypes/your-household-interview-led/hub.html
@@ -0,0 +1,251 @@
+---
+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>
+
+<style>
+    .completed {
+        position: relative;
+    }
+
+    .completed::before {
+        z-index:2;
+        content:"";
+        background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAbCAYAAAAZMl2nAAAABGdBTUEAALGPC/xhBQAAAjtJREFUSA29l0FLW0EQx2f2NWDSQ196sFBELKFfwVMPNcmLFZV68eRFPBd6K4IexKT0IHjpqdDi0aMg5iCKUvDkqdBDQYiKIIJY0oO1wZhMd0L3+V6yz+TlrZ1DNjOzM/9f9u1uEoD/aH3Lk/EgORGUMB1/VHDeXf4u7z9ZyvXqeqMuaDqWLGTf1Ov0sdEX8UdMWJmLuc0zr869g9iL2RlC+gwEHi08eCB60j/nN04VjCepQuZGe9GZJqAvANS6BRBKIobp8uz2CSu2TjDEcScEaxCk6Jq+2h9eDbB7LyBtIVhZGgEMQLVaXKAFYfzRdArBIFL8EgWOlOe394yCdAvBUBa/NNvTT+MJa7B/rSf7/KyyUzpuzuv8KBDcr2WPMMTV+Z+i3O2jUKtt2O+Hh3TC3lhUCO7lezQuBNFLJYSAV2BZY7/mNndVzDuagOB+7oroIHiCXJkE1G+Kj/NOjn2vmYLgng2QIAglSgTxGtB6spAbVzGTENwTiQiTeWdLfvKMEgkcEaqAYgrr8DDwxmwq9h7RppTPFYhIKGgFEGu+jM4hiAHRqmkIlmoc38rO0fdE5llJfi+9ljF33+hY/uV9m1w3r9OVULXuPRISRtVrx7AQ3MQFYccETDcQLSBRYbqF0IJ0CxMFIhAkLExUiDtBOoUxAdEWxAdDOCF9qXtrpiC4o+/U3Er43/Fpig+lTuQ9zPdMA8YkBKt1BMITK7uH3xLp1Ln8eTdqGoL7hzY777yV/1NehC5sU/AXb484yamkz/AAAAAASUVORK5CYII=") no-repeat 50%;
+        background-size:1rem;
+        position:absolute;
+        left:9px;left:-1.5rem;
+        width:1.2em;
+        height:1.2em;
+        bottom:0;
+        top:0;
+        margin:auto;
+    }
+
+    .btn--primary[disabled] {
+        opacity: .5;
+    }
+</style>
+
+<div class="page__container container">
+    <div class="grid grid--reverse">
+        <div class="grid__col col-12@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">
+                                        Survey progress
+                                    </h1>
+                                </div>
+
+                                <!--<div class="panel panel&#45;&#45;simple panel&#45;&#45;info"
+                                     id="question-guidance-everyone-at-address-confirmation-question">
+                                    <strong class="u-mb-s">You have completed
+                                        the section
+                                        <span class="address-text-line1"></span></strong>
+                                    <p class="mars">In order to submit this
+                                        survey you need to complete all of
+                                        the following sections</p>
+                                </div>
+                                <br />-->
+
+                                <div class="summary u-mb-xl">
+                                    <div class="summary__block">
+                                        <div class="summary__item">
+                                            <div class="grid">
+                                                <div class="grid__col col-12@xs col-6@m">
+                                                    <div
+                                                            class="summary__question venus address-text-line1"></div>
+                                                </div>
+                                                <div
+                                                        class="grid__col col-8@xs col-3@m">
+                                                    <div
+                                                            class="summary__answer mars completed">Completed</div>
+                                                </div>
+                                                <div
+                                                        class="grid__col col-4@xs col-3@m">
+                                                    <div class="summary__link mars">
+                                                        <a
+                                                                href="../summary" class="js-view-summary">View
+                                                            answers
+                                                            <span class="u-vh"></span>
+                                                        </a>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                        <div id="household-member-surveys"></div>
+                                    </div>
+                                </div>
+
+                                <!--<p>You can submit this survey once all of
+                                    the sections are complete</p>-->
+                            </section>
+                        </div>
+                    </div>
+                    <button class="btn btn--primary btn--lg qa-btn-submit venus"
+                            type="submit"
+                            disabled="disabled">Submit survey
+                    </button>
+                </form>
+            </main>
+        </div>
+    </div>
+</div>
+
+<ul style="display:none;">
+    <div id="person-survey-item-template" class="summary__item">
+        <div class="grid">
+            <div class="grid__col col-12@xs col-6@m">
+                <div
+                        class="summary__question venus js-person-name"></div>
+            </div>
+            <div class="grid__col col-8@xs col-3@m">
+                <div
+                        class="summary__answer mars js-survey-status">[Status
+                    not found]</div>
+            </div>
+            <div class="grid__col col-4@xs col-3@m">
+                <div class="summary__link mars">
+                    <a class="js-link"
+                       href="#">Start section
+                    </a>
+                </div>
+            </div>
+        </div>
+    </div>
+</ul>
+
+<script src='/js/compiled/your-household-v8/bundle.js'></script>
+
+<script>
+    var storageAPI = window.ONS.storage,
+      urlParams = new URLSearchParams(window.location.search),
+      surveyType = urlParams.get('survey');
+
+    var statusMap = {
+      'not-started': {
+        label: 'Not started',
+        linkText: 'Start section',
+      },
+      'in-progress': {
+        label: 'In progress',
+        linkText: 'Continue with section'
+      },
+      'completed': {
+        label: 'Completed',
+        linkText: 'View answers'
+      },
+      'private': {
+        label: 'Responding individually',
+        linkText: null
+      }
+    };
+
+    var people = storageAPI.getAllHouseholdMembers()
+      .filter(storageAPI.isHouseholdMember)
+      .map(function (member) {
+        return member['@person'];
+      }),
+      peopleIdsToComplete = _.pluck(people, 'id');
+
+    var nextPageSurvey = surveyType ? '&survey=' + surveyType : '';
+
+    function updateIndividualSurveyList() {
+      $.each(people, function (i, person) {
+
+        var $nodeEl = $('#person-survey-item-template').clone(),
+            $surveyStatus = $nodeEl.find('.js-survey-status'),
+            personDetails = storageAPI.getPersonalDetailsFor(person.id),
+            personPin = storageAPI.getPinFor(person.id),
+            surveyStatus,
+            linkHref;
+
+        /**
+         * Set state
+         */
+        if (personPin && personPin.exported) {
+          surveyStatus = 'private';
+        }
+        else if (!personDetails) {
+          surveyStatus = 'not-started';
+        }
+        else if (
+          personDetails.dob &&
+          personDetails.country &&
+          personDetails.orientation &&
+          personDetails.maritalStatus &&
+          personDetails.salary
+        ) {
+          surveyStatus = 'completed';
+
+          window.ONS.utils.removeFromList(peopleIdsToComplete, person.id);
+        }
+        else {
+          surveyStatus = 'in-progress';
+        }
+
+        /**
+         * Link routing
+         */
+        linkHref = surveyStatus === 'completed'
+          ? '../individual-details-summary/'
+          : '../individual-intro/';
+
+        if (personPin && personPin.pin) {
+          linkHref = '../individual-pin-security/?returnurl=' + linkHref +
+            '&person=' + person.id;
+        }
+        else {
+          linkHref += '?person=' + person.id;
+        }
+
+        linkHref += nextPageSurvey;
+
+        /**
+         * Manipulate DOM fragment
+         */
+        $nodeEl.attr('id', '');
+        $nodeEl.find('.js-person-name').html(person.fullName);
+        $nodeEl.find('.js-link').html(statusMap[surveyStatus].linkText);
+        $surveyStatus.html(statusMap[surveyStatus].label);
+
+        surveyStatus === 'private'
+          ? $nodeEl.find('.js-link').hide()
+          : $nodeEl.find('.js-link').attr('href',linkHref);
+
+        (surveyStatus === 'completed' || surveyStatus === 'private')
+          && $surveyStatus.addClass('completed');
+
+        $('#household-member-surveys').append($nodeEl);
+      });
+
+      if (peopleIdsToComplete.length === 0) {
+        $('.qa-btn-submit').attr('disabled', false);
+      }
+    }
+
+    function updateLinks () {
+      if (surveyType) {
+        $('.js-view-summary').attr('href', '../summary/?survey=' + surveyType);
+      }
+    }
+
+    $(updateIndividualSurveyList);
+    $(updateLinks);
+</script>
diff --git a/_prototypes/your-household-interview-led/summary.html b/_prototypes/your-household-interview-led/summary.html
index 38b80a852d..efaf1df28c 100644
--- a/_prototypes/your-household-interview-led/summary.html
+++ b/_prototypes/your-household-interview-led/summary.html
@@ -121,7 +121,7 @@ <h1 class="saturn">Are you sure you want to remove <span
     </li>
 </ul>
 
-<script src='/js/compiled/your-household-v8/bundle.js'></script>
+<script src='/js/compiled/your-household-interview-led/bundle.js'></script>
 
 <style>
     .list.list--records {
@@ -158,9 +158,7 @@ <h1 class="saturn">Are you sure you want to remove <span
 <script>
   var urlParams = new URLSearchParams(window.location.search),
     surveyType = urlParams.get('survey'),
-    nextPage = surveyType
-      ? '../relationships/?survey=' + surveyType
-      : '../relationships',
+    nextPage = '../accommodation-kind',
     altPage = surveyType && surveyType === 'lms' ? surveyType + '/' : '';
 
   function createMemberItem(member) {
@@ -262,15 +260,5 @@ <h1 class="saturn">Are you sure you want to remove <span
     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/who-else-to-add.html b/_prototypes/your-household-interview-led/who-else-to-add.html
index aae09631ad..1bdafbd89e 100644
--- a/_prototypes/your-household-interview-led/who-else-to-add.html
+++ b/_prototypes/your-household-interview-led/who-else-to-add.html
@@ -76,7 +76,7 @@
                             </fieldset>
 
                             <p class="u-mb-xl u-mt-m">
-                                <a class="mars"
+                                <a class="mars js-previous-link"
                                    href="../temp-types-living-away">Cancel and return to the previous question
                                 </a>
                             </p>
@@ -215,8 +215,6 @@ <h1 class="saturn">Are you sure you want to remove <span
         : '../does-anyone-else-live-here/';
     }*/
 
-
-
     /**
      * Routing
      */
@@ -233,16 +231,6 @@ <h1 class="saturn">Are you sure you want to remove <span
         window.location.reload();
       }
     }
-
-
-
-    /*if(parseInt(window.sessionStorage.getItem('number-of-people')) ===
-      membersTotal + 1) {
-      window.location.href = '../temp-types-living-away';
-    }
-    else {
-      window.location.reload();
-    }*/
   });
 
   $(function() {