Merge pull request #108 from bcgov/DIV-1142

DIV-1142: Create signing and filing page

eDivorce.pyproj

@@ -53,7 +53,6 @@
     <Content Include="edivorce\apps\core\static\js\vendor\moment.min.js" />
     <Content Include="edivorce\apps\core\static\js\vendor\spin.min.js" />
     <Content Include="edivorce\apps\core\static\svg\bc-logo.svg" />
-    <Content Include="edivorce\apps\core\static\svg\icon-certificate.svg" />
     <Content Include="edivorce\apps\core\templates\401.html" />
     <Content Include="edivorce\apps\core\templates\404.html" />
     <Content Include="edivorce\apps\core\templates\407.html" />

edivorce/apps/core/static/css/main.scss

@@ -1378,6 +1378,48 @@ textarea {
 		float: right;
 	}
 }
+
+.signing-filing {
+    .question-well {
+        margin-top: 15px;
+        margin-bottom: 30px;
+        padding-bottom: 0;
+        h3 {
+            font-size: 24px;
+        }
+    }
+    .form-inline {
+        display: -webkit-box;
+        display: -ms-flexbox;
+        display: flex;
+        -ms-flex-wrap: wrap;
+        flex-wrap: wrap;
+        align-items: center;
+        margin-bottom: 10px;
+        padding: 10px;
+        background: $color-grey-lighter;
+        border-radius: 5px;
+
+        label {
+            margin: 0 15px 0 5px;
+            text-align: right;
+        }
+
+        &:before {
+            display: table;
+            content: " ";
+        }
+
+        input {
+            margin-right: 5px;
+            -webkit-box-flex: 1;
+            -ms-flex: 1;
+            flex: 1;
+            width: 99%;
+            min-width: 200px;
+        }
+    }
+}
 /* Column Grid in flexbox */
 .row-flex {
     display: -webkit-box;
@@ -1925,6 +1967,13 @@ textarea {
 		color: $color-red;
 	}
 }
