Replace row with dialog

frontend/src/components/Dialogs/OrderDescription.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  Dialog,
+  DialogTitle,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  Button,
+  Grid,
+} from '@mui/material';
+import { Order } from '../../models';
+
+interface Props {
+  open: boolean;
+  onClose: () => void;
+  onClickBack: () => void;
+  onClickDone: () => void;
+  order: Order;
+}
+
+const OrderDescriptionDialog = ({
+  open,
+  onClose,
+  onClickBack,
+  onClickDone,
+  order,
+}: Props): React.JSX.Element => {
+  const { t } = useTranslation();
+
+  return (
+    <Dialog open={open} onClose={onClose}>
+      <DialogTitle>{t('Order description')}</DialogTitle>
+
+      <DialogContent>
+        <DialogContentText>
+          {t('{{description}}', { description: order?.description })}
+        </DialogContentText>
+      </DialogContent>
+
+      <DialogActions>
+        <Button onClick={onClickBack} autoFocus>{t('Go back')}</Button>
+        <Button onClick={onClickDone}>{t('Continue')}</Button>
+      </DialogActions>
+    </Dialog>
+  );
+};
+
+export default OrderDescriptionDialog;

frontend/src/components/Dialogs/index.ts

@@ -14,3 +14,4 @@ export { default as F2fMapDialog } from './F2fMap';
 export { default as UpdateDialog } from './Update';
 export { default as WarningDialog } from './Warning';
 export { default as DeleteRobotConfirmationDialog } from './DeleteRobotConfirmation';
+export { default as OrderDescriptionDialog } from './OrderDescription';

frontend/src/components/OrderDetails/TakeButton.tsx

@@ -21,7 +21,7 @@ import Countdown from 'react-countdown';
 import currencies from '../../../static/assets/currencies.json';
 
 import { type Order, type Info } from '../../models';
-import { ConfirmationDialog } from '../Dialogs';
+import { ConfirmationDialog, OrderDescriptionDialog } from '../Dialogs';
 import { LoadingButton } from '@mui/lab';
 import { computeSats } from '../../utils';
 import { GarageContext, type UseGarageStoreType } from '../../contexts/GarageContext';
@@ -40,9 +40,10 @@ interface TakeButtonProps {
 
 interface OpenDialogsProps {
   inactiveMaker: boolean;
+  description: boolean;
   confirmation: boolean;
 }
-const closeAll = { inactiveMaker: false, confirmation: false };
+const closeAll = { inactiveMaker: false, description: false, confirmation: false };
 
 const TakeButton = ({
   password,
@@ -117,7 +118,7 @@ const TakeButton = ({
           </Button>
           <Button
             onClick={() => {
-              setOpen({ inactiveMaker: false, confirmation: true });
+              setOpen({ inactiveMaker: false, description: true, confirmation: false });
             }}
           >
             {t('Sounds fine')}
@@ -181,9 +182,11 @@ const TakeButton = ({
 
   const onTakeOrderClicked = function (): void {
     if (currentOrder?.maker_status === 'Inactive') {
-      setOpen({ inactiveMaker: true, confirmation: false });
+      setOpen({ inactiveMaker: true, description: false, confirmation: false });
+    } else if (currentOrder?.description) {
+      setOpen({ inactiveMaker: false, description: true, confirmation: false });
     } else {
-      setOpen({ inactiveMaker: false, confirmation: true });
+      setOpen({ inactiveMaker: false, description: false, confirmation: true });
     }
   };
 
@@ -368,6 +371,14 @@ const TakeButton = ({
         <></>
       )}
 
+      <OrderDescriptionDialog
+        open={open.description}
+        onClose={() => setOpen({ ...open, description: false })}
+        onClickBack={() => setOpen({ ...open, description: false })}
+        onClickDone={() => setOpen({ ...open, description: false, confirmation: true })}
+        order={currentOrder}
+      />
+
       <ConfirmationDialog
         open={open.confirmation}
         onClose={() => {

frontend/src/components/OrderDetails/index.tsx

@@ -433,25 +433,6 @@ const OrderDetails = ({
             </ListItem>
             <Divider />
 
-            {currentOrder?.description !== undefined ? (
-              <>
-                <ListItem>
-                  <ListItemIcon>
-                    <TextSnippet />
-                  </ListItemIcon>
-
-                  <ListItemText
-                    primary={t('Description')}
-                    secondary={t('{{description}}', {
-                      description: currentOrder?.description,
-                    })}
-                  />  
-                </ListItem>
-                <Divider />
-              </>
-            ) : null}
-
-
             {/* If there is live Price and Premium data, show it. Otherwise show the order maker settings */}
             <ListItem>
               <ListItemIcon>