trustroots
trustroots copied to clipboard
Trustroots
Improvements to support contact form
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
/faqonce 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.
@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
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! [email protected] generate-circle-images: `bin/generate-circle-images.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] 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! [email protected] start:develop: `npm run generate-circle-images && gulp develop`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] 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! [email protected] 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 [email protected] 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
@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!
I've managed to install docker on windows and use it instead and everything is working fine now.
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.
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.
@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.
@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
This look so good!!! Thank you so much for taking action so fast @simison!!
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.
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
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.
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'.
It might also be helpful to change this text:
"...... Expect them to get back to you as soon as possible!"
- 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