+
+.list-item-description {
+    padding-left: 20px;
+    margin-bottom: 25px;
+    margin-top: -10px;
+}
+
 /* Modals */
 .modal-dialog {
 	width: 780px;

edivorce/apps/core/static/js/ajax.js

@@ -14,7 +14,7 @@ var ajaxOnChange = function () {
         isValid = validateDate(el);
     }
 
-    if (el.is("#email_textbox")){
+    if (el.is(".email-textbox")){
         isValid = validateEmail(el);
     }
 

edivorce/apps/core/static/js/functions.js

@@ -337,6 +337,12 @@ var getValue = function(el, question){
     }
 };
 
+var isEmailValid = function(el) {
+    var value = el.val();
+    var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
+    return regex.test(value);
+}
+
 // check if email is in valid format
 var validateEmail = function(el){
 
@@ -345,9 +351,7 @@ var validateEmail = function(el){
         .find('span.help-block')
         .remove();
 
-    var value = el.val();
-    var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
-    if (regex.test(value)) {
+    if (!el.val() || isEmailValid(el)) {
         return true;
     } else {
         el.closest('.form-group')

edivorce/apps/core/static/js/main.js

@@ -44,6 +44,12 @@ $(function () {
         placement:'auto right'
     });
 
+    $('[data-toggle="tooltip-hover"]').tooltip({
+        container: 'body',
+        trigger: 'hover',
+        placement: 'auto right'
+    });
+
     $('textarea').autogrow({onInitialize: true});
 
     // All elements tagged with the following sum related data attributes
@@ -190,6 +196,16 @@ $(function () {
             }
         });
     });
+    $('[data-toggle=tooltip-hover]').hover(function (e) {
+        $('[data-toggle=tooltip]').each(function () {
+            // hide any open popovers when the anywhere else in the body is clicked
+            if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.tooltip').has(e.target).length === 0) {
+                if (!$(e.target).hasClass('keep-tooltip-open') && !$(this).hasClass('keep-tooltip-open')) {
+                    $(this).tooltip('hide');
+                }
+            }
+        });
+    });
 
     // when user click textbox beside radio button, check the associated radio button
     $(".other-textbox").on("click", function () {

edivorce/apps/core/static/js/signing-filing.js

@@ -1,8 +1,6 @@
 $(window).load(function () {
     function setSignSeparatelyDefaults() {
-        $("#sign-in-person-both").prop('checked', false);
-        $("#sign-virtual-both").prop('checked', false);
-        $("#sign-virtual-both").trigger('change');
+        $("#sign-in-person-both").prop('checked', true).trigger('change');
         if ($("input:radio[name='signing_location_you']:checked").length === 0) {
             $("#sign-in-person-you").prop('checked', true).trigger('change');
         }
@@ -12,10 +10,8 @@ $(window).load(function () {
     }
 
     function setSignTogetherDefaults() {
-        $("#sign-in-person-you").prop('checked', false);
-        $("#sign-virtual-you").prop('checked', false).trigger('change');
-        $("#sign-in-person-spouse").prop('checked', false);
-        $("#sign-virtual-spouse").prop('checked', false).trigger('change');
+        $("#sign-in-person-you").prop('checked', true).trigger('change');
+        $("#sign-in-person-spouse").prop('checked', true).trigger('change');
         if ($("input:radio[name='signing_location']:checked").length === 0) {
             $("#sign-in-person-both").prop('checked', true).trigger('change');
         }
@@ -29,7 +25,7 @@ $(window).load(function () {
                 setSignTogetherDefaults();
                 $("#signing-location-together").show();
                 $("#signing-location-separately").hide();
-            } else if ($("#sign-separately").prop('checked')) {
+            } else {
                 setSignSeparatelyDefaults();
                 $("#signing-location-together").hide();
                 $("#signing-location-separately").show();
@@ -44,21 +40,31 @@ $(window).load(function () {
     }
 
     function toggleSignVirtually() {
-        if ($("#sign-virtual-both").prop('checked') || $("#sign-virtual-you").prop('checked') || $("#sign-virtual-spouse").prop('checked')) {
+        var signVirtuallyBoth = $("#sign-virtual-both").prop('checked');
+        var signVirtuallyYou = $("#sign-virtual-you").prop('checked');
+        var signVirtuallySpouse = $("#sign-virtual-spouse").prop('checked');
+
+        var needEmailYou = (signVirtuallyBoth || signVirtuallyYou) && $("#existing-email-you").val() === '';
+        var needEmailSpouse = signVirtuallySpouse && $("#existing-email-spouse").val() === '';
+
+        if (needEmailYou || needEmailSpouse) {
             $("#sign-virtually").show();
         } else {
             $("#sign-virtually").hide();
         }
-        if ($("#sign-virtual-both").prop('checked') || $("#sign-virtual-you").prop('checked')) {
+        if (needEmailYou) {
             $("#email-you").show();
         } else {
             $("#email-you").hide();
+            $("#email-you-input").removeClass('error');
         }
-        if ($("#sign-virtual-spouse").prop('checked')) {
+        if (needEmailSpouse) {
             $("#email-spouse").show();
         } else {
             $("#email-spouse").hide();
+            $("#email-spouse-input").removeClass('error');
         }
+        $('#unfilled-email-alert').hide();
     }
 
     function toggleFileInPerson() {
@@ -71,17 +77,6 @@ $(window).load(function () {
         }
     }
 
-    function selectDefaults() {
-        if ($("input:radio[name='how_to_sign']:checked").length === 0) {
-            $("#sign-together").prop('checked', true).trigger('change');
-        }
-        if ($("input:radio[name='how_to_file']:checked").length === 0) {
-            $("#file-online").prop('checked', true).trigger('change');
-        }
-    }
-
-    selectDefaults()
-
     $("#sign-separately, #sign-together, #file-online, #file-in-person").change(toggleSigningLocation);
     $("#sign-virtual-both, " +
         "#sign-in-person-both, " +
@@ -91,7 +86,35 @@ $(window).load(function () {
         "#sign-virtual-spouse").change(toggleSignVirtually);
     $("#file-in-person, #file-online").change(toggleFileInPerson);
 
+    function setDefaults() {
+        if ($("input:radio[name='how_to_sign']:checked").length === 0) {
+            $("#sign-together").prop('checked', true).trigger('change');
+        }
+        if ($("input:radio[name='how_to_file']:checked").length === 0) {
+            $("#file-online").prop('checked', true).trigger('change');
+        }
+    }
+
+    setDefaults()
     toggleSigningLocation();
     toggleSignVirtually();
     toggleFileInPerson();
+
+    $('#check-email-filled').on('click', function (e) {
+        var yourEmailInput = $('#email-you-input');
+        var yourEmailError = yourEmailInput.is(":visible") && !(yourEmailInput.val() && isEmailValid(yourEmailInput));
+        var spouseEmailInput = $('#email-spouse-input');
+        var spouseEmailError = spouseEmailInput.is(":visible") && !(spouseEmailInput.val() && isEmailValid(spouseEmailInput));
+        if (yourEmailError || spouseEmailError) {
+            $('#unfilled-email-alert').show();
+            $('#error-email-you').toggle(yourEmailError)
+            $('#error-email-spouse').toggle(spouseEmailError)
+            yourEmailInput.toggleClass('error', yourEmailError);
+            spouseEmailInput.toggleClass('error', spouseEmailError);
+            e.preventDefault();
+        } else {
+            $('#unfilled-email-alert').hide();
+        }
+    });
+
 });

edivorce/apps/core/static/svg/icon-certificate.svg

@@ -1,7 +0,0 @@
-<svg
-xmlns="http://www.w3.org/2000/svg"
-xmlns:xlink="http://www.w3.org/1999/xlink"
-width="19px" height="14px">
-<path fill-rule="evenodd"  opacity="0.851" fill="rgb(255, 255, 255)"
-d="M16.621,9.618 C16.621,9.454 16.491,9.326 16.324,9.326 L3.217,9.326 C3.050,9.326 2.920,9.454 2.920,9.618 L2.920,10.202 C2.920,10.366 3.050,10.493 3.217,10.493 L16.324,10.493 C16.491,10.493 16.621,10.366 16.621,10.202 L16.621,9.618 ZM13.057,7.284 C13.057,7.120 12.927,6.992 12.760,6.992 L3.217,6.992 C3.050,6.992 2.920,7.120 2.920,7.284 L2.920,7.867 C2.920,8.032 3.050,8.159 3.217,8.159 L12.760,8.159 C12.927,8.159 13.057,8.032 13.057,7.867 L13.057,7.284 ZM16.621,7.284 C16.621,7.120 16.491,6.992 16.324,6.992 L14.542,6.992 C14.375,6.992 14.245,7.120 14.245,7.284 L14.245,7.867 C14.245,8.032 14.375,8.159 14.542,8.159 L16.324,8.159 C16.491,8.159 16.621,8.032 16.621,7.867 L16.621,7.284 ZM16.621,4.950 C16.621,4.786 16.491,4.658 16.324,4.658 L3.217,4.658 C3.050,4.658 2.920,4.786 2.920,4.950 L2.920,5.533 C2.920,5.697 3.050,5.825 3.217,5.825 L16.324,5.825 C16.491,5.825 16.621,5.697 16.621,5.533 L16.621,4.950 ZM17.808,12.536 C17.808,12.691 17.669,12.827 17.511,12.827 L1.475,12.827 C1.317,12.827 1.178,12.691 1.178,12.536 L1.178,2.324 L17.808,2.324 L17.808,12.536 ZM18.996,1.449 C18.996,0.646 18.328,-0.010 17.511,-0.010 L1.475,-0.010 C0.658,-0.010 -0.010,0.646 -0.010,1.449 L-0.010,12.536 C-0.010,13.338 0.658,13.994 1.475,13.994 L17.511,13.994 C18.328,13.994 18.996,13.338 18.996,12.536 L18.996,1.449 Z"/>
-</svg>

edivorce/apps/core/templates/base.html

@@ -114,14 +114,14 @@
                 </div>
             </div>
 
-{#            {% block sidebar %}#}
-{#            <div class="col-flex more_information-column">#}
-{#                <a href="#" class="more_information-close"><i class="fa fa-times" aria-hidden="true"></i></a>#}
-{#                <h2>More information</h2>#}
-{#                {% block sidebarText %}#}
-{#                {% endblock %}#}
-{#            </div>#}
-{#            {% endblock %}#}
+            {% block sidebar %}
+            <div class="col-flex more_information-column">
+                <a href="#" class="more_information-close"><i class="fa fa-times" aria-hidden="true"></i></a>
+                <h2>More information</h2>
+                {% block sidebarText %}
+                {% endblock %}
+            </div>
+            {% endblock %}
 
         </div>
         {% block intro-footer %}

edivorce/apps/core/templates/dashboard/sign_file_options.html

@@ -5,122 +5,159 @@
 
 {% block progress %}{% include "partials/dashnav.html" with active_page=active_page %}{% endblock %}
 
+{% block container_col %}signing-filing{% endblock %}
+
 {% block content %}
 <h1>Signing and Filing Options</h1>
 <h3>Signing Options</h3>
 <p>
-    To complete your application for divorce, you must swear/affirm (?) your affidavit(s) (?). The affidavit(s) must be sworn/affirmed by both you and
-    your spouse. You have a choice on how you will both sign.
+    To complete your application for divorce, you must
+    {% include "partials/tooltips/swear_affirm.html" with text="swear/affirm and sign" %}
+    your {% include "partials/tooltips/affidavit.html" %}. The affidavit(s) must be sworn/affirmed and
+    signed by both you and your spouse. You have a choice on how you will both swear/affirm and sign.
 </p>
 <div class="question-well">
-    <h3>Select how you would like to swear/affirm (?) your affidavit(s) (?):</h3>
+    <h3>Select how you would like to {% include "partials/tooltips/swear_affirm.html" %}
+        your {% include "partials/tooltips/affidavit.html" %}:</h3>
     <div class="radio"><label>{% input_field type="radio" name="how_to_sign" value="Together" id="sign-together" %}
-        We will sign Together using the same affidavit(s)</label></div>
-    <p>You must both go together to the registry or to a commissioner for taking affidavits to sign the affidavit(s).</p>
-    <p>There are strict rules for when you can swear or affirm your Affidavit — Desk Order Divorce (Form 38). You must do it:</p>
-    <ul>
-        <li>At the same time as you are filing your Notice of Joint Family Claim (You can file the Notice and swear your affidavit at the registry
-            (or virtually with the registry) at the same time.)
-        </li>
-        OR
-        <li>After you've filed your Notice of Joint Family Claim. (You can file the Notice first, and then come back into this tool or go to the
-            registry to file your affidavit(s).)
-        </li>
-    </ul>
+        We will swear/affirm and sign Together using the same affidavit(s)</label></div>
+    <div class="list-item-description">
+        <p>You must both go together to the registry or to a commissioner for taking affidavits to swear/affirm and sign the affidavit(s). This option
+            costs less (less filing fees) and is typically faster and easier for both of you.</p>
+        <p>There are strict rules for when you can swear/affirm and sign your Affidavit — Desk Order Divorce (Form 38). You must do it:</p>
+        <ul>
+            <li>At the same time as you are filing your Notice of Joint Family Claim (You can file the Notice and swear/affirm and sign your affidavit at
+                the registry (or virtually with the registry) at the same time.)</li>
+            <p style="margin-top: 20px">OR</p>
+            <li>After you've filed your Notice of Joint Family Claim. (You can file the Notice first, and then come back into this tool or go to the
+                registry to file your affidavit(s).)
+            </li>
+        </ul>
+    </div>
     <div class="radio"><label>{% input_field type="radio" name="how_to_sign" value="Separately" id="sign-separately" %}
-        We will sign Separately on our own affidavit(s)</label></div>
-    <p>You can each swear/affirm your own version of the affidavit (you can go separately to the registry or a commissioner for taking affidavits
-        to sign the affidavit(s)).</p>
-    <p>There are strict rules for when you can swear or affirm your Affidavit — Desk Order Divorce (Form 38). You must:</p>
-    <ul>
-        <li>Swear/affirm one person’s affidavit(s) at the same time as you are filing your Notice of Joint Family Claim (You can file the Notice
-            and swear your affidavit at the registry (or virtually with the registry) at the same time.) This would allow one party to
-            swear/affirm their affidavit(s) before the Notice has been filed.
-        </li>
-        OR
-        <li>Swear/affirm both parties’ affidavit(s) after you've filed your Notice of Joint Family Claim. (You can file the Notice first, and then
-            come back into this tool or go to the registry to file your affidavit(s).)
-        </li>
-    </ul>
+        We will swear/affirm and sign Separately our own affidavit(s)</label></div>
+    <div class="list-item-description">
+        <p>You can each swear/affirm and sign your own version of the affidavit (you can go separately to the registry or a commissioner for taking
+            affidavits to swear/affirm and sign the affidavit(s)).</p>
+        <p>There are strict rules for when you can swear/affirm and sign your Affidavit — Desk Order Divorce (Form 38). You must:</p>
+        <ul>
+            <li>Swear/affirm and sign one person’s affidavit(s) at the same time as you are filing your Notice of Joint Family Claim (You can file the
+                Notice and swear your affidavit at the registry (or virtually with the registry) at the same time.) This would allow one party to
+                swear/affirm and sign their affidavit(s) before the Notice has been filed.</li>
+            <p style="margin-top: 20px">OR</p>
+            <li>Swear/affirm and sign both parties’ affidavit(s) after you've filed your Notice of Joint Family Claim. (You can file the Notice first,
+                and then come back into this tool or go to the registry to file your affidavit(s).)</li>
+        </ul>
+    </div>
 </div>
 <h3>Filing Options</h3>
-{% if where_were_you_married_country == 'Canada' %}
+{% if where_were_you_married_country == 'Canada' %}  {# Eventually add not logged in with BC Services card check here #}
     <p>You can file (?) your application for divorce in different ways.</p>
 {% endif %}
 <p>To file (?) your documents, you will need:</p>
+
 <ul>
     <li>a printer (or a print service)</li>
     <li>payment for filing fees (see More Information sidebar for more information)</li>
     <li>a copy of your marriage certificate (from any jurisdiction)</li>
-    <li>Registration of Divorce Proceedings form</li>
+    <li><span class="tooltip-link" data-toggle="tooltip" data-placement="right"
+              data-html="true"
+              title="
+                <b>Registration of Joint Divorce Proceedings (JUS280)</b>
+                <br /><br />
+                This form is for a central divorce registry in Ottawa. They use the form to check to make sure there is no other divorce proceeding pending in Canada. They also keep track of all divorces in Canada.
+                <br />- Does not require signatures.">
+          Registration of Divorce Proceedings<i class="fa fa-question-circle" aria-hidden="true"></i></span> form</li>
     <li>Both you and your spouse to sign some of the same documents</li>
     <li>You will need to have your affidavit(s) sworn/affirmed (see above)</li>
     <li>Photo ID</li>
 </ul>
-{% if where_were_you_married_country == 'Canada' %}
-    <div class="question-well">
+    {% if where_were_you_married_country == 'Canada' %}  {# Eventually add not logged in with BC Services card check here #}
+        <div class="question-well">
         <h3>Select how you would like to file (?) your documents:</h3>
         <div class="radio"><label>{% input_field type="radio" name="how_to_file" value="Online" id="file-online" %}
             We will file Online through this tool</label></div>
-        <p>To file online you will also need:</p>
-        <ul>
-            <li>a scanner or mobile phone with a camera capable of scanning your documents</li>
-            <li>a credit card</li>
-            <li>marriage certificate must be from a Canadian jurisdiction only</li>
-        </ul>
+        <div class="list-item-description">
+            <p>To file online you will also need:</p>
+            <ul>
+                <li>a scanner or mobile phone with a camera capable of scanning your documents</li>
+                <li>a credit card</li>
+                <li>your marriage certificate must be from a Canadian jurisdiction only</li>
+            </ul>
+        </div>
         <div class="radio"><label>{% input_field type="radio" name="how_to_file" value="In-person" id="file-in-person" %}
             We will file In-person at the court registry (you can also mail the documents to the court registry)</label></div>
-        <p>To file in-person you need only the items list above.</p>
+        <div class="list-item-description">
+            <p>To file in-person you need only the items list above under Filing Options.</p>
+        </div>
     </div>
 {% else %}
     <div class="question-well">
         <h3>File your documents in-person at the court registry (you can also mail the documents to the court registry)</h3>
         <p>Based on your previous selections, you must file In-person.</p>
-        <p>To file in-person you need only the items list above.</p>
+        <p>To file in-person you need only the items listed under Filing Options.</p>
     </div>
 {% endif %}
-<h3 id="signing-location" hidden>Signing Location</h3>
+<h3 id="signing-location" hidden>Swear/Affirm and Signing Location</h3>
 <div class="question-well" id="signing-location-together" hidden>
-    <h3>Select where you would like to swear/affirm (?) your affidavit(s):</h3>
+    <h3>Select where you would like to {% include "partials/tooltips/swear_affirm.html" %} your affidavit(s):</h3>
     <div class="radio"><label>{% input_field type="radio" name="signing_location" value="In-person" id="sign-in-person-both" %}
-        We will sign with a lawyer, notary or other commissioner (?) for taking affidavits
+        We will sign with a lawyer, notary or other {% include "partials/tooltips/commissioner.html" with hover=True %} for taking affidavits
     </label></div>
     <div class="radio"><label>{% input_field type="radio" name="signing_location" value="Virtual" id="sign-virtual-both" %}
-        We will sign in a virtual session (?) with the court registry - You will require a computer with internet access and a webcam
-    </label></div>
+        We will sign in a {% include "partials/tooltips/virtual_session.html" with hover=True %} with the court registry</label> - You will require a computer with internet access and a webcam
+    </div>
 </div>
 <div class="question-well" id="signing-location-separately" hidden>
-    <h3>Select where you would like to swear/affirm (?) your affidavit(s):</h3>
+    <h3>Select where you would like to {% include "partials/tooltips/swear_affirm.html" %} your affidavit(s):</h3>
     <div class="radio"><label>{% input_field type="radio" name="signing_location_you" value="In-person" id="sign-in-person-you" %}
-        I will sign with a lawyer, notary or other commissioner (?) for taking affidavits
+        I will sign with a lawyer, notary or other {% include "partials/tooltips/commissioner.html" with hover=True %} for taking affidavits
     </label></div>
     <div class="radio"><label>{% input_field type="radio" name="signing_location_you" value="Virtual" id="sign-virtual-you" %}
-        I will sign in a virtual session (?) with the court registry - Requires a computer with internet access and a webcam
-    </label></div>
-    <h3>Select where your spouse would like to swear/affirm (?) your affidavit(s):</h3>
+        I will sign in a {% include "partials/tooltips/virtual_session.html" with hover=True %} with the court registry</label>
+    </div>
+    <div class="list-item-description">
+        - Requires a computer with internet access and a webcam
+    </div>
+    <h3>Select where your spouse would like to {% include "partials/tooltips/swear_affirm.html" %} your affidavit(s):</h3>
     <div class="radio"><label>{% input_field type="radio" name="signing_location_spouse" value="In-person" id="sign-in-person-spouse" %}
-        My spouse will sign with a lawyer, notary or other commissioner (?) for taking affidavits
+        My spouse will sign with a lawyer, notary or other {% include "partials/tooltips/commissioner.html" with hover=True %} for taking affidavits
     </label></div>
     <div class="radio"><label>{% input_field type="radio" name="signing_location_spouse" value="Virtual" id="sign-virtual-spouse" %}
-        My spouse will sign in a virtual session (?) with the court registry - Requires a computer with internet access and a webcam
-    </label></div>
+        My spouse will sign in a {% include "partials/tooltips/virtual_session.html" with hover=True %} with the court registry</label>
+    </div>
+    <div class="list-item-description">
+        - Requires a computer with internet access and a webcam
+    </div>
 </div>
 
 <div id="sign-virtually" hidden>
     <h3>Signing Contact(s)</h3>
-    <p>An e-mail address is required to setup a virtual session (?). What is the best e-mail address to contact you at in order to setup the virtual
+    <p>An e-mail address is required to setup a {% include "partials/tooltips/virtual_session.html" %}. What is the best e-mail address to contact you at in order to setup the virtual
         session?</p>
-    <div id="email-you">
-        E-mail Address for You: {% input_field type="text" name="email_you" id="email_you" class="input-inline form-control" %}
+    <input type="text" id="existing-email-you" value="{{ address_to_send_official_document_email_you }}" hidden>
+    <input type="text" id="existing-email-spouse" value="{{ address_to_send_official_document_email_spouse }}" hidden>
+    <div id="email-you" class="form-inline">
+        <label>E-mail Address for You: </label>{% input_field type="text" name="email_you" id="email-you-input" class="input-inline form-control" %}
     </div>
-    <div id="email-spouse">
-        E-mail Address for Your Spouse: {% input_field type="text" name="email_spouse" id="email_spouse" class="input-inline form-control" %}
+    <div id="email-spouse" class="form-inline">
+        <label>E-mail Address for Your Spouse: </label>{% input_field type="text" name="email_spouse" id="email-spouse-input" class="input-inline form-control" %}
     </div>
 </div>
 <div class="question-well" id="sign-in-person" hidden>
-    <p>Based on availability and previous selections you and your spouse must sign with a lawyer, notary or other commissioner (?) for taking affidavits.</p>
+    <p>To file in-person, you and your spouse must sign your affidavit(s) with the court registry, a lawyer, notary or other {% include "partials/tooltips/commissioner.html" %} for
+        taking affidavits.</p>
 </div>
 
+<div class="information-message bg-danger add-top-margin" id="unfilled-email-alert" hidden>
+    <p>
+        You must provide a valid email for the following field(s) before you can continue:
+    </p>
+    <ul>
+        <li id="error-email-you">E-mail Address for You</li>
+        <li id="error-email-spouse">E-mail Address for Your Spouse</li>
+    </ul>
+</div>
 {% endblock %}
 
 {% block backToDashboard %}
@@ -129,10 +166,22 @@
 
 {% block formBack %}{% url 'overview' %}{% endblock %}
 {% block formNext %}{% url 'dashboard_nav' 'print_form' %}{% endblock %}
+{% block nextButtonAttribute %}id="check-email-filled" data-proceed="false" data-show_alert="false"{% endblock %}
 
-{% block sidebarNav %}
-<!-- no sidebar -->
-{% endblock %}
 {% block sidebarText %}
-    {% include "dashboard/partials/sidebar_help.html" %}
+    <h3>What is the process to file for divorce?</h3>
+    <p>Ultimately you need to file (submit) your divorce with the Court Registry.
+    Assuming everything goes well, your divorce will be reviewed by the
+    Court Registry and passed along to a judge for approval.</p>
+    <p>This tool will create a number of the key forms required for filing automatically.
+    A few of these forms will need to be signed by you.
+    At least one affidavit will require signing / swearing in front of a commissioner
+    before being filed. There are also additional forms that are not generated by this tool
+    that you'll need to complete.
+    </p>
+    <p>The remaining steps in this tool will walk you through the different forms you'll need
+    and what to do with each of them.
+    These steps will differ based on how you select to sign and file your documentation on this page.</p>
+    <p>Once you've got your paperwork together, completed, signed and sworn, you can file it with
+    the Court Registry.</p>
 {% endblock %}

edivorce/apps/core/templates/partials/dashnav.html

@@ -3,11 +3,11 @@
     <h4>Application Stages</h4>
 
     <a href="{% url 'overview' %}" class="progress-question {% if active_page == 'overview' %} active {% endif %}">
-        <span class="progress-icon"><i class="fa fa-file-text-o" aria-hidden="true"></i></span>
+        <span class="progress-icon"><i class="fa fa-check-square-o" aria-hidden="true"></i></span>
         <span class="progress-content">Divorce Questionnaire</span>
     </a>
     <a href="{% url 'dashboard_nav' 'sign_file_options' %}" class="progress-question {% if active_page == 'sign_file_options' %} active {% endif %}">
-        <span class="progress-icon"><i class="fa fa-file-text-o" aria-hidden="true"></i></span>
+        <span class="progress-icon"><i class="fa fa-list-ul" aria-hidden="true"></i></span>
         <span class="progress-content">Signing & Filing Options</span>
     </a>
     <a href="{% url 'dashboard_nav' 'print_form' %}" class="progress-question {% if active_page == 'print_form' %} active {% endif %}">
@@ -16,28 +16,28 @@
     </a>
 {% if how_to_file == 'Online' %}
     <a href="{% url 'dashboard_nav' 'initial_filing' %}" class="progress-question {% if active_page == 'initial_filing' %} active {% endif %}">
-        <span class="progress-icon"><i class="fa fa-folder" aria-hidden="true"></i></span>
+        <span class="progress-icon"><i class="fa fa-files-o" aria-hidden="true"></i></span>
         <span class="progress-content">Initial Filing</span>
     </a>
     <a href="{% url 'dashboard_nav' 'wait_for_number' %}" class="progress-question {% if active_page == 'wait_for_number' %} active {% endif %}">
-        <span class="progress-icon"><i class="fa fa-hourglass-half" aria-hidden="true"></i></span>
+        <span class="progress-icon"><i class="fa fa-clock-o" aria-hidden="true"></i></span>
         <span class="progress-content">Wait for Court Filing #</span>
     </a>
 {% endif %}
     <a href="{% url 'dashboard_nav' 'swear_forms' %}" class="progress-question {% if active_page == 'swear_forms' %} active {% endif %}">
-        <span class="progress-icon"><i class="fa fa-university" aria-hidden="true"></i></span>
+        <span class="progress-icon"><i class="fa fa-pencil" aria-hidden="true"></i></span>
         <span class="progress-content">Swear Forms</span>
     </a>
     <a href="{% url 'dashboard_nav' 'final_filing' %}" class="progress-question {% if active_page == 'final_filing' %} active {% endif %}">
-        <span class="progress-icon"><i class="fa fa-folder-open" aria-hidden="true"></i></span>
+        <span class="progress-icon"><i class="fa fa-folder-open-o" aria-hidden="true"></i></span>
         <span class="progress-content">Final Filing</span>
     </a>
     <a href="{% url 'dashboard_nav' 'next_steps' %}" class="progress-question {% if active_page == 'next_steps' %} active {% endif %}">
-        <span class="progress-icon"><i class="fa fa-university" aria-hidden="true"></i></span>
+        <span class="progress-icon"><i class="fa fa-long-arrow-right" aria-hidden="true"></i></span>
         <span class="progress-content">Next Steps</span>
     </a>
     <a href="{% url 'dashboard_nav' 'order_certificate' %}" class="progress-question {% if active_page == 'order_certificate' %} active {% endif %}">
-        <span class="progress-icon"><img src="{% static 'svg/icon-certificate.svg' %}" /></span>
+        <span class="progress-icon"><i class="fa fa-list-alt" aria-hidden="true"></i></span>
         <span class="progress-content">Order a Certificate of Divorce</span>
     </a>
 </div>

edivorce/apps/core/templates/partials/tooltips/affidavit.html

@@ -0,0 +1,8 @@
+<span class="tooltip-link" data-toggle="tooltip" data-placement="right"
+      data-html="true"
+      title="
+                <b>Affidavit - Desk Order Divorce Form (F38)</b>
+                <br /><br />
+                This form sets out all the facts of your marriage and separation for the court and gives information about parenting time if you have children.
+                It requires swearing/affirming and signatures by both you and your spouse in front of a commissioner.">
+          affidavit(s)<i class="fa fa-question-circle" aria-hidden="true"></i></span>

edivorce/apps/core/templates/partials/tooltips/commissioner.html

@@ -0,0 +1,12 @@
+<span class="tooltip-link" data-toggle="{% if hover %}tooltip-hover{% else %}tooltip{% endif %}" data-placement="right"
+      data-html="true"
+      title="
+                <b>Commissioner</b>
+                <br /><br />
+                A Commissioner for Taking Affidavits is a person appointed or designated under the Evidence Act to administer oaths and affirmations
+                and to take affidavits and declarations. A person may be eligible for appointment as a Commissioner for Taking Affidavits if their
+                employment, or work with a volunteer organization, involves administering oaths or affirmations, or taking affidavits or statutory
+                declarations, as permitted, authorized or required by law. Lawyers and notaries public are always commissioners for taking affidavits,
+                as are family justice counsellors and many court registry staff. There is also usually a commissioner for taking affidavits at each
+                Service BC office throughout the province.">
+          commissioner<i class="fa fa-question-circle" aria-hidden="true"></i></span>

edivorce/apps/core/templates/partials/tooltips/swear_affirm.html

@@ -0,0 +1,14 @@
+<span class="tooltip-link" data-toggle="tooltip" data-placement="right"
+      data-html="true"
+      title="
+                <b>Swear/Affirm</b>
+                <br /><br />
+                An &quot;affidavit&quot; is a written document that contains facts that you must swear under oath (usually on a Bible or other religious book) or affirm
+        (non-religious promise) to be true. After you swear or affirm, the affidavit is evidence of the facts it sets out, just as if you took the
+        stand in a courtroom to provide those facts.
+        <br/>
+        To swear or affirm an affidavit, you must meet with a commissioner for taking oaths. The
+        commissioner (often a lawyer, notary public or registry clerk) will check your photo id to make sure you are who you say you are, ask you if
+        you understand the contents of your affidavit, then ask you to swear or affirm that the contents are true. The commissioner will then watch
+        you sign the document before signing it themselves.">
+    {% if text %}{{ text }}{% else %}swear/affirm{% endif %}<i class="fa fa-question-circle" aria-hidden="true"></i></span>

edivorce/apps/core/templates/partials/tooltips/virtual_session.html

@@ -0,0 +1,12 @@
+<span class="tooltip-link" data-toggle="{% if hover %}tooltip-hover{% else %}tooltip{% endif %}" data-placement="right"
+      data-html="true"
+      title="
+                <b>Virtual Session</b>
+                <br /><br />
+                When you select Virtual Session you will be contacted via email by the court registry to setup an online
+                signing of your affidavit(s). Note that you will require a smart phone with a camera that runs iOS
+                version X or Android version Y or a computer with a camera running Windows or MacOS. During the session
+                both you and the court registry clerk will sign your forms separately and then upload them back in this
+                tool. When you choose this option you will also need to scan and upload the unsigned affidavit(s) to
+                this site before the virtual session.">
+          virtual session<i class="fa fa-question-circle" aria-hidden="true"></i></span>

edivorce/apps/core/templates/question/10_other_questions.html

@@ -41,7 +41,7 @@
         {% input_field type="text" name="address_to_send_official_document_fax_you" class="form-block input-wide response-textbox" %}
         <div class="form-group">
         <p>Email Address {% include 'partials/optional.html' with inline=True %}</p>
-        {% input_field type="text" id="email_textbox" name="address_to_send_official_document_email_you" class="form-block input-wide response-textbox form-control" %}
+        {% input_field type="text" name="address_to_send_official_document_email_you" class="form-block input-wide response-textbox form-control email-textbox" %}
         </div>
     </div>
 </div>
@@ -76,7 +76,7 @@
         {% input_field type="text" name="address_to_send_official_document_fax_spouse" class="form-block input-wide response-textbox" %}
         <div class="form-group">
         <p>Email Address {% include 'partials/optional.html' with inline=True %}</p>
-        {% input_field type="text" id="email_textbox" name="address_to_send_official_document_email_spouse" class="form-block input-wide response-textbox form-control" %}
+        {% input_field type="text" name="address_to_send_official_document_email_spouse" class="form-block input-wide response-textbox form-control email-textbox" %}
         </div>
     </div>
 </div>