[MIRROR] Adds a tab to the supply console that explains some delivery systems and department orders [MDB IGNORE] (#9895)

* tgui: Help tab to the supply console (#63159)

* Adds a tab to the supply console that explains some delivery systems and department orders

Co-authored-by: tralezab <40974010+tralezab@users.noreply.github.com>

tgui/packages/tgui/interfaces/Cargo.js

@@ -1,5 +1,5 @@
 import { useBackend, useSharedState } from '../backend';
-import { AnimatedNumber, Box, Button, Flex, LabeledList, Section, Table, Tabs } from '../components';
+import { AnimatedNumber, Box, Button, Flex, LabeledList, NoticeBox, Section, Table, Tabs } from '../components';
 import { formatMoney } from '../format';
 import { Window } from '../layouts';
 
@@ -44,15 +44,23 @@ export const CargoContent = (props, context) => {
             Requests ({requests.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.Tab
+                icon="shopping-cart"
+                textColor={tab !== 'cart'
+                  && cart.length > 0
+                  && 'yellow'}
+                selected={tab === 'cart'}
+                onClick={() => setTab('cart')}>
+                Checkout ({cart.length})
+              </Tabs.Tab>
+              <Tabs.Tab
+                icon="question"
+                selected={tab === 'help'}
+                onClick={() => setTab('help')}>
+                Help
+              </Tabs.Tab>
+            </>
           )}
         </Tabs>
       </Section>
@@ -65,6 +73,9 @@ export const CargoContent = (props, context) => {
       {tab === 'cart' && (
         <CargoCart />
       )}
+      {tab === 'help' && (
+        <CargoHelp />
+      )}
     </Box>
   );
 };
@@ -401,3 +412,58 @@ const CargoCart = (props, context) => {
     </Section>
   );
 };
+
+const CargoHelp = (props, context) => {
+  return (
+    <>
+      <Section title="Department Orders">
+        Each department on the station will order crates from their own personal
+        consoles. These orders are ENTIRELY FREE! They do not come out of
+        cargo&apos;s budget, and rather put the consoles on cooldown. So
+        here&apos;s where you come in: The ordered crates will show up on your
+        supply console, and you need to deliver the crates to the orderers.
+        You&apos;ll actually be paid the full value of the department crate on
+        delivery if the crate was not tampered with, making the system a good
+        source of income.
+        <br />
+        <b>
+          Examine a department order crate to get specific details about where
+          the crate needs to go.
+        </b>
+      </Section>
+      <Section title="MULEbots">
+        MULEbots are slow but loyal delivery bots that will get crates delivered
+        with minimal technician effort required. It is slow, though, and can be
+        tampered with while en route.
+        <br />
+        <b>Setting up a MULEbot is easy:</b><br />
+        <b>1.</b> Drag the crate you want to deliver next to the MULEbot.<br />
+        <b>2.</b> Drag the crate on top of MULEbot. It should load on.<br />
+        <b>3.</b> Open your PDA.<br />
+        <b>4.</b> Click <i>Delivery Bot Control</i>.<br />
+        <b>5.</b> Click <i>Scan for Active Bots</i>.<br />
+        <b>6.</b> Choose your MULE.<br />
+        <b>7.</b> Click on <i>Destination: (set)</i>.<br />
+        <b>8.</b> Choose a destination and click OK.<br />
+        <b>9.</b> Click <i>Proceed</i>.
+      </Section>
+      <Section title="Disposals Delivery System">
+        In addition to MULEs and hand-deliveries, you can also make use of the
+        disposals mailing system. Note that a break in the disposal piping could
+        cause your package to be lost (this hardly ever happens), so this is not
+        always the most secure ways to deliver something. You can wrap up a
+        piece of paper and mail it the same way if you (or someone at the desk)
+        wants to mail a letter.
+        <br />
+        <b>Using the Disposals Delivery System is even easier:</b><br />
+        <b>1.</b> Wrap your item/crate in packaging paper.<br />
+        <b>2.</b> Use the destinations tagger to choose where to send it.<br />
+        <b>3.</b> Tag the package.<br />
+        <b>4.</b> Stick it on the conveyor and let the system handle it.<br />
+      </Section>
+      <NoticeBox textAlign="center" info mb={0}>
+        Pondering something not included here? When in doubt, ask the QM!
+      </NoticeBox>
+    </>
+  );
+};