Tie into the in-app purchase flow for .com accounts that failed to renew
# Overview
As part of the work that we're doing to provide better information to customers that are nearing a renewal (#102), we want to enable the ability to re-subscribe within the app for .com customers that miss their renewal window.
# Proposal
Leverage the work done in https://gitlab.com/gitlab-org/growth/product/issues/87/designs to enable a .com customer that is expired to repurchase their subscription.
Flow:
1. .com customer with group owner permissions sees a version of the banner here: https://gitlab.com/gitlab-org/growth/product/-/issues/102/designs/dot_com_renewal_banners.jpg
1. They reach the point that their subscription is expired
1. When the user selects "Renew your subscription", take them to the pay flow here https://gitlab.com/gitlab-org/growth/product/-/issues/1524/designs
1. Pass the following information automatically and pre-populate:
1. Plan type
1. Group name
1. Active users
1. User can review that information and edit any of the options \
1. User enters credit card information
1. User confirms and processes the payment
1. User sees a success message
1. New subscription is created for the group via the customers portal and its entitlements are updated
# G/W/T
PERSONA: .com customer with the `owner` permission for the group
GIVEN: The group's subscription fails to renew and is downgraded to free
WHEN: They are viewing any page that falls under the subscription's groups or subgroups
THEN: They see a banner explaining they've been downgraded with a CTA to "Start a new subscription" - this is a change to the design https://gitlab.com/gitlab-org/growth/product/-/issues/102/designs
WHEN: The user clicks "Start a new subscription"
THEN: They are brought to a version of the checkout flow that was created for initial purchases: https://gitlab.com/gitlab-org/growth/product/-/issues/1524/designs/02._Renewal_Checkout.png
WHEN: The page loads
THEN: It is auto-populated with the plan type and group name
WHEN: The page loads
THEN: The active user count is displayed
WHEN: The page loads
THEN: Display a cost value based on their plan and active user count
WHEN: User count is edited
THEN: Don't allow the customer to enter a number lower than their current active (but allow a higher #)
WHEN: Fields are updated that impact the cost
THEN: The cost is updated
WHEN: The page loads
THEN: The user has the ability to enter a new credit card and billing address
GIVEN: The user wants to edit any the fields
WHEN: They update any of the fields and save
THEN: Save their updated information
WHEN: They submit their purchase
THEN: Pass the data to the customers portal to process the payment and create a new subscription in Zuora, SFDC, etc... as if it was created via the customers portal directly
GIVEN: The purchase succeeds
WHEN: The next page loads
THEN: Display a confirmation message
AND: Tie the new subscription to the group
GIVEN: The purchase fails
WHEN: The failure occurs
THEN: Display an error message on the page, do not transition to a new page
# Open Questions
* Can a group with a downgraded subscription have a new subscription created for them?
* Yes
* Do we want to link subscriptions together so that we can map new to old subscriptions?
* Yes, ideally
* Do we want to scope this to all owners of the group or can we identify the person that actually owns the subscription?
* Since this will be used for expired subscriptions and will not use any previous payment info, we should be able to show to all owners
issue