Address review workflow

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

@@ -1,8 +1,9 @@
-import { i18next } from "/client/api";
-import * as Collections from "/lib/collections";
+import { $ } from "meteor/jquery";
 import { Session } from "meteor/session";
 import { Meteor } from "meteor/meteor";
 import { Template } from "meteor/templating";
+import { i18next } from "/client/api";
+import * as Collections from "/lib/collections";
 
 Template.addressBookAdd.helpers({
   thisAddress: function () {
@@ -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({