From e6dbd3a89aa0ad955c38bfd51289f641eed3d9c3 Mon Sep 17 00:00:00 2001
From: dominik-zeglen <flesz3@o2.pl>
Date: Fri, 11 Oct 2019 11:33:56 +0200
Subject: [PATCH] Fix sale value

---
 locale/messages.pot                           |  18 +-
 .../SaleDetailsPage/SaleDetailsPage.tsx       |   9 +
 .../components/SaleValue/SaleValue.tsx        |  61 ++++
 .../components/VoucherValue/VoucherValue.tsx  |   4 +-
 src/discounts/views/SaleDetails.tsx           |   2 +-
 .../__snapshots__/Stories.test.ts.snap        | 331 ++++++++++++++++++
 6 files changed, 421 insertions(+), 4 deletions(-)

diff --git a/locale/messages.pot b/locale/messages.pot
index c28f2104a..a5f2fceae 100644
--- a/locale/messages.pot
+++ b/locale/messages.pot
@@ -1,6 +1,6 @@
 msgid ""
 msgstr ""
-"POT-Creation-Date: 2019-10-15T15:53:11.572Z\n"
+"POT-Creation-Date: 2019-10-15T15:56:00.137Z\n"
 "Content-Type: text/plain; charset=UTF-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "MIME-Version: 1.0\n"
@@ -3259,6 +3259,14 @@ msgctxt "header"
 msgid "Discount Type"
 msgstr ""
 
+#: build/locale/src/discounts/components/SaleValue/SaleValue.json
+#. [src.discounts.components.SaleValue.1205967018] - sale discount
+#. defaultMessage is:
+#. Discount Value
+msgctxt "sale discount"
+msgid "Discount Value"
+msgstr ""
+
 #: build/locale/src/discounts/components/VoucherValue/VoucherValue.json
 #. [src.discounts.components.VoucherValue.1205967018]
 #. defaultMessage is:
@@ -8563,6 +8571,14 @@ msgctxt "sale value"
 msgid "Value"
 msgstr ""
 
+#: build/locale/src/discounts/components/SaleValue/SaleValue.json
+#. [src.discounts.components.SaleValue.1148029984] - sale value, header
+#. defaultMessage is:
+#. Value
+msgctxt "sale value, header"
+msgid "Value"
+msgstr ""
+
 #: build/locale/src/discounts/components/VoucherList/VoucherList.json
 #. [src.discounts.components.VoucherList.1148029984] - voucher value
 #. defaultMessage is:
diff --git a/src/discounts/components/SaleDetailsPage/SaleDetailsPage.tsx b/src/discounts/components/SaleDetailsPage/SaleDetailsPage.tsx
index ef52fabb3..830e96e57 100644
--- a/src/discounts/components/SaleDetailsPage/SaleDetailsPage.tsx
+++ b/src/discounts/components/SaleDetailsPage/SaleDetailsPage.tsx
@@ -22,6 +22,7 @@ import DiscountProducts from "../DiscountProducts";
 import SaleInfo from "../SaleInfo";
 import SaleSummary from "../SaleSummary";
 import SaleType from "../SaleType";
