From 94d1e2319b02b6113c972202b1e2fdd759ce6fd1 Mon Sep 17 00:00:00 2001 From: Kirk Wight Date: Mon, 15 Jun 2020 13:05:03 -0700 Subject: [PATCH] Earn: Add a Stripe connect prompt to the Donations block. (#43166) --- .../donations/donations-tabs.js | 51 --------------- .../donations/donations.js | 59 +++++++++++++++++ .../donations/edit.js | 6 +- .../donations/stripe-nudge.js | 63 +++++++++++++++++++ .../donations/style.scss | 15 +++-- .../tracking/delegate-event-tracking.js | 2 + .../wpcom-block-donations-stripe-connect.js | 15 +++++ 7 files changed, 152 insertions(+), 59 deletions(-) delete mode 100644 apps/full-site-editing/full-site-editing-plugin/donations/donations-tabs.js create mode 100644 apps/full-site-editing/full-site-editing-plugin/donations/donations.js create mode 100644 apps/full-site-editing/full-site-editing-plugin/donations/stripe-nudge.js create mode 100644 apps/wpcom-block-editor/src/wpcom/features/tracking/wpcom-block-donations-stripe-connect.js diff --git a/apps/full-site-editing/full-site-editing-plugin/donations/donations-tabs.js b/apps/full-site-editing/full-site-editing-plugin/donations/donations-tabs.js deleted file mode 100644 index 6dc40c7d2295e..0000000000000 --- a/apps/full-site-editing/full-site-editing-plugin/donations/donations-tabs.js +++ /dev/null @@ -1,51 +0,0 @@ -/** - * External dependencies - */ -import classNames from 'classnames'; - -/** - * WordPress dependencies - */ -import { useState } from '@wordpress/element'; -import { __ } from '@wordpress/i18n'; -import { Button } from '@wordpress/components'; - -const DonationsTabs = () => { - const [ activeTab, setActiveTab ] = useState( 'one-time' ); - - const isActive = ( button ) => ( activeTab === button ? 'active' : null ); - - return ( -
- - - -
- { __( 'One time', 'full-site-editing' ) } -
-
- { __( 'Monthly', 'full-site-editing' ) } -
-
- { __( 'Annually', 'full-site-editing' ) } -
-
- ); -}; - -export default DonationsTabs; diff --git a/apps/full-site-editing/full-site-editing-plugin/donations/donations.js b/apps/full-site-editing/full-site-editing-plugin/donations/donations.js new file mode 100644 index 0000000000000..514596409b7ad --- /dev/null +++ b/apps/full-site-editing/full-site-editing-plugin/donations/donations.js @@ -0,0 +1,59 @@ +/** + * External dependencies + */ +import classNames from 'classnames'; + +/** + * WordPress dependencies + */ +import { useState } from '@wordpress/element'; +import { __ } from '@wordpress/i18n'; +import { Button } from '@wordpress/components'; + +/** + * Internal dependencies + */ +import StripeNudge from './stripe-nudge'; + +const Donations = ( { stripeConnectUrl } ) => { + const [ activeTab, setActiveTab ] = useState( 'one-time' ); + + const isActive = ( button ) => ( activeTab === button ? 'active' : null ); + + return ( +
+ { stripeConnectUrl && } +
+ + + +
+ { __( 'One time', 'full-site-editing' ) } +
+
+ { __( 'Monthly', 'full-site-editing' ) } +
+
+ { __( 'Annually', 'full-site-editing' ) } +
+
+
+ ); +}; + +export default Donations; diff --git a/apps/full-site-editing/full-site-editing-plugin/donations/edit.js b/apps/full-site-editing/full-site-editing-plugin/donations/edit.js index ec5cc48551011..11e6a4e1d180b 100644 --- a/apps/full-site-editing/full-site-editing-plugin/donations/edit.js +++ b/apps/full-site-editing/full-site-editing-plugin/donations/edit.js @@ -7,7 +7,7 @@ import { __ } from '@wordpress/i18n'; /** * Internal dependencies */ -import DonationsTabs from './donations-tabs'; +import Donations from './donations'; import LoadingError from './loading-error'; import LoadingStatus from './loading-status'; import UpgradePlan from './upgrade-plan'; @@ -17,6 +17,7 @@ const Edit = () => { const [ isLoading, setIsLoading ] = useState( true ); const [ loadingError, setLoadingError ] = useState( '' ); const [ shouldUpgrade, setShouldUpgrade ] = useState( false ); + const [ stripeConnectUrl, setStripeConnectUrl ] = useState( false ); const [ upgradeUrl, setUpgradeUrl ] = useState( '' ); const mapStatusToState = ( result ) => { @@ -25,6 +26,7 @@ const Edit = () => { } else { setShouldUpgrade( result.should_upgrade_to_access_memberships ); setUpgradeUrl( result.upgrade_url ); + setStripeConnectUrl( result.connect_url ); } setIsLoading( false ); @@ -52,7 +54,7 @@ const Edit = () => { return ; } - return ; + return ; }; export default Edit; diff --git a/apps/full-site-editing/full-site-editing-plugin/donations/stripe-nudge.js b/apps/full-site-editing/full-site-editing-plugin/donations/stripe-nudge.js new file mode 100644 index 0000000000000..f25bdd1766392 --- /dev/null +++ b/apps/full-site-editing/full-site-editing-plugin/donations/stripe-nudge.js @@ -0,0 +1,63 @@ +/** + * External dependencies + */ +/** + * WordPress dependencies + */ +// eslint-disable-next-line no-restricted-imports +import { Button, Dashicon } from '@wordpress/components'; +import { Warning } from '@wordpress/block-editor'; +import { compose } from '@wordpress/compose'; +import { __ } from '@wordpress/i18n'; +import { withDispatch } from '@wordpress/data'; + +/** + * Internal dependencies + */ + +const StripeNudge = ( { autosaveAndRedirect, stripeConnectUrl } ) => ( + + { __( 'Connect', 'full-site-editing' ) } + , + ] + } + className="donations__nudge premium-content-block-nudge" + > + + + + + { __( 'Connect to Stripe to use this block on your site', 'full-site-editing' ) } + + + { __( + 'This block will be hidden from your visitors until you connect to Stripe.', + 'full-site-editing' + ) } + + + + +); + +export default compose( [ + withDispatch( ( dispatch, { stripeConnectUrl } ) => ( { + autosaveAndRedirect: async ( event ) => { + event.preventDefault(); // Don't follow the href before autosaving + await dispatch( 'core/editor' ).savePost(); + // Using window.top to escape from the editor iframe on WordPress.com + window.top.location.href = stripeConnectUrl; + }, + } ) ), +] )( StripeNudge ); diff --git a/apps/full-site-editing/full-site-editing-plugin/donations/style.scss b/apps/full-site-editing/full-site-editing-plugin/donations/style.scss index 7972f852bbf2a..b7190b7f89bee 100644 --- a/apps/full-site-editing/full-site-editing-plugin/donations/style.scss +++ b/apps/full-site-editing/full-site-editing-plugin/donations/style.scss @@ -1,27 +1,27 @@ -.donations__container { +.donations__tabs { border: 1px solid #ddd; display: grid; grid-template-columns: repeat( 3, 1fr ); } -.donations__container .components-button { +.donations__tabs .components-button { border-bottom: 1px solid #ddd; } -.donations__container .components-button:first-child.active { +.donations__tabs .components-button:first-child.active { border-right: 1px solid #ddd; } -.donations__container .components-button:nth-child( 2 ).active { +.donations__tabs .components-button:nth-child( 2 ).active { border-left: 1px solid #ddd; border-right: 1px solid #ddd; } -.donations__container .components-button:nth-child( 3 ).active { +.donations__tabs .components-button:nth-child( 3 ).active { border-left: 1px solid #ddd; } -.donations__container .components-button.active { +.donations__tabs .components-button.active { border-bottom: none; } @@ -34,3 +34,6 @@ visibility: visible; } +.donations__nudge { + margin-bottom: 32px; +} diff --git a/apps/wpcom-block-editor/src/wpcom/features/tracking/delegate-event-tracking.js b/apps/wpcom-block-editor/src/wpcom/features/tracking/delegate-event-tracking.js index 3cdc32e1f7052..9283696457582 100644 --- a/apps/wpcom-block-editor/src/wpcom/features/tracking/delegate-event-tracking.js +++ b/apps/wpcom-block-editor/src/wpcom/features/tracking/delegate-event-tracking.js @@ -9,6 +9,7 @@ import debugFactory from 'debug'; import wpcomBlockEditorCloseClick from './wpcom-block-editor-close-click'; import wpcomInserterInlineSearchTerm from './wpcom-inserter-inline-search-term'; import wpcomBlockDonationsPlanUpgrade from './wpcom-block-donations-plan-upgrade'; +import wpcomBlockDonationsStripeConnect from './wpcom-block-donations-stripe-connect'; import wpcomBlockPremiumContentPlanUpgrade from './wpcom-block-premium-content-plan-upgrade'; import wpcomBlockPremiumContentStripeConnect from './wpcom-block-premium-content-stripe-connect'; @@ -25,6 +26,7 @@ const EVENTS_MAPPING = [ wpcomBlockEditorCloseClick(), wpcomInserterInlineSearchTerm(), wpcomBlockDonationsPlanUpgrade(), + wpcomBlockDonationsStripeConnect(), wpcomBlockPremiumContentPlanUpgrade(), wpcomBlockPremiumContentStripeConnect(), ]; diff --git a/apps/wpcom-block-editor/src/wpcom/features/tracking/wpcom-block-donations-stripe-connect.js b/apps/wpcom-block-editor/src/wpcom/features/tracking/wpcom-block-donations-stripe-connect.js new file mode 100644 index 0000000000000..590d2630d0297 --- /dev/null +++ b/apps/wpcom-block-editor/src/wpcom/features/tracking/wpcom-block-donations-stripe-connect.js @@ -0,0 +1,15 @@ +/** + * Internal dependencies + */ +import tracksRecordEvent from './track-record-event'; + +/** + * Return the event definition object to track `wpcom_block_donations_stripe_connect_click `. + * + * @returns {{handler: Function, selector: string, type: string}} event object definition. + */ +export default () => ( { + selector: '.wp-block[data-type="a8c/donations"] .stripe-nudge__button', + type: 'click', + handler: () => tracksRecordEvent( 'wpcom_block_donations_stripe_connect_click' ), +} );