From 25e79249dd4794296c550fb43b4b8fef34862531 Mon Sep 17 00:00:00 2001
From: Jose Olarte III <brownspank@anomalistdesign.com>
Date: Thu, 21 Aug 2025 19:29:31 +0800
Subject: [PATCH] Feat: integrate RegistrationNotice component into
 ProjectsView

- Replace custom onboarding button with RegistrationNotice component
- Maintain v-else conditional rendering for unregistered users
- Remove unused methods and imports related to custom registration flow
- Use contextual message "To announce a project, get someone to onboard you."
- Remove unnecessary wrapping div in RegistrationNotice

Completes registration UI standardization across all main views.
---
 src/components/RegistrationNotice.vue | 42 +++++++-------
 src/views/ProjectsView.vue            | 80 ++++-----------------------
 2 files changed, 31 insertions(+), 91 deletions(-)

diff --git a/src/components/RegistrationNotice.vue b/src/components/RegistrationNotice.vue
index f7b32d65..19a8aa5d 100644
--- a/src/components/RegistrationNotice.vue
+++ b/src/components/RegistrationNotice.vue
@@ -5,30 +5,28 @@ access advanced options. * * @author Matthew Raymer * @version 1.0.0 * @created
 2025-08-21T17:25:28-08:00 */
 
 <template>
-  <div class="my-4">
-    <div
-      id="noticeSomeoneMustRegisterYou"
-      class="bg-amber-200 text-amber-900 border-amber-500 border-dashed border text-center rounded-md overflow-hidden px-4 py-3"
-    >
-      <p class="mb-4">{{ message }}</p>
-      <div class="grid grid-cols-1 gap-2 sm:flex sm:justify-center">
-        <button
-          class="inline-block text-md font-bold bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-4 py-2 rounded-md"
-          @click="showNameThenIdDialog"
-        >
-          Show them {{ passkeysEnabled ? "default" : "your" }} identifier info
-        </button>
-        <button
-          class="inline-block text-md bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-4 py-2 rounded-md"
-          @click="openAdvancedOptions"
-        >
-          See advanced options
-        </button>
-      </div>
+  <div
+    id="noticeSomeoneMustRegisterYou"
+    class="bg-amber-200 text-amber-900 border-amber-500 border-dashed border text-center rounded-md overflow-hidden px-4 py-3 my-4"
+  >
+    <p class="mb-4">{{ message }}</p>
+    <div class="grid grid-cols-1 gap-2 sm:flex sm:justify-center">
+      <button
+        class="inline-block text-md font-bold bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-4 py-2 rounded-md"
+        @click="showNameThenIdDialog"
+      >
+        Show them {{ passkeysEnabled ? "default" : "your" }} identifier info
+      </button>
+      <button
+        class="inline-block text-md bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-4 py-2 rounded-md"
+        @click="openAdvancedOptions"
+      >
+        See advanced options
+      </button>
     </div>
-    <UserNameDialog ref="userNameDialog" />
-    <ChoiceButtonDialog ref="choiceButtonDialog" />
   </div>
+  <UserNameDialog ref="userNameDialog" />
+  <ChoiceButtonDialog ref="choiceButtonDialog" />
 </template>
 
 <script lang="ts">
diff --git a/src/views/ProjectsView.vue b/src/views/ProjectsView.vue
index acc6e467..e8709210 100644
--- a/src/views/ProjectsView.vue
+++ b/src/views/ProjectsView.vue
@@ -216,15 +216,12 @@
           <font-awesome icon="plus" :class="plusIconClasses" />
           button. You'll never know until you try.
         </div>
-        <div v-else>
-          <button
-            :class="onboardingButtonClasses"
-            @click="showNameThenIdDialog()"
-          >
-            Get someone to onboard you.
-          </button>
-          <UserNameDialog ref="userNameDialog" />
-        </div>
+        <RegistrationNotice
+          v-else
+          :passkeys-enabled="PASSKEYS_ENABLED"
+          :given-name="givenName"
+          message="To announce a project, get someone to onboard you."
+        />
       </div>
       <ul id="listProjects" class="border-t border-slate-300">
         <li
@@ -266,14 +263,14 @@ import { Component, Vue } from "vue-facing-decorator";
 import { Router } from "vue-router";
 // Capacitor import removed - using QRNavigationService instead
 
-import { NotificationIface } from "../constants/app";
+import { NotificationIface, PASSKEYS_ENABLED } from "../constants/app";
 import EntityIcon from "../components/EntityIcon.vue";
 import InfiniteScroll from "../components/InfiniteScroll.vue";
 import QuickNav from "../components/QuickNav.vue";
 import OnboardingDialog from "../components/OnboardingDialog.vue";
 import ProjectIcon from "../components/ProjectIcon.vue";
 import TopMessage from "../components/TopMessage.vue";
