fixes for spinner and phone verification flow

Co-authored-by: Devtools <devtools@redhat.com>

Author: mfrancisc

workspaces/sandbox/plugins/sandbox/src/components/Modals/PhoneVerificationModal.tsx

@@ -101,6 +101,7 @@ export const PhoneVerificationModal: React.FC<PhoneVerificationModalProps> = ({
   const handleEditPhoneNumber = () => {
     setPhoneNumber(undefined);
     setEnterOTP(false);
+    setOtp(['', '', '', '', '', '']);
   };
 
   const handleResendCode = async () => {

workspaces/sandbox/plugins/sandbox/src/components/Modals/PhoneVerificationSteps/PhoneNumberStep.tsx

@@ -187,9 +187,8 @@ export const PhoneNumberStep: React.FC<PhoneNumberFormProps> = ({
         >
           <RPNInput
             required
-            defaultCountry="ES"
+            defaultCountry={country || 'ES'}
             label="Phone number"
-            placeholder="(000) 000 0000"
             value={phoneNumber}
             onChange={setPhoneNumber}
             inputComponent={PhoneInputField}

workspaces/sandbox/plugins/sandbox/src/components/Modals/PhoneVerificationSteps/VerificationCodeStep.tsx

@@ -62,6 +62,7 @@ export const VerificationCodeStep: React.FC<VerificationCodeProps> = ({
   const inputRefs = useRef<any>([]);
 
   useEffect(() => {
+    // Focus on the first input box when modal opens
     if (!otp[0]) {
       // Focus on the first input box when modal opens
       setTimeout(() => inputRefs.current[0]?.focus(), 100);
@@ -153,6 +154,7 @@ export const VerificationCodeStep: React.FC<VerificationCodeProps> = ({
             {otp.map((digit, index) => (
               <TextField
                 key={index}
+                data-testid="opt-inputs"
                 value={digit}
                 onChange={e => handleChange(index, e)}
                 onKeyDown={e =>

workspaces/sandbox/plugins/sandbox/src/components/Modals/PhoneVerificationSteps/__tests__/VerificationCodeStep.test.tsx

@@ -77,6 +77,9 @@ describe('VerificationCodeStep', () => {
     // submit phone button should be there
     const submitButton = screen.getAllByTestId('submit-opt-button');
     expect(submitButton).toHaveLength(1);
+    // opt inputs are there
+    const optInputFields = screen.getAllByTestId('opt-inputs');
+    expect(optInputFields).toHaveLength(5);
     // resend opt should be there
     const resendOptLink = screen.getAllByTestId('resend-code-link');
     expect(resendOptLink).toHaveLength(1);

workspaces/sandbox/plugins/sandbox/src/components/Modals/__tests__/PhoneVerificationModal.test.tsx

@@ -83,6 +83,17 @@ describe('PhoneVerificationModal', () => {
     );
   };
 
+  test('should open the modal', () => {
+    renderComponent();
+
+    expect(screen.getByText("Let's verify you")).toBeInTheDocument();
+    expect(
+      screen.getByText(
+        "Enter your phone number and we'll send you a text message with a verification code.",
+      ),
+    ).toBeInTheDocument();
+  });
+
   test('should handle modal close', () => {
     renderComponent();
 

workspaces/sandbox/plugins/sandbox/src/components/SandboxCatalog/SandboxCatalogCardButton.tsx

@@ -37,6 +37,12 @@ export const SandboxCatalogCardButton: React.FC<
 > = ({ link, id, handleTryButtonClick, theme, refetchingUserData }) => {
   const { loading, userFound, verificationRequired, userReady, ansibleStatus } =
     useSandboxContext();
+  const [clicked, setClicked] = React.useState(false);
+
+  const handleClick = () => {
+    if (!clicked) setClicked(true);
+    handleTryButtonClick(id);
+  };
 
   const label = (() => {
     if (id === Product.AAP) {
@@ -56,9 +62,9 @@ export const SandboxCatalogCardButton: React.FC<
 
   let endIcon;
   if (
-    loading ||
-    (userFound && !userReady && !verificationRequired) ||
-    refetchingUserData
+    (loading && clicked) ||
+    (userFound && !userReady && !verificationRequired && clicked) ||
+    (refetchingUserData && clicked)
   ) {
     endIcon = <CircularProgress size={20} />;
   } else if (id !== Product.AAP) {
@@ -90,7 +96,7 @@ export const SandboxCatalogCardButton: React.FC<
       variant="outlined"
       onClick={() => {
         if (!loading) {
-          handleTryButtonClick(id);
+          handleClick();
         }
       }}
       endIcon={endIcon}

workspaces/sandbox/plugins/sandbox/src/components/SandboxCatalog/__tests__/SandboxCatalogCardButton.test.tsx

@@ -13,7 +13,6 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
 import React from 'react';
 import { render, screen, fireEvent } from '@testing-library/react';
 import { ThemeProvider, createTheme } from '@mui/material/styles';
@@ -107,27 +106,19 @@ describe('SandboxCatalogCardButton', () => {
     expect(screen.getByText('Reprovision')).toBeInTheDocument();
   });
 
-  it('shows loading spinner when loading is true', () => {
-    mockUseSandboxContext.mockReturnValue({
-      loading: true,
-      userFound: false,
-      userReady: false,
-      ansibleStatus: AnsibleStatus.UNKNOWN,
-    } as any);
-
-    renderButton();
-    expect(screen.getByRole('progressbar')).toBeInTheDocument();
-  });
-
-  it('shows loading spinner when userFound is true but userReady is false', () => {
+  it('button was clicked - shows loading spinner when userFound is true but userReady is false', async () => {
     mockUseSandboxContext.mockReturnValue({
       loading: false,
       userFound: true,
       userReady: false,
       ansibleStatus: AnsibleStatus.UNKNOWN,
+      verificationRequired: false,
     } as any);
 
     renderButton();
+    const button = screen.getByRole('button');
+    fireEvent.click(button);
+
     expect(screen.getByRole('progressbar')).toBeInTheDocument();
   });