Replace Form-related "auto" effects with Form `onChange` handler

[ecgan]

User story

• This is related to Shipping rates UI changes: Change saveShippingRates into custom hook #1313 (comment).

Currently in our code base, we have four "auto" effects that are related to Form:

• useAutoSaveTargetAudienceEffect
• useAutoClearShippingEffect
• useAutoSaveSettingsEffect
• useAutoSaveShippingRatesEffect

The above four effects are used in the Setup MC flow. They were created in the first place because at that time it was not known and not documented that the WooCommerce Form component has an onChange prop (previously named onChangeCallback).

Now that we know about Form's onChange prop, we should make use of it to replace the above auto effects.

Note: there is also an "auto" effect called useAutoCheckBillingStatusEffect which is not relevant to Form and not related to this issue.

Technical

The four effects uses debounced callbacks. For most of them, it probably makes sense, because users might keep on changing values in the form (e.g. text input, radio options, checkboxes), and we don't want to call the APIs every time the values change.

For useAutoSaveShippingRatesEffect however, because the shipping rates value in the form would only change when the input control fires the onBlur event, we can just make the API call in Form's onChange without debouncing. (See #1313 (comment) and #1267 (comment).)

[eason9487]

After replacing ChooseAudience and SetupFreeListings with the shared components in #1616, the auto-saving mechanism was implemented with on*Change callbacks instead. All auto-saving hooks and debouncing were no longer in need.