From d26861427f15ce27ef528dcbef381770a3d28006 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Filip=20=C5=9Al=C4=99zak?= Date: Fri, 13 Mar 2026 13:32:42 +0100 Subject: [PATCH] add missing images to license modals and welcome wizard screens --- .../pages/AddLocationPage/AddLocationPage.tsx | 44 +++++-- .../steps/AddLocationStartStep.tsx | 7 ++ .../steps/AddLocationWelcomeStep.tsx | 24 ++++ .../AddLocationPage/useAddLocationStore.tsx | 2 + web/src/pages/EdgeSetupPage/EdgeSetupPage.tsx | 4 +- .../EdgeSetupPage/assets/welcome_image.svg | 109 ------------------ .../GatewaySetupPage/GatewaySetupPage.tsx | 5 +- .../GatewaySetupPage/assets/welcome_image.svg | 109 ------------------ .../pages/PlaygroundPage/PlaygroundPage.tsx | 19 ++- .../modals/LicenseModal/LicenseModal.tsx | 34 +++--- .../components/modals/LicenseModal/style.scss | 4 + .../LicenseExpiredModal.tsx | 3 + .../LicenseLimitConflictModal.tsx | 25 ++-- .../LicenseModalSideImage.tsx | 66 +++++++++++ .../LicenseModalSideImage/assets/business.png | Bin 0 -> 334424 bytes .../assets/enterprise.png | Bin 0 -> 316524 bytes .../LicenseModalSideImage/assets/expired.png | Bin 0 -> 50739 bytes .../LicenseModalSideImage/assets/limit.png | Bin 0 -> 179065 bytes .../license/LicenseModalSideImage/types.ts | 9 ++ .../LimitReachedModal/LimitReachedModal.tsx | 2 + .../UpgradeBusinessModal.tsx | 3 + .../UpgradeEnterpriseModal.tsx | 3 + .../WizardCoverImage/WizardCoverImage.tsx | 65 +++++++++++ .../assets/edge_wizard_cover.png | Bin 0 -> 421994 bytes .../assets/gw_wizard_cover.png | Bin 0 -> 488171 bytes .../assets/location_wizard_cover.png | Bin 0 -> 373493 bytes .../assets/migration_wizard_cover.png | Bin 0 -> 256131 bytes .../wizard/WizardCoverImage/types.ts | 8 ++ .../wizard/WizardWelcomePage/style.scss | 8 +- 29 files changed, 289 insertions(+), 264 deletions(-) create mode 100644 web/src/pages/AddLocationPage/steps/AddLocationWelcomeStep.tsx delete mode 100644 web/src/pages/EdgeSetupPage/assets/welcome_image.svg delete mode 100644 web/src/pages/GatewaySetupPage/assets/welcome_image.svg create mode 100644 web/src/shared/components/modals/license/LicenseModalSideImage/LicenseModalSideImage.tsx create mode 100644 web/src/shared/components/modals/license/LicenseModalSideImage/assets/business.png create mode 100644 web/src/shared/components/modals/license/LicenseModalSideImage/assets/enterprise.png create mode 100644 web/src/shared/components/modals/license/LicenseModalSideImage/assets/expired.png create mode 100644 web/src/shared/components/modals/license/LicenseModalSideImage/assets/limit.png create mode 100644 web/src/shared/components/modals/license/LicenseModalSideImage/types.ts create mode 100644 web/src/shared/components/wizard/WizardCoverImage/WizardCoverImage.tsx create mode 100644 web/src/shared/components/wizard/WizardCoverImage/assets/edge_wizard_cover.png create mode 100644 web/src/shared/components/wizard/WizardCoverImage/assets/gw_wizard_cover.png create mode 100644 web/src/shared/components/wizard/WizardCoverImage/assets/location_wizard_cover.png create mode 100644 web/src/shared/components/wizard/WizardCoverImage/assets/migration_wizard_cover.png create mode 100644 web/src/shared/components/wizard/WizardCoverImage/types.ts diff --git a/web/src/pages/AddLocationPage/AddLocationPage.tsx b/web/src/pages/AddLocationPage/AddLocationPage.tsx index 42695ccd6d..e7d736302f 100644 --- a/web/src/pages/AddLocationPage/AddLocationPage.tsx +++ b/web/src/pages/AddLocationPage/AddLocationPage.tsx @@ -1,6 +1,10 @@ import { useNavigate } from '@tanstack/react-router'; -import { type ReactNode, useMemo } from 'react'; -import type { WizardPageStep } from '../../shared/components/wizard/types'; +import { type ReactNode, useCallback, useMemo } from 'react'; +import type { + WizardPageStep, + WizardWelcomePageConfig, +} from '../../shared/components/wizard/types'; +import { WizardCoverImage } from '../../shared/components/wizard/WizardCoverImage/WizardCoverImage'; import { WizardPage } from '../../shared/components/wizard/WizardPage/WizardPage'; import { AddLocationAccessStep } from './steps/AddLocationAccessStep'; import { AddLocationFirewallStep } from './steps/AddLocationFirewallStep'; @@ -9,6 +13,7 @@ import { AddLocationMfaStep } from './steps/AddLocationMfaStep'; import { AddLocationNetworkStep } from './steps/AddLocationNetworkStep'; import { AddLocationServiceStep } from './steps/AddLocationServiceStep'; import { AddLocationStartStep } from './steps/AddLocationStartStep'; +import { AddLocationWelcomeStep } from './steps/AddLocationWelcomeStep'; import { AddLocationPageStep, type AddLocationPageStepValue } from './types'; import { useAddLocationStore } from './useAddLocationStore'; @@ -16,6 +21,29 @@ export const AddLocationPage = () => { const navigate = useNavigate(); const activeStep = useAddLocationStore((s) => s.activeStep); const locationType = useAddLocationStore((s) => s.locationType); + const isWelcome = useAddLocationStore((s) => s.isWelcome); + + const onClose = useCallback(() => { + navigate({ + to: '/locations', + }).then(() => { + setTimeout(() => { + useAddLocationStore.getState().reset(); + }, 100); + }); + }, [navigate]); + + const welcomeConfig = useMemo( + (): WizardWelcomePageConfig => ({ + title: 'Add new location', + subtitle: `Welcome! Let's set up a new location to organize users, manage access, and connect gateways for activity tracking and monitoring.`, + content: , + displayDocs: false, + media: , + onClose, + }), + [onClose], + ); const stepsConfig = useMemo( (): Record => ({ @@ -88,20 +116,14 @@ export const AddLocationPage = () => { return ( { - navigate({ - to: '/locations', - }).then(() => { - setTimeout(() => { - useAddLocationStore.getState().reset(); - }, 100); - }); - }} + onClose={onClose} subtitle="Welcome! Let's set up a new location to organize users, manage access, and connect gateways for activity tracking and monitoring." title="Create new location" steps={stepsConfig} id="add-location-wizard" + welcomePageConfig={welcomeConfig} > {stepsComponents[activeStep]} diff --git a/web/src/pages/AddLocationPage/steps/AddLocationStartStep.tsx b/web/src/pages/AddLocationPage/steps/AddLocationStartStep.tsx index 2858866cdd..0f17dfd3d0 100644 --- a/web/src/pages/AddLocationPage/steps/AddLocationStartStep.tsx +++ b/web/src/pages/AddLocationPage/steps/AddLocationStartStep.tsx @@ -83,6 +83,13 @@ export const AddLocationStartStep = () => { {(field) => } +