From 01908cc3a50739f76cc4568b71dc5b791174fdeb Mon Sep 17 00:00:00 2001 From: Wojciech Mista Date: Mon, 26 Aug 2024 15:11:17 +0200 Subject: [PATCH] Fix stock warehouse message in product and variant forms (#5126) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix stock warehouse message in product and variant forms * extract json messages * extract component and add tests * small refactor * small fix --------- Co-authored-by: Paweł Chyła --- .changeset/rude-impalas-live.md | 5 ++ locale/defaultMessages.json | 8 +++ .../ProductCreatePage/ProductCreatePage.tsx | 1 + .../ProductStocks/ProductStocks.test.tsx | 41 ++++++++++++++ .../ProductStocks/ProductStocks.tsx | 29 +++------- .../WarehouseInformationMessage.tsx | 56 +++++++++++++++++++ .../components/ProductStocks/messages.ts | 10 ++++ .../ProductVariantCreatePage.tsx | 1 + .../ProductVariantPage/ProductVariantPage.tsx | 1 + 9 files changed, 132 insertions(+), 20 deletions(-) create mode 100644 .changeset/rude-impalas-live.md create mode 100644 src/products/components/ProductStocks/ProductStocks.test.tsx create mode 100644 src/products/components/ProductStocks/WarehouseInformationMessage.tsx diff --git a/.changeset/rude-impalas-live.md b/.changeset/rude-impalas-live.md new file mode 100644 index 00000000000..6b9c087986a --- /dev/null +++ b/.changeset/rude-impalas-live.md @@ -0,0 +1,5 @@ +--- +"saleor-dashboard": patch +--- + +The stock settings no longer show a message that you need to create a warehouse when warehouses are already configured. diff --git a/locale/defaultMessages.json b/locale/defaultMessages.json index 1297c5e88c4..463e5bf3cef 100644 --- a/locale/defaultMessages.json +++ b/locale/defaultMessages.json @@ -2016,6 +2016,10 @@ "context": "sale status", "string": "Scheduled" }, + "BaxGjT": { + "context": "variant stocks section subtitle", + "string": "Assigning the stocks will be possible after the variant is saved." + }, "BbP+k3": { "context": "variant availability in channel", "string": "Available" @@ -7577,6 +7581,10 @@ "lfXze9": { "string": "Delete vouchers" }, + "lhfPkc": { + "context": "variant stocks section subtitle", + "string": "Assigning the stocks will be possible after the product is saved." + }, "li1BBk": { "context": "export items as csv file", "string": "Plain CSV file" diff --git a/src/products/components/ProductCreatePage/ProductCreatePage.tsx b/src/products/components/ProductCreatePage/ProductCreatePage.tsx index 79f135d340f..b14955daac2 100644 --- a/src/products/components/ProductCreatePage/ProductCreatePage.tsx +++ b/src/products/components/ProductCreatePage/ProductCreatePage.tsx @@ -277,6 +277,7 @@ export const ProductCreatePage: React.FC = ({ onWarehouseStockAdd={handlers.addStock} onWarehouseStockDelete={handlers.deleteStock} onWarehouseConfigure={onWarehouseConfigure} + isCreate={true} /> )} diff --git a/src/products/components/ProductStocks/ProductStocks.test.tsx b/src/products/components/ProductStocks/ProductStocks.test.tsx new file mode 100644 index 00000000000..a17a9699b94 --- /dev/null +++ b/src/products/components/ProductStocks/ProductStocks.test.tsx @@ -0,0 +1,41 @@ +import { render } from "@testing-library/react"; +import React from "react"; + +import { messages } from "./messages"; +import { WarehouseInformationMessage } from "./WarehouseInformationMessage"; + +jest.mock("react-intl", () => ({ + defineMessages: jest.fn(x => x), + FormattedMessage: ({ defaultMessage }: { defaultMessage: string }) => <>{defaultMessage}, +})); + +describe("WarehouseInformationMessage", () => { + const defaultProps = { + hasVariants: false, + hasWarehouses: false, + onWarehouseConfigure: jest.fn(), + }; + + it("should render message for creating product", () => { + const { getByText } = render(); + + expect(getByText(messages.warehouseMessageProductOnCreate.defaultMessage)).toBeInTheDocument(); + }); + + it("should render message for creating variant", () => { + const { getByText } = render( + , + ); + + expect(getByText(messages.warehouseMessageVariantOnCreate.defaultMessage)).toBeInTheDocument(); + }); + + it("should not render message if warehouses exist", () => { + const { queryByText } = render( + , + ); + + expect(queryByText(messages.configureWarehouseForProduct.defaultMessage)).toBeNull(); + expect(queryByText(messages.configureWarehouseForVariant.defaultMessage)).toBeNull(); + }); +}); diff --git a/src/products/components/ProductStocks/ProductStocks.tsx b/src/products/components/ProductStocks/ProductStocks.tsx index 57d2e9ce72f..36ccd8107ea 100644 --- a/src/products/components/ProductStocks/ProductStocks.tsx +++ b/src/products/components/ProductStocks/ProductStocks.tsx @@ -1,7 +1,6 @@ // @ts-strict-ignore import { ChannelData } from "@dashboard/channels/utils"; import { DashboardCard } from "@dashboard/components/Card"; -import Link from "@dashboard/components/Link"; import TableRowLink from "@dashboard/components/TableRowLink"; import { ProductErrorFragment, WarehouseFragment } from "@dashboard/graphql"; import { FormChange } from "@dashboard/hooks/useForm"; @@ -16,6 +15,7 @@ import { FormattedMessage, useIntl } from "react-intl"; import { ProductStocksAssignWarehouses } from "./components/ProductStocksAssignWarehouses"; import { messages } from "./messages"; +import { WarehouseInformationMessage } from "./WarehouseInformationMessage"; export interface ProductStockFormsetData { quantityAllocated: number; @@ -45,6 +45,7 @@ export interface ProductStocksProps { onWarehouseConfigure: () => void; fetchMoreWarehouses: () => void; hasMoreWarehouses: boolean; + isCreate: boolean; } export const ProductStocks: React.FC = ({ @@ -62,6 +63,7 @@ export const ProductStocks: React.FC = ({ onWarehouseStockDelete, onWarehouseConfigure, fetchMoreWarehouses, + isCreate, }) => { const intl = useIntl(); const [lastStockRowFocus, setLastStockRowFocus] = React.useState(false); @@ -138,25 +140,12 @@ export const ProductStocks: React.FC = ({ )} - {!warehouses?.length && ( - - {hasVariants ? ( - {chunks}, - }} - /> - ) : ( - {chunks}, - }} - /> - )} - - )} + 0} + onWarehouseConfigure={onWarehouseConfigure} + /> {productVariantChannelListings?.length > 0 && diff --git a/src/products/components/ProductStocks/WarehouseInformationMessage.tsx b/src/products/components/ProductStocks/WarehouseInformationMessage.tsx new file mode 100644 index 00000000000..28d2d74ae25 --- /dev/null +++ b/src/products/components/ProductStocks/WarehouseInformationMessage.tsx @@ -0,0 +1,56 @@ +import Link from "@dashboard/components/Link"; +import { Text } from "@saleor/macaw-ui-next"; +import React from "react"; +import { FormattedMessage } from "react-intl"; + +import { messages } from "./messages"; + +interface WarehouseInformationMessageProps { + isCreate: boolean; + hasVariants: boolean; + hasWarehouses: boolean; + onWarehouseConfigure: () => void; +} + +export const WarehouseInformationMessage: React.FC = ({ + isCreate, + hasVariants, + hasWarehouses, + onWarehouseConfigure, +}) => { + if (isCreate) { + const message = hasVariants + ? messages.warehouseMessageVariantOnCreate + : messages.warehouseMessageProductOnCreate; + + return ( + + + + ); + } + + if (hasWarehouses) { + return null; + } + + return ( + + {hasVariants ? ( + {chunks}, + }} + /> + ) : ( + {chunks}, + }} + /> + )} + + ); +}; diff --git a/src/products/components/ProductStocks/messages.ts b/src/products/components/ProductStocks/messages.ts index 1024e1a8f3b..b0e00b225ee 100644 --- a/src/products/components/ProductStocks/messages.ts +++ b/src/products/components/ProductStocks/messages.ts @@ -121,4 +121,14 @@ export const messages = defineMessages({ defaultMessage: "Channel threshold", description: "table column header", }, + warehouseMessageVariantOnCreate: { + id: "BaxGjT", + defaultMessage: "Assigning the stocks will be possible after the variant is saved.", + description: "variant stocks section subtitle", + }, + warehouseMessageProductOnCreate: { + id: "lhfPkc", + defaultMessage: "Assigning the stocks will be possible after the product is saved.", + description: "variant stocks section subtitle", + }, }); diff --git a/src/products/components/ProductVariantCreatePage/ProductVariantCreatePage.tsx b/src/products/components/ProductVariantCreatePage/ProductVariantCreatePage.tsx index bd010800f5e..823a3a73193 100644 --- a/src/products/components/ProductVariantCreatePage/ProductVariantCreatePage.tsx +++ b/src/products/components/ProductVariantCreatePage/ProductVariantCreatePage.tsx @@ -293,6 +293,7 @@ const ProductVariantCreatePage: React.FC = ({ onWarehouseStockAdd={handlers.addStock} onWarehouseStockDelete={handlers.deleteStock} onWarehouseConfigure={onWarehouseConfigure} + isCreate={true} /> diff --git a/src/products/components/ProductVariantPage/ProductVariantPage.tsx b/src/products/components/ProductVariantPage/ProductVariantPage.tsx index 4738b835f2a..150257bee18 100644 --- a/src/products/components/ProductVariantPage/ProductVariantPage.tsx +++ b/src/products/components/ProductVariantPage/ProductVariantPage.tsx @@ -360,6 +360,7 @@ const ProductVariantPage: React.FC = ({ onWarehouseStockAdd={handlers.addStock} onWarehouseStockDelete={handlers.deleteStock} onWarehouseConfigure={onWarehouseConfigure} + isCreate={false} />