Migrate DeepLinkErrorView.vue to PlatformServiceMixin with Vue 3 to Options API conversion

- Convert Vue 3 Composition API to Options API with vue-facing-decorator
- Add PlatformServiceMixin for consistent database and logging patterns
- Replace logConsoleAndDb() with this.$logAndConsole() mixin method
- Remove legacy databaseUtil import dependency
- Convert computed properties to class getters
- Convert onMounted lifecycle to mounted() method
- Add comprehensive TODO with testing guidance

Technical Changes:
- useRoute/useRouter → this.$route/this.$router
- computed() refs → class getters with proper typing
- Composition API imports → vue-facing-decorator imports

Migration Status: 12% complete (11/91 components)
Passes lint checks and maintains all original functionality

src/views/DeepLinkErrorView.vue

@@ -38,65 +38,91 @@
   </div>
 </template>
 
-<script setup lang="ts">
+<script lang="ts">
-import { computed, onMounted } from "vue";
+// TODO: Testing Required - Vue 3 to Options API + PlatformServiceMixin Migration
-import { useRoute, useRouter } from "vue-router";
+// Priority: Medium | Migrated: 2025-01-06 | Author: Matthew Raymer
+//
+// MIGRATION DETAILS: Converted from Vue 3 Composition API to Options API for PlatformServiceMixin
+// - Replaced logConsoleAndDb() with this.$logAndConsole()
+// - Converted computed properties to getters
+// - Converted onMounted to mounted() lifecycle hook
+//
+// TESTING NEEDED:
+// 1. Test invalid deep link triggering (easy to test)
+// 2. Verify error logging works correctly
+// 3. Test error page display and navigation
+// 4. Test "Report Issue" functionality
+//
+// Test URL: timesafari://invalid/path?param=test
+
+import { Component, Vue } from "vue-facing-decorator";
 import { VALID_DEEP_LINK_ROUTES } from "../interfaces/deepLinks";
-import { logConsoleAndDb } from "../db/databaseUtil";
 import { logger } from "../utils/logger";
+import { PlatformServiceMixin } from "@/utils/PlatformServiceMixin";
+
+@Component({
+  mixins: [PlatformServiceMixin],
+})
+export default class DeepLinkErrorView extends Vue {
+  validRoutes = VALID_DEEP_LINK_ROUTES;
+
+  // Extract error information from query params
+  get errorCode(): string {
+    return (this.$route.query.errorCode as string) || "UNKNOWN_ERROR";
+  }
+
+  get errorMessage(): string {
+    return (
+      (this.$route.query.message as string) ||
+      "The deep link you followed is invalid or not supported."
+    );
+  }
+
+  get originalPath(): string {
+    return this.$route.query.originalPath as string;
+  }
+
+  // Format the path and include any parameters
+  get formattedPath(): string {
+    if (!this.originalPath) return "";
+    const path = this.originalPath.replace(/^\/+/, "");
 
-const route = useRoute();
+    // Log for debugging
-const router = useRouter();
+    logger.log(
-
+      "[DeepLinkError] Original Path:",
-// Extract error information from query params
+      this.originalPath,
-const errorCode = computed(
+      "Route Params:",
-  () => (route.query.errorCode as string) || "UNKNOWN_ERROR",
+      this.$route.params,
-);
+      "Route Query:",
-const errorMessage = computed(
+      this.$route.query,
-  () =>
+    );
-    (route.query.message as string) ||
+
-    "The deep link you followed is invalid or not supported.",
+    return path;
-);
+  }
-const originalPath = computed(() => route.query.originalPath as string);
+
-const validRoutes = VALID_DEEP_LINK_ROUTES;
+  // Navigation methods
-
+  goHome(): void {
-// Format the path and include any parameters
+    this.$router.replace({ name: "home" });
-const formattedPath = computed(() => {
+  }
-  if (!originalPath.value) return "";
+
-  const path = originalPath.value.replace(/^\/+/, "");
+  reportIssue(): void {
-
+    // Open a support form or email
-  // Log for debugging
+    window.open(
-  logger.log(
+      "mailto:support@timesafari.app?subject=Invalid Deep Link&body=" +
-    "[DeepLinkError] Original Path:",
+        encodeURIComponent(
-    originalPath.value,
+          `I encountered an error with a deep link: timesafari://${this.originalPath}\nError: ${this.errorMessage}`,
-    "Route Params:",
+        ),
-    route.params,
+    );
-    "Route Query:",
+  }
-    route.query,
+
-  );
+  // Log the error for analytics
-
+  async mounted(): Promise<void> {
-  return path;
+    this.$logAndConsole(
-});
+      `[DeepLink] Error page displayed for path: ${this.originalPath}, code: ${this.errorCode}, params: ${JSON.stringify(this.$route.params)}`,
-
+      true,
-// Navigation methods
+    );
-const goHome = () => router.replace({ name: "home" });
+  }
-const reportIssue = () => {
+}
-  // Open a support form or email
-  window.open(
-    "mailto:support@timesafari.app?subject=Invalid Deep Link&body=" +
-      encodeURIComponent(
-        `I encountered an error with a deep link: timesafari://${originalPath.value}\nError: ${errorMessage.value}`,
-      ),
-  );
-};
-
-// Log the error for analytics
-onMounted(() => {
-  logConsoleAndDb(
-    `[DeepLink] Error page displayed for path: ${originalPath.value}, code: ${errorCode.value}, params: ${JSON.stringify(route.params)}`,
-    true,
-  );
-});
 </script>
 
 <style scoped>