diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 38189fb4b6df2..1c8b55a212544 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -2595,6 +2595,9 @@ importers: '@wordpress/element': specifier: 5.21.0 version: 5.21.0 + classnames: + specifier: 2.3.2 + version: 2.3.2 history: specifier: 5.3.0 version: 5.3.0 diff --git a/projects/js-packages/ai-client/changelog/update-ai-client-dispatch-unclear-prompt-once b/projects/js-packages/ai-client/changelog/update-ai-client-dispatch-unclear-prompt-once new file mode 100644 index 0000000000000..b347b4d1605f9 --- /dev/null +++ b/projects/js-packages/ai-client/changelog/update-ai-client-dispatch-unclear-prompt-once @@ -0,0 +1,4 @@ +Significance: patch +Type: changed + +AI Client: ensure dispatching unclear error prompt once per request/response diff --git a/projects/js-packages/ai-client/src/suggestions-event-source/index.ts b/projects/js-packages/ai-client/src/suggestions-event-source/index.ts index a21bed9d997fe..2025203546442 100644 --- a/projects/js-packages/ai-client/src/suggestions-event-source/index.ts +++ b/projects/js-packages/ai-client/src/suggestions-event-source/index.ts @@ -72,6 +72,9 @@ export default class SuggestionsEventSource extends EventTarget { isPromptClear: boolean; controller: AbortController; + // Flag to detect if the unclear prompt event was already dispatched + errorUnclearPromptTriggered: boolean; + constructor( data: SuggestionsEventSourceConstructorArgs ) { super(); this.fullMessage = ''; @@ -157,6 +160,9 @@ export default class SuggestionsEventSource extends EventTarget { bodyData.model = options.model; } + // Clean the unclear prompt trigger flag + this.errorUnclearPromptTriggered = false; + await fetchEventSource( url, { openWhenHidden: true, method: 'POST', @@ -257,8 +263,19 @@ export default class SuggestionsEventSource extends EventTarget { */ const replacedMessage = this.fullMessage.replace( /__|(\*\*)/g, '' ); if ( replacedMessage.startsWith( 'JETPACK_AI_ERROR' ) ) { + /* + * Check if the unclear prompt event was already dispatched, + * to ensure that it is dispatched only once per request. + */ + if ( this.errorUnclearPromptTriggered ) { + return; + } + this.errorUnclearPromptTriggered = true; + // The unclear prompt marker was found, so we dispatch an error event this.dispatchEvent( new CustomEvent( ERROR_UNCLEAR_PROMPT ) ); + debug( 'Unclear error prompt dispatched' ); + this.dispatchEvent( new CustomEvent( ERROR_RESPONSE, { detail: getErrorData( ERROR_UNCLEAR_PROMPT ), diff --git a/projects/js-packages/components/changelog/fix-boost-score-graph-warnings b/projects/js-packages/components/changelog/fix-boost-score-graph-warnings new file mode 100644 index 0000000000000..f295af6e72646 --- /dev/null +++ b/projects/js-packages/components/changelog/fix-boost-score-graph-warnings @@ -0,0 +1,4 @@ +Significance: minor +Type: fixed + +Fix react warnings in Boost Score Graph. diff --git a/projects/js-packages/components/components/boost-score-graph/background.tsx b/projects/js-packages/components/components/boost-score-graph/background.tsx index 070b4a4e13ac0..ada7cfdc8a61b 100644 --- a/projects/js-packages/components/components/boost-score-graph/background.tsx +++ b/projects/js-packages/components/components/boost-score-graph/background.tsx @@ -96,23 +96,23 @@ export const Background: FunctionComponent = () => { - - - - - - - - - - - - - + strokeWidth="2" + strokeLinecap="round" + strokeLinejoin="round" + /> + + + + + + + + + + + + + { - - - - - - - - - - - - - + strokeWidth="2" + strokeLinecap="round" + strokeLinejoin="round" + /> + + + + + + + + + + + + + { width="1185.3" height="239.127" filterUnits="userSpaceOnUse" - color-interpolation-filters="sRGB" + colorInterpolationFilters="sRGB" > - + @@ -161,8 +161,8 @@ export const Background: FunctionComponent = () => { y2="199" gradientUnits="userSpaceOnUse" > - - + + { y2="220.999" gradientUnits="userSpaceOnUse" > - - + + diff --git a/projects/js-packages/components/package.json b/projects/js-packages/components/package.json index b6f8ca6a7fa12..8a1772c198de6 100644 --- a/projects/js-packages/components/package.json +++ b/projects/js-packages/components/package.json @@ -1,6 +1,6 @@ { "name": "@automattic/jetpack-components", - "version": "0.44.5-alpha", + "version": "0.45.0-alpha", "description": "Jetpack Components Package", "author": "Automattic", "license": "GPL-2.0-or-later", diff --git a/projects/packages/device-detection/changelog/update-add-bots-sig-to-ua-detection b/projects/packages/device-detection/changelog/update-add-bots-sig-to-ua-detection new file mode 100644 index 0000000000000..280b8d7357b14 --- /dev/null +++ b/projects/packages/device-detection/changelog/update-add-bots-sig-to-ua-detection @@ -0,0 +1,4 @@ +Significance: minor +Type: added + +Allow cookieinformationscanner and facebookexternalhit to be detected as bots diff --git a/projects/packages/device-detection/composer.json b/projects/packages/device-detection/composer.json index 96fd3efac7e05..f8e8e8ddbe895 100644 --- a/projects/packages/device-detection/composer.json +++ b/projects/packages/device-detection/composer.json @@ -42,7 +42,7 @@ "link-template": "https://github.com/Automattic/jetpack-device-detection/compare/v${old}...v${new}" }, "branch-alias": { - "dev-trunk": "1.4.x-dev" + "dev-trunk": "1.5.x-dev" } } } diff --git a/projects/packages/device-detection/src/class-user-agent-info.php b/projects/packages/device-detection/src/class-user-agent-info.php index 3984dc2d22b7f..4a191e18b203a 100644 --- a/projects/packages/device-detection/src/class-user-agent-info.php +++ b/projects/packages/device-detection/src/class-user-agent-info.php @@ -1559,6 +1559,8 @@ public static function is_bot_user_agent( $ua = null ) { 'domaintunocrawler', 'grapeshotcrawler', 'cloudflare-alwaysonline', + 'cookieinformationscanner', // p1699315886066389-slack-C0438NHCLSY + 'facebookexternalhit', // https://www.facebook.com/externalhit_uatext.php ); foreach ( $bot_agents as $bot_agent ) { diff --git a/projects/packages/jetpack-mu-wpcom/CHANGELOG.md b/projects/packages/jetpack-mu-wpcom/CHANGELOG.md index e23ee6002ad02..dc3633fac7739 100644 --- a/projects/packages/jetpack-mu-wpcom/CHANGELOG.md +++ b/projects/packages/jetpack-mu-wpcom/CHANGELOG.md @@ -5,6 +5,10 @@ All notable changes to this project will be documented in this file. The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/) and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). +## [4.18.0] - 2023-11-09 +### Added +- Take id_map in consideration when checking if a task is completed inside wpcom_launchpad_is_task_option_completed. [#34009] + ## [4.17.0] - 2023-11-08 ### Added - Added Launchpad tasks and task list to the Subscriber page. [#33948] @@ -425,6 +429,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Testing initial package release. +[4.18.0]: https://github.com/Automattic/jetpack-mu-wpcom/compare/v4.17.0...v4.18.0 [4.17.0]: https://github.com/Automattic/jetpack-mu-wpcom/compare/v4.16.2...v4.17.0 [4.16.2]: https://github.com/Automattic/jetpack-mu-wpcom/compare/v4.16.1...v4.16.2 [4.16.1]: https://github.com/Automattic/jetpack-mu-wpcom/compare/v4.16.0...v4.16.1 diff --git a/projects/packages/jetpack-mu-wpcom/changelog/add-launchpad_is_task_complete_id_map b/projects/packages/jetpack-mu-wpcom/changelog/add-launchpad_is_task_complete_id_map deleted file mode 100644 index 48e24905947de..0000000000000 --- a/projects/packages/jetpack-mu-wpcom/changelog/add-launchpad_is_task_complete_id_map +++ /dev/null @@ -1,4 +0,0 @@ -Significance: minor -Type: added - -Take id_map in consideration when checking if a task is completed inside wpcom_launchpad_is_task_option_completed. diff --git a/projects/packages/jetpack-mu-wpcom/changelog/fix-version-bumps b/projects/packages/jetpack-mu-wpcom/changelog/fix-version-bumps deleted file mode 100644 index 8864676d95ebb..0000000000000 --- a/projects/packages/jetpack-mu-wpcom/changelog/fix-version-bumps +++ /dev/null @@ -1,5 +0,0 @@ -Significance: patch -Type: fixed -Comment: Version bumps - - diff --git a/projects/packages/jetpack-mu-wpcom/package.json b/projects/packages/jetpack-mu-wpcom/package.json index 1da785844aa7d..2d107853f03e4 100644 --- a/projects/packages/jetpack-mu-wpcom/package.json +++ b/projects/packages/jetpack-mu-wpcom/package.json @@ -1,7 +1,7 @@ { "private": true, "name": "@automattic/jetpack-mu-wpcom", - "version": "4.18.0-alpha", + "version": "4.18.0", "description": "Enhances your site with features powered by WordPress.com", "homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/packages/jetpack-mu-wpcom/#readme", "bugs": { diff --git a/projects/packages/jetpack-mu-wpcom/src/class-jetpack-mu-wpcom.php b/projects/packages/jetpack-mu-wpcom/src/class-jetpack-mu-wpcom.php index 04bab4366a745..2ad2e9ba7e424 100644 --- a/projects/packages/jetpack-mu-wpcom/src/class-jetpack-mu-wpcom.php +++ b/projects/packages/jetpack-mu-wpcom/src/class-jetpack-mu-wpcom.php @@ -14,7 +14,7 @@ */ class Jetpack_Mu_Wpcom { - const PACKAGE_VERSION = '4.18.0-alpha'; + const PACKAGE_VERSION = '4.18.0'; const PKG_DIR = __DIR__ . '/../'; /** diff --git a/projects/plugins/mu-wpcom-plugin/changelog/update-docker-php-memory-limit b/projects/plugins/backup/changelog/update-add-bots-sig-to-ua-detection similarity index 100% rename from projects/plugins/mu-wpcom-plugin/changelog/update-docker-php-memory-limit rename to projects/plugins/backup/changelog/update-add-bots-sig-to-ua-detection diff --git a/projects/plugins/backup/composer.lock b/projects/plugins/backup/composer.lock index 2ddb1d4035f50..98f16fb21ba7e 100644 --- a/projects/plugins/backup/composer.lock +++ b/projects/plugins/backup/composer.lock @@ -548,7 +548,7 @@ "dist": { "type": "path", "url": "../../packages/device-detection", - "reference": "fef1f53b844143c5358061d969d7472bb321af18" + "reference": "fd0107efb4a3e0f3c2d37c6955a1c83b172e1499" }, "require-dev": { "automattic/jetpack-changelogger": "@dev", @@ -565,7 +565,7 @@ "link-template": "https://github.com/Automattic/jetpack-device-detection/compare/v${old}...v${new}" }, "branch-alias": { - "dev-trunk": "1.4.x-dev" + "dev-trunk": "1.5.x-dev" } }, "autoload": { diff --git a/projects/plugins/boost/app/assets/src/css/admin-style.scss b/projects/plugins/boost/app/assets/src/css/admin-style.scss index a6f66b83e6e58..15306299468be 100644 --- a/projects/plugins/boost/app/assets/src/css/admin-style.scss +++ b/projects/plugins/boost/app/assets/src/css/admin-style.scss @@ -21,9 +21,7 @@ @import 'components/checklist'; @import 'components/icons'; @import 'components/badge'; -@import 'components/support'; @import 'components/snackbar'; -@import 'components/icon-tooltip'; @import 'components/pricing-table.scss'; // React Migration CSS diff --git a/projects/plugins/boost/app/assets/src/css/components/icon-tooltip.scss b/projects/plugins/boost/app/assets/src/css/components/icon-tooltip.scss deleted file mode 100644 index 11e03a8238130..0000000000000 --- a/projects/plugins/boost/app/assets/src/css/components/icon-tooltip.scss +++ /dev/null @@ -1,24 +0,0 @@ -.icon-tooltip-wrapper.wide-tooltip { - // Widen tooltips marked as "wide". - .icon-tooltip-helper .components-popover__content { - width: 440px; - } - - // Allow bulleted lists in wide tooltips. - ul { - margin: 0 0 0 30px; - list-style-type: disc; - } - - // Remove bottom margin from last list item. - ul li:last-child { - margin-bottom: 0; - } -} - -// Narrow down tooltips that are not marked as "wide". -.icon-tooltip-wrapper:not( .wide-tooltip ) { - .icon-tooltip-helper .components-popover__content { - width: 250px; - } -} diff --git a/projects/plugins/boost/app/assets/src/css/components/score.scss b/projects/plugins/boost/app/assets/src/css/components/score.scss index 89a515289eb1a..34b72445a387e 100644 --- a/projects/plugins/boost/app/assets/src/css/components/score.scss +++ b/projects/plugins/boost/app/assets/src/css/components/score.scss @@ -39,7 +39,7 @@ $no_boost_score_size: 28px; } } - button { + .action-button { color: $gray_90; &.components-button.is-link { @@ -156,7 +156,7 @@ $no_boost_score_size: 28px; height:12px; transform:translate(-50%,50%) rotate(45deg); background-color:$primary-white; - + @include box-shadow(); } } diff --git a/projects/plugins/boost/app/assets/src/css/components/support.scss b/projects/plugins/boost/app/assets/src/css/components/support.scss deleted file mode 100644 index b6fae96b9f322..0000000000000 --- a/projects/plugins/boost/app/assets/src/css/components/support.scss +++ /dev/null @@ -1,13 +0,0 @@ -.jb-support { - display: grid; - grid-template-columns: auto auto; - align-items: center; - - & &__title { - margin-bottom: $halfling; - } - - &__cta { - text-align: right; - } -} diff --git a/projects/plugins/boost/app/assets/src/js/elements/ActivateLicense.svelte b/projects/plugins/boost/app/assets/src/js/elements/ActivateLicense.svelte deleted file mode 100644 index b601cc9b0de85..0000000000000 --- a/projects/plugins/boost/app/assets/src/js/elements/ActivateLicense.svelte +++ /dev/null @@ -1,37 +0,0 @@ - - -

- Click here to get started', - 'jetpack-boost' - )} - vars={{ - link: [ - 'a', - { - class: 'jb-activate-license__link', - href: 'admin.php?page=my-jetpack#/add-license', - }, - ], - }} - /> -

- - diff --git a/projects/plugins/boost/app/assets/src/js/elements/ImageCDNRecommendation.svelte b/projects/plugins/boost/app/assets/src/js/elements/ImageCDNRecommendation.svelte deleted file mode 100644 index 2702c1d931ef4..0000000000000 --- a/projects/plugins/boost/app/assets/src/js/elements/ImageCDNRecommendation.svelte +++ /dev/null @@ -1,28 +0,0 @@ - - -

- Image CDN.', 'jetpack-boost' )} - /> -

-

- - {__( - "Jetpack Boost's Image CDN can automatically resize many images to the correct size for you.", - 'jetpack-boost' - )} - -

- - diff --git a/projects/plugins/boost/app/assets/src/js/elements/OtherGroupContext.svelte b/projects/plugins/boost/app/assets/src/js/elements/OtherGroupContext.svelte deleted file mode 100644 index 476ec24087ff2..0000000000000 --- a/projects/plugins/boost/app/assets/src/js/elements/OtherGroupContext.svelte +++ /dev/null @@ -1,33 +0,0 @@ - - -
- i -
-

- {__( - 'In addition to the Homepage, Pages and Posts, Boost will also analyze the following custom post types found on your site:', - 'jetpack-boost' - )} -

-
    - - {#each Object.entries( Jetpack_Boost.site.postTypes ) as [slug, label]} -
  • {label}
    • - {/each} -
- -
-
- - diff --git a/projects/plugins/boost/app/assets/src/js/elements/RecommendationContext.svelte b/projects/plugins/boost/app/assets/src/js/elements/RecommendationContext.svelte deleted file mode 100644 index d24e87793050e..0000000000000 --- a/projects/plugins/boost/app/assets/src/js/elements/RecommendationContext.svelte +++ /dev/null @@ -1,32 +0,0 @@ - - -
- i -
- - -
-
- - diff --git a/projects/plugins/boost/app/assets/src/js/modules/image-size-analysis/MultiProgress.svelte b/projects/plugins/boost/app/assets/src/js/modules/image-size-analysis/MultiProgress.svelte index 14f809295c348..e5fef55de66eb 100644 --- a/projects/plugins/boost/app/assets/src/js/modules/image-size-analysis/MultiProgress.svelte +++ b/projects/plugins/boost/app/assets/src/js/modules/image-size-analysis/MultiProgress.svelte @@ -1,12 +1,15 @@ - -{#if hasActiveGroup && isaLastUpdated} - {@const ( lastUpdated = formatter.format( isaLastUpdated ) )} - -
- Latest report as of {lastUpdated} - {#if totalIssueCount} -

- {sprintf( - /* translators: %d: number of image recommendations */ - _n( - '%d Image Recommendation', - '%d Image Recommendations', - totalIssueCount, - 'jetpack-boost' - ), - totalIssueCount - )} - - {#if ! isImageCdnModuleActive && totalIssueCount > 0} - - {/if} -

- {/if} - - {#if needsRefresh} - Refresh to see the latest recommendations.', - 'jetpack-boost' - )} - vars={actionLinkTemplateVar( () => refresh(), 'refresh' )} - /> - {/if} -
-{:else} -
-   -

 

-
-{/if} diff --git a/projects/plugins/boost/app/assets/src/js/pages/benefits/BenefitsInterstitial.svelte b/projects/plugins/boost/app/assets/src/js/pages/benefits/BenefitsInterstitial.svelte index 7a54f29b5d5a8..4886ce7fe569a 100644 --- a/projects/plugins/boost/app/assets/src/js/pages/benefits/BenefitsInterstitial.svelte +++ b/projects/plugins/boost/app/assets/src/js/pages/benefits/BenefitsInterstitial.svelte @@ -1,9 +1,9 @@ - -
- i -
-

- {__( - "Your Overall Score is a summary of your website performance across both mobile and desktop devices. It gives a general idea of your sites' overall performance.", - 'jetpack-boost' - )} -

- - - - - - - - - - - - - -
A90+
B75 - 90
C50 - 75
- - - - - - - - - - - - - -
D35 - 50
E25 - 35
F0 - 25
- -
-
diff --git a/projects/plugins/boost/app/assets/src/js/pages/settings/sections/AdvancedCriticalCss.svelte b/projects/plugins/boost/app/assets/src/js/pages/settings/sections/AdvancedCriticalCss.svelte index a4e9d2fcd9494..697c3efc58a9b 100644 --- a/projects/plugins/boost/app/assets/src/js/pages/settings/sections/AdvancedCriticalCss.svelte +++ b/projects/plugins/boost/app/assets/src/js/pages/settings/sections/AdvancedCriticalCss.svelte @@ -3,7 +3,7 @@ import { __, _n, sprintf } from '@wordpress/i18n'; import CloseButton from '../../../elements/CloseButton.svelte'; import ReactComponent from '../../../elements/ReactComponent.svelte'; - import BackButton from '../../../react-components/common/back-button/BackButton'; + import BackButton from '../../../react-components/components/back-button'; import { replaceCssState, updateProvider } from '../../../stores/critical-css-state'; import { groupErrorsByFrequency } from '../../../stores/critical-css-state-errors'; import { type Provider } from '../../../stores/critical-css-state-types'; diff --git a/projects/plugins/boost/app/assets/src/js/pages/settings/sections/Modules.svelte b/projects/plugins/boost/app/assets/src/js/pages/settings/sections/Modules.svelte index fb25fe858e137..ae941c5ed6d72 100644 --- a/projects/plugins/boost/app/assets/src/js/pages/settings/sections/Modules.svelte +++ b/projects/plugins/boost/app/assets/src/js/pages/settings/sections/Modules.svelte @@ -15,7 +15,7 @@ isaSummary, } from '../../../modules/image-size-analysis/store/isa-summary'; import { RegenerateCriticalCssSuggestion } from '../../../react-components/RegenerateCriticalCssSuggestion'; - import MinifyMeta from '../../../react-components/pages/settings/elements/MinifyMeta'; + import MinifyMeta from '../../../react-components/components/minify-meta'; import config from '../../../stores/config'; import { criticalCssState, diff --git a/projects/plugins/boost/app/assets/src/js/pages/settings/sections/Score.svelte b/projects/plugins/boost/app/assets/src/js/pages/settings/sections/Score.svelte index 6179c83fba0af..dfd3179ac1dae 100644 --- a/projects/plugins/boost/app/assets/src/js/pages/settings/sections/Score.svelte +++ b/projects/plugins/boost/app/assets/src/js/pages/settings/sections/Score.svelte @@ -9,6 +9,7 @@ import { scoreChangeModal, ScoreChangeMessage } from '../../../api/speed-scores'; import ErrorNotice from '../../../elements/ErrorNotice.svelte'; import ReactComponent from '../../../elements/ReactComponent.svelte'; + import ContextTooltip from '../../../react-components/sections/score/context-tooltip'; import { performanceHistoryPanelDS } from '../../../stores/data-sync-client'; import { dismissedAlerts } from '../../../stores/dismissed-alerts'; import { modulesState } from '../../../stores/modules'; @@ -18,9 +19,10 @@ import { castToString } from '../../../utils/cast-to-string'; import debounce from '../../../utils/debounce'; import PopOut from '../elements/PopOut.svelte'; - import ScoreContext from '../elements/ScoreContext.svelte'; import History from './History.svelte'; + // @todo - move score-context markup/styles here, as it's not used anywhere else. + // Flat list of which modules are active; useful for tracking changes in state. export let activeModules: boolean[]; export let criticalCssCreated: number; @@ -145,11 +147,11 @@ {/if} {#if ! isLoading && ! loadError} - + {/if} - - - - diff --git a/projects/plugins/boost/app/assets/src/js/react-components/components/activate-license/index.tsx b/projects/plugins/boost/app/assets/src/js/react-components/components/activate-license/index.tsx new file mode 100644 index 0000000000000..822652b17fa80 --- /dev/null +++ b/projects/plugins/boost/app/assets/src/js/react-components/components/activate-license/index.tsx @@ -0,0 +1,24 @@ +import { createInterpolateElement } from '@wordpress/element'; +import { __ } from '@wordpress/i18n'; +import styles from './styles.module.scss'; + +const ActivateLicense = () => { + const activateLicenseUrl = 'admin.php?page=my-jetpack#/add-license'; + + return ( +

+ { createInterpolateElement( + __( + 'Already have an existing plan or license key? Click here to get started', + 'jetpack-boost' + ), + { + // eslint-disable-next-line jsx-a11y/anchor-has-content + link: , + } + ) } +

+ ); +}; + +export default ActivateLicense; diff --git a/projects/plugins/boost/app/assets/src/js/react-components/components/activate-license/styles.module.scss b/projects/plugins/boost/app/assets/src/js/react-components/components/activate-license/styles.module.scss new file mode 100644 index 0000000000000..4f3f5159d9cb6 --- /dev/null +++ b/projects/plugins/boost/app/assets/src/js/react-components/components/activate-license/styles.module.scss @@ -0,0 +1,12 @@ +.activate-license { + font-size: 13px; +} + +.link { + color: var( --blue-50 ) !important; + + &:hover, + &:active { + color: var( --blue-60 ) !important; + } +} diff --git a/projects/plugins/boost/app/assets/src/js/react-components/common/back-button/BackButton.tsx b/projects/plugins/boost/app/assets/src/js/react-components/components/back-button/index.tsx similarity index 100% rename from projects/plugins/boost/app/assets/src/js/react-components/common/back-button/BackButton.tsx rename to projects/plugins/boost/app/assets/src/js/react-components/components/back-button/index.tsx diff --git a/projects/plugins/boost/app/assets/src/js/react-components/components/image-cdn-recommendation/index.tsx b/projects/plugins/boost/app/assets/src/js/react-components/components/image-cdn-recommendation/index.tsx new file mode 100644 index 0000000000000..01d14ec5bba07 --- /dev/null +++ b/projects/plugins/boost/app/assets/src/js/react-components/components/image-cdn-recommendation/index.tsx @@ -0,0 +1,28 @@ +import { createInterpolateElement } from '@wordpress/element'; +import { __ } from '@wordpress/i18n'; +import styles from './styles.module.scss'; + +const ImageCdnRecommendation = () => { + return ( + <> +

+ { createInterpolateElement( + __( 'We recommend enabling the Image CDN.', 'jetpack-boost' ), + { + b: , + } + ) } +

+

+ + { __( + "Jetpack Boost's Image CDN can automatically resize many images to the correct size for you.", + 'jetpack-boost' + ) } + +

+ + ); +}; + +export default ImageCdnRecommendation; diff --git a/projects/plugins/boost/app/assets/src/js/react-components/components/image-cdn-recommendation/styles.module.scss b/projects/plugins/boost/app/assets/src/js/react-components/components/image-cdn-recommendation/styles.module.scss new file mode 100644 index 0000000000000..cfc5025c9d125 --- /dev/null +++ b/projects/plugins/boost/app/assets/src/js/react-components/components/image-cdn-recommendation/styles.module.scss @@ -0,0 +1,7 @@ +.paragraph { + margin-top: 0 !important; +} + +.paragraph:last-of-type { + margin-bottom: 0 !important; +} diff --git a/projects/plugins/boost/app/assets/src/js/react-components/components/isa-hero/index.tsx b/projects/plugins/boost/app/assets/src/js/react-components/components/isa-hero/index.tsx new file mode 100644 index 0000000000000..8d07461fb7e5b --- /dev/null +++ b/projects/plugins/boost/app/assets/src/js/react-components/components/isa-hero/index.tsx @@ -0,0 +1,95 @@ +import { IconTooltip } from '@automattic/jetpack-components'; +import classNames from 'classnames'; +import { createInterpolateElement } from '@wordpress/element'; +import { __, _n, sprintf } from '@wordpress/i18n'; +import ImageCdnRecommendation from '../image-cdn-recommendation'; +import styles from './styles.module.scss'; + +// removed in:fade={{ duration: 300, easing: quadOut }} from .jb-hero + +export const Hero = ( { + needsRefresh, + refresh, + isImageCdnModuleActive, + isaLastUpdated, + hasActiveGroup, + totalIssueCount, +} ) => { + const formatter = new Intl.DateTimeFormat( 'en-US', { + month: 'long', + day: 'numeric', + hour: 'numeric', + minute: 'numeric', + hour12: true, + } ); + + const lastUpdated = formatter.format( isaLastUpdated ); + const showLatestReport = hasActiveGroup && !! isaLastUpdated; + + return ( + <> + { showLatestReport ? ( + + ) : ( + <> +   +

 

+ + ) } + + ); +}; diff --git a/projects/plugins/boost/app/assets/src/js/react-components/components/isa-hero/styles.module.scss b/projects/plugins/boost/app/assets/src/js/react-components/components/isa-hero/styles.module.scss new file mode 100644 index 0000000000000..1e18f94b38565 --- /dev/null +++ b/projects/plugins/boost/app/assets/src/js/react-components/components/isa-hero/styles.module.scss @@ -0,0 +1,29 @@ +.hero { + padding: 50px 0 30px; + display: flex; + flex-direction: column; + gap: calc( var( --gap ) / 2 ); +} + +@keyframes fadeIn { + from { + opacity: 0; + } + + to { + opacity: 1; + } +} + +.fade-in { + animation-duration: 300ms; + animation-name: fadeIn; +} + +.tooltip { + margin-left: 8px; +} + +.tooltip button svg { + fill: var( --gray-30 ); +} diff --git a/projects/plugins/boost/app/assets/src/js/react-components/components/isa-other-group-context/index.tsx b/projects/plugins/boost/app/assets/src/js/react-components/components/isa-other-group-context/index.tsx new file mode 100644 index 0000000000000..7aeacc50dc545 --- /dev/null +++ b/projects/plugins/boost/app/assets/src/js/react-components/components/isa-other-group-context/index.tsx @@ -0,0 +1,29 @@ +import { IconTooltip } from '@automattic/jetpack-components'; +import { __ } from '@wordpress/i18n'; +import styles from './styles.module.scss'; + +const OtherGroupContext = () => { + return ( + +

+ { __( + 'In addition to the Homepage, Pages and Posts, Boost will also analyze the following custom post types found on your site:', + 'jetpack-boost' + ) } +

+
    + { Object.entries( Jetpack_Boost.site.postTypes ).map( ( [ key, value ] ) => ( +
  • { value }
    • + ) ) } +
+ + ); +}; + +export default OtherGroupContext; diff --git a/projects/plugins/boost/app/assets/src/js/react-components/components/isa-other-group-context/styles.module.scss b/projects/plugins/boost/app/assets/src/js/react-components/components/isa-other-group-context/styles.module.scss new file mode 100644 index 0000000000000..bcc3f099bd99b --- /dev/null +++ b/projects/plugins/boost/app/assets/src/js/react-components/components/isa-other-group-context/styles.module.scss @@ -0,0 +1,11 @@ +.tooltip { + margin-left: 8px; +} + +.tooltip p:first-child { + margin-top: 0; +} + +.tooltip button svg { + fill: var( --gray-30 ); +} diff --git a/projects/plugins/boost/app/assets/src/js/react-components/pages/settings/elements/MinifyMeta.tsx b/projects/plugins/boost/app/assets/src/js/react-components/components/minify-meta/index.tsx similarity index 96% rename from projects/plugins/boost/app/assets/src/js/react-components/pages/settings/elements/MinifyMeta.tsx rename to projects/plugins/boost/app/assets/src/js/react-components/components/minify-meta/index.tsx index 459fe7ee3d773..c57b65e9e45c3 100644 --- a/projects/plugins/boost/app/assets/src/js/react-components/pages/settings/elements/MinifyMeta.tsx +++ b/projects/plugins/boost/app/assets/src/js/react-components/components/minify-meta/index.tsx @@ -1,7 +1,7 @@ import { DataSyncProvider } from '@automattic/jetpack-react-data-sync-client'; import { useEffect, useState } from 'react'; import { __, sprintf } from '@wordpress/i18n'; -import { type Props, useMetaQuery, useConfig } from '../../../../stores/minify'; +import { type Props, useMetaQuery, useConfig } from '../../../stores/minify'; const MetaComponent = ( { inputLabel, buttonText, placeholder, datasyncKey }: Props ) => { const config = useConfig(); diff --git a/projects/plugins/boost/app/assets/src/js/react-components/sections/score/context-tooltip/index.tsx b/projects/plugins/boost/app/assets/src/js/react-components/sections/score/context-tooltip/index.tsx new file mode 100644 index 0000000000000..57c1789a64a46 --- /dev/null +++ b/projects/plugins/boost/app/assets/src/js/react-components/sections/score/context-tooltip/index.tsx @@ -0,0 +1,57 @@ +import { IconTooltip } from '@automattic/jetpack-components'; +import { __ } from '@wordpress/i18n'; +import styles from './styles.module.scss'; + +const ContextTooltip = () => { + return ( + +

+ { __( + "Your Overall Score is a summary of your website performance across both mobile and desktop devices. It gives a general idea of your sites' overall performance.", + 'jetpack-boost' + ) } +

+ + + + + + + + + + + + + + + +
A90+
B75 - 90
C50 - 75
+ + + + + + + + + + + + + + + +
D35 - 50
E25 - 35
F0 - 25
+ + ); +}; + +export default ContextTooltip; diff --git a/projects/plugins/boost/app/assets/src/js/react-components/sections/score/context-tooltip/styles.module.scss b/projects/plugins/boost/app/assets/src/js/react-components/sections/score/context-tooltip/styles.module.scss new file mode 100644 index 0000000000000..443b53c20046d --- /dev/null +++ b/projects/plugins/boost/app/assets/src/js/react-components/sections/score/context-tooltip/styles.module.scss @@ -0,0 +1,22 @@ +.table { + width: 49%; + margin: 0; + display: inline-block; +} + +.table td { + padding-left: 10px; +} + +.tooltip { + margin: 8px 0 0 6px; +} + +.tooltip p:first-child { + margin-top: 0; +} + +.tooltip button svg { + margin: 0; + fill: var( --gray-30 ); +} diff --git a/projects/plugins/boost/app/assets/src/js/react-components/sections/support/index.tsx b/projects/plugins/boost/app/assets/src/js/react-components/sections/support/index.tsx new file mode 100644 index 0000000000000..a21421761e37d --- /dev/null +++ b/projects/plugins/boost/app/assets/src/js/react-components/sections/support/index.tsx @@ -0,0 +1,34 @@ +import { __ } from '@wordpress/i18n'; +import { openPaidSupport } from '../../../utils/paid-plan'; +import styles from './styles.module.scss'; + +const Support = () => { + return ( +
+
+
+
+

{ __( "We're here to help", 'jetpack-boost' ) }

+

+ { __( + 'Your paid plan gives you access to prioritized Jetpack Boost support', + 'jetpack-boost' + ) } +

+
+
+ +
+
+
+
+ ); +}; + +export default Support; diff --git a/projects/plugins/boost/app/assets/src/js/react-components/sections/support/styles.module.scss b/projects/plugins/boost/app/assets/src/js/react-components/sections/support/styles.module.scss new file mode 100644 index 0000000000000..29f4a92f9a607 --- /dev/null +++ b/projects/plugins/boost/app/assets/src/js/react-components/sections/support/styles.module.scss @@ -0,0 +1,13 @@ +.support { + display: grid; + grid-template-columns: auto auto; + align-items: center; +} + +.title { + margin-bottom: 24px !important; // @todo - use variable $halfling +} + +.cta { + text-align: right; +} diff --git a/projects/plugins/boost/app/assets/src/js/sections/Header.svelte b/projects/plugins/boost/app/assets/src/js/sections/Header.svelte index ac380041b72a8..1a4d5704e37e4 100644 --- a/projects/plugins/boost/app/assets/src/js/sections/Header.svelte +++ b/projects/plugins/boost/app/assets/src/js/sections/Header.svelte @@ -1,7 +1,7 @@