feat(system/upgrade): add get license dialog [EE-4743] (#8249)

app/react/sidebar/UpgradeBEBanner/GetLicenseDialog.tsx

@@ -0,0 +1,35 @@
+import { HubspotForm } from '@@/HubspotForm';
+import { Modal } from '@@/modals/Modal';
+
+export function GetLicenseDialog({
+  onDismiss,
+  goToUploadLicense,
+}: {
+  onDismiss: () => void;
+  goToUploadLicense: (isSubmitted: boolean) => void;
+}) {
+  // form is loaded from hubspot, so it won't have the same styling as the rest of the app
+  // since it won't support darkmode, we enforce a white background and black text for the components we use
+  // (Modal, CloseButton, loading text)
+
+  return (
+    <Modal
+      onDismiss={onDismiss}
+      aria-label="Upgrade Portainer to Business Edition"
+      size="lg"
+      className="!bg-white [&>.close-button]:!text-black"
+    >
+      <Modal.Body>
+        <div className="max-h-[80vh] overflow-auto">
+          <HubspotForm
+            region="na1"
+            portalId="4731999"
+            formId="1ef8ea88-3e03-46c5-8aef-c1d9f48fd06b"
+            onSubmitted={() => goToUploadLicense(true)}
+            loading={<div className="text-black">Loading...</div>}
+          />
+        </div>
+      </Modal.Body>
+    </Modal>
+  );
+}

app/react/sidebar/UpgradeBEBanner/UpgradeDialog.tsx

@@ -5,13 +5,14 @@ import { useUser } from '@/react/hooks/useUser';
 import { UploadLicenseDialog } from './UploadLicenseDialog';
 import { LoadingDialog } from './LoadingDialog';
 import { NonAdminUpgradeDialog } from './NonAdminUpgradeDialog';
+import { GetLicenseDialog } from './GetLicenseDialog';
 
 type Step = 'uploadLicense' | 'loading' | 'getLicense';
 
 export function UpgradeDialog({ onDismiss }: { onDismiss: () => void }) {
   const { isAdmin } = useUser();
   const [currentStep, setCurrentStep] = useState<Step>('uploadLicense');
-
+  const [isGetLicenseSubmitted, setIsGetLicenseSubmitted] = useState(false);
   const component = getDialog();
 
   return component;
@@ -23,13 +24,22 @@ export function UpgradeDialog({ onDismiss }: { onDismiss: () => void }) {
 
     switch (currentStep) {
       case 'getLicense':
-        throw new Error('Not implemented');
-      // return <GetLicense setCurrentStep={setCurrentStep} />;
+        return (
+          <GetLicenseDialog
+            goToUploadLicense={(isSubmitted) => {
+              setCurrentStep('uploadLicense');
+              setIsGetLicenseSubmitted(isSubmitted);
+            }}
+            onDismiss={onDismiss}
+          />
+        );
       case 'uploadLicense':
         return (
           <UploadLicenseDialog
             goToLoading={() => setCurrentStep('loading')}
             onDismiss={onDismiss}
+            goToGetLicense={() => setCurrentStep('getLicense')}
+            isGetLicenseSubmitted={isGetLicenseSubmitted}
           />
         );
       case 'loading':

app/react/sidebar/UpgradeBEBanner/UploadLicenseDialog.tsx

@@ -1,6 +1,5 @@
 import { Field, Form, Formik } from 'formik';
 import { object, SchemaOf, string } from 'yup';
-import { ExternalLink } from 'lucide-react';
 
 import { useUpgradeEditionMutation } from '@/react/portainer/system/useUpgradeEditionMutation';
 import { notifySuccess } from '@/portainer/services/notifications';
@@ -9,6 +8,7 @@ import { Button, LoadingButton } from '@@/buttons';
 import { FormControl } from '@@/form-components/FormControl';
 import { Input } from '@@/form-components/Input';
 import { Modal } from '@@/modals/Modal';
+import { Alert } from '@@/Alert';
 
 interface FormValues {
   license: string;
@@ -21,9 +21,13 @@ const initialValues: FormValues = {
 export function UploadLicenseDialog({
   onDismiss,
   goToLoading,
+  goToGetLicense,
+  isGetLicenseSubmitted,
 }: {
   onDismiss: () => void;
   goToLoading: () => void;
+  goToGetLicense: () => void;
+  isGetLicenseSubmitted: boolean;
 }) {
   const upgradeMutation = useUpgradeEditionMutation();
 
@@ -44,9 +48,19 @@ export function UploadLicenseDialog({
         {({ errors }) => (
           <Form noValidate>
             <Modal.Body>
-              <p className="font-semibold text-gray-7">
-                Please enter your Portainer License below
-              </p>
+              {!isGetLicenseSubmitted ? (
+                <p className="font-semibold text-gray-7">
+                  Please enter your Portainer License below
+                </p>
+              ) : (
+                <div className="mb-4">
+                  <Alert color="success" title="License successfully sent">
+                    Please check your email and copy your license into the field
+                    below to upgrade Portainer.
+                  </Alert>
+                </div>
+              )}
+
               <FormControl
                 label="License"
                 errors={errors.license}
@@ -58,21 +72,14 @@ export function UploadLicenseDialog({
             </Modal.Body>
             <Modal.Footer>
               <div className="flex gap-2 [&>*]:w-1/2 w-full">
-                <a
-                  href="https://www.portainer.io/pricing"
-                  target="_blank"
-                  rel="noreferrer"
-                  className="no-link"
+                <Button
+                  color="default"
+                  size="medium"
+                  className="w-full"
+                  onClick={goToGetLicense}
                 >
-                  <Button
-                    color="default"
-                    size="medium"
-                    className="w-full"
-                    icon={ExternalLink}
-                  >
-                    Get a license
-                  </Button>
-                </a>
+                  Get a license
+                </Button>
                 <LoadingButton
                   color="primary"
                   size="medium"