feat(welcome-ack): present "welcome" header to new users

Author: 4drianMatei

backend/resources/db-migration/mongodb/1619452576052_ddl-add-feed-toggle.js renamed to backend/resources/db-migration/mongodb/1619452576052_ddl-add-feed-toggle-DONE.js

@@ -0,0 +1,11 @@
+db.users.update(
+  { "welcomeAck": { "$exists": false } },
+  { "$set": { "welcomeAck": true } },
+  { "multi": true }
+);
+
+//or the equivalent
+db.users.updateMany(
+  { "welcomeAck": { "$exists": false } },
+  { "$set": { "welcomeAck": true } }
+);

backend/resources/db-migration/mongodb/1625376537455_ddl-welcomeAck-DONE.js

@@ -45,6 +45,7 @@ const userSchema = new Schema({
     followers: {type: [String], select: false},
     showAllPublicInFeed: Boolean,
     enableLocalStorage: Boolean,
+    welcomeAck: Boolean,
     __v: {type: Number, select: false}
   },
   {

backend/src/model/user.js

@@ -67,6 +67,17 @@ let updateUserDataFeedToggle = async function (showAllPublicInFeed, userId) {
   return updatedUserData;
 }
 
+let updateUserDataWelcomeAck = async function ( userId) {
+  const updatedUserData = await User.findOneAndUpdate(
+    {userId: userId},
+    {
+      $set: {welcomeAck: true}
+    }
+  );
+
+  return updatedUserData;
+}
+
 let updateLocalStorageOption = async function (enableLocalStorage, userId) {
   const updatedUserData = await User.findOneAndUpdate(
     {userId: userId},
@@ -627,6 +638,7 @@ module.exports = {
   updateUserDataHistoryReadLaterPinned: updateUserDataHistoryReadLaterPinned,
   updateUserDataFeedToggle: updateUserDataFeedToggle,
   updateLocalStorageOption: updateLocalStorageOption,
+  updateUserDataWelcomeAck: updateUserDataWelcomeAck,
   createUserData: createUserData,
   getUserData: getUserData,
   deleteUserData: deleteUserData,

backend/src/routes/users/user-data.service.js

@@ -1,8 +1,6 @@
 const express = require('express');
 const usersRouter = express.Router();
 
-const cheerio = require('cheerio');
-
 const personalBookmarksRouter = require('./bookmarks/personal-bookmarks.router');
 const personalCodeletsRouter = require('./snippets/personal-snippets.router');
 
@@ -255,6 +253,16 @@ usersRouter.patch('/:userId/local-storage', keycloak.protect(), async (request,
   return response.status(HttpStatus.OK).send({localStorageOptionUpdated: true});
 });
 
+/*
+* Update welcomeAck flag
+*/
+usersRouter.patch('/:userId/welcome-acknowledge', keycloak.protect(), async (request, response) => {
+  userIdTokenValidator.validateUserId(request);
+  await UserDataService.updateUserDataWelcomeAck(request.params.userId);
+
+  return response.status(HttpStatus.OK).send({welcomeAck: true});
+});
+
 /*
 * DELETE user
 */

backend/src/routes/users/user.router.js

@@ -80,20 +80,19 @@
     <div class="container">
 
       <div class="main-body">
-        <div *ngIf="showAcknowledgeMigrationHeader" class="alert alert-warning header-notification-wrapper shadow-sm">
+        <div *ngIf="(userData$ | async) && !(userData$ | async).welcomeAck" class="alert alert-warning shadow-sm">
           <div>
-            <i class="fas fa-exclamation-circle fa-lg mr-1"></i> <b>Bookmarks.dev</b> has rebranded to <b>Codever</b>
-          </div>
-          <div>
-            <button type="button" class="ml-2 btn btn-primary btn-sm mr-2"
-                    (click)="acknowledgeCodeverRebranding('cool')">
-              Cool <i class="fas fa-thumbs-up"></i>
-            </button>
-            <button type="button" class="ml-2 btn btn-primary btn-sm mr-2"
-                    (click)="acknowledgeCodeverRebranding('ook')">
-              Ok <i class="fas fa-check-circle"></i>
-            </button>
+            <h4>Welcome to Codever 🙏 !!!</h4>
+            <ul style="list-style-type: none; margin-left: -1.5rem">
+              <li>👉 &nbsp;Go to <a [routerLink]="['/dashboard']"><i class="fas fa-tachometer-alt"></i> My Dashboard</a>
+                where you can <strong>import</strong> your browser bookmarks, view your latest activity and your used
+              tags or searches</li>
+              <li class="mt-1">👉 &nbsp;See our <a [routerLink]="['/howto']"><i class="fas fa-info-circle"></i> HowTo Guides</a> and use <a [routerLink]="['/extensions']">one of our many extensions <i class="fas fa-wrench"></i></a> to help you easily manage your bookmarks and snippets
+                from your favorite browser or IDE </li>
+            </ul>
           </div>
+
+          <button class="ml-2 btn btn-primary btn-sm" (click)="acknowledgeWelcomeMessage()">Got it <i class="fas fa-check-circle"></i></button>
         </div>
         <app-loader></app-loader>
         <router-outlet></router-outlet>

frontend/src/app/app.component.html

@@ -30,6 +30,7 @@ export class AppComponent implements OnInit {
   userIsLoggedIn = false;
   userId: string;
 
+  userData$: Observable<UserData>;
   showAcknowledgeMigrationHeader = false;
   latestSearches$: Observable<Search[]>;
 
@@ -59,7 +60,8 @@ export class AppComponent implements OnInit {
         this.userInfoStore.getUserInfo$().subscribe(userInfo => {
           this.userId = userInfo.sub;
         });
-        this.latestSearches$ = this.userDataStore.getUserData$().pipe(
+        this.userData$ = this.userDataStore.getUserData$();
+        this.latestSearches$ = this.userData$.pipe(
           map(userData => {
             for (let i = 0; i < 10; i++) {
               this.hoveringLastSearches.push(false);
@@ -175,11 +177,15 @@ export class AppComponent implements OnInit {
       userAgent: navigator.userAgent
     }
 
-    this.feedbackService.createBookmark(feedback).subscribe();
+    this.feedbackService.createFeedback(feedback).subscribe();
   }
 
   hovering(i: number): boolean {
     return this.hoveringLastSearches[i];
   }
 
+  acknowledgeWelcomeMessage() {
+    this.userDataStore.updateWelcomeAcknowledge$();
+  }
+
 }

frontend/src/app/app.component.ts

@@ -15,6 +15,7 @@ export interface UserData {
   followers?: string[];
   showAllPublicInFeed?: boolean;
   enableLocalStorage?: boolean;
+  welcomeAck?: boolean; // acknowledges the welcome dialog
 }
 
 export interface Profile {

frontend/src/app/core/model/user-data.ts

@@ -204,4 +204,11 @@ export class UserDataService {
       .get<UserDataProfile[]>(`${this.usersApiBaseUrl}/${userId}/followers`)
       .pipe(shareReplay(1));
   }
+
+  updateAcknowledgeWelcome(userId: string): Observable<UserData> {
+    return this.httpClient
+      .patch(`${this.usersApiBaseUrl}/${userId}/welcome-acknowledge`, {headers: this.headers})
+      .pipe(shareReplay(1));
+  }
+
 }

frontend/src/app/core/user-data.service.ts

@@ -92,7 +92,8 @@ export class UserDataStore {
       favorites: [],
       history: [],
       followers: [],
-      following: following
+      following: following,
+      welcomeAck: false
     }
 
     this.userService.createInitialUserData(initialUserData).subscribe((data) => {
@@ -425,4 +426,18 @@ export class UserDataStore {
       }
     }
   }
+
+
+  updateWelcomeAcknowledge$(): Observable<UserData> {
+    const obs: Observable<any> = this.userService.updateAcknowledgeWelcome(this.userId);
+    obs.subscribe(
+      () => {
+        this.userData.welcomeAck = true;
+        this._userData.next(this.userData);
+      }
+    );
+
+    return obs;
+  }
+
 }