Merge master into DIV-997

edivorce/apps/core/management/commands/npm_build.py

@@ -0,0 +1,11 @@
+import os
+
+from django.contrib.staticfiles.management.commands.runserver import (
+    Command as NpmBuildCommand,
+)
+
+class Command(NpmBuildCommand):
+
+    def run(self, **options):
+        os.system("npm --prefix /opt/app-root/src/vue install /opt/app-root/src/vue --loglevel info")
+        os.system("npm --prefix /opt/app-root/src/vue run build")        

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

@@ -804,6 +804,7 @@ fieldset[disabled] .btn-radio:hover {
 		outline: none;
 	}
 
+
 	.btn-radio-long {
 		width: auto;
 		white-space: normal;

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

@@ -341,8 +341,13 @@ var getValue = function(el, question){
             }
         });
         return JSON.stringify(value);
-    }
-    else{
+    } else if (el.is("input[type=radio]")) {
+        if (el.prop('checked')) {
+            return el.val();
+        } else {
+            return '';
+        }
+    } else {
         return el.val();
     }
 };

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

@@ -0,0 +1,97 @@
+$(window).load(function () {
+    function setSignSeparatelyDefaults() {
+        $("#sign-in-person-both").prop('checked', false);
+        $("#sign-virtual-both").prop('checked', false);
+        $("#sign-virtual-both").trigger('change');
+        if ($("input:radio[name='signing_location_you']:checked").length === 0) {
+            $("#sign-in-person-you").prop('checked', true).trigger('change');
+        }
+        if ($("input:radio[name='signing_location_spouse']:checked").length === 0) {
+            $("#sign-in-person-spouse").prop('checked', true).trigger('change');
+        }
+    }
+
+    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');
+        if ($("input:radio[name='signing_location']:checked").length === 0) {
+            $("#sign-in-person-both").prop('checked', true).trigger('change');
+        }
+    }
+
+    function toggleSigningLocation() {
+        if ($("#file-online").prop('checked')) {
+            $("#signing-location").show();
+
+            if ($("#sign-together").prop('checked')) {
+                setSignTogetherDefaults();
+                $("#signing-location-together").show();
+                $("#signing-location-separately").hide();
+            } else if ($("#sign-separately").prop('checked')) {
+                setSignSeparatelyDefaults();
+                $("#signing-location-together").hide();
+                $("#signing-location-separately").show();
+            }
+        } else {
+            $("#signing-location").hide();
+            $("#signing-location-together").hide();
+            $("#signing-location-separately").hide();
+            setSignTogetherDefaults();
+            setSignSeparatelyDefaults();
+        }
+    }
+
+    function toggleSignVirtually() {
+        if ($("#sign-virtual-both").prop('checked') || $("#sign-virtual-you").prop('checked') || $("#sign-virtual-spouse").prop('checked')) {
+            $("#sign-virtually").show();
+        } else {
+            $("#sign-virtually").hide();
+        }
+        if ($("#sign-virtual-both").prop('checked') || $("#sign-virtual-you").prop('checked')) {
+            $("#email-you").show();
+        } else {
+            $("#email-you").hide();
+        }
+        if ($("#sign-virtual-spouse").prop('checked')) {
+            $("#email-spouse").show();
+        } else {
+            $("#email-spouse").hide();
+        }
+    }
+
+    function toggleFileInPerson() {
+        if ($("#file-in-person").prop('checked')) {
+            $("#sign-in-person").show();
+            $("#signing-location").hide();
+        } else if ($("#file-online").prop('checked')) {
+            $("#sign-in-person").hide();
+            $("#signing-location").show();
+        }
+    }
+
+    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, " +
+        "#sign-virtual-you, " +
+        "#sign-in-person-you, " +
+        "#sign-in-person-spouse, " +
+        "#sign-virtual-spouse").change(toggleSignVirtually);
+    $("#file-in-person, #file-online").change(toggleFileInPerson);
+
+    toggleSigningLocation();
+    toggleSignVirtually();
+    toggleFileInPerson();
+});

edivorce/apps/core/static/js/vendor/autogrow.js

@@ -1,4 +1,4 @@
-;(function($){    
+;(function($){
     //pass in just the context as a $(obj) or a settings JS object
     $.fn.autogrow = function(opts) {
         var that = $(this).css({overflow: 'hidden', resize: 'none'}) //prevent scrollies
@@ -20,7 +20,7 @@
             //if the element is "invisible", we get an incorrect height value
             //to get correct value, clone and append to the body. 
             if (elem.is(':visible') || parseInt(elem.css('height'), 10) > 0) {
-                min = parseInt(elem.css('height'), 75) || elem.innerHeight();
+                min = parseInt(elem.css('height'), 10) || elem.innerHeight();
             } else {
                 clone = elem.clone()
                     .addClass(opts.cloneClass)
@@ -35,11 +35,12 @@
                 min = clone.innerHeight();
                 clone.remove();
             }
+            min = Math.max(min, 75);
             if (opts.fixMinHeight) {
                 elem.data('autogrow-start-height', min); //set min height
             }
             elem.css('height', min);
-            
+
             if (opts.onInitialize && elem.length) {
                 resize.call(elem[0]);
             }
@@ -47,7 +48,7 @@
         opts.context
             .on('keyup paste', selector, resize)
         ;
-    
+
         function resize (e){
             var box = $(this)
                 , oldHeight = box.innerHeight()
@@ -63,7 +64,7 @@
                     box.innerHeight(newHeight);
                     notifyGrown();
                 }
-                
+
             } else if (!e || e.which == 8 || e.which == 46 || (e.ctrlKey && e.which == 88)) { //user is deleting, backspacing, or cutting
                 if (oldHeight > minHeight) { //shrink!
                     //this cloning part is not particularly necessary. however, it helps with animation
@@ -75,19 +76,19 @@
                         //add clone class for extra css rules
                         .addClass(opts.cloneClass)
                         //make "invisible", remove height restriction potentially imposed by existing CSS
-                        .css({position: 'absolute', zIndex:-10, height: ''}) 
+                        .css({position: 'absolute', zIndex:-10, height: ''})
                         //populate with content for consistent measuring
-                        .val(box.val()) 
+                        .val(box.val())
                     ;
                     box.after(clone); //append as close to the box as possible for best CSS matching for clone
                     do { //reduce height until they don't match
                         newHeight = clone[0].scrollHeight - 1;
                         clone.innerHeight(newHeight);
                     } while (newHeight === clone[0].scrollHeight);
-                    newHeight++; //adding one back eliminates a wiggle on deletion 
+                    newHeight++; //adding one back eliminates a wiggle on deletion
                     clone.remove();
                     box.focus(); // Fix issue with Chrome losing focus from the textarea.
-                    
+
                     //if user selects all and deletes or holds down delete til beginning
                     //user could get here and shrink whole box
                     newHeight < minHeight && (newHeight = minHeight);
@@ -99,11 +100,11 @@
                             notifyShrunk();
                         }
                     }
-                    
+
                 } else { //just set to the minHeight
                     box.innerHeight(minHeight);
                 }
-            } 
+            }
         }
 
         // Trigger event to indicate a textarea has grown.

edivorce/apps/core/templates/base.html

@@ -18,6 +18,8 @@
         <link rel="stylesheet" type="text/css" href="{% static "css/font-awesome.min.css" %}">
         <link rel="stylesheet" type="text/css" href="{% sass_src "css/main.scss" %}" />
         {% endcompress %}
+        {% block extra_css %}
+        {% endblock %}
         {% include 'partials/gtm_head.html' %}
 
         <!--[if lt IE 9]>
@@ -116,14 +118,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>
 
@@ -215,6 +217,9 @@
         <script type="text/javascript" src="{% static 'js/functions.js' %}"></script>
         <script type="text/javascript" src="{% static 'js/ajax.js' %}"></script>
         <script type="text/javascript" src="{% static 'js/main.js' %}"></script>
+        <script type="text/javascript" src="{% static 'js/signing-filing.js' %}"></script>
         {% endcompress %}
+        {% block extra_js %}
+        {% endblock %}
     </body>
 </html>

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

@@ -0,0 +1,69 @@
+{% extends 'base.html' %}
+{% load input_field %}
+{% load static %}
+
+{% block title %}{{ block.super }}: Overview{% endblock %}
+
+{% block progress %}{% include "partials/dashnav.html" with active_page=active_page %}{% endblock %}
+
+{% block content %}
+    <h1>Final Filing</h1>
+    {% if how_to_file == 'Online' %}
+        <p>
+            Now that you have received a Court Filing Number and both sworn / affirmed your affidavits, you can proceed with the filing of your
+            remaining
+            documentation. If you have not received a Court Filing Number check the Wait for Court Filing step. If you have not sworn / affirmed your
+            affidavits, check the Swear Forms step. Enter your Court Filing Number below:
+        </p>
+        <div><label>Court Filing #</label>{% input_field type="text" name="court_filing_no" id="court_filing_no" class="input-inline form-control" %}
+        </div>
+    {% endif %}
+
+    <div id="vue-app">
+        <final-filing-uploader 
+            signing-location="{{ signing_location }}"
+            signing-location-you="{{ signing_location_you }}"
+            signing-location-spouse="{{ signing_location_spouse }}"
+            how-to-sign="{{ how_to_sign }}"
+            how-to-file="{{ how_to_file }}"
+            sign-file-options-url="{% url 'dashboard_nav' 'sign_file_options' %}"
+            print-form-url="{% url 'dashboard_nav' 'print_form' %}">
+        </final-filing-uploader>
+    </div>
+
+    {% if how_to_file == 'Online' %}
+        <h3>Filing with Court Services Online</h3>
+        <p>When you click Next, you will be taken to the Court Services Online e-filing hub. In the next few steps you will be able to do a final
+            review of your filed documentation, pay for your filing and (if completed successfully) receive a Package Number. This final step will
+            complete your divorce filing.</p>
+    {% endif %}
+
+{% endblock %}
+
+{% block backToDashboard %}
+    <!-- no back to dashboard -->
+{% endblock %}
+
+{% block formBack %}{% url 'dashboard_nav' 'swear_forms' %}{% endblock %}
+{% block formNext %}{% url 'dashboard_nav' 'next_steps' %}{% endblock %}
+
+{% block sidebarNav %}
+    <!-- no sidebar -->
+{% endblock %}
+{% block sidebarText %}
+    {% include "dashboard/partials/sidebar_help.html" %}
+{% endblock %}
+
+{% block extra_css %}
+    <link rel="preload" as="style" href="{% static 'dist/vue/css/finalFiling.css' %}"/>
+    <link rel="stylesheet" type="text/css" href="{% static 'dist/vue/css/finalFiling.css' %}"/>
+    <link rel="preload" as="script" href="{% static 'dist/vue/js/chunk-vendors.js' %}"/>
+    <link rel="preload" as="script" href="{% static 'dist/vue/js/chunk-common.js' %}"/>
+    <link rel="preload" as="script" href="{% static 'dist/vue/js/finalFiling.js' %}"/>
+{% endblock %}
+
+{% block extra_js %}
+    <script type="text/javascript" src="{% static 'dist/vue/js/chunk-vendors.js' %}"></script>
+    <script type="text/javascript" src="{% static 'dist/vue/js/chunk-common.js' %}"></script>
+    <script type="text/javascript" src="{% static 'dist/vue/js/finalFiling.js' %}"></script>
+{% endblock %}

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

