Merge branch 'main' into simpler-item-previews
This commit is contained in:
commit
b2b16a2edc
3 changed files with 47 additions and 45 deletions
|
@ -21,12 +21,24 @@ module ApplicationHelper
|
||||||
end
|
end
|
||||||
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"
|
klass = options.fetch(:class, "") + " button"
|
||||||
link_to url, class: klass, **options do
|
link_to url, class: klass, **options do
|
||||||
concat icon
|
concat icon
|
||||||
concat " "
|
concat " "
|
||||||
concat content
|
if block_given?
|
||||||
|
yield
|
||||||
|
else
|
||||||
|
concat content
|
||||||
|
end
|
||||||
end
|
end
|
||||||
end
|
end
|
||||||
|
|
||||||
|
|
|
@ -34,17 +34,10 @@ import {
|
||||||
QuestionIcon,
|
QuestionIcon,
|
||||||
WarningTwoIcon,
|
WarningTwoIcon,
|
||||||
} from "@chakra-ui/icons";
|
} from "@chakra-ui/icons";
|
||||||
import { FaCartPlus } from "react-icons/fa6";
|
import { IoBagCheck } from "react-icons/io5";
|
||||||
import { CSSTransition, TransitionGroup } from "react-transition-group";
|
import { CSSTransition, TransitionGroup } from "react-transition-group";
|
||||||
import { useSearchParams } from "react-router-dom";
|
|
||||||
|
|
||||||
import {
|
import { Delay, ErrorMessage, Heading1, Heading2 } from "../util";
|
||||||
Delay,
|
|
||||||
ErrorMessage,
|
|
||||||
Heading1,
|
|
||||||
Heading2,
|
|
||||||
useLocalStorage,
|
|
||||||
} from "../util";
|
|
||||||
import Item, { ItemListContainer, ItemListSkeleton } from "./Item";
|
import Item, { ItemListContainer, ItemListSkeleton } from "./Item";
|
||||||
import { BiRename } from "react-icons/bi";
|
import { BiRename } from "react-icons/bi";
|
||||||
import { IoCloudUploadOutline } from "react-icons/io5";
|
import { IoCloudUploadOutline } from "react-icons/io5";
|
||||||
|
@ -279,43 +272,34 @@ function ItemZoneGroupSkeleton({ itemCount }) {
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* GetTheseItemsButton shows the "Get these items!" button, to link to the
|
* ShoppingListButton shows the "Shopping list" button, to link to the Shopping=
|
||||||
* Item Getting Guide page for the items in this outfit. If there are no items
|
* List page for the items in this outfit. If there are no items being worn,
|
||||||
* being worn, this is disabled.
|
* this is disabled.
|
||||||
*/
|
*/
|
||||||
function GetTheseItemsButton({ outfitState }) {
|
function ShoppingListButton({ 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 itemIds = [...outfitState.wornItemIds].sort();
|
||||||
const targetUrl = `/items/sources/${itemIds.join(",")}`;
|
|
||||||
const isDisabled = itemIds.length === 0;
|
const isDisabled = itemIds.length === 0;
|
||||||
|
|
||||||
if (!isVisible) {
|
let targetUrl = `/items/sources/${itemIds.join(",")}`;
|
||||||
return null;
|
if (outfitState.name != null && outfitState.name.trim().length > 0) {
|
||||||
|
const params = new URLSearchParams();
|
||||||
|
params.append("for", outfitState.name);
|
||||||
|
targetUrl += "?" + params.toString();
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Tooltip
|
<Tooltip
|
||||||
label="Get these items!"
|
label="Shopping list"
|
||||||
placement="top"
|
placement="top"
|
||||||
background="purple.500"
|
background="purple.500"
|
||||||
color="white"
|
color="white"
|
||||||
>
|
>
|
||||||
<IconButton
|
<IconButton
|
||||||
aria-label="Get these items!"
|
aria-label="Shopping list"
|
||||||
as={isDisabled ? "button" : "a"}
|
as={isDisabled ? "button" : "a"}
|
||||||
href={isDisabled ? undefined : targetUrl}
|
href={isDisabled ? undefined : targetUrl}
|
||||||
target={isDisabled ? undefined : "_blank"}
|
target={isDisabled ? undefined : "_blank"}
|
||||||
icon={<FaCartPlus />}
|
icon={<IoBagCheck />}
|
||||||
colorScheme="purple"
|
colorScheme="purple"
|
||||||
size="sm"
|
size="sm"
|
||||||
isRound
|
isRound
|
||||||
|
@ -460,7 +444,7 @@ function OutfitHeading({ outfitState, outfitSaving, dispatchToOutfit }) {
|
||||||
<Box width="4" flex="1 0 auto" />
|
<Box width="4" flex="1 0 auto" />
|
||||||
<OutfitSavingIndicator outfitSaving={outfitSaving} />
|
<OutfitSavingIndicator outfitSaving={outfitSaving} />
|
||||||
<Box width="3" flex="0 0 auto" />
|
<Box width="3" flex="0 0 auto" />
|
||||||
<GetTheseItemsButton outfitState={outfitState} />
|
<ShoppingListButton outfitState={outfitState} />
|
||||||
<Box width="2" flex="0 0 auto" />
|
<Box width="2" flex="0 0 auto" />
|
||||||
<Menu placement="bottom-end">
|
<Menu placement="bottom-end">
|
||||||
<MenuButton
|
<MenuButton
|
||||||
|
|
|
@ -1,5 +1,11 @@
|
||||||
- title "Item Getting Guide"
|
- page_title = params[:for] ? "Shopping List for \"#{params[:for]}\"" : "Shopping List"
|
||||||
%h1#title Item Getting Guide
|
|
||||||
|
- title page_title
|
||||||
|
%h1#title= page_title
|
||||||
|
|
||||||
|
:markdown
|
||||||
|
Here's a custom shopping list for exactly the items in your outfit!
|
||||||
|
Have fun bringing your design to life!!
|
||||||
|
|
||||||
- if @items[:nc_mall].present?
|
- if @items[:nc_mall].present?
|
||||||
%h2 NC Mall items
|
%h2 NC Mall items
|
||||||
|
@ -21,16 +27,16 @@
|
||||||
|
|
||||||
%td.actions-cell
|
%td.actions-cell
|
||||||
- if @items_needed[:nc_mall].present?
|
- if @items_needed[:nc_mall].present?
|
||||||
%button{
|
= button_link_to "https://ncmall.neopets.com/",
|
||||||
onclick: "alert('Todo!')",
|
target: "_blank",
|
||||||
data: {"action-kind": "bulk-nc-mall"},
|
data: {"action-kind": "bulk-nc-mall"} do
|
||||||
}
|
|
||||||
= cart_icon alt: ""
|
= cart_icon alt: ""
|
||||||
Buy all in NC Mall
|
Buy all in NC Mall
|
||||||
%tbody
|
%tbody
|
||||||
- @items[:nc_mall].each do |item|
|
- @items[:nc_mall].each do |item|
|
||||||
= render "item_list_row", item: do
|
= render "item_list_row", item: do
|
||||||
%button{onclick: "alert('Todo!')"}
|
= button_link_to "https://ncmall.neopets.com/",
|
||||||
|
target: "_blank" do
|
||||||
= cart_icon alt: ""
|
= cart_icon alt: ""
|
||||||
Buy (#{item.current_nc_price} NC)
|
Buy (#{item.current_nc_price} NC)
|
||||||
|
|
||||||
|
@ -68,10 +74,9 @@
|
||||||
(~#{dyeworks_estimated_potions_cost_for @items_needed[:dyeworks]} NC)
|
(~#{dyeworks_estimated_potions_cost_for @items_needed[:dyeworks]} NC)
|
||||||
%td.actions-cell
|
%td.actions-cell
|
||||||
- if @items_needed[:dyeworks].present?
|
- if @items_needed[:dyeworks].present?
|
||||||
%button{
|
= button_link_to "https://ncmall.neopets.com/",
|
||||||
onclick: "alert('Todo!')",
|
target: "_blank",
|
||||||
data: {"action-kind": "bulk-nc-mall"},
|
data: {"action-kind": "bulk-nc-mall"} do
|
||||||
}
|
|
||||||
= cart_icon alt: ""
|
= cart_icon alt: ""
|
||||||
Buy all in NC Mall
|
Buy all in NC Mall
|
||||||
%tbody
|
%tbody
|
||||||
|
@ -106,7 +111,8 @@
|
||||||
}
|
}
|
||||||
(Limited-time)
|
(Limited-time)
|
||||||
|
|
||||||
%button{onclick: "alert('Todo!')"}
|
= button_link_to "https://ncmall.neopets.com/",
|
||||||
|
target: "_blank" do
|
||||||
= cart_icon alt: ""
|
= cart_icon alt: ""
|
||||||
Buy base (#{item.dyeworks_base_item.current_nc_price} NC)
|
Buy base (#{item.dyeworks_base_item.current_nc_price} NC)
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue