Skip to content

Commit f7ff9ef

Browse files
nirbhayelnirbhayel
authored
[APP-2070] Improve reviews component UI (#421)
* update: review component UI * update: fix lint error * fix: review notification logic * update: remove log
1 parent 8d7a011 commit f7ff9ef

File tree

6 files changed

+216
-153
lines changed

6 files changed

+216
-153
lines changed

‎modules/reviews/assets/src/components/dismiss-button.js‎

Lines changed: 44 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,14 @@
1+
import Box from '@elementor/ui/Box';
2+
import Button from '@elementor/ui/Button';
13
import CloseButton from '@elementor/ui/CloseButton';
24
import { useStorage } from '@ea11y-apps/global/hooks';
35
import { date } from '@wordpress/date';
6+
import { __ } from '@wordpress/i18n';
47
import { useSettings } from '../hooks/use-settings';
58

6-
const DismissButton = () => {
9+
const DismissButton = ({ variant = 'icon' }) => {
710
const { save, get } = useStorage();
8-
const { setIsOpened } = useSettings();
11+
const { currentPage, setIsOpened, handleClose, handleSubmit } = useSettings();
912
const handleDismiss = async () => {
1013
if (get.hasFinishedResolution) {
1114
await save({
@@ -20,7 +23,45 @@ const DismissButton = () => {
2023

2124
setIsOpened(false);
2225
};
23-
return <CloseButton onClick={handleDismiss} />;
26+
27+
if ('icon' === variant) {
28+
return <CloseButton onClick={handleDismiss} />;
29+
}
30+
31+
if ('button' === variant) {
32+
return (
33+
<Box
34+
display="flex"
35+
flexDirection="row"
36+
gap={1}
37+
p={currentPage === 'feedback' ? 2 : 0}
38+
pt={currentPage === 'feedback' ? 0 : 2}
39+
width="100%"
40+
justifyContent="end"
41+
>
42+
<Button
43+
color="secondary"
44+
variant="text"
45+
fullWidth={currentPage === 'feedback' ? false : true}
46+
sx={{ p: currentPage === 'feedback' ? 0.5 : 2 }}
47+
onClick={handleDismiss}
48+
size="small"
49+
>
50+
{__('Not now', 'pojo-accessibility')}
51+
</Button>
52+
{currentPage === 'feedback' && (
53+
<Button
54+
color="secondary"
55+
variant="contained"
56+
onClick={() => handleSubmit(handleClose)}
57+
size="small"
58+
>
59+
{__('Submit', 'pojo-accessibility')}
60+
</Button>
61+
)}
62+
</Box>
63+
);
64+
}
2465
};
2566

2667
export default DismissButton;

‎modules/reviews/assets/src/components/feedback-form.js‎

Lines changed: 1 addition & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,10 @@
1-
import Button from '@elementor/ui/Button';
21
import FormControl from '@elementor/ui/FormControl';
32
import TextField from '@elementor/ui/TextField';
43
import { styled } from '@elementor/ui/styles';
54
import { __ } from '@wordpress/i18n';
65
import { useSettings } from '../hooks/use-settings';
76

8-
const FeedbackForm = ({ close, handleSubmitForm }) => {
7+
const FeedbackForm = () => {
98
const { feedback, setFeedback } = useSettings();
109

1110
return (
@@ -18,28 +17,15 @@ const FeedbackForm = ({ close, handleSubmitForm }) => {
1817
'Share your thoughts on how we can improve Ally …',
1918
'pojo-accessibility',
2019
)}
21-
sx={{ marginBottom: 2 }}
2220
value={feedback}
2321
color="secondary"
2422
/>
25-
<StyledButton
26-
color="secondary"
27-
variant="contained"
28-
onClick={() => handleSubmitForm(close)}
29-
>
30-
{__('Submit', 'pojo-accessibility')}
31-
</StyledButton>
3223
</FormControl>
3324
);
3425
};
3526

3627
export default FeedbackForm;
3728

38-
const StyledButton = styled(Button)`
39-
min-width: 80px;
40-
align-self: flex-end;
41-
`;
42-
4329
const StyledTextField = styled(TextField)`
4430
textarea:focus,
4531
textarea:active {

‎modules/reviews/assets/src/components/rating-form.js‎

Lines changed: 7 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import Button from '@elementor/ui/Button';
21
import FormControl from '@elementor/ui/FormControl';
32
import FormControlLabel from '@elementor/ui/FormControlLabel';
43
import ListItem from '@elementor/ui/ListItem';
@@ -16,14 +15,9 @@ import {
1615
MoodSmile,
1716
} from '../icons';
1817

19-
const RatingForm = ({ close, handleSubmitForm }) => {
20-
const {
21-
rating,
22-
setRating,
23-
setCurrentPage,
24-
nextButtonDisabled,
25-
setNextButtonDisabled,
26-
} = useSettings();
18+
const RatingForm = () => {
19+
const { setRating, setCurrentPage, handleClose, handleSubmit } =
20+
useSettings();
2721

2822
const ratingsMap = [
2923
{
@@ -55,14 +49,14 @@ const RatingForm = ({ close, handleSubmitForm }) => {
5549

5650
const handleRatingChange = (event, value) => {
5751
setRating(value);
58-
setNextButtonDisabled(false);
52+
handleNextButton(value);
5953
};
6054

61-
const handleNextButton = async () => {
62-
if (rating < 4) {
55+
const handleNextButton = async (ratingValue) => {
56+
if (ratingValue < 4) {
6357
setCurrentPage('feedback');
6458
} else {
65-
const submitted = await handleSubmitForm(close, true);
59+
const submitted = await handleSubmit(handleClose, true, ratingValue);
6660

6761
if (submitted) {
6862
setCurrentPage('review');
@@ -91,14 +85,6 @@ const RatingForm = ({ close, handleSubmitForm }) => {
9185
);
9286
})}
9387
</RadioGroup>
94-
<StyledButton
95-
color="secondary"
96-
variant="contained"
97-
onClick={handleNextButton}
98-
disabled={nextButtonDisabled}
99-
>
100-
{__('Next', 'pojo-accessibility')}
101-
</StyledButton>
10288
</FormControl>
10389
);
10490
};
@@ -110,8 +96,3 @@ const StyledFormControlLabel = styled(FormControlLabel)`
11096
margin-left: 0;
11197
width: 100%;
11298
`;
113-
114-
const StyledButton = styled(Button)`
115-
min-width: 80px;
116-
align-self: flex-end;
117-
`;

‎modules/reviews/assets/src/components/review-form.js‎

Lines changed: 38 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,16 @@
1-
import Button from '@elementor/ui/Button';
1+
import StarFilledIcon from '@elementor/icons/StarFilledIcon';
22
import FormControl from '@elementor/ui/FormControl';
3+
import Rating from '@elementor/ui/Rating';
34
import Typography from '@elementor/ui/Typography';
4-
import { styled } from '@elementor/ui/styles';
55
import { useStorage } from '@ea11y-apps/global/hooks';
66
import { mixpanelEvents, mixpanelService } from '@ea11y-apps/global/services';
77
import { __ } from '@wordpress/i18n';
88
import { WORDPRESS_REVIEW_LINK } from '../constants';
99
import { useSettings } from '../hooks/use-settings';
10+
import { MoodHappy } from '../icons';
1011

11-
const ReviewForm = ({ close }) => {
12-
const { rating } = useSettings();
12+
const ReviewForm = () => {
13+
const { rating, handleClose } = useSettings();
1314
const { save, get } = useStorage();
1415

1516
const handleSubmit = async () => {
@@ -25,32 +26,48 @@ const ReviewForm = ({ close }) => {
2526
},
2627
});
2728

28-
close();
29+
handleClose();
2930
window.open(WORDPRESS_REVIEW_LINK, '_blank');
3031
};
3132

3233
return (
33-
<FormControl fullWidth>
34-
<Typography variant="body1" marginBottom={1}>
35-
{__(
36-
'It would mean a lot if you left us a quick review, so others can discover it too.',
37-
'pojo-accessibility',
38-
)}
34+
<FormControl
35+
sx={{
36+
display: 'flex',
37+
alignItems: 'center',
38+
gap: 1,
39+
textAlign: 'center',
40+
}}
41+
fullWidth
42+
>
43+
<MoodHappy
44+
sx={{
45+
p: 1.5,
46+
backgroundColor: '#f3f3f4',
47+
borderRadius: 2,
48+
fontSize: 24,
49+
}}
50+
/>
51+
<Typography variant="h6" marginBottom={1}>
52+
{__('Awesome!', 'pojo-accessibility')}
3953
</Typography>
40-
<StyledButton
54+
<Typography
55+
variant="body1"
4156
color="secondary"
42-
variant="contained"
43-
onClick={handleSubmit}
57+
marginBottom={3}
58+
width="55%"
4459
>
45-
{__('Leave a review', 'pojo-accessibility')}
46-
</StyledButton>
60+
{__('Help others discover Ally on WordPress', 'pojo-accessibility')}
61+
</Typography>
62+
<Rating
63+
emptyIcon={<StarFilledIcon fontSize="large" />}
64+
icon={<StarFilledIcon fontSize="large" />}
65+
onChange={handleSubmit}
66+
sx={{ marginBottom: 3 }}
67+
highlightSelectedOnly={false}
68+
/>
4769
</FormControl>
4870
);
4971
};
5072

5173
export default ReviewForm;
52-
53-
const StyledButton = styled(Button)`
54-
min-width: 90px;
55-
align-self: flex-end;
56-
`;

‎modules/reviews/assets/src/hooks/use-settings.js‎

Lines changed: 95 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,9 @@
1+
import { useStorage } from '@ea11y-apps/global/hooks';
2+
import { mixpanelEvents, mixpanelService } from '@ea11y-apps/global/services';
13
import { useState, createContext, useContext } from '@wordpress/element';
4+
import { escapeHTML } from '@wordpress/escape-html';
5+
import { __ } from '@wordpress/i18n';
6+
import APIReview from '../api';
27

38
/**
49
* Context Component.
@@ -13,14 +18,99 @@ const SettingsProvider = ({ children }) => {
1318
const [rating, setRating] = useState(0);
1419
const [feedback, setFeedback] = useState('');
1520
const [currentPage, setCurrentPage] = useState('ratings');
16-
const [nextButtonDisabled, setNextButtonDisabled] = useState(true);
1721
const [isOpened, setIsOpened] = useState(true);
22+
const { save, get } = useStorage();
1823

1924
// Notification
2025
const [showNotification, setShowNotification] = useState(false);
2126
const [notificationMessage, setNotificationMessage] = useState('');
2227
const [notificationType, setNotificationType] = useState('');
2328

29+
const errorNotification = (message) => {
30+
setNotificationMessage(message);
31+
setNotificationType('error');
32+
setShowNotification(true);
33+
};
34+
35+
const successNotification = (message) => {
36+
setNotificationMessage(message);
37+
setNotificationType('success');
38+
setShowNotification(true);
39+
};
40+
41+
/**
42+
* Close the popover.
43+
* @param {Object} event
44+
* @param {string} reason
45+
*/
46+
const handleClose = (event, reason) => {
47+
if ('backdropClick' !== reason) {
48+
setIsOpened(false);
49+
}
50+
51+
mixpanelService.sendEvent(mixpanelEvents.review.dismissClicked);
52+
};
53+
54+
const handleSubmit = async (
55+
close,
56+
avoidClosing = false,
57+
submittedRating = null,
58+
) => {
59+
const ratingToSubmit = submittedRating !== null ? submittedRating : rating;
60+
try {
61+
const response = await APIReview.sendFeedback({
62+
rating: ratingToSubmit,
63+
feedback,
64+
}).then(async (res) => {
65+
await save({
66+
ea11y_review_data: {
67+
...get.data.ea11y_review_data,
68+
rating: parseInt(ratingToSubmit),
69+
feedback: escapeHTML(feedback),
70+
submitted: true,
71+
},
72+
});
73+
74+
return res;
75+
});
76+
77+
if (ratingToSubmit && !feedback) {
78+
mixpanelService.sendEvent(mixpanelEvents.review.starSelected, {
79+
rating: parseInt(ratingToSubmit),
80+
});
81+
}
82+
83+
if (feedback) {
84+
mixpanelService.sendEvent(mixpanelEvents.review.feedbackSubmitted, {
85+
feedback_text: escapeHTML(feedback),
86+
rating: parseInt(ratingToSubmit),
87+
});
88+
}
89+
90+
if (!response?.success && parseInt(rating) < 4) {
91+
/**
92+
* Show success message if the feedback was already submitted.
93+
*/
94+
await successNotification(
95+
__('Feedback already submitted', 'pojo-accessibility'),
96+
);
97+
} else if (response?.success && parseInt(rating) < 4) {
98+
await successNotification(
99+
__('Thank you for your feedback!', 'pojo-accessibility'),
100+
);
101+
}
102+
103+
if (!avoidClosing) {
104+
await close();
105+
}
106+
107+
return true;
108+
} catch (e) {
109+
errorNotification(__('Failed to submit!', 'pojo-accessibility'));
110+
return false;
111+
}
112+
};
113+
24114
return (
25115
<SettingsContext.Provider
26116
value={{
@@ -30,8 +120,6 @@ const SettingsProvider = ({ children }) => {
30120
setFeedback,
31121
currentPage,
32122
setCurrentPage,
33-
nextButtonDisabled,
34-
setNextButtonDisabled,
35123
showNotification,
36124
setShowNotification,
37125
notificationMessage,
@@ -40,6 +128,10 @@ const SettingsProvider = ({ children }) => {
40128
setNotificationType,
41129
isOpened,
42130
setIsOpened,
131+
handleClose,
132+
handleSubmit,
133+
errorNotification,
134+
successNotification,
43135
}}
44136
>
45137
{children}

0 commit comments

Comments
 (0)