Add event for form communication

Author: lkostrowski

src/app-bridge/app-bridge-state.ts

@@ -2,6 +2,23 @@ import { LocaleCode } from "../locales";
 import { AppPermission, Permission } from "../types";
 import { ThemeType } from "./events";
 
+export type FormContextTranslateProduct = {
+  formId: "translate-product";
+  translationLanguage: string;
+  productId: string;
+  fields: Array<{
+    fieldName: string;
+    originalValue: string;
+    translatedValue: string;
+    type: "short" | "rich";
+  }>;
+};
+
+/**
+ * Strong-type all forms as union
+ */
+export type FormContextPayload = FormContextTranslateProduct;
+
 export type AppBridgeState = {
   token?: string;
   id: string;
@@ -24,6 +41,7 @@ export type AppBridgeState = {
     email: string;
   };
   appPermissions?: AppPermission[];
+  formContext?: FormContextPayload;
 };
 
 type Options = {

src/app-bridge/app-bridge.ts

@@ -61,6 +61,12 @@ function eventStateReducer(state: AppBridgeState, event: Events) {
         token: event.payload.token,
       };
     }
+    case EventType.formData: {
+      return {
+        ...state,
+        formContext: event.payload,
+      };
+    }
     case EventType.response: {
       return state;
     }
@@ -82,6 +88,7 @@ const createEmptySubscribeMap = (): SubscribeMap => ({
   theme: {},
   localeChanged: {},
   tokenRefresh: {},
+  formData: {},
 });
 
 export type AppBridgeOptions = {

src/app-bridge/events.ts

@@ -1,3 +1,5 @@
+import { FormContextPayload } from "@/app-bridge/app-bridge-state";
+
 import { LocaleCode } from "../locales";
 import { Values } from "./helpers";
 
@@ -10,6 +12,7 @@ export const EventType = {
   theme: "theme",
   localeChanged: "localeChanged",
   tokenRefresh: "tokenRefresh",
+  formData: "formData",
 } as const;
 
 export type EventType = Values<typeof EventType>;
@@ -66,17 +69,20 @@ export type TokenRefreshEvent = Event<
   }
 >;
 
+export type FormDataEvent = Event<"formData", FormContextPayload>;
+
 export type Events =
   | HandshakeEvent
   | DispatchResponseEvent
   | RedirectEvent
   | ThemeEvent
   | LocaleChangedEvent
-  | TokenRefreshEvent;
+  | TokenRefreshEvent
+  | FormDataEvent;
 
 export type PayloadOfEvent<
   TEventType extends EventType,
-  TEvent extends Events = Events
+  TEvent extends Events = Events,
   // @ts-ignore TODO - why this is not working with this tsconfig? Fixme
 > = TEvent extends Event<TEventType, unknown> ? TEvent["payload"] : never;
 
@@ -113,7 +119,7 @@ export const DashboardEventFactory = {
     saleorVersions?: {
       dashboard: string;
       core: string;
-    }
+    },
   ): HandshakeEvent {
     return {
       type: "handshake",
@@ -141,4 +147,10 @@ export const DashboardEventFactory = {
       },
     };
   },
+  createFormDataEvent(formId: string, formPayload: FormContextPayload): FormDataEvent {
+    return {
+      type: "formData",
+      payload: formPayload,
+    };
+  },
 };