import * as React from "react";
import gql from "graphql-tag";
import { useQuery, useMutation } from "@apollo/client";
import {
Badge,
Box,
Drawer,
DrawerBody,
DrawerCloseButton,
DrawerContent,
DrawerHeader,
DrawerOverlay,
FormControl,
FormErrorMessage,
FormHelperText,
FormLabel,
Link,
Select,
Spinner,
useBreakpointValue,
} from "@chakra-ui/core";
import { CheckCircleIcon, ExternalLinkIcon } from "@chakra-ui/icons";
import useSupportSecret from "./useSupportSecret";
/**
* ItemSupportDrawer shows Support UI for the item when open.
*
* This component controls the drawer element. The actual content is imported
* from another lazy-loaded component!
*/
function ItemSupportDrawer({ item, isOpen, onClose }) {
const placement = useBreakpointValue({
base: "bottom",
lg: "right",
// TODO: There's a bug in the Chakra RC that doesn't read the breakpoint
// specification correctly - we need these extra keys until it's fixed!
// https://github.com/chakra-ui/chakra-ui/issues/1444
0: "bottom",
1: "bottom",
2: "right",
3: "right",
});
return (
{item.name}
Support 💖
);
}
function SpecialColorFields({ item }) {
const supportSecret = useSupportSecret();
const { loading: itemLoading, error: itemError, data: itemData } = useQuery(
gql`
query ItemSupportDrawerManualSpecialColor($itemId: ID!) {
item(id: $itemId) {
id
manualSpecialColor {
id
}
}
}
`,
{ variables: { itemId: item.id } }
);
const {
loading: colorsLoading,
error: colorsError,
data: colorsData,
} = useQuery(
gql`
query ItemSupportDrawerAllColors {
allColors {
id
name
isStandard
}
}
`
);
const [
mutate,
{ loading: mutationLoading, error: mutationError, data: mutationData },
] = useMutation(gql`
mutation ItemSupportDrawerSetManualSpecialColor(
$itemId: ID!
$colorId: ID
$supportSecret: String!
) {
setManualSpecialColor(
itemId: $itemId
colorId: $colorId
supportSecret: $supportSecret
) {
id
manualSpecialColor {
id
}
}
}
`);
const nonStandardColors =
colorsData?.allColors?.filter((c) => !c.isStandard) || [];
nonStandardColors.sort((a, b) => a.name.localeCompare(b.name));
return (
Special color
) : mutationData ? (
) : undefined
}
onChange={(e) => {
const colorId = e.target.value || null;
const color =
colorId != null ? { __typename: "Color", id: colorId } : null;
mutate({
variables: {
itemId: item.id,
colorId,
supportSecret,
},
optimisticResponse: {
__typename: "Mutation",
setManualSpecialColor: {
__typename: "Item",
id: item.id,
manualSpecialColor: color,
},
},
});
}}
>
{nonStandardColors.map((color) => (
))}
{colorsError && (
{colorsError.message}
)}
{itemError && {itemError.message}}
{mutationError && (
{mutationError.message}
)}
{!colorsError && !itemError && !mutationError && (
This controls which previews we show on the{" "}
item page
.
)}
);
}
export default ItemSupportDrawer;