[DDW-1025] Update the settings screen to match latest requirements and add missing translations

Author: Marcin Mazurek

source/renderer/app/components/profile/analytics/AnalyticsConsentForm.messages.ts

@@ -12,18 +12,6 @@ export const messages = defineMessages({
       '!!!Analytic data is used for product development purposes only.',
     description: 'Analytics data collection description',
   },
-  tocDetailsTitle: {
-    id: 'analytics.form.tocDetailsTitle',
-    defaultMessage:
-      '!!!We collect data on (1) User click behavior and (2) Device information.',
-    description: 'TOC details title',
-  },
-  tocDetails: {
-    id: 'analytics.form.tocDetails',
-    defaultMessage:
-      '!!!1.6 Privacy. No one will use your data. Ed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto sunt explicabo. ',
-    description: 'TOC details',
-  },
   dataCollectionSwitchButton: {
     id: 'analytics.form.dataCollectionSwitchText',
     defaultMessage: '!!!Allow anonymous data collection',

source/renderer/app/components/profile/analytics/AnalyticsConsentForm.tsx

@@ -1,7 +1,6 @@
 import React, { FC, useCallback } from 'react';
 import { FormattedMessage, injectIntl } from 'react-intl';
 import { Button } from 'react-polymorph/lib/components/Button';
-
 import { Link } from 'react-polymorph/lib/components/Link';
 import { ButtonSpinnerSkin } from 'react-polymorph/lib/skins/simple/ButtonSpinnerSkin';
 import classnames from 'classnames';
@@ -14,12 +13,14 @@ interface AnalyticsConsentFormProps {
   intl: Intl;
   loading: boolean;
   onSubmit: (analyticsAccepted: boolean) => void;
+  onExternalLinkClick: (url: string) => void;
 }
 
 const AnalyticsConsentForm: FC<AnalyticsConsentFormProps> = ({
   intl,
   loading,
   onSubmit,
+  onExternalLinkClick,
 }: AnalyticsConsentFormProps) => {
   const handleAllow = useCallback(() => {
     onSubmit(true);
@@ -31,8 +32,11 @@ const AnalyticsConsentForm: FC<AnalyticsConsentFormProps> = ({
   const privacyPolicyLink = (
     <Link
       className={styles.privacyPolicyLink}
-      // TODO
-      onClick={() => null}
+      onClick={() =>
+        onExternalLinkClick(
+          'https://static.iohk.io/terms/iog-privacy-policy.pdf'
+        )
+      }
       label={intl.formatMessage(messages.privacyPolicyLink)}
       hasIconAfter={false}
     />

source/renderer/app/components/profile/analytics/CollectedDataOverview.messages.ts

@@ -13,7 +13,7 @@ export const messages = defineMessages({
     description: 'Title for the user behaviour data collection',
   },
   userBehaviorText: {
-    id: 'analytics.form.dataCollectionDetailsuserBehaviorText',
+    id: 'analytics.form.dataCollectionDetailsUserBehaviorText',
     defaultMessage:
       '!!!Clicks, page visits, page scrolling, number of wallets, number of native assets, session duration, type of wallets (soft vs hardware wallets), geolocation (country of location), and page performance.',
     description: 'Description for the user behaviour data collection',

source/renderer/app/components/settings/categories/SupportSettings.messages.ts

@@ -66,23 +66,21 @@ export const messages = defineMessages({
     defaultMessage: '!!!Analytics data collection',
     description: 'Analytics form title',
   },
-  analyticsSectionDescription: {
-    id: 'analytics.form.analyticsSectionDescription',
+  analyticsAcceptedDescription: {
+    id: 'analytics.form.analyticsAcceptedDescription',
     defaultMessage:
-      '!!!Allow analytics data collection. Analytic data is used for product development purposes only.',
-    description:
-      'Analytics data collection description, above collapsible details',
+      '!!!You have opted in to analytics data collection. You can {changeAnalyticsSettingsLink}.',
+    description: 'Analytics data collection description when user opted in',
   },
-  analyticsSectionPrivacyPolicy: {
-    id: 'analytics.form.analyticsSectionPrivacyPolicy',
+  analyticsDeclinedDescription: {
+    id: 'analytics.form.analyticsDeclinedDescription',
     defaultMessage:
-      '!!!Read more about our privacy practices in the {privacyPolicyLink}.',
-    description:
-      'Analytics data collection description, under collapsible details',
+      '!!!You have opted out of analytics data collection. You can {changeAnalyticsSettingsLink}.',
+    description: 'Analytics data collection description when user opted out ',
   },
-  privacyPolicyLink: {
-    id: 'analytics.form.privacyPolicyLink',
-    defaultMessage: '!!!Daedalus Privacy Policy',
-    description: 'Daedalus Privacy Policy link text',
+  changeAnalyticsSettingsLink: {
+    id: 'analytics.form.changeAnalyticsSettingsLink',
+    defaultMessage: '!!!change this setting here',
+    description: 'Change analytics settings link text',
   },
 });

source/renderer/app/components/settings/categories/SupportSettings.scss

@@ -69,31 +69,14 @@
   margin-bottom: 14px;
 }
 
-.analyticsSectionDescriptionContainer {
-  display: flex;
-}
-
-.analyticsSectionDescription {
-  flex: 1;
-}
-
-.privacyPolicyDescription,
 .analyticsSectionDescription {
   color: var(--theme-main-body-messages-color);
   font-family: var(--font-light);
   font-size: 16px;
   line-height: 1.43;
 }
 
-.privacyPolicyDescription {
-  margin-top: 20px;
-}
-
-.switchButton {
-  margin: 0 0 0 20px !important;
-}
-
-.privacyPolicyLink {
+.changeAnalyticsSettingsLink {
   font-family: var(--font-regular);
   // unfortunately, global overrides for link component set it to 14px with higher specificity
   font-size: 16px !important;

source/renderer/app/components/settings/categories/SupportSettings.tsx

@@ -6,80 +6,28 @@ import { Link } from 'react-polymorph/lib/components/Link';
 import { LinkSkin } from 'react-polymorph/lib/skins/simple/LinkSkin';
 import styles from './SupportSettings.scss';
 import globalMessages from '../../../i18n/global-messages';
-import { AnalyticsAcceptanceStatus } from '../../../analytics/types';
 import { InjectedProps } from '../../../types/injectedPropsType';
 import { messages } from './SupportSettings.messages';
 import { Separator } from '../../widgets/separator/Separator';
-import { CollectedDataOverview } from '../../profile/analytics/CollectedDataOverview';
-import NormalSwitch from '../../widgets/forms/NormalSwitch';
-import { ROUTES } from '../../../routes-config';
 
 interface SupportSettingsProps extends InjectedProps {
   intl: Intl;
   onExternalLinkClick: (...args: Array<any>) => any;
   onSupportRequestClick: (...args: Array<any>) => any;
+  onChangeAnalyticsSettings: () => void;
   onDownloadLogs: (...args: Array<any>) => any;
   disableDownloadLogs: boolean;
-}
-
-interface SupportSettingsState {
   analyticsAccepted: boolean;
-  pageViewEventSent: boolean;
 }
 
 @inject('stores', 'actions')
 @observer
-class SupportSettings extends Component<
-  SupportSettingsProps,
-  SupportSettingsState
-> {
+class SupportSettings extends Component<SupportSettingsProps> {
   static defaultProps = {
     actions: null,
     stores: null,
   };
 
-  state = {
-    analyticsAccepted: false,
-    pageViewEventSent: false,
-  };
-
-  async componentDidMount() {
-    const analyticsAcceptanceStatus = await this.props.stores.analytics.api.localStorage.getAnalyticsAcceptance();
-
-    this.setState({
-      analyticsAccepted:
-        analyticsAcceptanceStatus === AnalyticsAcceptanceStatus.ACCEPTED,
-    });
-  }
-
-  onAnalyticsAcceptanceChange = async (analyticsAccepted: boolean) => {
-    await this.props.actions.profile.acceptAnalytics.trigger(
-      analyticsAccepted
-        ? AnalyticsAcceptanceStatus.ACCEPTED
-        : AnalyticsAcceptanceStatus.REJECTED
-    );
-
-    let { pageViewEventSent } = this.state;
-
-    if (!pageViewEventSent && analyticsAccepted) {
-      this.props.stores.analytics.analyticsClient.sendPageNavigationEvent(
-        'Support Settings'
-      );
-      pageViewEventSent = true;
-    }
-
-    this.setState({
-      analyticsAccepted,
-      pageViewEventSent,
-    });
-  };
-
-  handleTermsOfUseNavigation = () => {
-    this.props.actions.router.goToRoute.trigger({
-      route: ROUTES.SETTINGS.TERMS_OF_USE,
-    });
-  };
-
   render() {
     const {
       onExternalLinkClick,
@@ -121,11 +69,11 @@ class SupportSettings extends Component<
       />
     );
 
-    const privacyPolicyLink = (
+    const changeAnalyticsSettingsLink = (
       <Link
-        className={styles.privacyPolicyLink}
-        onClick={this.handleTermsOfUseNavigation}
-        label={intl.formatMessage(messages.privacyPolicyLink)}
+        className={styles.changeAnalyticsSettingsLink}
+        onClick={this.props.onChangeAnalyticsSettings}
+        label={intl.formatMessage(messages.changeAnalyticsSettingsLink)}
         hasIconAfter={false}
       />
     );
@@ -181,22 +129,13 @@ class SupportSettings extends Component<
         <h2 className={styles.analyticsSectionTitle}>
           {intl.formatMessage(messages.analyticsSectionTitle)}
         </h2>
-        <div className={styles.analyticsSectionDescriptionContainer}>
-          <p className={styles.analyticsSectionDescription}>
-            {intl.formatMessage(messages.analyticsSectionDescription)}
-          </p>
-          <NormalSwitch
-            onChange={this.onAnalyticsAcceptanceChange}
-            checked={this.state.analyticsAccepted}
-            className={styles.switchButton}
-          />
-        </div>
-        <CollectedDataOverview />
-        <p className={styles.privacyPolicyDescription}>
+        <p className={styles.analyticsSectionDescription}>
           <FormattedMessage
-            {...messages.analyticsSectionPrivacyPolicy}
+            {...(this.props.analyticsAccepted
+              ? messages.analyticsAcceptedDescription
+              : messages.analyticsDeclinedDescription)}
             values={{
-              privacyPolicyLink,
+              changeAnalyticsSettingsLink,
             }}
           />
         </p>

source/renderer/app/containers/profile/AnalyticsConsentPage.tsx

@@ -8,7 +8,7 @@ import { useStores } from '../../hooks/useStores';
 
 const AnalyticsConsentPage: FC = () => {
   const actions = useActions();
-  const { networkStatus, profile } = useStores();
+  const { networkStatus, profile, app } = useStores();
 
   const handleSubmit = useCallback(async (analyticsAccepted: boolean) => {
     await actions.profile.acceptAnalytics.trigger(
@@ -27,6 +27,7 @@ const AnalyticsConsentPage: FC = () => {
       <AnalyticsConsentForm
         loading={setAnalyticsAcceptanceRequest.isExecuting}
         onSubmit={handleSubmit}
+        onExternalLinkClick={app.openExternalLink}
       />
     </TopBarLayout>
   );

source/renderer/app/containers/settings/categories/SupportSettingsPage.tsx

@@ -4,6 +4,7 @@ import { defineMessages, intlShape } from 'react-intl';
 import SupportSettings from '../../../components/settings/categories/SupportSettings';
 import { generateSupportRequestLink } from '../../../../../common/utils/reporting';
 import type { InjectedProps } from '../../../types/injectedPropsType';
+import { AnalyticsAcceptanceStatus } from '../../../analytics';
 
 const messages = defineMessages({
   supportRequestLinkUrl: {
@@ -20,10 +21,18 @@ class SupportSettingsPage extends Component<InjectedProps> {
   static contextTypes = {
     intl: intlShape.isRequired,
   };
+
   static defaultProps = {
     actions: null,
     stores: null,
   };
+
+  handleChangeAnalyticsSettings = () => {
+    this.props.actions.profile.acceptAnalytics.trigger(
+      AnalyticsAcceptanceStatus.PENDING
+    );
+  };
+
   handleSupportRequestClick = async (
     event: React.SyntheticEvent<HTMLButtonElement>
   ) => {
@@ -42,6 +51,7 @@ class SupportSettingsPage extends Component<InjectedProps> {
     );
     this.props.stores.app.openExternalLink(supportUrl);
   };
+
   handleDownloadLogs = () => {
     const { app } = this.props.actions;
     app.downloadLogs.trigger();
@@ -55,9 +65,11 @@ class SupportSettingsPage extends Component<InjectedProps> {
         onExternalLinkClick={stores.app.openExternalLink}
         onSupportRequestClick={this.handleSupportRequestClick}
         onDownloadLogs={this.handleDownloadLogs}
+        onChangeAnalyticsSettings={this.handleChangeAnalyticsSettings}
         disableDownloadLogs={
           this.props.stores.app.isDownloadNotificationVisible
         }
+        analyticsAccepted={this.props.stores.profile.areAnalyticsAccepted}
       />
     );
   }