Add new Contact Us information page #3719

chrisgarrity · 2020-02-28T14:31:34Z

Resolves:

Moves the contact-us form from the legacy scratchr2 system to www.

Changes:

Slight update to the wording to make it a bit more friendly. Also uses the Freshdesk formwidget to submit directly to Freshdesk instead of sending an email (will allow us to remove one email path from scratchr2)

adds new component HelpForm for the Freshdesk component
adds new contact-us view
modifies Information page css with style for a header on the right hand nav section
adds new route for the contact-us page (is identical to the old scratchr2 URL)

Note: Information Page template is NOT responsive, and that is out of scope for this change.

Test Coverage:

Testing

Text displays (no message ids - check other languages, but don't expect translation)
Form displays (only be English for now)
Can submit form
if logged in the additional info (scroll the form to view) includes Scratch username and browser info
if not logged in, additional info has blank username, browser is still filled in
browser info is correct (browser, operating system etc. should match window.navigator.userAgent in the console)
links from reporting profile or studio modals link to new form with relevant info in subject and description.
Verify that form is accessible and can be submitted from China

apple502j

Some questions and typos

src/components/helpform/helpform.jsx

src/views/contact-us/l10n.json

apple502j · 2020-02-28T14:48:39Z

src/components/helpform/helpform.jsx

+const FormattedMessage = require('react-intl').FormattedMessage;
+
+const HelpForm = props => {
+    const prefix = 'https://mitscratch.freshdesk.com/widgets/feedback_widget/new?&widgetType=embedded&widgetView=yes&screenshot=No&searchArea=No&captcha=yes';


Just in case: is this accessible in China?

Good question. They do support both traditional and simplified Chinese, and it looks like there are websites in China that use Freshdesk, so I think the answer is yes, but we'll definitely check.

apple502j · 2020-02-28T14:57:37Z

Questions:

Can email be optional somehow for logged-ins? Most Scratchers would use parents' emails, and the response should be readable easily without asking their parents. I have some ideas but the easiest would be "Reply by Alert".
Is it possible to translate the form in the future?
As I said above, forum link l10n would be a nice feature to have. Not all languages have their own forum and question topics, so it may be hard but I think it's worth.
We should have more dropdown options: see Migrate - Contact Us #308
What would happen if the iframe/js fails to load?

Using the Freshdesk Feedback form * adds new component HelpForm for the Freshdesk component * adds new contact-us view * modifies Information page css with style for a header on the right hand nav section * adds new route for the contact-us page (is identical to the old scratchr2 URL)

chrisgarrity · 2020-03-02T18:11:55Z

@apple502j good questions.
This is just the beginning of a larger overhaul of the way that people contact us, so it's not going to do everything. For the particular questions:

We could possibly pre-fill the email with whatever email is associated with their account, but it cannot be optional.
Yes it will be able to be translated in the future
Interesting idea, but probably out of scope for what we're doing right now.
Next phase will be more dropdowns and required fields
Right now it would just be a blank iframe if freshdesk is unavailable.

Decided that there is no need for the Nav sidebar since we don’t want the link to the Discussions right now. It could come back if we add the knowledge base.

rschamp

Offline we discussed:

Passing this by the design team for input about what to do about the page width.
Increasing the height of the form to avoid the scroll-box inside a scrolling window issue, and to be transparent about the fields we're gathering

The other line comments I left are probably optional

rschamp · 2020-03-05T14:24:50Z

src/views/contact-us/contact-us.jsx

+    let subject = '';
+    let body = '';
+    const url = (window.location && window.location.search) || '';
+    // assumes that scratchr2 will only ever send one parameter
+    const params = url.split('?')[1];
+    if (typeof (params) !== 'undefined' && params.indexOf('studio') !== -1) {
+        subject = `Inappropriate content reported in studio ${params.split('=')[1]}`;
+        body = `https://scratch.mit.edu/studios/${params.split('=')[1]}`;
+    } else if (typeof (params) !== 'undefined' && params.indexOf('profile') !== -1) {
+        subject = `Inappropriate content reported in profile ${params.split('=')[1]}`;
+        body = `https://scratch.mit.edu/users/${params.split('=')[1]}`;
+    } else if (typeof (params) !== 'undefined' && params.indexOf('confirmation') !== -1) {
+        subject = 'Problem with email confirmation';
+    }


I think this might be more readable and flexible if it happened outside of the component and resulted in passing in subject and body as props.

Looking at other pages in www that use the search string the better approach looked like creating a constructor, and putting the values in the state.

src/components/helpform/helpform.jsx

Scratchr2 has links to contact us from the report (profile|studio) dialogs. Looking at the scratchr2 source, there’s also one for confirmations, so this change handles the additional details in the same way - in the subject and description. In the future we could consider pre-filling specific form fields that we define.

* With Carl decided to put the sidebar back even with just one item. It’s still one we want to emphasize. * made sure the freshdesk js file would not block loading the form (it doesn’t appear to be needed for the form, it’s probably mainly for the pop-up version) * moved the query processing into a constructor (more idomatic react) * expanded the form so it should not need to scroll - also noted that in incognito mode a captcha is shown, so created enough space for that to be visible.

rschamp

LGTM! I have one comment about the iframe height, but not sure if that's a blocker or not.

rschamp · 2020-03-09T13:47:06Z

src/components/helpform/helpform.jsx

+            <iframe
+                className="freshwidget-embedded-form"
+                frameBorder="0"
+                height="744px"


I didn't know you could include px for the height attribute — maybe React is stripping it out?

rschamp · 2020-03-09T13:50:08Z

We should also add to the test plan that we're going to look at availability from China.

rschamp · 2020-03-13T14:47:16Z

src/components/helpform/helpform.jsx

+                id="freshwidget-embedded-form"
+                scrolling="no"
+                src={`${prefix}&${title}&${username}&${browser}&${formSubject}&${formDescription}`}
+                title={<FormattedMessage id="contactUs.questionsForum" />}


It looks like this is being rendered as [object Object] — I think we need to change it to use formatMessage (although I'm not sure what this attribute is here for).

chrisgarrity added the pr - needs review label Feb 28, 2020

chrisgarrity requested a review from rschamp February 28, 2020 14:31

chrisgarrity assigned rschamp Feb 28, 2020

apple502j reviewed Feb 28, 2020

View reviewed changes

chrisgarrity force-pushed the freshdesk-contactus branch from 0825d4b to 8fc9b57 Compare March 2, 2020 16:34

chrisgarrity added 2 commits March 3, 2020 10:10

Revised wording

3dc5155

Remove the nav section and make the form full width

f0bcd9f

Decided that there is no need for the Nav sidebar since we don’t want the link to the Discussions right now. It could come back if we add the knowledge base.

rschamp suggested changes Mar 5, 2020

View reviewed changes

rschamp added pr - changes requested and removed pr - needs review labels Mar 5, 2020

rschamp assigned chrisgarrity and unassigned rschamp Mar 5, 2020

chrisgarrity force-pushed the freshdesk-contactus branch from b8821b0 to ee09ba5 Compare March 5, 2020 16:51

chrisgarrity assigned rschamp and unassigned chrisgarrity Mar 9, 2020

chrisgarrity added pr - needs review and removed pr - changes requested labels Mar 9, 2020

rschamp approved these changes Mar 9, 2020

View reviewed changes

rschamp added pr - good to merge and removed pr - needs review labels Mar 9, 2020

rschamp added this to the March 2020 milestone Mar 9, 2020

rschamp assigned chrisgarrity and unassigned rschamp Mar 9, 2020

chrisgarrity merged commit 9335274 into scratchfoundation:develop Mar 10, 2020

chrisgarrity deleted the freshdesk-contactus branch March 10, 2020 14:58

rschamp reviewed Mar 13, 2020

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add new Contact Us information page #3719

Add new Contact Us information page #3719

chrisgarrity commented Feb 28, 2020 •

edited

apple502j left a comment

apple502j Feb 28, 2020

chrisgarrity Mar 2, 2020

apple502j commented Feb 28, 2020

chrisgarrity commented Mar 2, 2020

rschamp left a comment

rschamp Mar 5, 2020

chrisgarrity Mar 6, 2020

rschamp left a comment

rschamp Mar 9, 2020

rschamp commented Mar 9, 2020

rschamp Mar 13, 2020

Add new Contact Us information page #3719

Add new Contact Us information page #3719

Conversation

chrisgarrity commented Feb 28, 2020 • edited

Resolves:

Changes:

Test Coverage:

apple502j left a comment

Choose a reason for hiding this comment

apple502j Feb 28, 2020

Choose a reason for hiding this comment

chrisgarrity Mar 2, 2020

Choose a reason for hiding this comment

apple502j commented Feb 28, 2020

chrisgarrity commented Mar 2, 2020

rschamp left a comment

Choose a reason for hiding this comment

rschamp Mar 5, 2020

Choose a reason for hiding this comment

chrisgarrity Mar 6, 2020

Choose a reason for hiding this comment

rschamp left a comment

Choose a reason for hiding this comment

rschamp Mar 9, 2020

Choose a reason for hiding this comment

rschamp commented Mar 9, 2020

rschamp Mar 13, 2020

Choose a reason for hiding this comment

chrisgarrity commented Feb 28, 2020 •

edited