Use Lite for the payments pages and add coupons tabs

bin/zip-plugin.sh

@@ -103,6 +103,8 @@ zip -r $zipname $destination \
 	-x "formidable-api/js/embed.js" \
 	-x "formidable-api/js/iframe-embed.js" \
 	-x "formidable-hubspot/js/admin.js" \
+	-x "formidable-coupons/js/frontend.js" \
+	-x "formidable-coupons/js/admin.js" \
 	-x "*/webpack.config.js" \
 	-x "*.zip" \
 	-x "*/rector.php" \

classes/controllers/FrmAppController.php

@@ -166,15 +166,8 @@ private static function is_white_page() {
 			FrmOnboardingWizardController::PAGE_SLUG,
 		);
 
-		if ( ! class_exists( 'FrmTransHooksController', false ) && ! FrmTransLiteAppHelper::should_fallback_to_paypal() ) {
-			// Only consider the payments page as a "white page" when the Payments submodule is off.
-			// Otherwise this causes a lot of styling issues when the Stripe add-on (or Authorize.Net) is active.
-
-			// Add an extra check to avoid white page styling on the PayPal "edit" action.
-			// We fallback to the PayPal add on for the "edit" action since Stripe Lite does not have an edit view.
-			if ( ! in_array( FrmAppHelper::simple_get( 'action' ), array( 'edit', 'new' ), true ) || ! is_callable( 'FrmPaymentsController::route' ) ) {
-				$white_pages[] = 'formidable-payments';
-			}
+		if ( self::is_white_payments_page() ) {
+			$white_pages[] = 'formidable-payments';
 		}
 
 		$is_white_page = self::is_page_in_list( $white_pages ) || self::is_grey_page() || FrmAppHelper::is_view_builder_page();
@@ -191,6 +184,22 @@ private static function is_white_page() {
 		return $is_white_page;
 	}
 
+	/**
+	 * Check if the payments page should be styled as a white page.
+	 * Fallback to the Stripe, Authorize.Net, or PayPal add on for the "edit" action since
+	 * Stripe Lite does not have an edit view. Also fallback for bulk deleting, since that
+	 * isn't built into Lite. The pages we fall back to should not be styled as white pages.
+	 *
+	 * @since x.x
+	 *
+	 * @return bool
+	 */
+	private static function is_white_payments_page() {
+		$action       = FrmAppHelper::simple_get( 'action', 'sanitize_title' );
+		$on_edit_page = in_array( $action, array( 'edit', 'new' ), true );
+		return ! $on_edit_page && 'bulk_delete' !== $action;
+	}
+
 	/**
 	 * Add a grey bg instead of white.
 	 *

classes/helpers/FrmAppHelper.php

@@ -4607,7 +4607,12 @@ public static function get_landing_page_upgrade_data_params( $medium = 'landing'
 	 */
 	public static function show_new_feature( $feature ) {
 		$link = FrmAddonsController::install_link( $feature );
-		return array_key_exists( 'status', $link ) || array_key_exists( 'class', $link );
+
+		if ( array_key_exists( 'status', $link ) || array_key_exists( 'class', $link ) ) {
+			return true;
+		}
+
+		return 'coupons' === $feature && class_exists( 'FrmCouponsAppController' );
 	}
 
 	/**

classes/helpers/FrmFieldsHelper.php

@@ -2426,6 +2426,10 @@ public static function show_add_field_buttons( $args ) {
 			$li_params['class'] .= ' frm_hidden';
 		}
 
+		if ( ! $show_upgrade && ! empty( $field_type['limit'] ) ) {
+			$li_params = self::update_params_with_limit_data( $li_params, $args['id'], $field_key, $field_type['limit'] );
+		}
+
 		if ( ! empty( $field_type['upsell_image'] ) ) {
 			$li_params['data-upsell-image'] = $field_type['upsell_image'];
 		}
@@ -2459,6 +2463,37 @@ public static function show_add_field_buttons( $args ) {
 		<?php
 	}
 
+	/**
+	 * Updates the params with limit data (the data-limit attribute, and possibly the frm_at_limit class).
+	 * Some field types are limited to a certain number per form, including coupon fields.
+	 *
+	 * @since x.x
+	 *
+	 * @param array  $li_params  The params.
+	 * @param int    $form_id    The form ID.
+	 * @param string $field_type The field type.
+	 * @param int    $limit      The limit.
+	 *
+	 * @return array The updated params.
+	 */
+	private static function update_params_with_limit_data( $li_params, $form_id, $field_type, $limit ) {
+		$fields_in_form = FrmDb::get_count(
+			'frm_fields',
+			array(
+				'form_id' => $form_id,
+				'type'    => $field_type,
+			)
+		);
+
+		if ( $fields_in_form >= $limit ) {
+			$li_params['class'] .= ' frm_at_limit';
+		}
+
+		$li_params['data-limit'] = $limit;
+
+		return $li_params;
+	}
+
 	/**
 	 * Shows Display format option.
 	 *

classes/models/FrmField.php

@@ -328,6 +328,17 @@ public static function pro_field_selection() {
 			),
 		);
 
+		if ( FrmAppHelper::show_new_feature( 'coupons' ) ) {
+			$fields['coupon'] = array(
+				'name'    => __( 'Coupon', 'formidable' ),
+				'icon'    => 'frm_icon_font frm_coupon_icon frm_show_upgrade',
+				'addon'   => 'coupons',
+				'section' => 'pricing',
+				'limit'   => 1,
+				'is_new'  => self::field_is_new( 'coupon' ),
+			);
+		}
+
 		// Since the signature field may be in a different section, don't show it twice.
 		$lite_fields = self::field_selection();
 
@@ -349,7 +360,7 @@ public static function pro_field_selection() {
 	 */
 	private static function field_is_new( $type ) {
 		$release_dates = array(
-			'ranking' => '2024-03-12',
+			'coupon' => '2026-01-13',
 		);
 
 		if ( ! isset( $release_dates[ $type ] ) ) {

js/src/admin/admin.js

@@ -329,6 +329,12 @@
 			return false;
 		}
 
+		// The confirm button is hidden when showLimitModal is called,
+		// so make sure it is visible every time we open the modal.
+		if ( continueButton ) {
+			continueButton.style.display = 'block';
+		}
+
 		verify = link.getAttribute( 'data-frmverify' );
 		btnClass = verify ? link.getAttribute( 'data-frmverify-btn' ) : '';
 		$confirmMessage = jQuery( '.frm-confirm-msg' );
@@ -900,6 +906,11 @@
 	}
 
 	function handleDragStart( event, ui ) {
+		if ( event.target.classList.contains( 'frm_at_limit' ) ) {
+			showLimitModal();
+			return false;
+		}
+
 		dragState.dragging = true;
 
 		const container = postBodyContent;
@@ -1901,12 +1912,28 @@
 			return ! draggable.parentElement.querySelector( 'li.frm_field_box:not(.edit_field_type_submit)' );
 		}
 
-		if ( droppable.classList.contains( 'start_divider' ) && ( draggable.classList.contains( 'edit_field_type_gdpr' ) || draggable.id === 'gdpr' ) && droppable.closest( '.repeat_section' ) ) {
-			// Don't allow GDPR fields in repeaters.
-			return false;
+		const droppableIsARepeater = droppable.classList.contains( 'start_divider' ) && null !== droppable.closest( '.repeat_section' );
+		const droppableIsInsideOfARepeater = null !== droppable.closest( '.repeat_section' );
+
+		if ( droppableIsARepeater || droppableIsInsideOfARepeater ) {
+			const isGdpr = draggable.classList.contains( 'edit_field_type_gdpr' ) || draggable.id === 'gdpr';
+			if ( isGdpr ) {
+				return false;
+			}
+
+			/**
+			 * @since x.x
+			 *
+			 * @param {boolean} denyDropInRepeater
+			 * @param {HTMLElement} draggable
+			 */
+			const shouldDenyDropInRepeater = wp.hooks.applyFilters( 'frm_deny_drop_in_repeater', false, draggable );
+			if ( shouldDenyDropInRepeater ) {
+				return false;
+			}
 		}
 
-		if ( ! droppable.classList.contains( 'start_divider' ) ) {
+		if ( ! droppableIsARepeater ) {
 			const $fieldsInRow = getFieldsInRow( jQuery( droppable ) );
 			if ( ! groupCanFitAnotherField( $fieldsInRow, jQuery( draggable ) ) ) {
 				// Field group is full and cannot accept another field.
@@ -2162,7 +2189,15 @@
 		const $button = $thisObj.closest( '.frmbutton' );
 		const fieldType = $button.attr( 'id' );
 
+		if ( $button.hasClass( 'frm_at_limit' ) ) {
+			showLimitModal();
+			return false;
+		}
+
 		if ( shouldStopInsertingField( fieldType ) ) {
+			// We do not want to return false here.
+			// Otherwise it causes issues with trying to add a new slider field
+			// when clicking the button.
 			return;
 		}
 
@@ -2204,6 +2239,25 @@
 		return false;
 	}
 
+	function showLimitModal() {
+		const wrapper = document.querySelector( '.frm_wrap' );
+		if ( ! wrapper ) {
+			return;
+		}
+
+		const temporaryAnchor = document.createElement( 'a' );
+		temporaryAnchor.setAttribute( 'data-frmverify', __( 'This field type has reached its limit.', 'formidable' ) );
+
+		wrapper.appendChild( temporaryAnchor );
+		temporaryAnchor.click();
+		wrapper.removeChild( temporaryAnchor );
+
+		const confirmButton = document.getElementById( 'frm-confirmed-click' );
+		if ( confirmButton ) {
+			confirmButton.style.display = 'none';
+		}
+	}
+
 	function handleAddFieldClickResponse( msg ) {
 		document.getElementById( 'frm_form_editor_container' ).classList.add( 'frm-has-fields' );
 		const replaceWith = wrapFieldLi( msg );
@@ -2799,6 +2853,8 @@
 
 		document.getElementById( 'frm-show-fields' ).classList.remove( 'frm-over-droppable' );
 
+		maybeDisableFieldButtonAtLimit( type );
+
 		// Bootstrap 5 uses data-bs-toggle instead of data-toggle, and requires that elements have the dropdown-menu class.
 		field.querySelectorAll( '[data-toggle]' ).forEach( toggle => toggle.setAttribute( 'data-bs-toggle', toggle.getAttribute( 'data-toggle' ) ) );
 		field.querySelectorAll( '.frm-dropdown-menu' ).forEach( dropdownMenu => dropdownMenu.classList.add( 'dropdown-menu' ) );
@@ -2811,6 +2867,19 @@
 		document.dispatchEvent( addedEvent );
 	}
 
+	/**
+	 * @since x.x
+	 *
+	 * @param {string} type
+	 * @return {void}
+	 */
+	function maybeDisableFieldButtonAtLimit( type ) {
+		const button = document.getElementById( type );
+		if ( button && button.dataset.limit && countFieldTypeInForm( type ) >= button.dataset.limit ) {
+			button.classList.add( 'frm_at_limit' );
+		}
+	}
+
 	function updateLastRowFieldsOrder( fieldsOrder ) {
 		if ( ! fieldsOrder || 'object' !== typeof fieldsOrder ) {
 			return;
@@ -5174,12 +5243,37 @@
 				} );
 
 				if ( $thisField.length ) {
+					maybeEnableFieldButtonAtLimit( $thisField.data( 'type' ) );
 					wp.hooks.doAction( 'frm_after_delete_field', $thisField[ 0 ] );
 				}
 			}
 		} );
 	}
 
