[NEW] Add Feedback form

[murtaza98]

The main goal of this PR is to add functionality to display feedback form to visitors at the end of conversation.
Tasks

• Add a Feedback form
• connect Feedback form with Router
• connect feedback form with API

Feedback form UI

PS:
Most of the code here is taken from PR #104. There have been many changes in this repo since this PR #104 was opened, so I decided to create a new PR instead of updating and merging the old one.

Project Tracker for this PR

[murtaza98]

Hello, @renatobecker

All the above-mentioned tasks are completed. I think that the Livechat Widget part for this Feedback/Survey feature is complete. I'd appreciate if u could review this PR and any suggestions and feedback is most welcome:smile:

A bit about the feature implemented

When the user clicks on Finish this chat option on the chat page, they will be redirected to the feedback page.
Once the user gives the feedback and clicks Send, the app calls chatSurvey method of RC SDK.
This is the response I get from the SDK

( I don't know how to verify whether is feedback has been saved in the main RC server. However, the success property in the above response most probably indicates that the operation is a success )

After giving feedback, the user is redirected to Chat-Finished Page.

[renatobecker]

Hello, @renatobecker

All the above-mentioned tasks are completed. I think that the Livechat Widget part for this Feedback/Survey feature is complete. I'd appreciate if u could review this PR and any suggestions and feedback is most welcome😄

A bit about the feature implemented

When the user clicks on Finish this chat option on the chat page, they will be redirected to the feedback page.
Once the user gives the feedback and clicks Send, the app calls chatSurvey method of RC SDK.
This is the response I get from the SDK

( I don't know how to verify whether is feedback has been saved in the main RC server. However, the success property in the above response most probably indicates that the operation is a success )

After giving feedback, the user is redirected to Chat-Finished Page.

@murtaza98 I didn't review your PR in-depth yet, but I noticed the following situations:

• The colors/theme aren't being applied to the Survey Feedback Form/Container;
• When clicking on No, thanks button, nothing happens;
• Why did you use the emoji-mart lib if the original PR doesn't?

I'll be waiting for your reply, thanks.

[murtaza98]

Hi @renatobecker

• Why did you use the emoji-mart lib if the original PR doesn't?

When I tested the original PR, the emojis which were getting rendered were colorless. Have a look

The SS by the owner of original PR #104, shows colorful emoji's rendered. I couldn't figure out y they were appearing colorless on my laptop, that's y I added emoji-mart library.

• The colors/theme aren't being applied to the Survey Feedback Form/Container;
• When clicking on No, thanks button, nothing happens;

I will work on these 2, thanks for pointing it out

[renatobecker]

Hi @renatobecker

• Why did you use the emoji-mart lib if the original PR doesn't?

When I tested the original PR, the emojis which were getting rendered were colorless. Have a look

The SS by the owner of original PR #104, shows colorful emoji's rendered. I couldn't figure out y they were appearing colorless on my laptop, that's y I added emoji-mart library.

• The colors/theme aren't being applied to the Survey Feedback Form/Container;
• When clicking on No, thanks button, nothing happens;

I will work on these 2, thanks for pointing it out

Another important thing to mention: You hardcoded the satisfaction survey option, but you need to iterate through all survey options available on the config options.

[murtaza98]

• The colors/theme aren't being applied to the Survey Feedback Form/Container;

Applied the color scheme to the feedback page

• When clicking on No, thanks button, nothing happens;

Added a new behavior, now when No, thanks button is clicked, the user is directed to chat-finished route, and no feedback is recorded

• Why did you use the emoji-mart lib if the original PR doesn't?

Removed the dependency of emoji-mart lib. The loading of emojis is now much faster.

• Another important thing to mention: You hardcoded the satisfaction survey option, but you need to iterate through all survey options available on the config options.

Implemented this, now all the options are being read from the config. Nothing is hardcoded.

PS.
Thanks for the code review, I learned a lot from it 😄

[antkaz]

Hello! I checked this PR and found an error that the comment message is not sent to the server. It depends on the server config for livechat.

[murtaza98]

Hello @antkaz, U r correct. This PR doesn't send the comment message to the server. I tried sending it, but the server is not configured to handle it hence it was throwing an error. So in order to send the comment message, some of the interfaces and checks on the server will need to be modified.

References:
This is probably the code which will need to be modified in order to support comment message

[antkaz]

I can help you do it

[renatobecker]

It would be awesome!

[antkaz]

I created new PR for ROcket.Chat RocketChat/Rocket.Chat#18280 where I fixed old survey config and added feedback form config.
Also I created PR murtaza98#2 where I fixed current code and added sending comment to Rocket.Chat server.
Feedback saves to room data

[antkaz]

@renatobecker @murtaza98 can you review please