2020-07-31 16:57:37 -07:00
|
|
|
import * as React from "react";
|
2020-07-31 22:11:32 -07:00
|
|
|
import gql from "graphql-tag";
|
2020-07-31 23:00:10 -07:00
|
|
|
import { useQuery, useMutation } from "@apollo/client";
|
2020-07-31 16:57:37 -07:00
|
|
|
import {
|
|
|
|
Badge,
|
|
|
|
Box,
|
|
|
|
Drawer,
|
|
|
|
DrawerBody,
|
|
|
|
DrawerCloseButton,
|
|
|
|
DrawerContent,
|
|
|
|
DrawerHeader,
|
|
|
|
DrawerOverlay,
|
|
|
|
FormControl,
|
2020-07-31 22:11:32 -07:00
|
|
|
FormErrorMessage,
|
2020-07-31 16:57:37 -07:00
|
|
|
FormHelperText,
|
|
|
|
FormLabel,
|
|
|
|
Link,
|
|
|
|
Select,
|
2020-07-31 22:11:32 -07:00
|
|
|
Spinner,
|
|
|
|
useBreakpointValue,
|
2020-07-31 16:57:37 -07:00
|
|
|
} from "@chakra-ui/core";
|
2020-07-31 23:00:10 -07:00
|
|
|
import { CheckCircleIcon, ExternalLinkIcon } from "@chakra-ui/icons";
|
|
|
|
|
|
|
|
import useSupportSecret from "./useSupportSecret";
|
2020-07-31 16:57:37 -07:00
|
|
|
|
|
|
|
/**
|
|
|
|
* 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 }) {
|
2020-07-31 22:11:32 -07:00
|
|
|
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",
|
|
|
|
});
|
|
|
|
|
2020-07-31 16:57:37 -07:00
|
|
|
return (
|
|
|
|
<Drawer
|
2020-07-31 22:11:32 -07:00
|
|
|
placement={placement}
|
2020-07-31 16:57:37 -07:00
|
|
|
isOpen={isOpen}
|
|
|
|
onClose={onClose}
|
|
|
|
// blockScrollOnMount doesn't matter on our fullscreen UI, but the
|
|
|
|
// default implementation breaks out layout somehow 🤔 idk, let's not!
|
|
|
|
blockScrollOnMount={false}
|
|
|
|
>
|
|
|
|
<DrawerOverlay>
|
|
|
|
<DrawerContent>
|
|
|
|
<DrawerCloseButton />
|
|
|
|
<DrawerHeader>
|
|
|
|
{item.name}
|
2020-07-31 22:11:32 -07:00
|
|
|
<Badge colorScheme="pink" marginLeft="3">
|
2020-07-31 16:57:37 -07:00
|
|
|
Support <span aria-hidden="true">💖</span>
|
|
|
|
</Badge>
|
|
|
|
</DrawerHeader>
|
|
|
|
<DrawerBody>
|
|
|
|
<Box paddingBottom="5">
|
|
|
|
<SpecialColorFields item={item} />
|
|
|
|
</Box>
|
|
|
|
</DrawerBody>
|
|
|
|
</DrawerContent>
|
|
|
|
</DrawerOverlay>
|
|
|
|
</Drawer>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
function SpecialColorFields({ item }) {
|
2020-07-31 23:00:10 -07:00
|
|
|
const supportSecret = useSupportSecret();
|
|
|
|
|
2020-07-31 22:31:28 -07:00
|
|
|
const { loading, error, data } = useQuery(
|
|
|
|
gql`
|
|
|
|
query ItemSupportDrawerSpecialColorFields($itemId: ID!) {
|
|
|
|
allColors {
|
|
|
|
id
|
|
|
|
name
|
|
|
|
isStandard
|
|
|
|
}
|
|
|
|
|
|
|
|
item(id: $itemId) {
|
|
|
|
manualSpecialColor {
|
|
|
|
id
|
|
|
|
}
|
|
|
|
}
|
2020-07-31 22:11:32 -07:00
|
|
|
}
|
2020-07-31 22:31:28 -07:00
|
|
|
`,
|
|
|
|
{ variables: { itemId: item.id } }
|
|
|
|
);
|
2020-07-31 22:11:32 -07:00
|
|
|
|
2020-07-31 23:00:10 -07:00
|
|
|
const [
|
|
|
|
mutate,
|
|
|
|
{ loading: loading2, error: error2, data: data2 },
|
|
|
|
] = useMutation(gql`
|
|
|
|
mutation ItemSupportDrawerSetManualSpecialColor(
|
|
|
|
$itemId: ID!
|
|
|
|
$colorId: ID
|
|
|
|
$supportSecret: String!
|
|
|
|
) {
|
|
|
|
setManualSpecialColor(
|
|
|
|
itemId: $itemId
|
|
|
|
colorId: $colorId
|
|
|
|
supportSecret: $supportSecret
|
|
|
|
) {
|
|
|
|
manualSpecialColor {
|
|
|
|
__typename
|
|
|
|
id
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
`);
|
|
|
|
|
2020-07-31 22:11:32 -07:00
|
|
|
const nonStandardColors = data?.allColors?.filter((c) => !c.isStandard) || [];
|
|
|
|
nonStandardColors.sort((a, b) => a.name.localeCompare(b.name));
|
|
|
|
|
2020-07-31 16:57:37 -07:00
|
|
|
return (
|
2020-07-31 22:11:32 -07:00
|
|
|
<FormControl isInvalid={error ? true : false}>
|
2020-07-31 16:57:37 -07:00
|
|
|
<FormLabel>Special color</FormLabel>
|
2020-07-31 22:11:32 -07:00
|
|
|
<Select
|
2020-07-31 22:31:28 -07:00
|
|
|
placeholder={
|
|
|
|
loading ? "Loading…" : "Default: Auto-detect from item description"
|
|
|
|
}
|
2020-07-31 23:00:10 -07:00
|
|
|
icon={
|
|
|
|
loading || loading2 ? (
|
|
|
|
<Spinner />
|
|
|
|
) : data2 ? (
|
|
|
|
<CheckCircleIcon />
|
|
|
|
) : undefined
|
|
|
|
}
|
2020-07-31 22:31:28 -07:00
|
|
|
value={data?.item?.manualSpecialColor?.id}
|
2020-07-31 23:00:10 -07:00
|
|
|
onChange={(e) => {
|
|
|
|
const colorId = e.target.value;
|
|
|
|
const color =
|
|
|
|
colorId != null ? { __typename: "Color", id: colorId } : null;
|
|
|
|
console.log({
|
|
|
|
__typename: "Mutation",
|
|
|
|
setManualSpecialColor: {
|
|
|
|
__typename: "Item",
|
|
|
|
id: item.id,
|
|
|
|
manualSpecialColor: color,
|
|
|
|
},
|
|
|
|
});
|
|
|
|
mutate({
|
|
|
|
variables: {
|
|
|
|
itemId: item.id,
|
|
|
|
colorId,
|
|
|
|
supportSecret,
|
|
|
|
},
|
|
|
|
optimisticResponse: {
|
|
|
|
__typename: "Mutation",
|
|
|
|
setManualSpecialColor: {
|
|
|
|
__typename: "Item",
|
|
|
|
id: item.id,
|
|
|
|
manualSpecialColor: color,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
});
|
|
|
|
}}
|
2020-07-31 22:11:32 -07:00
|
|
|
>
|
|
|
|
{nonStandardColors.map((color) => (
|
|
|
|
<option key={color.id} value={color.id}>
|
|
|
|
{color.name}
|
|
|
|
</option>
|
|
|
|
))}
|
2020-07-31 16:57:37 -07:00
|
|
|
</Select>
|
2020-07-31 22:11:32 -07:00
|
|
|
{error && <FormErrorMessage>{error.message}</FormErrorMessage>}
|
2020-07-31 23:00:10 -07:00
|
|
|
{error2 && <FormErrorMessage>{error2.message}</FormErrorMessage>}
|
2020-07-31 22:11:32 -07:00
|
|
|
{!error && (
|
|
|
|
<FormHelperText>
|
|
|
|
This controls which previews we show on the{" "}
|
|
|
|
<Link
|
|
|
|
href={`https://impress.openneo.net/items/${
|
|
|
|
item.id
|
|
|
|
}-${item.name.replace(/ /g, "-")}`}
|
|
|
|
color="green.500"
|
|
|
|
isExternal
|
|
|
|
>
|
|
|
|
item page <ExternalLinkIcon />
|
|
|
|
</Link>
|
|
|
|
.
|
|
|
|
</FormHelperText>
|
|
|
|
)}
|
2020-07-31 16:57:37 -07:00
|
|
|
</FormControl>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
export default ItemSupportDrawer;
|