Add VPP app: fix confusing empty states (#24243)

# Checklist for submitter

If some of the following don't apply, delete the relevant line.

<!-- Note that API documentation changes are now addressed by the
product design team. -->

- [x] Changes file added for user-visible changes in `changes/`,
`orbit/changes/` or `ee/fleetd-chrome/changes`.
See [Changes
files](https://github.com/fleetdm/fleet/blob/main/docs/Contributing/Committing-Changes.md#changes-files)
for more information.
- [x] Manual QA for all new/changed functionality

---------

Co-authored-by: Sarah Gillespie <73313222+gillespi314@users.noreply.github.com>

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.

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,
   },
   {

frontend/pages/SoftwarePage/SoftwareAddPage/SoftwareAppStoreVpp/AddSoftwareVppForm/AddSoftwareVppForm.tsx

@@ -29,6 +29,26 @@ const EnableVppCard = () => {
         <p className={`${baseClass}__enable-vpp-description`}>
           To add App Store apps, first enable VPP.
         </p>
+        <CustomLink
+          url={PATHS.ADMIN_INTEGRATIONS_VPP}
+          text="Enable VPP"
+          className={`${baseClass}__enable-vpp-link`}
+        />
+      </div>
+    </Card>
+  );
+};
+
+const EditVppCard = () => {
+  return (
+    <Card borderRadiusSize="medium" paddingSize="xxxlarge">
+      <div className={`${baseClass}__enable-vpp-message`}>
+        <p className={`${baseClass}__enable-vpp-title`}>
+          This team isn&apos;t added to Volume Purchasing Program (VPP)
+        </p>
+        <p className={`${baseClass}__enable-vpp-description`}>
+          To add App Store apps, first add this team to VPP.
+        </p>
         <CustomLink
           url={PATHS.ADMIN_INTEGRATIONS_VPP}
           text="Edit VPP"
@@ -120,6 +140,7 @@ const VppAppList = ({ apps, selectedApp, onSelect }: IVppAppListProps) => {
 
 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 <EnableVppCard />;
     }
 
+    if (!hasVppToken) {
+      return <EditVppCard />;
+    }
+
     if (vppApps) {
       if (vppApps.length === 0) {
         return <NoVppAppsCard />;

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}
         />
       </div>