Revert "Remove base price from product create page"
This reverts commit 0b099e882c
.
This commit is contained in:
parent
65e5539173
commit
8fa7eb2b8a
10 changed files with 126 additions and 1 deletions
|
@ -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
|
||||
|
|
86
src/products/components/ProductPricing/ProductPricing.tsx
Normal file
86
src/products/components/ProductPricing/ProductPricing.tsx
Normal 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;
|
2
src/products/components/ProductPricing/index.ts
Normal file
2
src/products/components/ProductPricing/index.ts
Normal file
|
@ -0,0 +1,2 @@
|
|||
export { default } from "./ProductPricing";
|
||||
export * from "./ProductPricing";
|
|
@ -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}
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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,
|
||||
[]
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -112,6 +112,7 @@ storiesOf("Views / Products / Product edit", module)
|
|||
<ProductUpdatePage
|
||||
{...props}
|
||||
errors={([
|
||||
"basePrice",
|
||||
"category",
|
||||
"chargeTaxes",
|
||||
"collections",
|
||||
|
|
Loading…
Reference in a new issue