feat: add support for freemium license

arunjaindev · arunjaindev · commit ca2acd1577b4 · 2025-08-13T14:18:00.000+05:30
diff --git a/src/Shared/Components/GenericModal/constants.ts b/src/Shared/Components/GenericModal/constants.ts
@@ -17,6 +17,7 @@
 import { GenericModalProps } from './types'
 
 export const MODAL_WIDTH_TO_CLASS_NAME_MAP: Record<GenericModalProps['width'], string> = {
+    450: 'w-450',
     500: 'w-500',
     600: 'w-600',
     800: 'w-800',
diff --git a/src/Shared/Components/GenericModal/types.ts b/src/Shared/Components/GenericModal/types.ts
@@ -28,7 +28,7 @@ export interface GenericModalProps extends Partial<Pick<BackdropProps, 'onEscape
      * Width of the modal (in pixels).
      * @default 600
      */
-    width?: 500 | 600 | 800
+    width?: 450 | 500 | 600 | 800
     /**
      * Determines if the modal should close when the user clicks outside of it (on the backdrop).
      * @default false
diff --git a/src/Shared/Components/Header/HelpButton.tsx b/src/Shared/Components/Header/HelpButton.tsx
@@ -148,7 +148,7 @@ export const HelpButton = ({ serverInfo, fetchingServerInfo, onClick, hideGettin
                 alignment="end"
                 width={220}
                 options={getHelpActionMenuOptions({
-                    isTrial: licenseData?.isTrial ?? false,
+                    isTrialOrFreemium: (licenseData?.isTrial || licenseData?.isFreemium) ?? false,
                     isEnterprise,
                 })}
                 onClick={handleActionMenuClick}
diff --git a/src/Shared/Components/Header/utils.ts b/src/Shared/Components/Header/utils.ts
@@ -44,10 +44,10 @@ export const setActionWithExpiry = (key: string, days: number): void => {
 
 export const getHelpActionMenuOptions = ({
     isEnterprise,
-    isTrial,
+    isTrialOrFreemium,
 }: {
     isEnterprise: boolean
-    isTrial: boolean
+    isTrialOrFreemium: boolean
 }): HelpButtonActionMenuProps['options'] => [
     {
         items: COMMON_HELP_ACTION_MENU_ITEMS,
@@ -56,7 +56,9 @@ export const getHelpActionMenuOptions = ({
         ? [
               {
                   groupLabel: 'Enterprise Support',
-                  items: isTrial ? ENTERPRISE_TRIAL_HELP_ACTION_MENU_ITEMS : ENTERPRISE_HELP_ACTION_MENU_ITEMS,
+                  items: isTrialOrFreemium
+                      ? ENTERPRISE_TRIAL_HELP_ACTION_MENU_ITEMS
+                      : ENTERPRISE_HELP_ACTION_MENU_ITEMS,
               },
           ]
         : [
diff --git a/src/Shared/Components/License/DevtronLicenseCard.tsx b/src/Shared/Components/License/DevtronLicenseCard.tsx
@@ -23,6 +23,7 @@ import { ClipboardButton, getTTLInHumanReadableFormat } from '@Common/index'
 import { CONTACT_SUPPORT_LINK, ENTERPRISE_SUPPORT_LINK } from '@Shared/constants'
 import { AppThemeType } from '@Shared/Providers'
 import { getThemeOppositeThemeClass } from '@Shared/Providers/ThemeProvider/utils'
+import { LicensingErrorCodes } from '@Shared/types'
 
 import { Button, ButtonComponentType, ButtonVariantType } from '../Button'
 import { Icon } from '../Icon'
@@ -33,21 +34,85 @@ import './licenseCard.scss'
 
 const DAMPEN_FACTOR = 50
 
+const LicenseCardSubText = ({
+    isFreemium,
+    licenseStatus,
+    licenseStatusError,
+}: Pick<DevtronLicenseCardProps, 'isFreemium' | 'licenseStatus' | 'licenseStatusError'>) => {
+    if (licenseStatus === LicenseStatus.ACTIVE && !isFreemium) {
+        return null
+    }
+
+    const isLicenseValid = licenseStatus !== LicenseStatus.EXPIRED && !licenseStatusError
+    const freemiumLimitReached = licenseStatusError?.code === LicensingErrorCodes.ClusterLimitExceeded
+
+    return licenseStatus !== LicenseStatus.ACTIVE ? (
+        <div className="p-16 fs-13 lh-1-5 flexbox-col dc__gap-8">
+            <div className="flexbox dc__gap-8">
+                {freemiumLimitReached ? (
+                    <div className="flexbox-col dc__gap-4 fs-13 fw-4 lh-20 cn-9">
+                        <span className="fw-6">Multiple Clusters Detected</span>
+                        <span>
+                            Your account is connected to multiple clusters, which isn’t allowed on the freemium plan.
+                            Upgrade to an Enterprise license or contact us.
+                        </span>
+                    </div>
+                ) : (
+                    <span>
+                        To renew your license mail us at&nbsp;
+                        <a href={`mailto:${ENTERPRISE_SUPPORT_LINK}`}>{ENTERPRISE_SUPPORT_LINK}</a> or contact your
+                        Devtron representative.
+                    </span>
+                )}
+                <Icon
+                    name={isLicenseValid ? 'ic-timer' : 'ic-error'}
+                    color={isLicenseValid ? 'Y500' : 'R500'}
+                    size={16}
+                />
+            </div>
+            {freemiumLimitReached && (
+                <Button
+                    dataTestId="mail-support"
+                    startIcon={<Icon name="ic-email" color={null} />}
+                    text={ENTERPRISE_SUPPORT_LINK}
+                    variant={ButtonVariantType.text}
+                    component={ButtonComponentType.anchor}
+                    anchorProps={{ href: `mailto:${ENTERPRISE_SUPPORT_LINK}` }}
+                />
+            )}
+            <Button
+                dataTestId="contact-support"
+                startIcon={<ICChatSupport />}
+                text="Contact support"
+                variant={ButtonVariantType.text}
+                component={ButtonComponentType.anchor}
+                anchorProps={{ href: CONTACT_SUPPORT_LINK }}
+            />
+        </div>
+    ) : (
+        <div className="flexbox p-16 cn-9 fw-6 fs-13 lh-1-5 dc__align-items-center dc__content-space">
+            <span>Unlimited single cluster usage</span>
+            <Icon name="ic-success" size={20} color={null} />
+        </div>
+    )
+}
+
 export const DevtronLicenseCard = ({
     enterpriseName,
     licenseKey,
     licenseSuffix,
     expiryDate,
     licenseStatus,
     isTrial,
+    isFreemium,
     ttl,
     appTheme,
     handleCopySuccess,
+    licenseStatusError,
 }: DevtronLicenseCardProps) => {
     const { bgColor, textColor } = getLicenseColorsAccordingToStatus(licenseStatus)
     const remainingTime = getTTLInHumanReadableFormat(ttl)
     const remainingTimeString = ttl < 0 ? `Expired ${remainingTime} ago` : `${remainingTime} remaining`
-    const isLicenseValid = licenseStatus !== LicenseStatus.EXPIRED
     const isThemeDark = appTheme === AppThemeType.dark
 
     const cardRef = useRef<HTMLDivElement>(null)
@@ -130,43 +195,30 @@ export const DevtronLicenseCard = ({
                                 )}
                             </div>
                             <div className="flexbox dc__align-items-center dc__gap-4 flex-wrap fs-12">
-                                <span className="font-ibm-plex-mono cn-9">{expiryDate}</span>
-                                <span className="cn-9">·</span>
-                                <span style={{ color: textColor }}>{remainingTimeString}</span>
+                                <span className="font-ibm-plex-mono cn-9">
+                                    {isFreemium ? 'VALID FOREVER' : expiryDate}
+                                </span>
+                                {!isFreemium && (
+                                    <>
+                                        <span className="cn-9">·</span>
+                                        <span style={{ color: textColor }}>{remainingTimeString}</span>
+                                    </>
+                                )}
                             </div>
                         </div>
                     </div>
-                    {isTrial && (
+                    {(isTrial || isFreemium) && (
                         <span className="trial-license-badge flexbox dc__align-items-center px-20 py-6 cn-9 fs-11 fw-5 lh-1-5 dc__zi-2">
-                            TRIAL LICENSE
+                            {isFreemium ? 'FREEMIUM' : 'TRIAL'} LICENSE
                         </span>
                     )}
                 </motion.div>
             </div>
-            {licenseStatus !== LicenseStatus.ACTIVE && (
-                <div className="p-16 fs-13 lh-1-5 flexbox-col dc__gap-8">
-                    <div className="flexbox dc__gap-8">
-                        <span>
-                            To renew your license mail us at&nbsp;
-                            <a href={`mailto:${ENTERPRISE_SUPPORT_LINK}`}>{ENTERPRISE_SUPPORT_LINK}</a> or contact your
-                            Devtron representative.
-                        </span>
-                        <Icon
-                            name={isLicenseValid ? 'ic-timer' : 'ic-error'}
-                            color={isLicenseValid ? 'Y500' : 'R500'}
-                            size={16}
-                        />
-                    </div>
-                    <Button
-                        dataTestId="contact-support"
-                        startIcon={<ICChatSupport />}
-                        text="Contact support"
-                        variant={ButtonVariantType.text}
-                        component={ButtonComponentType.anchor}
-                        anchorProps={{ href: CONTACT_SUPPORT_LINK }}
-                    />
-                </div>
-            )}
+            <LicenseCardSubText
+                isFreemium={isFreemium}
+                licenseStatusError={licenseStatusError}
+                licenseStatus={licenseStatus}
+            />
         </div>
     )
 }
diff --git a/src/Shared/Components/License/types.ts b/src/Shared/Components/License/types.ts
@@ -15,7 +15,7 @@
  */
 
 import { AppThemeType } from '@Shared/Providers'
-import { DevtronLicenseBaseDTO, DevtronLicenseDTO } from '@Shared/types'
+import { DevtronLicenseBaseDTO, DevtronLicenseDTO, LicenseErrorStruct } from '@Shared/types'
 
 export enum LicenseStatus {
     ACTIVE = 'ACTIVE',
@@ -29,7 +29,9 @@ export type DevtronLicenseCardProps = {
     ttl: number
     licenseStatus: LicenseStatus
     isTrial: boolean
+    isFreemium: boolean
     appTheme: AppThemeType
+    licenseStatusError: LicenseErrorStruct
 } & (
     | {
           licenseKey: string
diff --git a/src/Shared/Components/License/utils.tsx b/src/Shared/Components/License/utils.tsx
@@ -54,15 +54,26 @@ export const parseDevtronLicenseDTOIntoLicenseCardData = <isCentralDashboard ext
     licenseDTO: DevtronLicenseDTO<isCentralDashboard>,
     currentUserEmail?: isCentralDashboard extends true ? string : never,
 ): Omit<DevtronLicenseCardProps, 'appTheme'> => {
-    const { isTrial, expiry, ttl, reminderThreshold, organisationMetadata, license, claimedByUserDetails } =
-        licenseDTO || {}
+    const {
+        isTrial,
+        expiry,
+        ttl,
+        reminderThreshold,
+        organisationMetadata,
+        license,
+        claimedByUserDetails,
+        isFreemium,
+        licenseStatusError,
+    } = licenseDTO || {}
 
     return {
         enterpriseName: organisationMetadata?.name || 'Devtron Enterprise',
         expiryDate: expiry ? moment(expiry).format(DATE_TIME_FORMATS['DD/MM/YYYY']) : '',
         ttl,
         licenseStatus: getDevtronLicenseStatus({ ttl, reminderThreshold }),
         isTrial,
+        isFreemium,
+        licenseStatusError,
         ...(currentUserEmail && currentUserEmail === claimedByUserDetails?.email
             ? { licenseKey: license }
             : { licenseSuffix: license }),
diff --git a/src/Shared/types.ts b/src/Shared/types.ts
@@ -1099,6 +1099,7 @@ export enum LicensingErrorCodes {
     LicKeyMismatch = '11006',
     NoCertFound = '11007',
     LicKeyNotFound = '11008',
+    ClusterLimitExceeded = '11011',
 }
 
 export interface LicenseErrorStruct {
@@ -1109,6 +1110,7 @@ export interface LicenseErrorStruct {
 export interface DevtronLicenseBaseDTO {
     fingerprint: string | null
     isTrial: boolean | null
+    isFreemium: boolean | null
     /**
      * In timestamp format
      */
