Fix stock warehouse message in product and variant forms (#5126)

* 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 <[email protected]>
saleor · Aug 26, 2024 · 01908cc · 01908cc
1 parent f316bf1
commit 01908cc
Show file tree

Hide file tree

Showing 9 changed files with 132 additions and 20 deletions.
diff --git a/.changeset/rude-impalas-live.md 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
@@ -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
@@ -277,6 +277,7 @@ export const ProductCreatePage: React.FC<ProductCreatePageProps> = ({
                     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
@@ -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(<WarehouseInformationMessage isCreate {...defaultProps} />);
+
+    expect(getByText(messages.warehouseMessageProductOnCreate.defaultMessage)).toBeInTheDocument();
+  });
+
+  it("should render message for creating variant", () => {
+    const { getByText } = render(
+      <WarehouseInformationMessage {...defaultProps} isCreate hasVariants />,
+    );
+
+    expect(getByText(messages.warehouseMessageVariantOnCreate.defaultMessage)).toBeInTheDocument();
+  });
+
+  it("should not render message if warehouses exist", () => {
+    const { queryByText } = render(
+      <WarehouseInformationMessage {...defaultProps} hasWarehouses isCreate={false} />,
+    );
+
+    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
@@ -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<ProductStocksProps> = ({
@@ -62,6 +63,7 @@ export const ProductStocks: React.FC<ProductStocksProps> = ({
   onWarehouseStockDelete,
   onWarehouseConfigure,
   fetchMoreWarehouses,
+  isCreate,
 }) => {
   const intl = useIntl();
   const [lastStockRowFocus, setLastStockRowFocus] = React.useState(false);
@@ -138,25 +140,12 @@ export const ProductStocks: React.FC<ProductStocksProps> = ({
                 </Text>
               )}
             </Box>
-            {!warehouses?.length && (
-              <Text color="default2">
-                {hasVariants ? (
-                  <FormattedMessage
-                    {...messages.configureWarehouseForVariant}
-                    values={{
-                      a: chunks => <Link onClick={onWarehouseConfigure}>{chunks}</Link>,
-                    }}
-                  />
-                ) : (
-                  <FormattedMessage
-                    {...messages.configureWarehouseForProduct}
-                    values={{
-                      a: chunks => <Link onClick={onWarehouseConfigure}>{chunks}</Link>,
-                    }}
-                  />
-                )}
-              </Text>
-            )}
+            <WarehouseInformationMessage
+              isCreate={isCreate}
+              hasVariants={hasVariants}
+              hasWarehouses={warehouses?.length > 0}
+              onWarehouseConfigure={onWarehouseConfigure}
+            />
           </Box>
         </Box>
         {productVariantChannelListings?.length > 0 &&

diff --git a/src/products/components/ProductStocks/WarehouseInformationMessage.tsx 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<WarehouseInformationMessageProps> = ({
+  isCreate,
+  hasVariants,
+  hasWarehouses,
+  onWarehouseConfigure,
+}) => {
+  if (isCreate) {
+    const message = hasVariants
+      ? messages.warehouseMessageVariantOnCreate
+      : messages.warehouseMessageProductOnCreate;
+
+    return (
+      <Text color="default2">
+        <FormattedMessage {...message} />
+      </Text>
+    );
+  }
+
+  if (hasWarehouses) {
+    return null;
+  }
+
+  return (
+    <Text color="default2">
+      {hasVariants ? (
+        <FormattedMessage
+          {...messages.configureWarehouseForVariant}
+          values={{
+            a: chunks => <Link onClick={onWarehouseConfigure}>{chunks}</Link>,
+          }}
+        />
+      ) : (
+        <FormattedMessage
+          {...messages.configureWarehouseForProduct}
+          values={{
+            a: chunks => <Link onClick={onWarehouseConfigure}>{chunks}</Link>,
+          }}
+        />
+      )}
+    </Text>
+  );
+};
diff --git 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
@@ -293,6 +293,7 @@ const ProductVariantCreatePage: React.FC<ProductVariantCreatePageProps> = ({
                     onWarehouseStockAdd={handlers.addStock}
                     onWarehouseStockDelete={handlers.deleteStock}
                     onWarehouseConfigure={onWarehouseConfigure}
+                    isCreate={true}
                   />
                   <CardSpacer />
                   <Metadata data={data} onChange={handlers.changeMetadata} />

diff --git a/src/products/components/ProductVariantPage/ProductVariantPage.tsx b/src/products/components/ProductVariantPage/ProductVariantPage.tsx
@@ -360,6 +360,7 @@ const ProductVariantPage: React.FC<ProductVariantPageProps> = ({
                       onWarehouseStockAdd={handlers.addStock}
                       onWarehouseStockDelete={handlers.deleteStock}
                       onWarehouseConfigure={onWarehouseConfigure}
+                      isCreate={false}
                     />
                     <CardSpacer />
                     <Metadata data={data} onChange={handlers.changeMetadata} />