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,7 +71,16 @@ const SaleCreatePage: React.FC<SaleCreatePageProps> = ({
   };
   return (
     <Form initial={initialForm} onSubmit={onSubmit}>
-      {({ change, data, hasChanged, submit }) => (
+      {({ change, data, hasChanged, submit, triggerChange }) => {
+        const handleChannelChange = createSaleChannelsChangeHandler(
+          data.channelListings,
+          onChannelsChange,
+          triggerChange
+        );
+        const formDisabled = data.channelListings?.some(channel =>
+          validatePrice(channel.discountValue)
+        );
+        return (
           <Container>
             <AppHeader onBack={onBack}>
               {intl.formatMessage(sectionNames.sales)}
@@ -88,6 +102,13 @@ const SaleCreatePage: React.FC<SaleCreatePageProps> = ({
                 <CardSpacer />
                 <SaleType data={data} disabled={disabled} onChange={change} />
                 <CardSpacer />
+                <SaleValue
+                  data={data}
+                  disabled={disabled}
+                  errors={errors}
+                  onChange={handleChannelChange}
+                />
+                <CardSpacer />
                 <DiscountDates
                   data={data}
                   disabled={disabled}
@@ -109,13 +130,14 @@ const SaleCreatePage: React.FC<SaleCreatePageProps> = ({
               </div>
             </Grid>
             <SaveButtonBar
-            disabled={disabled || !hasChanged}
+              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"