feat(NotConnected): Show only popular contributors on popin and add m…

…issing links.

.env.development.example

@@ -24,3 +24,4 @@ CHROME_EXTENSION_ID=
 FIREFOX_EXTENSION_ID=
 PROFILES_ORIGIN=http://localhost:8080
 PROFILES_ASSETS_PATH=/
+POPULAR_CONTRIBUTORS_IDS=[1, 2, 3]

.env.example

@@ -12,3 +12,4 @@ CHROME_EXTENSION_ID=
 FIREFOX_EXTENSION_ID=
 PROFILES_ORIGIN=
 PROFILES_ASSETS_PATH=
+POPULAR_CONTRIBUTORS_IDS=[]

.env.proding

@@ -19,3 +19,4 @@ FIREFOX_EXTENSION_ID={72aad822-62f5-4663-a8f0-025b2f9a3dd5}
 BABEL_ENV=production
 PROFILES_ORIGIN=https://proding-profiles.dismoi.io
 PROFILES_ASSETS_PATH=https://proding-profiles.dismoi.io/
+POPULAR_CONTRIBUTORS_IDS=[53, 54, 59, 46, 65]

.env.production

@@ -18,3 +18,4 @@ CHROME_EXTENSION_ID=fpjlnlnbacohacebkadbbjebbipcknbg
 FIREFOX_EXTENSION_ID=@lmem
 PROFILES_ORIGIN=https://www.dismoi.io
 PROFILES_ASSETS_PATH=https://profiles.dismoi.io/
+POPULAR_CONTRIBUTORS_IDS=[53, 54, 59, 46, 65]

.env.staging

@@ -19,3 +19,4 @@ FIREFOX_EXTENSION_ID={7d0d2553-c311-4acd-a170-f9a4714eb2c0}
 BABEL_ENV=production
 PROFILES_ORIGIN=https://staging-profiles.dismoi.io
 PROFILES_ASSETS_PATH=https://staging-profiles.dismoi.io/
+POPULAR_CONTRIBUTORS_IDS=[53, 54, 59, 46, 65]

src/app/profiles/App/Profiles/NotConnectedPopin.tsx

@@ -4,9 +4,11 @@ import Popin, {
   PopinState
 } from 'components/molecules/Popin/Popin';
 import PopinParagraph from 'components/molecules/Popin/PopinParagraph';
-import { BackgroundButton } from 'components/atoms';
+import { BackgroundButton, ExternalLink } from 'components/atoms';
 import { Contributor, StatefulContributor } from 'app/lmem/contributor';
 import PopinBottomBar from 'components/molecules/Popin/PopinBottomBar';
+import PopinSmallText from 'components/molecules/Popin/PopinSmallText';
+import { WEBSITE_DOMAIN } from 'app/lmem';
 
 export interface NotConnectedPopinState extends PopinState {
   contributor?: StatefulContributor;
@@ -27,6 +29,11 @@ const NotConnectedPopin = ({
   contributors,
   onContributorClick
 }: NotConnectedPopinProps) => {
+  const handleContributorClicked = (contributor: Contributor) => {
+    onContributorClick(contributor);
+    setOpened(false);
+  };
+
   return (
     <Popin opened={opened} setOpened={setOpened}>
       <PopinParagraph>
@@ -37,9 +44,15 @@ const NotConnectedPopin = ({
       <BackgroundButton className="bulle-installer" onClick={addToBrowser}>
         Ajouter Dismoi à mon navigateur
       </BackgroundButton>
+      <PopinSmallText>
+        Gratuit, sans publicité,{' '}
+        <ExternalLink href={`https://${WEBSITE_DOMAIN}/vie-privee`}>
+          respecte votre vie privée
+        </ExternalLink>
+      </PopinSmallText>
       <PopinBottomBar
         contributors={contributors}
-        onContributorClick={onContributorClick}
+        onContributorClick={handleContributorClicked}
       />
     </Popin>
   );

src/app/utils/env.ts

@@ -0,0 +1,12 @@
+export const asArray = <Type>(
+  environmentVariableValue: string | undefined
+): Array<Type> => {
+  if (typeof environmentVariableValue !== 'undefined') {
+    const parsed = JSON.parse(environmentVariableValue);
+    if (Array.isArray(parsed)) {
+      return parsed;
+    }
+  }
+
+  return [];
+};

src/components/molecules/Popin/PopinBottomBar.tsx

@@ -4,6 +4,11 @@ import { Link } from 'components/atoms';
 import { Contributor, StatefulContributor } from 'app/lmem/contributor';
 import ContributorListItem from 'components/atoms/ContributorListItem';
 import InteractiveAvatar from '../InteractiveAvatar';
+import { asArray } from 'app/utils/env';
+
+const POPULAR_CONTRIBUTORS_IDS = asArray<number>(
+  process.env.POPULAR_CONTRIBUTORS_IDS
+);
 
 const PopinBottomBarContainer = styled.div`
   width: 100%;
@@ -40,17 +45,20 @@ const PopinBottomBar = ({
 
   return (
     <PopinBottomBarContainer>
-      <Link>En savoir plus</Link> sur DisMoi et ses informateurs
+      <Link to="/informateurs">En savoir plus</Link> sur DisMoi et ses
+      informateurs
       <ContributorList>
-        {contributors.map(contributor => (
-          <ContributorListItem key={`contributorListItem[${contributor.id}]`}>
-            <InteractiveAvatar
-              onClick={() => onContributorClick(contributor)}
-              contributor={contributor}
-              size="small"
-            />
-          </ContributorListItem>
-        ))}
+        {contributors
+          .filter(c => POPULAR_CONTRIBUTORS_IDS.includes(c.id))
+          .map(contributor => (
+            <ContributorListItem key={`contributorListItem[${contributor.id}]`}>
+              <InteractiveAvatar
+                onClick={() => onContributorClick(contributor)}
+                contributor={contributor}
+                size="small"
+              />
+            </ContributorListItem>
+          ))}
       </ContributorList>
     </PopinBottomBarContainer>
   );

src/types/index.d.ts

@@ -11,6 +11,7 @@ interface AppEnv extends NodeJS.ProcessEnv {
   SENTRY_DSN: string;
   PLATFORM: 'firefox' | 'chromium';
   PROFILES_ORIGIN: string;
+  POPULAR_CONTRIBUTORS_IDS: string;
 }
 
 declare module '*.png' {

webpack.profiles.config.js

@@ -16,7 +16,8 @@ const requiredEnvVarNames = [
   'REFRESH_CONTRIBUTORS_INTERVAL',
   'CHROME_EXTENSION_ID',
   'FIREFOX_EXTENSION_ID',
-  'PROFILES_ORIGIN'
+  'PROFILES_ORIGIN',
+  'POPULAR_CONTRIBUTORS_IDS'
 ];
 const formatEnvVar = value => `"${value}"`;