fix editprohibited evaluation (#3677)

* fix condition

* fix types

Author: six7

.changeset/silly-apricots-beam.md

@@ -0,0 +1,5 @@
+---
+"@tokens-studio/figma-plugin": patch
+---
+
+Fixed an issue that caused the plugin to stay in readonly mode

packages/tokens-studio-for-figma/src/app/store/providers/ado/ado.tsx

@@ -1,5 +1,5 @@
 import { useDispatch, useSelector } from 'react-redux';
-import React from 'react';
+import React, { useEffect } from 'react';
 import compact from 'just-compact';
 import { Dispatch } from '@/app/store';
 import useConfirm from '@/app/hooks/useConfirm';
@@ -45,7 +45,7 @@ export const useADO = () => {
     // This ensures multi-file is enabled even if the license was validated after this callback was created
     if (isProUser) storageClient.enableMultiFile();
     return storageClient;
-  }, []); // Removed isProUser from dependencies to always use current value
+  }, [isProUser]);
 
   const askUserIfPull = React.useCallback(async () => {
     const confirmResult = await confirm({
@@ -139,9 +139,19 @@ export const useADO = () => {
 
   const checkAndSetAccess = React.useCallback(async (context: AdoCredentials) => {
     const storage = storageClientFactory(context);
+    if (isProUser) {
+      storage.enableMultiFile();
+    }
     const hasWriteAccess = await storage.canWrite();
     dispatch.tokenState.setEditProhibited(!hasWriteAccess);
-  }, [dispatch, storageClientFactory]);
+  }, [dispatch, storageClientFactory, isProUser]);
+
+  // Re-check access when isProUser changes from false to true (license validation during startup)
+  useEffect(() => {
+    if (isProUser && localApiState && localApiState.id && localApiState.provider === 'ado') {
+      checkAndSetAccess(localApiState as AdoCredentials);
+    }
+  }, [isProUser, localApiState, checkAndSetAccess]);
 
   const pullTokensFromADO = React.useCallback(async (context: AdoCredentials): Promise<RemoteResponseData | null> => {
     const storage = storageClientFactory(context);

packages/tokens-studio-for-figma/src/app/store/providers/bitbucket/bitbucket.tsx

@@ -1,5 +1,5 @@
 import { useDispatch, useSelector } from 'react-redux';
-import { useCallback, useMemo } from 'react';
+import { useCallback, useMemo, useEffect } from 'react';
 import compact from 'just-compact';
 import { Dispatch } from '@/app/store';
 import useConfirm from '@/app/hooks/useConfirm';
@@ -56,7 +56,7 @@ export function useBitbucket() {
       if (isProUser) storageClient.enableMultiFile();
       return storageClient;
     },
-    [], // Removed isProUser from dependencies to always use current value
+    [isProUser],
   );
 
   const askUserIfPull = useCallback(async () => {
@@ -152,6 +152,9 @@ export function useBitbucket() {
       context, owner, repo,
     }: { context: BitbucketCredentials; owner: string; repo: string }) => {
       const storage = storageClientFactory(context, owner, repo);
+      if (isProUser) {
+        storage.enableMultiFile();
+      }
       try {
         const hasWriteAccess = await storage.canWrite();
         dispatch.tokenState.setEditProhibited(!hasWriteAccess);
@@ -162,9 +165,21 @@ export function useBitbucket() {
         dispatch.tokenState.setEditProhibited(true);
       }
     },
-    [dispatch, storageClientFactory],
+    [dispatch, storageClientFactory, isProUser],
   );
 
+  // Re-check access when isProUser changes from false to true (license validation during startup)
+  useEffect(() => {
+    if (isProUser && localApiState && 'id' in localApiState && localApiState.id && localApiState.provider === 'bitbucket') {
+      const [owner, repo] = localApiState.id.split('/');
+      checkAndSetAccess({
+        context: localApiState as BitbucketCredentials,
+        owner,
+        repo,
+      });
+    }
+  }, [isProUser, localApiState, checkAndSetAccess]);
+
   const pullTokensFromBitbucket = useCallback(
     async (context: BitbucketCredentials): Promise<RemoteResponseData | null> => {
       const storage = storageClientFactory(context);

packages/tokens-studio-for-figma/src/app/store/providers/file.tsx

@@ -14,7 +14,7 @@ export default function useFile() {
     // This ensures multi-file is enabled even if the license was validated after this callback was created
     if (isProUser) storageClient.enableMultiFile();
     return storageClient;
-  }, []); // Removed isProUser from dependencies to always use current value
+  }, [isProUser]);
 
   const readTokensFromFileOrDirectory = useCallback(async (files: FileList): Promise<RemoteResponseData | null> => {
     const storage = storageClientFactory(files);

packages/tokens-studio-for-figma/src/app/store/providers/github/github.tsx

@@ -1,5 +1,5 @@
 import { useDispatch, useSelector } from 'react-redux';
-import { useCallback, useMemo } from 'react';
+import { useCallback, useMemo, useEffect } from 'react';
 import compact from 'just-compact';
 import { Dispatch } from '@/app/store';
 import useConfirm from '@/app/hooks/useConfirm';
@@ -50,7 +50,7 @@ export function useGitHub() {
     // This ensures multi-file is enabled even if the license was validated after this callback was created
     if (isProUser) storageClient.enableMultiFile();
     return storageClient;
-  }, []); // Removed isProUser from dependencies to always use current value
+  }, [isProUser]);
 
   const askUserIfPull = useCallback(async () => {
     const confirmResult = await confirm({
@@ -171,9 +171,27 @@ export function useGitHub() {
     context, owner, repo,
   }: { context: GithubCredentials; owner: string; repo: string }) => {
     const storage = storageClientFactory(context, owner, repo);
+
+    // Enable multi-file if user is pro, even if storage was created before license validation
+    if (isProUser) {
+      storage.enableMultiFile();
+    }
+
     const hasWriteAccess = await storage.canWrite();
     dispatch.tokenState.setEditProhibited(!hasWriteAccess);
-  }, [dispatch, storageClientFactory]);
+  }, [dispatch, storageClientFactory, isProUser]);
+
+  // Re-check access when isProUser changes from false to true (license validation during startup)
+  useEffect(() => {
+    if (isProUser && localApiState && 'id' in localApiState && localApiState.id && localApiState.provider === 'github') {
+      const [owner, repo] = localApiState.id.split('/');
+      checkAndSetAccess({
+        context: localApiState as GithubCredentials,
+        owner,
+        repo,
+      });
+    }
+  }, [isProUser, localApiState, checkAndSetAccess]);
 
   const pullTokensFromGitHub = useCallback(async (context: GithubCredentials): Promise<RemoteResponseData | null> => {
     const storage = storageClientFactory(context);

packages/tokens-studio-for-figma/src/app/store/providers/gitlab/gitlab.tsx

@@ -1,5 +1,5 @@
 import { useDispatch, useSelector } from 'react-redux';
-import { useCallback, useMemo } from 'react';
+import { useCallback, useMemo, useEffect } from 'react';
 import compact from 'just-compact';
 import { Dispatch } from '@/app/store';
 import useConfirm from '@/app/hooks/useConfirm';
@@ -153,10 +153,22 @@ export function useGitLab() {
     context,
   }: { context: GitlabCredentials }) => {
     const storage = await storageClientFactory(context, isProUser);
+    if (isProUser) {
+      storage.enableMultiFile();
+    }
     const hasWriteAccess = await storage.canWrite();
     dispatch.tokenState.setEditProhibited(!hasWriteAccess);
   }, [dispatch, storageClientFactory, isProUser]);
 
+  // Re-check access when isProUser changes from false to true (license validation during startup)
+  useEffect(() => {
+    if (isProUser && localApiState && localApiState.id && localApiState.provider === 'gitlab') {
+      checkAndSetAccess({
+        context: localApiState as GitlabCredentials,
+      });
+    }
+  }, [isProUser, localApiState, checkAndSetAccess]);
+
   const pullTokensFromGitLab = useCallback(async (context: GitlabCredentials): Promise<RemoteResponseData | null> => {
     const storage = await storageClientFactory(context, isProUser);
     await checkAndSetAccess({