copy: updated notification copy

src/lib/components/Notifications/IOSBrowserSteps.svelte

@@ -21,10 +21,10 @@
   });
 </script>
 
-<ol>
+<ol class="outer">
   <li>
     <span>{$_('push-notifications.how-to.ios-browser-steps.1')}</span>
-    <p>
+    <ol class="inner">
       {@html $_(`push-notifications.how-to.ios-browser-steps.1-${lowerCaseBrowserName}`, {
         values: {
           burgerIcon: ClientIcon(burgerIcon),
@@ -33,7 +33,7 @@
           plusSquareIcon: ClientIcon(plusSquareIcon)
         }
       })}
-    </p>
+    </ol>
   </li>
   <li><span>{$_('push-notifications.how-to.ios-browser-steps.2')}</span></li>
   <li><span>{$_('push-notifications.how-to.ios-browser-steps.3')}</span></li>
@@ -51,18 +51,23 @@
 </p>
 
 <style>
-  ol {
+  ol.outer {
     list-style: decimal;
     margin-top: 1rem;
     margin-left: 2.2rem;
   }
+
+  ol.inner {
+    list-style: lower-alpha;
+    list-style-position: inside;
+  }
   li {
     margin-bottom: 1rem;
   }
   li > span {
     font-weight: 600;
   }
-  ol :global(em) {
+  ol.outer :global(em) {
     font-weight: 500;
   }
 </style>

src/lib/components/Notifications/NotificationSetupGuideModal.svelte

@@ -31,18 +31,24 @@
     {:else if isUpgradeable16IDevice}
       <div class="upgrade">
         <!-- iOS: can be upgraded to a compatible version -->
-        {@html $_('push-notifications.how-to.ios-upgrade.copy', {
-          values: {
-            os: iDeviceInfo?.currentAppleOS,
-            link: $_('push-notifications.how-to.ios-upgrade.help-link'),
-            accountSettings: anchorText({
-              href: routes.ACCOUNT,
-              linkText: $_('push-notifications.how-to.ios-upgrade.account-settings'),
-              newtab: false,
-              class: 'link'
-            })
-          }
-        })}
+        <p>
+          {@html $_('push-notifications.how-to.ios-upgrade.copy', {
+            values: {
+              os: iDeviceInfo?.currentAppleOS,
+              link: anchorText({
+                href: $_('push-notifications.how-to.ios-upgrade.help-link'),
+                linkText: $_('push-notifications.how-to.ios-upgrade.help-link-copy'),
+                class: 'link'
+              }),
+              accountSettings: anchorText({
+                href: routes.ACCOUNT,
+                linkText: $_('push-notifications.how-to.ios-upgrade.account-settings'),
+                newtab: false,
+                class: 'link'
+              })
+            }
+          })}
+        </p>
         <div class="upgrade-btns">
           <Button
             href={$_('push-notifications.how-to.ios-upgrade.help-link')}

src/lib/util/translation-helpers.ts

@@ -7,6 +7,7 @@ import { UTM_MEMBERSHIP_CAMPAIGN, WTMG_BLOG_BASE_URL } from '$lib/constants';
 import createUrl from './create-url';
 import { goto } from './navigate';
 import trackEvent from './track-plausible';
+import { rootModal } from '$lib/stores/app';
 
 if (window) {
   // This function is referenced below in the inline onclick handler.
@@ -40,6 +41,12 @@ if (window) {
       }
       // Override with Svelte programmatic navigation
       // TODO: support newtab behavior?
+
+      // When navigating to an internal target from a modal, close the modal
+      // (otherwise the nav happens in the background)
+      // Example: "Account" link in /account notifications warnings
+      rootModal.set(null);
+
       goto(rawHref);
     }
   };

src/locales/en.json

@@ -1032,7 +1032,8 @@
       "unknown": "unknown",
       "current": "Current device",
       "last-seen": "Last seen on",
-      "unsupported": "It looks like this device doesn't support Web Push, which is required for mobile WTMG notifications. On Android you can try a different browser (Chrome worked best in our tests!). On iOS (iPhone or iPad), you need an iPhone 8 or newer {link} with iOS/iPadOS 16.4 or higher.",
+      "unsupported-ios": "<p>Oops! Your current iOS version doesn’t support mobile notifications. To turn them on, <strong>please update your iOS version</strong> (Settings > General > Software Update).</p><p>If you can’t update it to <strong>16.4 or higher</strong>, it means your device unfortunately doesn’t support our mobile notifications.</p>",
+      "unsupported-android": "Oops! This browser doesn’t support mobile notifications. Open WTMG in <strong>another browser</strong> to turn them on.",
       "ios16-check": "if you can update your device",
       "ios16-link": "https://support.apple.com/en-us/HT213411"
     }