+	/**
+	 * @since x.x
+	 *
+	 * @param {string} type
+	 * @return {void}
+	 */
+	function maybeEnableFieldButtonAtLimit( type ) {
+		const button = document.getElementById( type );
+
+		if ( ! button || ! button.dataset.limit ) {
+			return;
+		}
+
+		// Subtract one because the field has not really been removed from the page yet.
+		const fieldTypeCount = countFieldTypeInForm( type ) - 1;
+		if ( fieldTypeCount < button.dataset.limit ) {
+			button.classList.remove( 'frm_at_limit' );
+		}
+	}
+
+	function countFieldTypeInForm( type ) {
+		return document.getElementById( 'frm-show-fields' ).querySelectorAll( 'li.form-field[data-ftype="' + type + '"]' ).length;
+	}
+
 	function addFieldLogicRow() {
 		/*jshint validthis:true */
 		const id = jQuery( this ).closest( '.frm-single-settings' ).data( 'fid' ),

resources/scss/admin/components/_coupons.scss

@@ -0,0 +1,43 @@
+.frm-coupons-upsell-wrapper {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+
+	p {
+		margin-top: var(--gap-xs);
+		max-width: 364px;
+		text-align: center;
+	}
+
+	img {
+		max-width: 100%;
+		max-height: 300px;
+	}
+
+	h2 {
+		margin-bottom: 0;
+	}
+}
+
+.frm-coupons-upsell {
+	background-color: #F5F5F7; // This color blends better with the optimized images.
+	border-radius: 16px;
+	border: 6px solid #fff;
+	box-shadow: 0 0.471px 1.412px 0 rgba(16, 24, 40, 0.10), 0 0.471px 0.941px 0 rgba(16, 24, 40, 0.06);
+	text-align: center;
+	width: 100%;
+	box-sizing: border-box;
+}
+
+.frm-main-coupons-upsell {
+	margin-top: var(--gap-lg);
+
+	img {
+		vertical-align: bottom;
+	}
+}
+
+.frm-secondary-coupons-upsells {
+	margin-top: var(--gap-md);
+	width: 100%;
+}