-
Notifications
You must be signed in to change notification settings - Fork 800
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Backup: decouple connection screens from useConnection hook (#38948)
* Add backup connection screen components * Add useBackupProductInfo hook This hook will fetch and manage backup product pricing information needed on connection screens * Rename useBackupProductInfo import * Refactor useConnection hook, decouple components Moved BackupConnectionScreen and BackupSecondaryAdminConnectionScreen away from this hook. * Update useConnection hook jsdoc * Update usage of useConnection hook - Replaced destructured array usage with direct connectionStatus assignment. - Use BackupConnectionScreen and BackupSecondaryAdminConnectionScreen directly. * Delete assets - These assets were moved inside backup-connection-screen component. - connect-right.png wasn’t in use * changelog * Fix lint issue
- Loading branch information
Showing
14 changed files
with
162 additions
and
131 deletions.
There are no files selected for viewing
4 changes: 4 additions & 0 deletions
4
projects/packages/backup/changelog/fix-backup-duplicated-calls
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,4 @@ | ||
| Significance: patch | ||
| Type: fixed | ||
|
|
||
| Decoupled backup connection screens from useConnection hook to avoid unnecessary loading and prevent duplicated API calls. |
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
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
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
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
File renamed without changes
File renamed without changes
File renamed without changes
83 changes: 83 additions & 0 deletions
83
projects/packages/backup/src/js/components/backup-connection-screen/index.js
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,83 @@ | ||
| import { JetpackVaultPressBackupLogo, Testimonials } from '@automattic/jetpack-components'; | ||
| import { ConnectScreenRequiredPlan } from '@automattic/jetpack-connection'; | ||
| import apiFetch from '@wordpress/api-fetch'; | ||
| import { useSelect } from '@wordpress/data'; | ||
| import { useCallback } from '@wordpress/element'; | ||
| import { __ } from '@wordpress/i18n'; | ||
| import React from 'react'; | ||
| import { useBackupProductInfo } from '../../hooks/use-backup-product-info'; | ||
| import { STORE_ID } from '../../store'; | ||
| import BackupPromotionBlock from '../backup-promotion'; | ||
| import { BackupVideoSection } from '../backup-video-section'; | ||
| import { WhyINeedVPBackup } from '../why-i-need-vp-backup'; | ||
| import benGiordanoTestimonial from './assets/ben-giordano-testimonial.png'; | ||
| import timFerrissTestimonial from './assets/tim-ferriss-testimonial.png'; | ||
|
|
||
| const testimonials = [ | ||
| { | ||
| quote: __( | ||
| 'Millions of people depend on my site, and downtime isn’t an option. Jetpack VaultPress Backup handles my site security and backups so I can focus on creation.', | ||
| 'jetpack-backup-pkg' | ||
| ), | ||
| author: 'Tim Ferriss', | ||
| profession: __( 'Author / Investor / Podcaster', 'jetpack-backup-pkg' ), | ||
| img: timFerrissTestimonial, | ||
| }, | ||
| { | ||
| quote: __( | ||
| 'Our developers use VaultPress Backup all the time. It’s a one‑click way to return to where we were before things got wonky. It gives us a little emergency parachute so if we’re working on a customization that breaks everything, we lose minutes, not hours.', | ||
| 'jetpack-backup-pkg' | ||
| ), | ||
| author: 'Ben Giordano', | ||
| profession: __( 'Founder, FreshySites.com', 'jetpack-backup-pkg' ), | ||
|
|
||
| img: benGiordanoTestimonial, | ||
| }, | ||
| ]; | ||
|
|
||
| export const BackupConnectionScreen = () => { | ||
| const APINonce = useSelect( select => select( STORE_ID ).getAPINonce(), [] ); | ||
| const APIRoot = useSelect( select => select( STORE_ID ).getAPIRoot(), [] ); | ||
| const registrationNonce = useSelect( select => select( STORE_ID ).getRegistrationNonce(), [] ); | ||
| const { price, priceAfter } = useBackupProductInfo(); | ||
|
|
||
| const checkSiteHasBackupProduct = useCallback( | ||
| () => apiFetch( { path: '/jetpack/v4/has-backup-plan' } ), | ||
| [] | ||
| ); | ||
|
|
||
| return ( | ||
| <> | ||
| <ConnectScreenRequiredPlan | ||
| buttonLabel={ __( 'Get VaultPress Backup', 'jetpack-backup-pkg' ) } | ||
| priceAfter={ priceAfter } | ||
| priceBefore={ price } | ||
| pricingIcon={ <JetpackVaultPressBackupLogo showText={ false } /> } | ||
| pricingTitle={ __( 'VaultPress Backup', 'jetpack-backup-pkg' ) } | ||
| title={ __( 'The best real-time WordPress backups', 'jetpack-backup-pkg' ) } | ||
| apiRoot={ APIRoot } | ||
| apiNonce={ APINonce } | ||
| registrationNonce={ registrationNonce } | ||
| from="jetpack-backup" | ||
| redirectUri="admin.php?page=jetpack-backup" | ||
| wpcomProductSlug="jetpack_backup_t1_yearly" | ||
| siteProductAvailabilityHandler={ checkSiteHasBackupProduct } | ||
| logo={ <></> } | ||
| rna | ||
| > | ||
| <BackupPromotionBlock /> | ||
| </ConnectScreenRequiredPlan> | ||
|
|
||
| <Testimonials testimonials={ testimonials } /> | ||
|
|
||
| <BackupVideoSection | ||
| registrationNonce={ registrationNonce } | ||
| apiRoot={ APIRoot } | ||
| apiNonce={ APINonce } | ||
| siteProductAvailabilityHandler={ checkSiteHasBackupProduct } | ||
| /> | ||
|
|
||
| <WhyINeedVPBackup /> | ||
| </> | ||
| ); | ||
| }; |
32 changes: 32 additions & 0 deletions
32
projects/packages/backup/src/js/components/backup-connection-screen/secondary-admin.js
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,32 @@ | ||
| import { JetpackVaultPressBackupLogo } from '@automattic/jetpack-components'; | ||
| import { ConnectScreen } from '@automattic/jetpack-connection'; | ||
| import { useSelect } from '@wordpress/data'; | ||
| import { __ } from '@wordpress/i18n'; | ||
| import React from 'react'; | ||
| import { STORE_ID } from '../../store'; | ||
| import connectImage from './assets/connect-backup.png'; | ||
|
|
||
| export const BackupSecondaryAdminConnectionScreen = () => { | ||
| const APINonce = useSelect( select => select( STORE_ID ).getAPINonce(), [] ); | ||
| const APIRoot = useSelect( select => select( STORE_ID ).getAPIRoot(), [] ); | ||
| const registrationNonce = useSelect( select => select( STORE_ID ).getRegistrationNonce(), [] ); | ||
|
|
||
| return ( | ||
| <ConnectScreen | ||
| title={ __( 'Save every change and get back online quickly', 'jetpack-backup-pkg' ) } | ||
| buttonLabel={ __( 'Log in to continue', 'jetpack-backup-pkg' ) } | ||
| apiRoot={ APIRoot } | ||
| apiNonce={ APINonce } | ||
| registrationNonce={ registrationNonce } | ||
| images={ [ connectImage ] } | ||
| from="jetpack-backup" | ||
| redirectUri="admin.php?page=jetpack-backup" | ||
| logo={ <JetpackVaultPressBackupLogo /> } | ||
| > | ||
| <p> | ||
| It looks like your site already has a backup plan activated. All you need to do is log in | ||
| with your WordPress account. | ||
| </p> | ||
| </ConnectScreen> | ||
| ); | ||
| }; |
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
29 changes: 29 additions & 0 deletions
29
projects/packages/backup/src/js/hooks/use-backup-product-info.js
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,29 @@ | ||
| import apiFetch from '@wordpress/api-fetch'; | ||
| import { useState, useEffect, useCallback } from '@wordpress/element'; | ||
|
|
||
| /** | ||
| * Custom hook to fetch and manage backup product pricing information. | ||
| * | ||
| * @return {object} An object containing the current product price and the price after any introductory offer. | ||
| */ | ||
| export function useBackupProductInfo() { | ||
| const [ price, setPrice ] = useState( 0 ); | ||
| const [ priceAfter, setPriceAfter ] = useState( 0 ); | ||
|
|
||
| const fetchBackupProductInfo = useCallback( () => { | ||
| return apiFetch( { path: '/jetpack/v4/backup-promoted-product-info' } ); | ||
| }, [] ); | ||
|
|
||
| useEffect( () => { | ||
| fetchBackupProductInfo().then( res => { | ||
| setPrice( res.cost / 12 ); | ||
| if ( res.introductory_offer ) { | ||
| setPriceAfter( res.introductory_offer.cost_per_interval / 12 ); | ||
| } else { | ||
| setPriceAfter( res.cost / 12 ); | ||
| } | ||
| } ); | ||
| }, [ fetchBackupProductInfo ] ); | ||
|
|
||
| return { price, priceAfter }; | ||
| } |
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
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 |
|---|---|---|
| @@ -1,133 +1,16 @@ | ||
| import { JetpackVaultPressBackupLogo, Testimonials } from '@automattic/jetpack-components'; | ||
| import { | ||
| ConnectScreenRequiredPlan, | ||
| ConnectScreen, | ||
| CONNECTION_STORE_ID, | ||
| } from '@automattic/jetpack-connection'; | ||
| import apiFetch from '@wordpress/api-fetch'; | ||
| import { CONNECTION_STORE_ID } from '@automattic/jetpack-connection'; | ||
| import { useSelect } from '@wordpress/data'; | ||
| import { useState, useEffect } from '@wordpress/element'; | ||
| import { __ } from '@wordpress/i18n'; | ||
| import React, { useCallback } from 'react'; | ||
| import BackupPromotionBlock from '../components/backup-promotion'; | ||
| import { BackupVideoSection } from '../components/backup-video-section'; | ||
| import { WhyINeedVPBackup } from '../components/why-i-need-vp-backup'; | ||
| import { STORE_ID } from '../store'; | ||
| import benGiordanoTestimonial from './assets/ben-giordano-testimonial.png'; | ||
| import connectImage from './assets/connect-backup.png'; | ||
| import timFerrissTestimonial from './assets/tim-ferriss-testimonial.png'; | ||
|
|
||
| const testimonials = [ | ||
| { | ||
| quote: __( | ||
| 'Millions of people depend on my site, and downtime isn’t an option. Jetpack VaultPress Backup handles my site security and backups so I can focus on creation.', | ||
| 'jetpack-backup-pkg' | ||
| ), | ||
| author: 'Tim Ferriss', | ||
| profession: __( 'Author / Investor / Podcaster', 'jetpack-backup-pkg' ), | ||
| img: timFerrissTestimonial, | ||
| }, | ||
| { | ||
| quote: __( | ||
| 'Our developers use VaultPress Backup all the time. It’s a one‑click way to return to where we were before things got wonky. It gives us a little emergency parachute so if we’re working on a customization that breaks everything, we lose minutes, not hours.', | ||
| 'jetpack-backup-pkg' | ||
| ), | ||
| author: 'Ben Giordano', | ||
| profession: __( 'Founder, FreshySites.com', 'jetpack-backup-pkg' ), | ||
|
|
||
| img: benGiordanoTestimonial, | ||
| }, | ||
| ]; | ||
|
|
||
| /** | ||
| * Expose the `connectionStatus` state object and `BackupConnectionScreen` to show a component used for connection. | ||
| * Expose the `connectionStatus` state object from the Jetpack connection store. | ||
| * | ||
| * @return {Array} connectionStatus, BackupConnectionScreen | ||
| * @return {object} connectionStatus The connection status object. | ||
| */ | ||
| export default function useConnection() { | ||
| const APINonce = useSelect( select => select( STORE_ID ).getAPINonce(), [] ); | ||
| const APIRoot = useSelect( select => select( STORE_ID ).getAPIRoot(), [] ); | ||
| const registrationNonce = useSelect( select => select( STORE_ID ).getRegistrationNonce(), [] ); | ||
| const connectionStatus = useSelect( | ||
| select => select( CONNECTION_STORE_ID ).getConnectionStatus(), | ||
| [] | ||
| ); | ||
| const [ price, setPrice ] = useState( 0 ); | ||
| const [ priceAfter, setPriceAfter ] = useState( 0 ); | ||
|
|
||
| const checkSiteHasBackupProduct = useCallback( | ||
| () => apiFetch( { path: '/jetpack/v4/has-backup-plan' } ), | ||
| [] | ||
| ); | ||
|
|
||
| useEffect( () => { | ||
| apiFetch( { path: '/jetpack/v4/backup-promoted-product-info' } ).then( res => { | ||
| setPrice( res.cost / 12 ); | ||
| if ( res.introductory_offer ) { | ||
| setPriceAfter( res.introductory_offer.cost_per_interval / 12 ); | ||
| } else { | ||
| setPriceAfter( res.cost / 12 ); | ||
| } | ||
| } ); | ||
| }, [] ); | ||
|
|
||
| const BackupConnectionScreen = () => { | ||
| return ( | ||
| <> | ||
| <ConnectScreenRequiredPlan | ||
| buttonLabel={ __( 'Get VaultPress Backup', 'jetpack-backup-pkg' ) } | ||
| priceAfter={ priceAfter } | ||
| priceBefore={ price } | ||
| pricingIcon={ <JetpackVaultPressBackupLogo showText={ false } /> } | ||
| pricingTitle={ __( 'VaultPress Backup', 'jetpack-backup-pkg' ) } | ||
| title={ __( 'The best real-time WordPress backups', 'jetpack-backup-pkg' ) } | ||
| apiRoot={ APIRoot } | ||
| apiNonce={ APINonce } | ||
| registrationNonce={ registrationNonce } | ||
| from="jetpack-backup" | ||
| redirectUri="admin.php?page=jetpack-backup" | ||
| wpcomProductSlug="jetpack_backup_t1_yearly" | ||
| siteProductAvailabilityHandler={ checkSiteHasBackupProduct } | ||
| logo={ <></> } | ||
| rna | ||
| > | ||
| <BackupPromotionBlock /> | ||
| </ConnectScreenRequiredPlan> | ||
|
|
||
| <Testimonials testimonials={ testimonials } /> | ||
|
|
||
| <BackupVideoSection | ||
| registrationNonce={ registrationNonce } | ||
| apiRoot={ APIRoot } | ||
| apiNonce={ APINonce } | ||
| siteProductAvailabilityHandler={ checkSiteHasBackupProduct } | ||
| /> | ||
|
|
||
| <WhyINeedVPBackup /> | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| const BackupSecondaryAdminConnectionScreen = () => { | ||
| return ( | ||
| <ConnectScreen | ||
| title={ __( 'Save every change and get back online quickly', 'jetpack-backup-pkg' ) } | ||
| buttonLabel={ __( 'Log in to continue', 'jetpack-backup-pkg' ) } | ||
| apiRoot={ APIRoot } | ||
| apiNonce={ APINonce } | ||
| registrationNonce={ registrationNonce } | ||
| images={ [ connectImage ] } | ||
| from="jetpack-backup" | ||
| redirectUri="admin.php?page=jetpack-backup" | ||
| logo={ <JetpackVaultPressBackupLogo /> } | ||
| > | ||
| <p> | ||
| It looks like your site already has a backup plan activated. All you need to do is log in | ||
| with your WordPress account. | ||
| </p> | ||
| </ConnectScreen> | ||
| ); | ||
| }; | ||
|
|
||
| return [ connectionStatus, BackupConnectionScreen, BackupSecondaryAdminConnectionScreen ]; | ||
| return connectionStatus; | ||
| } |