@@ -0,0 +1,74 @@
+{% extends 'base.html' %}
+{% load static %}
+
+{% block title %}{{ block.super }}: Overview{% endblock %}
+
+{% block progress %}{% include "partials/dashnav.html" with active_page=active_page %}{% endblock %}
+
+{% block content %}
+    <h1>Initial Filing</h1>
+    {% if how_to_file == 'Online' %}
+        <p>
+            Your filing (submitting completed documents to the court registry) occurs in two parts. The initial filing initiates the divorce
+            proceeding. Once
+            initial filing is complete you will receive a Court Filing Number. This number is important as it will allow you or your spouse to file
+            the
+            remaining documents required to complete your divorce.
+        </p>
+        <p>Missing a form required on this page? Check the <a href="{% url 'dashboard_nav' 'print_form' %}">Review Forms</a> step.</p>
+        <p><a>Need help with Scanning your documents?</a></p>
+
+        <div id="vue-app">
+            <initial-filing-uploader 
+                signing-location="{{ signing_location }}"
+                signing-location-you="{{ signing_location_you }}"
+                signing-location-spouse="{{ signing_location_spouse }}">
+            </initial-filing-uploader>
+        </div>
+
+        <h3>Filing with Court Services Online</h3>
+        <p>When you click Next, you will be taken to the Court Services Online e-filing hub. In the next few steps you will be able to do a final
+            review of your filed documentation, pay for your filing and (if completed successfully) receive a Package Number.</p>
+        <p>Once your filings have been reviewed by the Court Registry (?), you will be provided a Court Filing Number (?) via e-mail. This may
+            take up
+            to one week.</p>
+        <p>You will need your Court Filing Number if you are filing any additional documentation.</p>
+    {% elif how_to_file == 'In-person' %}
+        <p>
+            You don't need to complete this step. Go to <a href="{% url 'dashboard_nav' 'swear_forms' %}">Swear Forms</a> for further instruction.
+        </p>
+    {% else %}
+        <p>
+            You must select how you want to file in the <a href="{% url 'dashboard_nav' 'sign_file_options' %}">Signing & Filing Options</a> step.
+        </p>
+    {% endif %}
+
+{% endblock %}
+
+{% block backToDashboard %}
+    <!-- no back to dashboard -->
+{% endblock %}
+
+{% block formBack %}{% url 'dashboard_nav' 'print_form' %}{% endblock %}
+{% block formNext %}{% url 'dashboard_nav' 'wait_for_number' %}{% endblock %}
+
+{% block sidebarNav %}
+    <!-- no sidebar -->
+{% endblock %}
+{% block sidebarText %}
+    {% include "dashboard/partials/sidebar_help.html" %}
+{% endblock %}
+
+{% block extra_css %}
+    <link rel="preload" as="style" href="{% static 'dist/vue/css/initialFiling.css' %}"/>
+    <link rel="stylesheet" type="text/css" href="{% static 'dist/vue/css/initialFiling.css' %}"/>
+    <link rel="preload" as="script" href="{% static 'dist/vue/js/chunk-vendors.js' %}"/>
+    <link rel="preload" as="script" href="{% static 'dist/vue/js/chunk-common.js' %}"/>
+    <link rel="preload" as="script" href="{% static 'dist/vue/js/initialFiling.js' %}"/>
+{% endblock %}
+
+{% block extra_js %}
+    <script type="text/javascript" src="{% static 'dist/vue/js/chunk-vendors.js' %}"></script>
+    <script type="text/javascript" src="{% static 'dist/vue/js/chunk-common.js' %}"></script>
+    <script type="text/javascript" src="{% static 'dist/vue/js/initialFiling.js' %}"></script>
+{% endblock %}

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

@@ -0,0 +1,78 @@
+{% extends 'base.html' %}
+
+{% block title %}{{ block.super }}: Overview{% endblock %}
+
+{% block progress %}{% include "partials/dashnav.html" with active_page=active_page %}{% endblock %}
+
+{% block content %}
+    <h1>Filing Completed</h1>
+    {% if how_to_file == 'Online' %}
+        <p>
+            You have successfully completed filing online.
+        </p>
+        <p>
+            Your CSO Online Package # (?) is 123-456-789
+        </p>
+        <p>
+            Once your filing has been reviewed by the Court Registry (?), you will receive an e-mail confirmation of your filing. This e-mail will
+            include
+            a Court Filing Number (?), please keep this number for your records and use it if filing any additional documentation.
+        </p>
+        <div class="question-well">
+            <h3>Filing Status</h3>
+            <p>
+                You will receive e-mails from the system as your filing is processed by the Court Registry. You can also check here to see the status
+                of
+                your filing:
+            </p>
+            <p>
+                Current Filing Status: Submitted - Your filing has been submitted to the Court Registry and will be reviewed soon.
+            </p>
+            <p>
+                You can view the following items at any time:
+            </p>
+            <ul>
+                <li>Your eFiling Receipt on the CSO eFiling Hub</li>
+                <li>The complete package of all documents you have filed at the CSO eFiling Hub</li>
+            </ul>
+        </div>
+    {% endif %}
+    <div class="question-well">
+        <h3>What happens at the registry?</h3>
+        <p>The court registry staff will check your documents to make sure they've been completed properly.</p>
+        <p>
+            If you're not sure whether you've filled out the documents correctly, get some
+            <a href="http://www.familylaw.lss.bc.ca/help/who_LegalAdvice.php" target="_blank">legal advice</a> before you file your documents — from
+            <a href="http://www.familylaw.lss.bc.ca/help/who_FamilyDutyCounsel.php" target="_blank">family duty counsel</a>
+            or (in Vancouver) from the Vancouver
+            <a href="http://www.familylaw.lss.bc.ca/help/jacSelfHelpAndInfoServices.php" target="_blank">Justice Access Centre</a> Self-Help and
+            Information Services.
+        </p>
+        <p>If the registry is satisfied that your documents are in order, they will stamp the documents with the date, the court seal, and a file
+            number.</p>
+        <p>You now have a divorce file open in the Supreme Court.</p>
+    </div>
+    <div class="question-well">
+        <h3>Next Steps</h3>
+        <p>Once a judge has reviewed your divorce, you will receive an e-mail from the court registry with information about the next steps. If your
+            divorce is approved, you can move to the next step and order a certificate of divorce.</p>
+
+        <h2>Haven’t Heard Back?</h2>
+        <p>If you don’t hear back within 30 days from the court registry. Please contact CSO Online Support at Courts.CSO@gov.bc.ca and include your
+            Court Filing # (?) / Filing Location or Online Package Number (?).</p>
+    </div>
+{% endblock %}
+
+{% block backToDashboard %}
+    <!-- no back to dashboard -->
+{% endblock %}
+
+{% block formBack %}{% url 'dashboard_nav' 'final_filing' %}{% endblock %}
+{% block formNext %}{% url 'dashboard_nav' 'order_certificate' %}{% endblock %}
+
+{% block sidebarNav %}
+    <!-- no sidebar -->
+{% endblock %}
+{% block sidebarText %}
+    {% include "dashboard/partials/sidebar_help.html" %}
+{% endblock %}

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

@@ -5,31 +5,39 @@
 {% block progress %}{% include "partials/dashnav.html" with active_page=active_page %}{% endblock %}
 
 {% block content %}
-<h1>Order a Certificate of Divorce (Optional)</h1>
-<p>$40 for each Certificate of Divorce (as of March 2013)</p>
-<p>
-    Anytime after 31 days have passed and the divorce has become final, you can go back to the registry to ask for a Certificate of Divorce Form (F56).
-</p>
-<p>
-    This step isn't mandatory. If you don't go to the court registry to get a Certificate of Divorce, your divorce will still be legal. If you ever have to show legal proof of your divorce, you can use your divorce order. However, you may prefer just to show a certificate rather than all the details in the order.
-</p>
-<p>
-    For details on
-    <a href="http://www.familylaw.lss.bc.ca/guides/divorce/divJoint_step8.php" target="_blank">how to apply for a Certificate of Divorce</a>
-    refer to the Legal Services Society website.
-</p>
+    <h1>Order a Certificate of Divorce (Optional)</h1>
+    <p>$40 for each Certificate of Divorce (as of March 2013)</p>
+    <p>
+        Anytime after 31 days have passed and the divorce has become final, you can go back to the registry to ask for a Certificate of Divorce Form
+        (F56).
+    </p>
+    <p>
+        This step isn't mandatory. If you don't go to the court registry to get a Certificate of Divorce, your divorce will still be legal. If you
+        ever have to show legal proof of your divorce, you can use your divorce order. However, you may prefer just to show a certificate rather than
+        all the details in the order.
+    </p>
+    <p>
+        For details on
+        <a href="http://www.familylaw.lss.bc.ca/guides/divorce/divJoint_step8.php" target="_blank">how to apply for a Certificate of Divorce</a>
+        refer to the Legal Services Society website.
+    </p>
+    <h3>Out of Country Certificate of Divorce Requirements</h3>
+    <p>If you are requesting a Certificate of Divorce from outside Canada, please check with your country’s requirements around the Certificate
+        itself.
+        The country of residence may require a hand-signed and/or sealed Certificate of Divorce.</p>
+    <p>For details on how to apply please complete the following form for a Hand-Signed and Seals Certificate of Divorce.</p>
 {% endblock %}
 
 {% block backToDashboard %}
-<!-- no back to dashboard -->
+    <!-- no back to dashboard -->
 {% endblock %}
 
 {% block formbuttons %}
-<!-- no button -->
+    <!-- no button -->
 {% endblock %}
 
 {% block sidebarNav %}
-<!-- no sidebar -->
+    <!-- no sidebar -->
 {% endblock %}
 {% block sidebarText %}
     {% include "dashboard/partials/sidebar_help.html" %}

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

@@ -5,15 +5,15 @@
 {% block progress %}{% include "partials/dashnav.html" with active_page=active_page %}{% endblock %}
 
 {% block content %}
-<h1>Review and Print your Divorce Forms</h1>
-<p>
-    To get divorced, you need to get a divorce order. Only the court has the
-    ability to divorce a married couple.  To get a court order you have to
-    start a court case. What this means is you will have to print off the forms
-    listed below, and file them (open your court case) at a
-    <span class="tooltip-link" data-toggle="tooltip" data-placement="auto"
-          data-html="true" data-trigger="click"
-          title="
+    <h1>Review and Print your Divorce Forms</h1>
+    <p>
+        To get divorced, you need to get a divorce order. Only the court has the
+        ability to divorce a married couple. To get a court order you have to
+        start a court case. What this means is you will have to print off the forms
+        listed below, and file them (open your court case) at a
+        <span class="tooltip-link" data-toggle="tooltip" data-placement="auto"
+              data-html="true" data-trigger="click"
+              title="
             <b>Court Registry</b>
             <br /><br />
             Registries are located in courthouses around the province. You can
@@ -25,266 +25,229 @@
           ">
       court registry<i class="fa fa-question-circle" aria-hidden="true"></i>
     </span>.
-</p>
-
-<p>&nbsp;</p>
+    </p>
 
-<h3>Print These Forms</h3>
+    <p>&nbsp;</p>
 
-<p>
-  <a href="{% url 'dashboard_nav' 'help_saving_pdf' %}">Get help opening and saving PDF forms</a> |
-  <a href="#" class="info-modal">Changing my forms</a>
-</p>
+    <h3>Print These Forms</h3>
 
-<div class="review-well clearfix">
-    <div class="collapse-trigger collapsed" data-toggle="collapse"
-         aria-expanded="false" data-target="#collapseF1"
-         aria-controls="collapseF1">
-       <div>
-           <span>Notice of Joint Family Claim Form (F1)</span>
-       </div>
-    </div>
-    <p class="review-buttons">
-        <a href="{% url 'pdf_form' '1' %}" class="btn btn-primary spinner"
-            target="_blank"><i class="fa fa-print" aria-hidden="true"></i>
-            Review and Print
-        </a>
+    <p>
+        <a href="{% url 'dashboard_nav' 'help_saving_pdf' %}">Get help opening and saving PDF forms</a> |
+        <a href="#" class="info-modal">Changing my forms</a>
     </p>
-    <div class="clearfix"> </div>
-    <div class="collapse" id="collapseF1">
-       <div>
-           <p>
-               The Notice of Joint Family Claim Form (F1) is a document that
-               starts the court file for your divorce. It states the grounds
-               for the divorce and gives information about you and your spouse,
-               as well as the details about your marriage and separation.
-           </p>
-       </div>
-    </div>
-</div>
 
