From e018ea5b7d08f3880df2d93dd5ce7b17e894f06a Mon Sep 17 00:00:00 2001 From: Wojciech Mista Date: Tue, 28 Sep 2021 09:06:05 +0200 Subject: [PATCH] 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 --- .../components/SaleValue/SaleValue.tsx | 34 +++----- .../SaleValue/SaleValueTextField.tsx | 79 +++++++++++++++++++ src/discounts/components/SaleValue/types.ts | 4 + src/discounts/handlers.ts | 2 +- 4 files changed, 94 insertions(+), 25 deletions(-) create mode 100644 src/discounts/components/SaleValue/SaleValueTextField.tsx create mode 100644 src/discounts/components/SaleValue/types.ts diff --git a/src/discounts/components/SaleValue/SaleValue.tsx b/src/discounts/components/SaleValue/SaleValue.tsx index 882eb763c..9f5a6ecdf 100644 --- a/src/discounts/components/SaleValue/SaleValue.tsx +++ b/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 = ({ errors, onChange }) => { + const { type } = data; const intl = useIntl(); const classes = useStyles({}); const formErrors = getFormErrors(["value"], errors); @@ -93,8 +94,8 @@ const SaleValue: React.FC = ({ {listing ? ( - = ({ ) : "" } - name="value" - onChange={e => onChange(listing.id, e.target.value)} - label={intl.formatMessage({ - defaultMessage: "Discount Value", - description: "sale discount" - })} - value={listing.discountValue || ""} - type="number" - fullWidth - inputProps={{ - min: 0 - }} - InputProps={{ - endAdornment: - data.type === SaleType.FIXED - ? listing.currency - : "%" - }} + disabled={disabled} + listing={listing} + onChange={onChange} /> ) : ( diff --git a/src/discounts/components/SaleValue/SaleValueTextField.tsx b/src/discounts/components/SaleValue/SaleValueTextField.tsx new file mode 100644 index 000000000..d149096f7 --- /dev/null +++ b/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 = ({ + 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 ( + { + 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; diff --git a/src/discounts/components/SaleValue/types.ts b/src/discounts/components/SaleValue/types.ts new file mode 100644 index 000000000..f6a7e5e75 --- /dev/null +++ b/src/discounts/components/SaleValue/types.ts @@ -0,0 +1,4 @@ +export type SaleValueInputChangeType = ( + channelId: string, + discountValue: string +) => void; diff --git a/src/discounts/handlers.ts b/src/discounts/handlers.ts index adabf9910..26698f676 100644 --- a/src/discounts/handlers.ts +++ b/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);