@@ -1490,39 +1491,40 @@
     }
   },
   "push-notifications": {
-    "registration-success": "Notifications were successfully turned on",
+    "registration-success": "Notifications are successfully turned on",
     "prompt": {
       "title": "Get a mobile notification when you receive a message",
       "garden-intro": "You will automatically receive an email for each new request to stay in your garden",
       "garden-follow-up": ", and you can also get <strong>mobile notifications</strong>.",
       "garden-enable": "Would you also like to receive <strong>mobile notifications</strong> for new chat messages?",
       "garden-ios-home": "To turn on just <strong>add</strong> the <strong>WTMG</strong> website to your <strong>home screen</strong> in a few easy steps.",
-      "ios-installed": "<p>It looks like you added WTMG to your home screen, nice!</p><p>Now you can turn on notifications.</p>",
-      "ios-installed-title": "Almost there!",
+      "ios-installed": "Never miss a message by turning on mobile notifications!",
+      "ios-installed-title": "New: mobile notifications!",
       "btn-show-me": "Show me how",
       "btn-turn-on": "Turn on notifications",
       "follow-up-desktop": "Would yo like to receive <strong>mobile notifications</strong> for new chat messages?",
       "helpcenter-url": "https://help.welcometomygarden.org/master/1.-mobile-notifications"
     },
     "how-to": {
-      "title": "How to turn on notifications",
+      "title": "How to turn on mobile notifications",
       "ios-upgrade": {
-        "copy": "<p>To turn on notifications, you first need to <strong>update to {os} 16.4 or higher</strong>.</p>\n<p><a class=\"link\" href=\"{link}\" target=\"_blank\">Learn how to update your {os} version.</a></p>\n<p>After updating, go to your {accountSettings} to turn on mobile notifications.</p>",
+        "copy": "To receive mobile notifications, {link} or higher, then go to your {accountSettings} to turn them on.",
         "help-link": "https://support.apple.com/en-us/HT204204",
-        "account-settings": "WTMG account settings",
-        "btn-show": "Show me how to update",
-        "btn-skip": "Skip for now"
+        "help-link-copy": "update to iOS 16.4",
+        "account-settings": "Account",
+        "btn-show": "How to update",
+        "btn-skip": "Not now"
       },
       "ios-browser-steps": {
         "1": "Add WTMG to your Home Screen.",
-        "2": "Open the WTMG app from your Home Screen.",
-        "3": "Log in to your account and turn on notifications.",
-        "1-chrome": "Click on “<em>Share</em>” {shareIcon} (top right) → “<em>Add to your Home Screen</em>” {plusSquareIcon}.",
-        "1-safari": "Click “Share” {shareIcon} in the menu bar below, then “Add to your Home Screen” {plusSquareIcon}.",
-        "1-firefox": "Click on the <em>menu</em> {burgerIcon} (the small icon from Firefox, <em>not</em> the bigger WTMG menu) → “<em>Share</em>” {shareIcon} → “<em>Add to your Home Screen</em>” {plusSquareIcon}."
+        "2": "Open WTMG from your Home Screen",
+        "3": "Sign in to your account",
+        "1-chrome": "<li>Click on {shareIcon} “<em>Share</em>” (top right)</li>\n<li>Click on {plusSquareIcon} “<em>Add to your Home Screen</em>”</li>",
+        "1-safari": "<li>Click on {shareIcon} “<em>Share</em>” below</li>\n<li>Click on {plusSquareIcon} “<em>Add to your Home Screen</em>”</li>",
+        "1-firefox": "<li>Click on the {burgerIcon} small icon menu below (<em>not</em> the WTMG menu)</li> \n<li>Click on {shareIcon} “<em>Share</em>”</li> \n<li>Click on {plusSquareIcon}“<em>Add to your Home Screen</em>”</li>"
       },
-      "questions": "Any questions? Check our {guideLink}.",
-      "questions-link-text": "full guide"
+      "questions": "More detailed instructions? Visit our {guideLink}.",
+      "questions-link-text": "Help Center"
     }
   }
 }

src/locales/fr.json

@@ -1022,13 +1022,14 @@
       "delete": "Supprimer",
       "last-seen": "Dernière visite le",
       "unknown": "inconnu",
