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 ( + + ); + } + 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 ; } - // Not premium shows premium message - if (!isPremiumTier) { - return ( - - ); - } - 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 ( + + ); + } + // MDM is not on so show messaging for user to enable it. if (!config?.mdm.enabled_and_configured) { return ; } // 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 ; } @@ -75,25 +84,21 @@ const SetupExperience = ({ Customize the setup experience for hosts that automatically enroll to this team.

- {!isPremiumTier ? ( - - ) : ( - ({ - ...navItem, - path: navItem.path.concat(queryString), - }))} - activeItem={currentFormSection.urlSection} - CurrentCard={ - - } - /> - )} + ({ + ...navItem, + path: navItem.path.concat(queryString), + }))} + activeItem={currentFormSection.urlSection} + CurrentCard={ + + } + /> ); }; 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;