Merge branch 'master' into new-web-push

src/App.vue

@@ -157,7 +157,7 @@
             >
               <div class="w-full px-6 py-6 text-slate-900 text-center">
                 <p class="text-lg mb-4">
-                  Would you like to turn on notifications for this app?
+                  Would you like to <b>turn on</b> notifications for this app?
                 </p>
 
                 <button
@@ -181,6 +181,71 @@
               </div>
             </div>
           </div>
+          <div
+            v-if="notification.type === 'notification-mute'"
+            class="absolute inset-0 h-screen flex flex-col items-center justify-center bg-slate-900/50"
+          >
+            <div
+              class="flex w-11/12 max-w-sm mx-auto mb-3 overflow-hidden bg-white rounded-lg shadow-lg"
+            >
+              <div class="w-full px-6 py-6 text-slate-900 text-center">
+                <p class="text-lg mb-4">Mute app notifications:</p>
+
+                <button
+                  class="block w-full text-center text-md font-bold uppercase bg-blue-600 text-white px-2 py-2 rounded-md mb-2"
+                >
+                  For 1 Hour
+                </button>
+                <button
+                  class="block w-full text-center text-md font-bold uppercase bg-blue-600 text-white px-2 py-2 rounded-md mb-2"
+                >
+                  For 8 Hours
+                </button>
+                <button
+                  class="block w-full text-center text-md font-bold uppercase bg-blue-600 text-white px-2 py-2 rounded-md mb-2"
+                >
+                  For 24 Hours
+                </button>
+                <button
+                  class="block w-full text-center text-md font-bold uppercase bg-blue-600 text-white px-2 py-2 rounded-md mb-2"
+                >
+                  Until I turn it back on
+                </button>
+                <button
+                  @click="close(notification.id)"
+                  class="block w-full text-center text-md font-bold uppercase bg-slate-600 text-white px-2 py-2 rounded-md"
+                >
+                  Cancel
+                </button>
+              </div>
+            </div>
+          </div>
+          <div
+            v-if="notification.type === 'notification-off'"
+            class="absolute inset-0 h-screen flex flex-col items-center justify-center bg-slate-900/50"
+          >
+            <div
+              class="flex w-11/12 max-w-sm mx-auto mb-3 overflow-hidden bg-white rounded-lg shadow-lg"
+            >
+              <div class="w-full px-6 py-6 text-slate-900 text-center">
+                <p class="text-lg mb-4">
+                  Would you like to <b>turn off</b> notifications for this app?
+                </p>
+
+                <button
+                  class="block w-full text-center text-md font-bold uppercase bg-rose-600 text-white px-2 py-2 rounded-md mb-2"
+                >
+                  Turn Off Notifications
+                </button>
+                <button
+                  @click="close(notification.id)"
+                  class="block w-full text-center text-md font-bold uppercase bg-slate-600 text-white px-2 py-2 rounded-md"
+                >
+                  Leave it On
+                </button>
+              </div>
+            </div>
+          </div>
         </div>
       </Notification>
     </div>

src/views/AccountViewView.vue

@@ -117,7 +117,11 @@
     >
       Edit Identity
     </router-link>
