Adding terms for passwordless

src/__tests__/connection/passwordless/__snapshots__/passwordless.actions.test.js.snap

@@ -278,3 +278,18 @@ Array [
   "error,passwordless,bad.phone_number",
 ]
 `;
+
+exports[`passwordless actions toggleTermsAcceptance() calls switchTermsAcceptance() 1`] = `
+Array [
+  "updateEntity",
+  "lock",
+  "id",
+  [Function],
+]
+`;
+
+exports[`passwordless actions toggleTermsAcceptance() calls switchTermsAcceptance() 2`] = `
+Array [
+  "model",
+]
+`;

src/__tests__/connection/passwordless/__snapshots__/passwordless.test.js.snap

@@ -1,10 +1,31 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`passwordless connection initPasswordless() calls initNS  with mustAcceptTerms:false when opts.mustAcceptTerms is false 1`] = `
+Array [
+  null,
+  Immutable.Map {
+    "send": "code",
+    "mustAcceptTerms": false,
+  },
+]
+`;
+
+exports[`passwordless connection initPasswordless() calls initNS  with mustAcceptTerms:true when opts.mustAcceptTerms is true 1`] = `
+Array [
+  null,
+  Immutable.Map {
+    "send": "code",
+    "mustAcceptTerms": true,
+  },
+]
+`;
+
 exports[`passwordless connection initPasswordless() calls initNS  with send:code when opts.passwordlessMethod is code 1`] = `
 Array [
   null,
   Immutable.Map {
     "send": "code",
+    "mustAcceptTerms": false,
   },
 ]
 `;
@@ -14,6 +35,7 @@ Array [
   null,
   Immutable.Map {
     "send": "code",
+    "mustAcceptTerms": false,
   },
 ]
 `;
@@ -23,6 +45,7 @@ Array [
   null,
   Immutable.Map {
     "send": "link",
+    "mustAcceptTerms": false,
   },
 ]
 `;
@@ -59,3 +82,27 @@ Array [
   "EN",
 ]
 `;
+
+exports[`passwordless connection mustAcceptTerms() should return \`mustAcceptTerms\` 1`] = `
+Array [
+  "model",
+  "mustAcceptTerms",
+  false,
+]
+`;
+
+exports[`passwordless connection toggleTermsAcceptance() should tset \`termsAccepted\` to false when \`termsAccepted\` is true 1`] = `
+Array [
+  "model",
+  "termsAccepted",
+  true,
+]
+`;
+
+exports[`passwordless connection toggleTermsAcceptance() should tset \`termsAccepted\` to true when \`termsAccepted\` is false 1`] = `
+Array [
+  "model",
+  "termsAccepted",
+  false,
+]
+`;

src/__tests__/connection/passwordless/passwordless.actions.test.js

@@ -17,7 +17,8 @@ describe('passwordless actions', () => {
       send: () => 'send',
       setPasswordlessStarted: jest.fn(),
       setResendFailed: jest.fn(),
-      setResendSuccess: jest.fn()
+      setResendSuccess: jest.fn(),
+      toggleTermsAcceptance: jest.fn()
     }));
     jest.mock('field/phone_number', () => ({
       phoneNumberWithDiallingCode: () => 'phoneNumberWithDiallingCode'
@@ -222,6 +223,18 @@ describe('passwordless actions', () => {
       });
     });
   });
+  describe('toggleTermsAcceptance()', () => {
+    it('calls switchTermsAcceptance()', () => {
+      actions.toggleTermsAcceptance('id');
+
+      const { swap } = require('store/index');
+      expectMockToMatch(swap, 1);
+
+      swap.mock.calls[0][3]('model');
+
+      expectMockToMatch(require('connection/passwordless/index').toggleTermsAcceptance, 1);
+    });
+  });
   it('restart calls restartPasswordless', () => {
     actions.restart('id');
 

src/__tests__/connection/passwordless/passwordless.test.js

@@ -51,6 +51,18 @@ describe('passwordless connection', () => {
         });
         expectMockToMatch(mockFns.initNS, 1);
       });
+      it('with mustAcceptTerms:true when opts.mustAcceptTerms is true', () => {
+        initPasswordless(null, {
+          mustAcceptTerms: true
+        });
+        expectMockToMatch(mockFns.initNS, 1);
+      });
+      it('with mustAcceptTerms:false when opts.mustAcceptTerms is false', () => {
+        initPasswordless(null, {
+          mustAcceptTerms: false
+        });
+        expectMockToMatch(mockFns.initNS, 1);
+      });
     });
     it('should load default location via options.defaultLocation', () => {
       initPasswordless(null, {
@@ -71,4 +83,23 @@ describe('passwordless connection', () => {
       expectMockToMatch(require('field/phone_number').initLocation, 1);
     });
   });
+  describe('mustAcceptTerms()', () => {
+    it('should return `mustAcceptTerms`', () => {
+      require('connection/passwordless/index').mustAcceptTerms('model');
+      expectMockToMatch(mockFns.get, 1);
+    });
+  });
+
+  describe('toggleTermsAcceptance()', () => {
+    it('should tset `termsAccepted` to false when `termsAccepted` is true', () => {
+      mockFns.get.mockReturnValue(true);
+      require('connection/passwordless/index').toggleTermsAcceptance('model');
+      expectMockToMatch(mockFns.tset, 1);
+    });
+    it('should tset `termsAccepted` to true when `termsAccepted` is false', () => {
+      mockFns.get.mockReturnValue(false);
+      require('connection/passwordless/index').toggleTermsAcceptance('model');
+      expectMockToMatch(mockFns.tset, 1);
+    });
+  });
 });

