From b219fe3683c97e4547257e2b61e936e67caefa20 Mon Sep 17 00:00:00 2001
From: Syed Sajjad  Hussain Shah <ssajjad@2u.com>
Date: Mon, 22 Apr 2024 11:34:47 +0500
Subject: [PATCH] fix: fix register button width

---
 src/register/RegistrationPage.jsx                | 6 +++++-
 src/register/data/optimizelyExperiment/helper.js | 7 +++++++
 src/sass/_registration.scss                      | 8 ++++++++
 3 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/src/register/RegistrationPage.jsx b/src/register/RegistrationPage.jsx
index 19b3d774..7bca6255 100644
--- a/src/register/RegistrationPage.jsx
+++ b/src/register/RegistrationPage.jsx
@@ -31,6 +31,7 @@ import {
   CONTROL,
   FIRST_STEP,
   getMultiStepRegistrationNextStep,
+  getRegisterButtonClassInExperiment,
   getRegisterButtonLabelInExperiment,
   getRegisterButtonSubmitStateInExperiment,
   MULTI_STEP_REGISTRATION_EXP_VARIATION,
@@ -522,7 +523,10 @@ const RegistrationPage = (props) => {
                   name="register-user"
                   type="submit"
                   variant="brand"
-                  className="mt-4 mb-4"
+                  className={`
+                    mt-4 mb-4 
+                    ${getRegisterButtonClassInExperiment(multiStepRegistrationExpVariation, multiStepRegistrationPageStep)}
+                  `}
                   state={getRegisterButtonSubmitStateInExperiment(
                     submitState,
                     validationsSubmitState,
diff --git a/src/register/data/optimizelyExperiment/helper.js b/src/register/data/optimizelyExperiment/helper.js
index e59ec718..7140d5ec 100644
--- a/src/register/data/optimizelyExperiment/helper.js
+++ b/src/register/data/optimizelyExperiment/helper.js
@@ -75,6 +75,13 @@ export const getRegisterButtonLabelInExperiment = (
   return existingButtonLabel;
 };
 
+export const getRegisterButtonClassInExperiment = (expVariation, registerPageStep) => {
+  if (expVariation === MULTI_STEP_REGISTRATION_EXP_VARIATION && registerPageStep === FIRST_STEP) {
+    return 'continue-button';
+  }
+  return 'register-button';
+};
+
 export const getRegisterButtonSubmitStateInExperiment = (
   registerSubmitState, validationsSubmitState, expVariation, registerPageStep,
 ) => {
diff --git a/src/sass/_registration.scss b/src/sass/_registration.scss
index 4126da9a..884af10d 100644
--- a/src/sass/_registration.scss
+++ b/src/sass/_registration.scss
@@ -1,3 +1,11 @@
+.register-button {
+  min-width: 14.4rem;
+}
+
+.continue-button {
+  min-width: 7rem;
+}
+
 .pgn__form-autosuggest__wrapper > .pgn__form-group {
   margin-bottom: 0 !important;
 }