Invoice Page #122

package.json

@@ -50,7 +50,7 @@
     "react-responsive-modal": "^3.6.0",
     "react-router-dom": "^4.3.1",
     "react-scripts": "2.1.3",
-    "react-select": "^2.3.0",
+    "react-select": "^2.4.2",
     "react-sidebar": "^3.0.2",
     "react-switch": "^4.0.1",
     "react-textfit": "^1.1.0",

src/App.js

@@ -15,6 +15,8 @@ import {
   ForgotPassword,
   SetPassword,
   Dashboard,
+  Invoice,
+  CreateInvoice,
   Settings,
   AccountInfo,
   AcceptedTokens,
@@ -63,6 +65,8 @@ class App extends Component {
                 />
                 <Route path="/set-password/:token" component={SetPassword} />
                 <Route path="/dashboard" exact component={Dashboard} />
+                <Route path="/invoice/:id" component={Invoice} />
+                <Route path="/create-invoice" component={CreateInvoice} />
                 <Route path="/settings" exact component={Settings} />
                 <Route
                   path="/settings/account-info"

src/pages/Payment/components/CryptoAmount.js → src/components/CryptoAmount.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import Select from 'react-select';
 
-import cryptoIcon from '../../../assets/dummy/crypto-icon.png';
+import cryptoIcon from '../assets/dummy/crypto-icon.png';
 
 const Wrapper = styled.div`
   padding: 10px 75px;
@@ -44,17 +44,18 @@ class CryptoAmount extends React.Component {
   }
 
   handleChange = option => {
+    console.log('option', option);
     const { handleChange } = this.props;
     this.setState({ selectedCrypto: option.value, selectOpen: false });
     handleChange(option);
   };
 
   render() {
-    const { cryptoValue, hasSelection } = this.props;
+    const { cryptoValue, hasSelection, style } = this.props;
     const { selectOpen, selectedCrypto } = this.state;
 
     const activeItem = (
-      <Container>
+      <Container style={{ paddingTop: '10px' }}>
         <Image src={cryptoIcon} alt={selectedCrypto} />
         <span>x{selectedCrypto.toUpperCase()}&nbsp;</span>
         <span className="has-text-weight-light">
@@ -65,7 +66,7 @@ class CryptoAmount extends React.Component {
 
     if (hasSelection) {
       return (
-        <Wrapper>
+        <Wrapper style={style}>
           {selectOpen ? (
             <Select
               value={selectedCrypto}

src/pages/Payment/components/FiatAmount.js → src/components/FiatAmount.js

@@ -3,29 +3,31 @@ import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import { Textfit } from 'react-textfit';
 
-import FormatCurrency from '../../../components/FormatCurrency';
+import FormatCurrency from './FormatCurrency';
 
 const Container = styled.div`
   font-weight: 300;
   text-align: center;
 `;
 
-const FiatAmount = ({ fiatAmount }) => {
+const FiatAmount = ({ fiatAmount, fiatCurrency }) => {
   return (
     <Container>
       <Textfit mode="single" max={72}>
-        <FormatCurrency value={fiatAmount} />
+        <FormatCurrency currency={fiatCurrency} value={fiatAmount} />
       </Textfit>
     </Container>
   );
 };
 
 FiatAmount.defaultProps = {
-  fiatAmount: 0
+  fiatAmount: 0,
+  fiatCurrency: undefined
 };
 
 FiatAmount.propTypes = {
-  fiatAmount: PropTypes.number
+  fiatAmount: PropTypes.number,
+  fiatCurrency: PropTypes.string
 };
 
 export default FiatAmount;

src/components/FormatCurrency.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import currency from 'currency.js';
+import currencyjs from 'currency.js';
 import { Query } from 'react-apollo';
 import gql from 'graphql-tag';
 import { find } from 'lodash';
@@ -13,26 +13,43 @@ const query = gql`
   }
 `;
 
-const FormatCurrency = ({ value }) => {
-  return (
-    <Query query={query}>
-      {({ data }) => {
-        const selected = find(config.currencies, { id: data.currency });
-        return currency(parseFloat(value), {
-          symbol: `${selected.symbol || config.currency.symbol} `,
-          formatWithSymbol: true
-        }).format();
-      }}
-    </Query>
-  );
-};
+class FormatCurrency extends React.Component {
+  loadCurrency(currency) {
+    const { value } = this.props;
+
+    const selected = find(config.currencies, { id: currency });
+    if (!selected) {
+      return parseFloat(value);
+    }
+    return currencyjs(parseFloat(value), {
+      symbol: `${selected.symbol || config.currency.symbol} `,
+      formatWithSymbol: true
+    }).format();
+  }
+
+  render() {
+    const { currency } = this.props;
+
+    if (currency) {
+      return this.loadCurrency(currency.toUpperCase());
+    }
+
+    return (
+      <Query query={query}>
+        {({ data }) => this.loadCurrency(data.currency)}
+      </Query>
+    );
+  }
+}
 
 FormatCurrency.defaultProps = {
-  value: 0
+  value: 0,
+  currency: undefined
 };
 
 FormatCurrency.propTypes = {
-  value: PropTypes.number
+  value: PropTypes.number,
+  currency: PropTypes.string
 };
 
 export default FormatCurrency;

src/components/Layout.js

@@ -47,7 +47,7 @@ class Layout extends React.Component {
   };
 
   render() {
-    const { children, header, activeNavItem } = this.props;
+    const { children, header, activeNavItem, isSlim } = this.props;
     const { sidebarOpen } = this.state;
 
     return (
@@ -59,6 +59,10 @@ class Layout extends React.Component {
             if (error) return <p>Error: {error.message}</p>;
             // console.log('Layout', data);
 
+            if (isSlim) {
+              return <React.Fragment>{children}</React.Fragment>;
+            }
+
             return (
               <Sidebar
                 sidebar={<MySidebar isLoggedIn={data.isLoggedIn} />}
@@ -92,13 +96,15 @@ class Layout extends React.Component {
 
 Layout.defaultProps = {
   header: {},
-  activeNavItem: ''
+  activeNavItem: '',
+  isSlim: false
 };
 
 Layout.propTypes = {
   children: PropTypes.node.isRequired,
   header: PropTypes.object,
-  activeNavItem: PropTypes.string
+  activeNavItem: PropTypes.string,
+  isSlim: PropTypes.bool
 };
 
 export default Layout;

src/components/elements/Loading.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const Container = styled.div``;
+
+const Loading = () => {
+  return (
+    <Container>
+      <p>Loading...</p>
+    </Container>
+  );
+};
+
+export default Loading;

src/components/elements/index.js

@@ -3,5 +3,6 @@ import TextGroup from './TextGroup';
 import SwitchGroup from './SwitchGroup';
 import Slider from './Slider';
 import NumberIncrementer from './NumberIncrementer';
+import Loading from './Loading';
 
-export { Divider, TextGroup, SwitchGroup, Slider, NumberIncrementer };
+export { Divider, TextGroup, SwitchGroup, Slider, NumberIncrementer, Loading };

src/pages/CreateInvoice/components/CreateInvoiceForm.js

@@ -0,0 +1,74 @@
+// CreateInvoiceForm.js
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withFormik } from 'formik';
+import * as yup from 'yup';
+
+import { TextGroup } from '../../../components/elements';
+
+const CreateInvoiceForm = props => {
+  const {
+    values,
+    errors,
+    isSubmitting,
+    handleChange,
+    handleBlur,
+    handleSubmit
+  } = props;
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <TextGroup
+        name="fiatAmount"
+        label="Fiat Amount"
+        placeholder="100"
+        value={values.fiatAmount}
+        onChange={handleChange}
+        onBlur={handleBlur}
+        error={errors.fiatAmount}
+      />
+      <TextGroup
+        name="fiatCurrency"
+        label="Fiat Currency"
+        placeholder="USD"
+        value={values.fiatCurrency}
+        onChange={handleChange}
+        onBlur={handleBlur}
+        error={errors.fiatCurrency}
+      />
+      <button
+        type="submit"
+        className={`button is-large is-black is-fullwidth ${isSubmitting &&
+          'is-loading'}`}
+      >
+        CREATE
+      </button>
+    </form>
+  );
+};
+
+CreateInvoiceForm.propTypes = {
+  values: PropTypes.object.isRequired,
+  errors: PropTypes.object.isRequired,
+  isSubmitting: PropTypes.bool.isRequired,
+  handleChange: PropTypes.func.isRequired,
+  handleBlur: PropTypes.func.isRequired,
+  handleSubmit: PropTypes.func.isRequired
+};
+
+export default withFormik({
+  mapPropsToValues: () => ({
+    fiatAmount: '',
+    fiatCurrency: ''
+  }),
+  validationSchema: yup.object().shape({
+    fiatAmount: yup.string().required('Fiat Amount is required!'),
+    fiatCurrency: yup.string().required('Fiat Currency is required!')
+  }),
+  handleSubmit: (values, { setSubmitting, props }) => {
+    // console.log('handle submit', values, props);
+    props.addContact(values);
+    setSubmitting(false);
+  },
+  displayName: 'CreateInvoiceForm' // helps with React DevTools
+})(CreateInvoiceForm);

src/pages/CreateInvoice/index.js

@@ -0,0 +1,53 @@
+import React from 'react';
+import swal from 'sweetalert';
+
+import Layout from '../../components/Layout';
+import Seo from '../../components/Seo';
+import CreateInvoiceForm from './components/CreateInvoiceForm';
+
+class CreateInvoice extends React.Component {
+  constructor(props) {
+    super(props);
+
+    const token = window.localStorage.getItem('token');
+    this.state = {
+      isLoggedIn: !!token
+    };
+  }
+
+  componentDidMount() {
+    const { isLoggedIn } = this.state;
+    const { history } = this.props;
+
+    if (!isLoggedIn) {
+      swal({
+        icon: 'info',
+        title: 'Please login to continue',
+        button: {
+          text: 'Login'
+        }
+      }).then(() => {
+        history.push('/login');
+      });
+    }
+  }
+
+  render() {
+    return (
+      <Layout>
+        <Seo title="Create Invoice" />
+        <div className="section">
+          <div className="container">
+            <h2 className="title">Create Invoice</h2>
+            <CreateInvoiceForm />
+            <hr />
+            <h2 className="title">Your Invoices</h2>
+            <p>TODO: list invoice here</p>
+          </div>
+        </div>
+      </Layout>
+    );
+  }
+}
+
+export default CreateInvoice;

src/pages/Dashboard/components/SetWalletAddress.js

@@ -56,7 +56,7 @@ class SetWalletAddress extends React.Component {
   handleAddressUpdate = data => {
     client.mutate({
       mutation,
-      variables: { address: data.walletAddress }
+      variables: { address: data.walletAddress, source: 'manualInput' }
     });
   };
 

src/pages/Dashboard/desktop.view.js

@@ -81,9 +81,7 @@ export default function() {
           </React.Fragment>
         </Container>
       ) : (
-        <div>
-          <SetWalletAddress isLoggedIn={isLoggedIn} />
-        </div>
+        <SetWalletAddress isLoggedIn={isLoggedIn} />
       )}
     </Section>
   );