Update in-app purchase flows' design to match registration & trial

What does this MR do and why?

Updates the design of the in-app checkout flows (for purchasing subscription plans, CI minutes, & storage) to use the same “minimal” layout & design as the registration & trial flows. More details on why are outlined in the issue.

Screenshots or screen recordings

Screenshots

General Overview

Before	After

All the Shots

Flow	Before (desktop)	Before (mobile)	After (desktop)	After (mobile)
Registration
Upgrade
CI Minutes
Storage

Screen recording

Before	After
https://youtu.be/rRsUvP97S_g (10:21)	https://youtu.be/Wy9hBSXmFvA (09:13)

Note: I have included chapter markings on the YouTube videos for convenience of checking each flow individually. They can be accessed from the video’s description.

How to set up and validate locally

Pre-requisites

1. A local copy of the CustomersDot application
2. CustomersDot & GitLab connected
3. Zuora sandbox set up in CustomersDot
4. CustomersDot GraphQL proxy configured – for testing the add-ons (CI Minutes & Storage) purchase flows
5. Namespace billing plans enabled
6. Start up the gdk in SaaS mode

Steps to validate

Flow 1: Purchase during registration flow

1. Make sure you are logged out
2. Navigate to /-/subscriptions/new?plan_id=2c92c0f876e0f4cc0176e176a08f1b70 to create a new user while going through the plan purchase flow
   • This should redirect you to /users/sign_up?redirect_from=checkout
3. Fill out the user registration form to create a new account
4. On the next screen (“Welcome to GitLab”), fill out the form with whatever details you want & tap the submit button
5. You should now be on the checkout page
   • To complete the flow, you can use test credit card data
6. After completing the checkout page, you’ll be on a special registration continuation page specifically for this flow
7. Once you complete all registration steps, you should be on the group page for the new group you created
   • You can verify that the group is upgraded by going to Settings › Billing in the sidebar

Flow 2: Upgrade an existing group

1. Log in and find an upgradeable group or create a new one
2. Navigate to the group’s billing page:
   1. Navigate to the group
   2. In the sidebar, select Settings › Billing
3. Select “Upgrade” on the plan of your choice
4. View the in-app checkout flow
   • To complete the flow, you can use test credit card data
5. Complete the checkout process to be taken back to the group page
   • You can verify that the group is upgraded by going to Settings › Billing in the sidebar

Flow 3: Buy more CI minutes

1. Log in and navigate to one of your groups (or create a new one)
2. Navigate to Settings (in the sidebar) › Usage Quotas › Pipelines
3. Scroll down the page until you find the “Buy additional minutes” button & click it
   • If you see the message “No data to display”, you may need to check the GraphQL proxy configuration (see item 4 in the Pre-requisites list)

Flow 4: Buy more storage

1. Log in and find the id of an upgradeable group (or create a new group)
2. Navigate to /-/subscriptions/buy_storage?selected_group={group-id}
   • If you get a 404 page, you may have improperly set the group’s id as a query param
   • If you see the message “No data to display”, you may need to check the GraphQL proxy configuration (see item 4 in the Pre-requisites list)

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

• I have evaluated the MR acceptance checklist for this MR.

---

Related to #352166 (closed) & #357762 (closed)