Change values in create sale page when percentage/fixed amount is switched (#1431)

* WIP

* Fix get sale channel bug

* Add sale value field text

* Extract logic to useEffect

* Code cleanup

src/discounts/components/SaleValue/SaleValue.tsx

@@ -4,7 +4,6 @@ import {
   TableBody,
   TableCell,
   TableRow,
-  TextField,
   Typography
 } from "@material-ui/core";
 import CardTitle from "@saleor/components/CardTitle";
@@ -13,20 +12,21 @@ import Skeleton from "@saleor/components/Skeleton";
 import TableHead from "@saleor/components/TableHead";
 import { DiscountErrorFragment } from "@saleor/fragments/types/DiscountErrorFragment";
 import { renderCollection } from "@saleor/misc";
-import { SaleType } from "@saleor/types/globalTypes";
 import { getFormErrors } from "@saleor/utils/errors";
 import getDiscountErrorMessage from "@saleor/utils/errors/discounts";
-import React from "react";
+import * as React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
 import { SaleDetailsPageFormData } from "../SaleDetailsPage";
+import SaleValueTextField from "./SaleValueTextField";
 import { useStyles } from "./styles";
+import { SaleValueInputChangeType } from "./types";
 
 export interface SaleValueProps {
   data: SaleDetailsPageFormData;
   disabled: boolean;
   errors: DiscountErrorFragment[];
-  onChange: (channelId: string, discountValue: string) => void;
+  onChange: SaleValueInputChangeType;
 }
 
 const numberOfColumns = 2;
@@ -37,6 +37,7 @@ const SaleValue: React.FC<SaleValueProps> = ({
   errors,
   onChange
 }) => {
+  const { type } = data;
   const intl = useIntl();
   const classes = useStyles({});
   const formErrors = getFormErrors(["value"], errors);
@@ -93,8 +94,8 @@ const SaleValue: React.FC<SaleValueProps> = ({
                       </TableCell>
                       <TableCell>
                         {listing ? (
-                          <TextField
+                          <SaleValueTextField
-                            disabled={disabled}
+                            dataType={type}
                             helperText={
                               error
                                 ? getDiscountErrorMessage(
@@ -103,24 +104,9 @@ const SaleValue: React.FC<SaleValueProps> = ({
                                   )
                                 : ""
                             }
-                            name="value"
+                            disabled={disabled}
-                            onChange={e => onChange(listing.id, e.target.value)}
+                            listing={listing}
-                            label={intl.formatMessage({
+                            onChange={onChange}
-                              defaultMessage: "Discount Value",
-                              description: "sale discount"
-                            })}
-                            value={listing.discountValue || ""}
-                            type="number"
-                            fullWidth
-                            inputProps={{
-                              min: 0
-                            }}
-                            InputProps={{
-                              endAdornment:
-                                data.type === SaleType.FIXED
-                                  ? listing.currency
-                                  : "%"
-                            }}
                           />
                         ) : (
                           <Skeleton />

src/discounts/components/SaleValue/SaleValueTextField.tsx

@@ -0,0 +1,79 @@
+import { TextField } from "@material-ui/core";
+import { ChannelSaleData } from "@saleor/channels/utils";
+import { SaleType } from "@saleor/types/globalTypes";
+import React from "react";
+import { useEffect, useState } from "react";
+import { useIntl } from "react-intl";
+
+import { SaleValueInputChangeType } from "./types";
+
+interface SaleValueTextFieldProps {
+  dataType: keyof typeof SaleType;
+  helperText: string;
+  disabled: boolean;
+  listing: ChannelSaleData;
+  onChange: SaleValueInputChangeType;
+}
+
+const SaleValueTextField: React.FC<SaleValueTextFieldProps> = ({
+  dataType,
+  helperText,
+  disabled,
+  listing,
+  onChange
+}) => {
+  const intl = useIntl();
+
+  const [fixedValue, setFixedValue] = useState("");
+  const [percentageValue, setPercentageValue] = useState("");
+
+  const handleChange = (value: string) => {
+    onChange(listing.id, value);
+  };
+
+  const setCurrentValue = (value: string) => {
+    if (dataType === SaleType.PERCENTAGE) {
+      setPercentageValue(value);
+    } else {
+      setFixedValue(value);
+    }
+  };
+
+  useEffect(() => {
+    setCurrentValue(listing.discountValue);
+  }, []);
+
+  useEffect(() => {
+    handleChange(getTextFieldValue());
+  }, [dataType]);
+
+  const getTextFieldValue = () =>
+    dataType === SaleType.PERCENTAGE ? percentageValue : fixedValue;
+
+  return (
+    <TextField
+      disabled={disabled}
+      helperText={helperText || ""}
+      name="value"
+      onChange={e => {
+        handleChange(e.target.value);
+        setCurrentValue(e.target.value);
+      }}
+      label={intl.formatMessage({
+        defaultMessage: "Discount Value",
+        description: "sale discount"
+      })}
+      value={getTextFieldValue()}
+      type="number"
+      fullWidth
+      inputProps={{
+        min: 0
+      }}
+      InputProps={{
+        endAdornment: dataType === SaleType.FIXED ? listing.currency : "%"
+      }}
+    />
+  );
+};
+
+export default SaleValueTextField;

src/discounts/components/SaleValue/types.ts

@@ -0,0 +1,4 @@
+export type SaleValueInputChangeType = (
+  channelId: string,
+  discountValue: string
+) => void;

src/discounts/handlers.ts

@@ -129,7 +129,7 @@ export const getSaleChannelsVariables = (
   formData: SaleDetailsPageFormData,
   prevChannels?: ChannelSaleData[]
 ) => {
-  const initialIds = prevChannels.map(channel => channel.id);
+  const initialIds = prevChannels?.map(channel => channel.id) || [];
   const modifiedIds = formData.channelListings.map(channel => channel.id);
 
   const idsDiff = arrayDiff(initialIds, modifiedIds);