finish separation of daily reminder message, bump version to 0.3.34

src/components/PushNotificationPermission.vue

@@ -16,7 +16,12 @@
       >
         <div class="w-full px-6 py-6 text-slate-900 text-center">
           <p v-if="serviceWorkerReady && vapidKey" class="text-lg mb-4">
-            Would you like to be notified of new activity once a day?
+            <span v-if="pushType === DAILY_CHECK_TITLE">
+              Would you like to be notified of new activity, up to once a day?
+            </span>
+            <span v-else>
+              Would you like to get a reminder message once a day?
+            </span>
           </p>
           <p v-else class="text-lg mb-4">
             Waiting for system initialization, which may take up to 5 seconds...
@@ -24,28 +29,51 @@
           </p>
 
           <div v-if="serviceWorkerReady && vapidKey">
-            <span class="flex flex-row justify-center">
-              <span class="mt-2">Yes, tell me at: </span>
-              <input
-                type="number"
-                @change="checkHourInput"
-                class="rounded-l border border-r-0 border-slate-400 ml-2 mt-2 px-2 py-2 text-center w-20"
-                v-model="hourInput"
-              />
-              <input
-                type="number"
-                @change="checkMinuteInput"
-                class="border border-slate-400 mt-2 px-2 py-2 text-center w-20"
-                v-model="minuteInput"
-              />
-              <span
-                class="rounded-r border border-slate-400 bg-slate-200 text-center text-blue-500 mt-2 px-2 py-2 w-20"
-                @click="hourAm = !hourAm"
+            <div v-if="pushType === DAILY_CHECK_TITLE">
+              <span>Yes, send me a message when there is new data for me</span>
+            </div>
+            <div v-else>
+              <span>Yes, send me this message:</span>
+              <!-- eslint-disable -->
+              <textarea
+                type="text"
+                id="push-message"
+                v-model="messageInput"
+                class="rounded border border-slate-400 mt-2 px-2 py-2 w-full"
+                maxlength="100"
+              ></textarea
               >
-                <span v-if="hourAm"> AM <fa icon="chevron-down" /> </span>
-                <span v-else> PM <fa icon="chevron-up" /> </span>
+              <!-- eslint-enable -->
+              <span class="w-full flex justify-between text-xs text-slate-500">
+                <span></span>
+                <span>(100 characters max)</span>
               </span>
-            </span>
+            </div>
+
+            <div>
+              <span class="flex flex-row justify-center">
+                <span class="mt-2">... at: </span>
+                <input
+                  type="number"
+                  @change="checkHourInput"
+                  class="rounded-l border border-r-0 border-slate-400 ml-2 mt-2 px-2 py-2 text-center w-20"
+                  v-model="hourInput"
+                />
+                <input
+                  type="number"
+                  @change="checkMinuteInput"
+                  class="border border-slate-400 mt-2 px-2 py-2 text-center w-20"
+                  v-model="minuteInput"
+                />
+                <span
+                  class="rounded-r border border-slate-400 bg-slate-200 text-center text-blue-500 mt-2 px-2 py-2 w-20"
+                  @click="hourAm = !hourAm"
+                >
+                  <span v-if="hourAm"> AM <fa icon="chevron-down" /> </span>
+                  <span v-else> PM <fa icon="chevron-up" /> </span>
+                </span>
+              </span>
+            </div>
             <button
               class="block w-full text-center text-md font-bold uppercase bg-blue-600 text-white mt-2 px-2 py-2 rounded-md"
               @click="
@@ -73,12 +101,7 @@
 import { Component, Vue } from "vue-facing-decorator";
 
 import { DEFAULT_PUSH_SERVER, NotificationIface } from "@/constants/app";
-import {
-  db,
-  logConsoleAndDb,
-  retrieveSettingsForActiveAccount,
-} from "@/db/index";
-import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
+import { logConsoleAndDb, retrieveSettingsForActiveAccount } from "@/db/index";
 import { urlBase64ToUint8Array } from "@/libs/crypto/vc/util";
 import * as libsUtil from "@/libs/util";
 
