From e0c03972d14d3e25c384e2d9911d7a502c5bb5fa Mon Sep 17 00:00:00 2001 From: Parminder Klair Date: Fri, 7 Jun 2019 17:49:25 +0530 Subject: [PATCH] ability to add customer email for invoice #173 --- src/components/elements/TextGroup.js | 19 +++- src/config/index.js | 4 +- .../components/RecentPayments/PaymentItem.js | 39 ++++---- .../RecentPayments/PaymentItemWeb3.js | 22 +++-- .../components/RecentPayments/ShareInvoice.js | 98 +++++++++++++++++++ .../RecentPayments/ShareInvoiceForm.js | 78 +++++++++++++++ 6 files changed, 228 insertions(+), 32 deletions(-) create mode 100644 src/pages/Dashboard/components/RecentPayments/ShareInvoice.js create mode 100644 src/pages/Dashboard/components/RecentPayments/ShareInvoiceForm.js diff --git a/src/components/elements/TextGroup.js b/src/components/elements/TextGroup.js index 059df42..bd70985 100644 --- a/src/components/elements/TextGroup.js +++ b/src/components/elements/TextGroup.js @@ -17,11 +17,20 @@ const Hint = styled.p` width: 90%; `; -const TextGroup = ({ label, placeholder, error, hint, ...otherProps }) => ( - -
- -
+const TextGroup = ({ + label, + placeholder, + error, + hint, + isVertical, + ...otherProps +}) => ( + + {label && ( +
+ +
+ )}
diff --git a/src/config/index.js b/src/config/index.js index 7b7af69..7d10959 100644 --- a/src/config/index.js +++ b/src/config/index.js @@ -1,7 +1,7 @@ export default { debug: process.env.NODE_ENV === 'development', - APP_VERSION: '0.0.1', - siteName: 'Dexpay', + APP_VERSION: '0.0.4', + siteName: 'Dexpay.me', siteUrl: 'https://dexpay.me', graphQlUri: 'https://dexpay-api.herokuapp.com/', // graphQlUri: 'http://localhost:4000/', diff --git a/src/pages/Dashboard/components/RecentPayments/PaymentItem.js b/src/pages/Dashboard/components/RecentPayments/PaymentItem.js index b2a33ac..7016d9d 100644 --- a/src/pages/Dashboard/components/RecentPayments/PaymentItem.js +++ b/src/pages/Dashboard/components/RecentPayments/PaymentItem.js @@ -3,13 +3,17 @@ import styled from 'styled-components'; import moment from 'moment'; import { truncateHash } from '../../../../utils/helpers'; +import ShareInvoice from './ShareInvoice'; import cryptoIcon from '../../../../assets/dummy/crypto-icon.png'; import FormatCurrency from '../../../../components/FormatCurrency'; import { getCurrencyRates } from '../../../../utils/exchangeRates'; -const Container = styled.a` +const Container = styled.div` padding-left: 1.5rem; `; +const Content = styled.div` + cursor: pointer; +`; const Image = styled.img` margin-top: 6px; `; @@ -49,26 +53,26 @@ class PaymentItem extends React.Component { const { fiatAmount } = this.state; return ( - { - if (payment.status === 'pending') { - onOpenModal(payment); - } else { - window.open( - `https://blockscout.com/poa/dai/tx/${payment.txHash}`, - '_blank' - ); - } - }} - target="_blank" - className="media" - > +

{payment.assetUsed}

-
+ { + if (payment.status === 'pending') { + onOpenModal(payment); + } else { + window.open( + `https://blockscout.com/poa/dai/tx/${payment.txHash}`, + '_blank' + ); + } + }} + target="_blank" + >

@@ -79,11 +83,12 @@ class PaymentItem extends React.Component { {truncateHash(payment.txHash || '')}

-
+
+
); diff --git a/src/pages/Dashboard/components/RecentPayments/PaymentItemWeb3.js b/src/pages/Dashboard/components/RecentPayments/PaymentItemWeb3.js index 28a46fa..886eb7e 100644 --- a/src/pages/Dashboard/components/RecentPayments/PaymentItemWeb3.js +++ b/src/pages/Dashboard/components/RecentPayments/PaymentItemWeb3.js @@ -1,29 +1,34 @@ import React from 'react'; import styled from 'styled-components'; import moment from 'moment'; + +import ShareInvoice from './ShareInvoice'; import { truncateHash } from '../../../../utils/helpers'; import cryptoIcon from '../../../../assets/dummy/crypto-icon.png'; import FormatCurrency from '../../../../components/FormatCurrency'; -const Container = styled.a` +const Container = styled.div` padding-left: 1.5rem; `; +const Content = styled.div` + cursor: pointer; +`; const Image = styled.img` margin-top: 6px; `; const PaymentItemWeb3 = ({ payment }) => ( - +

{payment.currency}

-
+

@@ -33,11 +38,12 @@ const PaymentItemWeb3 = ({ payment }) => ( {truncateHash(payment.transactionHash)}

-
+
+
); diff --git a/src/pages/Dashboard/components/RecentPayments/ShareInvoice.js b/src/pages/Dashboard/components/RecentPayments/ShareInvoice.js new file mode 100644 index 0000000..34ca100 --- /dev/null +++ b/src/pages/Dashboard/components/RecentPayments/ShareInvoice.js @@ -0,0 +1,98 @@ +import React from 'react'; +import styled from 'styled-components'; +import Modal from 'react-responsive-modal'; +import gql from 'graphql-tag'; + +import ShareInvoiceForm from './ShareInvoiceForm'; +import apolloClient from '../../../../utils/apolloClient'; +import dexLogo from '../../../../assets/images/dex-logo-white.png'; + +const mutation = gql` + mutation updateInvoice($id: ID!, $customerEmail: String!) { + updateInvoice(id: $id, input: { customerEmail: $customerEmail }) { + id + } + } +`; + +const Share = styled.div` + text-align: right; +`; + +const Header = styled.div` + display: flex; + justify-content: center; + background-color: #000000; + padding: 2rem; + border-radius: 12px 12px 0 0; +`; +const Logo = styled.img` + width: 150px; + height: auto; +`; + +const Content = styled.div` + display: flex; + justify-content: center; + flex-direction: column; + align-items: center; + padding: 3rem; +`; + +class ShareInvoice extends React.Component { + state = { isModalOpen: false }; + + handleSendInvoice = ({ customerEmail }) => { + const { payment } = this.props; + return apolloClient.mutate({ + mutation, + variables: { id: payment.id, customerEmail } + }); + }; + + renderModal() { + const { isModalOpen } = this.state; + + return ( + this.setState({ isModalOpen: false })} + center + showCloseIcon={false} + styles={{ + modal: { + maxWidth: 'initial', + width: '600px', + maxHight: '770px', + height: 'auto', + borderRadius: '12px', + padding: 0 + } + }} + > +
+ +
+ +

+ Send this transaction details by email +

+ + + + ); + } + + render() { + return ( + + this.setState({ isModalOpen: true })}> + + + {this.renderModal()} + + ); + } +} + +export default ShareInvoice; diff --git a/src/pages/Dashboard/components/RecentPayments/ShareInvoiceForm.js b/src/pages/Dashboard/components/RecentPayments/ShareInvoiceForm.js new file mode 100644 index 0000000..051bc0a --- /dev/null +++ b/src/pages/Dashboard/components/RecentPayments/ShareInvoiceForm.js @@ -0,0 +1,78 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withFormik } from 'formik'; +import * as yup from 'yup'; +import styled from 'styled-components'; +import swal from 'sweetalert'; + +import { TextGroup } from '../../../../components/elements'; + +const Form = styled.form` + display: flex; + flex-direction: column; + align-items: center; +`; + +const ShareInvoiceForm = props => { + const { + values, + errors, + handleChange, + handleBlur, + handleSubmit, + isSubmitting + } = props; + + return ( +
+ + + + ); +}; + +ShareInvoiceForm.propTypes = { + values: PropTypes.object.isRequired, + errors: PropTypes.object.isRequired, + handleChange: PropTypes.func.isRequired, + handleBlur: PropTypes.func.isRequired, + handleSubmit: PropTypes.func.isRequired +}; + +export default withFormik({ + mapPropsToValues: () => ({ + customerEmail: '' + }), + validationSchema: yup.object().shape({ + customerEmail: yup + .string() + .required('Wallet Adress is required!') + .email('Invalid email address') + }), + handleSubmit: (values, { setSubmitting, props }) => { + // console.log('handle submit', values, props); + props + .handleUpdate(values) + .then(() => { + swal('Success!', 'Invoice sent successfully!', 'success'); + }) + .finally(() => { + setSubmitting(false); + }); + }, + displayName: 'ShareInvoiceForm' // helps with React DevTools +})(ShareInvoiceForm);