## Objective See the objective outlined in the parent epic https://gitlab.com/groups/gitlab-org/-/epics/12199. ## Purpose This epic houses the work involved to implement the core framework for unified purchase flows which can then be used to migrate existing purchase flows into the unified version. ## Status [Complete](https://gitlab.com/groups/gitlab-org/-/epics/18565#note_2720835561) :white_check_mark: ## Issue board [Issue board](https://gitlab.com/groups/gitlab-org/-/boards/9484834?label_name%5B%5D=Unify%20purchase%20flows%3A%3ACore%20framework) ## Dependency overview ```mermaid graph LR %% Task definitions TransitionSpike["Spike: Determine Unified Purchase Flow Transition Strategy\ngitlab-org/customer-gitlab-com#12657"] Controller["[BE] Support initial render of unified purchase flow\ngitlab-org/customer-gitlab-com#12841"] PurchaseErrorMessages["[BE] Review and update purchase error messages\ngitlab-org/customer-gitlab-com#13130"] BasicApp["[FE] Create and mount basic app component\ngitlab-org/customer-gitlab-com#12844"] StepComponent["[FE] Create step component\ngitlab-org/customer-gitlab-com#12846"] CheckoutLayout["[FE] Create checkout layout component\ngitlab-org/customer-gitlab-com#12845"] Terms["[FE] Add terms and conditions checkbox\ngitlab-org/customer-gitlab-com#13081"] SubscriptionDetails["[FE] Create subscription details step\ngitlab-org/customer-gitlab-com#12847"] CustomerDetails["[FE] Create customer details step\ngitlab-org/customer-gitlab-com#12851"] PaymentDetails["[FE] Create payment details step\ngitlab-org/customer-gitlab-com#12854"] UpdateInvoiceQuery["[BE] Update invoice preview GraphQL query\ngitlab-org/customer-gitlab-com#12848"] InvoiceQueryIntegration["[FE] Integrate invoice preview GraphQL\ngitlab-org/customer-gitlab-com#12849"] OrderSummary["[FE] Create order summary component\ngitlab-org/customer-gitlab-com#12850"] CreatePaymentMethodsQuery["[BE] Create GraphQL query for payment methods\ngitlab-org/customer-gitlab-com#12852"] RefactorCreditCardForm["[FE] Refactor Zuora credit card form\ngitlab-org/customer-gitlab-com#12853"] RefactorPaymentMethodsSelect["[FE] Refactor payment_methods_select.vue\ngitlab-org/customer-gitlab-com#13054"] IntegrateSubscriptionCreationAPI["[FE] Integrate subscription creation API\ngitlab-org/customer-gitlab-com#12855"] StandardiseSignInPath["[FE] Standardize sign_in_path handling in purchase flows for error messaging\ngitlab-org/customer-gitlab-com#13198"] SurfaceValidationErrors["[BE] Surface validation errors in the preview and create actions\ngitlab-org/customer-gitlab-com#13277"] PurchaseGraphQLMutation["[BE] Create GraphQL mutation for new ProductRatePlan purchase\ngitlab-org/customer-gitlab-com#13314"] ProvideSubscriptionData["[BE] Include existing subscription data when only the namespace param is supplied\ngitlab-org/customer-gitlab-com#13348"] ExtractBillingFields["[FE] Extract billing account form fields to improve validation handling\ngitlab-org/customer-gitlab-com#13598"] ReturnCardDetailsInZuoraResponse["[BE] Return credit card details in successful Zuora callback response\ngitlab-org/customer-gitlab-com#13701"] NewCardPaymentSummary["[FE] Show credit card details for newly added card\ngitlab-org/customer-gitlab-com#13739"] UpdateCustomerGraphQLMutation["[BE] Create GraphQL mutation for updating Customer details\ngitlab-org/customer-gitlab-com#13802"] UpdateCustomerDetails["[FE] Update customer details for new customers in unified purchase flow\ngitlab-org/customer-gitlab-com#13836"] ShowCreditCardForm["[FE] Show credit card form directly for customers without payment methods\ngitlab-org/customer-gitlab-com#13936"] %% Dependency definitions TransitionSpike --> Controller Controller --> BasicApp Controller --> PurchaseErrorMessages SurfaceValidationErrors --> PurchaseGraphQLMutation SurfaceValidationErrors --> ProvideSubscriptionData StepComponent ---> CheckoutLayout BasicApp --> CheckoutLayout CheckoutLayout ---> Terms CheckoutLayout ---> SubscriptionDetails CheckoutLayout ---> CustomerDetails CheckoutLayout ---> PaymentDetails UpdateInvoiceQuery ---> InvoiceQueryIntegration SubscriptionDetails --> InvoiceQueryIntegration InvoiceQueryIntegration --> OrderSummary CreatePaymentMethodsQuery ------> RefactorPaymentMethodsSelect RefactorPaymentMethodsSelect --> PaymentDetails PaymentDetails --> IntegrateSubscriptionCreationAPI OrderSummary --> IntegrateSubscriptionCreationAPI CustomerDetails --> IntegrateSubscriptionCreationAPI PurchaseGraphQLMutation --> IntegrateSubscriptionCreationAPI ReturnCardDetailsInZuoraResponse --> NewCardPaymentSummary PaymentDetails --> NewCardPaymentSummary UpdateCustomerGraphQLMutation --> UpdateCustomerDetails %% Status classes classDef ready fill:#41a6be,stroke:#41a6be,stroke-width:3px %% Blue background for Ready for development classDef inprogress fill:#e68000,stroke:#e68000,stroke-width:3px %% Yellow background for In progress classDef blocked fill:#f06060,stroke:#f06060,stroke-width:3px %% Red background for Blocked classDef complete fill:#60b048,stroke:#60b048,stroke-width:3px %% Green background for Complete %% Apply status styles %% Ready tasks %% In Progress tasks %% Blocked tasks %% Completed tasks class TransitionSpike complete class StepComponent complete class CheckoutLayout complete class BasicApp complete class SubscriptionDetails complete class Controller complete class UpdateInvoiceQuery complete class RefactorCreditCardForm complete class InvoiceQueryIntegration complete class CreatePaymentMethodsQuery complete class OrderSummary complete class PurchaseErrorMessages complete class RefactorPaymentMethodsSelect complete class CustomerDetails complete class SurfaceValidationErrors complete class Terms complete class ProvideSubscriptionData complete class PaymentDetails complete class StandardiseSignInPath complete class PurchaseGraphQLMutation complete class IntegrateSubscriptionCreationAPI complete class UpdateCustomerGraphQLMutation complete class ReturnCardDetailsInZuoraResponse complete class ExtractBillingFields complete class NewCardPaymentSummary complete class UpdateCustomerDetails complete class ShowCreditCardForm complete %% Add legend subgraph Legend Ready["Ready for development"] InProgress["In progress"] Blocked["Blocked"] Complete["Complete"] end class Ready ready class InProgress inprogress class Blocked blocked class Complete complete ```