1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-12 12:47:14 +01:00
metamask-extension/ui/components/app/modals/metametrics-opt-in-modal/metametrics-opt-in-modal.component.js
ryanml 30abcd0fe0
Fixing unlocalized strings (#11102)
* Fixing unlocalized strings

Fixes MetaMask/metamask-extension#11094

* Removing aggregrate bullet from modal

* Updating bullet point keys
2021-05-14 17:29:26 -07:00

152 lines
5.6 KiB
JavaScript

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import MetaFoxLogo from '../../../ui/metafox-logo';
import PageContainerFooter from '../../../ui/page-container/page-container-footer';
export default class MetaMetricsOptInModal extends Component {
static propTypes = {
setParticipateInMetaMetrics: PropTypes.func,
hideModal: PropTypes.func,
};
static contextTypes = {
metricsEvent: PropTypes.func,
t: PropTypes.func,
};
render() {
const { metricsEvent, t } = this.context;
const { setParticipateInMetaMetrics, hideModal } = this.props;
return (
<div className="metametrics-opt-in metametrics-opt-in-modal">
<div className="metametrics-opt-in__main">
<div className="metametrics-opt-in__content">
<MetaFoxLogo />
<div className="metametrics-opt-in__body-graphic">
<img src="images/metrics-chart.svg" alt="" />
</div>
<div className="metametrics-opt-in__title">
{t('metametricsHelpImproveMetaMask')}
</div>
<div className="metametrics-opt-in__body">
<div className="metametrics-opt-in__description">
{t('metametricsOptInDescription')}
</div>
<div className="metametrics-opt-in__description">
{t('metametricsCommitmentsIntro')}
</div>
<div className="metametrics-opt-in__committments">
<div className="metametrics-opt-in__row">
<i className="fa fa-check" />
<div className="metametrics-opt-in__row-description">
{t('metametricsCommitmentsAllowOptOut')}
</div>
</div>
<div className="metametrics-opt-in__row">
<i className="fa fa-check" />
<div className="metametrics-opt-in__row-description">
{t('metametricsCommitmentsSendAnonymizedEvents')}
</div>
</div>
<div className="metametrics-opt-in__row metametrics-opt-in__break-row">
<i className="fa fa-times" />
<div className="metametrics-opt-in__row-description">
{t('metametricsCommitmentsNeverCollectKeysEtc', [
<span
className="metametrics-opt-in__bold"
key="neverCollectKeys"
>
{t('metametricsCommitmentsBoldNever')}
</span>,
])}
</div>
</div>
<div className="metametrics-opt-in__row">
<i className="fa fa-times" />
<div className="metametrics-opt-in__row-description">
{t('metametricsCommitmentsNeverCollectIP', [
<span
className="metametrics-opt-in__bold"
key="neverCollectIP"
>
{t('metametricsCommitmentsBoldNever')}
</span>,
])}
</div>
</div>
<div className="metametrics-opt-in__row">
<i className="fa fa-times" />
<div className="metametrics-opt-in__row-description">
{t('metametricsCommitmentsNeverSellDataForProfit', [
<span
className="metametrics-opt-in__bold"
key="neverSellData"
>
{t('metametricsCommitmentsBoldNever')}
</span>,
])}
</div>
</div>
</div>
</div>
<div className="metametrics-opt-in__bottom-text">
{t('gdprMessage', [
<a
key="metametrics-bottom-text-wrapper"
href="https://metamask.io/privacy.html"
target="_blank"
rel="noopener noreferrer"
>
{t('gdprMessagePrivacyPolicy')}
</a>,
])}
</div>
</div>
<div className="metametrics-opt-in__footer">
<PageContainerFooter
onCancel={() => {
setParticipateInMetaMetrics(false).then(() => {
metricsEvent(
{
eventOpts: {
category: 'Onboarding',
action: 'Metrics Option',
name: 'Metrics Opt Out',
},
isOptIn: true,
},
{
excludeMetaMetricsId: true,
},
);
hideModal();
});
}}
cancelText={t('noThanks')}
hideCancel={false}
onSubmit={() => {
setParticipateInMetaMetrics(true).then(() => {
metricsEvent({
eventOpts: {
category: 'Onboarding',
action: 'Metrics Option',
name: 'Metrics Opt In',
},
isOptIn: true,
});
hideModal();
});
}}
submitText={t('affirmAgree')}
submitButtonType="confirm"
disabled={false}
/>
</div>
</div>
</div>
);
}
}