add setting your own country and email button

client/package-lock.json

@@ -38,6 +38,7 @@
         "react-router-dom": "^6.10.0",
         "react-scripts": "^5.0.1",
         "react-select": "^4.3.0",
+        "react-select-country-list": "^2.2.3",
         "react-swipeable-views": "^0.14.0",
         "react-tracking": "^9.3.2",
         "react-world-flags": "^1.5.1",
@@ -17335,6 +17336,11 @@
         "react-dom": "^16.8.0 || ^17.0.0"
       }
     },
+    "node_modules/react-select-country-list": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/react-select-country-list/-/react-select-country-list-2.2.3.tgz",
+      "integrity": "sha512-eRgXL613dVyJiE99yKDYLvSBKDxvIlhkmvO2DVIjdKVyUQq6kBqoMUV/2zuRIAsbRXgBGmKjeL1dxjf7zTfszg=="
+    },
     "node_modules/react-simple-code-editor": {
       "version": "0.13.1",
       "resolved": "https://registry.npmjs.org/react-simple-code-editor/-/react-simple-code-editor-0.13.1.tgz",
@@ -33467,6 +33473,11 @@
         "react-transition-group": "^4.3.0"
       }
     },
+    "react-select-country-list": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/react-select-country-list/-/react-select-country-list-2.2.3.tgz",
+      "integrity": "sha512-eRgXL613dVyJiE99yKDYLvSBKDxvIlhkmvO2DVIjdKVyUQq6kBqoMUV/2zuRIAsbRXgBGmKjeL1dxjf7zTfszg=="
+    },
     "react-simple-code-editor": {
       "version": "0.13.1",
       "resolved": "https://registry.npmjs.org/react-simple-code-editor/-/react-simple-code-editor-0.13.1.tgz",

client/package.json

@@ -37,6 +37,7 @@
     "react-router-dom": "^6.10.0",
     "react-scripts": "^5.0.1",
     "react-select": "^4.3.0",
+    "react-select-country-list": "^2.2.3",
     "react-swipeable-views": "^0.14.0",
     "react-tracking": "^9.3.2",
     "react-world-flags": "^1.5.1",

client/src/components/Buttons/LogoutButton.jsx

@@ -22,7 +22,7 @@ const useStyles = makeStyles(theme => ({
 
 const logoutRedirect = process.env.REACT_APP_LOGOUT_REDIRECT;
 
-/** Login button including logout logic */
+/** Logout button including logout logic */
 const LogoutButton = () => {
   const classes = useStyles();
   const { logout } = useAuth0();

client/src/components/Buttons/SupportButton.jsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { Button } from '@material-ui/core';
+import { Mail } from '@material-ui/icons';
+import { makeStyles } from '@material-ui/styles';
+import { useTranslation } from "react-i18next";
+import { useTracking } from "react-tracking";
+
+const useStyles = makeStyles(theme => ({
+  supportButton: {
+    marginTop: '1.7em',
+    left: '50%',
+    transform: 'translateX(-50%)',
+  },
+}));
+
+const SupportButton = () => {
+  const classes = useStyles();
+  const { t } = useTranslation();
+  const { trackEvent } = useTracking();
+
+  const handleSupport = () => {
+    trackEvent({ event: 'support-clicked' });
+    window.location.href = 'mailto:plogmannramona+emilia@gmail.com';
+  }
+
+  return (
+    <Button variant="contained" color="secondary" size="large" className={classes.supportButton} onClick={handleSupport} endIcon={<Mail />}>
+      {t('Help')}
+    </Button>
+  );
+}
+
+export default SupportButton;

client/src/components/Settings/Settings.jsx

@@ -1,10 +1,10 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import Navbar from "../Navbar";
 import { useTranslation } from "react-i18next";
 import Profile from "./Profile";
 import { Box, InputBase, MenuItem, Select, Table, TableBody, TableCell, TableRow, Typography } from '@material-ui/core';
 import { useAuth0 } from "@auth0/auth0-react";
-import { getSettingsOfUser, getUserById, updateUserSettingsForCategory } from "./settings.util";
+import { getSettingsOfUser, getUserById, updateUserMetadata, updateUserSettingsForCategory } from "./settings.util";
 import { makeStyles } from "@material-ui/styles";
 import { allLanguages } from "../../i18n";
 import { muiTableBorder, withLoginRequired } from "../util";
@@ -14,6 +14,9 @@ import ProfilePlaceholder from "./ProfilePlaceholder";
 import { useLocation, useNavigate } from "react-router-dom";
 import { ArrowForwardIos } from "@material-ui/icons";
 import { useTracking } from "react-tracking";
+import SupportButton from "../Buttons/SupportButton";
+import importedCountryList from 'react-select-country-list';
+import Flag from 'react-world-flags';
 
 const useStyles = makeStyles(theme => ({
   settings: {
@@ -50,6 +53,13 @@ const useStyles = makeStyles(theme => ({
   },
   switchSelector: {
     height: '2rem',
+  },
+  flag: {
+    flex: 1,
+    paddingRight: '10px',
+  },
+  countryName: {
+    flex: 8,
   }
 }));
 
@@ -62,6 +72,7 @@ const useStyles = makeStyles(theme => ({
  *    + manage meal categories
  *    + manage meal tags
  **/
+
 const Settings = () => {
   const classes = useStyles();
   const { t, i18n } = useTranslation();
@@ -73,6 +84,9 @@ const Settings = () => {
   const [userData, setUserData] = useState(null);
   const [/*settings*/, setSettings] = useState(null); // settings is not currently used because settings are fetched from other place but might be necessary in the future
 
+  const country = userData?.user_metadata?.countryCode ?? '';
+  const countryList = useMemo(() => importedCountryList().getData(), []);
+
   const getUser = () => {
     if (user) {
       const userId = user.sub;
@@ -117,10 +131,33 @@ const Settings = () => {
     updateLanguageInSettings(lng);
   }
 
+  const changeCountry = (newCountryCode) => {
+    const newCountryName = countryList.find(c => c.value === newCountryCode)?.label;
+    if (user) {
+      trackEvent({ event: 'change-country', oldCountry: country, newCountry: newCountryCode });
+
+      const newMetadata = {
+        ...userData.user_metadata ?? {},
+        country: newCountryName,
+        countryCode: newCountryCode,
+      }
+
+      updateUserMetadata(user.sub, newMetadata, (newUserData) => {
+        setUserData(newUserData);
+      });
+    }
+  }
+
   function getLanguageMenuItems() {
     return allLanguages.map(lang => <MenuItem key={lang.key} value={lang.key}>{lang.description}</MenuItem>);
   }
 
+  function getCountryMenuItems() {
+    return countryList.map(c => <MenuItem key={c.value} value={c.value} name={c.label}>
+      <Flag className={classes.flag} code={c.value} height={15} /><span className={classes.countryName}>{c.label}</span>
+    </MenuItem>);
+  }
+
   const goToEditProfile = () => {navigate('editProfile', { state: { userData } });};
   const goToAdvancedSettings = () => {navigate('advanced');};
 
@@ -139,6 +176,14 @@ const Settings = () => {
                 </Select>
               </TableCell>
             </TableRow>
+            <TableRow>
+              <TableCell className={classes.tableCell}><Typography className={classes.label} id="country-select-label">{t('Country')}</Typography></TableCell>
+              <TableCell className={classes.tableCell}>
+                <Select labelId="country-select-label" id="country-select" value={country} onChange={event => {changeCountry(event.target.value);}}>
+                  {getCountryMenuItems()}
+                </Select>
+              </TableCell>
+            </TableRow>
             <TableRow>
               <TableCell className={classes.buttonTableCell} colSpan={2} onClick={goToAdvancedSettings}>
                 <Box className={classes.tableCellButton}>
@@ -149,6 +194,7 @@ const Settings = () => {
             </TableRow>
           </TableBody>
         </Table>
+        <SupportButton />
         <LogoutButton />
       </Box>
     </Track>