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

<template>
  <QuickNav />
  <TopMessage />

  <!-- CONTENT -->
  <section id="Content" class="p-2 pb-24 max-w-3xl mx-auto">
    <!-- Breadcrumb -->
    <div>
      <!-- Back -->
      <div 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="$router.back()"
        >
          <fa icon="chevron-left" class="fa-fw" />
        </h1>
      </div>

      <!-- Heading -->
      <h1 id="ViewHeading" class="text-4xl text-center font-light">
        Share Your Contact Info
      </h1>
    </div>

    <div class="flex justify-center mt-8">
      <button
        class="block w-fit text-center text-lg 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-2 py-3 rounded-md"
        @click="onClickShare()"
      >
        Copy to Clipboard
      </button>
    </div>
    <div class="ml-12">
      <div class="mt-8">Click to copy your info, then send it to them.</div>
      <div>
        They will paste it in the input box on the Contacts
        <fa icon="users" /> screen.
      </div>
    </div>
  </section>
</template>

<script lang="ts">
import * as R from "ramda";
import { Component, Vue } from "vue-facing-decorator";
import { Router } from "vue-router";
import { useClipboard } from "@vueuse/core";

import QuickNav from "@/components/QuickNav.vue";
import TopMessage from "@/components/TopMessage.vue";
import { NotificationIface } from "@/constants/app";
import { accountsDB, db, retrieveSettingsForActiveAccount } from "@/db/index";
import { generateEndorserJwtForAccount } from "@/libs/endorserServer";

@Component({
  components: { QuickNav, TopMessage },
})
export default class ShareMyContactInfoView extends Vue {
  $notify!: (notification: NotificationIface, timeout?: number) => void;

  async onClickShare() {
    const settings = await retrieveSettingsForActiveAccount();
    const activeDid = settings.activeDid || "";
    const givenName = settings.firstName || "";
    const isRegistered = !!settings.isRegistered;
    const profileImageUrl = settings.profileImageUrl || "";

    await accountsDB.open();
    const accounts = await accountsDB.accounts.toArray();
    const account = R.find((acc) => acc.did === activeDid, accounts);

    const numContacts = await db.contacts.count();

    if (account) {
      const message = await generateEndorserJwtForAccount(
        account,
        isRegistered,
        givenName,
        profileImageUrl,
        true,
      );
      useClipboard()
        .copy(message)
        .then(() => {
          this.$notify(
            {
              group: "alert",
              type: "info",
              title: "Copied",
              text: "Your contact info was copied to the clipboard. Have them paste it in the box on their 'Contacts' screen.",
            },
            5000,
          );
          if (numContacts > 0) {
            setTimeout(() => {
              this.$notify(
                {
                  group: "alert",
                  type: "success",
                  title: "Share Other Contacts",
                  text: "You may want to share some of your contacts with them. Select them below to copy and send.",
                },
                10000,
              );
            }, 3000);
          }
        });
      (this.$router as Router).push({ name: "contacts" });
    } else {
      this.$notify(
        {
          group: "alert",
          type: "error",
          title: "Error",
          text: "No account was found for the active DID.",
        },
        5000,
      );
    }
  }
}
</script>