-    <button
+
+    <div class="bg-slate-100 rounded-md overflow-hidden px-4 py-4 mt-8 mb-8">
+      <label
+        for="toggleNotifications"
+        class="flex items-center cursor-pointer"
         @click="
           this.$notify(
             {
@@ -127,10 +131,53 @@
             -1,
           )
         "
-      class="block w-full text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md mb-8"
       >
-      Turn on Notifications
-    </button>
+        <!-- toggle -->
+        <div class="relative">
+          <!-- input -->
+          <input type="checkbox" name="toggleNotifications" class="sr-only" />
+          <!-- line -->
+          <div class="block bg-slate-500 w-14 h-8 rounded-full"></div>
+          <!-- dot -->
+          <div
+            class="dot absolute left-1 top-1 bg-slate-400 w-6 h-6 rounded-full transition"
+          ></div>
+        </div>
+        <!-- label -->
+        <div class="ml-2">App Notifications</div>
+      </label>
+      <label
+        for="toggleMuteNotifications"
+        class="flex items-center cursor-pointer mt-4"
+        @click="
+          this.$notify(
+            {
+              group: 'modal',
+              type: 'notification-mute',
+            },
+            -1,
+          )
+        "
+      >
+        <!-- toggle -->
+        <div class="relative">
+          <!-- input -->
+          <input
+            type="checkbox"
+            name="toggleMuteNotifications"
+            class="sr-only"
+          />
+          <!-- line -->
+          <div class="block bg-slate-500 w-14 h-8 rounded-full"></div>
+          <!-- dot -->
+          <div
+            class="dot absolute left-1 top-1 bg-slate-400 w-6 h-6 rounded-full transition"
+          ></div>
+        </div>
+        <!-- label -->
+        <div class="ml-2">Mute Notifications</div>
+      </label>
+    </div>
 
     <h3 class="text-sm uppercase font-semibold mb-3">Data</h3>
 

src/views/HomeView.vue

@@ -105,7 +105,37 @@
         "
         class="font-bold uppercase bg-slate-600 text-white px-3 py-2 rounded-md mr-2"
       >
-        Notification Permission
+        Notif ON
+      </button>
+
+      <button
+        @click="
+          this.$notify(
+            {
+              group: 'modal',
+              type: 'notification-mute',
+            },
+            -1,
+          )
+        "
+        class="font-bold uppercase bg-slate-600 text-white px-3 py-2 rounded-md mr-2"
+      >
+        Notif MUTE
+      </button>
+
+      <button
+        @click="
+          this.$notify(
+            {
+              group: 'modal',
+              type: 'notification-off',
+            },
+            -1,
+          )
+        "
+        class="font-bold uppercase bg-slate-600 text-white px-3 py-2 rounded-md mr-2"
+      >
+        Notif OFF
       </button>
     </div>
 

web-push.md

@@ -358,3 +358,32 @@ unsubscribeFromPush().catch((err) => {
 ```
 
 NOTE: We could offer an option within the app to "mute" these notifications. This wouldn't turn off the notifications at the browser level, but you could make it so that your Service Worker doesn't display them even if it receives them.
+
+
+## NOTIFICATION DIALOG WORKFLOW
+
+# ON APP FIRST-LAUNCH:
+The user is periodically presented with the notification permission dialog that asks them if they want to turn on notifications. User is given 3 choices:
+
+- "Turn on Notifications": triggers the browser's own notification permission prompt.
+- "Maybe Later": dismisses the dialog, to reappear at a later instance. (The next time the user launches the app? After X amount of days? A combination of both?)
+- "Never": dismisses the dialog; app remembers to not automatically present the dialog again.
+
+# IF THE USER CHOOSES "NEVER":
+The dialog can still be accessed via the Notifications toggle switch in `AccountViewView` (which also tells the user if notifications are turned on or off).
+
+# TO TEMPORARILY MUTE NOTIFICATIONS:
+While notifications are turned on, the user can tap on the Mute Notifications toggle switch in `AccountViewView` (visible only when notifications are turned on) to trigger the Mute Notifications Dialog. User is given the following choices:
+
+- Several "Mute for X Hour/s" buttons to temporarily mute notifications.
+- "Mute until I turn it back on" button to indefinitely mute notifications.
+- "Cancel" to make no changes and dismiss the dialog.
+
+# TO UNMUTE NOTIFICATIONS:
+Simply tap on the Mute Notifications toggle switch in `AccountViewView` to immediately unmute notifications. No dialog needed.
+
+# TO TURN OFF NOTIFICATIONS:
+While notifications are turned on, the user can tap on the App Notifications toggle switch in `AccountViewView` to trigger the Turn Off Notifications Dialog. User is given the following choices:
+
+- "Turn off Notifications" to fully turn them off (which means the user will need to go through the dialogs agains to turn them back on).
+- "Leave it On" to make no changes and dismiss the dialog.