crowd-funder-for-time-pwa/src/components/OnboardingDialog.vue

<!-- 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"
            data-testId="closeOnboardingAndFinish"
            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
        they 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"
            data-testId="closeOnboardingAndFinish"
            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, 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: '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 catch anyone, 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 see your ideas.
      </p>

      <div class="mt-8">
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
          <button
            type="button"
            data-testId="closeOnboardingAndFinish"
            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, true)"
          >
            Let's go!
            <br />
            See & record gratitude.
          </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' })"
          >
            I want to read more Help.
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-facing-decorator";
import { Router } from "vue-router";

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, goHome?: boolean) {
    this.visible = false;
    if (done) {
      await updateAccountSettings(this.activeDid, {
        finishedOnboarding: true,
      });
      if (goHome) {
        (this.$router as Router).push({ name: "home" });
      }
    }
  }
}
</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>