From 80c574298e73210d1b2cd467c790b8a2494a0eb6 Mon Sep 17 00:00:00 2001
From: Gabriel Hernandez <ghernandez345@gmail.com>
Date: Thu, 18 Jan 2024 10:54:51 +0000
Subject: [PATCH] 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        |  1 +
 .../OSUpdates/OSUpdates.tsx                   | 18 ++++----
 .../SetupExperience/SetupExperience.tsx       | 45 ++++++++++---------
 .../SetupExperience/_styles.scss              |  4 ++
 4 files changed, 39 insertions(+), 29 deletions(-)
 create mode 100644 changes/issue-16031-os-updates-free-ui

diff --git a/changes/issue-16031-os-updates-free-ui b/changes/issue-16031-os-updates-free-ui
new file mode 100644
index 0000000000..a453ad7e1c
--- /dev/null
+++ b/changes/issue-16031-os-updates-free-ui
@@ -0,0 +1 @@
+- add free tier UI state to os updates and setup experience pages
diff --git a/frontend/pages/ManageControlsPage/OSUpdates/OSUpdates.tsx b/frontend/pages/ManageControlsPage/OSUpdates/OSUpdates.tsx
index aa9479ab90..91155921da 100644
--- a/frontend/pages/ManageControlsPage/OSUpdates/OSUpdates.tsx
+++ b/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);
   };
diff --git a/frontend/pages/ManageControlsPage/SetupExperience/SetupExperience.tsx b/frontend/pages/ManageControlsPage/SetupExperience/SetupExperience.tsx
index d537bb924f..99541e0269 100644
--- a/frontend/pages/ManageControlsPage/SetupExperience/SetupExperience.tsx
+++ b/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>
   );
 };
diff --git a/frontend/pages/ManageControlsPage/SetupExperience/_styles.scss b/frontend/pages/ManageControlsPage/SetupExperience/_styles.scss
index bd155a08e9..6f14c3db7e 100644
--- a/frontend/pages/ManageControlsPage/SetupExperience/_styles.scss
+++ b/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;