Legacy form donation modal should display the correct recurring donation billing description

[Genevieve-K]

User Story

As a donor in a language other than English, I want to make a recurring donation when the interval is > 1, for a period that not is the default one. The period displayed to the right of the amount displays the default period, not the chosen period.

Details

See https://feedback.givewp.com/bug-reports/p/legacy-form-donation-modal-should-display-the-correct-recurring-donation-billing

Expected Behavior

Example in French: the default is 'Tous les deux mois pendant 8 mois' (Every two months for 8 months). I choose 'an' (year).
Expected message to the right of the amount: 'Tous les deux ans pendant huit ans' (Every two years for 8 years)
Displayed message: 'Tous les deux mois pendant 8 mois'

Issue in give-recurring.js line 144:

the 'recurringPeriod' and 'currentRecurringPeriod' varaibles are English strings, and 'recurringPeriod' doesn't match in the query. We need to translate them.

To fix

In give-recurring-helpers.php: add the function give_recurring_get_pretty_plural_periods()

function give_recurring_get_pretty_plural_period( $period ) {

	$periods = give_recurring_get_pretty_plural_periods();
	$plural_period = isset( $periods[ $period ] ) ? $periods[ $period ] : '';
	return $plural_period;
}

function give_recurring_get_pretty_plural_periods() {

	return array(
		'day'     => __( 'days', 'give-recurring' ),
		'week'    => __( 'weeks', 'give-recurring' ),
		'month'   => __( 'months', 'give-recurring' ),
		'quarter' => __( 'quarters', 'give-recurring' ),
		'year'    => __( 'years', 'give-recurring' ),
	);
}

In give-recurring-scripts.php, initialize 'plural_periods' line 36:
'pretty_periods' => give_recurring_get_default_pretty_periods(),

In give-recurring.js, get this variable, and use it.

			var prettyPeriods = Give_Recurring_Vars.pretty_periods;
			var pluralPeriods = Give_Recurring_Vars.plural_periods;

			if ( $this.is( 'select' ) ) {
				recurringPeriodLabel = $this.closest( 'div.give-recurring-donors-choice' )
					.find( '.give-recurring-period' )
					.data( 'period-label' );
				recurringPeriod = $this.closest( 'div.give-recurring-donors-choice' )
					.find( '.give-recurring-period' )
					.data( 'period' );
			}

			// Replace texts in label only if donor can change the recurring period.
			if ( currentRecurringPeriod ) {
		//		recurringPeriodLabel = recurringPeriodLabel.replace( new RegExp( recurringPeriod, 'g' ), currentRecurringPeriod );
				recurringPeriodLabel = recurringPeriodLabel.replace( new RegExp( pluralPeriods[ recurringPeriod ], 'g' ), pluralPeriods[ currentRecurringPeriod ] );
				recurringPeriodLabel = recurringPeriodLabel.replace( new RegExp( prettyPeriods[ recurringPeriod ], 'g' ), prettyPeriods[ currentRecurringPeriod ] );
			}

[Genevieve-K]

I reported this fix in GiveRecurring 2.1.0 and then minified the JS file.

[canny]

This issue has been linked to a Canny post: Legacy form donation modal should display the correct recurring donation billing description 🎉