refactor: replace feature availability checks with useFeatureAvailability hook for improved clarity and consistency

Author: pFornagiel

packages/vscode-extension/src/webview/components/DeviceSelect.tsx

@@ -13,10 +13,10 @@ import { useStore } from "../providers/storeProvider";
 import { DeviceInfo, DevicePlatform, DeviceType } from "../../common/State";
 import { useSelectedDeviceSessionState } from "../hooks/selectedSession";
 import { usePaywalledCallback } from "../hooks/usePaywalledCallback";
-import { Feature } from "../../common/License";
+import { Feature, FeatureAvailabilityStatus } from "../../common/License";
 import { useDevices } from "../hooks/useDevices";
 import { PropsWithDataTest } from "../../common/types";
-import { useIsFeatureAdminDisabled } from "../hooks/useFeatureAvailabilityCheck";
+import { useFeatureAvailability } from "../hooks/useFeatureAvailability";
 
 enum DeviceSection {
   IosSimulator = "IosSimulator",
@@ -211,7 +211,9 @@ function DeviceSelect() {
   };
 
   const isAdminDisabledDeviceSections = (section: DeviceSection): boolean => {
-    const isRemoteAndroidAdminDisabled = useIsFeatureAdminDisabled(Feature.AndroidPhysicalDevice);
+    const isRemoteAndroidAdminDisabled =
+      useFeatureAvailability(Feature.AndroidPhysicalDevice) ===
+      FeatureAvailabilityStatus.ADMIN_DISABLED;
     return !(section === DeviceSection.PhysicalAndroid && isRemoteAndroidAdminDisabled);
   };
 

packages/vscode-extension/src/webview/components/Preview.tsx

@@ -37,8 +37,8 @@ import {
 } from "../../common/State";
 import { useSelectedDeviceSessionState } from "../hooks/selectedSession";
 import { ActivateLicenseMessage } from "./ActivateLicenseMessage";
-import { useIsFeatureAdminDisabled } from "../hooks/useFeatureAvailabilityCheck";
-import { Feature } from "../../common/License";
+import { useFeatureAvailability } from "../hooks/useFeatureAvailability";
+import { Feature, FeatureAvailabilityStatus } from "../../common/License";
 
 function TouchPointIndicator({ isPressing }: { isPressing: boolean }) {
   return <div className={`touch-indicator ${isPressing ? "pressed" : ""}`}></div>;
@@ -131,7 +131,8 @@ function Preview({
 
   const isRunning = selectedDeviceSessionStatus === "running";
 
-  const isSendFilesAdminDisabled = useIsFeatureAdminDisabled(Feature.SendFile);
+  const isSendFilesAdminDisabled =
+    useFeatureAvailability(Feature.SendFile) === FeatureAvailabilityStatus.ADMIN_DISABLED;
 
   const isRefreshing = use$(() =>
     isRunning ? selectedDeviceSessionState.applicationSession.isRefreshing.get() : false

packages/vscode-extension/src/webview/components/shared/PaywallDropdownMenu.tsx

@@ -1,11 +1,8 @@
 import React, { useMemo } from "react";
 import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
 import classnames from "classnames";
-import { Feature } from "../../../common/License";
-import {
-  useIsFeatureAvailable,
-  useIsFeaturePaywalled,
-} from "../../hooks/useFeatureAvailabilityCheck";
+import { Feature, FeatureAvailabilityStatus } from "../../../common/License";
+import { useFeatureAvailability } from "../../hooks/useFeatureAvailability";
 import { usePaywalledCallback } from "../../hooks/usePaywalledCallback";
 import * as DropdownMenuComponents from "../shared/DropdownMenuComponents";
 
@@ -36,8 +33,8 @@ export function Item({
   feature,
   ...props
 }: PaywallItemProps) {
-  const isPaywalled = useIsFeaturePaywalled(feature);
-  const isAvailable = useIsFeatureAvailable(feature);
+  const isPaywalled = useFeatureAvailability(feature) === FeatureAvailabilityStatus.PAYWALLED;
+  const isAvailable = useFeatureAvailability(feature) === FeatureAvailabilityStatus.AVAILABLE;
 
   const handleSelect = usePaywalledCallback(onSelect, feature, [onSelect]);
 
@@ -59,8 +56,8 @@ interface PaywallSubProps extends DropdownMenu.DropdownMenuSubProps {
 }
 
 export function Sub({ feature, children, open, ...props }: PaywallSubProps) {
-  const isPaywalled = useIsFeaturePaywalled(feature);
-  const isAvailable = useIsFeatureAvailable(feature);
+  const isPaywalled = useFeatureAvailability(feature) === FeatureAvailabilityStatus.PAYWALLED;
+  const isAvailable = useFeatureAvailability(feature) === FeatureAvailabilityStatus.AVAILABLE;
 
   const isOpen = isAvailable ? open : false;
 
@@ -104,8 +101,8 @@ interface PaywallSwitchItemProps extends DropdownMenuComponents.SwitchItemProps
 }
 
 export function SwitchItem({ children, className, feature, ...props }: PaywallSwitchItemProps) {
-  const isPaywalled = useIsFeaturePaywalled(feature);
-  const isAvailable = useIsFeatureAvailable(feature);
+  const isPaywalled = useFeatureAvailability(feature) === FeatureAvailabilityStatus.PAYWALLED;
+  const isAvailable = useFeatureAvailability(feature) === FeatureAvailabilityStatus.AVAILABLE;
 
   const handleOnClick = usePaywalledCallback(() => {}, feature, []);
 

packages/vscode-extension/src/webview/components/shared/PaywallIconButton.tsx

@@ -1,7 +1,7 @@
 import classnames from "classnames";
-import { Feature } from "../../../common/License";
+import { Feature, FeatureAvailabilityStatus } from "../../../common/License";
 import { PropsWithDataTest } from "../../../common/types";
-import { useIsFeaturePaywalled } from "../../hooks/useFeatureAvailabilityCheck";
+import { useFeatureAvailability } from "../../hooks/useFeatureAvailability";
 import { usePaywalledCallback } from "../../hooks/usePaywalledCallback";
 import IconButton, { type IconButtonProps } from "./IconButton";
 
@@ -17,7 +17,7 @@ const PaywallIconButton = ({
   onClick = () => {},
   ...props
 }: PaywallIconButtonProps) => {
-  const isPaywalled = useIsFeaturePaywalled(feature);
+  const isPaywalled = useFeatureAvailability(feature) === FeatureAvailabilityStatus.PAYWALLED;
   const badge = isPaywalled ? <span className={"pro-feature-badge"}>Pro</span> : null;
 
   const handleOnClick = usePaywalledCallback(onClick, feature, [onClick]);

packages/vscode-extension/src/webview/hooks/useFeatureAvailability.ts

@@ -0,0 +1,9 @@
+import { use$ } from "@legendapp/state/react";
+import { Feature, FeatureAvailabilityStatus } from "../../common/License";
+import { useStore } from "../providers/storeProvider";
+
+export function useFeatureAvailability(feature: Feature): FeatureAvailabilityStatus {
+  const store$ = useStore();
+  const featuresAvailability = use$(store$.license.featuresAvailability);
+  return featuresAvailability[feature];
+}

packages/vscode-extension/src/webview/hooks/useFeatureAvailabilityCheck.ts

@@ -31,9 +31,9 @@ import {
 import { useModal } from "../providers/ModalProvider";
 import Button from "../components/shared/Button";
 import { ActivateLicenseView } from "./ActivateLicenseView";
-import { Feature, LicenseStatus } from "../../common/License";
+import { Feature, FeatureAvailabilityStatus, LicenseStatus } from "../../common/License";
 import { useDevices } from "../hooks/useDevices";
-import { useIsFeatureAdminDisabled } from "../hooks/useFeatureAvailabilityCheck";
+import { useFeatureAvailability } from "../hooks/useFeatureAvailability";
 import PaywallIconButton from "../components/shared/PaywallIconButton";
 
 const INSPECTOR_AVAILABILITY_MESSAGES = {
@@ -220,7 +220,8 @@ function PreviewView() {
     };
   }, []);
 
-  const isRecordingAdminDisabled = useIsFeatureAdminDisabled(Feature.ScreenRecording);
+  const isRecordingAdminDisabled =
+    useFeatureAvailability(Feature.ScreenRecording) === FeatureAvailabilityStatus.ADMIN_DISABLED;
 
   const showRecordingButton = !isRecordingAdminDisabled;
 
@@ -250,7 +251,8 @@ function PreviewView() {
     project.stopMaestroTest();
   }
 
-  const isReplayAdminDisabled = useIsFeatureAdminDisabled(Feature.ScreenReplay);
+  const isReplayAdminDisabled =
+    useFeatureAvailability(Feature.ScreenReplay) === FeatureAvailabilityStatus.ADMIN_DISABLED;
 
   async function handleReplay() {
     try {
@@ -260,7 +262,8 @@ function PreviewView() {
     }
   }
 
-  const isScreenshotAdminDisabled = useIsFeatureAdminDisabled(Feature.Screenshot);
+  const isScreenshotAdminDisabled =
+    useFeatureAvailability(Feature.Screenshot) === FeatureAvailabilityStatus.ADMIN_DISABLED;
 
   const showScreenshotButton = !isScreenshotAdminDisabled;