feat: Ask for personal info before a transfer

manifest.webapp

@@ -249,7 +249,7 @@
     "contacts": {
       "description": "Used to link accounts to contacts",
       "type": "io.cozy.contacts",
-      "verbs": ["GET"]
+      "verbs": ["GET", "PUT", "POST"]
     }
   }
 }

package.json

@@ -160,7 +160,7 @@
     "cozy-authentication": "2.1.0",
     "cozy-bar": "7.13.3",
     "cozy-ci": "0.4.1",
-    "cozy-client": "13.15.1",
+    "cozy-client": "13.16.0",
     "cozy-client-js": "0.16.4",
     "cozy-device-helper": "1.9.2",
     "cozy-doctypes": "1.69.0",
@@ -170,10 +170,10 @@
     "cozy-konnector-libs": "4.30.3-beta.1",
     "cozy-logger": "1.6.0",
     "cozy-notifications": "0.5.0",
-    "cozy-pouch-link": "13.15.1",
+    "cozy-pouch-link": "13.16.0",
     "cozy-realtime": "3.9.0",
     "cozy-scripts": "4.1.0",
-    "cozy-stack-client": "13.8.3",
+    "cozy-stack-client": "13.16.0",
     "cozy-ui": "35.33.1",
     "d3": "5.11.0",
     "date-fns": "1.30.1",

src/components/ModalStack.jsx

@@ -7,8 +7,7 @@
 import React, { useState } from 'react'
 import Modal from 'cozy-ui/transpiled/react/Modal'
 import { ViewStackContext } from 'cozy-ui/transpiled/react'
-
-const sleep = duration => new Promise(resolve => setTimeout(resolve, duration))
+import sleep from 'utils/sleep'
 
 // Same as in cozy-ui
 const useStack = (initialState, options = {}) => {

src/doctypes.js

@@ -234,3 +234,8 @@ export const recurrenceConn = {
   as: 'recurrence',
   fetchPolicy: older30s
 }
+
+export const myselfConn = {
+  query: () => Q('io.cozy.contacts').where({ me: true }),
+  as: 'myself'
+}

src/ducks/client/checks.js

@@ -1,8 +1,7 @@
 import matches from 'lodash/matches'
 import { triggerStates } from 'cozy-client/dist/models/trigger'
 import { triggersConn } from 'doctypes'
-
-const sleep = delay => new Promise(resolve => setTimeout(resolve, delay))
+import sleep from 'utils/sleep'
 
 const policies = {
   'never-executed': triggerState =>

src/ducks/client/checks.spec.js

@@ -1,8 +1,7 @@
 import StartupChecksPlugin from './checks'
 import CozyClient from 'cozy-client'
 import merge from 'lodash/merge'
-
-const sleep = delay => new Promise(resolve => setTimeout(resolve, delay))
+import sleep from 'utils/sleep'
 
 describe('startup checks', () => {
   beforeEach(() => {

src/ducks/personal-info/Form.jsx

@@ -0,0 +1,123 @@
+import React from 'react'
+import { translate } from 'cozy-ui/transpiled/react/I18n'
+import { withClient } from 'cozy-client'
+import Button from 'cozy-ui/transpiled/react/Button'
+import Field from 'cozy-ui/transpiled/react/Field'
+import Stack from 'cozy-ui/transpiled/react/Stack'
+import compose from 'lodash/flowRight'
+
+import countries from './countries.json'
+import PersonalInfoInfos from 'ducks/personal-info/Infos'
+
+const defaultNationality = { label: 'French', value: 'FR' }
+
+const nationalities = countries.map(country => {
+  return {
+    label: country.nationality,
+    value: country.alpha_2_code
+  }
+})
+
+/**
+ * Displays a form to fill personal info into the myself contact.
+ */
+class PersonalInfoForm extends React.Component {
+  constructor(props, context) {
+    super(props, context)
+    this.handleChangeField = this.handleChangeField.bind(this)
+    this.handleSave = this.handleSave.bind(this)
+
+    const myself = this.props.myself
+
+    this.state = {
+      saving: false,
+      formData: {
+        birthcity: myself.birthcity,
+        nationality:
+          nationalities.find(
+            x => myself.nationality && x.value === myself.nationality
+          ) || defaultNationality
+      }
+    }
+  }
+
+  render() {
+    const { t } = this.props
+    const { saving, formData } = this.state
+
+    return (
+      <Stack spacing="xl">
+        <div>
+          <Field
+            value={formData.birthcity}
+            onChange={ev =>
+              this.handleChangeField('birthcity', ev.target.value)
+            }
+            type="text"
+            name="birthcity"
+            label={t('PersonalInfo.birthcity')}
+            placeholder={t('PersonalInfo.birthcity-placeholder')}
+          />
+          <Field
+            onChange={option => this.handleChangeField('nationality', option)}
+            value={formData.nationality}
+            type="select"
+            name="nationality"
+            options={nationalities}
+            label={t('PersonalInfo.nationality')}
+          />
+        </div>
+        <PersonalInfoInfos />
+        <Button
+          busy={saving}
+          disabled={saving}
+          onClick={this.handleSave}
+          label={t('PersonalInfo.save-cta')}
+          variant="primary"
+        />
+      </Stack>
+    )
+  }
+
+  handleChangeField(name, value) {
+    const formData = {
+      ...this.state.formData,
+      [name]: value
+    }
+    this.setState({
+      formData
+    })
+  }
+
+  async handleSave(ev) {
+    const {
+      client,
+      onBeforeSave,
+      onAfterSave,
+      onSaveSuccessful,
+      myself
+    } = this.props
+    const { formData } = this.state
+    ev && ev.preventDefault()
+    onBeforeSave && onBeforeSave()
+    try {
+      const attributes = {
+        nationality: formData.nationality.value,
+        birthcity: formData.birthcity
+      }
+      const updatedMyself = {
+        ...myself,
+        ...attributes
+      }
+      await client.save(updatedMyself)
+      onSaveSuccessful && onSaveSuccessful(updatedMyself)
+    } finally {
+      onAfterSave && onAfterSave()
+    }
+  }
+}
+
+export default compose(
+  translate(),
+  withClient
+)(PersonalInfoForm)

src/ducks/personal-info/Infos.jsx

@@ -0,0 +1,22 @@
+import React from 'react'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import { Media, Bd, Img } from 'cozy-ui/transpiled/react/Media'
+import { Text, SubTitle } from 'cozy-ui/transpiled/react/Text'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+
+const PersonalInfoDescription = () => {
+  const { t } = useI18n()
+  return (
+    <Media align="top">
+      <Img>
+        <Icon icon="info" className="u-mr-1" />
+      </Img>
+      <Bd>
+        <SubTitle>{t('PersonalInfo.info.title')}</SubTitle>
+        <Text>{t('PersonalInfo.info.description')}</Text>
+      </Bd>
+    </Media>
+  )
+}
+
+export default PersonalInfoDescription