From e3a9df6185e0c4c50f68b05f633295d7a6541b3b Mon Sep 17 00:00:00 2001
From: Thomas Citharel
Date: Thu, 11 Jun 2020 10:58:23 +0200
Subject: [PATCH] Add onboarding settings
Signed-off-by: Thomas Citharel
---
js/src/App.vue | 6 +-
.../Settings/NotificationsOnboarding.vue | 68 +++++++++++++++++++
.../Settings/SettingsOnboarding.vue | 53 +++++++++++++++
js/src/i18n/en_US.json | 9 ++-
js/src/i18n/fr_FR.json | 9 ++-
js/src/types/current-user.model.ts | 6 +-
js/src/views/Home.vue | 18 +++--
js/src/views/Settings/Notifications.vue | 12 +++-
js/src/views/User/SettingsOnboard.vue | 48 +++++++++++++
9 files changed, 213 insertions(+), 16 deletions(-)
create mode 100644 js/src/components/Settings/NotificationsOnboarding.vue
create mode 100644 js/src/components/Settings/SettingsOnboarding.vue
create mode 100644 js/src/views/User/SettingsOnboard.vue
diff --git a/js/src/App.vue b/js/src/App.vue
index bd8452a80..4e772c08f 100644
--- a/js/src/App.vue
+++ b/js/src/App.vue
@@ -58,11 +58,10 @@ import Logo from "./components/Logo.vue";
import { initializeCurrentActor } from "./utils/auth";
import { CONFIG } from "./graphql/config";
import { IConfig } from "./types/config.model";
+import { ICurrentUser } from "./types/current-user.model";
@Component({
apollo: {
- currentUser: {
- query: CURRENT_USER_CLIENT,
- },
+ currentUser: CURRENT_USER_CLIENT,
config: CONFIG,
},
components: {
@@ -73,6 +72,7 @@ import { IConfig } from "./types/config.model";
})
export default class App extends Vue {
config!: IConfig;
+ currentUser!: ICurrentUser;
async created() {
if (await this.initializeCurrentUser()) {
diff --git a/js/src/components/Settings/NotificationsOnboarding.vue b/js/src/components/Settings/NotificationsOnboarding.vue
new file mode 100644
index 000000000..fd8b4153b
--- /dev/null
+++ b/js/src/components/Settings/NotificationsOnboarding.vue
@@ -0,0 +1,68 @@
+
+
+
+
+
{{ $t("Participation notifications") }}
+
+
+
{{
+ $t("We'll always send you emails to notify about important event updates")
+ }}
+
+ {{
+ $t(
+ "Like title or physical address update, start or end date change or event being confirmed or cancelled."
+ )
+ }}
+
+
+
+
+ {{ $t("Notification on the day of the event") }}
+
+ {{
+ $t("We'll use your timezone settings to send a recap of the morning of the event.")
+ }}
+
+
+
+ {{ $t("To activate more notifications, head over to the notification settings.") }}
+
+ {{ $t("Manage my notifications") }}
+
+
+
+
+
diff --git a/js/src/components/Settings/SettingsOnboarding.vue b/js/src/components/Settings/SettingsOnboarding.vue
new file mode 100644
index 000000000..5ed1c2b0d
--- /dev/null
+++ b/js/src/components/Settings/SettingsOnboarding.vue
@@ -0,0 +1,53 @@
+
+
+
+
+
{{ $t("Settings") }}
+
+
+
{{ $t("Timezone") }}
+ {{ $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 }) }}
+
+
+ {{
+ $t("Manage my settings")
+ }}
+
+
+
+
+
+
diff --git a/js/src/i18n/en_US.json b/js/src/i18n/en_US.json
index 0be4cb2c5..4d8be4669 100644
--- a/js/src/i18n/en_US.json
+++ b/js/src/i18n/en_US.json
@@ -600,5 +600,12 @@
"We asked professional designers to help us develop our vision for Mobilizon. We took time to study the {digital_habits} in order to understand the features they need to gather, organize, and mobilize.": "We asked professional designers to help us develop our vision for Mobilizon. We took time to study the {digital_habits} in order to understand the features they need to gather, organize, and mobilize.",
"So that, right from its conception, Mobilizon would {fit_needs_uses_people} who are going to use it.": "So that, right from its conception, Mobilizon would {fit_needs_uses_people} who are going to use it.",
"fit the needs and uses of the people": "fit the needs and uses of the people",
- "Mobilizon is under development, we will add new features to this site during regular updates, until the release of version 1 of the software in the fall of 2020.": "Mobilizon is under development, we will add new features to this site during regular updates, until the release of version 1 of the software in the fall of 2020."
+ "Mobilizon is under development, we will add new features to this site during regular updates, until the release of version 1 of the software in the fall of 2020.": "Mobilizon is under development, we will add new features to this site during regular updates, until the release of version 1 of the software in the fall of 2020.",
+ "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!"
}
diff --git a/js/src/i18n/fr_FR.json b/js/src/i18n/fr_FR.json
index 67d486e66..ad71613a7 100644
--- a/js/src/i18n/fr_FR.json
+++ b/js/src/i18n/fr_FR.json
@@ -619,5 +619,12 @@
"We asked professional designers to help us develop our vision for Mobilizon. We took time to study the {digital_habits} in order to understand the features they need to gather, organize, and mobilize.": "Nous avons demandé de l’aide à des professionnel·les du design pour concevoir ce que pourrait être Mobilizon. Nous avons pris le temps d’étudier {digital_habits} afin de comprendre les fonctionnalités dont ils et elles ont besoin pour se rassembler, s’organiser, se mobiliser.",
"So that, right from its conception, Mobilizon would {fit_needs_uses_people} who are going to use it.": "Afin que Mobilizon corresponde, dès sa conception, {fit_needs_uses_people} des personnes qui sont vouées à l’utiliser.",
"fit the needs and uses of the people": "aux besoins et usages",
- "Mobilizon is under development, we will add new features to this site during regular updates, until the release of version 1 of the software in the fall of 2020.": "Mobilizon est en cours de développement, nous ajouterons de nouvelles fonctionnalités à ce site lors de mises à jour régulières, jusqu'à la publication de la version 1 du logiciel à l'automne 2020."
+ "Mobilizon is under development, we will add new features to this site during regular updates, until the release of version 1 of the software in the fall of 2020.": "Mobilizon est en cours de développement, nous ajouterons de nouvelles fonctionnalités à ce site lors de mises à jour régulières, jusqu'à la publication de la version 1 du logiciel à l'automne 2020.",
+ "To activate more notifications, head over to the notification settings.": "Pour activer plus de notifications, rendez-vous dans vos paramètres de notification.",
+ "Manage my notifications": "Gérer mes notifications",
+ "We use your timezone to make sure you get notifications for an event at the correct time.": "Nous utilisons votre fuseau hoaire pour nous assurer que vous recevez les notifications pour un événement au bon moment.",
+ "Your timezone was detected as {timezone}.": "Votre fuseau horaire a été détecté en tant que {timezone}.",
+ "Manage my settings": "Gérer mes paramètres",
+ "Let's define a few settings": "Définissons quelques paramètres",
+ "All good, let's continue!": "C'est tout bon, continuons !"
}
diff --git a/js/src/types/current-user.model.ts b/js/src/types/current-user.model.ts
index d8e3473e6..ba4d03361 100644
--- a/js/src/types/current-user.model.ts
+++ b/js/src/types/current-user.model.ts
@@ -28,8 +28,8 @@ export enum INotificationPendingParticipationEnum {
export interface IUserSettings {
timezone: string;
- notificationOnDay: string;
- notificationEachWeek: string;
- notificationBeforeEvent: string;
+ notificationOnDay: boolean;
+ notificationEachWeek: boolean;
+ notificationBeforeEvent: boolean;
notificationPendingParticipation: INotificationPendingParticipationEnum;
}
diff --git a/js/src/views/Home.vue b/js/src/views/Home.vue
index 5bf342cc8..9528e7d7d 100644
--- a/js/src/views/Home.vue
+++ b/js/src/views/Home.vue
@@ -30,7 +30,7 @@
-
+
{{
$t("Welcome back {username}!", { username: currentActor.displayName() })
@@ -102,6 +102,7 @@
{{ $t("No events found") }}
+
@@ -114,7 +115,7 @@ 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 { CURRENT_USER_CLIENT } from "../graphql/user";
+import { CURRENT_USER_CLIENT, USER_SETTINGS } from "../graphql/user";
import RouteName from "../router/name";
import {
EventModel,
@@ -138,12 +139,12 @@ import Subtitle from "../components/Utils/Subtitle.vue";
query: CURRENT_ACTOR_CLIENT,
update: (data) => new Person(data.currentActor),
},
- currentUser: {
- query: CURRENT_USER_CLIENT,
- },
- config: {
- query: CONFIG,
+ currentUser: CURRENT_USER_CLIENT,
+ loggedUser: {
+ query: USER_SETTINGS,
+ fetchPolicy: "no-cache",
},
+ config: CONFIG,
currentUserParticipations: {
query: LOGGED_USER_PARTICIPATIONS,
variables() {
@@ -167,6 +168,7 @@ import Subtitle from "../components/Utils/Subtitle.vue";
DateComponent,
EventListCard,
EventCard,
+ "settings-onboard": () => import("./User/SettingsOnboard.vue"),
},
metaInfo() {
return {
@@ -189,6 +191,8 @@ export default class Home extends Vue {
currentUser!: ICurrentUser;
+ loggedUser!: ICurrentUser;
+
currentActor!: IPerson;
config!: IConfig;
diff --git a/js/src/views/Settings/Notifications.vue b/js/src/views/Settings/Notifications.vue
index 13710c0d2..d855bde25 100644
--- a/js/src/views/Settings/Notifications.vue
+++ b/js/src/views/Settings/Notifications.vue
@@ -24,7 +24,7 @@
$t("We'll use your timezone settings to send a recap of the morning of the event.")
}}
- {{
+ {{
$t("Your timezone is currently set to {timezone}.", {
timezone: loggedUser.settings.timezone,
})
@@ -115,6 +115,16 @@ export default class Notifications extends Vue {
};
}
+ @Watch("loggedUser")
+ setSettings() {
+ if (this.loggedUser && this.loggedUser.settings) {
+ this.notificationOnDay = this.loggedUser.settings.notificationOnDay;
+ this.notificationEachWeek = this.loggedUser.settings.notificationEachWeek;
+ this.notificationBeforeEvent = this.loggedUser.settings.notificationBeforeEvent;
+ this.notificationPendingParticipation = this.loggedUser.settings.notificationPendingParticipation;
+ }
+ }
+
async updateSetting(variables: object) {
await this.$apollo.mutate<{ setUserSettings: string }>({
mutation: SET_USER_SETTINGS,
diff --git a/js/src/views/User/SettingsOnboard.vue b/js/src/views/User/SettingsOnboard.vue
new file mode 100644
index 000000000..9e2119166
--- /dev/null
+++ b/js/src/views/User/SettingsOnboard.vue
@@ -0,0 +1,48 @@
+
+
+
{{ $t("Let's define a few settings") }}
+
+
+
+
+ {{ $t("All good, let's continue!") }}
+
+
+
+
+