Frontend for new free/trial billings page for dap monthly commit

What does this MR do and why?

Related to #591000+s

Implement redesigned frontend for Free and Trial groups billing page, mainly to prepare for enabling Free and Trial groups to purchase a monthly commitment of DAP credits directly from the billing page.

This MR adds the feature flag + view/helper plumbing with the new billing app containing current plan and DAP credit cards. !225768 (merged) adds the premium and ultimate plan cards and feature spec.

References

Screenshots or screen recordings

Before

Free/Trial before

After

Free - No Trial - No Monthly Commitment	Free User - No Trial - Active Monthly Commitment

Active trial - No Monthly Commitment	Active trial - Active Monthly Commitment

Free - Expired trial - No Monthly Commitment	Free - Expired trial - Active Monthly Commitment

Dark mode	Mobile

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

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 --git a/ee/app/helpers/billing_plans_helper.rb b/ee/app/helpers/billing_plans_helper.rb
index 0b8ef752c72d..e449a0510a59 100644
--- a/ee/app/helpers/billing_plans_helper.rb
+++ b/ee/app/helpers/billing_plans_helper.rb
@@ -83,6 +83,7 @@ def free_trial_plan_billing_attributes(namespace, plans_data)
       if Feature.enabled?(:enable_free_purchase_dap_monthly_commit, namespace)
         attrs[:purchaseCreditsPath] = ::Gitlab::Routing.url_helpers.subscription_portal_gitlab_com_purchase_credits_url(namespace.id)
         attrs[:gitlabCreditsDashboardPath] = group_settings_gitlab_credits_dashboard_index_path(namespace)
+        attrs[:monthlyCommitmentPurchased] = 500
       end
     end
   end

MR acceptance checklist

Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.