Merge pull request #1194 from dpc-sdp/feature/R20-2028-geolocate-label

[R20-2028, R20-2019] Geolocate button messages and labels
dpc-sdp · May 31, 2024 · 78963e5 · 78963e5
2 parents e8b0266 + 87ce103
commit 78963e5
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 24 deletions.
diff --git a/packages/ripple-tide-search/components/global/TideCustomCollection.vue b/packages/ripple-tide-search/components/global/TideCustomCollection.vue
@@ -59,7 +59,8 @@ const props = withDefaults(defineProps<Props>(), {
     labels: {
       submit: 'Submit',
       reset: 'Reset',
-      placeholder: 'Enter a search term'
+      placeholder: 'Enter a search term',
+      geolocateBtn: 'Use my current location'
     },
     displayMapTab: false,
     suggestions: {
@@ -507,25 +508,8 @@ const handleGeolocateSuccess = (pos: GeolocationPosition) => {
 }
 
 const handleGeolocateError = (error: GeolocationPositionError) => {
-  let message
-
-  switch (error.code) {
-    case error.PERMISSION_DENIED:
-      message = 'User denied the request for Geolocation.'
-      break
-    case error.POSITION_UNAVAILABLE:
-      message = 'Location information is unavailable.'
-      break
-    case error.TIMEOUT:
-      message = 'The request to get user location timed out.'
-      break
-    default:
-      message = 'An unknown error occurred.'
-      break
-  }
-
   isGettingLocation.value = false
-  geolocationError.value = message
+  geolocationError.value = `We couldn't find your location. Check your browser permissions or input your location manually`
 }
 
 const locationOrGeolocation = computed(() => {
@@ -594,7 +578,10 @@ const locationOrGeolocation = computed(() => {
           @success="handleGeolocateSuccess"
           @error="handleGeolocateError"
         >
-          Use my location
+          {{
+            searchListingConfig.labels?.geolocateBtn ||
+            'Use my current location'
+          }}
         </RplMapGeolocateButton>
         <div class="tide-search-refine-wrapper">
           <RplSearchBarRefine

diff --git a/packages/ripple-tide-search/types.ts b/packages/ripple-tide-search/types.ts
@@ -201,6 +201,7 @@ export type TideSearchListingConfig = {
       submit: string
       reset: string
       placeholder: string
+      geolocateBtn?: string
     }
     /**
      * @description custom sort clause

diff --git a/packages/ripple-ui-maps/src/components/geolocation/RplMapGeolocateButton.css b/packages/ripple-ui-maps/src/components/geolocation/RplMapGeolocateButton.css
@@ -1,4 +1,10 @@
-.rpl-map-geolocate-btn {
+.rpl-map-geolocate {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.rpl-map-geolocate__btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -31,3 +37,8 @@
     cursor: not-allowed;
   }
 }
+
+.rpl-map-geolocate__error {
+  margin-top: var(--rpl-sp-3);
+  margin-bottom: 0;
+}
diff --git a/packages/ripple-ui-maps/src/components/geolocation/RplMapGeolocateButton.vue b/packages/ripple-ui-maps/src/components/geolocation/RplMapGeolocateButton.vue
@@ -1,8 +1,8 @@
 <template>
-  <div>
+  <div class="rpl-map-geolocate">
     <button
       :class="{
-        'rpl-map-geolocate-btn': true,
+        'rpl-map-geolocate__btn': true,
         'rpl-u-focusable-inline': true
       }"
       :disabled="isBusy"
@@ -13,7 +13,11 @@
         <slot> Use my current location </slot>
       </span>
     </button>
-    <RplFormValidationError v-if="error" :message="error" />
+    <RplFormValidationError
+      v-if="error"
+      class="rpl-map-geolocate__error"
+      :message="error"
+    />
   </div>
 </template>
 <script setup lang="ts">