Merge pull request #9002 from Bogomil-Stoyanov/feat/uepr-113-copy-registration-screen

feat: [UEPR-113] Update the copy on some teacher's account registration screens

src/components/registration/phone-number-step.jsx

@@ -75,6 +75,9 @@ class PhoneNumberStep extends React.Component {
                                 this.props.intl.formatMessage({id: 'teacherRegistration.phoneConsent'})
                             }
                         />
+                        <div className="info-box">
+                            <intl.FormattedMessage id="teacherRegistration.phoneSecurityNotice" />
+                        </div>
                         <NextStepButton
                             text={<intl.FormattedMessage id="registration.nextStep" />}
                             waiting={this.props.waiting}

src/components/registration/steps.jsx

@@ -176,14 +176,15 @@ class UsernameStep extends React.Component {
                         <FormattedMessage id="registration.usernameStepTitle" />
                     )}
                 </h2>
-                <p className="description">
+                <p className="description wide">
                     {this.props.description ? (
                         this.props.description
                     ) : (
                         <span>
-                            <FormattedMessage id="registration.usernameStepDescription" />&nbsp;
+                            <FormattedMessage id="teacherRegistration.requestTeacherAccountInstructions" />
+                            <br />
                             <b>
-                                <FormattedMessage id="registration.usernameStepRealName" />
+                                <FormattedMessage id="teacherRegistration.usernameStepRealName" />
                             </b>
                         </span>
                     )}
@@ -1131,6 +1132,12 @@ const IntlUseScratchStep = injectIntl(UseScratchStep);
 /*
  * EMAIL STEP
  */
+
+const Email = chunks => (<a
+    href="mailto:no-reply@scratch.mit.edu"
+    className="underline-link"
+>{chunks}</a>);
+
 class EmailStep extends React.Component {
     constructor (props) {
         super(props);
@@ -1193,8 +1200,17 @@ class EmailStep extends React.Component {
                 <h2>
                     <FormattedMessage id="teacherRegistration.emailStepTitle" />
                 </h2>
+                <p className="description wide">
+                    <FormattedMessage
+                        id="teacherRegistration.emailStepDescription1"
+                        values={{a: Email}}
+                    />
+                </p>
+                <p className="description wide">
+                    <FormattedMessage id="teacherRegistration.emailStepDescription2" />
+                </p>
                 <p className="description">
-                    <FormattedMessage id="teacherRegistration.emailStepDescription" />
+                    <FormattedMessage id="teacherRegistration.reviewProcess" />
                     <Tooltip
                         tipContent={
                             this.props.intl.formatMessage({id: 'registration.nameStepTooltip'})
@@ -1273,6 +1289,11 @@ const IntlEmailStep = injectIntl(EmailStep);
 
 const EducatorResourcesLink = chunks => <a href="/educators#resources">{chunks}</a>;
 
+const BoldEmail = chunks => (<a
+    href="mailto:no-reply@scratch.mit.edu"
+    className="bold-link"
+>{chunks}</a>);
+const Link = chunks => <a href={chunks}>{chunks}</a>;
 /*
  * TEACHER APPROVAL STEP
  */
@@ -1289,9 +1310,24 @@ const TeacherApprovalStep = props => (
                 <Card className="confirm">
                     <h4><FormattedMessage id="registration.confirmYourEmail" /></h4>
                     <p>
-                        <FormattedMessage id="registration.confirmYourEmailDescription" /><br />
+                        <FormattedMessage
-                        <strong>{props.email}</strong>
+                            id="teacherRegistration.confirmYourEmailDescription"
+                            values={{a: BoldEmail}}
+                        />
                     </p>
+                    <br />
+                    <p>
+                        <FormattedMessage
+                            id="teacherRegistration.confirmYourEmailFirewall"
+                            values={{a: BoldEmail}}
+                        />
+                    </p>
+                    <br />
+                    <p>
+                        <FormattedMessage
+                            id="teacherRegistration.confirmationEmail"
+                        />
+                        <strong>{props.email}</strong></p>
                 </Card>
             )
         }
@@ -1299,7 +1335,10 @@ const TeacherApprovalStep = props => (
             <Card className="wait">
                 <h4><FormattedMessage id="registration.waitForApproval" /></h4>
                 <p>
-                    <FormattedMessage id="registration.waitForApprovalDescription" />
+                    <FormattedMessage
+                        id="registration.waitForApprovalDescription"
+                        values={{b: Link}}
+                    />
                 </p>
             </Card> : []
         }

src/components/registration/steps.scss

@@ -44,6 +44,21 @@
         color: $ui-dark-gray;
     }
 
+    .description.wide {
+        margin: 0 -8rem 0 -8rem;
+    }
+
+    .underline-link {
+        text-decoration: underline;
+        color: $ui-white;
+        font-weight: inherit;
+    }
+
+    .bold-link {
+        font-weight: bold;
+        color: $type-gray;
+    }
+
     &.class-invite-step {
         text-align: center;
 
@@ -73,6 +88,9 @@
             top:auto;
             left:auto;
         }
+        > .description.wide { 
+            margin: 0 -3.2rem 2rem -3.2rem;
+        }
     }
 
     &.demographics-step {
@@ -112,6 +130,17 @@
                 margin-bottom: 1.25rem;
             }
         }
+
+        .info-box{
+            display: block;
+            margin: 0 -4rem 0 -4rem;
+            background-color: rgba($ui-blue, 0.15);
+            color: $ui-blue;
+            padding: 1rem; 
+            text-align: center;
+            font-size: 12px;
+            font-weight: bold;
+        }
     }
 
     &.organization-step {

src/components/slide/slide.scss

@@ -30,3 +30,9 @@
         padding: 0;
     }
 }
