Merge pull request 'enhance the verbiage & display for bulk confirmations & visibility' (#183) from better-confirms into master

Reviewed-on: #183

src/views/DIDView.vue

@@ -71,22 +71,22 @@
                   contactFromDid?.seesMe && contactFromDid.did !== activeDid
                 "
                 class="text-sm 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 mx-0.5 my-0.5 px-2 py-1.5 rounded-md"
-                title="They can see you"
+                title="They can see your activity"
                 @click="confirmSetVisibility(contactFromDid, false)"
               >
-                <font-awesome icon="eye" class="fa-fw" />
                 <font-awesome icon="arrow-up" class="fa-fw" />
+                <font-awesome icon="eye" class="fa-fw" />
               </button>
               <button
                 v-else-if="
                   !contactFromDid?.seesMe && contactFromDid?.did !== activeDid
                 "
                 class="text-sm 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 mx-0.5 my-0.5 px-2 py-1.5 rounded-md"
-                title="They cannot see you"
+                title="They cannot see your activity"
                 @click="confirmSetVisibility(contactFromDid, true)"
               >
-                <font-awesome icon="eye-slash" class="fa-fw" />
                 <font-awesome icon="arrow-up" class="fa-fw" />
+                <font-awesome icon="eye-slash" class="fa-fw" />
               </button>
 
               <button
@@ -95,11 +95,11 @@
                   contactFromDid.did !== activeDid
                 "
                 class="text-sm 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 mx-0.5 my-0.5 px-2 py-1.5 rounded-md"
-                title="I view their content"
+                title="You watch their activity"
                 @click="confirmViewContent(contactFromDid, false)"
               >
-                <font-awesome icon="eye" class="fa-fw" />
                 <font-awesome icon="arrow-down" class="fa-fw" />
+                <font-awesome icon="eye" class="fa-fw" />
               </button>
               <button
                 v-else-if="
@@ -107,11 +107,11 @@
                   contactFromDid?.did !== activeDid
                 "
                 class="text-sm 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 mx-0.5 my-0.5 px-2 py-1.5 rounded-md"
-                title="I do not view their content"
+                title="You do not watch their activity"
                 @click="confirmViewContent(contactFromDid, true)"
               >
-                <font-awesome icon="eye-slash" class="fa-fw" />
                 <font-awesome icon="arrow-down" class="fa-fw" />
+                <font-awesome icon="eye-slash" class="fa-fw" />
               </button>
 
               <button

src/views/QuickActionBvcEndView.vue

@@ -69,10 +69,17 @@
     <div v-if="claimCountWithHidden > 0" class="border-b border-slate-300 pb-2">
       <span>
         {{ claimCountWithHiddenText }}
-        so if you expected but do not see details from someone then ask them to
+        If you don't see expected info above for someone, ask them to check that
-        check that their activity is visible to you on their Contacts
+        their activity is visible to you (
-        <font-awesome icon="users" class="text-slate-500" />
+        <font-awesome icon="arrow-up" class="fa-fw" />
-        page.
+        <font-awesome icon="eye" class="fa-fw" />
+        ) on
+        <a
+          class="text-blue-500 underline cursor-pointer"
+          @click="copyContactsLinkToClipboard"
+        >
+          this page </a
+        >.
       </span>
     </div>
     <div v-if="claimCountByUser > 0" class="border-b border-slate-300 pb-2">
@@ -120,10 +127,11 @@ import { DateTime } from "luxon";
 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 { NotificationIface, APP_SERVER } from "../constants/app";
 import { Contact } from "../db/tables/contacts";
 import {
   GenericCredWrapper,
@@ -148,6 +156,7 @@ import {
   NOTIFY_ALL_CONFIRMATIONS_ERROR,
   NOTIFY_GIVE_SEND_ERROR,
   NOTIFY_CLAIMS_SEND_ERROR,
+  NOTIFY_COPIED_TO_CLIPBOARD,
   createConfirmationSuccessMessage,
   createCombinedSuccessMessage,
 } from "@/constants/notifications";
@@ -195,8 +204,8 @@ export default class QuickActionBvcEndView extends Vue {
   get claimCountWithHiddenText() {
     if (this.claimCountWithHidden === 0) return "";
     return this.claimCountWithHidden === 1
-      ? "There is 1 other claim with hidden details,"
+      ? "There is 1 other claim with hidden details."
-      : `There are ${this.claimCountWithHidden} other claims with hidden details,`;
+      : `There are ${this.claimCountWithHidden} other claims with hidden details.`;
   }
 
   get claimCountByUserText() {
@@ -296,6 +305,25 @@ export default class QuickActionBvcEndView extends Vue {
     (this.$router as Router).push(route);
   }
 
+  copyContactsLinkToClipboard() {
+    const deepLinkUrl = `${APP_SERVER}/deep-link/did/${this.activeDid}`;
+    useClipboard()
+      .copy(deepLinkUrl)
+      .then(() => {
+        this.notify.success(
+          NOTIFY_COPIED_TO_CLIPBOARD.message("Your info link"),
+          TIMEOUTS.SHORT,
+        );
+      })
+      .catch((error) => {
+        logger.error("Failed to copy to clipboard:", error);
+        this.notify.error(
+          "Failed to copy link to clipboard. Please try again.",
+          TIMEOUTS.SHORT,
+        );
+      });
+  }
+
   async record() {
     try {
       if (this.claimsToConfirmSelected.length > 0) {