Update delete modal. (keybase#19697)

* WIP

* WIP

* WIP

* Update text.

* Remove from mobile, for now.

* Update storyshots.

* 🔥

* Review feedback.

shared/common-adapters/confirm-modal/index.tsx

@@ -20,6 +20,7 @@ export type Props = {
   iconColor?: Styles.Color
   onCancel?: () => void
   onConfirm?: () => void
+  onConfirmDeactivated?: boolean
   prompt: React.ReactNode
   waitingKey?: string
 }
@@ -64,7 +65,7 @@ class ConfirmModal extends React.PureComponent<Props> {
               )}
               <WaitingButton
                 key="confirm"
-                disabled={!this.props.onConfirm}
+                disabled={this.props.onConfirmDeactivated || !this.props.onConfirm}
                 type="Danger"
                 label={this.props.confirmText || 'Confirm'}
                 onClick={this.props.onConfirm}

shared/constants/settings.tsx

@@ -265,7 +265,6 @@ export const settingsWaitingKey = 'settings:generic'
 export const aboutTab = 'settingsTabs.aboutTab'
 export const advancedTab = 'settingsTabs.advancedTab'
 export const chatTab = 'settingsTabs.chatTab'
-export const deleteMeTab = 'settingsTabs.deleteMeTab'
 export const devicesTab = 'settingsTabs.devicesTab'
 export const feedbackTab = 'settingsTabs.feedbackTab'
 export const foldersTab = 'settingsTabs.foldersTab'
@@ -287,7 +286,6 @@ export type SettingsTab =
   | typeof invitationsTab
   | typeof notificationsTab
   | typeof advancedTab
-  | typeof deleteMeTab
   | typeof feedbackTab
   | typeof aboutTab
   | typeof devicesTab

shared/settings/delete-confirm/container.tsx

@@ -1,37 +1,24 @@
-import * as Kb from '../../common-adapters'
 import * as SettingsGen from '../../actions/settings-gen'
-import DeleteConfirm, {Props} from '.'
-import React from 'react'
 import * as RouteTreeGen from '../../actions/route-tree-gen'
 import * as Container from '../../util/container'
+import DeleteConfirm from '.'
 
 type OwnProps = {}
 
-const DeleteConfirmContainer = (props: Props) => {
-  const enableDeleteLater = Kb.useTimeout(() => props.setAllowDeleteAccount(true), 2000)
-  React.useEffect(() => {
-    props.setAllowDeleteAccount(false)
-    enableDeleteLater()
-  }, [])
-  return <DeleteConfirm {...props} />
-}
-
 export default Container.connect(
   state => {
     if (!state.config.username) {
       throw new Error('No current username for delete confirm container')
     }
 
     return {
-      allowDeleteForever: state.settings.allowDeleteAccount,
       username: state.config.username,
     }
   },
   dispatch => ({
     onCancel: () => dispatch(RouteTreeGen.createNavigateUp()),
     onDeleteForever: () => dispatch(SettingsGen.createDeleteAccountForever()),
-    setAllowDeleteAccount: allow => dispatch(SettingsGen.createSetAllowDeleteAccount({allow})),
   }),
 
   (s, d, o: OwnProps) => ({...o, ...s, ...d})
-)(DeleteConfirmContainer)
+)(DeleteConfirm)

shared/settings/delete-confirm/index.stories.tsx

@@ -8,8 +8,6 @@ const load = () => {
       onDeleteForever={Sb.action('onDeleteForever')}
       onCancel={Sb.action('onCancel')}
       username="chris"
-      allowDeleteForever={true}
-      setAllowDeleteAccount={Sb.action('setAllowDeleteAccount')}
     />
   ))
 }

shared/settings/delete-confirm/index.tsx

