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()}
);
};