add basic page-by-page onboarding help

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "TimeSafari",
-  "version": "0.3.29",
+  "version": "0.3.30-beta",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "TimeSafari",
-      "version": "0.3.29",
+      "version": "0.3.30-beta",
       "dependencies": {
         "@dicebear/collection": "^5.4.1",
         "@dicebear/core": "^5.4.1",

src/components/OnboardingDialog.vue

@@ -0,0 +1,230 @@
+<!-- similar to ContactNameDialog -->
+<template>
+  <div v-if="visible" class="dialog-overlay">
+    <div v-if="page === OnboardPage.Home" class="dialog">
+      <h1 class="text-xl font-bold text-center mb-4">
+        Welcome to Time Safari
+        <br />
+        Showcasing Gratitude & Magnifing Time
+      </h1>
+
+      <p v-if="isRegistered" class="mt-4">
+        You can now log things that you've received or witnessed:
+        <span v-if="numContacts > 0">
+          click on {{ firstContactName }}'s name or
+        </span>
+        click on "Unnamed" to express your appreciation for... whatever -- like
+        thanks for showing you all these fascinating stories of
+        <em>gratitude</em>.
+      </p>
+      <p v-else class="mt-4">
+        The feed underneath this pop-up shows the latest gifts recognized by
+        others. Once someone registers you, you'll be able to log your
+        appreciation, too.
+      </p>
+
+      <p class="mt-4 flex items-center">
+        The more you illuminate cool things people are doing, the more you
+        attract people to work together with you.
+      </p>
+
+      <p class="mt-4 flex items-center">
+        The
+        <fa
+          icon="house-chimney"
+          class="ml-1 mr-1 text-lg text-white bg-slate-400 px-2 py-2 rounded"
+        />
+        button below brings you back to this feed screen.
+      </p>
+
+      <div class="mt-8">
+        <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
+          <button
+            type="button"
+            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-2 py-3 rounded-md mb-2"
+            @click="onClickClose(true)"
+          >
+            That's enough help, thanks.
+          </button>
+          <button
+            type="button"
+            class="block w-full text-center text-md 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 mb-2"
+            @click="$router.push({ name: 'discover' })"
+          >
+            Show me more!
+          </button>
+        </div>
+      </div>
+
+      <p class="mt-4 flex items-center">
+        To see these instructions and more, click above on
+        <span
+          class="ml-1 mr-1 text-xs uppercase 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.5 py-1 rounded-md"
+        >
+          Help
+        </span>
+      </p>
+    </div>
+
+    <div v-if="page === OnboardPage.Discover" class="dialog">
+      <h1 class="text-xl font-bold text-center mb-4">
+        Find Interesting Events & Projects
+      </h1>
+
+      <p>
+        It turns out that people in groups have more to be grateful for and get
+        more accomplished, so here you'll find others who are doing interesting
+        things. Some may be in your neighborhood. Search for a topic, or search
+        around your location under "Nearby".
+      </p>
+
+      <p class="mt-4 flex items-center">
+        The
+        <fa
+          icon="magnifying-glass"
+          class="ml-1 mr-1 text-lg text-white bg-slate-400 px-2 py-2 rounded"
+        />
+        button below brings you to this discovery screen.
+      </p>
+
+      <div class="mt-8">
+        <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
+          <button
+            type="button"
+            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-2 py-3 rounded-md mb-2"
+            @click="onClickClose(true)"
+          >
+            No more help needed.
+          </button>
+          <button
+            type="button"
+            class="block w-full text-center text-md 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 mb-2"
+            @click="$router.push({ name: 'projects' })"
+          >
+            Show me even more.
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <div v-if="page === OnboardPage.Create" class="dialog">
+      <h1 class="text-xl font-bold text-center mb-4">
+        Fish for Others with Projects of Your Own
+      </h1>
+
+      <p>
+        Now you can take a turn: throw out projects of your own... anything
+        you'd like to see happen. If your first idea doesn't attract any fish,
+        try, try again... and let others know that this is a good place to find
+        help.
+      </p>
+
+      <p class="mt-4 flex items-center">
+        The
+        <fa
+          icon="hand"
+          class="ml-1 mr-1 text-lg text-white bg-slate-400 px-2 py-2 rounded"
+        />
+        button below brings you here to your ideas.
+      </p>
+
+      <div class="mt-8">
+        <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
+          <button
+            type="button"
+            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-2 py-3 rounded-md mb-2"
+            @click="onClickClose()"
+          >
+            Let's go!
+          </button>
+          <button
+            type="button"
+            class="block w-full text-center text-md 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 mb-2"
+            @click="$router.push({ name: 'help' })"
+          >
+            Take me to more Help.
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from "vue-facing-decorator";
+
+import { NotificationIface } from "@/constants/app";
+import {db, retrieveSettingsForActiveAccount, updateAccountSettings} from "@/db/index";
+import { OnboardPage } from "@/libs/util";
+
+@Component({
+  computed: {
+    OnboardPage() {
+      return OnboardPage;
+    },
+  },
+  components: { OnboardPage },
+})
+export default class OnboardingDialog extends Vue {
+  $notify!: (notification: NotificationIface, timeout?: number) => void;
+
+  activeDid = "";
+  firstContactName = null;
+  givenName = "";
+  isRegistered = false;
+  numContacts = 0;
+  page = OnboardPage.Home;
+  visible = false;
+
+  async open(page: OnboardPage) {
+    this.page = page;
+    const settings = await retrieveSettingsForActiveAccount();
+    this.activeDid = settings.activeDid || "";
+    this.isRegistered = !!settings.isRegistered;
+    const contacts = await db.contacts.toArray();
+    this.numContacts = contacts.length;
+    if (this.numContacts > 0) {
+      this.firstContactName = contacts[0].name;
+    }
+    this.visible = true;
+    if (this.page === OnboardPage.Create) {
+      // we'll assume that they've been through all the other pages
+      await updateAccountSettings(this.activeDid, {
+        finishedOnboarding: true,
+      });
+    }
+  }
+
+  async onClickClose(done?: boolean) {
+    this.visible = false;
+    if (done) {
+      await updateAccountSettings(this.activeDid, {
+        finishedOnboarding: true,
+      });
+    }
+  }
+}
+</script>
+
+<style>
+.dialog-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 1.5rem;
+}
+
+.dialog {
+  background-color: white;
+  padding: 1rem;
+  border-radius: 0.5rem;
+  width: 100%;
+  max-width: 500px;
+}
+</style>

