GitHub/trunk-server
1
0
Fork 0
mirror of https://github.com/openmhz/trunk-server.git synced 2026-11-14 17:58:02 -05:00
Code Issues Packages Projects Releases Wiki Activity

Further cleaning and improvements

Browse Source
This commit is contained in:
Luke Berndt
2021-01-26 22:24:04 -05:00
parent 6eebd9cc5e
commit 6f7b86f0cb
44 changed files with 27 additions and 1644 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
account-old/src/client/Billing/Billing.js
View File

@@ -1,86 +0,0 @@
import React, { Component } from "react";
import { Elements, StripeProvider} from 'react-stripe-elements';
import { Container, Header, Segment, Icon, Divider, Button, Message } from 'semantic-ui-react'
import PaymentSource from "./PaymentSource"
import InvoiceList from "./InvoiceList"
// ----------------------------------------------------
class Billing extends Component {
constructor(props) {
super(props);
this.handleShowAddSource = this.handleShowAddSource.bind(this);
this.handleNewSource = this.handleNewSource.bind(this);
this.state = {showAddSource: false};
}
componentDidMount() {
this.props.fetchBilling();
this.props.fetchInvoices();
}
handleShowAddSource() {
this.setState({
showAddSource: !this.state.showAddSource
});
}
handleNewSource(newSource) {
this.setState({
showAddSource: false
});
this.props.updateCard(newSource);
}
//https://stackoverflow.com/questions/36559661/how-can-i-dispatch-from-child-components-in-react-redux
//https://stackoverflow.com/questions/42597602/react-onclick-pass-event-with-parameter
render() {
var name = this.props.user.firstName + " " + this.props.user.lastName;
var section=<div/>;
if (!this.props.billing || this.state.showAddSource) {
section = (<div>
<StripeProvider apiKey="">
<Elements>
<PaymentSource name={name} email={this.props.user.email} onCancel={this.handleShowAddSource} onSubmit={this.handleNewSource}/>
</Elements>
</StripeProvider>
</div>)
} else {
section = (<Segment padded='very'>
<Divider horizontal>
<Header as='h3'>
<Icon name='credit card outline' />
Card on File
</Header>
</Divider>
<Header as='h3'>
<Header.Content>
{this.props.billing.source.name} xxxx-{this.props.billing.source.last4}
<Header.Subheader>Expires {this.props.billing.source.exp_month} / {this.props.billing.source.exp_year}</Header.Subheader>
</Header.Content>
</Header>
<Button onClick={this.handleShowAddSource}>Change Card</Button>
</Segment>)
}
return (
<Container text>
<Header as='h2'>
Payment Method</Header>
<p>It is free to use OpenMHz. Add payment in order to upgrade features.</p>
{section}
<Header as='h2'>
Payment History</Header>
{this.props.billing.invoices.length > 0 ? (
<InvoiceList invoices={this.props.billing.invoices}/>
) : (
<Message>
<Message.Header>Changes in Service</Message.Header>
<p>
We updated our privacy policy here to better service our customers. We recommend reviewing the
changes.
</p>
</Message>
)}
</Container>
);
}
}
export default Billing;

17
account-old/src/client/Billing/BillingContainer.js
View File

@@ -1,17 +0,0 @@
import { connect } from "react-redux"
import * as billingActions from "./billing-actions"
import Billing from "./Billing"
function mapStateToProps(state) {
return {
user: state.user,
billing: state.billing
}
}
export default connect(
mapStateToProps,
billingActions
)(Billing)

43
account-old/src/client/Billing/InvoiceList.js
View File

