From 871b87de048ea17d6ae96e5c7e75b3808555d4fa Mon Sep 17 00:00:00 2001
From: xseignard <xavier.seignard@gmail.com>
Date: Fri, 14 Nov 2025 22:29:02 +0100
Subject: [PATCH 1/2] Add order fulfillments widgets

---
 src/components/Sidebar/menu/utils.test.ts     |  2 +
 .../components/AppWidgets/AppWidgets.tsx      | 81 +++++++++++--------
 ...app-extension-manifest-available-mounts.ts |  2 +
 .../domain/app-extension-manifest-options.ts  |  6 ++
 .../domain/app-extension-manifest.test.ts     |  1 +
 src/extensions/extensionMountPoints.ts        |  6 +-
 src/extensions/urls.ts                        |  1 +
 .../OrderFulfilledProductsCard.tsx            | 12 +++
 8 files changed, 78 insertions(+), 33 deletions(-)

diff --git a/src/components/Sidebar/menu/utils.test.ts b/src/components/Sidebar/menu/utils.test.ts
index 2443e29ad43..4e1da23464d 100644
--- a/src/components/Sidebar/menu/utils.test.ts
+++ b/src/components/Sidebar/menu/utils.test.ts
@@ -269,6 +269,7 @@ describe("getMenuItemExtension", () => {
     COLLECTION_OVERVIEW_MORE_ACTIONS: [],
     CUSTOMER_DETAILS_WIDGETS: [],
     ORDER_DETAILS_WIDGETS: [],
+    ORDER_FULFILLMENTS_WIDGETS: [],
     COLLECTION_DETAILS_WIDGETS: [],
     PRODUCT_DETAILS_WIDGETS: [],
     VOUCHER_DETAILS_WIDGETS: [],
@@ -322,6 +323,7 @@ describe("getMenuItemExtension", () => {
     COLLECTION_OVERVIEW_MORE_ACTIONS: [],
     CUSTOMER_DETAILS_WIDGETS: [],
     ORDER_DETAILS_WIDGETS: [],
+    ORDER_FULFILLMENTS_WIDGETS: [],
     COLLECTION_DETAILS_WIDGETS: [],
     PRODUCT_DETAILS_WIDGETS: [],
     VOUCHER_DETAILS_WIDGETS: [],
diff --git a/src/extensions/components/AppWidgets/AppWidgets.tsx b/src/extensions/components/AppWidgets/AppWidgets.tsx
index da68a118373..dcc8a9c1183 100644
--- a/src/extensions/components/AppWidgets/AppWidgets.tsx
+++ b/src/extensions/components/AppWidgets/AppWidgets.tsx
@@ -18,12 +18,14 @@ import { useIntl } from "react-intl";
 type AppWidgetsProps = {
   extensions: ExtensionWithParams[];
   params: AppDetailsUrlMountQueryParams;
+  condensed?: boolean;
 };
 
 const hiddenStyle = { visibility: "hidden" } as const;
 
 // TODO We will add size negotiations after render
 const defaultIframeSize = 200;
+const defaultIframeSizeCondensed = 24;
 
 /**
  * Renders a form and iframe, the form is automatically submitted with POST action and <iframe> content is replaced
@@ -34,12 +36,14 @@ const IframePost = ({
   appId,
   accessToken,
   params,
+  condensed,
 }: {
   extensionUrl: string;
   extensionId: string;
   accessToken: string;
   appId: string;
   params?: AppDetailsUrlMountQueryParams;
+  condensed?: boolean;
 }) => {
   const formRef = useRef<HTMLFormElement | null>(null);
   const iframeRef = useRef<HTMLFormElement | null>(null);
@@ -93,15 +97,19 @@ const IframePost = ({
             ))}
         </>
       </form>
-      <Box ref={loadingRef} width={"100%"} __height={defaultIframeSize}>
-        <Skeleton __height={defaultIframeSize} />
+      <Box
+        ref={loadingRef}
+        width={"100%"}
+        __height={condensed ? defaultIframeSizeCondensed : defaultIframeSize}
+      >
+        <Skeleton __height={condensed ? defaultIframeSizeCondensed : defaultIframeSize} />
       </Box>
       <Box
         style={hiddenStyle}
         ref={iframeRef}
         as="iframe"
         borderWidth={0}
-        __height={defaultIframeSize}
+        __height={condensed ? defaultIframeSizeCondensed : defaultIframeSize}
         sandbox="allow-same-origin allow-forms allow-scripts allow-downloads"
         name={`ext-frame-${extensionId}`}
         width={"100%"}
@@ -110,7 +118,7 @@ const IframePost = ({
   );
 };
 
-export const AppWidgets = ({ extensions, params }: AppWidgetsProps) => {
+export const AppWidgets = ({ extensions, params, condensed = false }: AppWidgetsProps) => {
   const navigate = useNavigator();
   const themeRef = useRef<ThemeType>();
   const intl = useIntl();
@@ -141,9 +149,11 @@ export const AppWidgets = ({ extensions, params }: AppWidgetsProps) => {
 
   return (
     <DashboardCard>
-      <DashboardCard.Header>
-        <DashboardCard.Title>Apps</DashboardCard.Title>
-      </DashboardCard.Header>
+      {!condensed && (
+        <DashboardCard.Header>
+          <DashboardCard.Title>Apps</DashboardCard.Title>
+        </DashboardCard.Header>
+      )}
       <DashboardCard.Content>
         {sortedByAppName.map(([appId, appWithExtensions]) => {
           const logo = appWithExtensions.app.brand?.logo.default;
@@ -153,23 +163,25 @@ export const AppWidgets = ({ extensions, params }: AppWidgetsProps) => {
           );
 
           return (
-            <Box marginBottom={8} key={appId}>
-              <Box display="flex" alignItems="center" marginBottom={2}>
-                <AppAvatar size={6} logo={logo ? { source: logo } : undefined} marginRight={2} />
-                <Text
-                  onClick={e => {
-                    navigate(appPageUrl);
-
-                    e.preventDefault();
-                  }}
-                  as="a"
-                  size={3}
-                  color="default2"
-                  href={appPageUrl}
-                >
-                  {appWithExtensions.app.name}
-                </Text>
-              </Box>
+            <Box marginBottom={condensed ? 4 : 8} key={appId}>
+              {!condensed && (
+                <Box display="flex" alignItems="center" marginBottom={2}>
+                  <AppAvatar size={6} logo={logo ? { source: logo } : undefined} marginRight={2} />
+                  <Text
+                    onClick={e => {
+                      navigate(appPageUrl);
+
+                      e.preventDefault();
+                    }}
+                    as="a"
+                    size={3}
+                    color="default2"
+                    href={appPageUrl}
+                  >
+                    {appWithExtensions.app.name}
+                  </Text>
+                </Box>
+              )}
               {appWithExtensions.extensions.map(ext => {
                 const settingsValidation = appExtensionManifestOptionsSchema.safeParse(
                   ext.settings,
@@ -204,10 +216,12 @@ export const AppWidgets = ({ extensions, params }: AppWidgetsProps) => {
                 );
 
                 const renderIframeGETvariant = () => (
-                  <Box __height={defaultIframeSize}>
-                    <Text size={3} color="default2" href={appPageUrl}>
-                      {ext.label}
-                    </Text>
+                  <Box __height={condensed ? defaultIframeSizeCondensed : defaultIframeSize}>
+                    {!condensed && (
+                      <Text size={3} color="default2" href={appPageUrl}>
+                        {ext.label}
+                      </Text>
+                    )}
                     <AppFrame
                       target="WIDGET"
                       src={GETappIframeUrl}
@@ -221,15 +235,18 @@ export const AppWidgets = ({ extensions, params }: AppWidgetsProps) => {
 
                 const renderIframePOSTvariant = () => (
                   <Box>
-                    <Text size={3} color="default2" href={appPageUrl}>
-                      {ext.label}
-                    </Text>
+                    {!condensed && (
+                      <Text size={3} color="default2" href={appPageUrl}>
+                        {ext.label}
+                      </Text>
+                    )}
                     <IframePost
                       appId={ext.app.id}
                       accessToken={ext.accessToken}
                       extensionId={ext.id}
                       extensionUrl={extensionUrl}
                       params={params}
+                      condensed={condensed}
                     />
                   </Box>
                 );
@@ -284,7 +301,7 @@ export const AppWidgets = ({ extensions, params }: AppWidgetsProps) => {
                 const renderNonIframe = !isIframeType;
 
                 return (
-                  <Box marginBottom={4} key={ext.id}>
+                  <Box marginBottom={condensed ? 2 : 4} key={ext.id}>
                     {renderGETiframe && renderIframeGETvariant()}
                     {renderPOSTiframe && renderIframePOSTvariant()}
                     {renderNonIframe && renderNonIframeExtension()}
diff --git a/src/extensions/domain/app-extension-manifest-available-mounts.ts b/src/extensions/domain/app-extension-manifest-available-mounts.ts
index 9057145e6d2..60329ce0aeb 100644
--- a/src/extensions/domain/app-extension-manifest-available-mounts.ts
+++ b/src/extensions/domain/app-extension-manifest-available-mounts.ts
@@ -25,6 +25,7 @@ const ORDER_MOUNTS = [
   "ORDER_OVERVIEW_MORE_ACTIONS",
   "DRAFT_ORDER_OVERVIEW_CREATE",
   "DRAFT_ORDER_OVERVIEW_MORE_ACTIONS",
+  "ORDER_FULFILLMENTS_WIDGETS",
 ] as const;
 
 const CUSTOMER_MOUNTS = [
@@ -112,6 +113,7 @@ export type AllAppExtensionMounts = z.infer<typeof ALL_APP_EXTENSION_MOUNTS>;
 // Subset of mounts available for WIDGET target
 export const WIDGET_AVAILABLE_MOUNTS = [
   "ORDER_DETAILS_WIDGETS",
+  "ORDER_FULFILLMENTS_WIDGETS",
   "PRODUCT_DETAILS_WIDGETS",
   "VOUCHER_DETAILS_WIDGETS",
   "DRAFT_ORDER_DETAILS_WIDGETS",
diff --git a/src/extensions/domain/app-extension-manifest-options.ts b/src/extensions/domain/app-extension-manifest-options.ts
index bd4bb1e4fc9..9700ef05193 100644
--- a/src/extensions/domain/app-extension-manifest-options.ts
+++ b/src/extensions/domain/app-extension-manifest-options.ts
@@ -4,12 +4,17 @@ const httpMethodSchema = z
   .enum(["GET", "POST"], { message: "Method must be either GET or POST" })
   .default("GET");
 
+const widgetTargetDisplaySchema = z
+  .enum(["BLOCK", "INLINE"], { message: "Style must be either INLINE or BLOCK" })
+  .default("BLOCK");
+
 const newTabTargetOptionsSchema = z.object({
   method: httpMethodSchema.optional().nullable(),
 });
 
 const widgetTargetOptionsSchema = z.object({
   method: httpMethodSchema.optional().nullable(),
+  display: widgetTargetDisplaySchema.optional().nullable(),
 });
 
 export const appExtensionManifestOptionsSchema = z
@@ -34,6 +39,7 @@ export const appExtensionManifestOptionsSchemaWithDefault =
     },
     widgetTarget: {
       method: "POST",
+      display: "BLOCK",
     },
   });
 
diff --git a/src/extensions/domain/app-extension-manifest.test.ts b/src/extensions/domain/app-extension-manifest.test.ts
index ad6f46291da..f8d7e28f091 100644
--- a/src/extensions/domain/app-extension-manifest.test.ts
+++ b/src/extensions/domain/app-extension-manifest.test.ts
@@ -136,6 +136,7 @@ describe("App Extension Manifest Schema", () => {
       // Arrange
       const mounts = [
         "ORDER_DETAILS_WIDGETS",
+        "ORDER_FULFILLMENTS_WIDGETS",
         "PRODUCT_DETAILS_WIDGETS",
         "VOUCHER_DETAILS_WIDGETS",
         "DRAFT_ORDER_DETAILS_WIDGETS",
diff --git a/src/extensions/extensionMountPoints.ts b/src/extensions/extensionMountPoints.ts
index 536ad0cda83..25697299fd2 100644
--- a/src/extensions/extensionMountPoints.ts
+++ b/src/extensions/extensionMountPoints.ts
@@ -17,7 +17,11 @@ export const extensionMountPoints = {
   CATEGORY_DETAILS: ["CATEGORY_DETAILS_MORE_ACTIONS"],
   GIFT_CARD_DETAILS: ["GIFT_CARD_DETAILS_MORE_ACTIONS", "GIFT_CARD_DETAILS_WIDGETS"],
   CUSTOMER_DETAILS: ["CUSTOMER_DETAILS_MORE_ACTIONS", "CUSTOMER_DETAILS_WIDGETS"],
-  ORDER_DETAILS: ["ORDER_DETAILS_MORE_ACTIONS", "ORDER_DETAILS_WIDGETS"],
+  ORDER_DETAILS: [
+    "ORDER_DETAILS_MORE_ACTIONS",
+    "ORDER_DETAILS_WIDGETS",
+    "ORDER_FULFILLMENTS_WIDGETS",
+  ],
   DRAFT_ORDER_DETAILS: ["DRAFT_ORDER_DETAILS_MORE_ACTIONS", "DRAFT_ORDER_DETAILS_WIDGETS"],
   PRODUCT_DETAILS: ["PRODUCT_DETAILS_MORE_ACTIONS", "PRODUCT_DETAILS_WIDGETS"],
   DISCOUNT_DETAILS: ["DISCOUNT_DETAILS_MORE_ACTIONS"],
diff --git a/src/extensions/urls.ts b/src/extensions/urls.ts
index 22473b23539..75e39d8274f 100644
--- a/src/extensions/urls.ts
+++ b/src/extensions/urls.ts
@@ -68,6 +68,7 @@ export interface AppDetailsUrlMountQueryParams {
   productIds?: string[];
   productSlug?: string;
   orderId?: string;
+  fulfillmentId?: string;
   customerId?: string;
   customerIds?: string[];
   categoryIds?: string[];
diff --git a/src/orders/components/OrderFulfilledProductsCard/OrderFulfilledProductsCard.tsx b/src/orders/components/OrderFulfilledProductsCard/OrderFulfilledProductsCard.tsx
index cd07c332b1d..f31408a8b29 100644
--- a/src/orders/components/OrderFulfilledProductsCard/OrderFulfilledProductsCard.tsx
+++ b/src/orders/components/OrderFulfilledProductsCard/OrderFulfilledProductsCard.tsx
@@ -1,5 +1,8 @@
 // @ts-strict-ignore
 import { DashboardCard } from "@dashboard/components/Card";
+import { AppWidgets } from "@dashboard/extensions/components/AppWidgets/AppWidgets";
+import { extensionMountPoints } from "@dashboard/extensions/extensionMountPoints";
+import { useExtensions } from "@dashboard/extensions/hooks/useExtensions";
 import { FulfillmentStatus, OrderDetailsFragment } from "@dashboard/graphql";
 import { orderHasTransactions } from "@dashboard/orders/types";
 import { mergeRepeatedOrderLines } from "@dashboard/orders/utils/data";
@@ -50,6 +53,8 @@ const OrderFulfilledProductsCard = (props: PropsWithChildren<OrderFulfilledProdu
     dataTestId,
   } = props;
 
+  const { ORDER_FULFILLMENTS_WIDGETS } = useExtensions(extensionMountPoints.ORDER_DETAILS);
+
   if (!fulfillment) {
     return null;
   }
@@ -93,6 +98,13 @@ const OrderFulfilledProductsCard = (props: PropsWithChildren<OrderFulfilledProdu
           </Box>
         }
       />
+      {ORDER_FULFILLMENTS_WIDGETS.length > 0 && (
+        <AppWidgets
+          extensions={ORDER_FULFILLMENTS_WIDGETS}
+          params={{ orderId: order.id, fulfillmentId: fulfillment.id }}
+          condensed
+        />
+      )}
       <DashboardCard.Content paddingX={0}>
         <OrderDetailsDatagrid
           lines={getLines()}

From 88b7cd31baa5df11454951b1e1ec70eec98fde7e Mon Sep 17 00:00:00 2001
From: Xavier Seignard <xavier.seignard@gmail.com>
Date: Tue, 27 Jan 2026 17:15:08 +0100
Subject: [PATCH 2/2] WIP

---
 .../components/AppFrame/AppFrame.tsx          | 18 +++---
 .../components/AppFrame/appActionsHandler.ts  | 62 +++++++++++++++++++
 .../components/AppFrame/useAppActions.ts      | 20 +++++-
 3 files changed, 89 insertions(+), 11 deletions(-)

diff --git a/src/extensions/views/ViewManifestExtension/components/AppFrame/AppFrame.tsx b/src/extensions/views/ViewManifestExtension/components/AppFrame/AppFrame.tsx
index 24f9c9efdf4..336b5b254d1 100644
--- a/src/extensions/views/ViewManifestExtension/components/AppFrame/AppFrame.tsx
+++ b/src/extensions/views/ViewManifestExtension/components/AppFrame/AppFrame.tsx
@@ -1,3 +1,4 @@
+import { DashboardModal } from "@dashboard/components/Modal";
 import { useAppFrameReferences } from "@dashboard/extensions/popup-frame-reference";
 import { AppDetailsUrlQueryParams } from "@dashboard/extensions/urls";
 import { useAllFlags } from "@dashboard/featureFlags";
@@ -48,16 +49,11 @@ export const AppFrame = ({
   /**
    * React on messages from App
    */
-  const { postToExtension, handshakeDone, setHandshakeDone } = useAppActions(
-    frameRef.current,
-    appOrigin,
-    appId,
-    appToken,
-    {
+  const { postToExtension, handshakeDone, setHandshakeDone, modalState, closeModal } =
+    useAppActions(frameRef.current, appOrigin, appId, appToken, {
       core: coreVersion,
       dashboard: dashboardVersion,
-    },
-  );
+    });
 
   /**
    * Listen to Dashboard context like theme or locale and inform app about it
@@ -113,6 +109,12 @@ export const AppFrame = ({
           [classes.iframeHidden]: !handshakeDone,
         })}
       />
+      <DashboardModal open={modalState.open} onChange={closeModal}>
+        <DashboardModal.Content size={modalState.size}>
+          <DashboardModal.Header>{modalState.title}</DashboardModal.Header>
+          {modalState.content}
+        </DashboardModal.Content>
+      </DashboardModal>
     </>
   );
 };
diff --git a/src/extensions/views/ViewManifestExtension/components/AppFrame/appActionsHandler.ts b/src/extensions/views/ViewManifestExtension/components/AppFrame/appActionsHandler.ts
index f4343327d92..5835954a118 100644
--- a/src/extensions/views/ViewManifestExtension/components/AppFrame/appActionsHandler.ts
+++ b/src/extensions/views/ViewManifestExtension/components/AppFrame/appActionsHandler.ts
@@ -1,3 +1,4 @@
+import { ContentSize } from "@dashboard/components/Modal/Content";
 import { getAppMountUri } from "@dashboard/config";
 import { useActiveAppExtension } from "@dashboard/extensions/components/AppExtensionContext/AppExtensionContextProvider";
 import { ExtensionsUrls, LegacyAppPaths } from "@dashboard/extensions/urls";
@@ -13,6 +14,7 @@ import {
   RequestPermissions,
   UpdateRouting,
 } from "@saleor/app-sdk/app-bridge";
+import { ReactNode, useState } from "react";
 import { useIntl } from "react-intl";
 import urlJoin from "url-join";
 
@@ -267,6 +269,65 @@ const useHandleAppFormUpdate = () => {
   };
 };
 
+export interface ModalAction {
+  type: "modal";
+  payload: {
+    actionId: string;
+    title: string;
+    content: ReactNode;
+    size?: ContentSize;
+  };
+}
+
+export interface ModalState {
+  open: boolean;
+  title: string;
+  content: ReactNode;
+  size?: ContentSize;
+}
+
+const useHandleModalAction = () => {
+  const [modalState, setModalState] = useState<ModalState>({
+    open: false,
+    title: "",
+    content: "",
+    size: "sm",
+  });
+
+  return {
+    modalState,
+    openModal: (title: string, content: ReactNode, size?: ContentSize) => {
+      setModalState({
+        open: true,
+        title,
+        content,
+        size: size || "sm",
+      });
+    },
+    closeModal: () => {
+      setModalState(prev => ({
+        ...prev,
+        open: false,
+      }));
+    },
+    handle: (action: ModalAction) => {
+      const { actionId, title, content, size } = action.payload;
+
+      debug(`Handling Modal action with ID: %s`, actionId);
+      debug(`Modal title: %s, size: %s`, title, size);
+
+      setModalState({
+        open: true,
+        title,
+        content,
+        size: size || "sm",
+      });
+
+      return createResponseStatus(actionId, true);
+    },
+  };
+};
+
 export const AppActionsHandler = {
   useHandleNotificationAction,
   useHandleUpdateRoutingAction,
@@ -275,4 +336,5 @@ export const AppActionsHandler = {
   createResponseStatus,
   useHandlePermissionRequest,
   useHandleAppFormUpdate,
+  useHandleModalAction,
 };
diff --git a/src/extensions/views/ViewManifestExtension/components/AppFrame/useAppActions.ts b/src/extensions/views/ViewManifestExtension/components/AppFrame/useAppActions.ts
index 6963f8bd39e..aaf57e274e5 100644
--- a/src/extensions/views/ViewManifestExtension/components/AppFrame/useAppActions.ts
+++ b/src/extensions/views/ViewManifestExtension/components/AppFrame/useAppActions.ts
@@ -1,9 +1,11 @@
 import { Actions, DispatchResponseEvent } from "@saleor/app-sdk/app-bridge";
 import { useEffect, useState } from "react";
 
-import { AppActionsHandler } from "./appActionsHandler";
+import { AppActionsHandler, ModalAction } from "./appActionsHandler";
 import { usePostToExtension } from "./usePostToExtension";
 
+type ExtendedActions = Actions | ModalAction;
+
 /**
  * TODO Refactor to named attributes
  */
@@ -29,11 +31,17 @@ export const useAppActions = (
   );
   const { handle: handlePermissionRequest } = AppActionsHandler.useHandlePermissionRequest(appId);
   const { handle: handleAppFormUpdate } = AppActionsHandler.useHandleAppFormUpdate();
+  const {
+    handle: handleModal,
+    modalState,
+    openModal,
+    closeModal,
+  } = AppActionsHandler.useHandleModalAction();
   /**
    * Store if app has performed a handshake with Dashboard, to avoid sending events before that
    */
   const [handshakeDone, setHandshakeDone] = useState(false);
-  const handleAction = (action: Actions | undefined): DispatchResponseEvent => {
+  const handleAction = (action: ExtendedActions | undefined): DispatchResponseEvent => {
     switch (action?.type) {
       case "notification": {
         return handleNotification(action);
@@ -60,6 +68,9 @@ export const useAppActions = (
       case "formPayloadUpdate": {
         return handleAppFormUpdate(action);
       }
+      case "modal": {
+        return handleModal(action);
+      }
       default: {
         throw new Error("Unknown action type");
       }
@@ -67,7 +78,7 @@ export const useAppActions = (
   };
 
   useEffect(() => {
-    const handler = (event: MessageEvent<Actions>) => {
+    const handler = (event: MessageEvent<ExtendedActions>) => {
       if (event.origin === appOrigin) {
         const response = handleAction(event.data);
 
@@ -86,5 +97,8 @@ export const useAppActions = (
     handshakeDone,
     postToExtension,
     setHandshakeDone,
+    modalState,
+    openModal,
+    closeModal,
   };
 };