Improvements to support contact form

simison commented 3 years ago

Goal: improve the clarity of the support form and speed up the support team's process.

Note that any changes that pull information about people (avatar, name) cannot be done for the "logged out" version of the form for privacy reasons.

Code:

Visuals

The form is visible at https://www.trustroots.org/support?report=dummy

Currently

Form

Confirmation

Logged out view

After

Priority improvements

[ ] Add checkbox to grant access to look into user's messages between them and whom they reported, checked by default:

"Allow support to see messages between the reported member and me." (Feel free to adjust copy)
[ ] Under "See also" add "Trustroots & safety" link once the page is done at /safety
[ ] Under "See also" add "Blocking another member" link to /faq once the question is added in the FAQ.

"Nice to have" improvements

Something that would make the experience better but isn't as important as the above things.

[ ] Add ~10px spacing between the "see also" list
[ ] At the confirmation page, add "via email" to the copy for regular messages to:

"I’m just a small website robot but I’ve sent your message to our support people. Expect them to get back to you via email very soon!"
[ ] At the confirmation page, change the copy to this or something along these lines when someone was reported, and remove the robot jokes. The point is to be empathic and indicates that we're really here to help and listen and align with the potential seriousness of the report.

"Thank you for reporting this member to us. We're sorry to hear you didn't have a good experience with Trustroots. We will get back to you as soon as possible.".

[ ] Make the "report to police" badge more visible and move it up, right before <form> tag:

<p role="alert" class="alert alert-danger"><em>If you or someone you know have witnessed or been a victim of a crime, please report it to the police immediately.</em></p>

[ ] Add "block this member from seeing and contacting me" checkbox, unchecked by default. See form HTML docs
[ ] Add name in addition to username. Assures a bit they're reporting the right person since they might not be familiar with the username, as it's less visible at the site.
[ ] Add a profile picture
[ ] Change "name + username" into "You":
[ ] Add "Incorrect email? Change it so that we can contact you." text under email. You can use <span class="help-block"></span> HTML.
[ ] Add "I want to report someone" checkbox on a regular form when people just open support without reporting someone specifically.

plastic-shurikens commented 3 years ago

Hello, I would like to work on this issue

simison commented 3 years ago

@Plvtinum-1 sure! PRs welcome. I would recommend multiple PRs for different items. Feel free to pick from lower priority tasks if you find those easier to start with.

https://team.trustroots.org/Development-Getting-Started.html

plastic-shurikens commented 3 years ago

Could you please help me with this error

> bin/generate-circle-images.js

