feat(prompt settings): add prompt new placements and size options (#1192

)

Automattic/newspack-popups#624 adds new placements for overlay prompts and
size option, we need to add them to the settings wizard

* test: add overlay placement to window

e21011d introduced overlay_placements so we can manage overlay placements from one place, which
broke a test using the overlay_placements set in JS.

* refactor(prompt settings): unify prompt placements name

use snake case instead of kebab case since the placement names can be used as JS properties

assets/wizards/popups/components/segment-group/SegmentGroup.test.js

@@ -242,6 +242,7 @@ describe( 'A segment with conflicting prompts', () => {
 			custom_placements: {
 				custom1: 'Custom Placement 1',
 			},
+			overlay_placements: [ 'center' ],
 		};
 	} );
 

assets/wizards/popups/components/settings-modal/index.js

@@ -17,7 +17,12 @@ import {
 	Settings,
 	hooks,
 } from '../../../../components/src';
-import { frequenciesForPopup, isOverlay, placementsForPopups } from '../../utils';
+import {
+	frequenciesForPopup,
+	isOverlay,
+	placementsForPopups,
+	overlaySizesForPopups,
+} from '../../utils';
 
 const { SettingsCard } = Settings;
 
@@ -58,7 +63,7 @@ const PromptSettingsModal = ( { prompt, disabled, onClose, segments, updatePopup
 				<SettingsCard
 					title={ __( 'Settings', 'newspack' ) }
 					description={ __( 'When and how should the prompt be displayed', 'newspack' ) }
-					columns={ 2 }
+					columns={ isOverlay( prompt ) ? 3 : 2 }
 					className="newspack-settings__settings"
 				>
 					<SelectControl
@@ -79,6 +84,17 @@ const PromptSettingsModal = ( { prompt, disabled, onClose, segments, updatePopup
 						options={ placementsForPopups( prompt ) }
 						value={ promptConfig.options.placement }
 					/>
+					{ isOverlay( prompt ) && (
+						<SelectControl
+							label={ __( 'Size' ) }
+							disabled={ disabled }
+							onChange={ value => {
+								setPromptConfig( { options: { overlay_size: value } } );
+							} }
+							options={ overlaySizesForPopups( prompt ) }
+							value={ promptConfig.options.overlay_size }
+						/>
+					) }
 				</SettingsCard>
 
 				<SettingsCard

assets/wizards/popups/utils.js

@@ -11,18 +11,16 @@ import { addQueryArgs } from '@wordpress/url';
 import { memoize } from 'lodash';
 import { format, parse } from 'date-fns';
 
-/**
- * Array of overlay placements.
- */
-const overlayPlacements = [ 'top', 'bottom', 'center' ];
-
 /**
  * Check whether the given popup is an overlay.
  *
  * @param {Object} popup Popup object to check.
  * @return {boolean} True if the popup is an overlay, otherwise false.
  */
-export const isOverlay = popup => overlayPlacements.indexOf( popup.options.placement ) >= 0;
+export const isOverlay = popup => {
+	const overlayPlacements = window.newspack_popups_wizard_data?.overlay_placements || [];
+	return -1 < overlayPlacements.indexOf( popup.options.placement );
+};
 
 /**
  * Check whether the given popup is above-header.
@@ -47,9 +45,15 @@ export const isCustomPlacement = popup => {
 export const isInline = prompt => ! isOverlay( prompt );
 
 const placementMap = {
-	center: __( 'Center Overlay', 'newspack' ),
 	top: __( 'Top Overlay', 'newspack' ),
+	top_left: __( 'Top Left Overlay', 'newspack' ),
+	top_right: __( 'Top Right Overlay', 'newspack' ),
+	center: __( 'Center Overlay', 'newspack' ),
+	center_left: __( 'Center Left Overlay', 'newspack' ),
+	center_right: __( 'Center Right Overlay', 'newspack' ),
 	bottom: __( 'Bottom Overlay', 'newspack' ),
+	bottom_left: __( 'Bottom Left Overlay', 'newspack' ),
+	bottom_right: __( 'Bottom Right Overlay', 'newspack' ),
 	inline: __( 'Inline', 'newspack' ),
 	archives: __( 'In archive pages', 'newspack' ),
 	above_header: __( 'Above Header', 'newspack' ),
@@ -66,6 +70,7 @@ export const placementForPopup = ( { options: { frequency, placement } } ) => {
 
 export const placementsForPopups = prompt => {
 	const customPlacements = window.newspack_popups_wizard_data?.custom_placements;
+	const overlayPlacements = window.newspack_popups_wizard_data?.overlay_placements;
 	const options = Object.keys( placementMap )
 		.filter( key =>
 			isOverlay( prompt )
@@ -98,6 +103,10 @@ export const frequenciesForPopup = popup => {
 		.map( key => ( { label: frequencyMap[ key ], value: key } ) );
 };
 
+export const overlaySizesForPopups = () => {
+	return window.newspack_popups_wizard_data?.overlay_sizes;
+};
+
 export const getCardClassName = ( { status } ) => {
 	if ( 'publish' !== status ) {
 		return 'newspack-card__is-disabled';

includes/configuration_managers/class-newspack-popups-configuration-manager.php

@@ -108,6 +108,24 @@ public function get_custom_placement_values() {
 			$this->unconfigured_error();
 	}
 
+	/**
+	 * Get overlay placements.
+	 */
+	public function get_overlay_placements() {
+		return $this->is_configured() ?
+			\Newspack_Popups_Model::get_overlay_placements() :
+			$this->unconfigured_error();
+	}
+
+	/**
+	 * Get overlay sizes.
+	 */
+	public function get_overlay_sizes() {
+		return $this->is_configured() ?
+			\Newspack_Popups_Model::get_popup_size_options() :
+			$this->unconfigured_error();
+	}
+
 	/**
 	 * Set plugin settings.
 	 *

includes/wizards/class-popups-wizard.php

@@ -469,15 +469,19 @@ public function enqueue_scripts_and_styles() {
 
 		$newspack_popups_configuration_manager = Configuration_Managers::configuration_manager_class_for_plugin_slug( 'newspack-popups' );
 		$custom_placements                     = $newspack_popups_configuration_manager->get_custom_placements();
+		$overlay_placements                    = $newspack_popups_configuration_manager->get_overlay_placements();
+		$overlay_sizes                         = $newspack_popups_configuration_manager->get_overlay_sizes();
 
 		\wp_localize_script(
 			'newspack-popups-wizard',
 			'newspack_popups_wizard_data',
 			[
-				'preview_post'      => $preview_post,
-				'preview_archive'   => $preview_archive,
-				'frontend_url'      => get_site_url(),
-				'custom_placements' => $custom_placements,
+				'preview_post'       => $preview_post,
+				'preview_archive'    => $preview_archive,
+				'frontend_url'       => get_site_url(),
+				'custom_placements'  => $custom_placements,
+				'overlay_placements' => $overlay_placements,
+				'overlay_sizes'      => $overlay_sizes,
 			]
 		);