add seo fields to translation product update (#462)

* add seo fields

* add seo fields

Author: lkostrowski

.changeset/yummy-socks-greet.md

@@ -0,0 +1,5 @@
+---
+"@saleor/app-sdk": patch
+---
+
+Added missing seoName and seoDescriptiont to formPayload action

src/app-bridge/app-bridge.test.ts

@@ -9,6 +9,8 @@ import {
   AppBridge,
   DashboardEventFactory,
   DispatchResponseEvent,
+  FormPayloadProductEdit,
+  FormPayloadProductTranslate,
   HandshakeEvent,
   ThemeEvent,
 } from ".";
@@ -330,7 +332,7 @@ describe("AppBridge", () => {
     it("Updates state with form context when form payload event is received", () => {
       expect(appBridge.getState().formContext).toEqual({});
 
-      const formPayload = {
+      const formPayload: FormPayloadProductTranslate = {
         form: "product-translate" as const,
         productId: "product-123",
         translationLanguage: "es",
@@ -343,6 +345,27 @@ describe("AppBridge", () => {
             currentValue: "Original Product",
             type: "short-text" as const,
           },
+          productDescription: {
+            fieldName: "",
+            originalValue: "",
+            translatedValue: "",
+            currentValue: "",
+            type: "short-text",
+          },
+          seoName: {
+            fieldName: "",
+            originalValue: "",
+            translatedValue: "",
+            currentValue: "",
+            type: "short-text",
+          },
+          seoDescription: {
+            fieldName: "",
+            originalValue: "",
+            translatedValue: "",
+            currentValue: "",
+            type: "short-text",
+          },
         },
       };
 
@@ -373,7 +396,7 @@ describe("AppBridge", () => {
 
       expect(callback).not.toHaveBeenCalled();
 
-      const formPayload = {
+      const formPayload: FormPayloadProductTranslate = {
         form: "product-translate" as const,
         productId: "product-456",
         translationLanguage: "fr",
@@ -386,6 +409,27 @@ describe("AppBridge", () => {
             currentValue: "Description",
             type: "editorjs" as const,
           },
+          productName: {
+            fieldName: "",
+            originalValue: "",
+            translatedValue: "",
+            currentValue: "",
+            type: "short-text",
+          },
+          seoName: {
+            fieldName: "",
+            originalValue: "",
+            translatedValue: "",
+            currentValue: "",
+            type: "short-text",
+          },
+          seoDescription: {
+            fieldName: "",
+            originalValue: "",
+            translatedValue: "",
+            currentValue: "",
+            type: "short-text",
+          },
         },
       };
 
@@ -435,7 +479,7 @@ describe("AppBridge", () => {
     });
 
     it("Updates form context with new fields when multiple form events are received", () => {
-      const firstFormPayload = {
+      const firstFormPayload: FormPayloadProductTranslate = {
         form: "product-translate" as const,
         productId: "product-1",
         translationLanguage: "es",
@@ -448,6 +492,27 @@ describe("AppBridge", () => {
             currentValue: "Product 1",
             type: "short-text" as const,
           },
+          productDescription: {
+            fieldName: "",
+            originalValue: "",
+            translatedValue: "",
+            currentValue: "",
+            type: "short-text",
+          },
+          seoName: {
+            fieldName: "",
+            originalValue: "",
+            translatedValue: "",
+            currentValue: "",
+            type: "short-text",
+          },
+          seoDescription: {
+            fieldName: "",
+            originalValue: "",
+            translatedValue: "",
+            currentValue: "",
+            type: "short-text",
+          },
         },
       };
 
@@ -461,7 +526,7 @@ describe("AppBridge", () => {
 
       expect(appBridge.getState().formContext?.["product-translate"]?.productId).toBe("product-1");
 
-      const secondFormPayload = {
+      const secondFormPayload: FormPayloadProductTranslate = {
         form: "product-translate" as const,
         productId: "product-2",
         translationLanguage: "fr",
@@ -474,6 +539,27 @@ describe("AppBridge", () => {
             currentValue: "Product 2",
             type: "short-text" as const,
           },
+          productDescription: {
+            fieldName: "",
+            originalValue: "",
+            translatedValue: "",
+            currentValue: "",
+            type: "short-text",
+          },
+          seoName: {
+            fieldName: "",
+            originalValue: "",
+            translatedValue: "",
+            currentValue: "",
+            type: "short-text",
+          },
+          seoDescription: {
+            fieldName: "",
+            originalValue: "",
+            translatedValue: "",
+            currentValue: "",
+            type: "short-text",
+          },
         },
       };
 
@@ -497,7 +583,7 @@ describe("AppBridge", () => {
     it("Stores multiple form contexts for different form types simultaneously", () => {
       expect(appBridge.getState().formContext).toEqual({});
 
-      const productTranslatePayload = {
+      const productTranslatePayload: FormPayloadProductTranslate = {
         form: "product-translate" as const,
         productId: "product-123",
         translationLanguage: "es",
@@ -510,10 +596,31 @@ describe("AppBridge", () => {
             currentValue: "Original Product",
             type: "short-text" as const,
           },
+          productDescription: {
+            fieldName: "",
+            originalValue: "",
+            translatedValue: "",
+            currentValue: "",
+            type: "editorjs",
+          },
+          seoName: {
+            fieldName: "",
+            originalValue: "",
+            translatedValue: "",
+            currentValue: "",
+            type: "short-text",
+          },
+          seoDescription: {
+            fieldName: "",
+            originalValue: "",
+            translatedValue: "",
+            currentValue: "",
+            type: "editorjs",
+          },
         },
       };
 
-      const productEditPayload = {
+      const productEditPayload: FormPayloadProductEdit = {
         form: "product-edit" as const,
         productId: "product-456",
         fields: {

src/app-bridge/events.test.ts

@@ -1,5 +1,7 @@
 import { describe, expect, it } from "vitest";
 
+import { FormPayloadProductTranslate } from "@/app-bridge/form-payload";
+
 import { DashboardEventFactory } from "./events";
 
 describe("DashboardEventFactory", () => {
@@ -67,7 +69,7 @@ describe("DashboardEventFactory", () => {
   });
 
   it("Creates form payload event for product translation", () => {
-    const formPayload = {
+    const formPayload: FormPayloadProductTranslate = {
       form: "product-translate" as const,
       productId: "product-123",
       translationLanguage: "es",
@@ -87,6 +89,20 @@ describe("DashboardEventFactory", () => {
           currentValue: "Original description",
           type: "editorjs" as const,
         },
+        seoName: {
+          fieldName: "",
+          originalValue: "",
+          translatedValue: "",
+          currentValue: "",
+          type: "short-text",
+        },
+        seoDescription: {
+          fieldName: "",
+          originalValue: "",
+          translatedValue: "",
+          currentValue: "",
+          type: "short-text",
+        },
       },
     };
 
@@ -95,37 +111,4 @@ describe("DashboardEventFactory", () => {
       payload: formPayload,
     });
   });
-
-  it("Creates form payload event with all translation field types", () => {
-    const formPayload = {
-      form: "product-translate" as const,
-      productId: "product-456",
-      translationLanguage: "fr",
-      currentLanguage: "en",
-      fields: {
-        shortTextField: {
-          fieldName: "shortTextField",
-          originalValue: "Short text",
-          translatedValue: "Texte court",
-          currentValue: "Short text",
-          type: "short-text" as const,
-        },
-        editorField: {
-          fieldName: "editorField",
-          originalValue: "{\"blocks\": []}",
-          translatedValue: "{\"blocks\": []}",
-          currentValue: "{\"blocks\": []}",
-          type: "editorjs" as const,
-        },
-      },
-    };
-
-    const event = DashboardEventFactory.createFormEvent(formPayload);
-
-    expect(event.type).toBe("formPayload");
-    if (event.payload.form === "product-translate") {
-      expect(event.payload.fields.shortTextField.type).toBe("short-text");
-      expect(event.payload.fields.editorField.type).toBe("editorjs");
-    }
-  });
 });

src/app-bridge/form-payload.ts

@@ -31,12 +31,15 @@ type TranslationField = {
 type TranslationPayloadBase = {
   translationLanguage: string;
   currentLanguage: string;
-  fields: Record<string, TranslationField>;
 };
 
 export type FormPayloadProductTranslate = TranslationPayloadBase &
   ProductPayloadBase & {
     form: "product-translate";
+    fields: Record<
+      "productName" | "productDescription" | "seoName" | "seoDescription",
+      TranslationField
+    >;
   };
 
 export type FormPayloadUpdatePayloadProductTranslate = BaseFormPayloadUpdatePayload & {