Fix sale dates

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;

src/discounts/components/DiscountDates/index.ts

@@ -0,0 +1,2 @@
+export { default } from "./DiscountDates";
+export * from "./DiscountDates";

src/discounts/components/SaleDetailsPage/SaleDetailsPage.tsx

@@ -11,23 +11,27 @@ import PageHeader from "@saleor/components/PageHeader";
 import SaveButtonBar from "@saleor/components/SaveButtonBar";
 import { Tab, TabContainer } from "@saleor/components/Tab";
 import { sectionNames } from "@saleor/intl";
-import { maybe } from "../../../misc";
+import { maybe, splitDateTime } from "../../../misc";
 import { ListProps, TabListActions, UserError } from "../../../types";
 import { SaleType as SaleTypeEnum } from "../../../types/globalTypes";
 import { SaleDetails_sale } from "../../types/SaleDetails";
 import DiscountCategories from "../DiscountCategories";
 import DiscountCollections from "../DiscountCollections";
+import DiscountDates from "../DiscountDates";
 import DiscountProducts from "../DiscountProducts";
 import SaleInfo from "../SaleInfo";
 import SaleSummary from "../SaleSummary";
 import SaleType from "../SaleType";
 
 export interface FormData {
+  endDate: string;
+  endTime: string;
+  hasEndDate: boolean;
   name: string;
   startDate: string;
-  endDate: string;
+  startTime: string;
-  value: string;
   type: SaleTypeEnum;
+  value: string;
 }
 
 export enum SaleDetailsPageTab {
@@ -106,9 +110,12 @@ 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, ""),
+    startDate: splitDateTime(maybe(() => sale.startDate, "")).date,
+    startTime: splitDateTime(maybe(() => sale.startDate, "")).time,
     type: maybe(() => sale.type, SaleTypeEnum.FIXED),
     value: maybe(() => sale.value.toString(), "")
   };
@@ -237,6 +244,14 @@ const SaleDetailsPage: React.StatelessComponent<SaleDetailsPageProps> = ({
                   toolbar={productListToolbar}
                 />
               )}
+              <CardSpacer />
+              <DiscountDates
+                data={data}
+                disabled={disabled}
+                defaultCurrency={defaultCurrency}
+                errors={formErrors}
+                onChange={change}
+              />
             </div>
             <div>
               <SaleSummary defaultCurrency={defaultCurrency} sale={sale} />

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}

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, maybe, joinDateTime } 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:
+                                      endDate: formData.hasEndDate
-                                        formData.endDate === ""
+                                        ? joinDateTime(
-                                          ? null
+                                            formData.endDate,
-                                          : formData.endDate,
+                                            formData.endTime
+                                          )
+                                        : null,
                                       name: formData.name,
-                                      startDate:
+                                      startDate: joinDateTime(
-                                        formData.startDate === ""
+                                        formData.startDate,
-                                          ? null
+                                        formData.startTime
-                                          : formData.startDate,
+                                      ),
                                       type: discountValueTypeEnum(
                                         formData.type
                                       ),