Feature/privacy statement cx 1711

CHANGELOG.md

@@ -9,6 +9,7 @@ This project adheres to the Node [default version scheme](https://docs.npmjs.com
 
 ### Added
 - Public: Added `onModalRequestClose` options, which is a callback that fires when the user attempts to close the modal.
+- UI: Added legal documentation view before first document capture to assist client with user privacy notifications and compliance.
 
 ### Fixed
 - Internal: Fixed the `tearDown` method to clear the onComplete callback functions.

src/components/Capture/capture.js

@@ -5,6 +5,7 @@ import randomId from '../utils/randomString'
 import { Uploader } from '../Uploader'
 import Camera from '../Camera'
 import Title from '../Title'
+import PrivacyStatement from '../PrivacyStatement'
 import { functionalSwitch, isDesktop, checkIfHasWebcam } from '../utils'
 import { canvasToBase64Images } from '../utils/canvas.js'
 import { base64toBlob, fileToBase64, isOfFileType, fileToLossyBase64Image } from '../utils/file.js'
@@ -23,6 +24,7 @@ class Capture extends Component {
       uploadFallback: false,
       error: null,
       hasWebcam: hasWebcamStartupValue,
+      privacyTermsAccepted: props.termsAccepted
     }
   }
 
@@ -43,6 +45,11 @@ class Capture extends Component {
     if (allInvalid) this.onFileGeneralError()
   }
 
+  acceptTerms = () => {
+    this.props.actions.acceptTerms()
+    this.setState({privacyTermsAccepted: true})
+  }
+
   checkWebcamSupport = () => {
     checkIfHasWebcam( hasWebcam => this.setState({hasWebcam}) )
   }
@@ -196,16 +203,20 @@ class Capture extends Component {
     this.setState({error: null})
   }
 
-  render ({useWebcam, ...other}) {
+  render ({useWebcam, back, i18n, ...other}) {
     const useCapture = (!this.state.uploadFallback && useWebcam && isDesktop && this.state.hasWebcam)
     return (
-      <CaptureMode {...{useCapture,
-        onScreenshot: this.onScreenshot,
-        onUploadFallback: this.onUploadFallback,
-        onImageSelected: this.onImageFileSelected,
-        onWebcamError: this.onWebcamError,
-        error: this.state.error,
-        ...other}}/>
+      <div>
+        { !this.state.privacyTermsAccepted ?
+          <PrivacyStatement {...{i18n, back, acceptTerms: this.acceptTerms, ...other}}/> :
+          <CaptureMode {...{useCapture, i18n,
+            onScreenshot: this.onScreenshot,
+            onUploadFallback: this.onUploadFallback,
+            onImageSelected: this.onImageFileSelected,
+            onWebcamError: this.onWebcamError,
+            error: this.state.error,
+            ...other}}/> }
+      </div>
     )
   }
 }

src/components/NavigationBar/style.css

@@ -1,13 +1,12 @@
 @import (less) "../Theme/constants.css";
 
 .navigation {
-  float: left;
-  position: absolute;
-  top: 16px;
-  margin-left: 16px;
+  margin: 0 16px;
+  margin-top: -16px;
   text-align: left;
   @media (--small-viewport) {
     margin-left: 12px;
+    margin-top: -32px;
   }
 }
 

src/components/PrivacyStatement/index.js

@@ -0,0 +1,50 @@
+import { h, Component} from 'preact'
+
+import theme from '../Theme/style.css'
+import style from './style.css'
+import Title from '../Title'
+import {preventDefaultOnClick} from '../utils'
+import {sendScreen} from '../../Tracker'
+
+class PrivacyStatement extends Component {
+  componentDidMount() {
+    sendScreen(['privacy'])
+  }
+
+  render({i18n, back, acceptTerms}) {
+    const title = i18n.t('privacy.title')
+    return (
+      <div className={style.privacy}>
+        <Title {...{title}} />
+        <div className={`${theme.thickWrapper} ${style.content}`}>
+          <ul className={style.list}>
+            <li className={style.item}>{i18n.t('privacy.item_1')}</li>
+            <li className={style.item}>{i18n.t('privacy.item_2')}</li>
+            <li className={style.item}>{i18n.t('privacy.item_3')}</li>
+          </ul>
+
+          <div>
+            <div className={style.smallPrint}>
+              {i18n.t('privacy.small_print_p1')}
+              <a href='https://onfido.com/termofuse' target='_blank'>{i18n.t('privacy.terms_link')}</a>
+              {i18n.t('privacy.small_print_p2')}
+              <a href='https://onfido.com/privacy' target='_blank'>{i18n.t('privacy.privacy_link')}</a>
+            </div>
+            <div className={style.actions}>
+              <button onClick={preventDefaultOnClick(back)}
+                className={`${theme.btn} ${style.decline}`}>
+                {i18n.t('privacy.decline')}
+              </button>
+              <button href='#' className={`${theme.btn} ${theme["btn-primary"]} ${style.primary}`}
+                onClick={preventDefaultOnClick(acceptTerms)}>
+                {i18n.t('privacy.continue')}
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    )
+  }
+}
+
+export default PrivacyStatement

