crowd-funder-for-time-pwa/src/views/ContactGiftingView.vue

<template>
  <QuickNav selected="Home"></QuickNav>
  <!-- CONTENT -->
  <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
    <!-- Breadcrumb -->
    <div id="ViewBreadcrumb" class="mb-8">
      <h1 class="text-2xl text-center font-semibold relative px-7">
        <!-- Back -->
        <router-link
          :to="{ name: 'home' }"
          class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
          ><font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
        </router-link>
        {{ stepType === "giver" ? "Given by..." : "Given to..." }}
      </h1>
    </div>

    <!-- Results List -->
    <ul class="border-t border-slate-300">
      <!-- "You" entity -->
      <li v-if="shouldShowYouEntity" class="border-b border-slate-300 py-3">
        <h2 class="text-base flex gap-4 items-center">
          <span class="grow flex gap-2 items-center font-medium">
            <font-awesome icon="hand" class="text-blue-500 text-4xl shrink-0" />
            <span class="text-ellipsis overflow-hidden text-blue-500">You</span>
          </span>
          <span class="text-right">
            <button
              type="button"
              class="block w-full text-center text-sm uppercase 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-3 py-1.5 rounded-md"
              @click="openDialog({ did: activeDid, name: 'You' })"
            >
              <font-awesome icon="gift" class="fa-fw"></font-awesome>
            </button>
          </span>
        </h2>
      </li>
      <li class="border-b border-slate-300 py-3">
        <h2 class="text-base flex gap-4 items-center">
          <span class="grow flex gap-2 items-center font-medium">
            <font-awesome
              icon="circle-question"
              class="text-slate-400 text-4xl shrink-0"
            />
            <span class="text-ellipsis overflow-hidden italic text-slate-500">(Unnamed/Unknown)</span>
          </span>
          <span class="text-right">
            <button
              type="button"
              class="block w-full text-center text-sm uppercase 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-3 py-1.5 rounded-md"
              @click="openDialog({ did: '', name: 'Unnamed' })"
            >
              <font-awesome icon="gift" class="fa-fw"></font-awesome>
            </button>
          </span>
        </h2>
      </li>
      <li
        v-for="contact in allContacts"
        :key="contact.did"
        class="border-b border-slate-300 py-3"
      >
        <h2 class="text-base flex gap-4 items-center">
          <span class="grow flex gap-2 items-center font-medium overflow-hidden">
            <EntityIcon
              :contact="contact"
              :icon-size="34"
              class="inline-block align-middle border border-slate-300 rounded-full overflow-hidden shrink-0"
            />
            <span v-if="contact.name" class="text-ellipsis overflow-hidden">{{ contact.name }}</span>
            <span v-else class="text-ellipsis overflow-hidden italic text-slate-500">{{ contact.did }}</span>
          </span>
          <span class="text-right">
            <button
              type="button"
              class="block w-full text-center text-sm uppercase 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-3 py-1.5 rounded-md"
              @click="openDialog(contact)"
            >
              <font-awesome icon="gift" class="fa-fw"></font-awesome>
            </button>
          </span>
        </h2>
      </li>
    </ul>

    <GiftedDialog
      ref="giftedDialog"
      :giver-entity-type="giverEntityType"
      :recipient-entity-type="recipientEntityType"
      :from-project-id="fromProjectId"
      :to-project-id="toProjectId"
      :is-from-project-view="isFromProjectView"
      :hide-show-all="true"
    />
  </section>
</template>

<script lang="ts">
import { Component, Vue } from "vue-facing-decorator";
import { RouteLocationNormalizedLoaded, Router } from "vue-router";

