From dfe09f70916a4a6de0461afc48d4df72cbf615ac Mon Sep 17 00:00:00 2001 From: Bryan Elliott Date: Tue, 10 Sep 2024 14:04:46 -0400 Subject: [PATCH 1/6] Add License: Update error messages & add error help info. --- .../activation-screen-controls/index.jsx | 11 +- .../activation-screen-controls/style.scss | 18 -- .../activation-screen-error/constants.ts | 9 + .../activation-screen-error/index.tsx | 53 +++++ .../activation-screen-error/style.scss | 62 ++++++ .../use-get-error-content.tsx | 185 ++++++++++++++++++ 6 files changed, 314 insertions(+), 24 deletions(-) create mode 100644 projects/js-packages/licensing/components/activation-screen-error/constants.ts create mode 100644 projects/js-packages/licensing/components/activation-screen-error/index.tsx create mode 100644 projects/js-packages/licensing/components/activation-screen-error/style.scss create mode 100644 projects/js-packages/licensing/components/activation-screen-error/use-get-error-content.tsx diff --git a/projects/js-packages/licensing/components/activation-screen-controls/index.jsx b/projects/js-packages/licensing/components/activation-screen-controls/index.jsx index 72231125acb58..769f49a073ee2 100644 --- a/projects/js-packages/licensing/components/activation-screen-controls/index.jsx +++ b/projects/js-packages/licensing/components/activation-screen-controls/index.jsx @@ -3,10 +3,9 @@ import { JetpackLogo, Spinner } from '@automattic/jetpack-components'; import { Button, TextControl, SelectControl } from '@wordpress/components'; import { createInterpolateElement } from '@wordpress/element'; import { sprintf, __ } from '@wordpress/i18n'; -import { Icon, warning } from '@wordpress/icons'; import PropTypes from 'prop-types'; import React, { useCallback, useEffect, useMemo, useState } from 'react'; - +import ActivationScreenError from '../activation-screen-error'; import './style.scss'; /** @@ -155,6 +154,9 @@ const ActivationScreenControls = props => { ? 'jp-license-activation-screen-controls--license-field-with-error' : 'jp-license-activation-screen-controls--license-field'; + const errorTypeMatch = licenseError?.match( /\[[a-z_]+\]/ ); + const errorType = errorTypeMatch && errorTypeMatch[ 0 ]; + const hasAvailableLicenseKey = availableLicenses && availableLicenses.length; return ( @@ -190,10 +192,7 @@ const ActivationScreenControls = props => { /> ) } { hasLicenseError && ( -
- - { licenseError } -
+ ) }
diff --git a/projects/js-packages/licensing/components/activation-screen-controls/style.scss b/projects/js-packages/licensing/components/activation-screen-controls/style.scss index b6b0a0a0c3c89..81c5789c7e7fe 100644 --- a/projects/js-packages/licensing/components/activation-screen-controls/style.scss +++ b/projects/js-packages/licensing/components/activation-screen-controls/style.scss @@ -67,24 +67,6 @@ } } - .jp-license-activation-screen-controls--license-field-error { - display: flex; - flex-direction: row; - align-items: flex-start; - color: var(--jp-red); - max-width: 500px; - - svg { - margin-right: 4px; - fill: var(--jp-red); - min-width: 24px; - } - - span { - font-size: var(--font-body); - } - } - .jp-license-activation-screen-controls--button, .jp-license-activation-screen-controls--button:active { background-color: var( --jp-black ); diff --git a/projects/js-packages/licensing/components/activation-screen-error/constants.ts b/projects/js-packages/licensing/components/activation-screen-error/constants.ts new file mode 100644 index 0000000000000..d971f2625d79a --- /dev/null +++ b/projects/js-packages/licensing/components/activation-screen-error/constants.ts @@ -0,0 +1,9 @@ +export const LICENSE_ERRORS = { + NOT_SAME_OWNER: '[not_same_owner]', + ACTIVE_ON_SAME_SITE: '[active_on_same_site]', + ATTACHED_LICENSE: '[attached_license]', + PRODUCT_INCOMPATIBILITY: '[product_incompatibility]', + REVOKED_LICENSE: '[revoked_license]', + INVALID_INPUT: '[invalid_input]', + MULTISITE_INCOMPATIBILITY: '[multisite_incompatibility]', +} as const; diff --git a/projects/js-packages/licensing/components/activation-screen-error/index.tsx b/projects/js-packages/licensing/components/activation-screen-error/index.tsx new file mode 100644 index 0000000000000..0f62a35b60c8e --- /dev/null +++ b/projects/js-packages/licensing/components/activation-screen-error/index.tsx @@ -0,0 +1,53 @@ +import jetpackAnalytics from '@automattic/jetpack-analytics'; +import { Icon, warning, check } from '@wordpress/icons'; +import React, { FC, useEffect } from 'react'; +import { LICENSE_ERRORS } from './constants'; +import { UseGetErrorContent } from './use-get-error-content'; + +import './style.scss'; + +type LicenseErrorKeysType = keyof typeof LICENSE_ERRORS; +type LicenseErrorValuesType = ( typeof LICENSE_ERRORS )[ LicenseErrorKeysType ]; + +type Props = { + licenseError: string; + errorType: LicenseErrorValuesType; +}; + +const ActivationScreenError: FC< Props > = ( { licenseError, errorType } ) => { + const hasLicenseError = licenseError !== null && licenseError !== undefined; + + useEffect( () => { + if ( hasLicenseError ) { + jetpackAnalytics.tracks.recordEvent( 'jetpack_wpa_license_activation_error_view', { + error: licenseError, + error_type: errorType, + } ); + } + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [] ); + + if ( ! hasLicenseError ) { + return null; + } + + const { errorMessage, errorInfo } = UseGetErrorContent( licenseError, errorType ); + const { ACTIVE_ON_SAME_SITE } = LICENSE_ERRORS; + const isLicenseAlreadyAttached = ACTIVE_ON_SAME_SITE === errorType; + + const errorMessageClass = isLicenseAlreadyAttached + ? 'activation-screen-error__message--success' + : 'activation-screen-error__message--error'; + + return ( + <> +
+ + { errorMessage } +
+ { errorInfo &&
{ errorInfo }
} + + ); +}; + +export default ActivationScreenError; diff --git a/projects/js-packages/licensing/components/activation-screen-error/style.scss b/projects/js-packages/licensing/components/activation-screen-error/style.scss new file mode 100644 index 0000000000000..11dd2cc79641e --- /dev/null +++ b/projects/js-packages/licensing/components/activation-screen-error/style.scss @@ -0,0 +1,62 @@ +.activation-screen-error__message { + display: flex; + flex-direction: row; + align-items: flex-start; + max-width: 500px; + + svg { + margin-left: -3px; + } + + span { + font-size: 13px; + line-height: 20px; + font-weight: 500; + letter-spacing: -0.044em; + } +} + +.activation-screen-error__message--error { + color: var(--jp-red); + svg { + fill: var(--jp-red); + } +} + +.activation-screen-error__message--success { + color: var(--jp-green); + svg { + fill: var(--jp-green); + } +} + +.activation-screen-error__info { + background-color: var(--jp-gray-0); + color: var(--jp-gray-80); + font-size: var(--font-body-small); + line-height: calc(var(--font-title-small) - 2px); + border: 1px solid #F0F0F0; + border-radius: var(--jp-border-radius); + padding: var(--jp-modal-padding-small); + margin: 32px 0 8px; + + > p { + margin: 0 0 1em !important; + font-size: var(--font-body-small) !important; + } + > p:last-child { + margin-bottom: 0 !important; + } + + ol > li::marker { + font-weight: bold; + } + + a { + color: var(--jp-green-50); + } + a:hover, + a:active { + color: var(--jp-green-70); + } +} \ No newline at end of file diff --git a/projects/js-packages/licensing/components/activation-screen-error/use-get-error-content.tsx b/projects/js-packages/licensing/components/activation-screen-error/use-get-error-content.tsx new file mode 100644 index 0000000000000..f66d3202c4d21 --- /dev/null +++ b/projects/js-packages/licensing/components/activation-screen-error/use-get-error-content.tsx @@ -0,0 +1,185 @@ +import { getRedirectUrl } from '@automattic/jetpack-components'; +import { ExternalLink } from '@wordpress/components'; +import { createInterpolateElement } from '@wordpress/element'; +import { __, sprintf } from '@wordpress/i18n'; +import React from 'react'; +import { LICENSE_ERRORS } from './constants'; + +type LicenseErrorKeysType = keyof typeof LICENSE_ERRORS; +type LicenseErrorValuesType = ( typeof LICENSE_ERRORS )[ LicenseErrorKeysType ]; + +export const UseGetErrorContent = ( licenseError: string, errorType: LicenseErrorValuesType ) => { + const hasLicenseError = licenseError !== null && licenseError !== undefined; + + if ( ! hasLicenseError ) { + return { + errorMessage: null, + errorInfo: null, + }; + } + + const needHelpGetInTouchLink = createInterpolateElement( + __( 'Need help? Get in touch.', 'jetpack' ), + { + a: ( + + ), + } + ); + + switch ( errorType ) { + case LICENSE_ERRORS.NOT_SAME_OWNER: + return { + errorMessage: __( + 'The account that purchased the plan and the account managing this site are different.', + 'jetpack' + ), + errorInfo: ( + <> +

+ { createInterpolateElement( + __( 'Follow these steps to resolve it.', 'jetpack' ), + { + a: ( + + ), + } + ) } +

+
    +
  1. { __( 'Disconnect Jetpack from your site.', 'jetpack' ) }
    2. +
  2. + { __( 'Log in to the WordPress.com account that purchased the plan.', 'jetpack' ) } +
    3. +
  3. { __( 'Reconnect Jetpack.', 'jetpack' ) }
    4. +
+

{ needHelpGetInTouchLink }

+ + ), + }; + case LICENSE_ERRORS.ACTIVE_ON_SAME_SITE: + return { + errorMessage: __( 'This license is already active on your site.', 'jetpack' ), + errorInfo: null, + }; + case LICENSE_ERRORS.ATTACHED_LICENSE: + return { + errorMessage: __( 'This license is already active on another website', 'jetpack' ), + errorInfo: ( +
    +
  • + { createInterpolateElement( + __( 'If you would like to transfer it, please get in touch.', 'jetpack' ), + { + a: ( + + ), + } + ) } +
    • +
  • + { createInterpolateElement( + __( 'To use Jetpack on both sites, please buy another license.', 'jetpack' ), + { + a: ( + + ), + } + ) } +
    • +
+ ), + }; + case LICENSE_ERRORS.PRODUCT_INCOMPATIBILITY: + return { + errorMessage: __( + 'Your site already has an active Jetpack plan of equal or higher value.', + 'jetpack' + ), + errorInfo: ( + <> +

+ { __( + 'It looks like your website already has a Jetpack plan that’s equal to or better than the one you’re trying to activate.', + 'jetpack' + ) } +

+ +

+ { __( + 'You can either use this license on a different site or cancel your current plan for a refund.', + 'jetpack' + ) } +

+

{ needHelpGetInTouchLink }

+ + ), + }; + case LICENSE_ERRORS.REVOKED_LICENSE: + return { + errorMessage: __( + 'The subscription is no longer active or has expired. Please purchase a new license.', + 'jetpack' + ), + errorInfo:

{ needHelpGetInTouchLink }

, + }; + case LICENSE_ERRORS.INVALID_INPUT: + return { + errorMessage: __( 'Unable to validate this license key.', 'jetpack' ), + errorInfo: ( + <> +

+ { __( + 'Please take a moment to check the license key from your purchase confirmation email—it might have a small typo.', + 'jetpack' + ) } +

+ +

{ needHelpGetInTouchLink }

+ + ), + }; + case LICENSE_ERRORS.MULTISITE_INCOMPATIBILITY: { + const planNameMatch = licenseError.match( /We.re sorry, (.*) is not compatible/ ); + const planName = planNameMatch && planNameMatch[ 1 ]; + return { + errorMessage: sprintf( + /* translators: %s is the Jetpack product name, i.e.- Jetpack Backup, Jetpack Boost, etc., which the product name should not be translated. */ + __( + 'We’re sorry, %s is not compatible with multisite WordPress installations at this time.', + 'jetpack' + ), + planName + ), + errorInfo: ( + <> +

+ { __( + 'This Jetpack plan doesn’t work with Multisite WordPress setups. Please use it on a single-site installation or consider canceling for a refund.', + 'jetpack' + ) } +

+

{ needHelpGetInTouchLink }

+ + ), + }; + } + default: + return { + errorMessage: licenseError, + errorInfo:

{ needHelpGetInTouchLink }

, + }; + } +}; From 70de4ddcd3edadc2de4bf14d843b3f519b8558f1 Mon Sep 17 00:00:00 2001 From: Bryan Elliott Date: Tue, 10 Sep 2024 14:09:19 -0400 Subject: [PATCH 2/6] changelog --- .../changelog/update-license-activate-error-messages | 4 ++++ 1 file changed, 4 insertions(+) create mode 100644 projects/js-packages/licensing/changelog/update-license-activate-error-messages diff --git a/projects/js-packages/licensing/changelog/update-license-activate-error-messages b/projects/js-packages/licensing/changelog/update-license-activate-error-messages new file mode 100644 index 0000000000000..fb61373a9d180 --- /dev/null +++ b/projects/js-packages/licensing/changelog/update-license-activate-error-messages @@ -0,0 +1,4 @@ +Significance: minor +Type: changed + +Add more helpful error messages and help steps on license key activation error. From d1e2b18f5bfd755e337aed1822dffa81fcdccb92 Mon Sep 17 00:00:00 2001 From: Bryan Elliott Date: Tue, 10 Sep 2024 14:36:37 -0400 Subject: [PATCH 3/6] Update unit test. --- .../components/activation-screen-controls/test/component.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/js-packages/licensing/components/activation-screen-controls/test/component.jsx b/projects/js-packages/licensing/components/activation-screen-controls/test/component.jsx index ad4fc05bdcbe8..b89a6d7c7e20d 100644 --- a/projects/js-packages/licensing/components/activation-screen-controls/test/component.jsx +++ b/projects/js-packages/licensing/components/activation-screen-controls/test/component.jsx @@ -47,7 +47,7 @@ describe( 'ActivationScreenControls', () => { expect( node ).toBeInTheDocument(); expect( // eslint-disable-next-line testing-library/no-node-access - node.closest( '.jp-license-activation-screen-controls--license-field-error' ) + node.closest( '.activation-screen-error__message' ) ).toBeInTheDocument(); } ); } ); From 6db728bb4c34de8a4217f117479fafb7b5094487 Mon Sep 17 00:00:00 2001 From: Bryan Elliott Date: Tue, 10 Sep 2024 16:52:15 -0400 Subject: [PATCH 4/6] Various final touch ups. --- .../activation-screen-controls/index.jsx | 17 +++++++++++++---- .../activation-screen-controls/style.scss | 10 +++++++++- .../activation-screen-error/style.scss | 1 + .../use-get-error-content.tsx | 4 ++-- 4 files changed, 25 insertions(+), 7 deletions(-) diff --git a/projects/js-packages/licensing/components/activation-screen-controls/index.jsx b/projects/js-packages/licensing/components/activation-screen-controls/index.jsx index 769f49a073ee2..52090826c6a23 100644 --- a/projects/js-packages/licensing/components/activation-screen-controls/index.jsx +++ b/projects/js-packages/licensing/components/activation-screen-controls/index.jsx @@ -6,6 +6,7 @@ import { sprintf, __ } from '@wordpress/i18n'; import PropTypes from 'prop-types'; import React, { useCallback, useEffect, useMemo, useState } from 'react'; import ActivationScreenError from '../activation-screen-error'; +import { LICENSE_ERRORS } from '../activation-screen-error/constants'; import './style.scss'; /** @@ -150,13 +151,21 @@ const ActivationScreenControls = props => { jetpackAnalytics.tracks.recordEvent( 'jetpack_wpa_license_key_activation_view' ); }, [] ); - const className = hasLicenseError - ? 'jp-license-activation-screen-controls--license-field-with-error' - : 'jp-license-activation-screen-controls--license-field'; - const errorTypeMatch = licenseError?.match( /\[[a-z_]+\]/ ); const errorType = errorTypeMatch && errorTypeMatch[ 0 ]; + const { ACTIVE_ON_SAME_SITE } = LICENSE_ERRORS; + const isLicenseAlreadyAttached = ACTIVE_ON_SAME_SITE === errorType; + const className = useMemo( () => { + if ( hasLicenseError ) { + if ( isLicenseAlreadyAttached ) { + return 'jp-license-activation-screen-controls--license-field-with-success'; + } + return 'jp-license-activation-screen-controls--license-field-with-error'; + } + return 'jp-license-activation-screen-controls--license-field'; + }, [ hasLicenseError, isLicenseAlreadyAttached ] ); + const hasAvailableLicenseKey = availableLicenses && availableLicenses.length; return ( diff --git a/projects/js-packages/licensing/components/activation-screen-controls/style.scss b/projects/js-packages/licensing/components/activation-screen-controls/style.scss index 81c5789c7e7fe..70c8974ea348e 100644 --- a/projects/js-packages/licensing/components/activation-screen-controls/style.scss +++ b/projects/js-packages/licensing/components/activation-screen-controls/style.scss @@ -37,7 +37,8 @@ .jp-license-activation-screen-controls--license-field, - .jp-license-activation-screen-controls--license-field-with-error { + .jp-license-activation-screen-controls--license-field-with-error, + .jp-license-activation-screen-controls--license-field-with-success { max-width: 500px; .components-input-control__label.components-input-control__label.components-input-control__label { font-weight: 600; @@ -67,6 +68,13 @@ } } + .jp-license-activation-screen-controls--license-field-with-success { + input.components-text-control__input, + select.components-select-control__input { + border: 1px solid var(--jp-green); + } + } + .jp-license-activation-screen-controls--button, .jp-license-activation-screen-controls--button:active { background-color: var( --jp-black ); diff --git a/projects/js-packages/licensing/components/activation-screen-error/style.scss b/projects/js-packages/licensing/components/activation-screen-error/style.scss index 11dd2cc79641e..13d2538bd13ba 100644 --- a/projects/js-packages/licensing/components/activation-screen-error/style.scss +++ b/projects/js-packages/licensing/components/activation-screen-error/style.scss @@ -3,6 +3,7 @@ flex-direction: row; align-items: flex-start; max-width: 500px; + margin-top: calc(var(--jp-spacing-base)*.5); svg { margin-left: -3px; diff --git a/projects/js-packages/licensing/components/activation-screen-error/use-get-error-content.tsx b/projects/js-packages/licensing/components/activation-screen-error/use-get-error-content.tsx index f66d3202c4d21..3b3c242c6048e 100644 --- a/projects/js-packages/licensing/components/activation-screen-error/use-get-error-content.tsx +++ b/projects/js-packages/licensing/components/activation-screen-error/use-get-error-content.tsx @@ -23,7 +23,7 @@ export const UseGetErrorContent = ( licenseError: string, errorType: LicenseErro { a: ( ), @@ -80,7 +80,7 @@ export const UseGetErrorContent = ( licenseError: string, errorType: LicenseErro a: ( ), } From 3ae949eb9cbc236565b8fceb3204ac8bb9dbec69 Mon Sep 17 00:00:00 2001 From: Bryan Elliott Date: Tue, 10 Sep 2024 20:27:33 -0400 Subject: [PATCH 5/6] Fix tiny css style. --- .../licensing/components/activation-screen-error/style.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/js-packages/licensing/components/activation-screen-error/style.scss b/projects/js-packages/licensing/components/activation-screen-error/style.scss index 13d2538bd13ba..aab47f78456d1 100644 --- a/projects/js-packages/licensing/components/activation-screen-error/style.scss +++ b/projects/js-packages/licensing/components/activation-screen-error/style.scss @@ -3,7 +3,7 @@ flex-direction: row; align-items: flex-start; max-width: 500px; - margin-top: calc(var(--jp-spacing-base)*.5); + margin-top: calc(var(--spacing-base)*.5); svg { margin-left: -3px; From d3d0a2db83b096a7162d558c44e8ec174aeb4025 Mon Sep 17 00:00:00 2001 From: Bryan Elliott Date: Wed, 11 Sep 2024 22:33:07 -0400 Subject: [PATCH 6/6] Address all feedback points. --- .../activation-screen-controls/index.jsx | 18 +++++++-------- .../activation-screen-error/index.tsx | 21 +++++++++--------- .../activation-screen-error/style.scss | 22 ++++++++++++++----- .../use-get-error-content.tsx | 10 ++++----- 4 files changed, 41 insertions(+), 30 deletions(-) diff --git a/projects/js-packages/licensing/components/activation-screen-controls/index.jsx b/projects/js-packages/licensing/components/activation-screen-controls/index.jsx index 52090826c6a23..51bbfa6af8d0a 100644 --- a/projects/js-packages/licensing/components/activation-screen-controls/index.jsx +++ b/projects/js-packages/licensing/components/activation-screen-controls/index.jsx @@ -145,7 +145,6 @@ const ActivationScreenControls = props => { licenseError, onLicenseChange, } = props; - const hasLicenseError = licenseError !== null && licenseError !== undefined; useEffect( () => { jetpackAnalytics.tracks.recordEvent( 'jetpack_wpa_license_key_activation_view' ); @@ -157,14 +156,15 @@ const ActivationScreenControls = props => { const { ACTIVE_ON_SAME_SITE } = LICENSE_ERRORS; const isLicenseAlreadyAttached = ACTIVE_ON_SAME_SITE === errorType; const className = useMemo( () => { - if ( hasLicenseError ) { - if ( isLicenseAlreadyAttached ) { - return 'jp-license-activation-screen-controls--license-field-with-success'; - } - return 'jp-license-activation-screen-controls--license-field-with-error'; + if ( ! licenseError ) { + return 'jp-license-activation-screen-controls--license-field'; } - return 'jp-license-activation-screen-controls--license-field'; - }, [ hasLicenseError, isLicenseAlreadyAttached ] ); + if ( isLicenseAlreadyAttached ) { + return 'jp-license-activation-screen-controls--license-field-with-success'; + } + + return 'jp-license-activation-screen-controls--license-field-with-error'; + }, [ licenseError, isLicenseAlreadyAttached ] ); const hasAvailableLicenseKey = availableLicenses && availableLicenses.length; @@ -200,7 +200,7 @@ const ActivationScreenControls = props => { value={ license } /> ) } - { hasLicenseError && ( + { licenseError && ( ) }
diff --git a/projects/js-packages/licensing/components/activation-screen-error/index.tsx b/projects/js-packages/licensing/components/activation-screen-error/index.tsx index 0f62a35b60c8e..0eec02d2f214d 100644 --- a/projects/js-packages/licensing/components/activation-screen-error/index.tsx +++ b/projects/js-packages/licensing/components/activation-screen-error/index.tsx @@ -1,37 +1,36 @@ import jetpackAnalytics from '@automattic/jetpack-analytics'; import { Icon, warning, check } from '@wordpress/icons'; -import React, { FC, useEffect } from 'react'; +import React, { useEffect } from 'react'; import { LICENSE_ERRORS } from './constants'; -import { UseGetErrorContent } from './use-get-error-content'; +import { useGetErrorContent } from './use-get-error-content'; +import type { FC } from 'react'; import './style.scss'; type LicenseErrorKeysType = keyof typeof LICENSE_ERRORS; type LicenseErrorValuesType = ( typeof LICENSE_ERRORS )[ LicenseErrorKeysType ]; -type Props = { +interface Props { licenseError: string; errorType: LicenseErrorValuesType; -}; +} const ActivationScreenError: FC< Props > = ( { licenseError, errorType } ) => { - const hasLicenseError = licenseError !== null && licenseError !== undefined; - useEffect( () => { - if ( hasLicenseError ) { + if ( licenseError ) { jetpackAnalytics.tracks.recordEvent( 'jetpack_wpa_license_activation_error_view', { error: licenseError, error_type: errorType, } ); } - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [] ); + }, [ licenseError, errorType ] ); + + const { errorMessage, errorInfo } = useGetErrorContent( licenseError, errorType ); - if ( ! hasLicenseError ) { + if ( ! licenseError ) { return null; } - const { errorMessage, errorInfo } = UseGetErrorContent( licenseError, errorType ); const { ACTIVE_ON_SAME_SITE } = LICENSE_ERRORS; const isLicenseAlreadyAttached = ACTIVE_ON_SAME_SITE === errorType; diff --git a/projects/js-packages/licensing/components/activation-screen-error/style.scss b/projects/js-packages/licensing/components/activation-screen-error/style.scss index aab47f78456d1..5e92e10f6ef6c 100644 --- a/projects/js-packages/licensing/components/activation-screen-error/style.scss +++ b/projects/js-packages/licensing/components/activation-screen-error/style.scss @@ -36,17 +36,17 @@ color: var(--jp-gray-80); font-size: var(--font-body-small); line-height: calc(var(--font-title-small) - 2px); - border: 1px solid #F0F0F0; + border: 1px solid var(--jp-green-0); border-radius: var(--jp-border-radius); padding: var(--jp-modal-padding-small); margin: 32px 0 8px; > p { - margin: 0 0 1em !important; - font-size: var(--font-body-small) !important; + margin: 0 0 1em; + font-size: var(--font-body-small); } > p:last-child { - margin-bottom: 0 !important; + margin-bottom: 0; } ol > li::marker { @@ -60,4 +60,16 @@ a:active { color: var(--jp-green-70); } -} \ No newline at end of file +} + +.jp-license-activation-screen-controls { + .activation-screen-error__info { + > p { + margin: 0 0 1em; + font-size: var(--font-body-small); + } + > p:last-child { + margin-bottom: 0; + } + } +} diff --git a/projects/js-packages/licensing/components/activation-screen-error/use-get-error-content.tsx b/projects/js-packages/licensing/components/activation-screen-error/use-get-error-content.tsx index 3b3c242c6048e..45e259667611b 100644 --- a/projects/js-packages/licensing/components/activation-screen-error/use-get-error-content.tsx +++ b/projects/js-packages/licensing/components/activation-screen-error/use-get-error-content.tsx @@ -8,10 +8,8 @@ import { LICENSE_ERRORS } from './constants'; type LicenseErrorKeysType = keyof typeof LICENSE_ERRORS; type LicenseErrorValuesType = ( typeof LICENSE_ERRORS )[ LicenseErrorKeysType ]; -export const UseGetErrorContent = ( licenseError: string, errorType: LicenseErrorValuesType ) => { - const hasLicenseError = licenseError !== null && licenseError !== undefined; - - if ( ! hasLicenseError ) { +export const useGetErrorContent = ( licenseError: string, errorType: LicenseErrorValuesType ) => { + if ( ! licenseError ) { return { errorMessage: null, errorInfo: null, @@ -46,7 +44,9 @@ export const UseGetErrorContent = ( licenseError: string, errorType: LicenseErro a: ( ), }