src/components/PrivacyStatement/style.css

@@ -0,0 +1,84 @@
+@import (less) "../Theme/constants.css";
+
+.privacy {
+  height: calc(~"100% - 112px");
+  width: 100%;
+  position: absolute;
+}
+
+.content {
+  height: calc(~"100% - 112px");
+  display: flex;
+  justify-content: space-around;
+  flex-direction: column;
+  color: #0F2536;
+}
+
+.actions {
+  display: flex;
+  justify-content: space-between;
+  flex-direction: row;
+}
+
+.list {
+  font-size: 16px;
+  line-height: 24px;
+  text-align: left;
+  padding-left: 64px;
+  position: relative;
+  @media (--small-viewport) {
+    padding-left: 32px;
+  }
+}
+
+.item {
+   list-style: none;
+   margin-bottom: 16px;
+}
+
+.item:before{
+   content: '';
+   display: inline-block;
+   height: 16px;
+   width: 32px;
+   background-image: url('assets/tick-grey.svg');
+   background-repeat: no-repeat;
+   position: relative;
+   margin-left: -32px;
+   @media (--small-viewport) {
+     margin-left: -32px;
+   }
+}
+
+.smallPrint {
+  text-align: left;
+  font-size: 11px;
+  font-weight: 400;
+  line-height: 18px;
+  margin-bottom: 24px;
+}
+
+.smallPrint a {
+  color: #0F2536;
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+
+.decline {
+  width: 136px;
+  border: 1px solid #8A9293;
+  border-radius: 28px;
+  background-color: transparent;
+  color: #585E5F;
+  line-height: 16px;
+  @media (--small-viewport) {
+    width: 112px;
+    padding: 0px 16px;
+  }
+}
+
+.primary {
+  @media (--small-viewport) {
+    width: 152px;
+  }
+}

src/components/Router/index.js

@@ -98,9 +98,9 @@ class CrossDeviceMobileRouter extends Component {
       sendError(`Token has expired: ${token}`)
       return this.setError()
     }
-    this.setState({token, steps, step, loading: false})
-    this.setState({i18n: initializeI18n(language)})
+    this.setState({token, steps, step, loading: false, i18n: initializeI18n(language)})
     actions.setDocumentType(documentType)
+    actions.acceptTerms()
   }
 
   setError = () =>

src/core/constants/index.js

@@ -4,6 +4,7 @@ export const SET_SOCKET = 'SET_SOCKET'
 export const SET_MOBILE_NUMBER = 'SET_MOBILE_NUMBER'
 export const SET_CLIENT_SUCCESS = 'SET_CLIENT_SUCCESS'
 export const MOBILE_CONNECTED = 'MOBILE_CONNECTED'
+export const ACCEPT_TERMS = 'ACCEPT_TERMS'
 
 export const CAPTURE_CREATE = 'CAPTURE_CREATE'
 export const CAPTURE_VALIDATE = 'CAPTURE_VALIDATE'

src/core/store/actions/globals.js

@@ -41,3 +41,9 @@ export function mobileConnected(payload) {
     payload
   }
 }
+
+export function acceptTerms() {
+  return {
+    type: constants.ACCEPT_TERMS
+  }
+}

src/core/store/reducers/globals.js

@@ -7,6 +7,7 @@ const initialState = {
   sms: {number: null, valid: false},
   clientSuccess: false,
   i18n: null,
+  termsAccepted: false
 }
 
 
@@ -24,6 +25,8 @@ export default function globals(state = initialState, action) {
       return {...state, clientSuccess: action.payload}
     case constants.MOBILE_CONNECTED:
       return {...state, mobileConnected: action.payload}
+    case constants.ACCEPT_TERMS:
+      return {...state, termsAccepted: true}
     default:
       return state
   }

