From 9861a1388e8d9064ccfc4ecac9d4997db4e4ca07 Mon Sep 17 00:00:00 2001
From: Trent Larson <trent@trentlarson.com>
Date: Sat, 30 Nov 2024 17:27:16 -0700
Subject: [PATCH] allow to deselect the giver & refactor dialog to group giver
 vs recipient

---
 src/views/GiftedDetailsView.vue               | 262 ++++++++++++------
 src/views/ProjectViewView.vue                 |   6 +-
 .../35-record-gift-from-image-share.spec.ts   |   4 +
 3 files changed, 178 insertions(+), 94 deletions(-)

diff --git a/src/views/GiftedDetailsView.vue b/src/views/GiftedDetailsView.vue
index 01713b7..6c2a98e 100644
--- a/src/views/GiftedDetailsView.vue
+++ b/src/views/GiftedDetailsView.vue
@@ -95,73 +95,127 @@
     </div>
     <ImageMethodDialog ref="imageDialog" />
 
-    <div class="h-7 mt-4 flex">
-      <input
-        v-if="providerProjectId && !providedByGiver"
-        type="checkbox"
-        class="h-6 w-6 mr-2"
-        v-model="providedByProject"
-      />
-      <fa
-        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="notifyUserOfProvidingProject()"
-      />
-      <label class="text-sm mt-1">
-        {{
-          providerProjectId
-            ? "This was provided by " + providerProjectName
-            : "This was not provided by a project"
-        }}
-      </label>
-    </div>
+    <div class="mt-4 flex justify-between gap-2">
+      <!-- First Column for Giver -->
+      <div class="flex-grow border border-slate-400 p-2 rounded-md">
+        <div class="flex">
+          <input
+            v-if="giverDid && !providedByProject"
+            type="checkbox"
+            class="h-6 w-6 mr-2"
+            v-model="providedByGiver"
+          />
+          <fa
+            v-else
+            icon="square"
+            class="mr-2 bg-white text-white h-5 w-5 px-0.5 py-0.5 rounded-sm"
+          />
+          <label class="text-sm mt-1">
+            {{
+              giverDid
+                ? "This was provided by " + giverName
+                : "No individual gave"
+            }}
+          </label>
+          <fa
+            v-if="!giverDid || providedByProject"
+            icon="info-circle"
+            class="-mt-1 bg-white text-slate-500 h-5 w-5 px-0.5 py-0.5 rounded-sm"
+            @click="notifyUserOfGiver()"
+          />
+        </div>
+
+        <div class="flex">
+          <input
+            v-if="providerProjectId && !providedByGiver"
+            type="checkbox"
+            class="h-6 w-6 mr-2"
+            v-model="providedByProject"
+          />
+          <fa
+            v-else
+            icon="square"
+            class="mr-2 bg-white text-white h-5 w-5 px-0.5 py-0.5 rounded-sm"
+          />
+          <label class="text-sm mt-1">
+            {{
+              providerProjectId
+                ? "This was provided by " + providerProjectName
+                : "This was not provided by a project"
+            }}
+          </label>
+          <fa
+            v-if="!providerProjectId || providedByGiver"
+            icon="info-circle"
+            class="-mt-1 bg-white text-slate-500 h-5 w-5 px-0.5 py-0.5 rounded-sm"
+            @click="notifyUserOfProvidingProject()"
+          />
+        </div>
+      </div>
 
-    <div class="h-7 mt-4 flex">
-      <input
-        v-if="fulfillsProjectId && !givenToRecipient"
-        type="checkbox"
-        class="h-6 w-6 mr-2"
-        v-model="givenToProject"
-      />
-      <fa
-        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="notifyUserFulfillsProject()"
-      />
-      <label class="text-sm mt-1">
-        {{
-          fulfillsProjectId
-            ? "This was given to " + fulfillsProjectName
-            : "No recipient project was chosen"
-        }}
-      </label>
-    </div>
+      <div class="flex-shrink flex justify-center items-center">
+        <fa icon="arrow-right" class="fa-fw h-7" />
+      </div>
 
