Incorrect purchase submit button color can be confusing

Problem

When purchasing a subscription in CustomersDot, the "buy subscription/storage/compute minutes" button is initially disabled (grey). When all information is filled out and the button is enabled and remains in the grey color. Upon click on the button, the color briefly changes to blue. The coloring can be confusing to customers when the button color doesn't change after it's enabled.

Screen_Recording_2024-12-03_at_10.32.07_AM

The following error is present in the console:

vue.esm.js:5126 [Vue warn]: Invalid prop: custom validator check failed for prop "variant".

found in

---> <GlButton>
       <TransactionCard> at javascripts/purchase/components/transaction_card.vue
         <PurchaseConfirmationCard> at javascripts/purchase/components/purchase_confirmation_card_deprecated.vue
           <NewEESubscriptionForm> at javascripts/subscription/components/new_ee_subscription_form.vue
             <NewEESubscription> at javascripts/subscription/components/new_ee_subscription.vue
               <Root>

This indicated it might have been introduced by a recent update of GitLab UI/SVG via https://gitlab.com/gitlab-org/customers-gitlab-com/-/merge_requests/11063+.

Proposal

Ensure that the variant is set correctly, so the button color to be blue when it's enabled and remain blue when clicked.

Result

Less confusing button color and clear indication something has changed when the button is enabled.