Merge branch '473814-add-to-step-one' into 'master'

Move email opt in to first step in registration for SaaS

See merge request https://gitlab.com/gitlab-org/gitlab/-/merge_requests/164411



Merged-by: Eduardo Sanz García <esanz-garcia@gitlab.com>
Approved-by: Emily Bauman <ebauman@gitlab.com>
Approved-by: Roy Liu <rliu@gitlab.com>
Approved-by: Jay Montal <jmontal@gitlab.com>
Approved-by: Eduardo Sanz García <esanz-garcia@gitlab.com>
Reviewed-by: Mark Florian <mflorian@gitlab.com>
Reviewed-by: Doug Stull <dstull@gitlab.com>
Reviewed-by: Eduardo Sanz García <esanz-garcia@gitlab.com>
Reviewed-by: Jay Montal <jmontal@gitlab.com>
Reviewed-by: Roy Liu <rliu@gitlab.com>
Co-authored-by: Doug Stull <dstull@gitlab.com>

app/views/devise/registrations/_signup_box_form.html.haml

@@ -91,7 +91,8 @@
     - elsif show_recaptcha_sign_up?
       = recaptcha_tags nonce: content_security_policy_nonce
-  = render 'devise/shared/terms_of_service_notice', button_text: button_text
+  = render_if_exists 'devise/registrations/opt_in_to_email', f: f
+  = render 'devise/shared/terms_of_service_notice', button_text: button_text, css_class: 'gl-mt-2'
   = render Pajamas::ButtonComponent.new(type: :submit, variant: :confirm, block: true,
     button_options: { class: "#{button_class} gl-mt-4",

app/views/devise/shared/_omniauth_provider_button.haml

-- button_options = { class: local_assigns[:classes], data: data }
+- button_options = { class: local_assigns[:classes], data: data, form: { class: 'js-omniauth-form' } }
 = render Pajamas::ButtonComponent.new(href: href, method: :post, form: true, block: true, button_options: button_options) do
   - if provider_has_icon?(provider)

app/views/devise/shared/_terms_of_service_notice.html.haml

 - return unless Gitlab::CurrentSettings.current_application_settings.enforce_terms?
-%p.gl-text-gray-500.gl-mt-5.gl-mb-0
+- css_class = local_assigns.fetch(:css_class, 'gl-mt-5')
+
+%p.gl-text-gray-500.gl-mb-0{ class: css_class }
   = terms_service_notice_link(button_text)

ee/app/assets/javascripts/pages/registrations/new/index.js

@@ -3,6 +3,7 @@ import { trackNewRegistrations } from 'ee/google_tag_manager';
 import initPasswordValidator from 'ee/password/password_validator';
 import { setupArkoseLabsForSignup } from 'ee/arkose_labs';
 import FormErrorTracker from '~/pages/shared/form_error_tracker';
+import { initOnboardingEmailOptIn } from 'ee/registrations/onboarding_email_opt_in';
 trackNewRegistrations();
@@ -15,3 +16,5 @@ setupArkoseLabsForSignup();
 // Warning: run after all input initializations
 // eslint-disable-next-line no-new
 new FormErrorTracker();
+
+initOnboardingEmailOptIn();

ee/app/assets/javascripts/pages/registrations/welcome/index.js

 import 'ee/registrations/welcome/jobs_to_be_done';
-import { initWelcomeIndex } from 'ee/registrations/welcome';
 import { saasTrialWelcome } from 'ee/google_tag_manager';
 import Tracking from '~/tracking';
 import FormErrorTracker from '~/pages/shared/form_error_tracker';
-initWelcomeIndex();
 saasTrialWelcome();
 Tracking.enableFormTracking({
   forms: { allow: ['js-users-signup-welcome'] },

ee/app/assets/javascripts/pages/trial_registrations/new/index.js

@@ -12,6 +12,7 @@ import initPasswordValidator from 'ee/password/password_validator';
 import { initPasswordInput } from '~/authentication/password';
 import { initLanguageSwitcher } from '~/language_switcher';
 import FormErrorTracker from '~/pages/shared/form_error_tracker';
+import { initOnboardingEmailOptIn } from 'ee/registrations/onboarding_email_opt_in';
 new UsernameValidator(); // eslint-disable-line no-new
 new LengthValidator(); // eslint-disable-line no-new
@@ -34,3 +35,5 @@ initLanguageSwitcher();
 // Warning: run after all input initializations
 // eslint-disable-next-line no-new
 new FormErrorTracker();
+
+initOnboardingEmailOptIn();

ee/app/assets/javascripts/registrations/onboarding_email_opt_in.js

+import { mergeUrlParams } from '~/lib/utils/url_utility';
+
+/**
+ * Change the onboarding_status_email_opt_in query param values for OAuth sign up form actions.
+ * When the user toggles the form based checkbox, this will toggle all the corresponding
+ * OAuth sign up buttons as well to have that value.
+ */
+export function initOnboardingEmailOptIn() {
+  const visibleCheckbox = document.querySelector('input#new_user_onboarding_status_email_opt_in');
+  const forms = document.querySelectorAll('form.js-omniauth-form');
+
+  visibleCheckbox.addEventListener('change', ({ target }) => {
+    forms.forEach((oauthForm) => {
+      const href = oauthForm.getAttribute('action');
+      const newHref = mergeUrlParams(
+        { onboarding_status_email_opt_in: target.checked.toString() },
+        href,
+      );
+
+      oauthForm.setAttribute('action', newHref);
+    });
+  });
+}

ee/app/assets/javascripts/registrations/welcome/index.js

-export const initWelcomeIndex = () => {
-  const emailUpdatesForm = document.querySelector('.js-opt-in-to-email');
-  const setupForCompany = document.querySelector('.js-setup-for-company');
-  const setupForMe = document.querySelector('.js-setup-for-me');
-
-  if (emailUpdatesForm) {
-    if (setupForCompany) {
-      setupForCompany.addEventListener('change', () => {
-        emailUpdatesForm.classList.add('hidden');
-      });
-    }
-
-    if (setupForMe) {
-      setupForMe.addEventListener('change', () => {
-        emailUpdatesForm.classList.remove('hidden');
-      });
-    }
-  }
-};

ee/app/controllers/concerns/ee/onboarding/status.rb

@@ -23,8 +23,7 @@ module Status
       delegate :setup_for_company_help_text, to: :registration_type
       # predicate delegations
       delegate :redirect_to_company_form?, :eligible_for_iterable_trigger?, to: :registration_type
-      delegate :show_opt_in_to_email?, :show_joining_project?, :apply_trial?, to: :registration_type
-      delegate :hide_setup_for_company_field?, :pre_parsed_email_opt_in?, to: :registration_type
+      delegate :show_joining_project?, :apply_trial?, :hide_setup_for_company_field?, to: :registration_type
       delegate :read_from_stored_user_location?, :preserve_stored_location?, to: :registration_type
       module ClassMethods
@@ -70,6 +69,10 @@ def joining_a_project?
         ::Gitlab::Utils.to_boolean(params[:joining_project], default: false)
       end
+      def email_opt_in?
+        ::Gitlab::Utils.to_boolean(params.dig(:user, :onboarding_status_email_opt_in), default: true)
+      end
+
       def convert_to_automatic_trial?
         return false unless registration_type.convert_to_automatic_trial?
@@ -112,7 +115,9 @@ def registration_omniauth_params
         return super unless ::Onboarding.enabled?
         # We don't have controller params here, so we need to slice instead of permit
-        super.merge(params.slice(*GLM_PARAMS)) # rubocop:disable Rails/StrongParams -- false positive due to unique placement of this class in the controller area
+        super
+          .merge(params.slice(*GLM_PARAMS)) # rubocop:disable Rails/StrongParams -- false positive due to unique placement of this class in the controller area
+          .merge(onboarding_status_email_opt_in: email_opt_in?)
       end
       def trial_registration_omniauth_params

ee/app/controllers/concerns/onboarding/free_registration.rb

@@ -57,18 +57,10 @@ def self.show_joining_project?
       true
     end
-    def self.show_opt_in_to_email?
-      true
-    end
-
     def self.hide_setup_for_company_field?
       false
     end
-    def self.pre_parsed_email_opt_in?
-      false
-    end
-
     def self.apply_trial?
       false
     end

ee/app/controllers/concerns/onboarding/invite_registration.rb

@@ -49,18 +49,10 @@ def self.show_joining_project?
       false
     end
-    def self.show_opt_in_to_email?
-      false
-    end
-
     def self.hide_setup_for_company_field?
       true
     end
-    def self.pre_parsed_email_opt_in?
-      true
-    end
-
     def self.read_from_stored_user_location?
       false
     end

ee/app/controllers/concerns/onboarding/subscription_registration.rb

@@ -47,18 +47,10 @@ def self.show_joining_project?
       true
     end
-    def self.show_opt_in_to_email?
-      true
-    end
-
     def self.hide_setup_for_company_field?
       false
     end
-    def self.pre_parsed_email_opt_in?
-      false
-    end
-
     def self.read_from_stored_user_location?
       true
     end

ee/app/controllers/concerns/onboarding/trial_registration.rb

@@ -53,18 +53,10 @@ def self.show_joining_project?
       false
     end
-    def self.show_opt_in_to_email?
-      true
-    end
-
     def self.hide_setup_for_company_field?
       false
     end
-    def self.pre_parsed_email_opt_in?
-      false
-    end
-
     def self.apply_trial?
       true
     end

ee/app/controllers/ee/omniauth_callbacks_controller.rb

@@ -93,10 +93,10 @@ def build_auth_user_params
       end
       data = super
-      # We want to say that if for some reason the param is nil, then we can't
+      # We want to say that if for some reason the param is nil or not present, then we can't
       # be certain the user was ever shown this option so we should default to false to follow opt in guidelines.
-      data[:onboarding_status_email_opt_in] =
-        ::Gitlab::Utils.to_boolean(omniauth_params[:onboarding_status_email_opt_in], default: false)
+      opt_in = request.env.fetch('omniauth.params', {}).deep_symbolize_keys[:onboarding_status_email_opt_in]
+      data[:onboarding_status_email_opt_in] = ::Gitlab::Utils.to_boolean(opt_in, default: false)
       data
     end

ee/app/controllers/registrations/welcome_controller.rb

@@ -57,19 +57,16 @@ def update_params
       # There likely isn't any perf impact, but should we look to memoize in a
       # future step in https://gitlab.com/gitlab-org/gitlab/-/issues/465532?
       params.require(:user)
-            .permit(:role, :setup_for_company, :registration_objective, :onboarding_status_email_opt_in)
-            .merge(onboarding_status_params)
+            .permit(:role, :setup_for_company, :registration_objective)
+            .merge(user_onboarding_status_params)
     end
-    def onboarding_status_params
-      status_params = { onboarding_status_email_opt_in: parsed_opt_in }
-
-      return status_params unless onboarding_status.convert_to_automatic_trial?
+    def user_onboarding_status_params
+      return {} unless onboarding_status.convert_to_automatic_trial?
       # Now we are in automatic trial and we'll update our status as such, initial_registration_type
       # will be how we know if they weren't a trial originally from here on out.
-      status_params
-        .merge(onboarding_status_registration_type: ::Onboarding::REGISTRATION_TYPE[:trial])
+      { onboarding_status_registration_type: ::Onboarding::REGISTRATION_TYPE[:trial] }
     end
     def passed_through_params
@@ -125,16 +122,6 @@ def signup_onboarding_path
       end
     end
-    def parsed_opt_in
-      # order matters here registration types are treated differently
-      return false if onboarding_status.pre_parsed_email_opt_in?
-      # The below would override DOM setting, but DOM is interwoven with JS to hide the opt in checkbox if
-      # setup for company is toggled, so this is where this is a bit complex to think about
-      return true if onboarding_status.setup_for_company?
-
-      ::Gitlab::Utils.to_boolean(params.dig(:user, :onboarding_status_email_opt_in), default: false)
-    end
-
     def track_joining_a_project_event
       return unless onboarding_status.joining_a_project?

ee/app/views/devise/registrations/_opt_in_to_email.html.haml

+- return unless ::Onboarding.enabled?
+
+= f.gitlab_ui_checkbox_component :onboarding_status_email_opt_in,
+  _('I agree that by clicking continue or registering through a third party GitLab may contact me via email and telephone about its product, services and events.'),
+  content_wrapper_options: { class: 'gl-text-gray-500' },
+  checkbox_options: { checked: onboarding_status.email_opt_in? }

ee/app/views/registrations/welcome/_opt_in_to_email.html.haml

-- return unless onboarding_status.show_opt_in_to_email?
-
-.gl-mb-3.js-opt-in-to-email.hidden
-  .gl-font-bold.gl-mb-3
-    = _('Email updates (optional)')
-  = f.gitlab_ui_checkbox_component :onboarding_status_email_opt_in, _("I'd like to receive updates about GitLab via email")

ee/app/views/registrations/welcome/_setup_for_company.html.haml

@@ -6,6 +6,9 @@
       = f.label :setup_for_company, onboarding_status.setup_for_company_label_text, class: 'label-bold'
       .gl-flex.gl-flex-col
         .gl-grow{ data: { testid: 'setup-for-just-me-content' } }
-          = f.gitlab_ui_radio_component :setup_for_company, false, _('Just me'), radio_options: { required: true, class: "js-setup-for-me", data: { testid: 'setup-for-just-me-radio' } }
+          = f.gitlab_ui_radio_component :setup_for_company, false, _('Just me'),
+            radio_options: { required: true, data: { testid: 'setup-for-just-me-radio' } }
         .gl-grow
-          = f.gitlab_ui_radio_component :setup_for_company, true, _('My company or team'), help_text: onboarding_status.setup_for_company_help_text, radio_options: { required: true, class: "js-setup-for-company js-track-error", data: { track_action_for_errors: onboarding_status.tracking_label } }
+          = f.gitlab_ui_radio_component :setup_for_company, true, _('My company or team'),
+            help_text: onboarding_status.setup_for_company_help_text, radio_options: { required: true,
+            class: "js-track-error", data: { track_action_for_errors: 'welcome_form' } }

ee/app/views/registrations/welcome/show.html.haml

@@ -29,7 +29,6 @@
             = render 'jobs_to_be_done', f: f
             = render 'joining_project'
             = render 'setup_for_company', f: f
-            = render 'opt_in_to_email', f: f
             .row
               .form-group.col-sm-12.gl-mb-0
                 = render Pajamas::ButtonComponent.new(variant: :confirm, block: true,

ee/spec/controllers/concerns/ee/onboarding/status_spec.rb

@@ -17,10 +17,8 @@
     it { is_expected.to delegate_method(:setup_for_company_help_text).to(:registration_type) }
     it { is_expected.to delegate_method(:redirect_to_company_form?).to(:registration_type) }
     it { is_expected.to delegate_method(:eligible_for_iterable_trigger?).to(:registration_type) }
-    it { is_expected.to delegate_method(:show_opt_in_to_email?).to(:registration_type) }
     it { is_expected.to delegate_method(:show_joining_project?).to(:registration_type) }
     it { is_expected.to delegate_method(:hide_setup_for_company_field?).to(:registration_type) }
-    it { is_expected.to delegate_method(:pre_parsed_email_opt_in?).to(:registration_type) }
     it { is_expected.to delegate_method(:apply_trial?).to(:registration_type) }
     it { is_expected.to delegate_method(:read_from_stored_user_location?).to(:registration_type) }
     it { is_expected.to delegate_method(:preserve_stored_location?).to(:registration_type) }
@@ -68,7 +66,7 @@
     subject { described_class.new(params, {}, nil).registration_omniauth_params }
     context 'when onboarding is enabled' do
-      it { is_expected.to eq({ glm_source: 'source', glm_content: 'content' }) }
+      it { is_expected.to eq({ glm_source: 'source', glm_content: 'content', onboarding_status_email_opt_in: true }) }
     end
     context 'when onboarding is disabled' do
@@ -89,7 +87,10 @@
     subject { described_class.new(params, {}, nil).trial_registration_omniauth_params }
     context 'when onboarding is enabled' do
-      it { is_expected.to eq({ glm_source: 'source', glm_content: 'content', trial: true }) }
+      it 'has the glm, onboarding and trial params' do
+        is_expected
+          .to eq({ glm_source: 'source', glm_content: 'content', onboarding_status_email_opt_in: true, trial: true })
+      end
     end
     context 'when onboarding is disabled' do