djkato/saleor-dashboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Temporary changes for unconfirmed discounts

Browse source
This commit is contained in:
Tomasz Szymanski 2021-03-23 10:19:11 +01:00
parent b4a7c9f471
commit 743e122029
1 changed files with 24 additions and 102 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

126
src/orders/components/OrderDraftDetailsProducts/OrderDraftDetailsProducts.tsx
View file

@ -1,26 +1,20 @@
import IconButton from "@material-ui/core/IconButton";
import { makeStyles } from "@material-ui/core/styles"; import { makeStyles } from "@material-ui/core/styles";
import TableBody from "@material-ui/core/TableBody"; import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell"; import TableCell from "@material-ui/core/TableCell";
import TableHead from "@material-ui/core/TableHead"; import TableHead from "@material-ui/core/TableHead";
import TableRow from "@material-ui/core/TableRow"; import TableRow from "@material-ui/core/TableRow";
import TextField from "@material-ui/core/TextField";
import Typography from "@material-ui/core/Typography";
import DeleteIcon from "@material-ui/icons/Delete";
import { DebounceForm } from "@saleor/components/DebounceForm";
import Form from "@saleor/components/Form";
import Money from "@saleor/components/Money";
import ResponsiveTable from "@saleor/components/ResponsiveTable"; import ResponsiveTable from "@saleor/components/ResponsiveTable";
import Skeleton from "@saleor/components/Skeleton"; import { AVATAR_MARGIN } from "@saleor/components/TableCellAvatar";
import TableCellAvatar, { import {
AVATAR_MARGIN OrderLineDiscountConsumer,
} from "@saleor/components/TableCellAvatar"; OrderLineDiscountContextConsumerProps
import createNonNegativeValueChangeHandler from "@saleor/utils/handlers/nonNegativeValueChangeHandler"; } from "@saleor/products/components/OrderDiscountProviders/OrderLineDiscountProvider";
import React from "react"; import React from "react";
import { FormattedMessage } from "react-intl"; import { FormattedMessage } from "react-intl";
import { renderCollection } from "../../../misc"; import { maybe, renderCollection } from "../../../misc";
import { OrderDetails_order_lines } from "../../types/OrderDetails"; import { OrderDetails_order_lines } from "../../types/OrderDetails";
import TableLine from "./TableLine";
export interface FormData { export interface FormData {
quantity: number; quantity: number;
@ -82,7 +76,7 @@ const OrderDraftDetailsProducts: React.FC<OrderDraftDetailsProductsProps> = prop
return ( return (
<ResponsiveTable className={classes.table}> <ResponsiveTable className={classes.table}>
{!!lines?.length && ( {maybe(() => !!lines.length) && (
<TableHead> <TableHead>
<TableRow> <TableRow>
<TableCell className={classes.colName}> <TableCell className={classes.colName}>
@ -113,99 +107,27 @@ const OrderDraftDetailsProducts: React.FC<OrderDraftDetailsProductsProps> = prop
</TableHead> </TableHead>
)} )}
<TableBody> <TableBody>
{lines?.length === 0 ? ( {!!lines?.length ? (
renderCollection(lines, line => (
<OrderLineDiscountConsumer key={line.id} orderLineId={line.id}>
{(
orderLineDiscountProps: OrderLineDiscountContextConsumerProps
) => (
<TableLine
{...orderLineDiscountProps}
line={line}
onOrderLineChange={onOrderLineChange}
onOrderLineRemove={onOrderLineRemove}
/>
)}
</OrderLineDiscountConsumer>
))
) : (
<TableRow> <TableRow>
<TableCell colSpan={5}> <TableCell colSpan={5}>
<FormattedMessage defaultMessage="No Products added to Order" /> <FormattedMessage defaultMessage="No Products added to Order" />
</TableCell> </TableCell>
</TableRow> </TableRow>
) : (
renderCollection(lines, line => (
<TableRow key={line ? line.id : "skeleton"}>
<TableCellAvatar
className={classes.colName}
thumbnail={line?.thumbnail?.url}
>
{line?.productName && line?.productSku ? (
<>
<>
<Typography variant="body2">
{line.productName}
</Typography>
<Typography variant="caption">
{line.productSku}
</Typography>
</>
</>
) : (
<Skeleton />
)}
</TableCellAvatar>
<TableCell className={classes.colQuantity}>
{line?.quantity ? (
<Form
initial={{ quantity: line.quantity }}
onSubmit={data => onOrderLineChange(line.id, data)}
>
{({ change, data, hasChanged, submit }) => {
const handleQuantityChange = createNonNegativeValueChangeHandler(
change
);
return (
<DebounceForm
change={handleQuantityChange}
submit={hasChanged ? submit : undefined}
time={200}
>
{debounce => (
<TextField
className={classes.quantityField}
fullWidth
name="quantity"
type="number"
value={data.quantity}
onChange={debounce}
onBlur={submit}
inputProps={{
min: 1
}}
/>
)}
</DebounceForm>
);
}}
</Form>
) : (
<Skeleton />
)}
</TableCell>
<TableCell className={classes.colPrice}>
{line?.unitPrice?.gross ? (
<Money money={line.unitPrice.gross} />
) : (
<Skeleton />
)}
</TableCell>
<TableCell className={classes.colTotal}>
{line?.unitPrice?.gross && line?.quantity ? (
<Money
money={{
amount: line.unitPrice.gross.amount * line.quantity,
currency: line.unitPrice.gross.currency
}}
/>
) : (
<Skeleton />
)}
</TableCell>
<TableCell className={classes.colAction}>
<IconButton onClick={() => onOrderLineRemove(line.id)}>
<DeleteIcon color="primary" />
</IconButton>
</TableCell>
</TableRow>
))
)} )}
</TableBody> </TableBody>
</ResponsiveTable> </ResponsiveTable>