Order management UI

src/frontend/src/components/views/ParticipantSubmissionSummary.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { Button, Flex, Result, Space, Tag, Tooltip, Typography, theme } from "antd";
-import { CheckCircleFilled, CheckOutlined, WalletOutlined } from "@ant-design/icons";
+import { CheckCircleFilled, CheckOutlined, ClockCircleOutlined, EditOutlined } from "@ant-design/icons";
 import type { Submission } from "../../lib/types";
 
 const { Text } = Typography;
@@ -24,13 +24,16 @@ export default function ParticipantSubmissionSummary({
   savedEstimatedTotal,
   isClosed,
   onHowToPay,
+  onEdit,
 }: {
   submission: Submission | null;
   savedOrderString: string;
   savedEstimatedTotal: string | null;
   isClosed: boolean;
-  /** Shown as a "How to pay" button when payment details exist. */
+  /** Shown as a "How to pay?" link when payment details exist. */
   onHowToPay?: () => void;
+  /** Shown as the primary "Edit order" action while the order is open. */
+  onEdit?: () => void;
 }) {
   const { token } = theme.useToken();
 
@@ -49,9 +52,9 @@ export default function ParticipantSubmissionSummary({
   }
 
   const statuses = [
-    { label: "Accepted", done: submission.accepted },
-    { label: "Paid", done: submission.paid },
-    { label: "Received", done: !!submission.handed_out },
+    { label: "Accepted", done: submission.accepted, hint: "Your order has been accepted", pending: "Waiting for your order to be accepted" },
+    { label: "Paid", done: submission.paid, hint: "Your payment has been received", pending: "Payment not received yet" },
+    { label: "Received", done: !!submission.handed_out, hint: "You have received your order", pending: "Order not marked as received yet" },
   ];
 
   return (
@@ -61,16 +64,17 @@ export default function ParticipantSubmissionSummary({
           <CheckCircleFilled style={{ color: token.colorSuccess }} /> Order submitted
         </Text>
         <Flex gap={4} wrap="wrap">
-          {statuses.map(({ label, done }) => (
-            <Tag
-              key={label}
-              bordered={false}
-              color={done ? "success" : "default"}
-              icon={done ? <CheckOutlined /> : undefined}
-              style={{ marginInlineEnd: 0 }}
-            >
-              {label}
-            </Tag>
+          {statuses.map(({ label, done, hint, pending }) => (
+            <Tooltip key={label} title={done ? hint : pending}>
+              <Tag
+                bordered={false}
+                color={done ? "success" : "default"}
+                icon={done ? <CheckOutlined /> : <ClockCircleOutlined />}
+                style={{ marginInlineEnd: 0 }}
+              >
+                {label}
+              </Tag>
+            </Tooltip>
           ))}
         </Flex>
       </Flex>
@@ -79,24 +83,31 @@ export default function ParticipantSubmissionSummary({
           {savedOrderString}
         </Text>
       </Tooltip>
-      <Flex justify="space-between" align="center" wrap="wrap" gap={8}>
-        <Space size={4} direction="vertical">
-          {savedEstimatedTotal && (
+      <Space size={4} direction="vertical">
+        {savedEstimatedTotal && (
+          <Text type="secondary">
             <Tooltip title="Rough estimate based on configured item prices. Final amount may differ.">
-              <Text type="secondary">Estimated total: {savedEstimatedTotal}</Text>
+              Estimated total: {savedEstimatedTotal}
             </Tooltip>
-          )}
-          <Text type="secondary" style={{ fontSize: 12 }}>
-            {!isClosed && "You can adjust your order while it is open. "}Updated{" "}
-            {formatTimestamp(submission.updated_at)}
+            {onHowToPay && !submission.paid && (
+              <>
+                {" · "}
+                <Button type="link" size="small" onClick={onHowToPay} style={{ padding: 0, height: "auto" }}>
+                  How to pay?
+                </Button>
+              </>
+            )}
           </Text>
-        </Space>
-        {onHowToPay && !submission.paid && (
-          <Button size="small" type="primary" icon={<WalletOutlined />} onClick={onHowToPay}>
-            How to pay
-          </Button>
         )}
-      </Flex>
+        <Text type="secondary" style={{ fontSize: 12 }}>
+          Updated {formatTimestamp(submission.updated_at)}
+        </Text>
+      </Space>
+      {onEdit && !isClosed && (
+        <Button type="primary" icon={<EditOutlined />} onClick={onEdit} style={{ alignSelf: "flex-start" }}>
+          Edit order
+        </Button>
+      )}
     </Flex>
   );
 }

src/frontend/src/views/ParticipantView.tsx

@@ -4,11 +4,11 @@ import {
   Alert,
   Button,
   Card,
+  Flex,
   Form,
   Popconfirm,
   Row,
   Space,
-  Tooltip,
   Typography,
   message,
 } from "antd";
@@ -379,6 +379,11 @@ export default function ParticipantView({ orderId }: { orderId: string }) {
     }
   };
 
+  const discardChanges = () => {
+    setIsEditingSubmittedOrder(false);
+    form.resetFields();
+  };
+
   const deleteSubmission = async () => {
     if (!existingSubmission) {
       return;
@@ -497,27 +502,6 @@ export default function ParticipantView({ orderId }: { orderId: string }) {
 
           <Card
             title="Your order"
-            extra={
-              existingSubmission && !isClosed ? (
-                canShowSubmittedResult ? (
-                  <Button
-                    type="primary"
-                    onClick={() => setIsEditingSubmittedOrder(true)}
-                  >
-                    Manage order
-                  </Button>
-                ) : (
-                  <Button
-                    onClick={() => {
-                      setIsEditingSubmittedOrder(false);
-                      form.resetFields();
-                    }}
-                  >
-                    Back to Summary
-                  </Button>
-                )
-              ) : null
-            }
           >
             <Space direction="vertical" style={{ width: "100%" }}>
               {showSummaryView && (
@@ -527,6 +511,7 @@ export default function ParticipantView({ orderId }: { orderId: string }) {
                   savedEstimatedTotal={savedEstimatedTotal}
                   isClosed={isClosed}
                   onHowToPay={hasPayment ? openPaymentTab : undefined}
+                  onEdit={() => setIsEditingSubmittedOrder(true)}
                 />
               )}
               {!showSummaryView && (
@@ -558,24 +543,32 @@ export default function ParticipantView({ orderId }: { orderId: string }) {
                         draftEstimatedTotal={draftEstimatedTotal}
                       />
 
-                      <Space>
-                        <Tooltip
-                          title={
-                            existingSubmission
-                              ? "Save updates to your submission"
-                              : "Submit your order"
-                          }
-                        >
+                      <Flex justify="space-between" align="center" wrap="wrap" gap={8}>
+                        <Space>
                           <Button
                             type="primary"
                             htmlType="submit"
                             icon={<SaveOutlined />}
                             loading={submitting}
-                            disabled={isClosed}
+                            disabled={isClosed || (!!existingSubmission && !hasActiveChanges)}
                           >
-                            {existingSubmission ? "Update" : "Submit"}
+                            {existingSubmission ? "Save changes" : "Submit order"}
                           </Button>
-                        </Tooltip>
+
+                          {existingSubmission && (
+                            <Popconfirm
+                              title="Discard your changes?"
+                              okText="Discard"
+                              cancelText="Keep editing"
+                              onConfirm={discardChanges}
+                              disabled={!hasActiveChanges}
+                            >
+                              <Button onClick={hasActiveChanges ? undefined : discardChanges}>
+                                Discard
+                              </Button>
+                            </Popconfirm>
+                          )}
+                        </Space>
 
                         {existingSubmission && (
                           <Popconfirm
@@ -587,19 +580,12 @@ export default function ParticipantView({ orderId }: { orderId: string }) {
                             onConfirm={deleteSubmission}
                             disabled={isClosed}
                           >
-                            <Tooltip title="Delete your current submission">
-                              <Button
-                                danger
-                                icon={<DeleteOutlined />}
-                                loading={submitting}
-                                disabled={isClosed}
-                              >
-                                Delete
-                              </Button>
-                            </Tooltip>
+                            <Button danger type="text" icon={<DeleteOutlined />} loading={submitting} disabled={isClosed}>
+                              Delete order
+                            </Button>
                           </Popconfirm>
                         )}
-                      </Space>
+                      </Flex>
                     </>
                   )}
                 </Form>