From 0cff7e0e963b0940d771f2a4980ea21fd100a96b Mon Sep 17 00:00:00 2001
From: Patrick Browne <pt.browne@gmail.com>
Date: Thu, 23 Jul 2020 12:56:57 +0200
Subject: [PATCH 01/12] refactor: Use list instead of object for ordered data

---
 package.json                         |  6 ++--
 src/ducks/transfers/TransferPage.jsx | 19 ++++++------
 yarn.lock                            | 43 ++++++++++++++++------------
 3 files changed, 38 insertions(+), 30 deletions(-)

diff --git a/package.json b/package.json
index 1d95e24395..81f354691d 100644
--- a/package.json
+++ b/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",
diff --git a/src/ducks/transfers/TransferPage.jsx b/src/ducks/transfers/TransferPage.jsx
index ea78e3c423..dd9088fee8 100644
--- a/src/ducks/transfers/TransferPage.jsx
+++ b/src/ducks/transfers/TransferPage.jsx
@@ -34,14 +34,14 @@ import { isCollectionLoading, hasBeenLoaded } from 'ducks/client/utils'
 
 const THIRTY_SECONDS = 30 * 1000
 
-const slideIndexes = {
-  category: 0,
-  beneficiary: 1,
-  sender: 2,
-  amount: 3,
-  summary: 4,
-  password: 5
-}
+const slideIndexes = [
+  'category',
+  'beneficiary',
+  'sender',
+  'amount',
+  'summary',
+  'password'
+]
 
 const subscribe = (rt, event, doc, id, cb) => {
   let handler
@@ -304,7 +304,8 @@ class TransferPage extends React.Component {
   }
 
   selectSlideByName(slideName) {
-    this.setState({ slide: slideIndexes[slideName] || 0 })
+    const idx = slideIndexes.findIndex(x => x == slideName)
+    this.setState({ slide: idx !== -1 ? idx : 0 })
     this.props.router.push(slideName ? `/transfers/${slideName}` : '/transfers')
   }
 
diff --git a/yarn.lock b/yarn.lock
index 8434344de8..1c62a058ca 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5023,15 +5023,15 @@ cozy-client-js@^0.15.0:
     pouchdb-browser "7.0.0"
     pouchdb-find "7.0.0"
 
-cozy-client@13.15.1, cozy-client@^13.15.1:
-  version "13.15.1"
-  resolved "https://registry.yarnpkg.com/cozy-client/-/cozy-client-13.15.1.tgz#66f13066f653b5577468167a0c3e4fd64ccc7b06"
-  integrity sha512-CM202LvrxC+OBr8ZBwnqekfQDuwLfZmoiO/ScNvY3DMTivw4qH08s17co+cFHvcN9I+ty9LqTR9q/ZA4wdPnjg==
+cozy-client@13.16.0, cozy-client@^13.16.0:
+  version "13.16.0"
+  resolved "https://registry.yarnpkg.com/cozy-client/-/cozy-client-13.16.0.tgz#424727f3c735db9ab5e5750778c81cb98f59267a"
+  integrity sha512-zFvd5b6ZExNJkgdfzfpkpQW6JNnetKotiwPgh6XPLtSdu2cGa+HaOiv+63LEoQSZD0FfRNCh+4jB6mM2wMa8YA==
   dependencies:
     btoa "^1.2.1"
     cozy-device-helper "^1.7.3"
     cozy-logger "^1.6.0"
-    cozy-stack-client "^13.15.1"
+    cozy-stack-client "^13.16.0"
     isomorphic-fetch "^2.2.1"
     lodash "^4.17.13"
     microee "^0.0.6"
@@ -5373,12 +5373,12 @@ cozy-notifications@0.5.0:
     mjml "4.3.1"
     word-wrap "^1.2.3"
 
-cozy-pouch-link@13.15.1:
-  version "13.15.1"
-  resolved "https://registry.yarnpkg.com/cozy-pouch-link/-/cozy-pouch-link-13.15.1.tgz#d9d78e625ed4c5a52247f3662afb070a6bfa169e"
-  integrity sha512-A9zU3I73vOX+b2UVmZpLmI6jUZf+7IzycUFI09HvJtNPakFkoh8Ya5iWFraztxonBjW+EWVKn4pDtQDSOFAydA==
+cozy-pouch-link@13.16.0:
+  version "13.16.0"
+  resolved "https://registry.yarnpkg.com/cozy-pouch-link/-/cozy-pouch-link-13.16.0.tgz#2b4601f2e619eb7f3537a8602c2ef32cde528ee0"
+  integrity sha512-dVOxpXjVcci/5kheVrQtrllD2YDTTLVvClCFg79mu9UjRiFn4qJGkjoHDzodNxSxFoQ53Ew6ZN0Nh99tdC0+fw==
   dependencies:
-    cozy-client "^13.15.1"
+    cozy-client "^13.16.0"
     cozy-device-helper "^1.7.3"
     minilog "^3.1.0"
     pouchdb-browser "^7.0.0"
@@ -5451,19 +5451,19 @@ cozy-scripts@4.1.0:
     webpack-dev-server "3.10.3"
     webpack-merge "4.2.2"
 
-cozy-stack-client@13.8.3, cozy-stack-client@^13.8.3:
-  version "13.8.3"
-  resolved "https://registry.yarnpkg.com/cozy-stack-client/-/cozy-stack-client-13.8.3.tgz#7e87b18b853ae60b0df5bee1b78203d04e5ebc4a"
-  integrity sha512-ffSC6DVCi+LU8KP6dhV+A7u5aMeRtSvrhEGTdeZn1AbrS6cD11OZPOveCzMHYUXzuAwbov8sRLi0BF8cTENWfQ==
+cozy-stack-client@13.16.0, cozy-stack-client@^13.16.0:
+  version "13.16.0"
+  resolved "https://registry.yarnpkg.com/cozy-stack-client/-/cozy-stack-client-13.16.0.tgz#e4e7043df34132dc6c1578b030d823e994a7e210"
+  integrity sha512-pAzBsB5pFL0wyccquLK4Hgw5uayMhoAVKJOThU+u+vYFpnYlNEZQ+iY9eFFOpQa47dWy0vTkmI0N0wk5chN/2g==
   dependencies:
     detect-node "^2.0.4"
     mime "^2.4.0"
     qs "^6.7.0"
 
-cozy-stack-client@^13.15.1:
-  version "13.15.1"
-  resolved "https://registry.yarnpkg.com/cozy-stack-client/-/cozy-stack-client-13.15.1.tgz#6beb2703ab916c568b226ea5a572c0cba13d02df"
-  integrity sha512-ZNGphplNg98P2bFqIvYRHm7wJKpjTCVL5oed5GBKb4DDwW/CogVaYaiGfF8sfm/1AZqQWyRMfvZjLaIZtH1/QQ==
+cozy-stack-client@^13.8.3:
+  version "13.8.3"
+  resolved "https://registry.yarnpkg.com/cozy-stack-client/-/cozy-stack-client-13.8.3.tgz#7e87b18b853ae60b0df5bee1b78203d04e5ebc4a"
+  integrity sha512-ffSC6DVCi+LU8KP6dhV+A7u5aMeRtSvrhEGTdeZn1AbrS6cD11OZPOveCzMHYUXzuAwbov8sRLi0BF8cTENWfQ==
   dependencies:
     detect-node "^2.0.4"
     mime "^2.4.0"
@@ -12448,6 +12448,13 @@ minilog@3.1.0, minilog@^3.1.0, "minilog@https://github.com/cozy/minilog.git#mast
   dependencies:
     microee "0.0.6"
 
+"minilog@git+https://github.com/cozy/minilog.git#master":
+  version "3.1.0"
+  uid f01f7d9dfe20981177dd34b9662c2f077d818f82
+  resolved "git+https://github.com/cozy/minilog.git#f01f7d9dfe20981177dd34b9662c2f077d818f82"
+  dependencies:
+    microee "0.0.6"
+
 minimalistic-assert@^1.0.0, minimalistic-assert@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz#2e194de044626d4a10e7f7fbc00ce73e83e4d5c7"

From fe03d1189180ab418567f7cf47cd3e575422a134 Mon Sep 17 00:00:00 2001
From: Patrick Browne <pt.browne@gmail.com>
Date: Thu, 23 Jul 2020 13:43:03 +0200
Subject: [PATCH 02/12] feat: Add Form to edit myself contact

---
 src/doctypes.js                        |    5 +
 src/ducks/personal-info/Form.jsx       |  118 ++
 src/ducks/personal-info/Infos.jsx      |   22 +
 src/ducks/personal-info/countries.json | 1745 ++++++++++++++++++++++++
 src/ducks/personal-info/index.jsx      |   76 ++
 src/locales/en.json                    |   12 +
 src/locales/fr.json                    |   12 +
 7 files changed, 1990 insertions(+)
 create mode 100644 src/ducks/personal-info/Form.jsx
 create mode 100644 src/ducks/personal-info/Infos.jsx
 create mode 100644 src/ducks/personal-info/countries.json
 create mode 100644 src/ducks/personal-info/index.jsx

diff --git a/src/doctypes.js b/src/doctypes.js
index 55a402d214..8fa6ce824c 100644
--- a/src/doctypes.js
+++ b/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'
+}
diff --git a/src/ducks/personal-info/Form.jsx b/src/ducks/personal-info/Form.jsx
new file mode 100644
index 0000000000..eddf7244ad
--- /dev/null
+++ b/src/ducks/personal-info/Form.jsx
@@ -0,0 +1,118 @@
+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 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 (
+      <>
+        <Field
+          value={formData.birthcity}
+          onChange={ev => this.handleChangeField('birthcity', ev.target.value)}
+          type="text"
+          name="birthcity"
+          label={t('PersonalInfo.birthcity')}
+        />
+        <Field
+          onChange={option => this.handleChangeField('nationality', option)}
+          value={formData.nationality}
+          type="select"
+          name="nationality"
+          options={nationalities}
+          label={t('PersonalInfo.nationality')}
+        />
+        <PersonalInfoInfos />
+        <Button
+          busy={saving}
+          disabled={saving}
+          onClick={this.handleSave}
+          label={t('PersonalInfo.save-cta')}
+          type="primary"
+          className="u-mt-1"
+        />
+      </>
+    )
+  }
+
+  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)
diff --git a/src/ducks/personal-info/Infos.jsx b/src/ducks/personal-info/Infos.jsx
new file mode 100644
index 0000000000..55004c3b77
--- /dev/null
+++ b/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
diff --git a/src/ducks/personal-info/countries.json b/src/ducks/personal-info/countries.json
new file mode 100644
index 0000000000..c09b62b7cc
--- /dev/null
+++ b/src/ducks/personal-info/countries.json
@@ -0,0 +1,1745 @@
+[
+    {
+        "num_code": "4",
+        "alpha_2_code": "AF",
+        "alpha_3_code": "AFG",
+        "en_short_name": "Afghanistan",
+        "nationality": "Afghan"
+    },
+    {
+        "num_code": "248",
+        "alpha_2_code": "AX",
+        "alpha_3_code": "ALA",
+        "en_short_name": "\u00c5land Islands",
+        "nationality": "\u00c5land Island"
+    },
+    {
+        "num_code": "8",
+        "alpha_2_code": "AL",
+        "alpha_3_code": "ALB",
+        "en_short_name": "Albania",
+        "nationality": "Albanian"
+    },
+    {
+        "num_code": "12",
+        "alpha_2_code": "DZ",
+        "alpha_3_code": "DZA",
+        "en_short_name": "Algeria",
+        "nationality": "Algerian"
+    },
+    {
+        "num_code": "16",
+        "alpha_2_code": "AS",
+        "alpha_3_code": "ASM",
+        "en_short_name": "American Samoa",
+        "nationality": "American Samoan"
+    },
+    {
+        "num_code": "20",
+        "alpha_2_code": "AD",
+        "alpha_3_code": "AND",
+        "en_short_name": "Andorra",
+        "nationality": "Andorran"
+    },
+    {
+        "num_code": "24",
+        "alpha_2_code": "AO",
+        "alpha_3_code": "AGO",
+        "en_short_name": "Angola",
+        "nationality": "Angolan"
+    },
+    {
+        "num_code": "660",
+        "alpha_2_code": "AI",
+        "alpha_3_code": "AIA",
+        "en_short_name": "Anguilla",
+        "nationality": "Anguillan"
+    },
+    {
+        "num_code": "10",
+        "alpha_2_code": "AQ",
+        "alpha_3_code": "ATA",
+        "en_short_name": "Antarctica",
+        "nationality": "Antarctic"
+    },
+    {
+        "num_code": "28",
+        "alpha_2_code": "AG",
+        "alpha_3_code": "ATG",
+        "en_short_name": "Antigua and Barbuda",
+        "nationality": "Antiguan or Barbudan"
+    },
+    {
+        "num_code": "32",
+        "alpha_2_code": "AR",
+        "alpha_3_code": "ARG",
+        "en_short_name": "Argentina",
+        "nationality": "Argentine"
+    },
+    {
+        "num_code": "51",
+        "alpha_2_code": "AM",
+        "alpha_3_code": "ARM",
+        "en_short_name": "Armenia",
+        "nationality": "Armenian"
+    },
+    {
+        "num_code": "533",
+        "alpha_2_code": "AW",
+        "alpha_3_code": "ABW",
+        "en_short_name": "Aruba",
+        "nationality": "Aruban"
+    },
+    {
+        "num_code": "36",
+        "alpha_2_code": "AU",
+        "alpha_3_code": "AUS",
+        "en_short_name": "Australia",
+        "nationality": "Australian"
+    },
+    {
+        "num_code": "40",
+        "alpha_2_code": "AT",
+        "alpha_3_code": "AUT",
+        "en_short_name": "Austria",
+        "nationality": "Austrian"
+    },
+    {
+        "num_code": "31",
+        "alpha_2_code": "AZ",
+        "alpha_3_code": "AZE",
+        "en_short_name": "Azerbaijan",
+        "nationality": "Azerbaijani, Azeri"
+    },
+    {
+        "num_code": "44",
+        "alpha_2_code": "BS",
+        "alpha_3_code": "BHS",
+        "en_short_name": "Bahamas",
+        "nationality": "Bahamian"
+    },
+    {
+        "num_code": "48",
+        "alpha_2_code": "BH",
+        "alpha_3_code": "BHR",
+        "en_short_name": "Bahrain",
+        "nationality": "Bahraini"
+    },
+    {
+        "num_code": "50",
+        "alpha_2_code": "BD",
+        "alpha_3_code": "BGD",
+        "en_short_name": "Bangladesh",
+        "nationality": "Bangladeshi"
+    },
+    {
+        "num_code": "52",
+        "alpha_2_code": "BB",
+        "alpha_3_code": "BRB",
+        "en_short_name": "Barbados",
+        "nationality": "Barbadian"
+    },
+    {
+        "num_code": "112",
+        "alpha_2_code": "BY",
+        "alpha_3_code": "BLR",
+        "en_short_name": "Belarus",
+        "nationality": "Belarusian"
+    },
+    {
+        "num_code": "56",
+        "alpha_2_code": "BE",
+        "alpha_3_code": "BEL",
+        "en_short_name": "Belgium",
+        "nationality": "Belgian"
+    },
+    {
+        "num_code": "84",
+        "alpha_2_code": "BZ",
+        "alpha_3_code": "BLZ",
+        "en_short_name": "Belize",
+        "nationality": "Belizean"
+    },
+    {
+        "num_code": "204",
+        "alpha_2_code": "BJ",
+        "alpha_3_code": "BEN",
+        "en_short_name": "Benin",
+        "nationality": "Beninese, Beninois"
+    },
+    {
+        "num_code": "60",
+        "alpha_2_code": "BM",
+        "alpha_3_code": "BMU",
+        "en_short_name": "Bermuda",
+        "nationality": "Bermudian, Bermudan"
+    },
+    {
+        "num_code": "64",
+        "alpha_2_code": "BT",
+        "alpha_3_code": "BTN",
+        "en_short_name": "Bhutan",
+        "nationality": "Bhutanese"
+    },
+    {
+        "num_code": "68",
+        "alpha_2_code": "BO",
+        "alpha_3_code": "BOL",
+        "en_short_name": "Bolivia (Plurinational State of)",
+        "nationality": "Bolivian"
+    },
+    {
+        "num_code": "535",
+        "alpha_2_code": "BQ",
+        "alpha_3_code": "BES",
+        "en_short_name": "Bonaire, Sint Eustatius and Saba",
+        "nationality": "Bonaire"
+    },
+    {
+        "num_code": "70",
+        "alpha_2_code": "BA",
+        "alpha_3_code": "BIH",
+        "en_short_name": "Bosnia and Herzegovina",
+        "nationality": "Bosnian or Herzegovinian"
+    },
+    {
+        "num_code": "72",
+        "alpha_2_code": "BW",
+        "alpha_3_code": "BWA",
+        "en_short_name": "Botswana",
+        "nationality": "Motswana, Botswanan"
+    },
+    {
+        "num_code": "74",
+        "alpha_2_code": "BV",
+        "alpha_3_code": "BVT",
+        "en_short_name": "Bouvet Island",
+        "nationality": "Bouvet Island"
+    },
+    {
+        "num_code": "76",
+        "alpha_2_code": "BR",
+        "alpha_3_code": "BRA",
+        "en_short_name": "Brazil",
+        "nationality": "Brazilian"
+    },
+    {
+        "num_code": "86",
+        "alpha_2_code": "IO",
+        "alpha_3_code": "IOT",
+        "en_short_name": "British Indian Ocean Territory",
+        "nationality": "BIOT"
+    },
+    {
+        "num_code": "96",
+        "alpha_2_code": "BN",
+        "alpha_3_code": "BRN",
+        "en_short_name": "Brunei Darussalam",
+        "nationality": "Bruneian"
+    },
+    {
+        "num_code": "100",
+        "alpha_2_code": "BG",
+        "alpha_3_code": "BGR",
+        "en_short_name": "Bulgaria",
+        "nationality": "Bulgarian"
+    },
+    {
+        "num_code": "854",
+        "alpha_2_code": "BF",
+        "alpha_3_code": "BFA",
+        "en_short_name": "Burkina Faso",
+        "nationality": "Burkinab\u00e9"
+    },
+    {
+        "num_code": "108",
+        "alpha_2_code": "BI",
+        "alpha_3_code": "BDI",
+        "en_short_name": "Burundi",
+        "nationality": "Burundian"
+    },
+    {
+        "num_code": "132",
+        "alpha_2_code": "CV",
+        "alpha_3_code": "CPV",
+        "en_short_name": "Cabo Verde",
+        "nationality": "Cabo Verdean"
+    },
+    {
+        "num_code": "116",
+        "alpha_2_code": "KH",
+        "alpha_3_code": "KHM",
+        "en_short_name": "Cambodia",
+        "nationality": "Cambodian"
+    },
+    {
+        "num_code": "120",
+        "alpha_2_code": "CM",
+        "alpha_3_code": "CMR",
+        "en_short_name": "Cameroon",
+        "nationality": "Cameroonian"
+    },
+    {
+        "num_code": "124",
+        "alpha_2_code": "CA",
+        "alpha_3_code": "CAN",
+        "en_short_name": "Canada",
+        "nationality": "Canadian"
+    },
+    {
+        "num_code": "136",
+        "alpha_2_code": "KY",
+        "alpha_3_code": "CYM",
+        "en_short_name": "Cayman Islands",
+        "nationality": "Caymanian"
+    },
+    {
+        "num_code": "140",
+        "alpha_2_code": "CF",
+        "alpha_3_code": "CAF",
+        "en_short_name": "Central African Republic",
+        "nationality": "Central African"
+    },
+    {
+        "num_code": "148",
+        "alpha_2_code": "TD",
+        "alpha_3_code": "TCD",
+        "en_short_name": "Chad",
+        "nationality": "Chadian"
+    },
+    {
+        "num_code": "152",
+        "alpha_2_code": "CL",
+        "alpha_3_code": "CHL",
+        "en_short_name": "Chile",
+        "nationality": "Chilean"
+    },
+    {
+        "num_code": "156",
+        "alpha_2_code": "CN",
+        "alpha_3_code": "CHN",
+        "en_short_name": "China",
+        "nationality": "Chinese"
+    },
+    {
+        "num_code": "162",
+        "alpha_2_code": "CX",
+        "alpha_3_code": "CXR",
+        "en_short_name": "Christmas Island",
+        "nationality": "Christmas Island"
+    },
+    {
+        "num_code": "166",
+        "alpha_2_code": "CC",
+        "alpha_3_code": "CCK",
+        "en_short_name": "Cocos (Keeling) Islands",
+        "nationality": "Cocos Island"
+    },
+    {
+        "num_code": "170",
+        "alpha_2_code": "CO",
+        "alpha_3_code": "COL",
+        "en_short_name": "Colombia",
+        "nationality": "Colombian"
+    },
+    {
+        "num_code": "174",
+        "alpha_2_code": "KM",
+        "alpha_3_code": "COM",
+        "en_short_name": "Comoros",
+        "nationality": "Comoran, Comorian"
+    },
+    {
+        "num_code": "178",
+        "alpha_2_code": "CG",
+        "alpha_3_code": "COG",
+        "en_short_name": "Congo (Republic of the)",
+        "nationality": "Congolese"
+    },
+    {
+        "num_code": "180",
+        "alpha_2_code": "CD",
+        "alpha_3_code": "COD",
+        "en_short_name": "Congo (Democratic Republic of the)",
+        "nationality": "Congolese"
+    },
+    {
+        "num_code": "184",
+        "alpha_2_code": "CK",
+        "alpha_3_code": "COK",
+        "en_short_name": "Cook Islands",
+        "nationality": "Cook Island"
+    },
+    {
+        "num_code": "188",
+        "alpha_2_code": "CR",
+        "alpha_3_code": "CRI",
+        "en_short_name": "Costa Rica",
+        "nationality": "Costa Rican"
+    },
+    {
+        "num_code": "384",
+        "alpha_2_code": "CI",
+        "alpha_3_code": "CIV",
+        "en_short_name": "C\u00f4te d'Ivoire",
+        "nationality": "Ivorian"
+    },
+    {
+        "num_code": "191",
+        "alpha_2_code": "HR",
+        "alpha_3_code": "HRV",
+        "en_short_name": "Croatia",
+        "nationality": "Croatian"
+    },
+    {
+        "num_code": "192",
+        "alpha_2_code": "CU",
+        "alpha_3_code": "CUB",
+        "en_short_name": "Cuba",
+        "nationality": "Cuban"
+    },
+    {
+        "num_code": "531",
+        "alpha_2_code": "CW",
+        "alpha_3_code": "CUW",
+        "en_short_name": "Cura\u00e7ao",
+        "nationality": "Cura\u00e7aoan"
+    },
+    {
+        "num_code": "196",
+        "alpha_2_code": "CY",
+        "alpha_3_code": "CYP",
+        "en_short_name": "Cyprus",
+        "nationality": "Cypriot"
+    },
+    {
+        "num_code": "203",
+        "alpha_2_code": "CZ",
+        "alpha_3_code": "CZE",
+        "en_short_name": "Czech Republic",
+        "nationality": "Czech"
+    },
+    {
+        "num_code": "208",
+        "alpha_2_code": "DK",
+        "alpha_3_code": "DNK",
+        "en_short_name": "Denmark",
+        "nationality": "Danish"
+    },
+    {
+        "num_code": "262",
+        "alpha_2_code": "DJ",
+        "alpha_3_code": "DJI",
+        "en_short_name": "Djibouti",
+        "nationality": "Djiboutian"
+    },
+    {
+        "num_code": "212",
+        "alpha_2_code": "DM",
+        "alpha_3_code": "DMA",
+        "en_short_name": "Dominica",
+        "nationality": "Dominican"
+    },
+    {
+        "num_code": "214",
+        "alpha_2_code": "DO",
+        "alpha_3_code": "DOM",
+        "en_short_name": "Dominican Republic",
+        "nationality": "Dominican"
+    },
+    {
+        "num_code": "218",
+        "alpha_2_code": "EC",
+        "alpha_3_code": "ECU",
+        "en_short_name": "Ecuador",
+        "nationality": "Ecuadorian"
+    },
+    {
+        "num_code": "818",
+        "alpha_2_code": "EG",
+        "alpha_3_code": "EGY",
+        "en_short_name": "Egypt",
+        "nationality": "Egyptian"
+    },
+    {
+        "num_code": "222",
+        "alpha_2_code": "SV",
+        "alpha_3_code": "SLV",
+        "en_short_name": "El Salvador",
+        "nationality": "Salvadoran"
+    },
+    {
+        "num_code": "226",
+        "alpha_2_code": "GQ",
+        "alpha_3_code": "GNQ",
+        "en_short_name": "Equatorial Guinea",
+        "nationality": "Equatorial Guinean, Equatoguinean"
+    },
+    {
+        "num_code": "232",
+        "alpha_2_code": "ER",
+        "alpha_3_code": "ERI",
+        "en_short_name": "Eritrea",
+        "nationality": "Eritrean"
+    },
+    {
+        "num_code": "233",
+        "alpha_2_code": "EE",
+        "alpha_3_code": "EST",
+        "en_short_name": "Estonia",
+        "nationality": "Estonian"
+    },
+    {
+        "num_code": "231",
+        "alpha_2_code": "ET",
+        "alpha_3_code": "ETH",
+        "en_short_name": "Ethiopia",
+        "nationality": "Ethiopian"
+    },
+    {
+        "num_code": "238",
+        "alpha_2_code": "FK",
+        "alpha_3_code": "FLK",
+        "en_short_name": "Falkland Islands (Malvinas)",
+        "nationality": "Falkland Island"
+    },
+    {
+        "num_code": "234",
+        "alpha_2_code": "FO",
+        "alpha_3_code": "FRO",
+        "en_short_name": "Faroe Islands",
+        "nationality": "Faroese"
+    },
+    {
+        "num_code": "242",
+        "alpha_2_code": "FJ",
+        "alpha_3_code": "FJI",
+        "en_short_name": "Fiji",
+        "nationality": "Fijian"
+    },
+    {
+        "num_code": "246",
+        "alpha_2_code": "FI",
+        "alpha_3_code": "FIN",
+        "en_short_name": "Finland",
+        "nationality": "Finnish"
+    },
+    {
+        "num_code": "250",
+        "alpha_2_code": "FR",
+        "alpha_3_code": "FRA",
+        "en_short_name": "France",
+        "nationality": "French"
+    },
+    {
+        "num_code": "254",
+        "alpha_2_code": "GF",
+        "alpha_3_code": "GUF",
+        "en_short_name": "French Guiana",
+        "nationality": "French Guianese"
+    },
+    {
+        "num_code": "258",
+        "alpha_2_code": "PF",
+        "alpha_3_code": "PYF",
+        "en_short_name": "French Polynesia",
+        "nationality": "French Polynesian"
+    },
+    {
+        "num_code": "260",
+        "alpha_2_code": "TF",
+        "alpha_3_code": "ATF",
+        "en_short_name": "French Southern Territories",
+        "nationality": "French Southern Territories"
+    },
+    {
+        "num_code": "266",
+        "alpha_2_code": "GA",
+        "alpha_3_code": "GAB",
+        "en_short_name": "Gabon",
+        "nationality": "Gabonese"
+    },
+    {
+        "num_code": "270",
+        "alpha_2_code": "GM",
+        "alpha_3_code": "GMB",
+        "en_short_name": "Gambia",
+        "nationality": "Gambian"
+    },
+    {
+        "num_code": "268",
+        "alpha_2_code": "GE",
+        "alpha_3_code": "GEO",
+        "en_short_name": "Georgia",
+        "nationality": "Georgian"
+    },
+    {
+        "num_code": "276",
+        "alpha_2_code": "DE",
+        "alpha_3_code": "DEU",
+        "en_short_name": "Germany",
+        "nationality": "German"
+    },
+    {
+        "num_code": "288",
+        "alpha_2_code": "GH",
+        "alpha_3_code": "GHA",
+        "en_short_name": "Ghana",
+        "nationality": "Ghanaian"
+    },
+    {
+        "num_code": "292",
+        "alpha_2_code": "GI",
+        "alpha_3_code": "GIB",
+        "en_short_name": "Gibraltar",
+        "nationality": "Gibraltar"
+    },
+    {
+        "num_code": "300",
+        "alpha_2_code": "GR",
+        "alpha_3_code": "GRC",
+        "en_short_name": "Greece",
+        "nationality": "Greek, Hellenic"
+    },
+    {
+        "num_code": "304",
+        "alpha_2_code": "GL",
+        "alpha_3_code": "GRL",
+        "en_short_name": "Greenland",
+        "nationality": "Greenlandic"
+    },
+    {
+        "num_code": "308",
+        "alpha_2_code": "GD",
+        "alpha_3_code": "GRD",
+        "en_short_name": "Grenada",
+        "nationality": "Grenadian"
+    },
+    {
+        "num_code": "312",
+        "alpha_2_code": "GP",
+        "alpha_3_code": "GLP",
+        "en_short_name": "Guadeloupe",
+        "nationality": "Guadeloupe"
+    },
+    {
+        "num_code": "316",
+        "alpha_2_code": "GU",
+        "alpha_3_code": "GUM",
+        "en_short_name": "Guam",
+        "nationality": "Guamanian, Guambat"
+    },
+    {
+        "num_code": "320",
+        "alpha_2_code": "GT",
+        "alpha_3_code": "GTM",
+        "en_short_name": "Guatemala",
+        "nationality": "Guatemalan"
+    },
+    {
+        "num_code": "831",
+        "alpha_2_code": "GG",
+        "alpha_3_code": "GGY",
+        "en_short_name": "Guernsey",
+        "nationality": "Channel Island"
+    },
+    {
+        "num_code": "324",
+        "alpha_2_code": "GN",
+        "alpha_3_code": "GIN",
+        "en_short_name": "Guinea",
+        "nationality": "Guinean"
+    },
+    {
+        "num_code": "624",
+        "alpha_2_code": "GW",
+        "alpha_3_code": "GNB",
+        "en_short_name": "Guinea-Bissau",
+        "nationality": "Bissau-Guinean"
+    },
+    {
+        "num_code": "328",
+        "alpha_2_code": "GY",
+        "alpha_3_code": "GUY",
+        "en_short_name": "Guyana",
+        "nationality": "Guyanese"
+    },
+    {
+        "num_code": "332",
+        "alpha_2_code": "HT",
+        "alpha_3_code": "HTI",
+        "en_short_name": "Haiti",
+        "nationality": "Haitian"
+    },
+    {
+        "num_code": "334",
+        "alpha_2_code": "HM",
+        "alpha_3_code": "HMD",
+        "en_short_name": "Heard Island and McDonald Islands",
+        "nationality": "Heard Island or McDonald Islands"
+    },
+    {
+        "num_code": "336",
+        "alpha_2_code": "VA",
+        "alpha_3_code": "VAT",
+        "en_short_name": "Vatican City State",
+        "nationality": "Vatican"
+    },
+    {
+        "num_code": "340",
+        "alpha_2_code": "HN",
+        "alpha_3_code": "HND",
+        "en_short_name": "Honduras",
+        "nationality": "Honduran"
+    },
+    {
+        "num_code": "344",
+        "alpha_2_code": "HK",
+        "alpha_3_code": "HKG",
+        "en_short_name": "Hong Kong",
+        "nationality": "Hong Kong, Hong Kongese"
+    },
+    {
+        "num_code": "348",
+        "alpha_2_code": "HU",
+        "alpha_3_code": "HUN",
+        "en_short_name": "Hungary",
+        "nationality": "Hungarian, Magyar"
+    },
+    {
+        "num_code": "352",
+        "alpha_2_code": "IS",
+        "alpha_3_code": "ISL",
+        "en_short_name": "Iceland",
+        "nationality": "Icelandic"
+    },
+    {
+        "num_code": "356",
+        "alpha_2_code": "IN",
+        "alpha_3_code": "IND",
+        "en_short_name": "India",
+        "nationality": "Indian"
+    },
+    {
+        "num_code": "360",
+        "alpha_2_code": "ID",
+        "alpha_3_code": "IDN",
+        "en_short_name": "Indonesia",
+        "nationality": "Indonesian"
+    },
+    {
+        "num_code": "364",
+        "alpha_2_code": "IR",
+        "alpha_3_code": "IRN",
+        "en_short_name": "Iran",
+        "nationality": "Iranian, Persian"
+    },
+    {
+        "num_code": "368",
+        "alpha_2_code": "IQ",
+        "alpha_3_code": "IRQ",
+        "en_short_name": "Iraq",
+        "nationality": "Iraqi"
+    },
+    {
+        "num_code": "372",
+        "alpha_2_code": "IE",
+        "alpha_3_code": "IRL",
+        "en_short_name": "Ireland",
+        "nationality": "Irish"
+    },
+    {
+        "num_code": "833",
+        "alpha_2_code": "IM",
+        "alpha_3_code": "IMN",
+        "en_short_name": "Isle of Man",
+        "nationality": "Manx"
+    },
+    {
+        "num_code": "376",
+        "alpha_2_code": "IL",
+        "alpha_3_code": "ISR",
+        "en_short_name": "Israel",
+        "nationality": "Israeli"
+    },
+    {
+        "num_code": "380",
+        "alpha_2_code": "IT",
+        "alpha_3_code": "ITA",
+        "en_short_name": "Italy",
+        "nationality": "Italian"
+    },
+    {
+        "num_code": "388",
+        "alpha_2_code": "JM",
+        "alpha_3_code": "JAM",
+        "en_short_name": "Jamaica",
+        "nationality": "Jamaican"
+    },
+    {
+        "num_code": "392",
+        "alpha_2_code": "JP",
+        "alpha_3_code": "JPN",
+        "en_short_name": "Japan",
+        "nationality": "Japanese"
+    },
+    {
+        "num_code": "832",
+        "alpha_2_code": "JE",
+        "alpha_3_code": "JEY",
+        "en_short_name": "Jersey",
+        "nationality": "Channel Island"
+    },
+    {
+        "num_code": "400",
+        "alpha_2_code": "JO",
+        "alpha_3_code": "JOR",
+        "en_short_name": "Jordan",
+        "nationality": "Jordanian"
+    },
+    {
+        "num_code": "398",
+        "alpha_2_code": "KZ",
+        "alpha_3_code": "KAZ",
+        "en_short_name": "Kazakhstan",
+        "nationality": "Kazakhstani, Kazakh"
+    },
+    {
+        "num_code": "404",
+        "alpha_2_code": "KE",
+        "alpha_3_code": "KEN",
+        "en_short_name": "Kenya",
+        "nationality": "Kenyan"
+    },
+    {
+        "num_code": "296",
+        "alpha_2_code": "KI",
+        "alpha_3_code": "KIR",
+        "en_short_name": "Kiribati",
+        "nationality": "I-Kiribati"
+    },
+    {
+        "num_code": "408",
+        "alpha_2_code": "KP",
+        "alpha_3_code": "PRK",
+        "en_short_name": "Korea (Democratic People's Republic of)",
+        "nationality": "North Korean"
+    },
+    {
+        "num_code": "410",
+        "alpha_2_code": "KR",
+        "alpha_3_code": "KOR",
+        "en_short_name": "Korea (Republic of)",
+        "nationality": "South Korean"
+    },
+    {
+        "num_code": "414",
+        "alpha_2_code": "KW",
+        "alpha_3_code": "KWT",
+        "en_short_name": "Kuwait",
+        "nationality": "Kuwaiti"
+    },
+    {
+        "num_code": "417",
+        "alpha_2_code": "KG",
+        "alpha_3_code": "KGZ",
+        "en_short_name": "Kyrgyzstan",
+        "nationality": "Kyrgyzstani, Kyrgyz, Kirgiz, Kirghiz"
+    },
+    {
+        "num_code": "418",
+        "alpha_2_code": "LA",
+        "alpha_3_code": "LAO",
+        "en_short_name": "Lao People's Democratic Republic",
+        "nationality": "Lao, Laotian"
+    },
+    {
+        "num_code": "428",
+        "alpha_2_code": "LV",
+        "alpha_3_code": "LVA",
+        "en_short_name": "Latvia",
+        "nationality": "Latvian"
+    },
+    {
+        "num_code": "422",
+        "alpha_2_code": "LB",
+        "alpha_3_code": "LBN",
+        "en_short_name": "Lebanon",
+        "nationality": "Lebanese"
+    },
+    {
+        "num_code": "426",
+        "alpha_2_code": "LS",
+        "alpha_3_code": "LSO",
+        "en_short_name": "Lesotho",
+        "nationality": "Basotho"
+    },
+    {
+        "num_code": "430",
+        "alpha_2_code": "LR",
+        "alpha_3_code": "LBR",
+        "en_short_name": "Liberia",
+        "nationality": "Liberian"
+    },
+    {
+        "num_code": "434",
+        "alpha_2_code": "LY",
+        "alpha_3_code": "LBY",
+        "en_short_name": "Libya",
+        "nationality": "Libyan"
+    },
+    {
+        "num_code": "438",
+        "alpha_2_code": "LI",
+        "alpha_3_code": "LIE",
+        "en_short_name": "Liechtenstein",
+        "nationality": "Liechtenstein"
+    },
+    {
+        "num_code": "440",
+        "alpha_2_code": "LT",
+        "alpha_3_code": "LTU",
+        "en_short_name": "Lithuania",
+        "nationality": "Lithuanian"
+    },
+    {
+        "num_code": "442",
+        "alpha_2_code": "LU",
+        "alpha_3_code": "LUX",
+        "en_short_name": "Luxembourg",
+        "nationality": "Luxembourg, Luxembourgish"
+    },
+    {
+        "num_code": "446",
+        "alpha_2_code": "MO",
+        "alpha_3_code": "MAC",
+        "en_short_name": "Macao",
+        "nationality": "Macanese, Chinese"
+    },
+    {
+        "num_code": "807",
+        "alpha_2_code": "MK",
+        "alpha_3_code": "MKD",
+        "en_short_name": "Macedonia (the former Yugoslav Republic of)",
+        "nationality": "Macedonian"
+    },
+    {
+        "num_code": "450",
+        "alpha_2_code": "MG",
+        "alpha_3_code": "MDG",
+        "en_short_name": "Madagascar",
+        "nationality": "Malagasy"
+    },
+    {
+        "num_code": "454",
+        "alpha_2_code": "MW",
+        "alpha_3_code": "MWI",
+        "en_short_name": "Malawi",
+        "nationality": "Malawian"
+    },
+    {
+        "num_code": "458",
+        "alpha_2_code": "MY",
+        "alpha_3_code": "MYS",
+        "en_short_name": "Malaysia",
+        "nationality": "Malaysian"
+    },
+    {
+        "num_code": "462",
+        "alpha_2_code": "MV",
+        "alpha_3_code": "MDV",
+        "en_short_name": "Maldives",
+        "nationality": "Maldivian"
+    },
+    {
+        "num_code": "466",
+        "alpha_2_code": "ML",
+        "alpha_3_code": "MLI",
+        "en_short_name": "Mali",
+        "nationality": "Malian, Malinese"
+    },
+    {
+        "num_code": "470",
+        "alpha_2_code": "MT",
+        "alpha_3_code": "MLT",
+        "en_short_name": "Malta",
+        "nationality": "Maltese"
+    },
+    {
+        "num_code": "584",
+        "alpha_2_code": "MH",
+        "alpha_3_code": "MHL",
+        "en_short_name": "Marshall Islands",
+        "nationality": "Marshallese"
+    },
+    {
+        "num_code": "474",
+        "alpha_2_code": "MQ",
+        "alpha_3_code": "MTQ",
+        "en_short_name": "Martinique",
+        "nationality": "Martiniquais, Martinican"
+    },
+    {
+        "num_code": "478",
+        "alpha_2_code": "MR",
+        "alpha_3_code": "MRT",
+        "en_short_name": "Mauritania",
+        "nationality": "Mauritanian"
+    },
+    {
+        "num_code": "480",
+        "alpha_2_code": "MU",
+        "alpha_3_code": "MUS",
+        "en_short_name": "Mauritius",
+        "nationality": "Mauritian"
+    },
+    {
+        "num_code": "175",
+        "alpha_2_code": "YT",
+        "alpha_3_code": "MYT",
+        "en_short_name": "Mayotte",
+        "nationality": "Mahoran"
+    },
+    {
+        "num_code": "484",
+        "alpha_2_code": "MX",
+        "alpha_3_code": "MEX",
+        "en_short_name": "Mexico",
+        "nationality": "Mexican"
+    },
+    {
+        "num_code": "583",
+        "alpha_2_code": "FM",
+        "alpha_3_code": "FSM",
+        "en_short_name": "Micronesia (Federated States of)",
+        "nationality": "Micronesian"
+    },
+    {
+        "num_code": "498",
+        "alpha_2_code": "MD",
+        "alpha_3_code": "MDA",
+        "en_short_name": "Moldova (Republic of)",
+        "nationality": "Moldovan"
+    },
+    {
+        "num_code": "492",
+        "alpha_2_code": "MC",
+        "alpha_3_code": "MCO",
+        "en_short_name": "Monaco",
+        "nationality": "Mon\u00e9gasque, Monacan"
+    },
+    {
+        "num_code": "496",
+        "alpha_2_code": "MN",
+        "alpha_3_code": "MNG",
+        "en_short_name": "Mongolia",
+        "nationality": "Mongolian"
+    },
+    {
+        "num_code": "499",
+        "alpha_2_code": "ME",
+        "alpha_3_code": "MNE",
+        "en_short_name": "Montenegro",
+        "nationality": "Montenegrin"
+    },
+    {
+        "num_code": "500",
+        "alpha_2_code": "MS",
+        "alpha_3_code": "MSR",
+        "en_short_name": "Montserrat",
+        "nationality": "Montserratian"
+    },
+    {
+        "num_code": "504",
+        "alpha_2_code": "MA",
+        "alpha_3_code": "MAR",
+        "en_short_name": "Morocco",
+        "nationality": "Moroccan"
+    },
+    {
+        "num_code": "508",
+        "alpha_2_code": "MZ",
+        "alpha_3_code": "MOZ",
+        "en_short_name": "Mozambique",
+        "nationality": "Mozambican"
+    },
+    {
+        "num_code": "104",
+        "alpha_2_code": "MM",
+        "alpha_3_code": "MMR",
+        "en_short_name": "Myanmar",
+        "nationality": "Burmese"
+    },
+    {
+        "num_code": "516",
+        "alpha_2_code": "NA",
+        "alpha_3_code": "NAM",
+        "en_short_name": "Namibia",
+        "nationality": "Namibian"
+    },
+    {
+        "num_code": "520",
+        "alpha_2_code": "NR",
+        "alpha_3_code": "NRU",
+        "en_short_name": "Nauru",
+        "nationality": "Nauruan"
+    },
+    {
+        "num_code": "524",
+        "alpha_2_code": "NP",
+        "alpha_3_code": "NPL",
+        "en_short_name": "Nepal",
+        "nationality": "Nepali, Nepalese"
+    },
+    {
+        "num_code": "528",
+        "alpha_2_code": "NL",
+        "alpha_3_code": "NLD",
+        "en_short_name": "Netherlands",
+        "nationality": "Dutch, Netherlandic"
+    },
+    {
+        "num_code": "540",
+        "alpha_2_code": "NC",
+        "alpha_3_code": "NCL",
+        "en_short_name": "New Caledonia",
+        "nationality": "New Caledonian"
+    },
+    {
+        "num_code": "554",
+        "alpha_2_code": "NZ",
+        "alpha_3_code": "NZL",
+        "en_short_name": "New Zealand",
+        "nationality": "New Zealand, NZ"
+    },
+    {
+        "num_code": "558",
+        "alpha_2_code": "NI",
+        "alpha_3_code": "NIC",
+        "en_short_name": "Nicaragua",
+        "nationality": "Nicaraguan"
+    },
+    {
+        "num_code": "562",
+        "alpha_2_code": "NE",
+        "alpha_3_code": "NER",
+        "en_short_name": "Niger",
+        "nationality": "Nigerien"
+    },
+    {
+        "num_code": "566",
+        "alpha_2_code": "NG",
+        "alpha_3_code": "NGA",
+        "en_short_name": "Nigeria",
+        "nationality": "Nigerian"
+    },
+    {
+        "num_code": "570",
+        "alpha_2_code": "NU",
+        "alpha_3_code": "NIU",
+        "en_short_name": "Niue",
+        "nationality": "Niuean"
+    },
+    {
+        "num_code": "574",
+        "alpha_2_code": "NF",
+        "alpha_3_code": "NFK",
+        "en_short_name": "Norfolk Island",
+        "nationality": "Norfolk Island"
+    },
+    {
+        "num_code": "580",
+        "alpha_2_code": "MP",
+        "alpha_3_code": "MNP",
+        "en_short_name": "Northern Mariana Islands",
+        "nationality": "Northern Marianan"
+    },
+    {
+        "num_code": "578",
+        "alpha_2_code": "NO",
+        "alpha_3_code": "NOR",
+        "en_short_name": "Norway",
+        "nationality": "Norwegian"
+    },
+    {
+        "num_code": "512",
+        "alpha_2_code": "OM",
+        "alpha_3_code": "OMN",
+        "en_short_name": "Oman",
+        "nationality": "Omani"
+    },
+    {
+        "num_code": "586",
+        "alpha_2_code": "PK",
+        "alpha_3_code": "PAK",
+        "en_short_name": "Pakistan",
+        "nationality": "Pakistani"
+    },
+    {
+        "num_code": "585",
+        "alpha_2_code": "PW",
+        "alpha_3_code": "PLW",
+        "en_short_name": "Palau",
+        "nationality": "Palauan"
+    },
+    {
+        "num_code": "275",
+        "alpha_2_code": "PS",
+        "alpha_3_code": "PSE",
+        "en_short_name": "Palestine, State of",
+        "nationality": "Palestinian"
+    },
+    {
+        "num_code": "591",
+        "alpha_2_code": "PA",
+        "alpha_3_code": "PAN",
+        "en_short_name": "Panama",
+        "nationality": "Panamanian"
+    },
+    {
+        "num_code": "598",
+        "alpha_2_code": "PG",
+        "alpha_3_code": "PNG",
+        "en_short_name": "Papua New Guinea",
+        "nationality": "Papua New Guinean, Papuan"
+    },
+    {
+        "num_code": "600",
+        "alpha_2_code": "PY",
+        "alpha_3_code": "PRY",
+        "en_short_name": "Paraguay",
+        "nationality": "Paraguayan"
+    },
+    {
+        "num_code": "604",
+        "alpha_2_code": "PE",
+        "alpha_3_code": "PER",
+        "en_short_name": "Peru",
+        "nationality": "Peruvian"
+    },
+    {
+        "num_code": "608",
+        "alpha_2_code": "PH",
+        "alpha_3_code": "PHL",
+        "en_short_name": "Philippines",
+        "nationality": "Philippine, Filipino"
+    },
+    {
+        "num_code": "612",
+        "alpha_2_code": "PN",
+        "alpha_3_code": "PCN",
+        "en_short_name": "Pitcairn",
+        "nationality": "Pitcairn Island"
+    },
+    {
+        "num_code": "616",
+        "alpha_2_code": "PL",
+        "alpha_3_code": "POL",
+        "en_short_name": "Poland",
+        "nationality": "Polish"
+    },
+    {
+        "num_code": "620",
+        "alpha_2_code": "PT",
+        "alpha_3_code": "PRT",
+        "en_short_name": "Portugal",
+        "nationality": "Portuguese"
+    },
+    {
+        "num_code": "630",
+        "alpha_2_code": "PR",
+        "alpha_3_code": "PRI",
+        "en_short_name": "Puerto Rico",
+        "nationality": "Puerto Rican"
+    },
+    {
+        "num_code": "634",
+        "alpha_2_code": "QA",
+        "alpha_3_code": "QAT",
+        "en_short_name": "Qatar",
+        "nationality": "Qatari"
+    },
+    {
+        "num_code": "638",
+        "alpha_2_code": "RE",
+        "alpha_3_code": "REU",
+        "en_short_name": "R\u00e9union",
+        "nationality": "R\u00e9unionese, R\u00e9unionnais"
+    },
+    {
+        "num_code": "642",
+        "alpha_2_code": "RO",
+        "alpha_3_code": "ROU",
+        "en_short_name": "Romania",
+        "nationality": "Romanian"
+    },
+    {
+        "num_code": "643",
+        "alpha_2_code": "RU",
+        "alpha_3_code": "RUS",
+        "en_short_name": "Russian Federation",
+        "nationality": "Russian"
+    },
+    {
+        "num_code": "646",
+        "alpha_2_code": "RW",
+        "alpha_3_code": "RWA",
+        "en_short_name": "Rwanda",
+        "nationality": "Rwandan"
+    },
+    {
+        "num_code": "652",
+        "alpha_2_code": "BL",
+        "alpha_3_code": "BLM",
+        "en_short_name": "Saint Barth\u00e9lemy",
+        "nationality": "Barth\u00e9lemois"
+    },
+    {
+        "num_code": "654",
+        "alpha_2_code": "SH",
+        "alpha_3_code": "SHN",
+        "en_short_name": "Saint Helena, Ascension and Tristan da Cunha",
+        "nationality": "Saint Helenian"
+    },
+    {
+        "num_code": "659",
+        "alpha_2_code": "KN",
+        "alpha_3_code": "KNA",
+        "en_short_name": "Saint Kitts and Nevis",
+        "nationality": "Kittitian or Nevisian"
+    },
+    {
+        "num_code": "662",
+        "alpha_2_code": "LC",
+        "alpha_3_code": "LCA",
+        "en_short_name": "Saint Lucia",
+        "nationality": "Saint Lucian"
+    },
+    {
+        "num_code": "663",
+        "alpha_2_code": "MF",
+        "alpha_3_code": "MAF",
+        "en_short_name": "Saint Martin (French part)",
+        "nationality": "Saint-Martinoise"
+    },
+    {
+        "num_code": "666",
+        "alpha_2_code": "PM",
+        "alpha_3_code": "SPM",
+        "en_short_name": "Saint Pierre and Miquelon",
+        "nationality": "Saint-Pierrais or Miquelonnais"
+    },
+    {
+        "num_code": "670",
+        "alpha_2_code": "VC",
+        "alpha_3_code": "VCT",
+        "en_short_name": "Saint Vincent and the Grenadines",
+        "nationality": "Saint Vincentian, Vincentian"
+    },
+    {
+        "num_code": "882",
+        "alpha_2_code": "WS",
+        "alpha_3_code": "WSM",
+        "en_short_name": "Samoa",
+        "nationality": "Samoan"
+    },
+    {
+        "num_code": "674",
+        "alpha_2_code": "SM",
+        "alpha_3_code": "SMR",
+        "en_short_name": "San Marino",
+        "nationality": "Sammarinese"
+    },
+    {
+        "num_code": "678",
+        "alpha_2_code": "ST",
+        "alpha_3_code": "STP",
+        "en_short_name": "Sao Tome and Principe",
+        "nationality": "S\u00e3o Tom\u00e9an"
+    },
+    {
+        "num_code": "682",
+        "alpha_2_code": "SA",
+        "alpha_3_code": "SAU",
+        "en_short_name": "Saudi Arabia",
+        "nationality": "Saudi, Saudi Arabian"
+    },
+    {
+        "num_code": "686",
+        "alpha_2_code": "SN",
+        "alpha_3_code": "SEN",
+        "en_short_name": "Senegal",
+        "nationality": "Senegalese"
+    },
+    {
+        "num_code": "688",
+        "alpha_2_code": "RS",
+        "alpha_3_code": "SRB",
+        "en_short_name": "Serbia",
+        "nationality": "Serbian"
+    },
+    {
+        "num_code": "690",
+        "alpha_2_code": "SC",
+        "alpha_3_code": "SYC",
+        "en_short_name": "Seychelles",
+        "nationality": "Seychellois"
+    },
+    {
+        "num_code": "694",
+        "alpha_2_code": "SL",
+        "alpha_3_code": "SLE",
+        "en_short_name": "Sierra Leone",
+        "nationality": "Sierra Leonean"
+    },
+    {
+        "num_code": "702",
+        "alpha_2_code": "SG",
+        "alpha_3_code": "SGP",
+        "en_short_name": "Singapore",
+        "nationality": "Singaporean"
+    },
+    {
+        "num_code": "534",
+        "alpha_2_code": "SX",
+        "alpha_3_code": "SXM",
+        "en_short_name": "Sint Maarten (Dutch part)",
+        "nationality": "Sint Maarten"
+    },
+    {
+        "num_code": "703",
+        "alpha_2_code": "SK",
+        "alpha_3_code": "SVK",
+        "en_short_name": "Slovakia",
+        "nationality": "Slovak"
+    },
+    {
+        "num_code": "705",
+        "alpha_2_code": "SI",
+        "alpha_3_code": "SVN",
+        "en_short_name": "Slovenia",
+        "nationality": "Slovenian, Slovene"
+    },
+    {
+        "num_code": "90",
+        "alpha_2_code": "SB",
+        "alpha_3_code": "SLB",
+        "en_short_name": "Solomon Islands",
+        "nationality": "Solomon Island"
+    },
+    {
+        "num_code": "706",
+        "alpha_2_code": "SO",
+        "alpha_3_code": "SOM",
+        "en_short_name": "Somalia",
+        "nationality": "Somali, Somalian"
+    },
+    {
+        "num_code": "710",
+        "alpha_2_code": "ZA",
+        "alpha_3_code": "ZAF",
+        "en_short_name": "South Africa",
+        "nationality": "South African"
+    },
+    {
+        "num_code": "239",
+        "alpha_2_code": "GS",
+        "alpha_3_code": "SGS",
+        "en_short_name": "South Georgia and the South Sandwich Islands",
+        "nationality": "South Georgia or South Sandwich Islands"
+    },
+    {
+        "num_code": "728",
+        "alpha_2_code": "SS",
+        "alpha_3_code": "SSD",
+        "en_short_name": "South Sudan",
+        "nationality": "South Sudanese"
+    },
+    {
+        "num_code": "724",
+        "alpha_2_code": "ES",
+        "alpha_3_code": "ESP",
+        "en_short_name": "Spain",
+        "nationality": "Spanish"
+    },
+    {
+        "num_code": "144",
+        "alpha_2_code": "LK",
+        "alpha_3_code": "LKA",
+        "en_short_name": "Sri Lanka",
+        "nationality": "Sri Lankan"
+    },
+    {
+        "num_code": "729",
+        "alpha_2_code": "SD",
+        "alpha_3_code": "SDN",
+        "en_short_name": "Sudan",
+        "nationality": "Sudanese"
+    },
+    {
+        "num_code": "740",
+        "alpha_2_code": "SR",
+        "alpha_3_code": "SUR",
+        "en_short_name": "Suriname",
+        "nationality": "Surinamese"
+    },
+    {
+        "num_code": "744",
+        "alpha_2_code": "SJ",
+        "alpha_3_code": "SJM",
+        "en_short_name": "Svalbard and Jan Mayen",
+        "nationality": "Svalbard"
+    },
+    {
+        "num_code": "748",
+        "alpha_2_code": "SZ",
+        "alpha_3_code": "SWZ",
+        "en_short_name": "Swaziland",
+        "nationality": "Swazi"
+    },
+    {
+        "num_code": "752",
+        "alpha_2_code": "SE",
+        "alpha_3_code": "SWE",
+        "en_short_name": "Sweden",
+        "nationality": "Swedish"
+    },
+    {
+        "num_code": "756",
+        "alpha_2_code": "CH",
+        "alpha_3_code": "CHE",
+        "en_short_name": "Switzerland",
+        "nationality": "Swiss"
+    },
+    {
+        "num_code": "760",
+        "alpha_2_code": "SY",
+        "alpha_3_code": "SYR",
+        "en_short_name": "Syrian Arab Republic",
+        "nationality": "Syrian"
+    },
+    {
+        "num_code": "158",
+        "alpha_2_code": "TW",
+        "alpha_3_code": "TWN",
+        "en_short_name": "Taiwan, Province of China",
+        "nationality": "Chinese, Taiwanese"
+    },
+    {
+        "num_code": "762",
+        "alpha_2_code": "TJ",
+        "alpha_3_code": "TJK",
+        "en_short_name": "Tajikistan",
+        "nationality": "Tajikistani"
+    },
+    {
+        "num_code": "834",
+        "alpha_2_code": "TZ",
+        "alpha_3_code": "TZA",
+        "en_short_name": "Tanzania, United Republic of",
+        "nationality": "Tanzanian"
+    },
+    {
+        "num_code": "764",
+        "alpha_2_code": "TH",
+        "alpha_3_code": "THA",
+        "en_short_name": "Thailand",
+        "nationality": "Thai"
+    },
+    {
+        "num_code": "626",
+        "alpha_2_code": "TL",
+        "alpha_3_code": "TLS",
+        "en_short_name": "Timor-Leste",
+        "nationality": "Timorese"
+    },
+    {
+        "num_code": "768",
+        "alpha_2_code": "TG",
+        "alpha_3_code": "TGO",
+        "en_short_name": "Togo",
+        "nationality": "Togolese"
+    },
+    {
+        "num_code": "772",
+        "alpha_2_code": "TK",
+        "alpha_3_code": "TKL",
+        "en_short_name": "Tokelau",
+        "nationality": "Tokelauan"
+    },
+    {
+        "num_code": "776",
+        "alpha_2_code": "TO",
+        "alpha_3_code": "TON",
+        "en_short_name": "Tonga",
+        "nationality": "Tongan"
+    },
+    {
+        "num_code": "780",
+        "alpha_2_code": "TT",
+        "alpha_3_code": "TTO",
+        "en_short_name": "Trinidad and Tobago",
+        "nationality": "Trinidadian or Tobagonian"
+    },
+    {
+        "num_code": "788",
+        "alpha_2_code": "TN",
+        "alpha_3_code": "TUN",
+        "en_short_name": "Tunisia",
+        "nationality": "Tunisian"
+    },
+    {
+        "num_code": "792",
+        "alpha_2_code": "TR",
+        "alpha_3_code": "TUR",
+        "en_short_name": "Turkey",
+        "nationality": "Turkish"
+    },
+    {
+        "num_code": "795",
+        "alpha_2_code": "TM",
+        "alpha_3_code": "TKM",
+        "en_short_name": "Turkmenistan",
+        "nationality": "Turkmen"
+    },
+    {
+        "num_code": "796",
+        "alpha_2_code": "TC",
+        "alpha_3_code": "TCA",
+        "en_short_name": "Turks and Caicos Islands",
+        "nationality": "Turks and Caicos Island"
+    },
+    {
+        "num_code": "798",
+        "alpha_2_code": "TV",
+        "alpha_3_code": "TUV",
+        "en_short_name": "Tuvalu",
+        "nationality": "Tuvaluan"
+    },
+    {
+        "num_code": "800",
+        "alpha_2_code": "UG",
+        "alpha_3_code": "UGA",
+        "en_short_name": "Uganda",
+        "nationality": "Ugandan"
+    },
+    {
+        "num_code": "804",
+        "alpha_2_code": "UA",
+        "alpha_3_code": "UKR",
+        "en_short_name": "Ukraine",
+        "nationality": "Ukrainian"
+    },
+    {
+        "num_code": "784",
+        "alpha_2_code": "AE",
+        "alpha_3_code": "ARE",
+        "en_short_name": "United Arab Emirates",
+        "nationality": "Emirati, Emirian, Emiri"
+    },
+    {
+        "num_code": "826",
+        "alpha_2_code": "GB",
+        "alpha_3_code": "GBR",
+        "en_short_name": "United Kingdom of Great Britain and Northern Ireland",
+        "nationality": "British, UK"
+    },
+    {
+        "num_code": "581",
+        "alpha_2_code": "UM",
+        "alpha_3_code": "UMI",
+        "en_short_name": "United States Minor Outlying Islands",
+        "nationality": "American"
+    },
+    {
+        "num_code": "840",
+        "alpha_2_code": "US",
+        "alpha_3_code": "USA",
+        "en_short_name": "United States of America",
+        "nationality": "American"
+    },
+    {
+        "num_code": "858",
+        "alpha_2_code": "UY",
+        "alpha_3_code": "URY",
+        "en_short_name": "Uruguay",
+        "nationality": "Uruguayan"
+    },
+    {
+        "num_code": "860",
+        "alpha_2_code": "UZ",
+        "alpha_3_code": "UZB",
+        "en_short_name": "Uzbekistan",
+        "nationality": "Uzbekistani, Uzbek"
+    },
+    {
+        "num_code": "548",
+        "alpha_2_code": "VU",
+        "alpha_3_code": "VUT",
+        "en_short_name": "Vanuatu",
+        "nationality": "Ni-Vanuatu, Vanuatuan"
+    },
+    {
+        "num_code": "862",
+        "alpha_2_code": "VE",
+        "alpha_3_code": "VEN",
+        "en_short_name": "Venezuela (Bolivarian Republic of)",
+        "nationality": "Venezuelan"
+    },
+    {
+        "num_code": "704",
+        "alpha_2_code": "VN",
+        "alpha_3_code": "VNM",
+        "en_short_name": "Vietnam",
+        "nationality": "Vietnamese"
+    },
+    {
+        "num_code": "92",
+        "alpha_2_code": "VG",
+        "alpha_3_code": "VGB",
+        "en_short_name": "Virgin Islands (British)",
+        "nationality": "British Virgin Island"
+    },
+    {
+        "num_code": "850",
+        "alpha_2_code": "VI",
+        "alpha_3_code": "VIR",
+        "en_short_name": "Virgin Islands (U.S.)",
+        "nationality": "U.S. Virgin Island"
+    },
+    {
+        "num_code": "876",
+        "alpha_2_code": "WF",
+        "alpha_3_code": "WLF",
+        "en_short_name": "Wallis and Futuna",
+        "nationality": "Wallis and Futuna, Wallisian or Futunan"
+    },
+    {
+        "num_code": "732",
+        "alpha_2_code": "EH",
+        "alpha_3_code": "ESH",
+        "en_short_name": "Western Sahara",
+        "nationality": "Sahrawi, Sahrawian, Sahraouian"
+    },
+    {
+        "num_code": "887",
+        "alpha_2_code": "YE",
+        "alpha_3_code": "YEM",
+        "en_short_name": "Yemen",
+        "nationality": "Yemeni"
+    },
+    {
+        "num_code": "894",
+        "alpha_2_code": "ZM",
+        "alpha_3_code": "ZMB",
+        "en_short_name": "Zambia",
+        "nationality": "Zambian"
+    },
+    {
+        "num_code": "716",
+        "alpha_2_code": "ZW",
+        "alpha_3_code": "ZWE",
+        "en_short_name": "Zimbabwe",
+        "nationality": "Zimbabwean"
+    }
+]
diff --git a/src/ducks/personal-info/index.jsx b/src/ducks/personal-info/index.jsx
new file mode 100644
index 0000000000..484f3ab314
--- /dev/null
+++ b/src/ducks/personal-info/index.jsx
@@ -0,0 +1,76 @@
+import React from 'react'
+import { useQuery } from 'cozy-client'
+import Modal, {
+  ModalContent,
+  ModalHeader
+} from 'cozy-ui/transpiled/react/Modal'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import Alerter from 'cozy-ui/transpiled/react/Alerter'
+
+import Loading from 'components/Loading'
+import Padded from 'components/Spacing/Padded'
+import PageTitle from 'components/Title/PageTitle'
+
+import PersonalInfoForm from 'ducks/personal-info/Form'
+import { myselfConn } from 'doctypes'
+
+/**
+ * Loads the myself contact and displays the form
+ * Since the form can be displayed either in a modal or in a page,
+ * the components Wrapper, Content and Header are passed as props.
+ */
+const PersonalInfo = ({ wrapperProps, Components, onSaveSuccessful }) => {
+  const { t } = useI18n()
+  const myselfCol = useQuery(myselfConn.query, myselfConn)
+
+  const handleSaveSuccessful = updatedDoc => {
+    onSaveSuccessful && onSaveSuccessful(updatedDoc)
+    Alerter.success(t('PersonalInfo.info-saved-succesfully'))
+  }
+
+  const { Wrapper, Header, Content } = Components
+
+  return (
+    <Wrapper {...wrapperProps}>
+      {myselfCol.data && myselfCol.data[0] ? (
+        <>
+          <Header>{t('PersonalInfo.modal-title')}</Header>
+          <Content>
+            <PersonalInfoForm
+              onSaveSuccessful={handleSaveSuccessful}
+              myself={myselfCol.data[0]}
+            />
+          </Content>
+        </>
+      ) : (
+        <Loading />
+      )}
+    </Wrapper>
+  )
+}
+
+const modalComponents = {
+  Wrapper: Modal,
+  Header: ModalHeader,
+  Content: ModalContent
+}
+
+const pageComponents = {
+  Wrapper: Padded,
+  Header: PageTitle,
+  Content: React.Fragment
+}
+
+export const PersonalInfoModal = ({ modalProps, ...props }) => {
+  return (
+    <PersonalInfo
+      wrapperProps={{ ...modalProps, mobileFullscreen: true }}
+      Components={modalComponents}
+      {...props}
+    />
+  )
+}
+
+export const PersonalInfoPage = ({ ...props }) => {
+  return <PersonalInfo Components={pageComponents} {...props} />
+}
diff --git a/src/locales/en.json b/src/locales/en.json
index 1bde576780..fcb0f0ff6e 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -683,6 +683,18 @@
     "generic": "My invoices"
   },
 
