From b32b64f5afb1d9247d0523815ed2657aa4dcf5dc Mon Sep 17 00:00:00 2001
From: Thomas Citharel <tcit@tcit.fr>
Date: Fri, 13 Nov 2020 13:39:52 +0100
Subject: [PATCH] Rework onboarding

Close #435

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
---
 js/src/common.scss                            |  13 +++
 .../components/Account/ProfileOnboarding.vue  |  70 ++++++++++++
 .../Settings/NotificationsOnboarding.vue      |  37 +++---
 .../Settings/SettingsOnboarding.vue           | 107 +++++++++++++-----
 js/src/i18n/en_US.json                        |  19 ++--
 js/src/i18n/fr_FR.json                        |  13 ++-
 js/src/mixins/onboarding.ts                   |  22 ++++
 js/src/router/index.ts                        |  14 +++
 js/src/router/name.ts                         |   1 +
 js/src/views/Account/Register.vue             |   2 +-
 js/src/views/Event/Edit.vue                   |   2 +-
 js/src/views/Home.vue                         |  12 +-
 js/src/views/Settings/AccountSettings.vue     |  14 ---
 js/src/views/User/SettingsOnboard.vue         |  82 +++++++++++---
 14 files changed, 308 insertions(+), 100 deletions(-)
 create mode 100644 js/src/components/Account/ProfileOnboarding.vue
 create mode 100644 js/src/mixins/onboarding.ts

diff --git a/js/src/common.scss b/js/src/common.scss
index cf93afa73..2805f2cb8 100644
--- a/js/src/common.scss
+++ b/js/src/common.scss
@@ -126,3 +126,16 @@ a.list-item {
   background-color: $list-item-hover-background-color;
   cursor: pointer;
 }
+
+.setting-title {
+  margin-top: 2rem;
+  margin-bottom: 1rem;
+
+  h2 {
+    display: inline;
+    background: $secondary;
+    padding: 2px 7.5px;
+    text-transform: uppercase;
+    font-size: 1.25rem;
+  }
+}
diff --git a/js/src/components/Account/ProfileOnboarding.vue b/js/src/components/Account/ProfileOnboarding.vue
new file mode 100644
index 000000000..5f59e751d
--- /dev/null
+++ b/js/src/components/Account/ProfileOnboarding.vue
@@ -0,0 +1,70 @@
+<template>
+  <div class="section container">
+    <div class="setting-title">
+      <h2>{{ $t("Profiles and federation") }}</h2>
+    </div>
+    <div>
+      <p class="content">
+        {{
+          $t(
+            "Mobilizon uses a system of profiles to compartiment your activities. You will be able to create as many profiles as you want."
+          )
+        }}
+      </p>
+      <hr />
+      <p class="content">
+        <span>
+          {{
+            $t(
+              "Mobilizon is a federated software, meaning you can interact - depending on your admin's federation settings - with content from other instances, such as joining groups or events that were created elsewhere."
+            )
+          }}
+        </span>
+        <span
+          v-html="
+            $t(
+              'This instance, <b>{instanceName} ({domain})</b>, hosts your profile, so remember its name.',
+              {
+                domain,
+                instanceName: config.name,
+              }
+            )
+          "
+        />
+      </p>
+      <hr />
+      <p class="content">
+        {{
+          $t(
+            "If you are being asked for your federated indentity, it's composed of your username and your instance. For instance, the federated identity for your first profile is:"
+          )
+        }}
+      </p>
+      <div class="has-text-centered">
+        <code>{{ `${currentActor.preferredUsername}@${domain}` }}</code>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { CURRENT_ACTOR_CLIENT } from "@/graphql/actor";
+import { CONFIG } from "@/graphql/config";
+import { IPerson } from "@/types/actor";
+import { IConfig } from "@/types/config.model";
+import { Component, Vue } from "vue-property-decorator";
+
+@Component({
+  apollo: {
+    config: CONFIG,
+    currentActor: CURRENT_ACTOR_CLIENT,
+  },
+})
+export default class ProfileOnboarding extends Vue {
+  config!: IConfig;
+
+  currentActor!: IPerson;
+
+  domain = window.location.hostname;
+}
+</script>
diff --git a/js/src/components/Settings/NotificationsOnboarding.vue b/js/src/components/Settings/NotificationsOnboarding.vue
index f9052db29..065fd14a8 100644
--- a/js/src/components/Settings/NotificationsOnboarding.vue
+++ b/js/src/components/Settings/NotificationsOnboarding.vue
@@ -25,41 +25,30 @@
         </b-checkbox>
       </div>
       <p>{{ $t("To activate more notifications, head over to the notification settings.") }}</p>
