From 152147d6678f3a4e652cd105ed6199282e4eebcc Mon Sep 17 00:00:00 2001
From: Nahom Abi <nahom@webkey.us>
Date: Thu, 21 Dec 2017 18:19:58 -0800
Subject: [PATCH 1/2] added button to copy invoice

---
 .../components/Modal/Invoice/Invoice.js       | 84 ++++++++++---------
 .../components/Modal/Invoice/Invoice.scss     | 31 ++++++-
 2 files changed, 76 insertions(+), 39 deletions(-)

diff --git a/app/routes/activity/components/components/Modal/Invoice/Invoice.js b/app/routes/activity/components/components/Modal/Invoice/Invoice.js
index 540f2b99..ed248760 100644
--- a/app/routes/activity/components/components/Modal/Invoice/Invoice.js
+++ b/app/routes/activity/components/components/Modal/Invoice/Invoice.js
@@ -5,56 +5,64 @@ import Moment from 'react-moment'
 import 'moment-timezone'
 
 import QRCode from 'qrcode.react'
+import copy from 'copy-to-clipboard'
+import { showNotification } from 'notifications'
 
-import { FaCircle } from 'react-icons/lib/fa'
+import { FaCircle, FaCopy } from 'react-icons/lib/fa'
 
 import { btc } from 'utils'
 
 import styles from './Invoice.scss'
 
 
-const Invoice = ({ invoice, ticker, currentTicker }) => (
-  <div className={styles.container}>
-    <div className={styles.settled}>
-      {
-        !invoice.settled &&
+const Invoice = ({ invoice, ticker, currentTicker }) => {
+  const copyOnClick = (data) => {
+    copy(data)
+    showNotification('Noice', 'Successfully copied to clipboard')
+  }
+  return (
+    <div className={styles.container}>
+      <div className={styles.settled}>
+        {
+          !invoice.settled &&
           <p>
             <FaCircle />
             <span>Not Paid</span>
           </p>
-      }
-    </div>
-    <header>
-      <h3>{invoice.memo}</h3>
-      <h1>
-        <span className={styles.value}>
-          {
-            ticker.currency === 'usd' ?
-              btc.satoshisToUsd(invoice.value, currentTicker.price_usd)
-              :
-              btc.satoshisToBtc(invoice.value)
-          }
-        </span>
-        <i>BTC</i>
-      </h1>
-    </header>
-    <div className={styles.qrcode}>
-      <QRCode value={invoice.payment_request} size={150} />
-    </div>
-    <div className={styles.input}>
-      <input
-        readOnly
-        className={styles.paymentRequest}
-        onClick={event => event.target.select()}
-        defaultValue={invoice.payment_request}
-      />
-    </div>
-    <p className={styles.date}>
+        }
+      </div>
+      <header>
+        <h3>{invoice.memo}</h3>
+        <h1>
+          <span className={styles.value}>
+            {
+              ticker.currency === 'usd' ?
+                btc.satoshisToUsd(invoice.value, currentTicker.price_usd)
+                :
+                btc.satoshisToBtc(invoice.value)
+            }
+          </span>
+          <i>BTC</i>
+        </h1>
+      </header>
+      <div className={styles.qrcode}>
+        <QRCode value={invoice.payment_request} size={150} />
+      </div>
+      <div className={styles.input}>
+        <p className={styles.hello}>
+          <span>{invoice.payment_request}</span>
+          <span onClick={() => copyOnClick(invoice.payment_request)} className='hint--left' data-hint='Copy Invoice'>
+            <FaCopy />
+          </span>
+        </p>
+      </div>
+      <p className={styles.date}>
       Created on
-      <Moment format='MMM Do'>{invoice.creation_date * 1000}</Moment>
-    </p>
-  </div>
-)
+        <Moment format='MMM Do'>{invoice.creation_date * 1000}</Moment>
+      </p>
+    </div>
+  )
+}
 
 Invoice.propTypes = {
   invoice: PropTypes.object.isRequired,
diff --git a/app/routes/activity/components/components/Modal/Invoice/Invoice.scss b/app/routes/activity/components/components/Modal/Invoice/Invoice.scss
index 3880bfb0..cddadb64 100644
--- a/app/routes/activity/components/components/Modal/Invoice/Invoice.scss
+++ b/app/routes/activity/components/components/Modal/Invoice/Invoice.scss
@@ -53,7 +53,7 @@
 
   .input {
     padding: 10px 40px;
-
+    
     .paymentRequest {
       text-align: center;
       font-size: 12px;
@@ -75,4 +75,33 @@
       margin-left: 3px;
     }
   }
+
+  .hello {
+      display: flex;
+      flex-direction: row;
+      font-family: 'Roboto';
+      font-size: 14px;
+      font-weight: 200;
+      background: $lightgrey;
+
+      span {
+        padding: 15px;
+      }
+
+      span:nth-child(1) {
+        flex: 9;
+        overflow-x: scroll;
+      }
+
+      span:nth-child(2) {
+        background: $darkgrey;
+        color: $black;
+        cursor: pointer;
+        transition: all 0.25s;
+
+        &:hover {
+          background: $darkestgrey;
+        }
+      }
+  }
 }