-import UserNameDialog from "../components/UserNameDialog.vue";
+import RegistrationNotice from "../components/RegistrationNotice.vue";
 import { Contact } from "../db/tables/contacts";
 import { didInfo, getHeaders, getPlanFromCache } from "../libs/endorserServer";
 import { OfferSummaryRecord, PlanData } from "../interfaces/records";
@@ -281,14 +278,13 @@ import { OnboardPage, iconForUnitCode } from "../libs/util";
 import { logger } from "../utils/logger";
 import { PlatformServiceMixin } from "@/utils/PlatformServiceMixin";
 import { createNotifyHelpers, TIMEOUTS } from "@/utils/notify";
-import { QRNavigationService } from "@/services/QRNavigationService";
+
 import {
   NOTIFY_NO_ACCOUNT_ERROR,
   NOTIFY_PROJECT_LOAD_ERROR,
   NOTIFY_PROJECT_INIT_ERROR,
   NOTIFY_OFFERS_LOAD_ERROR,
   NOTIFY_OFFERS_FETCH_ERROR,
-  NOTIFY_CAMERA_SHARE_METHOD,
 } from "@/constants/notifications";
 
 /**
@@ -318,7 +314,7 @@ import {
     OnboardingDialog,
     ProjectIcon,
     TopMessage,
-    UserNameDialog,
+    RegistrationNotice,
   },
   mixins: [PlatformServiceMixin],
 })
@@ -336,6 +332,7 @@ export default class ProjectsView extends Vue {
   givenName = "";
   isLoading = false;
   isRegistered = false;
+  readonly PASSKEYS_ENABLED: boolean = PASSKEYS_ENABLED;
 
   // Data collections
   offers: OfferSummaryRecord[] = [];
@@ -624,39 +621,6 @@ export default class ProjectsView extends Vue {
    * Ensures user has provided their name before proceeding with contact sharing.
    * Uses UserNameDialog component if name is not set.
    */
-  showNameThenIdDialog() {
-    if (!this.givenName) {
-      (this.$refs.userNameDialog as UserNameDialog).open(() => {
-        this.promptForShareMethod();
-      });
-    } else {
-      this.promptForShareMethod();
-    }
-  }
-
-  /**
-   * Prompts user to choose contact sharing method
-   *
-   * Presents modal dialog asking if users are nearby with cameras.
-   * Routes to appropriate sharing method based on user's choice:
-   * - QR code sharing for nearby users with cameras
-   * - Alternative sharing methods for remote users
-   */
-  promptForShareMethod() {
-    this.$notify(
-      {
-        group: "modal",
-        type: "confirm",
-        title: NOTIFY_CAMERA_SHARE_METHOD.title,
-        text: NOTIFY_CAMERA_SHARE_METHOD.text,
-        onYes: () => this.handleQRCodeClick(),
-        onNo: () => this.$router.push({ name: "share-my-contact-info" }),
-        yesText: NOTIFY_CAMERA_SHARE_METHOD.yesText,
-        noText: NOTIFY_CAMERA_SHARE_METHOD.noText,
-      },
-      TIMEOUTS.MODAL,
-    );
-  }
 
   /**
    * Computed properties for template logic streamlining
@@ -722,14 +686,6 @@ export default class ProjectsView extends Vue {
     return "bg-green-600 text-white px-1.5 py-1 rounded-full";
   }
 
-  /**
-   * CSS class names for onboarding button
-   * @returns String with CSS classes for the onboarding button
-   */
-  get onboardingButtonClasses() {
-    return "text-md font-bold bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white mt-2 px-2 py-3 rounded-md";
-  }
-
   /**
    * CSS class names for project tab styling
    * @returns Object with CSS classes based on current tab selection
@@ -754,20 +710,6 @@ export default class ProjectsView extends Vue {
    * Utility methods
    */
 
-  /**
-   * Handles QR code sharing functionality with platform detection
-   *
-   * Routes to appropriate QR code interface based on current platform:
-   * - Full QR scanner for native mobile platforms
-   * - Web-based QR interface for browser environments
-   */
-  private handleQRCodeClick() {
-    const qrNavigationService = QRNavigationService.getInstance();
-    const route = qrNavigationService.getQRScannerRoute();
-
-    this.$router.push(route);
-  }
-
   /**
    * Legacy method compatibility
    * @deprecated Use computedOfferTabClassNames for backward compatibility