feat: Add feedback form, shotgun countdown and sale color

package.json

@@ -12,14 +12,14 @@
     "copy-to-clipboard": "^3.3.1",
     "date-fns": "^2.16.1",
     "material-table": "^1.69.1",
+    "material-ui-color": "^0.4.6",
     "react": "^16.14.0",
     "react-dom": "^16.14.0",
     "react-redux": "^7.2.1",
     "react-router-dom": "^5.2.0",
     "react-scripts": "^3.4.4",
     "redux": "^4.0.5",
     "redux-promise-middleware": "^6.1.0",
-    "redux-thunk": "^2.3.0",
     "use-deep-compare-effect": "^1.4.0"
   },
   "scripts": {

src/App.jsx

@@ -31,6 +31,7 @@ import Sales from './pages/public/Sales';
 import SaleDetail from './pages/public/SaleDetail';
 import UserOrders from './pages/public/UserOrders';
 import OrderDetail from './pages/public/OrderDetail';
+import ContactForm from "./pages/public/ContactForm";
 
 // Lazy loaded pages
 const AdminSite = React.lazy(() => import('./pages/admin/'));
@@ -78,6 +79,7 @@ class App extends React.Component {
 								<Route path="/" exact component={PublicSite} />
 								<Route path="/sales" exact component={Sales} />
 								<Route path="/sales/:sale_id" exact component={SaleDetail} />
+								<Route path="/contact" exact component={ContactForm} />
 								<ProtectedRoute path="/account" exact component={Account} />
 								<ProtectedRoute path="/orders" exact component={UserOrders} />
 								<ProtectedRoute path="/orders/:order_id" exact component={OrderDetail} />

src/components/Footer.jsx

@@ -18,7 +18,7 @@ const useStyles = makeStyles({
 export default function Footer(props) {
 	const classes = useStyles();
 	const simdeLink = <Link href="https://assos.utc.fr/assos/simde" target="_blank" rel="noopener">SiMDE</Link>;
-	const contactLink = <Link href="mailto:[email protected]">Contact</Link>;
+	const contactLink = <Link href="/contact">Contact</Link>;
 	return (
 		<span className={classes.container} style={{ minHeight: 40 }}>
 			Fait avec ♥ par le&nbsp;{simdeLink}.&nbsp;{contactLink}

src/components/common/FieldGenerator.jsx

@@ -1,147 +1,165 @@
-import React from 'react';
-import {
-	TextField, Checkbox, FormControlLabel,
-	FormControl, InputLabel, Select, MenuItem, Chip
-} from '@material-ui/core';
-import { KeyboardDateTimePicker } from '@material-ui/pickers';
-// import CheckInput from './CheckInput';
-
-class FieldGenerator {
-
-	// TODO Finish error texts
-
-	constructor(store, errors, onChange, keyPrefix = null, defaultProps = null) {
-		this.store = store;
-		this.errors = errors;
-		this.onChange = onChange;
-		this.keyPrefix = keyPrefix;
-		this.defaultProps = defaultProps;
-	}
-
-	onChangeDatetime = name => value => {
-		const fakeEvent = { target: { name, value } };
-		return this.onChange(fakeEvent);
-	}
-
-	getKey = (key) => (this.keyPrefix ? `${this.keyPrefix}.${key}` : key)
-
-	getValue = (key, params) => (
-		key.split('.').reduce((props, step) => props[step], this.store) || params.default
-	)
-
-	getProps = (props) => (
-		this.defaultProps ? { ...this.defaultProps, ...props } : props
-	)
-
-	displayErrors = (key) => (
-		this.errors[key] ? this.errors[key].join('<br>') : ''
-	)
-
-	text = (key, label, props = {}) => (
-		<TextField
-			label={label}
-			name={this.getKey(key)}
-			value={this.getValue(key, props) || ''}
-			onChange={this.onChange}
-			error={Boolean(this.errors[key])}
-			helperText={this.displayErrors(key)}
-			{...this.getProps(props)}
-		/>
-	)
-
-	number = (key, label, props = {}) => (
-		<TextField
-			label={label}
-			name={this.getKey(key)}
-			value={this.getValue(key, props) || 0}
-			onChange={this.onChange}
-			type="number"
-			error={Boolean(this.errors[key])}
-			helperText={this.displayErrors(key)}
-			{...this.getProps(props)}
-		/>
-	)
-
-	boolean = (key, label, props = {}) => (
-		<FormControlLabel
-			label={label}
-			// error={Boolean(this.errors[key])}
-			// helperText={this.displayErrors(key)}
-			control={
-				<Checkbox
-					name={this.getKey(key)}
-					checked={this.getValue(key, props) || false}
-					onChange={this.onChange}
-					{...this.getProps(props)}
-				/>
-			}
-		/>
-	)
-
-	datetime = (key, label, props = {}) => (
-		<KeyboardDateTimePicker
-			label={label}
-			value={this.getValue(key, props) || new Date()}
-			onChange={this.onChangeDatetime(this.getKey(key))}
-			format="yyyy/MM/dd hh:mm:ss"
-			showTodayButton
-			{...this.getProps(props)}
-		/>
-	)
-
-	select = (key, label, choices, props = {}) => (
-		<FormControl error={Boolean(this.errors[key])}>
-			<InputLabel htmlFor={this.getKey(key)}>{label}</InputLabel>
-			<Select
-				name={this.getKey(key)}
-				value={this.getValue(key, props) || ''}
-				onChange={this.onChange}
-				labelId={this.getKey(key)}
-				// helperText={this.displayErrors(key)}
-				{...this.getProps(props)}
-			>
-				{Object.values(choices).map(choice => (
-					<MenuItem
-						key={choice.value}
-						value={choice.value}
-					>
-						{choice.label}
-					</MenuItem>
-				))}
-			</Select>
-		</FormControl>
-	)
-
-	selectChips = (key, label, choices, props = {}) => (
-		<FormControl error={Boolean(this.errors[key])}>
-			<InputLabel htmlFor={this.getKey(key)}>{label}</InputLabel>
-			<Select
-				multiple
-				name={this.getKey(key)}
-				value={this.getValue(key, props) || ''}
-				onChange={this.onChange}
-				labelId={this.getKey(key)}
-				// helperText={this.displayErrors(key)}
-                renderValue={selected => (
-                    <div>
-                        {selected.map(value => (
-                            <Chip key={value} label={choices[value].label} />
-                        ))}
-                    </div>
-                )}
-				{...this.getProps(props)}
-			>
-				{Object.values(choices).map(choice => (
-					<MenuItem
-						key={choice.value}
-						value={choice.value}
-					>
-						{choice.label}
-					</MenuItem>
-				))}
-			</Select>
-		</FormControl>
-	)
-}
-
-export default FieldGenerator;
+import React from 'react';
+import {
+	TextField, Checkbox, FormControlLabel,
+	FormControl, InputLabel, Select, MenuItem, Chip
+} from '@material-ui/core';
+import { KeyboardDateTimePicker } from '@material-ui/pickers';
+import { ColorPicker } from 'material-ui-color';
+// import CheckInput from './CheckInput';
+
+class FieldGenerator {
+
+	// TODO Finish error texts
+
+	constructor(store, errors, onChange, keyPrefix = null, defaultProps = null) {
+		this.store = store;
+		this.errors = errors;
+		this.onChange = onChange;
+		this.keyPrefix = keyPrefix;
+		this.defaultProps = defaultProps;
+	}
+
+	onChangeDatetime = name => value => {
+		const fakeEvent = { target: { name, value } };
+		return this.onChange(fakeEvent);
+	}
+
+	onChangeColor = name => color => {
+		const fakeEvent = { target: { name, value: `#${color.hex}` } };
+		return this.onChange(fakeEvent);
+	}
+
+	getKey = (key) => (this.keyPrefix ? `${this.keyPrefix}.${key}` : key)
+
+	getValue = (key, params) => (
+		key.split('.').reduce((props, step) => props[step], this.store) || params.default
+	)
+
+	getProps = (props) => (
+		this.defaultProps ? { ...this.defaultProps, ...props } : props
+	)
+
+	displayErrors = (key) => (
+		this.errors[key] ? this.errors[key].join('<br>') : ''
+	)
+
+	text = (key, label, props = {}) => (
+		<TextField
+			label={label}
+			name={this.getKey(key)}
+			value={this.getValue(key, props) || ''}
+			onChange={this.onChange}
+			error={Boolean(this.errors[key])}
+			helperText={this.displayErrors(key)}
+			{...this.getProps(props)}
+		/>
+	)
+
+	number = (key, label, props = {}) => (
+		<TextField
+			label={label}
+			name={this.getKey(key)}
+			value={this.getValue(key, props) || 0}
+			onChange={this.onChange}
+			type="number"
+			error={Boolean(this.errors[key])}
+			helperText={this.displayErrors(key)}
+			{...this.getProps(props)}
+		/>
+	)
+
+	boolean = (key, label, props = {}) => (
+		<FormControlLabel
+			label={label}
+			// error={Boolean(this.errors[key])}
+			// helperText={this.displayErrors(key)}
+			control={
+				<Checkbox
+					name={this.getKey(key)}
+					checked={this.getValue(key, props) || false}
+					onChange={this.onChange}
+					{...this.getProps(props)}
+				/>
+			}
+		/>
+	)
+
+	datetime = (key, label, props = {}) => (
+		<KeyboardDateTimePicker
+			label={label}
+			value={this.getValue(key, props) || new Date()}
+			onChange={this.onChangeDatetime(this.getKey(key))}
+			format="yyyy/MM/dd hh:mm:ss"
+			showTodayButton
+			{...this.getProps(props)}
+		/>
+	)
+
+	select = (key, label, choices, props = {}) => (
+		<FormControl error={Boolean(this.errors[key])}>
+			<InputLabel htmlFor={this.getKey(key)}>{label}</InputLabel>
+			<Select
+				name={this.getKey(key)}
+				value={this.getValue(key, props) || ''}
+				onChange={this.onChange}
+				labelId={this.getKey(key)}
+				// helperText={this.displayErrors(key)}
+				{...this.getProps(props)}
+			>
+				{Object.values(choices).map(choice => (
+					<MenuItem
+						key={choice.value}
+						value={choice.value}
+					>
+						{choice.label}
+					</MenuItem>
+				))}
+			</Select>
+		</FormControl>
+	)
+
+	selectChips = (key, label, choices, props = {}) => (
+		<FormControl error={Boolean(this.errors[key])}>
+			<InputLabel htmlFor={this.getKey(key)}>{label}</InputLabel>
+			<Select
+				multiple
+				name={this.getKey(key)}
+				value={this.getValue(key, props) || ''}
+				onChange={this.onChange}
+				labelId={this.getKey(key)}
+				// helperText={this.displayErrors(key)}
+				renderValue={selected => (
+					<div>
+						{selected.map(value => (
+							<Chip key={value} label={choices[value].label} />
+						))}
+					</div>
+				)}
+				{...this.getProps(props)}
+			>
+				{Object.values(choices).map(choice => (
+					<MenuItem
+						key={choice.value}
+						value={choice.value}
+					>
+						{choice.label}
+					</MenuItem>
+				))}
+			</Select>
+		</FormControl>
+	)
+
+	color = (key, label, props = {}) => (
+		<FormControl error={Boolean(this.errors[key])}>
+			<InputLabel htmlFor={this.getKey(key)} shrink>{label}</InputLabel>
+			<div className="MuiInput-formControl">
+				<ColorPicker
+					value={this.getValue(key, props) || '#ffffff'}
+					onChange={this.onChangeColor(this.getKey(key))}
+				/>
+			</div>
+		</FormControl>
+	)
+}
+
+export default FieldGenerator;