feat/hide phone numbers (#332)

api/seeders/simple.js

@@ -129,7 +129,7 @@ const sendMessage = async (currentUserId, chatId, message, useLastMessageSeen =
   return msg.id;
 };
 
-const createGarden = async ({ latitude, longitude }, user) => {
+const createGarden = async ({ latitude, longitude }, user, extraProps) => {
   await createGardenDoc(user.uid, {
     description: 'Hello, this is a test camping spot. You are welcome to stay!',
     location: {
@@ -147,7 +147,8 @@ const createGarden = async ({ latitude, longitude }, user) => {
       tent: true
     },
     photo: null,
-    listed: true
+    listed: true,
+    ...extraProps
   });
   return user;
 };
@@ -159,11 +160,18 @@ const seed = async () => {
     createNewUser(
       { email: 'user1@slowby.travel' },
       { firstName: 'Bob', lastName: 'Dylan', countryCode: 'US' }
-    ).then(
-      createGarden.bind(null, {
-        latitude: 50.952798579681854,
-        longitude: 4.763172541851901
-      })
+    ).then((user) =>
+      createGarden(
+        {
+          latitude: 50.952798579681854,
+          longitude: 4.763172541851901
+        },
+        user,
+        {
+          description:
+            'Hello, this is a test garden. If you want to stay here, please send an SMS to 0679669739 or 0681483065.'
+        }
+      )
     ),
     // Superfan, no garden
     createNewUser(
@@ -174,7 +182,7 @@ const seed = async () => {
     createNewUser(
       { email: 'user3@slowby.travel' },
       { firstName: 'Jospehine', lastName: 'Delafroid', countryCode: 'FR', superfan: true }
-    ).then(createGarden.bind(null, { latitude: 50.9427, longitude: 4.5124 })),
+    ).then((user) => createGarden({ latitude: 50.9427, longitude: 4.5124 }, user)),
     // No superfan, no garden, has past chats
     createNewUser(
       {

src/lib/components/Garden/GardenDrawer.svelte

@@ -26,8 +26,12 @@
   import trackEvent from '$lib/util/track-plausible';
   import { PlausibleEvent } from '$lib/types/Plausible';
   import { anchorText } from '$lib/util/translation-helpers';
+  import HiddenPhoneNumber from './HiddenPhoneNumber.svelte';
 
   const dispatch = createEventDispatcher();
+  const phoneRegex =
+    /\+?\d{1,4}?[-/\\.\s]?\(?\d{1,3}?\)?[-.\s]?\d{1,4}[-.\s]?\d{1,4}[-.\s]?\d{1,9}/g;
+  let descriptionEl: unknown | undefined;
 
   $: gardenIsSelected = !!garden;
   $: facilities = [
@@ -151,6 +155,42 @@
   };
 
   $: chatWithGardenLink = `${routes.CHAT}?with=${garden?.id}`;
+
+  const createPhoneNumberPlaceHolder = (length: number) => {
+    const container = document.createElement('span');
+    new HiddenPhoneNumber({
+      target: container,
+      props: {
+        length
+      }
+    });
+    return container;
+  };
+
+  $: isPhoneNumberInDescription = garden?.description ? phoneRegex.test(garden.description) : false;
+
+  $: if (descriptionEl) {
+    // Replace hidden phone number markers with a component.
+    const el = descriptionEl.firstChild as HTMLParagraphElement;
+    const hiddenNumberRegex = /\[(\*+)\]/;
+    if (hiddenNumberRegex.test(el?.textContent)) {
+      // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/split#splitting_with_a_regexp_to_include_parts_of_the_separator_in_the_result
+      // We use groups in the regex to still have access to the length of the phone number.
+      // Returns an array like ['sms me at ', 8, ' or ', 9]
+      const newNodes = el.textContent
+        .split(hiddenNumberRegex)
+        .map((el) =>
+          el.match(/\*+/) ? createPhoneNumberPlaceHolder(el.length) : document.createTextNode(el)
+        );
+
+      // Remove the original text node of <p>
+      el.firstChild.remove();
+      // Re-insert new nodes
+      for (const node of newNodes) {
+        el.appendChild(node);
+      }
+    }
+  }
 </script>
 
 <Progress active={isGettingMagnifiedPhoto} />
@@ -212,8 +252,23 @@
         {/if}
       </header>
       <div class="drawer-content-area">
-        <div class="description">
-          <Text class="mb-l">{garden.description}</Text>
+        <div class="description" bind:this={descriptionEl}>
+          <Text class="mb-l"
+            >{$user?.superfan
+              ? garden?.description
+              : garden?.description.replaceAll(
+                  phoneRegex,
+                  // With client-side code, we replace this with more aesthetic HTML & CSS (see above).
+                  // We can not use the @html directive here, because of a high XSS injection risk.
+                  (match) => `[${'*'.repeat(match.length)}]`
+                )}</Text
+          >
+          {#if isPhoneNumberInDescription && !$user?.superfan}
+            <p class="phone-notice">
+              <span style="font-style: normal;">🔐 </span>{$_('garden.drawer.phone-notice')}
+            </p>
+          {/if}
+          <p />
         </div>
         <div class="chips-container">
           {#each facilities as facility (facility.name)}
@@ -431,6 +486,12 @@
     word-wrap: break-word;
   }
 
+  .phone-notice {
+    font-size: 1.2rem;
+    font-style: italic;
+    margin: 1rem 0;
+  }
+
   .magnified-photo-wrapper {
     width: 100vw;
     height: calc(var(--vh, 1vh) * 100);

src/lib/components/Garden/HiddenPhoneNumber.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  export let length = 6;
+</script>
+
+<span title="Hidden phone number">🔐 {'⋆'.repeat(length)}</span>
+
+<style>
+  span {
+    background-color: #eee;
+    border-radius: 3px;
+    display: inline-flex;
+    align-items: center;
+    padding: 0 0.5rem;
+  }
+</style>

src/locales/en.json

@@ -559,7 +559,8 @@
         "become-member-text": "become a member"
       },
       "save": "Save",
-      "saved": "Saved"
+      "saved": "Saved",
+      "phone-notice": "Phone numbers are only visible to members."
     },
     "add": {
       "title": "Add your garden"

src/locales/fr.json

@@ -613,7 +613,8 @@
         "capacity": "Place pour {styleCapacity} {capacity, plural, one {tente} other {tentes}}"
       },
       "save": "Sauvegarder",
-      "saved": "Sauvegardé"
+      "saved": "Sauvegardé",
+      "phone-notice": "Les numéros de téléphone sont visibles uniquement par les membres."
     },
     "add": {
       "title": "Ajoutez votre jardin"

src/locales/nl.json

@@ -173,7 +173,8 @@
         "become-member-text": "lid worden"
       },
       "save": "Bewaar",
-      "saved": "Bewaard"
+      "saved": "Bewaard",
+      "phone-notice": "Telefoonnummers zijn alleen zichtbaar voor leden."
     },
     "add": {
       "title": "Voeg jouw tuin toe"