diff --git a/frontend/pages/SoftwarePage/components/AppStoreVpp/AppStoreVpp.tsx b/frontend/pages/SoftwarePage/components/AppStoreVpp/AppStoreVpp.tsx index 54b3b6f0ad..358c09ffad 100644 --- a/frontend/pages/SoftwarePage/components/AppStoreVpp/AppStoreVpp.tsx +++ b/frontend/pages/SoftwarePage/components/AppStoreVpp/AppStoreVpp.tsx @@ -1,11 +1,17 @@ import React, { useContext, useState } from "react"; import { useQuery } from "react-query"; import { InjectedRouter } from "react-router"; +import { AxiosError } from "axios"; import PATHS from "router/paths"; -import mdmAppleAPI, { IVppApp } from "services/entities/mdm_apple"; +import mdmAppleAPI, { + IGetVppInfoResponse, + IVppApp, +} from "services/entities/mdm_apple"; import { DEFAULT_USE_QUERY_OPTIONS } from "utilities/constants"; +import Card from "components/Card"; +import CustomLink from "components/CustomLink"; import Spinner from "components/Spinner"; import Button from "components/buttons/Button"; import DataError from "components/DataError"; @@ -17,6 +23,26 @@ import SoftwareIcon from "../icons/SoftwareIcon"; const baseClass = "app-store-vpp"; +const EnableVppCard = () => { + return ( + +
+

+ Volume Purchasing Program (VPP) isn’t enabled. +

+

+ To add App Store apps, first enable VPP. +

+ +
+
+ ); +}; + interface IVppAppListItemProps { app: IVppApp; selected: boolean; @@ -95,16 +121,31 @@ const AppStoreVpp = ({ teamId, router, onExit }: IAppStoreVppProps) => { const [isSubmitDisabled, setIsSubmitDisabled] = useState(true); const [selectedApp, setSelectedApp] = useState(null); - const { data: vppApps, isLoading, isError } = useQuery( - "vppSoftware", - () => mdmAppleAPI.getVppApps(teamId), + const { + data: vppInfo, + isLoading: isLoadingVppInfo, + error: errorVppInfo, + } = useQuery( + ["vppInfo"], + () => mdmAppleAPI.getVppInfo(), { ...DEFAULT_USE_QUERY_OPTIONS, staleTime: 30000, - select: (res) => res.app_store_apps, + retry: (tries, error) => error.status !== 404 && tries <= 3, } ); + const { + data: vppApps, + isLoading: isLoadingVppApps, + error: errorVppApps, + } = useQuery(["vppSoftware", teamId], () => mdmAppleAPI.getVppApps(teamId), { + ...DEFAULT_USE_QUERY_OPTIONS, + enabled: !!vppInfo, + staleTime: 30000, + select: (res) => res.app_store_apps, + }); + const onSelectApp = (app: IVppApp) => { setIsSubmitDisabled(false); setSelectedApp(app); @@ -142,11 +183,18 @@ const AppStoreVpp = ({ teamId, router, onExit }: IAppStoreVppProps) => { }; const renderContent = () => { - if (isLoading) { + if (isLoadingVppInfo || isLoadingVppApps) { return ; } - if (isError) { + if ( + errorVppInfo && + getErrorReason(errorVppInfo).includes("MDMConfigAsset was not found") + ) { + return ; + } + + if (errorVppInfo || errorVppApps) { return ; } diff --git a/frontend/pages/SoftwarePage/components/AppStoreVpp/_styles.scss b/frontend/pages/SoftwarePage/components/AppStoreVpp/_styles.scss index 15c64a9aea..7c0ac47565 100644 --- a/frontend/pages/SoftwarePage/components/AppStoreVpp/_styles.scss +++ b/frontend/pages/SoftwarePage/components/AppStoreVpp/_styles.scss @@ -50,4 +50,17 @@ &__error { margin: $pad-xxlarge 0; } + + &__enable-vpp { + display: flex; + flex-direction: column; + min-height: 149px; + align-items: center; + justify-content: center; + gap: $pad-small; + + p { + margin: 0; + } + } }