Address review workflow

client/modules/accounts/templates/addressBook/add/add.js

@@ -1,3 +1,4 @@
+import { $ } from "meteor/jquery";
 import { i18next } from "/client/api";
 import * as Collections from "/lib/collections";
 import { Session } from "meteor/session";
@@ -53,36 +54,6 @@ Template.addressBookAdd.helpers({
   }
 });
 
-
-export function setValidatedAddress(res) {
-  if (res.validatedAddress.city) {
-    const city = $("input[name='city']");
-    city.val(res.validatedAddress.city);
-  }
-  if (res.validatedAddress.postal) {
-    const postal = $("input[name='postal']");
-    postal.val(res.validatedAddress.postal);
-  }
-  if (res.validatedAddress.address1) {
-    const address1 = $("input[name='address1']");
-    address1.val(res.validatedAddress.address1);
-  }
-
-  if (res.validatedAddress.address2) {
-    const address2 = $("input[name='address2']");
-    address2.val(res.validatedAddress.address2);
-  }
-  if (res.validatedAddress.country) {
-    const country = $("select[name='country']");
-    country.val(res.validatedAddress.country);
-  }
-
-  if (res.validatedAddress.region) {
-    const region = $("select[name='region']");
-    region.val(res.validatedAddress.region);
-  }
-}
-
 /**
  * addressBookAddForm form handling
  * @description gets accountId and calls addressBookAdd method
@@ -96,6 +67,7 @@ AutoForm.hooks({
       const addressBook = $(this.template.firstNode).closest(".address-book");
 
       Meteor.call("accounts/validateAddress", insertDoc, function (err, res) {
+        // if the address is validated OR the address has already been through the validation process, pass it on
         if (res.validated) {
           Meteor.call("accounts/addressBookAdd", insertDoc, function (error, result) {
             if (error) {
@@ -110,21 +82,16 @@ AutoForm.hooks({
             }
           });
         } else {
-          if (res.validatedAddress) {
-            setValidatedAddress(res);
-            Alerts.inline("Made changes to your address based upon validation. Please ensure this is correct", "warning", {
-              placement: "addressBookAdd",
-              i18nKey: "addressBookAdd.validatedAddress"
-            });
-          }
-          if (res.formErrors) {
-            for (const error of res.formErrors) {
-              Alerts.inline(error.details, "error", {
-                placement: "addressBookAdd"
-              });
-            }
-          }
-          that.done("Validation failed"); // renable Save and Continue button
+          // set addressState and kick it back to review
+          const addressState = {
+            requiresReview: true,
+            address: insertDoc,
+            validatedAddress: res.validatedAddress,
+            formErrors: res.formErrors,
+            fieldErrors: res.fieldErrors
+          };
+          Session.set("addressState", addressState);
+          addressBook.trigger($.Event("addressRequiresReview"));
         }
       });
     }

client/modules/accounts/templates/addressBook/addressBook.js

@@ -1,4 +1,5 @@
 import { Meteor } from "meteor/meteor";
+import { Session } from "meteor/session";
 import { ReactiveVar } from "meteor/reactive-var";
 import { i18next } from "/client/api";
 import * as Collections from "/lib/collections";
@@ -9,10 +10,20 @@ import { Template } from "meteor/templating";
  * template determines which view should be used:
  * addAddress (edit or add)
  * addressBookView (view)
+ * addressBookReview (review errors)
  */
 
 Template.addressBook.onCreated(function () {
-  this.currentViewTemplate = ReactiveVar("addressBookAdd");
+  let addressState = Session.get("addressState");
+  if (!addressState) {
+    addressState = { requiresReview: false };
+    Session.setDefault("addressState", addressState);
+  }
+  if (addressState && addressState.requiresReview) {
+    this.currentViewTemplate = ReactiveVar("addressBookReview");
+  } else {
+    this.currentViewTemplate = ReactiveVar("addressBookAdd");
+  }
   this.templateData = ReactiveVar({});
 
   this.autorun(() => {
@@ -22,7 +33,7 @@ Template.addressBook.onCreated(function () {
       userId: Meteor.userId()
     });
 
-    if (account) {
+    if (account && !addressState.requiresReview) {
       if (account.profile) {
         if (account.profile.addressBook) {
           if (account.profile.addressBook.length === 0) {
@@ -118,5 +129,15 @@ Template.addressBook.events({
     event.stopPropagation();
 
     Template.instance().currentViewTemplate.set("addressBookGrid");
+  },
+  "addressRequiresReview": (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    Template.instance().currentViewTemplate.set("addressBookReview");
+  },
+  "addressReviewComplete": (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    Template.instance().currentViewTemplate.set("addressBookEdit");
   }
 });

client/modules/accounts/templates/addressBook/edit/edit.js

@@ -1,12 +1,64 @@
-import { i18next } from "/client/api";
+import { $ } from "meteor/jquery";
 import { Meteor } from "meteor/meteor";
-import { setValidatedAddress } from "../add/add";
+import { Session } from "meteor/session";
+import { i18next } from "/client/api";
+
+
+function setWorkingAddress(address) {
+  if (address.fullName) {
+    const fullName = $("input[name='fullName']");
+    fullName.val(address.fullName);
+  }
+  if (address.city) {
+    const city = $("input[name='city']");
+    city.val(address.city);
+  }
+  if (address.postal) {
+    const postal = $("input[name='postal']");
+    postal.val(address.postal);
+  }
+  if (address.address1) {
+    const address1 = $("input[name='address1']");
+    address1.val(address.address1);
+  }
+
+  if (address.address2) {
+    const address2 = $("input[name='address2']");
+    address2.val(address.address2);
+  }
+  if (address.country) {
+    const country = $("select[name='country']");
+    country.val(address.country);
+  }
+
+  if (address.region) {
+    const region = $("select[name='region']");
+    region.val(address.region);
+  }
+
+  if (address.phone) {
+    const phone = $("input[name='phone']");
+    phone.val(address.phone);
+  }
+
+  if (address.isCommercial) {
+    const isCommercial = $("input[name='isCommercial']");
+    isCommercial.val(address.isCommercial);
+  }
+}
+
+
+Template.addressBookEdit.onRendered(function () {
+  const addressState = Session.get("addressState");
+  if (addressState.address) {
+    setWorkingAddress(addressState.address);
+  }
+});
 
 /*
  * update address book (cart) form handling
  * onSubmit we need to add accountId which is not in context
  */
-
 AutoForm.hooks({
   addressBookEditForm: {
     onSubmit: function (insertDoc) {
@@ -15,6 +67,7 @@ AutoForm.hooks({
       const addressBook = $(this.template.firstNode).closest(".address-book");
 
       Meteor.call("accounts/validateAddress", insertDoc, function (err, res) {
+        // if the address is validated OR the address has already been through the validation process, pass it on
         if (res.validated) {
           Meteor.call("accounts/addressBookUpdate", insertDoc, (error, result) => {
             if (error) {
@@ -30,21 +83,16 @@ AutoForm.hooks({
             }
           });
         } else {
-          if (res.validatedAddress) {
-            setValidatedAddress(res);
-            Alerts.inline("Made changes to your address based upon validation. Please ensure this is correct", "warning", {
-              placement: "addressBookEdit",
-              i18nKey: "addressBookAdd.validatedAddress"
-            });
-          }
-          if (res.formErrors) {
-            for (const error of res.formErrors) {
-              Alerts.inline(error.details, "error", {
-                placement: "addressBookEdit"
-              });
-            }
-          }
-          that.done("Validation failed"); // renable Save and Continue button
+          // set addressState and kick it back to review
+          const addressState = {
+            requiresReview: true,
+            address: insertDoc,
+            validatedAddress: res.validatedAddress,
+            formErrors: res.formErrors,
+            fieldErrors: res.fieldErrors
+          };
+          Session.set("addressState", addressState);
+          addressBook.trigger($.Event("addressRequiresReview"));
         }
       });
     }

client/modules/accounts/templates/addressBook/form/form.js

@@ -1,8 +1,8 @@
 import { Session } from "meteor/session";
 import { Meteor } from "meteor/meteor";
+import { Template } from "meteor/templating";
 import { Countries } from "/client/collections";
 import * as Collections from "/lib/collections";
-import { Template } from "meteor/templating";
 
 Template.addressBookForm.helpers({
 

client/modules/accounts/templates/addressBook/review/review.html

@@ -0,0 +1,145 @@
+<template name="addressBookReview">
+  <div class="panel-heading">
+    <div class="address-validation-warning col-md-12">
+      <h5 data-i18n="addressBookEdit.addressValidation">Address Validation</h5>
+      <div data-i18n="addressBookEdit.reviewAddress">For best compliance, please validate your address</div>
+    </div>
+  </div>
+  <div class="panel-body">
+
+    <div class="row header panel-title address-validate-header">
+      <div  data-i18n="addressBookEdit.enteredAddress" class="col-md-5">
+        Entered Address
+      </div>
+      <div class="col-md-7" data-i18n="addressBookEdit.validatedAddress">
+        Validated Address
+      </div>
+    </div>
+  <!-- country -->
+  <div data-key="country" class="row country-display{{#if fieldErrors.country.length}} address-invalid-line{{else}} address-valid-line{{/if}}">
+    <div class="col-md-5">
+      {{address.country}}
+    </div>
+    <div data-key="country" class="col-md-5">
+      {{validatedAddress.country}}
+    </div>
+
+    <div data-key="country" class="col-md-1">
+      {{#if fieldErrors.country.length}}
+        <span class="address-line-copyover fa fa-check-circle"></span>
+      {{/if}}
+    </div>
+    <div data-key="country" class="col-md-1">
+      {{#if fieldErrors.country.length}}
+        <span data-key="country" class="address-ignore">Ignore</span>
+      {{/if}}
+    </div>
+  </div>
+    <!-- address1 -->
+    <div data-key="address1" class="row address1-display{{#if fieldErrors.address1.length}} address-invalid-line{{else}} address-valid-line{{/if}}">
+      <div data-key="address1" class="col-md-5">
+        {{address.address1}}
+      </div>
+      <div data-key="address1" class="col-md-5">
+        {{validatedAddress.address1}}
+      </div>
+
+      <div data-key="address1" class="col-md-1">
+        <span class="address-line-copyover fa fa-check-circle"></span>
+      </div>
+      <div data-key="address1" class="col-md-1">
+        <span data-key="address1" class="address-ignore">Ignore</span>
+      </div>
+    </div>
+
+    {{#if hasAddress2}}
+        <!-- address2 -->
+        <div data-key="address2" class="row address2-display{{#if fieldErrors.address2.length}} address-invalid-line{{else}} address-valid-line{{/if}}">
+          <div data-key="address2" class="col-md-5">
+            {{address.address2}}
+          </div>
+          <div data-key="address2" class="col-md-5">
+            {{validatedAddress.address2}}
+          </div>
+
+          <div data-key="address2" class="col-md-1">
+            {{#if fieldErrors.address2.length}}
+              <span class="address-line-copyover fa fa-check-circle"></span>
+            {{/if}}
+          </div>
+          <div data-key="address2" class="col-md-1">
+            {{#if fieldErrors.address2.length}}
+              <span data-key="address2" class="address-ignore">Ignore</span>
+            {{/if}}
+          </div>
+        </div>
+    {{/if}}
+    <!-- city -->
+    <div data-key="city" class="row city-display{{#if fieldErrors.city.length}} address-invalid-line{{else}} address-valid-line{{/if}}">
+      <div class="col-md-5">
+        {{address.city}}
+      </div>
+      <div data-key="city" class="col-md-5">
+        {{validatedAddress.city}}
+      </div>
+
+      <div data-key="city" class="col-md-1">
+        {{#if fieldErrors.city.length}}
+          <span class="address-line-copyover fa fa-check-circle"></span>
+        {{/if}}
+      </div>
+      <div data-key="city" class="col-md-1">
+        {{#if fieldErrors.city.length}}
+          <span data-key="address2" class="address-ignore">Ignore</span>
+        {{/if}}
+      </div>
+    </div>
+
+    <!-- region -->
+    <div data-key="region" class="row region-display{{#if fieldErrors.region.length}} address-invalid-line{{else}} address-valid-line{{/if}}">
+      <div class="col-md-5">
+        {{address.region}}
+      </div>
+      <div data-key="region" class="col-md-5">
+        {{validatedAddress.region}}
+      </div>
+
+      <div data-key="region" class="col-md-1">
+        {{#if fieldErrors.region.length}}
+          <span class="address-line-copyover fa fa-check-circle"></span>
+        {{/if}}
+      </div>
+      <div data-key="region" class="col-md-1">
+        {{#if fieldErrors.region.length}}
+          <span data-key="address2" class="address-ignore">Ignore</span>
+        {{/if}}
+      </div>
+    </div>
+
+    <!-- postal -->
+    <div data-key="postal" class="row postal-display{{#if fieldErrors.postal.length}} address-invalid-line{{else}} address-valid-line{{/if}}">
+      <div class="col-md-5">
+        {{address.postal}}
+      </div>
+      <div data-key="postal" class="col-md-5">
+        {{validatedAddress.postal}}
+      </div>
+
+      <div data-key="postal" class="col-md-1">
+        {{#if fieldErrors.postal.length}}
+          <span data-key="postal" class="address-line-copyover fa fa-check-circle"></span>
+        {{/if}}
+      </div>
+      <div data-key="postal" class="col-md-1">
+        {{#if fieldErrors.postal.length}}
+          <span data-key="postal" class="address-ignore">Ignore</span>
+        {{/if}}
+      </div>
+    </div>
+    <div class="row pull-right review-action-buttons">
+      <button type="submit" class="btn btn-primary" data-i18n="app.saveAndContinue" data-event-action="saveAddress">Save and continue</button>
+      <button type="reset" class="btn btn-default" data-i18n="app.cancel" data-event-action="cancelAddressEdit">Cancel</button>
+    </div>
+  </div>
+
+</template>