feat: configurable product - save changed configuration

VirtoCommerce · Dec 16, 2024 · 91f3fbc · 91f3fbc
1 parent 4a880ef
commit 91f3fbc
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 58 deletions.
diff --git a/client-app/shared/catalog/components/product-configuration.vue b/client-app/shared/catalog/components/product-configuration.vue
@@ -120,11 +120,12 @@ const {
   isConfigurationChanged,
   changeCartConfiguredItem,
 } = useConfigurableProduct(configurableProductId.value);
-const { openModal } = useModal();
 
+const { openModal } = useModal();
 const notifications = useNotifications();
-watch(isConfigurationChanged, (newVal) => {
-  if (newVal && configurableLineItemId) {
+
+watch(isConfigurationChanged, (isChanged) => {
+  if (isChanged && configurableLineItemId) {
     notifications.info({
       text: t("shared.catalog.product_details.product_configuration.changed_notification"),
       group: NOTIFICATIONS_GROUP,

diff --git a/client-app/shared/catalog/composables/useConfigurableProduct.test.ts b/client-app/shared/catalog/composables/useConfigurableProduct.test.ts
@@ -404,72 +404,74 @@ describe("useConfigurableProduct", () => {
     });
   });
 
-  it("should set isConfigurationChanged to true when selectedConfigurationInput changes", async () => {
-    const mockConfiguration = {
-      configurationSections: [createConfigurationSection(1), createConfigurationSection(2)],
-    };
-    mocks.getProductConfiguration.mockResolvedValue(mockConfiguration);
-
-    await composable.fetchProductConfiguration();
-    await flushPromises();
-
-    expect(composable.isConfigurationChanged.value).toBe(false);
-
-    composable.selectSectionValue({
-      sectionId: "Section 1",
-      value: {
-        productId: "product-2",
-        quantity: 1,
-      },
+  describe("isConfigurationChanged", () => {
+    it("should be set to true when selectedConfigurationInput changes", async () => {
+      const mockConfiguration = {
+        configurationSections: [createConfigurationSection(1), createConfigurationSection(2)],
+      };
+      mocks.getProductConfiguration.mockResolvedValue(mockConfiguration);
+
+      await composable.fetchProductConfiguration();
+      await flushPromises();
+
+      expect(composable.isConfigurationChanged.value).toBe(false);
+
+      composable.selectSectionValue({
+        sectionId: "Section 1",
+        value: {
+          productId: "product-2",
+          quantity: 1,
+        },
+      });
+
+      expect(composable.isConfigurationChanged.value).toBe(true);
     });
 
-    expect(composable.isConfigurationChanged.value).toBe(true);
-  });
+    it("should be set to false when return to initially selected configuration", async () => {
+      const mockConfiguration = {
+        configurationSections: [createConfigurationSection(1), createConfigurationSection(2)],
+      };
+      mocks.getProductConfiguration.mockResolvedValue(mockConfiguration);
 
-  it("should set isConfigurationChanged to false when return to initially selected configuration", async () => {
-    const mockConfiguration = {
-      configurationSections: [createConfigurationSection(1), createConfigurationSection(2)],
-    };
-    mocks.getProductConfiguration.mockResolvedValue(mockConfiguration);
+      await composable.fetchProductConfiguration();
+      await flushPromises();
 
-    await composable.fetchProductConfiguration();
-    await flushPromises();
+      expect(composable.isConfigurationChanged.value).toBe(false);
 
-    expect(composable.isConfigurationChanged.value).toBe(false);
+      // Change configuration
+      composable.selectSectionValue({
+        sectionId: "Section 1",
+        value: {
+          productId: "product-2",
+          quantity: 1,
+        },
+      });
 
-    // Change configuration
-    composable.selectSectionValue({
-      sectionId: "Section 1",
-      value: {
-        productId: "product-2",
-        quantity: 1,
-      },
-    });
+      expect(composable.isConfigurationChanged.value).toBe(true);
 
-    expect(composable.isConfigurationChanged.value).toBe(true);
+      // Return to initial configuration
+      composable.selectSectionValue({
+        sectionId: "Section 1",
+        value: {
+          productId: "product-1",
+          quantity: 1,
+        },
+      });
 
-    // Return to initial configuration
-    composable.selectSectionValue({
-      sectionId: "Section 1",
-      value: {
-        productId: "product-1",
-        quantity: 1,
-      },
+      expect(composable.isConfigurationChanged.value).toBe(false);
     });
 
-    expect(composable.isConfigurationChanged.value).toBe(false);
-  });
-
-  it("should not set isConfigurationChanged to true when nothing is selected", async () => {
-    const mockConfiguration = {
-      configurationSections: [createConfigurationSection(1, { isRequired: false }), createConfigurationSection(2)],
-    };
-    mocks.getProductConfiguration.mockResolvedValue(mockConfiguration);
+    it("should remain false when nothing is selected", async () => {
+      const mockConfiguration = {
+        configurationSections: [createConfigurationSection(1, { isRequired: false }), createConfigurationSection(2)],
+      };
+      mocks.getProductConfiguration.mockResolvedValue(mockConfiguration);
 
-    await composable.fetchProductConfiguration();
-    await flushPromises();
+      await composable.fetchProductConfiguration();
+      await flushPromises();
 
-    expect(composable.isConfigurationChanged.value).toBe(false);
+      expect(composable.isConfigurationChanged.value).toBe(false);
+    });
   });
 });
 

diff --git a/client-app/shared/notification/types/index.ts b/client-app/shared/notification/types/index.ts
@@ -19,7 +19,6 @@ export interface INotification {
   classes?: string;
   group?: string;
   button?: NotificationCustomButtonType;
-  buttons?: NotificationCustomButtonType[];
   component?: Component;
   props?: ComponentObjectPropsOptions;