added the ability to cancel products when still being developed

src/Corporation/ui/ProductElem.tsx

@@ -6,6 +6,7 @@ import { DiscontinueProductModal } from "./modals/DiscontinueProductModal";
 import { LimitProductProductionModal } from "./modals/LimitProductProductionModal";
 import { SellProductModal } from "./modals/SellProductModal";
 import { ProductMarketTaModal } from "./modals/ProductMarketTaModal";
+import { CancelProductModal } from "./modals/CancelProductModal";
 
 import { numeralWrapper } from "../../ui/numeralFormat";
 
@@ -32,6 +33,7 @@ export function ProductElem(props: IProductProps): React.ReactElement {
   const [sellOpen, setSellOpen] = useState(false);
   const [limitOpen, setLimitOpen] = useState(false);
   const [discontinueOpen, setDiscontinueOpen] = useState(false);
+  const [cancelOpen, setCancelOpen] = useState(false);
   const [marketTaOpen, setMarketTaOpen] = useState(false);
   const city = props.city;
   const product = props.product;
@@ -111,6 +113,13 @@ export function ProductElem(props: IProductProps): React.ReactElement {
           </Typography>
           <br />
           <Typography>{numeralWrapper.format(product.prog, "0.00")}% complete</Typography>
+          <Button onClick={() => setCancelOpen(true)}>Cancel</Button>
+          <CancelProductModal
+            product={product}
+            rerender={props.rerender}
+            open={cancelOpen}
+            onClose={() => setCancelOpen(false)}
+          />
         </>
       ) : (
         <>
@@ -171,6 +180,13 @@ export function ProductElem(props: IProductProps): React.ReactElement {
               <Typography>Est. Market Price: {numeralWrapper.formatMoney(product.pCost)}</Typography>
             </Tooltip>
           </Box>
+          <Button onClick={() => setDiscontinueOpen(true)}>Discontinue</Button>
+          <DiscontinueProductModal
+            product={product}
+            rerender={props.rerender}
+            open={discontinueOpen}
+            onClose={() => setDiscontinueOpen(false)}
+          />
         </>
       )}
 
@@ -186,14 +202,6 @@ export function ProductElem(props: IProductProps): React.ReactElement {
             open={limitOpen}
             onClose={() => setLimitOpen(false)}
           />
-          <Button onClick={() => setDiscontinueOpen(true)}>Discontinue</Button>
-
-          <DiscontinueProductModal
-            product={product}
-            rerender={props.rerender}
-            open={discontinueOpen}
-            onClose={() => setDiscontinueOpen(false)}
-          />
           {division.hasResearch("Market-TA.I") && (
             <>
               <Button onClick={() => setMarketTaOpen(true)}>Market-TA</Button>

src/Corporation/ui/modals/CancelProductModal.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+
+import { Product } from "../../Product";
+import { Modal } from "../../../ui/React/Modal";
+import { useDivision } from "../Context";
+import Typography from "@mui/material/Typography";
+import Button from "@mui/material/Button";
+
+interface IProps {
+  open: boolean;
+  onClose: () => void;
+  product: Product;
+  rerender: () => void;
+}
+
+// Create a popup that lets the player cancel a product
+export function CancelProductModal(props: IProps): React.ReactElement {
+  const division = useDivision();
+  function cancel(): void {
+    division.discontinueProduct(props.product);
+    props.onClose();
+    props.rerender();
+  }
+
+  return (
+    <Modal open={props.open} onClose={props.onClose}>
+      <Typography>
+        Are you sure you want to do this? Canceling a product removes it completely and permanently. You will receive no
+        money back by doing so
+      </Typography>
+      <Button onClick={cancel}>Cancel</Button>
+    </Modal>
+  );
+}