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
diff --git a/locale/messages.pot b/locale/messages.pot
index 4f2858b52..a5f2fceae 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: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:
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<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;
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<any>) => void;
+}
+
+const DiscountDates = ({
+  data,
+  disabled,
+  errors,
+  onChange
+}: DiscountDatesProps) => {
+  const intl = useIntl();
+
+  return (
+    <Card>
+      <CardTitle
+        title={intl.formatMessage({
+          defaultMessage: "Active Dates",
+          description: "time during discount is active, header"
+        })}
+      />
+      <CardContent>
+        <Grid variant="uniform">
+          <TextField
+            disabled={disabled}
+            error={!!errors.startDate}
+            helperText={errors.startDate}
+            name={"startDate" as keyof FormData}
+            onChange={onChange}
+            label={intl.formatMessage(commonMessages.startDate)}
+            value={data.startDate}
+            type="date"
+            InputLabelProps={{
+              shrink: true
+            }}
+            fullWidth
+          />
+          <TextField
+            disabled={disabled}
+            error={!!errors.startDate}
+            helperText={errors.startDate}
+            name={"startTime" as keyof FormData}
+            onChange={onChange}
+            label={intl.formatMessage(commonMessages.startHour)}
+            value={data.startTime}
+            type="time"
+            InputLabelProps={{
+              shrink: true
+            }}
+            fullWidth
+          />
+        </Grid>
+        <ControlledCheckbox
+          checked={data.hasEndDate}
+          label={intl.formatMessage({
+            defaultMessage: "Set end date",
+            description: "voucher end date, switch button"
+          })}
+          name={"hasEndDate" as keyof FormData}
+          onChange={onChange}
+        />
+        {data.hasEndDate && (
+          <Grid variant="uniform">
+            <TextField
+              disabled={disabled}
+              error={!!errors.endDate}
+              helperText={errors.endDate}
+              name={"endDate" as keyof FormData}
+              onChange={onChange}
+              label={intl.formatMessage(commonMessages.endDate)}
+              value={data.endDate}
+              type="date"
+              InputLabelProps={{
+                shrink: true
+              }}
+              fullWidth
+            />
+            <TextField
+              disabled={disabled}
+              error={!!errors.endDate}
+              helperText={errors.endDate}
+              name={"endTime" as keyof FormData}
+              onChange={onChange}
+              label={intl.formatMessage(commonMessages.endHour)}
+              value={data.endTime}
+              type="time"
+              InputLabelProps={{
+                shrink: true
+              }}
+              fullWidth
+            />
+          </Grid>
+        )}
+      </CardContent>
+    </Card>
+  );
+};
+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/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<SaleCreatePageProps> = ({
 
   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<SaleCreatePageProps> = ({
                 onChange={change}
               />
               <CardSpacer />
-              <SalePricing
+              <SaleType data={data} disabled={disabled} onChange={change} />
+              <CardSpacer />
+              <DiscountDates
                 data={data}
-                defaultCurrency={defaultCurrency}
                 disabled={disabled}
+                defaultCurrency={defaultCurrency}
                 errors={formErrors}
                 onChange={change}
               />
diff --git a/src/discounts/components/SaleDetailsPage/SaleDetailsPage.tsx b/src/discounts/components/SaleDetailsPage/SaleDetailsPage.tsx
index 83f361676..830e96e57 100644
--- a/src/discounts/components/SaleDetailsPage/SaleDetailsPage.tsx
+++ b/src/discounts/components/SaleDetailsPage/SaleDetailsPage.tsx
@@ -11,23 +11,28 @@ 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 } 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 DiscountDates from "../DiscountDates";
 import DiscountProducts from "../DiscountProducts";
 import SaleInfo from "../SaleInfo";
-import SalePricing from "../SalePricing";
 import SaleSummary from "../SaleSummary";
+import SaleType from "../SaleType";
+import SaleValue from "../SaleValue";
 
 export interface FormData {
+  endDate: string;
+  endTime: string;
+  hasEndDate: boolean;
   name: string;
   startDate: string;
-  endDate: string;
+  startTime: string;
+  type: SaleTypeEnum;
   value: string;
-  type: SaleType;
 }
 
 export enum SaleDetailsPageTab {
@@ -106,10 +111,13 @@ const SaleDetailsPage: React.StatelessComponent<SaleDetailsPageProps> = ({
   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, ""),
-    type: maybe(() => sale.type, SaleType.FIXED),
+    startDate: splitDateTime(maybe(() => sale.startDate, "")).date,
+    startTime: splitDateTime(maybe(() => sale.startDate, "")).time,
+    type: maybe(() => sale.type, SaleTypeEnum.FIXED),
     value: maybe(() => sale.value.toString(), "")
   };
   return (
@@ -129,9 +137,11 @@ const SaleDetailsPage: React.StatelessComponent<SaleDetailsPageProps> = ({
                 onChange={change}
               />
               <CardSpacer />
-              <SalePricing
+              <SaleType data={data} disabled={disabled} onChange={change} />
+              <CardSpacer />
+              <SaleValue
+                currencySymbol={defaultCurrency}
                 data={data}
-                defaultCurrency={defaultCurrency}
                 disabled={disabled}
                 errors={formErrors}
                 onChange={change}
@@ -243,6 +253,14 @@ const SaleDetailsPage: React.StatelessComponent<SaleDetailsPageProps> = ({
                   toolbar={productListToolbar}
                 />
               )}
+              <CardSpacer />
+              <DiscountDates
+                data={data}
+                disabled={disabled}
+                defaultCurrency={defaultCurrency}
+                errors={formErrors}
+                onChange={change}
+              />
             </div>
             <div>
               <SaleSummary defaultCurrency={defaultCurrency} sale={sale} />
diff --git a/src/discounts/components/SalePricing/SalePricing.tsx b/src/discounts/components/SalePricing/SalePricing.tsx
deleted file mode 100644
index ae63b90d3..000000000
--- a/src/discounts/components/SalePricing/SalePricing.tsx
+++ /dev/null
@@ -1,138 +0,0 @@
-import Card from "@material-ui/core/Card";
-import CardContent from "@material-ui/core/CardContent";
-import {
-  createStyles,
-  Theme,
-  WithStyles,
-  withStyles
-} from "@material-ui/core/styles";
-import TextField from "@material-ui/core/TextField";
-import Typography from "@material-ui/core/Typography";
-import React from "react";
-import { FormattedMessage, useIntl } from "react-intl";
-
-import CardTitle from "@saleor/components/CardTitle";
-import Hr from "@saleor/components/Hr";
-import TextFieldWithChoice from "@saleor/components/TextFieldWithChoice";
-import { commonMessages } from "@saleor/intl";
-import { FormErrors } from "../../../types";
-import { SaleType } from "../../../types/globalTypes";
-import { FormData } from "../SaleDetailsPage";
-
-export interface SalePricingProps {
-  data: FormData;
-  defaultCurrency: string;
-  disabled: boolean;
-  errors: FormErrors<"startDate" | "endDate" | "value">;
-  onChange: (event: React.ChangeEvent<any>) => 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<typeof styles>) => {
-    const intl = useIntl();
-
-    return (
-      <Card>
-        <CardTitle
-          title={intl.formatMessage({
-            defaultMessage: "Pricing",
-            description: "sale pricing, header"
-          })}
-        />
-        <CardContent className={classes.root}>
-          <TextFieldWithChoice
-            disabled={disabled}
-            ChoiceProps={{
-              label: data.type === SaleType.FIXED ? defaultCurrency : "%",
-              name: "type",
-              values: [
-                {
-                  label: defaultCurrency,
-                  value: SaleType.FIXED
-                },
-                {
-                  label: "%",
-                  value: SaleType.PERCENTAGE
-                }
-              ]
-            }}
-            error={!!errors.value}
-            helperText={errors.value}
-            name={"value" as keyof FormData}
-            onChange={onChange}
-            label={intl.formatMessage({
-              defaultMessage: "Discount Value"
-            })}
-            value={data.value}
-            type="number"
-            fullWidth
-            inputProps={{
-              min: 0
-            }}
-          />
-        </CardContent>
-        <Hr />
-        <CardContent className={classes.root}>
-          <Typography className={classes.subheading} variant="subtitle1">
-            <FormattedMessage
-              defaultMessage="Time Frame"
-              description="time during which sale is active"
-            />
-          </Typography>
-          <TextField
-            disabled={disabled}
-            error={!!errors.startDate}
-            helperText={errors.startDate}
-            name={"startDate" as keyof FormData}
-            onChange={onChange}
-            label={intl.formatMessage(commonMessages.startDate)}
-            value={data.startDate}
-            type="date"
-            InputLabelProps={{
-              shrink: true
-            }}
-            fullWidth
-          />
-          <TextField
-            disabled={disabled}
-            error={!!errors.endDate}
-            helperText={errors.endDate}
-            name={"endDate" as keyof FormData}
-            onChange={onChange}
-            label={intl.formatMessage(commonMessages.endDate)}
-            value={data.endDate}
-            type="date"
-            InputLabelProps={{
-              shrink: true
-            }}
-            fullWidth
-          />
-        </CardContent>
-      </Card>
-    );
-  }
-);
-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<SaleTypeProps> = props => {
+  const { data, disabled, onChange } = props;
+
+  const classes = useStyles(props);
+  const intl = useIntl();
+
+  const choices = createChoices(intl);
+
+  return (
+    <Card>
+      <CardTitle
+        title={intl.formatMessage({
+          defaultMessage: "Discount Type",
+          description: "percentage or fixed, header"
+        })}
+      />
+      <CardContent className={classes.root}>
+        <RadioGroupField
+          choices={choices}
+          disabled={disabled}
+          name={"type" as keyof FormData}
+          value={data.type}
+          onChange={onChange}
+        />
+      </CardContent>
+    </Card>
+  );
+};
+
+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..ff424547e
--- /dev/null
+++ b/src/discounts/components/SaleValue/SaleValue.tsx
@@ -0,0 +1,61 @@
+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 { FormChange } from "@saleor/hooks/useForm";
+import { FormErrors } from "@saleor/types";
+import { SaleType } from "@saleor/types/globalTypes";
+import { FormData } from "../SaleDetailsPage";
+
+export interface SaleValueProps {
+  currencySymbol: string;
+  data: FormData;
+  disabled: boolean;
+  errors: FormErrors<"value">;
+  onChange: FormChange;
+}
+
+const SaleValue: React.FC<SaleValueProps> = ({
+  currencySymbol,
+  data,
+  disabled,
+  errors,
+  onChange
+}) => {
+  const intl = useIntl();
+
+  return (
+    <Card>
+      <CardTitle
+        title={intl.formatMessage({
+          defaultMessage: "Value",
+          description: "sale value, header"
+        })}
+      />
+      <CardContent>
+        <TextField
+          disabled={disabled}
+          fullWidth
+          label={intl.formatMessage({
+            defaultMessage: "Discount Value",
+            description: "sale discount"
+          })}
+          error={!!errors.value}
+          name="value"
+          InputProps={{
+            endAdornment: data.type === SaleType.FIXED ? currencySymbol : "%"
+          }}
+          helperText={errors.value}
+          value={data.value}
+          onChange={onChange}
+        />
+      </CardContent>
+    </Card>
+  );
+};
+
+SaleValue.displayName = "SaleValue";
+export default SaleValue;
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/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<VoucherDetailsPageProps> = ({
                 onChange={change}
               />
               <CardSpacer />
-              <VoucherDates
+              <DiscountDates
                 data={data}
                 disabled={disabled}
                 defaultCurrency={defaultCurrency}
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}
         />
-        <FormSpacer />
+        {[RequirementsPicker.ORDER, RequirementsPicker.ITEM].includes(
+          data.requirementsPicker
+        ) && <FormSpacer />}
         {data.requirementsPicker === RequirementsPicker.ORDER ? (
           <TextField
             disabled={disabled}
diff --git a/src/discounts/components/VoucherValue/VoucherValue.tsx b/src/discounts/components/VoucherValue/VoucherValue.tsx
index 95f8960ec..da47235df 100644
--- a/src/discounts/components/VoucherValue/VoucherValue.tsx
+++ b/src/discounts/components/VoucherValue/VoucherValue.tsx
@@ -1,6 +1,8 @@
 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";
 
@@ -29,14 +31,21 @@ export enum VoucherType {
   SPECIFIC_PRODUCT = "SPECIFIC_PRODUCT"
 }
 
-const VoucherValue = ({
-  data,
-  defaultCurrency,
-  disabled,
-  errors,
-  variant,
-  onChange
-}: VoucherValueProps) => {
+const useStyles = makeStyles(
+  (theme: Theme) => ({
+    hr: {
+      margin: `${theme.spacing.unit * 2}px 0`
+    }
+  }),
+  {
+    name: "VoucherValue"
+  }
+);
+
+const VoucherValue: React.FC<VoucherValueProps> = 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 = ({
         <FormSpacer />
         {variant === "update" && (
           <>
+            <Hr className={classes.hr} />
             <RadioGroupField
               choices={voucherTypeChoices}
               disabled={disabled}
               error={!!errors.type}
               hint={errors.type}
               label={intl.formatMessage({
-                defaultMessage: "Discount Specific Information"
+                defaultMessage: "Voucher Specific Information"
               })}
               name={"type" as keyof FormData}
               value={data.type}
               onChange={onChange}
             />
-            <FormSpacer />
           </>
         )}
-        <Hr />
+        <Hr className={classes.hr} />
         <FormSpacer />
         <ControlledCheckbox
           name={"applyOncePerOrder" as keyof FormData}
diff --git a/src/discounts/views/SaleDetails.tsx b/src/discounts/views/SaleDetails.tsx
index 63d677479..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 } from "../../misc";
+import { decimal, getMutationState, joinDateTime, maybe } from "../../misc";
 import { productUrl } from "../../products/urls";
 import { DiscountValueTypeEnum, SaleType } from "../../types/globalTypes";
 import SaleDetailsPage, {
@@ -273,15 +273,17 @@ export const SaleDetails: React.StatelessComponent<SaleDetailsProps> = ({
                                   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
                                       ),
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<
           <Hr className={classes.hrAttribute} />
           {priceAttributeValues &&
             priceAttributeValues.map(attributeValue => (
-              <>
+              <React.Fragment key={attributeValue.id}>
                 <FormSpacer />
                 <Grid variant="uniform">
                   <div className={classes.label}>
@@ -198,7 +198,7 @@ const ProductVariantCreatePrices: React.FC<
                     />
                   </div>
                 </Grid>
-              </>
+              </React.Fragment>
             ))}
         </>
       )}
@@ -272,7 +272,7 @@ const ProductVariantCreatePrices: React.FC<
           <Hr className={classes.hrAttribute} />
           {stockAttributeValues &&
             stockAttributeValues.map(attributeValue => (
-              <>
+              <React.Fragment key={attributeValue.id}>
                 <FormSpacer />
                 <Grid variant="uniform">
                   <div className={classes.label}>
@@ -301,7 +301,7 @@ const ProductVariantCreatePrices: React.FC<
                     />
                   </div>
                 </Grid>
-              </>
+              </React.Fragment>
             ))}
         </>
       )}
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}
                     </span>
diff --git a/src/storybook/__snapshots__/Stories.test.ts.snap b/src/storybook/__snapshots__/Stories.test.ts.snap
index 3763dfa36..afe0e6323 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`] = `
               <span
                 class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
               >
-                Pricing
+                Discount Type
               </span>
               <div
                 class="CardTitle-toolbar-id"
@@ -37833,150 +37833,211 @@ exports[`Storyshots Views / Discounts / Sale create default 1`] = `
               class="CardTitle-hr-id"
             />
             <div
-              class="MuiCardContent-root-id SalePricing-root-id"
+              class="MuiCardContent-root-id SaleType-root-id"
             >
               <div
-                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+                class="MuiFormControl-root-id RadioGroupField-root-id RadioGroupField-rootNoLabel-id"
               >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                  data-shrink="false"
-                >
-                  Discount Value
-                </label>
                 <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
+                  aria-label="type"
+                  class="MuiFormGroup-root-id"
+                  role="radiogroup"
                 >
-                  <fieldset
-                    aria-hidden="true"
-                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    style="padding-left:8px"
-                  >
-                    <legend
-                      class="MuiPrivateNotchedOutline-legend-id"
-                      style="width:0.01px"
-                    >
-                      <span>
-                        ​
-                      </span>
-                    </legend>
-                  </fieldset>
-                  <input
-                    aria-invalid="false"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputType-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                    min="0"
-                    name="value"
-                    type="number"
-                    value=""
-                  />
-                  <div
-                    class="TextFieldWithChoices-adornment-id"
+                  <label
+                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
                   >
                     <span
-                      class="MuiTypography-root-id MuiTypography-caption-id"
+                      class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id"
                     >
-                      USD
+                      <span
+                        class="MuiIconButton-label-id"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
+                          />
+                        </svg>
+                        <input
+                          class="MuiPrivateSwitchBase-input-id"
+                          name="type"
+                          type="radio"
+                          value="PERCENTAGE"
+                        />
+                      </span>
                     </span>
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      role="presentation"
-                      viewBox="0 0 24 24"
+                    <span
+                      class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
                     >
-                      <path
-                        d="M7 10l5 5 5-5z"
-                      />
-                      <path
-                        d="M0 0h24v24H0z"
-                        fill="none"
-                      />
-                    </svg>
-                  </div>
+                      Percentage
+                    </span>
+                  </label>
+                  <label
+                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
+                  >
+                    <span
+                      class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiPrivateSwitchBase-checked-id MuiRadio-checked-id"
+                    >
+                      <span
+                        class="MuiIconButton-label-id"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
+                          />
+                        </svg>
+                        <input
+                          checked=""
+                          class="MuiPrivateSwitchBase-input-id"
+                          name="type"
+                          type="radio"
+                          value="FIXED"
+                        />
+                      </span>
+                    </span>
+                    <span
+                      class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
+                    >
+                      Fixed Amount
+                    </span>
+                  </label>
                 </div>
               </div>
             </div>
+          </div>
+          <div
+            class="CardSpacer-spacer-id"
+          />
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation0-id MuiPaper-rounded-id MuiCard-root-id"
+          >
+            <div
+              class="CardTitle-root-id"
+            >
+              <span
+                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
+              >
+                Active Dates
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              />
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
             <hr
-              class="Hr-root-id"
+              class="CardTitle-hr-id"
             />
             <div
-              class="MuiCardContent-root-id SalePricing-root-id"
+              class="MuiCardContent-root-id"
             >
-              <h6
-                class="MuiTypography-root-id MuiTypography-subtitle1-id SalePricing-subheading-id"
-              >
-                Time Frame
-              </h6>
               <div
-                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+                class="Grid-root-id Grid-uniform-id"
               >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
-                  data-shrink="true"
-                >
-                  Start Date
-                </label>
                 <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
+                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                 >
-                  <fieldset
-                    aria-hidden="true"
-                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    style="padding-left:8px"
+                  <label
+                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
+                    data-shrink="true"
                   >
-                    <legend
-                      class="MuiPrivateNotchedOutline-legend-id"
-                      style="width:0"
+                    Start Date
+                  </label>
+                  <div
+                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
+                  >
+                    <fieldset
+                      aria-hidden="true"
+                      class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
+                      style="padding-left:8px"
                     >
-                      <span>
-                        ​
-                      </span>
-                    </legend>
-                  </fieldset>
-                  <input
-                    aria-invalid="false"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputType-id"
-                    name="startDate"
-                    type="date"
-                    value=""
-                  />
+                      <legend
+                        class="MuiPrivateNotchedOutline-legend-id"
+                        style="width:0"
+                      >
+                        <span>
+                          ​
+                        </span>
+                      </legend>
+                    </fieldset>
+                    <input
+                      aria-invalid="false"
+                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputType-id"
+                      name="startDate"
+                      type="date"
+                      value=""
+                    />
+                  </div>
+                </div>
+                <div
+                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+                >
+                  <label
+                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
+                    data-shrink="true"
+                  >
+                    Start Hour
+                  </label>
+                  <div
+                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
+                  >
+                    <fieldset
+                      aria-hidden="true"
+                      class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
+                      style="padding-left:8px"
+                    >
+                      <legend
+                        class="MuiPrivateNotchedOutline-legend-id"
+                        style="width:0"
+                      >
+                        <span>
+                          ​
+                        </span>
+                      </legend>
+                    </fieldset>
+                    <input
+                      aria-invalid="false"
+                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputType-id"
+                      name="startTime"
+                      type="time"
+                      value=""
+                    />
+                  </div>
                 </div>
               </div>
-              <div
-                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+              <label
+                class="MuiFormControlLabel-root-id"
               >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
-                  data-shrink="true"
+                <button
+                  class="MuiButtonBase-root-id Checkbox-root-id"
+                  tabindex="0"
+                  type="button"
                 >
-                  End Date
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                >
-                  <fieldset
-                    aria-hidden="true"
-                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    style="padding-left:8px"
-                  >
-                    <legend
-                      class="MuiPrivateNotchedOutline-legend-id"
-                      style="width:0"
-                    >
-                      <span>
-                        ​
-                      </span>
-                    </legend>
-                  </fieldset>
                   <input
-                    aria-invalid="false"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputType-id"
-                    name="endDate"
-                    type="date"
-                    value=""
+                    class="Checkbox-box-id"
+                    name="hasEndDate"
+                    type="checkbox"
+                    value="false"
                   />
-                </div>
-              </div>
+                </button>
+                <span
+                  class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
+                >
+                  Set end date
+                </span>
+              </label>
             </div>
           </div>
         </div>
@@ -38092,7 +38153,7 @@ exports[`Storyshots Views / Discounts / Sale create form errors 1`] = `
               <span
                 class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
               >
-                Pricing
+                Discount Type
               </span>
               <div
                 class="CardTitle-toolbar-id"
@@ -38105,165 +38166,221 @@ exports[`Storyshots Views / Discounts / Sale create form errors 1`] = `
               class="CardTitle-hr-id"
             />
             <div
-              class="MuiCardContent-root-id SalePricing-root-id"
+              class="MuiCardContent-root-id SaleType-root-id"
             >
               <div
-                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+                class="MuiFormControl-root-id RadioGroupField-root-id RadioGroupField-rootNoLabel-id"
               >
-                <label
-                  class="MuiFormLabel-root-id MuiFormLabel-error-id MuiInputLabel-error-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                  data-shrink="false"
-                >
-                  Discount Value
-                </label>
                 <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
+                  aria-label="type"
+                  class="MuiFormGroup-root-id"
+                  role="radiogroup"
                 >
-                  <fieldset
-                    aria-hidden="true"
-                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    style="padding-left:8px"
-                  >
-                    <legend
-                      class="MuiPrivateNotchedOutline-legend-id"
-                      style="width:0.01px"
-                    >
-                      <span>
-                        ​
-                      </span>
-                    </legend>
-                  </fieldset>
-                  <input
-                    aria-invalid="true"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputType-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                    min="0"
-                    name="value"
-                    type="number"
-                    value=""
-                  />
-                  <div
-                    class="TextFieldWithChoices-adornment-id"
+                  <label
+                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
                   >
                     <span
-                      class="MuiTypography-root-id MuiTypography-caption-id"
+                      class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id"
                     >
-                      USD
+                      <span
+                        class="MuiIconButton-label-id"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
+                          />
+                        </svg>
+                        <input
+                          class="MuiPrivateSwitchBase-input-id"
+                          name="type"
+                          type="radio"
+                          value="PERCENTAGE"
+                        />
+                      </span>
                     </span>
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      role="presentation"
-                      viewBox="0 0 24 24"
+                    <span
+                      class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
                     >
-                      <path
-                        d="M7 10l5 5 5-5z"
-                      />
-                      <path
-                        d="M0 0h24v24H0z"
-                        fill="none"
-                      />
-                    </svg>
-                  </div>
+                      Percentage
+                    </span>
+                  </label>
+                  <label
+                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
+                  >
+                    <span
+                      class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiPrivateSwitchBase-checked-id MuiRadio-checked-id"
+                    >
+                      <span
+                        class="MuiIconButton-label-id"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
+                          />
+                        </svg>
+                        <input
+                          checked=""
+                          class="MuiPrivateSwitchBase-input-id"
+                          name="type"
+                          type="radio"
+                          value="FIXED"
+                        />
+                      </span>
+                    </span>
+                    <span
+                      class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
+                    >
+                      Fixed Amount
+                    </span>
+                  </label>
                 </div>
-                <p
-                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
-                >
-                  Generic form error
-                </p>
               </div>
             </div>
+          </div>
+          <div
+            class="CardSpacer-spacer-id"
+          />
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation0-id MuiPaper-rounded-id MuiCard-root-id"
+          >
+            <div
+              class="CardTitle-root-id"
+            >
+              <span
+                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
+              >
+                Active Dates
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              />
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
             <hr
-              class="Hr-root-id"
+              class="CardTitle-hr-id"
             />
             <div
-              class="MuiCardContent-root-id SalePricing-root-id"
+              class="MuiCardContent-root-id"
             >
-              <h6
-                class="MuiTypography-root-id MuiTypography-subtitle1-id SalePricing-subheading-id"
-              >
-                Time Frame
-              </h6>
               <div
-                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+                class="Grid-root-id Grid-uniform-id"
               >
-                <label
-                  class="MuiFormLabel-root-id MuiFormLabel-error-id MuiInputLabel-error-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
-                  data-shrink="true"
-                >
-                  Start Date
-                </label>
                 <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
+                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                 >
-                  <fieldset
-                    aria-hidden="true"
-                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    style="padding-left:8px"
+                  <label
+                    class="MuiFormLabel-root-id MuiFormLabel-error-id MuiInputLabel-error-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
+                    data-shrink="true"
                   >
-                    <legend
-                      class="MuiPrivateNotchedOutline-legend-id"
-                      style="width:0"
+                    Start Date
+                  </label>
+                  <div
+                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
+                  >
+                    <fieldset
+                      aria-hidden="true"
+                      class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
+                      style="padding-left:8px"
                     >
-                      <span>
-                        ​
-                      </span>
-                    </legend>
-                  </fieldset>
-                  <input
-                    aria-invalid="true"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputType-id"
-                    name="startDate"
-                    type="date"
-                    value=""
-                  />
+                      <legend
+                        class="MuiPrivateNotchedOutline-legend-id"
+                        style="width:0"
+                      >
+                        <span>
+                          ​
+                        </span>
+                      </legend>
+                    </fieldset>
+                    <input
+                      aria-invalid="true"
+                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputType-id"
+                      name="startDate"
+                      type="date"
+                      value=""
+                    />
+                  </div>
+                  <p
+                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
+                  >
+                    Generic form error
+                  </p>
                 </div>
-                <p
-                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
+                <div
+                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                 >
-                  Generic form error
-                </p>
+                  <label
+                    class="MuiFormLabel-root-id MuiFormLabel-error-id MuiInputLabel-error-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
+                    data-shrink="true"
+                  >
+                    Start Hour
+                  </label>
+                  <div
+                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
+                  >
+                    <fieldset
+                      aria-hidden="true"
+                      class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
+                      style="padding-left:8px"
+                    >
+                      <legend
+                        class="MuiPrivateNotchedOutline-legend-id"
+                        style="width:0"
+                      >
+                        <span>
+                          ​
+                        </span>
+                      </legend>
+                    </fieldset>
+                    <input
+                      aria-invalid="true"
+                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputType-id"
+                      name="startTime"
+                      type="time"
+                      value=""
+                    />
+                  </div>
+                  <p
+                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
+                  >
+                    Generic form error
+                  </p>
+                </div>
               </div>
-              <div
-                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+              <label
+                class="MuiFormControlLabel-root-id"
               >
-                <label
-                  class="MuiFormLabel-root-id MuiFormLabel-error-id MuiInputLabel-error-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
-                  data-shrink="true"
+                <button
+                  class="MuiButtonBase-root-id Checkbox-root-id"
+                  tabindex="0"
+                  type="button"
                 >
-                  End Date
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                >
-                  <fieldset
-                    aria-hidden="true"
-                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    style="padding-left:8px"
-                  >
-                    <legend
-                      class="MuiPrivateNotchedOutline-legend-id"
-                      style="width:0"
-                    >
-                      <span>
-                        ​
-                      </span>
-                    </legend>
-                  </fieldset>
                   <input
-                    aria-invalid="true"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputType-id"
-                    name="endDate"
-                    type="date"
-                    value=""
+                    class="Checkbox-box-id"
+                    name="hasEndDate"
+                    type="checkbox"
+                    value="false"
                   />
-                </div>
-                <p
-                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
+                </button>
+                <span
+                  class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
                 >
-                  Generic form error
-                </p>
-              </div>
+                  Set end date
+                </span>
+              </label>
             </div>
           </div>
         </div>
@@ -38375,7 +38492,7 @@ exports[`Storyshots Views / Discounts / Sale create loading 1`] = `
               <span
                 class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
               >
-                Pricing
+                Discount Type
               </span>
               <div
                 class="CardTitle-toolbar-id"
@@ -38388,153 +38505,217 @@ exports[`Storyshots Views / Discounts / Sale create loading 1`] = `
               class="CardTitle-hr-id"
             />
             <div
-              class="MuiCardContent-root-id SalePricing-root-id"
+              class="MuiCardContent-root-id SaleType-root-id"
             >
               <div
-                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+                class="MuiFormControl-root-id RadioGroupField-root-id RadioGroupField-rootNoLabel-id"
               >
-                <label
-                  class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                  data-shrink="false"
-                >
-                  Discount Value
-                </label>
                 <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
+                  aria-label="type"
+                  class="MuiFormGroup-root-id"
+                  role="radiogroup"
                 >
-                  <fieldset
-                    aria-hidden="true"
-                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    style="padding-left:8px"
-                  >
-                    <legend
-                      class="MuiPrivateNotchedOutline-legend-id"
-                      style="width:0.01px"
-                    >
-                      <span>
-                        ​
-                      </span>
-                    </legend>
-                  </fieldset>
-                  <input
-                    aria-invalid="false"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputType-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                    disabled=""
-                    min="0"
-                    name="value"
-                    type="number"
-                    value=""
-                  />
-                  <div
-                    class="TextFieldWithChoices-adornment-id"
+                  <label
+                    class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id RadioGroupField-radioLabel-id"
                   >
                     <span
-                      class="MuiTypography-root-id MuiTypography-caption-id"
+                      class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id MuiPrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiPrivateSwitchBase-disabled-id MuiRadio-disabled-id"
+                      tabindex="-1"
                     >
-                      USD
+                      <span
+                        class="MuiIconButton-label-id"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
+                          />
+                        </svg>
+                        <input
+                          class="MuiPrivateSwitchBase-input-id"
+                          disabled=""
+                          name="type"
+                          type="radio"
+                          value="PERCENTAGE"
+                        />
+                      </span>
                     </span>
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      role="presentation"
-                      viewBox="0 0 24 24"
+                    <span
+                      class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id"
                     >
-                      <path
-                        d="M7 10l5 5 5-5z"
-                      />
-                      <path
-                        d="M0 0h24v24H0z"
-                        fill="none"
-                      />
-                    </svg>
-                  </div>
+                      Percentage
+                    </span>
+                  </label>
+                  <label
+                    class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id RadioGroupField-radioLabel-id"
+                  >
+                    <span
+                      class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id MuiPrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiPrivateSwitchBase-checked-id MuiRadio-checked-id MuiPrivateSwitchBase-disabled-id MuiRadio-disabled-id"
+                      tabindex="-1"
+                    >
+                      <span
+                        class="MuiIconButton-label-id"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
+                          />
+                        </svg>
+                        <input
+                          checked=""
+                          class="MuiPrivateSwitchBase-input-id"
+                          disabled=""
+                          name="type"
+                          type="radio"
+                          value="FIXED"
+                        />
+                      </span>
+                    </span>
+                    <span
+                      class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id"
+                    >
+                      Fixed Amount
+                    </span>
+                  </label>
                 </div>
               </div>
             </div>
+          </div>
+          <div
+            class="CardSpacer-spacer-id"
+          />
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation0-id MuiPaper-rounded-id MuiCard-root-id"
+          >
+            <div
+              class="CardTitle-root-id"
+            >
+              <span
+                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
+              >
+                Active Dates
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              />
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
             <hr
-              class="Hr-root-id"
+              class="CardTitle-hr-id"
             />
             <div
-              class="MuiCardContent-root-id SalePricing-root-id"
+              class="MuiCardContent-root-id"
             >
-              <h6
-                class="MuiTypography-root-id MuiTypography-subtitle1-id SalePricing-subheading-id"
-              >
-                Time Frame
-              </h6>
               <div
-                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+                class="Grid-root-id Grid-uniform-id"
               >
-                <label
-                  class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
-                  data-shrink="true"
-                >
-                  Start Date
-                </label>
                 <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
+                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                 >
-                  <fieldset
-                    aria-hidden="true"
-                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    style="padding-left:8px"
+                  <label
+                    class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
+                    data-shrink="true"
                   >
-                    <legend
-                      class="MuiPrivateNotchedOutline-legend-id"
-                      style="width:0"
+                    Start Date
+                  </label>
+                  <div
+                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
+                  >
+                    <fieldset
+                      aria-hidden="true"
+                      class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
+                      style="padding-left:8px"
                     >
-                      <span>
-                        ​
-                      </span>
-                    </legend>
-                  </fieldset>
-                  <input
-                    aria-invalid="false"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputType-id"
-                    disabled=""
-                    name="startDate"
-                    type="date"
-                    value=""
-                  />
+                      <legend
+                        class="MuiPrivateNotchedOutline-legend-id"
+                        style="width:0"
+                      >
+                        <span>
+                          ​
+                        </span>
+                      </legend>
+                    </fieldset>
+                    <input
+                      aria-invalid="false"
+                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputType-id"
+                      disabled=""
+                      name="startDate"
+                      type="date"
+                      value=""
+                    />
+                  </div>
+                </div>
+                <div
+                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+                >
+                  <label
+                    class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
+                    data-shrink="true"
+                  >
+                    Start Hour
+                  </label>
+                  <div
+                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
+                  >
+                    <fieldset
+                      aria-hidden="true"
+                      class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
+                      style="padding-left:8px"
+                    >
+                      <legend
+                        class="MuiPrivateNotchedOutline-legend-id"
+                        style="width:0"
+                      >
+                        <span>
+                          ​
+                        </span>
+                      </legend>
+                    </fieldset>
+                    <input
+                      aria-invalid="false"
+                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputType-id"
+                      disabled=""
+                      name="startTime"
+                      type="time"
+                      value=""
+                    />
+                  </div>
                 </div>
               </div>
-              <div
-                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+              <label
+                class="MuiFormControlLabel-root-id"
               >
-                <label
-                  class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
-                  data-shrink="true"
+                <button
+                  class="MuiButtonBase-root-id Checkbox-root-id"
+                  tabindex="0"
+                  type="button"
                 >
-                  End Date
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                >
-                  <fieldset
-                    aria-hidden="true"
-                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    style="padding-left:8px"
-                  >
-                    <legend
-                      class="MuiPrivateNotchedOutline-legend-id"
-                      style="width:0"
-                    >
-                      <span>
-                        ​
-                      </span>
-                    </legend>
-                  </fieldset>
                   <input
-                    aria-invalid="false"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputType-id"
-                    disabled=""
-                    name="endDate"
-                    type="date"
-                    value=""
+                    class="Checkbox-box-id"
+                    name="hasEndDate"
+                    type="checkbox"
+                    value="false"
                   />
-                </div>
-              </div>
+                </button>
+                <span
+                  class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
+                >
+                  Set end date
+                </span>
+              </label>
             </div>
           </div>
         </div>
@@ -38645,7 +38826,7 @@ exports[`Storyshots Views / Discounts / Sale details collections 1`] = `
               <span
                 class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
               >
-                Pricing
+                Discount Type
               </span>
               <div
                 class="CardTitle-toolbar-id"
@@ -38658,7 +38839,115 @@ exports[`Storyshots Views / Discounts / Sale details collections 1`] = `
               class="CardTitle-hr-id"
             />
             <div
-              class="MuiCardContent-root-id SalePricing-root-id"
+              class="MuiCardContent-root-id SaleType-root-id"
+            >
+              <div
+                class="MuiFormControl-root-id RadioGroupField-root-id RadioGroupField-rootNoLabel-id"
+              >
+                <div
+                  aria-label="type"
+                  class="MuiFormGroup-root-id"
+                  role="radiogroup"
+                >
+                  <label
+                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
+                  >
+                    <span
+                      class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiPrivateSwitchBase-checked-id MuiRadio-checked-id"
+                    >
+                      <span
+                        class="MuiIconButton-label-id"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
+                          />
+                        </svg>
+                        <input
+                          checked=""
+                          class="MuiPrivateSwitchBase-input-id"
+                          name="type"
+                          type="radio"
+                          value="PERCENTAGE"
+                        />
+                      </span>
+                    </span>
+                    <span
+                      class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
+                    >
+                      Percentage
+                    </span>
+                  </label>
+                  <label
+                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
+                  >
+                    <span
+                      class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id"
+                    >
+                      <span
+                        class="MuiIconButton-label-id"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
+                          />
+                        </svg>
+                        <input
+                          class="MuiPrivateSwitchBase-input-id"
+                          name="type"
+                          type="radio"
+                          value="FIXED"
+                        />
+                      </span>
+                    </span>
+                    <span
+                      class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
+                    >
+                      Fixed Amount
+                    </span>
+                  </label>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="CardSpacer-spacer-id"
+          />
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation0-id MuiPaper-rounded-id MuiCard-root-id"
+          >
+            <div
+              class="CardTitle-root-id"
+            >
+              <span
+                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
+              >
+                Value
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              />
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id"
             >
               <div
                 class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
@@ -38688,118 +38977,12 @@ exports[`Storyshots Views / Discounts / Sale details collections 1`] = `
                   </fieldset>
                   <input
                     aria-invalid="false"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputType-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                    min="0"
+                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                     name="value"
-                    type="number"
+                    type="text"
                     value="30"
                   />
-                  <div
-                    class="TextFieldWithChoices-adornment-id"
-                  >
-                    <span
-                      class="MuiTypography-root-id MuiTypography-caption-id"
-                    >
-                      %
-                    </span>
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      role="presentation"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        d="M7 10l5 5 5-5z"
-                      />
-                      <path
-                        d="M0 0h24v24H0z"
-                        fill="none"
-                      />
-                    </svg>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <hr
-              class="Hr-root-id"
-            />
-            <div
-              class="MuiCardContent-root-id SalePricing-root-id"
-            >
-              <h6
-                class="MuiTypography-root-id MuiTypography-subtitle1-id SalePricing-subheading-id"
-              >
-                Time Frame
-              </h6>
-              <div
-                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
-                  data-shrink="true"
-                >
-                  Start Date
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                >
-                  <fieldset
-                    aria-hidden="true"
-                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    style="padding-left:8px"
-                  >
-                    <legend
-                      class="MuiPrivateNotchedOutline-legend-id"
-                      style="width:0"
-                    >
-                      <span>
-                        ​
-                      </span>
-                    </legend>
-                  </fieldset>
-                  <input
-                    aria-invalid="false"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputType-id"
-                    name="startDate"
-                    type="date"
-                    value="2019-01-03"
-                  />
-                </div>
-              </div>
-              <div
-                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
-                  data-shrink="true"
-                >
-                  End Date
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                >
-                  <fieldset
-                    aria-hidden="true"
-                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    style="padding-left:8px"
-                  >
-                    <legend
-                      class="MuiPrivateNotchedOutline-legend-id"
-                      style="width:0"
-                    >
-                      <span>
-                        ​
-                      </span>
-                    </legend>
-                  </fieldset>
-                  <input
-                    aria-invalid="false"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputType-id"
-                    name="endDate"
-                    type="date"
-                    value=""
-                  />
+                  %
                 </div>
               </div>
             </div>
@@ -39046,6 +39229,130 @@ exports[`Storyshots Views / Discounts / Sale details collections 1`] = `
               </tbody>
             </table>
           </div>
+          <div
+            class="CardSpacer-spacer-id"
+          />
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation0-id MuiPaper-rounded-id MuiCard-root-id"
+          >
+            <div
+              class="CardTitle-root-id"
+            >
+              <span
+                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
+              >
+                Active Dates
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              />
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id"
+            >
+              <div
+                class="Grid-root-id Grid-uniform-id"
+              >
+                <div
+                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+                >
+                  <label
+                    class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
+                    data-shrink="true"
+                  >
+                    Start Date
+                  </label>
+                  <div
+                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
+                  >
+                    <fieldset
+                      aria-hidden="true"
+                      class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
+                      style="padding-left:8px"
+                    >
+                      <legend
+                        class="MuiPrivateNotchedOutline-legend-id"
+                        style="width:0"
+                      >
+                        <span>
+                          ​
+                        </span>
+                      </legend>
+                    </fieldset>
+                    <input
+                      aria-invalid="false"
+                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputType-id"
+                      name="startDate"
+                      type="date"
+                      value="2019-01-03"
+                    />
+                  </div>
+                </div>
+                <div
+                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+                >
+                  <label
+                    class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
+                    data-shrink="true"
+                  >
+                    Start Hour
+                  </label>
+                  <div
+                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
+                  >
+                    <fieldset
+                      aria-hidden="true"
+                      class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
+                      style="padding-left:8px"
+                    >
+                      <legend
+                        class="MuiPrivateNotchedOutline-legend-id"
+                        style="width:0"
+                      >
+                        <span>
+                          ​
+                        </span>
+                      </legend>
+                    </fieldset>
+                    <input
+                      aria-invalid="false"
+                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputType-id"
+                      name="startTime"
+                      type="time"
+                      value="00:00"
+                    />
+                  </div>
+                </div>
+              </div>
+              <label
+                class="MuiFormControlLabel-root-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id Checkbox-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="Checkbox-box-id"
+                    name="hasEndDate"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+                <span
+                  class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
+                >
+                  Set end date
+                </span>
+              </label>
+            </div>
+          </div>
         </div>
         <div>
           <div
@@ -39237,7 +39544,7 @@ exports[`Storyshots Views / Discounts / Sale details default 1`] = `
               <span
                 class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
               >
-                Pricing
+                Discount Type
               </span>
               <div
                 class="CardTitle-toolbar-id"
@@ -39250,7 +39557,115 @@ exports[`Storyshots Views / Discounts / Sale details default 1`] = `
               class="CardTitle-hr-id"
             />
             <div
-              class="MuiCardContent-root-id SalePricing-root-id"
+              class="MuiCardContent-root-id SaleType-root-id"
+            >
+              <div
+                class="MuiFormControl-root-id RadioGroupField-root-id RadioGroupField-rootNoLabel-id"
+              >
+                <div
+                  aria-label="type"
+                  class="MuiFormGroup-root-id"
+                  role="radiogroup"
+                >
+                  <label
+                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
+                  >
+                    <span
+                      class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiPrivateSwitchBase-checked-id MuiRadio-checked-id"
+                    >
+                      <span
+                        class="MuiIconButton-label-id"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
+                          />
+                        </svg>
+                        <input
+                          checked=""
+                          class="MuiPrivateSwitchBase-input-id"
+                          name="type"
+                          type="radio"
+                          value="PERCENTAGE"
+                        />
+                      </span>
+                    </span>
+                    <span
+                      class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
+                    >
+                      Percentage
+                    </span>
+                  </label>
+                  <label
+                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
+                  >
+                    <span
+                      class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id"
+                    >
+                      <span
+                        class="MuiIconButton-label-id"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
+                          />
+                        </svg>
+                        <input
+                          class="MuiPrivateSwitchBase-input-id"
+                          name="type"
+                          type="radio"
+                          value="FIXED"
+                        />
+                      </span>
+                    </span>
+                    <span
+                      class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
+                    >
+                      Fixed Amount
+                    </span>
+                  </label>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="CardSpacer-spacer-id"
+          />
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation0-id MuiPaper-rounded-id MuiCard-root-id"
+          >
+            <div
+              class="CardTitle-root-id"
+            >
+              <span
+                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
+              >
+                Value
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              />
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id"
             >
               <div
                 class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
@@ -39280,118 +39695,12 @@ exports[`Storyshots Views / Discounts / Sale details default 1`] = `
                   </fieldset>
                   <input
                     aria-invalid="false"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputType-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                    min="0"
+                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                     name="value"
-                    type="number"
+                    type="text"
                     value="30"
                   />
-                  <div
-                    class="TextFieldWithChoices-adornment-id"
-                  >
-                    <span
-                      class="MuiTypography-root-id MuiTypography-caption-id"
-                    >
-                      %
-                    </span>
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      role="presentation"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        d="M7 10l5 5 5-5z"
-                      />
-                      <path
-                        d="M0 0h24v24H0z"
-                        fill="none"
-                      />
-                    </svg>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <hr
-              class="Hr-root-id"
-            />
-            <div
-              class="MuiCardContent-root-id SalePricing-root-id"
-            >
-              <h6
-                class="MuiTypography-root-id MuiTypography-subtitle1-id SalePricing-subheading-id"
-              >
-                Time Frame
-              </h6>
-              <div
-                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
-                  data-shrink="true"
-                >
-                  Start Date
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                >
-                  <fieldset
-                    aria-hidden="true"
-                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    style="padding-left:8px"
-                  >
-                    <legend
-                      class="MuiPrivateNotchedOutline-legend-id"
-                      style="width:0"
-                    >
-                      <span>
-                        ​
-                      </span>
-                    </legend>
-                  </fieldset>
-                  <input
-                    aria-invalid="false"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputType-id"
-                    name="startDate"
-                    type="date"
-                    value="2019-01-03"
-                  />
-                </div>
-              </div>
-              <div
-                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
-                  data-shrink="true"
-                >
-                  End Date
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                >
-                  <fieldset
-                    aria-hidden="true"
-                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    style="padding-left:8px"
-                  >
-                    <legend
-                      class="MuiPrivateNotchedOutline-legend-id"
-                      style="width:0"
-                    >
-                      <span>
-                        ​
-                      </span>
-                    </legend>
-                  </fieldset>
-                  <input
-                    aria-invalid="false"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputType-id"
-                    name="endDate"
-                    type="date"
-                    value=""
-                  />
+                  %
                 </div>
               </div>
             </div>
@@ -39638,6 +39947,130 @@ exports[`Storyshots Views / Discounts / Sale details default 1`] = `
               </tbody>
             </table>
           </div>
+          <div
+            class="CardSpacer-spacer-id"
+          />
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation0-id MuiPaper-rounded-id MuiCard-root-id"
+          >
+            <div
+              class="CardTitle-root-id"
+            >
+              <span
+                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
+              >
+                Active Dates
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              />
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id"
+            >
+              <div
+                class="Grid-root-id Grid-uniform-id"
+              >
+                <div
+                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+                >
+                  <label
+                    class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
+                    data-shrink="true"
+                  >
+                    Start Date
+                  </label>
+                  <div
+                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
+                  >
+                    <fieldset
+                      aria-hidden="true"
+                      class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
+                      style="padding-left:8px"
+                    >
+                      <legend
+                        class="MuiPrivateNotchedOutline-legend-id"
+                        style="width:0"
+                      >
+                        <span>
+                          ​
+                        </span>
+                      </legend>
+                    </fieldset>
+                    <input
+                      aria-invalid="false"
+                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputType-id"
+                      name="startDate"
+                      type="date"
+                      value="2019-01-03"
+                    />
+                  </div>
+                </div>
+                <div
+                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+                >
+                  <label
+                    class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
+                    data-shrink="true"
+                  >
+                    Start Hour
+                  </label>
+                  <div
+                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
+                  >
+                    <fieldset
+                      aria-hidden="true"
+                      class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
+                      style="padding-left:8px"
+                    >
+                      <legend
+                        class="MuiPrivateNotchedOutline-legend-id"
+                        style="width:0"
+                      >
+                        <span>
+                          ​
+                        </span>
+                      </legend>
+                    </fieldset>
+                    <input
+                      aria-invalid="false"
+                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputType-id"
+                      name="startTime"
+                      type="time"
+                      value="00:00"
+                    />
+                  </div>
+                </div>
+              </div>
+              <label
+                class="MuiFormControlLabel-root-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id Checkbox-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="Checkbox-box-id"
+                    name="hasEndDate"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+                <span
+                  class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
+                >
+                  Set end date
+                </span>
+              </label>
+            </div>
+          </div>
         </div>
         <div>
           <div
@@ -39834,7 +40267,7 @@ exports[`Storyshots Views / Discounts / Sale details form errors 1`] = `
               <span
                 class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
               >
-                Pricing
+                Discount Type
               </span>
               <div
                 class="CardTitle-toolbar-id"
@@ -39847,7 +40280,115 @@ exports[`Storyshots Views / Discounts / Sale details form errors 1`] = `
               class="CardTitle-hr-id"
             />
             <div
-              class="MuiCardContent-root-id SalePricing-root-id"
+              class="MuiCardContent-root-id SaleType-root-id"
+            >
+              <div
+                class="MuiFormControl-root-id RadioGroupField-root-id RadioGroupField-rootNoLabel-id"
+              >
+                <div
+                  aria-label="type"
+                  class="MuiFormGroup-root-id"
+                  role="radiogroup"
+                >
+                  <label
+                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
+                  >
+                    <span
+                      class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiPrivateSwitchBase-checked-id MuiRadio-checked-id"
+                    >
+                      <span
+                        class="MuiIconButton-label-id"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
+                          />
+                        </svg>
+                        <input
+                          checked=""
+                          class="MuiPrivateSwitchBase-input-id"
+                          name="type"
+                          type="radio"
+                          value="PERCENTAGE"
+                        />
+                      </span>
+                    </span>
+                    <span
+                      class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
+                    >
+                      Percentage
+                    </span>
+                  </label>
+                  <label
+                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
+                  >
+                    <span
+                      class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id"
+                    >
+                      <span
+                        class="MuiIconButton-label-id"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
+                          />
+                        </svg>
+                        <input
+                          class="MuiPrivateSwitchBase-input-id"
+                          name="type"
+                          type="radio"
+                          value="FIXED"
+                        />
+                      </span>
+                    </span>
+                    <span
+                      class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
+                    >
+                      Fixed Amount
+                    </span>
+                  </label>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="CardSpacer-spacer-id"
+          />
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation0-id MuiPaper-rounded-id MuiCard-root-id"
+          >
+            <div
+              class="CardTitle-root-id"
+            >
+              <span
+                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
+              >
+                Value
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              />
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id"
             >
               <div
                 class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
@@ -39877,36 +40418,12 @@ exports[`Storyshots Views / Discounts / Sale details form errors 1`] = `
                   </fieldset>
                   <input
                     aria-invalid="true"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputType-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                    min="0"
+                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                     name="value"
-                    type="number"
+                    type="text"
                     value="30"
                   />
-                  <div
-                    class="TextFieldWithChoices-adornment-id"
-                  >
-                    <span
-                      class="MuiTypography-root-id MuiTypography-caption-id"
-                    >
-                      %
-                    </span>
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      role="presentation"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        d="M7 10l5 5 5-5z"
-                      />
-                      <path
-                        d="M0 0h24v24H0z"
-                        fill="none"
-                      />
-                    </svg>
-                  </div>
+                  %
                 </div>
                 <p
                   class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
@@ -39915,98 +40432,6 @@ exports[`Storyshots Views / Discounts / Sale details form errors 1`] = `
                 </p>
               </div>
             </div>
-            <hr
-              class="Hr-root-id"
-            />
-            <div
-              class="MuiCardContent-root-id SalePricing-root-id"
-            >
-              <h6
-                class="MuiTypography-root-id MuiTypography-subtitle1-id SalePricing-subheading-id"
-              >
-                Time Frame
-              </h6>
-              <div
-                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
-                  data-shrink="true"
-                >
-                  Start Date
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                >
-                  <fieldset
-                    aria-hidden="true"
-                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    style="padding-left:8px"
-                  >
-                    <legend
-                      class="MuiPrivateNotchedOutline-legend-id"
-                      style="width:0"
-                    >
-                      <span>
-                        ​
-                      </span>
-                    </legend>
-                  </fieldset>
-                  <input
-                    aria-invalid="true"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputType-id"
-                    name="startDate"
-                    type="date"
-                    value="2019-01-03"
-                  />
-                </div>
-                <p
-                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
-                >
-                  Generic form error
-                </p>
-              </div>
-              <div
-                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiFormLabel-error-id MuiInputLabel-error-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
-                  data-shrink="true"
-                >
-                  End Date
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                >
-                  <fieldset
-                    aria-hidden="true"
-                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    style="padding-left:8px"
-                  >
-                    <legend
-                      class="MuiPrivateNotchedOutline-legend-id"
-                      style="width:0"
-                    >
-                      <span>
-                        ​
-                      </span>
-                    </legend>
-                  </fieldset>
-                  <input
-                    aria-invalid="true"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputType-id"
-                    name="endDate"
-                    type="date"
-                    value=""
-                  />
-                </div>
-                <p
-                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
-                >
-                  Generic form error
-                </p>
-              </div>
-            </div>
           </div>
           <div
             class="CardSpacer-spacer-id"
@@ -40250,6 +40675,140 @@ exports[`Storyshots Views / Discounts / Sale details form errors 1`] = `
               </tbody>
             </table>
           </div>
+          <div
+            class="CardSpacer-spacer-id"
+          />
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation0-id MuiPaper-rounded-id MuiCard-root-id"
+          >
+            <div
+              class="CardTitle-root-id"
+            >
+              <span
+                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
+              >
+                Active Dates
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              />
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id"
+            >
+              <div
+                class="Grid-root-id Grid-uniform-id"
+              >
+                <div
+                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+                >
+                  <label
+                    class="MuiFormLabel-root-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
+                    data-shrink="true"
+                  >
+                    Start Date
+                  </label>
+                  <div
+                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
+                  >
+                    <fieldset
+                      aria-hidden="true"
+                      class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
+                      style="padding-left:8px"
+                    >
+                      <legend
+                        class="MuiPrivateNotchedOutline-legend-id"
+                        style="width:0"
+                      >
+                        <span>
+                          ​
+                        </span>
+                      </legend>
+                    </fieldset>
+                    <input
+                      aria-invalid="true"
+                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputType-id"
+                      name="startDate"
+                      type="date"
+                      value="2019-01-03"
+                    />
+                  </div>
+                  <p
+                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
+                  >
+                    Generic form error
+                  </p>
+                </div>
+                <div
+                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+                >
+                  <label
+                    class="MuiFormLabel-root-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
+                    data-shrink="true"
+                  >
+                    Start Hour
+                  </label>
+                  <div
+                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
+                  >
+                    <fieldset
+                      aria-hidden="true"
+                      class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
+                      style="padding-left:8px"
+                    >
+                      <legend
+                        class="MuiPrivateNotchedOutline-legend-id"
+                        style="width:0"
+                      >
+                        <span>
+                          ​
+                        </span>
+                      </legend>
+                    </fieldset>
+                    <input
+                      aria-invalid="true"
+                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputType-id"
+                      name="startTime"
+                      type="time"
+                      value="00:00"
+                    />
+                  </div>
+                  <p
+                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
+                  >
+                    Generic form error
+                  </p>
+                </div>
+              </div>
+              <label
+                class="MuiFormControlLabel-root-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id Checkbox-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="Checkbox-box-id"
+                    name="hasEndDate"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+                <span
+                  class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
+                >
+                  Set end date
+                </span>
+              </label>
+            </div>
+          </div>
         </div>
         <div>
           <div
@@ -40447,7 +41006,7 @@ exports[`Storyshots Views / Discounts / Sale details loading 1`] = `
               <span
                 class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
               >
-                Pricing
+                Discount Type
               </span>
               <div
                 class="CardTitle-toolbar-id"
@@ -40460,7 +41019,119 @@ exports[`Storyshots Views / Discounts / Sale details loading 1`] = `
               class="CardTitle-hr-id"
             />
             <div
-              class="MuiCardContent-root-id SalePricing-root-id"
+              class="MuiCardContent-root-id SaleType-root-id"
+            >
+              <div
+                class="MuiFormControl-root-id RadioGroupField-root-id RadioGroupField-rootNoLabel-id"
+              >
+                <div
+                  aria-label="type"
+                  class="MuiFormGroup-root-id"
+                  role="radiogroup"
+                >
+                  <label
+                    class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id RadioGroupField-radioLabel-id"
+                  >
+                    <span
+                      class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id MuiPrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiPrivateSwitchBase-disabled-id MuiRadio-disabled-id"
+                      tabindex="-1"
+                    >
+                      <span
+                        class="MuiIconButton-label-id"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
+                          />
+                        </svg>
+                        <input
+                          class="MuiPrivateSwitchBase-input-id"
+                          disabled=""
+                          name="type"
+                          type="radio"
+                          value="PERCENTAGE"
+                        />
+                      </span>
+                    </span>
+                    <span
+                      class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id"
+                    >
+                      Percentage
+                    </span>
+                  </label>
+                  <label
+                    class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id RadioGroupField-radioLabel-id"
+                  >
+                    <span
+                      class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id MuiPrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiPrivateSwitchBase-checked-id MuiRadio-checked-id MuiPrivateSwitchBase-disabled-id MuiRadio-disabled-id"
+                      tabindex="-1"
+                    >
+                      <span
+                        class="MuiIconButton-label-id"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
+                          />
+                        </svg>
+                        <input
+                          checked=""
+                          class="MuiPrivateSwitchBase-input-id"
+                          disabled=""
+                          name="type"
+                          type="radio"
+                          value="FIXED"
+                        />
+                      </span>
+                    </span>
+                    <span
+                      class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id"
+                    >
+                      Fixed Amount
+                    </span>
+                  </label>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="CardSpacer-spacer-id"
+          />
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation0-id MuiPaper-rounded-id MuiCard-root-id"
+          >
+            <div
+              class="CardTitle-root-id"
+            >
+              <span
+                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
+              >
+                Value
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              />
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id"
             >
               <div
                 class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
@@ -40490,121 +41161,13 @@ exports[`Storyshots Views / Discounts / Sale details loading 1`] = `
                   </fieldset>
                   <input
                     aria-invalid="false"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputType-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
+                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                     disabled=""
-                    min="0"
                     name="value"
-                    type="number"
-                    value=""
-                  />
-                  <div
-                    class="TextFieldWithChoices-adornment-id"
-                  >
-                    <span
-                      class="MuiTypography-root-id MuiTypography-caption-id"
-                    >
-                      USD
-                    </span>
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      role="presentation"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        d="M7 10l5 5 5-5z"
-                      />
-                      <path
-                        d="M0 0h24v24H0z"
-                        fill="none"
-                      />
-                    </svg>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <hr
-              class="Hr-root-id"
-            />
-            <div
-              class="MuiCardContent-root-id SalePricing-root-id"
-            >
-              <h6
-                class="MuiTypography-root-id MuiTypography-subtitle1-id SalePricing-subheading-id"
-              >
-                Time Frame
-              </h6>
-              <div
-                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
-                  data-shrink="true"
-                >
-                  Start Date
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                >
-                  <fieldset
-                    aria-hidden="true"
-                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    style="padding-left:8px"
-                  >
-                    <legend
-                      class="MuiPrivateNotchedOutline-legend-id"
-                      style="width:0"
-                    >
-                      <span>
-                        ​
-                      </span>
-                    </legend>
-                  </fieldset>
-                  <input
-                    aria-invalid="false"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputType-id"
-                    disabled=""
-                    name="startDate"
-                    type="date"
-                    value=""
-                  />
-                </div>
-              </div>
-              <div
-                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
-                  data-shrink="true"
-                >
-                  End Date
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                >
-                  <fieldset
-                    aria-hidden="true"
-                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    style="padding-left:8px"
-                  >
-                    <legend
-                      class="MuiPrivateNotchedOutline-legend-id"
-                      style="width:0"
-                    >
-                      <span>
-                        ​
-                      </span>
-                    </legend>
-                  </fieldset>
-                  <input
-                    aria-invalid="false"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputType-id"
-                    disabled=""
-                    name="endDate"
-                    type="date"
+                    type="text"
                     value=""
                   />
+                  USD
                 </div>
               </div>
             </div>
@@ -40865,6 +41428,132 @@ exports[`Storyshots Views / Discounts / Sale details loading 1`] = `
               </tbody>
             </table>
           </div>
+          <div
+            class="CardSpacer-spacer-id"
+          />
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation0-id MuiPaper-rounded-id MuiCard-root-id"
+          >
+            <div
+              class="CardTitle-root-id"
+            >
+              <span
+                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
+              >
+                Active Dates
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              />
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id"
+            >
+              <div
+                class="Grid-root-id Grid-uniform-id"
+              >
+                <div
+                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+                >
+                  <label
+                    class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
+                    data-shrink="true"
+                  >
+                    Start Date
+                  </label>
+                  <div
+                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
+                  >
+                    <fieldset
+                      aria-hidden="true"
+                      class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
+                      style="padding-left:8px"
+                    >
+                      <legend
+                        class="MuiPrivateNotchedOutline-legend-id"
+                        style="width:0"
+                      >
+                        <span>
+                          ​
+                        </span>
+                      </legend>
+                    </fieldset>
+                    <input
+                      aria-invalid="false"
+                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputType-id"
+                      disabled=""
+                      name="startDate"
+                      type="date"
+                      value=""
+                    />
+                  </div>
+                </div>
+                <div
+                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+                >
+                  <label
+                    class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
+                    data-shrink="true"
+                  >
+                    Start Hour
+                  </label>
+                  <div
+                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
+                  >
+                    <fieldset
+                      aria-hidden="true"
+                      class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
+                      style="padding-left:8px"
+                    >
+                      <legend
+                        class="MuiPrivateNotchedOutline-legend-id"
+                        style="width:0"
+                      >
+                        <span>
+                          ​
+                        </span>
+                      </legend>
+                    </fieldset>
+                    <input
+                      aria-invalid="false"
+                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputType-id"
+                      disabled=""
+                      name="startTime"
+                      type="time"
+                      value=""
+                    />
+                  </div>
+                </div>
+              </div>
+              <label
+                class="MuiFormControlLabel-root-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id Checkbox-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="Checkbox-box-id"
+                    name="hasEndDate"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+                <span
+                  class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
+                >
+                  Set end date
+                </span>
+              </label>
+            </div>
+          </div>
         </div>
         <div>
           <div
@@ -41072,7 +41761,7 @@ exports[`Storyshots Views / Discounts / Sale details products 1`] = `
               <span
                 class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
               >
-                Pricing
+                Discount Type
               </span>
               <div
                 class="CardTitle-toolbar-id"
@@ -41085,7 +41774,115 @@ exports[`Storyshots Views / Discounts / Sale details products 1`] = `
               class="CardTitle-hr-id"
             />
             <div
-              class="MuiCardContent-root-id SalePricing-root-id"
+              class="MuiCardContent-root-id SaleType-root-id"
+            >
+              <div
+                class="MuiFormControl-root-id RadioGroupField-root-id RadioGroupField-rootNoLabel-id"
+              >
+                <div
+                  aria-label="type"
+                  class="MuiFormGroup-root-id"
+                  role="radiogroup"
+                >
+                  <label
+                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
+                  >
+                    <span
+                      class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiPrivateSwitchBase-checked-id MuiRadio-checked-id"
+                    >
+                      <span
+                        class="MuiIconButton-label-id"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
+                          />
+                        </svg>
+                        <input
+                          checked=""
+                          class="MuiPrivateSwitchBase-input-id"
+                          name="type"
+                          type="radio"
+                          value="PERCENTAGE"
+                        />
+                      </span>
+                    </span>
+                    <span
+                      class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
+                    >
+                      Percentage
+                    </span>
+                  </label>
+                  <label
+                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
+                  >
+                    <span
+                      class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id"
+                    >
+                      <span
+                        class="MuiIconButton-label-id"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
+                          />
+                        </svg>
+                        <input
+                          class="MuiPrivateSwitchBase-input-id"
+                          name="type"
+                          type="radio"
+                          value="FIXED"
+                        />
+                      </span>
+                    </span>
+                    <span
+                      class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
+                    >
+                      Fixed Amount
+                    </span>
+                  </label>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="CardSpacer-spacer-id"
+          />
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation0-id MuiPaper-rounded-id MuiCard-root-id"
+          >
+            <div
+              class="CardTitle-root-id"
+            >
+              <span
+                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
+              >
+                Value
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              />
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id"
             >
               <div
                 class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
@@ -41115,118 +41912,12 @@ exports[`Storyshots Views / Discounts / Sale details products 1`] = `
                   </fieldset>
                   <input
                     aria-invalid="false"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputType-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                    min="0"
+                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                     name="value"
-                    type="number"
+                    type="text"
                     value="30"
                   />
-                  <div
-                    class="TextFieldWithChoices-adornment-id"
-                  >
-                    <span
-                      class="MuiTypography-root-id MuiTypography-caption-id"
-                    >
-                      %
-                    </span>
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      role="presentation"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        d="M7 10l5 5 5-5z"
-                      />
-                      <path
-                        d="M0 0h24v24H0z"
-                        fill="none"
-                      />
-                    </svg>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <hr
-              class="Hr-root-id"
-            />
-            <div
-              class="MuiCardContent-root-id SalePricing-root-id"
-            >
-              <h6
-                class="MuiTypography-root-id MuiTypography-subtitle1-id SalePricing-subheading-id"
-              >
-                Time Frame
-              </h6>
-              <div
-                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
-                  data-shrink="true"
-                >
-                  Start Date
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                >
-                  <fieldset
-                    aria-hidden="true"
-                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    style="padding-left:8px"
-                  >
-                    <legend
-                      class="MuiPrivateNotchedOutline-legend-id"
-                      style="width:0"
-                    >
-                      <span>
-                        ​
-                      </span>
-                    </legend>
-                  </fieldset>
-                  <input
-                    aria-invalid="false"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputType-id"
-                    name="startDate"
-                    type="date"
-                    value="2019-01-03"
-                  />
-                </div>
-              </div>
-              <div
-                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
-                  data-shrink="true"
-                >
-                  End Date
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                >
-                  <fieldset
-                    aria-hidden="true"
-                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    style="padding-left:8px"
-                  >
-                    <legend
-                      class="MuiPrivateNotchedOutline-legend-id"
-                      style="width:0"
-                    >
-                      <span>
-                        ​
-                      </span>
-                    </legend>
-                  </fieldset>
-                  <input
-                    aria-invalid="false"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputType-id"
-                    name="endDate"
-                    type="date"
-                    value=""
-                  />
+                  %
                 </div>
               </div>
             </div>
@@ -41757,6 +42448,130 @@ exports[`Storyshots Views / Discounts / Sale details products 1`] = `
               </tbody>
             </table>
           </div>
+          <div
+            class="CardSpacer-spacer-id"
+          />
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation0-id MuiPaper-rounded-id MuiCard-root-id"
+          >
+            <div
+              class="CardTitle-root-id"
+            >
+              <span
+                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
+              >
+                Active Dates
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              />
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id"
+            >
+              <div
+                class="Grid-root-id Grid-uniform-id"
+              >
+                <div
+                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+                >
+                  <label
+                    class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
+                    data-shrink="true"
+                  >
+                    Start Date
+                  </label>
+                  <div
+                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
+                  >
+                    <fieldset
+                      aria-hidden="true"
+                      class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
+                      style="padding-left:8px"
+                    >
+                      <legend
+                        class="MuiPrivateNotchedOutline-legend-id"
+                        style="width:0"
+                      >
+                        <span>
+                          ​
+                        </span>
+                      </legend>
+                    </fieldset>
+                    <input
+                      aria-invalid="false"
+                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputType-id"
+                      name="startDate"
+                      type="date"
+                      value="2019-01-03"
+                    />
+                  </div>
+                </div>
+                <div
+                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+                >
+                  <label
+                    class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
+                    data-shrink="true"
+                  >
+                    Start Hour
+                  </label>
+                  <div
+                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
+                  >
+                    <fieldset
+                      aria-hidden="true"
+                      class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
+                      style="padding-left:8px"
+                    >
+                      <legend
+                        class="MuiPrivateNotchedOutline-legend-id"
+                        style="width:0"
+                      >
+                        <span>
+                          ​
+                        </span>
+                      </legend>
+                    </fieldset>
+                    <input
+                      aria-invalid="false"
+                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputType-id"
+                      name="startTime"
+                      type="time"
+                      value="00:00"
+                    />
+                  </div>
+                </div>
+              </div>
+              <label
+                class="MuiFormControlLabel-root-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id Checkbox-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="Checkbox-box-id"
+                    name="hasEndDate"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+                <span
+                  class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
+                >
+                  Set end date
+                </span>
+              </label>
+            </div>
+          </div>
         </div>
         <div>
           <div
@@ -43183,7 +43998,7 @@ exports[`Storyshots Views / Discounts / Voucher create default 1`] = `
                 class="Grid-root-id Grid-uniform-id"
               >
                 <div
-                  class="MuiFormControl-root-id RadioGroupField-formControl-id"
+                  class="MuiFormControl-root-id RadioGroupField-root-id RadioGroupField-rootNoLabel-id"
                 >
                   <div
                     aria-label="discountType"
@@ -43371,7 +44186,7 @@ exports[`Storyshots Views / Discounts / Voucher create default 1`] = `
                 class="FormSpacer-spacer-id"
               />
               <hr
-                class="Hr-root-id"
+                class="Hr-root-id VoucherValue-hr-id"
               />
               <div
                 class="FormSpacer-spacer-id"
@@ -43432,7 +44247,7 @@ exports[`Storyshots Views / Discounts / Voucher create default 1`] = `
               class="MuiCardContent-root-id"
             >
               <div
-                class="MuiFormControl-root-id RadioGroupField-formControl-id"
+                class="MuiFormControl-root-id RadioGroupField-root-id RadioGroupField-rootNoLabel-id"
               >
                 <div
                   aria-label="requirementsPicker"
@@ -43544,9 +44359,6 @@ exports[`Storyshots Views / Discounts / Voucher create default 1`] = `
                   </label>
                 </div>
               </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
             </div>
           </div>
           <div
@@ -43888,7 +44700,7 @@ exports[`Storyshots Views / Discounts / Voucher create form errors 1`] = `
                 class="Grid-root-id Grid-uniform-id"
               >
                 <div
-                  class="MuiFormControl-root-id RadioGroupField-formControl-id"
+                  class="MuiFormControl-root-id RadioGroupField-root-id RadioGroupField-rootNoLabel-id"
                 >
                   <div
                     aria-label="discountType"
@@ -44081,7 +44893,7 @@ exports[`Storyshots Views / Discounts / Voucher create form errors 1`] = `
                 class="FormSpacer-spacer-id"
               />
               <hr
-                class="Hr-root-id"
+                class="Hr-root-id VoucherValue-hr-id"
               />
               <div
                 class="FormSpacer-spacer-id"
@@ -44142,7 +44954,7 @@ exports[`Storyshots Views / Discounts / Voucher create form errors 1`] = `
               class="MuiCardContent-root-id"
             >
               <div
-                class="MuiFormControl-root-id RadioGroupField-formControl-id"
+                class="MuiFormControl-root-id RadioGroupField-root-id RadioGroupField-rootNoLabel-id"
               >
                 <div
                   aria-label="requirementsPicker"
@@ -44254,9 +45066,6 @@ exports[`Storyshots Views / Discounts / Voucher create form errors 1`] = `
                   </label>
                 </div>
               </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
             </div>
           </div>
           <div
@@ -44592,7 +45401,7 @@ exports[`Storyshots Views / Discounts / Voucher details default 1`] = `
                 class="Grid-root-id Grid-uniform-id"
               >
                 <div
-                  class="MuiFormControl-root-id RadioGroupField-formControl-id"
+                  class="MuiFormControl-root-id RadioGroupField-root-id RadioGroupField-rootNoLabel-id"
                 >
                   <div
                     aria-label="discountType"
@@ -44782,13 +45591,16 @@ exports[`Storyshots Views / Discounts / Voucher details default 1`] = `
               <div
                 class="FormSpacer-spacer-id"
               />
+              <hr
+                class="Hr-root-id VoucherValue-hr-id"
+              />
               <div
-                class="MuiFormControl-root-id RadioGroupField-formControl-id"
+                class="MuiFormControl-root-id RadioGroupField-root-id"
               >
                 <label
                   class="MuiFormLabel-root-id RadioGroupField-formLabel-id"
                 >
-                  Discount Specific Information
+                  Voucher Specific Information
                 </label>
                 <div
                   aria-label="type"
@@ -44866,11 +45678,8 @@ exports[`Storyshots Views / Discounts / Voucher details default 1`] = `
                   </label>
                 </div>
               </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
               <hr
-                class="Hr-root-id"
+                class="Hr-root-id VoucherValue-hr-id"
               />
               <div
                 class="FormSpacer-spacer-id"
@@ -44937,7 +45746,7 @@ exports[`Storyshots Views / Discounts / Voucher details default 1`] = `
               class="MuiCardContent-root-id"
             >
               <div
-                class="MuiFormControl-root-id RadioGroupField-formControl-id"
+                class="MuiFormControl-root-id RadioGroupField-root-id RadioGroupField-rootNoLabel-id"
               >
                 <div
                   aria-label="requirementsPicker"
@@ -45545,7 +46354,7 @@ exports[`Storyshots Views / Discounts / Voucher details form errors 1`] = `
                 class="Grid-root-id Grid-uniform-id"
               >
                 <div
-                  class="MuiFormControl-root-id RadioGroupField-formControl-id"
+                  class="MuiFormControl-root-id RadioGroupField-root-id RadioGroupField-rootNoLabel-id"
                 >
                   <div
                     aria-label="discountType"
@@ -45745,13 +46554,16 @@ exports[`Storyshots Views / Discounts / Voucher details form errors 1`] = `
               <div
                 class="FormSpacer-spacer-id"
               />
+              <hr
+                class="Hr-root-id VoucherValue-hr-id"
+              />
               <div
-                class="MuiFormControl-root-id RadioGroupField-formControl-id"
+                class="MuiFormControl-root-id RadioGroupField-root-id"
               >
                 <label
                   class="MuiFormLabel-root-id MuiFormLabel-error-id RadioGroupField-formLabel-id"
                 >
-                  Discount Specific Information
+                  Voucher Specific Information
                 </label>
                 <div
                   aria-label="type"
@@ -45834,11 +46646,8 @@ exports[`Storyshots Views / Discounts / Voucher details form errors 1`] = `
                   Generic form error
                 </p>
               </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
               <hr
-                class="Hr-root-id"
+                class="Hr-root-id VoucherValue-hr-id"
               />
               <div
                 class="FormSpacer-spacer-id"
@@ -45905,7 +46714,7 @@ exports[`Storyshots Views / Discounts / Voucher details form errors 1`] = `
               class="MuiCardContent-root-id"
             >
               <div
-                class="MuiFormControl-root-id RadioGroupField-formControl-id"
+                class="MuiFormControl-root-id RadioGroupField-root-id RadioGroupField-rootNoLabel-id"
               >
                 <div
                   aria-label="requirementsPicker"
@@ -46528,7 +47337,7 @@ exports[`Storyshots Views / Discounts / Voucher details loading 1`] = `
                 class="Grid-root-id Grid-uniform-id"
               >
                 <div
-                  class="MuiFormControl-root-id RadioGroupField-formControl-id"
+                  class="MuiFormControl-root-id RadioGroupField-root-id RadioGroupField-rootNoLabel-id"
                 >
                   <div
                     aria-label="discountType"
@@ -46725,13 +47534,16 @@ exports[`Storyshots Views / Discounts / Voucher details loading 1`] = `
               <div
                 class="FormSpacer-spacer-id"
               />
+              <hr
+                class="Hr-root-id VoucherValue-hr-id"
+              />
               <div
-                class="MuiFormControl-root-id RadioGroupField-formControl-id"
+                class="MuiFormControl-root-id RadioGroupField-root-id"
               >
                 <label
                   class="MuiFormLabel-root-id MuiFormLabel-disabled-id RadioGroupField-formLabel-id"
                 >
-                  Discount Specific Information
+                  Voucher Specific Information
                 </label>
                 <div
                   aria-label="type"
@@ -46813,11 +47625,8 @@ exports[`Storyshots Views / Discounts / Voucher details loading 1`] = `
                   </label>
                 </div>
               </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
               <hr
-                class="Hr-root-id"
+                class="Hr-root-id VoucherValue-hr-id"
               />
               <div
                 class="FormSpacer-spacer-id"
@@ -46886,7 +47695,7 @@ exports[`Storyshots Views / Discounts / Voucher details loading 1`] = `
               class="MuiCardContent-root-id"
             >
               <div
-                class="MuiFormControl-root-id RadioGroupField-formControl-id"
+                class="MuiFormControl-root-id RadioGroupField-root-id RadioGroupField-rootNoLabel-id"
               >
                 <div
                   aria-label="requirementsPicker"
@@ -47004,9 +47813,6 @@ exports[`Storyshots Views / Discounts / Voucher details loading 1`] = `
                   </label>
                 </div>
               </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
             </div>
           </div>
           <div
diff --git a/src/theme.ts b/src/theme.ts
index ee52be8b7..1ed2b9bfd 100644
--- a/src/theme.ts
+++ b/src/theme.ts
@@ -106,7 +106,7 @@ export default (colors: IThemeColors): Theme =>
       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%"
         }
       }
     },