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

<template>
  <QuickNav />
  <TopMessage />

  <!-- CONTENT -->
  <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
    <!-- Back -->
    <div
      v-if="!hideBackButton"
      class="text-lg text-center font-light relative px-7"
    >
      <h1
        class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
        @click="cancelBack()"
      >
        <font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
      </h1>
    </div>

    <!-- Heading -->
    <h1 class="text-4xl text-center font-light px-4 mb-4">What Is Offered</h1>

    <h1 class="text-xl font-bold text-center mb-4">
      <span>
        Offer to
        {{
          offeredToProject
            ? projectName
            : offeredToRecipient
              ? recipientName
              : "someone not named"
        }}</span
      >
    </h1>
    <textarea
      v-model="descriptionOfItem"
      class="block w-full rounded border border-slate-400 mb-2 px-3 py-2"
      placeholder="What is offered"
      data-testId="itemDescription"
    />
    <div class="flex flex-row justify-center">
      <span
        class="rounded-l border border-r-0 border-slate-400 bg-slate-200 text-center text-blue-500 px-2 py-2 w-20"
        @click="changeUnitCode()"
      >
        {{ libsUtil.UNIT_SHORT[unitCode] || unitCode }}
      </span>
      <div
        class="border border-r-0 border-slate-400 bg-slate-200 px-4 py-2"
        @click="amountInput === '0' ? null : decrement()"
      >
        <font-awesome icon="chevron-left" />
      </div>
      <input
        v-model="amountInput"
        type="number"
        class="border border-r-0 border-slate-400 px-2 py-2 text-center w-20"
        data-testId="inputOfferAmount"
      />
      <div
        class="rounded-r border border-slate-400 bg-slate-200 px-4 py-2"
        @click="increment()"
      >
        <font-awesome icon="chevron-right" />
      </div>
    </div>

    <div class="flex flex-row mt-2">
      <span
        class="rounded-l border border-r-0 border-slate-400 bg-slate-200 text-center px-2 py-2"
      >
        Conditions
      </span>
      <textarea
        v-model="descriptionOfCondition"
        class="w-full border border-slate-400 px-3 py-2 rounded-r"
        placeholder="Prerequisites, other people to include, etc."
      />
    </div>

    <div class="flex flex-row mt-2">
      <span
        class="rounded-l border border-r-0 border-slate-400 bg-slate-200 text-center px-2 py-2"
      >
        {{ validThroughDateInput ? "" : "No" }}&nbsp;Expiration
      </span>
      <input
        v-model="validThroughDateInput"
        type="date"
        class="w-full rounded border border-slate-400 px-3 py-2 rounded-r"
      />
    </div>

    <div class="h-7 mt-4 flex">
      <input
        v-if="projectId && !offeredToRecipient"
        v-model="offeredToProject"
        type="checkbox"
        class="h-6 w-6 mr-2"
      />
      <font-awesome
        v-else
        icon="square"
        class="bg-slate-500 text-slate-500 h-5 w-5 px-0.5 py-0.5 mr-2 rounded"
        @click="notifyUserOfProject()"
      />
      <label class="text-sm mt-1">
        {{
          projectId
            ? "This is offered to " + projectName
            : "No project was chosen"
        }}
      </label>
    </div>

    <div class="h-7 mt-4 flex">
      <input
        v-if="recipientDid && !offeredToProject"
        v-model="offeredToRecipient"
        type="checkbox"
        class="h-6 w-6 mr-2"
      />
      <font-awesome
        v-else
        icon="square"
        class="bg-slate-500 text-slate-500 h-5 w-5 px-0.5 py-0.5 mr-2 rounded"
        @click="notifyUserOfRecipient()"
      />
      <label class="text-sm mt-1">
        {{
          recipientDid
            ? "This is offered to " + recipientName
            : "No recipient was chosen."
        }}
      </label>
    </div>

    <div v-if="showGeneralAdvanced" class="mt-4 flex">
      <router-link
        :to="{
          name: 'claim-add-raw',
          query: {
            claim: constructOfferParam(),
          },
        }"
        class="text-blue-500"
      >
        Edit & Submit Raw
      </router-link>
    </div>

    <p class="text-center mb-2 mt-6 italic">
      Sign & Send to publish to the world
      <font-awesome
        icon="circle-info"
        class="pl-2 text-blue-500 cursor-pointer"
        @click="explainData()"
      />
    </p>
    <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
      <button
        class="block w-full text-center text-lg font-bold 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-2 py-3 rounded-md"
        @click="confirm"
      >
        Sign &amp; Send
      </button>
      <button
        class="block w-full text-center text-md uppercase 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-1.5 py-2 rounded-md"
        @click="cancel"
      >
        Cancel
      </button>
    </div>
  </section>
