-
Notifications
You must be signed in to change notification settings - Fork 2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Jetpack Manage: Implement a modal for the "Get Score" action for Boost (
#82239) * Update LicenseLightbox to render the extraContent * Create a new component to display the license info modal for reusability * Create use-request-boost-score-mutation.ts * Create use-install-plugin-mutation.ts * Create use-install-boost.tsx * Create BoostLicenseInfoModal and use it to show boost license info modal * Fix test cases * Address PR comments * Remove useRequestBoostScore as it is no longer required * Add notice with a link to Jetpack Boost * Address PR comments
- Loading branch information
Showing
12 changed files
with
399 additions
and
157 deletions.
There are no files selected for viewing
82 changes: 82 additions & 0 deletions
82
client/jetpack-cloud/sections/agency-dashboard/sites-overview/hooks/use-install-boost.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,82 @@ | ||
| import { useQueryClient } from '@tanstack/react-query'; | ||
| import { useTranslate } from 'i18n-calypso'; | ||
| import { useEffect, useCallback } from 'react'; | ||
| import { useDispatch } from 'calypso/state'; | ||
| import useInstallPluginMutation from 'calypso/state/jetpack-agency-dashboard/hooks/use-install-plugin-mutation'; | ||
| import { successNotice, errorNotice } from 'calypso/state/notices/actions'; | ||
| import type { Site } from '../types'; | ||
|
|
||
| export default function useInstallBoost( | ||
| siteId: number, | ||
| siteUrl: string, | ||
| queryKey: any[] | ||
| ): { | ||
| installBoost: () => void; | ||
| status: string; | ||
| } { | ||
| const translate = useTranslate(); | ||
| const dispatch = useDispatch(); | ||
| const queryClient = useQueryClient(); | ||
|
|
||
| const handleUpdateSites = useCallback( async () => { | ||
| // Cancel any current refetches, so they don't overwrite our update | ||
| await queryClient.cancelQueries( queryKey ); | ||
|
|
||
| // Update to the new value | ||
| queryClient.setQueryData( queryKey, ( oldSites: any ) => { | ||
| return { | ||
| ...oldSites, | ||
| sites: oldSites?.sites.map( ( site: Site ) => { | ||
| if ( site.blog_id === siteId ) { | ||
| return { | ||
| ...site, | ||
| has_pending_boost_one_time_score: true, | ||
| }; | ||
| } | ||
| return site; | ||
| } ), | ||
| }; | ||
| } ); | ||
| }, [ queryClient, queryKey, siteId ] ); | ||
|
|
||
| const { mutate: installPlugin, status } = useInstallPluginMutation( { | ||
| retry: false, | ||
| } ); | ||
|
|
||
| const installBoost = () => { | ||
| installPlugin( { | ||
| site_id: siteId, | ||
| plugin_slug: 'jetpack_boost', | ||
| } ); | ||
| }; | ||
|
|
||
| useEffect( () => { | ||
| if ( status === 'success' ) { | ||
| dispatch( | ||
| successNotice( | ||
| translate( | ||
| 'Jetpack Boost was successfully added to {{em}}%(siteUrl)s{{/em}}. Please allow a few minutes for performance score calculation.', | ||
| { | ||
| args: { siteUrl }, | ||
| comment: '%(siteUrl)s is the site url. Eg: example.com', | ||
| components: { | ||
| em: <em />, | ||
| }, | ||
| } | ||
| ) | ||
| ) | ||
| ); | ||
| handleUpdateSites(); | ||
| } | ||
| if ( status === 'error' ) { | ||
| dispatch( | ||
| errorNotice( translate( 'Something went wrong while installing Boost. Please try again.' ) ) | ||
| ); | ||
| } | ||
| }, [ dispatch, handleUpdateSites, status, siteUrl, translate ] ); | ||
|
|
||
| return { | ||
| installBoost, | ||
| status, | ||
| }; | ||
| } |
87 changes: 87 additions & 0 deletions
87
client/jetpack-cloud/sections/agency-dashboard/sites-overview/license-info-modal/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,87 @@ | ||
| import { useMobileBreakpoint } from '@automattic/viewport-react'; | ||
| import { useTranslate } from 'i18n-calypso'; | ||
| import page from 'page'; | ||
| import { useContext, useMemo } from 'react'; | ||
| import LicenseLightbox from 'calypso/jetpack-cloud/sections/partner-portal/license-lightbox'; | ||
| import { addQueryArgs } from 'calypso/lib/url'; | ||
| import useJetpackAgencyDashboardRecordTrackEvent from '../../hooks/use-jetpack-agency-dashboard-record-track-event'; | ||
| import SitesOverviewContext from '../context'; | ||
| import DashboardDataContext from '../dashboard-data-context'; | ||
| import { DASHBOARD_PRODUCT_SLUGS_BY_TYPE } from '../lib/constants'; | ||
|
|
||
| interface Props { | ||
| label?: string; | ||
| currentLicenseInfo: string | null; | ||
| onClose?: () => void; | ||
| siteId?: number; | ||
| extraAsideContent?: JSX.Element; | ||
| isDisabled?: boolean; | ||
| onCtaClick?: () => void; | ||
| } | ||
|
|
||
| export default function LicenseInfoModal( { | ||
| label, | ||
| currentLicenseInfo, | ||
| onClose, | ||
| siteId, | ||
| extraAsideContent, | ||
| isDisabled, | ||
| onCtaClick, | ||
| }: Props ) { | ||
| const isMobile = useMobileBreakpoint(); | ||
| const translate = useTranslate(); | ||
|
|
||
| const { hideLicenseInfo } = useContext( SitesOverviewContext ); | ||
|
|
||
| const { products } = useContext( DashboardDataContext ); | ||
| const recordEvent = useJetpackAgencyDashboardRecordTrackEvent( null, ! isMobile ); | ||
|
|
||
| const currentLicenseProductSlug = currentLicenseInfo | ||
| ? DASHBOARD_PRODUCT_SLUGS_BY_TYPE[ currentLicenseInfo ] | ||
| : null; | ||
|
|
||
| const currentLicenseProduct = useMemo( () => { | ||
| return currentLicenseProductSlug && products | ||
| ? products.find( ( product ) => product.slug === currentLicenseProductSlug ) | ||
| : null; | ||
| }, [ currentLicenseProductSlug, products ] ); | ||
|
|
||
| const onHideLicenseInfo = () => { | ||
| hideLicenseInfo(); | ||
| onClose?.(); | ||
| }; | ||
|
|
||
| const onIssueLicense = () => { | ||
| if ( ! currentLicenseProductSlug ) { | ||
| return; | ||
| } | ||
| recordEvent( 'issue_license_info', { | ||
| product: currentLicenseProductSlug, | ||
| } ); | ||
| onCtaClick?.(); | ||
| onHideLicenseInfo(); | ||
| page( | ||
| addQueryArgs( | ||
| { | ||
| product_slug: currentLicenseProductSlug, | ||
| source: 'dashboard', | ||
| site_id: siteId, | ||
| }, | ||
| '/partner-portal/issue-license/' | ||
| ) | ||
| ); | ||
| }; | ||
|
|
||
| return ( | ||
| currentLicenseProduct && ( | ||
| <LicenseLightbox | ||
| product={ currentLicenseProduct } | ||
| ctaLabel={ label ?? translate( 'Issue License' ) } | ||
| isDisabled={ isDisabled } | ||
| onActivate={ onIssueLicense } | ||
| onClose={ onHideLicenseInfo } | ||
| extraAsideContent={ extraAsideContent } | ||
| /> | ||
| ) | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.