Add free tier UI states os updates and setup experience pages (#16160)

relates to #16031

This adds and makes consistent the free UI states for the os updates and
setup experience pages.

- [x] Changes file added for user-visible changes in `changes/` or
`orbit/changes/`.
See [Changes
files](https://fleetdm.com/docs/contributing/committing-changes#changes-files)
for more information.
- [x] Manual QA for all new/changed functionality

changes/issue-16031-os-updates-free-ui

@@ -0,0 +1 @@
+- add free tier UI state to os updates and setup experience pages

frontend/pages/ManageControlsPage/OSUpdates/OSUpdates.tsx

@@ -50,6 +50,15 @@ const OSUpdates = ({ router, teamIdForApi }: IOSUpdates) => {
     setSelectedPlatform(getSelectedPlatform(config));
   }, [config]);
 
+  // Not premium shows premium message
+  if (!isPremiumTier) {
+    return (
+      <PremiumFeatureMessage
+        className={`${baseClass}__premium-feature-message`}
+      />
+    );
+  }
+
   if (config === null || teamIdForApi === undefined) return null;
 
   // mdm is not enabled for mac or windows.
@@ -60,15 +69,6 @@ const OSUpdates = ({ router, teamIdForApi }: IOSUpdates) => {
     return <TurnOnMdmMessage router={router} />;
   }
 
-  // Not premium shows premium message
-  if (!isPremiumTier) {
-    return (
-      <PremiumFeatureMessage
-        className={`${baseClass}__premium-feature-message`}
-      />
-    );
-  }
-
   const handleSelectPlatform = (platform: OSUpdatesSupportedPlatform) => {
     setSelectedPlatform(platform);
   };

frontend/pages/ManageControlsPage/SetupExperience/SetupExperience.tsx

@@ -52,12 +52,21 @@ const SetupExperience = ({
   const { section } = params;
   const { isPremiumTier, config } = useContext(AppContext);
 
+  // Not premium shows premium message
+  if (!isPremiumTier) {
+    return (
+      <PremiumFeatureMessage
+        className={`${baseClass}__premium-feature-message`}
+      />
+    );
+  }
+
   // MDM is not on so show messaging for user to enable it.
   if (!config?.mdm.enabled_and_configured) {
     return <TurnOnMdmMessage router={router} />;
   }
   // User has not set up Apple Business Manager.
-  if (isPremiumTier && !config?.mdm.apple_bm_enabled_and_configured) {
+  if (!config?.mdm.apple_bm_enabled_and_configured) {
     return <SetupEmptyState router={router} />;
   }
 
@@ -75,25 +84,21 @@ const SetupExperience = ({
         Customize the setup experience for hosts that automatically enroll to
         this team.
       </p>
-      {!isPremiumTier ? (
-        <PremiumFeatureMessage />
-      ) : (
-        <SideNav
-          className={`${baseClass}__side-nav`}
-          navItems={SETUP_EXPERIENCE_NAV_ITEMS.map((navItem) => ({
-            ...navItem,
-            path: navItem.path.concat(queryString),
-          }))}
-          activeItem={currentFormSection.urlSection}
-          CurrentCard={
-            <CurrentCard
-              key={teamIdForApi}
-              currentTeamId={teamIdForApi}
-              router={router}
-            />
-          }
-        />
-      )}
+      <SideNav
+        className={`${baseClass}__side-nav`}
+        navItems={SETUP_EXPERIENCE_NAV_ITEMS.map((navItem) => ({
+          ...navItem,
+          path: navItem.path.concat(queryString),
+        }))}
+        activeItem={currentFormSection.urlSection}
+        CurrentCard={
+          <CurrentCard
+            key={teamIdForApi}
+            currentTeamId={teamIdForApi}
+            router={router}
+          />
+        }
+      />
     </div>
   );
 };

frontend/pages/ManageControlsPage/SetupExperience/_styles.scss

@@ -4,6 +4,10 @@
     margin: $pad-xxlarge 0;
   }
 
+  &__premium-feature-message {
+    margin-top: 80px;
+  }
+
   &__empty-state {
     margin-top: $pad-xxlarge;