Internal: Internal: Add 'Free to Pro' Motion Effects promotion [ED-13…

…458] (elementor#25021)

Co-authored-by: ElementorBot <48412871+elementorbot@users.noreply.github.com>

.github/workflows/playwright.yml

@@ -110,7 +110,8 @@ jobs:
           'pluginTester1_containers',
           'pluginTester2_containers',
           'pluginTester1_sections',
-          'pluginTester2_sections'
+          'pluginTester2_sections',
+          'promotions'
         ]
     steps:
       - name: Checkout source code
@@ -164,8 +165,8 @@ jobs:
         if: always()
         with:
           name: playwright-test-results
-          path: ${{inputs.path-to-results || 'test-results/'}} 
-          retention-days: 2     
+          path: ${{inputs.path-to-results || 'test-results/'}}
+          retention-days: 2
 
   test-result:
     needs: Playwright

includes/elements/column.php

@@ -840,6 +840,8 @@ protected function register_controls() {
 			]
 		);
 
+		Plugin::$instance->controls_manager->add_motion_effects_promotion_control( $this );
+
 		$this->add_responsive_control(
 			'animation',
 			[

includes/elements/container.php

@@ -1683,6 +1683,8 @@ protected function register_motion_effects_controls() {
 			]
 		);
 
+		Plugin::$instance->controls_manager->add_motion_effects_promotion_control( $this );
+
 		$this->add_responsive_control(
 			'animation',
 			[

includes/elements/section.php

@@ -1264,6 +1264,8 @@ protected function register_controls() {
 			]
 		);
 
+		Plugin::$instance->controls_manager->add_motion_effects_promotion_control( $this );
+
 		$this->add_responsive_control(
 			'animation',
 			[

includes/managers/controls.php

@@ -1257,4 +1257,84 @@ public function add_display_conditions_controls( Controls_Stack $controls_stack
 			]
 		);
 	}
+
+	public function add_motion_effects_promotion_control( Controls_Stack $controls_stack ) {
+		if ( Utils::has_pro() ) {
+			return;
+		}
+
+		$controls_stack->add_control(
+			'scrolling_effects_pro',
+			[
+				'type'      => self::RAW_HTML,
+				'separator' => 'before',
+				'raw'       => $this->promotion_switcher_control( esc_html__( 'Scrolling Effects', 'elementor' ), 'scrolling-effects' ),
+			]
+		);
+
+		$controls_stack->add_control(
+			'mouse_effects_pro',
+			[
+				'type'      => self::RAW_HTML,
+				'separator' => 'before',
+				'raw'       => $this->promotion_switcher_control( esc_html__( 'Mouse Effects', 'elementor' ), 'mouse-effects' ),
+			]
+		);
+
+		$controls_stack->add_control(
+			'sticky_pro',
+			[
+				'type'      => self::RAW_HTML,
+				'separator' => 'before',
+				'raw'       => $this->promotion_select_control( esc_html__( 'Sticky', 'elementor' ), 'sticky-effects' ),
+			]
+		);
+
+		$controls_stack->add_control(
+			'motion_effects_promotion_divider',
+			[
+				'type' => self::DIVIDER,
+			]
+		);
+	}
+
+	private function promotion_switcher_control( $title, $id ): string {
+		return '<div class="elementor-control-type-switcher elementor-label-inline e-control-motion-effects-promotion__wrapper">
+			<div class="elementor-control-content">
+				<div class="elementor-control-field">
+					<label>
+						' . $title . '
+					</label>
+					<span class="e-control-motion-effects-promotion__lock-wrapper">
+						<i class="eicon-lock"></i>
+					</span>
+					<div class="elementor-control-input-wrapper">
+						<label class="elementor-switch elementor-control-unit-2 e-control-' . $id . '-promotion">
+							<input type="checkbox" class="elementor-switch-input" disabled>
+							<span class="elementor-switch-label" data-off="Off"></span>
+							<span class="elementor-switch-handle"></span>
+						</label>
+					</div>
+				</div>
+			</div>
+		</div>';
+	}
+
+	private function promotion_select_control( $title, $id ): string {
+		return '<div class="elementor-control-type-select elementor-label-inline e-control-motion-effects-promotion__wrapper">
+			<div class="elementor-control-content">
+				<div class="elementor-control-field ">
+					<label for="sticky-motion-effect-pro">
+						' . $title . '
+					</label>
+					<span class="e-control-motion-effects-promotion__lock-wrapper">
+						<i class="eicon-lock"></i>
+					</span>
+					<div class="elementor-control-input-wrapper elementor-control-unit-5 e-control-' . $id . '-promotion">
+					<div class="select-promotion elementor-control-unit-5">None</div>
+					</div>
+				</div>
+			</div>
+		</div>';
+	}
 }

includes/widgets/common.php

@@ -617,6 +617,8 @@ private function register_effects_section() {
 			]
 		);
 