-<div class="review-well clearfix">
-    <div class="collapse-trigger collapsed" data-toggle="collapse"
-         aria-expanded="false" data-target="#collapseF35"
-         aria-controls="collapseF35">
-       <div>
-           <span>Requisition Form (F35)</span>
-       </div>
-    </div>
-    <p class="review-buttons">
-        <a href="{% url 'pdf_form' '35' %}" class="btn btn-primary spinner"
-            target="_blank"><i class="fa fa-print" aria-hidden="true"></i>
-            Review and Print
-        </a>
-    </p>
-    <div class="clearfix"> </div>
-    <div class="collapse" id="collapseF35">
-       <div>
-           <p>
-               This form tells the court that you are asking for an order
-               (decision) from a judge. The Requisition also tells the court
-               what documents you’re providing to support your application.
-           </p>
-       </div>
-    </div>
-</div>
-<div class="review-well clearfix">
-    <div class="collapse-trigger collapsed" data-toggle="collapse"
-         aria-expanded="false" data-target="#collapseF52"
-         aria-controls="collapseF52">
-       <div>
-           <span>Draft Final Order Form (F52)</span>
-       </div>
-    </div>
-    <p class="review-buttons">
-        <a href="{% url 'pdf_form' '52' %}" class="btn btn-primary spinner"
-            target="_blank"><i class="fa fa-print" aria-hidden="true"></i>
-            Review and Print
-        </a>
-    </p>
-    <div class="clearfix"> </div>
-    <div class="collapse" id="collapseF52">
-       <div>
-           <p>
-               A draft Final Order sets out what orders (decision) you want the
-               court to make. You and your spouse are responsible for writing
-               out the order. The judge or master who reviews your case doesn't
-               write the order. The final order you draft will become your
-               divorce order, once the judge has signed it.
-           </p>
-           <ul>
-               <li>
-                   <a href="http://www.familylaw.lss.bc.ca/resources/fact_sheets/tipsForDraftingOrders.php"
-                     target="_blank">Write draft order</a>
-                   - List what orders you want the court to make.
-               </li>
-               <li><b>File draft order</b> when you file the other forms and
-                 documents at the court registry</li>
-               <li>If the judge or master makes the order you ask for, they'll
-                 sign the draft order you filed and it becomes your court
-                 order.</li>
-               <li><b>If there's a problem</b> with your order and the judge or
-                 master doesn't approve it, the court registry will let you
-                 know. You might have to draft another version of the order or
-                 appear in court to give the judge or master more information
-                 about what you wrote in the order.</li>
-           </ul>
-       </div>
-    </div>
-</div>
-<div class="review-well clearfix">
-    <div class="collapse-trigger collapsed" data-toggle="collapse"
-         aria-expanded="false" data-target="#collapseF36"
-         aria-controls="collapseF36">
-       <div>
-           <span>Certificate of Pleadings Form (F36)</span>
-       </div>
-    </div>
-    <p class="review-buttons">
-        <a href="{% url 'pdf_form' '36' %}" class="btn btn-primary spinner"
-            target="_blank"><i class="fa fa-print" aria-hidden="true"></i>
-            Review and Print
-        </a>
-    </p>
-    <div class="clearfix"> </div>
-    <div class="collapse" id="collapseF36">
-       <div>
-           <p>
-               The only details you need to provide on the Certificate of
-               Pleadings form (F36) are your name and your spouse's name. The
-               Court Registrar uses this form to tell you if all your documents
-               are in order. If something is missing or you’ve filled in the
-               form incorrectly, he or she will let you know using this form.
-           </p>
-           <p>
-               Take the Certificate to the court registry where you filed your
-               Notice of Trial. After you file it, the registrar will search
-               the file and sign and return the Certificate to you. If
-               something's missing, the registrar won't sign the Certificate
-               and will let you know.
-           </p>
-           <p>
-               If everything is in order, the Registrar will sign the
-               Certificate of Pleadings to show the judge that they've checked
-               everything over. All of your document will be sent to the judge
-               for review.
-           </p>
-       </div>
-    </div>
-</div>
-{% if children_of_marriage == 'YES' %}
-<div class="review-well clearfix">
-    <div class="collapse-trigger collapsed" data-toggle="collapse"
-         aria-expanded="false" data-target="#collapseF37a"
-         aria-controls="collapseF37a">
-       <div>
-           <span>Child Support Affidavit (F37) - signing together</span>
-       </div>
-    </div>
-    <p class="review-buttons">
-        <a href="{% url 'pdf_form' '37' %}" class="btn btn-primary spinner"
-            target="_blank"><i class="fa fa-print" aria-hidden="true"></i>
-            Review and Print
-        </a>
-    </p>
-    <div class="clearfix"> </div>
-    <div class="collapse" id="collapseF37a">
-       <div>
-           <p>$40 per affidavit (if sworn at a court registry)</p>
-           <p>
-               Since your divorce won't require an appearance before a judge, you must fill out and
-               swear/affirm<i class="fa fa-question-circle" data-toggle="tooltip"
-                  data-placement="auto" data-html="true" data-trigger="click"
-                  title="
-                    <b>Swear/Affirm</b>
-                    <br /><br />
-                    To &ldquo;take an oath&rdquo; in front of a lawyer, notary
-                    public, or commissioner for taking affidavits that
-                    statements made in court or the contents of an affidavit
-                    are true to the best of your knowledge and belief that your
-                    oath is &ldquo;under an immediate sense of responsibility
-                    to God&rdquo;. A non-religious alternative is to affirm.
-                  "
-                  aria-hidden="true"></i>
-               a Child Support
-               Affidavit<i class="fa fa-question-circle" data-toggle="tooltip"
-                  data-placement="auto" data-html="true" data-trigger="click"
-                  title="
-                    <b>Affidavit</b>
-                    <br /><br />
-                    A document that contains facts that you swear under
-                    oath or affirm to be true.  A lawyer, notary public, or
-                    commissioner for taking affidavits must witness your
-                    signature and sign your affidavit.
-                  "
-                  aria-hidden="true"></i>
-               Form (F37). This document gives information about the children and child support.
-           </p>
-           <p>
-               You'll notice that some of the information in the affidavit is the same as what's in your Notice of
-               Joint Family Claim Form (F1). Because the Notice of Joint Family Claim is not a sworn document, and
-               the judge/master must have sworn evidence to make a decision, you must swear or affirm that the
-               information in these affidavits is true.
-           </p>
-       </div>
-    </div>
-    <div class="collapse-trigger empty text-center"><h4>OR</h4></div>
-    <div class="collapse-trigger empty">
-       <div>
-           <span>Child Support Affidavit (F37) - signing separately</span>
-       </div>
+    <div class="review-well clearfix">
+        <div class="collapse-trigger collapsed" data-toggle="collapse"
+             aria-expanded="false" data-target="#collapseF1"
+             aria-controls="collapseF1">
+            <div>
+                <span>Notice of Joint Family Claim Form (F1)</span>
+            </div>
+        </div>
+        <p class="review-buttons">
+            <a href="{% url 'pdf_form' '1' %}" class="btn btn-primary spinner"
+               target="_blank"><i class="fa fa-print" aria-hidden="true"></i>
+                Review and Print
+            </a>
+        </p>
+        <div class="clearfix"></div>
+        <div class="collapse" id="collapseF1">
+            <div>
+                <p>
+                    The Notice of Joint Family Claim Form (F1) is a document that
+                    starts the court file for your divorce. It states the grounds
+                    for the divorce and gives information about you and your spouse,
+                    as well as the details about your marriage and separation.
+                </p>
+            </div>
+        </div>
     </div>
-    <div class="collapse empty">
-        <div>
-          Claimant 1
+
+    <div class="review-well clearfix">
+        <div class="collapse-trigger collapsed" data-toggle="collapse"
+             aria-expanded="false" data-target="#collapseF35"
+             aria-controls="collapseF35">
+            <div>
+                <span>Requisition Form (F35)</span>
+            </div>
+        </div>
+        <p class="review-buttons">
+            <a href="{% url 'pdf_form' '35' %}" class="btn btn-primary spinner"
+               target="_blank"><i class="fa fa-print" aria-hidden="true"></i>
+                Review and Print
+            </a>
+        </p>
+        <div class="clearfix"></div>
+        <div class="collapse" id="collapseF35">
+            <div>
+                <p>
+                    This form tells the court that you are asking for an order
+                    (decision) from a judge. The Requisition also tells the court
+                    what documents you’re providing to support your application.
+                </p>
+            </div>
         </div>
     </div>
-    <p class="review-buttons">
-        <a href="{% url 'pdf_form' '37_claimant1' %}" class="btn btn-primary spinner"
-            target="_blank"><i class="fa fa-print" aria-hidden="true"></i>
-            Review and Print
-        </a>
-    </p>
-    <div class="clearfix"> </div>
-    <div class="collapse empty">
-        <div>
-          Claimant 2
+    <div class="review-well clearfix">
+        <div class="collapse-trigger collapsed" data-toggle="collapse"
+             aria-expanded="false" data-target="#collapseF36"
+             aria-controls="collapseF36">
+            <div>
+                <span>Certificate of Pleadings Form (F36)</span>
+            </div>
+        </div>
+        <p class="review-buttons">
+            <a href="{% url 'pdf_form' '36' %}" class="btn btn-primary spinner"
+               target="_blank"><i class="fa fa-print" aria-hidden="true"></i>
+                Review and Print
+            </a>
+        </p>
+        <div class="clearfix"></div>
+        <div class="collapse" id="collapseF36">
+            <div>
+                <p>
+                    The only details you need to provide on the Certificate of
+                    Pleadings form (F36) are your name and your spouse's name. The
+                    Court Registrar uses this form to tell you if all your documents
+                    are in order. If something is missing or you’ve filled in the
+                    form incorrectly, he or she will let you know using this form.
+                </p>
+                <p>
+                    Take the Certificate to the court registry where you filed your
+                    Notice of Trial. After you file it, the registrar will search
+                    the file and sign and return the Certificate to you. If
+                    something's missing, the registrar won't sign the Certificate
+                    and will let you know.
+                </p>
+                <p>
+                    If everything is in order, the Registrar will sign the
+                    Certificate of Pleadings to show the judge that they've checked
+                    everything over. All of your document will be sent to the judge
+                    for review.
+                </p>
+            </div>
         </div>
     </div>
-    <p class="review-buttons">
-        <a href="{% url 'pdf_form' '37_claimant2' %}" class="btn btn-primary spinner"
-            target="_blank"><i class="fa fa-print" aria-hidden="true"></i>
-            Review and Print
-        </a>
-    </p>
-    <div class="clearfix"> </div>
-</div>
-{% endif %}
-
-<div class="review-well clearfix">
-    <div class="collapse-trigger collapsed" data-toggle="collapse"
-         aria-expanded="false" data-target="#collapseF38"
-         aria-controls="collapseF38">
-       <div>
-           <span>Affidavit Desk Order Divorce Form (F38) - signing together</span>
-       </div>
+    <div class="review-well clearfix">
+        <div class="collapse-trigger collapsed" data-toggle="collapse"
+             aria-expanded="false" data-target="#collapseF52"
+             aria-controls="collapseF52">
+            <div>
+                <span>Draft Final Order Form (F52)</span>
+            </div>
+        </div>
+        <p class="review-buttons">
+            <a href="{% url 'pdf_form' '52' %}" class="btn btn-primary spinner"
+               target="_blank"><i class="fa fa-print" aria-hidden="true"></i>
+                Review, Print & Sign
+            </a>
+        </p>
+        <div class="clearfix"></div>
+        <div class="collapse" id="collapseF52">
+            <div>
+                <p>
+                    A draft Final Order sets out what orders (decision) you want the
+                    court to make. You and your spouse are responsible for writing
+                    out the order. The judge or master who reviews your case doesn't
+                    write the order. The final order you draft will become your
+                    divorce order, once the judge has signed it.
+                </p>
+                <ul>
+                    <li>
+                        <a href="http://www.familylaw.lss.bc.ca/resources/fact_sheets/tipsForDraftingOrders.php"
+                           target="_blank">Write draft order</a>
+                        - List what orders you want the court to make.
+                    </li>
+                    <li><b>File draft order</b> when you file the other forms and
+                        documents at the court registry
+                    </li>
+                    <li>If the judge or master makes the order you ask for, they'll
+                        sign the draft order you filed and it becomes your court
+                        order.
+                    </li>
+                    <li><b>If there's a problem</b> with your order and the judge or
+                        master doesn't approve it, the court registry will let you
+                        know. You might have to draft another version of the order or
+                        appear in court to give the judge or master more information
+                        about what you wrote in the order.
+                    </li>
+                </ul>
+            </div>
+        </div>
     </div>