src/connection/passwordless/actions.js

@@ -12,7 +12,8 @@ import {
   send,
   setPasswordlessStarted,
   setResendFailed,
-  setResendSuccess
+  setResendSuccess,
+  toggleTermsAcceptance as switchTermsAcceptance
 } from './index';
 import { phoneNumberWithDiallingCode } from '../../field/phone_number';
 import * as i18n from '../../i18n';
@@ -150,3 +151,7 @@ export function logIn(id) {
 export function restart(id) {
   swap(updateEntity, 'lock', id, restartPasswordless);
 }
+
+export function toggleTermsAcceptance(id) {
+  swap(updateEntity, 'lock', id, switchTermsAcceptance);
+}

src/connection/passwordless/index.js

@@ -9,10 +9,10 @@ import sync from '../../sync';
 
 export function initPasswordless(m, opts) {
   // TODO: validate opts
-
   const send = opts.passwordlessMethod === 'link' ? 'link' : 'code';
+  const mustAcceptTerms = !!opts.mustAcceptTerms;
 
-  m = initNS(m, Map({ send: send }));
+  m = initNS(m, Map({ send, mustAcceptTerms }));
   if (opts.defaultLocation && typeof opts.defaultLocation === 'string') {
     m = initLocation(m, opts.defaultLocation.toUpperCase());
   } else {
@@ -22,7 +22,6 @@ export function initPasswordless(m, opts) {
       successFn: (m, result) => initLocation(m, result)
     });
   }
-
   return m;
 }
 
@@ -104,3 +103,15 @@ export function isEmail(m) {
   const c = passwordlessConnection(m);
   return c.isEmpty() ? undefined : c.get('strategy') === 'email';
 }
+
+export function mustAcceptTerms(m) {
+  return get(m, 'mustAcceptTerms', false);
+}
+
+export function termsAccepted(m) {
+  return !mustAcceptTerms(m) || tget(m, 'termsAccepted', false);
+}
+
+export function toggleTermsAcceptance(m) {
+  return tset(m, 'termsAccepted', !termsAccepted(m));
+}

src/engine/passwordless/social_or_email_login_screen.jsx

@@ -3,12 +3,16 @@ import Screen from '../../core/screen';
 import EmailPane from '../../field/email/email_pane';
 import SocialButtonsPane from '../../field/social/social_buttons_pane';
 import PaneSeparator from '../../core/pane_separator';
+import { mustAcceptTerms, termsAccepted } from '../../connection/passwordless/index';
+import { toggleTermsAcceptance } from '../../connection/passwordless/actions';
 import { requestPasswordlessEmail } from '../../connection/passwordless/actions';
 import { renderEmailSentConfirmation } from '../../connection/passwordless/email_sent_confirmation';
 import { renderSignedInConfirmation } from '../../core/signed_in_confirmation';
 import { useBigButtons } from '../../connection/social/index';
 import * as l from '../../core/index';
 
+import SignUpTerms from '../../connection/database/sign_up_terms';
+
 const useSocialBigButtons = m => {
   const limit = l.connections(m, 'passwordless', 'email').count() === 0 ? 5 : 3;
   return useBigButtons(m, limit);
@@ -22,6 +26,7 @@ const Component = ({ i18n, model }) => {
       labelFn={i18n.str}
       lock={model}
       signUp={false}
+      disabled={!termsAccepted(model)}
     />
   ) : null;
 
@@ -69,4 +74,20 @@ export default class SocialOrEmailLoginScreen extends Screen {
   render() {
     return Component;
   }
+  isSubmitDisabled(m) {
+    return !termsAccepted(m);
+  }
+
+  renderTerms(m, terms) {
+    const checkHandler = mustAcceptTerms(m) ? () => toggleTermsAcceptance(l.id(m)) : undefined;
+    return terms || mustAcceptTerms(m) ? (
+      <SignUpTerms
+        showCheckbox={mustAcceptTerms(m)}
+        checkHandler={checkHandler}
+        checked={termsAccepted(m)}
+      >
+        {terms}
+      </SignUpTerms>
+    ) : null;
+  }
 }

src/engine/passwordless/social_or_phone_number_login_screen.jsx

@@ -9,6 +9,9 @@ import { useBigButtons } from '../../connection/social/index';
 import * as l from '../../core/index';
 
 import { renderOptionSelection } from '../../field/index';
+import { mustAcceptTerms, termsAccepted } from '../../connection/passwordless/index';
+import { toggleTermsAcceptance } from '../../connection/passwordless/actions';
+import SignUpTerms from '../../connection/database/sign_up_terms';
 
 const useSocialBigButtons = m => {
   const limit = l.connections(m, 'passwordless', 'sms').count() === 0 ? 5 : 3;
@@ -23,6 +26,7 @@ const Component = ({ i18n, model }) => {
       labelFn={i18n.str}
       lock={model}
       signUp={false}
+      disabled={!termsAccepted(model)}
     />
   ) : null;
 
@@ -65,4 +69,20 @@ export default class AskSocialNetworkOrPhoneNumber extends Screen {
   render() {
     return Component;
   }
+  isSubmitDisabled(m) {
+    return !termsAccepted(m);
+  }
+
+  renderTerms(m, terms) {
+    const checkHandler = mustAcceptTerms(m) ? () => toggleTermsAcceptance(l.id(m)) : undefined;
+    return terms || mustAcceptTerms(m) ? (
+      <SignUpTerms
+        showCheckbox={mustAcceptTerms(m)}
+        checkHandler={checkHandler}
+        checked={termsAccepted(m)}
+      >
+        {terms}
+      </SignUpTerms>
+    ) : null;
+  }
 }