QMAPS-2033 add "add to home" infobox on mobile after the 5th visit

src/components/AddToHomeInfoBox.jsx

@@ -0,0 +1,35 @@
+/* global _ */
+import React, { useState } from 'react';
+import { Notification } from './ui';
+import { get, set } from 'src/adapters/store';
+
+const AddToHomeInfoBox = () => {
+  const [closed, setClosed] = useState(get('add_to_home_closed'));
+  const closeBetaPopup = () => {
+    set('add_to_home_closed', 1);
+    setClosed(true);
+  };
+
+  const visits = parseInt(get('visits') || 0) + 1;
+  set('visits', visits);
+
+  return (
+    // Show popup on mobile, at the fifth visit, if it hasn't already been closed
+    visits >= 5 &&
+    !closed && (
+      <Notification
+        title={_('Psst, do you come here often ?')}
+        description={_('Add a Qwant Maps shortcut to your Home screen !')}
+        type="info"
+        onClose={closeBetaPopup}
+        footer={
+          <div className="notification-link">
+            <a href="#">{_('Follow the guide to add the shortcut')}</a>
+          </div>
+        }
+      />
+    )
+  );
+};
+
+export default AddToHomeInfoBox;

src/components/ui/Notification.jsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import cs from 'classnames';
+import { string, func, node, oneOfType } from 'prop-types';
+import { CloseButton } from 'src/components/ui';
+import { IconInformation } from 'src/components/ui/icons';
+import { ACTION_BLUE_BASE } from 'src/libs/colors';
+
+const Notification = ({ className = '', title, description, onClose, footer }) => (
+  <div className={cs('notification', className)}>
+    <span className="notification-title">
+      <span>
+        <IconInformation className="u-mr-xs" fill={ACTION_BLUE_BASE} />
+        <span role="notification">{title}</span>
+      </span>
+      <CloseButton onClick={onClose} position="topRight" />
+    </span>
+    <div className="notification-content">
+      <span role="notification">{description}</span>
+    </div>
+    {footer}
+  </div>
+);
+Notification.propTypes = {
+  className: string,
+  title: string.isRequired,
+  description: oneOfType([string, node]).isRequired,
+  onClose: func.isRequired,
+};
+
+export default Notification;

src/components/ui/index.js

@@ -17,6 +17,7 @@ import FloatingItems from './FloatingItems';
 import SourceFooter from './SourceFooter';
 import UserFeedbackQuestion from './UserFeedbackQuestion';
 import UserFeedbackYesNo from './UserFeedbackYesNo';
+import Notification from './Notification';
 import Alert from './Alert';
 import Chevron from './Chevron';
 
@@ -41,6 +42,7 @@ export {
   SourceFooter,
   UserFeedbackQuestion,
   UserFeedbackYesNo,
+  Notification,
   Alert,
   Chevron,
 };

src/panel/RootComponent.jsx

@@ -3,6 +3,7 @@ import Menu from 'src/panel/Menu';
 import PanelManager from 'src/panel/PanelManager';
 import { isMobileDevice, mobileDeviceMediaQuery, DeviceContext } from 'src/libs/device';
 import { fire } from 'src/libs/customEvents';
+import AddToHomeInfoBox from 'src/components/AddToHomeInfoBox';
 import { useConfig } from 'src/hooks';
 import { PoiProvider } from 'src/libs/poiContext';
 
@@ -34,6 +35,7 @@ const RootComponent = ({ router }) => {
         <PanelManager router={router} />
       </PoiProvider>
       {!isMobile && isBurgerMenuEnabled && <Menu />}
+      {isMobile && <AddToHomeInfoBox />}
     </DeviceContext.Provider>
   );
 };

src/scss/includes/components/notification.scss

@@ -0,0 +1,51 @@
+.notification {
+  position: fixed;
+  top: 92px;
+  width: 360px;
+  right: 12px;
+  padding: 16px;
+  border-radius: 12px;
+  color: $grey-semi-darkness;
+  background-color: $background;
+  box-shadow: 0 1px 4px 0 rgba(12, 12, 14, 0.2), 0 0 2px 0 rgba(12, 12, 14, 0.12);
+
+  @media (max-width: 760px) {
+    width: 200px;
+  }
+
+  @media (max-width: 640px) {
+    width: 360px;
+    top: calc(64px + 16px);
+    bottom: unset;
+    right: 12px;
+    max-width: calc(100vw - 24px);
+  }
+
+  &-title {
+    display: inline-flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    margin-bottom: $spacing-xs;
+    font-size: 14px;
+    font-weight: bold;
+    line-height: 18px;
+    color: $grey-black;
+
+    > span {
+      display: inline-flex;
+      align-items: center;
+    }
+  }
+
+  &-content {
+    color: $grey-semi-darkness;
+    font-size: 14px;
+    line-height: 18px;
+  }
+
+  &-link {
+    margin: $spacing-xs 0;
+    cursor: pointer;
+  }
+}

src/scss/includes/ui_components.scss

@@ -1,4 +1,5 @@
 @import "./components/alert";
+@import "./components/notification";
 @import "./components/badge";
 @import "./components/panel";
 @import "./components/itemList";

src/scss/includes/z_index.scss

@@ -2,6 +2,10 @@
   z-index: 3;
 }
 
+.notification {
+  z-index: 3;
+}
+
 .modal_overlay {
   z-index: 6;
 }