</template>

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

import QuickNav from "../components/QuickNav.vue";
import TopMessage from "../components/TopMessage.vue";
import { NotificationIface, USE_DEXIE_DB } from "../constants/app";
import { db, retrieveSettingsForActiveAccount } from "../db/index";
import { GenericCredWrapper, OfferVerifiableCredential } from "../interfaces";
import {
  createAndSubmitOffer,
  didInfo,
  editAndSubmitOffer,
  getPlanFromCache,
  hydrateOffer,
} from "../libs/endorserServer";
import * as libsUtil from "../libs/util";
import { retrieveAccountDids } from "../libs/util";
import { logger } from "../utils/logger";
import { PlatformServiceFactory } from "@/services/PlatformServiceFactory";
import { Contact } from "@/db/tables/contacts";
import * as databaseUtil from "../db/databaseUtil";

/**
 * Offer Details View Component
 * @author Matthew Raymer
 *
 * This component handles the creation and editing of offers within the platform.
 * It supports both new offers and editing existing ones, with validation and
 * submission handling.
 *
 * Features:
 * - Offer amount and unit selection
 * - Item description
 * - Conditional requirements
 * - Expiration date setting
 * - Project or recipient targeting
 * - Raw claim editing option
 *
 * Data Flow:
 * 1. Component loads with optional previous offer data
 * 2. Retrieves account settings and contact information
 * 3. Populates form with existing or default values
 * 4. Validates and submits offer to server
 * 5. Redirects on success or shows error
 *
 * Security Features:
 * - DID validation
 * - JWT handling for edits
 * - Server-side validation
 * - Privacy controls for data sharing
 *
 * @see GiftedDialog for related gift creation
 * @see ClaimAddRawView for raw claim editing
 */
@Component({
  components: {
    QuickNav,
    TopMessage,
  },
})
export default class OfferDetailsView extends Vue {
  /** Notification function injected by Vue */
  $notify!: (notification: NotificationIface, timeout?: number) => void;
  /** Current route instance */
  $route!: RouteLocationNormalizedLoaded;
  /** Router instance for navigation */
  $router!: Router;

  /** Currently active DID */
  activeDid = "";
  /** API server endpoint */
  apiServer = "";
  /** Offer amount input field */
  amountInput = "0";
  /** Conditions for the offer */
  descriptionOfCondition = "";
  /** Description of offered item */
  descriptionOfItem = "";
  /** Path to redirect after completion */
  destinationPathAfter = "";
  /** Controls back button visibility */
  hideBackButton = false;
  /** Additional message to display */
  message = "";
  /** Flag for project assignment */
  offeredToProject = false;
  /** Flag for recipient assignment */
  offeredToRecipient = false;
  /** DID of offer creator */
  offererDid: string | undefined;
  /** Offer ID for editing */
  offerId = "";
  /** Previous offer data for editing */
  prevCredToEdit?: GenericCredWrapper<OfferVerifiableCredential>;
  /** Project ID if offer is for project */
  projectId = "";
  /** Project name display */
  projectName = "a project";
  /** Recipient DID if offer is for person */
  recipientDid = "";
  /** Recipient name display */
  recipientName = "";
  /** Advanced features visibility flag */
  showGeneralAdvanced = false;
  /** Unit type for offer amount */
  unitCode = "HUR";
  /** Expiration date input */
  validThroughDateInput = "";

  /** Utility library reference */
  libsUtil = libsUtil;

  /**
   * Component lifecycle hook that initializes the offer form
   *
   * Workflow:
   * 1. Extracts previous offer data if editing
   * 2. Sets initial form values from route or previous offer
   * 3. Loads account settings and contacts
   * 4. Retrieves project information if needed
   * 5. Sets offer assignment flags
   *
   * @throws Will not throw but shows notifications
   * @emits Notifications on loading errors
   */
  async mounted() {
    try {
      await this.loadPreviousOffer();
      await this.initializeFormValues();
      await this.loadAccountSettings();
      await this.loadRecipientInfo();
      await this.loadProjectInfo();
    } catch (err: unknown) {
      logger.error("Error in mounted:", err);
      this.$notify(
        {
          group: "alert",
          type: "danger",
          title: "Error",
          text: err.message || "There was an error loading the offer details.",
        },
        5000,
      );
    }
  }