-      "unsupported": "Il semble que cet appareil ne soit pas compatible avec la technologie que nous utilisons pour les notifications WTMG. Sur Android, essayez un autre navigateur. Sur iOS (iPhone), mettez à jour votre iOS (16.4 ou plus) {link}.",
       "ios16-link": "https://support.apple.com/fr-be/HT213411",
       "ios16-check": "si votre appareil le permet",
       "current": "Cet appareil",
       "turn-on": "Activez les notifications",
       "title": "Notifications mobiles",
-      "manage": "Vous pouvez gérer vos notifications mobiles ici."
+      "manage": "Vous pouvez gérer vos notifications mobiles ici.",
+      "unsupported-ios": "<p>Oups ! Votre version iOS ne prend pas en charge les notifications mobiles. Pour les activer, <strong>mettez à jour votre</strong> version iOS (Réglages > Général > Mise à jour logicielle).</p><p>Si vous ne pouvez pas la mettre à jour vers la version <strong>16.4 ou plus</strong>, votre appareil ne prend alors pas en charge nos notifications mobiles.</p>",
+      "unsupported-android": "Oups ! Votre navigateur ne prend pas en charge les notifications mobiles. Ouvrez WTMG dans un <strong>autre navigateur</strong> pour les activer."
     }
   },
   "auth": {
@@ -1477,33 +1478,34 @@
     }
   },
   "push-notifications": {
-    "registration-success": "Les notifications ont été activées avec succès",
+    "registration-success": "Les notifications sont à présent activées",
     "how-to": {
-      "questions": "Des questions ? Consultez notre {guideLink}.",
-      "questions-link-text": "guide",
+      "questions": "Des explications plus détaillées ? Visitez notre {guideLink}.",
+      "questions-link-text": "centre d’aide",
       "ios-browser-steps": {
         "1": "Ajoutez WTMG sur votre Écran d'accueil.",
-        "2": "Ouvrez l’application WTMG depuis votre écran d'accueil.",
-        "3": "Connectez-vous à votre compte et activez les notifications.",
-        "1-chrome": "Cliquez sur “<em>Partager</em>” {shareIcon} (en haut à droite) → “<em>Ajouter sur Écran d'accueil</em>” {plusSquareIcon}.",
-        "1-firefox": "Cliquez sur le <em>menu</em> {burgerIcon} (⚠️ la petite icône de Firefox, <em>pas</em> le menu de WTMG) → “<em>Partager</em>” {shareIcon} → “<em>Ajouter sur Écran d'accueil</em>” {plusSquareIcon}.",
-        "1-safari": "Cliquez “Partager” {shareIcon} dans le menu ci-dessous, puis “<em>Ajouter sur Écran d'accueil</em>” {plusSquareIcon}."
+        "2": "Ouvrez WTMG sur votre Écran d'accueil",
+        "3": "Connectez-vous à votre compte",
+        "1-chrome": "<li>Cliquez sur {shareIcon} “<em>Partager</em>” (en haut à droite)</li>\n<li>Cliquez sur {plusSquareIcon} “<em>Ajouter sur Écran d'accueil</em>.</li>",
+        "1-firefox": "<li>Cliquez sur {burgerIcon} “Menu” ci-dessous (<em>pas</em> celui de WTMG).</li> \n<li>Cliquez sur {shareIcon} “<em>Partager</em>”</li> \n<li>Cliquez sur {plusSquareIcon} “<em>Ajouter sur Écran d'accueil</em>”</li>",
+        "1-safari": "<li>Cliquez sur {shareIcon} “<em>Partager</em>” en dessous</li>\n<li>Cliquez sur {plusSquareIcon} “<em>Ajouter sur Écran d'accueil</em>.</li>"
       },
       "ios-upgrade": {
-        "account-settings": "compte WTMG",
-        "copy": "<p>Pour activer les notifications, vous devez d’abord <strong>mettre à jour votre {os} à 16.4 ou plus </strong>.</p>\n<p><a class=\"link\" href=\"{link}\" target=\"_blank\"> Apprenez comment mettre à jour votre version {os}.</a></p>\n<p>Après avoir fait la mise à jour, allez dans votre {accountSettings} pour activer les notifications mobiles.</p>",
-        "btn-show": "Montrez-moi comment faire la mise à jour",
-        "btn-skip": "Passer pour le moment",
-        "help-link": "https://support.apple.com/fr-be/HT204204"
-      },
-      "title": "Comment activer les notifications"
+        "account-settings": "compte",
+        "copy": "Pour recevoir des notifications mobiles, {link} ou plus, puis allez dans “{accountSettings}” pour les activer.",
+        "btn-show": "Comment mettre à jour",
+        "btn-skip": "Pas maintenant",
+        "help-link": "https://support.apple.com/fr-be/HT204204",
+        "help-link-copy": "mettez à jour votre iOS à 16.4."
+      },
+      "title": "Comment activer les notifications mobiles"
     },
     "prompt": {
       "follow-up-desktop": "Voulez-vous recevoir des <strong>notifications mobiles</strong> lorsque vous recevez un nouveau message ?",
       "btn-show-me": "Montrez-moi comment",
       "btn-turn-on": "Activez les notifications",
-      "ios-installed": "<p>Il semble que vous ayez ajouté WTMG sur votre écran d’accueil, génial !</p><p>Vous pouvez maintenant activer les notifications mobiles.</p>",
-      "ios-installed-title": "Vous y êtes presque !",
+      "ios-installed": "Ne ratez jamais un message en activant maintenant vos notifications mobiles !",
+      "ios-installed-title": "Nouveau : notifications mobiles",
       "title": "Recevez une notification mobile lorsque vous recevez un message",
       "helpcenter-url": "https://aide.welcometomygarden.org/master/1.-notifications-mobiles"
     }

