Noticed at https://gitlab.com/gitlab-org/gitlab/-/merge_requests/228101: ```markdown ## What does this MR do and why? 1. first <div> 2. second <div> Update the group billing page for free and trial namespace. Related to https://gitlab.com/gitlab-org/gitlab/-/work_items/593452 […] ``` Most of the page gets contained within these `<div>`s: {width=538 height=600} <details><summary>Full document in case it's relevant</summary> `````markdown ## What does this MR do and why? 1. first <div> 2. second <div> Update the group billing page for free and trial namespace. Related to https://gitlab.com/gitlab-org/gitlab/-/work_items/593452 Layout changes are behind the feature flag: `saas_upgrade_subscription_billing_page`. Changes to the existing cards are not behind the feature flag. This MR also moves away from using GlCard due to all the visual overrides needed, more context: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/225768#note_3137016347 Frontend change summary: 1. New app_with_upgrade_subscription.vue — New billing page layout component that conditionally shows CurrentPlanCard, DapMonthlyCreditCard, and StartUltimateTrialCard (hidden if trial is active or expired). 2. New start_ultimate_trial_card.vue — New card prompting users to start an Ultimate trial, listing benefits (Duo Agent Platform, Advanced CI/CD, no credit card required). 3. current_plan_card.vue refactored — Replaced GlCard wrapper with plain `<div>` + utility classes. Added upgradeSubscriptionPath inject; when present, shows an "Upgrade subscription" CTA instead of "Manage seats". 4. dap_monthly_credit_card.vue refactored — Also replaced GlCard with `<div>`. Removed gitlabCreditsDashboardPath inject, added upgradeSubscriptionPath. Simplified card content logic (removed separate trial-active branch), added new trial-included credit display (24 credits/user). Updated credit pricing from "$1" to "$0.95". Secondary link is now always "Learn more" pointing to docs. ## Screenshots or screen recordings <details> <summary>Updated design</summary> | Free without monthly credit purchase | Trial without monthly credit purchase | Expired trial without monthly credit purchase | | ------ | ------ | ------ | | {width=618 height=600}|{width=618 height=600}|{width=618 height=600}| | Free with monthly credit purchase | Trial with monthly credit purchase | Expired trial with monthly credit purchase | | ------ | ------ | ------ | | {width=618 height=600}|{width=618 height=600}| {width=618 height=600}| </details> <details> <summary>Previous design with updated card</summary> | Free without monthly credit purchase | Trial without monthly credit purchase | Expired trial without monthly credit purchase | | ------ | ------ | ------ | |{width=645 height=600}|{width=645 height=600}|{width=645 height=600}| | Free with monthly credit purchase | Trial with monthly credit purchase | Expired trial with monthly credit purchase | | ------ | ------ | ------ | |{width=645 height=600}|{width=645 height=600}|{width=645 height=600}| </details> ## How to set up and validate locally 1. Simulate Saas: https://docs.gitlab.com/ee/development/ee_features.html#simulate-a-saas-instance and restart GDK 2. Enable the feature flag in rails console: `Feature.enable(:enable_free_purchase_dap_monthly_commit)` 3. For free group, find or create a free group and go to /groups/{group-name}/-/billings page as owner 4. For trial group, create a group; In the gitlab admin UI, edit the group to be on an ultimate trial 5. In rails console, change the trial dates for the group ```ruby Group.last.gitlab_subscription.update_columns(trial_starts_on: Date.today, trial_ends_on: 30.days.from_now, trial: true) ``` 6. To simulate expired group, run the same code above but modify `trial_ends_on` to be `1.days.ago`. 7. Go to the group billings page. 8. To check the has monthly commitment variants of the page, quickest way is to simulate backend passing the data by applying the patch: ```diff diff --git a/ee/app/helpers/billing_plans_helper.rb b/ee/app/helpers/billing_plans_helper.rb index 7916fc6e0118..b1a43a4ab850 100644 --- a/ee/app/helpers/billing_plans_helper.rb +++ b/ee/app/helpers/billing_plans_helper.rb @@ -66,7 +66,7 @@ def free_trial_upgrade_subscription_billing_attributes(namespace, monthly_commit manageSeatsPath: group_usage_quotas_path(namespace, anchor: 'seats-quota-tab'), startTrialPath: new_trial_path(namespace_id: namespace.id), purchaseCreditsPath: ::Gitlab::Routing.url_helpers.subscription_portal_gitlab_com_purchase_credits_url(namespace.id), - monthlyCommitmentPurchased: monthly_commitment_purchased, + monthlyCommitmentPurchased: 20, upgradeSubscriptionPath: 'groups/upgrade-subscription' } end ``` <!-- Numbered steps to set up and validate the change are strongly suggested. Example: 1. In rails console enable the feature flag ```ruby Feature.enable(:member_areas_of_focus) ``` 1. Visit any group or project member pages such as `http://127.0.0.1:3000/groups/flightjs/-/group_members` 1. Click the `invite members` button. --> ## MR acceptance checklist Evaluate this MR against the [MR acceptance checklist](https://docs.gitlab.com/development/code_review/#acceptance-checklist). It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability. Related to #593452 ````` </details>