From afbc3df7c73e6b276e58df265978bb49c8c97c74 Mon Sep 17 00:00:00 2001
From: Kevin Firko <hello@firxworx.com>
Date: Tue, 15 Jan 2019 02:13:20 -0500
Subject: [PATCH] add live demo link

---
 README.md                         |  2 ++
 dev/deploy.sh                     | 31 +++++++++++++++++++++++++++++++
 package.json                      |  6 ++++--
 src/components/Invoice/Invoice.js | 10 ++++++++--
 4 files changed, 45 insertions(+), 4 deletions(-)
 create mode 100755 dev/deploy.sh

diff --git a/README.md b/README.md
index a7d2a29..038483b 100644
--- a/README.md
+++ b/README.md
@@ -4,6 +4,8 @@ An example of an Invoice component built with React that enables users to create
 
 Totals are updated automatically as the user types values into the form fields.
 
+Live Demo: <http://demo.firxworx.com/react-simple-invoice/>
+
 Features:
 
 * Drag-and-drop reordering of invoice line items implemented with `react-beautiful-dnd`
diff --git a/dev/deploy.sh b/dev/deploy.sh
new file mode 100755
index 0000000..547e47d
--- /dev/null
+++ b/dev/deploy.sh
@@ -0,0 +1,31 @@
+#!/bin/bash
+
+# ATTENTION: CALLED VIA package.json >> MAKE BUILD PATH RELATIVE TO PROJECT ROOT
+
+# use a trailing slash to specify files *in* the given folder
+BUILD_PATH=build/
+DEPLOY_PATH=/home/firxworx/demo.firxworx.com/react-simple-invoice
+
+# ssh connection information
+USERNAME=firxworx
+HOSTNAME=server29.hostwhitelabel.com
+SSH_OPTS="-p24816"
+
+# do it up
+rsync -vzcrSLhp --force --delete --progress -e "ssh $SSH_OPTS" $BUILD_PATH $USERNAME@$HOSTNAME:$DEPLOY_PATH
+
+#
+# --dry-run -- add flag to perform a dry run and test the rsync process
+#
+# v - verbose
+# z - compress data
+# c - checksum, use checksum to find file differences
+# r - recursive
+# S - handle sparse files efficiently
+# L - follow links to copy actual files
+# h - show numbers in human-readable format
+# p - keep local file permissions (note: not always desirable)
+#
+# --exclude - Exclude files from being uploaded, e.g. --exclude="deploy.sh"
+# --exclude-from=rsync_exclude.txt - Exclude files listed in given file one-per line, .gitignore-esque
+#
diff --git a/package.json b/package.json
index 3e9ceb3..cc8bfde 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,7 @@
 {
   "name": "react-simple-invoice-dev",
-  "version": "0.1.0",
+  "version": "1.0.0",
+  "homepage": "https://http://demo.firxworx.com/react-simple-invoice/",
   "private": true,
   "dependencies": {
     "node-sass": "^4.10.0",
@@ -16,7 +17,8 @@
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "deploy": "react-scripts build && dev/deploy.sh"
   },
   "eslintConfig": {
     "extends": "react-app"
diff --git a/src/components/Invoice/Invoice.js b/src/components/Invoice/Invoice.js
index dfe83de..6a10b93 100644
--- a/src/components/Invoice/Invoice.js
+++ b/src/components/Invoice/Invoice.js
@@ -62,6 +62,10 @@ class Invoice extends Component {
     event.target.select()
   }
 
+  handlePayButtonClick = () => {
+    alert('Not implemented')
+  }
+
   formatCurrency = (amount) => {
     return (new Intl.NumberFormat(this.locale, {
       style: 'currency',
@@ -158,13 +162,15 @@ class Invoice extends Component {
         </div>
 
         <div className={styles.pay}>
-          <button className={styles.payNow}>Pay Now</button>
+          <button className={styles.payNow} onClick={this.handlePayButtonClick}>Pay Now</button>
         </div>
 
         <div className={styles.footer}>
           <div className={styles.comments}>
             <h4>Notes</h4>
-            <div>By Kevin Firko, consulting developer at <a href="https://bitcurve.com">Bitcurve Systems</a>. Check out my blog: <a href="https://firxworx.com">https://firxworx.com</a>.</div>
+            <p>Demo by Kevin Firko, independent consulting developer at <a href="https://bitcurve.com">Bitcurve</a>.</p>
+            <p>Check out my blog <a href="https://firxworx.com">https://firxworx.com</a> and <a href="https://firxworx.com/blog/coding/creating-an-invoice-component-with-dynamic-line-items-using-react/">the related post</a> covering how to create a dynamic Invoice component in React. </p>
+            <p>Find the <a href="https://github.com/firxworx/react-simple-invoice">code on Github</a>.</p>
           </div>
           <div className={styles.closing}>
             <div>Thank-you for your business</div>