Enable adding new contacts

src/app/components/Toolbar/Features/Contacts/AddContact.tsx

@@ -0,0 +1,49 @@
+import { useContext } from 'react'
+import { useDispatch } from 'react-redux'
+import { useTranslation } from 'react-i18next'
+import { Box } from 'grommet/es6/components/Box'
+import { Tabs } from 'grommet/es6/components/Tabs'
+import { Tab } from 'grommet/es6/components/Tab'
+import { ResponsiveContext } from 'grommet/es6/contexts/ResponsiveContext'
+import { contactsActions } from 'app/state/contacts'
+import { Contact } from 'app/state/contacts/types'
+import { ResponsiveLayer } from '../../../ResponsiveLayer'
+import { ContactAccountForm } from './ContactAccountForm'
+
+interface AddContactProps {
+  setLayerVisibility: (isVisible: boolean) => void
+}
+
+export const AddContact = ({ setLayerVisibility }: AddContactProps) => {
+  const { t } = useTranslation()
+  const isMobile = useContext(ResponsiveContext) === 'small'
+  const dispatch = useDispatch()
+  const submitHandler = (contact: Contact) => dispatch(contactsActions.add(contact))
+
+  return (
+    <ResponsiveLayer
+      onClickOutside={() => setLayerVisibility(false)}
+      onEsc={() => setLayerVisibility(false)}
+      animation="none"
+      background="background-front"
+      modal
+      position="top"
+      margin={isMobile ? 'none' : 'xlarge'}
+    >
+      <Box margin="medium" width={isMobile ? 'auto' : '700px'}>
+        <Tabs alignControls="start">
+          <Tab title={t('toolbar.contacts.addContact', 'Add Contact')}>
+            <Box
+              gap="small"
+              pad={{ vertical: 'medium', right: 'small' }}
+              overflow={{ vertical: 'auto' }}
+              height="400px"
+            >
+              <ContactAccountForm setLayerVisibility={setLayerVisibility} submitHandler={submitHandler} />
+            </Box>
+          </Tab>
+        </Tabs>
+      </Box>
+    </ResponsiveLayer>
+  )
+}

src/app/components/Toolbar/Features/Contacts/index.tsx

@@ -1,8 +1,11 @@
+import { useState } from 'react'
 import { useSelector } from 'react-redux'
 import { useTranslation } from 'react-i18next'
 import { Box } from 'grommet/es6/components/Box'
+import { Button } from 'grommet/es6/components/Button'
 import { Inbox } from 'grommet-icons/es6/icons/Inbox'
 import { selectContactsList } from 'app/state/contacts/selectors'
+import { AddContact } from './AddContact'
 
 const ContactsListEmptyState = () => {
   const { t } = useTranslation()
@@ -16,6 +19,8 @@ const ContactsListEmptyState = () => {
 }
 
 export const Contacts = () => {
+  const { t } = useTranslation()
+  const [layerVisibility, setLayerVisibility] = useState(false)
   const contacts = useSelector(selectContactsList)
 
   return (
@@ -30,6 +35,14 @@ export const Contacts = () => {
           <ContactsListEmptyState />
         </Box>
       )}
+      <Box align="center">
+        <Button
+          primary
+          label={t('toolbar.contacts.add', 'Add contact')}
+          onClick={() => setLayerVisibility(true)}
+        />
+      </Box>
+      {layerVisibility && <AddContact setLayerVisibility={setLayerVisibility} />}
     </Box>
   )
 }

src/locales/en/translation.json

@@ -381,6 +381,8 @@
   },
   "toolbar": {
     "contacts": {
+      "add": "Add contact",
+      "addContact": "Add Contact",
       "address": "Address",
       "cancel": "Cancel",
       "name": "Name",