Moving gdpr to talk-plugin-profile-data

plugins/talk-plugin-profile-data/client/components/DeleteMyAccountStep0.js

@@ -0,0 +1,54 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import cn from 'classnames';
+import { Button, Icon } from 'plugin-api/beta/client/components/ui';
+import styles from './DeleteMyAccountStep.css';
+
+const DeleteMyAccountStep0 = props => (
+  <div className={styles.step}>
+    <p className={styles.description}>
+      You are attempting to delete your account. This means:
+    </p>
+    <ul className={styles.list}>
+      <li className={styles.item}>
+        <Icon name="done" className={styles.itemIcon} />
+        <span className={styles.text}>
+          All of your comments are removed from this site
+        </span>
+      </li>
+      <li className={styles.item}>
+        <Icon name="done" className={styles.itemIcon} />
+        <span className={styles.text}>
+          All of your comments are deleted from our database
+        </span>
+      </li>
+      <li className={styles.item}>
+        <Icon name="done" className={styles.itemIcon} />
+        <span className={styles.text}>
+          Your username and email address are removed from our system
+        </span>
+      </li>
+    </ul>
+    <div className={cn(styles.actions)}>
+      <Button
+        className={cn(styles.button, styles.cancel)}
+        onClick={props.cancel}
+      >
+        Cancel
+      </Button>
+      <Button
+        className={cn(styles.button, styles.proceed)}
+        onClick={props.goToNextStep}
+      >
+        Proceed
+      </Button>
+    </div>
+  </div>
+);
+
+DeleteMyAccountStep0.propTypes = {
+  goToNextStep: PropTypes.func.isRequired,
+  cancel: PropTypes.func.isRequired,
+};
+
+export default DeleteMyAccountStep0;