fix(donation): getting Give notices when changing the Donation level

[raftaar1191]

User Story

As a donor, I am getting confused why it is showing me a message for the minimum donation amount

Clicking on the option from the custom amount to any other level show minimum amount notices to the donor

Notes

This issues exists in Give Core 2.1.4

Current Behavior

I currently get notices which are not expected

Expected Behavior

I expect no notices

Steps to Reproduce

1. Make a new donation from with multi-level option selected and custom amount also enable
2. go to the found end of the donation form and first click on custom amount button and then again click on any donation level button, you will get the notices for Donation minimum amount

Visuals

Video Link: https://screencast-o-matic.com/watch/cFhwQEbMKm

Environment

WordPress System Info

### WordPress Environment ###

Home URL: http://givewp.local
Site URL: http://givewp.local
WP Version: 4.9.6
WP Multisite: –
WP Memory Limit: 256 MB
WP Debug Mode: –
WP Cron: ✔
Language: en_US
Permalink Structure: /%postname%/
Show on Front: posts
Table Prefix Length: wp_
Table Prefix Length: 3
Table Prefix Status: Acceptable
Admin AJAX: Accessible
Registered Post Statuses: publish, future, draft, pending, private, trash, auto-draft, inherit, request-pending, request-confirmed, request-failed, request-completed, refunded, failed, revoked, cancelled, abandoned, processing, preapproval

Server Environment

Hosting Provider: DBH: localhost, SRV: givewp.local
TLS Connection: Connection uses TLS 1.2
TLS Connection: Probably Okay
Server Info: nginx/1.10.1
PHP Version: 7.0.3
PHP Post Max Size: 1,000 MB
PHP Time Limit: 900
PHP Max Input Vars: 3000
PHP Max Upload Size: 1,000 MB
cURL Version: ❌ 7.38.0, OpenSSL/1.0.1t - We recommend a minimum cURL version of 7.40.
SUHOSIN Installed: –
MySQL Version: ❌ 5.5.55 - We recommend a minimum MySQL version of 5.6. See: WordPress Requirements
Default Timezone is UTC: ✔
fsockopen/cURL: ✔
SoapClient: ✔
DOMDocument: ✔
gzip: ✔
GD Graphics Library: ✔
Multibyte String: ✔
Remote Post: ✔
Remote Get: ✔

Give Configuration

Give Version: 2.1.4
Give Cache: Enabled
Database Updates: All DB Updates Completed.
Give Cache: Enabled
Give Cache: ✔New Donation✔Donation Receipt✔New Offline Donation✔Offline Donation Instructions✔New User Registration✔User Registration Information✔Email access
Upgraded From: –
Test Mode: Enabled
Currency Code: USD
Currency Position: Before
Decimal Separator: .
Thousands Separator: ,
Success Page: http://givewp.local/donation-confirmation/
Failure Page: http://givewp.local/donation-failed/
Donation History Page: http://givewp.local/donation-history/
Give Forms Slug: /donations/
Enabled Payment Gateways: Test Donation, Offline Donation
Default Payment Gateway: Test Donation
PayPal IPN Verification: Enabled
PayPal IPN Notifications: N/A
Donor Email Access: Enabled

Session Configuration

Give Use Sessions: Enabled
Session: Disabled

Active Give Add-ons

Other Active Plugins

Inactive Plugins

