Merge pull request #33982 from code-dot-org/fnd-1093-sign-up-with-par…

…ent-email

 Parent notification option during student sign up

apps/src/sites/studio/pages/devise/registrations/_finish_sign_up.js

@@ -5,17 +5,19 @@ import ReactDOM from 'react-dom';
 import SchoolInfoInputs from '@cdo/apps/templates/SchoolInfoInputs';
 import getScriptData from '@cdo/apps/util/getScriptData';
 import firehoseClient from '@cdo/apps/lib/util/firehose';
+import experiments from '@cdo/apps/util/experiments';
 
 const TEACHER_ONLY_FIELDS = [
   '#teacher-name-label',
-  '#school-info-inputs',
+  '#school-info-section',
   '#email-preference-radio'
 ];
 const STUDENT_ONLY_FIELDS = [
   '#student-name-label',
   '#gender-dropdown',
   '#age-dropdown',
-  '#student-consent'
+  '#student-consent',
+  '#parent-email-container'
 ];
 
 // Values loaded from scriptData are always initial values, not the latest
@@ -36,6 +38,16 @@ $(document).ready(() => {
   function init() {
     setUserType(getUserType());
     renderSchoolInfo();
+    // FND-1099 Remove this once PARENT_EMAIL_PREFERENCE is launched.
+    setupParentEmailPreferenceExperiment();
+    renderParentSignUpSection();
+  }
+
+  // FND-1099 Remove this once PARENT_EMAIL_PREFERENCE is launched.
+  function setupParentEmailPreferenceExperiment() {
+    if (experiments.isEnabled(experiments.PARENT_EMAIL_PREFERENCE)) {
+      $('#parent-email-experiment-container').show();
+    }
   }
 
   let alreadySubmitted = false;
@@ -73,6 +85,24 @@ $(document).ready(() => {
     }
   }
 
+  $('#user_parent_email_preference_opt_in_required').change(
+    renderParentSignUpSection
+  );
+
+  function renderParentSignUpSection() {
+    let checked = $('#user_parent_email_preference_opt_in_required').is(
+      ':checked'
+    );
+    if (checked) {
+      $('#user_user_type')
+        .val('student')
+        .change();
+      fadeInFields(['.parent-email-field']);
+    } else {
+      hideFields(['.parent-email-field']);
+    }
+  }
+
   $('#user_user_type').change(function() {
     var value = $(this).val();
     setUserType(value);

apps/src/util/experiments.js

@@ -31,6 +31,8 @@ experiments.TEACHER_DASHBOARD_SECTION_BUTTONS =
   'teacher-dashboard-section-buttons';
 experiments.TEACHER_DASHBOARD_SECTION_BUTTONS_ALTERNATE_TEXT =
   'teacher-dashboard-section-buttons-alternate-text';
+// FND-1099 Remove this once PARENT_EMAIL_PREFERENCE is launched.
+experiments.PARENT_EMAIL_PREFERENCE = 'parent-email-preference';
 
 /**
  * Get our query string. Provided as a method so that tests can mock this.

dashboard/app/assets/stylesheets/application.scss

@@ -1608,12 +1608,19 @@ a.download-video {
     width: 800px;
   }
 
+  .signup-header {
+    margin: 0;
+    flex-grow: 1;
+    text-align: center;
+  }
+
   .signup, .finish-signup {
     $school-info-background: #f7f7f7;
     $school-info-border-color: #e5e5e5;
 
-    #school-info-inputs {
-      width: 100%;
+    .section-container {
+      padding: 10px;
+      flex-grow: 1;
       background-color: $school-info-background;
       border: 1px solid $school-info-border-color;
 
@@ -1626,6 +1633,10 @@ a.download-video {
       }
     }
 
+    #school-info-inputs {
+      padding: 0;
+    }
+
     .field-row {
       display: flex;
       align-items: center;
@@ -1644,7 +1655,10 @@ a.download-video {
 
     .field_with_errors {
       display: flex;
-      flex-grow: 1;
+      flex-basis: 100%;
+      input, select {
+        border-color: $red;
+      }
     }
 
     .field_with_errors label {
@@ -1690,7 +1704,7 @@ a.download-video {
 
     .row {
       display: flex;
-      margin-bottom: 10px;
+      margin-bottom: 20px;
 
       [class*=span] {
         align-self: center;
@@ -1714,6 +1728,49 @@ a.download-video {
       }
     }
 
+    #parent-email-section {
+      background-color: $school-info-background;
+      border: 1px solid $school-info-border-color;
+      flex-wrap: wrap;
+    }
+
+    .signup-field-label {
+      flex-wrap: wrap;
+
+      p {
+        margin: 0;
+      }
+    }
+
+    .padded-container {
+      padding: 20px;
+      display: flex;
+      flex-wrap: wrap;
+      .row {
+        flex-grow: 1;
+      }
+
+      .parent-email-field-input {
+        flex-grow: 1;
+      }
+    }
+
+    .parent-email-section-header {
+      margin-bottom: 0;
+      flex-grow: 1;
+    }
+
+    .parent-email-field {
+      margin-top: 20px;
+      margin-bottom: 0;
+      flex-grow: 1;
+    }
+
+    #teacher-name-label, #student-name-label {
+      display: flex;
+      flex-basis: 100%;
+    }
+
     .checkbox {
       display: flex;
       padding: 0;
@@ -1724,7 +1781,7 @@ a.download-video {
 
       p, span {
         margin: 0;
-        padding: 10px;
+        padding: 0 10px;
         font-size: 14px;
       }
     }
@@ -1736,6 +1793,7 @@ a.download-video {
     }
 
     .radio {
+      padding: 0;
       display: flex;
       input[type=radio] {
         margin-left: 0;
@@ -1746,7 +1804,7 @@ a.download-video {
         margin-right: 5px;
       }
       .field_with_errors {
-        flex-grow: 0;
+        flex-basis: content;
       }
     }
 
@@ -1775,6 +1833,13 @@ a.download-video {
       align-self: center;
       font-style: italic;
     }
+
+    .tos {
+      p {
+        font-size: 14px;
+        margin: 0;
+      }
+    }
   }
 }
 
@@ -1809,11 +1874,6 @@ a.download-video {
   }
 }
 
-.signup-header {
-  flex-grow: 1;
-  text-align: center;
-}
-
 // NEW STYLES FOR devise/shared/_new_links
 .devise-links {
   flex-grow: 2;

dashboard/app/views/devise/registrations/_finish_sign_up.html.haml

@@ -8,12 +8,12 @@
 
 #signup
   .row
-    .span8.header
+    .span10.header
       %h1= @page_title
 
   = form_for(@user, url: registration_path(@user), html: {class: "finish-signup"}) do |f|
     .row
-      .span8
+      .span10
         %p
           - if @user.provider.present?
             - provider = t("auth.#{@user.provider}")
@@ -26,48 +26,75 @@
     = f.hidden_field :email
     = f.hidden_field :encrypted_password
     .row
-      .span2
+      .span3.signup-field-label
         = f.label :user_type, t('signup_form.user_type_label')
-      .span4
+        - if @user.errors[:user_type].present?
+          %p.error= t('activerecord.errors.messages.blank')
+      .span5
         = f.select :user_type, user_type_options, {include_blank: true}, {disabled: @user.should_disable_user_type?}
       .span2
-        - if @user.errors[:user_type].present?
-          %span.error= t('activerecord.errors.messages.blank')
-
+    =# FND-1099 Remove this container once PARENT_EMAIL_PREFERENCE is launched.
+    #parent-email-experiment-container{style: "display: none;"}
+      .row#parent-email-container
+        .span8#parent-email-section
+          .padded-container
+            .row.parent-email-section-header
+              .span7.parent-email-field-input
+                .checkbox
+                  = f.label :parent_email_preference_opt_in_required do
+                    = f.check_box :parent_email_preference_opt_in_required
+                    %span= t('signup_form.parent_account_checkbox')
+            .row.parent-email-field
+              .span3.signup-field-label
+                = f.label :parent_email do
+                  %span= t('signup_form.parent_account_email_label')
+                - if @user.errors[:parent_email_preference_email].present?
+                  %p.error= @user.errors[:parent_email_preference_email]&.first
+              .span4.parent-email-field-input
+                = f.email_field :parent_email_preference_email, maxlength: 255, value: @user.parent_email_preference_email || @user.email
+            .row.parent-email-field
+              .span6.signup-field-label
+                = t('signup_form.parent_account_email_progress_permission', privacy_policy_url: CDO.code_org_url('/privacy'), markdown: true).html_safe
+                - if @user.errors[:parent_email_preference_opt_in].present?
+                  %p.error= t('signup_form.email_preference_required')
+              .span1.parent-email-field-input{style:"display:block"}
+                .radio
+                  = f.radio_button :parent_email_preference_opt_in, 'yes'
+                  = f.label :parent_email_preference_opt_in, t('signup_form.email_preference_yes'), value: 'yes'
+                .radio
+                  = f.radio_button :parent_email_preference_opt_in, 'no'
+                  = f.label :parent_email_preference_opt_in, t('signup_form.email_preference_no'), value: 'no'
     .row
-      .span2
+      .span3.signup-field-label
         #teacher-name-label{style: "display: none;"}
           = f.label :name, t('activerecord.attributes.user.name').html_safe
         #student-name-label{style: "display: none;"}
           = f.label :name, t('activerecord.attributes.user.name_example')
-      .span4
-        = f.text_field :name, maxlength: 255
-      .span2
         - if @user.errors[:name].present?
-          %span.error= @user.errors[:name].join(', ')
+          %p.error= @user.errors[:name].join(', ')
+      .span5
+        = f.text_field :name, maxlength: 255
 
     .row#age-dropdown{style: "display: none;"}
-      .span2
+      .span3.signup-field-label
         = f.label :age
-      .span4
-        = f.select :age, age_options, include_blank: true
-      .span2
         - if @user.errors[:age].present?
-          %span.error= @user.errors[:age].join(', ')
+          %p.error= @user.errors[:age].join(', ')
+      .span5
+        = f.select :age, age_options, include_blank: true
 
     .row#gender-dropdown{style: "display: none;"}
-      .span2
+      .span3.signup-field-label
         = f.label :gender, t('signup_form.gender')
-      .span4
+      - if @user.errors[:gender].present?
+        %span.error= @user.errors[:gender].join(', ')
+      .span5
         = f.select :gender, gender_options
-      .span2
-        - if @user.errors[:gender].present?
-          %span.error= @user.errors[:gender].join(', ')
 
-    .row
-      .span8
+    .row#school-info-section{style: "display: none;"}
+      .span10
         -# Mount point for React SchoolInfoInputs component.
-        #school-info-inputs{style: "display: none;"}
+        #school-info-inputs.section-container
           = f.fields_for :school_info_attributes do |ff|
             = ff.hidden_field :school_id
             = ff.hidden_field :school_name
@@ -77,15 +104,9 @@
             = ff.hidden_field :full_address
 
     .row
-      .span6
-        .checkbox
-          = f.label :terms_of_service_version do
-            = f.check_box :terms_of_service_version, {}, User::TERMS_OF_SERVICE_VERSIONS.last
-            %span
-              = t('terms_interstitial.accept_label_markdown', tos_url: CDO.code_org_url('/tos'), privacy_url: CDO.code_org_url('/privacy'), markdown: :inline).html_safe
-      .span2
-        - if @user.errors[:terms_of_service_version].present?
-          %span.error= t('signup_form.accept_terms')
+      .span10.tos
+        = f.hidden_field :terms_of_service_version, value: User::TERMS_OF_SERVICE_VERSIONS.last
+        = t('terms_interstitial.accept_tos', tos_url: CDO.code_org_url('/tos'), privacy_url: CDO.code_org_url('/privacy'), markdown: true).html_safe
 
     -# If GDPR applies, show an additional checkbox.
     - if request.gdpr? || request.params['force_in_eu']
@@ -103,21 +124,19 @@
             %span.error= t('signup_form.accept_terms')
 
     .row#email-preference-radio{style: "display: none;"}
-      .span8
+      .span10.signup-field-label
         %p
           = t('signup_form.email_preference_question')
           = link_to t('signup_form.email_preference_privacy'), CDO.code_org_url('/privacy'), target: '_blank'
+        - if @user.errors[:email_preference_opt_in].present?
+          %p.error= t('signup_form.email_preference_required')
       .span2{style:"display:block"}
         .radio
           = f.radio_button :email_preference_opt_in, 'yes'
           = f.label :email_preference_opt_in, t('signup_form.email_preference_yes'), value: 'yes'
         .radio
           = f.radio_button :email_preference_opt_in, 'no'
           = f.label :email_preference_opt_in, t('signup_form.email_preference_no'), value: 'no'
-      .span2
-        - if @user.errors[:email_preference_opt_in].present?
-          %span.error= t('signup_form.email_preference_required')
-
 
     %button.submit= t('signup_form.go_to_account')