+import SaleValue from "../SaleValue";
 
 export interface FormData {
   endDate: string;
@@ -138,6 +139,14 @@ const SaleDetailsPage: React.StatelessComponent<SaleDetailsPageProps> = ({
               <CardSpacer />
               <SaleType data={data} disabled={disabled} onChange={change} />
               <CardSpacer />
+              <SaleValue
+                currencySymbol={defaultCurrency}
+                data={data}
+                disabled={disabled}
+                errors={formErrors}
+                onChange={change}
+              />
+              <CardSpacer />
               <TabContainer>
                 <CategoriesTab
                   isActive={activeTab === SaleDetailsPageTab.categories}
diff --git a/src/discounts/components/SaleValue/SaleValue.tsx b/src/discounts/components/SaleValue/SaleValue.tsx
index e69de29bb..ff424547e 100644
--- a/src/discounts/components/SaleValue/SaleValue.tsx
+++ 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/VoucherValue/VoucherValue.tsx b/src/discounts/components/VoucherValue/VoucherValue.tsx
index c0b8e59c8..da47235df 100644
--- a/src/discounts/components/VoucherValue/VoucherValue.tsx
+++ b/src/discounts/components/VoucherValue/VoucherValue.tsx
@@ -1,10 +1,10 @@
 import Card from "@material-ui/core/Card";
 import CardContent from "@material-ui/core/CardContent";
+import { Theme } from "@material-ui/core/styles";
 import Typography from "@material-ui/core/Typography";
+import { makeStyles } from "@material-ui/styles";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
-import { Theme } from "@material-ui/core/styles";
-import { makeStyles } from "@material-ui/styles";
 
 import CardTitle from "@saleor/components/CardTitle";
 import ControlledCheckbox from "@saleor/components/ControlledCheckbox";
diff --git a/src/discounts/views/SaleDetails.tsx b/src/discounts/views/SaleDetails.tsx
index de060015b..83f17b7a6 100644
--- a/src/discounts/views/SaleDetails.tsx
+++ b/src/discounts/views/SaleDetails.tsx
@@ -22,7 +22,7 @@ import { DEFAULT_INITIAL_SEARCH_DATA, PAGINATE_BY } from "../../config";
 import SearchCategories from "../../containers/SearchCategories";
 import SearchCollections from "../../containers/SearchCollections";
 import SearchProducts from "../../containers/SearchProducts";
-import { decimal, getMutationState, maybe, joinDateTime } from "../../misc";
+import { decimal, getMutationState, joinDateTime, maybe } from "../../misc";
 import { productUrl } from "../../products/urls";
 import { DiscountValueTypeEnum, SaleType } from "../../types/globalTypes";
 import SaleDetailsPage, {
diff --git a/src/storybook/__snapshots__/Stories.test.ts.snap b/src/storybook/__snapshots__/Stories.test.ts.snap
index f06fe7349..afe0e6323 100644
--- a/src/storybook/__snapshots__/Stories.test.ts.snap
+++ b/src/storybook/__snapshots__/Stories.test.ts.snap
@@ -38925,6 +38925,71 @@ exports[`Storyshots Views / Discounts / Sale details collections 1`] = `
           <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"
+              >
+                <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"
+                >
+                  Discount Value
+                </label>
+                <div
+                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-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-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
+                    name="value"
+                    type="text"
+                    value="30"
+                  />
+                  %
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="CardSpacer-spacer-id"
+          />
           <div
             class="TabContainer-root-id"
           >
@@ -39578,6 +39643,71 @@ exports[`Storyshots Views / Discounts / Sale details default 1`] = `
           <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"
+              >
+                <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"
+                >
+                  Discount Value
+                </label>
+                <div
+                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-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-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
+                    name="value"
+                    type="text"
+                    value="30"
+                  />
+                  %
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="CardSpacer-spacer-id"
+          />
           <div
             class="TabContainer-root-id"
           >
@@ -40236,6 +40366,76 @@ exports[`Storyshots Views / Discounts / Sale details form errors 1`] = `
           <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"
+              >
+                <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"
+                >
+                  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"
+                >
+                  <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-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
+                    name="value"
+                    type="text"
+                    value="30"
+                  />
+                  %
+                </div>
+                <p
+                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
+                >
+                  Generic form error
+                </p>
+              </div>
+            </div>
+          </div>
+          <div
+            class="CardSpacer-spacer-id"
+          />
           <div
             class="TabContainer-root-id"
           >
@@ -40909,6 +41109,72 @@ exports[`Storyshots Views / Discounts / Sale details loading 1`] = `
           <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"
+              >
+                <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"
+                >
+                  <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-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
+                    disabled=""
+                    name="value"
+                    type="text"
+                    value=""
+                  />
+                  USD
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="CardSpacer-spacer-id"
+          />
           <div
             class="TabContainer-root-id"
           >
@@ -41594,6 +41860,71 @@ exports[`Storyshots Views / Discounts / Sale details products 1`] = `
           <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"
+              >
+                <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"
+                >
+                  Discount Value
+                </label>
+                <div
+                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-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-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
+                    name="value"
+                    type="text"
+                    value="30"
+                  />
+                  %
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="CardSpacer-spacer-id"
+          />
           <div
             class="TabContainer-root-id"
           >