Refactor deactivation modal (#927)

Co-authored-by: godaddy-wordpress-bot <plugins@godaddy.com>

Author: EvanHerman

.dev/assets/admin/js/common-action-modal/index.js

@@ -1,74 +1,37 @@
+/* global goThemeDeactivateData */
+
 import PropTypes from 'prop-types';
 import { safeHTML } from '@wordpress/dom';
 import { Button, ButtonGroup, CheckboxControl, Modal, TextControl } from '@wordpress/components';
 import { useCallback, useEffect, useState } from '@wordpress/element';
 
 const language = document.documentElement.getAttribute( 'lang' ) || 'en-US';
 
-const fetchData = async ( apiUrl, getParams = null ) => {
-	const params = {
-		...getParams,
-		language,
-		random: 1,
-	};
-	let paramString = '';
-	Object.keys( params ).forEach( ( key ) => paramString += `${ key }=${ params[ key ] }&` );
-
-	try {
-		const response = await fetch( `${ apiUrl }?${ paramString.slice( 0, -1 ) }` );
-		if ( ! response.ok ) {
-			return null;
-		}
-
-		return await response.json();
-	} catch ( e ) {
-		return null;
-	}
-};
-
-const DeactivateModal = ( { apiUrl, getParams, isEvent, pageData } ) => {
+const DeactivateModal = ( { apiUrl, isEvent, pageData } ) => {
 	const [ href, setHref ] = useState( null );
 	const [ isOpen, setOpen ] = useState( false );
-	const [ feedbackData, setFeedbackData ] = useState( null );
 	const [ formData, setFormData ] = useState( {} );
 
 	useEffect( () => {
-		const getData = async () => {
-			const data = await fetchData( apiUrl, getParams );
-
-			if ( data && data.can_submit_feedback ) {
-				window.addEventListener( 'click', clickHandler );
-				setInitialData( data );
-			}
-		};
-
-		getData();
-
-		return () => {
-			window.removeEventListener( 'click', clickHandler );
-		};
-	}, [] );
-
-	const setInitialData = ( data ) => {
-		setFeedbackData( data );
-
 		const textFields = {};
-		data.choices.forEach( ( choice ) => {
+		goThemeDeactivateData.choices.forEach( ( choice ) => {
 			if ( !! choice.text_field ) {
 				textFields[ choice.text_field ] = '';
 			}
 		} );
 
+		window.addEventListener( 'click', clickHandler );
+
 		setFormData( {
-			choices: [],
+			choices: goThemeDeactivateData.choices,
 			domain: pageData.domain,
 			go_theme_version: pageData.goThemeVersion,
 			hostname: pageData.hostname,
 			language,
 			wp_version: pageData.wpVersion,
 			...textFields,
 		} );
-	};
+	}, [] );
 
 	const clickHandler = useCallback( ( e ) => {
 		if ( ! isEvent( e ) ) {
@@ -103,7 +66,7 @@ const DeactivateModal = ( { apiUrl, getParams, isEvent, pageData } ) => {
 	};
 
 	const onAction = async ( submit = false ) => {
-		if ( submit && formData.choices.length >= feedbackData.choices_min ) {
+		if ( submit && formData.choices.length >= 0 ) {
 			await fetch( apiUrl, {
 				body: JSON.stringify( formData ),
 				headers: {
@@ -117,19 +80,22 @@ const DeactivateModal = ( { apiUrl, getParams, isEvent, pageData } ) => {
 		window.location.href = href;
 	};
 
-	if ( ! isOpen || ! feedbackData ) {
+	if ( ! isOpen ) {
 		return null;
 	}
 
 	return (
 		<Modal
 			className="go-deactivate-modal"
 			onRequestClose={ () => setOpen( false ) }
-			title={ feedbackData.labels.title }
+			title={ goThemeDeactivateData.labels.title }
 		>
 			<div className="go-deactivate-modal__checkbox">
-				{ feedbackData.choices.map( ( choice ) => {
+				{ goThemeDeactivateData.choices.map( ( choice ) => {
 					const isChecked = formData.choices.indexOf( choice.slug ) >= 0;
+					if ( typeof choice !== 'object' ) {
+						return null;
+					}
 					return (
 						<div key={ choice.slug }>
 							<CheckboxControl
@@ -156,21 +122,21 @@ const DeactivateModal = ( { apiUrl, getParams, isEvent, pageData } ) => {
 					onClick={ () => onAction( true ) }
 					variant="primary"
 				>
-					{ feedbackData.labels.submit_deactivate }
+					{ goThemeDeactivateData.labels.submit_deactivate }
 				</Button>
 				<Button
 					className="go-deactivate-modal__button"
 					onClick={ () => onAction( false ) }
 					variant="link"
 				>
-					{ feedbackData.labels.skip_deactivate }
+					{ goThemeDeactivateData.labels.skip_deactivate }
 				</Button>
 			</ButtonGroup>
 
 			<footer className="go-deactivate-modal__footer">
 				<div
 					dangerouslySetInnerHTML={ {
-						__html: safeHTML( feedbackData.labels.privacy_disclaimer ),
+						__html: safeHTML( goThemeDeactivateData.labels.privacy_disclaimer ),
 					} }
 				/>
 			</footer>
@@ -180,12 +146,10 @@ const DeactivateModal = ( { apiUrl, getParams, isEvent, pageData } ) => {
 
 DeactivateModal.propTypes = {
 	apiUrl: PropTypes.string.isRequired,
-	getParams: PropTypes.object,
 	isEvent: PropTypes.func.isRequired,
 	pageData: PropTypes.object.isRequired,
 };
 
 export {
 	DeactivateModal as default,
-	fetchData,
 };

.dev/assets/admin/js/common-action-modal/test/index.spec.js

@@ -14,7 +14,7 @@ import '@testing-library/jest-dom/extend-expect';
  * Internal dependencies.
  */
 import mockData from '../../../../../tests/cypress/fixtures/network/go_optout.json';
-import Modal, { fetchData } from '../index';
+import Modal from '../index';
 
 import { enableFetchMocks } from 'jest-fetch-mock';
 enableFetchMocks();
@@ -72,6 +72,8 @@ describe( 'go-deactivate-modal', () => {
 		fetch.resetMocks();
 		fetch.mockResponse( JSON.stringify( mockData ) );
 
+		global.goThemeDeactivateData = mockData;
+
 		events = {};
 		window.addEventListener = jest.fn( ( event, callback ) => {
 			events[ event ] = callback;
@@ -82,23 +84,6 @@ describe( 'go-deactivate-modal', () => {
 		jest.clearAllMocks();
 	} );
 
-	describe( 'fetchData', () => {
-		test( 'should return feedback data', async () => {
-			const response = await fetchData( 'foo.com' );
-			expect( response ).toEqual( mockData );
-		} );
-
-		test( 'should call the fetch api', async () => {
-			const fetchMock = jest.spyOn( global, 'fetch' );
-
-			await act( async () => {
-				wrapper = setup();
-			} );
-
-			expect( fetchMock ).toHaveBeenCalledWith( 'https://wpnux.godaddy.com/v3/api/feedback/go-theme-optout?domain=foo.com&language=en-US&random=1' );
-		} );
-	} );
-
 	describe( 'closed state', () => {
 		beforeEach( async () => {
 			await act( async () => {

.dev/assets/admin/js/go-deactivate-modal.js

@@ -24,12 +24,9 @@ const GoDeactivateModal = () => {
 		return null;
 	}
 
-	const getParams = { domain };
-
 	return (
 		<DeactivateModal
 			apiUrl={ apiUrl }
-			getParams={ getParams }
 			isEvent={ isEvent }
 			pageData={ goThemeDeactivateData }
 		/>

changelog.txt

@@ -1,3 +1,7 @@
+= 1.8.14 / 2025-04-07 =
+### Updates
+- Refactor the deactivation modal. [#927](https://github.com/godaddy-wordpress/go/pull/927)
+
 = 1.8.13 / 2025-04-01 =
 ### Updates
 - Avoid adding onload attribute to stylesheet when serving AMP response. [#917](https://github.com/godaddy-wordpress/go/pull/917)

includes/classes/admin/class-go-theme-deactivation.php

@@ -57,13 +57,67 @@ public function enqueue_scripts( $hook_suffix ) {
 
 		$wpnux_export_data = json_decode( get_option( 'wpnux_export_data', '[]' ), true );
 
+		$deactivation_form_choices = array(
+			array(
+				'slug'       => 'broken-or-breaks-plugins',
+				'label'      => "It's broken or broke other plugins I'm using",
+				'is_checked' => false,
+				'text_field' => null,
+			),
+			array(
+				'slug'       => 'lack-of-support',
+				'label'      => 'Lack of help or support from GoDaddy',
+				'is_checked' => false,
+				'text_field' => null,
+			),
+			array(
+				'slug'       => 'not-enough-features',
+				'label'      => "It doesn't have the features I am looking for",
+				'is_checked' => false,
+				'text_field' => 'choice_not-enough-features_text',
+			),
+			array(
+				'slug'       => 'not-responsive',
+				'label'      => "It isn't responsive to screen size",
+				'is_checked' => false,
+				'text_field' => null,
+			),
+			array(
+				'slug'       => 'slow-website-performance',
+				'label'      => "It slows down my website's speed/load time",
+				'is_checked' => false,
+				'text_field' => null,
+			),
+		);
+
+		// Randomize the choices.
+		shuffle( $deactivation_form_choices );
+
+		// Ensure "Other Reason" is last.
+		$deactivation_form_choices[] = array(
+			'slug'       => 'other',
+			'label'      => 'Other reason:',
+			'is_checked' => false,
+			'text_field' => 'choice_other_text',
+		);
+
+		$deactivation_labels = array(
+			'privacy_disclaimer' => __( "Please do not include any personal information in your submission. We do not collect or need this information. Please see our <a href='https://www.godaddy.com/legal/agreements/privacy-policy' target='_blank'>privacy policy</a> for details.", 'go' ),
+			'skip_deactivate'    => __( 'Skip & Switch Theme', 'go' ),
+			'submit_deactivate'  => __( 'Submit & Switch Theme', 'go' ),
+			'title'              => __( 'Thanks for trying Go. Let us know how we can improve.', 'go' ),
+		);
+
 		// Pass data.
 		wp_localize_script(
 			'go-theme-deactivation',
 			'goThemeDeactivateData',
 			array(
 				'containerId'    => self::CONTAINER_ID,
 				'hostname'       => gethostname(),
+				// Localize options here.
+				'choices'        => $deactivation_form_choices,
+				'labels'         => $deactivation_labels,
 				'domain'         => site_url(),
 				'goThemeVersion' => GO_VERSION,
 				'wpVersion'      => $GLOBALS['wp_version'],

languages/go.json

@@ -17,6 +17,10 @@
   "c1b5fa03ecdb95d4a45dd1c40b02527f": "Horizontal",
   "106aecf314c1888e3d36a4edc6f5de01": "collapse child menu",
   "c6bbcc7f5459e2a48fa1be3c32bb25af": "expand child menu",
+  "39fbcc1a20fd4bdedb4aa302e71653be": "Please do not include any personal information in your submission. We do not collect or need this information. Please see our <a href='https://www.godaddy.com/legal/agreements/privacy-policy' target='_blank'>privacy policy</a> for details.",
+  "209f7a934bf1e37cbd2d97e6e4d04822": "Skip & Switch Theme",
+  "0f9b6d331e364f21e0c92aacc67a43a3": "Submit & Switch Theme",
+  "c73a52561d708b6e855945a4d6f8c6ef": "Thanks for trying Go. Let us know how we can improve.",
   "8d496fe225b423ae91cafb2913fe60fc": "Install Required Plugins",
   "4eff3a34f0ddf963f7d0610d3cb79354": "Install Plugins",
   "07867e5fd7b858b877323ffd402ac38e": "Installing Plugin: %s",