import React from "react"; import { ClassNames } from "@emotion/react"; import { AspectRatio, Button, Box, HStack, IconButton, SkeletonText, Tooltip, VisuallyHidden, VStack, useBreakpointValue, useColorModeValue, useTheme, useToast, Flex, usePrefersReducedMotion, Grid, Popover, PopoverContent, PopoverTrigger, Checkbox, } from "@chakra-ui/react"; import { CheckIcon, ChevronDownIcon, ChevronRightIcon, EditIcon, StarIcon, WarningIcon, } from "@chakra-ui/icons"; import { MdPause, MdPlayArrow } from "react-icons/md"; import gql from "graphql-tag"; import { useQuery, useMutation } from "@apollo/client"; import ItemPageLayout, { SubtleSkeleton } from "./ItemPageLayout"; import { Delay, logAndCapture, MajorErrorMessage, useLocalStorage, } from "./util"; import HTML5Badge, { layerUsesHTML5 } from "./components/HTML5Badge"; import { itemAppearanceFragment, petAppearanceFragment, } from "./components/useOutfitAppearance"; import { useOutfitPreview } from "./components/OutfitPreview"; import SpeciesColorPicker, { useAllValidPetPoses, getValidPoses, getClosestPose, } from "./components/SpeciesColorPicker"; import useCurrentUser from "./components/useCurrentUser"; import SpeciesFacesPicker, { colorIsBasic, } from "./ItemPage/SpeciesFacesPicker"; // Removed for the wardrobe-2020 case. // TODO: Refactor this stuff, do we even need ItemPageContent really? // function ItemPage() { // const { query } = useRouter(); // return ; // } /** * ItemPageContent is the content of ItemPage, but we also use it as the * entry point for ItemPageDrawer! When embedded in ItemPageDrawer, the * `isEmbedded` prop is true, so we know not to e.g. set the page title. */ export function ItemPageContent({ itemId, isEmbedded = false }) { const { isLoggedIn } = useCurrentUser(); const { error, data } = useQuery( gql` query ItemPage($itemId: ID!) { item(id: $itemId) { id name isNc isPb thumbnailUrl description createdAt ncTradeValueText # For Support users. rarityIndex isManuallyNc } } `, { variables: { itemId }, returnPartialData: true } ); if (error) { return ; } const item = data?.item; return ( <> {isLoggedIn && } {!isEmbedded && } ); } function ItemPageDescription({ description, isEmbedded }) { // Show 2 lines of description text placeholder on small screens, or when // embedded in the wardrobe page's narrow drawer. In larger contexts, show // just 1 line. const viewportNumDescriptionLines = useBreakpointValue({ base: 2, md: 1 }); const numDescriptionLines = isEmbedded ? 2 : viewportNumDescriptionLines; return ( {description ? ( description ) : description === "" ? ( (This item has no description.) ) : ( )} ); } const ITEM_PAGE_OWN_WANT_BUTTONS_QUERY = gql` query ItemPageOwnWantButtons($itemId: ID!) { item(id: $itemId) { id name currentUserOwnsThis currentUserWantsThis } currentUser { closetLists { id name isDefaultList ownsOrWantsItems hasItem(itemId: $itemId) } } } `; function ItemPageOwnWantButtons({ itemId }) { const { loading, error, data } = useQuery(ITEM_PAGE_OWN_WANT_BUTTONS_QUERY, { variables: { itemId }, context: { sendAuth: true }, }); if (error) { return {error.message}; } const closetLists = data?.currentUser?.closetLists || []; const realLists = closetLists.filter((cl) => !cl.isDefaultList); const ownedLists = realLists.filter((cl) => cl.ownsOrWantsItems === "OWNS"); const wantedLists = realLists.filter((cl) => cl.ownsOrWantsItems === "WANTS"); return ( = 1} popoverPlacement="bottom-end" /> = 1} popoverPlacement="bottom-start" /> ); } function ItemPageOwnWantListsDropdown({ closetLists, item, isVisible, popoverPlacement, }) { return ( ); } const ItemPageOwnWantListsDropdownButton = React.forwardRef( ({ closetLists, isVisible, ...props }, ref) => { const listsToShow = closetLists.filter((cl) => cl.hasItem); let buttonText; if (listsToShow.length === 1) { buttonText = `In list: "${listsToShow[0].name}"`; } else if (listsToShow.length > 1) { const listNames = listsToShow.map((cl) => `"${cl.name}"`).join(", "); buttonText = `${listsToShow.length} lists: ${listNames}`; } else { buttonText = "Add to list"; } return ( ); } ); function ItemPageOwnWantListsDropdownContent({ closetLists, item }) { return ( {closetLists.map((closetList) => ( ))} ); } function ItemPageOwnWantsListsDropdownRow({ closetList, item }) { const toast = useToast(); const [sendAddToListMutation] = useMutation( gql` mutation ItemPage_AddToClosetList($listId: ID!, $itemId: ID!) { addItemToClosetList( listId: $listId itemId: $itemId removeFromDefaultList: true ) { id hasItem(itemId: $itemId) } } `, { context: { sendAuth: true } } ); const [sendRemoveFromListMutation] = useMutation( gql` mutation ItemPage_RemoveFromClosetList($listId: ID!, $itemId: ID!) { removeItemFromClosetList( listId: $listId itemId: $itemId ensureInSomeList: true ) { id hasItem(itemId: $itemId) } } `, { context: { sendAuth: true } } ); const onChange = React.useCallback( (e) => { if (e.target.checked) { sendAddToListMutation({ variables: { listId: closetList.id, itemId: item.id }, optimisticResponse: { addItemToClosetList: { __typename: "ClosetList", id: closetList.id, hasItem: true, }, }, }).catch((error) => { console.error(error); toast({ status: "error", title: `Oops, error adding "${item.name}" to "${closetList.name}!"`, description: "Check your connection and try again? Sorry about this!", }); }); } else { sendRemoveFromListMutation({ variables: { listId: closetList.id, itemId: item.id }, optimisticResponse: { removeItemFromClosetList: { __typename: "ClosetList", id: closetList.id, hasItem: false, }, }, }).catch((error) => { console.error(error); toast({ status: "error", title: `Oops, error removing "${item.name}" from "${closetList.name}!"`, description: "Check your connection and try again? Sorry about this!", }); }); } }, [closetList, item, sendAddToListMutation, sendRemoveFromListMutation, toast] ); return ( {closetList.name} ); } function ItemPageOwnButton({ itemId, isChecked }) { const theme = useTheme(); const toast = useToast(); const [sendAddMutation] = useMutation( gql` mutation ItemPageOwnButtonAdd($itemId: ID!) { addToItemsCurrentUserOwns(itemId: $itemId) { id currentUserOwnsThis } } `, { variables: { itemId }, context: { sendAuth: true }, optimisticResponse: { __typename: "Mutation", addToItemsCurrentUserOwns: { __typename: "Item", id: itemId, currentUserOwnsThis: true, }, }, // TODO: Refactor the mutation result to include closet lists refetchQueries: [ { query: ITEM_PAGE_OWN_WANT_BUTTONS_QUERY, variables: { itemId }, context: { sendAuth: true }, }, ], } ); const [sendRemoveMutation] = useMutation( gql` mutation ItemPageOwnButtonRemove($itemId: ID!) { removeFromItemsCurrentUserOwns(itemId: $itemId) { id currentUserOwnsThis } } `, { variables: { itemId }, context: { sendAuth: true }, optimisticResponse: { __typename: "Mutation", removeFromItemsCurrentUserOwns: { __typename: "Item", id: itemId, currentUserOwnsThis: false, }, }, // TODO: Refactor the mutation result to include closet lists refetchQueries: [ { query: ITEM_PAGE_OWN_WANT_BUTTONS_QUERY, variables: { itemId }, context: { sendAuth: true }, }, ], } ); return ( {({ css }) => ( { if (e.target.checked) { sendAddMutation().catch((e) => { console.error(e); toast({ title: "We had trouble adding this to the items you own.", description: "Check your internet connection, and try again.", status: "error", duration: 5000, }); }); } else { sendRemoveMutation().catch((e) => { console.error(e); toast({ title: "We had trouble removing this from the items you own.", description: "Check your internet connection, and try again.", status: "error", duration: 5000, }); }); } }} /> )} ); } function ItemPageWantButton({ itemId, isChecked }) { const theme = useTheme(); const toast = useToast(); const [sendAddMutation] = useMutation( gql` mutation ItemPageWantButtonAdd($itemId: ID!) { addToItemsCurrentUserWants(itemId: $itemId) { id currentUserWantsThis } } `, { variables: { itemId }, context: { sendAuth: true }, optimisticResponse: { __typename: "Mutation", addToItemsCurrentUserWants: { __typename: "Item", id: itemId, currentUserWantsThis: true, }, }, // TODO: Refactor the mutation result to include closet lists refetchQueries: [ { query: ITEM_PAGE_OWN_WANT_BUTTONS_QUERY, variables: { itemId }, context: { sendAuth: true }, }, ], } ); const [sendRemoveMutation] = useMutation( gql` mutation ItemPageWantButtonRemove($itemId: ID!) { removeFromItemsCurrentUserWants(itemId: $itemId) { id currentUserWantsThis } } `, { variables: { itemId }, context: { sendAuth: true }, optimisticResponse: { __typename: "Mutation", removeFromItemsCurrentUserWants: { __typename: "Item", id: itemId, currentUserWantsThis: false, }, }, // TODO: Refactor the mutation result to include closet lists refetchQueries: [ { query: ITEM_PAGE_OWN_WANT_BUTTONS_QUERY, variables: { itemId }, context: { sendAuth: true }, }, ], } ); return ( {({ css }) => ( { if (e.target.checked) { sendAddMutation().catch((e) => { console.error(e); toast({ title: "We had trouble adding this to the items you want.", description: "Check your internet connection, and try again.", status: "error", duration: 5000, }); }); } else { sendRemoveMutation().catch((e) => { console.error(e); toast({ title: "We had trouble removing this from the items you want.", description: "Check your internet connection, and try again.", status: "error", duration: 5000, }); }); } }} /> )} ); } function ItemPageTradeLinks({ itemId, isEmbedded }) { const { data, loading, error } = useQuery( gql` query ItemPageTradeLinks($itemId: ID!) { item(id: $itemId) { id numUsersOfferingThis numUsersSeekingThis } } `, { variables: { itemId } } ); if (error) { return {error.message}; } return ( Trading: ); } function ItemPageTradeLink({ href, count, label, colorScheme, isEmbedded }) { return ( ); } function IconCheckbox({ icon, isChecked, ...props }) { return ( {icon} ); } function ItemPageOutfitPreview({ itemId }) { const idealPose = React.useMemo( () => (Math.random() > 0.5 ? "HAPPY_FEM" : "HAPPY_MASC"), [] ); const [petState, setPetState] = React.useState({ // We'll fill these in once the canonical appearance data arrives. speciesId: null, colorId: null, pose: null, isValid: false, // We use appearance ID, in addition to the above, to give the Apollo cache // a really clear hint that the canonical pet appearance we preloaded is // the exact right one to show! But switching species/color will null this // out again, and that's okay. (We'll do an unnecessary reload if you // switch back to it though... we could maybe do something clever there!) appearanceId: null, }); const [preferredSpeciesId, setPreferredSpeciesId] = useLocalStorage( "DTIItemPreviewPreferredSpeciesId", null ); const [preferredColorId, setPreferredColorId] = useLocalStorage( "DTIItemPreviewPreferredColorId", null ); const setPetStateFromUserAction = React.useCallback( (newPetState) => setPetState((prevPetState) => { // When the user _intentionally_ chooses a species or color, save it in // local storage for next time. (This won't update when e.g. their // preferred species or color isn't available for this item, so we update // to the canonical species or color automatically.) // // Re the "ifs", I have no reason to expect null to come in here, but, // since this is touching client-persisted data, I want it to be even more // reliable than usual! if ( newPetState.speciesId && newPetState.speciesId !== prevPetState.speciesId ) { setPreferredSpeciesId(newPetState.speciesId); } if ( newPetState.colorId && newPetState.colorId !== prevPetState.colorId ) { if (colorIsBasic(newPetState.colorId)) { // When the user chooses a basic color, don't index on it specifically, // and instead reset to use default colors. setPreferredColorId(null); } else { setPreferredColorId(newPetState.colorId); } } return newPetState; }), [setPreferredColorId, setPreferredSpeciesId] ); // We don't need to reload this query when preferred species/color change, so // cache their initial values here to use as query arguments. const [initialPreferredSpeciesId] = React.useState(preferredSpeciesId); const [initialPreferredColorId] = React.useState(preferredColorId); // Start by loading the "canonical" pet and item appearance for the outfit // preview. We'll use this to initialize both the preview and the picker. // // If the user has a preferred species saved from using the ItemPage in the // past, we'll send that instead. This will return the appearance on that // species if possible, or the default canonical species if not. // // TODO: If this is a non-standard pet color, like Mutant, we'll do an extra // query after this loads, because our Apollo cache can't detect the // shared item appearance. (For standard colors though, our logic to // cover standard-color switches works for this preloading too.) const { loading: loadingGQL, error: errorGQL, data, } = useQuery( gql` query ItemPageOutfitPreview( $itemId: ID! $preferredSpeciesId: ID $preferredColorId: ID ) { item(id: $itemId) { id name restrictedZones { id label @client } compatibleBodiesAndTheirZones { body { id representsAllBodies species { id name } } zones { id label @client } } canonicalAppearance( preferredSpeciesId: $preferredSpeciesId preferredColorId: $preferredColorId ) { id ...ItemAppearanceForOutfitPreview body { id canonicalAppearance(preferredColorId: $preferredColorId) { id species { id name } color { id } pose ...PetAppearanceForOutfitPreview } } } } } ${itemAppearanceFragment} ${petAppearanceFragment} `, { variables: { itemId, preferredSpeciesId: initialPreferredSpeciesId, preferredColorId: initialPreferredColorId, }, onCompleted: (data) => { const canonicalBody = data?.item?.canonicalAppearance?.body; const canonicalPetAppearance = canonicalBody?.canonicalAppearance; setPetState({ speciesId: canonicalPetAppearance?.species?.id, colorId: canonicalPetAppearance?.color?.id, pose: canonicalPetAppearance?.pose, isValid: true, appearanceId: canonicalPetAppearance?.id, }); }, } ); const compatibleBodies = data?.item?.compatibleBodiesAndTheirZones?.map(({ body }) => body) || []; const compatibleBodiesAndTheirZones = data?.item?.compatibleBodiesAndTheirZones || []; // If there's only one compatible body, and the canonical species's name // appears in the item name, then this is probably a species-specific item, // and we should adjust the UI to avoid implying that other species could // model it. const isProbablySpeciesSpecific = compatibleBodies.length === 1 && !compatibleBodies[0].representsAllBodies && (data?.item?.name || "").includes( data?.item?.canonicalAppearance?.body?.canonicalAppearance?.species?.name ); const couldProbablyModelMoreData = !isProbablySpeciesSpecific; // TODO: Does this double-trigger the HTTP request with SpeciesColorPicker? const { loading: loadingValids, error: errorValids, valids, } = useAllValidPetPoses(); const [hasAnimations, setHasAnimations] = React.useState(false); const [isPaused, setIsPaused] = useLocalStorage("DTIOutfitIsPaused", true); // This is like , but we can use the appearance data, too! const { appearance, preview } = useOutfitPreview({ speciesId: petState.speciesId, colorId: petState.colorId, pose: petState.pose, appearanceId: petState.appearanceId, wornItemIds: [itemId], isLoading: loadingGQL || loadingValids, spinnerVariant: "corner", engine: "canvas", onChangeHasAnimations: setHasAnimations, }); // If there's an appearance loaded for this item, but it's empty, then the // item is incompatible. (There should only be one item appearance: this one!) const itemAppearance = appearance?.itemAppearances?.[0]; const itemLayers = itemAppearance?.layers || []; const isCompatible = itemLayers.length > 0; const usesHTML5 = itemLayers.every(layerUsesHTML5); const onChange = React.useCallback( ({ speciesId, colorId }) => { const validPoses = getValidPoses(valids, speciesId, colorId); const pose = getClosestPose(validPoses, idealPose); setPetStateFromUserAction({ speciesId, colorId, pose, isValid: true, appearanceId: null, }); }, [valids, idealPose, setPetStateFromUserAction] ); const borderColor = useColorModeValue("green.700", "green.400"); const errorColor = useColorModeValue("red.600", "red.400"); const error = errorGQL || errorValids; if (error) { return {error.message}; } return ( {petState.isValid && preview} {hasAnimations && ( setIsPaused(!isPaused)} /> )} { setPetStateFromUserAction({ speciesId: species.id, colorId: color.id, pose: closestPose, isValid, appearanceId: null, }); }} speciesIsDisabled={isProbablySpeciesSpecific} size="sm" showPlaceholders /> { // Wait for us to start _requesting_ the appearance, and _then_ // for it to load, and _then_ check compatibility. !loadingGQL && !appearance.loading && petState.isValid && !isCompatible && ( ) } {compatibleBodiesAndTheirZones.length > 0 && ( )} ); } function CustomizeMoreButton({ speciesId, colorId, pose, itemId, isDisabled }) { const url = `/outfits/new?species=${speciesId}&color=${colorId}&pose=${pose}&` + `objects[]=${itemId}`; // The default background is good in light mode, but in dark mode it's a // very subtle transparent white... make it a semi-transparent black, for // better contrast against light-colored background items! const backgroundColor = useColorModeValue(undefined, "blackAlpha.700"); const backgroundColorHover = useColorModeValue(undefined, "blackAlpha.900"); return ( Customize more ); } function LinkOrButton({ href, ...props }) { if (href != null) { return