From 1bc58ae9280b51e726da044ebb0e4912462d8087 Mon Sep 17 00:00:00 2001 From: Trent Larson Date: Wed, 23 Oct 2024 08:27:16 -0600 Subject: [PATCH] add basic page-by-page onboarding help --- package-lock.json | 4 +- src/components/OnboardingDialog.vue | 230 ++++++++++++++++++++++++++++ src/db/tables/settings.ts | 1 + src/libs/util.ts | 8 + src/views/DiscoverView.vue | 11 ++ src/views/HelpOnboardingView.vue | 4 +- src/views/HelpView.vue | 20 +++ src/views/HomeView.vue | 21 ++- src/views/ProjectsView.vue | 17 +- 9 files changed, 304 insertions(+), 12 deletions(-) create mode 100644 src/components/OnboardingDialog.vue diff --git a/package-lock.json b/package-lock.json index 525d4e5d3..483822211 100644 --- a/package-lock.json +++ b/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", diff --git a/src/components/OnboardingDialog.vue b/src/components/OnboardingDialog.vue new file mode 100644 index 000000000..0928f169a --- /dev/null +++ b/src/components/OnboardingDialog.vue @@ -0,0 +1,230 @@ + + + + + + diff --git a/src/db/tables/settings.ts b/src/db/tables/settings.ts index 94bb3bb90..517a4d06b 100644 --- a/src/db/tables/settings.ts +++ b/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; diff --git a/src/libs/util.ts b/src/libs/util.ts index ba921fa29..07a3b15f0 100644 --- a/src/libs/util.ts +++ b/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"; diff --git a/src/views/DiscoverView.vue b/src/views/DiscoverView.vue index fd62d2869..64281a7af 100644 --- a/src/views/DiscoverView.vue +++ b/src/views/DiscoverView.vue @@ -9,6 +9,8 @@ Discover Projects + +

Next Steps

- Although not totally necessary, these are important to understand. + Although not totally necessary, backups are important to understand.
-

Backups

+

Without a backup, you can lose data.

Exporting backups (from the Account screen) diff --git a/src/views/HelpView.vue b/src/views/HelpView.vue index e1aa7beff..39c010d07 100644 --- a/src/views/HelpView.vue +++ b/src/views/HelpView.vue @@ -27,6 +27,14 @@ This app focuses on gifts & gratitude, using them to build cool things together with your network.

+

+ If you'd like to see the page-by-page help, + click here. +

+

What is the idea here?

We are building networks of people who want to grow good society from the ground up, using modern @@ -548,11 +556,13 @@ diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue index 32682b136..ec37ff157 100644 --- a/src/views/HomeView.vue +++ b/src/views/HomeView.vue @@ -8,6 +8,8 @@ {{ AppString.APP_NAME }} + +

Your Ideas

+ +
    @@ -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 { Contact } from "@/db/tables/contacts"; -import UserNameDialog from "@/components/UserNameDialog.vue"; +import { OnboardPage } from "@/libs/util"; @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.");