feat: refactor DevtronLicenseCard component and introduce types for license management

Author: AbhishekA1509

src/Shared/Components/DevtronLicenseCard/DevtronLicenseCard.tsx

@@ -1,9 +1,10 @@
 import { ClipboardButton, getTTLInHumanReadableFormat } from '@Common/index'
 import { ReactComponent as ICChatSupport } from '@IconsV2/ic-chat-circle-dots.svg'
-import { DevtronLicenseCardProps, ENTERPRISE_SUPPORT_LINK, LicenseStatus } from '@Shared/index'
+import { ENTERPRISE_SUPPORT_LINK } from '@Shared/index'
 import { Button, ButtonVariantType } from '../Button'
 import { Icon } from '../Icon'
 import { getLicenseColorsAccordingToStatus } from './utils'
+import { DevtronLicenseCardProps, LicenseStatus } from './types'
 import './licenseCard.scss'
 
 export const DevtronLicenseCard = ({

src/Shared/Components/DevtronLicenseCard/index.tsx

@@ -1 +1,3 @@
 export { default as DevtronLicenseCard } from './DevtronLicenseCard'
+export { parseDevtronLicenseDTOIntoLicenseCardData } from './utils'
+export * from './types'

src/Shared/Components/DevtronLicenseCard/types.ts

@@ -0,0 +1,22 @@
+export enum LicenseStatus {
+    ACTIVE = 'ACTIVE',
+    EXPIRED = 'EXPIRED',
+    REMINDER_THRESHOLD_REACHED = 'REMINDER_THRESHOLD_REACHED',
+}
+
+export type DevtronLicenseCardProps = {
+    enterpriseName: string
+    expiryDate: string
+    ttl: number
+    licenseStatus: LicenseStatus
+    isTrial: boolean
+} & (
+    | {
+          licenseKey: string
+          licenseSuffix?: never
+      }
+    | {
+          licenseKey?: never
+          licenseSuffix: string
+      }
+)

src/Shared/Components/DevtronLicenseCard/utils.tsx

@@ -1,4 +1,6 @@
-import { LicenseStatus } from '@Shared/index'
+import moment from 'moment'
+import { DATE_TIME_FORMATS } from '@Common/Constants'
+import { DevtronLicenseCardProps, DevtronLicenseDTO, LicenseStatus } from '@Shared/index'
 
 export const getLicenseColorsAccordingToStatus = (
     licenseStatus: LicenseStatus,
@@ -12,3 +14,35 @@ export const getLicenseColorsAccordingToStatus = (
             return { bgColor: 'var(--R100)', textColor: 'var(--R500)' }
     }
 }
+
+const getDevtronLicenseStatus = ({
+    ttl,
+    reminderThreshold,
+}: Pick<DevtronLicenseDTO, 'ttl' | 'reminderThreshold'>): LicenseStatus => {
+    if (ttl < 0) {
+        return LicenseStatus.EXPIRED
+    }
+
+    if (ttl < reminderThreshold * 24 * 60 * 60) {
+        return LicenseStatus.REMINDER_THRESHOLD_REACHED
+    }
+
+    return LicenseStatus.ACTIVE
+}
+
+export const parseDevtronLicenseDTOIntoLicenseCardData = <isCentralDashboard extends boolean = false>(
+    licenseDTO: DevtronLicenseDTO<isCentralDashboard>,
+    currentUserEmail?: isCentralDashboard extends true ? string : never,
+): DevtronLicenseCardProps => {
+    const { isTrial, expiry, ttl, reminderThreshold, organisationMetadata, license, claimedByUserDetails } =
+        licenseDTO || {}
+
+    return {
+        enterpriseName: organisationMetadata?.name || '',
+        expiryDate: expiry ? moment(expiry).format(DATE_TIME_FORMATS['DD/MM/YYYY']) : '',
+        ttl,
+        licenseStatus: getDevtronLicenseStatus({ ttl, reminderThreshold }),
+        isTrial,
+        ...(currentUserEmail === claimedByUserDetails?.email ? { licenseKey: license } : { licenseSuffix: license }),
+    }
+}

src/Shared/Helpers.tsx

@@ -51,12 +51,9 @@ import {
 import {
     AggregationKeys,
     BorderConfigType,
-    DevtronLicenseCardProps,
-    DevtronLicenseDTO,
     GitTriggers,
     IntersectionChangeHandler,
     IntersectionOptions,
-    LicenseStatus,
     Nodes,
     PreventOutsideFocusProps,
     TargetPlatformItemDTO,
@@ -1070,38 +1067,6 @@ export const deriveBorderRadiusAndBorderClassFromConfig = ({
 export const getClassNameForStickyHeaderWithShadow = (isStuck: boolean, topClassName = 'dc__top-0') =>
     `dc__position-sticky ${topClassName} dc__transition--box-shadow ${isStuck ? 'dc__box-shadow--header' : ''}`
 
-const getDevtronLicenseStatus = ({
-    ttl,
-    reminderThreshold,
-}: Pick<DevtronLicenseDTO, 'ttl' | 'reminderThreshold'>): LicenseStatus => {
-    if (ttl < 0) {
-        return LicenseStatus.EXPIRED
-    }
-
-    if (ttl < reminderThreshold * 24 * 60 * 60) {
-        return LicenseStatus.REMINDER_THRESHOLD_REACHED
-    }
-
-    return LicenseStatus.ACTIVE
-}
-
-export const parseDevtronLicenseDTOIntoLicenseCardData = <isCentralDashboard extends boolean = false>(
-    licenseDTO: DevtronLicenseDTO<isCentralDashboard>,
-    currentUserEmail?: isCentralDashboard extends true ? string : never,
-): DevtronLicenseCardProps => {
-    const { isTrial, expiry, ttl, reminderThreshold, organisationMetadata, license, claimedByUserDetails } =
-        licenseDTO || {}
-
-    return {
-        enterpriseName: organisationMetadata?.name || '',
-        expiryDate: expiry ? moment(expiry).format(DATE_TIME_FORMATS['DD/MM/YYYY']) : '',
-        ttl,
-        licenseStatus: getDevtronLicenseStatus({ ttl, reminderThreshold }),
-        isTrial,
-        ...(currentUserEmail === claimedByUserDetails?.email ? { licenseKey: license } : { licenseSuffix: license }),
-    }
-}
-
 export const clearCookieOnLogout = () => {
     document.cookie = `${TOKEN_COOKIE_NAME}=; expires=Thu, 01-Jan-1970 00:00:01 GMT;path=/`
 }

src/Shared/types.ts

@@ -1070,26 +1070,3 @@ export type DevtronLicenseDTO<isCentralDashboard extends boolean = false> = Devt
           })
 
 export type CountryISO2Type = ParsedCountry['iso2']
-
-export enum LicenseStatus {
-    ACTIVE = 'ACTIVE',
-    EXPIRED = 'EXPIRED',
-    REMINDER_THRESHOLD_REACHED = 'REMINDER_THRESHOLD_REACHED',
-}
-
-export type DevtronLicenseCardProps = {
-    enterpriseName: string
-    expiryDate: string
-    ttl: number
-    licenseStatus: LicenseStatus
-    isTrial: boolean
-} & (
-    | {
-          licenseKey: string
-          licenseSuffix?: never
-      }
-    | {
-          licenseKey?: never
-          licenseSuffix: string
-      }
-)