| 1 |
import FormControl from '@elementor/ui/FormControl'; |
| 2 |
import FormControlLabel from '@elementor/ui/FormControlLabel'; |
| 3 |
import ListItem from '@elementor/ui/ListItem'; |
| 4 |
import ListItemIcon from '@elementor/ui/ListItemIcon'; |
| 5 |
import Radio from '@elementor/ui/Radio'; |
| 6 |
import RadioGroup from '@elementor/ui/RadioGroup'; |
| 7 |
import { styled } from '@elementor/ui/styles'; |
| 8 |
import Button from '@elementor/ui/Button'; |
| 9 |
import { __ } from '@wordpress/i18n'; |
| 10 |
import { MoodEmpty, MoodHappy, MoodSad, MoodSadSquint, MoodSmile } from '../icons'; |
| 11 |
import { useSettings } from '../hooks/use-settings'; |
| 12 |
|
| 13 |
const RatingForm = ( { close, handleSubmitForm } ) => { |
| 14 |
const { |
| 15 |
rating, |
| 16 |
setRating, |
| 17 |
setCurrentPage, |
| 18 |
nextButtonDisabled, |
| 19 |
setNextButtonDisabled, |
| 20 |
} = useSettings(); |
| 21 |
|
| 22 |
const ratingsMap = [ |
| 23 |
{ value: '5', label: __( 'Excellent', 'image-optimization' ), icon: <MoodHappy /> }, |
| 24 |
{ value: '4', label: __( 'Pretty good', 'image-optimization' ), icon: <MoodSmile /> }, |
| 25 |
{ value: '3', label: __( "It's okay", 'image-optimization' ), icon: <MoodEmpty /> }, |
| 26 |
{ value: '2', label: __( 'Could be better', 'image-optimization' ), icon: <MoodSadSquint /> }, |
| 27 |
{ value: '1', label: __( 'Needs improvement', 'image-optimization' ), icon: <MoodSad /> }, |
| 28 |
]; |
| 29 |
|
| 30 |
const handleRatingChange = ( value ) => { |
| 31 |
setRating( value ); |
| 32 |
setNextButtonDisabled( false ); |
| 33 |
}; |
| 34 |
|
| 35 |
const handleNextButton = async () => { |
| 36 |
if ( parseInt( rating ) < 4 ) { |
| 37 |
setCurrentPage( 'feedback' ); |
| 38 |
} else { |
| 39 |
const submitted = await handleSubmitForm( close, true ); |
| 40 |
|
| 41 |
if ( submitted ) { |
| 42 |
setCurrentPage( 'review' ); |
| 43 |
} |
| 44 |
} |
| 45 |
}; |
| 46 |
|
| 47 |
return ( |
| 48 |
<FormControl fullWidth> |
| 49 |
<RadioGroup |
| 50 |
aria-labelledby="Image Optimizer feedback form" |
| 51 |
onChange={ ( event, value ) => handleRatingChange( value ) } |
| 52 |
name="radio-buttons-group" |
| 53 |
> |
| 54 |
{ ratingsMap.map( ( { value, label, icon } ) => { |
| 55 |
return ( |
| 56 |
<ListItem key={ 'item-' + value } disableGutters disablePadding> |
| 57 |
<ListItemIcon>{ icon }</ListItemIcon> |
| 58 |
<StyledFormControlLabel |
| 59 |
control={ <Radio color="secondary" /> } |
| 60 |
label={ label } |
| 61 |
value={ value } |
| 62 |
labelPlacement="start" /> |
| 63 |
</ListItem> |
| 64 |
); |
| 65 |
} ) } |
| 66 |
</RadioGroup> |
| 67 |
<Button |
| 68 |
color="primary" |
| 69 |
variant="contained" |
| 70 |
onClick={ handleNextButton } |
| 71 |
disabled={ nextButtonDisabled } |
| 72 |
> |
| 73 |
{ __( 'Next', 'image-optimization' ) } |
| 74 |
</Button> |
| 75 |
</FormControl> |
| 76 |
); |
| 77 |
}; |
| 78 |
|
| 79 |
export default RatingForm; |
| 80 |
|
| 81 |
const StyledFormControlLabel = styled( FormControlLabel )` |
| 82 |
justify-content: space-between; |
| 83 |
margin-left: 0; |
| 84 |
width: 100%; |
| 85 |
`; |
| 86 |
|
