Skip to content

Commit

Permalink
feat(onboarding): save TOS acceptance on CONTINUE button
Browse files Browse the repository at this point in the history
  • Loading branch information
JalilArfaoui authored and lutangar committed Sep 25, 2019
1 parent 2d78982 commit b414fea
Show file tree
Hide file tree
Showing 10 changed files with 125 additions and 62 deletions.
7 changes: 6 additions & 1 deletion src/app/actions/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,11 @@ import {
NoticesFoundAction,
UnfoldNoticeAction
} from './notices';
import { AcceptTosAction, TosAcceptedAction } from './tos';
import {
AcceptTosAction,
TosAcceptedAction,
TransmitTOSStatusAction
} from './tos';
import {
ContributionSubmissionFailed,
ContributionSubmittedAction,
Expand Down Expand Up @@ -176,5 +180,6 @@ export type AppAction =
| UnsubscribeAction
| AcceptTosAction
| TosAcceptedAction
| TransmitTOSStatusAction
| ShowBullesUpdateMessageAction
| (LocationChangeAction & { meta?: ActionMeta });
2 changes: 1 addition & 1 deletion src/app/actions/tos.ts
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ export const tosAcceptanceFailure = (
createErrorAction('TOS_ACCEPTANCE_FAILURE')(e, meta);

export const TRANSMIT_TOS_STATUS = 'TRANSMIT_TOS_STATUS';
export interface TransmitTOSStatusAction {
export interface TransmitTOSStatusAction extends BaseAction {
type: typeof TRANSMIT_TOS_STATUS;
payload: boolean;
}
Expand Down
9 changes: 3 additions & 6 deletions src/app/options/App/Onboarding/TOS/TOS.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,25 +8,22 @@ storiesOf('screens/Onboarding/ToS', module)
.addDecorator(getStory => <Router>{getStory()}</Router>)
.add('Lmem --> Bulles', () => (
<TOS
acceptTermsOfService={action('acceptTermsOfService')}
termsOfServiceAccepted={false}
updatedFromLmem={true}
next={action('next')}
onContinue={action('onContinue')}
/>
))
.add('Bulles', () => (
<TOS
acceptTermsOfService={action('acceptTermsOfService')}
termsOfServiceAccepted={false}
updatedFromLmem={false}
next={action('next')}
onContinue={action('onContinue')}
/>
))
.add('Bulles (TosAccepted)', () => (
<TOS
acceptTermsOfService={action('acceptTermsOfService')}
termsOfServiceAccepted={true}
updatedFromLmem={false}
next={action('next')}
onContinue={action('onContinue')}
/>
));
66 changes: 18 additions & 48 deletions src/app/options/App/Onboarding/TOS/TOS.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useEffect, useState } from 'react';
import React, { useState } from 'react';
import styled from 'styled-components';
import { ExternalLink } from 'components/atoms';
import Logo from 'components/atoms/icons/Logo';
Expand All @@ -8,6 +8,9 @@ import Title from '../OnboardingAtoms/OnboardingTitle';
import SubTitle from '../OnboardingAtoms/OnboardingSubTitle';
import OnboardinButton from '../OnboardingAtoms/OnboardingButton';
import LMEMToBulles from '../OnboardingAtoms/LMEMToBulles';
import TOSAlreadyAccepted from './TOSAlreadyAccepted';
import TOSText from './TOSText';
import TOSCheckbox from './TOSCheckbox';

const TOSTitle = styled.h3`
font-size: 28px;
Expand Down Expand Up @@ -36,45 +39,18 @@ const TOSListItem = styled.li`
}
`;

const TOSText = styled.p`
font-size: 18px;
`;

const TOSForm = styled.form`
display: flex;
align-items: center;
font-size: 20px;
[type='checkbox'] {
align-self: baseline;
}
label {
margin-left: 12px;
}
`;

interface TosProps {
updatedFromLmem: boolean;
termsOfServiceAccepted: boolean;
acceptTermsOfService: () => void;
next: () => void;
onContinue: () => void;
}

export default ({
updatedFromLmem,
termsOfServiceAccepted,
acceptTermsOfService,
next
onContinue
}: TosProps) => {
const [value, handleChange] = useState(false);

// Similar to componentDidMount and componentDidUpdate:
useEffect(() => {
if (value) {
acceptTermsOfService();
}
});
const [acceptTosChecked, setTosChecked] = useState(false);

return (
<Wrapper>
Expand Down Expand Up @@ -153,23 +129,17 @@ export default ({
<TOSTitle>Conditions générales d’utilisation</TOSTitle>
</>
)}
<TOSForm>
<input
type="checkbox"
id="tos"
onChange={event => handleChange(event.target.checked)}
checked={termsOfServiceAccepted}
/>
<label htmlFor="tos">
J&apos;ai lu et j&apos;accepte les nouvelles{' '}
<ExternalLink href="https://www.bulles.fr/cgu">
conditions générales d&apos;utilisation (CGU)
</ExternalLink>
.
</label>
</TOSForm>

<OnboardinButton disabled={!termsOfServiceAccepted} onClick={next}>

{termsOfServiceAccepted ? (
<TOSAlreadyAccepted />
) : (
<TOSCheckbox onChange={setTosChecked} checked={acceptTosChecked} />
)}

<OnboardinButton
disabled={!acceptTosChecked && !termsOfServiceAccepted}
onClick={onContinue}
>
Continuer
</OnboardinButton>
</Wrapper>
Expand Down
14 changes: 14 additions & 0 deletions src/app/options/App/Onboarding/TOS/TOSAlreadyAccepted.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import React from 'react';
import { ExternalLink } from 'components/atoms';
import TOSText from './TOSText';

const TOSAlreadyAccepted = () => (
<TOSText>
Vous avez accepté les{' '}
<ExternalLink href="https://www.bulles.fr/cgu">
conditions générales d&apos;utilisation (CGU)
</ExternalLink>
</TOSText>
);

export default TOSAlreadyAccepted;
42 changes: 42 additions & 0 deletions src/app/options/App/Onboarding/TOS/TOSCheckbox.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
import React from 'react';
import styled from 'styled-components';
import { ExternalLink } from 'components/atoms';

const TOSForm = styled.form`
display: flex;
align-items: center;
font-size: 20px;
[type='checkbox'] {
align-self: baseline;
}
label {
margin-left: 12px;
}
`;

interface Props {
onChange: (checked: boolean) => void;
checked: boolean;
}

const TOSCheckbox = ({ onChange, checked }: Props) => (
<TOSForm>
<input
type="checkbox"
id="tos"
onChange={event => onChange(event.target.checked)}
checked={checked}
/>
<label htmlFor="tos">
J&apos;ai lu et j&apos;accepte les nouvelles{' '}
<ExternalLink href="https://www.bulles.fr/cgu">
conditions générales d&apos;utilisation (CGU)
</ExternalLink>
.
</label>
</TOSForm>
);

export default TOSCheckbox;
7 changes: 7 additions & 0 deletions src/app/options/App/Onboarding/TOS/TOSText.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import styled from 'styled-components';

const TOSText = styled.p`
font-size: 18px;
`;

export default TOSText;
6 changes: 4 additions & 2 deletions src/app/options/App/Onboarding/TOS/withConnect.ts
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,10 @@ const mapStateToProps = (state: OptionsState) => ({
});

const mapDispatchToProps = (dispatch: Dispatch) => ({
acceptTermsOfService: () => dispatch(acceptTOS({ sendToBackground: true })),
next: () => dispatch(push('/onboarding/subscribe'))
onContinue: () => {
dispatch(acceptTOS({ sendToBackground: true }));
dispatch(push('/onboarding/subscribe'));
}
});

export default connect(
Expand Down
22 changes: 22 additions & 0 deletions src/app/options/store/reducers/tosAccepted.reducer.spec.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
/* eslint-disable no-unused-expressions, @typescript-eslint/ban-ts-ignore */
import { expect } from 'chai';
import { tosAccepted, transmitTosStatus } from 'app/actions';
import tosAcceptedReducer from './tosAccepted.reducer';

describe('options > reducers > tosAccepted', function() {
// @ts-ignore
const initialState = tosAcceptedReducer(undefined, { type: 'UNKNOWN' });

it('is false initially', () => {
expect(initialState).to.be.false;
});
it('saves true on TOS_ACCEPTED', () => {
expect(tosAcceptedReducer(initialState, tosAccepted({}))).to.be.true;
});
it('saves given value on TRANSMIT_TOS_STATUS', () => {
expect(tosAcceptedReducer(initialState, transmitTosStatus(false))).to.be
.false;
expect(tosAcceptedReducer(initialState, transmitTosStatus(true))).to.be
.true;
});
});
12 changes: 8 additions & 4 deletions src/app/options/store/reducers/tosAccepted.reducer.ts
Original file line number Diff line number Diff line change
@@ -1,13 +1,17 @@
import { AppAction } from 'app/actions';
import { AppAction, TRANSMIT_TOS_STATUS } from 'app/actions';

export type TosAcceptedState = boolean;

export default (
state: TosAcceptedState = false,
action: AppAction
): TosAcceptedState => {
if (action.type === 'TOS_ACCEPTED') {
return true;
switch (action.type) {
case 'TOS_ACCEPTED':
return true;
case TRANSMIT_TOS_STATUS:
return action.payload;
default:
return state;
}
return state;
};

0 comments on commit b414fea

Please sign in to comment.