  /**
   * Loads previous offer data if editing an existing offer
   * @throws Will not throw but shows notifications
   */
  private async loadPreviousOffer() {
    try {
      this.prevCredToEdit = (this.$route.query["prevCredToEdit"] as string)
        ? (JSON.parse(
            this.$route.query["prevCredToEdit"] as string,
          ) as GenericCredWrapper<OfferVerifiableCredential>)
        : undefined;
    } catch (error: unknown) {
      this.$notify(
        {
          group: "alert",
          type: "danger",
          title: "Retrieval Error",
          text: "The previous record isn't available for editing. If you submit, you'll create a new record.",
        },
        5000,
      );
    }
  }

  /**
   * Initializes form values from route params or previous offer
   */
  private async initializeFormValues() {
    const prevAmount =
      this.prevCredToEdit?.claim?.includesObject?.amountOfThisGood;
    this.amountInput =
      (this.$route.query["amountInput"] as string) ||
      (prevAmount ? String(prevAmount) : "") ||
      this.amountInput;

    this.unitCode = ((this.$route.query["unitCode"] as string) ||
      this.prevCredToEdit?.claim?.includesObject?.unitCode ||
      this.unitCode) as string;

    this.descriptionOfCondition =
      this.prevCredToEdit?.claim?.description || this.descriptionOfCondition;

    this.descriptionOfItem =
      (this.$route.query["description"] as string) ||
      this.prevCredToEdit?.claim?.itemOffered?.description ||
      this.descriptionOfItem;

    this.destinationPathAfter =
      (this.$route.query["destinationPathAfter"] as string) || "";
    this.hideBackButton =
      (this.$route.query["hideBackButton"] as string) === "true";
    this.message = (this.$route.query["message"] as string) || "";

    // Set project info from previous offer or route
    let project;
    if (
      this.prevCredToEdit?.claim?.itemOffered?.isPartOf?.["@type"] ===
      "PlanAction"
    ) {
      project = this.prevCredToEdit?.claim?.itemOffered?.isPartOf;
    }
    this.projectId = ((this.$route.query["projectId"] as string) ||
      project?.identifier ||
      this.projectId) as string;
    this.projectName = ((this.$route.query["projectName"] as string) ||
      project?.name ||
      this.projectName) as string;

    this.recipientDid = ((this.$route.query["recipientDid"] as string) ||
      this.prevCredToEdit?.claim?.recipient?.identifier) as string;
    this.recipientName = (this.$route.query["recipientName"] as string) || "";

    this.validThroughDateInput =
      this.prevCredToEdit?.claim?.validThrough || this.validThroughDateInput;
  }

  /**
   * Loads account settings and updates component state
   * @throws Will not throw but logs errors
   */
  private async loadAccountSettings() {
    let settings = await databaseUtil.retrieveSettingsForActiveAccount();
    if (USE_DEXIE_DB) {
      settings = await retrieveSettingsForActiveAccount();
    }
    this.apiServer = settings.apiServer ?? "";
    this.activeDid = settings.activeDid ?? "";
    this.showGeneralAdvanced = settings.showGeneralAdvanced ?? false;
  }

  /**
   * Loads recipient information if recipient DID exists
   */
  private async loadRecipientInfo() {
    if (this.recipientDid && !this.recipientName) {
      let allContacts: Contact[] = [];
      const platformService = PlatformServiceFactory.getInstance();
      const queryResult = await platformService.dbQuery(
        "SELECT * FROM contacts",
      );
      allContacts = databaseUtil.mapQueryResultToValues(
        queryResult,
      ) as unknown as Contact[];
      if (USE_DEXIE_DB) {
        await db.open();
        allContacts = await db.contacts.toArray();
      }
      const allMyDids = await retrieveAccountDids();
      this.recipientName = didInfo(
        this.recipientDid,
        this.activeDid,
        allMyDids,
        allContacts,
      );
    }
    // Set assignment flags
    this.offeredToProject = !!this.projectId;
    this.offeredToRecipient = !this.offeredToProject && !!this.recipientDid;
  }