+
+@media only screen and (max-width : 941px) {
+    .slide .description-wide { 
+        margin: 0 -2rem 2rem -2rem;
+    } 
+}

src/l10n.json

@@ -235,7 +235,7 @@
     "registration.showPassword": "Show password",
     "registration.troubleReload": "Scratch is having trouble finishing registration. Try reloading the page or try again in another browser.",
     "registration.tryAgainInstruction": "Click \"Try again\".",
-    "registration.usernameStepDescription": "Fill in the following forms to request an account. The approval process may take up to one day.",
+    "registration.usernameStepDescription": "Fill in the following forms to request an account. You will need to confirm you email. The approval process may take up to one day.",
     "registration.usernameStepDescriptionNonEducator": "Create projects, share ideas, make friends. It’s free!",
     "registration.usernameStepRealName": "Please do not use any portion of your real name in your username.",
     "registration.usernameAdviceShort": "Don't use your real name",
@@ -261,7 +261,7 @@
     "registration.validationUsernameSpaces": "Usernames can't have spaces",
     "registration.validationEmailInvalid": "Email doesn’t look right. Try another?",
     "registration.waitForApproval": "Wait for Approval",
-    "registration.waitForApprovalDescription": "You can log into your Scratch Account now, but the features specific to Teachers are not yet available. Your information is being reviewed. Please be patient, the approval process can take up to one day. You will receive an email indicating your account has been upgraded once your account has been approved.",
+    "registration.waitForApprovalDescription": "You can log into your Scratch Account now, but the features specific to Teachers are not yet available. Your information is being reviewed. Please be patient, the approval process can take up to one day. You will receive an email indicating your account has been upgraded once your account has been approved. If you have not received a confirmation email within 24 hours, please reach out to the Scratch Team at <b>https://scratch.mit.edu/contact-us/</b>.",
     "registration.welcomeStepDescription": "You have successfully set up a Scratch account! You are now a member of the class:",
     "registration.welcomeStepDescriptionNonEducator": "You’re now logged in! You can start exploring and creating projects.",
     "registration.welcomeStepInstructions": "Want to share and comment? Click the link on the email we sent to {email}.",

src/views/teacherregistration/l10n.json

@@ -1,13 +1,16 @@
 {
+    "teacherRegistration.requestTeacherAccountInstructions": "Fill in the following forms to request an account. You will need to confirm your email address before your account is approved. The approval process may take up to one day after you have confirmed your email address.",
+    "teacherRegistration.usernameStepRealName": "Please do not use any portion of your real name in your usernames. Usernames containing names are subject to immediate deletion.",
     "teacherRegistration.nameStepTitle": "First & Last Name",
     "teacherRegistration.nameStepTitleNew": "First & Last Name",
     "teacherRegistration.nameStepDescription": "Your name will not be displayed publicly, and will be kept confidential and secure.",
     "teacherRegistration.firstName": "First Name",
     "teacherRegistration.lastName": "Last Name",
-    "teacherRegistration.phoneNumber": "Phone Number",
+    "teacherRegistration.phoneNumber": "Mobile Number",
-    "teacherRegistration.phoneStepDescription": "Your phone number will not be displayed publicly, and will be kept confidential and secure",
+    "teacherRegistration.phoneStepDescription": "Your mobile number will not be displayed publicly, and will be kept confidential and secure",
     "teacherRegistration.phoneConsent": "Yes, the Scratch Team may call me to verify my Teacher Account if needed",
     "teacherRegistration.validationPhoneNumber": "Please enter a valid phone number",
+    "teacherRegistration.phoneSecurityNotice": "To secure your account, we will send you a one-time passcode to verify it’s really you. ",
     "teacherRegistration.validationPhoneConsent": "You must consent to verification of your Teacher Account",
     "teacherRegistration.privacyDescription": "Your information will not be displayed publicly, and will be kept confidential and secure.",
     "teacherRegistration.organization": "Organization",
@@ -34,7 +37,12 @@
     "teacherRegistration.useScratchMaxLength": "Description must be at most 300 characters",
     "teacherRegistration.howUseScratch": "How do you plan to use Scratch at your organization?",
     "teacherRegistration.emailStepTitle": "Email Address",
-    "teacherRegistration.emailStepDescription": "We will send you a confirmation email that will allow you to access your Scratch Teacher Account.",
+    "teacherRegistration.emailStepDescription1": "We will send you an email from <a>no-reply@scratch.mit.edu</a> to verify your email address.",
+    "teacherRegistration.emailStepDescription2": "Once you confirm your email, we will proceed with reviewing your request for a Teacher Account.",
+    "teacherRegistration.reviewProcess": "The review process may take up to 24 hours.",
+    "teacherRegistration.confirmYourEmailDescription": "Please check your inbox for a confirmation email from <a>no-reply@scratch.mit.edu</a> to verify your email address before your account can be approved.",
+    "teacherRegistration.confirmYourEmailFirewall": "Many schools use email firewalls. To prevent delays in approving your account, please ask your school's IT department to whitelist <a>no-reply@scratch.mit.edu</a>. This will ensure that you can get automated emails from Scratch in the future, which you'll need for things like changing your or your students' passwords.",
+    "teacherRegistration.confirmationEmail": "Click the link in the confirmation email sent to: ",
     "teacherRegistration.validationEmailMatch": "The emails do not match",
     "teacherRegistration.validationAge": "Sorry, teachers must be at least 16 years old"
 }