@@ -1,43 +0,0 @@
import React, { Component } from "react";
import {
Container,
Table
} from "semantic-ui-react";
class InvoiceList extends Component {
constructor(props) {
super(props);
}
render() {
const DATE_OPTIONS = { weekday: 'short', year: 'numeric', month: 'short', day: 'numeric' };
return (
<Table singleLine>
<Table.Header>
<Table.Row>
<Table.HeaderCell>Date</Table.HeaderCell>
<Table.HeaderCell>Amount</Table.HeaderCell>
<Table.HeaderCell>Status</Table.HeaderCell>
<Table.HeaderCell></Table.HeaderCell>
</Table.Row>
</Table.Header>
<Table.Body>
{this.props.invoices.map((invoice, index) => {
return( <Table.Row>
<Table.Cell>{(new Date(invoice.date*1000)).toLocaleDateString('en-US', DATE_OPTIONS)}</Table.Cell>
<Table.Cell>${invoice.amount_due/100}</Table.Cell>
<Table.Cell>{invoice.status} </Table.Cell>
<Table.Cell><a href={invoice.invoice_pdf}>View Invoice</a> </Table.Cell>
</Table.Row>)
} )}
</Table.Body>
</Table>
)
}
}
export default InvoiceList;

52
account-old/src/client/Billing/PaymentSource.js
View File

@@ -1,52 +0,0 @@
import React, {Component} from 'react';
import { Header, Button, Segment, Form, Icon, Divider } from 'semantic-ui-react'
import {CardElement, injectStripe} from 'react-stripe-elements';
class PaymentSource extends Component {
constructor(props) {
super(props);
this.submit = this.submit.bind(this);
this.handleInputChange = this.handleInputChange.bind(this);
this.state = {name: this.props.name ? this.props.name : ""};
}
handleInputChange = (e, { name, value }) => this.setState({ [name]: value });
async submit(ev) {
console.log("here");
this.props.stripe.createSource({type: 'card', owner: {
name: this.state.name, email: this.props.email
}}).then(({source}) => {
this.props.onSubmit({sourceId: source.id })
console.log('Received Stripe token:', source);
});
}
render() {
return (
<div className="checkout">
<Segment padded='very'>
<Form>
<Divider horizontal>
<Header as='h3'>
<Icon name='credit card outline' />
Credit or Debit Card
</Header>
</Divider>
<Form.Input fluid label='Name on card' placeholder='Name'
name="name"
defaultValue={this.state.name}
onChange={this.handleInputChange}/>
<Form.Field>
<CardElement />
</Form.Field>
<Divider hidden />
<Button onClick={this.submit}>Submit</Button>
</Form>
<img src="../../resources/powered_by_stripe.png" />
</Segment>
</div>
);
}
}
export default injectStripe(PaymentSource);

145
account-old/src/client/Billing/billing-actions.js
View File

@@ -1,145 +0,0 @@
import axios from "axios";
import * as types from "./billing-constants";
import { push } from 'connected-react-router';
function beginUpdateCard() {
return { type: types.UPDATE_CARD };
}
function updateCardSuccess(data) {
return { type: types.UPDATE_CARD_SUCCESS, data };
}
function updateCardError(data) {
return { type: types.UPDATE_CARD_ERROR, data };
}
function beginFetchBilling() {
return { type: types.FETCH_BILLING };
}
function fetchBillingSuccess(data) {
return { type: types.FETCH_BILLING_SUCCESS,
data };
}
function fetchBillingError(data) {
return { type: types.FETCH_BILLING_ERROR,
data };
}
function beginFetchInvoice() {
return { type: types.FETCH_INVOICE };
}
function fetchInvoiceSuccess(data) {
return { type: types.FETCH_INVOICE_SUCCESS,
data };
}
function fetchInvoiceError(data) {
return { type: types.FETCH_INVOICE_ERROR,
data };
}
function makeUserRequest(method, data, api = "/login") {
// returns a Promise
return axios({
method: method,
url: api,
data: data
});
}
export function changeUrl(url) {
return dispatch => {
dispatch(push(url));
};
}
// Example of an Async Action Creator
// http://redux.js.org/docs/advanced/AsyncActions.html
export function updateCard(data) {
return dispatch => {
dispatch(beginUpdateCard());
return makeUserRequest("post", data, "/api/customer/", {withCredentials: true})
.then(response => {
if (response.data.success) {
dispatch(updateCardSuccess(response.data));
} else {
dispatch(updateCardError());
let registerMessage = response.data.message;
return registerMessage;
}
})
.catch(response => {
if (response instanceof Error) {
// Something happened in setting up the request that triggered an Error
console.log("Error", response.message);
}
});
};
}
export function fetchBilling() {
return (dispatch, getState) => {
dispatch(beginFetchBilling());
return axios
.get("/api/billing", {withCredentials: true})
.then(response => {
if (response.data.success) {
dispatch(fetchBillingSuccess(response.data));
} else {
dispatch(fetchBillingError());
let registerMessage = response.data.message;
return registerMessage;
}
})
.catch(response => {
if (response instanceof Error) {
// Something happened in setting up the request that triggered an Error
console.log("Error", response.message);
}
});
};
}
export function fetchInvoices() {
return (dispatch, getState) => {
dispatch(beginFetchInvoice());
return axios
.get("/api/invoices", {withCredentials: true})
.then(response => {
if (response.data.success) {
dispatch(fetchInvoiceSuccess(response.data));
} else {
dispatch(fetchInvoiceError());
let registerMessage = response.data.message;
return registerMessage;
}
})
.catch(response => {
if (response instanceof Error) {
// Something happened in setting up the request that triggered an Error
console.log("Error", response.message);
}
});
};
}