@@ -89,6 +112,7 @@ interface ErrorResponse {
 
 // PushSubscriptionJSON is defined in the Push API https://www.w3.org/TR/push-api/#dom-pushsubscriptionjson
 interface PushSubscriptionWithTime extends PushSubscriptionJSON {
+  message?: string;
   notifyTime: { utcHour: number; minute: number };
   notifyType: string;
 }
@@ -115,17 +139,27 @@ export default class PushNotificationPermission extends Vue {
   // eslint-disable-next-line
   $notify!: (notification: NotificationIface, timeout?: number) => Promise<() => void>;
 
-  callback: (success: boolean, time: string) => void = () => {};
+  DAILY_CHECK_TITLE = libsUtil.DAILY_CHECK_TITLE;
+  DIRECT_PUSH_TITLE = libsUtil.DIRECT_PUSH_TITLE;
+
+  callback: (success: boolean, time: string, message?: string) => void =
+    () => {};
   hourAm = true;
   hourInput = "8";
   isVisible = false;
+  messageInput = "";
   minuteInput = "00";
+  pushType = "";
   serviceWorkerReady = false;
   vapidKey = "";
 
-  async open(callback?: (success: boolean, time: string) => void) {
-    this.isVisible = true;
+  async open(
+    pushType: string,
+    callback?: (success: boolean, time: string, message?: string) => void,
+  ) {
     this.callback = callback || this.callback;
+    this.isVisible = true;
+    this.pushType = pushType;
     try {
       const settings = await retrieveSettingsForActiveAccount();
       let pushUrl = DEFAULT_PUSH_SERVER;
@@ -194,6 +228,18 @@ export default class PushNotificationPermission extends Vue {
     navigator.serviceWorker?.ready.then(() => {
       this.serviceWorkerReady = true;
     });
+
+    if (this.pushType === this.DIRECT_PUSH_TITLE) {
+      this.messageInput =
+        "Just a friendly reminder: click and share some gratitude with the world.";
+      // focus on the message input
+      setTimeout(function () {
+        document.getElementById("push-message")?.focus();
+      }, 100);
+    } else {
+      // not critical but doesn't make sense in a daily check
+      this.messageInput = "";
+    }
   }
 
   private close() {
@@ -264,7 +310,7 @@ export default class PushNotificationPermission extends Vue {
         {
           group: "alert",
           type: "danger",
-          title: "Browser Notifications Not Supported",
+          title: "Browser Notifications Are Not Supported",
           text: "This browser does not support notifications.",
         },
         3000,
@@ -329,7 +375,7 @@ export default class PushNotificationPermission extends Vue {
     }
   }
 
-  public async turnOnNotifications() {
+  private async turnOnNotifications() {
     let notifyCloser = () => {};
     return this.askPermission()
       .then((permission) => {
@@ -378,7 +424,8 @@ export default class PushNotificationPermission extends Vue {
 
           const subscriptionWithTime: PushSubscriptionWithTime = {
             notifyTime: { utcHour: finalUtcHour, minute: finalUtcMinute },
-            notifyType: "DAILY_CHECK",
+            notifyType: this.pushType,
+            message: this.messageInput,
             ...subscription.toJSON(),
           };
           await this.sendSubscriptionToServer(subscriptionWithTime);
@@ -398,23 +445,21 @@ export default class PushNotificationPermission extends Vue {
         );
         await libsUtil.sendTestThroughPushServer(subscription, true);
         notifyCloser();
-        this.$notify(
-          {
-            group: "alert",
-            type: "success",
-            title: "Notifications Turned On",
-            text: "Notifications are on. You should see at least one on your device; if not, check the 'Troubleshoot' page.",
-          },
-          -1,
-        );
+        setTimeout(() => {
+          this.$notify(
+            {
+              group: "alert",
+              type: "success",
+              title: "Notification Is On",
+              text: "You should see at least one on your device; if not, check the 'Troubleshoot' link.",
+            },
+            7000,
+          );
+        }, 500);
         const timeText =
           // eslint-disable-next-line
           this.hourInput + ":" + this.minuteInput + " " + (this.hourAm ? "AM" : "PM");
-        await db.settings.update(MASTER_SETTINGS_KEY, {
-          notifyingNewActivity: true,
-          notifyingNewActivityTime: timeText,
-        });
-        this.callback(true, timeText);
+        this.callback(true, timeText, this.messageInput);
       })
       .catch((error) => {
         logConsoleAndDb(
@@ -434,14 +479,7 @@ export default class PushNotificationPermission extends Vue {
           },
           3000,
         );
-        // unsubscribe just in case we failed after getting a subscription
-        navigator.serviceWorker?.ready
-          .then((registration) => registration.pushManager.getSubscription())
-          .then((subscription) => {
-            if (subscription) {
-              subscription.unsubscribe();
-            }
-          });
+        // if we want to also unsubscribe, be sure to do that only if no other notification is active
       });
   }