-    <div class="h-7 mt-4 flex">
-      <input
-        v-if="recipientDid && !givenToProject"
-        type="checkbox"
-        class="h-6 w-6 mr-2"
-        v-model="givenToRecipient"
-      />
-      <fa
-        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 was given to " + recipientName
-            : "No recipient was chosen."
-        }}
-      </label>
+      <!-- Third Column for Recipient -->
+      <div class="flex-grow border border-slate-400 p-2 rounded-md">
+        <div class="flex">
+          <input
+            v-if="recipientDid && !givenToProject"
+            type="checkbox"
+            class="h-6 w-6 mr-2"
+            v-model="givenToRecipient"
+          />
+          <fa
+            v-else
+            icon="square"
+            class="mr-2 bg-white text-white h-5 w-5 px-0.5 py-0.5 rounded-sm"
+          />
+          <label class="text-sm mt-1">
+            {{
+              recipientDid
+                ? "This was given to " + recipientName
+                : "No individual benefitted"
+            }}
+          </label>
+          <fa
+            v-if="!recipientDid || givenToProject"
+            icon="info-circle"
+            class="-mt-1 bg-white text-slate-500 h-5 w-5 px-0.5 py-0.5 rounded-sm"
+            @click="notifyUserOfRecipient()"
+          />
+        </div>
+
+        <div class="flex">
+          <input
+            v-if="fulfillsProjectId && !givenToRecipient"
+            type="checkbox"
+            class="h-6 w-6 mr-2"
+            v-model="givenToProject"
+          />
+          <fa
+            v-else
+            icon="square"
+            class="mr-2 bg-white text-white h-5 w-5 px-0.5 py-0.5 rounded-sm"
+          />
+          <label class="text-sm mt-1">
+            {{
+              fulfillsProjectId
+                ? "This was given to " + fulfillsProjectName
+                : "No project benefitted"
+            }}
+          </label>
+          <fa
+            v-if="!fulfillsProjectId || givenToRecipient"
+            icon="info-circle"
+            class="-mt-1 bg-white text-slate-500 h-5 w-5 px-0.5 py-0.5 rounded-sm"
+            @click="notifyUserFulfillsProject()"
+          />
+        </div>
+      </div>
     </div>
 
-    <div class="mt-4 flex">
+    <div class="mt-8 flex">
       <input type="checkbox" class="h-6 w-6 mr-2" v-model="isTrade" />
       <label class="text-sm mt-1">This was a trade (not a gift)</label>
     </div>
@@ -176,7 +230,7 @@
         }"
         class="text-blue-500"
       >
-        Edit & Submit Raw
+        Edit Raw Data
       </router-link>
     </div>
 
