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

All modified and coverable lines are covered by tests ✅

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

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    5134     +15     
  Branches                                1251    1254      +3     
===================================================================
+ Hits                                    3242    3278     +36     
+ Misses                                  1704    1683     -21     
  Partials                                 173     173             

Flag	Coverage Δ
js-unit-tests	63.8% <100.0%> (+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%)	⬆️
...me-input/edit-time-button/edit-time-modal/index.js	94.1% <100.0%> (+87.5%)	⬆️
.../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%> (ø)

[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

[jorgemd24]

Thanks @martynmjones for your helpful comments! I’ve addressed points 1 and 3.

Regards the second one:

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.

I agree that it's not easy to see which one is incorrect, but this behaviour hasn't changed compared to the one in the develop branch.

I believe the issue is that we're treating shipping_times as a group of inputs rather than individual inputs, which makes it harder to display errors for each input separately. I'll create an issue for this since I think it goes beyond the scope of this PR.

[martynmjones]

Many thanks for making those adjustments @jorgemd24! Tested the updated version and both the issues I mentioned previously have been resolved.

I believe the issue is that we're treating shipping_times as a group of inputs rather than individual inputs, which makes it harder to display errors for each input separately. I'll create an issue for this since I think it goes beyond the scope of this PR.

Perfect! Thank you.