Reuse Directory

components/Business.vue

@@ -60,7 +60,7 @@
                 :href="business.website"
                 @click="trackOutboundLink(business.website)"
               >
-                {{ business.website }}
+                Visit website
               </a>
             </p>
 
@@ -77,12 +77,14 @@
               </a>
             </p>
 
-            <p v-if="business.address" class="business-detail">
+            <p v-if="showAddress" class="business-detail">
               <client-only>
                 <v-icon name="map-marker" class="icon" />
               </client-only>
-              <span>{{ business.address }}, {{ business.city }}</span>
-              <span v-if="business.postcode">{{ business.postcode }}</span>
+              <span v-if="business.localAreaName">
+                {{ business.localAreaName }},
+              </span>
+              <span>{{ business.city }}</span>
             </p>
           </div>
         </div>
@@ -124,6 +126,14 @@ export default {
     }
   },
   computed: {
+    showAddress() {
+      // We have a special value of all dots to indicate this should be omitted.
+      return (
+        this.business && this.business.address
+        // eslint-disable-next-line
+        //this.business.address.replaceAll('.', '').length
+      )
+    },
     distance() {
       const location = this.$store.getters['businesses/searchLocation']
 

components/BusinessModal.vue

@@ -38,7 +38,7 @@
               >({{ $t('source') }})</a
             >
           </p>
-          <p v-if="business.description" class="m-0 description">
+          <p v-if="showDescription" class="m-0 description">
             {{ business.description }}
           </p>
         </div>
@@ -99,10 +99,12 @@
           </a>
         </p>
 
-        <p v-if="business.address">
+        <p v-if="showAddress">
           <v-icon name="map-marker" class="fa-fw icon" />
-          <span>{{ business.address }}, {{ business.city }}</span>
-          <span v-if="business.postcode">{{ business.postcode }}</span>
+          <span v-if="business.localAreaName">
+            {{ business.localAreaName }},
+          </span>
+          <span>{{ business.city }}</span>
           <span v-if="distance" class="text-muted text-small">
             ({{ roundedPlural(distance) }})</span
           >
@@ -114,17 +116,29 @@
         </p>
 
         <div v-if="business.qualifications" class="mt-2 mb-2 d-flex">
-          <v-icon name="graduation-cap" class="fa-fw icon mr-1" />
+          <v-icon name="laptop" class="fa-fw icon mr-1 mt-1" />
           <div v-if="html">
-            {{ $t('qualifications') }}:
+            <strong>{{ $t('qualifications') }}</strong
+            >:
             <!--            eslint-disable-next-line-->
             <div
             v-html="business.qualifications" />
           </div>
           <div v-else>
-            {{ $t('qualifications') }}: {{ business.qualifications }}
+            <strong>{{ $t('qualifications') }}</strong
+            >: {{ business.qualifications }}
           </div>
         </div>
+
+        <p v-if="business.communityEndorsement">
+          <v-icon name="user" class="fa-fw icon" />
+          <span>
+            <strong>{{ $t('endorsement') }}</strong
+            >:
+            {{ business.communityEndorsement }}
+          </span>
+        </p>
+
         <p>
           <v-icon name="calendar" class="fa-fw icon" />
           <span>{{ $t('lastUpdated') }}: {{ updated }}</span>
@@ -163,6 +177,24 @@ export default {
     business() {
       return this.id ? this.$store.getters['businesses/get'](this.id) : null
     },
+    showDescription() {
+      // We have a special value of all dots to indicate this should be omitted.
+      return (
+        this.business &&
+        this.business.description &&
+        // eslint-disable-next-line
+        this.business.description.replaceAll('.', '').length
+      )
+    },
+    showAddress() {
+      // We have a special value of all dots to indicate this should be omitted.
+      return (
+        this.business &&
+        this.business.address &&
+        // eslint-disable-next-line
+        this.business.address.replaceAll('.', '').length
+      )
+    },
     distance() {
       const location = this.$store.getters['businesses/searchLocation']
 
@@ -206,9 +238,7 @@ export default {
     },
     completeAddress() {
       return this.business
-        ? [this.business.address, this.business.city, this.business.postcode]
-            .filter(Boolean)
-            .join(', ')
+        ? [this.business.address, this.business.city].filter(Boolean).join(', ')
         : null
     },
     html() {

components/BusinessPage.vue

@@ -139,9 +139,11 @@ import { mapGetters } from 'vuex'
 import Map from '@/components/Map'
 import BusinessList from '@/components/BusinessList'
 import {
-  BOUNDS_LONDON,
+  BOUNDS_UK,
   BOUNDS_WALES,
+  REGION_LONDON,
   REGION_WALES,
+  SEARCH_HINT_UK,
   SEARCH_HINT_LONDON,
   SEARCH_HINT_WALES,
 } from '@/regions'
@@ -191,7 +193,7 @@ export default {
           break
         }
         default: {
-          bounds = BOUNDS_LONDON
+          bounds = BOUNDS_UK
           break
         }
       }
@@ -268,7 +270,7 @@ export default {
           ]
           break
         }
-        default: {
+        case REGION_LONDON: {
           ret = [
             {
               value: 1,
@@ -293,6 +295,35 @@ export default {
           ]
           break
         }
+        default: {
+          ret = [
+            {
+              value: 1,
+              text: '1 ' + this.$t('mile'),
+            },
+            {
+              value: 2,
+              text: '2 ' + this.$t('miles'),
+            },
+            {
+              value: 5,
+              text: '5 ' + this.$t('miles'),
+            },
+            {
+              value: 10,
+              text: '10 ' + this.$t('miles'),
+            },
+            {
+              value: 20,
+              text: '20 ' + this.$t('miles'),
+            },
+            {
+              value: 2000,
+              text: this.$t('allLondon'),
+            },
+          ]
+          break
+        }
       }
 
       return ret
@@ -305,10 +336,14 @@ export default {
           ret = SEARCH_HINT_WALES
           break
         }
-        default: {
+        case REGION_LONDON: {
           ret = SEARCH_HINT_LONDON
           break
         }
+        default: {
+          ret = SEARCH_HINT_UK
+          break
+        }
       }
 
       return ret
@@ -414,9 +449,7 @@ export default {
 
       // Track the select.
       const business = this.$store.getters['businesses/get'](uid)
-      const value = [business.name, business.address, business.postcode].join(
-        ', '
-      )
+      const value = [business.name, business.address].join(', ')
       this.$ga.event('map', 'select_' + this.region, value)
     },
     showMoreInfo() {
@@ -509,6 +542,7 @@ export default {
 
 .business-list-container {
   background-color: #f7f5ed;
+  margin-top: 10px;
 }
 
 .business-list-container__results-header {