From 39fd6b07eaba53460c09c36f77f22c9f925a2506 Mon Sep 17 00:00:00 2001 From: Ben Wheeler Date: Wed, 26 Jun 2019 19:46:26 -0400 Subject: [PATCH 1/7] added draft of birth date step; localize birth month string --- src/components/join-flow/join-flow-steps.jsx | 120 ++++++++++++++++++- src/components/join-flow/join-flow.jsx | 3 + 2 files changed, 121 insertions(+), 2 deletions(-) diff --git a/src/components/join-flow/join-flow-steps.jsx b/src/components/join-flow/join-flow-steps.jsx index c612853cd..5e1b2cf04 100644 --- a/src/components/join-flow/join-flow-steps.jsx +++ b/src/components/join-flow/join-flow-steps.jsx @@ -8,6 +8,7 @@ const {injectIntl, intlShape} = require('react-intl'); const validate = require('../../lib/validate'); const FormikInput = require('../../components/formik-forms/formik-input.jsx'); +const FormikSelect = require('../../components/formik-forms/formik-select.jsx'); const JoinFlowStep = require('./join-flow-step.jsx'); require('./join-flow-steps.scss'); @@ -190,11 +191,126 @@ class UsernameStep extends React.Component { ); } } -/* eslint-enable */ UsernameStep.propTypes = { intl: intlShape, onNextStep: PropTypes.func }; -module.exports.UsernameStep = injectIntl(UsernameStep); +const IntlUsernameStep = injectIntl(UsernameStep); + +module.exports.UsernameStep = IntlUsernameStep; + +/* + * BirthDateStep + */ + +const birthMonthIds = [ + {value: 'null', id: 'general.monthJanuary'}, + {value: 1, id: 'general.monthJanuary'}, + {value: 2, id: 'general.monthFebruary'}, + {value: 3, id: 'general.monthMarch'}, + {value: 4, id: 'general.monthApril'}, + {value: 5, id: 'general.monthMay'}, + {value: 6, id: 'general.monthJune'}, + {value: 7, id: 'general.monthJuly'}, + {value: 8, id: 'general.monthAugust'}, + {value: 9, id: 'general.monthSeptember'}, + {value: 10, id: 'general.monthOctober'}, + {value: 11, id: 'general.monthNovember'}, + {value: 12, id: 'general.monthDecember'} +]; +const curYear = (new Date()).getYear() + 1900; +const birthYearOptions = Array(120).fill() + .map((_, i) => ( + {value: curYear - i, label: curYear - i} + )); + +class BirthDateStep extends React.Component { + constructor (props) { + super(props); + bindAll(this, [ + 'handleValidSubmit', + 'validateForm', + 'validateSelect' + ]); + } + validateSelect (selection) { + console.log(selection); + } + validateForm (values) { + console.log(values); + } + handleValidSubmit (formData, formikBag) { + formikBag.setSubmitting(false); + this.props.onNextStep(formData); + } + render () { + const birthMonthOptions = birthMonthIds.map(item => ( + {value: item.value, label: this.props.intl.formatMessage({id: item.id})} + )); + return ( + + {props => { + const { + errors, + handleSubmit, + isSubmitting + } = props; + return ( + +
+
+ {this.props.intl.formatMessage({id: 'general.birthMonth'})} +
+ + +
+ + ); + }} + + ); + } +} + +BirthDateStep.propTypes = { + intl: intlShape, + onNextStep: PropTypes.func +}; + +const IntlBirthDateStep = injectIntl(BirthDateStep); + +module.exports.BirthDateStep = IntlBirthDateStep; + +/* eslint-enable */ diff --git a/src/components/join-flow/join-flow.jsx b/src/components/join-flow/join-flow.jsx index ba80726a7..b848ef52c 100644 --- a/src/components/join-flow/join-flow.jsx +++ b/src/components/join-flow/join-flow.jsx @@ -38,6 +38,9 @@ class JoinFlow extends React.Component { + ); From 71baf3e8028535859481b4ade9c0f1f7c402b9bb Mon Sep 17 00:00:00 2001 From: Ben Wheeler Date: Wed, 17 Jul 2019 11:47:32 -0400 Subject: [PATCH 2/7] birthdate month and year layout --- src/components/formik-forms/formik-select.jsx | 3 +-- src/components/join-flow/join-flow-steps.jsx | 22 ++++++++++++++----- src/components/join-flow/join-flow-steps.scss | 13 +++++++++++ 3 files changed, 30 insertions(+), 8 deletions(-) diff --git a/src/components/formik-forms/formik-select.jsx b/src/components/formik-forms/formik-select.jsx index dcd631012..5ec1bcdf5 100644 --- a/src/components/formik-forms/formik-select.jsx +++ b/src/components/formik-forms/formik-select.jsx @@ -24,10 +24,9 @@ const FormikSelect = ({ )); return ( -
+
-
-
- {this.props.intl.formatMessage({id: 'general.birthMonth'})} -
+
Date: Wed, 17 Jul 2019 11:55:27 -0400 Subject: [PATCH 3/7] add birthdate month and year header labels, initial vals --- src/components/join-flow/join-flow-steps.jsx | 41 +++++++++++--------- 1 file changed, 23 insertions(+), 18 deletions(-) diff --git a/src/components/join-flow/join-flow-steps.jsx b/src/components/join-flow/join-flow-steps.jsx index 605197b86..bf28f3e79 100644 --- a/src/components/join-flow/join-flow-steps.jsx +++ b/src/components/join-flow/join-flow-steps.jsx @@ -206,24 +206,25 @@ module.exports.UsernameStep = IntlUsernameStep; */ const birthMonthIds = [ - {value: 'null', id: 'general.monthJanuary'}, - {value: 1, id: 'general.monthJanuary'}, - {value: 2, id: 'general.monthFebruary'}, - {value: 3, id: 'general.monthMarch'}, - {value: 4, id: 'general.monthApril'}, - {value: 5, id: 'general.monthMay'}, - {value: 6, id: 'general.monthJune'}, - {value: 7, id: 'general.monthJuly'}, - {value: 8, id: 'general.monthAugust'}, - {value: 9, id: 'general.monthSeptember'}, - {value: 10, id: 'general.monthOctober'}, - {value: 11, id: 'general.monthNovember'}, - {value: 12, id: 'general.monthDecember'} + {value: 'null', id: 'general.month'}, + {value: '1', id: 'general.monthJanuary'}, + {value: '2', id: 'general.monthFebruary'}, + {value: '3', id: 'general.monthMarch'}, + {value: '4', id: 'general.monthApril'}, + {value: '5', id: 'general.monthMay'}, + {value: '6', id: 'general.monthJune'}, + {value: '7', id: 'general.monthJuly'}, + {value: '8', id: 'general.monthAugust'}, + {value: '9', id: 'general.monthSeptember'}, + {value: '10', id: 'general.monthOctober'}, + {value: '11', id: 'general.monthNovember'}, + {value: '12', id: 'general.monthDecember'} ]; -const curYear = (new Date()).getYear() + 1900; -const birthYearOptions = Array(120).fill() +const curYearRaw = (new Date()).getYear(); +const curYear = curYearRaw + 1900; +const birthYearOptions = Array(curYearRaw + 2).fill() .map((_, i) => ( - {value: curYear - i, label: curYear - i} + {value: String(curYear - i), label: String(curYear - i)} )); class BirthDateStep extends React.Component { @@ -249,11 +250,15 @@ class BirthDateStep extends React.Component { const birthMonthOptions = birthMonthIds.map(item => ( {value: item.value, label: this.props.intl.formatMessage({id: item.id})} )); + birthYearOptions[0] = { + value: 'null', + label: this.props.intl.formatMessage({id: 'general.year'}) + }; return ( Date: Wed, 17 Jul 2019 12:40:21 -0400 Subject: [PATCH 4/7] add birthdate header image --- src/components/join-flow/join-flow-step.jsx | 7 +++++++ src/components/join-flow/join-flow-step.scss | 10 ++++++++++ src/components/join-flow/join-flow-steps.jsx | 1 + 3 files changed, 18 insertions(+) diff --git a/src/components/join-flow/join-flow-step.jsx b/src/components/join-flow/join-flow-step.jsx index 6ce43ac83..6b1b91fe1 100644 --- a/src/components/join-flow/join-flow-step.jsx +++ b/src/components/join-flow/join-flow-step.jsx @@ -10,11 +10,17 @@ require('./join-flow-step.scss'); const JoinFlowStep = ({ children, description, + headerImgSrc, onSubmit, title, waiting }) => (
+ {headerImgSrc && ( +
+ +
+ )}
{title && ( @@ -38,6 +44,7 @@ const JoinFlowStep = ({ JoinFlowStep.propTypes = { children: PropTypes.node, description: PropTypes.string, + headerImgSrc: PropTypes.string, onSubmit: PropTypes.func, title: PropTypes.string, waiting: PropTypes.bool diff --git a/src/components/join-flow/join-flow-step.scss b/src/components/join-flow/join-flow-step.scss index eeddbf87c..499646956 100644 --- a/src/components/join-flow/join-flow-step.scss +++ b/src/components/join-flow/join-flow-step.scss @@ -21,3 +21,13 @@ padding: 2.3125rem 0 2.5rem; font-size: .875rem; } + +/* overflow will only work if this class is set on parent of img, not img itself */ +.join-flow-header-image { + width: 100%; + height: 7.5rem; + overflow: hidden; + margin: 0; + border-top-left-radius: 1rem; + border-top-right-radius: 1rem; +} diff --git a/src/components/join-flow/join-flow-steps.jsx b/src/components/join-flow/join-flow-steps.jsx index bf28f3e79..92489074e 100644 --- a/src/components/join-flow/join-flow-steps.jsx +++ b/src/components/join-flow/join-flow-steps.jsx @@ -274,6 +274,7 @@ class BirthDateStep extends React.Component { return ( Date: Wed, 17 Jul 2019 12:40:59 -0400 Subject: [PATCH 5/7] validate birthdate --- src/components/join-flow/join-flow-steps.jsx | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/src/components/join-flow/join-flow-steps.jsx b/src/components/join-flow/join-flow-steps.jsx index 92489074e..5b9f2edfc 100644 --- a/src/components/join-flow/join-flow-steps.jsx +++ b/src/components/join-flow/join-flow-steps.jsx @@ -237,10 +237,13 @@ class BirthDateStep extends React.Component { ]); } validateSelect (selection) { - console.log(selection); + if (selection === 'null') { + return this.props.intl.formatMessage({id: 'form.validationRequired'}); + } + return null; } - validateForm (values) { - console.log(values); + validateForm () { + return {}; } handleValidSubmit (formData, formikBag) { formikBag.setSubmitting(false); From e33d7dd0eefdb3002186e035200cda2e2094421c Mon Sep 17 00:00:00 2001 From: Ben Wheeler Date: Wed, 17 Jul 2019 17:12:39 -0400 Subject: [PATCH 6/7] Simplify birth month option generation --- src/components/join-flow/join-flow-steps.jsx | 36 +++++++++----------- 1 file changed, 17 insertions(+), 19 deletions(-) diff --git a/src/components/join-flow/join-flow-steps.jsx b/src/components/join-flow/join-flow-steps.jsx index 5b9f2edfc..ebd1ad6f7 100644 --- a/src/components/join-flow/join-flow-steps.jsx +++ b/src/components/join-flow/join-flow-steps.jsx @@ -205,26 +205,26 @@ module.exports.UsernameStep = IntlUsernameStep; * BirthDateStep */ -const birthMonthIds = [ - {value: 'null', id: 'general.month'}, - {value: '1', id: 'general.monthJanuary'}, - {value: '2', id: 'general.monthFebruary'}, - {value: '3', id: 'general.monthMarch'}, - {value: '4', id: 'general.monthApril'}, - {value: '5', id: 'general.monthMay'}, - {value: '6', id: 'general.monthJune'}, - {value: '7', id: 'general.monthJuly'}, - {value: '8', id: 'general.monthAugust'}, - {value: '9', id: 'general.monthSeptember'}, - {value: '10', id: 'general.monthOctober'}, - {value: '11', id: 'general.monthNovember'}, - {value: '12', id: 'general.monthDecember'} -]; +const getBirthMonthOptions = intl => ([ + {value: 'null', label: intl.formatMessage({id: 'general.month'})}, + {value: '1', label: intl.formatMessage({id: 'general.monthJanuary'})}, + {value: '2', label: intl.formatMessage({id: 'general.monthFebruary'})}, + {value: '3', label: intl.formatMessage({id: 'general.monthMarch'})}, + {value: '4', label: intl.formatMessage({id: 'general.monthApril'})}, + {value: '5', label: intl.formatMessage({id: 'general.monthMay'})}, + {value: '6', label: intl.formatMessage({id: 'general.monthJune'})}, + {value: '7', label: intl.formatMessage({id: 'general.monthJuly'})}, + {value: '8', label: intl.formatMessage({id: 'general.monthAugust'})}, + {value: '9', label: intl.formatMessage({id: 'general.monthSeptember'})}, + {value: '10', label: intl.formatMessage({id: 'general.monthOctober'})}, + {value: '11', label: intl.formatMessage({id: 'general.monthNovember'})}, + {value: '12', label: intl.formatMessage({id: 'general.monthDecember'})} +]); const curYearRaw = (new Date()).getYear(); const curYear = curYearRaw + 1900; const birthYearOptions = Array(curYearRaw + 2).fill() .map((_, i) => ( - {value: String(curYear - i), label: String(curYear - i)} + {value: String(curYear + 1 - i), label: String(curYear + 1 - i)} )); class BirthDateStep extends React.Component { @@ -250,9 +250,7 @@ class BirthDateStep extends React.Component { this.props.onNextStep(formData); } render () { - const birthMonthOptions = birthMonthIds.map(item => ( - {value: item.value, label: this.props.intl.formatMessage({id: item.id})} - )); + const birthMonthOptions = getBirthMonthOptions(this.props.intl); birthYearOptions[0] = { value: 'null', label: this.props.intl.formatMessage({id: 'general.year'}) From 740f1fb46683d9f2f4936d4576f8e5d714f66fa8 Mon Sep 17 00:00:00 2001 From: Ben Wheeler Date: Thu, 18 Jul 2019 20:39:16 -0400 Subject: [PATCH 7/7] split join-flow-steps into separate files; simplify birth year options --- src/components/join-flow/birthdate-step.jsx | 143 ++++++++++++++++++ src/components/join-flow/join-flow.jsx | 11 +- ...{join-flow-steps.jsx => username-step.jsx} | 135 +---------------- 3 files changed, 148 insertions(+), 141 deletions(-) create mode 100644 src/components/join-flow/birthdate-step.jsx rename src/components/join-flow/{join-flow-steps.jsx => username-step.jsx} (64%) diff --git a/src/components/join-flow/birthdate-step.jsx b/src/components/join-flow/birthdate-step.jsx new file mode 100644 index 000000000..708be8c16 --- /dev/null +++ b/src/components/join-flow/birthdate-step.jsx @@ -0,0 +1,143 @@ +const bindAll = require('lodash.bindall'); +const classNames = require('classnames'); +const React = require('react'); +const PropTypes = require('prop-types'); +import {Formik} from 'formik'; +const {injectIntl, intlShape} = require('react-intl'); + +const FormikSelect = require('../../components/formik-forms/formik-select.jsx'); +const JoinFlowStep = require('./join-flow-step.jsx'); + +require('./join-flow-steps.scss'); + +const getBirthMonthOptions = intl => ([ + {value: 'null', label: intl.formatMessage({id: 'general.month'})}, + {value: '1', label: intl.formatMessage({id: 'general.monthJanuary'})}, + {value: '2', label: intl.formatMessage({id: 'general.monthFebruary'})}, + {value: '3', label: intl.formatMessage({id: 'general.monthMarch'})}, + {value: '4', label: intl.formatMessage({id: 'general.monthApril'})}, + {value: '5', label: intl.formatMessage({id: 'general.monthMay'})}, + {value: '6', label: intl.formatMessage({id: 'general.monthJune'})}, + {value: '7', label: intl.formatMessage({id: 'general.monthJuly'})}, + {value: '8', label: intl.formatMessage({id: 'general.monthAugust'})}, + {value: '9', label: intl.formatMessage({id: 'general.monthSeptember'})}, + {value: '10', label: intl.formatMessage({id: 'general.monthOctober'})}, + {value: '11', label: intl.formatMessage({id: 'general.monthNovember'})}, + {value: '12', label: intl.formatMessage({id: 'general.monthDecember'})} +]); + +const getBirthYearOptions = intl => { + const curYearRaw = (new Date()).getYear(); + const curYear = curYearRaw + 1900; + // including both 1900 and current year, there are (curYearRaw + 1) options. + const numYearOptions = curYearRaw + 1; + const birthYearOptions = Array(numYearOptions).fill() + .map((defaultVal, i) => ( + {value: String(curYear - i), label: String(curYear - i)} + )); + birthYearOptions.unshift({ + value: 'null', + label: intl.formatMessage({id: 'general.year'}) + }); + return birthYearOptions; +}; + +class BirthDateStep extends React.Component { + constructor (props) { + super(props); + bindAll(this, [ + 'handleValidSubmit', + 'validateForm', + 'validateSelect' + ]); + } + validateSelect (selection) { + if (selection === 'null') { + return this.props.intl.formatMessage({id: 'form.validationRequired'}); + } + return null; + } + validateForm () { + return {}; + } + handleValidSubmit (formData, formikBag) { + formikBag.setSubmitting(false); + this.props.onNextStep(formData); + } + render () { + const birthMonthOptions = getBirthMonthOptions(this.props.intl); + const birthYearOptions = getBirthYearOptions(this.props.intl); + return ( + + {props => { + const { + errors, + handleSubmit, + isSubmitting + } = props; + return ( + +
+ + +
+ + ); + }} + + ); + } +} + +BirthDateStep.propTypes = { + intl: intlShape, + onNextStep: PropTypes.func +}; + +const IntlBirthDateStep = injectIntl(BirthDateStep); + +module.exports = IntlBirthDateStep; diff --git a/src/components/join-flow/join-flow.jsx b/src/components/join-flow/join-flow.jsx index b848ef52c..efa663abd 100644 --- a/src/components/join-flow/join-flow.jsx +++ b/src/components/join-flow/join-flow.jsx @@ -7,7 +7,8 @@ const injectIntl = require('../../lib/intl.jsx').injectIntl; const intlShape = require('../../lib/intl.jsx').intlShape; const Progression = require('../progression/progression.jsx'); -const JoinFlowSteps = require('./join-flow-steps.jsx'); +const UsernameStep = require('./username-step.jsx'); +const BirthDateStep = require('./birthdate-step.jsx'); /* eslint-disable react/prefer-stateless-function, react/no-unused-prop-types, no-useless-constructor @@ -35,12 +36,8 @@ class JoinFlow extends React.Component { return ( - - + + ); diff --git a/src/components/join-flow/join-flow-steps.jsx b/src/components/join-flow/username-step.jsx similarity index 64% rename from src/components/join-flow/join-flow-steps.jsx rename to src/components/join-flow/username-step.jsx index ebd1ad6f7..2d0a8bb49 100644 --- a/src/components/join-flow/join-flow-steps.jsx +++ b/src/components/join-flow/username-step.jsx @@ -1,4 +1,3 @@ -/* eslint-disable react/no-multi-comp */ const bindAll = require('lodash.bindall'); const classNames = require('classnames'); const React = require('react'); @@ -8,7 +7,6 @@ const {injectIntl, intlShape} = require('react-intl'); const validate = require('../../lib/validate'); const FormikInput = require('../../components/formik-forms/formik-input.jsx'); -const FormikSelect = require('../../components/formik-forms/formik-select.jsx'); const JoinFlowStep = require('./join-flow-step.jsx'); require('./join-flow-steps.scss'); @@ -199,135 +197,4 @@ UsernameStep.propTypes = { const IntlUsernameStep = injectIntl(UsernameStep); -module.exports.UsernameStep = IntlUsernameStep; - -/* - * BirthDateStep - */ - -const getBirthMonthOptions = intl => ([ - {value: 'null', label: intl.formatMessage({id: 'general.month'})}, - {value: '1', label: intl.formatMessage({id: 'general.monthJanuary'})}, - {value: '2', label: intl.formatMessage({id: 'general.monthFebruary'})}, - {value: '3', label: intl.formatMessage({id: 'general.monthMarch'})}, - {value: '4', label: intl.formatMessage({id: 'general.monthApril'})}, - {value: '5', label: intl.formatMessage({id: 'general.monthMay'})}, - {value: '6', label: intl.formatMessage({id: 'general.monthJune'})}, - {value: '7', label: intl.formatMessage({id: 'general.monthJuly'})}, - {value: '8', label: intl.formatMessage({id: 'general.monthAugust'})}, - {value: '9', label: intl.formatMessage({id: 'general.monthSeptember'})}, - {value: '10', label: intl.formatMessage({id: 'general.monthOctober'})}, - {value: '11', label: intl.formatMessage({id: 'general.monthNovember'})}, - {value: '12', label: intl.formatMessage({id: 'general.monthDecember'})} -]); -const curYearRaw = (new Date()).getYear(); -const curYear = curYearRaw + 1900; -const birthYearOptions = Array(curYearRaw + 2).fill() - .map((_, i) => ( - {value: String(curYear + 1 - i), label: String(curYear + 1 - i)} - )); - -class BirthDateStep extends React.Component { - constructor (props) { - super(props); - bindAll(this, [ - 'handleValidSubmit', - 'validateForm', - 'validateSelect' - ]); - } - validateSelect (selection) { - if (selection === 'null') { - return this.props.intl.formatMessage({id: 'form.validationRequired'}); - } - return null; - } - validateForm () { - return {}; - } - handleValidSubmit (formData, formikBag) { - formikBag.setSubmitting(false); - this.props.onNextStep(formData); - } - render () { - const birthMonthOptions = getBirthMonthOptions(this.props.intl); - birthYearOptions[0] = { - value: 'null', - label: this.props.intl.formatMessage({id: 'general.year'}) - }; - return ( - - {props => { - const { - errors, - handleSubmit, - isSubmitting - } = props; - return ( - -
- - -
- - ); - }} - - ); - } -} - -BirthDateStep.propTypes = { - intl: intlShape, - onNextStep: PropTypes.func -}; - -const IntlBirthDateStep = injectIntl(BirthDateStep); - -module.exports.BirthDateStep = IntlBirthDateStep; - -/* eslint-enable */ +module.exports = IntlUsernameStep;