-    <p class="review-buttons">
-        <a href="{% url 'pdf_form' '38' %}" class="btn btn-primary spinner"
-            target="_blank"><i class="fa fa-print" aria-hidden="true"></i>
-            Review and Print
-        </a>
-    </p>
-    <div class="clearfix"> </div>
-    <div class="collapse" id="collapseF38">
-       <div>
-           <p>$40 per affidavit (if sworn at a court registry)</p>
-           <p>
-               Since your divorce won't require an appearance before a judge,
-               you must fill out and
-               swear/affirm<i class="fa fa-question-circle" data-toggle="tooltip"
-                  data-placement="auto" data-html="true" data-trigger="click"
-                  title="
+    {% if how_to_file == 'Online' %}
+        <div class="review-well clearfix">
+            <div class="collapse-trigger collapsed" data-toggle="collapse"
+                 aria-expanded="false" data-target="#collapseF96y"
+                 aria-controls="collapseF96y">
+                <div>
+                    <span>Electronic Filing Statement (F96) - to be signed by you</span>
+                </div>
+            </div>
+            <p class="review-buttons">
+                <a href="{% url 'pdf_form' '52' %}" class="btn btn-primary spinner"
+                   target="_blank"><i class="fa fa-print" aria-hidden="true"></i>
+                    Review, Print & Sign
+                </a>
+            </p>
+            <div class="clearfix"></div>
+            <div class="collapse" id="collapseF96y">
+                <div>
+                    <p>
+                        Some text here
+                    </p>
+                </div>
+            </div>
+        </div>
+        <div class="review-well clearfix">
+            <div class="collapse-trigger collapsed" data-toggle="collapse"
+                 aria-expanded="false" data-target="#collapseF96s"
+                 aria-controls="collapseF96s">
+                <div>
+                    <span>Electronic Filing Statement (F96) - to be signed by your spouse</span>
+                </div>
+            </div>
+            <p class="review-buttons">
+                <a href="{% url 'pdf_form' '52' %}" class="btn btn-primary spinner"
+                   target="_blank"><i class="fa fa-print" aria-hidden="true"></i>
+                    Review, Print & Sign
+                </a>
+            </p>
+            <div class="clearfix"></div>
+            <div class="collapse" id="collapseF96y">
+                <div>
+                    <p>
+                        Some text here
+                    </p>
+                </div>
+            </div>
+        </div>
+    {% endif %}
+    {% if how_to_sign == 'Together' %}
+        {% if children_of_marriage == 'YES' %}
+            <div class="review-well clearfix">
+                <div class="collapse-trigger collapsed" data-toggle="collapse"
+                     aria-expanded="false" data-target="#collapseF37a"
+                     aria-controls="collapseF37a">
+                    <div>
+                        <span>Child Support Affidavit (F37) - signing together</span>
+                    </div>
+                </div>
+                <p class="review-buttons">
+                    <a href="{% url 'pdf_form' '37' %}" class="btn btn-primary spinner"
+                       target="_blank"><i class="fa fa-print" aria-hidden="true"></i>
+                        Review, Print & Swear
+                    </a>
+                </p>
+                <div class="clearfix"></div>
+                <div class="collapse" id="collapseF37a">
+                    <div>
+                        <p>$40 per affidavit (if sworn at a court registry)</p>
+                        <p>
+                            Since your divorce won't require an appearance before a judge, you must fill out and
+                            swear/affirm<i class="fa fa-question-circle" data-toggle="tooltip"
+                                           data-placement="auto" data-html="true" data-trigger="click"
+                                           title="
                     <b>Swear/Affirm</b>
                     <br /><br />
                     To &ldquo;take an oath&rdquo; in front of a lawyer, notary
@@ -294,10 +257,11 @@
                     oath is &ldquo;under an immediate sense of responsibility
                     to God&rdquo;. A non-religious alternative is to affirm.
                   "
-                  aria-hidden="true"></i>
-                an Affidavit<i class="fa fa-question-circle" data-toggle="tooltip"
-                  data-placement="auto" data-html="true" data-trigger="click"
-                  title="
+                                           aria-hidden="true"></i>
+                            a Child Support
+                            Affidavit<i class="fa fa-question-circle" data-toggle="tooltip"
+                                        data-placement="auto" data-html="true" data-trigger="click"
+                                        title="
                     <b>Affidavit</b>
                     <br /><br />
                     A document that contains facts that you swear under
@@ -305,218 +269,197 @@
                     commissioner for taking affidavits must witness your
                     signature and sign your affidavit.
                   "
-                  aria-hidden="true"></i>
-                Desk Order Divorce Form (F38). This document sets out the facts
-                of your marriage and separation.
-           </p>
-       </div>
-    </div>
-    <div class="collapse-trigger empty text-center"><h4>OR</h4></div>
-    <div class="collapse-trigger empty">
-       <div>
-           <span>Affidavit Desk Order Divorce Form (F38) - signing separately</span>
-       </div>
-    </div>
-    <div class="collapse empty">
-        <div>
-          Claimant 1
-        </div>
-    </div>
-    <p class="review-buttons">
-        <a href="{% url 'pdf_form' '38_claimant1' %}" class="btn btn-primary spinner"
-            target="_blank"><i class="fa fa-print" aria-hidden="true"></i>
-            Review and Print
-        </a>
-    </p>
-    <div class="clearfix"> </div>
-    <div class="collapse empty">
-        <div>
-          Claimant 2
-        </div>
-    </div>
-    <p class="review-buttons">
-        <a href="{% url 'pdf_form' '38_claimant2' %}" class="btn btn-primary spinner"
-            target="_blank"><i class="fa fa-print" aria-hidden="true"></i>
-            Review and Print
-        </a>
-    </p>
-    <div class="clearfix"> </div>
-</div>
-
-<div class="question-well">
-    <h2>Signing Your Affidavit Forms</h2>
-    <p>
-        The affidavit will need to be
-            <span class="tooltip-link" data-toggle="tooltip" data-placement="auto"
-              data-html="true" data-trigger="click"
-              title="
-                <b>Swear/Affirm</b>
-                        <br /><br />
-                        To &ldquo;take an oath&rdquo; in front of a lawyer, notary
-                        public, or commissioner for taking affidavits that
-                        statements made in court or the contents of an affidavit
-                        are true to the best of your knowledge and belief that your
-                        oath is &ldquo;under an immediate sense of responsibility
-                        to God&rdquo;. A non-religious alternative is to affirm.
-                  ">
-              sworn or affirmed<i class="fa fa-question-circle" aria-hidden="true"></i>
-            </span>. You can either
-        <b>jointly</b> prepare {% if children_of_marriage == 'YES'  %}one Child Support Affidavit (F37) and{% endif %} one Affidavit — Desk Order Divorce form (F38) or
-        complete two versions {% if children_of_marriage == 'YES' %}of each{% endif %} and <b>
-        <span class="tooltip-link" data-toggle="tooltip" data-placement="auto"
-              data-html="true" data-trigger="click"
-              title="
+                                        aria-hidden="true"></i>
+                            Form (F37). This document gives information about the children and child support.
+                        </p>
+                        <p>
+                            You'll notice that some of the information in the affidavit is the same as what's in your Notice of
+                            Joint Family Claim Form (F1). Because the Notice of Joint Family Claim is not a sworn document, and
+                            the judge/master must have sworn evidence to make a decision, you must swear or affirm that the
+                            information in these affidavits is true.
+                        </p>
+                    </div>
+                </div>
+            </div>
+        {% endif %}
+        <div class="review-well clearfix">
+            <div class="collapse-trigger collapsed" data-toggle="collapse"
+                 aria-expanded="false" data-target="#collapseF38"
+                 aria-controls="collapseF38">
+                <div>
+                    <span>Affidavit Desk Order Divorce Form (F38) - signing together</span>
+                </div>
+            </div>
+            <p class="review-buttons">
+                <a href="{% url 'pdf_form' '38' %}" class="btn btn-primary spinner"
+                   target="_blank"><i class="fa fa-print" aria-hidden="true"></i>
+                    Review, Print & Swear
+                </a>
+            </p>
+            <div class="clearfix"></div>
+            <div class="collapse" id="collapseF38">
+                <div>
+                    <p>$40 per affidavit (if sworn at a court registry)</p>
+                    <p>
+                        Since your divorce won't require an appearance before a judge,
+                        you must fill out and
+                        swear/affirm<i class="fa fa-question-circle" data-toggle="tooltip"
+                                       data-placement="auto" data-html="true" data-trigger="click"
+                                       title="
                 <b>Swear/Affirm</b>
-                        <br /><br />
-                        To &ldquo;take an oath&rdquo; in front of a lawyer, notary
-                        public, or commissioner for taking affidavits that
-                        statements made in court or the contents of an affidavit
-                        are true to the best of your knowledge and belief that your
-                        oath is &ldquo;under an immediate sense of responsibility
-                        to God&rdquo;. A non-religious alternative is to affirm.
-                  ">
-              swear/affirm<i class="fa fa-question-circle" aria-hidden="true"></i>
-            </span></i>
-        each one separately.</b>
-    </p>
-
-    <table class="table table-bordered">
-        <tr>
-            <th>If both of you will be coming to the court registry:</th>
-            <th>If only one of you will be coming to the court registry:</th>
-        </tr>
-        <tr>
-            <td>
-                The affidavits can be signed and sworn/affirmed by both of you
-                when at the registry.
-            </td>
-            <td>
-                <p>
-                    Either you or your spouse can sign and swear/affirm ahead of
-                time, but the 2nd party will need to sign when at the
-                registry, after the Notice of Joint Family Claim has been filed.
+                <br /><br />
+                To &ldquo;take an oath&rdquo; in front of a lawyer, notary
+                public, or commissioner for taking affidavits that
+                statements made in court or the contents of an affidavit
+                are true to the best of your knowledge and belief that your
+                oath is &ldquo;under an immediate sense of responsibility
+                to God&rdquo;. A non-religious alternative is to affirm.
+              "
+                                       aria-hidden="true"></i>
+                        an Affidavit<i class="fa fa-question-circle" data-toggle="tooltip"
+                                       data-placement="auto" data-html="true" data-trigger="click"
+                                       title="
+                <b>Affidavit</b>
+                <br /><br />
+                A document that contains facts that you swear under
+                oath or affirm to be true.  A lawyer, notary public, or
+                commissioner for taking affidavits must witness your
+                signature and sign your affidavit.
+              "
+                                       aria-hidden="true"></i>
+                        Desk Order Divorce Form (F38). This document sets out the facts
+                        of your marriage and separation.
+                    </p>
+                </div>
+            </div>
+        </div>
+    {% elif how_to_sign == 'Separately' %}
+        {% if children_of_marriage == 'YES' %}
+            <div class="review-well clearfix">
+                <div class="collapse-trigger empty">
+                    <div>
+                        <span>Child Support Affidavit (F37) - signing separately</span>
+                    </div>
+                </div>
+                <div class="collapse empty">
+                    <div>
+                        Claimant 1
+                    </div>
+                </div>
+                <p class="review-buttons">
+                    <a href="{% url 'pdf_form' '37_claimant1' %}" class="btn btn-primary spinner"
+                       target="_blank"><i class="fa fa-print" aria-hidden="true"></i>
+                        Review, Print & Swear
+                    </a>
                 </p>
-                <p>
-                    If one of you decides to swear/affirm ahead of time, at the time of filing the application,
-                    all affidavits must have been notarized within 30 days prior to filing.
+                <div class="clearfix"></div>
+                <div class="collapse empty">
+                    <div>
+                        Claimant 2
+                    </div>
+                </div>
+                <p class="review-buttons">
+                    <a href="{% url 'pdf_form' '37_claimant2' %}" class="btn btn-primary spinner"
+                       target="_blank"><i class="fa fa-print" aria-hidden="true"></i>
+                        Review, Print & Swear
+                    </a>
                 </p>
-            </td>
-        </tr>
-    </table>
-    <p>
-        Please follow these steps to ensure your affidavit does not get rejected:
-    </p>
-    <ul>
-        <li>Both you and your spouse need to swear/affirm the affidavit.</li>
-        <li>
-            Take <strong>photo identification</strong> with you. The person who will swear/affirm the documents for
-            you must be sure you are both who you say you are.
-        </li>
-        <li>
-            One affidavit must be sworn/affirmed <strong>after the Notice of Joint Family Claim</strong> has been filed
-            and within 30 days of filing the affidavit.  This can be done at the registry immediately after filing the Claim.
-        </li>
-        {% if children_of_marriage == 'YES'  %}
-        <li>
-            You'll need to swear both the Child Support Affidavit (F37) as well as the Affidavit Desk Order Divorce (F38).
-        </li>
+                <div class="clearfix"></div>
+            </div>
+        {% endif %}
+        {% if married_marriage_like == 'Legally married' %}
+            <div class="review-well clearfix">
+                <div class="collapse-trigger empty">
+                    <div>
+                        <span>Affidavit Desk Order Divorce Form (F38) - signing separately</span>
+                    </div>
+                </div>
+                <div class="collapse empty">
+                    <div>
+                        Claimant 1
+                    </div>
+                </div>
+                <p class="review-buttons">
+                    <a href="{% url 'pdf_form' '38_claimant1' %}" class="btn btn-primary spinner"
+                       target="_blank"><i class="fa fa-print" aria-hidden="true"></i>
+                        Review, Print & Swear
+                    </a>
+                </p>
+                <div class="clearfix"></div>
+                <div class="collapse empty">
+                    <div>
+                        Claimant 2
+                    </div>
+                </div>
+                <p class="review-buttons">
+                    <a href="{% url 'pdf_form' '38_claimant2' %}" class="btn btn-primary spinner"
+                       target="_blank"><i class="fa fa-print" aria-hidden="true"></i>
+                        Review, Print & Swear
+                    </a>
+                </p>
+                <div class="clearfix"></div>
+            </div>
         {% endif %}
