Add location to F2F (frontend)

frontend/src/components/Dialogs/Worldmap.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  Dialog,
+  DialogContent,
+  Divider,
+  IconButton,
+  List,
+  ListItemText,
+  ListItem,
+  ListItemIcon,
+  ListItemButton,
+  Tooltip,
+  Typography,
+} from '@mui/material';
+import SendIcon from '@mui/icons-material/Send';
+import GitHubIcon from '@mui/icons-material/GitHub';
+import TwitterIcon from '@mui/icons-material/Twitter';
+import RedditIcon from '@mui/icons-material/Reddit';
+import Flags from 'country-flag-icons/react/3x2';
+import { NostrIcon, SimplexIcon } from '../Icons';
+
+interface Props {
+  open: boolean;
+  onClose: () => void;
+}
+
+const WorldmapDialog = ({ open = false, onClose }: Props): JSX.Element => {
+  const { t } = useTranslation();
+
+  const flagProps = {
+    width: 30,
+    height: 30,
+    opacity: 0.85,
+    style: {
+      filter: 'drop-shadow(2px 2px 2px #444444)',
+    },
+  };
+
+  return (
+    <Dialog
+      open={open}
+      onClose={onClose}
+      aria-labelledby='community-dialog-title'
+      aria-describedby='community-description'
+    >
+      <DialogContent>
+        <Typography component='h5' variant='h5'>
+          {'Community'}
+        </Typography>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default WorldmapDialog;

frontend/src/components/Dialogs/index.ts

@@ -11,3 +11,4 @@ export { default as StatsDialog } from './Stats';
 export { default as EnableTelegramDialog } from './EnableTelegram';
 export { default as UpdateClientDialog } from './UpdateClient';
 export { default as NoticeDialog } from './Notice';
+export { default as WorldmapDialog } from './Worldmap';

frontend/src/components/MakerForm/MakerForm.tsx

@@ -29,7 +29,7 @@ import { type LimitList, defaultMaker } from '../../models';
 
 import { LocalizationProvider, MobileTimePicker } from '@mui/x-date-pickers';
 import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
-import { ConfirmationDialog } from '../Dialogs';
+import { ConfirmationDialog, WorldmapDialog } from '../Dialogs';
 import { apiClient } from '../../services/api';
 
 import { FlagWithProps } from '../Icons';
@@ -76,6 +76,7 @@ const MakerForm = ({
   const [currencyCode, setCurrencyCode] = useState<string>('USD');
 
   const [openDialogs, setOpenDialogs] = useState<boolean>(false);
+  const [openWorldmap, setOpenWorldmap] = useState<boolean>(false);
   const [submittingRequest, setSubmittingRequest] = useState<boolean>(false);
   const [amountRangeEnabled, setAmountRangeEnabled] = useState<boolean>(true);
 
@@ -161,7 +162,10 @@ const MakerForm = ({
     return maker.advancedOptions && amountRangeEnabled;
   }, [maker.advancedOptions, amountRangeEnabled]);
 
-  const handlePaymentMethodChange = function (paymentArray: string[]) {
+  const handlePaymentMethodChange = function (paymentArray: { name: string; icon: string }[]) {
+    if (paymentArray.some((element) => element.icon === 'cash')) {
+      setOpenWorldmap(true);
+    }
     let str = '';
     const arrayLength = paymentArray.length;
     for (let i = 0; i < arrayLength; i++) {
@@ -498,6 +502,12 @@ const MakerForm = ({
         hasRobot={robot.avatarLoaded}
         onClickGenerateRobot={onClickGenerateRobot}
       />
+      <WorldmapDialog
+        open={openWorldmap}
+        onClose={() => {
+          setOpenWorldmap(false);
+        }}
+      />
       <Collapse in={limits.list.length == 0}>
         <div style={{ display: limits.list.length == 0 ? '' : 'none' }}>
           <LinearProgress />