@@ -247,7 +301,7 @@ export default class GiftedDetails extends Vue {
   fulfillsProjectName = "a project";
   givenToProject = false; // basically static, based on input; if we allow changing then let's fix things (see below)
   givenToRecipient = false; // basically static, based on input; if we allow changing then let's fix things (see below)
-  giverDid: string | undefined;
+  giverDid = "";
   giverName = "";
   hideBackButton = false;
   imageUrl = "";
@@ -602,77 +656,101 @@ export default class GiftedDetails extends Vue {
     await this.recordGive();
   }
 
-  notifyUserOfProvidingProject() {
-    // we're here because they clicked and either there is no provider project or there is a giver chosen
-    if (!this.providerProjectId) {
+  notifyUserOfGiver() {
+    if (!this.giverDid) {
       this.$notify(
         {
           group: "alert",
           type: "warning",
-          title: "Error",
-          text: "To select a project as a provider, you must open this page through a project.",
+          title: "Go To The Contacts Page",
+          text: "To assign a giver, you must open this page from a contact.",
         },
         3000,
       );
     } else {
-      // no providing project was chosen
       this.$notify(
         {
           group: "alert",
           type: "warning",
-          title: "Error",
-          text: "You cannot select both a giving project and person.",
+          title: "Unavailable",
+          text: "You cannot assign both a giver and a project.",
         },
         3000,
       );
     }
   }
 
-  notifyUserFulfillsProject() {
-    // we're here because they clicked and either there is no fulfills project or there is a recipient chosen
-    if (!this.fulfillsProjectId) {
+  notifyUserOfRecipient() {
+    if (!this.recipientDid) {
       this.$notify(
         {
           group: "alert",
           type: "warning",
-          title: "Error",
-          text: "To assign to a project, you must open this page through a project.",
+          title: "Go To The Contacts Page",
+          text: "To assign to a recipient, you must open this page from a contact.",
         },
         3000,
       );
     } else {
-      // no fulfills project was chosen
+      // must be because givenToProject is true
       this.$notify(
         {
           group: "alert",
           type: "warning",
-          title: "Error",
-          text: "You cannot assign both to a project and to a recipient.",
+          title: "Unavailable",
+          text: "You cannot assign both to a recipient and to a project.",
         },
         3000,
       );
     }
   }
 
-  notifyUserOfRecipient() {
-    if (!this.recipientDid) {
+  notifyUserOfProvidingProject() {
+    // we're here because they clicked and either there is no provider project or there is a giver chosen
+    if (!this.providerProjectId) {
       this.$notify(
         {
           group: "alert",
           type: "warning",
-          title: "Error",
-          text: "To assign to a recipient, you must open this page from a contact.",
+          title: "Go To The Project Page",
+          text: "To select a project as a provider, you must open this page through a project.",
         },
         3000,
       );
     } else {
-      // must be because givenToProject is true
+      // no providing project was chosen
       this.$notify(
         {
           group: "alert",
           type: "warning",
-          title: "Error",
-          text: "You cannot assign both to a recipient and to a project.",
+          title: "Unavailable",
+          text: "You cannot select both a giving project and person.",
+        },
+        3000,
+      );
+    }
+  }
+
+  notifyUserFulfillsProject() {
+    // we're here because they clicked and either there is no fulfills project or there is a recipient chosen
+    if (!this.fulfillsProjectId) {
+      this.$notify(
+        {
+          group: "alert",
+          type: "warning",
+          title: "Go To The Project Page",
+          text: "To assign to a project, you must open this page through a project.",
+        },
+        3000,
+      );
+    } else {
+      // no fulfills project was chosen
+      this.$notify(
+        {
+          group: "alert",
+          type: "warning",
+          title: "Unavailable",
+          text: "You cannot assign both to a project and to a recipient.",
         },
         3000,
       );
@@ -688,6 +766,7 @@ export default class GiftedDetails extends Vue {
    */
   public async recordGive() {
     try {
+      const giverDid = this.providedByGiver ? this.giverDid : undefined;
       const recipientDid = this.givenToRecipient
         ? this.recipientDid
         : undefined;
@@ -702,7 +781,7 @@ export default class GiftedDetails extends Vue {
           this.apiServer,
           this.prevCredToEdit,
           this.activeDid,
-          this.giverDid,
+          giverDid,
           recipientDid,
           this.description,
           parseFloat(this.amountInput),
@@ -718,7 +797,7 @@ export default class GiftedDetails extends Vue {
           this.axios,
           this.apiServer,
           this.activeDid,
-          this.giverDid,
+          giverDid,
           recipientDid,
           this.description,
           parseFloat(this.amountInput),
@@ -783,13 +862,14 @@ export default class GiftedDetails extends Vue {
   }
 
   constructGiveParam() {
+    const giverDid = this.providedByGiver ? this.giverDid : undefined;
     const recipientDid = this.givenToRecipient ? this.recipientDid : undefined;
     const fulfillsProjectId = this.givenToProject
       ? this.fulfillsProjectId
       : undefined;
     const giveClaim = hydrateGive(
       this.prevCredToEdit?.claim as GiveVerifiableCredential,
-      this.giverDid,
+      giverDid,
       recipientDid,
       this.description,
       parseFloat(this.amountInput),
diff --git a/src/views/ProjectViewView.vue b/src/views/ProjectViewView.vue
index b5f7566..b44bba2 100644
--- a/src/views/ProjectViewView.vue
+++ b/src/views/ProjectViewView.vue
@@ -224,7 +224,7 @@
             <button
               data-testId="offerButton"
               @click="openOfferDialog()"
-              class="block w-full bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white rounded-md"
+              class="block w-full 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-1 rounded-md"
             >
               Offer to this (maybe with conditions)...
             </button>
@@ -305,7 +305,7 @@
           <div class="text-center">
             <button
               @click="openGiftDialogToProject()"
-              class="block w-full bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white rounded-md"
+              class="block w-full 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-1rounded-md"
             >
               Given To This...
             </button>
@@ -392,7 +392,7 @@
           <div class="text-center">
             <button
               @click="openGiftDialogFromProject()"
-              class="block w-full bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white rounded-md"
+              class="block w-full 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-1 rounded-md"
             >
               Given By This...
             </button>
diff --git a/test-playwright/35-record-gift-from-image-share.spec.ts b/test-playwright/35-record-gift-from-image-share.spec.ts
index 66122ae..8e9d808 100644
--- a/test-playwright/35-record-gift-from-image-share.spec.ts
+++ b/test-playwright/35-record-gift-from-image-share.spec.ts
@@ -27,6 +27,10 @@ test('Record item given from image-share', async ({ page }) => {
   await page.getByPlaceholder('What was received').fill(finalTitle);
   await page.getByRole('spinbutton').fill('2');
   await page.getByRole('button', { name: 'Sign & Send' }).click();
+
+  // we end up on a page with the onboarding info
+  await page.getByTestId('closeOnboardingAndFinish').click();
+
   await expect(page.getByText('That gift was recorded.')).toBeVisible();
   await page.locator('div[role="alert"] button > svg.fa-xmark').click(); // dismiss info alert