From 99d0053b206474028da384d70f5f6c84f6c294ae Mon Sep 17 00:00:00 2001 From: dominik-zeglen Date: Thu, 10 Oct 2019 14:45:25 +0200 Subject: [PATCH 1/6] Fix RadioGroupField styling --- .../RadioGroupField/RadioGroupField.tsx | 125 ++++++++-------- .../SaleDetailsPage/SaleDetailsPage.tsx | 16 +- .../components/SalePricing/SalePricing.tsx | 138 ------------------ src/discounts/components/SalePricing/index.ts | 2 - .../components/SaleType/SaleType.tsx | 84 +++++++++++ src/discounts/components/SaleType/index.ts | 2 + .../components/SaleValue/SaleValue.tsx | 0 src/discounts/components/SaleValue/index.ts | 2 + .../VoucherRequirements.tsx | 4 +- .../components/VoucherValue/VoucherValue.tsx | 31 ++-- src/theme.ts | 5 +- 11 files changed, 187 insertions(+), 222 deletions(-) delete mode 100644 src/discounts/components/SalePricing/SalePricing.tsx delete mode 100644 src/discounts/components/SalePricing/index.ts create mode 100644 src/discounts/components/SaleType/SaleType.tsx create mode 100644 src/discounts/components/SaleType/index.ts create mode 100644 src/discounts/components/SaleValue/SaleValue.tsx create mode 100644 src/discounts/components/SaleValue/index.ts diff --git a/src/components/RadioGroupField/RadioGroupField.tsx b/src/components/RadioGroupField/RadioGroupField.tsx index 85d3f3ad4..725e982e9 100644 --- a/src/components/RadioGroupField/RadioGroupField.tsx +++ b/src/components/RadioGroupField/RadioGroupField.tsx @@ -5,28 +5,39 @@ import FormLabel from "@material-ui/core/FormLabel"; import MenuItem from "@material-ui/core/MenuItem"; import Radio from "@material-ui/core/Radio"; import RadioGroup from "@material-ui/core/RadioGroup"; -import { createStyles, withStyles, WithStyles } from "@material-ui/core/styles"; +import { Theme } from "@material-ui/core/styles"; +import { makeStyles } from "@material-ui/styles"; import classNames from "classnames"; import React from "react"; import { FormattedMessage } from "react-intl"; -const styles = createStyles({ - formControl: { - padding: 0, - width: "100%" - }, - formLabel: { - marginLeft: "-5px", - paddingBottom: "10px" - }, - radioLabel: { - "& > span": { - padding: "6px" +const useStyles = makeStyles( + (theme: Theme) => ({ + formLabel: { + marginBottom: theme.spacing.unit + }, + radioLabel: { + marginBottom: -theme.spacing.unit * 1.5 + }, + root: { + "& $radioLabel": { + "&:last-of-type": { + marginBottom: 0 + } + }, + padding: 0, + width: "100%" + }, + rootNoLabel: { + marginTop: -theme.spacing.unit * 1.5 } + }), + { + name: "RadioGroupField" } -}); +); -interface RadioGroupFieldChoice { +export interface RadioGroupFieldChoice { value: string; label: React.ReactNode; } @@ -39,16 +50,13 @@ interface RadioGroupFieldProps { hint?: string; label?: string; name?: string; - value?: string; + value: string; onChange: (event: React.ChangeEvent) => void; } -export const RadioGroupField = withStyles(styles, { - name: "RadioGroupField" -})( - ({ +export const RadioGroupField: React.FC = props => { + const { className, - classes, disabled, error, label, @@ -57,42 +65,45 @@ export const RadioGroupField = withStyles(styles, { onChange, name, hint - }: RadioGroupFieldProps & WithStyles) => { - return ( - + {label ? ( + {label} + ) : null} + - {label ? ( - {label} - ) : null} - - {choices.length > 0 ? ( - choices.map(choice => ( - } - label={choice.label} - key={choice.value} - /> - )) - ) : ( - - - - )} - - {hint && {hint}} - - ); - } -); + {choices.length > 0 ? ( + choices.map(choice => ( + } + label={choice.label} + key={choice.value} + /> + )) + ) : ( + + + + )} + + {hint && {hint}} + + ); +}; RadioGroupField.displayName = "RadioGroupField"; export default RadioGroupField; diff --git a/src/discounts/components/SaleDetailsPage/SaleDetailsPage.tsx b/src/discounts/components/SaleDetailsPage/SaleDetailsPage.tsx index 83f361676..870c50362 100644 --- a/src/discounts/components/SaleDetailsPage/SaleDetailsPage.tsx +++ b/src/discounts/components/SaleDetailsPage/SaleDetailsPage.tsx @@ -13,21 +13,21 @@ import { Tab, TabContainer } from "@saleor/components/Tab"; import { sectionNames } from "@saleor/intl"; import { maybe } from "../../../misc"; import { ListProps, TabListActions, UserError } from "../../../types"; -import { SaleType } from "../../../types/globalTypes"; +import { SaleType as SaleTypeEnum } from "../../../types/globalTypes"; import { SaleDetails_sale } from "../../types/SaleDetails"; import DiscountCategories from "../DiscountCategories"; import DiscountCollections from "../DiscountCollections"; import DiscountProducts from "../DiscountProducts"; import SaleInfo from "../SaleInfo"; -import SalePricing from "../SalePricing"; import SaleSummary from "../SaleSummary"; +import SaleType from "../SaleType"; export interface FormData { name: string; startDate: string; endDate: string; value: string; - type: SaleType; + type: SaleTypeEnum; } export enum SaleDetailsPageTab { @@ -109,7 +109,7 @@ const SaleDetailsPage: React.StatelessComponent = ({ endDate: maybe(() => (sale.endDate ? sale.endDate : ""), ""), name: maybe(() => sale.name, ""), startDate: maybe(() => sale.startDate, ""), - type: maybe(() => sale.type, SaleType.FIXED), + type: maybe(() => sale.type, SaleTypeEnum.FIXED), value: maybe(() => sale.value.toString(), "") }; return ( @@ -129,13 +129,7 @@ const SaleDetailsPage: React.StatelessComponent = ({ onChange={change} /> - + ; - onChange: (event: React.ChangeEvent) => void; -} - -const styles = (theme: Theme) => - createStyles({ - root: { - display: "grid", - gridColumnGap: theme.spacing.unit * 2 + "px", - gridTemplateColumns: "1fr 1fr" - }, - subheading: { - gridColumnEnd: "span 2", - marginBottom: theme.spacing.unit * 2 - } - }); - -const SalePricing = withStyles(styles, { - name: "SalePricing" -})( - ({ - classes, - data, - defaultCurrency, - disabled, - errors, - onChange - }: SalePricingProps & WithStyles) => { - const intl = useIntl(); - - return ( - - - - - -
- - - - - - - - - ); - } -); -SalePricing.displayName = "SalePricing"; -export default SalePricing; diff --git a/src/discounts/components/SalePricing/index.ts b/src/discounts/components/SalePricing/index.ts deleted file mode 100644 index 347c08adc..000000000 --- a/src/discounts/components/SalePricing/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default } from "./SalePricing"; -export * from "./SalePricing"; diff --git a/src/discounts/components/SaleType/SaleType.tsx b/src/discounts/components/SaleType/SaleType.tsx new file mode 100644 index 000000000..8a977f8b1 --- /dev/null +++ b/src/discounts/components/SaleType/SaleType.tsx @@ -0,0 +1,84 @@ +import Card from "@material-ui/core/Card"; +import CardContent from "@material-ui/core/CardContent"; +import { Theme } from "@material-ui/core/styles"; +import { makeStyles } from "@material-ui/styles"; +import React from "react"; +import { IntlShape, useIntl } from "react-intl"; + +import CardTitle from "@saleor/components/CardTitle"; +import RadioGroupField, { + RadioGroupFieldChoice +} from "@saleor/components/RadioGroupField"; +import { FormChange } from "@saleor/hooks/useForm"; +import { SaleType as SaleTypeEnum } from "@saleor/types/globalTypes"; +import { FormData } from "../SaleDetailsPage"; + +export interface SaleTypeProps { + data: FormData; + disabled: boolean; + onChange: FormChange; +} + +const useStyles = makeStyles( + (theme: Theme) => ({ + root: { + "&&": { + paddingBottom: theme.spacing.unit * 1.5 + } + } + }), + { + name: "SaleType" + } +); + +function createChoices(intl: IntlShape): RadioGroupFieldChoice[] { + return [ + { + label: intl.formatMessage({ + defaultMessage: "Percentage", + description: "discount type" + }), + value: SaleTypeEnum.PERCENTAGE + }, + { + label: intl.formatMessage({ + defaultMessage: "Fixed Amount", + description: "discount type" + }), + value: SaleTypeEnum.FIXED + } + ]; +} + +const SaleType: React.FC = props => { + const { data, disabled, onChange } = props; + + const classes = useStyles(props); + const intl = useIntl(); + + const choices = createChoices(intl); + + return ( + + + + + + + ); +}; + +SaleType.displayName = "SaleType"; +export default SaleType; diff --git a/src/discounts/components/SaleType/index.ts b/src/discounts/components/SaleType/index.ts new file mode 100644 index 000000000..ea6da6728 --- /dev/null +++ b/src/discounts/components/SaleType/index.ts @@ -0,0 +1,2 @@ +export { default } from "./SaleType"; +export * from "./SaleType"; diff --git a/src/discounts/components/SaleValue/SaleValue.tsx b/src/discounts/components/SaleValue/SaleValue.tsx new file mode 100644 index 000000000..e69de29bb diff --git a/src/discounts/components/SaleValue/index.ts b/src/discounts/components/SaleValue/index.ts new file mode 100644 index 000000000..d3aba981f --- /dev/null +++ b/src/discounts/components/SaleValue/index.ts @@ -0,0 +1,2 @@ +export { default } from "./SaleValue"; +export * from "./SaleValue"; diff --git a/src/discounts/components/VoucherRequirements/VoucherRequirements.tsx b/src/discounts/components/VoucherRequirements/VoucherRequirements.tsx index ee9e0b50b..9f3043213 100644 --- a/src/discounts/components/VoucherRequirements/VoucherRequirements.tsx +++ b/src/discounts/components/VoucherRequirements/VoucherRequirements.tsx @@ -70,7 +70,9 @@ const VoucherRequirements = ({ value={data.requirementsPicker} onChange={onChange} /> - + {[RequirementsPicker.ORDER, RequirementsPicker.ITEM].includes( + data.requirementsPicker + ) && } {data.requirementsPicker === RequirementsPicker.ORDER ? ( { +const useStyles = makeStyles( + (theme: Theme) => ({ + hr: { + margin: `${theme.spacing.unit * 2}px 0` + } + }), + { + name: "VoucherValue" + } +); + +const VoucherValue: React.FC = props => { + const { data, defaultCurrency, disabled, errors, variant, onChange } = props; + + const classes = useStyles(props); const intl = useIntl(); const translatedVoucherTypes = translateVoucherTypes(intl); @@ -81,22 +90,22 @@ const VoucherValue = ({ {variant === "update" && ( <> +
- )} -
+
MuiFormControlLabel: { root: { display: "grid", - gridTemplateColumns: "50px 6fr" + gridTemplateColumns: "48px 1fr" } }, MuiFormLabel: { @@ -453,7 +453,8 @@ export default (colors: IThemeColors): Theme => ripple: { "&$rippleVisible": { backgroundColor: fade(colors.primary, 0.2) - } + }, + borderRadius: "100%" } } }, From 636ddca9e3bf644964b87f7a8b138b5907f01a68 Mon Sep 17 00:00:00 2001 From: dominik-zeglen Date: Thu, 10 Oct 2019 15:33:50 +0200 Subject: [PATCH 2/6] Fix sale dates --- .../DiscountDates/DiscountDates.tsx | 119 ++++++++++++++++++ .../components/DiscountDates/index.ts | 2 + .../SaleDetailsPage/SaleDetailsPage.tsx | 25 +++- .../VoucherDetailsPage/VoucherDetailsPage.tsx | 4 +- src/discounts/views/SaleDetails.tsx | 20 +-- 5 files changed, 154 insertions(+), 16 deletions(-) create mode 100644 src/discounts/components/DiscountDates/DiscountDates.tsx create mode 100644 src/discounts/components/DiscountDates/index.ts diff --git a/src/discounts/components/DiscountDates/DiscountDates.tsx b/src/discounts/components/DiscountDates/DiscountDates.tsx new file mode 100644 index 000000000..0a8e935f3 --- /dev/null +++ b/src/discounts/components/DiscountDates/DiscountDates.tsx @@ -0,0 +1,119 @@ +import Card from "@material-ui/core/Card"; +import CardContent from "@material-ui/core/CardContent"; +import TextField from "@material-ui/core/TextField"; +import React from "react"; +import { useIntl } from "react-intl"; + +import CardTitle from "@saleor/components/CardTitle"; +import { ControlledCheckbox } from "@saleor/components/ControlledCheckbox"; +import Grid from "@saleor/components/Grid"; +import { commonMessages } from "@saleor/intl"; +import { FormErrors } from "../../../types"; + +interface DiscountDatesProps { + data: { + endDate: string; + endTime: string; + hasEndDate: boolean; + startDate: string; + startTime: string; + }; + defaultCurrency: string; + disabled: boolean; + errors: FormErrors<"endDate" | "startDate">; + onChange: (event: React.ChangeEvent) => void; +} + +const DiscountDates = ({ + data, + disabled, + errors, + onChange +}: DiscountDatesProps) => { + const intl = useIntl(); + + return ( + + + + + + + + + {data.hasEndDate && ( + + + + + )} + + + ); +}; +export default DiscountDates; diff --git a/src/discounts/components/DiscountDates/index.ts b/src/discounts/components/DiscountDates/index.ts new file mode 100644 index 000000000..263111c31 --- /dev/null +++ b/src/discounts/components/DiscountDates/index.ts @@ -0,0 +1,2 @@ +export { default } from "./DiscountDates"; +export * from "./DiscountDates"; diff --git a/src/discounts/components/SaleDetailsPage/SaleDetailsPage.tsx b/src/discounts/components/SaleDetailsPage/SaleDetailsPage.tsx index 870c50362..ef52fabb3 100644 --- a/src/discounts/components/SaleDetailsPage/SaleDetailsPage.tsx +++ b/src/discounts/components/SaleDetailsPage/SaleDetailsPage.tsx @@ -11,23 +11,27 @@ import PageHeader from "@saleor/components/PageHeader"; import SaveButtonBar from "@saleor/components/SaveButtonBar"; import { Tab, TabContainer } from "@saleor/components/Tab"; import { sectionNames } from "@saleor/intl"; -import { maybe } from "../../../misc"; +import { maybe, splitDateTime } from "../../../misc"; import { ListProps, TabListActions, UserError } from "../../../types"; import { SaleType as SaleTypeEnum } from "../../../types/globalTypes"; import { SaleDetails_sale } from "../../types/SaleDetails"; import DiscountCategories from "../DiscountCategories"; import DiscountCollections from "../DiscountCollections"; +import DiscountDates from "../DiscountDates"; import DiscountProducts from "../DiscountProducts"; import SaleInfo from "../SaleInfo"; import SaleSummary from "../SaleSummary"; import SaleType from "../SaleType"; export interface FormData { + endDate: string; + endTime: string; + hasEndDate: boolean; name: string; startDate: string; - endDate: string; - value: string; + startTime: string; type: SaleTypeEnum; + value: string; } export enum SaleDetailsPageTab { @@ -106,9 +110,12 @@ const SaleDetailsPage: React.StatelessComponent = ({ const intl = useIntl(); const initialForm: FormData = { - endDate: maybe(() => (sale.endDate ? sale.endDate : ""), ""), + endDate: splitDateTime(maybe(() => sale.endDate, "")).date, + endTime: splitDateTime(maybe(() => sale.endDate, "")).time, + hasEndDate: maybe(() => !!sale.endDate), name: maybe(() => sale.name, ""), - startDate: maybe(() => sale.startDate, ""), + startDate: splitDateTime(maybe(() => sale.startDate, "")).date, + startTime: splitDateTime(maybe(() => sale.startDate, "")).time, type: maybe(() => sale.type, SaleTypeEnum.FIXED), value: maybe(() => sale.value.toString(), "") }; @@ -237,6 +244,14 @@ const SaleDetailsPage: React.StatelessComponent = ({ toolbar={productListToolbar} /> )} + +
diff --git a/src/discounts/components/VoucherDetailsPage/VoucherDetailsPage.tsx b/src/discounts/components/VoucherDetailsPage/VoucherDetailsPage.tsx index 780ba974e..cf783f291 100644 --- a/src/discounts/components/VoucherDetailsPage/VoucherDetailsPage.tsx +++ b/src/discounts/components/VoucherDetailsPage/VoucherDetailsPage.tsx @@ -23,8 +23,8 @@ import { import { VoucherDetails_voucher } from "../../types/VoucherDetails"; import DiscountCategories from "../DiscountCategories"; import DiscountCollections from "../DiscountCollections"; +import DiscountDates from "../DiscountDates"; import DiscountProducts from "../DiscountProducts"; -import VoucherDates from "../VoucherDates"; import VoucherInfo from "../VoucherInfo"; import VoucherLimits from "../VoucherLimits"; import VoucherRequirements from "../VoucherRequirements"; @@ -349,7 +349,7 @@ const VoucherDetailsPage: React.StatelessComponent = ({ onChange={change} /> - = ({ variables: { id, input: { - endDate: - formData.endDate === "" - ? null - : formData.endDate, + endDate: formData.hasEndDate + ? joinDateTime( + formData.endDate, + formData.endTime + ) + : null, name: formData.name, - startDate: - formData.startDate === "" - ? null - : formData.startDate, + startDate: joinDateTime( + formData.startDate, + formData.startTime + ), type: discountValueTypeEnum( formData.type ), From 7ce4008c475fbf19dd73424dcfbb18522db48664 Mon Sep 17 00:00:00 2001 From: dominik-zeglen Date: Thu, 10 Oct 2019 15:46:22 +0200 Subject: [PATCH 3/6] Fix types --- .../SaleCreatePage/SaleCreatePage.tsx | 23 +- .../ProductVariantCreatePrices.tsx | 8 +- .../ProductVariantCreateSummary.tsx | 1 + .../__snapshots__/Stories.test.ts.snap | 2607 ++++++++++------- 4 files changed, 1562 insertions(+), 1077 deletions(-) diff --git a/src/discounts/components/SaleCreatePage/SaleCreatePage.tsx b/src/discounts/components/SaleCreatePage/SaleCreatePage.tsx index 67577afc6..800ced791 100644 --- a/src/discounts/components/SaleCreatePage/SaleCreatePage.tsx +++ b/src/discounts/components/SaleCreatePage/SaleCreatePage.tsx @@ -11,16 +11,20 @@ import PageHeader from "@saleor/components/PageHeader"; import SaveButtonBar from "@saleor/components/SaveButtonBar"; import { sectionNames } from "@saleor/intl"; import { UserError } from "../../../types"; -import { SaleType } from "../../../types/globalTypes"; +import { SaleType as SaleTypeEnum } from "../../../types/globalTypes"; +import DiscountDates from "../DiscountDates"; import SaleInfo from "../SaleInfo"; -import SalePricing from "../SalePricing"; +import SaleType from "../SaleType"; export interface FormData { + endDate: string; + endTime: string; + hasEndDate: boolean; name: string; startDate: string; - endDate: string; + startTime: string; + type: SaleTypeEnum; value: string; - type: SaleType; } export interface SaleCreatePageProps { @@ -44,9 +48,12 @@ const SaleCreatePage: React.StatelessComponent = ({ const initialForm: FormData = { endDate: "", + endTime: "", + hasEndDate: false, name: "", startDate: "", - type: SaleType.FIXED, + startTime: "", + type: SaleTypeEnum.FIXED, value: "" }; return ( @@ -71,10 +78,12 @@ const SaleCreatePage: React.StatelessComponent = ({ onChange={change} /> - + + diff --git a/src/products/components/ProductVariantCreateDialog/ProductVariantCreatePrices.tsx b/src/products/components/ProductVariantCreateDialog/ProductVariantCreatePrices.tsx index 2880d8ad4..bdfe40469 100644 --- a/src/products/components/ProductVariantCreateDialog/ProductVariantCreatePrices.tsx +++ b/src/products/components/ProductVariantCreateDialog/ProductVariantCreatePrices.tsx @@ -162,7 +162,7 @@ const ProductVariantCreatePrices: React.FC<
{priceAttributeValues && priceAttributeValues.map(attributeValue => ( - <> +
@@ -198,7 +198,7 @@ const ProductVariantCreatePrices: React.FC< />
- + ))} )} @@ -272,7 +272,7 @@ const ProductVariantCreatePrices: React.FC<
{stockAttributeValues && stockAttributeValues.map(attributeValue => ( - <> +
@@ -301,7 +301,7 @@ const ProductVariantCreatePrices: React.FC< />
- + ))} )} diff --git a/src/products/components/ProductVariantCreateDialog/ProductVariantCreateSummary.tsx b/src/products/components/ProductVariantCreateDialog/ProductVariantCreateSummary.tsx index b251e7723..ff87cda05 100644 --- a/src/products/components/ProductVariantCreateDialog/ProductVariantCreateSummary.tsx +++ b/src/products/components/ProductVariantCreateDialog/ProductVariantCreateSummary.tsx @@ -200,6 +200,7 @@ const ProductVariantCreateSummary: React.FC< style={{ color: colors[valueIndex % colors.length] }} + key={value} > {value} diff --git a/src/storybook/__snapshots__/Stories.test.ts.snap b/src/storybook/__snapshots__/Stories.test.ts.snap index 3763dfa36..f06fe7349 100644 --- a/src/storybook/__snapshots__/Stories.test.ts.snap +++ b/src/storybook/__snapshots__/Stories.test.ts.snap @@ -37820,7 +37820,7 @@ exports[`Storyshots Views / Discounts / Sale create default 1`] = ` - Pricing + Discount Type
-
- - -
- USD + + + + - -
+ Percentage + + +
+
+
+
+
+ + Active Dates + +
+
+
-
- Time Frame -
-
- + +
+
+
+ +
+ + +
-
- -
- -
-
+ + + Set end date + +
@@ -38092,7 +38153,7 @@ exports[`Storyshots Views / Discounts / Sale create form errors 1`] = ` - Pricing + Discount Type
-
- - -
- USD + + + + - -
+ Percentage + + +
-

- Generic form error -

+
+
+
+
+ + Active Dates + +
+
+
-
- Time Frame -
-
- + +
+

+ Generic form error +

-

- Generic form error -

+ +
+ + +
+

+ Generic form error +

+
-
- -
- -
-

+ - Generic form error -

-
+ Set end date + +
@@ -38375,7 +38492,7 @@ exports[`Storyshots Views / Discounts / Sale create loading 1`] = ` - Pricing + Discount Type
-
- - -
- USD + + + + - -
+ Percentage + + +
+
+
+
+
+ + Active Dates + +
+
+
-
- Time Frame -
-
- + +
+
+
+ +
+ + +
-
- -
- -
-
+ + + Set end date + +
@@ -38645,7 +38826,7 @@ exports[`Storyshots Views / Discounts / Sale details collections 1`] = ` - Pricing + Discount Type
-
- - -
- % + + + + - -
-
-
-
-
-
-
- Time Frame -
-
- -
- - -
-
-
- -
- - + Fixed Amount + +
@@ -39046,6 +39164,130 @@ exports[`Storyshots Views / Discounts / Sale details collections 1`] = `
+
+
+
+ + Active Dates + +
+
+
+
+
+
+
+ +
+ + +
+
+
+ +
+ + +
+
+
+ +
+
- Pricing + Discount Type
-
- - -
- % + + + + - -
-
-
-
-
-
-
- Time Frame -
-
- -
- - -
-
-
- -
- - + Fixed Amount + +
@@ -39638,6 +39817,130 @@ exports[`Storyshots Views / Discounts / Sale details default 1`] = `
+
+
+
+ + Active Dates + +
+
+
+
+
+
+
+ +
+ + +
+
+
+ +
+ + +
+
+
+ +
+
- Pricing + Discount Type
-
- - -
- % + + + + - -
-
-

- Generic form error -

-
-
-
-
-
- Time Frame -
-
- -
- - -
-

- Generic form error -

-
-
- -
- - + Fixed Amount + +
-

- Generic form error -

@@ -40250,6 +40475,140 @@ exports[`Storyshots Views / Discounts / Sale details form errors 1`] = `
+
+
+
+ + Active Dates + +
+
+
+
+
+
+
+ +
+ + +
+

+ Generic form error +

+
+
+ +
+ + +
+

+ Generic form error +

+
+
+ +
+
- Pricing + Discount Type
-
- - -
- USD + + + + - -
-
-
-
-
-
-
- Time Frame -
-
- -
- - -
-
-
- -
- - + Fixed Amount + +
@@ -40865,6 +41162,132 @@ exports[`Storyshots Views / Discounts / Sale details loading 1`] = `
+
+
+
+ + Active Dates + +
+
+
+
+
+
+
+ +
+ + +
+
+
+ +
+ + +
+
+
+ +
+
- Pricing + Discount Type
-
- - -
- % + + + + - -
-
-
-
-
-
-
- Time Frame -
-
- -
- - -
-
-
- -
- - + Fixed Amount + +
@@ -41757,6 +42117,130 @@ exports[`Storyshots Views / Discounts / Sale details products 1`] = `
+
+
+
+ + Active Dates + +
+
+
+
+
+
+
+ +
+ + +
+
+
+ +
+ + +
+
+
+ +
+
-
-
+
-
+
-
+
-
-
Date: Thu, 10 Oct 2019 15:48:06 +0200 Subject: [PATCH 4/6] Update changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 3958a7019..bf77d62bd 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -36,3 +36,4 @@ All notable, unreleased changes to this project will be documented in this file. - Add git hooks - #209 by @dominik-zeglen - Do not send customer invitation email - #211 by @dominik-zeglen - Send address update mutation only once - #210 by @dominik-zeglen +- Update sale details design - #207 by @dominik-zeglen From 0dc950947b34dd9cbc17d4939720dfe63b6f32cb Mon Sep 17 00:00:00 2001 From: dominik-zeglen Date: Thu, 10 Oct 2019 15:48:13 +0200 Subject: [PATCH 5/6] Update messages --- locale/messages.pot | 68 ++++++++++++++++++++++++++++----------------- 1 file changed, 42 insertions(+), 26 deletions(-) diff --git a/locale/messages.pot b/locale/messages.pot index 4f2858b52..c28f2104a 100644 --- a/locale/messages.pot +++ b/locale/messages.pot @@ -1,6 +1,6 @@ msgid "" msgstr "" -"POT-Creation-Date: 2019-10-09T15:30:47.333Z\n" +"POT-Creation-Date: 2019-10-15T15:53:11.572Z\n" "Content-Type: text/plain; charset=UTF-8\n" "Content-Transfer-Encoding: 8bit\n" "MIME-Version: 1.0\n" @@ -99,6 +99,14 @@ msgctxt "staff member status" msgid "Active" msgstr "" +#: build/locale/src/discounts/components/DiscountDates/DiscountDates.json +#. [src.discounts.components.DiscountDates.1662220323] - time during discount is active, header +#. defaultMessage is: +#. Active Dates +msgctxt "time during discount is active, header" +msgid "Active Dates" +msgstr "" + #: build/locale/src/discounts/components/VoucherDates/VoucherDates.json #. [src.discounts.components.VoucherDates.1662220323] - time during voucher is active, header #. defaultMessage is: @@ -3235,12 +3243,12 @@ msgctxt "description" msgid "Discount Code" msgstr "" -#: build/locale/src/discounts/components/VoucherValue/VoucherValue.json -#. [src.discounts.components.VoucherValue.1971417066] +#: build/locale/src/discounts/components/SaleType/SaleType.json +#. [src.discounts.components.SaleType.3216816841] - percentage or fixed, header #. defaultMessage is: -#. Discount Specific Information -msgctxt "description" -msgid "Discount Specific Information" +#. Discount Type +msgctxt "percentage or fixed, header" +msgid "Discount Type" msgstr "" #: build/locale/src/discounts/components/VoucherTypes/VoucherTypes.json @@ -3251,10 +3259,6 @@ msgctxt "header" msgid "Discount Type" msgstr "" -#: build/locale/src/discounts/components/SalePricing/SalePricing.json -#. [src.discounts.components.SalePricing.1205967018] -#. defaultMessage is: -#. Discount Value #: build/locale/src/discounts/components/VoucherValue/VoucherValue.json #. [src.discounts.components.VoucherValue.1205967018] #. defaultMessage is: @@ -3659,6 +3663,14 @@ msgctxt "description" msgid "First Name" msgstr "" +#: build/locale/src/discounts/components/SaleType/SaleType.json +#. [src.discounts.components.SaleType.46415128] - discount type +#. defaultMessage is: +#. Fixed Amount +msgctxt "discount type" +msgid "Fixed Amount" +msgstr "" + #: build/locale/src/discounts/components/VoucherTypes/VoucherTypes.json #. [src.discounts.components.VoucherTypes.46415128] - voucher discount type #. defaultMessage is: @@ -5607,6 +5619,14 @@ msgctxt "order history message" msgid "Payment was voided" msgstr "" +#: build/locale/src/discounts/components/SaleType/SaleType.json +#. [src.discounts.components.SaleType.3688224049] - discount type +#. defaultMessage is: +#. Percentage +msgctxt "discount type" +msgid "Percentage" +msgstr "" + #: build/locale/src/discounts/components/VoucherTypes/VoucherTypes.json #. [src.discounts.components.VoucherTypes.3688224049] - voucher discount type #. defaultMessage is: @@ -5875,14 +5895,6 @@ msgctxt "variant creation step" msgid "Prices and SKU" msgstr "" -#: build/locale/src/discounts/components/SalePricing/SalePricing.json -#. [src.discounts.components.SalePricing.1099355007] - sale pricing, header -#. defaultMessage is: -#. Pricing -msgctxt "sale pricing, header" -msgid "Pricing" -msgstr "" - #: build/locale/src/products/components/ProductPricing/ProductPricing.json #. [src.products.components.ProductPricing.1099355007] - product pricing #. defaultMessage is: @@ -7091,6 +7103,10 @@ msgctxt "button" msgid "Set as default shipping address" msgstr "" +#: build/locale/src/discounts/components/DiscountDates/DiscountDates.json +#. [src.discounts.components.DiscountDates.1596226028] - voucher end date, switch button +#. defaultMessage is: +#. Set end date #: build/locale/src/discounts/components/VoucherDates/VoucherDates.json #. [src.discounts.components.VoucherDates.1596226028] - voucher end date, switch button #. defaultMessage is: @@ -7879,14 +7895,6 @@ msgctxt "description" msgid "This will be shown to customers at checkout" msgstr "" -#: build/locale/src/discounts/components/SalePricing/SalePricing.json -#. [src.discounts.components.SalePricing.2503204759] - time during which sale is active -#. defaultMessage is: -#. Time Frame -msgctxt "time during which sale is active" -msgid "Time Frame" -msgstr "" - #: build/locale/src/pages/components/PageInfo/PageInfo.json #. [src.pages.components.PageInfo.1124600214] - page title #. defaultMessage is: @@ -8787,6 +8795,14 @@ msgctxt "description" msgid "Voucher Name" msgstr "" +#: build/locale/src/discounts/components/VoucherValue/VoucherValue.json +#. [src.discounts.components.VoucherValue.1960678372] +#. defaultMessage is: +#. Voucher Specific Information +msgctxt "description" +msgid "Voucher Specific Information" +msgstr "" + #: build/locale/src/discounts/components/VoucherDetailsPage/VoucherDetailsPage.json #. [src.discounts.components.VoucherDetailsPage.2071139683] #. defaultMessage is: From e6dbd3a89aa0ad955c38bfd51289f641eed3d9c3 Mon Sep 17 00:00:00 2001 From: dominik-zeglen Date: Fri, 11 Oct 2019 11:33:56 +0200 Subject: [PATCH 6/6] Fix sale value --- locale/messages.pot | 18 +- .../SaleDetailsPage/SaleDetailsPage.tsx | 9 + .../components/SaleValue/SaleValue.tsx | 61 ++++ .../components/VoucherValue/VoucherValue.tsx | 4 +- src/discounts/views/SaleDetails.tsx | 2 +- .../__snapshots__/Stories.test.ts.snap | 331 ++++++++++++++++++ 6 files changed, 421 insertions(+), 4 deletions(-) diff --git a/locale/messages.pot b/locale/messages.pot index c28f2104a..a5f2fceae 100644 --- a/locale/messages.pot +++ b/locale/messages.pot @@ -1,6 +1,6 @@ msgid "" msgstr "" -"POT-Creation-Date: 2019-10-15T15:53:11.572Z\n" +"POT-Creation-Date: 2019-10-15T15:56:00.137Z\n" "Content-Type: text/plain; charset=UTF-8\n" "Content-Transfer-Encoding: 8bit\n" "MIME-Version: 1.0\n" @@ -3259,6 +3259,14 @@ msgctxt "header" msgid "Discount Type" msgstr "" +#: build/locale/src/discounts/components/SaleValue/SaleValue.json +#. [src.discounts.components.SaleValue.1205967018] - sale discount +#. defaultMessage is: +#. Discount Value +msgctxt "sale discount" +msgid "Discount Value" +msgstr "" + #: build/locale/src/discounts/components/VoucherValue/VoucherValue.json #. [src.discounts.components.VoucherValue.1205967018] #. defaultMessage is: @@ -8563,6 +8571,14 @@ msgctxt "sale value" msgid "Value" msgstr "" +#: build/locale/src/discounts/components/SaleValue/SaleValue.json +#. [src.discounts.components.SaleValue.1148029984] - sale value, header +#. defaultMessage is: +#. Value +msgctxt "sale value, header" +msgid "Value" +msgstr "" + #: build/locale/src/discounts/components/VoucherList/VoucherList.json #. [src.discounts.components.VoucherList.1148029984] - voucher value #. defaultMessage is: diff --git a/src/discounts/components/SaleDetailsPage/SaleDetailsPage.tsx b/src/discounts/components/SaleDetailsPage/SaleDetailsPage.tsx index ef52fabb3..830e96e57 100644 --- a/src/discounts/components/SaleDetailsPage/SaleDetailsPage.tsx +++ b/src/discounts/components/SaleDetailsPage/SaleDetailsPage.tsx @@ -22,6 +22,7 @@ import DiscountProducts from "../DiscountProducts"; import SaleInfo from "../SaleInfo"; import SaleSummary from "../SaleSummary"; import SaleType from "../SaleType"; +import SaleValue from "../SaleValue"; export interface FormData { endDate: string; @@ -138,6 +139,14 @@ const SaleDetailsPage: React.StatelessComponent = ({ + + ; + onChange: FormChange; +} + +const SaleValue: React.FC = ({ + currencySymbol, + data, + disabled, + errors, + onChange +}) => { + const intl = useIntl(); + + return ( + + + + + + + ); +}; + +SaleValue.displayName = "SaleValue"; +export default SaleValue; diff --git a/src/discounts/components/VoucherValue/VoucherValue.tsx b/src/discounts/components/VoucherValue/VoucherValue.tsx index c0b8e59c8..da47235df 100644 --- a/src/discounts/components/VoucherValue/VoucherValue.tsx +++ b/src/discounts/components/VoucherValue/VoucherValue.tsx @@ -1,10 +1,10 @@ import Card from "@material-ui/core/Card"; import CardContent from "@material-ui/core/CardContent"; +import { Theme } from "@material-ui/core/styles"; import Typography from "@material-ui/core/Typography"; +import { makeStyles } from "@material-ui/styles"; import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; -import { Theme } from "@material-ui/core/styles"; -import { makeStyles } from "@material-ui/styles"; import CardTitle from "@saleor/components/CardTitle"; import ControlledCheckbox from "@saleor/components/ControlledCheckbox"; diff --git a/src/discounts/views/SaleDetails.tsx b/src/discounts/views/SaleDetails.tsx index de060015b..83f17b7a6 100644 --- a/src/discounts/views/SaleDetails.tsx +++ b/src/discounts/views/SaleDetails.tsx @@ -22,7 +22,7 @@ import { DEFAULT_INITIAL_SEARCH_DATA, PAGINATE_BY } from "../../config"; import SearchCategories from "../../containers/SearchCategories"; import SearchCollections from "../../containers/SearchCollections"; import SearchProducts from "../../containers/SearchProducts"; -import { decimal, getMutationState, maybe, joinDateTime } from "../../misc"; +import { decimal, getMutationState, joinDateTime, maybe } from "../../misc"; import { productUrl } from "../../products/urls"; import { DiscountValueTypeEnum, SaleType } from "../../types/globalTypes"; import SaleDetailsPage, { diff --git a/src/storybook/__snapshots__/Stories.test.ts.snap b/src/storybook/__snapshots__/Stories.test.ts.snap index f06fe7349..afe0e6323 100644 --- a/src/storybook/__snapshots__/Stories.test.ts.snap +++ b/src/storybook/__snapshots__/Stories.test.ts.snap @@ -38925,6 +38925,71 @@ exports[`Storyshots Views / Discounts / Sale details collections 1`] = `
+
+
+ + Value + +
+
+
+
+
+
+ +
+ + + % +
+
+
+
+
@@ -39578,6 +39643,71 @@ exports[`Storyshots Views / Discounts / Sale details default 1`] = `
+
+
+ + Value + +
+
+
+
+
+
+ +
+ + + % +
+
+
+
+
@@ -40236,6 +40366,76 @@ exports[`Storyshots Views / Discounts / Sale details form errors 1`] = `
+
+
+ + Value + +
+
+
+
+
+
+ +
+ + + % +
+

+ Generic form error +

+
+
+
+
@@ -40909,6 +41109,72 @@ exports[`Storyshots Views / Discounts / Sale details loading 1`] = `
+
+
+ + Value + +
+
+
+
+
+
+ +
+ + + USD +
+
+
+
+
@@ -41594,6 +41860,71 @@ exports[`Storyshots Views / Discounts / Sale details products 1`] = `
+
+
+ + Value + +
+
+
+
+
+
+ +
+ + + % +
+
+
+
+