crowd-funder-for-time-pwa/src/components/HiddenDidDialog.vue

<template>
  <div v-if="isOpen" class="dialog-overlay">
    <div class="dialog">
      <!-- Header -->
      <div class="flex justify-between items-center mb-4">
        <h2 class="text-xl font-bold capitalize">{{ roleName }} Details</h2>
        <button class="text-gray-500 hover:text-gray-700" @click="close">
          <font-awesome icon="times" />
        </button>
      </div>

      <!-- Content -->
      <!-- This is somewhat similar to ClaimView.vue and ConfirmGiftView.vue -->
      <div class="mb-4">
        <p class="mb-4">
          <span v-if="R.isEmpty(visibleToDids)">
            The {{ roleName }} is not visible to you or any of your contacts.
          </span>
          <span v-else> The {{ roleName }} is not visible to you. </span>
        </p>

        <div v-if="R.isEmpty(visibleToDids)">
          <p class="mt-2">
            You can ask one of your contacts to take a look and see if their
            contacts can see more details. Someone is connected to people closer
            to them; if you don't know who to ask, try the person who registered
            you.
          </p>
        </div>

        <div v-else>
          <p class="mb-2">
            They are visible to some of your contacts. If you'd like an
            introduction, ask them if they'll tell you more.
          </p>

          <div class="ml-4">
            <ul>
              <li
                v-for="(visDid, idx) of visibleToDids"
                :key="idx"
                class="list-disc ml-4 mb-2"
              >
                <div class="text-sm">
                  <span>
                    {{ didInfo(visDid) }}
                    <span v-if="!serverUtil.isEmptyOrHiddenDid(visDid)">
                      <router-link
                        :to="{ path: '/did/' + encodeURIComponent(visDid) }"
                        class="text-blue-500"
                      >
                        <font-awesome
                          icon="arrow-up-right-from-square"
                          class="fa-fw"
                        />
                      </router-link>
                    </span>
                  </span>
                </div>
              </li>
            </ul>
          </div>
        </div>

        <div class="mt-4">
          <span v-if="canShare">
            If you'd like an introduction,
            <a class="text-blue-500" @click="onClickShareClaim()"
              >click here to share the information with them and ask if they'll
              tell you more about the {{ roleName }}.</a
            >
          </span>
          <span v-else>
            If you'd like an introduction,
            <a
              class="text-blue-500"
              @click="copyTextToClipboard('A link to this page', deepLinkUrl)"
              >click here to copy this page, paste it into a message, and ask if
              they'll tell you more about the {{ roleName }}.</a
            >
          </span>
        </div>
      </div>

      <!-- Footer -->
      <div class="flex justify-end">
        <button :class="closeButtonClasses" @click="close">Close</button>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
/**
 * HiddenDidDialog.vue
 *
 * A dialog component for displaying hidden DID information and sharing options.
 * Shows visibility information for DIDs that are not directly accessible to the user
 * and provides options for sharing and requesting introductions.
 *
 * Features:
 * - Displays DID visibility information
 * - Shows contacts who can see the DID
 * - Provides sharing options (native share or clipboard copy)
 * - Handles deep link generation for sharing
 * - Template streamlined with computed CSS properties
 * - Modern notification system integration
 *
 * @author Matthew Raymer
 * @since 2024-12-19
 */
import { Component, Vue } from "vue-facing-decorator";
import { copyToClipboard } from "../services/ClipboardService";
import * as R from "ramda";
import * as serverUtil from "../libs/endorserServer";
import { Contact } from "../db/tables/contacts";
import { NotificationIface } from "../constants/app";
import { createNotifyHelpers } from "@/utils/notify";
import { TIMEOUTS } from "@/utils/notify";
import { NOTIFY_COPIED_TO_CLIPBOARD } from "@/constants/notifications";
import { APP_SERVER } from "@/constants/app";

@Component({ name: "HiddenDidDialog" })
export default class HiddenDidDialog extends Vue {
  $notify!: (notification: NotificationIface, timeout?: number) => void;
  notify!: ReturnType<typeof createNotifyHelpers>;

  isOpen = false;
  roleName = "";
  visibleToDids: string[] = [];
  allContacts: Array<Contact> = [];
  activeDid = "";
  allMyDids: Array<string> = [];
  canShare = false;
  deepLinkPathSuffix = "";
  deepLinkUrl = window.location.href; // this is changed to a deep link in the setup

  R = R;
  serverUtil = serverUtil;
  APP_SERVER = APP_SERVER;

  // =================================================
  // COMPUTED PROPERTIES - Template Streamlining
  // =================================================

  /**
   * Styling classes for the close button
   * Extracts repeated Tailwind CSS classes to single source of truth
   */
  get closeButtonClasses(): string {
    return "bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600";
  }

  // =================================================
  // LIFECYCLE & EVENT METHODS
  // =================================================

  created() {
    // Initialize notification helpers
    this.notify = createNotifyHelpers(this.$notify);

    // When Chrome compatibility is fixed https://developer.mozilla.org/en-US/docs/Web/API/Web_Share_API#api.navigator.canshare
    // then use this truer check: navigator.canShare && navigator.canShare()
    this.canShare = !!navigator.share;
  }

  open(
    deepLinkPathSuffix: string,
    roleName: string,
    visibleToDids: string[],
    allContacts: Array<Contact>,
    activeDid: string,
    allMyDids: Array<string>,
  ) {
    this.deepLinkPathSuffix = deepLinkPathSuffix;
    this.roleName = roleName;
    this.visibleToDids = visibleToDids;
    this.allContacts = allContacts;
    this.activeDid = activeDid;
    this.allMyDids = allMyDids;

    // Use production URL for sharing to avoid localhost issues in development
    this.deepLinkUrl = `${APP_SERVER}/deep-link/${this.deepLinkPathSuffix}`;
    this.isOpen = true;
  }

  close() {
    this.isOpen = false;
  }

  didInfo(did: string) {
    return serverUtil.didInfo(
      did,
      this.activeDid,
      this.allMyDids,
      this.allContacts,
    );
  }

  async copyTextToClipboard(name: string, text: string) {
    try {
      await copyToClipboard(text);
      this.notify.success(
        NOTIFY_COPIED_TO_CLIPBOARD.message(name || "That"),
        TIMEOUTS.SHORT,
      );
    } catch (error) {
      this.$logAndConsole(
        `Error copying ${name || "content"} to clipboard: ${error}`,
        true,
      );
      this.notify.error(`Failed to copy ${name || "content"} to clipboard.`);
    }
  }

  onClickShareClaim() {
    this.copyTextToClipboard("A link to this page", this.deepLinkUrl);
    window.navigator.share({
      title: "Help Connect Me",
      text: "I'm trying to find the people who recorded this. Can you help me?",
      url: this.deepLinkUrl,
    });
  }
}
</script>