feat: added unsubscribed notificiation

Author: mwargan

src/assets/main.css

@@ -459,4 +459,16 @@ article:not(:has(table)) {
 /** Fix link as button in nav margin @todo add back to vue3-starter-kit */
 nav a[role=button] {
   margin-top: 0;
+}
+
+/** Fix inconsistent margins and borders when used in groups */
+[role=group] .dropdown:not(:first-child),
+[role=search] .dropdown:not(:first-child) {
+  margin-left: calc(var(--pico-border-width) * -1);
+}
+
+[role=group]>:not(:first-child)>summary,
+[role=search]>:not(:first-child)>summary {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
 }

src/eventBus/listeners/notifications.ts

@@ -249,4 +249,12 @@ export default {
       5000
     ).show();
   },
+  [eventTypes.unsubscribed]: () => {
+    new CustomNotification(
+      "success",
+      t("You have been unsubscribed."),
+      ["browser"],
+      5000
+    ).show();
+  },
 } as Record<eventTypes, any>;

src/locales/en.json

@@ -276,5 +276,6 @@
     "Create your first Smart Magic Link": "Create your first Smart Magic Link",
     "Edit destination": "Edit destination",
     "No data available": "No data available",
-    "No destinations yet": "No destinations yet"
+    "No destinations yet": "No destinations yet",
+    "You have been unsubscribed.": "You have been unsubscribed."
 }

src/locales/fr.json

@@ -276,5 +276,6 @@
     "Create your first Smart Magic Link": "Créez votre premier lien magique intelligent",
     "Edit destination": "Modifier la destination",
     "No data available": "Pas de données disponibles",
-    "No destinations yet": "Pas encore de destinations"
+    "No destinations yet": "Pas encore de destinations",
+    "You have been unsubscribed.": "Vous avez été désabonné."
 }

src/views/SingleRedirectView.vue

@@ -89,11 +89,13 @@ const getData = () => {
 
 onMounted(() => {
   $bus.$on(eventTypes.started_subscription, getData);
+  $bus.$on(eventTypes.unsubscribed, getData);
   getData();
 });
 
 onUnmounted(() => {
   $bus.$off(eventTypes.started_subscription, getData);
+  $bus.$off(eventTypes.unsubscribed, getData);
 });
 </script>
 <template>