+  "PersonalInfo": {
+    "birthcity": "Birth city",
+    "nationality": "Nationality",
+    "save-cta": "Save information",
+    "modal-title": "Edit personal information",
+    "info-saved-succesfully": "Your personal info has been updated",
+    "info": {
+      "title": "Why is this information necessary ?",
+      "description": "To prevent money laundering and terrorism financing, MAIF has enforced strict rules on who is able to transfer money"
+    }
+  },
+
   "Transfer": {
     "nav": "Transfers",
     "page-title": "Transfer",
diff --git a/src/locales/fr.json b/src/locales/fr.json
index 48d2f35c29..87a8500c1c 100644
--- a/src/locales/fr.json
+++ b/src/locales/fr.json
@@ -694,6 +694,18 @@
     "generic": "Mes factures"
   },
 
+  "PersonalInfo": {
+    "birthcity": "Commune de naissance",
+    "nationality": "Nationalité",
+    "save-cta": "Sauver mon profil",
+    "modal-title": "Modifier mes infos personnelles",
+    "info-saved-succesfully": "Vos informations ont bien été mises à jour",
+    "info": {
+      "title": "Pourquoi ces informations vous sont demandées ?",
+      "description": "Afin de prévenir le blanchiment d'argent et le financement du terrorisme, Cozy s'est dotée d'une réglementation stricte"
+    }
+  },
+
   "Transfer": {
     "nav": "Virements",
     "page-title": "Virement",

From 13a31a472b3704c18c599faeae92757649adeef6 Mon Sep 17 00:00:00 2001
From: Patrick Browne <pt.browne@gmail.com>
Date: Thu, 23 Jul 2020 13:47:42 +0200
Subject: [PATCH 03/12] feat: Show personal info form in transfers page

If the flag('banks.transfers.need-personal-information') is set to true,
the myself contact will be fetched when the transfer page is mounted.
We check if the birth city and nationality have been filled and if they
are not filled, we display a form that edits the myself contact
---
 src/ducks/transfers/TransferPage.jsx | 164 +++++++++++++++++++--------
 src/locales/en.json                  |   4 +
 src/locales/fr.json                  |   4 +
 3 files changed, 125 insertions(+), 47 deletions(-)

diff --git a/src/ducks/transfers/TransferPage.jsx b/src/ducks/transfers/TransferPage.jsx
index dd9088fee8..9fd5045035 100644
--- a/src/ducks/transfers/TransferPage.jsx
+++ b/src/ducks/transfers/TransferPage.jsx
@@ -1,14 +1,17 @@
 import React from 'react'
 import compose from 'lodash/flowRight'
+import get from 'lodash/get'
 import { withRouter } from 'react-router'
 
+import withBreakpoints from 'cozy-ui/transpiled/react/helpers/withBreakpoints'
 import { translate, Text, Modal, useI18n } from 'cozy-ui/transpiled/react'
 import { withClient, queryConnect } from 'cozy-client'
 import Realtime from 'cozy-realtime'
 import flag from 'cozy-flags'
+import pickBy from 'lodash/pickBy'
 
 import { logException } from 'lib/sentry'
-import { recipientsConn, accountsConn } from 'doctypes'
+import { recipientsConn, accountsConn, myselfConn } from 'doctypes'
 
 import Padded from 'components/Spacing/Padded'
 import Loading from 'components/Loading'
@@ -31,6 +34,7 @@ import Password from 'ducks/transfers/steps/Password'
 import { isLoginFailed } from 'ducks/transfers/utils'
 import BarTheme from 'ducks/bar/BarTheme'
 import { isCollectionLoading, hasBeenLoaded } from 'ducks/client/utils'
+import { PersonalInfoModal, PersonalInfoPage } from 'ducks/personal-info'
 
 const THIRTY_SECONDS = 30 * 1000
 
@@ -105,6 +109,10 @@ const NoBank = () => {
   )
 }
 