src/locales/en.js

@@ -130,6 +130,18 @@ export const en = {
     },
     tips: 'Tips',
   },
+  privacy: {
+    title: 'You\'ll have to upload a photo of your identity document',
+    item_1: 'All your document details must be visible',
+    item_2: 'Your document must be in colour',
+    item_3: 'Avoid light reflections',
+    small_print_p1: 'By continuing, you agree to the ',
+    terms_link: 'Onfido Terms of Use',
+    small_print_p2: ' and understand that your information, including your facial identifiers, will be processed in accordance with the ',
+    privacy_link: 'Onfido Privacy Policy',
+    decline: 'Decline',
+    continue: 'Continue'
+  },
   errors: {
     invalid_capture: {message:'No document detected', instruction: 'Make sure all the document is in the photo'},
     invalid_type: {message: 'File not uploading', instruction: 'Try using another file type'},

src/locales/es.js

@@ -130,6 +130,18 @@ export const es = {
     },
     tips: 'Tips',
   },
+  privacy: {
+    title: 'Tendrá que subir una foto de su documento de identidad',
+    item_1: 'Todos los datos de su documento tienen que ser visibles',
+    item_2: 'El documento debe ser en color',
+    item_3: 'Evite los reflejos',
+    small_print_p1: 'Al continuar, usted está de acuerdo con los ',
+    terms_link: 'Términos de Uso de Onfido',
+    small_print_p2: ' y comprende que su información, incluidos sus identificadores faciales, se procesará de acuerdo con la ',
+    privacy_link: 'Política de privacidad de Onfido',
+    decline: 'Declinar',
+    continue: 'Continuar'
+  },
   errors: {
     invalid_capture: {message:'Documento no detectado', instruction: 'Asegúrese de que todo el documento esté en la foto'},
     invalid_type: {message: 'Archivo no cargado', instruction: 'Intenta usar otro tipo de archivo'},

test/features/page_objects/sdk.rb

@@ -41,6 +41,14 @@ def confirm
     @driver.find_element(:css, '.onfido-sdk-ui-Confirm-actions > .onfido-sdk-ui-Theme-btn-primary')
   end
 
+  def confirm_privacy_terms
+    @driver.find_element(:css, '.onfido-sdk-ui-PrivacyStatement-primary')
+  end
+
+  def decline_privacy_terms
+    @driver.find_element(:css, '.onfido-sdk-ui-PrivacyStatement-decline')
+  end
+
   def page_title
     @driver.find_element(:css, '.onfido-sdk-ui-Title-title')
   end

test/features/sdk_flow.feature

@@ -162,3 +162,16 @@ Feature: SDK File Upload Tests
     When I press esc key
     When I click on modal_button ()
     Then I should see page_title ()
+
+  Scenario Outline: I should be able to decline privacy terms
+    Given I initiate the verification process with <locale>
+    Then I should see 3 document_select_buttons ()
+    When I click on passport ()
+    Then page_title should include translation for "privacy.title"
+    When I click on decline_privacy_terms ()
+    Then I can navigate back to the previous page with title "document_selector.title"
+
+    Examples:
+      | locale |
+      |        |
+      | es     |

test/features/step_definitions/sdk_steps.rb

@@ -2,9 +2,15 @@
 
 i18n = I18nHelper.new
 
-Given(/^I verify with (passport|identity_card|drivers_license)(?:| with (.+)?)$/) do |document_type, locale|
+Given(/^I initiate the verification process with(?: (.+)?)?$/) do |locale|
   i18n.load_locale(locale)
+  steps %Q{
+    Given I navigate to the SDK with "#{locale}"
+    Then I click on primary_button (SDK)
+  }
+end
 
+Given(/^I verify with (passport|identity_card|drivers_license)(?: with (.+)?)?$/) do |document_type, locale|
   if document_type == 'passport'
     key = 'capture.passport.front.title'
   elsif document_type == 'identity_card'
@@ -14,10 +20,11 @@
   end
 
   steps %Q{
-    Given I navigate to the SDK with "#{locale}"
-    When I click on primary_button (SDK)
+    Given I initiate the verification process with #{locale}
     Then I should see 3 document_select_buttons ()
     When I click on #{document_type} ()
+    Then page_title should include translation for "privacy.title"
+    When I click on confirm_privacy_terms ()
     Then page_title should include translation for "#{key}"
     And cross_device_header should include translation for "cross_device.switch_device.header"
   }