From dbbeaf242228cb2619272af2c230dbac05fb5de9 Mon Sep 17 00:00:00 2001 From: Vaidehi Joshi Date: Thu, 9 Apr 2020 08:57:50 -0700 Subject: [PATCH] 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 --- .../stylesheets/preact/onboarding-modal.scss | 16 ++++++++++- .../onboarding/__tests__/Onboarding.test.jsx | 28 +++++++++++-------- .../__snapshots__/Onboarding.test.jsx.snap | 4 +-- .../EmailListTermsConditionsForm.jsx | 14 +++++----- .../onboarding/components/IntroSlide.jsx | 9 ++++-- app/javascript/onboarding/utilities.js | 19 ++++++++++--- 6 files changed, 62 insertions(+), 28 deletions(-) diff --git a/app/assets/stylesheets/preact/onboarding-modal.scss b/app/assets/stylesheets/preact/onboarding-modal.scss index 1c903719c..0640d5abd 100644 --- a/app/assets/stylesheets/preact/onboarding-modal.scss +++ b/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%; } diff --git a/app/javascript/onboarding/__tests__/Onboarding.test.jsx b/app/javascript/onboarding/__tests__/Onboarding.test.jsx index 6d4966662..2c5c6ad67 100644 --- a/app/javascript/onboarding/__tests__/Onboarding.test.jsx +++ b/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(); if (mockData) { fetch.once(mockData); } - document.body.setAttribute('data-user', dataUser); onboardingSlides.setState({ currentSlide }); return onboardingSlides; @@ -74,15 +74,19 @@ describe('', () => { 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('', () => { }; beforeEach(() => { - onboardingSlides = initializeSlides(1, dataUser); + onboardingSlides = initializeSlides(1, getUserData()); }); test('renders properly', () => { @@ -191,7 +195,7 @@ describe('', () => { document.body.appendChild(meta); beforeEach(() => { - onboardingSlides = initializeSlides(2, dataUser); + onboardingSlides = initializeSlides(2, getUserData()); }); test('renders properly', () => { @@ -224,7 +228,7 @@ describe('', () => { document.body.appendChild(meta); beforeEach(() => { - onboardingSlides = initializeSlides(3, dataUser); + onboardingSlides = initializeSlides(3, getUserData()); }); test('renders properly', () => { @@ -275,7 +279,7 @@ describe('', () => { let onboardingSlides; beforeEach(async () => { - onboardingSlides = initializeSlides(4, dataUser, fakeTagsResponse); + onboardingSlides = initializeSlides(4, getUserData(), fakeTagsResponse); await flushPromises(); }); @@ -313,7 +317,7 @@ describe('', () => { let onboardingSlides; beforeEach(async () => { - onboardingSlides = initializeSlides(5, dataUser, fakeUsersResponse); + onboardingSlides = initializeSlides(5, getUserData(), fakeUsersResponse); await flushPromises(); }); @@ -348,7 +352,7 @@ describe('', () => { let onboardingSlides; beforeEach(() => { - onboardingSlides = initializeSlides(6); + onboardingSlides = initializeSlides(6, getUserData()); }); test('renders properly', () => { diff --git a/app/javascript/onboarding/__tests__/__snapshots__/Onboarding.test.jsx.snap b/app/javascript/onboarding/__tests__/__snapshots__/Onboarding.test.jsx.snap index de8d88bc5..334d90c64 100644 --- a/app/javascript/onboarding/__tests__/__snapshots__/Onboarding.test.jsx.snap +++ b/app/javascript/onboarding/__tests__/__snapshots__/Onboarding.test.jsx.snap @@ -148,7 +148,7 @@ preact-render-spy (1 nodes) -
+

Getting started

Let's review a few things first

@@ -450,7 +450,7 @@ preact-render-spy (1 nodes) alt="DEV" /> -

Welcome to DEV!

+

firstname lastname — welcome to DEV!

DEV is where programmers share ideas and help each other grow.

diff --git a/app/javascript/onboarding/components/EmailListTermsConditionsForm.jsx b/app/javascript/onboarding/components/EmailListTermsConditionsForm.jsx index bcee900e0..8ec704b7f 100644 --- a/app/javascript/onboarding/components/EmailListTermsConditionsForm.jsx +++ b/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 (
-
+
@@ -118,7 +118,7 @@ class EmailTermsConditionsForm extends Component { return (
-
+

Getting started

Let's review a few things first

@@ -148,7 +148,7 @@ class EmailTermsConditionsForm extends Component { this.handleShowText(e, 'coc')} + onClick={(e) => this.handleShowText(e, 'coc')} > Code of Conduct @@ -169,7 +169,7 @@ class EmailTermsConditionsForm extends Component { this.handleShowText(e, 'terms')} + onClick={(e) => this.handleShowText(e, 'terms')} > Terms and Conditions diff --git a/app/javascript/onboarding/components/IntroSlide.jsx b/app/javascript/onboarding/components/IntroSlide.jsx index c61a72780..b1b3f1418 100644 --- a/app/javascript/onboarding/components/IntroSlide.jsx +++ b/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" /> -

Welcome to DEV!

+

+ {this.user.name} + {' '} + — welcome to DEV! +

DEV is where programmers share ideas and help each other grow.

diff --git a/app/javascript/onboarding/utilities.js b/app/javascript/onboarding/utilities.js index 1c8e9bd59..9c6cc16e3 100644 --- a/app/javascript/onboarding/utilities.js +++ b/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); +};