'bin' is not recognized as an internal or external command,
operable program or batch file.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! trustroots@0.3.3 generate-circle-images: `bin/generate-circle-images.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the trustroots@0.3.3 generate-circle-images script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Ismail\AppData\Roaming\npm-cache\_logs\2021-10-15T13_58_43_067Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! trustroots@0.3.3 start:develop: `npm run generate-circle-images && gulp develop`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the trustroots@0.3.3 start:develop script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Ismail\AppData\Roaming\npm-cache\_logs\2021-10-15T13_58_43_465Z-debug.log
[14:58:43] Using gulpfile ~\Desktop\trustroots\trustroots\gulpfile.js
[14:58:43] Starting 'worker:dev'...
[14:58:43] Starting 'env:dev'...
[14:58:43] Starting '<anonymous>'...
[14:58:44] Finished '<anonymous>' after 44 ms
[14:58:44] Finished 'env:dev' after 122 ms
[14:58:44] Starting 'runNodemonWorker'...
[14:58:44] Finished 'runNodemonWorker' after 71 ms
[14:58:44] Finished 'worker:dev' after 334 ms
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! trustroots@0.3.3 start: `concurrently --raw --kill-others --kill-others-on-fail 'npm:lint:watch' 'npm:start:develop' 'npm:webpack:server' 'npm:start:worker' 'npm:dashboard:mail'`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the trustroots@0.3.3 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Ismail\AppData\Roaming\npm-cache\_logs\2021-10-15T13_58_45_084Z-debug.log

simison commented 3 years ago

@Plvtinum-1 I'm guessing that's Windows not liking bin/script-name.js instead of node ./bin/script-name.js. Changed it in https://github.com/Trustroots/trustroots/commit/9015b7d5095995338c349fe969b4863c8787d6b9, could you pull latest master and try again? Thanks for patience!

plastic-shurikens commented 3 years ago

I've managed to install docker on windows and use it instead and everything is working fine now.

plastic-shurikens commented 3 years ago

I run into another error, I think this has to do with prettier, I tried to add this to the rules "useTabs": false in the .eslintrc file but this didn't solve the issue

 197:42  error  Delete `·`                                                                                                                                                                                                       prettier/prettier
trustroots/modules/support/client/components/SupportForm.js
  198:25  error  Replace `'check'·type='checkbox'·checked` with `"check"·type="checkbox"·checked·`                                                                                                                                prettier/prettier
  199:30  error  Replace `'check'>·Allow·support·to·see·messages·the·reported·member·and·me.` with `"check">⏎················{'·'}⏎················Allow·support·to·see·messages·the·reported·member·and·me.{'·'}⏎·············`  prettier/prettier

✖ 3 problems (3 errors, 0 warnings)
  3 errors and 0 warnings potentially fixable with the `--fix` option.

plastic-shurikens commented 3 years ago

I had to use those prettier cli commands prettier --check "modules/**/*.js" to check for the files and then prettier --write "modules/**/*.js" to format the files correctly.

simison commented 3 years ago

@Plvtinum-1 I would recommend installing Prettier on your editor, and setting it to "format on save" (or "while typing").

If you prefer formatting manually, you can always run things manually with command npm run reformat-files ./server.js, which basically runs prettier --write for you.

Files also get formatted when you commit them on git.

plastic-shurikens commented 3 years ago

@simison thanks for the clarification, one problem that I still get is that I have to docker-compose up everytime I make a change to the code and restarting the docker server is talking so long, is there any solution to this? thanks

TMC89 commented 3 years ago

This look so good!!! Thank you so much for taking action so fast @simison!!

image

I suggest a bit of explanation in the "message" box so members know what they should write. Something like: please use this field to explain your experience as detailed as possible and add files of screenshots if you used another way to communicate outside of our Trustroots platform. --> This might be another convenient option to add so the report is as complete as possible.

plastic-shurikens commented 3 years ago

Hey, I almost went crazy trying to figure out all these environment issues, I still get this last one I guess, thanks for the help and sorry for posting too many errors.

ERROR in ./modules/users/client/views/profile/profile-view-basics.client.view.html 4:36
Module parse failed: Bad character escape sequence (4:36)
File was processed with these loaders:
 * ./config/webpack/templateloader.js
 * ./node_modules/html-loader/index.js
You may need an additional loader to handle the result of these loaders.
|     const html = " <avatar-name-mobile profile=profileCtrl.profile></avatar-name-mobile> <profile-overview profile=profileCtrl.profile></profile-overview> 
<div class=profile-flags ng-if=\"::app.user._id !== profileCtrl.profile._id\"> <report-member-link username=::profileCtrl.profile.username></report-member-link> <br/><br/> <block-member classname=\"'btn btn-xs btn-link text-muted'\" username=::profileCtrl.profile.username isblocked=::app.user.blocked.includes(profileCtrl.profile._id)></block-member> </div> ";
|     angular.module('ng').run(['$templateCache', function($templateCache){
>       $templateCache.put('\modules\users\client\views\profile\profile-view-basics.client.view.html', html);
|     }]);
|     module.exports = '\modules\users\client\views\profile\profile-view-basics.client.view.html';
 @ ./modules/users/client/config/users.client.routes.js 23:58-142
 @ ./modules/users/client/users.client.module.js
 @ ./config/webpack/entries/main.js
 @ multi ./node_modules/@pmmmwh/react-refresh-webpack-plugin/client/ReactRefreshEntry.js ./node_modules/@pmmmwh/react-refresh-webpack-plugin/client/ErrorOverlayEntry.js?sockHost=0.0.0.0&sockPort=3000&sockProtocol=http ./config/webpack/entries/main.js

TMC89 commented 2 years ago

@noahsmindfuck @LudoB8 @Oded-lu @loberto: what do you guys think? :)

loberto commented 2 years ago

in my humble opinion, this would be a freaking awesome improvement!

If this is hard or complex to do all together, I would ask the checkbox for accessing their messages to be up and running ASAP.

loberto commented 2 years ago

ping... anyone besides simison is on this issue?

TMC89 commented 2 years ago

Could we maybe have an "in between" solution: add text 'when making a report, you automatically give permission for support to read your conversations on our platform'.

Screenshot 2022-02-28 at 15 25 32

TMC89 commented 2 years ago

It might also be helpful to change this text: Screenshot 2022-03-04 at 15 53 43 "...... Expect them to get back to you as soon as possible!"

TMC89 commented 2 years ago

this last sentence should be changed into something usefull, members just asked their question so it's a bit late to refer again to the FAQ's and the FAQ's are also next to this message. Maybe something like: "..be sure our address isn't on your spam list and send us an update if the problem is resolved while you're waiting for an answer, thank you." What do you think @loberto

Trustroots / trustroots