BuddyPress: by The BuddyPress Community – 2.9.4
Charitable: by WP Charitable – 1.5.13
Debug Bar: by wordpressdotorg – 0.9
Debug Bar Console: by koopersmith – 0.3
Debug Bar Cron: by Zack Tollman, Helen Hou-Sandi – 0.1.2
Debug Bar Extender: by Thorsten Ott, Automattic – 0.5
Developer: by Automattic – 1.2.6
Duplicate Post: by Enrico Battocchi – 3.2.2
Email Cop: by Ashfame – 0.1.1
Give - 2Checkout Gateway: by WordImpress – 1.1
Give - Authorize.net Gateway: by WordImpress – 1.3.3
Give - AWeber: by WordImpress – 1.0.2
Give - Braintree Gateway: by WordImpress – 1.2
Give - CCAvenue Gateway: by WordImpress – 1.0.1
Give - Constant Contact: by WordImpress – 1.2.1
Give - ConvertKit: by WordImpress – 1.0.1
Give - Currency Switcher: by WordImpress – 1.0.3
Give - Development Plugin: by Raftaar1191 – 1.0.0
Give - Display Donors: by WordImpress, LLC – 1.0
Give - Dwolla Gateway: by WordImpress – 1.1.2
Give - Email Reports: by WordImpress – 1.1.1
Give - Fee Recovery: by WordImpress – 1.5
Give - Form Countdown: by WordImpress – 1.0
Give - Form Field Manager: by WordImpress – 1.3
Give - Gift Aid: by WordImpress – 1.1.1
Give - Google Analytics Donation Tracking: by WordImpress – 1.1.4
Give - MailChimp: by WordImpress – 1.4
Give - Manual Donations: by WordImpress – 1.3.1
Give - Paymill Gateway: by WordImpress – 1.1
Give - PayPal Pro Gateway: by WordImpress – 1.1.4
Give - PDF Receipts: by WordImpress – 2.2.5
Give - Recurring Donations: by WordImpress – 1.6
Give - Stripe Gateway: by WordImpress – 2.0
Give - Tributes: by WordImpress – 1.4.1
Give - Zapier: by WordImpress – 1.1.2
Gravity Forms: by rocketgenius – 2.2.6
Gravity Forms Signature Add-On: by Rocketgenius – 3.4
Loco Translate: by Tim Whitlock – 2.1.3
Log Deprecated Notices: by Andrew Nacin – 0.4
Log Viewer: by Markus Fischbacher – 14.05.04
Monster Widget: by Automattic – 0.3
Polylang: by Frédéric Demarle – 2.3.4
Query Monitor: by John Blackbourn & contributors – 3.0.0
Rewrite Rules Inspector: by Daniel Bachhuber, Automattic – 1.2.1
User Switching: by John Blackbourn – 1.3.0
WooCommerce: by Automattic – 3.4.0-dev
WordPress Beta Tester: by Peter Westwood – 1.2.0
WP Hide & Security Enhancer: by Nsp Code – 1.4.8.2
WPS Hide Login: by WPServeur, NicolasKulka, tabrisrp – 1.3.3

Theme

Name: Twenty Seventeen
Version: 1.6
Author URL: https://wordpress.org/
Child Theme: No – If you're modifying Give on a parent theme you didn't build personally, then we recommend using a child theme. See: How to Create a Child Theme

[ravinderk]

@DevinWalker I am bumping this issue to 2.1.5 because it will can break fee recovery , currency switcher or other addons

[ravinderk]

@DevinWalker @kevinwhoffman I fixed this issue in core but it is not working fine with fee recovery and currency switcher because js function runs async when event fire.

I think we must include an event manager plugin in core: https://www.npmjs.com/package/@wordpress/hooks

import { createHooks } from '@wordpress/hooks';
 
give.hooks = createHooks();
give.hooks.addAction(); //etc...

WordPress is using the same plugin in Gutenberg

Let me know what do you think

[kevinwhoffman]

Slack Call Summary

Participants: @ravinderk @kevinwhoffman
Topic: Use of @wordpress/hooks npm package
Result: We agree this will be a useful package to not only help solve this issue, but future issues that require asynchronous procedures.

Note that this implementation will require a simultaneous update of Give core and any affected add-ons such as Fee Recovery or Currency Switcher which will use the hook.

[ravinderk]

@kevinwhoffman I found that we do not need @wordpress/hooks package now.

Main cause of the issue that fee recovery event handler firing before core.

We are firing custom event (give_donation_value_updated) when donation amount updates but it will only fire if the form is multi-level ( even not for custom amount). This must be fire for any type of form or when amount changes.

To fix this issue this event should be in main donation amount handle function which is https://github.com/WordImpress/Give/blob/release/2.1.5/assets/src/js/frontend/give-donations.js#L1118

In PR I moved this custom event to main donation amount handler function: https://github.com/WordImpress/Give/blob/issues/3299/assets/src/js/frontend/give-donations.js#L1224

Since the issue is in the addon, so we need to update addon js.

Let me know what do you think.