Improve user interface in Gravity Forms subscription alignment settings

[remcotolsma]

Related code:

wp-pronamic-pay-gravityforms/views/html-admin-feed-settings.php

Lines 805 to 985 in 325d139

	<ul class="pronamic-pay-gf-form-choice-list">
	<li class="pronamic-pay-gf-form-choice">
	<input id="pronamic_pay_gf_subscription_interval_date_type_payment_date" name="_pronamic_pay_gf_subscription_interval_date_type" type="radio" value="payment_date" <?php checked( $pay_feed->subscription_interval_date_type, 'payment_date' ); ?> />
	<label for="pronamic_pay_gf_subscription_interval_date_type_payment_date">
	<?php esc_html_e( 'Entry Date', 'pronamic_ideal' ); ?>
	</label>
	</li>
	<li class="pronamic-pay-gf-form-choice">
	<input id="pronamic_pay_gf_subscription_interval_date_type_field" name="_pronamic_pay_gf_subscription_interval_date_type" type="radio" value="sync" <?php checked( $pay_feed->subscription_interval_date_type, 'sync' ); ?> />
	<label for="pronamic_pay_gf_subscription_interval_date_type_field">
	<?php
	$allowed_html = [
	'select' => [
	'class' => true,
	'id' => true,
	'name' => true,
	],
	'option' => [
	'value' => true,
	'selected' => true,
	],
	'sup' => [],
	];
	/**
	* Locale.
	*
	* @link https://developer.wordpress.org/reference/classes/wp_locale/get_weekday/
	* @link https://github.com/WordPress/WordPress/blob/5.2/wp-includes/class-wp-locale.php#L121-L128
	*/
	global $wp_locale;
	// Weekday options.
	$weekdays = [
	1 => $wp_locale->get_weekday( 1 ),
	2 => $wp_locale->get_weekday( 2 ),
	3 => $wp_locale->get_weekday( 3 ),
	4 => $wp_locale->get_weekday( 4 ),
	5 => $wp_locale->get_weekday( 5 ),
	6 => $wp_locale->get_weekday( 6 ),
	7 => $wp_locale->get_weekday( 0 ),
	];
	$weekday_options_html = '';
	foreach ( $weekdays as $day_value => $label ) {
	$weekday_options_html .= sprintf(
	'<option value="%s" %s>%s</option>',
	esc_attr( $day_value ),
	selected( $pay_feed->subscription_interval_date_day, $day_value, false ),
	esc_html( $label )
	);
	}
	// Monthday options.
	$monthdays = range( 1, 28 );
	$monthday_options_html = '';
	foreach ( $monthdays as $value ) {
	$monthday_options_html .= sprintf(
	'<option value="%s" %s>%s</option>',
	esc_attr( $value ),
	selected( $pay_feed->subscription_interval_date, $value, false ),
	esc_html( $value )
	);
	}
	// Month options.
	$month_options_html = '';
	foreach ( range( 1, 12 ) as $month_number ) {
	$month_options_html .= sprintf(
	'<option value="%s" %s>%s</option>',
	esc_attr( $month_number ),
	selected( $pay_feed->subscription_interval_date_month, $month_number, false ),
	esc_html( $wp_locale->get_month( $month_number ) )
	);
	}
	?>
	<span class="pronamic-pay-gf-subscription-interval-date-sync-settings interval-D">
	<?php esc_html_e( 'Not Available', 'pronamic_ideal' ); ?>
	</span>
	<span class="pronamic-pay-gf-subscription-interval-date-sync-settings interval-W">
	<?php
	$select = sprintf(
	'<select id="%s" name="%s">%s</select>',
	esc_attr( 'pronamic_pay_gf_subscription_interval_date_day' ),
	esc_attr( '_pronamic_pay_gf_subscription_interval_date_day' ),
	$weekday_options_html
	);
	echo wp_kses(
	sprintf(
	/* translators: %s: input HTML */
	__( 'On %s', 'pronamic_ideal' ),
	$select
	),
	$allowed_html
	);
	?>
	<br />
	</span>
	<span class="pronamic-pay-gf-subscription-interval-date-sync-settings interval-M">
	<?php
	$select = sprintf(
	'<select id="%s" name="%s">%s</select>',
	esc_attr( 'pronamic_pay_gf_subscription_interval_date' ),
	esc_attr( '_pronamic_pay_gf_subscription_interval_m_date' ),
	$monthday_options_html
	);
	echo wp_kses(
	sprintf(
	/* translators: %s: <select> Monthday (1-27). */
	__( 'On the %s <sup>th</sup> day of the month', 'pronamic_ideal' ),
	$select
	),
	$allowed_html
	);
	?>
	<br />
	</span>
	<span class="pronamic-pay-gf-subscription-interval-date-sync-settings interval-Y">
	<?php
	$select_monthday = sprintf(
	'<select id="%s" name="%s">%s</select>',
	esc_attr( 'pronamic_pay_gf_subscription_interval_date' ),
	esc_attr( '_pronamic_pay_gf_subscription_interval_y_date' ),
	$monthday_options_html
	);
	$select_month = sprintf(
	'<select id="%s" name="%s">%s</select>',
	esc_attr( 'pronamic_pay_gf_subscription_interval_date_month' ),
	esc_attr( '_pronamic_pay_gf_subscription_interval_date_month' ),
	$month_options_html
	);
	echo wp_kses(
	sprintf(
	/* translators: 1: <select> Monthday (1-27), 2: <select> Month (Jan-Dec). */
	__( 'On %1$s %2$s', 'pronamic_ideal' ),
	$select_monthday,
	$select_month
	),
	$allowed_html
	);
	?>
	</span>
	</label>
	<div class="pronamic-pay-gf-form-choice-checked">
	<input type="checkbox" name="_pronamic_pay_gf_subscription_interval_date_prorate" id="pronamic_pay_gf_subscription_interval_date_prorate" value="true" <?php checked( $pay_feed->subscription_interval_date_prorate ); ?> />
	<label for="pronamic_pay_gf_subscription_interval_date_prorate">
	<?php
	/* translators: nl: Bereken bedrag uitlijingsperiode pro rata. */
	esc_html_e( 'Prorate the amount of the alignment period.', 'pronamic_ideal' );
	?>
	</label>
	</div>
	</li>
	</ul>

Suggested change in Dutch:

Betalingsdatum uitlijnen
☑️ Betalingsdatum uitlijnen inschakelen
Het is mogelijk om de eerst volgende betalingsdatum uit te lijnen op een vaste dag van de week, maand of jaar. Hiervoor wordt er een extra abonnementsfase toegevoegd aan het begin van het abonnement. Als het aantal perioden vast staat ingesteld krijg je er dus altijd 1 extra periode bij. Het af te rekenen bedrag voor deze uitlijningsfase kan naar rato worden berekend.

---

Re-opening for "Improve user interface in Gravity Forms subscription alignment settings".

The name and description of the setting are already updated in df49d2d.

Originally posted by @rvdsteege in pronamic/wp-pay-core#182 (comment)