src/locales/nl.json

@@ -639,13 +639,14 @@
       "delete": "Verwijder",
       "last-seen": "Laatst gezien op",
       "unknown": "onbekend",
-      "unsupported": "Het lijkt erop dat dit apparaat geen Web Push ondersteunt, wat vereist is voor mobiele meldingen van WTMG. Op Android kan je een andere of nieuwere browser proberen. Op iOS kan je kijken {link} naar iOS/iPadOS 16.4 of hoger. ",
       "ios16-link": "https://support.apple.com/nl-be/HT213411",
       "ios16-check": "of je kan updaten",
       "current": "Dit apparaat",
       "title": "Mobiele meldingen",
       "manage": "Je kan hier je mobiele meldingen beheren.",
-      "turn-on": "Zet meldingen aan"
+      "turn-on": "Zet meldingen aan",
+      "unsupported-ios": "<p>Oeps! Je huidige iOS-versie ondersteunt geen mobiele meldingen. Om ze aan te zetten, <strong>update je iOS-versie</strong> (Instellingen > Algemeen > Software-update).</p><p>Als je niet kan updaten naar versie <strong>16.4 of hoger</strong>, betekent dit helaas dat je toestel onze mobiele meldingen niet ondersteunt.</p>",
+      "unsupported-android": "Oeps! Deze browser ondersteunt geen mobiele meldingen. Open WTMG in een <strong>andere browser</strong> om ze aan te zetten."
     }
   },
   "auth": {
@@ -1483,31 +1484,32 @@
   "push-notifications": {
     "registration-success": "Meldingen zijn succesvol aangezet",
     "how-to": {
-      "questions": "Vragen? Bekijk onze {guideLink}.",
-      "questions-link-text": "volledige gids",
+      "questions": "Meer gedetailleerde instructies? Bezoek ons {guideLink}.",
+      "questions-link-text": "Helpcentrum",
       "ios-browser-steps": {
         "1": "Zet WTMG op je beginscherm.",
-        "2": "Open de WTMG app vanaf het beginscherm.",
-        "3": "Meld je aan en zet meldingen aan.",
-        "1-chrome": "Druk op “<em>Deel</em>” {shareIcon} (rechtsboven) → “<em>Zet op je Beginscherm</em>” {plusSquareIcon}.",
-        "1-firefox": "Druk op het <em>menu</em> {burgerIcon} (⚠️ het kleine icoontje van Firefox, <em>niet</em> het grotere menu van de WTMG site) → “<em>Deel</em>” {shareIcon} → “<em>Zet op je Beginscherm</em>” {plusSquareIcon}.",
-        "1-safari": "Druk op “Deel” {shareIcon} in de menubalk hieronder, en dan op “<em>Zet op je Beginscherm</em>” {plusSquareIcon}."
+        "2": "Open WTMG op je Beginscherm",
+        "3": "Log in op jouw account",
+        "1-chrome": "<li>Klik op {shareIcon} “<em>Delen</em>” (rechtsboven)</li>\n<li>Klik op {plusSquareIcon} “<em>Zet op je Beginscherm</em>”</li>",
+        "1-firefox": "<li>Open het {burgerIcon} menu hieronder (<em>niet</em> het WTMG-menu).</li> \n<li>Klik op {shareIcon} “<em>Delen</em>”</li> \n<li>Klik op {plusSquareIcon}“<em>Zet op je Beginscherm</em>”</li>",
+        "1-safari": "<li>Klik op {shareIcon} “<em>Delen</em>” vanonder</li>\n<li>Klik op {plusSquareIcon} “<em>Zet op je Beginscherm</em>”</li>"
       },
       "ios-upgrade": {
-        "account-settings": "WTMG accountinstellingen",
-        "copy": "<p>Om meldingen aan te zetten moet je eerst <strong>updaten naar {os} 16.4 or hoger</strong>.</p>\n<p><a class=\"link\" href=\"{link}\" target=\"_blank\">Leer hoe je je {os} versie bijwerkt.</a></p>\n<p>Ga na de update naar je {accountSettings} om meldingen aan te zetten.</p>",
-        "btn-show": "Toon hoe bij te werken",
-        "btn-skip": "Sla voorlopig over",
-        "help-link": "https://support.apple.com/nl-be/HT204204"
-      },
-      "title": "Zo zet je meldingen aan"
+        "account-settings": "Account",
+        "copy": "Om mobiele meldingen te ontvangen, moet je {link} of hoger, en nadien naar je {accountSettings} gaan om ze aan te zetten.",
+        "btn-show": "Hoe bij te werken",
+        "btn-skip": "Niet nu",
+        "help-link": "https://support.apple.com/nl-be/HT204204",
+        "help-link-copy": "updaten naar iOS 16.4"
+      },
+      "title": "Zo zet je mobiele meldingen aan"
     },
     "prompt": {
       "btn-show-me": "Toon me hoe",
       "btn-turn-on": "Zet meldingen aan",
       "follow-up-desktop": "Wil je <strong>mobiele meldingen</strong> ontvangen voor nieuwe chatberichten?",
-      "ios-installed": "<p>Het lijkt erop dat je WTMG aan je startscherm hebt toegevoegd, leuk!</p><p>Nu kan je meldingen aanzetten.</p>",
-      "ios-installed-title": "Je bent er bijna!",
+      "ios-installed": "Mis geen enkel bericht door je mobiele meldingen aan te zetten!",
+      "ios-installed-title": "Nieuw: mobiele meldingen!",
       "title": "Krijg een mobiele melding wanneer je een bericht ontvangt",
       "helpcenter-url": "https://hulp.welcometomygarden.org/master/1.-mobiele-meldingen"
     }

src/routes/account/NotificationSection.svelte

@@ -12,7 +12,7 @@
     pushRegistrations,
     currentNativeSubStore
   } from '$lib/stores/pushRegistrations';
