feat(popup): simple content with analytics

package.json

@@ -86,6 +86,8 @@
     "selenium-webdriver": "^2.52.0",
     "semantic-release": "^15.8.1",
     "semantic-release-chrome": "^1.1.0",
+    "sinon": "^6.3.5",
+    "sinon-chai": "^3.2.0",
     "style-loader": "^0.13.1",
     "svg-url-loader": "^2.0.2",
     "webpack": "^1.12.13",

src/app/background/index.js

@@ -117,8 +117,5 @@ configureStore(store => {
 
   store.dispatch(dispatchInitialStateFromBackend()); // store initialization from the kraft server
 
-  if (process.env.NODE_ENV !== 'production') {
-    require('./inject');
-  }
 }, true);
 

src/app/background/middlewares/analytics.js

@@ -1,11 +1,17 @@
-import track from '../../analytics/trackEvents';
+import { POPUP_CLICK } from '../../constants/ActionTypes';
 
-export default function (store){
-  return next => action => {
+export default function ({ getCurrentTabs, track }) {
+  return store => next => action => {
     const { type } = action;
 
     if (!type.startsWith('api/') && !type.startsWith('notify/') && !type.startsWith('persist/')) {
-      track(action);
+      if (type === POPUP_CLICK) {
+        new Promise(resolve => getCurrentTabs(tabs => resolve(tabs)))
+          .then(tabs => (tabs.length > 0 ? tabs[0].url : undefined))
+          .then(currTabUrl => Object.assign(action, {currentHref: currTabUrl}))
+          .then(event => track(event));
+      }
+      else track(action);
     }
 
     return next(action);

src/app/background/middlewares/refreshMatchingContexts.js

@@ -1,4 +1,4 @@
-import { matchingTabIdToPortP } from '../tabs';
+import { matchingTabIdToPortM } from '../tabs';
 import { refreshMatchingContextsFromBackend } from '../actions/kraftBackend';
 
 import {
@@ -23,7 +23,7 @@ export default function (store){
         const state = store.getState();
 
         // update all content stores
-        matchingTabIdToPortP.forEach(tabPortP => {
+        matchingTabIdToPortM.forEach(tabPortP => {
           tabPortP
           .then(tabPort => tabPort.postMessage({
             type: 'dispatch',

src/app/background/store/configureStore.js

@@ -4,7 +4,8 @@ import { createStore, applyMiddleware } from 'redux';
 import { composeWithDevTools } from 'remote-redux-devtools';
 import thunk from 'redux-thunk';
 import rootReducer from '../reducers';
-import trackEvents from '../middlewares/analytics';
+import analytics from '../middlewares/analytics';
+import trackEvents from '../../analytics/trackEvents';
 import refreshMatchingContexts from '../middlewares/refreshMatchingContexts';
 import openOptionsPage from '../middlewares/openOptionsPage';
 import sendFeedback from '../middlewares/sendFeedback';
@@ -19,11 +20,19 @@ export default function configureStore(callback, isBg) {
   if (isBg === undefined) getState = require('./getStoredState'); /* If you don't want to persist states, use './getDefaultState' */// eslint-disable-line max-len
   else getState = (isBg ? require('./getStateToBg') : require('./getStateFromBg'));
 
+  const trackEventMiddleware = analytics({
+    getCurrentTabs: chrome.tabs.query.bind(null, {
+      active: true,
+      currentWindow: true,
+    }),
+    track: trackEvents,
+  });
+
   getState(loadedState => {
     // let enhancer;
     const middlewares = [
       thunk,
-      trackEvents,
+      trackEventMiddleware,
       refreshMatchingContexts,
       openOptionsPage,
       sendFeedback

src/app/background/tabs.js

@@ -1,7 +1,7 @@
 import recommendationIsValid from '../lmem/recommendationIsValid';
 import { contextTriggered, recoDisplayed, recoDismissed } from './actions/tabs';
 
-export const matchingTabIdToPortP = new Map();
+export const matchingTabIdToPortM = new Map();
 
 export function makeTabs(
   tabs,
@@ -20,7 +20,7 @@ export function makeTabs(
         const tabPort = chrome.tabs.connect(tabId);
         tabPort.onDisconnect.addListener(() => {
           console.log('port in background was disconnected for tab', tabId);
-          matchingTabIdToPortP.delete(tabId);
+          matchingTabIdToPortM.delete(tabId);
         });
 
         tabPort.onMessage.addListener(msg => {
@@ -61,15 +61,15 @@ export function makeTabs(
       });
     });
 
-    matchingTabIdToPortP.set(tabId, tabPortP);
+    matchingTabIdToPortM.set(tabId, tabPortP);
 
     return tabPortP;
   }
 
   function sendRecommendationsToTab(tabId, recos) {
     // console.log('before execute', tabId);
 
-    const tabPortP = matchingTabIdToPortP.get(tabId) || createContentScriptAndPort(tabId);
+    const tabPortP = matchingTabIdToPortM.get(tabId) || createContentScriptAndPort(tabId);
 
     const approvedRecos = getApproved();
     const recommendations = recos.map(reco => {
@@ -135,7 +135,7 @@ export function makeTabs(
   });
 
   tabs.onRemoved.addListener(id => {
-    matchingTabIdToPortP.delete(id);
+    matchingTabIdToPortM.delete(id);
   });
 
 }

src/app/constants/ActionTypes.js

@@ -1,6 +1,4 @@
 // background actions
-export const NOTIFY_SEND = 'notify/SEND';
-export const NOTIFY_RECEIVE = 'notify/RECEIVE';
 
 export const MATCHING_OFFERS_FOUND = 'matching_offers/FOUND';
 
@@ -44,6 +42,8 @@ export const CHECKOUT_RECO_RESOURCE_LINK = 'CHECKOUT_RECO_RESOURCE_LINK';
 export const CHECKOUT_RECO_ALTERNATIVE = 'CHECKOUT_RECO_ALTERNATIVE';
 export const CHECKOUT_RECO_EDITOR = 'CHECKOUT_RECO_EDITOR';
 
+export const POPUP_CLICK = 'POPUP_CLICK';
+
 export const CRITERIA = 'CRITERIA';
 export const SELECT_CRITERION = 'SELECT_CRITERION';
 export const UNSELECT_CRITERION = 'UNSELECT_CRITERION';

src/app/content/actions/ui.js

@@ -9,6 +9,7 @@ import {
   CHECKOUT_RECO_RESOURCE_LINK,
   CHECKOUT_RECO_ALTERNATIVE,
   CHECKOUT_RECO_EDITOR,
+  POPUP_CLICK,
 } from '../../constants/ActionTypes';
 
 export default function (portCommunication) {
@@ -128,8 +129,19 @@ export default function (portCommunication) {
         portCommunication.sendBackgroundReduxAction(action);
 
       return action;
-    }
+    },
 
+    popupClick(target) {
+      const action = {
+        type: POPUP_CLICK,
+        target,
+      };
+
+      if (portCommunication)
+        portCommunication.sendBackgroundReduxAction(action);
+
+      return action;
+    },
   };
 }
 

src/app/popup/PopupRoot.js

@@ -12,6 +12,7 @@ import {
 
 const {
   openPrefScreen,
+  popupClick,
 } = uiActions();
 
 
@@ -26,6 +27,7 @@ function mapDispatchToProps(dispatch) {
     openPrefScreenAbout() { dispatch(openPrefScreen(PREFERENCE_SCREEN_PANEL_ABOUT)); },
     // FIXME there is no reducer on this action, 'panel' is not used
     openPrefScreenSources() { dispatch(openPrefScreen(PREFERENCE_SCREEN_PANEL_SOURCES)); },
+    onClick(target) { dispatch(popupClick(target)); },
   };
 }
 

src/app/popup/PopupScreen.js

@@ -1,13 +1,68 @@
 import React, { Component, PropTypes } from 'react';
 
-export default function PopupScreen({ imagesUrl, openPrefScreenAbout, openPrefScreenSources }) {
+export default function PopupScreen({ imagesUrl, openPrefScreenAbout, onClick }) {
+  function onClickHandler(e) {
+    onClick({
+      name: e.currentTarget.textContent,
+      href: e.currentTarget.href,
+    });
+  }
+
+  function onOpenPrefsHandler(e) {
+    onClick({
+      name: e.currentTarget.textContent,
+    });
+    openPrefScreenAbout();
+  }
+
   return (
-    <section>
-      <p>Popup ok.</p>
-      <p>Image Src: {imagesUrl}</p>
-      <div><a onClick={openPrefScreenAbout} href>Préférences</a></div>
-      <div><a onClick={openPrefScreenSources} href>Sources de recommandation</a></div>
-    </section>
+    <div className="lmem-popup-content">
+      <section className="popup-highlight">
+        <p>
+          Si l’assistant ne s’affiche pas en bas de page, c’est qu’aucune de vos sources de recommandation
+          n’a posté de message sur cette page.
+        </p>
+        <footer className="lmem-popup-footer">
+          <a className="with-image" href="https://choisir.lmem.net/demander-un-conseil/" target="_blank" rel="noopener noreferrer" onClick={onClickHandler}>
+            <img role="presentation" className="picto" src={imagesUrl + 'discuss.svg'} />
+            <span>Demander de l’aide sur un forum</span>
+          </a>
+        </footer>
+      </section>
+      <nav className="lmem-popup-controls">
+        <ul>
+          <li>
+            <a
+              className="button-hollow with-image"
+              href="https://form.jotformeu.com/82702852284358"
+              target="_blank"
+              rel="noopener noreferrer"
+              onClick={onClickHandler}>
+              <img
+                style={{
+                  transform: 'rotate(45deg) scale(.9)'
+                }}
+                role="presentation"
+                className="picto"
+                src={imagesUrl + 'close.svg'} />
+              <span>Poster un nouveau message</span>
+            </a>
+          </li>
+          <li>
+            <a className="button-hollow with-image" onClick={onOpenPrefsHandler} href>
+              <img role="presentation" className="picto" src={imagesUrl + 'settings.svg'} />
+              <span>Préférences</span>
+            </a>
+          </li>
+          <li>
+            <a className="button-hollow with-image" onClick={onClickHandler} href="https://choisir.lmem.net/questions-frequentes-aide/" target="_blank" rel="noopener noreferrer">
+              <img role="presentation" className="picto" src={imagesUrl + 'help.svg'} />
+              <span>Questions fréquentes, aide</span>
+            </a>
+          </li>
+        </ul>
+      </nav>
+    </div>
   );
 }
 

src/app/styles/main.scss

@@ -660,7 +660,8 @@ ul.summary-entry-content {
 }
 
 .lmem-popup-content {
-    font-size: $simple-line-height;
+    font-size: $midway-font-size;
+    line-height: $double-line-height;
 
     h1 {
         @extend %title;
@@ -681,16 +682,17 @@ ul.summary-entry-content {
     }
 
     ul {
-         display: flex;
-         justify-content: space-between;
-         margin-top: $margin-size;
+        display: flex;
+        flex-direction: column;
+        //justify-content: space-between;
+        margin-top: $margin-size;
     }
 
     li {
-        background: $background-light-color;
-        max-width: $block-size * 3;
-        padding: $margin-size;
-        border-radius: rem-size(3);
+        //background: $background-light-color;
+        //max-width: $block-size * 3;
+        //padding: $margin-size;
+        //border-radius: rem-size(3);
     }
 
     .button {
@@ -700,6 +702,11 @@ ul.summary-entry-content {
         height: $double-line-height + $margin-size - 2 * $border-width;
     }
 
+    .with-image img {
+        margin-left: 0;
+        margin-right: .5ex;
+    }
+
     strong {
         font-weight: 500;
     }
@@ -731,20 +738,22 @@ ul.summary-entry-content {
 
 .popup-highlight {
     @extend .highlight;
+    padding-right: $margin-size * 2;
+    padding-left: $margin-size * 2;
 }
 
 .lmem-popup-controls {
-     position: fixed;
-     top: $margin-size / 3;
-     right: $margin-size / 3;
+     margin-top: $margin-size;
+    font-size: $simple-font-size;
+    line-height: $double-line-height;
 
      .picto {
           width: $block-size / 3;
      }
 }
 
 .lmem-popup-footer {
-     margin-top: $margin-size;
+     margin-top: $margin-size * 2;
 }
 
 //TODO make it working with the other form...