-    </ul>
-</div>
+    {% else %}
+        <h2>You must select whether you are signing together or separately in the <a href="{% url 'dashboard_nav' 'sign_file_options' %}">Signing and
+            Filing Options</a> step.</h2>
+    {% endif %}
 
-<div class="question-well">
-    <h2>Other Documents to Take to the Court Registry</h2>
-    <ul>
-        <li>
-          Proof of marriage (original or certified Marriage Certificate or
-          Registration of Divorce)
-        </li>
+    <div class="question-well">
+        <h3>Additional Documents to Print and Complete</h3>
+        <p>The following additional documents are required as part of your filing:</p>
         <ul>
             <li>
-                If not in English, also provide Affidavit of Translation and English translation
+                Proof of marriage. Original or certified Marriage Certificate or Registration of Divorce. If not in English, also provide
+                Affidavit of Translation and English translation.
+            </li>
+            <li>
+                Completed Registration of Divorce form (Federal)
+            </li>
+            <li>
+                Completed Identification of Applicant (VSA 512) for anyone requesting a name change
+            </li>
+            <li>
+                Completed Agreement as to Annual Income (F9)
             </li>
         </ul>
-        <li>Completed
-          <a href="http://www.justice.gc.ca/eng/fl-df/divorce/pdf/form.pdf"
-              target="_blank">
-            Registration of Divorce form
-          </a> (Federal)
-        </li>
-        {% if name_change_you == 'YES' or name_change_spouse == 'YES' %}
-        <li>Completed
-          <a href="http://www2.gov.bc.ca/assets/download/83855B903EC14E85904863BC1EE2086C"
-              target="_blank">
-            Identification of Applicant (VSA 512)
-          </a> for anyone requesting a name change
-        </li>
-        {% endif %}
-        {% if how_will_calculate_income == 'entered agreement' %}
-        <li>Completed
-          <a href="https://www2.gov.bc.ca/assets/gov/law-crime-and-justice/courthouse-services/court-files-records/court-forms/supreme-family/f9.pdf?forcedownload=true" target="_blank">
-           Agreement as to Annual Income (F9)
-         </a>
-        </li>
-        {% endif %}
-    </ul>
-</div>
-
-<div class="question-well">
-    <h2>Assembly Instructions</h2>
-
-    <p>Staple each form together and then fasten all forms with a paper clip,
-    in the following order:</p>
-
-    <ul>
-        <li>Notice of Joint Family Claim Form (F1)</li>
-        <li>Requisition Form (F35)</li>
-        <li>Draft Final Order Form (F52)</li>
-        <li>Certificate of Pleadings Form (F36)</li>
-        {% if children_of_marriage == 'YES' %}
-        <li>Child Support Affidavit (F37)</li>
-        {% endif %}
-        <li>Affidavit — Desk Order Divorce Form (F38)</li>
-        {% if how_will_calculate_income == 'entered agreement' %}
-          <li>Agreement as to Annual Income (F9)</li>
-        {% endif %}
-    </ul>
-
-    <p>
-        If you have other court orders or a written separation agreement, they
-        should also be attached to your Affidavit — Desk Order Divorce Form (F38).
-        Note that these agreements or orders must not contradict what's in your divorce application.
-    </p>
-</div>
+    </div>
 
-<div id="info_modal" class="modal" tabindex="-1" role="dialog">
-    <div class="modal-dialog" role="document">
-        <div class="modal-content">
-            <div class="modal-header">
-                <i class="fa fa-file" aria-hidden="true"></i>
-                <h1 class="modal-title">Changing your forms</h1>
-            </div>
-            <div class="modal-body">
-                <p>
-                    If you need to make changes to your forms, you can return
-                    to the Divorce Questionnaire section to review and update
-                    your answers. You will then need to Review and Print your
-                    forms again.
-                </p>
-            </div>
-            <div class="modal-footer">
-                <a type="button" class="btn btn-primary btn-lg" data-dismiss="modal">Continue</a>
+    <div id="info_modal" class="modal" tabindex="-1" role="dialog">
+        <div class="modal-dialog" role="document">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <i class="fa fa-file" aria-hidden="true"></i>
+                    <h1 class="modal-title">Changing your forms</h1>
+                </div>
+                <div class="modal-body">
+                    <p>
+                        If you need to make changes to your forms, you can return
+                        to the Divorce Questionnaire section to review and update
+                        your answers. You will then need to Review and Print your
+                        forms again.
+                    </p>
+                </div>
+                <div class="modal-footer">
+                    <a type="button" class="btn btn-primary btn-lg" data-dismiss="modal">Continue</a>
+                </div>
             </div>
         </div>
     </div>
-</div>
 
 {% endblock %}
 
 {% block backToDashboard %}
-<!-- no back to dashboard -->
+    <!-- no back to dashboard -->
 {% endblock %}
 
-{% block formbuttons %}
-<!-- no button -->
+{% block formBack %}{% url 'dashboard_nav' 'sign_file_options' %}{% endblock %}
+{% block formNext %}
+    {% if how_to_file == 'Online' %}
+        {% url 'dashboard_nav' 'initial_filing' %}
+    {% else %}
+        {% url 'dashboard_nav' 'swear_forms' %}
+    {% endif %}
 {% endblock %}
 
 {% block sidebarText %}

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

