+import { withFormik } from 'formik';
+import PropTypes from 'prop-types';
+import React from 'react';
+import { Button, Col, Form, Row } from 'react-bootstrap';
+import { useTranslation } from 'react-i18next';
+
+import laravelErrorsToFormik from '../../helpers/laravelErrorsToFormik';
+import i18n from '../../i18n';
+import yup from '../../schema/yup';
+
+const GuessingSettingsForm = ({
+ errors,
+ handleBlur,
+ handleChange,
+ handleSubmit,
+ onCancel,
+ touched,
+ values,
+}) => {
+ const { t } = useTranslation();
+
+ return <Form noValidate onSubmit={handleSubmit}>
+ <Row>
+ <Form.Group as={Col} controlId="gg.points_exact_first" md={6}>
+ <Form.Label>{t('twitchBot.guessingGame.pointsExactFirst')}</Form.Label>
+ <Form.Control
+ isInvalid={!!(touched.points_exact_first && errors.points_exact_first)}
+ max="5"
+ min="1"
+ name="points_exact_first"
+ onBlur={handleBlur}
+ onChange={handleChange}
+ step="1"
+ type="number"
+ value={values.points_exact_first || 0}
+ />
+ {touched.points_exact_first && errors.points_exact_first ?
+ <Form.Control.Feedback type="invalid">
+ {t(errors.points_exact_first)}
+ </Form.Control.Feedback>
+ : null}
+ </Form.Group>
+ <Form.Group as={Col} controlId="gg.points_exact_other" md={6}>
+ <Form.Label>{t('twitchBot.guessingGame.pointsExactOther')}</Form.Label>
+ <Form.Control
+ isInvalid={!!(touched.points_exact_other && errors.points_exact_other)}
+ max="5"
+ min="0"
+ name="points_exact_other"
+ onBlur={handleBlur}
+ onChange={handleChange}
+ step="1"
+ type="number"
+ value={values.points_exact_other || 0}
+ />
+ {touched.points_exact_other && errors.points_exact_other ?
+ <Form.Control.Feedback type="invalid">
+ {t(errors.points_exact_other)}
+ </Form.Control.Feedback>
+ : null}
+ </Form.Group>
+ <Form.Group as={Col} controlId="gg.points_close_first" md={6}>
+ <Form.Label>{t('twitchBot.guessingGame.pointsCloseFirst')}</Form.Label>
+ <Form.Control
+ isInvalid={!!(touched.points_close_first && errors.points_close_first)}
+ max="5"
+ min="0"
+ name="points_close_first"
+ onBlur={handleBlur}
+ onChange={handleChange}
+ step="0.5"
+ type="number"
+ value={values.points_close_first || 0}
+ />
+ {touched.points_close_first && errors.points_close_first ?
+ <Form.Control.Feedback type="invalid">
+ {t(errors.points_close_first)}
+ </Form.Control.Feedback>
+ : null}
+ </Form.Group>
+ <Form.Group as={Col} controlId="gg.points_close_other" md={6}>
+ <Form.Label>{t('twitchBot.guessingGame.pointsCloseOther')}</Form.Label>
+ <Form.Control
+ isInvalid={!!(touched.points_close_other && errors.points_close_other)}
+ max="5"
+ min="0"
+ name="points_close_other"
+ onBlur={handleBlur}
+ onChange={handleChange}
+ step="0.5"
+ type="number"
+ value={values.points_close_other || 0}
+ />
+ {touched.points_close_other && errors.points_close_other ?
+ <Form.Control.Feedback type="invalid">
+ {t(errors.points_close_other)}
+ </Form.Control.Feedback>
+ : null}
+ </Form.Group>
+ <Form.Group as={Col} controlId="gg.points_close_max" md={6}>
+ <Form.Label>{t('twitchBot.guessingGame.pointsCloseMax')}</Form.Label>
+ <Form.Control
+ isInvalid={!!(touched.points_close_max && errors.points_close_max)}
+ min="0"
+ name="points_close_max"
+ onBlur={handleBlur}
+ onChange={handleChange}
+ step="1"
+ type="number"
+ value={values.points_close_max || 0}
+ />
+ {touched.points_close_max && errors.points_close_max ?
+ <Form.Control.Feedback type="invalid">
+ {t(errors.points_close_max)}
+ </Form.Control.Feedback>
+ : null}
+ </Form.Group>
+ </Row>
+ <Form.Group controlId="gg.start_message">
+ <Form.Label>{t('twitchBot.guessingGame.startMessage')}</Form.Label>
+ <Form.Control
+ isInvalid={!!(touched.start_message && errors.start_message)}
+ name="start_message"
+ onBlur={handleBlur}
+ onChange={handleChange}
+ type="text"
+ value={values.start_message || ''}
+ />
+ {touched.start_message && errors.start_message ?
+ <Form.Control.Feedback type="invalid">
+ {t(errors.start_message)}
+ </Form.Control.Feedback>
+ : null}
+ </Form.Group>
+ <Form.Group controlId="gg.stop_message">
+ <Form.Label>{t('twitchBot.guessingGame.stopMessage')}</Form.Label>
+ <Form.Control
+ isInvalid={!!(touched.stop_message && errors.stop_message)}
+ name="stop_message"
+ onBlur={handleBlur}
+ onChange={handleChange}
+ type="text"
+ value={values.stop_message || ''}
+ />
+ {touched.stop_message && errors.stop_message ?
+ <Form.Control.Feedback type="invalid">
+ {t(errors.stop_message)}
+ </Form.Control.Feedback>
+ : null}
+ </Form.Group>
+ <Form.Group controlId="gg.winners_message">
+ <Form.Label>{t('twitchBot.guessingGame.winnersMessage')}</Form.Label>
+ <Form.Control
+ isInvalid={!!(touched.winners_message && errors.winners_message)}
+ name="winners_message"
+ onBlur={handleBlur}
+ onChange={handleChange}
+ type="text"
+ value={values.winners_message || ''}
+ />
+ {touched.winners_message && errors.winners_message ?
+ <Form.Control.Feedback type="invalid">
+ {t(errors.winners_message)}
+ </Form.Control.Feedback>
+ :
+ <Form.Text muted>
+ {t('twitchBot.guessingGame.winnersMessageHint')}
+ </Form.Text>
+ }
+ </Form.Group>
+ <Form.Group controlId="gg.no_winners_message">
+ <Form.Label>{t('twitchBot.guessingGame.noWinnersMessage')}</Form.Label>
+ <Form.Control
+ isInvalid={!!(touched.no_winners_message && errors.no_winners_message)}
+ name="no_winners_message"
+ onBlur={handleBlur}
+ onChange={handleChange}
+ type="text"
+ value={values.no_winners_message || ''}
+ />
+ {touched.no_winners_message && errors.no_winners_message ?
+ <Form.Control.Feedback type="invalid">
+ {t(errors.no_winners_message)}
+ </Form.Control.Feedback>
+ : null}
+ </Form.Group>
+ <Form.Group controlId="gg.cancel_message">
+ <Form.Label>{t('twitchBot.guessingGame.cancelMessage')}</Form.Label>
+ <Form.Control
+ isInvalid={!!(touched.cancel_message && errors.cancel_message)}
+ name="cancel_message"
+ onBlur={handleBlur}
+ onChange={handleChange}
+ type="text"
+ value={values.cancel_message || ''}
+ />
+ {touched.cancel_message && errors.cancel_message ?
+ <Form.Control.Feedback type="invalid">
+ {t(errors.cancel_message)}
+ </Form.Control.Feedback>
+ : null}
+ </Form.Group>
+ <Form.Group controlId="gg.invalid_solution_message">
+ <Form.Label>{t('twitchBot.guessingGame.invalidSolutionMessage')}</Form.Label>
+ <Form.Control
+ isInvalid={!!(touched.invalid_solution_message && errors.invalid_solution_message)}
+ name="invalid_solution_message"
+ onBlur={handleBlur}
+ onChange={handleChange}
+ type="text"
+ value={values.invalid_solution_message || ''}
+ />
+ {touched.invalid_solution_message && errors.invalid_solution_message ?
+ <Form.Control.Feedback type="invalid">
+ {t(errors.invalid_solution_message)}
+ </Form.Control.Feedback>
+ : null}
+ </Form.Group>
+ <Form.Group controlId="gg.active_message">
+ <Form.Label>{t('twitchBot.guessingGame.activeMessage')}</Form.Label>
+ <Form.Control
+ isInvalid={!!(touched.active_message && errors.active_message)}
+ name="active_message"
+ onBlur={handleBlur}
+ onChange={handleChange}
+ type="text"
+ value={values.active_message || ''}
+ />
+ {touched.active_message && errors.active_message ?
+ <Form.Control.Feedback type="invalid">
+ {t(errors.active_message)}
+ </Form.Control.Feedback>
+ : null}
+ </Form.Group>
+ <Form.Group controlId="gg.not_active_message">
+ <Form.Label>{t('twitchBot.guessingGame.notActiveMessage')}</Form.Label>
+ <Form.Control
+ isInvalid={!!(touched.not_active_message && errors.not_active_message)}
+ name="not_active_message"
+ onBlur={handleBlur}
+ onChange={handleChange}
+ type="text"
+ value={values.not_active_message || ''}
+ />
+ {touched.not_active_message && errors.not_active_message ?
+ <Form.Control.Feedback type="invalid">
+ {t(errors.not_active_message)}
+ </Form.Control.Feedback>
+ : null}
+ </Form.Group>
+ <div className="button-bar mt-3">
+ {onCancel ?
+ <Button onClick={onCancel} variant="secondary">
+ {t('button.cancel')}
+ </Button>
+ : null}
+ <Button type="submit" variant="primary">
+ {t('button.save')}
+ </Button>
+ </div>
+ </Form>;
+};
+
+GuessingSettingsForm.propTypes = {
+ errors: PropTypes.shape({
+ active_message: PropTypes.string,
+ cancel_message: PropTypes.string,
+ invalid_solution_message: PropTypes.string,
+ name: PropTypes.string,
+ no_winners_message: PropTypes.string,
+ not_active_message: PropTypes.string,
+ points_close_first: PropTypes.string,
+ points_close_max: PropTypes.string,
+ points_close_other: PropTypes.string,
+ points_exact_first: PropTypes.string,
+ points_exact_other: PropTypes.string,
+ start_message: PropTypes.string,
+ stop_message: PropTypes.string,
+ winners_message: PropTypes.string,
+ }),
+ handleBlur: PropTypes.func,
+ handleChange: PropTypes.func,
+ handleSubmit: PropTypes.func,
+ name: PropTypes.string,
+ onCancel: PropTypes.func,
+ touched: PropTypes.shape({
+ active_message: PropTypes.bool,
+ cancel_message: PropTypes.bool,
+ invalid_solution_message: PropTypes.bool,
+ name: PropTypes.bool,
+ no_winners_message: PropTypes.bool,
+ not_active_message: PropTypes.bool,
+ points_close_first: PropTypes.bool,
+ points_close_max: PropTypes.bool,
+ points_close_other: PropTypes.bool,
+ points_exact_first: PropTypes.bool,
+ points_exact_other: PropTypes.bool,
+ start_message: PropTypes.bool,
+ stop_message: PropTypes.bool,
+ winners_message: PropTypes.bool,
+ }),
+ values: PropTypes.shape({
+ active_message: PropTypes.string,
+ cancel_message: PropTypes.string,
+ invalid_solution_message: PropTypes.string,
+ name: PropTypes.string,
+ no_winners_message: PropTypes.string,
+ not_active_message: PropTypes.string,
+ points_close_first: PropTypes.number,
+ points_close_max: PropTypes.number,
+ points_close_other: PropTypes.number,
+ points_exact_first: PropTypes.number,
+ points_exact_other: PropTypes.number,
+ start_message: PropTypes.string,
+ stop_message: PropTypes.string,
+ winners_message: PropTypes.string,
+ }),
+};
+
+export default withFormik({
+ displayName: 'GuessingSettingsForm',
+ enableReinitialize: true,
+ handleSubmit: async (values, actions) => {
+ const { setErrors } = actions;
+ const { onSubmit } = actions.props;
+ try {
+ await onSubmit(values);
+ } catch (e) {
+ if (e.response && e.response.data && e.response.data.errors) {
+ setErrors(laravelErrorsToFormik(e.response.data.errors));
+ }
+ }
+ },
+ mapPropsToValues: ({ name, settings }) => {
+ const getNumericValue = (s, n, d) => s && Object.prototype.hasOwnProperty.call(s, n)
+ ? s[n] : d;
+ const getStringValue = (s, n, d) => s && Object.prototype.hasOwnProperty.call(s, n)
+ ? s[n] : i18n.t(`twitchBot.guessingGame.default${d}`);
+ return {
+ active_message: getStringValue(settings, 'active_message', 'ActiveMessage'),
+ cancel_message: getStringValue(settings, 'cancel_message', 'CancelMessage'),
+ invalid_solution_message:
+ getStringValue(settings, 'invalid_solution_message', 'InvalidSolutionMessage'),
+ name: name || '',
+ no_winners_message: getStringValue(settings, 'no_winners_message', 'NoWinnersMessage'),
+ not_active_message: getStringValue(settings, 'not_active_message', 'NotActiveMessage'),
+ points_close_first: getNumericValue(settings, 'points_close_first', 1),
+ points_close_max: getNumericValue(settings, 'points_close_max', 3),
+ points_close_other: getNumericValue(settings, 'points_close_other', 1),
+ points_exact_first: getNumericValue(settings, 'points_exact_first', 1),
+ points_exact_other: getNumericValue(settings, 'points_exact_other', 1),
+ start_message: getStringValue(settings, 'start_message', 'StartMessage'),
+ stop_message: getStringValue(settings, 'stop_message', 'StopMessage'),
+ winners_message: getStringValue(settings, 'winners_message', 'WinnersMessage'),
+ };
+ },
+ validationSchema: yup.object().shape({
+ active_message: yup.string(),
+ cancel_message: yup.string(),
+ invalid_solution_message: yup.string(),
+ name: yup.string().required(),
+ no_winners_message: yup.string(),
+ not_active_message: yup.string(),
+ points_close_first: yup.number(),
+ points_close_max: yup.number(),
+ points_close_other: yup.number(),
+ points_exact_first: yup.number(),
+ points_exact_other: yup.number(),
+ start_message: yup.string(),
+ stop_message: yup.string(),
+ winners_message: yup.string(),
+ }),
+})(GuessingSettingsForm);