Fix discounts

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

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:56:00.137Z\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,14 @@ msgctxt "header"
 msgid "Discount Type"
 msgstr ""
 
-#: build/locale/src/discounts/components/SalePricing/SalePricing.json
-#. [src.discounts.components.SalePricing.1205967018]
+#: 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:
@@ -3659,6 +3671,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 +5627,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 +5903,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 +7111,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 +7903,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:
@@ -8555,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:
@@ -8787,6 +8811,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:

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<any>) => void;
 }
 
-export const RadioGroupField = withStyles(styles, {
-  name: "RadioGroupField"
-})(
-  ({
+export const RadioGroupField: React.FC<RadioGroupFieldProps> = props => {
+  const {
     className,
-    classes,
     disabled,
     error,
     label,
@@ -57,42 +65,45 @@ export const RadioGroupField = withStyles(styles, {
     onChange,
     name,
     hint
-  }: RadioGroupFieldProps & WithStyles<typeof styles>) => {
-    return (
-      <FormControl
-        className={classNames(classes.formControl, className)}
-        error={error}
-        disabled={disabled}
+  } = props;
+  const classes = useStyles(props);
+
+  return (
+    <FormControl
+      className={classNames(classes.root, className, {
+        [classes.rootNoLabel]: !label
+      })}
+      error={error}
+      disabled={disabled}
+    >
+      {label ? (
+        <FormLabel className={classes.formLabel}>{label}</FormLabel>
+      ) : null}
+      <RadioGroup
+        aria-label={name}
+        name={name}
+        value={value}
+        onChange={onChange}
       >
-        {label ? (
-          <FormLabel className={classes.formLabel}>{label}</FormLabel>
-        ) : null}
-        <RadioGroup
-          aria-label={name}
-          name={name}
-          value={value}
-          onChange={onChange}
-        >
-          {choices.length > 0 ? (
-            choices.map(choice => (
-              <FormControlLabel
-                value={choice.value}
-                className={classes.radioLabel}
-                control={<Radio color="primary" />}
-                label={choice.label}
-                key={choice.value}
-              />
-            ))
-          ) : (
-            <MenuItem disabled={true}>
-              <FormattedMessage defaultMessage="No results found" />
-            </MenuItem>
-          )}
-        </RadioGroup>
-        {hint && <FormHelperText>{hint}</FormHelperText>}
-      </FormControl>
-    );
-  }
-);
+        {choices.length > 0 ? (
+          choices.map(choice => (
+            <FormControlLabel
+              value={choice.value}
+              className={classes.radioLabel}
+              control={<Radio color="primary" />}
+              label={choice.label}
+              key={choice.value}
+            />
+          ))
+        ) : (
+          <MenuItem disabled={true}>
+            <FormattedMessage defaultMessage="No results found" />
+          </MenuItem>
+        )}
+      </RadioGroup>
+      {hint && <FormHelperText>{hint}</FormHelperText>}
+    </FormControl>
+  );
+};
 RadioGroupField.displayName = "RadioGroupField";
 export default RadioGroupField;