  /**
   * Loads project information if project ID exists
   */
  private async loadProjectInfo() {
    if (this.projectId && !this.projectName) {
      const project = await getPlanFromCache(
        this.projectId,
        this.axios,
        this.apiServer,
        this.activeDid,
      );
      this.projectName = project?.name
        ? "the project: " + project.name
        : "a project";
    }
  }

  /**
   * Changes the unit type for the offer amount
   *
   * Cycles through available unit types in UNIT_SHORT.
   * Updates display and internal state.
   */
  changeUnitCode() {
    const units = Object.keys(this.libsUtil.UNIT_SHORT);
    const index = units.indexOf(this.unitCode);
    this.unitCode = units[(index + 1) % units.length];
  }

  /**
   * Increments the offer amount by 1
   *
   * Handles string to number conversion and updates display.
   */
  increment() {
    this.amountInput = `${(parseFloat(this.amountInput) || 0) + 1}`;
  }

  /**
   * Decrements the offer amount by 1
   *
   * Prevents negative values and handles string to number conversion.
   */
  decrement() {
    this.amountInput = `${Math.max(
      0,
      (parseFloat(this.amountInput) || 1) - 1,
    )}`;
  }

  /**
   * Handles cancellation of offer creation/editing
   *
   * Workflow:
   * 1. Checks for destination path
   * 2. Navigates to destination or previous page
   *
   * @emits Router navigation
   */
  cancel() {
    if (this.destinationPathAfter) {
      (this.$router as Router).push({ path: this.destinationPathAfter });
    } else {
      (this.$router as Router).back();
    }
  }

  /**
   * Handles back button navigation
   *
   * @emits Router navigation to previous page
   */
  cancelBack() {
    (this.$router as Router).back();
  }

  /**
   * Validates and initiates offer submission
   *
   * Workflow:
   * 1. Validates active DID exists
   * 2. Checks for negative amounts
   * 3. Ensures description or amount exists
   * 4. Shows processing notification
   * 5. Calls recordOffer for submission
   *
   * @throws Will not throw but shows notifications
   * @emits Notifications for validation errors or processing
   */
  async confirm() {
    if (!this.activeDid) {
      this.$notify(
        {
          group: "alert",
          type: "danger",
          title: "Error",
          text: "You must select an identifier before you can record a offer.",
        },
        2000,
      );
      return;
    }
    if (parseFloat(this.amountInput) < 0) {
      this.$notify(
        {
          group: "alert",
          type: "danger",
          text: "You may not send a negative number.",
          title: "",
        },
        2000,
      );
      return;
    }
    if (!this.descriptionOfItem && !parseFloat(this.amountInput)) {
      this.$notify(
        {
          group: "alert",
          type: "danger",
          title: "Error",
          text: `You must enter a description or some number of ${
            this.libsUtil.UNIT_LONG[this.unitCode]
          }.`,
        },
        2000,
      );
      return;
    }

    this.$notify(
      {
        group: "alert",
        type: "toast",
        text: "Recording the offer...",
        title: "",
      },
      1000,
    );

    // this is asynchronous, but we don't need to wait for it to complete
    await this.recordOffer();
  }

  /**
   * Notifies user about project assignment restrictions
   *
   * Shows appropriate error message based on:
   * - Missing project ID
   * - Conflict with recipient assignment
   *
   * @emits Notification with error message
   */
  notifyUserOfProject() {
    if (!this.projectId) {
      this.$notify(
        {
          group: "alert",
          type: "warning",
          title: "Error",
          text: "To assign to a project, you must open this page through a project.",
        },
        3000,
      );
    } else {
      // must be because offeredToRecipient is true
      this.$notify(
        {
          group: "alert",
          type: "warning",
          title: "Error",
          text: "You cannot assign both to a project and to a recipient.",
        },
        3000,
      );
    }
  }

  /**
   * Notifies user about recipient assignment restrictions
   *
   * Shows appropriate error message based on:
   * - Missing recipient DID
   * - Conflict with project assignment
   *
   * @emits Notification with error message
   */
  notifyUserOfRecipient() {
    if (!this.recipientDid) {
      this.$notify(
        {
          group: "alert",
          type: "warning",
          title: "Error",
          text: "To assign to a recipient, you must open this page from a contact.",
        },
        3000,
      );
    } else {
      // must be because offeredToProject is true
      this.$notify(
        {
          group: "alert",
          type: "warning",
          title: "Error",
          text: "You cannot assign both to a recipient and to a project.",
        },
        3000,
      );
    }
  }

