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

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>