option.label}
47 | renderOption={(option) => (
48 |
49 | {countryToFlag(option.code)}
50 | {option.label}
51 |
52 | )}
53 | renderInput={(params) => (
54 |
50 |
51 |
75 |
76 | );
77 | }
78 |
--------------------------------------------------------------------------------
/src/workspace/preferences/PreferenceForms.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { makeStyles } from "@material-ui/core/styles";
3 | import Card from "@material-ui/core/Card";
4 | import CardActions from "@material-ui/core/CardActions";
5 | import CardContent from "@material-ui/core/CardContent";
6 | import Button from "@material-ui/core/Button";
7 | import RecordForm, { extractValues } from "../common/RecordForm";
8 |
9 | const useStyles = makeStyles((theme) => ({
10 | root: {
11 | margin: 0,
12 | borderRadius: 0,
13 | width: "50%",
14 | },
15 | details: {
16 | padding: 24,
17 | },
18 | actions: {
19 | width: "100%",
20 | display: "flex",
21 | flexDirection: "row-reverse",
22 | },
23 | action: {
24 | width: 100,
25 | },
26 | actionIcon: {
27 | marginRight: 4,
28 | display: "inline-block",
29 | },
30 | }));
31 |
32 | export default function PreferenceForms(props) {
33 | const classes = useStyles();
34 | const { groups } = props;
35 | const [values, setValues] = React.useState(extractValues(groups));
36 | const [saveDisabled, setSaveDisabled] = React.useState(true);
37 |
38 | const handleValueChange = (field, value) => {
39 | const newValues = JSON.parse(JSON.stringify(values));
40 | newValues[field.identifier] = value;
41 |
42 | setValues(newValues);
43 | };
44 | const tabIndex = 0;
45 | const showMore = true;
46 |
47 | return (
48 |
49 |
50 |
51 |
60 |
61 |
68 | Save
69 |
70 |
71 |
72 |
73 | );
74 | }
75 |
--------------------------------------------------------------------------------
/src/workspace/analytics/RevenueSummary.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { makeStyles } from "@material-ui/core/styles";
3 | import Card from "@material-ui/core/Card";
4 | import CardContent from "@material-ui/core/CardContent";
5 | import Summary from "./Summary";
6 | import Divider from "@material-ui/core/Divider";
7 |
8 | const useStyles = makeStyles((theme) => ({
9 | root: {
10 | padding: 20,
11 | borderRadius: 0,
12 | minHeight: 700,
13 | maxHeight: 700,
14 | display: "flex",
15 | flexDirection: "column",
16 | justifyContent: "space-evenly",
17 | },
18 | details: {
19 | display: "flex",
20 | flexDirection: "column",
21 | },
22 | button: {
23 | padding: 15,
24 | marginLeft: "auto",
25 | },
26 | upIcon: {
27 | verticalAlign: "bottom",
28 | fontSize: 32,
29 | },
30 | up: {
31 | color: theme.palette.success.main,
32 | },
33 | downIcon: {
34 | verticalAlign: "bottom",
35 | fontSize: 32,
36 | },
37 | down: {
38 | color: theme.palette.error.main,
39 | },
40 | small: {
41 | fontSize: 14,
42 | },
43 | }));
44 |
45 | export default function RevenueSummary(props) {
46 | const classes = useStyles();
47 | const { data } = props;
48 | return (
49 |
50 |
51 |
75 |
76 | );
77 | }
78 |
--------------------------------------------------------------------------------
/src/workspace/analytics/PlanSummary.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { makeStyles } from "@material-ui/core/styles";
3 | import Card from "@material-ui/core/Card";
4 | import CardContent from "@material-ui/core/CardContent";
5 | import Summary from "./Summary";
6 | import Divider from "@material-ui/core/Divider";
7 |
8 | const useStyles = makeStyles((theme) => ({
9 | root: {
10 | padding: 20,
11 | borderRadius: 0,
12 | minHeight: 700,
13 | maxHeight: 700,
14 | display: "flex",
15 | flexDirection: "column",
16 | justifyContent: "space-evenly",
17 | },
18 | details: {
19 | display: "flex",
20 | flexDirection: "column",
21 | },
22 | button: {
23 | padding: 15,
24 | marginLeft: "auto",
25 | },
26 | upIcon: {
27 | verticalAlign: "bottom",
28 | fontSize: 32,
29 | },
30 | up: {
31 | color: theme.palette.success.main,
32 | },
33 | downIcon: {
34 | verticalAlign: "bottom",
35 | fontSize: 32,
36 | },
37 | down: {
38 | color: theme.palette.error.main,
39 | },
40 | small: {
41 | fontSize: 14,
42 | },
43 | }));
44 |
45 | export default function PlanSummary(props) {
46 | const classes = useStyles();
47 | const { data } = props;
48 |
49 | return (
50 |
51 |
52 |
76 |
77 | );
78 | }
79 |
--------------------------------------------------------------------------------
/public/404.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Single Page Apps for GitHub Pages
6 |
51 |
52 |
53 |
54 |
--------------------------------------------------------------------------------
/src/workspace/invoice/InvoiceCardTable.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { makeStyles } from "@material-ui/core/styles";
3 | import Table from "@material-ui/core/Table";
4 | import TableBody from "@material-ui/core/TableBody";
5 | import TableCell from "@material-ui/core/TableCell";
6 | import TableContainer from "@material-ui/core/TableContainer";
7 | import TableHead from "@material-ui/core/TableHead";
8 | import TableRow from "@material-ui/core/TableRow";
9 | import { grey } from "@material-ui/core/colors";
10 | import { toDateString } from "../../utils";
11 |
12 | const useStyles = makeStyles({
13 | table: {
14 | width: "100%",
15 | borderLeftWidth: 2,
16 | borderLeftColor: grey[200],
17 | borderLeftStyle: "solid",
18 | borderRightWidth: 2,
19 | borderRightColor: grey[200],
20 | borderRightStyle: "solid",
21 | },
22 | head: {
23 | backgroundColor: grey[200],
24 | },
25 | dateCell: {
26 | width: 300,
27 | },
28 | });
29 |
30 | export default function InvoiceCardTable(props) {
31 | const { rows } = props;
32 | const classes = useStyles();
33 |
34 | return (
35 |
36 |
37 |
38 |
39 | Period
40 | Description
41 | Quantity
42 | Price
43 | Subtotal
44 |
45 |
46 |
47 | {rows.map((row) => (
48 |
49 |
50 | {toDateString(row.startedAt) +
51 | "—" +
52 | toDateString(row.endedAt)}
53 |
54 | {row.description}
55 | {row.quantity}
56 | {row.price} INR
57 |
58 | {row.subtotal} INR
59 |
60 |
61 | ))}
62 |
63 |
64 |
65 | );
66 | }
67 |
--------------------------------------------------------------------------------
/src/workspace/invoice/InvoiceFormDrawer.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import PropTypes from "prop-types";
3 |
4 | import { extractValues } from "../common/RecordForm";
5 | import FormDrawer from "../common/FormDrawer";
6 |
7 | // text, large_text, number, date_picker, date_range_picker, switch, phone_number, email_address
8 | // multiple_options (multiselect), single_option (drop down)
9 | // lookup - organization, user, invoice
10 |
11 | // Only top level children can have quickAdd. Groups cannot have required, unique, multipleValues, mininmumValues, maximumValues.
12 | // Groups can have readOnly, hidden, tooltip
13 | // The same person can work in multiple organizations. But such cases are rare. Therefore, the system should be kept
14 | // simple and not accomodate such cases. given, there are other work arounds.
15 |
16 | // The user name should be unique across your organization.
17 | const groups = [
18 | {
19 | label: "Basic",
20 | children: [
21 | {
22 | label: "Notes",
23 | identifier: "notes",
24 | type: "large_text",
25 | rows: 4,
26 | required: false,
27 | readOnly: false,
28 | quickAdd: true,
29 | unique: false,
30 | hidden: false,
31 | tooltip: "The notes for the invoice.",
32 | multipleValues: false,
33 | defaultValue: "",
34 | },
35 | {
36 | label: "Terms and Conditions",
37 | identifier: "termsAndConditions",
38 | rows: 4,
39 | type: "large_text",
40 | required: false,
41 | readOnly: false,
42 | quickAdd: true,
43 | unique: false,
44 | hidden: false,
45 | tooltip: "The terms and conditions applied to the invoice.",
46 | multipleValues: false,
47 | defaultValue: "",
48 | },
49 | ],
50 | },
51 | ];
52 |
53 | function InvoiceFormDrawer(props) {
54 | const { title, onSave, showMore, open } = props;
55 |
56 | const values = props.invoice || extractValues(groups);
57 | return (
58 |
26 |
27 | {/*
28 | 0 && selectionCount < rowCount
31 | }
32 | checked={rowCount > 0 && selectionCount === rowCount}
33 | onChange={onSelectAll}
34 | />
35 | */}
36 | {headers.map((header) => (
37 |
43 |
48 | {header.label}
49 | {orderBy === header.id ? (
50 |
51 | {order === "desc"
52 | ? "sorted descending"
53 | : "sorted ascending"}
54 |
55 | ) : null}
56 |
57 |
58 | ))}
59 |
60 |
61 | );
62 | }
63 |
64 | WorkspaceTableHead.propTypes = {
65 | classes: PropTypes.object.isRequired,
66 | selectionCount: PropTypes.number.isRequired,
67 | onRequestSort: PropTypes.func.isRequired,
68 | onSelectAll: PropTypes.func.isRequired,
69 | order: PropTypes.oneOf(["asc", "desc"]).isRequired,
70 | orderBy: PropTypes.string.isRequired,
71 | rowCount: PropTypes.number.isRequired,
72 | };
73 |
--------------------------------------------------------------------------------
/src/workspace/invoice/ViewInvoice.js:
--------------------------------------------------------------------------------
1 | import React, { useEffect } from "react";
2 | import CircularProgress from "@material-ui/core/CircularProgress";
3 | import { makeStyles } from "@material-ui/core/styles";
4 | import { connect } from "react-redux";
5 | import { useParams, withRouter } from "react-router-dom";
6 |
7 | import WorkspaceToolbar from "../common/WorkspaceToolbar";
8 | import InvoiceCard from "./InvoiceCard";
9 | import * as actions from "../../redux/actions";
10 |
11 | import DownloadIcon from "@material-ui/icons/GetApp";
12 | import EditIcon from "@material-ui/icons/Edit";
13 |
14 | const useStyles = makeStyles((theme) => ({
15 | container: {
16 | padding: 16,
17 | },
18 | InvoiceCard: {
19 | maxWidth: 600,
20 | },
21 | section: {
22 | marginBottom: 32,
23 | },
24 | sectionTitle: {
25 | fontSize: 20,
26 | marginBottom: 16,
27 | fontWeight: 500,
28 | },
29 | subscriptions: {},
30 | progress: {
31 | position: "fixed",
32 | top: "50%",
33 | left: "50%",
34 | marginTop: -24,
35 | marginLeft: -24,
36 | },
37 | }));
38 |
39 | const primaryActions = [
40 | {
41 | identifier: "edit",
42 | title: "Edit",
43 | icon: EditIcon,
44 | primary: true,
45 | },
46 | {
47 | identifier: "download",
48 | title: "Download",
49 | icon: DownloadIcon,
50 | primary: true,
51 | },
52 | ];
53 |
54 | function ViewInvoice(props) {
55 | const classes = useStyles();
56 | const { fetchInvoice, clearInvoice, invoice, editInvoice } = props;
57 | const { identifier } = useParams();
58 |
59 | const handleAction = (type) => {
60 | if (type === "edit") {
61 | editInvoice(invoice);
62 | }
63 | };
64 |
65 | useEffect(() => {
66 | fetchInvoice(identifier);
67 | return clearInvoice;
68 | }, [identifier, fetchInvoice, clearInvoice]);
69 |
70 | return (
71 |
72 |
77 | {!invoice && (
78 |
79 | )}
80 | {invoice && (
81 |
82 |
87 | )}
88 |
58 | {`Month: ${months[label]}`}
61 |
63 | {`${name}: ${payload[0].value}`}
64 |
65 |
66 | );
67 | }
68 | return null;
69 | };
70 | return (
71 |
72 |
73 | {title}
74 | {info}
75 |
76 |
77 |
86 |
98 |
99 |
58 |
59 | {!transaction && (
60 |
61 | )}
62 | {transaction && (
63 |
64 |
65 |
69 | General
70 |
71 |
83 |
84 | )}
85 |
54 |
55 | {!plan && (
56 |
57 | )}
58 | {plan && (
59 |
60 |
61 |
65 | General
66 |
67 |
83 |
84 |
85 | )}
86 |
70 |
71 | {`Month: ${months[label]}`}
72 |
73 |
76 |
80 | ◼
81 |
82 |
83 | {`${name}: ${payload[index].value}`}
84 |
85 |
88 | );
89 | }
90 | return null;
91 | };
92 |
93 | return (
94 |
95 |
96 | {title}
97 | {info}
98 |
99 |
100 |
109 |
123 |
124 |
50 |
51 | {!subscription && (
52 |
53 | )}
54 | {subscription && (
55 |
56 |
57 |
61 | General
62 |
63 |
91 |
92 | )}
93 |
104 | ₹}
106 | title="Transaction"
107 | />
108 |
109 |
110 |
111 | {fields.map((field) => (
112 |
113 |
114 |
119 | {field.title}
120 |
121 |
122 | {field.render(props)}
123 |
124 |
125 |
126 | ))}
127 |
128 |
129 |
130 | {/*
131 |
132 |
135 | */}
136 |
137 | );
138 | }
139 |
140 | export default TransactionCard;
141 |
--------------------------------------------------------------------------------
/src/layouts/MainToolbar.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import {
3 | AppBar,
4 | Button,
5 | Toolbar,
6 | makeStyles,
7 | IconButton,
8 | } from "@material-ui/core";
9 | import { withRouter } from "react-router-dom";
10 | import clsx from "clsx";
11 | import { connect } from "react-redux";
12 |
13 | import AddIcon from "@material-ui/icons/Add";
14 | import MenuIcon from "@material-ui/icons/Menu";
15 | import LogoutIcon from "@material-ui/icons/ExitToApp";
16 |
17 | import AddDialog from "./AddDialog";
18 | import * as actions from "../redux/actions";
19 |
20 | const drawerWidth = 240;
21 |
22 | const useStyles = makeStyles((theme) => ({
23 | logoButton: {
24 | height: 64,
25 | width: 180,
26 | borderRadius: 0,
27 | },
28 | appBar: {
29 | zIndex: theme.zIndex.drawer + 1,
30 | transition: theme.transitions.create(["width", "margin"], {
31 | easing: theme.transitions.easing.sharp,
32 | duration: theme.transitions.duration.leavingScreen,
33 | }),
34 | color: theme.palette.primary,
35 | background: "white",
36 | },
37 | appBarShift: {
38 | marginLeft: drawerWidth,
39 | width: `calc(100% - ${drawerWidth}px)`,
40 | transition: theme.transitions.create(["width", "margin"], {
41 | easing: theme.transitions.easing.sharp,
42 | duration: theme.transitions.duration.enteringScreen,
43 | }),
44 | },
45 | toolbar: {},
46 | hide: {
47 | display: "none",
48 | },
49 | buttons: {
50 | marginLeft: "auto",
51 | },
52 | addButton: {
53 | paddingLeft: 16,
54 | paddingRight: 16,
55 | },
56 | logoutButton: {
57 | marginLeft: 8,
58 | paddingLeft: 16,
59 | paddingRight: 16,
60 | },
61 | icon: {
62 | dispay: "inline-block",
63 | marginRight: 4,
64 | },
65 | }));
66 |
67 | function MainToolbar(props) {
68 | const { toggleDrawer, drawerOpen, user, logout } = props;
69 | const classes = useStyles();
70 | const [addDialogAnchor, setAddDialogAnchor] = React.useState(null);
71 |
72 | const handleOpenAddDialog = (event) =>
73 | setAddDialogAnchor(event.currentTarget);
74 | const handleCloseAddDialog = () => setAddDialogAnchor(null);
75 |
76 | return (
77 |
83 |
84 |
89 |
91 |
92 |
93 |
99 |
100 |
107 |
110 |
111 |
118 |
121 |
129 |
130 | );
131 | }
132 |
133 | function mapStateToProps(state) {
134 | return {
135 | user: state.user,
136 | };
137 | }
138 |
139 | const mapDispatchToProps = {
140 | fetchUser: actions.fetchUser,
141 | logout: actions.logout,
142 | };
143 |
144 | export default connect(
145 | mapStateToProps,
146 | mapDispatchToProps
147 | )(withRouter(MainToolbar));
148 |
--------------------------------------------------------------------------------
/src/workspace/api-key/APIKeyFormDrawer.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import PropTypes from "prop-types";
3 |
4 | import { extractValues } from "../common/RecordForm";
5 |
6 | import FormDrawer from "../common/FormDrawer";
7 |
8 | // text, large_text, number, date_picker, date_range_picker, switch, phone_number, email_address
9 | // multiple_options (multiselect), single_option (drop down)
10 | // lookup - organization, user, account
11 |
12 | // Only top level children can have quickAdd. Groups cannot have required, unique, multipleValues, mininmumValues, maximumValues.
13 | // Groups can have readOnly, hidden, tooltip
14 | // The same person can work in multiple organizations. But such cases are rare. Therefore, the system should be kept
15 | // simple and not accomodate such cases. given, there are other work arounds.
16 |
17 | // The user name should be unique across your organization.
18 | const groups = [
19 | {
20 | label: "Basic",
21 | children: [
22 | {
23 | label: "Name",
24 | identifier: "name",
25 | type: "text",
26 | required: true,
27 | readOnly: false,
28 | quickAdd: true,
29 | unique: true,
30 | hidden: false,
31 | tooltip: "The name of the API key.",
32 | multipleValues: false,
33 | defaultValue: "",
34 | },
35 | {
36 | label: "Read Permissions",
37 | identifier: "readPermisions",
38 | type: "multi_select",
39 | options: [
40 | {
41 | value: "READ_ACCOUNTS",
42 | title: "Accounts",
43 | },
44 | {
45 | value: "READ_SUBSCRIPTIONS",
46 | title: "Subscriptions",
47 | },
48 | {
49 | value: "READ_INVOICES",
50 | title: "Invoices",
51 | },
52 | {
53 | value: "READ_TRANSACTIONS",
54 | title: "Transactions",
55 | },
56 | ],
57 | required: true,
58 | readOnly: false,
59 | quickAdd: true,
60 | unique: false,
61 | hidden: false,
62 | tooltip:
63 | "The resources that the API key provides read access to.",
64 | multipleValues: false,
65 | defaultValue: [],
66 | },
67 | {
68 | label: "Read Write Permissions",
69 | identifier: "readWritePermisions",
70 | type: "multi_select",
71 | options: [
72 | {
73 | value: "READ_WRITE_ACCOUNTS",
74 | title: "Accounts",
75 | },
76 | {
77 | value: "READ_WRITE_SUBSCRIPTIONS",
78 | title: "Subscriptions",
79 | },
80 | {
81 | value: "READ_WRITE_INVOICES",
82 | title: "Invoices",
83 | },
84 | {
85 | value: "READ_WRITE_TRANSACTIONS",
86 | title: "Transactions",
87 | },
88 | ],
89 | required: true,
90 | readOnly: false,
91 | quickAdd: true,
92 | unique: false,
93 | hidden: false,
94 | tooltip:
95 | "The resources that the API key provides read-write access to.",
96 | multipleValues: false,
97 | defaultValue: [],
98 | },
99 | ],
100 | },
101 | ];
102 |
103 | function APIKeyFormDrawer(props) {
104 | const { title, onSave, showMore, open } = props;
105 |
106 | const values = props.account || extractValues(groups);
107 | return (
108 |
104 |
107 | {name.substring(0, 1).toUpperCase()}
108 |
109 | }
110 | title={name}
111 | subheader={code}
112 | subtitle={description}
113 | />
114 |
115 |
116 |
117 | {fields.map((field) => (
118 |
119 |
120 |
125 | {field.title}
126 |
127 |
128 | {field.render(props)}
129 |
130 |
131 |
132 | ))}
133 |
134 |
135 |
136 | {/*
137 |
138 |
141 | */}
142 |
143 | );
144 | }
145 |
146 | export default PlanCard;
147 |
--------------------------------------------------------------------------------
/src/workspace/common/WorkspaceToolbar.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import PropTypes from "prop-types";
3 | import clsx from "clsx";
4 | import { lighten, makeStyles } from "@material-ui/core/styles";
5 | import AppBar from "@material-ui/core/AppBar";
6 | import Button from "@material-ui/core/Button";
7 | import Toolbar from "@material-ui/core/Toolbar";
8 | import Typography from "@material-ui/core/Typography";
9 |
10 | const useToolbarStyles = makeStyles((theme) => ({
11 | appBar: {
12 | color: theme.palette.primary,
13 | background: "white",
14 | },
15 | toolbar: {
16 | paddingLeft: theme.spacing(2),
17 | paddingRight: theme.spacing(1),
18 | },
19 | buttons: {
20 | marginLeft: "auto",
21 | },
22 | action: {
23 | textTransform: "none",
24 | paddingLeft: 16,
25 | paddingRight: 16,
26 | },
27 | title: {
28 | color: theme.palette.text.primary,
29 | fontWeight: 500,
30 | },
31 | highlight:
32 | theme.palette.type === "light"
33 | ? {
34 | color: theme.palette.secondary.main,
35 | backgroundColor: lighten(theme.palette.secondary.light, 0.85),
36 | }
37 | : {
38 | color: theme.palette.text.primary,
39 | backgroundColor: theme.palette.secondary.dark,
40 | },
41 | actionIcon: {
42 | marginRight: 4,
43 | },
44 | }));
45 |
46 | function WorkspaceToolbar(props) {
47 | const classes = useToolbarStyles();
48 | const { title, selectionCount, actions, onAction } = props;
49 |
50 | const makeActionHandler = (identifier) => () => onAction(identifier);
51 |
52 | const normalTitle = (
53 |
59 | {title}
60 |
61 | );
62 |
63 | const selectedTitle = (
64 |
69 | {selectionCount} selected
70 |
71 | );
72 |
73 | const selected = selectionCount > 0;
74 |
75 | const recordButtons = () => {
76 | if (actions) {
77 | return actions.map(
78 | (action) =>
79 | !action.primary && (
80 |
87 |
90 | )
91 | );
92 | }
93 | return null;
94 | };
95 |
96 | const normalButtons = () => {
97 | if (actions) {
98 | return (
99 |
100 | {actions.map(
101 | (action) =>
102 | action.primary && (
103 |
112 |
117 | )
118 | )}
119 |
120 | );
121 | }
122 | return null;
123 | };
124 |
125 | return (
126 |
127 |
132 | {selected ? selectedTitle : normalTitle}
133 |
134 |
135 | {selected ? recordButtons() : normalButtons()}
136 |
137 |
138 |
139 | );
140 | }
141 |
142 | WorkspaceToolbar.propTypes = {
143 | selectionCount: PropTypes.number.isRequired,
144 | };
145 |
146 | export default WorkspaceToolbar;
147 |
--------------------------------------------------------------------------------
/src/layouts/AddDialog.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import PropTypes from "prop-types";
3 | import { makeStyles } from "@material-ui/core/styles";
4 | import Typography from "@material-ui/core/Typography";
5 | import Icon from "@material-ui/core/Icon";
6 | import Grid from "@material-ui/core/Grid";
7 | import Popover from "@material-ui/core/Popover";
8 |
9 | import { connect } from "react-redux";
10 | import {
11 | newAccount,
12 | newSubscription,
13 | newInvoice,
14 | newTransaction,
15 | newPlan,
16 | newAPIKey,
17 | } from "../redux/actions";
18 |
19 | const useStyles = makeStyles((theme) => ({
20 | root: {
21 | minHeight: 260,
22 | minWidth: 400,
23 | overflow: "hidden",
24 | },
25 | main: {
26 | padding: 16,
27 | },
28 | groupTitle: {
29 | fontSize: 12,
30 | backgroundColor: "#F0F0F0",
31 | padding: 8,
32 | paddingLeft: 16,
33 | marginTop: 0,
34 | marginBottom: 0,
35 | textTransform: "uppercase",
36 | },
37 | icon: {
38 | display: "block !important",
39 | marginLeft: "auto !important",
40 | marginRight: "auto !important",
41 | },
42 | link: {
43 | color: "black",
44 | textDecoration: "none",
45 | },
46 | add: {
47 | padding: 12,
48 | "&:hover": {
49 | background: "#D3D3D3",
50 | },
51 | width: 100,
52 | borderRadius: 4,
53 | cursor: "pointer",
54 | },
55 | linkTitle: {
56 | marginTop: 4,
57 | textAlign: "center",
58 | fontSize: 12,
59 | },
60 | }));
61 |
62 | const groups = [
63 | {
64 | title: "Record",
65 | links: [
66 | {
67 | id: "account",
68 | title: "Account",
69 | icon: "account_circle",
70 | action: "newAccount",
71 | },
72 | {
73 | id: "subscription",
74 | title: "Subscription",
75 | icon: "autorenew",
76 | action: "newSubscription",
77 | },
78 | {
79 | id: "transaction",
80 | title: "Transaction",
81 | icon: "monetization_on",
82 | action: "newTransaction",
83 | },
84 | ],
85 | },
86 | {
87 | title: "Configuration",
88 | links: [
89 | {
90 | id: "plan",
91 | title: "Plan",
92 | icon: "local_offer",
93 | action: "newPlan",
94 | },
95 | {
96 | id: "api-key",
97 | title: "API Key",
98 | icon: "code",
99 | action: "newAPIKey",
100 | },
101 | ],
102 | },
103 | ];
104 |
105 | function AddDialog(props) {
106 | const classes = useStyles();
107 | const { onClose, open, anchor } = props;
108 | const makeHandler = (link) => () => {
109 | onClose();
110 | props[link.action]();
111 | };
112 |
113 | return (
114 |
127 |
128 | {groups.map((group, index) => (
129 |
130 |
{group.title}
131 |
136 | {group.links.map((link, index) => (
137 |
138 |
142 |
143 | {link.icon}
144 |
145 |
148 | {link.title}
149 |
150 |
151 |
152 | ))}
153 |
154 |
155 | ))}
156 |
158 | );
159 | }
160 |
161 | AddDialog.propTypes = {
162 | onClose: PropTypes.func.isRequired,
163 | open: PropTypes.bool.isRequired,
164 | selectedValue: PropTypes.string.isRequired,
165 | };
166 |
167 | const mapDispatchToProps = {
168 | newAccount,
169 | newSubscription,
170 | newInvoice,
171 | newTransaction,
172 | newPlan,
173 | newAPIKey,
174 | };
175 |
176 | export default connect(null, mapDispatchToProps)(AddDialog);
177 |
--------------------------------------------------------------------------------
/src/workspace/transaction/TransactionFormDrawer.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import PropTypes from "prop-types";
3 |
4 | import { extractValues } from "../common/RecordForm";
5 | import FormDrawer from "../common/FormDrawer";
6 |
7 | const groups = [
8 | {
9 | label: "Basic",
10 | children: [
11 | {
12 | label: "Reference ID",
13 | identifier: "referenceId",
14 | type: "text",
15 | required: true,
16 | readOnly: false,
17 | quickAdd: true,
18 | unique: false,
19 | hidden: false,
20 | tooltip: "Reference ID of the transaction.",
21 | multipleValues: false,
22 | defaultValue: "",
23 | },
24 | {
25 | label: "Comments",
26 | identifier: "comments",
27 | type: "large_text",
28 | required: false,
29 | readOnly: false,
30 | quickAdd: true,
31 | unique: false,
32 | hidden: false,
33 | tooltip: "Any comments on the transaction.",
34 | multipleValues: false,
35 | defaultValue: "",
36 | rows: 4,
37 | validations: "maxLength:200",
38 | validationErrors: {
39 | maxLength: "The comment must be 0-200 characters long.",
40 | },
41 | },
42 | {
43 | label: "Amount",
44 | identifier: "amount",
45 | type: "number",
46 | required: false,
47 | readOnly: false,
48 | quickAdd: true,
49 | unique: false,
50 | hidden: false,
51 | tooltip: "Amount of the transaction.",
52 | multipleValues: false,
53 | defaultValue: 0,
54 | validations: "isNumeric",
55 | validationErrors: {
56 | isNumeric: "Please enter a valid number.",
57 | },
58 | },
59 | {
60 | label: "Tax",
61 | identifier: "tax",
62 | type: "number",
63 | required: false,
64 | readOnly: false,
65 | quickAdd: true,
66 | unique: false,
67 | hidden: false,
68 | tooltip: "Tax of the transaction.",
69 | multipleValues: false,
70 | defaultValue: 0,
71 | validations: "isNumeric",
72 | validationErrors: {
73 | isNumeric: "Please enter a valid number.",
74 | },
75 | },
76 | {
77 | label: "Action",
78 | identifier: "action",
79 | type: "select",
80 | options: [
81 | {
82 | value: "purchase",
83 | title: "Purchase",
84 | },
85 | {
86 | value: "verify",
87 | title: "Verify",
88 | },
89 | {
90 | value: "refund",
91 | title: "Refund",
92 | },
93 | ],
94 | required: false,
95 | readOnly: false,
96 | quickAdd: true,
97 | unique: false,
98 | hidden: false,
99 | tooltip: "Action can be purchase, verify or refund.",
100 | multipleValues: false,
101 | defaultValue: "purchase",
102 | },
103 | {
104 | label: "Payment Method",
105 | identifier: "paymentMethod",
106 | type: "select",
107 | options: [
108 | {
109 | value: "cash",
110 | title: "Cash",
111 | },
112 | {
113 | value: "credit_card",
114 | title: "Credit Card",
115 | },
116 | {
117 | value: "debit_card",
118 | title: "Debit Card",
119 | },
120 | {
121 | value: "online",
122 | title: "Online / Netbanking",
123 | },
124 | ],
125 | required: false,
126 | readOnly: false,
127 | quickAdd: true,
128 | unique: false,
129 | hidden: false,
130 | tooltip: "Method of Payment.",
131 | multipleValues: false,
132 | defaultValue: "cash",
133 | },
134 | ],
135 | },
136 | ];
137 |
138 | function TransactionFormDrawer(props) {
139 | const { title, onSave, showMore, open } = props;
140 |
141 | const values = props.transaction || extractValues(groups);
142 | return (
143 |
47 |
48 |
49 |
54 | Subscribers
55 |
56 |
57 |
63 |
65 |
71 |
76 |
77 |
78 |
79 |
84 | Revenue
85 |
86 |
87 |
93 |
95 |
101 |
106 |
107 |
108 |
109 |
114 | Plans
115 |
116 |
117 |
123 |
125 |
131 |
136 |
137 |
138 |
95 | {addressLine1 && (
96 |
97 | {addressLine1}
99 | )}
100 | {addressLine2 && (
101 |
102 | {addressLine2}
103 |
105 | )}
106 | {city && (
107 |
108 | {city}
109 |
111 | )}
112 | {state && (
113 |
114 | {state}
115 |
117 | )}
118 | {country && (
119 |
120 | {getCountryName(country)}
121 |
123 | )}
124 |
125 | ) : (
126 | "Unavailable"
127 | );
128 | },
129 | },
130 | ];
131 |
132 | function AccountCard(props) {
133 | const classes = useStyles();
134 | const {
135 | className,
136 | firstName,
137 | lastName,
138 | userName,
139 | onEdit /*, onClose */,
140 | } = props;
141 |
142 | return (
143 |
144 |
147 | {firstName.substring(0, 1).toUpperCase()}
148 |
149 | }
150 | title={firstName + " " + lastName}
151 | subheader={userName}
152 | />
153 |
154 |
155 |
156 | {fields.map((field) => (
157 |
158 |
159 |
164 | {field.title}
165 |
166 |
167 | {field.render(props)}
168 |
169 |
170 |
171 | ))}
172 |
173 |
174 |
175 |
176 | {/*
177 | */}
180 |
181 |
184 |
185 |
186 | );
187 | }
188 |
189 | export default AccountCard;
190 |
--------------------------------------------------------------------------------
/src/serviceWorker.js:
--------------------------------------------------------------------------------
1 | // This optional code is used to register a service worker.
2 | // register() is not called by default.
3 |
4 | // This lets the app load faster on subsequent visits in production, and gives
5 | // it offline capabilities. However, it also means that developers (and users)
6 | // will only see deployed updates on subsequent visits to a page, after all the
7 | // existing tabs open on the page have been closed, since previously cached
8 | // resources are updated in the background.
9 |
10 | // To learn more about the benefits of this model and instructions on how to
11 | // opt-in, read https://bit.ly/CRA-PWA
12 |
13 | const isLocalhost = Boolean(
14 | window.location.hostname === "localhost" ||
15 | // [::1] is the IPv6 localhost address.
16 | window.location.hostname === "[::1]" ||
17 | // 127.0.0.0/8 are considered localhost for IPv4.
18 | window.location.hostname.match(
19 | /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
20 | )
21 | );
22 |
23 | export function register(config) {
24 | if (process.env.NODE_ENV === "production" && "serviceWorker" in navigator) {
25 | // The URL constructor is available in all browsers that support SW.
26 | const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
27 | if (publicUrl.origin !== window.location.origin) {
28 | // Our service worker won't work if PUBLIC_URL is on a different origin
29 | // from what our page is served on. This might happen if a CDN is used to
30 | // serve assets; see https://github.com/facebook/create-react-app/issues/2374
31 | return;
32 | }
33 |
34 | window.addEventListener("load", () => {
35 | const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
36 |
37 | if (isLocalhost) {
38 | // This is running on localhost. Let's check if a service worker still exists or not.
39 | checkValidServiceWorker(swUrl, config);
40 |
41 | // Add some additional logging to localhost, pointing developers to the
42 | // service worker/PWA documentation.
43 | navigator.serviceWorker.ready.then(() => {
44 | console.log(
45 | "This web app is being served cache-first by a service " +
46 | "worker. To learn more, visit https://bit.ly/CRA-PWA"
47 | );
48 | });
49 | } else {
50 | // Is not localhost. Just register service worker
51 | registerValidSW(swUrl, config);
52 | }
53 | });
54 | }
55 | }
56 |
57 | function registerValidSW(swUrl, config) {
58 | navigator.serviceWorker
59 | .register(swUrl)
60 | .then((registration) => {
61 | registration.onupdatefound = () => {
62 | const installingWorker = registration.installing;
63 | if (installingWorker == null) {
64 | return;
65 | }
66 | installingWorker.onstatechange = () => {
67 | if (installingWorker.state === "installed") {
68 | if (navigator.serviceWorker.controller) {
69 | // At this point, the updated precached content has been fetched,
70 | // but the previous service worker will still serve the older
71 | // content until all client tabs are closed.
72 | console.log(
73 | "New content is available and will be used when all " +
74 | "tabs for this page are closed. See https://bit.ly/CRA-PWA."
75 | );
76 |
77 | // Execute callback
78 | if (config && config.onUpdate) {
79 | config.onUpdate(registration);
80 | }
81 | } else {
82 | // At this point, everything has been precached.
83 | // It's the perfect time to display a
84 | // "Content is cached for offline use." message.
85 | console.log("Content is cached for offline use.");
86 |
87 | // Execute callback
88 | if (config && config.onSuccess) {
89 | config.onSuccess(registration);
90 | }
91 | }
92 | }
93 | };
94 | };
95 | })
96 | .catch((error) => {
97 | console.error("Error during service worker registration:", error);
98 | });
99 | }
100 |
101 | function checkValidServiceWorker(swUrl, config) {
102 | // Check if the service worker can be found. If it can't reload the page.
103 | fetch(swUrl, {
104 | headers: { "Service-Worker": "script" },
105 | })
106 | .then((response) => {
107 | // Ensure service worker exists, and that we really are getting a JS file.
108 | const contentType = response.headers.get("content-type");
109 | if (
110 | response.status === 404 ||
111 | (contentType != null &&
112 | contentType.indexOf("javascript") === -1)
113 | ) {
114 | // No service worker found. Probably a different app. Reload the page.
115 | navigator.serviceWorker.ready.then((registration) => {
116 | registration.unregister().then(() => {
117 | window.location.reload();
118 | });
119 | });
120 | } else {
121 | // Service worker found. Proceed as normal.
122 | registerValidSW(swUrl, config);
123 | }
124 | })
125 | .catch(() => {
126 | console.log(
127 | "No internet connection found. App is running in offline mode."
128 | );
129 | });
130 | }
131 |
132 | export function unregister() {
133 | if ("serviceWorker" in navigator) {
134 | navigator.serviceWorker.ready
135 | .then((registration) => {
136 | registration.unregister();
137 | })
138 | .catch((error) => {
139 | console.error(error.message);
140 | });
141 | }
142 | }
143 |
--------------------------------------------------------------------------------
/src/layouts/MainDrawer.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import clsx from "clsx";
3 | import { makeStyles, useTheme } from "@material-ui/core/styles";
4 | import { withRouter } from "react-router-dom";
5 | import Drawer from "@material-ui/core/Drawer";
6 | import List from "@material-ui/core/List";
7 | import Divider from "@material-ui/core/Divider";
8 | import IconButton from "@material-ui/core/IconButton";
9 | import ListItem from "@material-ui/core/ListItem";
10 | import ListItemIcon from "@material-ui/core/ListItemIcon";
11 | import ListItemText from "@material-ui/core/ListItemText";
12 |
13 | import ChevronLeftIcon from "@material-ui/icons/ChevronLeft";
14 | import ChevronRightIcon from "@material-ui/icons/ChevronRight";
15 | import AccountsIcon from "@material-ui/icons/AccountCircle";
16 | import PreferencesIcon from "@material-ui/icons/Settings";
17 | import AnalyticsIcon from "@material-ui/icons/BarChart";
18 | import TransactionsIcon from "@material-ui/icons/MonetizationOn";
19 | import SubscriptionsIcon from "@material-ui/icons/Autorenew";
20 | import IvoicesIcon from "@material-ui/icons/Receipt";
21 | import PlansIcon from "@material-ui/icons/LocalOffer";
22 | import APIKeysIcon from "@material-ui/icons/Code";
23 | import WebhooksIcon from "@material-ui/icons/CallReceived";
24 |
25 | const drawerWidth = 240;
26 |
27 | const useStyles = makeStyles((theme) => ({
28 | drawer: {
29 | width: drawerWidth,
30 | flexShrink: 0,
31 | whiteSpace: "nowrap",
32 | },
33 | drawerOpen: {
34 | width: drawerWidth,
35 | transition: theme.transitions.create("width", {
36 | easing: theme.transitions.easing.sharp,
37 | duration: theme.transitions.duration.enteringScreen,
38 | }),
39 | },
40 | drawerClose: {
41 | transition: theme.transitions.create("width", {
42 | easing: theme.transitions.easing.sharp,
43 | duration: theme.transitions.duration.leavingScreen,
44 | }),
45 | overflowX: "hidden",
46 | width: 60,
47 | },
48 | toolbar: {
49 | display: "flex",
50 | alignItems: "center",
51 | justifyContent: "flex-end",
52 | padding: theme.spacing(0, 1),
53 | // necessary for content to be below app bar
54 | ...theme.mixins.toolbar,
55 | },
56 | }));
57 |
58 | const navigationGroups = [
59 | {
60 | id: "primary",
61 | items: [
62 | {
63 | id: "accounts",
64 | title: "Accounts",
65 | icon:
155 |
156 |
157 | {theme.direction === "rtl" ? (
158 |
163 |
164 |
167 |
168 | {group.items.map((item, index) => (
169 |
174 | {item.icon}
175 |
177 | ))}
178 |
179 | {index + 1 < navigationGroups.length &&
181 | ))}
182 |
183 | );
184 | }
185 |
186 | export default withRouter(MainDrawer);
187 |
--------------------------------------------------------------------------------
/src/workspace/account/ViewAccount.js:
--------------------------------------------------------------------------------
1 | import React, { useEffect } from "react";
2 | // import Grid from "@material-ui/core/Grid";
3 | import CircularProgress from "@material-ui/core/CircularProgress";
4 | import Typography from "@material-ui/core/Typography";
5 | import { makeStyles } from "@material-ui/core/styles";
6 | import { connect } from "react-redux";
7 | import { useParams, withRouter } from "react-router-dom";
8 |
9 | import WorkspaceToolbar from "../common/WorkspaceToolbar";
10 | // import SubscriptionCard from "../subscription/SubscriptionCard";
11 | import AccountCard from "./AccountCard";
12 | import * as actions from "../../redux/actions";
13 |
14 | const useStyles = makeStyles((theme) => ({
15 | container: {
16 | padding: 16,
17 | },
18 | accountCard: {
19 | maxWidth: 600,
20 | },
21 | section: {
22 | marginBottom: 32,
23 | },
24 | sectionTitle: {
25 | fontSize: 20,
26 | marginBottom: 16,
27 | fontWeight: 500,
28 | },
29 | subscriptions: {},
30 | progress: {
31 | position: "fixed",
32 | top: "50%",
33 | left: "50%",
34 | marginTop: -24,
35 | marginLeft: -24,
36 | },
37 | }));
38 |
39 | /*
40 | const subscriptions = [
41 | {
42 | identifier: "1",
43 | currentPeriod: "May 03 1999 — May 19 1999",
44 | plan: "Premium",
45 | status: "trial",
46 | termBehavior: "Renews",
47 | collection: "Manual",
48 | renewsOn: "May 03 1999, 3:36 AM",
49 | startedOn: "May 19 1999, 3:36 AM",
50 | pricePerUnit: "100 INR",
51 | estimatedTotal: "200 INR",
52 | },
53 | {
54 | identifier: "2",
55 | currentPeriod: "May 03 1999 — May 19 1999",
56 | plan: "Platinum",
57 | status: "active",
58 | termBehavior: "Renews",
59 | collection: "Manual",
60 | renewsOn: "May 03 1999, 3:36 AM",
61 | startedOn: "May 19 1999, 3:36 AM",
62 | pricePerUnit: "100 INR",
63 | estimatedTotal: "200 INR",
64 | },
65 | ];
66 | */
67 |
68 | // Some fields aren't being rendered.
69 | function ViewAccount(props) {
70 | const classes = useStyles();
71 | const { fetchAccount, clearAccount, account, editAccount } = props;
72 | const { identifier } = useParams();
73 |
74 | const handleEditAccount = () => {
75 | editAccount(account);
76 | };
77 |
78 | useEffect(() => {
79 | fetchAccount(identifier);
80 | return clearAccount;
81 | }, [identifier, fetchAccount, clearAccount]);
82 |
83 | return (
84 |
85 |
86 | {!account && (
87 |
88 | )}
89 | {account && (
90 |
91 |
92 |
96 | General
97 |
98 |
113 |
114 |
115 | {/*
116 |
120 | Subscriptions
121 |
122 |
127 | {subscriptions.map((subscription) => (
128 |
133 |
149 | ))}
150 |
151 |
*/}
152 |
153 | )}
154 |
{
188 | console.log(values);
189 | onSave(values);
190 | }}
191 | open={open}
192 | />
193 | );
194 | }
195 |
196 | SubscriptionFormDrawer.propTypes = {
197 | title: PropTypes.string.isRequired,
198 | showMore: PropTypes.bool,
199 | account: PropTypes.object,
200 | onSave: PropTypes.func.isRequired,
201 | };
202 |
203 | SubscriptionFormDrawer.defaultProps = {
204 | showMore: false,
205 | account: null,
206 | onCancel: null,
207 | };
208 |
209 | export default SubscriptionFormDrawer;
210 |
--------------------------------------------------------------------------------
/src/server/api.js:
--------------------------------------------------------------------------------
1 | import axios from "axios";
2 |
3 | const DEFAULT_API_VERSION = "v1";
4 |
5 | function initializeAccount(account) {
6 | account.createdAt = new Date(account.createdAt);
7 | account.updatedAt = new Date(account.updatedAt);
8 | return account;
9 | }
10 |
11 | function initializeSubscription(subscription) {
12 | const {
13 | startsAt,
14 | activatedAt,
15 | cancelledAt,
16 | pausedAt,
17 | currentPeriodStart,
18 | currentPeriodEnd,
19 | createdAt,
20 | updatedAt,
21 | } = subscription;
22 |
23 | subscription.startsAt = new Date(startsAt);
24 | subscription.activatedAt = activatedAt ? new Date(activatedAt) : null;
25 | subscription.cancelledAt = cancelledAt ? new Date(cancelledAt) : null;
26 | subscription.pausedAt = pausedAt ? new Date(pausedAt) : null;
27 | subscription.currentPeriodStart = currentPeriodStart
28 | ? new Date(currentPeriodStart)
29 | : null;
30 | subscription.currentPeriodEnd = currentPeriodEnd
31 | ? new Date(currentPeriodEnd)
32 | : null;
33 | subscription.createdAt = new Date(createdAt);
34 | subscription.updatedAt = new Date(updatedAt);
35 |
36 | return subscription;
37 | }
38 |
39 | function initializeInvoice(invoice) {
40 | const { closedAt, dueAt, updatedAt, createdAt, items } = invoice;
41 | invoice.closedAt = closedAt ? new Date(closedAt) : null;
42 | invoice.dueAt = new Date(dueAt);
43 | invoice.updatedAt = new Date(updatedAt);
44 | invoice.createdAt = new Date(createdAt);
45 |
46 | for (let i = 0; i < items.length; i++) {
47 | const item = items[i];
48 | item.startedAt = new Date(item.startedAt);
49 | item.endedAt = new Date(item.endedAt);
50 | }
51 |
52 | return invoice;
53 | }
54 |
55 | function initializeTransaction(transaction) {
56 | transaction.createdAt = new Date(transaction.createdAt);
57 | transaction.updatedAt = new Date(transaction.updatedAt);
58 |
59 | return transaction;
60 | }
61 |
62 | function initializePlan(plan) {
63 | plan.createdAt = new Date(plan.createdAt);
64 | plan.updatedAt = new Date(plan.updatedAt);
65 |
66 | return plan;
67 | }
68 |
69 | export function newClient(version = DEFAULT_API_VERSION) {
70 | axios.defaults.baseURL = `${process.env.REACT_APP_API_URL}/api/${version}`;
71 |
72 | return {
73 | // Account
74 |
75 | newAccount: async (account) => {
76 | const response = await axios.post(`/accounts`, account);
77 | return initializeAccount(response.data);
78 | },
79 |
80 | saveAccount: async (account) => {
81 | const response = await axios.put(
82 | `/accounts/${account.id}`,
83 | account
84 | );
85 | return initializeAccount(response.data);
86 | },
87 |
88 | getAccount: async (id) => {
89 | const response = await axios.get(`/accounts/${id}`);
90 | return initializeAccount(response.data);
91 | },
92 |
93 | getAccounts: async (params) => {
94 | const response = await axios.get(`/accounts`, { params });
95 | const accounts = response.data;
96 | const { records } = accounts;
97 | for (let i = 0; i < records.length; i++) {
98 | records[i] = initializeAccount(records[i]);
99 | }
100 | return accounts;
101 | },
102 |
103 | // Subscription
104 | newSubscription: async (subscription) => {
105 | const response = await axios.post(`/subscriptions`, subscription);
106 | return initializeSubscription(response.data);
107 | },
108 |
109 | saveSubscription: async (subscription) => {
110 | const response = await axios.put(
111 | `/subscriptions/${subscription.id}`,
112 | subscription
113 | );
114 | return initializeSubscription(response.data);
115 | },
116 |
117 | getSubscription: async (id) => {
118 | const response = await axios.get(`/subscriptions/${id}`);
119 | return initializeSubscription(response.data);
120 | },
121 |
122 | getSubscriptions: async (params) => {
123 | const response = await axios.get(`/subscriptions`, { params });
124 | const subscriptions = response.data;
125 | const { records } = subscriptions;
126 | for (let i = 0; i < records.length; i++) {
127 | records[i] = initializeSubscription(records[i]);
128 | }
129 | return subscriptions;
130 | },
131 |
132 | // Invoice
133 | saveInvoice: async (invoice) => {
134 | const response = await axios.put(
135 | `/invoices/${invoice.id}`,
136 | invoice
137 | );
138 | return initializeInvoice(response.data);
139 | },
140 |
141 | getInvoice: async (id) => {
142 | const response = await axios.get(`/invoices/${id}`);
143 | return initializeInvoice(response.data);
144 | },
145 |
146 | getInvoices: async (params) => {
147 | const response = await axios.get(`/invoices`, { params });
148 | const invoices = response.data;
149 | const { records } = invoices;
150 | for (let i = 0; i < records.length; i++) {
151 | records[i] = initializeInvoice(records[i]);
152 | }
153 | return invoices;
154 | },
155 |
156 | // Transaction
157 | newTransaction: async (transaction) => {
158 | const response = await axios.post(`/transactions`, transaction);
159 | return initializeTransaction(response.data);
160 | },
161 |
162 | saveTransaction: async (transaction) => {
163 | const response = await axios.put(
164 | `/transactions/${transaction.id}`,
165 | transaction
166 | );
167 | return initializeTransaction(response.data);
168 | },
169 |
170 | getTransaction: async (id) => {
171 | const response = await axios.get(`/transactions/${id}`);
172 | return initializeTransaction(response.data);
173 | },
174 |
175 | getTransactions: async (params) => {
176 | const response = await axios.get(`/transactions`, { params });
177 | const transactions = response.data;
178 | const { records } = transactions;
179 | for (let i = 0; i < records.length; i++) {
180 | records[i] = initializeTransaction(records[i]);
181 | }
182 | return transactions;
183 | },
184 |
185 | // Plan
186 |
187 | newPlan: async (plan) => {
188 | const response = await axios.post(`/plans`, plan);
189 | return initializePlan(response);
190 | },
191 |
192 | savePlan: async (plan) => {
193 | const response = await axios.put(`/plans/${plan.id}`, plan);
194 | return initializePlan(response);
195 | },
196 |
197 | getPlan: async (id) => {
198 | const response = await axios.get(`/plans/${id}`);
199 | return initializePlan(response.data);
200 | },
201 |
202 | getPlans: async (params) => {
203 | const response = await axios.get(`/plans`, { params });
204 | const plans = response.data;
205 | const { records } = plans;
206 | for (let i = 0; i < records.length; i++) {
207 | records[i] = initializePlan(records[i]);
208 | }
209 | return plans;
210 | },
211 |
212 | // Analytics
213 | getAnalytics: (params) => axios.get(`/analytics`, { params }),
214 | };
215 | }
216 |
--------------------------------------------------------------------------------
/src/layouts/MainLayout.js:
--------------------------------------------------------------------------------
1 | import React, { Suspense } from "react";
2 | import clsx from "clsx";
3 | import { makeStyles } from "@material-ui/core/styles";
4 | import Snackbar from "@material-ui/core/Snackbar";
5 | import SnackbarContent from "@material-ui/core/SnackbarContent";
6 |
7 | // TODO: Update this import when Material UI moves this to production.
8 | import MuiAlert from "@material-ui/lab/Alert";
9 | import CircularProgress from "@material-ui/core/CircularProgress";
10 | import { renderRoutes } from "react-router-config";
11 | import MainToolbar from "./MainToolbar";
12 | import MainDrawer from "./MainDrawer";
13 | import { connect } from "react-redux";
14 |
15 | import routes from "../routes";
16 | import AccountFormDrawer from "../workspace/account/AccountFormDrawer";
17 | import EditAccount from "../workspace/account/EditAccount";
18 | import SubscriptionFormDrawer from "../workspace/subscription/SubscriptionFormDrawer";
19 | import TransactionFormDrawer from "../workspace/transaction/TransactionFormDrawer";
20 | import PlanFormDrawer from "../workspace/plan/PlanFormDrawer";
21 | import APIKeyFormDrawer from "../workspace/api-key/APIKeyFormDrawer";
22 | import EditPlan from "../workspace/plan/EditPlan";
23 | import EditInvoice from "../workspace/invoice/EditInvoice";
24 | import EditTransaction from "../workspace/transaction/EditTransaction";
25 | import * as actions from "../redux/actions";
26 |
27 | const miniDrawerWidth = 60;
28 | const drawerWidth = 240;
29 |
30 | function Alert(props) {
31 | return
104 |
113 | );
114 | }
115 |
116 | const severityMap = {
117 | SUCCESS: "success",
118 | ERROR: "error",
119 | };
120 | const severity = severityMap[notification.category]
121 | ? severityMap[notification.category]
122 | : "SUCCESS";
123 |
124 | return (
125 |
130 |
134 | {notification.message}
135 |
136 |
137 | );
138 | }
139 | return null;
140 | };
141 |
142 | return (
143 |
144 |
145 |
159 |
171 |
172 | {/*
174 |
175 | {}}
198 | open={openDialog === "NEW_API_KEY"}
199 | />
200 |
201 | {openDialog === "EDIT_INVOICE" &&
208 | );
209 | }
210 |
211 | function mapStateToProps(state) {
212 | return {
213 | openDialog: state.openDialog,
214 | notification: state.notification,
215 | };
216 | }
217 |
218 | const mapDispatchToProps = {
219 | closeNotification: actions.closeNotification,
220 | createAccount: actions.createAccount,
221 | createPlan: actions.createPlan,
222 | createSubscription: actions.createSubscription,
223 | createTransaction: actions.createTransaction,
224 | };
225 |
226 | export default connect(mapStateToProps, mapDispatchToProps)(MainLayout);
227 |
--------------------------------------------------------------------------------
/src/workspace/common/WorkspaceTable.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { makeStyles } from "@material-ui/core/styles";
3 | import Table from "@material-ui/core/Table";
4 | import TableBody from "@material-ui/core/TableBody";
5 | import TableCell from "@material-ui/core/TableCell";
6 | import TableContainer from "@material-ui/core/TableContainer";
7 | import TablePagination from "@material-ui/core/TablePagination";
8 | import TableRow from "@material-ui/core/TableRow";
9 | import Paper from "@material-ui/core/Paper";
10 | // import Checkbox from "@material-ui/core/Checkbox";
11 |
12 | import WorkspaceTableHead from "./WorkspaceTableHead";
13 |
14 | /* The default comparator is recommended if the column IDs and the values are primitive.
15 | * Otherwise you should provide a custom descending comparator.
16 | */
17 | function defaultDescendingComparator(a, b, orderBy) {
18 | if (b[orderBy] < a[orderBy]) {
19 | return -1;
20 | }
21 | if (b[orderBy] > a[orderBy]) {
22 | return 1;
23 | }
24 | return 0;
25 | }
26 |
27 | function getComparator(descendingComparator, order, orderBy) {
28 | return order === "desc"
29 | ? (a, b) => descendingComparator(a, b, orderBy)
30 | : (a, b) => -descendingComparator(a, b, orderBy);
31 | }
32 |
33 | function stableSort(array, comparator) {
34 | const auxillary = array.map((value, index) => [value, index]);
35 | auxillary.sort((a, b) => {
36 | const order = comparator(a[0], b[0]);
37 | if (order !== 0) {
38 | return order;
39 | }
40 | return a[1] - b[1];
41 | });
42 | return auxillary.map((value) => value[0]);
43 | }
44 |
45 | const useStyles = makeStyles((theme) => ({
46 | root: {
47 | width: "100%",
48 | },
49 | paper: {
50 | width: "100%",
51 | marginBottom: theme.spacing(2),
52 | },
53 | table: {
54 | minWidth: 750,
55 | },
56 | visuallyHidden: {
57 | border: 0,
58 | clip: "rect(0 0 0 0)",
59 | height: 1,
60 | margin: -1,
61 | overflow: "hidden",
62 | padding: 0,
63 | position: "absolute",
64 | top: 20,
65 | width: 1,
66 | },
67 | }));
68 |
69 | export default function WorkspaceTable(props) {
70 | const classes = useStyles();
71 | const {
72 | onSelected,
73 | headers,
74 | selected,
75 | compact,
76 | onClick,
77 | renderCellValue,
78 | rows,
79 | totalRows,
80 | page,
81 | onChangePage,
82 | rowsPerPage,
83 | onChangeRowsPerPage,
84 | descendingComparator,
85 | } = props;
86 | const [order, setOrder] = React.useState("asc");
87 | const [orderBy, setOrderBy] = React.useState("calories");
88 |
89 | const handleRequestSort = (event, property) => {
90 | const ascending = orderBy === property && order === "asc";
91 | setOrder(ascending ? "desc" : "asc");
92 | setOrderBy(property);
93 | };
94 |
95 | const handleSelectAllClick = (event) => {
96 | if (event.target.checked) {
97 | const newSelection = rows.map((row) => row.id);
98 | onSelected(newSelection);
99 | } else {
100 | onSelected([]);
101 | }
102 | };
103 |
104 | // const makeHandleSelect = (name) => (event) => {
105 | // const selectedIndex = selected.indexOf(name);
106 | // let newSelected = [];
107 |
108 | // if (selectedIndex === -1) {
109 | // newSelected = newSelected.concat(selected, name);
110 | // } else if (selectedIndex === 0) {
111 | // newSelected = newSelected.concat(selected.slice(1));
112 | // } else if (selectedIndex === selected.length - 1) {
113 | // newSelected = newSelected.concat(selected.slice(0, -1));
114 | // } else if (selectedIndex > 0) {
115 | // newSelected = newSelected.concat(
116 | // selected.slice(0, selectedIndex),
117 | // selected.slice(selectedIndex + 1)
118 | // );
119 | // }
120 |
121 | // onSelected(newSelected);
122 | // };
123 |
124 | const emptyRows = rowsPerPage - rows.length;
125 |
126 | const makeHandleCellClick = (row, column) => () => {
127 | if (column.clickable) {
128 | onClick(row);
129 | }
130 | };
131 |
132 | const renderCells = (row, rowIndex) => (
133 |
134 | {headers.map((column, columnIndex) => (
135 |
136 | {renderCellValue(row, rowIndex, column, columnIndex)}
137 |
138 | ))}
139 |
140 | );
141 |
142 | return (
143 |
144 |
145 |
146 |
150 |
161 | {stableSort(
162 | rows,
163 | getComparator(
164 | descendingComparator ||
165 | defaultDescendingComparator,
166 | order,
167 | orderBy
168 | )
169 | ).map((row, index) => {
170 | const isItemSelected =
171 | selected.indexOf(row.id) >= 0;
172 |
173 | return (
174 |
181 | {/*
182 | */}
189 |
190 | {renderCells(row, index)}
191 |
192 | );
193 | })}
194 | {emptyRows > 0 && (
195 |
200 |
202 | )}
203 |
204 |
205 |
206 | onChangePage(newPage)}
213 | onChangeRowsPerPage={(event) =>
214 | onChangeRowsPerPage(parseInt(event.target.value, 10))
215 | }
216 | />
217 |
218 |
132 | {field.title}
133 |
139 | {field.options.map((option) => (
140 | {option.title}
141 | ))}
142 |
143 |
144 | );
145 |
146 | const renderTimeRange = (field, value) => (
147 |
148 |
153 | {field.title}
154 |
160 | {field.options.map((option) => (
161 | {option.title}
162 | ))}
163 |
164 |
165 | {value.option === "custom" && (
166 |
167 |
198 | )}
199 |
200 | );
201 |
202 | return (
203 |
204 |
205 |
206 | Filters
207 |
208 |
209 | {fields.map((field) => (
210 |
211 | {field.type === "select" &&
212 | renderSelect(field, values[field.identifier])}
213 |
214 | {field.type === "time_range" &&
215 | renderTimeRange(
216 | field,
217 | values[field.identifier]
218 | )}
219 |
220 | ))}
221 |
222 |
229 | Clear
230 |
231 |
232 |
233 | );
234 | }
235 |
--------------------------------------------------------------------------------
/src/workspace/plan/PlanFormDrawer.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import PropTypes from "prop-types";
3 |
4 | import { extractValues } from "../common/RecordForm";
5 | import FormDrawer from "../common/FormDrawer";
6 |
7 | const groups = [
8 | {
9 | label: "Basic",
10 | children: [
11 | {
12 | label: "Name",
13 | identifier: "name",
14 | type: "text",
15 | required: true,
16 | readOnly: false,
17 | quickAdd: true,
18 | unique: false,
19 | hidden: false,
20 | tooltip: "The name of the plan.",
21 | multipleValues: false,
22 | defaultValue: "",
23 | validations: "isAlphanumeric,minLength:2,maxLength:100",
24 | validationErrors: {
25 | isAlphanumeric:
26 | "The plan name can contain only letters and digits.",
27 | minLength: "The plan name must be 2-100 characters long.",
28 | maxLength: "The plan name must be 2-100 characters long.",
29 | },
30 | },
31 | {
32 | label: "Code",
33 | identifier: "code",
34 | type: "text",
35 | required: true,
36 | readOnly: false,
37 | quickAdd: true,
38 | unique: false,
39 | hidden: false,
40 | tooltip: "The code of the plan.",
41 | multipleValues: false,
42 | defaultValue: "",
43 | validations: "isAlphanumeric,minLength:2,maxLength:20",
44 | validationErrors: {
45 | isAlphanumeric:
46 | "The code name can contain only letters and digits.",
47 | minLength: "The code name must be 2-20 characters long.",
48 | maxLength: "The code name must be 2-20 characters long.",
49 | },
50 | },
51 | {
52 | label: "Description",
53 | identifier: "description",
54 | type: "large_text",
55 | required: false,
56 | readOnly: false,
57 | quickAdd: true,
58 | unique: false,
59 | hidden: false,
60 | tooltip: "The description of the plan.",
61 | multipleValues: false,
62 | defaultValue: "",
63 | rows: 4,
64 | validations: "maxLength:200",
65 | validationErrors: {
66 | maxLength: "The description must be 0-200 characters long.",
67 | },
68 | },
69 | {
70 | label: "Billing Cycle Period",
71 | identifier: "billingCyclePeriod",
72 | type: "number",
73 | required: true,
74 | readOnly: false,
75 | quickAdd: true,
76 | unique: false,
77 | hidden: false,
78 | tooltip: "The billing cycle period of the plan.",
79 | multipleValues: false,
80 | defaultValue: 0,
81 | validations: "isInt",
82 | validationErrors: {
83 | isInt: "Please enter a valid integer.",
84 | },
85 | },
86 | {
87 | label: "Billing Cycle Period Unit",
88 | identifier: "billingCyclePeriodUnit",
89 | type: "select",
90 | options: [
91 | {
92 | value: "days",
93 | title: "Days",
94 | },
95 | {
96 | value: "months",
97 | title: "Months",
98 | },
99 | ],
100 | required: true,
101 | readOnly: false,
102 | quickAdd: true,
103 | unique: false,
104 | hidden: false,
105 | tooltip: "The billing cycle period unit of the plan.",
106 | multipleValues: false,
107 | defaultValue: "days",
108 | },
109 | {
110 | label: "Price Per Billing Cycle",
111 | identifier: "pricePerBillingCycle",
112 | type: "number",
113 | required: true,
114 | readOnly: false,
115 | quickAdd: true,
116 | unique: false,
117 | hidden: false,
118 | tooltip:
119 | "The price per billing cycle for each unit of the plan.",
120 | multipleValues: false,
121 | defaultValue: 0,
122 | validations: "isNumeric",
123 | validationErrors: {
124 | isNumeric: "Please enter a valid number.",
125 | },
126 | },
127 | {
128 | label: "Setup Fee",
129 | identifier: "setupFee",
130 | type: "number",
131 | required: true,
132 | readOnly: false,
133 | quickAdd: true,
134 | unique: false,
135 | hidden: false,
136 | tooltip: "The setup fee of the plan.",
137 | multipleValues: false,
138 | defaultValue: 0,
139 | validations: "isNumeric",
140 | validationErrors: {
141 | isNumeric: "Please enter a valid number.",
142 | },
143 | },
144 | {
145 | label: "Total Billing Cycles",
146 | identifier: "totalBillingCycles",
147 | type: "number",
148 | required: true,
149 | readOnly: false,
150 | quickAdd: true,
151 | unique: false,
152 | hidden: false,
153 | tooltip: "The total number of billing cycles for the plan.",
154 | multipleValues: false,
155 | defaultValue: 0,
156 | validations: "isInt",
157 | validationErrors: {
158 | isInt: "Please enter a valid integer.",
159 | },
160 | },
161 | {
162 | label: "Trial Period",
163 | identifier: "trialPeriod",
164 | type: "number",
165 | required: true,
166 | readOnly: false,
167 | quickAdd: true,
168 | unique: false,
169 | hidden: false,
170 | tooltip: "The trial period of the plan.",
171 | multipleValues: false,
172 | defaultValue: 0,
173 | validations: "isInt",
174 | validationErrors: {
175 | isInt: "Please enter a valid integer.",
176 | },
177 | },
178 | {
179 | label: "Trial Period Unit",
180 | identifier: "trialPeriodUnit",
181 | type: "select",
182 | options: [
183 | {
184 | value: "days",
185 | title: "Days",
186 | },
187 | {
188 | value: "months",
189 | title: "Months",
190 | },
191 | ],
192 | required: true,
193 | readOnly: false,
194 | quickAdd: true,
195 | unique: false,
196 | hidden: false,
197 | tooltip: "The trial period unit of the plan.",
198 | multipleValues: false,
199 | defaultValue: "days",
200 | },
201 | {
202 | label: "Renew",
203 | identifier: "renew",
204 | type: "switch",
205 | required: true,
206 | readOnly: false,
207 | quickAdd: true,
208 | unique: false,
209 | hidden: false,
210 | tooltip:
211 | "Determines whether the subscription renews after the term.",
212 | multipleValues: false,
213 | defaultValue: false,
214 | },
215 | ],
216 | },
217 | ];
218 |
219 | function PlanFormDrawer(props) {
220 | const { title, onSave, showMore, open } = props;
221 |
222 | const values = props.plan || extractValues(groups);
223 | return (
224 | 
40 | 
40 |