@@ -0,0 +1,114 @@
+import * as React from 'react'
+import * as Styles from '../../styles'
+import * as Kb from '../../common-adapters'
+
+type CheckboxesProps = {
+  checkData: boolean
+  checkTeams: boolean
+  checkUsername: boolean
+  onCheckData: (checked: boolean) => void
+  onCheckTeams: (checked: boolean) => void
+  onCheckUsername: (checked: boolean) => void
+}
+
+const Checkboxes = (props: CheckboxesProps) => (
+  <Kb.Box2 direction="vertical">
+    <Kb.Checkbox
+      checked={props.checkUsername}
+      label="No one will be able to use this username ever, including yourself."
+      onCheck={checked => props.onCheckUsername(checked)}
+    />
+    <Kb.Checkbox
+      checked={props.checkData}
+      label="You will lose your personal chats, files and git data."
+      onCheck={checked => props.onCheckData(checked)}
+    />
+    <Kb.Checkbox
+      checked={props.checkTeams}
+      label="You will be removed from teams. If you were the last owner or admin of a team, it'll be orphaned and unrecoverable."
+      onCheck={checked => props.onCheckTeams(checked)}
+    />
+  </Kb.Box2>
+)
+
+export type Props = {
+  username: string
+  onCancel: () => void
+  onDeleteForever: () => void
+}
+
+type State = {
+  checkData: boolean
+  checkTeams: boolean
+  checkUsername: boolean
+}
+
+class DeleteConfirm extends React.Component<Props, State> {
+  state = {
+    checkData: false,
+    checkTeams: false,
+    checkUsername: false,
+  }
+
+  render() {
+    return (
+      <Kb.ConfirmModal
+        confirmText="Yes, permanently delete it"
+        content={
+          <Checkboxes
+            checkData={this.state.checkData}
+            checkTeams={this.state.checkTeams}
+            checkUsername={this.state.checkUsername}
+            onCheckData={checkData => this.setState({checkData})}
+            onCheckTeams={checkTeams => this.setState({checkTeams})}
+            onCheckUsername={checkUsername => this.setState({checkUsername})}
+          />
+        }
+        description="This cannot be undone. By deleting this account, you agree that:"
+        header={
+          <>
+            <Kb.Avatar size={Styles.isMobile ? 64 : 48} username={this.props.username} style={styles.avatar}>
+              <Kb.Box2 direction="horizontal" style={styles.iconContainer}>
+                <Kb.Icon color={Styles.globalColors.red} type="iconfont-remove" />
+              </Kb.Box2>
+            </Kb.Avatar>
+            <Kb.Text type="BodySemibold" style={styles.strike}>
+              {this.props.username}
+            </Kb.Text>
+          </>
+        }
+        onCancel={this.props.onCancel}
+        onConfirm={this.props.onDeleteForever}
+        onConfirmDeactivated={!this.state.checkUsername || !this.state.checkData || !this.state.checkTeams}
+        prompt="Are you sure you want to permanently delete your account?"
+      />
+    )
+  }
+}
+
+const styles = Styles.styleSheetCreate(() => ({
+  avatar: Styles.platformStyles({
+    isMobile: {
+      marginBottom: Styles.globalMargins.small,
+      marginTop: Styles.globalMargins.small,
+    },
+  }),
+  iconContainer: {
+    ...Styles.padding(1, 0, 0, 1),
+    backgroundColor: Styles.globalColors.white,
+    borderColor: Styles.globalColors.white,
+    borderRadius: 100,
+    borderStyle: 'solid',
+    borderWidth: 2,
+    bottom: 0,
+    position: 'absolute',
+    right: -4,
+  },
+  strike: {
+    ...Styles.globalStyles.italic,
+    color: Styles.globalColors.redDark,
+    textDecorationLine: 'line-through',
+  },
+}))
+
+export default DeleteConfirm

shared/settings/index.stories.tsx

@@ -1,6 +1,5 @@
 import account from './account/index.stories'
 import deleteConfirm from './delete-confirm/index.stories'
-import deleteMe from './delete/index.stories'
 import email from './email/index.stories'
 import inviteGenerated from './invite-generated/index.stories'
 import invites from './invites/index.stories'
@@ -16,7 +15,6 @@ const load = () => {
     account,
     email,
     password,
-    deleteMe,
     deleteConfirm,
     notifications,
     inviteGenerated,

shared/settings/routes.desktop.tsx

@@ -6,7 +6,6 @@ import * as Shim from '../router-v2/shim'
 import FsTab from './files/container'
 import AdvancedTab from './advanced/container'
 import ChatTab from './chat/container'
-import DeleteMeTab from './delete/container'
 import InvitationsTab from './invites/container'
 import AccountTab from './account/container'
 import FeedbackTab from './feedback/container'
@@ -25,7 +24,6 @@ const settingsSubRoutes = {
   [Constants.fsTab]: {getScreen: (): typeof FsTab => require('./files/container').default},
   [Constants.advancedTab]: {getScreen: (): typeof AdvancedTab => require('./advanced/container').default},
   [Constants.chatTab]: {getScreen: (): typeof ChatTab => require('./chat/container').default},
-  [Constants.deleteMeTab]: {getScreen: (): typeof DeleteMeTab => require('./delete/container').default},
   // TODO connect broken
   [Constants.invitationsTab]: {
     getScreen: (): typeof InvitationsTab => require('./invites/container').default,
@@ -36,7 +34,6 @@ const settingsSubRoutes = {
     getScreen: (): typeof NotificationsTab => require('./notifications/container').default,
   },
   dbNukeConfirm: {getScreen: (): typeof DbNukeConfirm => require('./db-nuke-confirm/container').default},
-  deleteConfirm: {getScreen: (): typeof DeleteConfirm => require('./delete-confirm/container').default},
   inviteSent: {getScreen: (): typeof InviteSent => require('./invite-generated/container').default},
   removeDevice: {getScreen: (): typeof RemoveDevice => require('../devices/device-revoke/container').default},
 }
@@ -81,6 +78,7 @@ export const newModalRoutes = {
   [Constants.logOutTab]: {getScreen: (): typeof LogOutTab => require('./logout/container').default},
   // TODO connect broken
   changePassword: {getScreen: (): typeof ChangePassword => require('./password/container').default},
+  deleteConfirm: {getScreen: (): typeof DeleteConfirm => require('./delete-confirm/container').default},
   disableCertPinningModal: {
     getScreen: (): typeof DisableCertPinningModal =>
       require('./disable-cert-pinning-modal/container').default,