@@ -0,0 +1,138 @@
+{% extends 'base.html' %}
+{% load input_field %}
+
+{% block title %}{{ block.super }}: Overview{% endblock %}
+
+{% block progress %}{% include "partials/dashnav.html" with active_page=active_page %}{% 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.
+</p>
+<div class="question-well">
+    <h3>Select how you would like to swear/affirm (?) your affidavit(s) (?):</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>
+    <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>
+</div>
+<h3>Filing Options</h3>
+{% if where_were_you_married_country == 'Canada' %}
+    <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>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">
+        <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="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>
+{% 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>
+    </div>
+{% endif %}
+<h3 id="signing-location" hidden>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>
+    <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
+    </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>
+</div>
+<div class="question-well" id="signing-location-separately" hidden>
+    <h3>Select where you would like to swear/affirm (?) 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
+    </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>
+    <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
+    </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>
+</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
+        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" %}
+    </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>
+</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>
+</div>
+
+{% endblock %}
+
+{% block backToDashboard %}
+<!-- no back to dashboard -->
+{% endblock %}
+
+{% block formBack %}{% url 'overview' %}{% endblock %}
+{% block formNext %}{% url 'dashboard_nav' 'print_form' %}{% endblock %}
+
+{% block sidebarNav %}
+<!-- no sidebar -->
+{% endblock %}
+{% block sidebarText %}
+    {% include "dashboard/partials/sidebar_help.html" %}
+{% endblock %}

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

@@ -0,0 +1,188 @@
+{% extends 'base.html' %}
+
+{% block title %}{{ block.super }}: Overview{% endblock %}
+
+{% block progress %}{% include "partials/dashnav.html" with active_page=active_page %}{% endblock %}
+
+{% block content %}
+    <h1>Swear / Affirm Forms</h1>
+    {% if how_to_file == 'In-person' %}
+        <p>Now that you have reviewed and printed all of your forms, you’ll need to get your affidavits sworn / affirmed (?).</p>
+    {% elif how_to_file == 'Online' %}
+        <p>You must have a Court Filing Number in order to proceed with swearing / affirming (?) your affidavits. If you do not have a Court Filing
+            Number (?) return to the Wait for Court Filing Number step.</p>
+    {% else %}
+        <p>You must select whether you are filing online or in-person in the <a href="{% url 'dashboard_nav' 'sign_file_options' %}">Signing and
+            Filing Options</a> step.</p>
+    {% endif %}
+    <p>
+        You’ll need to have printed copies of the following form(s) with you for swearing / affirming (?):
+    </p>
+    <ul>
+        <li>Child Support Affidavit (F37)</li>
+        <li>Affidavit Desk Order Divorce Form (F38)</li>
+    </ul>
+    {% if how_to_sign == 'Together' and signing_location == 'Virtual' %}
+        <div>
+            <p>
+                You and your spouse will swear / affirm (?) together in a virtual session (?) with the court registry:
+            </p>
+            <p>
+                The process for a virtual session is as follows:
+            </p>
+            <ul>
+                <li>Have your Court Filing Number (?) ready (received when your initial filing is reviewed by the Court Registry)</li>
+                <li>A member of the court registry will be in touch with you individually to setup a virtual session</li>
+                <li>Have print outs of all of your affidavits ready to sign.</li>
+                <li>Have your photo ID ready to show.</li>
+                <li>The virtual session will involve a video call between you and the court registry member.</li>
+            </ul>
+            <p>
+                Once you have filed your documentation (see next step), a member of the court registry will be in touch soon to book your virtual
+                session.
+            </p>
+        </div>
+    {% elif how_to_sign == 'Separately' and signing_location_you == 'Virtual' and signing_location_spouse == 'Virtual' %}
+        <div>
+            <p>
+                You and your spouse will swear / affirm (?) in a virtual session (?) separately with the court registry:
+            </p>
+            <p>
+                The process for a virtual session is as follows:
+            </p>
+            <ul>
+                <li>Have your Court Filing Number (?) ready (received when your initial filing is reviewed by the Court Registry)</li>
+                <li>A member of the court registry will be in touch with you individually to setup a virtual session</li>
+                <li>Have print outs of all of your affidavits ready to sign.</li>
+                <li>Have your photo ID ready to show.</li>
+                <li>The virtual session will involve a video call between you and the court registry member.</li>
+            </ul>
+            <p>
+                Once you have filed your documentation (see next step), a member of the court registry will be in touch soon to book your virtual
+                session.
+            </p>
+        </div>
+    {% elif how_to_sign == 'Together' and signing_location == 'In-person' %}
+        <div>
+            <p>
+                You and your spouse will swear / affirm (?) together with a commissioner (?):
+            </p>
+            <p>
+                Prepare for your swearing by ensuring you:
+            </p>
+            <ul>
+                <li>Have print outs of all of your affidavits ready to sign</li>
+                <li>Have your photo ID ready to show.</li>
+            </ul>
+            <p>
+                If you are planning to sign / swear at the court registry then additionally you should:
+            </p>
+            <ul>
+                <li>Have print outs of all your completed documentation with you</li>
+                <li>You will be able to complete filing of your documentation at the same time as filing</li>
+            </ul>
+            <p>
+                If you are planning to sign / swear with lawyer, notary or other commissioner please contact them directly.
+            </p>
+        </div>
+    {% elif how_to_sign == 'Separately' and signing_location_you == 'In-person' and signing_location_spouse == 'In-person' %}
+        <div>
+            <p>
+                You and your spouse will swear / affirm (?) separately with a commissioner (?):
+            </p>
+            <p>
+                Prepare for your swearing by ensuring you:
+            </p>
+            <ul>
+                <li>Have print outs of all of your affidavits ready to sign</li>
+                <li>Have your photo ID ready to show.</li>
+            </ul>
+            <p>
+                If you are planning to sign / swear at the court registry then additionally you should:
+            </p>
+            <ul>
+                <li>Have print outs of all your completed documentation with you</li>
+                <li>You will be able to complete filing of your documentation at the same time as filing</li>
+                <li>Once you have filed, your spouse will be able to sign / swear and file their affidavits at the court registry.</li>
+                <li>Your spouse will require the Court Filing Number (?) provided to you at the time of your filing.</li>
+            </ul>
+            <p>
+                If you are planning to sign / swear with lawyer, notary or other commissioner please contact them directly.
+            </p>
+        </div>
+    {% elif how_to_sign == 'Separately' and signing_location_you == 'Virtual' and signing_location_spouse == 'In-person' %}
+        <div>
+            <p>You will swear / affirm (?) in a virtual session (?) with the court registry:</p>
+            <p>The process for a virtual session is as follows:</p>
+            <ul>
+                <li>Have your Court Filing Number (?) ready (received when your initial filing is reviewed by the Court Registry)</li>
+                <li>A member of the court registry will be in touch with you individually to setup a virtual session</li>
+                <li>Have print outs of all of your affidavits ready to sign.</li>
+                <li>Have your photo ID ready to show.</li>
+                <li>The virtual session will involve a video call between you and the court registry member.</li>
+            </ul>
+            <p>Once you have filed your documentation (see next step), a member of the court registry will be in touch soon to book your virtual
+                session.</p>
+            <hr/>
+            <p>Your spouse will swear / affirm (?) with a commissioner (?):</p>
+            <p>Have your spouse prepare for their swearing by ensuring they:</p>
+            <ul>
+                <li>Have print outs of all of affidavits ready to sign</li>
+                <li>Have your photo ID ready to show.</li>
+            </ul>
+            <p>If they are planning to sign / swear at the court registry then additionally they should:</p>
+            <ul>
+                <li>Have your Court Filing Number (?) ready (received when your initial filing is reviewed by the Court Registry)</li>
+                <li>Have print outs of all completed documentation with them</li>
+                <li>Your will be able to complete filing of your documentation at the same time as filing</li>
+            </ul>
+            <p>If they are planning to sign / swear with lawyer, notary or other commissioner please contact them directly.</p>
+        </div>
+    {% elif how_to_sign == 'Separately' and signing_location_you == 'In-person' and signing_location_spouse == 'Virtual' %}
+        <div>
+            <p>You will swear / affirm (?) with a commissioner (?):</p>
+            <p>Prepare for your swearing by ensuring you:</p>
+            <ul>
+                <li>Have print outs of all of affidavits ready to sign</li>
+                <li>Have your photo ID ready to show.</li>
+            </ul>
+            <p>If you are planning to sign / swear at the court registry then additionally you should:</p>
+            <ul>
+                <li>Have print outs of all completed documentation with you</li>
+            </ul>
+            <p>If they are planning to sign / swear with lawyer, notary or other commissioner please contact them directly.</p>
+            <hr/>
+            <p>Your spouse will swear / affirm (?) in a virtual session (?) with the court registry:</p>
+            <p>The process for a virtual session is as follows:</p>
+            <ul>
+                <li>Have your Court Filing Number (?) ready (received when your initial filing is reviewed by the Court Registry)</li>
+                <li>A member of the court registry will be in touch with your spouse individually to setup a virtual session</li>
+                <li>Have print outs of all of your spouse’s affidavits ready to sign.</li>
+                <li>Have your spouse’s photo ID ready to show.</li>
+                <li>The virtual session will involve a video call between your spouse and a court registry member.</li>
+            </ul>
+            <p>Once you have filed your initial documentation (see next step), a member of the court registry will be in touch soon to book your
+                spouse’s virtual session.</p>
+        </div>
+    {% endif %}
+{% endblock %}
+
+{% block backToDashboard %}
+    <!-- no back to dashboard -->
+{% endblock %}
+
+{% block formBack %}
+    {% if how_to_file == 'Online' %}
+        {% url 'dashboard_nav' 'initial_filing' %}
+    {% else %}
+        {% url 'dashboard_nav' 'print_form' %}
+    {% endif %}
+{% endblock %}
+{% block formNext %}{% url 'dashboard_nav' 'final_filing' %}{% endblock %}
+
+{% block sidebarNav %}
+    <!-- no sidebar -->
+{% endblock %}
+{% block sidebarText %}
+    {% include "dashboard/partials/sidebar_help.html" %}
+{% endblock %}

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

@@ -0,0 +1,50 @@
+{% extends 'base.html' %}
+
+{% block title %}{{ block.super }}: Overview{% endblock %}
+
+{% block progress %}{% include "partials/dashnav.html" with active_page=active_page %}{% endblock %}
+
+{% block content %}
+    <h1>Wait for Court Filing Number</h1>
+    <p>
+        You’ve successfully completed your initial filing with the Court Registry.
+    </p>
+    <p>
+        Your CSO Online Package # (?) is 123-456-789
+    </p>
+    <p>
+        You can view the following items at any time:
+    </p>
+    <ul>
+        <li>Your eFiling Receipt on the CSO eFiling Hub</li>
+        <li>The package of all documents you have filed at the CSO eFiling Hub</li>
+    </ul>
+    <p>
+        In order to complete your divorce you’ll need to file the final set of documents. To do this you’ll require a Court Filing Number (?) which
+        will
+        be provided from the Court Registry once they have reviewed and approval your initial filing. This review can take up to a week to complete.
+        You’ll receive an e-mail with details of your initial filing.
+    </p>
+    <p>
+        If you have any questions or concerns about your initial filing, please contact CSO Online Support at Courts.CSO@gov.bc.ca and include your
+        Online
+        Package # (?).
+    </p>
+    <p>
+        Once you have received your Court Filing Number via e-mail, click Next to proceed with the remaining steps in the process.
+    </p>
+{% endblock %}
+
+{% block backToDashboard %}
+    <!-- no back to dashboard -->
+{% endblock %}
+
+{% block formBack %}{% url 'dashboard_nav' 'initial_filing' %}{% endblock %}
+{% block formNext %}{% url 'dashboard_nav' 'swear_forms' %}{% endblock %}
+
+{% block sidebarNav %}
+    <!-- no sidebar -->
+{% endblock %}
+{% block sidebarText %}
+    {% include "dashboard/partials/sidebar_help.html" %}
+{% endblock %}

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

@@ -6,21 +6,35 @@
         <span class="progress-icon"><i class="fa fa-file-text-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-content">Signing & Filing Options</span>
+    </a>
     <a href="{% url 'dashboard_nav' 'print_form' %}" class="progress-question {% if active_page == 'print_form' %} active {% endif %}">
         <span class="progress-icon"><i class="fa fa-print" aria-hidden="true"></i></span>
         <span class="progress-content">Review and Print Forms</span>
     </a>
-    <a href="{% url 'dashboard_nav' 'file_documents' %}" class="progress-question {% if active_page == 'file_documents' %} active {% endif %}">
-        <span class="progress-icon"><i class="fa fa-folder-open" aria-hidden="true"></i></span>
-        <span class="progress-content">File Documents</span>
+{% 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-content">Initial Filing</span>
     </a>
-    <a href="{% url 'dashboard_nav' 'wait' %}" class="progress-question {% if active_page == 'wait' %} active {% endif %}">
+    <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-content">Wait</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-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-content">Final Filing</span>
     </a>
-    <a href="{% url 'dashboard_nav' 'check_with_registry' %}" class="progress-question {% if active_page == 'check_with_registry' %} active {% endif %}">
+    <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-content">Check with Registry</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>

edivorce/apps/core/templates/question/12_review.html

@@ -250,7 +250,7 @@
 {% endblock %}
 
 {% block formBack %}{% prev_step step='review' %}{% endblock %}
-{% block formNext %}{% url 'dashboard_nav' 'print_form' %}{% endblock %}
+{% block formNext %}{% url 'dashboard_nav' 'sign_file_options' %}{% endblock %}
 {% block nextButtonAttribute %}{% if derived.any_errors %}disabled{% endif %}{% endblock %}
 
 {% block sidebarNav %}

edivorce/fixtures/Question.json

@@ -1686,5 +1686,75 @@
     },
     "model": "core.question",
     "pk": "name_change_spouse_fullname"
+},
+{
+    "fields": {
+        "name": "Select how you would like to swear/affirm your affidavit(s)?",
+        "description": "E-filing prototype",
+        "summary_order": 157,
+        "required": ""
+    },
+    "model": "core.question",
+    "pk": "how_to_sign"
+},
+{
+    "fields": {
+        "name": "Select how you would like to file your documents",
+        "description": "E-filing prototype",
+        "summary_order": 158,
+        "required": ""
+    },
+    "model": "core.question",
+    "pk": "how_to_file"
+},
+{
+    "fields": {
+        "name": "Select where you would like to swear/affirm your affidavit(s)",
+        "description": "E-filing prototype",
+        "summary_order": 159,
+        "required": ""
+    },
+    "model": "core.question",
+    "pk": "signing_location"
+},
+{
+    "fields": {
+        "name": "Select where you would like to swear/affirm your affidavit(s)",
+        "description": "E-filing prototype",
+        "summary_order": 160,
+        "required": ""
+    },
+    "model": "core.question",
+    "pk": "signing_location_you"
+},
+{
+    "fields": {
+        "name": "Select where your spouse would like to swear/affirm your affidavit(s)",
+        "description": "E-filing prototype",
+        "summary_order": 161,
+        "required": ""
+    },
+    "model": "core.question",
+    "pk": "signing_location_spouse"
+},
+{
+    "fields": {
+        "name": "E-mail Address for You",
+        "description": "E-filing prototype",
+        "summary_order": 162,
+        "required": ""
+    },
+    "model": "core.question",
+    "pk": "email_you"
+},
+{
+    "fields": {
+        "name": "E-mail Address for Your Spouse",
+        "description": "E-filing prototype",
+        "summary_order": 163,
+        "required": ""
+    },
+    "model": "core.question",
+    "pk": "email_spouse"
 }
 ]

manage.py

@@ -4,12 +4,17 @@ import sys
 
 if __name__ == "__main__":
 
+    from django.core.management import execute_from_command_line
+
     # check if the app is running on OpenShift
     if not os.environ.get('OPENSHIFT_BUILD_NAMESPACE', False):
         os.environ.setdefault("DJANGO_SETTINGS_MODULE", "edivorce.settings.local")
     else:
         os.environ.setdefault("DJANGO_SETTINGS_MODULE", "edivorce.settings.openshift")
 
-    from django.core.management import execute_from_command_line
+        # run npm_build (custom management command) when collectstatic is called in 
+        # the S2I assemble script
+        if sys.argv[1] == 'collectstatic':
+            execute_from_command_line(['manage.py','npm_build'])
 
     execute_from_command_line(sys.argv)

vue/.browserslistrc

@@ -0,0 +1,3 @@
+> 1%
+last 2 versions
+not dead

vue/.gitignore

@@ -0,0 +1,23 @@
+.DS_Store
+node_modules
+/dist
+
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

vue/README.md

@@ -0,0 +1,19 @@
+# edivorce-uploader
+
+## Project setup
+```
+npm install
+```
+
+### Compiles and hot-reloads for development
+```
+npm run serve
+```
+
+### Compiles and minifies for production
+```
+npm run build
+```
+
+### Customize configuration
+See [Configuration Reference](https://cli.vuejs.org/config/).

vue/babel.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset'
+  ]
+}

vue/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "edivorce-uploader",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build"
+  },
+  "dependencies": {
+    "core-js": "^3.6.5",
+    "vue": "^2.6.11",
+    "vue-upload-component": "^2.8.20"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "~4.5.0",
+    "@vue/cli-service": "~4.5.0",
+    "node-sass": "^4.14.1",
+    "sass-loader": "^10.0.2",
+    "vue-template-compiler": "^2.6.11"
+  }
+}

vue/public/final-filing.html

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title><%= htmlWebpackPlugin.options.title %></title>
+    <script src="https://kit.fontawesome.com/bc96869e8a.js" crossorigin="anonymous"></script>
+  </head>
+  <body>
+    <div id="vue-app">
+      <final-filing-uploader 
+          signing-location="Virtual"
+          signing-location-you="Virtual"
+          signing-location-spouse="Virtual"
+          how-to-sign="Together"
+          how-to-file="Online"
+          sign-file-options-url="https://wwww.google.com"
+          print-form-url="https://wwww.facebook.com">
+      </final-filing-uploader>
+    </div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>

vue/public/initial-filing.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title><%= htmlWebpackPlugin.options.title %></title>
+    <script src="https://kit.fontawesome.com/bc96869e8a.js" crossorigin="anonymous"></script>
+  </head>
+  <body>
+    <div id="vue-app">
+      <initial-filing-uploader 
+          signing-location="In-person"
+          you-signing-location="In-person"
+          spouse-signing-location="In-person">
+      </initial-filing-uploader>
+    </div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>

vue/src/components/ItemTile.vue

