feat(web): update story custom domain extension

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>
+        )}
     </>
   );
 };

web/src/beta/features/ProjectSettings/innerPages/PublicSettings/index.tsx

@@ -52,6 +52,7 @@ export type SettingsProject = {
   isArchived: boolean;
   enableGa: boolean;
   trackingId: string;
+  __typename: string;
 };
 
 type Props = {

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: string;
 };
 
 export const getStories = (rawScene?: GetSceneQuery) => {

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;