diff --git a/src/channels/components/ChannelSettingsDialog/ChannelSettingsDialog.stories.tsx b/src/channels/components/ChannelPickerDialog/ChannelPickerDialog.stories.tsx similarity index 72% rename from src/channels/components/ChannelSettingsDialog/ChannelSettingsDialog.stories.tsx rename to src/channels/components/ChannelPickerDialog/ChannelPickerDialog.stories.tsx index e85b9c563..ccdf2f594 100644 --- a/src/channels/components/ChannelSettingsDialog/ChannelSettingsDialog.stories.tsx +++ b/src/channels/components/ChannelPickerDialog/ChannelPickerDialog.stories.tsx @@ -3,16 +3,16 @@ import { storiesOf } from "@storybook/react"; import React from "react"; import { channelsList } from "../../fixtures"; -import ChannelSettingsDialog, { - ChannelSettingsDialogProps -} from "./ChannelSettingsDialog"; +import ChannelPickerDialog, { + ChannelPickerDialogProps +} from "./ChannelPickerDialog"; const channelsChoices = channelsList.map(channel => ({ label: channel.name, value: channel.id })); -const props: ChannelSettingsDialogProps = { +const props: ChannelPickerDialogProps = { channelsChoices, confirmButtonState: "default", defaultChoice: channelsChoices[0]?.value, @@ -23,4 +23,4 @@ const props: ChannelSettingsDialogProps = { storiesOf("Views / Channels / Settings dialog", module) .addDecorator(Decorator) - .add("default", () => ); + .add("default", () => ); diff --git a/src/channels/components/ChannelSettingsDialog/ChannelSettingsDialog.tsx b/src/channels/components/ChannelPickerDialog/ChannelPickerDialog.tsx similarity index 68% rename from src/channels/components/ChannelSettingsDialog/ChannelSettingsDialog.tsx rename to src/channels/components/ChannelPickerDialog/ChannelPickerDialog.tsx index 3e524a1f0..2d1efdf00 100644 --- a/src/channels/components/ChannelSettingsDialog/ChannelSettingsDialog.tsx +++ b/src/channels/components/ChannelPickerDialog/ChannelPickerDialog.tsx @@ -1,4 +1,3 @@ -import Typography from "@material-ui/core/Typography"; import ActionDialog from "@saleor/components/ActionDialog"; import { ConfirmButtonTransitionState } from "@saleor/components/ConfirmButton"; import { @@ -6,11 +5,11 @@ import { SingleSelectField } from "@saleor/components/SingleSelectField"; import React, { useState } from "react"; -import { FormattedMessage, useIntl } from "react-intl"; +import { useIntl } from "react-intl"; import { useStyles } from "../styles"; -export interface ChannelSettingsDialogProps { +export interface ChannelPickerDialogProps { channelsChoices: Choices; confirmButtonState: ConfirmButtonTransitionState; defaultChoice: string; @@ -19,7 +18,7 @@ export interface ChannelSettingsDialogProps { onConfirm: (choice: string) => void; } -const ChannelSettingsDialog: React.FC = ({ +const ChannelPickerDialog: React.FC = ({ channelsChoices = [], confirmButtonState, defaultChoice, @@ -40,23 +39,17 @@ const ChannelSettingsDialog: React.FC = ({ onClose={onClose} onConfirm={() => onConfirm(choice)} title={intl.formatMessage({ - defaultMessage: "Settings", + defaultMessage: "Select a channel", description: "dialog header" })} >
- - -
= ({ ); }; -ChannelSettingsDialog.displayName = "ChannelSettingsDialog"; -export default ChannelSettingsDialog; +ChannelPickerDialog.displayName = "ChannelPickerDialog"; +export default ChannelPickerDialog; diff --git a/src/channels/components/ChannelPickerDialog/index.ts b/src/channels/components/ChannelPickerDialog/index.ts new file mode 100644 index 000000000..01808f5fb --- /dev/null +++ b/src/channels/components/ChannelPickerDialog/index.ts @@ -0,0 +1,2 @@ +export * from "./ChannelPickerDialog"; +export { default } from "./ChannelPickerDialog"; diff --git a/src/channels/components/ChannelSettingsDialog/index.ts b/src/channels/components/ChannelSettingsDialog/index.ts deleted file mode 100644 index 2800c3c09..000000000 --- a/src/channels/components/ChannelSettingsDialog/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from "./ChannelSettingsDialog"; -export { default } from "./ChannelSettingsDialog"; diff --git a/src/orders/views/OrderDraftList/OrderDraftList.tsx b/src/orders/views/OrderDraftList/OrderDraftList.tsx index cec17646c..58cd3e31b 100644 --- a/src/orders/views/OrderDraftList/OrderDraftList.tsx +++ b/src/orders/views/OrderDraftList/OrderDraftList.tsx @@ -1,6 +1,7 @@ import DialogContentText from "@material-ui/core/DialogContentText"; import IconButton from "@material-ui/core/IconButton"; import DeleteIcon from "@material-ui/icons/Delete"; +import ChannelPickerDialog from "@saleor/channels/components/ChannelPickerDialog"; import ActionDialog from "@saleor/components/ActionDialog"; import useAppChannel from "@saleor/components/AppLayout/AppChannelContext"; import DeleteFilterTabDialog from "@saleor/components/DeleteFilterTabDialog"; @@ -79,7 +80,10 @@ export const OrderDraftList: React.FC = ({ params }) => { onCompleted: handleCreateOrderCreateSuccess }); - const { channel } = useAppChannel(); + const { channel, availableChannels } = useAppChannel(); + const [channelPickerDialogOpen, setChannelPickerDialogOpen] = React.useState( + false + ); const tabs = getFilterTabs(); @@ -196,13 +200,7 @@ export const OrderDraftList: React.FC = ({ params }) => { data.draftOrders.edges.map(edge => edge.node) )} pageInfo={pageInfo} - onAdd={() => - createOrder({ - variables: { - input: { channel: channel.id } - } - }) - } + onAdd={() => setChannelPickerDialogOpen(true)} onNextPage={loadNextPage} onPreviousPage={loadPreviousPage} onRowClick={id => () => navigate(orderUrl(id))} @@ -263,6 +261,23 @@ export const OrderDraftList: React.FC = ({ params }) => { onSubmit={handleTabDelete} tabName={maybe(() => tabs[currentTab - 1].name, "...")} /> + ({ + label: channel.name, + value: channel.id + }))} + confirmButtonState="success" + defaultChoice={channel.id} + open={channelPickerDialogOpen} + onClose={() => setChannelPickerDialogOpen(false)} + onConfirm={channel => + createOrder({ + variables: { + input: { channel } + } + }) + } + /> ); }} diff --git a/src/orders/views/OrderList/OrderList.tsx b/src/orders/views/OrderList/OrderList.tsx index 7e437fa7d..ba2018e4b 100644 --- a/src/orders/views/OrderList/OrderList.tsx +++ b/src/orders/views/OrderList/OrderList.tsx @@ -1,3 +1,4 @@ +import ChannelPickerDialog from "@saleor/channels/components/ChannelPickerDialog"; import useAppChannel from "@saleor/components/AppLayout/AppChannelContext"; import DeleteFilterTabDialog from "@saleor/components/DeleteFilterTabDialog"; import SaveFilterTabDialog, { @@ -67,7 +68,10 @@ export const OrderList: React.FC = ({ params }) => { onCompleted: handleCreateOrderCreateSuccess }); - const { channel } = useAppChannel(); + const { channel, availableChannels } = useAppChannel(); + const [channelPickerDialogOpen, setChannelPickerDialogOpen] = React.useState( + false + ); const tabs = getFilterTabs(); @@ -145,13 +149,7 @@ export const OrderList: React.FC = ({ params }) => { orders={maybe(() => data.orders.edges.map(edge => edge.node))} pageInfo={pageInfo} sort={getSortParams(params)} - onAdd={() => - createOrder({ - variables: { - input: { channel: channel.id } - } - }) - } + onAdd={() => setChannelPickerDialogOpen(true)} onNextPage={loadNextPage} onPreviousPage={loadPreviousPage} onUpdateListSettings={updateListSettings} @@ -179,6 +177,23 @@ export const OrderList: React.FC = ({ params }) => { onSubmit={handleFilterTabDelete} tabName={getStringOrPlaceholder(tabs[currentTab - 1]?.name)} /> + ({ + label: channel.name, + value: channel.id + }))} + confirmButtonState="success" + defaultChoice={channel.id} + open={channelPickerDialogOpen} + onClose={() => setChannelPickerDialogOpen(false)} + onConfirm={channel => + createOrder({ + variables: { + input: { channel } + } + }) + } + /> ); };