Onboarding intro slide tweaks (#7162) [deploy]

* Render the user's name on intro slide of onboarding

* Refactor terms + conditions form in onboarding view

* Style the back button using crayons design system.
* Remove redundant scroll styles (only need `overflow-y: scroll` here).
* Ensure that content is readable, and back button doesn't conflict with content.
* Ensure size of content is same size as "intro slide".
* Remove unnecesary inline styles, use CSS class instead.

* Fix missing userData issue

* Onboarding test cleanup, inline greeting instead of in a variable

app/assets/stylesheets/preact/onboarding-modal.scss

@@ -43,6 +43,20 @@
   }
 }
 
+// terms and conditions view
+.terms-and-conditions-wrapper {
+  $content-height: 358px;
+
+  button {
+    @extend .crayons-btn;
+  }
+  .terms-and-conditions-content {
+    height: $content-height;
+    overflow-y: scroll;
+    margin-top: 10px;
+  }
+}
+
 // window background
 .onboarding-body {
   -moz-background-size: cover;
@@ -369,7 +383,7 @@ $onboarding-user-selected-hover: rgba(71, 85, 235, 0.2);
   .user-name {
     font-size: $fs-base;
   }
-  
+
   .user-info {
     width: 100%;
   }

app/javascript/onboarding/__tests__/Onboarding.test.jsx

@@ -16,14 +16,14 @@ function flushPromises() {
   return new Promise((resolve) => setImmediate(resolve));
 }
 
-function initializeSlides(currentSlide, dataUser = null, mockData = null) {
+function initializeSlides(currentSlide, userData = null, mockData = null) {
+  document.body.setAttribute('data-user', userData);
   const onboardingSlides = deep(<Onboarding />);
 
   if (mockData) {
     fetch.once(mockData);
   }
 
-  document.body.setAttribute('data-user', dataUser);
   onboardingSlides.setState({ currentSlide });
 
   return onboardingSlides;
@@ -74,15 +74,19 @@ describe('<Onboarding />', () => {
       profile_image_url: 'dev.jpg',
     },
   ]);
-  const dataUser = JSON.stringify({
-    followed_tag_names: ['javascript'],
-  });
+  const getUserData = () =>
+    JSON.stringify({
+      followed_tag_names: ['javascript'],
+      profile_image_90: 'mock_url_link',
+      name: 'firstname lastname',
+      username: 'username',
+    });
 
   describe('IntroSlide', () => {
     let onboardingSlides;
 
     beforeEach(() => {
-      onboardingSlides = initializeSlides(0);
+      onboardingSlides = initializeSlides(0, getUserData());
     });
 
     test('renders properly', () => {
@@ -127,7 +131,7 @@ describe('<Onboarding />', () => {
     };
 
     beforeEach(() => {
-      onboardingSlides = initializeSlides(1, dataUser);
+      onboardingSlides = initializeSlides(1, getUserData());
     });
 
     test('renders properly', () => {
@@ -191,7 +195,7 @@ describe('<Onboarding />', () => {
     document.body.appendChild(meta);
 
     beforeEach(() => {
-      onboardingSlides = initializeSlides(2, dataUser);
+      onboardingSlides = initializeSlides(2, getUserData());
     });
 
     test('renders properly', () => {
@@ -224,7 +228,7 @@ describe('<Onboarding />', () => {
     document.body.appendChild(meta);
 
     beforeEach(() => {
-      onboardingSlides = initializeSlides(3, dataUser);
+      onboardingSlides = initializeSlides(3, getUserData());
     });
 
     test('renders properly', () => {
@@ -275,7 +279,7 @@ describe('<Onboarding />', () => {
     let onboardingSlides;
 
     beforeEach(async () => {
-      onboardingSlides = initializeSlides(4, dataUser, fakeTagsResponse);
+      onboardingSlides = initializeSlides(4, getUserData(), fakeTagsResponse);
       await flushPromises();
     });
 
@@ -313,7 +317,7 @@ describe('<Onboarding />', () => {
     let onboardingSlides;
 
     beforeEach(async () => {
-      onboardingSlides = initializeSlides(5, dataUser, fakeUsersResponse);
+      onboardingSlides = initializeSlides(5, getUserData(), fakeUsersResponse);
       await flushPromises();
     });
 
@@ -348,7 +352,7 @@ describe('<Onboarding />', () => {
     let onboardingSlides;
 
     beforeEach(() => {
-      onboardingSlides = initializeSlides(6);
+      onboardingSlides = initializeSlides(6, getUserData());
     });
 
     test('renders properly', () => {

app/javascript/onboarding/__tests__/__snapshots__/Onboarding.test.jsx.snap

@@ -148,7 +148,7 @@ preact-render-spy (1 nodes)
         </button>
       </div>
     </nav>
-    <div class="onboarding-content checkbox-slide">
+    <div class="onboarding-content terms-and-conditions-wrapper">
       <header class="onboarding-content-header">
         <h1 class="title">Getting started</h1>
         <h2 class="subtitle">Let's review a few things first</h2>
@@ -450,7 +450,7 @@ preact-render-spy (1 nodes)
           alt="DEV"
          />
       </figure>
-      <h1 class="introduction-title">Welcome to DEV!</h1>
+      <h1 class="introduction-title">firstname lastname — welcome to DEV!</h1>
       <h2 class="introduction-subtitle">
         DEV is where programmers share ideas and help each other grow.
       </h2>

app/javascript/onboarding/components/EmailListTermsConditionsForm.jsx

@@ -42,7 +42,7 @@ class EmailTermsConditionsForm extends Component {
       },
       body: JSON.stringify({ user: this.state }),
       credentials: 'same-origin',
-    }).then(response => {
+    }).then((response) => {
       if (response.ok) {
         localStorage.setItem('shouldRedirectToOnboarding', false);
         const { next } = this.props;
@@ -74,7 +74,7 @@ class EmailTermsConditionsForm extends Component {
 
   handleChange(event) {
     const { name } = event.target;
-    this.setState(currentState => ({
+    this.setState((currentState) => ({
       [name]: !currentState[name],
     }));
   }
@@ -101,14 +101,14 @@ class EmailTermsConditionsForm extends Component {
     if (textShowing) {
       return (
         <div className="onboarding-main">
-          <div className="onboarding-content checkbox-slide">
+          <div className="onboarding-content terms-and-conditions-wrapper">
             <button type="button" onClick={() => this.backToSlide()}>
               Back
             </button>
             <div
+              className="terms-and-conditions-content"
               /* eslint-disable react/no-danger */
               dangerouslySetInnerHTML={{ __html: textShowing }}
-              style={{ height: '360px', overflow: 'scroll' }}
               /* eslint-enable react/no-danger */
             />
           </div>
@@ -118,7 +118,7 @@ class EmailTermsConditionsForm extends Component {
     return (
       <div className="onboarding-main">
         <Navigation prev={prev} next={this.onSubmit} />
-        <div className="onboarding-content checkbox-slide">
+        <div className="onboarding-content terms-and-conditions-wrapper">
           <header className="onboarding-content-header">
             <h1 className="title">Getting started</h1>
             <h2 className="subtitle">Let&apos;s review a few things first</h2>
@@ -148,7 +148,7 @@ class EmailTermsConditionsForm extends Component {
                     <a
                       href="/code-of-conduct"
                       data-no-instant
-                      onClick={e => this.handleShowText(e, 'coc')}
+                      onClick={(e) => this.handleShowText(e, 'coc')}
                     >
                       Code of Conduct
                     </a>
@@ -169,7 +169,7 @@ class EmailTermsConditionsForm extends Component {
                     <a
                       href="/terms"
                       data-no-instant
-                      onClick={e => this.handleShowText(e, 'terms')}
+                      onClick={(e) => this.handleShowText(e, 'terms')}
                     >
                       Terms and Conditions
                     </a>

app/javascript/onboarding/components/IntroSlide.jsx

@@ -2,13 +2,14 @@ import { h, Component } from 'preact';
 import PropTypes from 'prop-types';
 
 import Navigation from './Navigation';
-import { updateOnboarding } from '../utilities';
+import { userData, updateOnboarding } from '../utilities';
 
 class IntroSlide extends Component {
   constructor(props) {
     super(props);
 
     this.onSubmit = this.onSubmit.bind(this);
+    this.user = userData();
   }
 
   componentDidMount() {
@@ -33,7 +34,11 @@ class IntroSlide extends Component {
               alt="DEV"
             />
           </figure>
-          <h1 className="introduction-title">Welcome to DEV!</h1>
+          <h1 className="introduction-title">
+            {this.user.name}
+            {' '}
+            &mdash; welcome to DEV!
+          </h1>
           <h2 className="introduction-subtitle">
             DEV is where programmers share ideas and help each other grow.
           </h2>

app/javascript/onboarding/utilities.js

@@ -1,13 +1,13 @@
-export const jsonToForm = data => {
+export const jsonToForm = (data) => {
   const form = new FormData();
-  data.forEach(item => form.append(item.key, item.value));
+  data.forEach((item) => form.append(item.key, item.value));
   return form;
 };
 
-export const getContentOfToken = token =>
+export const getContentOfToken = (token) =>
   document.querySelector(`meta[name='${token}']`).content;
 
-export const updateOnboarding = lastPage => {
+export const updateOnboarding = (lastPage) => {
   const csrfToken = getContentOfToken('csrf-token');
   fetch('/onboarding_update', {
     method: 'PATCH',
@@ -19,3 +19,14 @@ export const updateOnboarding = lastPage => {
     credentials: 'same-origin',
   });
 };
+
+/**
+ * A util function to fetch the user's data from off of the document's body.
+ *
+ *
+ * @returns {Object} A JSON object with the parsed user data.
+ */
+export const userData = () => {
+  const { user = null } = document.body.dataset;
+  return JSON.parse(user);
+};