fix: default billing information does not appear on address (#382)

* fix(theme): added badge for default-shipping and default-sbilling address * fix(composables): sort addresses, put default shipping and billing address to top * fix(theme): default billing and shipping text can be translated * chore(theme): added translations * fix(composables): removed console.log
vuestorefront · Jan 10, 2022 · ea9f74b · ea9f74b
1 parent 2b00372
commit ea9f74b
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 12 deletions.
diff --git a/packages/composables/src/getters/userAddressesGetters.ts b/packages/composables/src/getters/userAddressesGetters.ts
@@ -10,7 +10,9 @@ const userAddressesGetters: UserAddressesGetters = {
   getAddresses: (addresses, criteria?: Record<string, any>) => {
     if (!addresses || addresses.length === 0 || !Array.isArray(addresses)) return [];
 
-    const addressesData = addresses?.map((a) => transformUserGetter(a));
+    const addressesData = addresses?.map((a) => transformUserGetter(a))
+      ?.sort((a, b) => ((a.default_shipping === b.default_shipping) ? 0 : (a.default_shipping ? -1 : 1)))
+      ?.sort((a, b) => ((a.default_billing === b.default_billing) ? 0 : (a.default_billing ? -1 : 1)));
 
     if (!criteria || Object.keys(criteria).length === 0) {
       return addressesData;

diff --git a/packages/theme/components/UserAddressDetails.vue b/packages/theme/components/UserAddressDetails.vue
@@ -4,11 +4,6 @@
       :style="userAddress.isDefault ? 'font-weight: bold;' : ''"
     >
       {{ userAddress.firstName }} {{ userAddress.lastName }}
-      <small
-        v-if="addressDefaultText"
-      >
-        - {{ addressDefaultText }}
-      </small>
     </p>
     <p>{{ userAddress.street }}, {{ userAddress.streetNumber }}</p>
 
@@ -24,6 +19,22 @@
     >
       {{ userAddress.phone }}
     </p>
+    <small
+      v-if="isDefaultShippingText || isDefaultBillingText"
+    >
+      <span
+        v-if="isDefaultShippingText"
+        class="sf-badge--number color-info sf-badge"
+      >
+        {{ $t(isDefaultShippingText) }}
+      </span>
+      <span
+        v-if="isDefaultBillingText"
+        class="sf-badge--number color-info sf-badge"
+      >
+        {{ $t(isDefaultBillingText) }}
+      </span>
+    </small>
   </div>
 </template>
 
@@ -62,15 +73,14 @@ export default defineComponent({
       isDefaultBilling: userAddressesGetters.isDefaultBilling(address.value),
     }));
 
-    const addressDefaultText = computed(() => {
-      if (userAddress.value.isDefaultShipping) return 'Default Shipping Address';
-      if (userAddress.value.isDefaultBilling) return 'Default Billing Address';
-      return '';
-    });
+    const isDefaultShippingText = computed(() => (userAddress.value.isDefaultShipping ? 'Default Shipping Address' : ''));
+
+    const isDefaultBillingText = computed(() => (userAddress.value.isDefaultBilling ? 'Default Billing Address' : ''));
 
     return {
       userAddress,
-      addressDefaultText,
+      isDefaultShippingText,
+      isDefaultBillingText,
     };
   },
 });

diff --git a/packages/theme/lang/en.js b/packages/theme/lang/en.js
@@ -166,4 +166,6 @@ export default {
   'Your current email address is': 'Your current email address is',
   forgotPasswordConfirmation: 'Thanks! If there is an account registered with the {0} email, you will find message with a password reset link in your inbox.',
   subscribeToNewsletterModalContent: 'After signing up for the newsletter, you will receive special offers and messages from VSF via email. We will not sell or distribute your email to any third party at any time. Please see our {0}.',
+  'Default Shipping Address': 'Default Shipping Address',
+  'Default Billing Address': 'Default Billing Address'
 };