diff --git a/changes/23234-bug-fix b/changes/23234-bug-fix
new file mode 100644
index 0000000000..c38071cd81
--- /dev/null
+++ b/changes/23234-bug-fix
@@ -0,0 +1,2 @@
+- Add App Store app UI: Added different empty state when VPP token is not added at all vs. when it's
+ not assigned to a team to prevent confusion.
diff --git a/frontend/pages/SoftwarePage/SoftwareAddPage/SoftwareAddPage.tsx b/frontend/pages/SoftwarePage/SoftwareAddPage/SoftwareAddPage.tsx
index 08d4947574..ef9f244ab2 100644
--- a/frontend/pages/SoftwarePage/SoftwareAddPage/SoftwareAddPage.tsx
+++ b/frontend/pages/SoftwarePage/SoftwareAddPage/SoftwareAddPage.tsx
@@ -28,7 +28,7 @@ const addSoftwareSubNav: IAddSoftwareSubNavItem[] = [
pathname: PATHS.SOFTWARE_ADD_FLEET_MAINTAINED,
},
{
- name: "App store (VPP)",
+ name: "App Store (VPP)",
pathname: PATHS.SOFTWARE_ADD_APP_STORE,
},
{
diff --git a/frontend/pages/SoftwarePage/SoftwareAddPage/SoftwareAppStoreVpp/AddSoftwareVppForm/AddSoftwareVppForm.tsx b/frontend/pages/SoftwarePage/SoftwareAddPage/SoftwareAppStoreVpp/AddSoftwareVppForm/AddSoftwareVppForm.tsx
index 3fb066d791..47d43700f5 100644
--- a/frontend/pages/SoftwarePage/SoftwareAddPage/SoftwareAppStoreVpp/AddSoftwareVppForm/AddSoftwareVppForm.tsx
+++ b/frontend/pages/SoftwarePage/SoftwareAddPage/SoftwareAppStoreVpp/AddSoftwareVppForm/AddSoftwareVppForm.tsx
@@ -29,6 +29,26 @@ const EnableVppCard = () => {
To add App Store apps, first enable VPP.
+
+
+
+ );
+};
+
+const EditVppCard = () => {
+ return (
+
+
+
+ This team isn't added to Volume Purchasing Program (VPP)
+
+
+ To add App Store apps, first add this team to VPP.
+
{
interface IAddSoftwareVppFormProps {
teamId: number;
+ noVppTokenUploaded: boolean;
hasVppToken: boolean;
router: InjectedRouter;
vppApps?: IVppApp[];
@@ -127,6 +148,7 @@ interface IAddSoftwareVppFormProps {
const AddSoftwareVppForm = ({
teamId,
+ noVppTokenUploaded,
hasVppToken,
router,
vppApps,
@@ -206,10 +228,14 @@ const AddSoftwareVppForm = ({
};
const renderContent = () => {
- if (!hasVppToken) {
+ if (noVppTokenUploaded) {
return ;
}
+ if (!hasVppToken) {
+ return ;
+ }
+
if (vppApps) {
if (vppApps.length === 0) {
return ;
diff --git a/frontend/pages/SoftwarePage/SoftwareAddPage/SoftwareAppStoreVpp/SoftwareAppStoreVpp.tsx b/frontend/pages/SoftwarePage/SoftwareAddPage/SoftwareAppStoreVpp/SoftwareAppStoreVpp.tsx
index 20baddab73..2c8d0ba3a9 100644
--- a/frontend/pages/SoftwarePage/SoftwareAddPage/SoftwareAppStoreVpp/SoftwareAppStoreVpp.tsx
+++ b/frontend/pages/SoftwarePage/SoftwareAddPage/SoftwareAppStoreVpp/SoftwareAppStoreVpp.tsx
@@ -17,7 +17,7 @@ import AddSoftwareVppForm from "./AddSoftwareVppForm";
import { teamHasVPPToken } from "./helpers";
const baseClass = "software-app-store-vpp";
-
+//
interface ISoftwareAppStoreProps {
currentTeamId: number;
router: InjectedRouter;
@@ -43,6 +43,7 @@ const SoftwareAppStoreVpp = ({
}
);
+ const noVppTokenUploaded = !vppInfo || !vppInfo.vpp_tokens.length;
const hasVppToken = teamHasVPPToken(currentTeamId, vppInfo?.vpp_tokens);
const {
@@ -81,6 +82,7 @@ const SoftwareAppStoreVpp = ({
router={router}
teamId={currentTeamId}
hasVppToken={hasVppToken}
+ noVppTokenUploaded={noVppTokenUploaded}
vppApps={vppApps}
/>