11
account-old/src/client/Billing/billing-constants.js
View File

@@ -1,11 +0,0 @@
export const UPDATE_CARD = "UPDATE_CARD"
export const UPDATE_CARD_SUCCESS = "UPDATE_CARD_SUCCESS"
export const UPDATE_CARD_ERROR = "UPDATE_CARD_ERROR"
export const FETCH_BILLING = "FETCH_BILLING"
export const FETCH_BILLING_SUCCESS = "FETCH_BILLING_SUCCESS"
export const FETCH_BILLING_ERROR = "FETCH_BILLING_ERROR"
export const FETCH_INVOICE = "FETCH_INVOICE"
export const FETCH_INVOICE_SUCCESS = "FETCH_INVOICE_SUCCESS"
export const FETCH_INVOICE_ERROR = "FETCH_INVOICE_ERROR"

71
account-old/src/client/Billing/billing-reducer.js
View File

@@ -1,71 +0,0 @@
import {
UPDATE_CARD,
UPDATE_CARD_SUCCESS,
UPDATE_CARD_ERROR,
FETCH_BILLING,
FETCH_BILLING_SUCCESS,
FETCH_BILLING_ERROR,
FETCH_INVOICE,
FETCH_INVOICE_SUCCESS,
FETCH_INVOICE_ERROR
} from "./billing-constants";
function updateObject(oldObject, newValues) {
// Encapsulate the idea of passing a new object as the first parameter
// to Object.assign to ensure we correctly copy data instead of mutating
return Object.assign({}, oldObject, newValues);
}
function updateObjectInArray(array, shortName, updatedItem) {
return array.map( item => {
if(item.shortName !== shortName) {
// This isn't the item we care about - keep it as-is
return item;
}
// Otherwise, this is the one we want - return an updated value
return {
...item,
...updatedItem
};
});
}
const billing = (
state = {
isWaiting: false,
source: false,
invoices: []},
action
) => {
switch (action.type) {
case UPDATE_CARD:
case FETCH_BILLING:
case FETCH_INVOICE:
return Object.assign({}, state, { isWaiting: true});
case UPDATE_CARD_SUCCESS:
return Object.assign({}, state, { source: action.data.source, isWaiting: false});
case FETCH_BILLING_SUCCESS:
return Object.assign({}, state, { source: action.data.source, isWaiting: false});
case FETCH_INVOICE_SUCCESS:
return Object.assign({}, state, { invoices: action.data.invoices, isWaiting: false});
case UPDATE_CARD_ERROR:
case FETCH_BILLING_ERROR:
case FETCH_INVOICE_ERROR:
return Object.assign({}, state, {
isWaiting: false
});
default:
return state;
}
};
export default billing;