Merge pull request #268 from GusBaamonde/show_upgrade_or_trial_bell

feat: add notifications
FromDoppler · Jun 27, 2019 · f859f02 · f859f02
2 parents 00bd8c0 + 78e32f2
commit f859f02
Show file tree

Hide file tree

Showing 8 changed files with 64 additions and 9 deletions.
diff --git a/public/index.html b/public/index.html
@@ -12,7 +12,7 @@
     -->
 
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
-    <link rel="stylesheet" type="text/css" href="https://cdn.fromdoppler.com/doppler-ui-library/v3.0.0/css/styles.css">
+    <link rel="stylesheet" type="text/css" href="https://cdn.fromdoppler.com/doppler-ui-library/v3.1.0/css/styles.css">
     <link rel="stylesheet" type="text/css" href="zoho-chat.css">
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
@@ -47,7 +47,7 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
-    <script type="text/javascript" src="https://cdn.fromdoppler.com/doppler-ui-library/v3.0.0/js/app.js"></script>
+    <script type="text/javascript" src="https://cdn.fromdoppler.com/doppler-ui-library/v3.1.0/js/app.js"></script>
     <script type="text/javascript" src="zoho-chat.js"></script>
     <link rel="stylesheet" type="text/css" href="zoho-chat.css">
   </body>

diff --git a/src/components/Header/Header.js b/src/components/Header/Header.js
@@ -3,8 +3,12 @@ import HeaderNav from './HeaderNav/HeaderNav';
 import HeaderMessages from './HeaderMessages/HeaderMessages';
 import HeaderUserMenu from './HeaderUserMenu/HeaderUserMenu';
 import { FormattedMessage } from 'react-intl';
+import Notifications from './Notifications';
 
-const Header = ({ userData: { user, nav, alert }, location: { pathname } }) => {
+const Header = ({
+  userData: { user, nav, alert, notifications, emptyNotificationText },
+  location: { pathname },
+}) => {
   const inactiveSection = pathname.match(/^\/integrations\/*/) !== null;
   return (
     <div>
@@ -38,9 +42,11 @@ const Header = ({ userData: { user, nav, alert }, location: { pathname } }) => {
           <nav className="nav-right-main">
             <ul className="nav-right-main--list">
               <li>
-                <span className="active" data-count="1">
-                  <span className="ms-icon icon-notification" />
-                </span>
+                <Notifications
+                  plan={user.plan}
+                  notifications={notifications}
+                  emptyNotificationText={emptyNotificationText}
+                />
               </li>
               <li>
                 <FormattedMessage id="header.help_url">

diff --git a/src/components/Header/Notifications.js b/src/components/Header/Notifications.js
@@ -0,0 +1,32 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+
+const Notifications = ({ plan, notifications, emptyNotificationText }) => {
+  // check if we're always going to show notifications
+  const showNotifications = plan.isFreeAccount && notifications.length;
+  const dataCountAttr = showNotifications ? { 'data-count': notifications.length } : {};
+  return (
+    <>
+      <span className="user-menu--open active" {...dataCountAttr}>
+        <span className="ms-icon icon-notification"></span>
+      </span>
+      <div className="user-menu helper--right dp-notifications">
+        <div className="dp-msj-notif">
+          {!showNotifications ? (
+            <i>
+              {emptyNotificationText ? (
+                emptyNotificationText
+              ) : (
+                <FormattedMessage id="empty_notification_text" />
+              )}
+            </i>
+          ) : (
+            <div dangerouslySetInnerHTML={{ __html: notifications[0] }} />
+          )}
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default Notifications;
diff --git a/src/headerData.json b/src/headerData.json
@@ -160,5 +160,7 @@
     "emailParameterEnabled": true,
     "emailParameterActive": true
   },
+  "loginUrl": "https://app.fromdoppler.com/#/login?lang=es",
+  "notifications": [],
   "jwtToken": "eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc1N1IjpmYWxzZSwic3ViIjoiY2Jlcm5hdEBnZXRjcy5jb20iLCJjdXN0b21lcklkIjoiMTAyNCIsImRhdGFodWJDdXN0b21lcklkIjoiMTAyNCIsImlhdCI6MTU1NjU0NTQ2MSwiZXhwIjoxNTU2NTQ3MjYxfQ.meC1sFsC7m8nGFfcK2oih1hqdKQ4Lj81O5rN_-awOcM_JEe9ddviocPbYAg64L6nC6b0a7J5xmTmiW_-MAIEIg"
 }
diff --git a/src/i18n/en.js b/src/i18n/en.js
@@ -35,6 +35,7 @@ export default {
     send: `Send`,
     show: `Show`,
   },
+  empty_notification_text: `You don't have pending notifications.`,
   feature_panel: {
     email_automation: `Email Automation`,
     email_automation_description: `Right person, right message, right time`,

diff --git a/src/i18n/es.js b/src/i18n/es.js
@@ -35,6 +35,7 @@ export default {
     send: `Enviar`,
     show: `Mostrar`,
   },
+  empty_notification_text: `No tienes notificaciones pendientes.`,
   feature_panel: {
     email_automation: `Email Automation`,
     email_automation_description: `Llega con el mensaje adecuado en el momento justo`,

diff --git a/src/services/doppler-legacy-client.doubles.ts b/src/services/doppler-legacy-client.doubles.ts
@@ -43,9 +43,16 @@ export class HardcodedDopplerLegacyClient implements DopplerLegacyClient {
   public async getUserData() {
     console.log('getUserData');
     await timeout(1500);
-    const { user, nav, alert, datahubCustomerId, features, jwtToken } = mapHeaderDataJson(
-      headerDataJson,
-    );
+    const {
+      user,
+      nav,
+      alert,
+      datahubCustomerId,
+      features,
+      jwtToken,
+      notifications,
+      emptyNotificationText,
+    } = mapHeaderDataJson(headerDataJson);
 
     return {
       user: {
@@ -57,6 +64,8 @@ export class HardcodedDopplerLegacyClient implements DopplerLegacyClient {
       datahubCustomerId,
       features,
       jwtToken,
+      notifications,
+      emptyNotificationText,
     };
   }
 

diff --git a/src/services/doppler-legacy-client.ts b/src/services/doppler-legacy-client.ts
@@ -168,6 +168,8 @@ export interface DopplerLegacyUserData {
   nav: MainNavEntry[];
   user: UserEntry;
   jwtToken: string;
+  notifications: string[];
+  emptyNotificationText: string;
   datahubCustomerId: string | null;
   features: DopplerFeatures;
 }
@@ -229,6 +231,8 @@ export function mapHeaderDataJson(json: any) {
       plan: mapPlanEntry(json.user.plan),
     },
     jwtToken: json.jwtToken,
+    notifications: json.notifications || [],
+    emptyNotificationText: json.emptyNotificationText || '',
     datahubCustomerId: json.datahubCustomerId || null,
     features: {
       siteTrackingEnabled: !!(json.features && json.features.siteTrackingEnabled),