From 49ffa0c8bb5b6566e833cfff0050f85e8a7222d2 Mon Sep 17 00:00:00 2001
From: Aleksander <170264518+t-aleksander@users.noreply.github.com>
Date: Sun, 19 Jan 2025 18:04:24 +0100
Subject: [PATCH] Add enterprise upgrade modals when adding a network device
 (#961)

---
 .../steps/SetupCliStep/SetupCliStep.tsx            | 14 ++++++++++++++
 .../steps/SetupManualStep/SetupManualStep.tsx      | 14 ++++++++++++++
 2 files changed, 28 insertions(+)

diff --git a/web/src/pages/devices/modals/AddStandaloneDeviceModal/steps/SetupCliStep/SetupCliStep.tsx b/web/src/pages/devices/modals/AddStandaloneDeviceModal/steps/SetupCliStep/SetupCliStep.tsx
index e04c6bf5f..791f77a62 100644
--- a/web/src/pages/devices/modals/AddStandaloneDeviceModal/steps/SetupCliStep/SetupCliStep.tsx
+++ b/web/src/pages/devices/modals/AddStandaloneDeviceModal/steps/SetupCliStep/SetupCliStep.tsx
@@ -10,7 +10,9 @@ import {
 } from '../../../../../../shared/defguard-ui/components/Layout/Button/types';
 import { MessageBox } from '../../../../../../shared/defguard-ui/components/Layout/MessageBox/MessageBox';
 import { MessageBoxType } from '../../../../../../shared/defguard-ui/components/Layout/MessageBox/types';
+import { useAppStore } from '../../../../../../shared/hooks/store/useAppStore';
 import { useAuthStore } from '../../../../../../shared/hooks/store/useAuthStore';
+import { useEnterpriseUpgradeStore } from '../../../../../../shared/hooks/store/useEnterpriseUpgradeStore';
 import useApi from '../../../../../../shared/hooks/useApi';
 import { useToaster } from '../../../../../../shared/hooks/useToaster';
 import { QueryKeys } from '../../../../../../shared/queries';
@@ -43,6 +45,10 @@ export const SetupCliStep = () => {
     standaloneDevice: { createCliDevice },
   } = useApi();
 
+  const showUpgradeToast = useEnterpriseUpgradeStore((s) => s.show);
+  const { getAppInfo } = useApi();
+  const setAppStore = useAppStore((s) => s.setState, shallow);
+
   const { mutateAsync } = useMutation({
     mutationFn: createCliDevice,
     onSuccess: () => {
@@ -51,6 +57,14 @@ export const SetupCliStep = () => {
         [QueryKeys.FETCH_USER_PROFILE, currentUserId],
         [QueryKeys.FETCH_STANDALONE_DEVICE_LIST],
       ]);
+      void getAppInfo().then((response) => {
+        setAppStore({
+          appInfo: response,
+        });
+        if (response.license_info.any_limit_exceeded) {
+          showUpgradeToast();
+        }
+      });
     },
     onError: (e) => {
       toast.error(LL.modals.addStandaloneDevice.toasts.creationFailed());
diff --git a/web/src/pages/devices/modals/AddStandaloneDeviceModal/steps/SetupManualStep/SetupManualStep.tsx b/web/src/pages/devices/modals/AddStandaloneDeviceModal/steps/SetupManualStep/SetupManualStep.tsx
index 70e9fb177..1674a1946 100644
--- a/web/src/pages/devices/modals/AddStandaloneDeviceModal/steps/SetupManualStep/SetupManualStep.tsx
+++ b/web/src/pages/devices/modals/AddStandaloneDeviceModal/steps/SetupManualStep/SetupManualStep.tsx
@@ -10,7 +10,9 @@ import {
   ButtonSize,
   ButtonStyleVariant,
 } from '../../../../../../shared/defguard-ui/components/Layout/Button/types';
+import { useAppStore } from '../../../../../../shared/hooks/store/useAppStore';
 import { useAuthStore } from '../../../../../../shared/hooks/store/useAuthStore';
+import { useEnterpriseUpgradeStore } from '../../../../../../shared/hooks/store/useEnterpriseUpgradeStore';
 import useApi from '../../../../../../shared/hooks/useApi';
 import { QueryKeys } from '../../../../../../shared/queries';
 import { generateWGKeys } from '../../../../../../shared/utils/generateWGKeys';
@@ -47,6 +49,10 @@ export const SetupManualStep = () => {
     standaloneDevice: { createManualDevice: createDevice },
   } = useApi();
 
+  const showUpgradeToast = useEnterpriseUpgradeStore((s) => s.show);
+  const { getAppInfo } = useApi();
+  const setAppStore = useAppStore((s) => s.setState, shallow);
+
   const { mutateAsync } = useMutation({
     mutationFn: createDevice,
     onSuccess: () => {
@@ -54,6 +60,14 @@ export const SetupManualStep = () => {
         [QueryKeys.FETCH_USER_PROFILE, currentUserId],
         [QueryKeys.FETCH_STANDALONE_DEVICE_LIST],
       ]);
+      void getAppInfo().then((response) => {
+        setAppStore({
+          appInfo: response,
+        });
+        if (response.license_info.any_limit_exceeded) {
+          showUpgradeToast();
+        }
+      });
     },
   });