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[bot]]

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