From 8ab43fd519b72f8be9c880eaa341e9d66eb324a7 Mon Sep 17 00:00:00 2001
From: Lukasz Ostrowski <lukasz.ostrowski@saleor.io>
Date: Thu, 17 Nov 2022 15:10:33 +0100
Subject: [PATCH] Provide full API URL of Saleor to app iframe, add test
 (#2579)

* Provide full API URL of Saleor to app iframe, add test

* Fix imports after refactor
---
 src/apps/components/AppFrame/AppFrame.tsx |  4 +--
 src/apps/urls.test.ts                     | 36 +++++++++++++++++++++++
 src/apps/urls.ts                          | 18 ++++++++++--
 3 files changed, 54 insertions(+), 4 deletions(-)
 create mode 100644 src/apps/urls.test.ts

diff --git a/src/apps/components/AppFrame/AppFrame.tsx b/src/apps/components/AppFrame/AppFrame.tsx
index cbee3e9f6..de5af7223 100644
--- a/src/apps/components/AppFrame/AppFrame.tsx
+++ b/src/apps/components/AppFrame/AppFrame.tsx
@@ -1,7 +1,7 @@
 import {
   AppDetailsUrlQueryParams,
-  appIframeUrl,
   getAppDeepPathFromDashboardUrl,
+  resolveAppIframeUrl,
 } from "@saleor/apps/urls";
 import useLocale from "@saleor/hooks/useLocale";
 import useShop from "@saleor/hooks/useShop";
@@ -102,7 +102,7 @@ export const AppFrame: React.FC<Props> = ({
   return (
     <iframe
       ref={frameRef}
-      src={appIframeUrl(appId, src, shop.domain.host, params)}
+      src={resolveAppIframeUrl(appId, src, shop.domain.host, params)}
       onError={onError}
       onLoad={handleLoad}
       className={clsx(classes.iframe, className)}
diff --git a/src/apps/urls.test.ts b/src/apps/urls.test.ts
new file mode 100644
index 000000000..fbe6b8078
--- /dev/null
+++ b/src/apps/urls.test.ts
@@ -0,0 +1,36 @@
+import { resolveAppIframeUrl } from "@saleor/apps/urls";
+
+jest.mock("@saleor/config", () => ({
+  ...jest.requireActual("@saleor/config"),
+  getApiUrl: () => "https://shop.saleor.cloud/graphql/",
+}));
+
+describe("resolveAppIframeUrl", () => {
+  afterAll(() => {
+    jest.clearAllMocks();
+  });
+
+  it.each<[string, string, string, Record<string, unknown>, string]>([
+    [
+      "XyZ123",
+      "https://my-app.vercel.app",
+      "shop.saleor.cloud",
+      { param1: "param1" },
+      "https://my-app.vercel.app?domain=shop.saleor.cloud&saleorApiUrl=https%3A%2F%2Fshop.saleor.cloud%2Fgraphql%2F&id=XyZ123&param1=param1",
+    ],
+    [
+      "AbC987",
+      "https://my-app.vercel.app/configuration",
+      "shop.saleor.cloud",
+      { param1: "param1", param2: "param2" },
+      "https://my-app.vercel.app/configuration?domain=shop.saleor.cloud&saleorApiUrl=https%3A%2F%2Fshop.saleor.cloud%2Fgraphql%2F&id=AbC987&param1=param1&param2=param2",
+    ],
+  ])(
+    "Generates valid URL from segments",
+    (id, appUrl, shopHostname, params, expectedUrl) => {
+      const result = resolveAppIframeUrl(id, appUrl, shopHostname, params);
+
+      expect(result).toEqual(expectedUrl);
+    },
+  );
+});
diff --git a/src/apps/urls.ts b/src/apps/urls.ts
index 21153b821..103f88b21 100644
--- a/src/apps/urls.ts
+++ b/src/apps/urls.ts
@@ -1,3 +1,4 @@
+import { getApiUrl } from "@saleor/config";
 import { stringifyQs } from "@saleor/utils/urls";
 import urlJoin from "url-join";
 
@@ -117,15 +118,28 @@ export const customAppAddUrl = customAppAddPath;
 export const appsListUrl = (params?: AppListUrlQueryParams) =>
   appsListPath + "?" + stringifyQs(params);
 
-export const appIframeUrl = (
+export const resolveAppIframeUrl = (
   appId: string,
   appUrl: string,
   shopDomainHost: string,
   params: AppDetailsUrlQueryParams,
 ) => {
   const iframeContextQueryString = `?${stringifyQs(
-    { domain: shopDomainHost, id: appId, ...params },
+    {
+      /**
+       * @deprecated - domain will be removed in favor of saleorApiUrl.
+       * Current hostname (used as domain) can be extracted from full URL
+       *
+       * Difference will be:
+       * shop.saleor.cloud -> https://shop.saleor.cloud/graphql/
+       */
+      domain: shopDomainHost,
+      saleorApiUrl: getApiUrl(),
+      id: appId,
+      ...params,
+    },
     "comma",
   )}`;
+
   return urlJoin(appUrl, window.location.search, iframeContextQueryString);
 };