|
| 1 | +import { ChangeEvent, SyntheticEvent, useState } from 'react' |
| 2 | +import { ReactComponent as ICCross } from '@Icons/ic-cross.svg' |
| 3 | +import { |
| 4 | + ActivateLicenseDialogProps, |
| 5 | + Button, |
| 6 | + ButtonStyleType, |
| 7 | + ButtonVariantType, |
| 8 | + getHandleOpenURL, |
| 9 | + handleSendAnalyticsEventToServer, |
| 10 | + InstallationFingerprintInfo, |
| 11 | + requiredField, |
| 12 | + ServerAnalyticsEventType, |
| 13 | + Textarea, |
| 14 | + ToastManager, |
| 15 | + ToastVariantType, |
| 16 | +} from '@Shared/index' |
| 17 | +import { API_STATUS_CODES } from '@Common/Constants' |
| 18 | +import { showError } from '@Common/index' |
| 19 | +import { getGateKeeperUrl } from './utils' |
| 20 | +import { activateLicense } from './services' |
| 21 | +import { GatekeeperQRDialog, ICDevtronWithBorder } from './License.components' |
| 22 | + |
| 23 | +const ActivateLicenseDialog = ({ |
| 24 | + fingerprint, |
| 25 | + enterpriseName, |
| 26 | + handleClose, |
| 27 | + handleLicenseActivateSuccess, |
| 28 | +}: ActivateLicenseDialogProps) => { |
| 29 | + const [showQRDialog, setShowQRDialog] = useState<boolean>(false) |
| 30 | + const [licenseKey, setLicenseKey] = useState<string>('') |
| 31 | + const [activatingLicense, setActivatingLicense] = useState<boolean>(false) |
| 32 | + const [error, setError] = useState<string>('') |
| 33 | + |
| 34 | + const handleGetLicense = () => { |
| 35 | + // eslint-disable-next-line @typescript-eslint/no-floating-promises |
| 36 | + handleSendAnalyticsEventToServer(ServerAnalyticsEventType.GET_LICENSE_CLICKED, true) |
| 37 | + const gateKeeperURL = getGateKeeperUrl(fingerprint) |
| 38 | + |
| 39 | + getHandleOpenURL(gateKeeperURL)() |
| 40 | + setShowQRDialog(true) |
| 41 | + } |
| 42 | + |
| 43 | + const handleCloseQRDialog = () => { |
| 44 | + setShowQRDialog(false) |
| 45 | + } |
| 46 | + |
| 47 | + const validateForm = (updatedLicenseKey: string) => { |
| 48 | + const errorMessage = requiredField(updatedLicenseKey).message |
| 49 | + setError(errorMessage || '') |
| 50 | + return !errorMessage |
| 51 | + } |
| 52 | + |
| 53 | + const handleLicenseKeyChange = (e: ChangeEvent<HTMLTextAreaElement>) => { |
| 54 | + const { value } = e.target |
| 55 | + setLicenseKey(value) |
| 56 | + validateForm(value) |
| 57 | + } |
| 58 | + |
| 59 | + const handleActivateLicense = async (e: SyntheticEvent) => { |
| 60 | + e.preventDefault() |
| 61 | + const isFormValid = validateForm(licenseKey) |
| 62 | + if (isFormValid) { |
| 63 | + setActivatingLicense(true) |
| 64 | + try { |
| 65 | + await activateLicense(licenseKey) |
| 66 | + ToastManager.showToast({ |
| 67 | + description: 'License activated successfully', |
| 68 | + variant: ToastVariantType.success, |
| 69 | + }) |
| 70 | + handleLicenseActivateSuccess() |
| 71 | + } catch (err) { |
| 72 | + if (err.code === API_STATUS_CODES.BAD_REQUEST) { |
| 73 | + setError('Invalid license key') |
| 74 | + } |
| 75 | + showError(err) |
| 76 | + } finally { |
| 77 | + setActivatingLicense(false) |
| 78 | + } |
| 79 | + } |
| 80 | + } |
| 81 | + |
| 82 | + return ( |
| 83 | + <div className="flexbox-col p-36 dc__gap-32 border__primary w-400 br-12 bg__primary mxh-600 dc__overflow-auto"> |
| 84 | + <div className="flexbox-col dc__gap-20"> |
| 85 | + <div className="flexbox dc__content-space"> |
| 86 | + <ICDevtronWithBorder /> |
| 87 | + {handleClose && ( |
| 88 | + <Button |
| 89 | + dataTestId="close-dialog" |
| 90 | + variant={ButtonVariantType.borderLess} |
| 91 | + ariaLabel="close activate license dialog" |
| 92 | + onClick={handleClose} |
| 93 | + style={ButtonStyleType.negativeGrey} |
| 94 | + icon={<ICCross />} |
| 95 | + showAriaLabelInTippy={false} |
| 96 | + /> |
| 97 | + )} |
| 98 | + </div> |
| 99 | + <div className="flexbox-col dc__gap-4"> |
| 100 | + <div className="fs-20 lh-1-5 fw-7 cn-9 font-merriweather dc__truncate">{enterpriseName}</div> |
| 101 | + <div className="fs-16 lh-1-5 cn-8 fw-4">Enter new enterprise license key</div> |
| 102 | + </div> |
| 103 | + </div> |
| 104 | + <div className="flexbox-col dc__gap-16"> |
| 105 | + <InstallationFingerprintInfo fingerprint={fingerprint} /> |
| 106 | + <Textarea |
| 107 | + placeholder="Enter license key" |
| 108 | + name="license-key" |
| 109 | + onChange={handleLicenseKeyChange} |
| 110 | + value={licenseKey} |
| 111 | + required |
| 112 | + label="License Key" |
| 113 | + error={error} |
| 114 | + /> |
| 115 | + </div> |
| 116 | + <div className="flexbox-col dc__gap-16"> |
| 117 | + <Button |
| 118 | + dataTestId="activate-license" |
| 119 | + text="Activate" |
| 120 | + fullWidth |
| 121 | + isLoading={activatingLicense} |
| 122 | + onClick={handleActivateLicense} |
| 123 | + /> |
| 124 | + <div className="flexbox dc__align-items-center dc__content-space"> |
| 125 | + <span className="fs-13 cn-9 lh-20 fw-4">Don’t have license key?</span> |
| 126 | + <Button |
| 127 | + dataTestId="get-license" |
| 128 | + text="Get license" |
| 129 | + variant={ButtonVariantType.text} |
| 130 | + onClick={handleGetLicense} |
| 131 | + /> |
| 132 | + </div> |
| 133 | + </div> |
| 134 | + {showQRDialog && <GatekeeperQRDialog fingerprint={fingerprint} handleClose={handleCloseQRDialog} />} |
| 135 | + </div> |
| 136 | + ) |
| 137 | +} |
| 138 | + |
| 139 | +export default ActivateLicenseDialog |
0 commit comments