feat(checkout): Reserved step for modern plans

[isabellaenriquez]

Part 2 of milestone 1
Figma: https://www.figma.com/design/o5VEiQ84cLCZEDUcP1lIHV/Checkout-Prototype?node-id=653-8250&t=sjKItWmz1zAoRWTC-0

This PR does the following:

• Extracts volume sliders into its own component so it can be reused across different checkout flows
• Converts AddDataVolume to a function component
• Updates AddDataVolume component so it can be reused for modern plans
• Updates legacy checkout flows to exclude categories that cannot be reserved above 1 unit in the reserved volumes step

new flow to be released later

reserved.step.mov

For legacy plans, this step should look largely the same as before; the only difference is that crons and uptime are no longer listed in this step:

legacy pre-performance plans

legacy performance plans

When this deploys, checkout for modern plans should still look the same as before as this PR does not add the new step to the checkout flow for modern plans; this will be covered in a followup PR.

modern plans

[codecov]

❌ 3 Tests Failed:

Tests completed	Failed	Passed	Skipped
9976	3	9973	8

View the top 3 failed test(s) by shortest run time

AM1 Checkout prefills with s1 subscription data

Stack Traces | 0.086s run time

TestingLibraryElementError: Unable to find an element with the text: Reserved Volumes. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.

Ignored nodes: comments, script, style
...
    at Object.getElementError (.../sentry/sentry/node_modules/@.../dom/dist/config.js:37:19)
    at .../sentry/sentry/node_modules/@.../dom/dist/query-helpers.js:76:38
    at .../sentry/sentry/node_modules/@.../dom/dist/query-helpers.js:52:17
    at .../sentry/sentry/node_modules/@.../dom/dist/query-helpers.js:95:19
    at Object.<anonymous> (.../views/amCheckout/index.spec.tsx:481:76)

AM1 Checkout prefills with mm2 team subscription data

Stack Traces | 0.09s run time

TestingLibraryElementError: Unable to find an element with the text: Reserved Volumes. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.

Ignored nodes: comments, script, style
...
    at Object.getElementError (.../sentry/sentry/node_modules/@.../dom/dist/config.js:37:19)
    at .../sentry/sentry/node_modules/@.../dom/dist/query-helpers.js:76:38
    at .../sentry/sentry/node_modules/@.../dom/dist/query-helpers.js:52:17
    at .../sentry/sentry/node_modules/@.../dom/dist/query-helpers.js:95:19
    at Object.<anonymous> (.../views/amCheckout/index.spec.tsx:391:76)

AM1 Checkout prefills with l1 subscription data

Stack Traces | 0.098s run time

TestingLibraryElementError: Unable to find an element with the text: Reserved Volumes. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.

Ignored nodes: comments, script, style
...
    at Object.getElementError (.../sentry/sentry/node_modules/@.../dom/dist/config.js:37:19)
    at .../sentry/sentry/node_modules/@.../dom/dist/query-helpers.js:76:38
    at .../sentry/sentry/node_modules/@.../dom/dist/query-helpers.js:52:17
    at .../sentry/sentry/node_modules/@.../dom/dist/query-helpers.js:95:19
    at Object.<anonymous> (.../views/amCheckout/index.spec.tsx:527:76)

To view more test analytics, go to the Test Analytics Dashboard
_{📋 Got 3 mins? Take this short survey to help us improve Test Analytics.}