This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
function getStepContent(step) { | |
switch (step) { | |
case 0: | |
return <AddressForm />; | |
case 1: | |
return <PaymentForm />; | |
case 2: | |
return <Review />; | |
default: | |
throw new Error('Unknown step'); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
class Checkout extends Component { | |
state = { | |
activeStep: 0, | |
addressForm: { | |
firstName: '', | |
lastName: '', | |
address1: '', | |
address2: '', | |
city: '', | |
state: '', |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
handleChange = (name, area) => event => { | |
const value = event.target.value; | |
this.setState({ | |
[area]: { | |
...this.state[area], | |
[name]: value | |
} | |
}); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
getStepContent = (step) => { | |
switch (step) { | |
case 0: | |
return <AddressForm | |
state={this.state} | |
handleChange={this.handleChange} | |
/>; | |
case 1: | |
return <PaymentForm state={this.state} | |
handleChange={this.handleChange} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
function AddressForm(props) { | |
const { state, handleChange } = props; | |
return ( | |
<Fragment> | |
<Typography variant="h6" gutterBottom> | |
Shipping address | |
</Typography> | |
<Grid container spacing={24}> | |
<Grid item xs={12} sm={6}> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
export const fieldValidator = (name, value) => { | |
let valid = false; | |
let message = ''; | |
switch (name) { | |
case 'firstName': | |
valid = value.trim().length > 0; | |
message = validatorMessage( | |
valid, |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
function AddressForm(props) { | |
const { state, handleChange } = props; | |
return ( | |
<Fragment> | |
<Typography variant="h6" gutterBottom> | |
Shipping address | |
</Typography> | |
<Grid container spacing={24}> | |
<Grid item xs={12} sm={6}> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
handleFormValidation = () => { | |
const { validation } = this.state; | |
this.setState({ | |
validation: { | |
...validation, | |
hasErrorAddressForm: formValidator(validation, 'addressForm'), | |
} | |
}); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
export const formValidator = (validation, area) => { | |
if (area === 'addressForm') { | |
return !validation.firstName | |
|| !validation.lastName | |
|| !validation.address1 | |
|| !validation.city | |
|| !validation.zip | |
|| !validation.country | |
} | |
return true; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
handleValid = () => { | |
const { activeStep, validation } = this.state; | |
if (activeStep === 0 && !validation.hasErrorAddressForm) { | |
return false; | |
} else if (activeStep === 2) { | |
return false; | |
} | |
return true; | |
} | |
//... |
NewerOlder