  /**
   * Records the offer to the server
   *
   * Workflow:
   * 1. Determines if editing existing or creating new
   * 2. Prepares offer data with assignments
   * 3. Submits to server via appropriate method
   * 4. Handles success/error responses
   * 5. Navigates on success
   *
   * @throws Will not throw but shows notifications
   * @emits Notifications for success/failure
   * @emits Router navigation on success
   */
  public async recordOffer() {
    try {
      const recipientDid = this.offeredToRecipient
        ? this.recipientDid
        : undefined;
      const projectId = this.offeredToProject ? this.projectId : undefined;
      let result;
      if (this.prevCredToEdit) {
        // don't create from a blank one in case some properties were set from a different interface
        result = await editAndSubmitOffer(
          this.axios,
          this.apiServer,
          this.prevCredToEdit,
          this.activeDid,
          this.descriptionOfItem,
          parseFloat(this.amountInput),
          this.unitCode,
          this.descriptionOfCondition,
          this.validThroughDateInput,
          recipientDid,
          projectId,
        );
      } else {
        result = await createAndSubmitOffer(
          this.axios,
          this.apiServer,
          this.activeDid,
          this.descriptionOfItem,
          parseFloat(this.amountInput),
          this.unitCode,
          this.descriptionOfCondition,
          this.validThroughDateInput,
          recipientDid,
          projectId,
        );
      }

      if (!result.success) {
        const errorMessage = this.getCreationErrorMessage(result);
        logger.error("Error with offer creation result:", result);
        this.$notify(
          {
            group: "alert",
            type: "danger",
            title: "Error",
            text: errorMessage || "There was an error creating the offer.",
          },
          5000,
        );
      } else {
        this.$notify(
          {
            group: "alert",
            type: "success",
            title: "Success",
            text: `That offer was recorded.`,
          },
          5000,
        );
        localStorage.removeItem("imageUrl");
        if (this.destinationPathAfter) {
          (this.$router as Router).push({ path: this.destinationPathAfter });
        } else {
          (this.$router as Router).back();
        }
      }
      // eslint-disable-next-line @typescript-eslint/no-explicit-any
    } catch (error: any) {
      logger.error("Error with offer recordation caught:", error);
      const errorMessage =
        error.userMessage ||
        error.response?.data?.error?.message ||
        "There was an error recording the offer.";
      this.$notify(
        {
          group: "alert",
          type: "danger",
          title: "Error",
          text: errorMessage,
        },
        5000,
      );
    }
  }

  /**
   * Constructs offer parameters for raw editing
   *
   * Creates a JSON string containing:
   * - Offer details
   * - Assignments
   * - Conditions
   * - Expiration
   *
   * @returns JSON string of offer parameters
   */
  constructOfferParam() {
    const recipientDid = this.offeredToRecipient
      ? this.recipientDid
      : undefined;
    const projectId = this.offeredToProject ? this.projectId : undefined;
    const offerClaim = hydrateOffer(
      this.prevCredToEdit?.claim as OfferVerifiableCredential,
      this.activeDid,
      recipientDid,
      this.descriptionOfItem,
      parseFloat(this.amountInput),
      this.unitCode,
      this.descriptionOfCondition,
      projectId,
      this.validThroughDateInput,
      this.prevCredToEdit?.id as string,
    );
    const claimStr = JSON.stringify(offerClaim);
    return claimStr;
  }

  /**
   * Checks if server response indicates an error
   *
   * @param result Response data from server
   * @returns true if response indicates error
   */
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  isCreationError(result: any) {
    return result.status !== 201 || result.data?.error;
  }

  /**
   * Extracts error message from server response
   *
   * @param result Server response object
   * @returns Best available error message
   */
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  getCreationErrorMessage(result: any) {
    return (
      result.error?.userMessage ||
      result.error?.error ||
      result.response?.data?.error?.message
    );
  }

  /**
   * Shows privacy information dialog
   *
   * Displays standard privacy message about data sharing.
   *
   * @emits Notification with privacy message
   */
  explainData() {
    this.$notify(
      {
        group: "alert",
        type: "success",
        title: "Data Sharing",
        text: libsUtil.PRIVACY_MESSAGE,
      },
      7000,
    );
  }
}
</script>