Revert "Remove base price from product create page"

This reverts commit 0b099e882c.
This commit is contained in:
Dawid Tarasiuk 2020-06-12 12:17:17 +02:00
parent 65e5539173
commit 8fa7eb2b8a
10 changed files with 126 additions and 1 deletions

View file

@ -41,9 +41,11 @@ import ProductAttributes, {
} from "../ProductAttributes";
import ProductDetailsForm from "../ProductDetailsForm";
import ProductOrganization from "../ProductOrganization";
import ProductPricing from "../ProductPricing";
import ProductStocks, { ProductStockInput } from "../ProductStocks";
interface FormData {
basePrice: number;
publicationDate: string;
category: string;
collections: string[];
@ -67,6 +69,7 @@ interface ProductCreatePageProps {
errors: ProductErrorFragment[];
collections: SearchCollections_search_edges_node[];
categories: SearchCategories_search_edges_node[];
currency: string;
disabled: boolean;
fetchMoreCategories: FetchMoreProps;
fetchMoreCollections: FetchMoreProps;
@ -88,6 +91,7 @@ interface ProductCreatePageProps {
}
export const ProductCreatePage: React.FC<ProductCreatePageProps> = ({
currency,
disabled,
categories: categoryChoiceList,
collections: collectionChoiceList,
@ -126,6 +130,7 @@ export const ProductCreatePage: React.FC<ProductCreatePageProps> = ({
convertToRaw(ContentState.createFromText(""))
);
const initialData: FormData = {
basePrice: 0,
category: "",
chargeTaxes: false,
collections: [],
@ -227,6 +232,14 @@ export const ProductCreatePage: React.FC<ProductCreatePageProps> = ({
/>
)}
<CardSpacer />
<ProductPricing
currency={currency}
data={data}
disabled={disabled}
errors={errors}
onChange={change}
/>
<CardSpacer />
{!!productType && !productType.hasVariants && (
<>
<ProductStocks

View file

@ -0,0 +1,86 @@
import Card from "@material-ui/core/Card";
import CardContent from "@material-ui/core/CardContent";
import { makeStyles } from "@material-ui/core/styles";
import { ProductErrorFragment } from "@saleor/attributes/types/ProductErrorFragment";
import CardTitle from "@saleor/components/CardTitle";
import ControlledCheckbox from "@saleor/components/ControlledCheckbox";
import PriceField from "@saleor/components/PriceField";
import { getFormErrors, getProductErrorMessage } from "@saleor/utils/errors";
import React from "react";
import { useIntl } from "react-intl";
const useStyles = makeStyles(
theme => ({
root: {
display: "grid",
gridColumnGap: theme.spacing(2),
gridTemplateColumns: "1fr 1fr"
}
}),
{ name: "ProductPricing" }
);
interface ProductPricingProps {
currency?: string;
data: {
chargeTaxes: boolean;
basePrice: number;
};
disabled: boolean;
errors: ProductErrorFragment[];
onChange: (event: React.ChangeEvent<any>) => void;
}
const ProductPricing: React.FC<ProductPricingProps> = props => {
const { currency, data, disabled, errors, onChange } = props;
const classes = useStyles(props);
const intl = useIntl();
const formErrors = getFormErrors(["basePrice"], errors);
return (
<Card>
<CardTitle
title={intl.formatMessage({
defaultMessage: "Pricing",
description: "product pricing"
})}
>
<ControlledCheckbox
name="chargeTaxes"
label={intl.formatMessage({
defaultMessage: "Charge taxes for this item"
})}
checked={data.chargeTaxes}
onChange={onChange}
disabled={disabled}
/>
</CardTitle>
<CardContent>
<div className={classes.root}>
<PriceField
disabled={disabled}
label={intl.formatMessage({
defaultMessage: "Price",
description: "product price"
})}
error={!!formErrors.basePrice}
hint={getProductErrorMessage(formErrors.basePrice, intl)}
name="basePrice"
value={data.basePrice}
currencySymbol={currency}
onChange={onChange}
InputProps={{
inputProps: {
min: 0
}
}}
/>
</div>
</CardContent>
</Card>
);
};
ProductPricing.displayName = "ProductPricing";
export default ProductPricing;

View file

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

View file

@ -47,6 +47,7 @@ import ProductAttributes, { ProductAttributeInput } from "../ProductAttributes";
import ProductDetailsForm from "../ProductDetailsForm";
import ProductImages from "../ProductImages";
import ProductOrganization from "../ProductOrganization";
import ProductPricing from "../ProductPricing";
import ProductStocks, { ProductStockInput } from "../ProductStocks";
import ProductVariants from "../ProductVariants";
@ -158,6 +159,7 @@ export const ProductUpdatePage: React.FC<ProductUpdatePageProps> = ({
const categories = getChoices(categoryChoiceList);
const collections = getChoices(collectionChoiceList);
const currency = maybe(() => product.basePrice.currency);
const hasVariants = maybe(() => product.productType.hasVariants, false);
const handleSubmit = (data: ProductUpdatePageFormData) => {
@ -244,6 +246,14 @@ export const ProductUpdatePage: React.FC<ProductUpdatePageProps> = ({
/>
)}
<CardSpacer />
<ProductPricing
currency={currency}
data={data}
disabled={disabled}
errors={errors}
onChange={change}
/>
<CardSpacer />
{hasVariants ? (
<ProductVariants
disabled={disabled}

View file

@ -198,6 +198,7 @@ export const simpleProductUpdateMutation = gql`
$descriptionJson: JSONString
$isPublished: Boolean!
$name: String
$basePrice: Decimal
$productVariantId: ID!
$productVariantInput: ProductVariantInput!
$seo: SeoInput
@ -216,6 +217,7 @@ export const simpleProductUpdateMutation = gql`
descriptionJson: $descriptionJson
isPublished: $isPublished
name: $name
basePrice: $basePrice
seo: $seo
}
) {
@ -286,6 +288,7 @@ export const productCreateMutation = gql`
$descriptionJson: JSONString
$isPublished: Boolean!
$name: String!
$basePrice: Decimal
$productType: ID!
$sku: String
$seo: SeoInput
@ -302,6 +305,7 @@ export const productCreateMutation = gql`
descriptionJson: $descriptionJson
isPublished: $isPublished
name: $name
basePrice: $basePrice
productType: $productType
sku: $sku
seo: $seo

View file

@ -215,6 +215,7 @@ export interface ProductCreateVariables {
descriptionJson?: any | null;
isPublished: boolean;
name: string;
basePrice?: any | null;
productType: string;
sku?: string | null;
seo?: SeoInput | null;

View file

@ -714,6 +714,7 @@ export interface SimpleProductUpdateVariables {
descriptionJson?: any | null;
isPublished: boolean;
name?: string | null;
basePrice?: any | null;
productVariantId: string;
productVariantInput: ProductVariantInput;
seo?: SeoInput | null;

View file

@ -2,6 +2,7 @@ import { WindowTitle } from "@saleor/components/WindowTitle";
import { DEFAULT_INITIAL_SEARCH_DATA } from "@saleor/config";
import useNavigator from "@saleor/hooks/useNavigator";
import useNotifier from "@saleor/hooks/useNotifier";
import useShop from "@saleor/hooks/useShop";
import useCategorySearch from "@saleor/searches/useCategorySearch";
import useCollectionSearch from "@saleor/searches/useCollectionSearch";
import useProductTypeSearch from "@saleor/searches/useProductTypeSearch";
@ -9,7 +10,7 @@ import { useWarehouseList } from "@saleor/warehouses/queries";
import React from "react";
import { useIntl } from "react-intl";
import { maybe } from "../../misc";
import { decimal, maybe } from "../../misc";
import ProductCreatePage, {
ProductCreatePageSubmitData
} from "../components/ProductCreatePage";
@ -20,6 +21,7 @@ import { productListUrl, productUrl } from "../urls";
export const ProductCreateView: React.FC = () => {
const navigate = useNavigator();
const notify = useNotifier();
const shop = useShop();
const intl = useIntl();
const {
loadMore: loadMoreCategories,
@ -72,6 +74,7 @@ export const ProductCreateView: React.FC = () => {
id: attribute.id,
values: attribute.value
})),
basePrice: decimal(formData.basePrice),
category: formData.category,
chargeTaxes: formData.chargeTaxes,
collections: formData.collections,
@ -106,6 +109,7 @@ export const ProductCreateView: React.FC = () => {
})}
/>
<ProductCreatePage
currency={maybe(() => shop.defaultCurrency)}
categories={maybe(
() => searchCategoryOpts.data.search.edges,
[]

View file

@ -17,6 +17,7 @@ storiesOf("Views / Products / Create product", module)
.addDecorator(Decorator)
.add("default", () => (
<ProductCreatePage
currency="USD"
disabled={false}
errors={[]}
header="Add product"
@ -37,6 +38,7 @@ storiesOf("Views / Products / Create product", module)
))
.add("When loading", () => (
<ProductCreatePage
currency="USD"
disabled={true}
errors={[]}
header="Add product"
@ -57,6 +59,7 @@ storiesOf("Views / Products / Create product", module)
))
.add("form errors", () => (
<ProductCreatePage
currency="USD"
disabled={false}
errors={(["name", "productType", "category", "sku"] as Array<
keyof ProductCreatePageSubmitData

View file

@ -112,6 +112,7 @@ storiesOf("Views / Products / Product edit", module)
<ProductUpdatePage
{...props}
errors={([
"basePrice",
"category",
"chargeTaxes",
"collections",