+		Plugin::$instance->controls_manager->add_motion_effects_promotion_control( $this );
+
 		$this->add_responsive_control(
 			'_animation',
 			[

modules/promotions/assets/js/editor/behavior.js

@@ -2,12 +2,18 @@ export default class PromotionBehavior extends Marionette.Behavior {
 	ui() {
 		return {
 			displayConditionsButton: '.eicon-flow.e-control-display-conditions-promotion',
+			scrollingEffectsButton: '.e-control-scrolling-effects-promotion',
+			mouseEffectsButton: '.e-control-mouse-effects-promotion',
+			stickyEffectsButton: '.e-control-sticky-effects-promotion',
 		};
 	}
 
 	events() {
 		return {
 			'click @ui.displayConditionsButton': 'onClickControlButtonDisplayConditions',
+			'click @ui.scrollingEffectsButton': 'onClickControlButtonScrollingEffects',
+			'click @ui.mouseEffectsButton': 'onClickControlButtonMouseEffects',
+			'click @ui.stickyEffectsButton': 'onClickControlButtonStickyEffects',
 		};
 	}
 
@@ -29,4 +35,61 @@ export default class PromotionBehavior extends Marionette.Behavior {
 
 		elementor.promotion.showDialog( dialogOptions );
 	}
+
+	onClickControlButtonScrollingEffects( event ) {
+		event.stopPropagation();
+
+		const dialogOptions = {
+			title: __( 'Scrolling Effects', 'elementor' ),
+			content: __(
+				'Get Scrolling Effects such as <br /> vertical/horizontal scroll, transparency,<br /> and more with Elementor Pro.',
+				'elementor',
+			),
+			targetElement: this.el,
+			actionButton: {
+				url: 'https://go.elementor.com/go-pro-scrolling-effects-advanced/',
+				text: __( 'Upgrade Now', 'elementor' ),
+			},
+		};
+
+		elementor.promotion.showDialog( dialogOptions );
+	}
+
+	onClickControlButtonMouseEffects( event ) {
+		event.stopPropagation();
+
+		const dialogOptions = {
+			title: __( 'Mouse Effects', 'elementor' ),
+			content: __(
+				'Add a Mouse Track or 3d Tilt effect with<br />Elementor Pro.',
+				'elementor',
+			),
+			targetElement: this.el,
+			actionButton: {
+				url: 'https://go.elementor.com/go-pro-motion-effects-advanced/',
+				text: __( 'Upgrade Now', 'elementor' ),
+			},
+		};
+
+		elementor.promotion.showDialog( dialogOptions );
+	}
+
+	onClickControlButtonStickyEffects( event ) {
+		event.stopPropagation();
+
+		const dialogOptions = {
+			title: __( 'Sticky', 'elementor' ),
+			content: __(
+				'Make any element on your page sticky and<br />keep them in sight at the top or bottom of<br />the screen.',
+				'elementor',
+			),
+			targetElement: this.el,
+			actionButton: {
+				url: 'https://go.elementor.com/go-pro-sticky-element-advanced/',
+				text: __( 'Upgrade Now', 'elementor' ),
+			},
+		};
+
+		elementor.promotion.showDialog( dialogOptions );
+	}
 }

modules/promotions/assets/js/editor/module.js

@@ -21,7 +21,8 @@ export default class Module extends elementorModules.editor.utils.Module {
 	}
 
 	registerControlBehavior( behaviors, view ) {
-		if ( 'display_conditions_pro' !== view.options.model.get( 'name' ) ) {
+		const promotionsToSkip = [ 'display_conditions_pro', 'scrolling_effects_pro', 'mouse_effects_pro', 'sticky_pro' ];
+		if ( ! promotionsToSkip.includes( view.options.model.get( 'name' ) ) ) {
 			return behaviors;
 		}
 

modules/promotions/assets/scss/editor.scss

@@ -42,3 +42,36 @@
 	}
 }
 
+.e-control-motion-effects-promotion {
+	&__wrapper {
+		&:hover {
+			.eicon-lock {
+				color: var(--e-a-color-accent)
+			}
+		}
+
+		.select-promotion {
+			display: flex;
+			flex-direction: column;
+			justify-content: center;
+			padding-inline-start: 5px;
+			padding-inline-end: 20px;
+			cursor: pointer;
+			height: 27px;
+			width: 100%;
+			color: var(--e-a-color-txt);
+			border-radius: var(--e-a-border-radius);
+			background-color: var(--e-a-bg-default);
+			box-shadow: none;
+			border: var(--e-a-border-bold);
+			font-size: var(--control-title-size);
+		}
+	}
+
+	&__lock-wrapper {
+		width: 2.5rem;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+}

tests/playwright/pages/promotions/helper.ts

@@ -0,0 +1,11 @@
+import { expect } from '@playwright/test';
+import Content from '../elementor-panel-tabs/content';
+
+export default class promotionsHelper extends Content {
+	async widgetControlPromotionModalScreenshotTest( element: string ) {
+		await this.page.locator( `.e-control-${ element }-promotion` ).click( { force: true } );
+		const modalContainer = this.page.locator( '#elementor-element--promotion__dialog' );
+		await expect.soft( modalContainer ).toHaveScreenshot( `${ element }-modal.png` );
+		await this.page.locator( '.dialog-header .eicon-close' ).click();
+	}
+}

tests/playwright/playwright.config.ts

@@ -21,6 +21,7 @@ function getGrepInvert() {
 			/@pluginTester2_containers/,
 			/@pluginTester1_sections/,
 			/@pluginTester2_sections/,
+			/@promotions/,
 		];
 	}
 	return [];

tests/playwright/sanity/modules/promotions/promotions.test.ts

@@ -0,0 +1,57 @@
+import { test, expect } from '@playwright/test';
+import WpAdminPage from '../../../pages/wp-admin-page';
+import PromotionsHelper from '../../../pages/promotions/helper';
+
+test.describe( 'Promotion tests @promotions', () => {
+
+	test( 'Menu Items Promotions - screenshots', async ( { page }, testInfo ) => {
+		const wpAdminPage = new WpAdminPage( page, testInfo ),
+			promotionContainer = '.e-feature-promotion';
+
+		await wpAdminPage.login();
+
+		await test.step( 'Free to Pro - Submissions', async () => {
+			await wpAdminPage.promotionPageScreenshotTest( promotionContainer, 'e-form-submissions', 'submissions-menu-item-desktop' );
+		} );
+
+		await test.step( 'Free to Pro - Custom Icons', async () => {
+			await wpAdminPage.promotionPageScreenshotTest( promotionContainer, 'elementor_custom_icons', 'custom-icons-menu-item-desktop' );
+		} );
+
+		await test.step( 'Free to Pro - Custom Fonts', async () => {
+			await wpAdminPage.promotionPageScreenshotTest( promotionContainer, 'elementor_custom_fonts', 'custom-fonts-menu-item-desktop' );
+		} );
+
+		await test.step( 'Free to Pro - Custom Code', async () => {
+			await wpAdminPage.promotionPageScreenshotTest( promotionContainer, 'elementor_custom_code', 'custom-code-menu-item-desktop' );
+		} );
+	} );
+
+	test( 'Modal Promotions screenshots', async ( { page }, testInfo ) => {
+		const wpAdmin = new WpAdminPage( page, testInfo ),
+			editor = await wpAdmin.openNewPage(),
+			promotionsHelper = new PromotionsHelper( page, testInfo ),
+			container = await editor.addElement( { elType: 'container' }, 'document' );
+
+		await editor.addWidget( 'heading', container );
+
+		await editor.activatePanelTab( 'advanced' );
+		await page.locator( '.elementor-control-section_effects' ).click();
+
+		await test.step( 'Motion Effects - promotion controls screenshots', async () => {
+			const promotionControls = [ 'elementor-control-scrolling_effects_pro', 'elementor-control-mouse_effects_pro', 'elementor-control-sticky_pro' ];
+
+			for ( const control of promotionControls ) {
+				const controlContainer = page.locator( `.${ control }` );
+				await expect.soft( controlContainer ).toHaveScreenshot( `${ control }.png` );
+			}
+		} );
+
+		await test.step( 'Free to Pro - Control modals screenshot tests', async () => {
+			const promotionControls = [ 'scrolling-effects', 'mouse-effects', 'sticky-effects' ];
+			for ( const effect of promotionControls ) {
+				await promotionsHelper.widgetControlPromotionModalScreenshotTest( effect );
+			}
+		} );
+	} );
+} );