diff --git a/locale/defaultMessages.json b/locale/defaultMessages.json index 5e139efb9..a8d3eec62 100644 --- a/locale/defaultMessages.json +++ b/locale/defaultMessages.json @@ -1209,17 +1209,13 @@ "context": "channel currency", "string": "Currency" }, - "src_dot_channels_dot_components_dot_ChannelSettingsDialog_dot_1391686013": { + "src_dot_channels_dot_components_dot_ChannelPickerDialog_dot_2423186459": { "context": "dialog header", - "string": "Settings" + "string": "Select a channel" }, - "src_dot_channels_dot_components_dot_ChannelSettingsDialog_dot_2721512922": { - "context": "channel settings", - "string": "Configure the way information are presented in catalog section of Dashboard." - }, - "src_dot_channels_dot_components_dot_ChannelSettingsDialog_dot_645871430": { + "src_dot_channels_dot_components_dot_ChannelPickerDialog_dot_507892781": { "context": "select label", - "string": "Show prices for" + "string": "Channel name" }, "src_dot_channels_dot_components_dot_ChannelStatus_dot_1004218338": { "context": "inactive", 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/urls.ts b/src/orders/urls.ts index 0efa7ffde..4f5dc2128 100644 --- a/src/orders/urls.ts +++ b/src/orders/urls.ts @@ -15,6 +15,8 @@ import { const orderSectionUrl = "/orders"; +type CreateOrderDialog = "create-order"; + export const orderListPath = orderSectionUrl; export enum OrderListUrlFiltersEnum { createdFrom = "createdFrom", @@ -28,7 +30,7 @@ export enum OrderListUrlFiltersWithMultipleValuesEnum { } export type OrderListUrlFilters = Filters & FiltersWithMultipleValues; -export type OrderListUrlDialog = "cancel" | TabActionDialog; +export type OrderListUrlDialog = "cancel" | CreateOrderDialog | TabActionDialog; export enum OrderListUrlSortField { number = "number", customer = "customer", @@ -61,7 +63,10 @@ export enum OrderDraftListUrlFiltersEnum { query = "query" } export type OrderDraftListUrlFilters = Filters; -export type OrderDraftListUrlDialog = "remove" | TabActionDialog; +export type OrderDraftListUrlDialog = + | "remove" + | CreateOrderDialog + | TabActionDialog; export enum OrderDraftListUrlSortField { number = "number", customer = "customer", diff --git a/src/orders/views/OrderDraftList/OrderDraftList.tsx b/src/orders/views/OrderDraftList/OrderDraftList.tsx index cec17646c..2316c9d25 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,7 @@ export const OrderDraftList: React.FC = ({ params }) => { onCompleted: handleCreateOrderCreateSuccess }); - const { channel } = useAppChannel(); + const { channel, availableChannels } = useAppChannel(); const tabs = getFilterTabs(); @@ -196,13 +197,7 @@ export const OrderDraftList: React.FC = ({ params }) => { data.draftOrders.edges.map(edge => edge.node) )} pageInfo={pageInfo} - onAdd={() => - createOrder({ - variables: { - input: { channel: channel.id } - } - }) - } + onAdd={() => openModal("create-order")} onNextPage={loadNextPage} onPreviousPage={loadPreviousPage} onRowClick={id => () => navigate(orderUrl(id))} @@ -263,6 +258,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={params.action === "create-order"} + onClose={closeModal} + onConfirm={channel => + createOrder({ + variables: { + input: { channel } + } + }) + } + /> ); }} diff --git a/src/orders/views/OrderList/OrderList.tsx b/src/orders/views/OrderList/OrderList.tsx index 7e437fa7d..4b8a5002f 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,7 @@ export const OrderList: React.FC = ({ params }) => { onCompleted: handleCreateOrderCreateSuccess }); - const { channel } = useAppChannel(); + const { channel, availableChannels } = useAppChannel(); const tabs = getFilterTabs(); @@ -145,13 +146,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={() => openModal("create-order")} onNextPage={loadNextPage} onPreviousPage={loadPreviousPage} onUpdateListSettings={updateListSettings} @@ -179,6 +174,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={params.action === "create-order"} + onClose={closeModal} + onConfirm={channel => + createOrder({ + variables: { + input: { channel } + } + }) + } + /> ); };