diff --git a/changes/20897-add-software-premium-message b/changes/20897-add-software-premium-message new file mode 100644 index 0000000000..82ab23030d --- /dev/null +++ b/changes/20897-add-software-premium-message @@ -0,0 +1 @@ +- Fleet Free users see a Premium feature message when clicking to add Add software diff --git a/frontend/components/PremiumFeatureMessage/PremiumFeatureMessage.tsx b/frontend/components/PremiumFeatureMessage/PremiumFeatureMessage.tsx index 40a7fbf775..7b07e1dc20 100644 --- a/frontend/components/PremiumFeatureMessage/PremiumFeatureMessage.tsx +++ b/frontend/components/PremiumFeatureMessage/PremiumFeatureMessage.tsx @@ -6,10 +6,23 @@ import Icon from "components/Icon"; interface IPremiumFeatureMessage { className?: string; + /** Aligns premium message, default: centered */ + alignment?: "left"; } -const PremiumFeatureMessage = ({ className }: IPremiumFeatureMessage) => { - const classes = classnames("premium-feature-message-container", className); +const baseClass = "premium-feature-message-container"; + +const PremiumFeatureMessage = ({ + className, + alignment, +}: IPremiumFeatureMessage) => { + const classes = classnames( + baseClass, + { + [`${baseClass}__align-${alignment}`]: alignment !== undefined, + }, + className + ); return (
diff --git a/frontend/components/PremiumFeatureMessage/_styles.scss b/frontend/components/PremiumFeatureMessage/_styles.scss index f24d2364a1..3a33e5f4e2 100644 --- a/frontend/components/PremiumFeatureMessage/_styles.scss +++ b/frontend/components/PremiumFeatureMessage/_styles.scss @@ -4,6 +4,11 @@ align-items: center; font-size: $x-small; + &__align-left { + justify-content: left; + align-items: left; + } + .premium-feature-message { display: flex; gap: 4px; diff --git a/frontend/pages/SoftwarePage/SoftwarePage.tsx b/frontend/pages/SoftwarePage/SoftwarePage.tsx index 34aeb03cc5..663b270b37 100644 --- a/frontend/pages/SoftwarePage/SoftwarePage.tsx +++ b/frontend/pages/SoftwarePage/SoftwarePage.tsx @@ -429,6 +429,7 @@ const SoftwarePage = ({ children, router, location }: ISoftwarePageProps) => { router={router} onExit={toggleAddSoftwareModal} setAddedSoftwareToken={setAddedSoftwareToken} + isFreeTier={isFreeTier} /> )}
diff --git a/frontend/pages/SoftwarePage/components/AddSoftwareModal/AddSoftwareModal.tsx b/frontend/pages/SoftwarePage/components/AddSoftwareModal/AddSoftwareModal.tsx index 7f55adbc9a..4046e090c9 100644 --- a/frontend/pages/SoftwarePage/components/AddSoftwareModal/AddSoftwareModal.tsx +++ b/frontend/pages/SoftwarePage/components/AddSoftwareModal/AddSoftwareModal.tsx @@ -7,6 +7,7 @@ import { APP_CONTEXT_ALL_TEAMS_ID } from "interfaces/team"; import Modal from "components/Modal"; import Button from "components/buttons/Button"; import TabsWrapper from "components/TabsWrapper"; +import PremiumFeatureMessage from "components/PremiumFeatureMessage"; import AppStoreVpp from "../AppStoreVpp"; import AddPackage from "../AddPackage"; @@ -38,6 +39,7 @@ interface IAddSoftwareModalProps { router: InjectedRouter; onExit: () => void; setAddedSoftwareToken: (token: string) => void; + isFreeTier?: boolean; } const AddSoftwareModal = ({ @@ -45,7 +47,54 @@ const AddSoftwareModal = ({ router, onExit, setAddedSoftwareToken, + isFreeTier, }: IAddSoftwareModalProps) => { + const renderModalContent = () => { + if (isFreeTier) { + return ( + <> + {" "} +
+ +
+ + ); + } + + if (teamId === APP_CONTEXT_ALL_TEAMS_ID) { + return ; + } + + return ( + + + + Package + App Store (VPP) + + + + + + + + + + ); + }; + return ( - <> - {teamId === APP_CONTEXT_ALL_TEAMS_ID ? ( - - ) : ( - - - - Package - App Store (VPP) - - - - - - - - - - )} - + {renderModalContent()} ); };