crowd-funder-from-jason/src/views/HelpNotificationsView.vue

<template>
  <QuickNav />

  <!-- CONTENT -->
  <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
    <!-- Sub View Heading -->
    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
      <h1 class="grow text-xl text-center font-semibold leading-tight">
        Notification Help
      </h1>

      <!-- Back -->
      <a
        class="order-first text-lg text-center leading-none p-1"
        @click="goBack()"
      >
        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
      </a>

      <!-- Help button -->
      <router-link
        :to="{ name: 'help' }"
        class="block ms-auto text-sm text-center text-white bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-1.5 rounded-full"
      >
        <font-awesome icon="question" class="block text-center w-[1em]" />
      </router-link>
    </div>

    <div>
      <label
        class="flex items-center justify-between cursor-pointer mt-3 py-2"
        @click="toggleReminderFastRollover"
      >
        <span class="text-sm text-slate-600">
          Use 10-minute rollover (testing)
        </span>
        <div class="relative ml-2">
          <input
            :checked="reminderFastRolloverForTesting"
            type="checkbox"
            class="sr-only"
            readonly
            @click.stop.prevent
          />
          <div class="block bg-slate-500 w-14 h-8 rounded-full"></div>
          <div
            class="dot absolute left-1 top-1 bg-slate-400 w-6 h-6 rounded-full transition"
          ></div>
        </div>
      </label>
    </div>
  </section>
</template>
<script lang="ts">
import { Component, Vue } from "vue-facing-decorator";
import { Capacitor } from "@capacitor/core";

import QuickNav from "../components/QuickNav.vue";
import { NotificationIface } from "../constants/app";
import { PlatformServiceMixin } from "../utils/PlatformServiceMixin";
import { createNotifyHelpers, TIMEOUTS } from "../utils/notify";
import { NotificationService } from "@/services/notifications";
import { Router } from "vue-router";
import { logger } from "../utils/logger";

@Component({
  components: { QuickNav },
  mixins: [PlatformServiceMixin],
})
export default class HelpNotificationsView extends Vue {
  $notify!: (notification: NotificationIface, timeout?: number) => void;
  $router!: Router;

  apiServer: string = "";
  notifyingReminder = false;
  notifyingReminderMessage = "";
  notifyingReminderTime = "";
  reminderFastRolloverForTesting: boolean = false;

  notify!: ReturnType<typeof createNotifyHelpers>;

  async mounted() {
    this.notify = createNotifyHelpers(this.$notify);

    try {
      const settings = await this.$settings();
      this.apiServer = settings.apiServer || "";
      this.notifyingReminder = !!settings.notifyingReminderTime;
      this.notifyingReminderMessage = settings.notifyingReminderMessage || "";
      this.notifyingReminderTime = settings.notifyingReminderTime || "";
      this.reminderFastRolloverForTesting =
        !!settings.reminderFastRolloverForTesting;
    } catch (error) {
      logger.error("Mount error:", error);
    }
  }

  goBack(): void {
    this.$router.back();
  }

  async toggleReminderFastRollover(): Promise<void> {
    const next = !this.reminderFastRolloverForTesting;
    await this.$saveSettings({
      reminderFastRolloverForTesting: next,
    });
    this.reminderFastRolloverForTesting = next;

    if (this.notifyingReminder) {
      try {
        const service = NotificationService.getInstance();
        if (Capacitor.getPlatform() !== "android") {
          await service.cancelDailyNotification();
        }
        const time24h = this.parseTimeTo24Hour(this.notifyingReminderTime);
        const title = "Daily Reminder";
        const body =
          this.notifyingReminderMessage ||
          "Click to share some gratitude with the world -- even if they're unnamed.";
        await service.scheduleDailyNotification({
          time: time24h,
          title,
          body,
          priority: "normal",
          ...(next ? { rolloverIntervalMinutes: 10 } : {}),
        });
        this.notify.success(
          next
            ? "Reminder will repeat every 10 minutes (testing)."
            : "Reminder will repeat daily (24h).",
          TIMEOUTS.STANDARD,
        );
      } catch (err) {
        logger.error(
          "[HelpNotificationsView] Reschedule after fast-rollover toggle failed:",
          err,
        );
        this.notify.error(
          "Failed to update reminder interval. Please try again.",
          TIMEOUTS.STANDARD,
        );
      }
    }
  }

  private parseTimeTo24Hour(timeStr: string): string {
    const timeMatch = timeStr.match(/(\d+):(\d+)\s*(AM|PM)/i);
    if (!timeMatch) {
      return "09:00";
    }

    let hour = parseInt(timeMatch[1], 10);
    const minute = timeMatch[2];
    const isAm = timeMatch[3].toUpperCase() === "AM";

    if (isAm && hour === 12) {
      hour = 0;
    } else if (!isAm && hour !== 12) {
      hour = hour + 12;
    }

    return `${hour.toString().padStart(2, "0")}:${minute}`;
  }
}
</script>