+const isMyselfSufficientlyFilled = myself => {
+  return myself.birthcity && myself.birthcity !== '' && myself.nationality
+}
+
 class TransferPage extends React.Component {
   constructor(props, context) {
     super(props, context)
@@ -120,6 +128,9 @@ class TransferPage extends React.Component {
     this.handleChangePassword = this.handleChangePassword.bind(this)
     this.handleChangeLabel = this.handleChangeLabel.bind(this)
     this.handleChangeDate = this.handleChangeDate.bind(this)
+    this.handleConfirmAdditionalInfo = this.handleConfirmAdditionalInfo.bind(
+      this
+    )
     this.handleConfirm = this.handleConfirm.bind(this)
     this.handleModalDismiss = this.handleModalDismiss.bind(this)
     this.handleJobChange = this.handleJobChange.bind(this)
@@ -137,7 +148,10 @@ class TransferPage extends React.Component {
       amount: '',
       password: '',
       label: '',
-      date: new Date().toISOString().slice(0, 10)
+      date: new Date().toISOString().slice(0, 10),
+      showingPersonalInfo:
+        get(this.props, 'myself.data[0]') &&
+        !isMyselfSufficientlyFilled(this.props.myself.data[0])
     }
   }
 
@@ -158,9 +172,34 @@ class TransferPage extends React.Component {
 
   componentDidUpdate(prevProps) {
     this.ensureHasAllRecipients()
+    this.checkToShowPersonalInfoModal(prevProps)
     this.checkToUpdateSlideBasedOnRoute(prevProps)
   }
 
+  /**
+   * If the info contained in the myself contact is not sufficient,
+   * the personal info modal/page will be shown
+   */
+  checkToShowPersonalInfoModal(prevProps) {
+    const props = this.props
+    if (
+      prevProps.myself &&
+      props.myself &&
+      prevProps.myself.fetchStatus === 'loading' &&
+      props.myself.fetchStatus === 'loaded'
+    ) {
+      const myself = props.myself.data[0]
+      if (
+        !isMyselfSufficientlyFilled(myself) ||
+        flag('banks.transfers.display-personal-info-form')
+      ) {
+        this.setState({
+          showingPersonalInfo: true
+        })
+      }
+    }
+  }
+
   ensureHasAllRecipients() {
     if (
       this.props.recipients.hasMore &&
@@ -287,6 +326,10 @@ class TransferPage extends React.Component {
     this.selectSlideByName('password')
   }
 
+  handleConfirmAdditionalInfo() {
+    this.selectSlideByName('category')
+  }
+
   handleChangePassword(ev) {
     this.setState({ password: ev.target.value })
   }
@@ -329,7 +372,7 @@ class TransferPage extends React.Component {
   }
 
   render() {
-    const { recipients, accounts } = this.props
+    const { recipients, accounts, myself } = this.props
 
     const {
       category,
@@ -340,12 +383,14 @@ class TransferPage extends React.Component {
       transferState,
       password,
       label,
-      date
+      date,
+      showingPersonalInfo
     } = this.state
 
     if (
       (isCollectionLoading(recipients) && !hasBeenLoaded(recipients)) ||
-      (isCollectionLoading(accounts) && !hasBeenLoaded(accounts))
+      (isCollectionLoading(accounts) && !hasBeenLoaded(accounts)) ||
+      (myself && (isCollectionLoading(myself) && !hasBeenLoaded(myself)))
     ) {
       return (
         <Padded>
@@ -371,6 +416,12 @@ class TransferPage extends React.Component {
       accounts.data
     )
 
+    const { isMobile } = this.props.breakpoints
+    const PersonalInfoComponent = isMobile
+      ? PersonalInfoPage
+      : PersonalInfoModal
+    const personalInfoWrapperProps = isMobile ? null : { closable: false }
+
     return (
       <>
         {transferState !== null ? (
@@ -384,45 +435,57 @@ class TransferPage extends React.Component {
             )}
           </Modal>
         ) : null}
-        <Stepper currentIndex={this.state.slide} onBack={this.handleGoBack}>
-          <ChooseRecipientCategory
-            category={category}
-            onSelect={this.handleChangeCategory}
-          />
-          <ChooseBeneficiary
-            category={category}
-            beneficiary={beneficiary}
-            onSelect={this.handleSelectBeneficiary}
-            beneficiaries={beneficiaries}
-          />
-          <ChooseSenderAccount
-            account={senderAccount}
-            accounts={senderAccounts}
-            onSelect={this.handleSelectSender}
-          />
-          <ChooseAmount
-            amount={amount}
-            onChange={this.handleChangeAmount}
-            onSelect={this.handleSelectAmount}
+        {showingPersonalInfo ? (
+          <PersonalInfoComponent
+            onSaveSuccessful={updatedMyself => {
+              if (isMyselfSufficientlyFilled(updatedMyself)) {
+                this.setState({ showingPersonalInfo: false })
+              }
+            }}
+            wrapperProps={personalInfoWrapperProps}
           />
-          <Summary
-            onConfirm={this.handleConfirmSummary}
-            amount={amount}
-            beneficiary={beneficiary}
-            senderAccount={senderAccount}
-            selectSlide={this.handleSelectSlide}
-            onChangeLabel={this.handleChangeLabel}
-            onChangeDate={this.handleChangeDate}
-            label={label}
-            date={date}
-          />
-          <Password
-            onChangePassword={this.handleChangePassword}
-            onConfirm={this.handleConfirm}
-            password={password}
-            senderAccount={senderAccount}
-          />
-        </Stepper>
+        ) : null}
+        {!showingPersonalInfo || !isMobile ? (
+          <Stepper currentIndex={this.state.slide} onBack={this.handleGoBack}>
+            <ChooseRecipientCategory
+              category={category}
+              onSelect={this.handleChangeCategory}
+            />
+            <ChooseBeneficiary
+              category={category}
+              beneficiary={beneficiary}
+              onSelect={this.handleSelectBeneficiary}
+              beneficiaries={beneficiaries}
+            />
+            <ChooseSenderAccount
+              account={senderAccount}
+              accounts={senderAccounts}
+              onSelect={this.handleSelectSender}
+            />
+            <ChooseAmount
+              amount={amount}
+              onChange={this.handleChangeAmount}
+              onSelect={this.handleSelectAmount}
+            />
+            <Summary
+              onConfirm={this.handleConfirmSummary}
+              amount={amount}
+              beneficiary={beneficiary}
+              senderAccount={senderAccount}
+              selectSlide={this.handleSelectSlide}
+              onChangeLabel={this.handleChangeLabel}
+              onChangeDate={this.handleChangeDate}
+              label={label}
+              date={date}
+            />
+            <Password
+              onChangePassword={this.handleChangePassword}
+              onConfirm={this.handleConfirm}
+              password={password}
+              senderAccount={senderAccount}
+            />
+          </Stepper>
+        ) : null}
       </>
     )
   }
@@ -437,14 +500,21 @@ const barTheme = theme => Component => props => {
   )
 }
 
+const removeFalsyProperties = pickBy
 const enhance = compose(
   barTheme('primary'),
   withClient,
   withRouter,
-  queryConnect({
-    accounts: accountsConn,
-    recipients: recipientsConn
-  }),
+  withBreakpoints(),
+  queryConnect(
+    removeFalsyProperties({
+      accounts: accountsConn,
+      recipients: recipientsConn,
+      myself: flag('banks.transfers.need-personal-information')
+        ? myselfConn
+        : null
+    })
+  ),
   translate()
 )
 
diff --git a/src/locales/en.json b/src/locales/en.json
index fcb0f0ff6e..86e67b1de7 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -552,6 +552,10 @@
     "configuration": "Config.",
     "security": "Security",
     "debug": "Debug",
+    "personal-info": {
+      "title": "Personal information",
+      "edit": "Edit personal info"
+    },
     "security": {
       "title": "Security",
       "amount_blur": {
diff --git a/src/locales/fr.json b/src/locales/fr.json
index 87a8500c1c..a756a9c68a 100644
--- a/src/locales/fr.json
+++ b/src/locales/fr.json
@@ -563,6 +563,10 @@
     "groups": "Groupes",
     "configuration": "Config.",
     "debug": "Debug",
+    "personal-info": {
+      "title": "Informations personnelles",
+      "edit": "Modifier mes informations personnelles"
+    },
     "security": {
       "title": "Sécurité",
       "amount_blur": {

From 48e39e764c71f30e020cb5738ab881e328358b6f Mon Sep 17 00:00:00 2001
From: Patrick Browne <pt.browne@gmail.com>
Date: Thu, 23 Jul 2020 13:48:42 +0200
Subject: [PATCH 04/12] feat: Add a section in the configuration page to edit
 personal info

---
 src/ducks/settings/Configuration.jsx | 31 +++++++++++++++++++++++++++-
 src/locales/en.json                  |  4 ++--
 2 files changed, 32 insertions(+), 3 deletions(-)

diff --git a/src/ducks/settings/Configuration.jsx b/src/ducks/settings/Configuration.jsx
index c1a6a7cd55..5d9baa77b9 100644
--- a/src/ducks/settings/Configuration.jsx
+++ b/src/ducks/settings/Configuration.jsx
@@ -1,7 +1,9 @@
 /* global __TARGET__ */
 
 import React from 'react'
-import { translate } from 'cozy-ui/transpiled/react'
+import { translate } from 'cozy-ui/transpiled/react/I18n'
+import Button from 'cozy-ui/transpiled/react/Button'
+
 import { isCollectionLoading, hasBeenLoaded } from 'ducks/client/utils'
 import { queryConnect, withClient } from 'cozy-client'
 import { settingsConn } from 'doctypes'
@@ -22,6 +24,7 @@ import ToggleRow from 'ducks/settings/ToggleRow'
 import BalanceLowerRules from './BalanceLowerRules'
 import TransactionGreaterRules from './TransactionGreaterRules'
 
+import { PersonalInfoModal } from 'ducks/personal-info'
 import { lateHealthReimbursement } from './specs'
 
 const onToggleFlag = key => checked => {
@@ -32,6 +35,12 @@ const onToggleFlag = key => checked => {
  * Configure notifications and other features
  */
 export class Configuration extends React.Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      showPersonalInfoModal: false
+    }
+  }
   saveDocument = async doc => {
     const { client } = this.props
     await client.save(doc)
@@ -164,6 +173,26 @@ export class Configuration extends React.Component {
           </SubSection>
         </Section>
 
+        {flag('banks.transfers.need-personal-information') ? (
+          <Section title={t('Settings.personal-info.title')}>
+            <Button
+              label={t('Settings.personal-info.edit')}
+              onClick={() => this.setState({ showPersonalInfoModal: true })}
+            />
+            {this.state.showPersonalInfoModal ? (
+              <PersonalInfoModal
+                onSaveSuccessful={() => {
+                  this.setState({ showPersonalInfoModal: false })
+                }}
+                wrapperProps={{
+                  dismissAction: () =>
+                    this.setState({ showPersonalInfoModal: false })
+                }}
+              />
+            ) : null}
+          </Section>
+        ) : null}
+
         {Configuration.renderExtraItems()}
       </>
     )
diff --git a/src/locales/en.json b/src/locales/en.json
index 86e67b1de7..13bbbb02fe 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -694,8 +694,8 @@
     "modal-title": "Edit personal information",
     "info-saved-succesfully": "Your personal info has been updated",
     "info": {
-      "title": "Why is this information necessary ?",
-      "description": "To prevent money laundering and terrorism financing, MAIF has enforced strict rules on who is able to transfer money"
+      "title": "Why is this information necessary?",
+      "description": "To prevent money laundering and terrorism financing, Cozy has enforced strict rules on who is able to transfer money"
     }
   },
 

From 2c2a5cc7e232aa14100bb2f6ceaf41f1ce77be40 Mon Sep 17 00:00:00 2001
From: Patrick Browne <pt.browne@gmail.com>
Date: Thu, 23 Jul 2020 15:59:16 +0200
Subject: [PATCH 05/12] test: PersonalInfo form

---
 src/ducks/personal-info/Form.jsx       |  3 +-
 src/ducks/personal-info/index.spec.jsx | 75 ++++++++++++++++++++++++++
 src/locales/en.json                    |  1 +
 src/locales/fr.json                    |  1 +
 src/utils/sleep.js                     |  3 ++
 5 files changed, 82 insertions(+), 1 deletion(-)
 create mode 100644 src/ducks/personal-info/index.spec.jsx
 create mode 100644 src/utils/sleep.js

diff --git a/src/ducks/personal-info/Form.jsx b/src/ducks/personal-info/Form.jsx
index eddf7244ad..43aa9b6429 100644
--- a/src/ducks/personal-info/Form.jsx
+++ b/src/ducks/personal-info/Form.jsx
@@ -52,6 +52,7 @@ class PersonalInfoForm extends React.Component {
           type="text"
           name="birthcity"
           label={t('PersonalInfo.birthcity')}
+          placeholder={t('PersonalInfo.birthcity-placeholder')}
         />
         <Field
           onChange={option => this.handleChangeField('nationality', option)}
@@ -67,7 +68,7 @@ class PersonalInfoForm extends React.Component {
           disabled={saving}
           onClick={this.handleSave}
           label={t('PersonalInfo.save-cta')}
-          type="primary"
+          variant="primary"
           className="u-mt-1"
         />
       </>
diff --git a/src/ducks/personal-info/index.spec.jsx b/src/ducks/personal-info/index.spec.jsx
new file mode 100644
index 0000000000..63e02c244e
--- /dev/null
+++ b/src/ducks/personal-info/index.spec.jsx
@@ -0,0 +1,75 @@
+import React from 'react'
+import { render, fireEvent } from '@testing-library/react'
+
+import { createMockClient } from 'cozy-client/dist/mock'
+
+import sleep from 'utils/sleep'
+import AppLike from 'test/AppLike'
+import { PersonalInfoPage } from '.'
+
+describe('PersonalInfo', () => {
+  const setup = async ({ onSaveSuccessful } = {}) => {
+    const client = await createMockClient({
+      queries: {
+        myself: {
+          doctype: 'io.cozy.contacts',
+          data: [
+            {
+              _id: '1337',
+              birthcity: 'Paris'
+            }
+          ]
+        }
+      }
+    })
+    const root = render(
+      <AppLike client={client}>
+        <PersonalInfoPage onSaveSuccessful={onSaveSuccessful} />
+      </AppLike>
+    )
+
+    return { root, client }
+  }
+
+  it('should show a form', async () => {
+    const { root } = await setup()
+
+    const inp = await root.findByPlaceholderText('Where you are born')
+    await root.findByText('Birth city')
+    expect(inp.value).toBe('Paris')
+
+    await root.findByText('Nationality')
+    // TODO test nationality selectbox value
+  })
+
+  it('should save into the myself contact', async () => {
+    const onSaveSuccessful = jest.fn()
+    const { root, client } = await setup({
+      onSaveSuccessful
+    })
+
+    const inp = await root.findByPlaceholderText('Where you are born')
+
+    fireEvent.change(inp, { target: { value: 'Pau' } })
+    expect(inp.value).toBe('Pau')
+
+    const btn = await root.findByRole('button')
+    fireEvent.click(btn)
+    expect(client.save).toHaveBeenCalledWith({
+      _id: '1337',
+      _type: 'io.cozy.contacts',
+      birthcity: 'Pau',
+      id: '1337',
+      nationality: 'FR'
+    })
+
+    await sleep(0)
+    expect(onSaveSuccessful).toHaveBeenCalledWith({
+      _id: '1337',
+      _type: 'io.cozy.contacts',
+      birthcity: 'Pau',
+      id: '1337',
+      nationality: 'FR'
+    })
+  })
+})
diff --git a/src/locales/en.json b/src/locales/en.json
index 13bbbb02fe..0002634820 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -689,6 +689,7 @@
 
   "PersonalInfo": {
     "birthcity": "Birth city",
+    "birthcity-placeholder": "Where you are born",
     "nationality": "Nationality",
     "save-cta": "Save information",
     "modal-title": "Edit personal information",
diff --git a/src/locales/fr.json b/src/locales/fr.json
index a756a9c68a..e1d12873cb 100644
--- a/src/locales/fr.json
+++ b/src/locales/fr.json
@@ -700,6 +700,7 @@
 
   "PersonalInfo": {
     "birthcity": "Commune de naissance",
+    "birthcity-placeholder": "Là où vous êtes né",
     "nationality": "Nationalité",
     "save-cta": "Sauver mon profil",
     "modal-title": "Modifier mes infos personnelles",
diff --git a/src/utils/sleep.js b/src/utils/sleep.js
new file mode 100644
index 0000000000..04d842a240
--- /dev/null
+++ b/src/utils/sleep.js
@@ -0,0 +1,3 @@
+const sleep = duration => new Promise(resolve => setTimeout(resolve, duration))
+
+export default sleep

From 3de3436e26884a9cef111fccfbaa176d01bfa88a Mon Sep 17 00:00:00 2001
From: Patrick Browne <pt.browne@gmail.com>
Date: Thu, 23 Jul 2020 15:59:31 +0200
Subject: [PATCH 06/12] refactor: Use sleep from utils

---
 src/components/ModalStack.jsx      | 3 +--
 src/ducks/client/checks.js         | 3 +--
 src/ducks/client/checks.spec.js    | 3 +--
 src/utils/effects.js               | 5 +----
 test/e2e/alerts/alerts.e2e.spec.js | 3 +--
 5 files changed, 5 insertions(+), 12 deletions(-)

diff --git a/src/components/ModalStack.jsx b/src/components/ModalStack.jsx
index 65ca8e6fd5..550c415385 100644
--- a/src/components/ModalStack.jsx
+++ b/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 = {}) => {
diff --git a/src/ducks/client/checks.js b/src/ducks/client/checks.js
index df44719fa6..675c18cd6b 100644
--- a/src/ducks/client/checks.js
+++ b/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 =>
diff --git a/src/ducks/client/checks.spec.js b/src/ducks/client/checks.spec.js
index cdb6f401b6..6b1e9d5a77 100644
--- a/src/ducks/client/checks.spec.js
+++ b/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(() => {
diff --git a/src/utils/effects.js b/src/utils/effects.js
index a9809a5a8b..7e4407f5df 100644
--- a/src/utils/effects.js
+++ b/src/utils/effects.js
@@ -1,7 +1,4 @@
-const sleep = duration =>
-  new Promise(resolve => {
-    setTimeout(resolve, duration)
-  })
+import sleep from 'utils/sleep'
 
 const shakeClassName = 'u-shake'
 
diff --git a/test/e2e/alerts/alerts.e2e.spec.js b/test/e2e/alerts/alerts.e2e.spec.js
index 69c4f2aac6..3360b3b0b7 100644
--- a/test/e2e/alerts/alerts.e2e.spec.js
+++ b/test/e2e/alerts/alerts.e2e.spec.js
@@ -20,6 +20,7 @@ import {
 } from 'ducks/client/utils'
 import { runService, makeToken } from 'test/e2e/utils'
 import assert from '../../../src/utils/assert'
+import sleep from 'utils/sleep'
 
 const SOFTWARE_ID = 'banks.alerts-e2e'
 
@@ -63,8 +64,6 @@ const checkPushForScenario = async (pushServer, scenario) => {
   }
 }
 
-const sleep = duration => new Promise(resolve => setTimeout(resolve, duration))
-
 const runScenario = async (client, scenario, options) => {
   assert(client, 'No client')
   await importACHData(client, scenario.data)

From 0ea8ab39437bbc3aae531cde576bd219971f4176 Mon Sep 17 00:00:00 2001
From: Patrick Browne <pt.browne@gmail.com>
Date: Thu, 23 Jul 2020 16:46:12 +0200
Subject: [PATCH 07/12] feat: Add test for display of PersonalInfo in transfer
 page

---
 src/ducks/personal-info/index.jsx         |  6 +-
 src/ducks/transfers/TransferPage.jsx      |  9 ++-
 src/ducks/transfers/TransferPage.spec.jsx | 86 +++++++++++++++++++++--
 3 files changed, 92 insertions(+), 9 deletions(-)

diff --git a/src/ducks/personal-info/index.jsx b/src/ducks/personal-info/index.jsx
index 484f3ab314..efdebe6c35 100644
--- a/src/ducks/personal-info/index.jsx
+++ b/src/ducks/personal-info/index.jsx
@@ -61,12 +61,12 @@ const pageComponents = {
   Content: React.Fragment
 }
 
-export const PersonalInfoModal = ({ modalProps, ...props }) => {
+export const PersonalInfoModal = ({ wrapperProps, ...props }) => {
   return (
     <PersonalInfo
-      wrapperProps={{ ...modalProps, mobileFullscreen: true }}
-      Components={modalComponents}
       {...props}
+      wrapperProps={wrapperProps}
+      Components={modalComponents}
     />
   )
 }
diff --git a/src/ducks/transfers/TransferPage.jsx b/src/ducks/transfers/TransferPage.jsx
index 9fd5045035..9f7e0f376f 100644
--- a/src/ducks/transfers/TransferPage.jsx
+++ b/src/ducks/transfers/TransferPage.jsx
@@ -110,7 +110,12 @@ const NoBank = () => {
 }
 
 const isMyselfSufficientlyFilled = myself => {
-  return myself.birthcity && myself.birthcity !== '' && myself.nationality
+  return (
+    myself.birthcity &&
+    myself.birthcity !== '' &&
+    myself.nationality &&
+    myself.nationality !== ''
+  )
 }
 
 class TransferPage extends React.Component {
@@ -424,7 +429,7 @@ class TransferPage extends React.Component {
 
     return (
       <>
-        {transferState !== null ? (
+        {transferState ? (
           <Modal mobileFullscreen dismissAction={this.handleModalDismiss}>
             {transferState === 'sending' && <Loading />}
             {transferState === 'success' && (
diff --git a/src/ducks/transfers/TransferPage.spec.jsx b/src/ducks/transfers/TransferPage.spec.jsx
index f10ff2f58f..7054266989 100644
--- a/src/ducks/transfers/TransferPage.spec.jsx
+++ b/src/ducks/transfers/TransferPage.spec.jsx
@@ -1,15 +1,38 @@
 import React from 'react'
 import { shallow } from 'enzyme'
+import { render } from '@testing-library/react'
+
+import { createMockClient } from 'cozy-client/dist/mock'
+import flag from 'cozy-flags'
+
+import AppLike from 'test/AppLike'
+import fixtures from 'test/fixtures'
+
+import { accountsConn, recipientsConn, myselfConn } from 'doctypes'
 import { TransferError } from 'ducks/transfers/steps/TransferState'
-import { TransferPage } from './TransferPage'
-import fixtures from '../../../test/fixtures'
+import TransferPage, { TransferPage as DumbTransferPage } from './TransferPage'
+
 import * as transfers from './transfers'
 
+jest.mock('components/Bar', () => {
+  const MockBarCenter = ({ children }) => <div>{children}</div>
+  return {
+    BarCenter: MockBarCenter
+  }
+})
 jest.mock('./transfers')
+jest.mock('cozy-flags', () => flagName => {
+  if (flagName === 'banks.transfers.need-personal-information') {
+    return true
+  } else {
+    return false
+  }
+})
 
 const accounts = fixtures['io.cozy.bank.accounts']
 const recipients = [
   {
+    _id: 'recipient1',
     vendorAccountId: accounts[0].vendorId,
     category: 'internal',
     label: 'Dalai Lama',
@@ -25,7 +48,8 @@ describe('transfer page', () => {
 
   beforeEach(() => {
     root = shallow(
-      <TransferPage
+      <DumbTransferPage
+        breakpoints={{ isMobile: false }}
         recipients={collection(recipients)}
         accounts={collection(accounts)}
         t={t}
@@ -37,7 +61,7 @@ describe('transfer page', () => {
     jest.restoreAllMocks()
   })
 
-  it('should handle pass error to TransferError', async () => {
+  it('should pass error to TransferError', async () => {
     root.instance().setState({
       senderAccount: accounts[0],
       beneficiary: {
@@ -59,3 +83,57 @@ describe('transfer page', () => {
     expect(errorView.props().error).toBe(err)
   })
 })
+
+describe('personal info', () => {
+  const setup = ({ myselfData } = {}) => {
+    const client = createMockClient({
+      queries: {
+        [recipientsConn.as]: {
+          doctype: recipientsConn.query().doctype,
+          data: recipients
+        },
+        [accountsConn.as]: {
+          doctype: accountsConn.query().doctype,
+          data: accounts
+        },
+        [myselfConn.as]: {
+          doctype: myselfConn.query().doctype,
+          data: [
+            {
+              _id: 'myselfid1234',
+              ...myselfData
+            }
+          ]
+        }
+      }
+    })
+    const root = render(
+      <AppLike client={client}>
+        <TransferPage />
+      </AppLike>
+    )
+
+    return { root }
+  }
+
+  afterEach(() => {
+    flag('banks.transfers.need-personal-information', false)
+  })
+
+  it('should show personal info if myself contact not sufficiently filled', async () => {
+    window.innerWidth = 300 // isMobile -> true
+    const { root } = setup()
+    await root.findByText('Edit personal information')
+  })
+
+  it('should not show personal info if myself contact is sufficiently filled', async () => {
+    window.innerWidth = 300 // isMobile -> true
+    const { root } = setup({
+      myselfData: {
+        birthcity: 'Compiègne',
+        nationality: 'FR'
+      }
+    })
+    await root.findByText('Where do you want to send this transfer ?')
+  })
+})

From 927f86810724f721ecfc1ea8f57440f5cc6b7813 Mon Sep 17 00:00:00 2001
From: Patrick Browne <pt.browne@gmail.com>
Date: Fri, 24 Jul 2020 08:53:45 +0200
Subject: [PATCH 08/12] feat: Use Stack to space parts of the personal info

---
 src/ducks/personal-info/Form.jsx | 42 +++++++++++++++++---------------
 1 file changed, 23 insertions(+), 19 deletions(-)

diff --git a/src/ducks/personal-info/Form.jsx b/src/ducks/personal-info/Form.jsx
index 43aa9b6429..2c761272cc 100644
--- a/src/ducks/personal-info/Form.jsx
+++ b/src/ducks/personal-info/Form.jsx
@@ -3,6 +3,7 @@ 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'
@@ -45,23 +46,27 @@ class PersonalInfoForm extends React.Component {
     const { saving, formData } = this.state
 
     return (
-      <>
-        <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')}
-        />
+      <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}
@@ -69,9 +74,8 @@ class PersonalInfoForm extends React.Component {
           onClick={this.handleSave}
           label={t('PersonalInfo.save-cta')}
           variant="primary"
-          className="u-mt-1"
         />
-      </>
+      </Stack>
     )
   }
 

From aaebfb9d24981107ce37f5b7319ae92964afd513 Mon Sep 17 00:00:00 2001
From: Patrick Browne <pt.browne@gmail.com>
Date: Fri, 24 Jul 2020 09:03:47 +0200
Subject: [PATCH 09/12] feat: Edit permissions on contacts

Needed to modify the myself contact
---
 manifest.webapp | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/manifest.webapp b/manifest.webapp
index e9fb10c949..8ea8a338fc 100755
--- a/manifest.webapp
+++ b/manifest.webapp
@@ -249,7 +249,7 @@
     "contacts": {
       "description": "Used to link accounts to contacts",
       "type": "io.cozy.contacts",
-      "verbs": ["GET"]
+      "verbs": ["GET", "PUT", "POST"]
     }
   }
 }

From f2a1a851937a249cd295e7db7db07d8da89b3bc4 Mon Sep 17 00:00:00 2001
From: Patrick Browne <pt.browne@gmail.com>
Date: Fri, 24 Jul 2020 11:24:36 +0200
Subject: [PATCH 10/12] test: Add transfer's personal info test for desktop

---
 src/ducks/personal-info/index.jsx         |  6 +-
 src/ducks/transfers/TransferPage.spec.jsx | 68 +++++++++++++++++------
 2 files changed, 57 insertions(+), 17 deletions(-)

diff --git a/src/ducks/personal-info/index.jsx b/src/ducks/personal-info/index.jsx
index efdebe6c35..145d669d1e 100644
--- a/src/ducks/personal-info/index.jsx
+++ b/src/ducks/personal-info/index.jsx
@@ -62,10 +62,14 @@ const pageComponents = {
 }
 
 export const PersonalInfoModal = ({ wrapperProps, ...props }) => {
+  const { t } = useI18n()
   return (
     <PersonalInfo
       {...props}
-      wrapperProps={wrapperProps}
+      wrapperProps={{
+        ...wrapperProps,
+        'aria-label': t('PersonalInfo.modal-title')
+      }}
       Components={modalComponents}
     />
   )
diff --git a/src/ducks/transfers/TransferPage.spec.jsx b/src/ducks/transfers/TransferPage.spec.jsx
index 7054266989..e1eed2a5ff 100644
--- a/src/ducks/transfers/TransferPage.spec.jsx
+++ b/src/ducks/transfers/TransferPage.spec.jsx
@@ -3,7 +3,6 @@ import { shallow } from 'enzyme'
 import { render } from '@testing-library/react'
 
 import { createMockClient } from 'cozy-client/dist/mock'
-import flag from 'cozy-flags'
 
 import AppLike from 'test/AppLike'
 import fixtures from 'test/fixtures'
@@ -116,24 +115,61 @@ describe('personal info', () => {
     return { root }
   }
 
-  afterEach(() => {
-    flag('banks.transfers.need-personal-information', false)
-  })
+  describe('mobile', () => {
+    beforeEach(() => {
+      window.innerWidth = 300
+    })
 
-  it('should show personal info if myself contact not sufficiently filled', async () => {
-    window.innerWidth = 300 // isMobile -> true
-    const { root } = setup()
-    await root.findByText('Edit personal information')
+    it('should show personal info if myself contact not sufficiently filled', async () => {
+      const { root } = setup()
+      root.findByText('Edit personal information')
+
+      // Transfer stepper is hidden on mobile
+      const text = root.queryByText('Where do you want to send this transfer ?')
+      expect(text).toBe(null)
+    })
+
+    it('should not show personal info if myself contact is sufficiently filled', async () => {
+      const { root } = setup({
+        myselfData: {
+          birthcity: 'Compiègne',
+          nationality: 'FR'
+        }
+      })
+      // Personal info modal should not be shown
+      const personalInfoNode = root.queryByText('Edit personal information')
+      expect(personalInfoNode).toBe(null)
+
+      root.findByText('Where do you want to send this transfer ?')
+    })
   })
 
-  it('should not show personal info if myself contact is sufficiently filled', async () => {
-    window.innerWidth = 300 // isMobile -> true
-    const { root } = setup({
-      myselfData: {
-        birthcity: 'Compiègne',
-        nationality: 'FR'
-      }
+  describe('desktop', () => {
+    beforeEach(() => {
+      window.innerWidth = 800
+    })
+
+    it('should show personal info if myself contact not sufficiently filled', async () => {
+      const { root } = setup()
+      root.findByText('Edit personal information')
+
+      // Transfer stepper is not hidden on desktop
+      const text = root.queryByText('Where do you want to send this transfer ?')
+      expect(text).not.toBe(null)
+    })
+
+    it('should not show personal info if myself contact is sufficiently filled', async () => {
+      const { root } = setup({
+        myselfData: {
+          birthcity: 'Compiègne',
+          nationality: 'FR'
+        }
+      })
+      // Personal info modal should not be shown
+      const personalInfoNode = root.queryByText('Edit personal information')
+      expect(personalInfoNode).toBe(null)
+
+      root.findByText('Where do you want to send this transfer ?')
     })
-    await root.findByText('Where do you want to send this transfer ?')
   })
 })

From 7dfc56df7956b8c2b3e3c73ea9ef2b73b4f35335 Mon Sep 17 00:00:00 2001
From: Patrick Browne <pt.browne@gmail.com>
Date: Fri, 24 Jul 2020 11:37:49 +0200
Subject: [PATCH 11/12] fix: Remove cozy.bar's warnings during tests

We do not need the bar's API during tests
---
 test/jest.setup.js | 14 ++++++--------
 1 file changed, 6 insertions(+), 8 deletions(-)

diff --git a/test/jest.setup.js b/test/jest.setup.js
index b1c7c2a8f1..dd736081bb 100644
--- a/test/jest.setup.js
+++ b/test/jest.setup.js
@@ -18,14 +18,12 @@ configure({ adapter: new Adapter() })
 global.mount = mount
 global.shallow = shallow
 
-global.cozy = {
-  bar: {
-    BarLeft: () => null,
-    BarRight: ({ children }) => children,
-    BarCenter: () => null,
-    setTheme: () => null
-  }
-}
+jest.mock('cozy-bar/dist/cozy-bar', () => ({
+  BarLeft: () => null,
+  BarRight: ({ children }) => children,
+  BarCenter: () => null,
+  setTheme: () => null
+}))
 
 const ignoredWarnings = {
   Select: {

From 4da24033873ee95f65c3dbaf33764493504a781c Mon Sep 17 00:00:00 2001
From: Patrick Browne <pt.browne@gmail.com>
Date: Fri, 24 Jul 2020 11:44:20 +0200
Subject: [PATCH 12/12] chore: Update yarn.lock

---
 yarn.lock | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index 1c62a058ca..88f77bd68d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -12448,13 +12448,6 @@ minilog@3.1.0, minilog@^3.1.0, "minilog@https://github.com/cozy/minilog.git#mast
   dependencies:
     microee "0.0.6"
 
-"minilog@git+https://github.com/cozy/minilog.git#master":
-  version "3.1.0"
-  uid f01f7d9dfe20981177dd34b9662c2f077d818f82
-  resolved "git+https://github.com/cozy/minilog.git#f01f7d9dfe20981177dd34b9662c2f077d818f82"
-  dependencies:
-    microee "0.0.6"
-
 minimalistic-assert@^1.0.0, minimalistic-assert@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz#2e194de044626d4a10e7f7fbc00ce73e83e4d5c7"