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 (
+ }
+ isDisabled={isDisabled}
+ >
+ Get these items!
+
+ );
+}
+
/**
* 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 }) {
+
+
+