-      <div class="has-text-centered">
-        <router-link
-          :to="{ name: RouteName.NOTIFICATIONS }"
-          class="button is-primary is-outlined"
-          >{{ $t("Manage my notifications") }}</router-link
-        >
-      </div>
     </section>
   </div>
 </template>
 <script lang="ts">
-import { Component, Vue } from "vue-property-decorator";
+import { Component } from "vue-property-decorator";
 import { SnackbarProgrammatic as Snackbar } from "buefy";
-import { USER_SETTINGS, SET_USER_SETTINGS } from "../../graphql/user";
-import { ICurrentUser } from "../../types/current-user.model";
-import RouteName from "../../router/name";
-
-@Component({
-  apollo: {
-    loggedUser: USER_SETTINGS,
-  },
-})
-export default class NotificationsOnboarding extends Vue {
-  loggedUser!: ICurrentUser;
+import { mixins } from "vue-class-component";
+import Onboarding from "../../mixins/onboarding";
 
+@Component
+export default class NotificationsOnboarding extends mixins(Onboarding) {
   notificationOnDay = true;
 
-  RouteName = RouteName;
+  mounted(): void {
+    this.doUpdateSetting({
+      notificationOnDay: true,
+      notificationEachWeek: false,
+      notificationBeforeEvent: false,
+    });
+  }
 
   async updateSetting(variables: Record<string, unknown>): Promise<void> {
     try {
-      await this.$apollo.mutate<{ setUserSettings: string }>({
-        mutation: SET_USER_SETTINGS,
-        variables,
-      });
+      this.doUpdateSetting(variables);
     } catch (e) {
       Snackbar.open({ message: e.message, type: "is-danger", position: "is-bottom" });
     }
diff --git a/js/src/components/Settings/SettingsOnboarding.vue b/js/src/components/Settings/SettingsOnboarding.vue
index 02a8cc56d..2754e206a 100644
--- a/js/src/components/Settings/SettingsOnboarding.vue
+++ b/js/src/components/Settings/SettingsOnboarding.vue
@@ -4,51 +4,100 @@
       <div class="setting-title">
         <h2>{{ $t("Settings") }}</h2>
       </div>
-      <h3>{{ $t("Timezone") }}</h3>
-      <p>
-        {{
-          $t(
-            "We use your timezone to make sure you get notifications for an event at the correct time."
-          )
-        }}
-        {{
-          $t("Your timezone was detected as {timezone}.", {
-            timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
-          })
-        }}
-      </p>
-      <div class="has-text-centered">
-        <router-link :to="{ name: RouteName.PREFERENCES }" class="button is-primary is-outlined">{{
-          $t("Manage my settings")
-        }}</router-link>
+      <div>
+        <h3>{{ $t("Language") }}</h3>
+        <p>
+          {{
+            $t(
+              "This setting will be used to display the website and send you emails in the correct language."
+            )
+          }}
+        </p>
+        <div class="has-text-centered">
+          <b-select
+            :loading="!config || !loggedUser"
+            v-model="locale"
+            :placeholder="$t('Select a language')"
+          >
+            <option v-for="(language, lang) in langs" :value="lang" :key="lang">
+              {{ language }}
+            </option>
+          </b-select>
+        </div>
+      </div>
+
+      <div>
+        <h3>{{ $t("Timezone") }}</h3>
+        <p>
+          {{
+            $t(
+              "We use your timezone to make sure you get notifications for an event at the correct time."
+            )
+          }}
+          {{
+            $t("Your timezone was detected as {timezone}.", {
+              timezone,
+            })
+          }}
+          <b-message type="is-danger" v-if="!$apollo.loading && !supportedTimezone">
+            {{ $t("Your timezone {timezone} isn't supported.", { timezone }) }}
+          </b-message>
+        </p>
       </div>
     </section>
   </div>
 </template>
 <script lang="ts">
-import { Component, Vue } from "vue-property-decorator";
-import { USER_SETTINGS, SET_USER_SETTINGS } from "../../graphql/user";
-import { ICurrentUser } from "../../types/current-user.model";
-import RouteName from "../../router/name";
+import { Component, Watch } from "vue-property-decorator";
+import { TIMEZONES } from "@/graphql/config";
+import { IConfig } from "@/types/config.model";
+import { saveLocaleData } from "@/utils/auth";
+import { mixins } from "vue-class-component";
+import Onboarding from "@/mixins/onboarding";
+import { UPDATE_USER_LOCALE } from "../../graphql/user";
+import langs from "../../i18n/langs.json";
 
 @Component({
   apollo: {
-    loggedUser: USER_SETTINGS,
+    config: TIMEZONES,
   },
 })
-export default class SettingsOnboarding extends Vue {
-  loggedUser!: ICurrentUser;
+export default class SettingsOnboarding extends mixins(Onboarding) {
+  config!: IConfig;
 
   notificationOnDay = true;
 
-  RouteName = RouteName;
+  locale: string | null = this.$i18n.locale;
 
-  async updateSetting(variables: Record<string, unknown>): Promise<void> {
-    await this.$apollo.mutate<{ setUserSettings: string }>({
-      mutation: SET_USER_SETTINGS,
-      variables,
+  langs: Record<string, string> = langs;
+
+  timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+
+  mounted(): void {
+    this.doUpdateLocale(this.$i18n.locale);
+    this.doUpdateSetting({ timezone: this.timezone });
+  }
+
+  @Watch("locale")
+  async updateLocale(): Promise<void> {
+    if (this.locale) {
+      this.doUpdateLocale(this.locale);
+      saveLocaleData(this.locale);
+    }
+  }
+
+  private async doUpdateLocale(locale: string): Promise<void> {
+    await this.$apollo.mutate({
+      mutation: UPDATE_USER_LOCALE,
+      variables: {
+        locale,
+      },
     });
   }
+
+  get supportedTimezone(): boolean {
+    return this.config && this.config.timezones.includes(this.timezone);
+  }
 }
 </script>
 <style lang="scss" scoped>
diff --git a/js/src/i18n/en_US.json b/js/src/i18n/en_US.json
index 6ab34e908..67a625d7e 100644
--- a/js/src/i18n/en_US.json
+++ b/js/src/i18n/en_US.json
@@ -2,7 +2,7 @@
   "Please do not use it in any real way.": "Please do not use it in any real way.",
   "A user-friendly, emancipatory and ethical tool for gathering, organising, and mobilising.": "A user-friendly, emancipatory and ethical tool for gathering, organising, and mobilising.",
   "A validation email was sent to {email}": "A validation email was sent to {email}",
-  "Abandon edition": "Abandon edition",
+  "Abandon editing": "Abandon editing",
   "About Mobilizon": "About Mobilizon",
   "About this event": "About this event",
   "About this instance": "About this instance",
@@ -43,7 +43,6 @@
   "Cancel my participation…": "Cancel my participation…",
   "Cancel": "Cancel",
   "Cancelled: Won't happen": "Cancelled: Won't happen",
-  "Category": "Category",
   "Change my email": "Change my email",
   "Change my identity…": "Change my identity…",
   "Change my password": "Change my password",
@@ -430,8 +429,6 @@
   "Assigned to": "Assigned to",
   "Due on": "Due on",
   "Organizers": "Organizers",
-  "Hide the organizer": "Hide the organizer",
-  "Don't show @{organizer} as event host alongside @{group}": "Don't show @{organizer} as event host alongside @{group}",
   "You need to create the group before you create an event.": "You need to create a group before you create an event.",
   "This identity is not a member of any group.": "This identity is not a member of any group.",
   "(Masked)": "(Masked)",
@@ -450,7 +447,6 @@
   "Website": "Website",
   "Actor": "Actor",
   "Text": "Text",
-  "All group members and other eventual server admins will still be able to view this information.": "All group members and other eventual server admins will still be able to view this information.",
   "Upcoming events": "Upcoming events",
   "View all upcoming events": "View all upcoming events",
   "Resources": "Resources",
@@ -509,10 +505,8 @@
   "{moderator} deleted an event named \"{title}\"": "{moderator} deleted an event named \"{title}\"",
   "Register on this instance": "Register on this instance",
   "To activate more notifications, head over to the notification settings.": "To activate more notifications, head over to the notification settings.",
-  "Manage my notifications": "Manage my notifications",
   "We use your timezone to make sure you get notifications for an event at the correct time.": "We use your timezone to make sure you get notifications for an event at the correct time.",
   "Your timezone was detected as {timezone}.": "Your timezone was detected as {timezone}.",
-  "Manage my settings": "Manage my settings",
   "Let's define a few settings": "Let's define a few settings",
   "All good, let's continue!": "All good, let's continue!",
   "Login status": "Login status",
@@ -797,5 +791,14 @@
   "The only way for your group to get new members is if an admininistrator invites them.": "The only way for your group to get new members is if an admininistrator invites them.",
   "Redirecting to content…": "Redirecting to content…",
   "This URL is not supported": "This URL is not supported",
-  "This group is invite-only": "This group is invite-only"
+  "This group is invite-only": "This group is invite-only",
+  "This setting will be used to display the website and send you emails in the correct language.": "This setting will be used to display the website and send you emails in the correct language.",
+  "Previous": "Previous",
+  "Next": "Next",
+  "Your timezone {timezone} isn't supported.": "Your timezone {timezone} isn't supported.",
+  "Profiles and federation": "Profiles and federation",
+  "Mobilizon uses a system of profiles to compartiment your activities. You will be able to create as many profiles as you want.": "Mobilizon uses a system of profiles to compartiment your activities. You will be able to create as many profiles as you want.",
+  "Mobilizon is a federated software, meaning you can interact - depending on your admin's federation settings - with content from other instances, such as joining groups or events that were created elsewhere.": "Mobilizon is a federated software, meaning you can interact - depending on your admin federation settings - with content from other instances, such as joining groups or events that were created elsewhere.",
+  "This instance, <b>{instanceName} ({domain})</b>, hosts your profile, so remember its name.": "This instance, <b>{instanceName} ({domain})</b>, hosts your profile, so remember its name.",
+  "If you are being asked for your federated indentity, it's composed of your username and your instance. For instance, the federated identity for your first profile is:": "If you are being asked for your federated indentity, it's composed of your username and your instance. For instance, the federated identity for your first profile is:"
 }
diff --git a/js/src/i18n/fr_FR.json b/js/src/i18n/fr_FR.json
index cb573bb98..a38dadceb 100644
--- a/js/src/i18n/fr_FR.json
+++ b/js/src/i18n/fr_FR.json
@@ -24,7 +24,6 @@
   "A user-friendly, emancipatory and ethical tool for gathering, organising, and mobilising.": "Un outil convivial, émancipateur et éthique pour se rassembler, s'organiser et se mobiliser.",
   "A validation email was sent to {email}": "Un email de validation a été envoyé à {email}",
   "API": "API",
-  "Abandon edition": "Abandonner la modification",
   "About": "À propos",
   "About Mobilizon": "À propos de Mobilizon",
   "About this event": "À propos de cet évènement",
@@ -879,5 +878,15 @@
   "{profile} (by default)": "{profile} (par défault)",
   "{title} ({count} todos)": "{title} ({count} todos)",
   "{username} was invited to {group}": "{username} a été invité à {group}",
-  "© The OpenStreetMap Contributors": "© Les Contributeur⋅ices OpenStreetMap"
+  "© The OpenStreetMap Contributors": "© Les Contributeur⋅ices OpenStreetMap",
+  "This setting will be used to display the website and send you emails in the correct language.": "Ce paramètre sera utilisé pour l'affichage du site et pour vous envoyer des courriels dans la bonne langue.",
+  "Abandon editing": "Abandonner la modification",
+  "Previous": "Précédent",
+  "Next": "Suivant",
+  "Your timezone {timezone} isn't supported.": "Votre fuseau horaire {timezone} n'est pas supporté.",
+  "Profiles and federation": "Profils et fédération",
+  "Mobilizon uses a system of profiles to compartiment your activities. You will be able to create as many profiles as you want.": "Mobilizon utilise un système de profils pour compartimenter vos activités. Vous pourrez créer autant de profils que vous voulez.",
+  "Mobilizon is a federated software, meaning you can interact - depending on your admin's federation settings - with content from other instances, such as joining groups or events that were created elsewhere.": "Mobilizon est un logiciel fédéré, ce qui signifie que vous pouvez interagir - en fonction des paramètres de fédération de votre administrateur·ice - avec du contenu d'autres instances, comme par exemple rejoindre des groupes ou des événements ayant été créés ailleurs.",
+  "This instance, <b>{instanceName} ({domain})</b>, hosts your profile, so remember its name.": "Cette instance, <b>{instanceName} ({domain})</b>, héberge votre profil, donc notez bien son nom.",
+  "If you are being asked for your federated indentity, it's composed of your username and your instance. For instance, the federated identity for your first profile is:": "Si l'on vous demande votre identité fédérée, elle est composée de votre nom d'utilisateur·ice et de votre instance. Par exemple, l'identité fédérée de votre premier profil est :"
 }
diff --git a/js/src/mixins/onboarding.ts b/js/src/mixins/onboarding.ts
new file mode 100644
index 000000000..546e574ca
--- /dev/null
+++ b/js/src/mixins/onboarding.ts
@@ -0,0 +1,22 @@
+import { SET_USER_SETTINGS, USER_SETTINGS } from "@/graphql/user";
+import RouteName from "@/router/name";
+import { ICurrentUser } from "@/types/current-user.model";
+import { Component, Vue } from "vue-property-decorator";
+
+@Component({
+  apollo: {
+    loggedUser: USER_SETTINGS,
+  },
+})
+export default class Onboarding extends Vue {
+  loggedUser!: ICurrentUser;
+
+  RouteName = RouteName;
+
+  protected async doUpdateSetting(variables: Record<string, unknown>): Promise<void> {
+    await this.$apollo.mutate<{ setUserSettings: string }>({
+      mutation: SET_USER_SETTINGS,
+      variables,
+    });
+  }
+}
diff --git a/js/src/router/index.ts b/js/src/router/index.ts
index c17f3cc1d..05a2e4276 100644
--- a/js/src/router/index.ts
+++ b/js/src/router/index.ts
@@ -110,6 +110,20 @@ const router = new Router({
       component: () =>
         import(/* webpackChunkName: "ProviderValidation" */ "@/views/User/ProviderValidation.vue"),
     },
+    {
+      path: "/welcome/:step?",
+      name: RouteName.WELCOME_SCREEN,
+      component: () =>
+        import(/* webpackChunkName: "WelcomeScreen" */ "@/views/User/SettingsOnboard.vue"),
+      meta: { requiredAuth: true },
+      props: (route) => {
+        const step = Number.parseInt(route.params.step, 10);
+        if (Number.isNaN(step)) {
+          return 1;
+        }
+        return { step };
+      },
+    },
     {
       path: "/404",
       name: RouteName.PAGE_NOT_FOUND,
diff --git a/js/src/router/name.ts b/js/src/router/name.ts
index 2142d7944..37c3f8c6e 100644
--- a/js/src/router/name.ts
+++ b/js/src/router/name.ts
@@ -17,6 +17,7 @@ enum GlobalRouteName {
   GLOSSARY = "GLOSSARY",
   INTERACT = "INTERACT",
   RULES = "RULES",
+  WELCOME_SCREEN = "WELCOME_SCREEN",
 }
 
 // Hack to merge enums
diff --git a/js/src/views/Account/Register.vue b/js/src/views/Account/Register.vue
index 99fb4b2fc..926b190d0 100644
--- a/js/src/views/Account/Register.vue
+++ b/js/src/views/Account/Register.vue
@@ -64,7 +64,7 @@
         </form>
 
         <div v-if="validationSent && !userAlreadyActivated">
-          <b-message type="is-success" closable="false">
+          <b-message type="is-success" :closable="false">
             <h2 class="title">
               {{
                 $t("Your account is nearly ready, {username}", {
diff --git a/js/src/views/Event/Edit.vue b/js/src/views/Event/Edit.vue
index 6a4fa1bad..eb97c09eb 100644
--- a/js/src/views/Event/Edit.vue
+++ b/js/src/views/Event/Edit.vue
@@ -850,7 +850,7 @@ export default class EditEvent extends Vue {
     this.$buefy.dialog.confirm({
       title,
       message,
-      confirmText: this.$t("Abandon edition") as string,
+      confirmText: this.$t("Abandon editing") as string,
       cancelText: this.$t("Continue editing") as string,
       type: "is-warning",
       hasIcon: true,
diff --git a/js/src/views/Home.vue b/js/src/views/Home.vue
index 599ae6502..dd1a84e23 100644
--- a/js/src/views/Home.vue
+++ b/js/src/views/Home.vue
@@ -168,19 +168,18 @@
         <b-message v-else type="is-danger">{{ $t("No events found") }}</b-message>
       </section>
     </div>
-    <settings-onboard v-else-if="config && loggedUser && loggedUser.settings == undefined" />
   </div>
 </template>
 
 <script lang="ts">
-import { Component, Vue } from "vue-property-decorator";
+import { Component, Vue, Watch } from "vue-property-decorator";
 import { IParticipant, Participant, ParticipantRole } from "../types/participant.model";
 import { FETCH_EVENTS } from "../graphql/event";
 import EventListCard from "../components/Event/EventListCard.vue";
 import EventCard from "../components/Event/EventCard.vue";
 import { CURRENT_ACTOR_CLIENT, LOGGED_USER_PARTICIPATIONS } from "../graphql/actor";
 import { IPerson, Person } from "../types/actor";
-import { ICurrentUser } from "../types/current-user.model";
+import { ICurrentUser, IUser } from "../types/current-user.model";
 import { CURRENT_USER_CLIENT, USER_SETTINGS } from "../graphql/user";
 import RouteName from "../router/name";
 import { IEvent } from "../types/event.model";
@@ -386,6 +385,13 @@ export default class Home extends Vue {
   viewEvent(event: IEvent): void {
     this.$router.push({ name: RouteName.EVENT, params: { uuid: event.uuid } });
   }
+
+  @Watch("loggedUser")
+  detectEmptyUserSettings(loggedUser: IUser): void {
+    if (loggedUser && loggedUser.id && loggedUser.settings === null) {
+      this.$router.push({ name: RouteName.WELCOME_SCREEN, params: { step: "1" } });
+    }
+  }
 }
 </script>
 
diff --git a/js/src/views/Settings/AccountSettings.vue b/js/src/views/Settings/AccountSettings.vue
index 8e92b7167..0d37c6522 100644
--- a/js/src/views/Settings/AccountSettings.vue
+++ b/js/src/views/Settings/AccountSettings.vue
@@ -322,20 +322,6 @@ export default class AccountSettings extends Vue {
   }
 }
 </script>
-<style lang="scss">
-.setting-title {
-  margin-top: 2rem;
-  margin-bottom: 1rem;
-
-  h2 {
-    display: inline;
-    background: $secondary;
-    padding: 2px 7.5px;
-    text-transform: uppercase;
-    font-size: 1.25rem;
-  }
-}
-</style>
 
 <style lang="scss" scoped>
 .cancel-button {
diff --git a/js/src/views/User/SettingsOnboard.vue b/js/src/views/User/SettingsOnboard.vue
index 9e2119166..713cda757 100644
--- a/js/src/views/User/SettingsOnboard.vue
+++ b/js/src/views/User/SettingsOnboard.vue
@@ -1,48 +1,94 @@
 <template>
   <div class="section container">
     <h1 class="title">{{ $t("Let's define a few settings") }}</h1>
-    <settings-onboarding />
-    <notifications-onboarding />
-    <section class="has-text-centered section">
-      <b-button @click="refresh()" type="is-success" size="is-big">
+    <b-steps v-model="realActualStepIndex" :has-navigation="false">
+      <b-step-item step="1" :label="$t('Settings')">
+        <settings-onboarding />
+      </b-step-item>
+      <b-step-item step="2" :label="$t('Participation notifications')">
+        <notifications-onboarding />
+      </b-step-item>
+      <b-step-item step="3" :label="$t('Profiles and federation')">
+        <profile-onboarding />
+      </b-step-item>
+    </b-steps>
+    <section class="has-text-centered section buttons">
+      <b-button
+        outlined
+        :disabled="realActualStepIndex < 1"
+        tag="router-link"
+        :to="{
+          name: RouteName.WELCOME_SCREEN,
+          params: { step: actualStepIndex - 1 },
+        }"
+      >
+        {{ $t("Previous") }}
+      </b-button>
+      <b-button
+        outlined
+        type="is-success"
+        v-if="realActualStepIndex < 2"
+        tag="router-link"
+        :to="{
+          name: RouteName.WELCOME_SCREEN,
+          params: { step: actualStepIndex + 1 },
+        }"
+      >
+        {{ $t("Next") }}
+      </b-button>
+      <b-button
+        v-if="realActualStepIndex >= 2"
+        type="is-success"
+        size="is-big"
+        tag="router-link"
+        :to="{ name: RouteName.HOME }"
+      >
         {{ $t("All good, let's continue!") }}
       </b-button>
     </section>
   </div>
 </template>
 <script lang="ts">
-import { Component, Vue, Watch } from "vue-property-decorator";
-import { SET_USER_SETTINGS } from "../../graphql/user";
+import { Component, Prop, Vue, Watch } from "vue-property-decorator";
 import { TIMEZONES } from "../../graphql/config";
+import RouteName from "../../router/name";
 import { IConfig } from "../../types/config.model";
 
 @Component({
   components: {
     NotificationsOnboarding: () => import("../../components/Settings/NotificationsOnboarding.vue"),
     SettingsOnboarding: () => import("../../components/Settings/SettingsOnboarding.vue"),
+    ProfileOnboarding: () => import("../../components/Account/ProfileOnboarding.vue"),
   },
   apollo: {
     config: TIMEZONES,
   },
 })
 export default class SettingsOnboard extends Vue {
+  @Prop({ required: false, default: 1, type: Number }) step!: number;
+
   config!: IConfig;
 
-  @Watch("config")
-  async timezoneLoaded() {
-    const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
-    if (this.config && this.config.timezones.includes(timezone)) {
-      await this.$apollo.mutate<{ setUserSettings: string }>({
-        mutation: SET_USER_SETTINGS,
-        variables: {
-          timezone,
-        },
-      });
+  RouteName = RouteName;
+
+  actualStepIndex = this.step;
+
+  @Watch("step")
+  updateActualStep(): void {
+    if (this.step) {
+      this.actualStepIndex = this.step;
     }
   }
 
-  refresh() {
-    location.reload();
+  get realActualStepIndex(): number {
+    return this.actualStepIndex - 1;
   }
 }
 </script>
+<style scoped lang="scss">
+.section.container {
+  .has-text-centered.section.buttons {
+    justify-content: center;
+  }
+}
+</style>