Merge pull request #5780 from HSLdevcom/AB#465

Ab#465 - feedback component

Author: Antiik91

app/component/Geolocator.js

@@ -13,7 +13,7 @@ const GeolocatorWithPosition = connectToStores(
   (context, props) => {
     const locationState = context.getStore('PositionStore').getLocationState();
     const { createReturnPath, path } = props;
-    const { from, to, hash } = props.match.params;
+    const { from, to, hash, secondHash } = props.match.params;
 
     const redirect = () => {
       const locationForUrl = locationToUri(locationState);
@@ -36,7 +36,13 @@ const GeolocatorWithPosition = connectToStores(
           save = '3'; // save destination only
         }
       }
-      const returnPath = createReturnPath(path, newFrom, newTo, hash);
+      const returnPath = createReturnPath(
+        path,
+        newFrom,
+        newTo,
+        hash,
+        secondHash,
+      );
 
       const newLocation = {
         ...props.match.location,

app/component/Icon.js

@@ -5,6 +5,7 @@ import cx from 'classnames';
 const Icon = ({
   className,
   color,
+  fill,
   height,
   id,
   img,
@@ -22,7 +23,7 @@ const Icon = ({
       id={id}
       style={{
         color: color || null,
-        fill: color || null,
+        fill: fill || color || null,
         height: height ? `${height}em` : null,
         width: width ? `${width}em` : null,
         outline: 0,
@@ -34,7 +35,7 @@ const Icon = ({
       {background}
       <g
         style={{
-          fill: color || null,
+          fill: fill || color || null,
           height: height ? `${height}em` : null,
           width: width ? `${width}em` : null,
           outline: 0,
@@ -56,6 +57,7 @@ const Icon = ({
 Icon.propTypes = {
   className: PropTypes.string,
   color: PropTypes.string,
+  fill: PropTypes.string,
   height: PropTypes.number,
   id: PropTypes.string,
   img: PropTypes.string.isRequired,

app/component/Popover.js

@@ -67,10 +67,7 @@ export default function Popover({ onClose, message, buttonText }) {
           })}
         >
           {buttonText || (
-            <FormattedMessage
-              id="popover-button-got-it"
-              defaultMessage="Got it!"
-            />
+            <FormattedMessage id="acknowledged" defaultMessage="Got it!" />
           )}
         </button>
       </div>

app/component/itinerary/Feedback.js

@@ -0,0 +1,93 @@
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import React from 'react';
+import { FormattedMessage, useIntl } from 'react-intl';
+import Icon from '../Icon';
+import { useConfigContext } from '../../configurations/ConfigContext';
+
+export default function Feedback({
+  recommended, // true if ranked as best by personalisation algo
+  feedback, // true=likes, false=dislikes, undefined=no feedback yet
+  giveFeedback, // callback to submit user's feedback action
+}) {
+  const intl = useIntl();
+  const { colors } = useConfigContext();
+
+  let status;
+  if (feedback === true) {
+    status = 'personalisation-liked';
+  } else if (feedback === false) {
+    status = 'personalisation-disliked';
+  } else {
+    status = 'personalisation-ask';
+  }
+
+  const favIcon = recommended
+    ? 'icon_star-with-circle'
+    : 'icon_star-unselected';
+  const iconMap = {
+    'personalisation-ask': {
+      img: favIcon,
+      className: cx('favourite', { selected: recommended }),
+      fill: recommended ? '#c53291' : '#FFF',
+    },
+    'personalisation-liked': { img: 'icon_thumb', color: colors.primary },
+    'personalisation-disliked': {
+      img: 'icon_thumb-down',
+      color: colors.primary,
+    },
+  };
+  const iconProps = iconMap[status];
+
+  return (
+    <div className="feedback-container">
+      <div
+        className={cx('feedback-section', {
+          'feedback-text-posted': status !== 'personalisation-ask',
+        })}
+      >
+        <Icon {...iconProps} height={1.4} width={1.4} />
+        <span>&nbsp;&nbsp;&nbsp;</span>
+        <FormattedMessage id={status} />
+      </div>
+      {status === 'personalisation-ask' && (
+        <div className="feedback-section">
+          <button
+            type="button"
+            className="thumb-button"
+            onClick={() => giveFeedback(true)}
+            aria-label={intl.formatMessage({ id: 'personalisation-aria-like' })}
+          >
+            <Icon
+              img="icon_thumb"
+              color={colors.primary}
+              height={1}
+              width={1}
+            />
+          </button>
+          <button
+            type="button"
+            className="thumb-button"
+            onClick={() => giveFeedback(false)}
+            aria-label={intl.formatMessage({
+              id: 'personalisation-aria-dislike',
+            })}
+          >
+            <Icon
+              img="icon_thumb-down"
+              color={colors.primary}
+              height={1}
+              width={1}
+            />
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}
+
+Feedback.propTypes = {
+  recommended: PropTypes.bool,
+  feedback: PropTypes.bool,
+  giveFeedback: PropTypes.func.isRequired,
+};