diff --git a/apps/builder/app/builder/features/project-settings/section-marketplace.tsx b/apps/builder/app/builder/features/project-settings/section-marketplace.tsx index 35020cf797d5..cd34f4bc6b57 100644 --- a/apps/builder/app/builder/features/project-settings/section-marketplace.tsx +++ b/apps/builder/app/builder/features/project-settings/section-marketplace.tsx @@ -17,7 +17,7 @@ import { Box, } from "@webstudio-is/design-system"; import { Image, wsImageLoader } from "@webstudio-is/image"; -import { useState } from "react"; +import { useEffect, useRef, useState } from "react"; import { MarketplaceProduct, marketplaceCategories, @@ -29,6 +29,7 @@ import { MarketplaceApprovalStatus } from "@webstudio-is/project"; import { serverSyncStore } from "~/shared/sync"; import { trpcClient } from "~/shared/trpc/trpc-client"; import { rightPanelWidth, sectionSpacing } from "./utils"; +import { MARKETPLACE_SHARE_LINK } from "~/shared/share-project"; const thumbnailStyle = css({ borderRadius: theme.borderRadius[4], @@ -69,6 +70,15 @@ const useMarketplaceApprovalStatus = () => { trpcClient.project.setMarketplaceApprovalStatus.useMutation(); const project = useStore($project); + const { send: createToken } = + trpcClient.authorizationToken.create.useMutation(); + + const { send: removeToken } = + trpcClient.authorizationToken.remove.useMutation(); + + const { load } = trpcClient.authorizationToken.findMany.useQuery(); + const marketPlaceToken = useRef(); + const status = data?.marketplaceApprovalStatus ?? project?.marketplaceApprovalStatus ?? @@ -88,6 +98,20 @@ const useMarketplaceApprovalStatus = () => { } }; + useEffect(() => { + const project = $project.get(); + if (project) { + load({ projectId: project?.id }, (data) => { + const searchToken = data.find( + (authToken) => authToken.name === MARKETPLACE_SHARE_LINK + ); + + console.info(searchToken); + marketPlaceToken.current = searchToken ? searchToken.token : undefined; + }); + } + }, [marketPlaceToken, load]); + return { status, state, @@ -100,6 +124,11 @@ const useMarketplaceApprovalStatus = () => { }, handleSuccess ); + createToken({ + projectId: project.id, + relation: "viewers", + name: MARKETPLACE_SHARE_LINK, + }); } }, unlist() { @@ -111,6 +140,12 @@ const useMarketplaceApprovalStatus = () => { }, handleSuccess ); + if (marketPlaceToken.current) { + removeToken({ + projectId: project.id, + token: marketPlaceToken.current, + }); + } } }, }; diff --git a/apps/builder/app/shared/share-project/index.ts b/apps/builder/app/shared/share-project/index.ts index e225d77e1af4..11943b673887 100644 --- a/apps/builder/app/shared/share-project/index.ts +++ b/apps/builder/app/shared/share-project/index.ts @@ -1 +1,2 @@ export { ShareProjectContainer } from "./share-project-container"; +export { MARKETPLACE_SHARE_LINK } from "./share-project"; diff --git a/apps/builder/app/shared/share-project/share-project-container.tsx b/apps/builder/app/shared/share-project/share-project-container.tsx index c601533367ea..518e472632e0 100644 --- a/apps/builder/app/shared/share-project/share-project-container.tsx +++ b/apps/builder/app/shared/share-project/share-project-container.tsx @@ -2,7 +2,11 @@ import { useEffect, useRef, useState } from "react"; import { useDebouncedCallback } from "use-debounce"; import { builderUrl } from "~/shared/router-utils"; import { trpcClient } from "../trpc/trpc-client"; -import { ShareProject, type LinkOptions } from "./share-project"; +import { + MARKETPLACE_SHARE_LINK, + ShareProject, + type LinkOptions, +} from "./share-project"; const useShareProjectContainer = (projectId: string) => { const { @@ -21,7 +25,12 @@ const useShareProjectContainer = (projectId: string) => { useEffect(() => { load({ projectId }, (data) => { - setLinks(data ?? []); + // prevent user from editing the auto-generated market place share token + const filterLinks = data.filter( + (link) => link.name !== MARKETPLACE_SHARE_LINK + ); + + setLinks(filterLinks ?? []); }); }, [load, projectId]); @@ -66,7 +75,10 @@ const useShareProjectContainer = (projectId: string) => { }, () => { load({ projectId }, (data) => { - setLinks(data ?? []); + const filterLinks = data.filter( + (link) => link.name !== MARKETPLACE_SHARE_LINK + ); + setLinks(filterLinks ?? []); }); } ); diff --git a/apps/builder/app/shared/share-project/share-project.tsx b/apps/builder/app/shared/share-project/share-project.tsx index ad9b399a3547..e59c207bedfe 100644 --- a/apps/builder/app/shared/share-project/share-project.tsx +++ b/apps/builder/app/shared/share-project/share-project.tsx @@ -39,6 +39,8 @@ import { CopyToClipboard } from "~/builder/shared/copy-to-clipboard"; import { useIds } from "../form-utils"; import type { BuilderMode } from "../nano-states"; +export const MARKETPLACE_SHARE_LINK = "wstd-marketplace-link"; + const Item = (props: ComponentProps) => ( { }; const saveCustomLinkName = () => { - if (customLinkName.length === 0) { + if ( + customLinkName.length === 0 || + customLinkName === MARKETPLACE_SHARE_LINK + ) { return; } @@ -137,7 +142,12 @@ const Menu = ({ name, hasProPlan, value, onChange, onDelete }: MenuProps) => { setCustomLinkName(event.target.value)} onKeyDown={(event) => {