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 relative">
        Welcome to Time Safari
        <br />
        - Showcasing Gratitude & Magnifing Time
        <div
          class="text-lg text-center leading-none absolute right-0 -top-1"
          @click="onClickClose(true)"
        >
          <fa icon="xmark" class="w-[1em]" />
        </div>
      </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 the
        <span class="bg-green-600 text-white rounded-full">
          <fa icon="plus" class="fa-fw" />
        </span>
        button 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 that others have
        recognized. Once someone registers you, you can log your appreciation,
        too.
      </p>

      <p class="mt-4">
        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 relative">
        Offer to Interesting Events & People
        <div
          class="text-lg text-center leading-none absolute right-0 -top-1"
          @click="onClickClose(true)"
        >
          <fa icon="xmark" class="w-[1em]" />
        </div>
      </h1>

      <p>
        Once you've seen things that others have given or done, you may find
        ways you want to contribute, too. It turns out others have proposed
        activities together, and this page is where you find projects.
      </p>

      <p class="mt-4">
        Search for a topic, or search around your neighborhod under "Nearby".
      </p>

      <p class="mt-4">
        When you find some that seem interesting, you can offer your help. You
        are welcome to make your offer conditional, for example if they get 2
        other people to help besides you.
      </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 relative">
        Fish for Others with Your Projects
        <div
          class="text-lg text-center leading-none absolute right-0 -top-1"
          @click="onClickClose(true)"
        >
          <fa icon="xmark" class="w-[1em]" />
        </div>
      </h1>

      <p class="relative">
        Now you can take a turn: click on the
        <span class="bg-green-600 text-white rounded-full">
          <fa icon="plus" class="fa-fw" />
        </span>
        button to 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>

      <p class="mt-4">
        By the way, one good way to get to know your neighbors and their
        interests is to offer time directly to them. You can do this on the
        contacts screen
        <fa icon="users" class="text-slate-500" />
        which is a great way to get to know a neighbor's interests.
      </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 {
  z-index: 40;
  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>