added pricings

package.json

@@ -58,19 +58,21 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.8.4",
-    "@material-ui/core": "^4.9.4",
+    "@material-ui/core": "^4.9.5",
     "@material-ui/icons": "^4.9.1",
+    "@material-ui/lab": "^4.0.0-alpha.45",
     "electron-squirrel-startup": "^1.0.0",
     "electron-store": "^5.1.1",
     "emoji-picker-react": "^3.1.3",
+    "flag-icon-css": "^3.4.6",
     "i18next": "^19.3.2",
     "material-ui-popup-state": "^1.5.3",
     "react": "^16.13.0",
     "react-dom": "^16.13.0",
     "react-i18next": "^11.3.3",
     "react-redux": "^7.2.0",
     "redux": "^4.0.5",
-    "sms77-client": "^1.4.0",
+    "sms77-client": "^1.4.2",
     "smshelper": "^0.1.0"
   },
   "optionalDependencies": {

src/App.tsx

@@ -5,8 +5,8 @@ import CssBaseline from '@material-ui/core/CssBaseline';
 import {ThemeProvider} from '@material-ui/core/styles';
 import {Provider} from 'react-redux';
 
-import './i18n'
-import {Layout} from './components/Layout';
+import './i18n';
+import {Layout} from './components/Layout/Layout';
 import theme from './theme';
 import {store} from './store';
 

src/assets/scss/index.scss

@@ -1 +1,3 @@
-@import '~typeface-roboto/index.css';
+@import '~typeface-roboto/index.css';
+
+@import '~flag-icon-css/css/flag-icon.min.css';

src/components/Contacts/Contact.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import TableContainer from '@material-ui/core/TableContainer';
+import Table from '@material-ui/core/Table';
+import TableBody from '@material-ui/core/TableBody';
+import TableRow from '@material-ui/core/TableRow';
+import TableCell from '@material-ui/core/TableCell';
+import {useTranslation} from 'react-i18next';
+import {Contact as IContact} from 'sms77-client';
+
+export type ContactProps = {
+    contact: IContact
+}
+
+export const Contact = ({contact}: ContactProps) => {
+    const {t} = useTranslation('contacts');
+
+    return <TableContainer style={{marginBottom: '1em'}}>
+        <Table>
+            <TableBody>
+                <TableRow>
+                    <TableCell component='th' scope='row'>
+                        {t('nick')}
+                    </TableCell>
+
+                    <TableCell align='right'>
+                        {contact.nick}
+                    </TableCell>
+                </TableRow>
+
+                <TableRow>
+                    <TableCell component='th' scope='row'>
+                        {t('email')}
+                    </TableCell>
+
+                    <TableCell align='right'>
+                        {contact.email}
+                    </TableCell>
+                </TableRow>
+
+                <TableRow>
+                    <TableCell component='th' scope='row'>
+                        {t('id')}
+                    </TableCell>
+
+                    <TableCell align='right'>
+                        {contact.id}
+                    </TableCell>
+                </TableRow>
+
+                <TableRow>
+                    <TableCell component='th' scope='row'>
+                        {t('number')}
+                    </TableCell>
+
+                    <TableCell align='right'>
+                        {contact.number}
+                    </TableCell>
+                </TableRow>
+            </TableBody>
+        </Table>
+    </TableContainer>;
+};

src/components/Contacts/Contacts.tsx

@@ -0,0 +1,69 @@
+import React, {useEffect, useState} from 'react';
+import {useTranslation} from 'react-i18next';
+import {useDispatch} from 'react-redux';
+import Sms77Client, {Contact as Sms77Contact} from 'sms77-client';
+import Button from '@material-ui/core/Button';
+import Grid from '@material-ui/core/Grid';
+
+import {Contact} from './Contact';
+import {LocalStore} from '../../util/LocalStore';
+import {addSnackbar, setNav, setTo} from '../../store/actions';
+import {notify} from '../../util/notify';
+
+export const Contacts = () => {
+    const {t} = useTranslation('contacts');
+    const dispatch = useDispatch();
+    const apiKey = LocalStore.get('options.apiKey');
+    const [contacts, setContacts] = useState<Sms77Contact[]>(LocalStore.get('contacts') as Sms77Contact[]);
+
+    useEffect(() => {
+        if ('' === apiKey) {
+            dispatch(addSnackbar(t('pleaseSetApiKey')));
+
+            dispatch(setNav('options'));
+        } else {
+            getAndStore()
+                .then()
+                .catch(e => notify(e.toString ? e.toString() : JSON.stringify(e)));
+        }
+    }, []);
+
+    const getAndStore = async () => {
+        let contacts = LocalStore.get('contacts') as Sms77Contact[];
+
+        if (!Array.isArray(contacts)) {
+            const client = new Sms77Client(apiKey as string);
+
+            contacts = await client.contacts({action: 'read', json: true,}) as Sms77Contact[];
+
+            LocalStore.set('contacts', contacts);
+
+            setContacts(contacts);
+        }
+    };
+
+    return <>
+        <div style={{display: 'flex', justifyContent: 'space-between'}}>
+            <h1 style={{display: 'inline-flex'}}>{t('contacts')}</h1>
+
+            <Button onClick={() => getAndStore()}>
+                {t('reload')}
+            </Button>
+        </div>
+
+        {
+            Array.isArray(contacts)
+                ? <Grid spacing={2} container justify='center' alignItems='center'>
+                    {contacts.map((c, i) => <Grid key={i} item md={6} lg={4}>
+                        <Button size='small' fullWidth disabled={0 === c.number.length} onClick={() => {
+                            dispatch(setTo(c.number));
+                            dispatch(setNav('send'));
+                        }} variant='outlined'>{t('send')}</Button>
+
+                        <Contact key={i} contact={c}/>
+                    </Grid>)}
+                </Grid>
+                : <p>{t('noEntries')}</p>
+        }
+    </>;
+};

src/components/CountryFlag.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import {CountryPricing} from 'sms77-client';
+
+export type CountryFlagProps = {
+    pricing: CountryPricing
+}
+
+export const CountryFlag = ({pricing}: CountryFlagProps) => {
+    const toFlag = () => pricing.countryCode
+        .replace('BL/GF/GP/M', 'FR') //TODO: add GP & GF as they have individual non-French flags?
+        .replace('YT/RE', 'YT')
+        .replace('SH, TA', 'SH')
+        .toLowerCase();
+
+    const flag = pricing.countryCode ? toFlag() : 'eu';
+
+    const className = `flag-icon flag-icon-${flag}`;
+
+    return <span className={className}/>;
+};

src/components/DateTimeUtils.tsx

@@ -11,36 +11,44 @@ export type MessageToolbarProps = {
 export const DateTimeUtils = ({onClick}: MessageToolbarProps) => {
     const {t} = useTranslation('messageToolbar');
 
-    return <PopupMenu buttonText='Date/Time' items={<>
+    return <PopupMenu buttonText='Date/Time' identifier='date-time'>
         <MenuItem onClick={() => onClick(Date.now().toString())}>
             {t('timestamp')}&nbsp;<code>Date.now().toString()</code>
-        </MenuItem>,
+        </MenuItem>
+
         <MenuItem onClick={() => onClick(new Date().toString())}>
             {t('date')}&nbsp;<code>new Date().toString()</code>
-        </MenuItem>,
+        </MenuItem>
+
         <MenuItem onClick={() => onClick(new Date().toLocaleString())}>
             {t('locale')}&nbsp;<code>new Date().toLocaleString()</code>
-        </MenuItem>,
+        </MenuItem>
+
         <MenuItem
             onClick={() => onClick(new Date().toLocaleDateString())}>
             {t('locale')} {t('date')}&nbsp;<code>new Date().toLocaleDateString()</code>
-        </MenuItem>,
+        </MenuItem>
+
         <MenuItem
             onClick={() => onClick(new Date().toLocaleTimeString())}>
             {t('locale')} {t('time')}&nbsp;
             <code>new Date().toLocaleTimeString()</code>
-        </MenuItem>,
+        </MenuItem>
+
         <MenuItem onClick={() => onClick(new Date().toDateString())}>
             {t('date')}&nbsp;<code>new Date().toDateString()</code>
-        </MenuItem>,
+        </MenuItem>
+
         <MenuItem onClick={() => onClick(new Date().toISOString())}>
             ISO&nbsp;<code>new Date().toISOString()</code>
-        </MenuItem>,
+        </MenuItem>
+
         <MenuItem onClick={() => onClick(new Date().toTimeString())}>
             {t('time')}&nbsp;<code>new Date().toTimeString()</code>
-        </MenuItem>,
+        </MenuItem>
+
         <MenuItem onClick={() => onClick(new Date().toUTCString())}>
             UTC&nbsp;<code>new Date().toUTCString()</code>
         </MenuItem>
-    </>} identifier='date-time'/>
+    </PopupMenu>;
 };

src/components/EmojiPicker.tsx

@@ -4,10 +4,8 @@ import React from 'react';
 
 import {PopupMenu} from './PopupMenu';
 
-export type EmojiPickerProps = IEmojiPickerProps
-
-export const EmojiPicker = (props: EmojiPickerProps) => <PopupMenu buttonText='Emoji' items={
+export const EmojiPicker = (props: IEmojiPickerProps) => <PopupMenu buttonText='Emoji' identifier='emoji'>
     <MenuItem>
         <Picker {...props} />
     </MenuItem>
-} identifier='emoji'/>;
+</PopupMenu>;