-
Notifications
You must be signed in to change notification settings - Fork 20
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
ability to add customer email for invoice #173
- Loading branch information
1 parent
39dc53f
commit e0c0397
Showing
6 changed files
with
228 additions
and
32 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
98 changes: 98 additions & 0 deletions
98
src/pages/Dashboard/components/RecentPayments/ShareInvoice.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 ( | ||
| <Modal | ||
| open={isModalOpen} | ||
| onClose={() => this.setState({ isModalOpen: false })} | ||
| center | ||
| showCloseIcon={false} | ||
| styles={{ | ||
| modal: { | ||
| maxWidth: 'initial', | ||
| width: '600px', | ||
| maxHight: '770px', | ||
| height: 'auto', | ||
| borderRadius: '12px', | ||
| padding: 0 | ||
| } | ||
| }} | ||
| > | ||
| <Header> | ||
| <Logo src={dexLogo} alt="Dexpay logo" /> | ||
| </Header> | ||
| <Content> | ||
| <p className="is-size-4 has-text-weight-semibold"> | ||
| Send this transaction details by email | ||
| </p> | ||
| <ShareInvoiceForm handleUpdate={this.handleSendInvoice} /> | ||
| </Content> | ||
| </Modal> | ||
| ); | ||
| } | ||
|
|
||
| render() { | ||
| return ( | ||
| <React.Fragment> | ||
| <Share onClick={() => this.setState({ isModalOpen: true })}> | ||
| <i className="fas fa-share-alt" /> | ||
| </Share> | ||
| {this.renderModal()} | ||
| </React.Fragment> | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| export default ShareInvoice; |
78 changes: 78 additions & 0 deletions
78
src/pages/Dashboard/components/RecentPayments/ShareInvoiceForm.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 ( | ||
| <Form onSubmit={handleSubmit}> | ||
| <TextGroup | ||
| isVertical | ||
| name="customerEmail" | ||
| placeholder="Customer email address" | ||
| value={values.customerEmail} | ||
| onChange={handleChange} | ||
| onBlur={handleBlur} | ||
| error={errors.customerEmail} | ||
| /> | ||
| <button | ||
| type="submit" | ||
| className={`button is-black is-uppercase is-medium ${isSubmitting && | ||
| 'is-loading'}`} | ||
| > | ||
| Send | ||
| </button> | ||
| </Form> | ||
| ); | ||
| }; | ||
|
|
||
| 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); |