\ No newline at end of file

From da0c8455eedbb9be2929adc6588c59fe65f898b6 Mon Sep 17 00:00:00 2001
From: Nahom Abi <nahom@webkey.us>
Date: Fri, 22 Dec 2017 12:05:06 -0800
Subject: [PATCH 2/2] Fix: Renamed style class, fixed coding style issues,
 restructured copy invoice function

---
 .../components/components/Modal/Invoice/Invoice.js       | 9 +++++----
 .../components/components/Modal/Invoice/Invoice.scss     | 3 +--
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/app/routes/activity/components/components/Modal/Invoice/Invoice.js b/app/routes/activity/components/components/Modal/Invoice/Invoice.js
index ed248760..c8d06b8b 100644
--- a/app/routes/activity/components/components/Modal/Invoice/Invoice.js
+++ b/app/routes/activity/components/components/Modal/Invoice/Invoice.js
@@ -16,10 +16,11 @@ import styles from './Invoice.scss'
 
 
 const Invoice = ({ invoice, ticker, currentTicker }) => {
-  const copyOnClick = (data) => {
-    copy(data)
+  const copyPaymentRequest = () => {
+    copy(invoice.payment_request)
     showNotification('Noice', 'Successfully copied to clipboard')
   }
+
   return (
     <div className={styles.container}>
       <div className={styles.settled}>
@@ -49,9 +50,9 @@ const Invoice = ({ invoice, ticker, currentTicker }) => {
         <QRCode value={invoice.payment_request} size={150} />
       </div>
       <div className={styles.input}>
-        <p className={styles.hello}>
+        <p className={styles.invoiceAddress}>
           <span>{invoice.payment_request}</span>
-          <span onClick={() => copyOnClick(invoice.payment_request)} className='hint--left' data-hint='Copy Invoice'>
+          <span onClick={copyPaymentRequest} className='hint--left' data-hint='Copy Invoice'>
             <FaCopy />
           </span>
         </p>
diff --git a/app/routes/activity/components/components/Modal/Invoice/Invoice.scss b/app/routes/activity/components/components/Modal/Invoice/Invoice.scss
index cddadb64..6efc1869 100644
--- a/app/routes/activity/components/components/Modal/Invoice/Invoice.scss
+++ b/app/routes/activity/components/components/Modal/Invoice/Invoice.scss
@@ -53,7 +53,6 @@
 
   .input {
     padding: 10px 40px;
-    
     .paymentRequest {
       text-align: center;
       font-size: 12px;
@@ -76,7 +75,7 @@
     }
   }
 
-  .hello {
+  .invoiceAddress {
       display: flex;
       flex-direction: row;
       font-family: 'Roboto';