@@ -0,0 +1,114 @@
+<template>
+  <div class="item-tile">
+    <div class="image-wrap">
+      <img v-if="file.blob" :src="file.blob" height="auto" />
+      <button type="button"class="btn-remove" @click.prevent="$emit('remove')" aria-label="Delete">
+        <i class="fa fa-times-circle"></i>
+      </button>
+    </div>
+    <div class="bottom-wrapper">
+      <div class="item-text">
+      {{file.name}} ({{ Math.round(file.size/1024 * 100) / 100 }}KB)
+      </div>
+      <div class="button-wrapper">
+        <button type="button" @click.prevent="$emit('moveup')" :disabled="index === 0" aria-label="Move down one position">
+          <i class="fa fa-chevron-circle-left"></i>
+        </button>
+        <button type="button" @click.prevent="$emit('movedown')" :disabled="index >= (fileCount - 1)" aria-label="Move up one position">
+          <i class="fa fa-chevron-circle-right"></i>
+        </button>
+        <button type="button" aria-label="Rotate counter-clockwise">
+          <i class="fa fa-undo"></i>
+        </button>
+        <button type="button" aria-label="Rotate clockwise">
+          <i class="fa fa-undo fa-flip-horizontal"></i>
+        </button>    
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    file: Object,
+    index: Number,
+    fileCount: Number
+  }
+}
+</script>
+
+<style scoped lang="scss">
+    .item-tile {
+      margin-bottom: 5px;
+      position: relative;
+
+      .image-wrap {
+        height: 160px;
+        overflow-y: hidden;
+        border: 1px solid black;
+        border-top-left-radius: 6px;
+        border-top-right-radius: 6px;
+        background-color: white;
+      }
+
+      .item-text {
+        text-align: center;
+        min-height: 75px;
+        max-height: 75px;
+        overflow: hidden;
+        padding: 5px;
+        line-height: 1.05;
+        font-size: 0.95em;
+      }
+
+      .button-wrapper {
+        text-align: center;
+      }
+
+      .bottom-wrapper {
+        border-bottom-left-radius: 6px;
+        border-bottom-right-radius: 6px;
+        border: 1px solid silver;
+        background-color: #F2F2F2;
+        margin-bottom: 10px;
+      }
+
+      img {
+        width: 98%;
+      }
+
+      button {
+        position: relative; 
+        z-index: 2;
+        background-color: transparent;
+        border: none;
+        outline: none;
+        font-size: 22px;
+        padding: 0;
+        margin-right: 16px;
+
+        i.fa {
+          color: #003366;
+        }
+
+        &:last-of-type {
+          margin-right: 0;
+        }
+
+        &:nth-of-type(2) {
+          margin-right: 32px;
+        }
+
+        &.btn-remove {
+          position: absolute;
+          top: 125px;
+          left: 130px;
+
+         i.fa {
+          color: #365EBE;
+         }
+        }
+      }
+    }
+</style>

vue/src/components/Uploader.vue

@@ -0,0 +1,200 @@
+<template>
+<div>
+  <h5 class="uploader-label">
+    {{ formInfo.preText }} <a href="#">{{ formInfo.name }} <i class="fa fa-question-circle"></i></a>
+    <strong v-if="party === 1"> - For You</strong>
+    <strong v-if="party === 2"> - For Your Spouse</strong>
+  </h5>  
+  <label :for="inputId" class="sr-only">
+    {{ formInfo.preText }} {{ formInfo.name }} 
+    <span v-if="party === 1"> - For You</span>
+    <span v-if="party === 2"> - For Your Spouse</span>
+  </label>
+  <div @dragover="draggingOn" @dragenter="draggingOn" @dragleave="draggingOff" @dragend="draggingOff" @drop="draggingOff">
+    <file-upload
+      ref="upload"
+      v-model="files"
+      :multiple="true"
+      :drop="true"
+      :drop-directory="false"
+      post-action="/post.method"
+      put-action="/put.method"
+      @input-file="inputFile"
+      @input-filter="inputFilter"
+      :input-id="inputId"
+      :class="['drop-zone', dragging ? 'dragging' : '']">
+    <div v-if="files.length === 0" class="placeholder">
+      <i class="fa fa-plus-circle"></i><br>
+      <em>Drag and Drop the PDF document or JPG pages here,<br>or click here to Browse for files.</em>
+    </div>
+    <div v-else class="items">
+      <div v-for="(file, index) in files" v-bind:key="index" class="item">
+        <item-tile
+          :file="file"
+          :index="index"
+          :file-count="files.length"
+          @remove="remove(file)"
+          @moveup="moveUp(index)"
+          @movedown="moveDown(index)"/>
+      </div>
+      <div class="item upload-button">
+        <div class="upload-button-wrapper">
+        <i class="fa fa-plus-circle"></i>
+        </div>
+      </div>      
+    </div>
+    </file-upload>
+  </div>
+</div>
+</template>
+
+<script>
+import VueUploadComponent from 'vue-upload-component'
+import ItemTile from './ItemTile'
+import Forms from "../utils/forms";
+
+export default {
+  props: {
+    docType: String,
+    party: { type: Number, default: 0 }
+  },
+  data: function () {
+    return {
+      files: [],
+      dragging: false
+    }
+  },
+  components: {
+    FileUpload: VueUploadComponent,
+    ItemTile
+  },
+  computed: {
+    inputId() {
+      if (this.party === 0) {
+        return "Uploader-" + this.docType;
+      }
+      return "Uploader-" +  this.docType + this.party;
+    },
+    formInfo() {
+      debugger;
+      return Forms[this.docType];
+    }
+  },
+  methods: {
+    /**
+     * Has changed
+     * @param  Object|undefined   newFile   Read only
+     * @param  Object|undefined   oldFile   Read only
+     * @return undefined
+     */
+    inputFile(newFile, oldFile) {
+      if (newFile && oldFile && !newFile.active && oldFile.active) {
+        // Get response data
+        console.log('response', newFile.response)
+        if (newFile.xhr) {
+          //  Get the response status code
+          console.log('status', newFile.xhr.status)
+        }
+      }
+    },
+    /**
+     * Pretreatment
+     * @param  Object|undefined   newFile   Read and write
+     * @param  Object|undefined   oldFile   Read only
+     * @param  Function           prevent   Prevent changing
+     * @return undefined
+     */
+    inputFilter(newFile, oldFile, prevent) {
+      if (newFile && !oldFile) {
+        // Filter non-image file
+        if (!/\.(jpeg|jpg|png|pdf)$/i.test(newFile.name)) {
+          return prevent()
+        }
+      }
+
+      // Create a blob field
+      if (newFile) {
+        newFile.blob = ''
+        let URL = window.URL || window.webkitURL
+        if (URL && URL.createObjectURL) {
+          newFile.blob = URL.createObjectURL(newFile.file)
+        }
+      }
+    },
+    remove(file) {
+      this.$refs.upload.remove(file)
+    },
+    moveUp(old_index) {
+      if (old_index >= 1 && this.files.length > 1) {
+        this.files.splice(old_index - 1, 0, this.files.splice(old_index, 1)[0]);
+      }
+    },
+    moveDown(old_index) {
+      if (old_index <= this.files.length && this.files.length > 1) {
+        this.files.splice(old_index + 1, 0, this.files.splice(old_index, 1)[0]);
+      }
+    },
+    draggingOn() {
+      this.dragging = true;
+    },
+    draggingOff() {
+      this.dragging = false;
+    }    
+  }
+}
+</script>
+
+<style scoped lang="scss">
+  .drop-zone {
+    background-color: white;
+    width: 100%;
+    display: block;
+    text-align: left;
+    border: 2px #365EBE dashed;
+    border-radius: 6px;
+    padding: 18px;
+
+    &.dragging {
+      background-color: #F2E3F2;
+    }
+
+    .item {
+      margin-bottom: 10px;
+      width: 160px;
+      display: inline-block;
+      margin-right: 18px;
+
+      &.upload-button {
+        width: 15px;
+
+        .upload-button-wrapper {
+          position: relative;
+          top: -110px;
+        }
+      }
+    }
+
+    .fa-plus-circle {
+      font-size: 3rem;
+      margin-bottom: 8px;
+      color: #365EBE;
+    }
+
+    .placeholder {
+      text-align: center;
+    }
+  }
+
+  
+ h5.uploader-label {
+   display: block;   
+   margin-top: 12px;
+   margin-bottom: 8px;
+   font-weight: normal;
+   font-size: 1em;
+
+   a {
+     font-weight: bold;;
+   }
+ }
+</style>

vue/src/pages/final-filing/FinalFiling.vue

@@ -0,0 +1,184 @@
+<template>
+  <div id="app">
+    <div class="question-well-border-less" v-if="signingLocation === 'Virtual'">
+      <div>
+        <!-- CSA - Child Support Affidavit -->            
+        <Uploader doc-type="CSA"/>
+      </div>
+      <div>
+        <!-- AFDO - Affidavit - Desk Order Divorce -->            
+        <Uploader doc-type="AFDO"/>
+      </div>
+    </div>
+    <div class="question-well-border-less" v-else-if="signingLocationYou === 'Virtual' && signingLocationSpouse === 'Virtual'">
+      <div>
+        <!-- CSA - Child Support Affidavit -->
+        <Uploader doc-type="CSA" :party="1"/>
+      </div>
+      <div>
+        <!-- AFDO - Affidavit - Desk Order Divorce -->
+        <Uploader doc-type="AFDO" :party="1"/>
+      </div>
+      <div>
+        <!-- CSA - Child Support Affidavit -->
+        <Uploader doc-type="CSA" :party="2"/>        
+      </div>
+      <div>
+        <!-- AFDO - Affidavit - Desk Order Divorce -->            
+        <Uploader doc-type="AFDO" :party="2"/>
+      </div>
+    </div>
+    <template v-else-if="howToFile === 'Online'">
+      <div class="question-well-border-less" v-if="signingLocation.length || (signingLocationYou.length && signingLocationSpouse.length)">
+        <p>Missing a form required on this page? Check the <a :href="printFormUrl">Review Forms</a> step.</p>
+        <p>The following forms will be automatically filed for you:</p>
+        <ul>
+          <li>Requisition Form (F35)</li>
+          <li>Certificate of Pleadings Form (F36)</li>
+        </ul>
+        <div>
+          <!-- CSA - Child Support Affidavit -->
+          <Uploader doc-type="CSA"/>
+        </div>
+        <div>
+          <!-- AFDO - Affidavit - Desk Order Divorce -->
+          <Uploader doc-type="AFDO"/>
+        </div>
+        <div>
+          <!-- OFI - Final Order -->
+          <Uploader doc-type="OFI"/>
+        </div>
+        <div>
+          <!-- EFSS - Electronic Filing Statement - Supreme -->          
+          <Uploader doc-type="EFSS"
+            :party="1"
+            post-text=" - For You"/>
+        </div>
+        <div>
+          <!-- EFSS - Electronic Filing Statement - Supreme -->
+          <Uploader doc-type="EFSS" :party="2"/>
+        </div>
+        <div>
+          <!-- AAI - Agreement as to Annual Income -->
+          <Uploader doc-type="AAI"/>
+        </div>
+        <div>
+          <!-- NCV – Name Change Form – Vital Statistics -->
+          <Uploader doc-type="NCV" :party="1"/>
+        </div>
+        <div>
+          <!-- NCV – Name Change Form – Vital Statistics -->
+          <Uploader doc-type="NCV" :party="2"/>
+        </div>
+      </div>
+      <div class="question-well-border-less" v-else>
+        <h2>You need to select a signing method in the <a :href="signFileOptionsUrl">Signing & Filing Options</a>
+          step.</h2>
+      </div>
+    </template>
+    <template v-else-if="howToSign === 'Together'">
+      <div>
+        <p>Staple each form together and then fasten all forms with a paper clip, in the following order:</p>
+        <ul>
+          <li>Notice of Joint Family Claim Form (F1)</li>
+          <li>Requisition Form (F35)</li>
+          <li>Draft Final Order Form (F52)</li>
+          <li>Certificate of Pleadings Form (F36)</li>
+          <li>Child Support Affidavit (F37) signed by claimants</li>
+          <li>Affidavit Desk Order Divorce (F38) signed by both claimants</li>
+          <li>Agreement as to Annual Income (F9)</li>
+        </ul>
+        <p>Also ensure you bring the following additional documentation:</p>
+        <ul>
+          <li>Proof of marriage</li>
+          <li>Registration of Joint Divorce Proceedings (JUS280)</li>
+          <li>Identification of Applicant (VSA 512) for Claimant 1 ([Name])</li>
+          <li>Identification of Applicant (VSA 512) for Claimant 2 ([Name])</li>
+          <li>Agreement as to Annual Income (F9)</li>
+        </ul>
+        <p>If you have other court orders or a written separation agreement, they should also be attached to your Affidavit — Desk Order Divorce
+          Form</p>
+        <p>(F38). Note that these agreements or orders must not contradict what's in your divorce application.</p>
+        <p>You have indicated that you will file at the following court registry:</p>
+        <p>[City]</p>
+        <p>[Address]</p>
+        <p>[Postal Code]</p>
+        <p>Once sign / sworn and filed, you will receive a Court Filing Number <i class="fa fa-question-circle"></i>. This number will be used if you need to file any
+          additional documentation.</p>
+      </div>
+    </template>
+    <template v-else-if="howToSign === 'Separately'">
+      <div class="question-well-border-less">
+        <p>Staple each form together and then fasten all forms with a paper clip, in the following order:</p>
+        <ul>
+          <li> Notice of Joint Family Claim Form (F1)</li>
+          <li> Requisition Form (F35)</li>
+          <li> Draft Final Order Form (F52)</li>
+          <li> Certificate of Pleadings Form (F36)</li>
+          <li> Child Support Affidavit (F37) signed by you</li>
+          <li> Affidavit Desk Order Divorce (F38) signed by you</li>
+          <li> Agreement as to Annual Income (F9)</li>
+        </ul>
+        <br>
+        <p>Also ensure you bring the following additional documentation:</p>
+        <ul>
+          <li> Proof of marriage</li>
+          <li> Registration of Joint Divorce Proceedings (JUS280)</li>
+          <li> Identification of Applicant (VSA 512) for Claimant 1 ([Name])</li>
+          <li> Agreement as to Annual Income (F9)</li>
+        </ul>
+        <p>If you have other court orders or a written separation agreement, they should also be attached to your Affidavit — Desk Order Divorce
+          Form</p>
+        <p>(F38). Note that these agreements or orders must not contradict what's in your divorce application.</p>
+        <p>You have indicated that you will file at the following court registry:</p>
+        <p>[City]</p>
+        <p>[Address]</p>
+        <p>[Postal Code]</p>
+        <p>Once sign / sworn and filed, you will receive a Court Filing Number <i class="fa fa-question-circle"></i>. This number will be used if you need to file any
+          additional documentation.</p>
+        <h2>Spousal Documentation Requirements</h2>
+        <p>The following sworn / affirmed affidavits still remains to be filed:</p>
+        <ul>
+          <li> Child Support Affidavit (F37) - signed by your spouse</li>
+          <li> Affidavit - Desk Order Divorce Form (F38) - signed by your spouse</li>
+          <li> Identification of Applicant (VSA 512) - for your Spouse</li>
+        </ul>
+        <p>Either you or your spouse must file this documentation using the Court Filing Number <i class="fa fa-question-circle"></i> that you received via e-mail. If you have
+          not received a Court Filing Number then please check to the Wait for Court Filing Number step.</p>
+        <p>You have indicated that you will file at the following court registry:</p>
+        <p>[City]</p>
+        <p>[Address]</p>
+        <p>[Postal Code]</p>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script>
+import Uploader from '../../components/Uploader.vue';
+
+export default {
+  name: 'App',
+  components: {
+    Uploader
+  },
+  props: {
+    signingLocation: String, 
+    signingLocationYou: String, 
+    signingLocationSpouse: String, 
+    howToSign: String, 
+    howToFile: String, 
+    signFileOptionsUrl: String, 
+    printFormUrl: String
+  }
+}
+</script>
+
+<style scoped lang="scss">
+  .question-well-border-less {
+    padding: 10px 20px 30px 20px;
+    background-color: #F2F2F2;
+    border: 1px solid #DDD;
+    border-radius: 6px;
+  }
+</style>

