snackbar

kernoeb · Sep 2, 2024 · 175c3d0 · 175c3d0
1 parent dffadfa
commit 175c3d0
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 12 deletions.
diff --git a/components/Snackbar.vue b/components/Snackbar.vue
@@ -3,20 +3,54 @@ export default {
   name: 'Snackbar',
   data () {
     return {
-      snackbar: false
+      snackbar: false,
+      storageKey: 'show-snackbar-2024'
     }
   },
   mounted () {
-    if (localStorage.getItem('show-snackbar') == null || localStorage.getItem('show-snackbar') === 'true') {
+    if (window.location.hostname !== 'planningsup.app' && window.location.hostname !== 'localhost') {
+      console.log('Snackbar disabled because we are not on planningsup.app', window.location.hostname)
+      return
+    }
+
+    // Remove old show-snackbar from localStorage to show the snackbar again
+    try {
+      localStorage.removeItem('show-snackbar')
+    } catch (err) {}
+
+    // Remove keys starting with /show-snackbar-
+    try {
+      for (let i = 0; i < localStorage.length; i++) {
+        const key = localStorage.key(i)
+        if (key.startsWith('show-snackbar-') && key !== this.storageKey) {
+          console.log('Remove old show-snackbar key', key)
+          localStorage.removeItem(key)
+        }
+      }
+    } catch (err) {}
+
+    if (localStorage.getItem(this.storageKey) == null || localStorage.getItem(this.storageKey) === 'true') {
       this.snackbar = true
     }
   },
   methods: {
+    open () {
+      this.snackbar = false
+      localStorage.setItem(this.storageKey, 'false')
+
+      window.open('https://paypal.me/kernoeb', '_blank')
+
+      try {
+        console.log('Track donation-click')
+        this.$plausible.trackEvent('donation-click')
+      } catch (err) {}
+    },
     close () {
       this.snackbar = false
-      localStorage.setItem('show-snackbar', 'false')
+      localStorage.setItem(this.storageKey, 'false')
 
       try {
+        console.log('Track donation-close')
         this.$plausible.trackEvent('donation-close')
       } catch (err) {}
     }
@@ -28,32 +62,36 @@ export default {
   <v-snackbar
     v-model="snackbar"
     vertical
+    max-width="280"
     app
     timeout="-1"
   >
-    <b style="font-size: 15px;">Hello tout le monde !</b><br><br>Si vous souhaitez faire un petit <b>don</b> pour financer le serveur, le nom de domaine et, ou les futures fonctionnalités, c'est par ici :
-    <br><br>
+    <div class="mb-1">
+      <b style="font-size: 15px;">Hello !</b>
+    </div>
+    <div class="mb-1">
+      PlanningSup est un projet open-source, gratuit et <b>sans publicité</b>. Si vous souhaitez soutenir le projet, vous pouvez faire un don via PayPal :)
+    </div>
     <v-btn
       color="#00457C"
       rounded
-      href="https://www.paypal.me/kernoeb"
-      target="_blank"
+      small
       style="margin-left: 0!important;"
-      @click="close()"
+      @click="open()"
     >
       <icons-paypal
         class="mr-1"
         style="width: 15px; height: 15px; fill: currentColor;"
       />paypal.me/kernoeb
-    </v-btn><br><br>Merci ! 🤍
+    </v-btn>
     <template #action="{ attrs }">
       <v-btn
         color="red"
         text
         v-bind="attrs"
         @click="close()"
       >
-        Bien tenté, mais non
+        Bonsoir non
       </v-btn>
     </template>
   </v-snackbar>

diff --git a/pages/index.vue b/pages/index.vue
@@ -3,9 +3,9 @@
     v-if="mounted"
     :class="{hideWeekends}"
   >
-    <!--    <client-only>
+    <client-only>
       <lazy-snackbar />
-    </client-only>-->
+    </client-only>
 
     <div class="d-flex justify-space-between">
       <div