-  import { isMobileDevice } from '$lib/util/uaInfo';
+  import { iDeviceInfo, isMobileDevice } from '$lib/util/uaInfo';
   import NotificationPrompt from '$routes/chat/[name]/[chatId]/NotificationPrompt.svelte';
   import PushRegistrationEntry from '$routes/chat/[name]/PushRegistrationEntry.svelte';
   import { PushRegistrationStatus } from '$lib/types/PushRegistration';
@@ -33,6 +33,8 @@
       pR.status === PushRegistrationStatus.ACTIVE &&
       pR.subscription.endpoint !== $currentNativeSubStore?.endpoint
   );
+
+  const { isIDevice } = iDeviceInfo!;
 </script>
 
 <section>
@@ -57,17 +59,19 @@
       {/each}
     </ul>
   {/if}
-  {#if isMobileDevice && !hasNotificationSupportNow() && !canHaveNotificationSupport()}
-    <p>
-      {@html $_('account.notifications.unsupported', {
+  {#if isMobileDevice && !isNotificationEligible()}
+    {#if isIDevice}
+      {@html $_('account.notifications.unsupported-ios', {
         values: {
           link: anchorText({
             href: $_('account.notifications.ios16-link'),
             linkText: $_('account.notifications.ios16-check')
           })
         }
       })}
-    </p>
+    {:else}
+      <p>{@html $_('account.notifications.unsupported-android')}</p>
+    {/if}
   {:else if $loadedPushRegistrations && $currentNativeSubStore != null && !currentPushRegistration}
     <!-- TODO: edge cases with restoring a marked for deletion PR? -->
     <!-- TODO: Test the below, push-registrations observer is now refactored to