From b6eafce56362da2cbd30083d9d96c8d4132489cc Mon Sep 17 00:00:00 2001
From: Caldwell <115591472+Caldwell-74@users.noreply.github.com>
Date: Tue, 12 Sep 2023 11:30:45 +0200
Subject: [PATCH] CORPORATION: remove TA modals and integrate into sell modal
 (#796)

---
 src/Corporation/ui/MaterialElem.tsx           | 20 ++---
 src/Corporation/ui/ProductElem.tsx            | 16 ++--
 .../ui/modals/MaterialMarketTaModal.tsx       | 84 ------------------
 .../ui/modals/ProductMarketTaModal.tsx        | 86 -------------------
 .../ui/modals/SellMaterialModal.tsx           | 51 ++++++++++-
 .../ui/modals/SellProductModal.tsx            | 56 +++++++++++-
 6 files changed, 116 insertions(+), 197 deletions(-)
 delete mode 100644 src/Corporation/ui/modals/MaterialMarketTaModal.tsx
 delete mode 100644 src/Corporation/ui/modals/ProductMarketTaModal.tsx

diff --git a/src/Corporation/ui/MaterialElem.tsx b/src/Corporation/ui/MaterialElem.tsx
index aee6110ba8..ab21e69dce 100644
--- a/src/Corporation/ui/MaterialElem.tsx
+++ b/src/Corporation/ui/MaterialElem.tsx
@@ -6,7 +6,6 @@ import { CityName, CorpUnlockName } from "@enums";
 import { Material } from "../Material";
 import { Warehouse } from "../Warehouse";
 import { ExportModal } from "./modals/ExportModal";
-import { MaterialMarketTaModal } from "./modals/MaterialMarketTaModal";
 import { SellMaterialModal } from "./modals/SellMaterialModal";
 import { PurchaseMaterialModal } from "./modals/PurchaseMaterialModal";
 import { formatBigNumber, formatCorpStat, formatMoney, formatQuality } from "../../ui/formatNumber";
@@ -29,7 +28,6 @@ export function MaterialElem(props: IMaterialProps): React.ReactElement {
   const [purchaseMaterialOpen, setPurchaseMaterialOpen] = useState(false);
   const [exportOpen, setExportOpen] = useState(false);
   const [sellMaterialOpen, setSellMaterialOpen] = useState(false);
-  const [materialMarketTaOpen, setMaterialMarketTaOpen] = useState(false);
   const [limitProductionOpen, setLimitProductionOpen] = useState(false);
 
   const warehouse = props.warehouse;
@@ -159,18 +157,12 @@ export function MaterialElem(props: IMaterialProps): React.ReactElement {
           >
             {sellButtonText}
           </Button>
-          <SellMaterialModal mat={mat} open={sellMaterialOpen} onClose={() => setSellMaterialOpen(false)} />
-          {division.hasResearch("Market-TA.I") && (
-            <>
-              <Button onClick={() => setMaterialMarketTaOpen(true)}>Market-TA</Button>
-
-              <MaterialMarketTaModal
-                mat={mat}
-                open={materialMarketTaOpen}
-                onClose={() => setMaterialMarketTaOpen(false)}
-              />
-            </>
-          )}
+          <SellMaterialModal
+            mat={mat}
+            div={division}
+            open={sellMaterialOpen}
+            onClose={() => setSellMaterialOpen(false)}
+          />
           <Button color={tutorial ? "error" : "primary"} onClick={() => setLimitProductionOpen(true)}>
             {limitMaterialButtonText}
           </Button>
diff --git a/src/Corporation/ui/ProductElem.tsx b/src/Corporation/ui/ProductElem.tsx
index 11a9c5ed92..66990c03b0 100644
--- a/src/Corporation/ui/ProductElem.tsx
+++ b/src/Corporation/ui/ProductElem.tsx
@@ -6,7 +6,6 @@ import { Product } from "../Product";
 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 { formatBigNumber, formatMoney, formatPercent } from "../../ui/formatNumber";
@@ -29,7 +28,6 @@ export function ProductElem(props: IProductProps): React.ReactElement {
   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;
 
@@ -166,7 +164,13 @@ export function ProductElem(props: IProductProps): React.ReactElement {
       {(hasUpgradeDashboard || product.finished) && (
         <>
           <Button onClick={() => setSellOpen(true)}>{sellButtonText}</Button>
-          <SellProductModal product={product} city={city} open={sellOpen} onClose={() => setSellOpen(false)} />
+          <SellProductModal
+            product={product}
+            div={division}
+            city={city}
+            open={sellOpen}
+            onClose={() => setSellOpen(false)}
+          />
           <br />
           <Button onClick={() => setLimitOpen(true)}>{limitProductionButtonText}</Button>
           <LimitProductProductionModal
@@ -175,12 +179,6 @@ export function ProductElem(props: IProductProps): React.ReactElement {
             open={limitOpen}
             onClose={() => setLimitOpen(false)}
           />
-          {division.hasResearch("Market-TA.I") && (
-            <>
-              <Button onClick={() => setMarketTaOpen(true)}>Market-TA</Button>
-              <ProductMarketTaModal product={product} open={marketTaOpen} onClose={() => setMarketTaOpen(false)} />
-            </>
-          )}
         </>
       )}
     </Paper>
diff --git a/src/Corporation/ui/modals/MaterialMarketTaModal.tsx b/src/Corporation/ui/modals/MaterialMarketTaModal.tsx
deleted file mode 100644
index fadcc76b47..0000000000
--- a/src/Corporation/ui/modals/MaterialMarketTaModal.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-import React, { useState } from "react";
-import { formatMoney } from "../../../ui/formatNumber";
-import { Material } from "../../Material";
-import { Modal } from "../../../ui/React/Modal";
-import { useDivision } from "../Context";
-import Typography from "@mui/material/Typography";
-import FormControlLabel from "@mui/material/FormControlLabel";
-import Switch from "@mui/material/Switch";
-import { useRerender } from "../../../ui/React/hooks";
-
-interface IMarketTA2Props {
-  mat: Material;
-}
-
-function MarketTA2(props: IMarketTA2Props): React.ReactElement {
-  const rerender = useRerender();
-
-  const division = useDivision();
-  if (!division.hasResearch("Market-TA.II")) return <></>;
-
-  function onMarketTA2(event: React.ChangeEvent<HTMLInputElement>): void {
-    props.mat.marketTa2 = event.target.checked;
-    rerender();
-  }
-
-  return (
-    <>
-      <Typography variant="h4">Market-TA.II</Typography>
-      <Typography>
-        If this is enabled, then this Material will automatically be sold at the optimal price such that the amount sold
-        matches the amount produced. (i.e. the highest possible price, while still ensuring that all produced materials
-        will be sold)
-      </Typography>
-      <br />
-      <FormControlLabel
-        control={<Switch checked={props.mat.marketTa2} onChange={onMarketTA2} />}
-        label={<Typography>Use Market-TA.II for Auto-Sale Price</Typography>}
-      />
-    </>
-  );
-}
-
-interface IProps {
-  open: boolean;
-  onClose: () => void;
-  mat: Material;
-}
-
-// Create a popup that lets the player use the Market TA research for Materials
-export function MaterialMarketTaModal(props: IProps): React.ReactElement {
-  const setRerender = useState(false)[1];
-  function rerender(): void {
-    setRerender((old) => !old);
-  }
-  const markupLimit = props.mat.getMarkupLimit();
-
-  function onMarketTA1(event: React.ChangeEvent<HTMLInputElement>): void {
-    props.mat.marketTa1 = event.target.checked;
-    rerender();
-  }
-
-  return (
-    <Modal open={props.open} onClose={props.onClose}>
-      <>
-        <Typography variant="h4">Market-TA.I</Typography>
-        <Typography>
-          The maximum sale price you can mark this up to is {formatMoney(props.mat.marketPrice + markupLimit)}. This
-          means that if you set the sale price higher than this, you will begin to experience a loss in number of sales
-          <br></br>
-          <br></br>
-          If this is enabled, then this Material will automatically be sold at the price identified by Market-TA.I (i.e.
-          the price shown above)
-        </Typography>
-
-        <FormControlLabel
-          control={<Switch checked={props.mat.marketTa1} onChange={onMarketTA1} />}
-          label={<Typography>Use Market-TA.I for Auto-Sale Price</Typography>}
-        />
-      </>
-
-      <MarketTA2 mat={props.mat} />
-    </Modal>
-  );
-}
diff --git a/src/Corporation/ui/modals/ProductMarketTaModal.tsx b/src/Corporation/ui/modals/ProductMarketTaModal.tsx
deleted file mode 100644
index d907f88d2b..0000000000
--- a/src/Corporation/ui/modals/ProductMarketTaModal.tsx
+++ /dev/null
@@ -1,86 +0,0 @@
-import React, { useState } from "react";
-import { formatMoney } from "../../../ui/formatNumber";
-import { Product } from "../../Product";
-import { Modal } from "../../../ui/React/Modal";
-import { useDivision } from "../Context";
-import Typography from "@mui/material/Typography";
-import FormControlLabel from "@mui/material/FormControlLabel";
-import Switch from "@mui/material/Switch";
-import { useRerender } from "../../../ui/React/hooks";
-
-interface ITa2Props {
-  product: Product;
-}
-
-function MarketTA2(props: ITa2Props): React.ReactElement {
-  const rerender = useRerender();
-
-  const division = useDivision();
-  if (!division.hasResearch("Market-TA.II")) return <></>;
-
-  function onCheckedChange(event: React.ChangeEvent<HTMLInputElement>): void {
-    props.product.marketTa2 = event.target.checked;
-    rerender();
-  }
-
-  return (
-    <>
-      <Typography variant="h4">Market-TA.II</Typography>
-      <br />
-      <Typography>
-        If this is enabled, then this product will automatically be sold at the optimal price such that the amount sold
-        matches the amount produced. (i.e. the highest possible price, while still ensuring that all produced materials
-        will be sold)
-      </Typography>
-      <br />
-      <FormControlLabel
-        control={<Switch checked={props.product.marketTa2} onChange={onCheckedChange} />}
-        label={<Typography>Use Market-TA.II for Auto-Sale Price</Typography>}
-      />
-    </>
-  );
-}
-
-interface IProps {
-  open: boolean;
-  onClose: () => void;
-  product: Product;
-}
-
-// Create a popup that lets the player use the Market TA research for Products
-export function ProductMarketTaModal(props: IProps): React.ReactElement {
-  const markupLimit = props.product.rating / props.product.markup;
-  const setRerender = useState(false)[1];
-  function rerender(): void {
-    setRerender((old) => !old);
-  }
-
-  function onChange(event: React.ChangeEvent<HTMLInputElement>): void {
-    props.product.marketTa1 = event.target.checked;
-    rerender();
-  }
-
-  return (
-    <Modal open={props.open} onClose={props.onClose}>
-      <>
-        <Typography variant="h4">Market-TA.I</Typography>
-        <Typography>
-          The maximum sale price you can mark this up to is {formatMoney(props.product.productionCost + markupLimit)}.
-          This means that if you set the sale price higher than this, you will begin to experience a loss in number of
-          sales
-          <br></br>
-          <br></br>
-          If this is enabled, then this product will automatically be sold at the price identified by Market-TA.I (i.e.
-          the price shown above)
-        </Typography>
-
-        <FormControlLabel
-          control={<Switch checked={props.product.marketTa1} onChange={onChange} />}
-          label={<Typography>Use Market-TA.I for Auto-Sale Price</Typography>}
-        />
-      </>
-
-      <MarketTA2 product={props.product} />
-    </Modal>
-  );
-}
diff --git a/src/Corporation/ui/modals/SellMaterialModal.tsx b/src/Corporation/ui/modals/SellMaterialModal.tsx
index b7f1a37a00..27ee4119ef 100644
--- a/src/Corporation/ui/modals/SellMaterialModal.tsx
+++ b/src/Corporation/ui/modals/SellMaterialModal.tsx
@@ -3,11 +3,11 @@ import { dialogBoxCreate } from "../../../ui/React/DialogBox";
 import { Material } from "../../Material";
 import { SellMaterial } from "../../Actions";
 import { Modal } from "../../../ui/React/Modal";
-import Typography from "@mui/material/Typography";
 import TextField from "@mui/material/TextField";
 import Button from "@mui/material/Button";
 import { KEY } from "../../../utils/helpers/keyCodes";
-
+import { Typography, FormControlLabel, Switch, Tooltip } from "@mui/material";
+import { Division } from "src/Corporation/Division";
 function initialPrice(mat: Material): string {
   let val = mat.desiredSellPrice ? mat.desiredSellPrice + "" : "";
   if (mat.marketTa2) {
@@ -22,6 +22,7 @@ interface IProps {
   open: boolean;
   onClose: () => void;
   mat: Material;
+  div: Division;
 }
 
 // Create a popup that let the player manage sales of a material
@@ -83,7 +84,51 @@ export function SellMaterialModal(props: IProps): React.ReactElement {
         onKeyDown={onKeyDown}
       />
       <TextField value={price} type="text" placeholder="Sell price" onChange={onPriceChange} onKeyDown={onKeyDown} />
-      <Button onClick={sellMaterial}>Confirm</Button>
+      <Button onClick={sellMaterial} style={{ marginLeft: ".5rem", marginRight: ".5rem" }}>
+        Confirm
+      </Button>
+      {props.div.hasResearch("Market-TA.I") && (
+        <FormControlLabel
+          style={{ marginRight: "1rem" }}
+          control={
+            <Switch checked={props.mat.marketTa1} onChange={(event) => (props.mat.marketTa1 = event.target.checked)} />
+          }
+          label={
+            <Tooltip
+              title={
+                <Typography>
+                  If this is enabled, then this Material will automatically be sold at market price + markup.
+                  <br />
+                  This overrides player set pricing and gets overriden by an active TA2.
+                </Typography>
+              }
+            >
+              <Typography>Market-TA.I</Typography>
+            </Tooltip>
+          }
+        />
+      )}
+      {props.div.hasResearch("Market-TA.II") && (
+        <FormControlLabel
+          control={
+            <Switch checked={props.mat.marketTa2} onChange={(event) => (props.mat.marketTa2 = event.target.checked)} />
+          }
+          label={
+            <Tooltip
+              title={
+                <Typography>
+                  If this is enabled, then this Material will automatically be sold at the optimal price such that the
+                  amount sold matches the amount specified.
+                  <br />
+                  This overrides player set pricing and TA1.
+                </Typography>
+              }
+            >
+              <Typography>Market-TA.II</Typography>
+            </Tooltip>
+          }
+        />
+      )}
     </Modal>
   );
 }
diff --git a/src/Corporation/ui/modals/SellProductModal.tsx b/src/Corporation/ui/modals/SellProductModal.tsx
index 9cd8bc2242..bf2273aa62 100644
--- a/src/Corporation/ui/modals/SellProductModal.tsx
+++ b/src/Corporation/ui/modals/SellProductModal.tsx
@@ -9,8 +9,10 @@ import TextField from "@mui/material/TextField";
 import Button from "@mui/material/Button";
 import FormControlLabel from "@mui/material/FormControlLabel";
 import Switch from "@mui/material/Switch";
+import Tooltip from "@mui/material/Tooltip";
 import { KEY } from "../../../utils/helpers/keyCodes";
 import { CityName } from "@enums";
+import { Division } from "src/Corporation/Division";
 
 function initialPrice(product: Product, city: CityName): string {
   let val = String(product.cityData[city].desiredSellPrice || "");
@@ -27,6 +29,7 @@ interface IProps {
   onClose: () => void;
   product: Product;
   city: CityName;
+  div: Division;
 }
 
 // Create a popup that let the player manage sales of a material
@@ -94,11 +97,62 @@ export function SellProductModal(props: IProps): React.ReactElement {
         onKeyDown={onKeyDown}
       />
       <TextField value={px} type="text" placeholder="Sell price" onChange={onPriceChange} onKeyDown={onKeyDown} />
-      <Button onClick={sellProduct}>Confirm</Button>
+      <Button onClick={sellProduct} style={{ marginLeft: ".5rem", marginRight: ".5rem" }}>
+        Confirm
+      </Button>
       <FormControlLabel
+        style={{ marginRight: ".5rem" }}
         control={<Switch checked={checked} onChange={onCheckedChange} />}
         label={<Typography>Set for all cities</Typography>}
       />
+      {props.div.hasResearch("Market-TA.I") && (
+        <FormControlLabel
+          style={{ marginRight: "1rem" }}
+          control={
+            <Switch
+              checked={props.product.marketTa1}
+              onChange={(event) => (props.product.marketTa1 = event.target.checked)}
+            />
+          }
+          label={
+            <Tooltip
+              title={
+                <Typography>
+                  If this is enabled, then this Material will automatically be sold at market price + markup.
+                  <br />
+                  This overrides player set pricing and gets overriden by an active TA2.
+                </Typography>
+              }
+            >
+              <Typography>Market-TA.I</Typography>
+            </Tooltip>
+          }
+        />
+      )}
+      {props.div.hasResearch("Market-TA.II") && (
+        <FormControlLabel
+          control={
+            <Switch
+              checked={props.product.marketTa2}
+              onChange={(event) => (props.product.marketTa2 = event.target.checked)}
+            />
+          }
+          label={
+            <Tooltip
+              title={
+                <Typography>
+                  If this is enabled, then this Material will automatically be sold at the optimal price such that the
+                  amount sold matches the amount specified.
+                  <br />
+                  This overrides player set pricing and TA1.
+                </Typography>
+              }
+            >
+              <Typography>Market-TA.II</Typography>
+            </Tooltip>
+          }
+        />
+      )}
     </Modal>
   );
 }