From cf7329ccce07af0b9e68c098a85f4df248e3100f Mon Sep 17 00:00:00 2001 From: Jakub Majorek Date: Fri, 20 Nov 2020 17:09:28 +0100 Subject: [PATCH 1/3] [1611] Create channel picker for draft order creation --- .../ChannelPickerDialog.stories.tsx} | 10 +++--- .../ChannelPickerDialog.tsx} | 21 +++++-------- .../components/ChannelPickerDialog/index.ts | 2 ++ .../components/ChannelSettingsDialog/index.ts | 2 -- .../views/OrderDraftList/OrderDraftList.tsx | 31 ++++++++++++++----- src/orders/views/OrderList/OrderList.tsx | 31 ++++++++++++++----- 6 files changed, 60 insertions(+), 37 deletions(-) rename src/channels/components/{ChannelSettingsDialog/ChannelSettingsDialog.stories.tsx => ChannelPickerDialog/ChannelPickerDialog.stories.tsx} (72%) rename src/channels/components/{ChannelSettingsDialog/ChannelSettingsDialog.tsx => ChannelPickerDialog/ChannelPickerDialog.tsx} (68%) create mode 100644 src/channels/components/ChannelPickerDialog/index.ts delete mode 100644 src/channels/components/ChannelSettingsDialog/index.ts 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 } + } + }) + } + /> ); }; From da7add51b09c6782386dbf2ac2153d6026aced04 Mon Sep 17 00:00:00 2001 From: Jakub Majorek Date: Mon, 23 Nov 2020 09:12:22 +0100 Subject: [PATCH 2/3] [1611] Update messages --- locale/defaultMessages.json | 12 ++++-------- 1 file changed, 4 insertions(+), 8 deletions(-) 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", From 4eb628018da51f1a4d2a89edb957170e5be4e436 Mon Sep 17 00:00:00 2001 From: Jakub Majorek Date: Mon, 23 Nov 2020 11:56:08 +0100 Subject: [PATCH 3/3] [1611] Use modal action query params --- src/orders/urls.ts | 9 +++++++-- src/orders/views/OrderDraftList/OrderDraftList.tsx | 9 +++------ src/orders/views/OrderList/OrderList.tsx | 9 +++------ 3 files changed, 13 insertions(+), 14 deletions(-) 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 58cd3e31b..2316c9d25 100644 --- a/src/orders/views/OrderDraftList/OrderDraftList.tsx +++ b/src/orders/views/OrderDraftList/OrderDraftList.tsx @@ -81,9 +81,6 @@ export const OrderDraftList: React.FC = ({ params }) => { }); const { channel, availableChannels } = useAppChannel(); - const [channelPickerDialogOpen, setChannelPickerDialogOpen] = React.useState( - false - ); const tabs = getFilterTabs(); @@ -200,7 +197,7 @@ export const OrderDraftList: React.FC = ({ params }) => { data.draftOrders.edges.map(edge => edge.node) )} pageInfo={pageInfo} - onAdd={() => setChannelPickerDialogOpen(true)} + onAdd={() => openModal("create-order")} onNextPage={loadNextPage} onPreviousPage={loadPreviousPage} onRowClick={id => () => navigate(orderUrl(id))} @@ -268,8 +265,8 @@ export const OrderDraftList: React.FC = ({ params }) => { }))} confirmButtonState="success" defaultChoice={channel.id} - open={channelPickerDialogOpen} - onClose={() => setChannelPickerDialogOpen(false)} + open={params.action === "create-order"} + onClose={closeModal} onConfirm={channel => createOrder({ variables: { diff --git a/src/orders/views/OrderList/OrderList.tsx b/src/orders/views/OrderList/OrderList.tsx index ba2018e4b..4b8a5002f 100644 --- a/src/orders/views/OrderList/OrderList.tsx +++ b/src/orders/views/OrderList/OrderList.tsx @@ -69,9 +69,6 @@ export const OrderList: React.FC = ({ params }) => { }); const { channel, availableChannels } = useAppChannel(); - const [channelPickerDialogOpen, setChannelPickerDialogOpen] = React.useState( - false - ); const tabs = getFilterTabs(); @@ -149,7 +146,7 @@ export const OrderList: React.FC = ({ params }) => { orders={maybe(() => data.orders.edges.map(edge => edge.node))} pageInfo={pageInfo} sort={getSortParams(params)} - onAdd={() => setChannelPickerDialogOpen(true)} + onAdd={() => openModal("create-order")} onNextPage={loadNextPage} onPreviousPage={loadPreviousPage} onUpdateListSettings={updateListSettings} @@ -184,8 +181,8 @@ export const OrderList: React.FC = ({ params }) => { }))} confirmButtonState="success" defaultChoice={channel.id} - open={channelPickerDialogOpen} - onClose={() => setChannelPickerDialogOpen(false)} + open={params.action === "create-order"} + onClose={closeModal} onConfirm={channel => createOrder({ variables: {