Migrate voucher channel listings to new inputs (#3742)

src/discounts/components/VoucherValue/VoucherValue.tsx

@@ -7,7 +7,6 @@ import ResponsiveTable from "@dashboard/components/ResponsiveTable";
 import Skeleton from "@dashboard/components/Skeleton";
 import TableHead from "@dashboard/components/TableHead";
 import TableRowLink from "@dashboard/components/TableRowLink";
-import TextFieldWithChoice from "@dashboard/components/TextFieldWithChoice";
 import { ChannelInput } from "@dashboard/discounts/handlers";
 import { DiscountTypeEnum } from "@dashboard/discounts/types";
 import { DiscountErrorFragment } from "@dashboard/graphql";
@@ -21,6 +20,7 @@ import {
   TableCell,
   Typography,
 } from "@material-ui/core";
+import { Input, Text } from "@saleor/macaw-ui/next";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
@@ -100,22 +100,21 @@ const VoucherValue: React.FC<VoucherValueProps> = props => {
                   return (
                     <TableRowLink key={listing?.id || `skeleton-${index}`}>
                       <TableCell>
-                        <Typography>{listing?.name || <Skeleton />}</Typography>
+                        <Text>{listing?.name || <Skeleton />}</Text>
                       </TableCell>
                       <TableCell className={classes.colPrice}>
                         {listing ? (
-                          <TextFieldWithChoice
+                          <Input
                             disabled={disabled}
                             error={!!error?.length}
-                            ChoiceProps={{
-                              label:
-                                data.discountType ===
+                            endAdornment={
+                              <Text variant="caption">
+                                {data.discountType ===
                                 DiscountTypeEnum.VALUE_FIXED
                                   ? listing.currency
-                                  : "%",
-                              name: "discountType" as keyof FormData,
-                              values: null,
-                            }}
+                                  : "%"}
+                              </Text>
+                            }
                             helperText={
                               error
                                 ? getDiscountErrorMessage(
@@ -136,10 +135,6 @@ const VoucherValue: React.FC<VoucherValueProps> = props => {
                             })}
                             value={listing.discountValue || ""}
                             type="number"
-                            fullWidth
-                            inputProps={{
-                              min: 0,
-                            }}
                           />
                         ) : (
                           <Skeleton />

src/discounts/components/VoucherValue/styles.ts

@@ -9,6 +9,8 @@ export const useStyles = makeStyles(
     },
     colPrice: {
       minWidth: 300,
+      paddingTop: 12,
+      paddingBottom: 12,
     },
     colType: {
       fontSize: 14,