From ea9d51e427b8e607e612a01629bebf153e516ad9 Mon Sep 17 00:00:00 2001
From: Alexander Tseung <alextsg@gmail.com>
Date: Fri, 22 Jun 2018 23:52:45 -0700
Subject: Refactor and redesign confirm transaction views

---
 .../confirm-page-container-content.component.js    | 100 +++++++++++++++++++++
 1 file changed, 100 insertions(+)
 create mode 100644 ui/app/components/confirm-page-container/confirm-page-container-content/confirm-page-container-content.component.js

(limited to 'ui/app/components/confirm-page-container/confirm-page-container-content/confirm-page-container-content.component.js')

diff --git a/ui/app/components/confirm-page-container/confirm-page-container-content/confirm-page-container-content.component.js b/ui/app/components/confirm-page-container/confirm-page-container-content/confirm-page-container-content.component.js
new file mode 100644
index 000000000..7c7550170
--- /dev/null
+++ b/ui/app/components/confirm-page-container/confirm-page-container-content/confirm-page-container-content.component.js
@@ -0,0 +1,100 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import classnames from 'classnames'
+import { Tabs, Tab } from '../../tabs'
+import {
+  ConfirmPageContainerSummary,
+  ConfirmPageContainerError,
+  ConfirmPageContainerWarning,
+} from './'
+
+export default class ConfirmPageContainerContent extends Component {
+  static propTypes = {
+    action: PropTypes.string,
+    title: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    titleComponent: PropTypes.func,
+    subtitle: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    hideSubtitle: PropTypes.bool,
+    errorMessage: PropTypes.string,
+    summaryComponent: PropTypes.node,
+    detailsComponent: PropTypes.node,
+    dataComponent: PropTypes.node,
+    identiconAddress: PropTypes.string,
+    nonce: PropTypes.string,
+    warning: PropTypes.string,
+  }
+
+  renderContent () {
+    const { detailsComponent, dataComponent } = this.props
+
+    if (detailsComponent && dataComponent) {
+      return this.renderTabs()
+    } else {
+      return detailsComponent || dataComponent
+    }
+  }
+
+  renderTabs () {
+    const { detailsComponent, dataComponent } = this.props
+
+    return (
+      <Tabs>
+        <Tab name="Details">
+          { detailsComponent }
+        </Tab>
+        <Tab name="Data">
+          { dataComponent }
+        </Tab>
+      </Tabs>
+    )
+  }
+
+  render () {
+    const {
+      action,
+      title,
+      subtitle,
+      hideSubtitle,
+      errorMessage,
+      identiconAddress,
+      nonce,
+      summaryComponent,
+      detailsComponent,
+      dataComponent,
+      warning,
+    } = this.props
+
+    return (
+      <div className="confirm-page-container-content">
+        {
+          warning && (
+            <ConfirmPageContainerWarning warning={warning} />
+          )
+        }
+        {
+          summaryComponent || (
+            <ConfirmPageContainerSummary
+              className={classnames({
+                'confirm-page-container-summary--border': !detailsComponent || !dataComponent,
+              })}
+              action={action}
+              title={title}
+              subtitle={subtitle}
+              hideSubtitle={hideSubtitle}
+              identiconAddress={identiconAddress}
+              nonce={nonce}
+            />
+          )
+        }
+        { this.renderContent() }
+        {
+          errorMessage && (
+            <div className="confirm-page-container-content__error-container">
+              <ConfirmPageContainerError error={errorMessage} />
+            </div>
+          )
+        }
+      </div>
+    )
+  }
+}
-- 
cgit 


From a2d9c43fba49680d7553409a4f5013d3febd80e9 Mon Sep 17 00:00:00 2001
From: Alexander Tseung <alextsg@gmail.com>
Date: Fri, 6 Jul 2018 11:58:41 -0700
Subject: Various fixes from PR comments

---
 .../confirm-page-container-content.component.js    | 25 +++++++++++++---------
 1 file changed, 15 insertions(+), 10 deletions(-)

(limited to 'ui/app/components/confirm-page-container/confirm-page-container-content/confirm-page-container-content.component.js')

diff --git a/ui/app/components/confirm-page-container/confirm-page-container-content/confirm-page-container-content.component.js b/ui/app/components/confirm-page-container/confirm-page-container-content/confirm-page-container-content.component.js
index 7c7550170..08923af88 100644
--- a/ui/app/components/confirm-page-container/confirm-page-container-content/confirm-page-container-content.component.js
+++ b/ui/app/components/confirm-page-container/confirm-page-container-content/confirm-page-container-content.component.js
@@ -11,16 +11,17 @@ import {
 export default class ConfirmPageContainerContent extends Component {
   static propTypes = {
     action: PropTypes.string,
-    title: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    titleComponent: PropTypes.func,
-    subtitle: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    hideSubtitle: PropTypes.bool,
-    errorMessage: PropTypes.string,
-    summaryComponent: PropTypes.node,
-    detailsComponent: PropTypes.node,
     dataComponent: PropTypes.node,
+    detailsComponent: PropTypes.node,
+    errorKey: PropTypes.string,
+    errorMessage: PropTypes.string,
+    hideSubtitle: PropTypes.bool,
     identiconAddress: PropTypes.string,
     nonce: PropTypes.string,
+    subtitle: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    summaryComponent: PropTypes.node,
+    title: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    titleComponent: PropTypes.func,
     warning: PropTypes.string,
   }
 
@@ -52,10 +53,11 @@ export default class ConfirmPageContainerContent extends Component {
   render () {
     const {
       action,
+      errorKey,
+      errorMessage,
       title,
       subtitle,
       hideSubtitle,
-      errorMessage,
       identiconAddress,
       nonce,
       summaryComponent,
@@ -88,9 +90,12 @@ export default class ConfirmPageContainerContent extends Component {
         }
         { this.renderContent() }
         {
-          errorMessage && (
+          (errorKey || errorMessage) && (
             <div className="confirm-page-container-content__error-container">
-              <ConfirmPageContainerError error={errorMessage} />
+              <ConfirmPageContainerError
+                errorMessage={errorMessage}
+                errorKey={errorKey}
+              />
             </div>
           )
         }
-- 
cgit