diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb index 01cd3d9c..3ec615ff 100644 --- a/app/helpers/application_helper.rb +++ b/app/helpers/application_helper.rb @@ -21,12 +21,24 @@ module ApplicationHelper end end - def button_link_to(content, url, icon: nil, **options) + def button_link_to(content_or_url, url = nil, icon: nil, **options) + if url.present? + content = content_or_url + url = url + else + content = nil + url = content_or_url + end + klass = options.fetch(:class, "") + " button" link_to url, class: klass, **options do concat icon concat " " - concat content + if block_given? + yield + else + concat content + end end end diff --git a/app/javascript/wardrobe-2020/WardrobePage/ItemsPanel.js b/app/javascript/wardrobe-2020/WardrobePage/ItemsPanel.js index db361aa6..0b430fa3 100644 --- a/app/javascript/wardrobe-2020/WardrobePage/ItemsPanel.js +++ b/app/javascript/wardrobe-2020/WardrobePage/ItemsPanel.js @@ -34,17 +34,10 @@ import { QuestionIcon, WarningTwoIcon, } from "@chakra-ui/icons"; -import { FaCartPlus } from "react-icons/fa6"; +import { IoBagCheck } from "react-icons/io5"; import { CSSTransition, TransitionGroup } from "react-transition-group"; -import { useSearchParams } from "react-router-dom"; -import { - Delay, - ErrorMessage, - Heading1, - Heading2, - useLocalStorage, -} from "../util"; +import { Delay, ErrorMessage, Heading1, Heading2 } from "../util"; import Item, { ItemListContainer, ItemListSkeleton } from "./Item"; import { BiRename } from "react-icons/bi"; import { IoCloudUploadOutline } from "react-icons/io5"; @@ -279,43 +272,34 @@ 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. + * ShoppingListButton shows the "Shopping list" button, to link to the Shopping= + * List 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]); - +function ShoppingListButton({ outfitState }) { const itemIds = [...outfitState.wornItemIds].sort(); - const targetUrl = `/items/sources/${itemIds.join(",")}`; const isDisabled = itemIds.length === 0; - if (!isVisible) { - return null; + let targetUrl = `/items/sources/${itemIds.join(",")}`; + if (outfitState.name != null && outfitState.name.trim().length > 0) { + const params = new URLSearchParams(); + params.append("for", outfitState.name); + targetUrl += "?" + params.toString(); } return ( } + icon={} colorScheme="purple" size="sm" isRound @@ -460,7 +444,7 @@ function OutfitHeading({ outfitState, outfitSaving, dispatchToOutfit }) { - +