Fix serve summary when order partially finished. Trade summary as accordion

api/logics.py

@@ -1574,7 +1574,7 @@ class Logics:
         Summarizes a finished order. Returns a dict with
         amounts, fees, costs, etc, for buyer and seller.
         '''
-        if order.status != Order.Status.SUC:
+        if not order.status in [Order.Status.EXP, Order.Status.SUC, Order.Status.PAY,  Order.Status.FAI]:
             return False, {'bad_summary':'Order has not finished yet'}
         
         context = {}

frontend/src/components/TradeBox.js

@@ -24,6 +24,8 @@ import BoltIcon from '@mui/icons-material/Bolt';
 import LinkIcon from '@mui/icons-material/Link';
 import AccountBalanceWalletIcon from '@mui/icons-material/AccountBalanceWallet';
 import FavoriteIcon from '@mui/icons-material/Favorite';
+import RocketLaunchIcon from '@mui/icons-material/RocketLaunch';
+import RefreshIcon from '@mui/icons-material/Refresh';
 import { NewTabIcon } from "./Icons";
 
 import { getCookie } from "../utils/cookies";
@@ -1275,9 +1277,9 @@ handleRatingRobosatsChange=(e)=>{
           </Grid>
         : null}
 
-        <Grid container>
+        <Grid item container spacing={3}>
           <Grid item xs={show_renew? 6: 12} align="center">
-            <Button color='primary' onClick={() => {this.props.push('/')}}>{t("Start Again")}</Button>
+            <Button color='primary' variant="outlined" onClick={() => {this.props.push('/')}}><RocketLaunchIcon/>{t("Start Again")}</Button>
           </Grid>
 
           {show_renew ?
@@ -1285,7 +1287,7 @@ handleRatingRobosatsChange=(e)=>{
             {this.state.renewLoading ?
                 <CircularProgress/>
               :
-                <Button color='primary' onClick={this.handleRenewOrderButtonPressed}>{t("Renew Order")}</Button>
+                <Button color='primary' variant="outlined" onClick={this.handleRenewOrderButtonPressed}><RefreshIcon/>{t("Renew Order")}</Button>
             }
             </Grid>
           : null}
@@ -1299,6 +1301,7 @@ handleRatingRobosatsChange=(e)=>{
         makerSummary={this.props.data.maker_summary}
         takerSummary={this.props.data.taker_summary}
         platformSummary={this.props.data.platform_summary}
+        orderId={this.props.data.orderId}
       />
 
     </Grid>

frontend/src/components/TradeSummary.tsx

@@ -6,19 +6,24 @@ import {
     ToggleButton,
     ToggleButtonGroup,
     List,
-    Chip,
     ListItem,
     ListItemText,
     ListItemIcon,
     Grid,
-    Divider,
+    Tooltip,
+    IconButton,
+    Accordion,
+    AccordionSummary,
+    AccordionDetails,
     Typography,
 } from "@mui/material"
 import { pn } from "../utils/prettyNumbers";
+import { saveAsJson } from "../utils/saveFile";
 
 // Icons
 import FlagWithProps from "./FlagWithProps";
-import PercentIcon from '@mui/icons-material/Percent';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import DownloadIcon from '@mui/icons-material/Download';
 import AccountBalanceIcon from '@mui/icons-material/AccountBalance';
 import RouteIcon from '@mui/icons-material/Route';
 import AccountBoxIcon from '@mui/icons-material/AccountBox';
@@ -39,7 +44,7 @@ type Props = {
   makerSummary: Record<string, Item>;
   takerSummary: Record<string, Item>;
   platformSummary: Record<string, Item>;
-  bondPercent: number;
+  orderId: number;
 }
 
 const TradeSummary = ({
@@ -50,7 +55,7 @@ const TradeSummary = ({
   makerSummary,
   takerSummary,
   platformSummary,
-  bondPercent,
+  orderId,
 }: Props): JSX.Element => {
   const { t } = useTranslation();
   const [buttonValue, setButtonValue] = useState<number>(isMaker ? 0 : 2);
@@ -58,11 +63,12 @@ const TradeSummary = ({
   
   return (
     <Grid item xs={12} align="center">
-      <List>
-        <Divider>
-          <Chip label={t("Trade Summary")}/>
-        </Divider>
-      </List>
+      <Accordion defaultExpanded={true} elevation={0} sx={{width:322, position:'relative', right:8}}>
+        <AccordionSummary expandIcon={<ExpandMoreIcon sx={{width:28}} color="primary"/>}>
+          <Typography sx={{flexGrow:1}} color="text.secondary">{t("Trade Summary")}</Typography>
+        </AccordionSummary>
+        <AccordionDetails>
+            <div style={{position:'relative',left:14, display:'flex',alignItems:'center', justifyContent:'center', flexWrap:'wrap'}}>
             <ToggleButtonGroup
                 size="small" 
                 value={buttonValue} 
@@ -85,13 +91,23 @@ const TradeSummary = ({
                     &nbsp;
                     <Avatar 
                     className="smallAvatar"
-              sx={{height:24,width:24}}
+                    sx={{height:28,width:28}}
                     alt={takerNick}
                     src={window.location.origin +'/static/assets/avatars/' + takerNick + '.png'}
                         />
                 </ToggleButton>
             </ToggleButtonGroup>
-    
+            <Tooltip enterTouchDelay={250} title={t("Save trade summary as file")}>
+                    <span>
+                    <IconButton  
+                        color="primary" 
+                        onClick={()=> saveAsJson(`order${orderId}-summary.json`, {'order_id':orderId,'currency':currencyCode,'maker':makerSummary,'taker':takerSummary,'platform':platformSummary})}
+                        >
+                        <DownloadIcon sx={{width:26, height:26}}/>
+                    </IconButton>
+                    </span>
+                </Tooltip>
+                </div>
             {/* Maker/Taker Summary */}
             <div style={{display: [0,2].includes(buttonValue) ? '':'none'}}>
                 <List dense={true}>
@@ -189,6 +205,8 @@ const TradeSummary = ({
                 </ListItem>
                 </List>
             </div>
+        </AccordionDetails>
+      </Accordion>
     </Grid>
   );
 };