oops! All Refactors!

tgui/packages/tgui/interfaces/Cargo.js

@@ -6,6 +6,19 @@ import { formatMoney } from '../format';
 import { Window } from '../layouts';
 
 export const Cargo = (props, context) => {
+  return (
+    <Window
+      width={780}
+      height={750}
+      resizable>
+      <Window.Content scrollable>
+        <CargoContent />
+      </Window.Content>
+    </Window>
+  );
+};
+
+export const CargoContent = (props, context) => {
   const { act, data } = useBackend(context);
   const [tab, setTab] = useSharedState(context, 'tab', 'catalog');
   const {
@@ -14,53 +27,48 @@ export const Cargo = (props, context) => {
   const cart = data.cart || [];
   const requests = data.requests || [];
   return (
-    <Window
-      width={780}
-      height={750}
-      resizable>
-      <Window.Content scrollable>
-        <CargoStatus />
-        <Section fitted>
-          <Tabs>
+    <Box>
+      <CargoStatus />
+      <Section fitted>
+        <Tabs>
+          <Tabs.Tab
+            icon="list"
+            selected={tab === 'catalog'}
+            onClick={() => setTab('catalog')}>
+            Catalog
+          </Tabs.Tab>
+          <Tabs.Tab
+            icon="envelope"
+            textColor={tab !== 'requests'
+              && requests.length > 0
+              && 'yellow'}
+            selected={tab === 'requests'}
+            onClick={() => setTab('requests')}>
+            Requests ({requests.length})
+          </Tabs.Tab>
+          {!requestonly && (
             <Tabs.Tab
-              icon="list"
-              selected={tab === 'catalog'}
-              onClick={() => setTab('catalog')}>
-              Catalog
-            </Tabs.Tab>
-            <Tabs.Tab
-              icon="envelope"
-              textColor={tab !== 'requests'
-                && requests.length > 0
+              icon="shopping-cart"
+              textColor={tab !== 'cart'
+                && cart.length > 0
                 && 'yellow'}
-              selected={tab === 'requests'}
-              onClick={() => setTab('requests')}>
-              Requests ({requests.length})
+              selected={tab === 'cart'}
+              onClick={() => setTab('cart')}>
+              Checkout ({cart.length})
             </Tabs.Tab>
-            {!requestonly && (
-              <Tabs.Tab
-                icon="shopping-cart"
-                textColor={tab !== 'cart'
-                  && cart.length > 0
-                  && 'yellow'}
-                selected={tab === 'cart'}
-                onClick={() => setTab('cart')}>
-                Checkout ({cart.length})
-              </Tabs.Tab>
-            )}
-          </Tabs>
-        </Section>
-        {tab === 'catalog' && (
-          <CargoCatalog />
-        )}
-        {tab === 'requests' && (
-          <CargoRequests />
-        )}
-        {tab === 'cart' && (
-          <CargoCart />
-        )}
-      </Window.Content>
-    </Window>
+          )}
+        </Tabs>
+      </Section>
+      {tab === 'catalog' && (
+        <CargoCatalog />
+      )}
+      {tab === 'requests' && (
+        <CargoRequests />
+      )}
+      {tab === 'cart' && (
+        <CargoCart />
+      )}
+    </Box>
   );
 };
 
@@ -75,6 +83,7 @@ const CargoStatus = (props, context) => {
     message,
     points,
     requestonly,
+    can_send,
   } = data;
   return (
     <Section
@@ -89,7 +98,7 @@ const CargoStatus = (props, context) => {
       )}>
       <LabeledList>
         <LabeledList.Item label="Shuttle">
-          {docked && !requestonly && (
+          {docked && !requestonly && can_send &&(
             <Button
               content={location}
               onClick={() => act('send')} />
@@ -122,6 +131,7 @@ export const CargoCatalog = (props, context) => {
   const { act, data } = useBackend(context);
   const {
     self_paid,
+    app_cost,
   } = data;
   const supplies = toArray(data.supplies);
   const [
@@ -190,7 +200,7 @@ export const CargoCatalog = (props, context) => {
                       onClick={() => act('add', {
                         id: pack.id,
                       })}>
-                      {formatMoney(self_paid && !pack.goody
+                      {formatMoney((self_paid && !pack.goody) || app_cost
                         ? Math.round(pack.cost * 1.1)
                         : pack.cost)}
                       {' cr'}
@@ -210,6 +220,8 @@ const CargoRequests = (props, context) => {
   const { act, data } = useBackend(context);
   const {
     requestonly,
+    can_send,
+    can_approve_requests,
   } = data;
   const requests = data.requests || [];
   // Labeled list reimplementation to squeeze extra columns out of it
@@ -249,7 +261,7 @@ const CargoRequests = (props, context) => {
               <Table.Cell collapsing textAlign="right">
                 {formatMoney(request.cost)} cr
               </Table.Cell>
-              {!requestonly && (
+              {(!requestonly || can_send)&& can_approve_requests &&(
                 <Table.Cell collapsing>
                   <Button
                     icon="check"
@@ -277,10 +289,12 @@ const CargoCartButtons = (props, context) => {
   const { act, data } = useBackend(context);
   const {
     requestonly,
+    can_send,
+    can_approve_requests,
   } = data;
   const cart = data.cart || [];
   const total = cart.reduce((total, entry) => total + entry.cost, 0);
-  if (requestonly) {
+  if (requestonly || !can_send || !can_approve_requests) {
     return null;
   }
   return (
@@ -308,6 +322,7 @@ const CargoCart = (props, context) => {
     away,
     docked,
     location,
+    can_send,
   } = data;
   const cart = data.cart || [];
   return (
@@ -342,11 +357,13 @@ const CargoCart = (props, context) => {
                 {formatMoney(entry.cost)} cr
               </Table.Cell>
               <Table.Cell collapsing>
-                <Button
-                  icon="minus"
-                  onClick={() => act('remove', {
-                    id: entry.id,
-                  })} />
+                {can_send &&(
+                  <Button
+                    icon="minus"
+                    onClick={() => act('remove', {
+                      id: entry.id,
+                    })} />
+                )}
               </Table.Cell>
             </Table.Row>
           ))}