fix SaleCreate view (#857)

* fix SaleCreate view

* fix SaleValue input styles, update snapshots

* add success status to create sale notification

src/discounts/components/SaleCreatePage/SaleCreatePage.tsx

@@ -8,8 +8,10 @@ import Form from "@saleor/components/Form";
 import Grid from "@saleor/components/Grid";
 import PageHeader from "@saleor/components/PageHeader";
 import SaveButtonBar from "@saleor/components/SaveButtonBar";
+import { createSaleChannelsChangeHandler } from "@saleor/discounts/handlers";
 import { DiscountErrorFragment } from "@saleor/fragments/types/DiscountErrorFragment";
 import { sectionNames } from "@saleor/intl";
+import { validatePrice } from "@saleor/products/utils/validation";
 import React from "react";
 import { useIntl } from "react-intl";
 
@@ -17,6 +19,7 @@ import { SaleType as SaleTypeEnum } from "../../../types/globalTypes";
 import DiscountDates from "../DiscountDates";
 import SaleInfo from "../SaleInfo";
 import SaleType from "../SaleType";
+import SaleValue from "../SaleValue";
 
 export interface FormData {
   channelListings: ChannelSaleData[];
@@ -37,6 +40,7 @@ export interface SaleCreatePageProps {
   errors: DiscountErrorFragment[];
   saveButtonBarState: ConfirmButtonTransitionState;
   onBack: () => void;
+  onChannelsChange: (data: ChannelSaleData[]) => void;
   openChannelsModal: () => void;
   onSubmit: (data: FormData) => void;
 }
@@ -46,6 +50,7 @@ const SaleCreatePage: React.FC<SaleCreatePageProps> = ({
   channelListings = [],
   disabled,
   errors,
+  onChannelsChange,
   onSubmit,
   openChannelsModal,
   saveButtonBarState,
@@ -66,56 +71,73 @@ const SaleCreatePage: React.FC<SaleCreatePageProps> = ({
   };
   return (
     <Form initial={initialForm} onSubmit={onSubmit}>
-      {({ change, data, hasChanged, submit }) => (
+      {({ change, data, hasChanged, submit, triggerChange }) => {
-        <Container>
+        const handleChannelChange = createSaleChannelsChangeHandler(
-          <AppHeader onBack={onBack}>
+          data.channelListings,
-            {intl.formatMessage(sectionNames.sales)}
+          onChannelsChange,
-          </AppHeader>
+          triggerChange
-          <PageHeader
+        );
-            title={intl.formatMessage({
+        const formDisabled = data.channelListings?.some(channel =>
-              defaultMessage: "Create Sale",
+          validatePrice(channel.discountValue)
-              description: "page header"
+        );
-            })}
+        return (
-          />
+          <Container>
-          <Grid>
+            <AppHeader onBack={onBack}>
-            <div>
+              {intl.formatMessage(sectionNames.sales)}
-              <SaleInfo
+            </AppHeader>
-                data={data}
+            <PageHeader
-                disabled={disabled}
+              title={intl.formatMessage({
-                errors={errors}
+                defaultMessage: "Create Sale",
-                onChange={change}
+                description: "page header"
-              />
+              })}
-              <CardSpacer />
+            />
-              <SaleType data={data} disabled={disabled} onChange={change} />
+            <Grid>
-              <CardSpacer />
+              <div>
-              <DiscountDates
+                <SaleInfo
-                data={data}
+                  data={data}
-                disabled={disabled}
+                  disabled={disabled}
-                errors={errors}
+                  errors={errors}
-                onChange={change}
+                  onChange={change}
-              />
+                />
-            </div>
+                <CardSpacer />
-            <div>
+                <SaleType data={data} disabled={disabled} onChange={change} />
-              <ChannelsAvailability
+                <CardSpacer />
-                selectedChannelsCount={data.channelListings.length}
+                <SaleValue
-                allChannelsCount={allChannelsCount}
+                  data={data}
-                channelsList={data.channelListings.map(channel => ({
+                  disabled={disabled}
-                  id: channel.id,
+                  errors={errors}
-                  name: channel.name
+                  onChange={handleChannelChange}
-                }))}
+                />
-                disabled={disabled}
+                <CardSpacer />
-                openModal={openChannelsModal}
+                <DiscountDates
-              />
+                  data={data}
-            </div>
+                  disabled={disabled}
-          </Grid>
+                  errors={errors}
-          <SaveButtonBar
+                  onChange={change}
-            disabled={disabled || !hasChanged}
+                />
-            onCancel={onBack}
+              </div>
-            onSave={submit}
+              <div>
-            state={saveButtonBarState}
+                <ChannelsAvailability
-          />
+                  selectedChannelsCount={data.channelListings.length}
-        </Container>
+                  allChannelsCount={allChannelsCount}
-      )}
+                  channelsList={data.channelListings.map(channel => ({
+                    id: channel.id,
+                    name: channel.name
+                  }))}
+                  disabled={disabled}
+                  openModal={openChannelsModal}
+                />
+              </div>
+            </Grid>
+            <SaveButtonBar
+              disabled={disabled || formDisabled || !hasChanged}
+              onCancel={onBack}
+              onSave={submit}
+              state={saveButtonBarState}
+            />
+          </Container>
+        );
+      }}
     </Form>
   );
 };

src/discounts/components/SaleValue/SaleValue.tsx

@@ -89,7 +89,7 @@ const SaleValue: React.FC<SaleValueProps> = ({
                       <TableCell>
                         <Typography>{listing?.name || <Skeleton />}</Typography>
                       </TableCell>
-                      <TableCell className={classes.colPrice}>
+                      <TableCell>
                         {listing ? (
                           <TextField
                             disabled={disabled}

src/discounts/components/SaleValue/styles.ts

@@ -12,13 +12,10 @@ export const useStyles = makeStyles(
       paddingLeft: 0,
       width: "auto"
     },
-    colPrice: {
-      minWidth: 240
-    },
     colType: {
       fontSize: 14,
       textAlign: "right",
-      width: 200
+      width: 235
     },
     info: {
       fontSize: 14

src/discounts/views/SaleCreate/SaleCreate.tsx

@@ -37,6 +37,7 @@ export const SaleDetails: React.FC = () => {
     handleChannelsModalOpen,
     isChannelSelected,
     isChannelsModalOpen,
+    setCurrentChannels,
     toggleAllChannels
   } = useChannels(allChannels);
 
@@ -45,6 +46,7 @@ export const SaleDetails: React.FC = () => {
   const handleSaleCreate = (data: SaleCreate) => {
     if (data.saleCreate.errors.length === 0) {
       pushMessage({
+        status: "success",
         text: intl.formatMessage({
           defaultMessage: "Successfully created sale"
         })
@@ -94,6 +96,7 @@ export const SaleDetails: React.FC = () => {
                 onSubmit={handleSubmit}
                 saveButtonBarState={saleCreateOpts.status}
                 openChannelsModal={handleChannelsModalOpen}
+                onChannelsChange={setCurrentChannels}
               />
             </>
           );

src/storybook/stories/discounts/SaleCreatePage.tsx

@@ -17,6 +17,7 @@ const props: SaleCreatePageProps = {
   disabled: false,
   errors: [],
   onBack: () => undefined,
+  onChannelsChange: () => undefined,
   onSubmit: () => undefined,
   openChannelsModal: () => undefined,
   saveButtonBarState: "default"