vue/src/pages/final-filing/main.js

@@ -0,0 +1,9 @@
+import Vue from 'vue';
+import App from './FinalFiling.vue';
+
+Vue.config.productionTip = false;
+Vue.component("final-filing-uploader", App);
+
+new Vue({ 
+  el: '#vue-app' 
+});

vue/src/pages/initial-filing/InitialFiling.vue

@@ -0,0 +1,147 @@
+<template>
+  <div class="question-well-border-less" id="app">
+    <template v-if="signingLocation === 'In-person' || signingLocationYou === 'In-person'">
+      <div>
+        <div>
+          <p>The Notice of Joint Family Claim Form (F1) will be automatically filed for you.</p>
+        </div>
+        <div>
+          <!-- MC - Marriage Certificate -->
+          <Uploader doc-type="MC"/>
+        </div>
+        <div>
+          <!-- AFTL - Affidavit of Translator -->
+          <Uploader doc-type="AFTL"/>
+        </div>
+        <div>
+          <!-- RDP - Registration of Divorce Proceeding -->              
+          <Uploader doc-type="RDP"/>
+        </div>
+      </div>
+    </template>
+    <template v-else-if="signingLocationYou === 'Virtual' && signingLocationSpouse === 'In-person'">
+      <div>
+          <p>The following forms will be automatically filed for you:</p>
+          <ul>
+            <li>Notice of Joint Family Claim Form (F1)</li>
+            <li>Requisition Form (F35)</li>
+            <li>Certificate of Pleadings Form (F36)</li>
+          </ul>
+          <p>The following forms will be submitted for you but require swearing / affirming <i class="fa fa-question-circle"></i> before filing (see next step for details)</p>
+          <ul>
+            <li>Child Support Affidavit (F37)</li>
+            <li>Affidavit - Desk Order Divorce Form (F38)</li>
+          </ul>
+          <div class="question-well-border-less">
+            <div>
+              <!-- MC - Marriage Certificate -->              
+              <Uploader doc-type="MC"/>
+            </div>
+            <div>
+              <!-- AFTL - Affidavit of Translator -->              
+              <Uploader doc-type="AFTL"/>
+            </div>
+            <div>
+              <!-- OFI - Final Order -->
+              <Uploader doc-type="OFI"/>
+            </div>
+            <div>
+              <!-- EFSS - Electronic Filing Statement - Supreme -->          
+              <Uploader doc-type="EFSS" :party="1"/>
+            </div>
+            <div>
+              <!-- RDP - Registration of Divorce Proceeding -->              
+              <Uploader doc-type="RDP"/>
+            </div>
+            <div>
+              <!-- AAI - Agreement as to Annual Income -->
+              <Uploader doc-type="AAI"/>
+            </div>
+            <div>
+              <!-- NCV – Name Change Form – Vital Statistics -->
+              <Uploader doc-type="NCV" :party="1"/>
+            </div>
+          </div>
+        </div>
+      </template>
+      <template v-else>
+        <div>
+          <p>The following forms will be automatically filed for you:</p>
+          <ul>
+            <li>Notice of Joint Family Claim Form (F1)</li>
+            <li>Requisition Form (F35)</li>
+            <li>Certificate of Pleadings Form (F36)</li>
+          </ul>
+          <p>The following forms will be submitted for you but require swearing / affirming <i class="fa fa-question-circle"></i> before filing (see next step for details)</p>
+          <ul>
+            <li>Child Support Affidavit (F37)</li>
+            <li>Affidavit - Desk Order Divorce Form (F38)</li>
+          </ul>
+          <div class="question-well-border-less">
+            <div>
+              <!-- MC - Marriage Certificate -->              
+              <Uploader doc-type="MC"/>
+            </div>
+            <div>
+              <!-- AFTL - Affidavit of Translator -->              
+              <Uploader doc-type="AFTL"/>
+            </div>
+            <div>
+              <!-- OFI - Final Order -->
+              <Uploader doc-type="OFI"/>
+            </div>
+            <div>
+              <!-- EFSS - Electronic Filing Statement - Supreme -->          
+              <Uploader doc-type="EFSS" :party="1"/>
+            </div>
+            <div>
+              <!-- EFSS - Electronic Filing Statement - Supreme -->
+              <Uploader doc-type="EFSS" :party="2"/>
+            </div>
+            <div>
+              <!-- RDP - Registration of Divorce Proceeding -->              
+              <Uploader doc-type="RDP"/>
+            </div>
+            <div>
+              <!-- AAI - Agreement as to Annual Income -->
+              <Uploader doc-type="AAI"/>
+            </div>
+            <div>
+              <!-- NCV – Name Change Form – Vital Statistics -->
+              <Uploader doc-type="NCV" :party="1"/>
+            </div>
+            <div>
+              <!-- NCV – Name Change Form – Vital Statistics -->
+              <Uploader doc-type="NCV" :party="2"/>
+            </div>
+          </div>
+        </div>
+      </template>
+  </div>
+</template>
+
+<script>
+import Uploader from '../../components/Uploader.vue';
+import Forms from "../../utils/forms";
+
+export default {
+  name: 'App',
+  components: {
+    Uploader
+  },
+  props: {
+    signingLocation: String,
+    signingLocationYou: String,
+    signingLocationSpouse: String
+  }
+}
+</script>
+
+<style scoped lang="scss">
+  .question-well-border-less {
+    padding: 10px 20px 30px 20px;
+    background-color: #F2F2F2;
+    border: 1px solid #DDD;
+    border-radius: 6px;
+  }
+</style>

vue/src/pages/initial-filing/main.js

@@ -0,0 +1,9 @@
+import Vue from 'vue';
+import App from './InitialFiling.vue';
+
+Vue.config.productionTip = false;
+Vue.component("initial-filing-uploader", App);
+
+new Vue({ 
+  el: '#vue-app' 
+});

vue/src/utils/forms.js

@@ -0,0 +1,47 @@
+export default {
+  "AAI": {
+    name: "Agreement as to Annual Income (F9)",
+    preText: "Complete, scan and upload the",
+    help: "This form is used if both you and your spouse agree on the income of the person who will be paying child support. It is used instead of a Financial Statement (F8) if you need to provide the court with proof of income. - Does not require signatures."
+  },
+  "AFDO": {
+    name: "Affidavit - Desk Order Divorce Form (F38)",
+    preText: "Upload the sworn/affirmed and scanned",
+    help: "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. - Required swearing/affirming and signatures by both you and your spouse in front of a commissioner."
+  },  
+  "AFTL": {
+    name:"Affidavit of Interpreter Form", 
+    preText:"Scan and upload the sworn",
+    help:"HELP TEXT MISSING FROM WIREFRAMES."
+  },
+  "CSA": {
+    name:"Child Support Affidavit (F37)", 
+    preText:"Upload the sworn/affirmed and scanned",
+    help:"This form gives facts about your children and child support, including the order you're asking the court for. You must also attach your separation agreement or court orders about children to this form as exhibits.  - Required swearing/affiming and signatures by both you and your spouse in front of a commissioner."
+  },
+  "EFSS": {
+    name: "Electronic Filing Statement (F96)",
+    preText: "Upload the signed and scanned",
+    help: "This form is used to confirm that the document you are filing electronically shows your original signature and is a true copy of the original paper version of the document. - Requires signature by both you and your spouse (but not a signature in front of a commissioner)"
+  },
+  "MC": {
+    name:"Proof of Marriage", 
+    preText:"Upload a scan of your",
+    help:"To get a divorce, you need an original marriage certificate or certified true copy of your registration of marriage to prove you are married. There are other options described in this tool if you can't get a copy of your marriage certificate or registration of marriage.  - Does not require signatures."
+  },
+  "NCV": {
+    name: "Identification of Applicant (VSA 512)",
+    preText: "Complete, scan and upload the",
+    help: "This form is used by the Court to notify Vital Statistics of court-ordered legal changes of name. - Does not require signatures."
+  },
+  "OFI": {
+    name: "Draft Final Order Form (F52)",
+    preText: "Upload the signed and scanned",
+    help: "This will be your divorce order once the judge has signed it. It sets out the court order. - Requires signature by both you and your spouse (but not a signature in front of a commissioner)"
+  },
+  "RDP": {
+    name: "Registration of Joint Divorce Proceedings (JUS280)",
+    preText: "Complete, scan and upload the",
+    help: "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. - Does not require signatures."
+  }  
+};

vue/vue.config.js

@@ -0,0 +1,19 @@
+module.exports = {
+  outputDir: '../edivorce/apps/core/static/dist/vue',
+  filenameHashing: false,
+  runtimeCompiler: true,
+  pages: {
+    initialFiling: {
+      entry: 'src/pages/initial-filing/main.js',
+      template: 'public/initial-filing.html',
+      filename: 'index.html',
+      chunks: ['chunk-vendors', 'chunk-common', 'initialFiling']
+    },
+    finalFiling: {
+      entry: 'src/pages/final-filing/main.js',
+      template: 'public/final-filing.html',
+      filename: 'final-filing.html',
+      chunks: ['chunk-vendors', 'chunk-common', 'finalFiling']
+    }
+  }
+}