Fix OC promotional inbox note CTA (#4512)

* Fix OC promotional banner CTA

* Scrolling down to OC setting

* Renaming OC component

* Changelog and readme entries

* Fix tests

* Fix changelog and readme entries

* Adding headingRef as a useEffect dependency

* Making the activate now link constant private

* Making the class final

* Update client/settings/advanced-settings-section/optimized-checkout-feature.js

Co-authored-by: daledupreez <[email protected]>

* Change highlight query param name

* Update changelog.txt

Co-authored-by: daledupreez <[email protected]>

* Readme entry update

* Fix tests

---------

Co-authored-by: daledupreez <[email protected]>

Author: wjrosa

changelog.txt

@@ -1,6 +1,7 @@
 *** Changelog ***
 
 = 9.8.0 - xxxx-xx-xx =
+* Fix - Update the Optimized Checkout promotional inbox note to link to the relevant section in the Stripe settings page
 * Add - Makes the Optimized Checkout feature available for all merchants by default
 * Add - Adds a new bulk action option to the subscriptions listing screen to check for detached payment methods
 * Dev - Use product type constants that were added in WooCommerce 9.7

client/settings/advanced-settings-section/__tests__/single-payment-element-feature.test.js renamed to client/settings/advanced-settings-section/__tests__/optimized-checkout-feature.test.js

@@ -1,14 +1,14 @@
 import { render, screen } from '@testing-library/react';
 import React, { useContext } from 'react';
 import userEvent from '@testing-library/user-event';
-import SinglePaymentElementFeature from 'wcstripe/settings/advanced-settings-section/single-payment-element-feature';
+import OptimizedCheckoutFeature from 'wcstripe/settings/advanced-settings-section/optimized-checkout-feature';
 import UpeToggleContext from 'wcstripe/settings/upe-toggle/context';
 
 jest.useFakeTimers();
 
 describe( 'Single Payment Element feature setting', () => {
 	it( 'should render', () => {
-		render( <SinglePaymentElementFeature /> );
+		render( <OptimizedCheckoutFeature /> );
 
 		expect(
 			screen.queryByText(
@@ -29,7 +29,7 @@ describe( 'Single Payment Element feature setting', () => {
 		render(
 			<div>
 				<UpdateUpeDisabledFlagMock />
-				<SinglePaymentElementFeature />
+				<OptimizedCheckoutFeature />
 			</div>
 		);
 

client/settings/advanced-settings-section/index.js

@@ -6,7 +6,7 @@ import SettingsSection from '../settings-section';
 import CardBody from '../card-body';
 import DebugMode from './debug-mode';
 import LoadableSettingsSection from 'wcstripe/settings/loadable-settings-section';
-import SinglePaymentElementFeature from 'wcstripe/settings/advanced-settings-section/single-payment-element-feature';
+import OptimizedCheckoutFeature from 'wcstripe/settings/advanced-settings-section/optimized-checkout-feature';
 
 const AdvancedSettingsDescription = () => (
 	<>
@@ -28,7 +28,7 @@ const AdvancedSettings = () => {
 				<Card>
 					<CardBody>
 						<DebugMode />
-						{ isOcAvailable && <SinglePaymentElementFeature /> }
+						{ isOcAvailable && <OptimizedCheckoutFeature /> }
 					</CardBody>
 				</Card>
 			</LoadableSettingsSection>

client/settings/advanced-settings-section/single-payment-element-feature.js renamed to client/settings/advanced-settings-section/optimized-checkout-feature.js

@@ -5,13 +5,15 @@ import {
 	ExternalLink,
 	TextControl,
 } from '@wordpress/components';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
+import { getQuery } from '@woocommerce/navigation';
 import { useIsOCEnabled, useIsUpeEnabled, useOCTitle } from '../../data';
 
-const SinglePaymentElementFeature = () => {
+const OptimizedCheckoutFeature = () => {
 	const [ isOCEnabled, setIsOCEnabled ] = useIsOCEnabled();
 	const [ OCTitle, setOCTitle ] = useOCTitle();
 	const [ isUpeEnabled ] = useIsUpeEnabled();
+	const headingRef = useRef( null );
 
 	useEffect( () => {
 		if ( ! isUpeEnabled ) {
@@ -27,6 +29,20 @@ const SinglePaymentElementFeature = () => {
 		setLocalOCTitle( OCTitle );
 	}, [ OCTitle ] );
 
+	useEffect( () => {
+		if ( ! headingRef.current ) {
+			return;
+		}
+
+		const { highlight } = getQuery();
+		if ( highlight === 'enable-optimized-checkout' ) {
+			headingRef.current.scrollIntoView( {
+				behavior: 'smooth',
+				block: 'start',
+			} );
+		}
+	}, [ headingRef ] );
+
 	const handleTitleChange = ( value ) => {
 		setLocalOCTitle( value );
 	};
@@ -45,7 +61,7 @@ const SinglePaymentElementFeature = () => {
 
 	return (
 		<>
-			<h4>
+			<h4 ref={ headingRef }>
 				{ __(
 					'Enable Optimized Checkout Suite (recommended)',
 					'woocommerce-gateway-stripe'
@@ -89,4 +105,4 @@ const SinglePaymentElementFeature = () => {
 	);
 };
 
-export default SinglePaymentElementFeature;
+export default OptimizedCheckoutFeature;

includes/notes/class-wc-stripe-oc-promotion-note.php

@@ -14,7 +14,7 @@
 /**
  * Class WC_Stripe_OC_Promotion_Note
  */
-class WC_Stripe_OC_Promotion_Note {
+final class WC_Stripe_OC_Promotion_Note {
 	use NoteTraits;
 
 	/**
@@ -23,9 +23,9 @@ class WC_Stripe_OC_Promotion_Note {
 	const NOTE_NAME = 'wc-stripe-oc-promotion-note';
 
 	/**
-	 * Link to learn more about OC.
+	 * Link to activate OC in store.
 	 */
-	const LEARN_MORE_LINK = 'https://woocommerce.com/document/stripe/admin-experience/optimized-checkout-suite/';
+	private const ACTIVATE_NOW_LINK = '?page=wc-settings&tab=checkout&section=stripe&panel=settings&highlight=enable-optimized-checkout';
 
 	/**
 	 * Get the note.
@@ -41,8 +41,8 @@ public static function get_note() {
 		$note->set_source( 'woocommerce-gateway-stripe' );
 		$note->add_action(
 			self::NOTE_NAME,
-			__( 'Learn more', 'woocommerce-gateway-stripe' ),
-			self::LEARN_MORE_LINK,
+			__( 'Activate now', 'woocommerce-gateway-stripe' ),
+			self::ACTIVATE_NOW_LINK,
 			$note_class::E_WC_ADMIN_NOTE_UNACTIONED,
 			true
 		);

readme.txt

@@ -111,6 +111,7 @@ If you get stuck, you can ask for help in the [Plugin Forum](https://wordpress.o
 == Changelog ==
 
 = 9.8.0 - xxxx-xx-xx =
+* Fix - Update the Optimized Checkout promotional inbox note to link to the relevant section in the Stripe settings page
 * Add - Makes the Optimized Checkout feature available for all merchants by default
 * Add - Adds a new bulk action option to the subscriptions listing screen to check for detached payment methods
 * Dev - Use product type constants that were added in WooCommerce 9.7

tests/phpunit/Notes/WC_Stripe_OC_Promotion_Note_Test.php

@@ -25,7 +25,7 @@ public function test_get_note() {
 
 		list( $learn_more_action ) = $note->get_actions();
 		$this->assertSame( 'wc-stripe-oc-promotion-note', $learn_more_action->name );
-		$this->assertSame( 'Learn more', $learn_more_action->label );
-		$this->assertSame( 'https://woocommerce.com/document/stripe/admin-experience/optimized-checkout-suite/', $learn_more_action->query );
+		$this->assertSame( 'Activate now', $learn_more_action->label );
+		$this->assertSame( '?page=wc-settings&tab=checkout&section=stripe&panel=settings&highlight=enable-optimized-checkout', $learn_more_action->query );
 	}
 }