fix(checkout): Reactive but debounced volume sliders

[isabellaenriquez]

Updates the slider behavior to retain debouncing to reduce redundant API calls, but ensure the current volume slider value is immediately reflected in the slider UI

before

sliders.before.mov

after

sliders.after.mov

[cursor]

Cursor Bugbot has reviewed your changes and found 2 potential issues.

^{Bugbot Autofix is OFF. To automatically fix reported issues with Cloud Agents, enable Autofix in the Cursor dashboard.}

[cursor]

Rapid multi-slider changes cause UI/data desync

Medium Severity

When a user rapidly adjusts multiple different category sliders within 300ms, lodash debounce only fires for the last call, discarding earlier calls. The local reserved state captures all changes, but formData.reserved only receives the last category's update. This causes the UI to show slider values that were never persisted—the sliders display one value while formData holds another, and reserved is never re-synced from formData after initialization.

Additional Locations (1)

• static/gsApp/views/amCheckout/steps/reserveAdditionalVolume.tsx#L77-L85

 

[sentry]

Bug: The component's local reserved state does not sync with the formData.reserved prop, causing stale UI data and incorrect price calculations when the plan changes.
_{Severity: MEDIUM}

Suggested Fix

Add a useEffect hook in the ReserveAdditionalVolume component to update the local reserved state whenever the formData.reserved prop changes. For example: useEffect(() => { setReserved(formData.reserved); }, [formData.reserved]);

Prompt for AI Agent

Review the code at the location below. A potential bug has been identified by an AI
agent.
Verify if this is a real issue. If it is, propose a fix; if not, explain why it's not
valid.

Location: static/gsApp/views/amCheckout/steps/reserveAdditionalVolume.tsx#L51-L53

Potential issue: The `ReserveAdditionalVolume` component initializes its local
`reserved` state from the `formData.reserved` prop but fails to update it when the prop
changes. When a user modifies their plan, the parent component recalculates
`formData.reserved` and passes it down. However, the `ReserveAdditionalVolume`
component's local state remains stale. This causes the UI to display incorrect
reservation values and the `reservedVolumeTotal` calculation to be based on this
outdated state, resulting in an inaccurate price being shown to the user.

_{Did we get this right? 👍 / 👎 to inform future reviews.}