import GiftedDialog from "../components/GiftedDialog.vue";
import QuickNav from "../components/QuickNav.vue";
import EntityIcon from "../components/EntityIcon.vue";
import { NotificationIface } from "../constants/app";
import { Contact } from "../db/tables/contacts";
import { GiverReceiverInputInfo } from "../libs/util";
import { logger } from "../utils/logger";
import { PlatformServiceMixin } from "@/utils/PlatformServiceMixin";
import { createNotifyHelpers, TIMEOUTS } from "@/utils/notify";
@Component({
  components: { GiftedDialog, QuickNav, EntityIcon },
  mixins: [PlatformServiceMixin],
})
export default class ContactGiftingView extends Vue {
  $notify!: (notification: NotificationIface, timeout?: number) => void;
  $route!: RouteLocationNormalizedLoaded;
  $router!: Router;

  notify!: ReturnType<typeof createNotifyHelpers>;

  activeDid = "";
  allContacts: Array<Contact> = [];
  apiServer = "";
  projectId = "";
  prompt = "";
  description = "";
  amountInput = "0";
  unitCode = "HUR";
  recipientProjectName = "";
  recipientProjectImage = "";
  recipientProjectHandleId = "";

  // New context parameters
  stepType = "giver";
  giverEntityType = "person" as "person" | "project";
  recipientEntityType = "person" as "person" | "project";
  giverProjectId = "";
  giverProjectName = "";
  giverProjectImage = "";
  giverProjectHandleId = "";
  giverDid = "";
  recipientDid = "";
  fromProjectId = "";
  toProjectId = "";
  showProjects = false;
  isFromProjectView = false;
  offerId = "";

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

