fix problem with "Affirm Delivery" on offer claim page, plus other look-and-feel tweaks

README.md

@@ -116,13 +116,11 @@ NODE_ENV=test-local npm run dev
 ```
 
 
-To run a single test with the screenshots, use the following:
+To run a single test like above with the screenshots, use the following:
 ```
-npx playwright test test-playwright/40-add-contact.spec.ts --trace on
+npx playwright test -c playwright.config-local.ts --trace on test-playwright/40-add-contact.spec.ts
 ```
 
-... with the `-c playwright.config-local.ts` to get the same results as above.
-
 
 
 ### Register new user on test server

src/views/ClaimView.vue

@@ -161,6 +161,7 @@
         <fa icon="hand-holding-heart" class="ml-2 text-white cursor-pointer" />
       </button>
     </div>
+    <GiftedDialog ref="customGiveDialog" />
 
     <div v-if="libsUtil.isGiveAction(veriClaim)">
       <div class="flex columns-3">
@@ -192,7 +193,6 @@
           </router-link>
         </span>
       </div>
-      <GiftedDialog ref="customGiveDialog" />
 
       <span v-if="totalConfirmers() === 0">Nobody has confirmed this.</span>
       <span v-else-if="totalConfirmers() === 1">
@@ -867,6 +867,7 @@ export default class ClaimView extends Vue {
         this.veriClaim as GenericCredWrapper<OfferVerifiableCredential>,
       ),
     };
+    console.log("giver & dialog", giver, this.$refs.customGiveDialog);
     (this.$refs.customGiveDialog as GiftedDialog).open(
       giver,
       undefined,

src/views/ContactsView.vue

@@ -88,7 +88,7 @@
           @click="toggleShowContactAmounts()"
         >
           {{
-            showGiveNumbers ? "Hide Given Hours, etc" : "Show Given Hours, etc"
+            showGiveNumbers ? "Hide Hours, Offer, etc" : "See Hours, Offer, etc"
           }}
         </button>
       </div>
@@ -418,7 +418,18 @@ export default class ContactsView extends Vue {
     // handle an invite JWT sent via URL
     const importedInviteJwt = (this.$route as RouteLocationNormalizedLoaded)
       .query["inviteJwt"] as string;
-    if (importedInviteJwt) {
+    if (importedInviteJwt === "") {
+      // this happens when a platform (usually iOS) doesn't include anything after the "=" in a shared link.
+      this.$notify(
+        {
+          group: "alert",
+          type: "warning",
+          title: "Blank Invite",
+          text: "The invite was not included. This can happen when your device cuts off the link, so you might try pasting the full link into a browser.",
+        },
+        7000,
+      );
+    } else if (importedInviteJwt) {
       // make sure user is created
       if (!this.activeDid) {
         this.activeDid = await generateSaveAndActivateIdentity();

src/views/GiftedDetailsView.vue

@@ -74,7 +74,7 @@
       </div>
     </div>
 
-    <div class="flex justify-center mt-4" data-testid="imagery">
+    <div class="flex justify-center mt-4" data-testId="imagery">
       <span v-if="imageUrl" class="flex justify-between">
         <a :href="imageUrl" target="_blank">
           <img :src="imageUrl" class="h-24 rounded-xl" />

src/views/InviteOneView.vue

@@ -16,6 +16,23 @@
     <!-- Heading -->
     <h1 class="text-4xl text-center font-light">Invitations</h1>
 
+    <ul class="ml-8 mt-4 list-outside list-disc w-5/6">
+      <li>
+        Note when sending
+        <span
+          v-if="!showAppleWarning"
+          class="text-blue-500 cursor-pointer"
+          @click="showAppleWarning = !showAppleWarning"
+        >
+          to Apple users...
+        </span>
+        <span v-else>
+          to Apple users: their links often fail because their device cuts off part of the
+          link. You might need to send it to them some other way, like in an email.
+        </span>
+      </li>
+    </ul>
+
     <!-- New Project -->
     <button
       v-if="isRegistered"
@@ -143,6 +160,7 @@ export default class InviteOneView extends Vue {
   apiServer: string = "";
   contactsRedeemed = {};
   isRegistered: boolean = false;
+  showAppleWarning = false;
 
   async mounted() {
     try {

src/views/NewActivityView.vue

@@ -16,7 +16,7 @@
     </div>
 
     <!-- Display a single row with the name of "New Offers To You" with a count. -->
-    <div class="flex justify-between">
+    <div class="flex justify-between" data-testId="showOffersToUser">
       <div>
         <span class="text-lg font-medium"
           >{{ newOffersToUser.length
@@ -28,13 +28,12 @@
         <fa
           v-if="newOffersToUser.length > 0"
           :icon="showOffersDetails ? 'chevron-down' : 'chevron-right'"
-          class="cursor-pointer ml-4 text-lg"
+          class="cursor-pointer ml-4 mr-4 text-lg"
           @click="expandOffersToUserAndMarkRead()"
-          data-testid="showOffersToUser"
         />
       </div>
       <router-link to="/recent-offers-to-user" class="text-blue-500">
-        See all
+        See&nbsp;all
       </router-link>
     </div>
 
@@ -75,7 +74,10 @@
     </div>
 
     <!-- Display a single row with the name of "New Offers To Your Projects" with a count. -->
-    <div class="mt-4 flex justify-between">
+    <div
+      class="mt-4 flex justify-between"
+      data-testId="showOffersToUserProjects"
+    >
       <div>
         <span class="text-lg font-medium"
           >{{ newOffersToUserProjects.length
@@ -90,13 +92,12 @@
           :icon="
             showOffersToUserProjectsDetails ? 'chevron-down' : 'chevron-right'
           "
-          class="cursor-pointer ml-4 text-lg"
+          class="cursor-pointer ml-4 mr-4 text-lg"
           @click="expandOffersToUserProjectsAndMarkRead()"
-          data-testid="showOffersToUserProjects"
         />
       </div>
       <router-link to="/recent-offers-to-user-projects" class="text-blue-500">
-        See all
+        See&nbsp;all
       </router-link>
     </div>
 

src/views/RecentOffersToUserProjectsView.vue

@@ -15,8 +15,27 @@
       </h1>
     </div>
 
+    <div v-if="newOffersToUserProjects.length === 0">
+      <p>Nobody has given any offers to your projects.</p>
+      <p class="mt-2">
+        Maybe there are already some projects you can help on the
+        <router-link to="/discover" class="text-blue-500">
+          Discover page <fa icon="search" />
+        </router-link>
+      </p>
+      <p class="mt-2">
+        You can announce more of your own on
+        <router-link to="/contacts" class="text-blue-500">
+          Your Ideas page <fa icon="hand" />
+        </router-link>
+      </p>
+    </div>
+
     <InfiniteScroll @reached-bottom="loadMoreOffersToUserProjects">
-      <ul id="listLatestActivity" class="border-t border-slate-300">
+      <ul
+        data-testId="listRecentOffersToUserProjects"
+        class="border-t border-slate-300"
+      >
         <li
           v-for="offer in newOffersToUserProjects"
           :key="offer.jwtId"

src/views/RecentOffersToUserView.vue

@@ -15,8 +15,22 @@
       </h1>
     </div>
 
+    <div v-if="newOffersToUser.length === 0">
+      <p>Nobody has given you an offer.</p>
+      <p class="mt-2">
+        You can start the cycle on the
+        <router-link to="/contacts" class="text-blue-500">
+          Contacts page <fa icon="users" />
+        </router-link>
+        with an "Offer" directly to someone. Hopefully you'll find a common
+        interest!
+      </p>
+    </div>
     <InfiniteScroll @reached-bottom="loadMoreOffersToUser">
-      <ul id="listLatestActivity" class="border-t border-slate-300">
+      <ul
+        data-testId="listRecentOffersToUser"
+        class="border-t border-slate-300"
+      >
         <li
           v-for="offer in newOffersToUser"
           :key="offer.jwtId"

src/views/TestView.vue

@@ -157,7 +157,7 @@
     <div class="mt-8">
       <h2 class="text-xl font-bold mb-4">Image Sharing</h2>
       Populates the "shared-photo" view as if they used "share_target".
-      <input type="file" data-testid="fileInput" @change="uploadFile" />
+      <input type="file" data-testId="fileInput" @change="uploadFile" />
       <router-link
         v-if="showFileNextStep()"
         :to="{
@@ -165,7 +165,7 @@
           query: { fileName },
         }"
         class="block w-full text-center text-md 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 mb-2 mt-2"
-        data-testid="fileUploadButton"
+        data-testId="fileUploadButton"
       >
         Go to Shared Page
       </router-link>

test-playwright/50-record-offer.spec.ts

@@ -9,7 +9,7 @@ test('Record an offer', async ({ page }) => {
   const updatedDescription = `Updated ${description}`;
   const randomNonZeroNumber = Math.floor(Math.random() * 998) + 1;
 
-  // Create new ID for default user
+  // Switch to user 0
   await importUser(page);
 
   // Select a project
@@ -77,7 +77,33 @@ test('Record an offer', async ({ page }) => {
   // click on the number of new offers to go to the list page
   await offerNumElem.click();
   await expect(page.getByText('New Offers To Your Projects', { exact: true })).toBeVisible();
-  await page.getByTestId('showOffersToUserProjects').click();
+  // get the icon child of the showOffersToUserProjects
+  await page.getByTestId('showOffersToUserProjects').locator('div > svg.fa-chevron-right').click();
   await expect(page.getByText(description)).toBeVisible();
+});
+
+test('Affirm delivery of an offer', async ({ page }) => {
+  // go to the home page and check that the offer is shown as new
+  await importUser(page);
+  await page.goto('./');
+  await page.getByTestId('closeOnboardingAndFinish').click();
+  const offerNumElem = page.getByTestId('newOffersToUserProjectsActivityNumber');
+  await expect(offerNumElem).toBeVisible();
 
+  // click on the number of new offers to go to the list page
+  await offerNumElem.click();
+  // get the link that comes after the showOffersToUserProjects and click it
+  await page.getByTestId('showOffersToUserProjects').locator('a').click();
+  // get the first item of the list and click on the icon with file-lines
+  const firstItem = page.getByTestId('listRecentOffersToUserProjects').locator('li').first();
+  await expect(firstItem).toBeVisible();
+  await firstItem.locator('svg.fa-file-lines').click();
+  await expect(page.getByText('Verifiable Claim Details', { exact: true })).toBeVisible();
+  // click on the 'Affirm Delivery' button
+  await page.getByRole('button', { name: 'Affirm Delivery' }).click();
+  // fill our offer info and submit
+  await page.getByPlaceholder('What was given').fill("Whatever the offer says");
+  await page.getByRole('spinbutton').fill("2");
+  await page.getByRole('button', { name: 'Sign & Send' }).click();
+  await expect(page.getByText('That gift was recorded.')).toBeVisible();
 });

test-playwright/60-new-activity.spec.ts

@@ -16,7 +16,7 @@ test('New offers for another user', async ({ page }) => {
   await expect(page.locator('div[role="alert"] button > svg.fa-xmark')).toBeHidden(); // ensure alert is gone
 
   // show buttons to make offers directly to people
-  await page.getByRole('button').filter({ hasText: /Show Given Hours/i }).click();
+  await page.getByRole('button').filter({ hasText: /See Hours/i }).click();
 
   // make an offer directly to user 1
   // Generate a random string of 3 characters, skipping the "0." at the beginning
@@ -50,7 +50,7 @@ test('New offers for another user', async ({ page }) => {
   await offerNumElem.click();
 
   await expect(page.getByText('New Offers To You', { exact: true })).toBeVisible();
-  await page.getByTestId('showOffersToUser').click();
+  await page.getByTestId('showOffersToUser').locator('div > svg.fa-chevron-right').click();
   // note that they show in reverse chronologicalorder
   await expect(page.getByText(`help of ${randomString2} from #000`)).toBeVisible();
   await expect(page.getByText(`help of ${randomString1} from #000`)).toBeVisible();
@@ -62,7 +62,8 @@ test('New offers for another user', async ({ page }) => {
   // now find the "Click to keep all above as new offers" after that list item and click it
   const liElem = page.locator('li').filter({ hasText: `help of ${randomString2} from #000` });
   await liElem.hover();
-  const keepAboveAsNew = liElem.locator('div').filter({ hasText: /keep all above/ });
+  const keepAboveAsNew = await liElem.locator('div').filter({ hasText: /keep all above/ });
+
   await keepAboveAsNew.click();
 
   // now see that only one offer is shown as new
@@ -71,7 +72,7 @@ test('New offers for another user', async ({ page }) => {
   await expect(offerNumElem).toHaveText('1');
   await offerNumElem.click();
   await expect(page.getByText('New Offer To You', { exact: true })).toBeVisible();
-  await page.getByTestId('showOffersToUser').click();
+  await page.getByTestId('showOffersToUser').locator('div > svg.fa-chevron-right').click();
 
   // now see that no offers are shown as new
   await page.goto('./');