Merge pull request #849 from mirumee/SALEOR-1611-channel-choose-for-draft-orders

Create channel picker for draft order creation

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": {
+  "src_dot_channels_dot_components_dot_ChannelPickerDialog_dot_507892781": {
-    "context": "channel settings",
-    "string": "Configure the way information are presented in catalog section of Dashboard."
-  },
-  "src_dot_channels_dot_components_dot_ChannelSettingsDialog_dot_645871430": {
     "context": "select label",
-    "string": "Show prices for"
+    "string": "Channel name"
   },
   "src_dot_channels_dot_components_dot_ChannelStatus_dot_1004218338": {
     "context": "inactive",

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, {
+import ChannelPickerDialog, {
-  ChannelSettingsDialogProps
+  ChannelPickerDialogProps
-} from "./ChannelSettingsDialog";
+} 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", () => <ChannelSettingsDialog {...props} />);
+  .add("default", () => <ChannelPickerDialog {...props} />);

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<ChannelSettingsDialogProps> = ({
+const ChannelPickerDialog: React.FC<ChannelPickerDialogProps> = ({
   channelsChoices = [],
   confirmButtonState,
   defaultChoice,
@@ -40,23 +39,17 @@ const ChannelSettingsDialog: React.FC<ChannelSettingsDialogProps> = ({
       onClose={onClose}
       onConfirm={() => onConfirm(choice)}
       title={intl.formatMessage({
-        defaultMessage: "Settings",
+        defaultMessage: "Select a channel",
         description: "dialog header"
       })}
     >
       <div>
-        <Typography>
-          <FormattedMessage
-            defaultMessage="Configure the way information are presented in catalog section of Dashboard."
-            description="channel settings"
-          />
-        </Typography>
         <div className={classes.select}>
           <SingleSelectField
             choices={channelsChoices}
             name="channels"
             label={intl.formatMessage({
-              defaultMessage: "Show prices for",
+              defaultMessage: "Channel name",
               description: "select label"
             })}
             value={choice}
@@ -67,5 +60,5 @@ const ChannelSettingsDialog: React.FC<ChannelSettingsDialogProps> = ({
     </ActionDialog>
   );
 };
-ChannelSettingsDialog.displayName = "ChannelSettingsDialog";
+ChannelPickerDialog.displayName = "ChannelPickerDialog";
-export default ChannelSettingsDialog;
+export default ChannelPickerDialog;

src/channels/components/ChannelPickerDialog/index.ts

@@ -0,0 +1,2 @@
+export * from "./ChannelPickerDialog";
+export { default } from "./ChannelPickerDialog";

src/channels/components/ChannelSettingsDialog/index.ts

@@ -1,2 +0,0 @@
-export * from "./ChannelSettingsDialog";
-export { default } from "./ChannelSettingsDialog";

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<OrderListUrlFiltersEnum> &
   FiltersWithMultipleValues<OrderListUrlFiltersWithMultipleValuesEnum>;
-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<OrderDraftListUrlFiltersEnum>;
-export type OrderDraftListUrlDialog = "remove" | TabActionDialog;
+export type OrderDraftListUrlDialog =
+  | "remove"
+  | CreateOrderDialog
+  | TabActionDialog;
 export enum OrderDraftListUrlSortField {
   number = "number",
   customer = "customer",

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<OrderDraftListProps> = ({ params }) => {
     onCompleted: handleCreateOrderCreateSuccess
   });
 
-  const { channel } = useAppChannel();
+  const { channel, availableChannels } = useAppChannel();
 
   const tabs = getFilterTabs();
 
@@ -196,13 +197,7 @@ export const OrderDraftList: React.FC<OrderDraftListProps> = ({ params }) => {
                   data.draftOrders.edges.map(edge => edge.node)
                 )}
                 pageInfo={pageInfo}
-                onAdd={() =>
+                onAdd={() => openModal("create-order")}
-                  createOrder({
-                    variables: {
-                      input: { channel: channel.id }
-                    }
-                  })
-                }
                 onNextPage={loadNextPage}
                 onPreviousPage={loadPreviousPage}
                 onRowClick={id => () => navigate(orderUrl(id))}
@@ -263,6 +258,23 @@ export const OrderDraftList: React.FC<OrderDraftListProps> = ({ params }) => {
                 onSubmit={handleTabDelete}
                 tabName={maybe(() => tabs[currentTab - 1].name, "...")}
               />
+              <ChannelPickerDialog
+                channelsChoices={availableChannels.map(channel => ({
+                  label: channel.name,
+                  value: channel.id
+                }))}
+                confirmButtonState="success"
+                defaultChoice={channel.id}
+                open={params.action === "create-order"}
+                onClose={closeModal}
+                onConfirm={channel =>
+                  createOrder({
+                    variables: {
+                      input: { channel }
+                    }
+                  })
+                }
+              />
             </>
           );
         }}

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<OrderListProps> = ({ params }) => {
     onCompleted: handleCreateOrderCreateSuccess
   });
 
-  const { channel } = useAppChannel();
+  const { channel, availableChannels } = useAppChannel();
 
   const tabs = getFilterTabs();
 
@@ -145,13 +146,7 @@ export const OrderList: React.FC<OrderListProps> = ({ params }) => {
         orders={maybe(() => data.orders.edges.map(edge => edge.node))}
         pageInfo={pageInfo}
         sort={getSortParams(params)}
-        onAdd={() =>
+        onAdd={() => openModal("create-order")}
-          createOrder({
-            variables: {
-              input: { channel: channel.id }
-            }
-          })
-        }
         onNextPage={loadNextPage}
         onPreviousPage={loadPreviousPage}
         onUpdateListSettings={updateListSettings}
@@ -179,6 +174,23 @@ export const OrderList: React.FC<OrderListProps> = ({ params }) => {
         onSubmit={handleFilterTabDelete}
         tabName={getStringOrPlaceholder(tabs[currentTab - 1]?.name)}
       />
+      <ChannelPickerDialog
+        channelsChoices={availableChannels.map(channel => ({
+          label: channel.name,
+          value: channel.id
+        }))}
+        confirmButtonState="success"
+        defaultChoice={channel.id}
+        open={params.action === "create-order"}
+        onClose={closeModal}
+        onConfirm={channel =>
+          createOrder({
+            variables: {
+              input: { channel }
+            }
+          })
+        }
+      />
     </>
   );
 };