Change background color of Zuora iframe component

In order to make it’s contents readable again in Dark Mode

ee/app/assets/javascripts/subscriptions/new/components/checkout/step.vue

 <script>
 import { mapActions, mapGetters } from 'vuex';
 import { GlFormGroup, GlDeprecatedButton } from '@gitlab/ui';
+import { convertToSnakeCase, dasherize } from '~/lib/utils/text_utility';
 import StepHeader from './step_header.vue';
 import StepSummary from './step_summary.vue';
 
@@ -40,6 +41,9 @@ export default {
     isEditable() {
       return this.isFinished && this.stepIndex(this.step) < this.currentStepIndex;
     },
+    snakeCasedStep() {
+      return dasherize(convertToSnakeCase(this.step));
+    },
     ...mapGetters(['currentStep', 'stepIndex', 'currentStepIndex']),
   },
   methods: {
@@ -58,7 +62,7 @@ export default {
 <template>
   <div class="mb-3 mb-lg-5">
     <step-header :title="title" :is-finished="isFinished" />
-    <div class="card">
+    <div :class="['card', snakeCasedStep]">
       <div v-show="isActive" @keyup.enter="nextStep">
         <slot name="body" :active="isActive"></slot>
         <gl-form-group v-if="nextStepButtonText" class="gl-mt-3 gl-mb-0">

ee/app/assets/javascripts/subscriptions/new/store/actions.js

@@ -120,9 +120,13 @@ export const fetchPaymentFormParams = ({ dispatch }) =>
 export const fetchPaymentFormParamsSuccess = ({ commit }, data) => {
   if (data.errors) {
     createFlash(
-      sprintf(s__('Checkout|Credit card form failed to load: %{message}'), {
-        message: data.errors,
-      }),
+      sprintf(
+        s__('Checkout|Credit card form failed to load: %{message}'),
+        {
+          message: data.errors,
+        },
+        false,
+      ),
     );
   } else {
     commit(types.UPDATE_PAYMENT_FORM_PARAMS, data);
@@ -159,6 +163,7 @@ export const paymentFormSubmittedError = (_, response) => {
         'Checkout|Submitting the credit card form failed with code %{errorCode}: %{errorMessage}',
       ),
       response,
+      false,
     ),
   );
 };

ee/app/assets/stylesheets/pages/subscriptions.scss

@@ -76,6 +76,13 @@ $subscriptions-full-width-lg: 541px;
     @media(min-width: map-get($grid-breakpoints, lg)) {
       width: $subscriptions-full-width-lg;
     }
+
+    &.payment-method {
+      // Use literal to avoid dark theme from changing the color
+      // scss-lint:disable ColorVariable
+      background-color: #fff;
+      // scss-lint:enable ColorVariable
+    }
   }
 
   .gl-form-group,
@@ -141,7 +148,10 @@ $subscriptions-full-width-lg: 541px;
     }
 
     iframe {
-      background-color: $white;
+      // Use literal to avoid dark theme from changing the color
+      // scss-lint:disable ColorVariable
+      background-color: #fff;
+      // scss-lint:enable ColorVariable
       margin: -4px;
       width: 100% !important;
     }

ee/changelogs/unreleased/239291-new-purchase-flow-does-not-support-dark-theme.yml

+---
+title: Display contents of Zuora iframe for the new purchase flow in Dark Mode
+merge_request: 40114
+author:
+type: fixed