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
- A local copy of the CustomersDot application
- CustomersDot & GitLab connected
- Zuora sandbox set up in CustomersDot
- CustomersDot GraphQL proxy configured – for testing the add-ons (CI Minutes & Storage) purchase flows
- Namespace billing plans enabled
- Start up the
gdk
in SaaS mode
Steps to validate
Flow 1: Purchase during registration flow
- Make sure you are logged out
- 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
- This should redirect you to
- Fill out the user registration form to create a new account
- On the next screen (“Welcome to GitLab”), fill out the form with whatever details you want & tap the submit button
- You should now be on the checkout page
- To complete the flow, you can use test credit card data
- After completing the checkout page, you’ll be on a special registration continuation page specifically for this flow
- 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
- You can verify that the group is upgraded by going to
Flow 2: Upgrade an existing group
- Log in and find an upgradeable group or create a new one
- Navigate to the group’s billing page:
- Navigate to the group
- In the sidebar, select
Settings
›Billing
- Select “Upgrade” on the plan of your choice
- View the in-app checkout flow
- To complete the flow, you can use test credit card data
- 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
- You can verify that the group is upgraded by going to
Flow 3: Buy more CI minutes
- Log in and navigate to one of your groups (or create a new one)
- Navigate to
Settings
(in the sidebar) ›Usage Quotas
›Pipelines
- 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
- Log in and find the
id
of an upgradeable group (or create a new group) - 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)
Merge request reports
Activity
changed milestone to %14.10
added Engineering Stretch UI polish UX auto updated devopsgrowth groupacquisition priority4 sectiongrowth severity4 typemaintenance workflowin dev + 1 deleted label
assigned to @dreedy
added 447 commits
-
51db0021...6feb4962 - 446 commits from branch
master
- ce20c4e3 - Use the minimal layout for the in-app checkout flows
-
51db0021...6feb4962 - 446 commits from branch
3 Warnings This merge request is quite big (547 lines changed), please consider splitting it into multiple merge requests. This merge request adds a new rule to app/assets/stylesheets/framework/common.scss or app/assets/stylesheets/utilities.scss. This merge request changed undocumented Vue components in
vue_shared/
. Please consider creating Stories for these components:ee/app/assets/javascripts/vue_shared/purchase_flow/components/checkout/billing_address.vue
ee/app/assets/javascripts/vue_shared/purchase_flow/components/checkout/confirm_order.vue
ee/app/assets/javascripts/vue_shared/purchase_flow/components/step.vue
ee/app/assets/javascripts/vue_shared/purchase_flow/components/step_header.vue
ee/app/assets/javascripts/vue_shared/purchase_flow/components/step_order_app.vue
If needed, you can retry the
danger-review
job that generated this comment.Reviewer roulette
Changes that require review have been detected!
Please refer to the table below for assigning reviewers and maintainers suggested by Danger in the specified category:
Category Reviewer Maintainer backend Huzaifa Iftikhar ( @huzaifaiftikhar1
) (UTC+5.5, 12.5 hours ahead of@dreedy
)Alper Akgun ( @a_akgun
) (UTC+3, 10 hours ahead of@dreedy
)frontend Dave Pisek ( @dpisek
) (UTC+10, 17 hours ahead of@dreedy
)Miguel Rincon ( @mrincon
) (UTC+2, 9 hours ahead of@dreedy
)UX Katie Macoy ( @katiemacoy
) (UTC+12, 19 hours ahead of@dreedy
)No maintainer available To spread load more evenly across eligible reviewers, Danger has picked a candidate for each review slot, based on their timezone. Feel free to override these selections if you think someone else would be better-suited or use the GitLab Review Workload Dashboard to find other available reviewers.
To read more on how to use the reviewer roulette, please take a look at the Engineering workflow and code review guidelines. Please consider assigning a reviewer or maintainer who is a domain expert in the area of the merge request.
Once you've decided who will review this merge request, assign them as a reviewer! Danger does not automatically notify them for you.
Changes to utility SCSS files
Addition to
app/assets/stylesheets/utilities.scss
You have added a new rule to
app/assets/stylesheets/utilities.scss
. Are you sure you need this rule?If it is a component class shared across items, could it be added to the component as a utility class or to the component's stylesheet? If not, consider adding it to
app/assets/stylesheets/framework/common.scss
If it is a new utility class, is there another class that shares the same values in either this file or in
app/assets/stylesheets/utilities.scss
? If not, please be sure this addition follows the Gitlab UI naming style so it may be removed when these rules are included. See Include gitlab-ui utility-class library for more about this project.Generated by
Dangeradded 1 commit
- 7595e7bb - Use the minimal layout for the in-app checkout flows
added 1 commit
- ba7ee723 - Use the minimal layout for the in-app checkout flows
Bundle size analysis [beta]
This compares changes in bundle size for entry points between the commits 84e14bae and edbd89ec
Special assetsEntrypoint / Name Size before Size after Diff Diff in percent average 3.46 MB 3.46 MB +1.65 KB 0.0 % mainChunk 1.94 MB 1.94 MB - 0.0 %
Note: We do not have exact data for 84e14bae. So we have used data from: 3abf3aa8.
The target commit was too new, so we used the latest commit from master we have info on.
It might help to rerun thebundle-size-review
job
This might mean that you have a few false positives in this report. If something unrelated to your code changes is reported, you can check this comparison in order to see if they caused this change.Please look at the full report for more details
Read more about how this report works.
Generated by
DangerAllure report
allure-report-publisher
generated test report!review-qa-smoke:
test report
review-qa-reliable: test report
review-qa-blocking: test reportreview-qa-blocking:
test report for edbd89ecexpand test summary
+-------------------------------------------------------------------+ | suites summary | +----------------------+--------+--------+---------+-------+--------+ | | passed | failed | skipped | flaky | result | +----------------------+--------+--------+---------+-------+--------+ | Protect | 2 | 0 | 0 | 2 | ❗ | | Plan | 41 | 0 | 1 | 41 | ❗ | | Manage | 36 | 0 | 2 | 38 | ❗ | | Create | 22 | 0 | 3 | 23 | ❗ | | Verify | 12 | 0 | 1 | 12 | ❗ | | Configure | 0 | 0 | 1 | 0 | ➖ | | Version sanity check | 0 | 0 | 1 | 0 | ➖ | | Package | 0 | 0 | 1 | 0 | ➖ | +----------------------+--------+--------+---------+-------+--------+ | Total | 113 | 0 | 10 | 116 | ❗ | +----------------------+--------+--------+---------+-------+--------+
added 398 commits
-
ba7ee723...d2b2e94e - 397 commits from branch
master
- 9e49c4fa - Use the minimal layout for the in-app checkout flows
-
ba7ee723...d2b2e94e - 397 commits from branch
added 1 commit
- 961b8c71 - Use the minimal layout for the in-app checkout flows
added 1 commit
- 41c58e22 - Use the minimal layout for the in-app checkout flows
added 217 commits
-
41c58e22...b5084e3d - 216 commits from branch
master
- edda86b6 - Use the minimal layout for the in-app checkout flows
-
41c58e22...b5084e3d - 216 commits from branch
Suggested Reviewers (beta)
The individuals below may be good candidates to participate in the review based on various factors.
You can use slash commands in comments to quickly assign
/assign_reviewer @user1
.Suggested Reviewers @iamphill
,@wortschi
,@ntepluhina
,@engwan
,@zcuddy
If you do not believe these suggestions are useful, please apply the label Bad Suggested Reviewer. You can also provide feedback for this feature on this issue:
https://gitlab.com/gitlab-org/gitlab/-/issues/357923
.Automatically generated by Suggested Reviewers Bot - an experimental ML-based recommendation engine created by ~"group::applied ml".
Edited by GitLab Reviewer-Recommender Botchanged milestone to %15.0
added missed:14.10 label
added 4976 commits
-
edda86b6...7e6802ef - 4975 commits from branch
master
- 34367929 - Use the minimal layout for the in-app checkout flows
-
edda86b6...7e6802ef - 4975 commits from branch
changed milestone to %15.1
added missed:15.0 label
added 640 commits
-
34367929...4ea87b00 - 639 commits from branch
master
- 0aef4d3b - Use the minimal layout for the in-app checkout flows
-
34367929...4ea87b00 - 639 commits from branch
marked the checklist item I have evaluated the MR acceptance checklist for this MR. as completed
added 1 commit
- c6088057 - Use the minimal layout for the in-app checkout flows
- Resolved by Heinrich Lee Yu
requested review from @acroitor
- Resolved by Dallas Reedy
@tristan.read, could you do the frontend review on this one for me please? Thanks!
requested review from @tristan.read
- Resolved by Dallas Reedy
Hey @nickleonard!
Roulette has chosen you as the UX reviewer for this MR. Please have a look when you get a chance. Thanks!
requested review from @nickleonard and removed review request for @tristan.read and @acroitor