From 16102a1c2e86588a507c30abad42036bda794b70 Mon Sep 17 00:00:00 2001
From: tantaka tomokazu <tantaka.tomokazu@gmail.com>
Date: Tue, 21 Jan 2025 15:02:26 +0900
Subject: [PATCH] feat(web): update story custom domain extension (#1361)

Co-authored-by: Tomokazu Tantaka <t.tantaka@eukarya.io>
---
 .../PublicSettings/PublicSettingsDetail.tsx   | 47 ++++++++++++++-----
 .../innerPages/PublicSettings/index.tsx       |  1 +
 web/src/services/api/storytellingApi/utils.ts |  1 +
 web/src/services/config/extensions.ts         | 12 ++++-
 4 files changed, 49 insertions(+), 12 deletions(-)

diff --git a/web/src/beta/features/ProjectSettings/innerPages/PublicSettings/PublicSettingsDetail.tsx b/web/src/beta/features/ProjectSettings/innerPages/PublicSettings/PublicSettingsDetail.tsx
index e8b2badc4f..ec19afc2a0 100644
--- a/web/src/beta/features/ProjectSettings/innerPages/PublicSettings/PublicSettingsDetail.tsx
+++ b/web/src/beta/features/ProjectSettings/innerPages/PublicSettings/PublicSettingsDetail.tsx
@@ -5,6 +5,10 @@ import { AssetField, InputField, SwitchField } from "@reearth/beta/ui/fields";
 import TextAreaField from "@reearth/beta/ui/fields/TextareaField";
 import { Story } from "@reearth/services/api/storytellingApi/utils";
 import { useAuth } from "@reearth/services/auth";
+import {
+  ProjectPublicationExtensionProps,
+  StoryPublicationExtensionProps
+} from "@reearth/services/config/extensions";
 import { useLang, useT } from "@reearth/services/i18n";
 import {
   NotificationType,
@@ -104,6 +108,18 @@ const PublicSettingsDetail: React.FC<Props> = ({
     [setNotification]
   );
 
+  const ExtensionComponent = (
+    props: ProjectPublicationExtensionProps | StoryPublicationExtensionProps
+  ) => {
+    const type = props.typename.toLocaleLowerCase();
+    const extensionId = `custom-${type}-domain`;
+    const Component = extensions?.find((e) => e.id === extensionId)?.component;
+    if (!Component) {
+      return null;
+    }
+    return <Component {...props} />;
+  };
+
   return (
     <>
       <Collapse title={t("Public Info")} size="large">
@@ -233,22 +249,31 @@ const PublicSettingsDetail: React.FC<Props> = ({
           </ButtonWrapper>
         </SettingsFields>
       </Collapse>
-      {extensions && extensions.length > 0 && accessToken && (
-        <Collapse title={t("Custom Domain")} size="large">
-          {extensions.map((ext) => (
-            <ext.component
-              key={ext.id}
-              projectId={settingsItem.id}
-              projectAlias={settingsItem.alias}
+      {extensions &&
+        extensions.length > 0 &&
+        settingsItem.typename &&
+        accessToken && (
+          <Collapse title={t("Custom Domain")} size="large">
+            <ExtensionComponent
+              typename={settingsItem.typename}
+              key={settingsItem.id}
+              {...(settingsItem.typename === "Project"
+                ? {
+                    projectId: settingsItem.id,
+                    projectAlias: settingsItem.alias
+                  }
+                : {
+                    storyId: settingsItem.id,
+                    storyAlias: settingsItem.alias
+                  })}
               lang={currentLang}
               theme={currentTheme}
               accessToken={accessToken}
               onNotificationChange={onNotificationChange}
-              version={"visualizer"}
+              version="visualizer"
             />
-          ))}
-        </Collapse>
-      )}
+          </Collapse>
+        )}
     </>
   );
 };
diff --git a/web/src/beta/features/ProjectSettings/innerPages/PublicSettings/index.tsx b/web/src/beta/features/ProjectSettings/innerPages/PublicSettings/index.tsx
index 7e46a11670..6491646e31 100644
--- a/web/src/beta/features/ProjectSettings/innerPages/PublicSettings/index.tsx
+++ b/web/src/beta/features/ProjectSettings/innerPages/PublicSettings/index.tsx
@@ -52,6 +52,7 @@ export type SettingsProject = {
   isArchived: boolean;
   enableGa: boolean;
   trackingId: string;
+  typename?: "Project";
 };
 
 type Props = {
diff --git a/web/src/services/api/storytellingApi/utils.ts b/web/src/services/api/storytellingApi/utils.ts
index ea726f0a3b..02d6f66218 100644
--- a/web/src/services/api/storytellingApi/utils.ts
+++ b/web/src/services/api/storytellingApi/utils.ts
@@ -43,6 +43,7 @@ export type Story = {
   pages?: Page[];
   trackingId?: string; // Not supported yet
   enableGa?: boolean; // Not supported yet
+  typename?: "Story";
 };
 
 export const getStories = (rawScene?: GetSceneQuery) => {
diff --git a/web/src/services/config/extensions.ts b/web/src/services/config/extensions.ts
index 663c7a58ba..9e958012cc 100644
--- a/web/src/services/config/extensions.ts
+++ b/web/src/services/config/extensions.ts
@@ -29,6 +29,14 @@ export type ProjectPublicationExtensionProps = {
   projectId: string;
   projectAlias?: string;
   publishDisabled?: boolean;
+  typename: string;
+} & SharedExtensionProps;
+
+export type StoryPublicationExtensionProps = {
+  storyId: string;
+  storyAlias?: string;
+  publishDisabled?: boolean;
+  typename: string;
 } & SharedExtensionProps;
 
 export type PluginExtensionProps = {
@@ -50,7 +58,9 @@ export type GlobalModalProps = {
 
 export type ExtensionProps = {
   "dataset-import": DatasetImportExtensionProps;
-  publication: ProjectPublicationExtensionProps;
+  publication:
+    | ProjectPublicationExtensionProps
+    | StoryPublicationExtensionProps;
   "plugin-library": PluginExtensionProps;
   "plugin-installed": PluginExtensionProps;
   "global-modal": GlobalModalProps;