fix(options): browser icon bypasses TOS acceptation (#439)

src/app/options/App/Onboarding/TOS/TOS.tsx

@@ -48,7 +48,7 @@ const TOSListItem = styled.li`
 
 interface TosProps {
   updatedFromLmem: boolean;
-  termsOfServiceAccepted: boolean;
+  termsOfServiceAccepted?: boolean;
   onContinue: () => void;
 }
 
@@ -143,11 +143,12 @@ export default ({
         </>
       )}
 
-      {termsOfServiceAccepted ? (
-        <TOSAlreadyAccepted />
-      ) : (
-        <TOSCheckbox onChange={setTosChecked} checked={acceptTosChecked} />
-      )}
+      {termsOfServiceAccepted !== undefined &&
+        (termsOfServiceAccepted ? (
+          <TOSAlreadyAccepted />
+        ) : (
+          <TOSCheckbox onChange={setTosChecked} checked={acceptTosChecked} />
+        ))}
 
       <OnboardinButton
         disabled={!acceptTosChecked && !termsOfServiceAccepted}

src/app/options/App/Settings/index.tsx

@@ -11,7 +11,7 @@ interface Props extends RouteComponentProps {
   currentScreen: OptionsScreen | null;
   goToSubscriptions: () => void;
   goToSuggestions: () => void;
-  tosAccepted: boolean;
+  tosAccepted?: boolean;
 }
 
 const UI = ({
@@ -21,7 +21,9 @@ const UI = ({
   match,
   tosAccepted
 }: Props) =>
-  tosAccepted ? (
+  tosAccepted === false ? (
+    <Redirect to={'/onboarding'} />
+  ) : (
     <>
       <Header />
 
@@ -43,8 +45,6 @@ const UI = ({
         />
       </Switch>
     </>
-  ) : (
-    <Redirect to={'/onboarding'} />
   );
 
 export default withConnect(UI);

src/app/options/store/reducers/index.ts

@@ -2,7 +2,7 @@ import { connectRouter, RouterRootState } from 'connected-react-router';
 import { combineReducers } from 'redux';
 import { History } from 'history';
 import contributors, { ContributorsState } from './contributors.reducer';
-import tosAccepted, { TosAcceptedState } from './tosAccepted.reducer';
+import tos, { TosState } from './tos.reducer';
 import installationDetails, {
   InstallationDetailsState
 } from 'app/background/reducers/installationDetails';
@@ -12,11 +12,11 @@ export default (history: History) =>
     router: connectRouter(history),
     contributors,
     installationDetails,
-    tosAccepted
+    tos
   });
 
 export interface OptionsState extends RouterRootState {
   contributors: ContributorsState;
   installationDetails: InstallationDetailsState;
-  tosAccepted: TosAcceptedState;
+  tos: TosState;
 }

src/app/options/store/reducers/tosAccepted.reducer.spec.ts → src/app/options/store/reducers/tos.reducer.spec.ts

@@ -1,22 +1,26 @@
 /* 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';
+import tosAcceptedReducer from './tos.reducer';
 
 describe('options > reducers > tosAccepted', function() {
   // @ts-ignore
   const initialState = tosAcceptedReducer(undefined, { type: 'UNKNOWN' });
 
-  it('is false initially', () => {
-    expect(initialState).to.be.false;
+  it('is empty initially', () => {
+    expect(initialState).to.eql({});
   });
   it('saves true on TOS_ACCEPTED', () => {
-    expect(tosAcceptedReducer(initialState, tosAccepted({}))).to.be.true;
+    expect(tosAcceptedReducer(initialState, tosAccepted({}))).to.be.eql({
+      tosAccepted: 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;
+    expect(
+      tosAcceptedReducer(initialState, transmitTosStatus(false))
+    ).to.be.eql({ tosAccepted: false });
+    expect(tosAcceptedReducer(initialState, transmitTosStatus(true))).to.be.eql(
+      { tosAccepted: true }
+    );
   });
 });

src/app/options/store/reducers/tos.reducer.ts

@@ -0,0 +1,17 @@
+import * as R from 'ramda';
+import { AppAction, TRANSMIT_TOS_STATUS } from 'app/actions';
+
+export interface TosState {
+  tosAccepted?: boolean;
+}
+
+export default (state: TosState = {}, action: AppAction): TosState => {
+  switch (action.type) {
+    case 'TOS_ACCEPTED':
+      return R.assoc('tosAccepted', true, state);
+    case TRANSMIT_TOS_STATUS:
+      return R.assoc('tosAccepted', action.payload, state);
+    default:
+      return state;
+  }
+};

src/app/options/store/selectors/index.ts

@@ -1,4 +1,7 @@
-import { TosAcceptedState } from '../reducers/tosAccepted.reducer';
+import { TosState } from '../reducers/tos.reducer';
 
-export const areTosAccepted = (state: { tosAccepted: TosAcceptedState }) =>
-  state.tosAccepted;
+interface StateWithTos {
+  tos: TosState;
+}
+
+export const areTosAccepted = (state: StateWithTos) => state.tos.tosAccepted;