From eb5ec338dbfeca5fea0551412d51c0d4717da618 Mon Sep 17 00:00:00 2001
From: Josh Worden <josh@parameter1.com>
Date: Tue, 15 Feb 2022 15:25:58 -0600
Subject: [PATCH 01/18] Add city, street, extra fields, hidden support

---
 .../api/fragments/active-user.js              |  3 +
 .../browser/form/fields/address-extra.vue     | 64 +++++++++++++++++++
 .../browser/form/fields/city.vue              | 64 +++++++++++++++++++
 .../browser/form/fields/street.vue            | 64 +++++++++++++++++++
 .../marko-web-identity-x/browser/profile.vue  | 47 +++++++++++++-
 .../components/form-profile.marko             |  1 +
 packages/marko-web-identity-x/config.js       |  7 ++
 .../marko-web-identity-x/routes/profile.js    |  6 ++
 8 files changed, 253 insertions(+), 3 deletions(-)
 create mode 100644 packages/marko-web-identity-x/browser/form/fields/address-extra.vue
 create mode 100644 packages/marko-web-identity-x/browser/form/fields/city.vue
 create mode 100644 packages/marko-web-identity-x/browser/form/fields/street.vue

diff --git a/packages/marko-web-identity-x/api/fragments/active-user.js b/packages/marko-web-identity-x/api/fragments/active-user.js
index 2b2c4b991..a30225ed9 100644
--- a/packages/marko-web-identity-x/api/fragments/active-user.js
+++ b/packages/marko-web-identity-x/api/fragments/active-user.js
@@ -14,6 +14,9 @@ fragment ActiveUserFragment on AppUser {
   countryCode
   regionCode
   postalCode
+  city
+  street
+  addressExtra
   receiveEmail
   mustReVerifyProfile
   externalIds {
diff --git a/packages/marko-web-identity-x/browser/form/fields/address-extra.vue b/packages/marko-web-identity-x/browser/form/fields/address-extra.vue
new file mode 100644
index 000000000..d1970e3e4
--- /dev/null
+++ b/packages/marko-web-identity-x/browser/form/fields/address-extra.vue
@@ -0,0 +1,64 @@
+<template>
+  <form-group>
+    <form-label :for="id" :required="required">
+      {{ label }}
+    </form-label>
+    <input
+      :id="id"
+      v-model="addressExtra"
+      class="form-control"
+      type="text"
+      :required="required"
+      :disabled="disabled"
+      :placeholder="placeholder"
+      autocomplete="address-extra"
+    >
+  </form-group>
+</template>
+
+<script>
+import FormGroup from '../common/form-group.vue';
+import FormLabel from '../common/form-label.vue';
+
+export default {
+  components: {
+    FormGroup,
+    FormLabel,
+  },
+  props: {
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    required: {
+      type: Boolean,
+      default: false,
+    },
+    label: {
+      type: String,
+      default: 'Extra (Apt, Suite, etc.)',
+    },
+    placeholder: {
+      type: String,
+      default: '',
+    },
+    value: {
+      type: String,
+      default: '',
+    },
+  },
+  data: () => ({
+    id: 'sign-on-address-extra',
+  }),
+  computed: {
+    addressExtra: {
+      get() {
+        return this.value || '';
+      },
+      set(addressExtra) {
+        this.$emit('input', addressExtra || null);
+      },
+    },
+  },
+};
+</script>
diff --git a/packages/marko-web-identity-x/browser/form/fields/city.vue b/packages/marko-web-identity-x/browser/form/fields/city.vue
new file mode 100644
index 000000000..c24770d66
--- /dev/null
+++ b/packages/marko-web-identity-x/browser/form/fields/city.vue
@@ -0,0 +1,64 @@
+<template>
+  <form-group>
+    <form-label :for="id" :required="required">
+      {{ label }}
+    </form-label>
+    <input
+      :id="id"
+      v-model="city"
+      class="form-control"
+      type="text"
+      :required="required"
+      :disabled="disabled"
+      :placeholder="placeholder"
+      autocomplete="city"
+    >
+  </form-group>
+</template>
+
+<script>
+import FormGroup from '../common/form-group.vue';
+import FormLabel from '../common/form-label.vue';
+
+export default {
+  components: {
+    FormGroup,
+    FormLabel,
+  },
+  props: {
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    required: {
+      type: Boolean,
+      default: false,
+    },
+    label: {
+      type: String,
+      default: 'City',
+    },
+    placeholder: {
+      type: String,
+      default: '',
+    },
+    value: {
+      type: String,
+      default: '',
+    },
+  },
+  data: () => ({
+    id: 'sign-on-city',
+  }),
+  computed: {
+    city: {
+      get() {
+        return this.value || '';
+      },
+      set(city) {
+        this.$emit('input', city || null);
+      },
+    },
+  },
+};
+</script>
diff --git a/packages/marko-web-identity-x/browser/form/fields/street.vue b/packages/marko-web-identity-x/browser/form/fields/street.vue
new file mode 100644
index 000000000..3fa8acb13
--- /dev/null
+++ b/packages/marko-web-identity-x/browser/form/fields/street.vue
@@ -0,0 +1,64 @@
+<template>
+  <form-group>
+    <form-label :for="id" :required="required">
+      {{ label }}
+    </form-label>
+    <input
+      :id="id"
+      v-model="street"
+      class="form-control"
+      type="text"
+      :required="required"
+      :disabled="disabled"
+      :placeholder="placeholder"
+      autocomplete="street"
+    >
+  </form-group>
+</template>
+
+<script>
+import FormGroup from '../common/form-group.vue';
+import FormLabel from '../common/form-label.vue';
+
+export default {
+  components: {
+    FormGroup,
+    FormLabel,
+  },
+  props: {
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    required: {
+      type: Boolean,
+      default: false,
+    },
+    label: {
+      type: String,
+      default: 'Street',
+    },
+    placeholder: {
+      type: String,
+      default: '',
+    },
+    value: {
+      type: String,
+      default: '',
+    },
+  },
+  data: () => ({
+    id: 'sign-on-street',
+  }),
+  computed: {
+    street: {
+      get() {
+        return this.value || '';
+      },
+      set(street) {
+        this.$emit('input', street || null);
+      },
+    },
+  },
+};
+</script>
diff --git a/packages/marko-web-identity-x/browser/profile.vue b/packages/marko-web-identity-x/browser/profile.vue
index 43238498a..8efbfc6b0 100644
--- a/packages/marko-web-identity-x/browser/profile.vue
+++ b/packages/marko-web-identity-x/browser/profile.vue
@@ -40,9 +40,6 @@
               :required="isFieldRequired('countryCode')"
             />
           </div>
-        </div>
-
-        <div v-if="displayRegionField || displayPostalCodeField" class="row">
           <div v-if="displayRegionField" class="col-md-6">
             <region
               v-model="user.regionCode"
@@ -50,6 +47,15 @@
               :required="isFieldRequired('regionCode')"
             />
           </div>
+        </div>
+
+        <div v-if="isFieldVisible('city') || displayPostalCodeField" class="row">
+          <div v-if="isFieldVisible('city')" class="col-md-6">
+            <city
+              v-model="user.city"
+              :required="isFieldRequired('city')"
+            />
+          </div>
           <div v-if="displayPostalCodeField" class="col-md-6">
             <postal-code
               v-model="user.postalCode"
@@ -58,6 +64,21 @@
           </div>
         </div>
 
+        <div v-if="isFieldVisible('street') || isFieldVisible('addressExtra')" class="row">
+          <div v-if="isFieldVisible('street')" class="col-md-6">
+            <street
+              v-model="user.street"
+              :required="isFieldRequired('street')"
+            />
+          </div>
+          <div v-if="isFieldVisible('addressExtra')" class="col-md-6">
+            <address-extra
+              v-model="user.addressExtra"
+              :required="isFieldRequired('addressExtra')"
+            />
+          </div>
+        </div>
+
         <div v-if="customSelectFieldAnswers.length" class="row">
           <custom-select
             v-for="fieldAnswer in customSelectFieldAnswers"
@@ -149,6 +170,7 @@ import post from './utils/post';
 import cookiesEnabled from './utils/cookies-enabled';
 import regionCountryCodes from './utils/region-country-codes';
 
+import City from './form/fields/city.vue';
 import CustomBoolean from './form/fields/custom-boolean.vue';
 import CustomSelect from './form/fields/custom-select.vue';
 import GivenName from './form/fields/given-name.vue';
@@ -160,6 +182,8 @@ import Region from './form/fields/region.vue';
 import PostalCode from './form/fields/postal-code.vue';
 import ReceiveEmail from './form/fields/receive-email.vue';
 import RegionalPolicy from './form/fields/regional-policy.vue';
+import Street from './form/fields/street.vue';
+import AddressExtra from './form/fields/address-extra.vue';
 import Login from './login.vue';
 
 import FeatureError from './errors/feature';
@@ -169,6 +193,7 @@ const { isArray } = Array;
 
 export default {
   components: {
+    City,
     CustomBoolean,
     CustomSelect,
     GivenName,
@@ -180,6 +205,8 @@ export default {
     PostalCode,
     ReceiveEmail,
     RegionalPolicy,
+    Street,
+    AddressExtra,
     Login,
   },
 
@@ -207,6 +234,10 @@ export default {
       type: Array,
       default: () => [],
     },
+    hiddenFields: {
+      type: Array,
+      default: () => [],
+    },
     reloadPageOnSubmit: {
       type: Boolean,
       default: false,
@@ -351,6 +382,16 @@ export default {
     isFieldRequired(name) {
       return this.requiredFields.includes(name);
     },
+    /**
+     *
+     */
+    isFieldHidden(name) {
+      return this.hiddenFields.includes(name);
+    },
+
+    isFieldVisible(name) {
+      return !this.isFieldHidden(name);
+    },
 
     getRegionalPolicyAnswer(policyId) {
       return this.user.regionalConsentAnswers.find(a => a.id === policyId);
diff --git a/packages/marko-web-identity-x/components/form-profile.marko b/packages/marko-web-identity-x/components/form-profile.marko
index adfe4d371..1f303443b 100644
--- a/packages/marko-web-identity-x/components/form-profile.marko
+++ b/packages/marko-web-identity-x/components/form-profile.marko
@@ -9,6 +9,7 @@ $ const { identityX } = req;
       activeUser: user,
       requiredServerFields: identityX.config.getRequiredServerFields(),
       requiredClientFields: identityX.config.getRequiredClientFields(),
+      hiddenFields: identityX.config.getHiddenFields(),
       callToAction: input.callToAction,
       reloadPageOnSubmit: input.reloadPageOnSubmit,
       endpoints: identityX.config.getEndpoints(),
diff --git a/packages/marko-web-identity-x/config.js b/packages/marko-web-identity-x/config.js
index 3ba7343b9..9e7727508 100644
--- a/packages/marko-web-identity-x/config.js
+++ b/packages/marko-web-identity-x/config.js
@@ -12,6 +12,7 @@ class IdentityXConfiguration {
    * @param {string} [options.apiToken] An API token to use. Only required when doing write ops.
    * @param {string[]} [options.requiredServerFields] Required fields, server enforced.
    * @param {string[]} [options.requiredClientFields] Required fields, client-side only.
+   * @param {string[]} [options.hiddenFields] The fields to include in the profile.
    * @param {function} [options.onHookError]
    * @param {...object} options.rest
    */
@@ -20,6 +21,7 @@ class IdentityXConfiguration {
     apiToken,
     requiredServerFields = [],
     requiredClientFields = [],
+    hiddenFields = ['city', 'street', 'addressExtra'],
     onHookError,
     ...rest
   } = {}) {
@@ -29,6 +31,7 @@ class IdentityXConfiguration {
     this.options = {
       requiredServerFields,
       requiredClientFields,
+      hiddenFields,
       onHookError: (e) => {
         if (process.env.NODE_ENV === 'development') {
           log('ERROR IN IDENTITY-X HOOK', e);
@@ -89,6 +92,10 @@ class IdentityXConfiguration {
     return this.getAsArray('requiredClientFields');
   }
 
+  getHiddenFields() {
+    return this.getAsArray('requiredClientFields');
+  }
+
   get(path, def) {
     return get(this.options, path, def);
   }
diff --git a/packages/marko-web-identity-x/routes/profile.js b/packages/marko-web-identity-x/routes/profile.js
index caa9267ba..e0b5281fe 100644
--- a/packages/marko-web-identity-x/routes/profile.js
+++ b/packages/marko-web-identity-x/routes/profile.js
@@ -47,6 +47,9 @@ module.exports = asyncRoute(async (req, res) => {
     countryCode,
     regionCode,
     postalCode,
+    city,
+    street,
+    addressExtra,
     receiveEmail,
     regionalConsentAnswers,
     customBooleanFieldAnswers,
@@ -60,6 +63,9 @@ module.exports = asyncRoute(async (req, res) => {
     countryCode,
     regionCode,
     postalCode,
+    city,
+    street,
+    addressExtra,
     receiveEmail,
   };
 

From 205d44d4aa12aba6d0e31fd18704c66c20769852 Mon Sep 17 00:00:00 2001
From: Josh Worden <josh@parameter1.com>
Date: Wed, 16 Feb 2022 10:51:15 -0600
Subject: [PATCH 02/18] Fix field name

---
 packages/marko-web-identity-x/config.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/marko-web-identity-x/config.js b/packages/marko-web-identity-x/config.js
index 9e7727508..363fb8d69 100644
--- a/packages/marko-web-identity-x/config.js
+++ b/packages/marko-web-identity-x/config.js
@@ -93,7 +93,7 @@ class IdentityXConfiguration {
   }
 
   getHiddenFields() {
-    return this.getAsArray('requiredClientFields');
+    return this.getAsArray('hiddenFields');
   }
 
   get(path, def) {

From f452ad759558f3fd5d2d5694ba2c8d3ec014c020 Mon Sep 17 00:00:00 2001
From: Josh Worden <josh@parameter1.com>
Date: Wed, 16 Feb 2022 11:11:14 -0600
Subject: [PATCH 03/18] Move address fields into a component

---
 .../browser/form/address-block.vue            | 112 ++++++++++++++++++
 .../marko-web-identity-x/browser/profile.vue  |  76 +-----------
 2 files changed, 117 insertions(+), 71 deletions(-)
 create mode 100644 packages/marko-web-identity-x/browser/form/address-block.vue

diff --git a/packages/marko-web-identity-x/browser/form/address-block.vue b/packages/marko-web-identity-x/browser/form/address-block.vue
new file mode 100644
index 000000000..4dba43059
--- /dev/null
+++ b/packages/marko-web-identity-x/browser/form/address-block.vue
@@ -0,0 +1,112 @@
+<template>
+  <div :class="classNames">
+    <div class="row">
+      <div v-if="displayRegionField" class="col-md-6">
+        <region
+          v-model="user.regionCode"
+          :country-code="user.countryCode"
+          :required="isFieldRequired('regionCode')"
+        />
+      </div>
+    </div>
+
+    <div v-if="isFieldVisible('city') || displayPostalCodeField" class="row">
+      <div v-if="isFieldVisible('city')" class="col-md-6">
+        <city
+          v-model="user.city"
+          :required="isFieldRequired('city')"
+        />
+      </div>
+      <div v-if="displayPostalCodeField" class="col-md-6">
+        <postal-code
+          v-model="user.postalCode"
+          :required="isFieldRequired('postalCode')"
+        />
+      </div>
+    </div>
+
+    <div v-if="isFieldVisible('street') || isFieldVisible('addressExtra')" class="row">
+      <div v-if="isFieldVisible('street')" class="col-md-6">
+        <street
+          v-model="user.street"
+          :required="isFieldRequired('street')"
+        />
+      </div>
+      <div v-if="isFieldVisible('addressExtra')" class="col-md-6">
+        <address-extra
+          v-model="user.addressExtra"
+          :required="isFieldRequired('addressExtra')"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import regionCountryCodes from '../utils/region-country-codes';
+
+import City from './fields/city.vue';
+import Region from './fields/region.vue';
+import PostalCode from './fields/postal-code.vue';
+import Street from './fields/street.vue';
+import AddressExtra from './fields/address-extra.vue';
+
+
+/**
+country (50)
+
+*group fields, border, hr, etc, subhead with address*
+*show block when country is selected*
+
+street longer than extra (66/33) (w/o extra, 100)
+city region postal code (33/33/33) or 50/50
+postal code last even if by itself
+ */
+
+export default {
+  components: {
+    City,
+    Region,
+    PostalCode,
+    Street,
+    AddressExtra,
+  },
+  props: {
+    user: {
+      type: Object,
+      default: () => ({}),
+    },
+    hiddenFields: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  computed: {
+    classNames() {
+      const classNames = ['form-group'];
+      const { className } = this;
+      if (className) classNames.push(className);
+      return classNames;
+    },
+    countryCode() {
+      const { user } = this;
+      if (!user) return null;
+      return user.countryCode;
+    },
+    displayRegionField() {
+      return regionCountryCodes.includes(this.countryCode);
+    },
+    displayPostalCodeField() {
+      return this.displayRegionField;
+    },
+  },
+  methods: {
+    isFieldHidden(name) {
+      return this.hiddenFields.includes(name);
+    },
+    isFieldVisible(name) {
+      return !this.isFieldHidden(name);
+    },
+  },
+};
+</script>
diff --git a/packages/marko-web-identity-x/browser/profile.vue b/packages/marko-web-identity-x/browser/profile.vue
index 8efbfc6b0..bef637277 100644
--- a/packages/marko-web-identity-x/browser/profile.vue
+++ b/packages/marko-web-identity-x/browser/profile.vue
@@ -40,44 +40,13 @@
               :required="isFieldRequired('countryCode')"
             />
           </div>
-          <div v-if="displayRegionField" class="col-md-6">
-            <region
-              v-model="user.regionCode"
-              :country-code="user.countryCode"
-              :required="isFieldRequired('regionCode')"
-            />
-          </div>
-        </div>
-
-        <div v-if="isFieldVisible('city') || displayPostalCodeField" class="row">
-          <div v-if="isFieldVisible('city')" class="col-md-6">
-            <city
-              v-model="user.city"
-              :required="isFieldRequired('city')"
-            />
-          </div>
-          <div v-if="displayPostalCodeField" class="col-md-6">
-            <postal-code
-              v-model="user.postalCode"
-              :required="isFieldRequired('postalCode')"
-            />
-          </div>
         </div>
 
-        <div v-if="isFieldVisible('street') || isFieldVisible('addressExtra')" class="row">
-          <div v-if="isFieldVisible('street')" class="col-md-6">
-            <street
-              v-model="user.street"
-              :required="isFieldRequired('street')"
-            />
-          </div>
-          <div v-if="isFieldVisible('addressExtra')" class="col-md-6">
-            <address-extra
-              v-model="user.addressExtra"
-              :required="isFieldRequired('addressExtra')"
-            />
-          </div>
-        </div>
+        <address-block
+          v-if="countryCode"
+          :user="user"
+          :hidden-fields="hiddenFields"
+        />
 
         <div v-if="customSelectFieldAnswers.length" class="row">
           <custom-select
@@ -168,9 +137,7 @@
 <script>
 import post from './utils/post';
 import cookiesEnabled from './utils/cookies-enabled';
-import regionCountryCodes from './utils/region-country-codes';
 
-import City from './form/fields/city.vue';
 import CustomBoolean from './form/fields/custom-boolean.vue';
 import CustomSelect from './form/fields/custom-select.vue';
 import GivenName from './form/fields/given-name.vue';
@@ -178,12 +145,8 @@ import FamilyName from './form/fields/family-name.vue';
 import Organization from './form/fields/organization.vue';
 import OrganizationTitle from './form/fields/organization-title.vue';
 import Country from './form/fields/country.vue';
-import Region from './form/fields/region.vue';
-import PostalCode from './form/fields/postal-code.vue';
 import ReceiveEmail from './form/fields/receive-email.vue';
 import RegionalPolicy from './form/fields/regional-policy.vue';
-import Street from './form/fields/street.vue';
-import AddressExtra from './form/fields/address-extra.vue';
 import Login from './login.vue';
 
 import FeatureError from './errors/feature';
@@ -193,7 +156,6 @@ const { isArray } = Array;
 
 export default {
   components: {
-    City,
     CustomBoolean,
     CustomSelect,
     GivenName,
@@ -201,12 +163,8 @@ export default {
     Organization,
     OrganizationTitle,
     Country,
-    Region,
-    PostalCode,
     ReceiveEmail,
     RegionalPolicy,
-    Street,
-    AddressExtra,
     Login,
   },
 
@@ -304,20 +262,6 @@ export default {
       return user.countryCode;
     },
 
-    /**
-     *
-     */
-    displayRegionField() {
-      return regionCountryCodes.includes(this.countryCode);
-    },
-
-    /**
-     *
-     */
-    displayPostalCodeField() {
-      return this.displayRegionField;
-    },
-
     submitMessage() {
       const message = 'Profile updated.';
       if (this.isReloadingPage) return `${message} Reloading page...`;
@@ -382,16 +326,6 @@ export default {
     isFieldRequired(name) {
       return this.requiredFields.includes(name);
     },
-    /**
-     *
-     */
-    isFieldHidden(name) {
-      return this.hiddenFields.includes(name);
-    },
-
-    isFieldVisible(name) {
-      return !this.isFieldHidden(name);
-    },
 
     getRegionalPolicyAnswer(policyId) {
       return this.user.regionalConsentAnswers.find(a => a.id === policyId);

From 97ece24e24ac220a8b610da464d5dd1995af6842 Mon Sep 17 00:00:00 2001
From: Josh Worden <josh@parameter1.com>
Date: Wed, 16 Feb 2022 11:30:41 -0600
Subject: [PATCH 04/18] Wrap with fieldset/legend

---
 .../browser/form/address-block.vue            | 29 ++++++++++---------
 1 file changed, 15 insertions(+), 14 deletions(-)

diff --git a/packages/marko-web-identity-x/browser/form/address-block.vue b/packages/marko-web-identity-x/browser/form/address-block.vue
index 4dba43059..9dc939498 100644
--- a/packages/marko-web-identity-x/browser/form/address-block.vue
+++ b/packages/marko-web-identity-x/browser/form/address-block.vue
@@ -1,5 +1,9 @@
 <template>
-  <div :class="classNames">
+  <fieldset class="p-3 border mb-2">
+    <legend class="h5">
+      Address
+    </legend>
+
     <div class="row">
       <div v-if="displayRegionField" class="col-md-6">
         <region
@@ -40,6 +44,7 @@
       </div>
     </div>
   </div>
+  </fieldset>
 </template>
 
 <script>
@@ -72,13 +77,17 @@ export default {
     AddressExtra,
   },
   props: {
+    isFieldRequired: {
+      type: Function,
+      required: true,
+    },
+    isFieldVisible: {
+      type: Function,
+      required: true,
+    },
     user: {
       type: Object,
-      default: () => ({}),
-    },
-    hiddenFields: {
-      type: Array,
-      default: () => [],
+      required: true,
     },
   },
   computed: {
@@ -100,13 +109,5 @@ export default {
       return this.displayRegionField;
     },
   },
-  methods: {
-    isFieldHidden(name) {
-      return this.hiddenFields.includes(name);
-    },
-    isFieldVisible(name) {
-      return !this.isFieldHidden(name);
-    },
-  },
 };
 </script>

From fba93e186e80c4af8bec21314839819949161b76 Mon Sep 17 00:00:00 2001
From: Josh Worden <josh@parameter1.com>
Date: Wed, 16 Feb 2022 11:31:34 -0600
Subject: [PATCH 05/18] move street/extra, set width logic

---
 .../browser/form/address-block.vue            | 29 ++++++--------
 .../browser/form/fields/street.vue            | 40 ++++++++++++-------
 2 files changed, 38 insertions(+), 31 deletions(-)

diff --git a/packages/marko-web-identity-x/browser/form/address-block.vue b/packages/marko-web-identity-x/browser/form/address-block.vue
index 9dc939498..e0099bfbb 100644
--- a/packages/marko-web-identity-x/browser/form/address-block.vue
+++ b/packages/marko-web-identity-x/browser/form/address-block.vue
@@ -4,6 +4,19 @@
       Address
     </legend>
 
+    <div v-if="isFieldVisible('street')" class="row">
+      <street
+        v-model="user.street"
+        :required="isFieldRequired('street')"
+        :full-width="!isFieldVisible('addressExtra')"
+      />
+      <address-extra
+        v-if="isFieldVisible('addressExtra')"
+        v-model="user.addressExtra"
+        :required="isFieldRequired('addressExtra')"
+      />
+    </div>
+
     <div class="row">
       <div v-if="displayRegionField" class="col-md-6">
         <region
@@ -28,22 +41,6 @@
         />
       </div>
     </div>
-
-    <div v-if="isFieldVisible('street') || isFieldVisible('addressExtra')" class="row">
-      <div v-if="isFieldVisible('street')" class="col-md-6">
-        <street
-          v-model="user.street"
-          :required="isFieldRequired('street')"
-        />
-      </div>
-      <div v-if="isFieldVisible('addressExtra')" class="col-md-6">
-        <address-extra
-          v-model="user.addressExtra"
-          :required="isFieldRequired('addressExtra')"
-        />
-      </div>
-    </div>
-  </div>
   </fieldset>
 </template>
 
diff --git a/packages/marko-web-identity-x/browser/form/fields/street.vue b/packages/marko-web-identity-x/browser/form/fields/street.vue
index 3fa8acb13..88f037c76 100644
--- a/packages/marko-web-identity-x/browser/form/fields/street.vue
+++ b/packages/marko-web-identity-x/browser/form/fields/street.vue
@@ -1,19 +1,21 @@
 <template>
-  <form-group>
-    <form-label :for="id" :required="required">
-      {{ label }}
-    </form-label>
-    <input
-      :id="id"
-      v-model="street"
-      class="form-control"
-      type="text"
-      :required="required"
-      :disabled="disabled"
-      :placeholder="placeholder"
-      autocomplete="street"
-    >
-  </form-group>
+  <div :class="classNames">
+    <form-group>
+      <form-label :for="id" :required="required">
+        {{ label }}
+      </form-label>
+      <input
+        :id="id"
+        v-model="street"
+        class="form-control"
+        type="text"
+        :required="required"
+        :disabled="disabled"
+        :placeholder="placeholder"
+        autocomplete="street"
+      >
+    </form-group>
+  </div>
 </template>
 
 <script>
@@ -46,11 +48,19 @@ export default {
       type: String,
       default: '',
     },
+    fullWidth: {
+      type: Boolean,
+      default: true,
+    },
   },
   data: () => ({
     id: 'sign-on-street',
   }),
   computed: {
+    classNames() {
+      const { fullWidth } = this;
+      return fullWidth ? 'col-md-12' : 'col-md-9';
+    },
     street: {
       get() {
         return this.value || '';

From 62927371e82c0d793db9bc73349f382be4dbee55 Mon Sep 17 00:00:00 2001
From: Josh Worden <josh@parameter1.com>
Date: Wed, 16 Feb 2022 11:31:40 -0600
Subject: [PATCH 06/18] Move functions back to profile

---
 packages/marko-web-identity-x/browser/profile.vue | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/packages/marko-web-identity-x/browser/profile.vue b/packages/marko-web-identity-x/browser/profile.vue
index bef637277..b38de1162 100644
--- a/packages/marko-web-identity-x/browser/profile.vue
+++ b/packages/marko-web-identity-x/browser/profile.vue
@@ -45,7 +45,8 @@
         <address-block
           v-if="countryCode"
           :user="user"
-          :hidden-fields="hiddenFields"
+          :is-field-required="isFieldRequired"
+          :is-field-visible="isFieldVisible"
         />
 
         <div v-if="customSelectFieldAnswers.length" class="row">
@@ -138,6 +139,7 @@
 import post from './utils/post';
 import cookiesEnabled from './utils/cookies-enabled';
 
+import AddressBlock from './form/address-block.vue';
 import CustomBoolean from './form/fields/custom-boolean.vue';
 import CustomSelect from './form/fields/custom-select.vue';
 import GivenName from './form/fields/given-name.vue';
@@ -156,6 +158,7 @@ const { isArray } = Array;
 
 export default {
   components: {
+    AddressBlock,
     CustomBoolean,
     CustomSelect,
     GivenName,
@@ -327,6 +330,14 @@ export default {
       return this.requiredFields.includes(name);
     },
 
+    isFieldHidden(name) {
+      return this.hiddenFields.includes(name);
+    },
+
+    isFieldVisible(name) {
+      return !this.isFieldHidden(name);
+    },
+
     getRegionalPolicyAnswer(policyId) {
       return this.user.regionalConsentAnswers.find(a => a.id === policyId);
     },

From 22ea456ff44e5b78a3c47f41d0e612c4ea07796f Mon Sep 17 00:00:00 2001
From: Josh Worden <josh@parameter1.com>
Date: Wed, 16 Feb 2022 11:37:00 -0600
Subject: [PATCH 07/18] Set extra classes, send classes to form-group

---
 .../browser/form/fields/address-extra.vue     |  2 +-
 .../browser/form/fields/street.vue            | 34 +++++++++----------
 2 files changed, 17 insertions(+), 19 deletions(-)

diff --git a/packages/marko-web-identity-x/browser/form/fields/address-extra.vue b/packages/marko-web-identity-x/browser/form/fields/address-extra.vue
index d1970e3e4..ae031afbf 100644
--- a/packages/marko-web-identity-x/browser/form/fields/address-extra.vue
+++ b/packages/marko-web-identity-x/browser/form/fields/address-extra.vue
@@ -1,5 +1,5 @@
 <template>
-  <form-group>
+  <form-group class-name="col-lg-3 col-md-4">
     <form-label :for="id" :required="required">
       {{ label }}
     </form-label>
diff --git a/packages/marko-web-identity-x/browser/form/fields/street.vue b/packages/marko-web-identity-x/browser/form/fields/street.vue
index 88f037c76..93ca95f10 100644
--- a/packages/marko-web-identity-x/browser/form/fields/street.vue
+++ b/packages/marko-web-identity-x/browser/form/fields/street.vue
@@ -1,21 +1,19 @@
 <template>
-  <div :class="classNames">
-    <form-group>
-      <form-label :for="id" :required="required">
-        {{ label }}
-      </form-label>
-      <input
-        :id="id"
-        v-model="street"
-        class="form-control"
-        type="text"
-        :required="required"
-        :disabled="disabled"
-        :placeholder="placeholder"
-        autocomplete="street"
-      >
-    </form-group>
-  </div>
+  <form-group :class-name="classNames">
+    <form-label :for="id" :required="required">
+      {{ label }}
+    </form-label>
+    <input
+      :id="id"
+      v-model="street"
+      class="form-control"
+      type="text"
+      :required="required"
+      :disabled="disabled"
+      :placeholder="placeholder"
+      autocomplete="street"
+    >
+  </form-group>
 </template>
 
 <script>
@@ -59,7 +57,7 @@ export default {
   computed: {
     classNames() {
       const { fullWidth } = this;
-      return fullWidth ? 'col-md-12' : 'col-md-9';
+      return fullWidth ? 'col-md-12' : 'col-lg-9 col-md-8';
     },
     street: {
       get() {

From 6e9f0eb2b610ab3d0267fbf79dccfc2ffca02d20 Mon Sep 17 00:00:00 2001
From: Josh Worden <josh@parameter1.com>
Date: Wed, 16 Feb 2022 11:47:56 -0600
Subject: [PATCH 08/18] Add width classing to city/region/zip

---
 .../browser/form/address-block.vue            | 48 ++++++++-----------
 .../browser/form/fields/city.vue              | 10 +++-
 .../browser/form/fields/postal-code.vue       | 10 +++-
 .../browser/form/fields/region.vue            | 10 +++-
 4 files changed, 48 insertions(+), 30 deletions(-)

diff --git a/packages/marko-web-identity-x/browser/form/address-block.vue b/packages/marko-web-identity-x/browser/form/address-block.vue
index e0099bfbb..cfb446cf7 100644
--- a/packages/marko-web-identity-x/browser/form/address-block.vue
+++ b/packages/marko-web-identity-x/browser/form/address-block.vue
@@ -1,5 +1,5 @@
 <template>
-  <fieldset class="p-3 border mb-2">
+  <fieldset class="px-3 border mb-2">
     <legend class="h5">
       Address
     </legend>
@@ -17,29 +17,26 @@
       />
     </div>
 
-    <div class="row">
-      <div v-if="displayRegionField" class="col-md-6">
-        <region
-          v-model="user.regionCode"
-          :country-code="user.countryCode"
-          :required="isFieldRequired('regionCode')"
-        />
-      </div>
-    </div>
-
-    <div v-if="isFieldVisible('city') || displayPostalCodeField" class="row">
-      <div v-if="isFieldVisible('city')" class="col-md-6">
-        <city
-          v-model="user.city"
-          :required="isFieldRequired('city')"
-        />
-      </div>
-      <div v-if="displayPostalCodeField" class="col-md-6">
-        <postal-code
-          v-model="user.postalCode"
-          :required="isFieldRequired('postalCode')"
-        />
-      </div>
+    <div v-if="isFieldVisible('city') || displayRegionField" class="row">
+      <city
+        v-if="isFieldVisible('city')"
+        v-model="user.city"
+        :required="isFieldRequired('city')"
+        :half-width="!displayRegionField"
+      />
+      <region
+        v-if="displayRegionField"
+        v-model="user.regionCode"
+        :country-code="user.countryCode"
+        :required="isFieldRequired('regionCode')"
+        :half-width="!isFieldVisible('city')"
+      />
+      <postal-code
+        v-if="displayRegionField"
+        v-model="user.postalCode"
+        :required="isFieldRequired('postalCode')"
+        :half-width="!isFieldVisible('city')"
+      />
     </div>
   </fieldset>
 </template>
@@ -102,9 +99,6 @@ export default {
     displayRegionField() {
       return regionCountryCodes.includes(this.countryCode);
     },
-    displayPostalCodeField() {
-      return this.displayRegionField;
-    },
   },
 };
 </script>
diff --git a/packages/marko-web-identity-x/browser/form/fields/city.vue b/packages/marko-web-identity-x/browser/form/fields/city.vue
index c24770d66..e21cb007c 100644
--- a/packages/marko-web-identity-x/browser/form/fields/city.vue
+++ b/packages/marko-web-identity-x/browser/form/fields/city.vue
@@ -1,5 +1,5 @@
 <template>
-  <form-group>
+  <form-group :class-name="classNames">
     <form-label :for="id" :required="required">
       {{ label }}
     </form-label>
@@ -46,11 +46,19 @@ export default {
       type: String,
       default: '',
     },
+    halfWidth: {
+      type: Boolean,
+      default: false,
+    },
   },
   data: () => ({
     id: 'sign-on-city',
   }),
   computed: {
+    classNames() {
+      const { halfWidth } = this;
+      return halfWidth ? 'col-md-6' : 'col-md-4';
+    },
     city: {
       get() {
         return this.value || '';
diff --git a/packages/marko-web-identity-x/browser/form/fields/postal-code.vue b/packages/marko-web-identity-x/browser/form/fields/postal-code.vue
index 65f6d77a2..aa8f6108e 100644
--- a/packages/marko-web-identity-x/browser/form/fields/postal-code.vue
+++ b/packages/marko-web-identity-x/browser/form/fields/postal-code.vue
@@ -1,5 +1,5 @@
 <template>
-  <form-group>
+  <form-group :class-name="classNames">
     <form-label :for="id" :required="required">
       {{ label }}
     </form-label>
@@ -46,11 +46,19 @@ export default {
       type: String,
       default: '',
     },
+    halfWidth: {
+      type: Boolean,
+      default: false,
+    },
   },
   data: () => ({
     id: 'sign-on-postal-code',
   }),
   computed: {
+    classNames() {
+      const { halfWidth } = this;
+      return halfWidth ? 'col-md-6' : 'col-md-4';
+    },
     postalCode: {
       get() {
         return this.value || '';
diff --git a/packages/marko-web-identity-x/browser/form/fields/region.vue b/packages/marko-web-identity-x/browser/form/fields/region.vue
index 42d8d25fe..db389d247 100644
--- a/packages/marko-web-identity-x/browser/form/fields/region.vue
+++ b/packages/marko-web-identity-x/browser/form/fields/region.vue
@@ -1,5 +1,5 @@
 <template>
-  <form-group>
+  <form-group :class-name="classNames">
     <form-label :for="id" :required="required">
       {{ label }}
     </form-label>
@@ -57,6 +57,10 @@ export default {
       type: String,
       default: '',
     },
+    halfWidth: {
+      type: Boolean,
+      default: false,
+    },
   },
   data: () => ({
     id: 'sign-on-region',
@@ -65,6 +69,10 @@ export default {
     regions: [],
   }),
   computed: {
+    classNames() {
+      const { halfWidth } = this;
+      return halfWidth ? 'col-md-6' : 'col-md-4';
+    },
     regionCode: {
       get() {
         return this.value || '';

From 8637336aca5af248d72d45933e7ee7bb23a21fb2 Mon Sep 17 00:00:00 2001
From: Josh Worden <josh@parameter1.com>
Date: Wed, 16 Feb 2022 11:55:17 -0600
Subject: [PATCH 09/18] Reorganize logic for region and display of address

---
 .../browser/form/address-block.vue            | 21 ++++---------------
 .../marko-web-identity-x/browser/profile.vue  | 19 ++++++++++++++++-
 2 files changed, 22 insertions(+), 18 deletions(-)

diff --git a/packages/marko-web-identity-x/browser/form/address-block.vue b/packages/marko-web-identity-x/browser/form/address-block.vue
index cfb446cf7..697625525 100644
--- a/packages/marko-web-identity-x/browser/form/address-block.vue
+++ b/packages/marko-web-identity-x/browser/form/address-block.vue
@@ -42,26 +42,12 @@
 </template>
 
 <script>
-import regionCountryCodes from '../utils/region-country-codes';
-
 import City from './fields/city.vue';
 import Region from './fields/region.vue';
 import PostalCode from './fields/postal-code.vue';
 import Street from './fields/street.vue';
 import AddressExtra from './fields/address-extra.vue';
 
-
-/**
-country (50)
-
-*group fields, border, hr, etc, subhead with address*
-*show block when country is selected*
-
-street longer than extra (66/33) (w/o extra, 100)
-city region postal code (33/33/33) or 50/50
-postal code last even if by itself
- */
-
 export default {
   components: {
     City,
@@ -79,6 +65,10 @@ export default {
       type: Function,
       required: true,
     },
+    displayRegionField: {
+      type: Boolean,
+      default: false,
+    },
     user: {
       type: Object,
       required: true,
@@ -96,9 +86,6 @@ export default {
       if (!user) return null;
       return user.countryCode;
     },
-    displayRegionField() {
-      return regionCountryCodes.includes(this.countryCode);
-    },
   },
 };
 </script>
diff --git a/packages/marko-web-identity-x/browser/profile.vue b/packages/marko-web-identity-x/browser/profile.vue
index b38de1162..73c9c6b68 100644
--- a/packages/marko-web-identity-x/browser/profile.vue
+++ b/packages/marko-web-identity-x/browser/profile.vue
@@ -43,10 +43,11 @@
         </div>
 
         <address-block
-          v-if="countryCode"
+          v-if="showAddressBlock"
           :user="user"
           :is-field-required="isFieldRequired"
           :is-field-visible="isFieldVisible"
+          :display-region-field="displayRegionField"
         />
 
         <div v-if="customSelectFieldAnswers.length" class="row">
@@ -136,6 +137,7 @@
 </template>
 
 <script>
+import regionCountryCodes from './utils/region-country-codes';
 import post from './utils/post';
 import cookiesEnabled from './utils/cookies-enabled';
 
@@ -295,6 +297,21 @@ export default {
       const { customSelectFieldAnswers } = this.user;
       return isArray(customSelectFieldAnswers) ? customSelectFieldAnswers : [];
     },
+
+    displayRegionField() {
+      return regionCountryCodes.includes(this.countryCode);
+    },
+
+    showAddressBlock() {
+      // Don't show at all until country is selected.
+      if (!this.countryCode) return false;
+
+      // Only show if a subfield is visible
+      if (this.isFieldVisible('city')) return true;
+      if (this.isFieldVisible('street')) return true;
+
+      return this.displayRegionField;
+    },
   },
 
   /**

From 46bd4383db5c0d7b27e9cabf50c79004b5c82599 Mon Sep 17 00:00:00 2001
From: Josh Worden <josh@parameter1.com>
Date: Wed, 16 Feb 2022 12:59:49 -0600
Subject: [PATCH 10/18] Auto-size legend

---
 packages/marko-web-identity-x/browser/form/address-block.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/marko-web-identity-x/browser/form/address-block.vue b/packages/marko-web-identity-x/browser/form/address-block.vue
index 697625525..c400ba376 100644
--- a/packages/marko-web-identity-x/browser/form/address-block.vue
+++ b/packages/marko-web-identity-x/browser/form/address-block.vue
@@ -1,6 +1,6 @@
 <template>
   <fieldset class="px-3 border mb-2">
-    <legend class="h5">
+    <legend class="h5 w-auto">
       Address
     </legend>
 

From 42cbae94e47be108fe2347e82bde01e769ca4bfb Mon Sep 17 00:00:00 2001
From: Josh Worden <josh@parameter1.com>
Date: Wed, 16 Feb 2022 13:00:02 -0600
Subject: [PATCH 11/18] Remove lg defs in favor of mds

---
 .../marko-web-identity-x/browser/form/fields/address-extra.vue  | 2 +-
 packages/marko-web-identity-x/browser/form/fields/street.vue    | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/marko-web-identity-x/browser/form/fields/address-extra.vue b/packages/marko-web-identity-x/browser/form/fields/address-extra.vue
index ae031afbf..22535d103 100644
--- a/packages/marko-web-identity-x/browser/form/fields/address-extra.vue
+++ b/packages/marko-web-identity-x/browser/form/fields/address-extra.vue
@@ -1,5 +1,5 @@
 <template>
-  <form-group class-name="col-lg-3 col-md-4">
+  <form-group class-name="col-md-4">
     <form-label :for="id" :required="required">
       {{ label }}
     </form-label>
diff --git a/packages/marko-web-identity-x/browser/form/fields/street.vue b/packages/marko-web-identity-x/browser/form/fields/street.vue
index 93ca95f10..f7fcc6b4e 100644
--- a/packages/marko-web-identity-x/browser/form/fields/street.vue
+++ b/packages/marko-web-identity-x/browser/form/fields/street.vue
@@ -57,7 +57,7 @@ export default {
   computed: {
     classNames() {
       const { fullWidth } = this;
-      return fullWidth ? 'col-md-12' : 'col-lg-9 col-md-8';
+      return fullWidth ? 'col-md-12' : 'col-md-8';
     },
     street: {
       get() {

From dc416f2a16dcf03c2eea6fed56354869b4b8d49e Mon Sep 17 00:00:00 2001
From: Josh Worden <josh@parameter1.com>
Date: Wed, 16 Feb 2022 13:10:34 -0600
Subject: [PATCH 12/18] Cleanup diffs

---
 .../marko-web-identity-x/browser/profile.vue  | 19 +++++++++----------
 packages/marko-web-identity-x/config.js       |  2 +-
 2 files changed, 10 insertions(+), 11 deletions(-)

diff --git a/packages/marko-web-identity-x/browser/profile.vue b/packages/marko-web-identity-x/browser/profile.vue
index 73c9c6b68..5e0b1e260 100644
--- a/packages/marko-web-identity-x/browser/profile.vue
+++ b/packages/marko-web-identity-x/browser/profile.vue
@@ -137,9 +137,9 @@
 </template>
 
 <script>
-import regionCountryCodes from './utils/region-country-codes';
 import post from './utils/post';
 import cookiesEnabled from './utils/cookies-enabled';
+import regionCountryCodes from './utils/region-country-codes';
 
 import AddressBlock from './form/address-block.vue';
 import CustomBoolean from './form/fields/custom-boolean.vue';
@@ -267,6 +267,13 @@ export default {
       return user.countryCode;
     },
 
+    /**
+     *
+     */
+    displayRegionField() {
+      return regionCountryCodes.includes(this.countryCode);
+    },
+
     submitMessage() {
       const message = 'Profile updated.';
       if (this.isReloadingPage) return `${message} Reloading page...`;
@@ -298,10 +305,6 @@ export default {
       return isArray(customSelectFieldAnswers) ? customSelectFieldAnswers : [];
     },
 
-    displayRegionField() {
-      return regionCountryCodes.includes(this.countryCode);
-    },
-
     showAddressBlock() {
       // Don't show at all until country is selected.
       if (!this.countryCode) return false;
@@ -347,12 +350,8 @@ export default {
       return this.requiredFields.includes(name);
     },
 
-    isFieldHidden(name) {
-      return this.hiddenFields.includes(name);
-    },
-
     isFieldVisible(name) {
-      return !this.isFieldHidden(name);
+      return !this.hiddenFields.includes(name);
     },
 
     getRegionalPolicyAnswer(policyId) {
diff --git a/packages/marko-web-identity-x/config.js b/packages/marko-web-identity-x/config.js
index 363fb8d69..d1970f95f 100644
--- a/packages/marko-web-identity-x/config.js
+++ b/packages/marko-web-identity-x/config.js
@@ -12,7 +12,7 @@ class IdentityXConfiguration {
    * @param {string} [options.apiToken] An API token to use. Only required when doing write ops.
    * @param {string[]} [options.requiredServerFields] Required fields, server enforced.
    * @param {string[]} [options.requiredClientFields] Required fields, client-side only.
-   * @param {string[]} [options.hiddenFields] The fields to include in the profile.
+   * @param {string[]} [options.hiddenFields] The fields to hide from the profile.
    * @param {function} [options.onHookError]
    * @param {...object} options.rest
    */

From 2137580d3383f20140fa708a25cf69307ef3c77c Mon Sep 17 00:00:00 2001
From: Josh Worden <josh@parameter1.com>
Date: Wed, 16 Feb 2022 14:17:37 -0600
Subject: [PATCH 13/18] make bottom margin consistant

---
 packages/marko-web-identity-x/browser/form/address-block.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/marko-web-identity-x/browser/form/address-block.vue b/packages/marko-web-identity-x/browser/form/address-block.vue
index c400ba376..1e24cc61a 100644
--- a/packages/marko-web-identity-x/browser/form/address-block.vue
+++ b/packages/marko-web-identity-x/browser/form/address-block.vue
@@ -1,5 +1,5 @@
 <template>
-  <fieldset class="px-3 border mb-2">
+  <fieldset class="px-3 border mb-3">
     <legend class="h5 w-auto">
       Address
     </legend>

From 1cf945323e3021767de87a23cf8e8cabfe1b9c46 Mon Sep 17 00:00:00 2001
From: Josh Worden <josh@parameter1.com>
Date: Wed, 16 Feb 2022 14:18:24 -0600
Subject: [PATCH 14/18] Make address legend smaller

---
 packages/marko-web-identity-x/browser/form/address-block.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/marko-web-identity-x/browser/form/address-block.vue b/packages/marko-web-identity-x/browser/form/address-block.vue
index 1e24cc61a..0afe865d4 100644
--- a/packages/marko-web-identity-x/browser/form/address-block.vue
+++ b/packages/marko-web-identity-x/browser/form/address-block.vue
@@ -1,6 +1,6 @@
 <template>
   <fieldset class="px-3 border mb-3">
-    <legend class="h5 w-auto">
+    <legend class="h6 w-auto">
       Address
     </legend>
 

From b7861e6a5c2cb356484e6dc4d7deddbab5eeedd9 Mon Sep 17 00:00:00 2001
From: Josh Worden <josh@parameter1.com>
Date: Wed, 16 Feb 2022 15:44:12 -0600
Subject: [PATCH 15/18] Send class names instead of width props

---
 .../browser/form/address-block.vue                   |  8 ++++----
 .../browser/form/fields/city.vue                     | 12 ++++--------
 .../browser/form/fields/postal-code.vue              | 12 ++++--------
 .../browser/form/fields/region.vue                   | 12 ++++--------
 .../browser/form/fields/street.vue                   | 12 ++++--------
 5 files changed, 20 insertions(+), 36 deletions(-)

diff --git a/packages/marko-web-identity-x/browser/form/address-block.vue b/packages/marko-web-identity-x/browser/form/address-block.vue
index 0afe865d4..b026b65a5 100644
--- a/packages/marko-web-identity-x/browser/form/address-block.vue
+++ b/packages/marko-web-identity-x/browser/form/address-block.vue
@@ -8,7 +8,7 @@
       <street
         v-model="user.street"
         :required="isFieldRequired('street')"
-        :full-width="!isFieldVisible('addressExtra')"
+        :class-name="isFieldVisible('addressExtra') ? 'col-md-8' : 'col-md-12'"
       />
       <address-extra
         v-if="isFieldVisible('addressExtra')"
@@ -22,20 +22,20 @@
         v-if="isFieldVisible('city')"
         v-model="user.city"
         :required="isFieldRequired('city')"
-        :half-width="!displayRegionField"
+        :class-name="displayRegionField ? 'col-md-4' : 'col-md-6'"
       />
       <region
         v-if="displayRegionField"
         v-model="user.regionCode"
         :country-code="user.countryCode"
         :required="isFieldRequired('regionCode')"
-        :half-width="!isFieldVisible('city')"
+        :class-name="isFieldVisible('city') ? 'col-md-4' : 'col-md-6'"
       />
       <postal-code
         v-if="displayRegionField"
         v-model="user.postalCode"
         :required="isFieldRequired('postalCode')"
-        :half-width="!isFieldVisible('city')"
+        :class-name="isFieldVisible('city') ? 'col-md-4' : 'col-md-6'"
       />
     </div>
   </fieldset>
diff --git a/packages/marko-web-identity-x/browser/form/fields/city.vue b/packages/marko-web-identity-x/browser/form/fields/city.vue
index e21cb007c..5ebc72947 100644
--- a/packages/marko-web-identity-x/browser/form/fields/city.vue
+++ b/packages/marko-web-identity-x/browser/form/fields/city.vue
@@ -1,5 +1,5 @@
 <template>
-  <form-group :class-name="classNames">
+  <form-group :class-name="className">
     <form-label :for="id" :required="required">
       {{ label }}
     </form-label>
@@ -46,19 +46,15 @@ export default {
       type: String,
       default: '',
     },
-    halfWidth: {
-      type: Boolean,
-      default: false,
+    className: {
+      type: String,
+      default: 'col-md-6',
     },
   },
   data: () => ({
     id: 'sign-on-city',
   }),
   computed: {
-    classNames() {
-      const { halfWidth } = this;
-      return halfWidth ? 'col-md-6' : 'col-md-4';
-    },
     city: {
       get() {
         return this.value || '';
diff --git a/packages/marko-web-identity-x/browser/form/fields/postal-code.vue b/packages/marko-web-identity-x/browser/form/fields/postal-code.vue
index aa8f6108e..7c5f1a308 100644
--- a/packages/marko-web-identity-x/browser/form/fields/postal-code.vue
+++ b/packages/marko-web-identity-x/browser/form/fields/postal-code.vue
@@ -1,5 +1,5 @@
 <template>
-  <form-group :class-name="classNames">
+  <form-group :class-name="className">
     <form-label :for="id" :required="required">
       {{ label }}
     </form-label>
@@ -46,19 +46,15 @@ export default {
       type: String,
       default: '',
     },
-    halfWidth: {
-      type: Boolean,
-      default: false,
+    className: {
+      type: String,
+      default: 'col-md-12',
     },
   },
   data: () => ({
     id: 'sign-on-postal-code',
   }),
   computed: {
-    classNames() {
-      const { halfWidth } = this;
-      return halfWidth ? 'col-md-6' : 'col-md-4';
-    },
     postalCode: {
       get() {
         return this.value || '';
diff --git a/packages/marko-web-identity-x/browser/form/fields/region.vue b/packages/marko-web-identity-x/browser/form/fields/region.vue
index db389d247..dedf1b02d 100644
--- a/packages/marko-web-identity-x/browser/form/fields/region.vue
+++ b/packages/marko-web-identity-x/browser/form/fields/region.vue
@@ -1,5 +1,5 @@
 <template>
-  <form-group :class-name="classNames">
+  <form-group :class-name="className">
     <form-label :for="id" :required="required">
       {{ label }}
     </form-label>
@@ -57,9 +57,9 @@ export default {
       type: String,
       default: '',
     },
-    halfWidth: {
-      type: Boolean,
-      default: false,
+    className: {
+      type: String,
+      default: 'col-md-6',
     },
   },
   data: () => ({
@@ -69,10 +69,6 @@ export default {
     regions: [],
   }),
   computed: {
-    classNames() {
-      const { halfWidth } = this;
-      return halfWidth ? 'col-md-6' : 'col-md-4';
-    },
     regionCode: {
       get() {
         return this.value || '';
diff --git a/packages/marko-web-identity-x/browser/form/fields/street.vue b/packages/marko-web-identity-x/browser/form/fields/street.vue
index f7fcc6b4e..9b32cde9c 100644
--- a/packages/marko-web-identity-x/browser/form/fields/street.vue
+++ b/packages/marko-web-identity-x/browser/form/fields/street.vue
@@ -1,5 +1,5 @@
 <template>
-  <form-group :class-name="classNames">
+  <form-group :class-name="className">
     <form-label :for="id" :required="required">
       {{ label }}
     </form-label>
@@ -46,19 +46,15 @@ export default {
       type: String,
       default: '',
     },
-    fullWidth: {
-      type: Boolean,
-      default: true,
+    className: {
+      type: String,
+      default: 'col-md-12',
     },
   },
   data: () => ({
     id: 'sign-on-street',
   }),
   computed: {
-    classNames() {
-      const { fullWidth } = this;
-      return fullWidth ? 'col-md-12' : 'col-md-8';
-    },
     street: {
       get() {
         return this.value || '';

From 92ef58ad4f705d22f542155815b6ed43058a5a69 Mon Sep 17 00:00:00 2001
From: Josh Worden <josh@parameter1.com>
Date: Wed, 16 Feb 2022 16:02:18 -0600
Subject: [PATCH 16/18] Pass props instead of functions

---
 .../browser/form/address-block.vue            | 54 +++++++-----
 .../marko-web-identity-x/browser/profile.vue  | 85 +++++++++++++++++--
 2 files changed, 107 insertions(+), 32 deletions(-)

diff --git a/packages/marko-web-identity-x/browser/form/address-block.vue b/packages/marko-web-identity-x/browser/form/address-block.vue
index b026b65a5..b4087cbf0 100644
--- a/packages/marko-web-identity-x/browser/form/address-block.vue
+++ b/packages/marko-web-identity-x/browser/form/address-block.vue
@@ -4,38 +4,38 @@
       Address
     </legend>
 
-    <div v-if="isFieldVisible('street')" class="row">
+    <div v-if="street.visible" class="row">
       <street
         v-model="user.street"
-        :required="isFieldRequired('street')"
-        :class-name="isFieldVisible('addressExtra') ? 'col-md-8' : 'col-md-12'"
+        :required="street.required"
+        :class-name="addressExtra.visible ? 'col-md-8' : 'col-md-12'"
       />
       <address-extra
-        v-if="isFieldVisible('addressExtra')"
+        v-if="addressExtra.visible"
         v-model="user.addressExtra"
-        :required="isFieldRequired('addressExtra')"
+        :required="addressExtra.required"
       />
     </div>
 
-    <div v-if="isFieldVisible('city') || displayRegionField" class="row">
+    <div v-if="city.visible || regionCode.visible" class="row">
       <city
-        v-if="isFieldVisible('city')"
+        v-if="city.visible"
         v-model="user.city"
-        :required="isFieldRequired('city')"
-        :class-name="displayRegionField ? 'col-md-4' : 'col-md-6'"
+        :required="city.required"
+        :class-name="regionCode.visible ? 'col-md-4' : 'col-md-6'"
       />
       <region
-        v-if="displayRegionField"
+        v-if="regionCode.visible"
         v-model="user.regionCode"
         :country-code="user.countryCode"
-        :required="isFieldRequired('regionCode')"
-        :class-name="isFieldVisible('city') ? 'col-md-4' : 'col-md-6'"
+        :required="regionCode.required"
+        :class-name="city.visible ? 'col-md-4' : 'col-md-6'"
       />
       <postal-code
-        v-if="displayRegionField"
+        v-if="regionCode.visible"
         v-model="user.postalCode"
-        :required="isFieldRequired('postalCode')"
-        :class-name="isFieldVisible('city') ? 'col-md-4' : 'col-md-6'"
+        :required="postalCode.required"
+        :class-name="city.visible ? 'col-md-4' : 'col-md-6'"
       />
     </div>
   </fieldset>
@@ -57,19 +57,27 @@ export default {
     AddressExtra,
   },
   props: {
-    isFieldRequired: {
-      type: Function,
+    user: {
+      type: Object,
       required: true,
     },
-    isFieldVisible: {
-      type: Function,
+    street: {
+      type: Object,
       required: true,
     },
-    displayRegionField: {
-      type: Boolean,
-      default: false,
+    addressExtra: {
+      type: Object,
+      required: true,
     },
-    user: {
+    city: {
+      type: Object,
+      required: true,
+    },
+    regionCode: {
+      type: Object,
+      required: true,
+    },
+    postalCode: {
       type: Object,
       required: true,
     },
diff --git a/packages/marko-web-identity-x/browser/profile.vue b/packages/marko-web-identity-x/browser/profile.vue
index 5e0b1e260..1058152a0 100644
--- a/packages/marko-web-identity-x/browser/profile.vue
+++ b/packages/marko-web-identity-x/browser/profile.vue
@@ -7,13 +7,13 @@
           <div class="col-md-6">
             <given-name
               v-model="user.givenName"
-              :required="isFieldRequired('givenName')"
+              :required="givenNameSettings.required"
             />
           </div>
           <div class="col-md-6">
             <family-name
               v-model="user.familyName"
-              :required="isFieldRequired('familyName')"
+              :required="familyNameSettings.required"
             />
           </div>
         </div>
@@ -22,13 +22,13 @@
           <div class="col-md-6">
             <organization
               v-model="user.organization"
-              :required="isFieldRequired('organization')"
+              :required="organizationSettings.required"
             />
           </div>
           <div class="col-md-6">
             <organization-title
               v-model="user.organizationTitle"
-              :required="isFieldRequired('organizationTitle')"
+              :required="organizationTitleSettings.required"
             />
           </div>
         </div>
@@ -37,7 +37,7 @@
           <div class="col-md-6">
             <country
               v-model="user.countryCode"
-              :required="isFieldRequired('countryCode')"
+              :required="countryCodeSettings.required"
             />
           </div>
         </div>
@@ -45,9 +45,11 @@
         <address-block
           v-if="showAddressBlock"
           :user="user"
-          :is-field-required="isFieldRequired"
-          :is-field-visible="isFieldVisible"
-          :display-region-field="displayRegionField"
+          :street="streetSettings"
+          :address-extra="addressExtraSettings"
+          :city="citySettings"
+          :region-code="regionCodeSettings"
+          :postal-code="postalCodeSettings"
         />
 
         <div v-if="customSelectFieldAnswers.length" class="row">
@@ -268,7 +270,7 @@ export default {
     },
 
     /**
-     *
+     * @todo remove, should merge into regionCodeSettings prop.
      */
     displayRegionField() {
       return regionCountryCodes.includes(this.countryCode);
@@ -313,8 +315,73 @@ export default {
       if (this.isFieldVisible('city')) return true;
       if (this.isFieldVisible('street')) return true;
 
+      // @todo update
       return this.displayRegionField;
     },
+
+    /**
+     * Field settings
+     */
+    givenNameSettings() {
+      return {
+        required: this.isFieldRequired('givenName'),
+        visible: this.isFieldVisible('givenName'),
+      };
+    },
+    familyNameSettings() {
+      return {
+        required: this.isFieldRequired('familyName'),
+        visible: this.isFieldVisible('familyName'),
+      };
+    },
+    organizationSettings() {
+      return {
+        required: this.isFieldRequired('organization'),
+        visible: this.isFieldVisible('organization'),
+      };
+    },
+    organizationTitleSettings() {
+      return {
+        required: this.isFieldRequired('organizationTitle'),
+        visible: this.isFieldVisible('organizationTitle'),
+      };
+    },
+    countryCodeSettings() {
+      return {
+        required: this.isFieldRequired('countryCode'),
+        visible: this.isFieldVisible('countryCode'),
+      };
+    },
+    streetSettings() {
+      return {
+        required: this.isFieldRequired('street'),
+        visible: this.isFieldVisible('street'),
+      };
+    },
+    addressExtraSettings() {
+      return {
+        required: this.isFieldRequired('addressExtra'),
+        visible: this.isFieldVisible('addressExtra'),
+      };
+    },
+    citySettings() {
+      return {
+        required: this.isFieldRequired('city'),
+        visible: this.isFieldVisible('city'),
+      };
+    },
+    regionCodeSettings() {
+      return {
+        required: this.isFieldRequired('regionCode'),
+        visible: this.isFieldVisible('regionCode'),
+      };
+    },
+    postalCodeSettings() {
+      return {
+        required: this.isFieldRequired('postalCode'),
+        visible: this.isFieldVisible('postalCode'),
+      };
+    },
   },
 
   /**

From 3c2c28885eda11f14e871569cfed18090952d3f3 Mon Sep 17 00:00:00 2001
From: Josh Worden <josh@parameter1.com>
Date: Wed, 16 Feb 2022 16:19:01 -0600
Subject: [PATCH 17/18] Unify display settings

---
 .../marko-web-identity-x/browser/profile.vue  | 30 ++++++++-----------
 1 file changed, 13 insertions(+), 17 deletions(-)

diff --git a/packages/marko-web-identity-x/browser/profile.vue b/packages/marko-web-identity-x/browser/profile.vue
index 1058152a0..db4624374 100644
--- a/packages/marko-web-identity-x/browser/profile.vue
+++ b/packages/marko-web-identity-x/browser/profile.vue
@@ -269,13 +269,6 @@ export default {
       return user.countryCode;
     },
 
-    /**
-     * @todo remove, should merge into regionCodeSettings prop.
-     */
-    displayRegionField() {
-      return regionCountryCodes.includes(this.countryCode);
-    },
-
     submitMessage() {
       const message = 'Profile updated.';
       if (this.isReloadingPage) return `${message} Reloading page...`;
@@ -312,11 +305,11 @@ export default {
       if (!this.countryCode) return false;
 
       // Only show if a subfield is visible
-      if (this.isFieldVisible('city')) return true;
-      if (this.isFieldVisible('street')) return true;
-
-      // @todo update
-      return this.displayRegionField;
+      if (this.citySettings.visible) return true;
+      if (this.streetSettings.visible) return true;
+      if (this.regionCodeSettings.visible) return true;
+      if (this.postalCodeSettings.visible) return true;
+      return false;
     },
 
     /**
@@ -371,15 +364,17 @@ export default {
       };
     },
     regionCodeSettings() {
+      const canRequire = regionCountryCodes.includes(this.countryCode);
       return {
-        required: this.isFieldRequired('regionCode'),
-        visible: this.isFieldVisible('regionCode'),
+        required: canRequire && this.isFieldRequired('regionCode'),
+        visible: canRequire && this.isFieldVisible('regionCode'),
       };
     },
     postalCodeSettings() {
+      const canRequire = regionCountryCodes.includes(this.countryCode);
       return {
-        required: this.isFieldRequired('postalCode'),
-        visible: this.isFieldVisible('postalCode'),
+        required: canRequire && this.isFieldRequired('postalCode'),
+        visible: canRequire && this.isFieldVisible('postalCode'),
       };
     },
   },
@@ -389,10 +384,11 @@ export default {
    */
   watch: {
     /**
-     * Clear region code on country code change.
+     * Clear region and postal codes on country code change.
      */
     countryCode() {
       this.user.regionCode = null;
+      this.user.postalCode = null;
     },
   },
 

From 56f58823f91ca582b26bdd59129623de5f11f995 Mon Sep 17 00:00:00 2001
From: Josh Worden <josh@parameter1.com>
Date: Thu, 17 Feb 2022 09:33:42 -0600
Subject: [PATCH 18/18] Remove function calls

---
 .../marko-web-identity-x/browser/profile.vue  | 48 ++++++++-----------
 1 file changed, 20 insertions(+), 28 deletions(-)

diff --git a/packages/marko-web-identity-x/browser/profile.vue b/packages/marko-web-identity-x/browser/profile.vue
index db4624374..d111b766b 100644
--- a/packages/marko-web-identity-x/browser/profile.vue
+++ b/packages/marko-web-identity-x/browser/profile.vue
@@ -317,64 +317,64 @@ export default {
      */
     givenNameSettings() {
       return {
-        required: this.isFieldRequired('givenName'),
-        visible: this.isFieldVisible('givenName'),
+        required: this.requiredFields.includes('givenName'),
+        visible: !this.hiddenFields.includes('givenName'),
       };
     },
     familyNameSettings() {
       return {
-        required: this.isFieldRequired('familyName'),
-        visible: this.isFieldVisible('familyName'),
+        required: this.requiredFields.includes('familyName'),
+        visible: !this.hiddenFields.includes('familyName'),
       };
     },
     organizationSettings() {
       return {
-        required: this.isFieldRequired('organization'),
-        visible: this.isFieldVisible('organization'),
+        required: this.requiredFields.includes('organization'),
+        visible: !this.hiddenFields.includes('organization'),
       };
     },
     organizationTitleSettings() {
       return {
-        required: this.isFieldRequired('organizationTitle'),
-        visible: this.isFieldVisible('organizationTitle'),
+        required: this.requiredFields.includes('organizationTitle'),
+        visible: !this.hiddenFields.includes('organizationTitle'),
       };
     },
     countryCodeSettings() {
       return {
-        required: this.isFieldRequired('countryCode'),
-        visible: this.isFieldVisible('countryCode'),
+        required: this.requiredFields.includes('countryCode'),
+        visible: !this.hiddenFields.includes('countryCode'),
       };
     },
     streetSettings() {
       return {
-        required: this.isFieldRequired('street'),
-        visible: this.isFieldVisible('street'),
+        required: this.requiredFields.includes('street'),
+        visible: !this.hiddenFields.includes('street'),
       };
     },
     addressExtraSettings() {
       return {
-        required: this.isFieldRequired('addressExtra'),
-        visible: this.isFieldVisible('addressExtra'),
+        required: this.requiredFields.includes('addressExtra'),
+        visible: !this.hiddenFields.includes('addressExtra'),
       };
     },
     citySettings() {
       return {
-        required: this.isFieldRequired('city'),
-        visible: this.isFieldVisible('city'),
+        required: this.requiredFields.includes('city'),
+        visible: !this.hiddenFields.includes('city'),
       };
     },
     regionCodeSettings() {
       const canRequire = regionCountryCodes.includes(this.countryCode);
       return {
-        required: canRequire && this.isFieldRequired('regionCode'),
-        visible: canRequire && this.isFieldVisible('regionCode'),
+        required: canRequire && this.requiredFields.includes('regionCode'),
+        visible: canRequire && !this.hiddenFields.includes('regionCode'),
       };
     },
     postalCodeSettings() {
       const canRequire = regionCountryCodes.includes(this.countryCode);
       return {
-        required: canRequire && this.isFieldRequired('postalCode'),
-        visible: canRequire && this.isFieldVisible('postalCode'),
+        required: canRequire && this.requiredFields.includes('postalCode'),
+        visible: canRequire && !this.hiddenFields.includes('postalCode'),
       };
     },
   },
@@ -409,14 +409,6 @@ export default {
     /**
      *
      */
-    isFieldRequired(name) {
-      return this.requiredFields.includes(name);
-    },
-
-    isFieldVisible(name) {
-      return !this.hiddenFields.includes(name);
-    },
-
     getRegionalPolicyAnswer(policyId) {
       return this.user.regionalConsentAnswers.find(a => a.id === policyId);
     },