    try {
      const settings = await this.$accountSettings();
      this.apiServer = settings.apiServer || "";
      this.activeDid = settings.activeDid || "";

      this.allContacts = await this.$getAllContacts();

      this.projectId =
        (this.$route.query["recipientProjectId"] as string) || "";
      this.recipientProjectName =
        (this.$route.query["recipientProjectName"] as string) || "";
      this.recipientProjectImage =
        (this.$route.query["recipientProjectImage"] as string) || "";
      this.recipientProjectHandleId =
        (this.$route.query["recipientProjectHandleId"] as string) || "";
      this.prompt = (this.$route.query["prompt"] as string) ?? this.prompt;
      this.description = (this.$route.query["description"] as string) || "";
      this.amountInput = (this.$route.query["amountInput"] as string) || "0";
      this.unitCode = (this.$route.query["unitCode"] as string) || "HUR";

      // Read new context parameters
      this.stepType = (this.$route.query["stepType"] as string) || "giver";
      this.giverEntityType =
        (this.$route.query["giverEntityType"] as "person" | "project") ||
        "person";
      this.recipientEntityType =
        (this.$route.query["recipientEntityType"] as "person" | "project") ||
        "person";
      this.giverProjectId =
        (this.$route.query["giverProjectId"] as string) || "";
      this.giverProjectName =
        (this.$route.query["giverProjectName"] as string) || "";
      this.giverProjectImage =
        (this.$route.query["giverProjectImage"] as string) || "";
      this.giverProjectHandleId =
        (this.$route.query["giverProjectHandleId"] as string) || "";
      this.giverDid = (this.$route.query["giverDid"] as string) || "";
      this.recipientDid = (this.$route.query["recipientDid"] as string) || "";
      this.fromProjectId = (this.$route.query["fromProjectId"] as string) || "";
      this.toProjectId = (this.$route.query["toProjectId"] as string) || "";
      this.showProjects =
        (this.$route.query["showProjects"] as string) === "true";
      this.isFromProjectView =
        (this.$route.query["isFromProjectView"] as string) === "true";
      this.offerId = (this.$route.query["offerId"] as string) || "";

      // eslint-disable-next-line @typescript-eslint/no-explicit-any
    } catch (err: any) {
      logger.error("Error retrieving settings & contacts:", err);
      this.notify.error(
        err.message ||
          "There was an error retrieving your settings or contacts.",
        TIMEOUTS.LONG,
      );
    }
  }

  openDialog(contact?: GiverReceiverInputInfo) {
    // Determine the selected entity based on contact type
    const selectedEntity = this.createEntityFromContact(contact);

    // Create giver and recipient based on step type and selected entity
    const { giver, recipient } = this.createGiverAndRecipient(selectedEntity);

    // Open the dialog
    (this.$refs.giftedDialog as GiftedDialog).open(
      giver,
      recipient,
      this.offerId,
      this.prompt,
      this.description,
      this.amountInput,
      this.unitCode,
    );

    // Move to Step 2 - entities are already set by the open() call
    (this.$refs.giftedDialog as GiftedDialog).moveToStep2();
  }

  /**
   * Creates an entity object from the contact parameter
   * Uses DID-based logic to determine "You" and "Unnamed" entities
   */
  private createEntityFromContact(
    contact?: GiverReceiverInputInfo,
  ): GiverReceiverInputInfo | undefined {
    if (!contact) {
      return undefined;
    }

    // Handle GiverReceiverInputInfo object
    if (contact.did === this.activeDid) {
      // If DID matches active DID, create "You" entity
      return { did: this.activeDid, name: "You" };
    } else if (!contact.did || contact.did === "") {
      // If DID is empty/null, create "Unnamed" entity
      return { did: "", name: "Unnamed" };
    } else {
      // Create a copy of the contact to avoid modifying the original
      return { ...contact };
    }
  }

  /**
   * Creates giver and recipient objects based on step type and selected entity
   */
  private createGiverAndRecipient(selectedEntity?: GiverReceiverInputInfo): {
    giver: GiverReceiverInputInfo | undefined;
    recipient: GiverReceiverInputInfo;
  } {
    if (this.stepType === "giver") {
      // We're selecting a giver, so the selected entity becomes the giver
      const giver = selectedEntity;
      const recipient = this.createRecipientFromContext();
      return { giver, recipient };
    } else {
      // We're selecting a recipient, so the selected entity becomes the recipient
      const recipient = selectedEntity || { did: "", name: "Unnamed" };
      const giver = this.createGiverFromContext();
      return { giver, recipient };
    }
  }

  /**
   * Creates recipient object from context (preserves existing recipient)
   */
  private createRecipientFromContext(): GiverReceiverInputInfo {
    if (this.recipientEntityType === "project") {
      return {
        did: this.recipientProjectHandleId,
        name: this.recipientProjectName,
        image: this.recipientProjectImage,
        handleId: this.recipientProjectHandleId,
      };
    } else {
      if (this.recipientDid === this.activeDid) {
        return { did: this.activeDid, name: "You" };
      } else if (this.recipientDid) {
        return {
          did: this.recipientDid,
          name: this.recipientProjectName,
        };
      } else {
        return { did: "", name: "Unnamed" };
      }
    }
  }

  /**
   * Creates giver object from context (preserves existing giver)
   */
  private createGiverFromContext(): GiverReceiverInputInfo {
    if (this.giverEntityType === "project") {
      return {
        did: this.giverProjectHandleId,
        name: this.giverProjectName,
        image: this.giverProjectImage,
        handleId: this.giverProjectHandleId,
      };
    } else {
      if (this.giverDid === this.activeDid) {
        return { did: this.activeDid, name: "You" };
      } else if (this.giverDid) {
        return {
          did: this.giverDid,
          name: this.giverProjectName,
        };
      } else {
        return { did: "", name: "Unnamed" };
      }
    }
  }

  get shouldShowYouEntity(): boolean {
    if (this.stepType === "giver") {
      // When selecting a giver, show "You" if the current recipient is not "You"
      // This prevents selecting yourself as both giver and recipient
      if (this.recipientEntityType === "project") {
        // If recipient is a project, we can select "You" as giver
        return true;
      } else {
        // If recipient is a person, check if it's not "You"
        return this.recipientDid !== this.activeDid;
      }
    } else {
      // When selecting a recipient, show "You" if the current giver is not "You"
      // This prevents selecting yourself as both giver and recipient
      if (this.giverEntityType === "project") {
        // If giver is a project, we can select "You" as recipient
        return true;
      } else {
        // If giver is a person, check if it's not "You"
        return this.giverDid !== this.activeDid;
      }
    }
  }
}
</script>