src/db/tables/settings.ts

@@ -24,6 +24,7 @@ export type Settings = {
 
   filterFeedByNearby?: boolean; // filter by nearby
   filterFeedByVisible?: boolean; // filter by visible users ie. anyone not hidden
+  finishedOnboarding?: boolean; // the user has completed the onboarding process
 
   firstName?: string; // user's full name, may be null if unwanted for a particular account
   hideRegisterPromptOnNewContact?: boolean;

src/libs/util.ts

@@ -32,6 +32,14 @@ export interface GiverReceiverInputInfo {
   name?: string;
 }
 
+export enum OnboardPage {
+  Home = "HOME",
+  Discover = "DISCOVER",
+  Create = "CREATE",
+  Contact = "CONTACT",
+  Account = "ACCOUNT",
+}
+
 export const PRIVACY_MESSAGE =
   "The data you send will be visible to the world -- except: your IDs and the IDs of anyone you tag will stay private, only visible to them and others you explicitly allow.";
 export const SHARED_PHOTO_BASE64_KEY = "shared-photo-base64";

src/views/DiscoverView.vue

@@ -9,6 +9,8 @@
       Discover Projects
     </h1>
 
+    <OnboardingDialog ref="onboardingDialog" />
+
     <!-- Quick Search -->
     <div
       id="QuickSearch"
@@ -144,16 +146,19 @@ import { Router } from "vue-router";
 import QuickNav from "@/components/QuickNav.vue";
 import InfiniteScroll from "@/components/InfiniteScroll.vue";
 import ProjectIcon from "@/components/ProjectIcon.vue";
+import OnboardingDialog from "@/components/OnboardingDialog.vue";
 import TopMessage from "@/components/TopMessage.vue";
 import { NotificationIface } from "@/constants/app";
 import { accountsDB, db, retrieveSettingsForActiveAccount } from "@/db/index";
 import { Contact } from "@/db/tables/contacts";
 import { BoundingBox } from "@/db/tables/settings";
 import { didInfo, getHeaders, PlanData } from "@/libs/endorserServer";
+import { OnboardPage } from "@/libs/util";
 
 @Component({
   components: {
     InfiniteScroll,
+    OnboardingDialog,
     ProjectIcon,
     QuickNav,
     TopMessage,
@@ -192,6 +197,12 @@ export default class DiscoverView extends Vue {
 
     this.searchTerms = (this.$route as Router).query["searchText"] || "";
 
+    if (!settings.finishedOnboarding) {
+      (this.$refs.onboardingDialog as OnboardingDialog).open(
+        OnboardPage.Discover,
+      );
+    }
+
     if (this.searchBox) {
       await this.searchLocal();
     } else {

src/views/HelpOnboardingView.vue

@@ -29,10 +29,10 @@
     </p>
 
     <h1 class="mt-4 font-bold text-xl">Next Steps</h1>
-    Although not totally necessary, these are important to understand.
+    Although not totally necessary, backups are important to understand.
 
     <div class="ml-4">
-      <h1 class="font-bold text-xl">Backups</h1>
+      <h1 class="font-bold text-xl">Without a backup, you can lose data.</h1>
       <div>
         <p>
           Exporting backups (from the Account <fa icon="circle-user" /> screen)

src/views/HelpView.vue

@@ -27,6 +27,14 @@
         This app focuses on gifts & gratitude, using them to build cool things together with your network.
       </p>
 
+      <p class="ml-4">
+        If you'd like to see the page-by-page help,
+        <span
+          @click="unsetFinishedOnboarding()"
+          class="text-blue-500 cursor-pointer"
+        >click here</span>.
+      </p>
+
       <h2 class="text-xl font-semibold">What is the idea here?</h2>
       <p>
         We are building networks of people who want to grow good society from the ground up, using modern
@@ -548,11 +556,13 @@
 
 <script lang="ts">
 import { Component, Vue } from "vue-facing-decorator";
+import { Router } from "vue-router";
 import { useClipboard } from "@vueuse/core";
 
 import * as Package from "../../package.json";
 import QuickNav from "@/components/QuickNav.vue";
 import { NotificationIface } from "@/constants/app";
+import {retrieveSettingsForActiveAccount, updateAccountSettings} from "@/db/index";
 
 @Component({ components: { QuickNav } })
 export default class Help extends Vue {
@@ -575,5 +585,15 @@ export default class Help extends Vue {
       .copy(text)
       .then(() => setTimeout(fn, 2000));
   }
+
+  async unsetFinishedOnboarding() {
+    const settings = await retrieveSettingsForActiveAccount();
+    if (settings.activeDid) {
+      await updateAccountSettings(settings.activeDid || "", {
+        finishedOnboarding: false,
+      });
+    }
+    (this.$router as Router).push({ name: "home" });
+  }
 }
 </script>

src/views/HomeView.vue

@@ -8,6 +8,8 @@
       {{ AppString.APP_NAME }}
     </h1>
 
+    <OnboardingDialog ref="onboardingDialog" />
+
     <!-- prompt to install notifications with notificationsSupported, which we're making an advanced feature -->
     <div class="mb-8 mt-8">
       <div
@@ -326,6 +328,7 @@ import GiftedDialog from "@/components/GiftedDialog.vue";
 import GiftedPrompts from "@/components/GiftedPrompts.vue";
 import FeedFilters from "@/components/FeedFilters.vue";
 import InfiniteScroll from "@/components/InfiniteScroll.vue";
+import OnboardingDialog from "@/components/OnboardingDialog.vue";
 import QuickNav from "@/components/QuickNav.vue";
 import TopMessage from "@/components/TopMessage.vue";
 import UserNameDialog from "@/components/UserNameDialog.vue";
@@ -335,10 +338,10 @@ import {
   PASSKEYS_ENABLED,
 } from "@/constants/app";
 import {
-  db,
   accountsDB,
-  updateAccountSettings,
+  db,
   retrieveSettingsForActiveAccount,
+  updateAccountSettings,
 } from "@/db/index";
 import { Contact } from "@/db/tables/contacts";
 import {
@@ -358,6 +361,7 @@ import {
 import {
   generateSaveAndActivateIdentity,
   GiverReceiverInputInfo,
+  OnboardPage,
   registerSaveAndActivatePasskey,
 } from "@/libs/util";
 
@@ -384,12 +388,13 @@ interface GiveRecordWithContactInfo extends GiveSummaryRecord {
     },
   },
   components: {
+    EntityIcon,
+    FeedFilters,
     GiftedDialog,
     GiftedPrompts,
-    FeedFilters,
-    QuickNav,
-    EntityIcon,
     InfiniteScroll,
+    OnboardingDialog,
+    QuickNav,
     TopMessage,
     UserNameDialog,
   },
@@ -448,6 +453,12 @@ export default class HomeView extends Vue {
 
       this.isAnyFeedFilterOn = isAnyFeedFilterOn(settings);
 
+      if (!settings.finishedOnboarding) {
+        (this.$refs.onboardingDialog as OnboardingDialog).open(
+          OnboardPage.Home,
+        );
+      }
+
       // someone may have have registered after sharing contact info, so recheck
       if (!this.isRegistered && this.activeDid) {
         try {

src/views/ProjectsView.vue

@@ -6,6 +6,8 @@
     <!-- Heading -->
     <h1 id="ViewHeading" class="text-4xl text-center font-light">Your Ideas</h1>
 
+    <OnboardingDialog ref="onboardingDialog" />
+
     <!-- Result Tabs -->
     <div class="text-center text-slate-500 border-b border-slate-300 mt-8">
       <ul class="flex flex-wrap justify-center gap-4 -mb-px">
@@ -261,10 +263,14 @@ import { Router } from "vue-router";
 import { NotificationIface } from "@/constants/app";
 import { accountsDB, db, retrieveSettingsForActiveAccount } from "@/db/index";
 import * as libsUtil from "@/libs/util";
+import EntityIcon from "@/components/EntityIcon.vue";
 import InfiniteScroll from "@/components/InfiniteScroll.vue";
 import QuickNav from "@/components/QuickNav.vue";
+import OnboardingDialog from "@/components/OnboardingDialog.vue";
 import ProjectIcon from "@/components/ProjectIcon.vue";
 import TopMessage from "@/components/TopMessage.vue";
+import UserNameDialog from "@/components/UserNameDialog.vue";
+import { Contact } from "@/db/tables/contacts";
 import {
   didInfo,
   getHeaders,
@@ -272,15 +278,14 @@ import {
   OfferSummaryRecord,
   PlanData,
 } from "@/libs/endorserServer";
-import EntityIcon from "@/components/EntityIcon.vue";
+import { OnboardPage } from "@/libs/util";
-import { Contact } from "@/db/tables/contacts";
-import UserNameDialog from "@/components/UserNameDialog.vue";
 
 @Component({
   components: {
     EntityIcon,
     InfiniteScroll,
     QuickNav,
+    OnboardingDialog,
     ProjectIcon,
     TopMessage,
     UserNameDialog,
@@ -325,6 +330,12 @@ export default class ProjectsView extends Vue {
       const allAccounts = await accountsDB.accounts.toArray();
       this.allMyDids = allAccounts.map((acc) => acc.did);
 
+      if (!settings.finishedOnboarding) {
+        (this.$refs.onboardingDialog as OnboardingDialog).open(
+          OnboardPage.Create,
+        );
+      }
+
       if (allAccounts.length === 0) {
         console.error("No accounts found.");
         this.errNote("You need an identifier to load your projects.");