1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-11-27 12:56:01 +01:00
metamask-extension/ui/components/app/whats-new-popup/whats-new-popup.js
Dan J Miller 958535d5df
Ledger WebHID What's New popup (#12501)
* Add notification for ledger live users about how they can switch to WebHID

* Add action button so that users can go right to settings from the what's new popup

* Fix

* Add notification 8 to e2e fixtures

* Lint fix

* Update ledger webhid notification wording

* Update app/_locales/en/messages.json

* Update ui/selectors/selectors.js
2021-11-03 20:05:39 -02:30

251 lines
7.1 KiB
JavaScript

import React, { useContext, useMemo, useRef, useState, useEffect } from 'react';
import { useHistory } from 'react-router-dom';
import { useSelector } from 'react-redux';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import { getCurrentLocale } from '../../../ducks/metamask/metamask';
import { I18nContext } from '../../../contexts/i18n';
import { useEqualityCheck } from '../../../hooks/useEqualityCheck';
import Button from '../../ui/button';
import Popover from '../../ui/popover';
import Typography from '../../ui/typography';
import { updateViewedNotifications } from '../../../store/actions';
import { getTranslatedUINoficiations } from '../../../../shared/notifications';
import { getSortedNotificationsToShow } from '../../../selectors';
import {
BUILD_QUOTE_ROUTE,
ADVANCED_ROUTE,
} from '../../../helpers/constants/routes';
import { TYPOGRAPHY } from '../../../helpers/constants/design-system';
function getActionFunctionById(id, history) {
const actionFunctions = {
2: () => {
global.platform.openTab({
url:
'https://survey.alchemer.com/s3/6173069/MetaMask-Extension-NPS-January-2021',
});
},
3: () => {
global.platform.openTab({
url: 'https://community.metamask.io/t/about-the-security-category/72',
});
},
4: () => {
updateViewedNotifications({ 4: true });
history.push(BUILD_QUOTE_ROUTE);
},
5: () => {
updateViewedNotifications({ 5: true });
global.platform.openTab({
url: 'https://metamask.zendesk.com/hc/en-us/articles/360060826432',
});
},
8: () => {
updateViewedNotifications({ 8: true });
history.push(ADVANCED_ROUTE);
},
};
return actionFunctions[id];
}
const renderDescription = (description) => {
if (!Array.isArray(description)) {
return (
<Typography variant={TYPOGRAPHY.Paragraph}>{description}</Typography>
);
}
return (
<>
{description.map((piece, index) => {
const isLast = index === description.length - 1;
return (
<Typography
key={`item-${index}`}
variant={TYPOGRAPHY.Paragraph}
boxProps={{ marginBottom: isLast ? 0 : 2 }}
>
{piece}
</Typography>
);
})}
</>
);
};
const renderFirstNotification = (notification, idRefMap, history, isLast) => {
const { id, date, title, description, image, actionText } = notification;
const actionFunction = getActionFunctionById(id, history);
const imageComponent = image && (
<img
className="whats-new-popup__notification-image"
src={image.src}
height={image.height}
width={image.width}
/>
);
const placeImageBelowDescription = image?.placeImageBelowDescription;
return (
<div
className={classnames(
'whats-new-popup__notification whats-new-popup__first-notification',
{
'whats-new-popup__last-notification': isLast,
},
)}
key={`whats-new-popop-notification-${id}`}
>
{!placeImageBelowDescription && imageComponent}
<div className="whats-new-popup__notification-title">{title}</div>
<div className="whats-new-popup__description-and-date">
<div className="whats-new-popup__notification-description">
{renderDescription(description)}
</div>
<div className="whats-new-popup__notification-date">{date}</div>
</div>
{placeImageBelowDescription && imageComponent}
{actionText && (
<Button
type="secondary"
className="whats-new-popup__button"
onClick={actionFunction}
>
{actionText}
</Button>
)}
<div
className="whats-new-popup__intersection-observable"
ref={idRefMap[id]}
/>
</div>
);
};
const renderSubsequentNotification = (
notification,
idRefMap,
history,
isLast,
) => {
const { id, date, title, description, actionText } = notification;
const actionFunction = getActionFunctionById(id, history);
return (
<div
className={classnames('whats-new-popup__notification', {
'whats-new-popup__last-notification': isLast,
})}
key={`whats-new-popop-notification-${id}`}
>
<div className="whats-new-popup__notification-title">{title}</div>
<div className="whats-new-popup__description-and-date">
<div className="whats-new-popup__notification-description">
{renderDescription(description)}
</div>
<div className="whats-new-popup__notification-date">{date}</div>
</div>
{actionText && (
<div className="whats-new-popup__link" onClick={actionFunction}>
{`${actionText} >`}
</div>
)}
<div
className="whats-new-popup__intersection-observable"
ref={idRefMap[id]}
/>
</div>
);
};
export default function WhatsNewPopup({ onClose }) {
const t = useContext(I18nContext);
const history = useHistory();
const notifications = useSelector(getSortedNotificationsToShow);
const locale = useSelector(getCurrentLocale);
const [seenNotifications, setSeenNotifications] = useState({});
const popoverRef = useRef();
const memoizedNotifications = useEqualityCheck(notifications);
const idRefMap = useMemo(
() =>
memoizedNotifications.reduce(
(_idRefMap, notification) => ({
..._idRefMap,
[notification.id]: React.createRef(),
}),
{},
),
[memoizedNotifications],
);
useEffect(() => {
const observer = new window.IntersectionObserver(
(entries, _observer) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
const [id, ref] = Object.entries(idRefMap).find(([_, _ref]) =>
_ref.current.isSameNode(entry.target),
);
setSeenNotifications((_seenNotifications) => ({
..._seenNotifications,
[id]: true,
}));
_observer.unobserve(ref.current);
}
});
},
{
root: popoverRef.current,
threshold: 1.0,
},
);
Object.values(idRefMap).forEach((ref) => {
observer.observe(ref.current);
});
return () => {
observer.disconnect();
};
}, [idRefMap, setSeenNotifications]);
return (
<Popover
className="whats-new-popup__popover"
title={t('whatsNew')}
onClose={() => {
updateViewedNotifications(seenNotifications);
onClose();
}}
popoverRef={popoverRef}
>
<div className="whats-new-popup__notifications">
{notifications.map(({ id }, index) => {
const notification = getTranslatedUINoficiations(t, locale)[id];
const isLast = index === notifications.length - 1;
// Display the swaps notification with full image
return index === 0 || id === 1
? renderFirstNotification(notification, idRefMap, history, isLast)
: renderSubsequentNotification(
notification,
idRefMap,
history,
isLast,
);
})}
</div>
</Popover>
);
}
WhatsNewPopup.propTypes = {
onClose: PropTypes.func.isRequired,
};