Update Add/Edit Shipping Time Modals to support minimum and maximum shipping times stepper

[jorgemd24]

Changes proposed in this Pull Request:

Part of #2594

Since we're now working with min and max shipping times, the "Edit" and "Add" modals need to be updated to use the stepper component when creating or editing shipping times. This PR introduces a new component, MinMaxShippingTimes, which includes steppers for both the minimum and maximum shipping times.

The errors in the modals are displayed within the form instead of beneath the stepper component to prevent issues like this:

Screenshots:

Detailed test instructions:

1. Follow the steps mentioned in this PR to update the database: Add Shipping Max time column in gla_shipping_times Table #2520
2. Navigate to Dashboard -> Free Listings -> Edit
3. Add and edit shipping times using the modals, and verify that the min and max times are updated correctly.

Additional details:

In this commit 8652d24 I updated the onBlur function to align with onIncrement. However, I'm unsure what's best—whether we should allow users to enter any value and display errors in the form, or restrict input to values within the allowed range, like preventing negative numbers. Any advice would be appreciated.

Changelog entry

[codecov]

Codecov Report

Attention: Patch coverage is 94.73684% with 1 line in your changes missing coverage. Please review.

Project coverage is 63.8%. Comparing base (6a31818) to head (8652d24).
Report is 2 commits behind head on update/shippings-settings-phase-1.

Files with missing lines	Patch %	Lines
...me-input/edit-time-button/edit-time-modal/index.js	80.0%	1 Missing ⚠️

Additional details and impacted files

@@                         Coverage Diff                         @@
##           update/shippings-settings-phase-1   #2609     +/-   ##
===================================================================
+ Coverage                               63.3%   63.8%   +0.5%     
===================================================================
  Files                                    322     323      +1     
  Lines                                   5119    5133     +14     
  Branches                                1251    1257      +6     
===================================================================
+ Hits                                    3242    3276     +34     
+ Misses                                  1704    1684     -20     
  Partials                                 173     173             

Flag	Coverage Δ
js-unit-tests	63.8% <94.7%> (+0.5%)	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

Files with missing lines	Coverage Δ
...time-setup/add-time-button/add-time-modal/index.js	100.0% <100.0%> (+88.9%)	⬆️
.../shipping-time-setup/countries-time-input/index.js	91.7% <100.0%> (ø)
...g-time/shipping-time-setup/min-max-inputs/index.js	100.0% <100.0%> (ø)
...ing-time/shipping-time-setup/time-stepper/index.js	100.0% <100.0%> (ø)
js/src/utils/validateShippingTimeGroup.js	100.0% <100.0%> (ø)
...me-input/edit-time-button/edit-time-modal/index.js	89.5% <80.0%> (+82.8%)	⬆️

[martynmjones]

Hey @jorgemd24, thanks for implementing the stepper for shipping.

All is working properly although I noticed a few useability issues which we may want to address before releasing.

1. The modal size changes when an error is displayed or hidden. If a merchant is using the + and - to set the value then the content jumps and the mouse may move off the button when the error status changes.

Modal.error.message.mov

2. Invalid fields aren't highlighted when attempting to save changes. If a merchant is shipping to a number of countries and has different settings for each then it would be quite difficult to spot where the issue is.

3. Locations are immediately grouped if the min/max values match an existing field. at the moment merchants would need to enter an identical value and then focus on a different element before they are grouped.

   As it happens when using the steppers we potentially have a situation where we want to use the + button to get to 4 but it's grouped before that can happen.

   What do you think of adding a small delay before grouping so that it would be possible to use the stepper to get to a higher number?

Screen.Recording.2024-09-19.at.15.39.25.mov