|
| 1 | +import { ClipboardButton, DOCUMENTATION_HOME_PAGE } from '@Common/index' |
| 2 | +import { ReactComponent as ICChatSupport } from '@IconsV2/ic-chat-circle-dots.svg' |
| 3 | +import { Icon } from '../Icon' |
| 4 | +import { Button, ButtonStyleType, ButtonVariantType } from '../Button' |
| 5 | +import { InfoIconTippy } from '../InfoIconTippy' |
| 6 | +import './licenseInfoDialog.scss' |
| 7 | + |
| 8 | +export enum LicenseStatus { |
| 9 | + ACTIVE = 'ACTIVE', |
| 10 | + EXPIRED = 'EXPIRED', |
| 11 | + REMINDER_THRESHOLD_REACHED = 'REMINDER_THRESHOLD_REACHED', |
| 12 | +} |
| 13 | + |
| 14 | +export type DevtronLicenseCardProps = { |
| 15 | + enterpriseName: string |
| 16 | + expiryDate: string |
| 17 | + ttl: number |
| 18 | + licenseStatus: LicenseStatus |
| 19 | + isTrial: boolean |
| 20 | +} & ( |
| 21 | + | { |
| 22 | + licenseKey: string |
| 23 | + licenseSuffix?: never |
| 24 | + } |
| 25 | + | { |
| 26 | + licenseKey?: never |
| 27 | + licenseSuffix: string |
| 28 | + } |
| 29 | +) |
| 30 | + |
| 31 | +export const getColorAccordingToStatus = (licenseStatus: LicenseStatus) => { |
| 32 | + switch (licenseStatus) { |
| 33 | + case LicenseStatus.ACTIVE: |
| 34 | + return 'var(--G100)' |
| 35 | + case LicenseStatus.REMINDER_THRESHOLD_REACHED: |
| 36 | + return 'var(--Y100)' |
| 37 | + default: |
| 38 | + return 'var(--R100)' |
| 39 | + } |
| 40 | +} |
| 41 | + |
| 42 | +export const DevtronLicenseCard = ({ |
| 43 | + enterpriseName, |
| 44 | + licenseKey, |
| 45 | + licenseSuffix, |
| 46 | + expiryDate, |
| 47 | + licenseStatus, |
| 48 | + isTrial, |
| 49 | + ttl, |
| 50 | +}: DevtronLicenseCardProps) => { |
| 51 | + const colorValue = getColorAccordingToStatus(licenseStatus) |
| 52 | + |
| 53 | + return ( |
| 54 | + <div className="flexbox-col p-8 br-16" style={{ backgroundColor: colorValue }}> |
| 55 | + <div className="license-card flexbox-col dc__content-space br-12 p-20 h-200 bg__tertiary"> |
| 56 | + <div className="flexbox dc__align-items-center dc__content-space"> |
| 57 | + <span className="font-merriweather cn-9 fs-16 fw-7 lh-1-5">{enterpriseName}</span> |
| 58 | + <Icon name="ic-devtron" color="N900" size={24} /> |
| 59 | + </div> |
| 60 | + <div className="flexbox-col dc__gap-4"> |
| 61 | + <div className="flexbox dc__align-items-center dc__gap-6"> |
| 62 | + <Icon name="ic-key" color={null} size={20} /> |
| 63 | + <div className="flex dc__gap-4 cn-7 fs-16 fw-5 lh-1-5 font-ibm-plex-mono"> |
| 64 | + <span>••••</span> |
| 65 | + <span>{licenseSuffix || licenseKey.slice(-8)}</span> |
| 66 | + </div> |
| 67 | + {licenseKey && <ClipboardButton content={licenseKey} />} |
| 68 | + </div> |
| 69 | + <div className="flexbox dc__align-items-center dc__gap-4"> |
| 70 | + <span>{expiryDate}</span> |
| 71 | + <span>•</span> |
| 72 | + <span style={{ color: colorValue }}>2 months remaining</span> |
| 73 | + </div> |
| 74 | + </div> |
| 75 | + {isTrial && <div className="flexbox dc__align-items-center px-20 py-6">TRIAL LICENSE</div>} |
| 76 | + </div> |
| 77 | + {licenseStatus !== LicenseStatus.ACTIVE && ( |
| 78 | + <div className="p-16 flexbox-col dc__gap-8"> |
| 79 | + <div className="flexbox dc__gap-8"> |
| 80 | + <span> |
| 81 | + {/* TODO: Confirm with product team */} |
| 82 | + To renew your license mail us at enterprise@devtron.ai or contact your Devtron |
| 83 | + representative. |
| 84 | + </span> |
| 85 | + <Icon name="ic-timer" color="Y500" size={16} /> |
| 86 | + </div> |
| 87 | + <Button |
| 88 | + dataTestId="contact-support" |
| 89 | + startIcon={<ICChatSupport />} |
| 90 | + text="Contact support" |
| 91 | + variant={ButtonVariantType.text} |
| 92 | + /> |
| 93 | + </div> |
| 94 | + )} |
| 95 | + </div> |
| 96 | + ) |
| 97 | +} |
| 98 | + |
| 99 | +export const InstallationFingerprintInfo = ({ |
| 100 | + installationFingerprint, |
| 101 | + showHelpTip = false, |
| 102 | +}: { |
| 103 | + installationFingerprint: string |
| 104 | + showHelpTip?: boolean |
| 105 | +}) => ( |
| 106 | + <div className="flexbox-col dc__gap-6"> |
| 107 | + <div className="flexbox dc__align-items-center dc__gap-4"> |
| 108 | + <span className="fs-13 lh-20 cn-7 fw-4">Installation Fingerprint</span> |
| 109 | + {showHelpTip && ( |
| 110 | + <InfoIconTippy |
| 111 | + heading="Installation Fingerprint" |
| 112 | + infoText="A unique fingerprint to identify your Devtron Installation. An enterprise license is generated against an installation fingerprint." |
| 113 | + documentationLinkText="Documentation" |
| 114 | + iconClassName="icon-dim-20 fcn-6" |
| 115 | + placement="right" |
| 116 | + documentationLink={DOCUMENTATION_HOME_PAGE} |
| 117 | + /> |
| 118 | + )} |
| 119 | + </div> |
| 120 | + <div className="flex dc__content-space"> |
| 121 | + <span className="cn-9 fs-13 lh-1-5 fw-4">{installationFingerprint}</span> |
| 122 | + <ClipboardButton content={installationFingerprint} /> |
| 123 | + </div> |
| 124 | + </div> |
| 125 | +) |
| 126 | + |
| 127 | +export const LicenseInfo = ({ handleUpdateLicenseClick }: { handleUpdateLicenseClick: () => void }) => ( |
| 128 | + <div className="flexbox-col dc__gap-20"> |
| 129 | + <DevtronLicenseCard |
| 130 | + enterpriseName="BharatPe" |
| 131 | + licenseSuffix="4AF593V3" |
| 132 | + ttl={100} |
| 133 | + licenseStatus={LicenseStatus.ACTIVE} |
| 134 | + isTrial |
| 135 | + expiryDate="2025-05-17" |
| 136 | + /> |
| 137 | + <InstallationFingerprintInfo installationFingerprint="3ff0d8be-e7f2-4bf4-9c3f-70ec904b51f4" showHelpTip /> |
| 138 | + <div className="border__primary--bottom h-1" /> |
| 139 | + <div className="flex dc__content-space"> |
| 140 | + <span>Have a new license?</span> |
| 141 | + <Button |
| 142 | + dataTestId="update-license" |
| 143 | + text="Update license" |
| 144 | + variant={ButtonVariantType.text} |
| 145 | + onClick={handleUpdateLicenseClick} |
| 146 | + /> |
| 147 | + </div> |
| 148 | + </div> |
| 149 | +) |
| 150 | + |
| 151 | +export const AboutDevtron = () => ( |
| 152 | + <div className="flexbox-col dc__align-items-center dc__gap-20"> |
| 153 | + <div className="flex p-6 border__primary br-8"> |
| 154 | + <Icon name="ic-devtron" color="B500" size={40} /> |
| 155 | + </div> |
| 156 | + <div className="text-center"> |
| 157 | + <p className="fs-16 cn-9 fw-6 lh-1-5 m-0">Devtron</p> |
| 158 | + {/* TODO: add version */} |
| 159 | + <p className="fs-13 cn-7 fw-4 lh-20 m-0">Enterprise Version (1.3.1)</p> |
| 160 | + </div> |
| 161 | + <p className="fs-13 cn-5 fw-4 lh-20 m-0">Copyright © 2025 Devtron Inc. All rights reserved.</p> |
| 162 | + {/* TODO: add links for all button below */} |
| 163 | + <div className="flexbox dc__align-items-center dc__gap-6"> |
| 164 | + <Button |
| 165 | + dataTestId="terms-of-service" |
| 166 | + text="Terms of service" |
| 167 | + variant={ButtonVariantType.text} |
| 168 | + style={ButtonStyleType.neutral} |
| 169 | + /> |
| 170 | + <span>•</span> |
| 171 | + <Button |
| 172 | + dataTestId="privacy-policy" |
| 173 | + text="Privacy policy" |
| 174 | + variant={ButtonVariantType.text} |
| 175 | + style={ButtonStyleType.neutral} |
| 176 | + /> |
| 177 | + <span>•</span> |
| 178 | + <Button |
| 179 | + dataTestId="license-agreement" |
| 180 | + text="License agreement" |
| 181 | + variant={ButtonVariantType.text} |
| 182 | + style={ButtonStyleType.neutral} |
| 183 | + /> |
| 184 | + </div> |
| 185 | + </div> |
| 186 | +) |
0 commit comments