From f84e34089968b07b129ef07920fb33fd1ef4671c Mon Sep 17 00:00:00 2001
From: Matchu <matchu1993@gmail.com>
Date: Tue, 28 May 2024 17:06:23 -0700
Subject: [PATCH] Add link to Item Getting Guide from outfit editor (behind
 secret link)

You can now go to `/outfits/new?features=get-these-items` to start
seeing the "Get These Items!" button in the outfit editor!

I haven't tested it a ton yet, but yeah here it is!
---
 .../wardrobe-2020/WardrobePage/ItemsPanel.js  | 52 ++++++++++++++++++-
 1 file changed, 51 insertions(+), 1 deletion(-)

diff --git a/app/javascript/wardrobe-2020/WardrobePage/ItemsPanel.js b/app/javascript/wardrobe-2020/WardrobePage/ItemsPanel.js
index a8631188..b877d370 100644
--- a/app/javascript/wardrobe-2020/WardrobePage/ItemsPanel.js
+++ b/app/javascript/wardrobe-2020/WardrobePage/ItemsPanel.js
@@ -31,12 +31,20 @@ import {
   CheckIcon,
   DeleteIcon,
   EditIcon,
+  ExternalLinkIcon,
   QuestionIcon,
   WarningTwoIcon,
 } from "@chakra-ui/icons";
 import { CSSTransition, TransitionGroup } from "react-transition-group";
+import { useSearchParams } from "react-router-dom";
 
-import { Delay, ErrorMessage, Heading1, Heading2 } from "../util";
+import {
+  Delay,
+  ErrorMessage,
+  Heading1,
+  Heading2,
+  useLocalStorage,
+} from "../util";
 import Item, { ItemListContainer, ItemListSkeleton } from "./Item";
 import { BiRename } from "react-icons/bi";
 import { IoCloudUploadOutline } from "react-icons/io5";
@@ -270,6 +278,45 @@ function ItemZoneGroupSkeleton({ itemCount }) {
   );
 }
 
+/**
+ * GetTheseItemsButton shows the "Get these items!" button, to link to the
+ * Item Getting Guide page for the items in this outfit. If there are no items
+ * being worn, this is disabled.
+ */
+function GetTheseItemsButton({ outfitState }) {
+  const [searchParams] = useSearchParams();
+  const [isVisible, setIsVisible] = useLocalStorage("DTIShowGetTheseItems");
+
+  // Enable this feature by visiting `/outfits/new?features=get-these-items`.
+  React.useEffect(() => {
+    const features = searchParams.get("features") ?? "";
+    if (features.split(",").includes("get-these-items")) {
+      setIsVisible(true);
+    }
+  }, [searchParams, setIsVisible]);
+
+  const itemIds = [...outfitState.wornItemIds].sort();
+  const targetUrl = `/items/sources/${itemIds.join(",")}`;
+  const isDisabled = itemIds.length === 0;
+
+  if (!isVisible) {
+    return null;
+  }
+
+  return (
+    <Button
+      as={isDisabled ? "button" : "a"}
+      href={isDisabled ? undefined : targetUrl}
+      target={isDisabled ? undefined : "_blank"}
+      colorScheme="purple"
+      rightIcon={<ExternalLinkIcon />}
+      isDisabled={isDisabled}
+    >
+      Get these items!
+    </Button>
+  );
+}
+
 /**
  * OutfitSavingIndicator shows a Save button, or the "Saved" or "Saving" state,
  * if the user can save this outfit. If not, this is empty!
@@ -403,6 +450,9 @@ function OutfitHeading({ outfitState, outfitSaving, dispatchToOutfit }) {
             </Box>
           </Box>
           <Box width="4" flex="1 0 auto" />
+          <Box flex="0 0 auto">
+            <GetTheseItemsButton outfitState={outfitState} />
+          </Box>
           <Box flex="0 0 auto">
             <OutfitSavingIndicator outfitSaving={outfitSaving} />
           </Box>