fix: merge conflicts

src/features/authentication/components/AuthenticationSteps/EnterPasswordForm.tsx

@@ -142,42 +142,51 @@ export const EnterPasswordForm = ({
           </LTRBox>
         </Button>
       </Box>
-
-      <Typography variant="body2" color="textSecondary" sx={{ mt: 1, mb: 2 }}>
-        {t('enterPassword.enterThePasswordYouSetForYourAccount')}
-      </Typography>
-
-      <TextField
-        label={t('enterPassword.loginPassword')}
-        type={showPassword ? 'text' : 'password'}
-        value={passValue}
-        inputRef={inputRef}
-        onChange={(e) => setPassValue(e.target.value)}
-        onBlur={handleBlur}
-        error={!passValue && inputTouched}
-        helperText={
-          !passValue && inputTouched ? t('loginForm.thisFieldIsRequired') : ''
-        }
-        autoFocus
-        slotProps={{
-          htmlInput: { sx: { lineHeight: 1.5 } },
-          input: {
-            endAdornment: (
-              <IconButton
-                color="primary"
-                onClick={() => setShowPassword(!showPassword)}
-              >
-                {showPassword ? (
-                  <Icon Component={Eye} />
-                ) : (
-                  <Icon Component={EyeSlash} />
-                )}
-              </IconButton>
-            ),
-          },
+      <Box
+        component="form"
+        onSubmit={(e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          if (!loginWithPassLoading) {
+            void handleSubmit();
+          }
         }}
-        sx={{ my: 4 }}
-      />
+      >
+        <Typography variant="body2" color="textSecondary" sx={{ mt: 1, mb: 2 }}>
+          {t('enterPassword.enterThePasswordYouSetForYourAccount')}
+        </Typography>
+
+        <TextField
+          label={t('enterPassword.loginPassword')}
+          type={showPassword ? 'text' : 'password'}
+          value={passValue}
+          inputRef={inputRef}
+          onChange={(e) => setPassValue(e.target.value)}
+          onBlur={handleBlur}
+          error={!passValue && inputTouched}
+          helperText={
+            !passValue && inputTouched ? t('loginForm.thisFieldIsRequired') : ''
+          }
+          autoFocus
+          slotProps={{
+            htmlInput: { sx: { lineHeight: 1.5 } },
+            input: {
+              endAdornment: (
+                <IconButton
+                  color="primary"
+                  onClick={() => setShowPassword(!showPassword)}
+                >
+                  {showPassword ? (
+                    <Icon Component={Eye} />
+                  ) : (
+                    <Icon Component={EyeSlash} />
+                  )}
+                </IconButton>
+              ),
+            },
+          }}
+          sx={{ my: 4 }}
+        />
 
       <Button
         onClick={handleLoginWithOtp}
@@ -191,14 +200,17 @@ export const EnterPasswordForm = ({
         {t('enterPassword.loginWithOneTimeCode')}
       </Button>
 
-      <Stack spacing={1}>
-        <Button loading={loginWithPassLoading} onClick={handleSubmit}>
-          {t('verify.confirmAndLogin')}
-        </Button>
-        <Link to="/forget-password">
-          <Button variant="text">{t('enterPassword.iForgotMyPassword')}</Button>
-        </Link>
-      </Stack>
+        <Stack spacing={1}>
+          <Button loading={loginWithPassLoading}>
+            {t('verify.confirmAndLogin')}
+          </Button>
+          <Link to="/forget-password">
+            <Button variant="text">
+              {t('enterPassword.iForgotMyPassword')}
+            </Button>
+          </Link>
+        </Stack>
+      </Box>
     </AuthenticationCard>
   );
 };

src/features/authentication/components/CountryCodeSelector.tsx

@@ -16,6 +16,7 @@ import { countries, type Country } from '../../../data/countries';
 import type { CountryCode } from '@/types/commonTypes';
 import { Icon } from '@rkheftan/harmony-ui';
 import { LTRTypography } from '@/components/common/LTRTypography';
+import { Virtuoso } from 'react-virtuoso';
 
 interface CountryCodeSelectorProps {
   show: boolean;
@@ -26,10 +27,6 @@ interface CountryCodeSelectorProps {
   disabled?: boolean;
 }
 
-/**
- * An animated country code adornment that fades and slides into view.
- * Its visibility is controlled by the `show` prop.
- */
 export function CountryCodeSelector({
   show,
   value,
@@ -54,13 +51,11 @@ export function CountryCodeSelector({
   };
 
   const handleClose = () => {
-    setTimeout(() => {
-      setAnchorEl(null);
-    }, 0);
+    setTimeout(() => setAnchorEl(null), 0);
     setTimeout(() => {
       onCloseFocusRef.current?.focus();
     }, 100);
-    setSearchTerm(''); // Reset search on close
+    setSearchTerm('');
   };
 
   const handleSelect = (country: Country) => {
@@ -69,7 +64,6 @@ export function CountryCodeSelector({
   };
 
   const handleMenuEntered = () => {
-    // Focus the input field after the menu has finished opening
     searchInputRef.current?.focus();
   };
 
@@ -77,11 +71,18 @@ export function CountryCodeSelector({
     () =>
       countries.filter(
         (country) =>
-          t(country.label).toLowerCase().includes(searchTerm.toLowerCase()) ||
+          t(country.label, { ns: 'country' })
+            .toLowerCase()
+            .includes(searchTerm.toLowerCase()) ||
           country.label.toLowerCase().includes(searchTerm.toLowerCase()) ||
           country.phone.includes(searchTerm),
       ),
-    [searchTerm],
+    [searchTerm, t],
+  );
+
+  const initialIndex = Math.max(
+    0,
+    filteredCountries.findIndex((c) => c.phone === value),
   );
 
   return (
@@ -94,19 +95,14 @@ export function CountryCodeSelector({
       <Box
         onClick={handleClick}
         sx={{
-          // Animate width and opacity based on the 'show' prop
           width: show ? 'auto' : 0,
           opacity: show ? 1 : 0,
           transition: (theme) =>
             theme.transitions.create(['width', 'opacity'], {
               duration: theme.transitions.duration.standard,
             }),
-
-          // Prevent content from wrapping or spilling out during animation
           overflow: 'hidden',
           whiteSpace: 'nowrap',
-
-          // layout styles
           height: '100%',
           display: 'flex',
           alignItems: 'center',
@@ -153,23 +149,15 @@ export function CountryCodeSelector({
           slotProps={{
             list: {
               sx: {
-                // Set the width to match the anchor element's width
                 width: menuWidth,
                 height: '18.75rem',
+                p: 0,
               },
             },
-            transition: {
-              onEntered: handleMenuEntered,
-            },
-          }}
-          anchorOrigin={{
-            vertical: 'bottom',
-            horizontal: 'left',
-          }}
-          transformOrigin={{
-            vertical: 'top',
-            horizontal: 'left',
+            transition: { onEntered: handleMenuEntered },
           }}
+          anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
+          transformOrigin={{ vertical: 'top', horizontal: 'left' }}
         >
           <Box
             sx={{
@@ -190,7 +178,7 @@ export function CountryCodeSelector({
             />
           </Box>
 
-          <Box sx={{ width: '100%', maxHeight: '14.75rem', overflow: 'auto' }}>
+          <Box sx={{ width: '100%', height: '14.75rem' }}>
             {filteredCountries.length === 0 ? (
               <MenuItem disabled>
                 <ListItem>
@@ -200,28 +188,33 @@ export function CountryCodeSelector({
                 </ListItem>
               </MenuItem>
             ) : (
-              filteredCountries.map((country) => (
-                <MenuItem
-                  key={country.code}
-                  selected={country.phone === value}
-                  onClick={() => handleSelect(country)}
-                >
-                  <ListItemIcon>
-                    <ReactCountryFlag
-                      countryCode={country.code}
-                      svg
-                      style={{
-                        height: '1.125rem',
-                        width: '1.125rem',
-                      }}
+              <Virtuoso
+                style={{ height: '100%', width: '100%' }}
+                data={filteredCountries}
+                initialTopMostItemIndex={initialIndex}
+                itemContent={(_, country) => (
+                  <MenuItem
+                    key={country.code}
+                    selected={country.phone === value}
+                    onClick={() => handleSelect(country)}
+                  >
+                    <ListItemIcon>
+                      <ReactCountryFlag
+                        countryCode={country.code}
+                        svg
+                        style={{ height: '1.125rem', width: '1.125rem' }}
+                      />
+                    </ListItemIcon>
+                    <ListItemText
+                      primary={t(country.label, { ns: 'country' })}
                     />
-                  </ListItemIcon>
-                  <ListItemText primary={t(country.label, { ns: 'country' })} />
-                  <LTRTypography color="text.secondary">
-                    {country.phone}
-                  </LTRTypography>
-                </MenuItem>
-              ))
+                    <LTRTypography color="text.secondary">
+                      {country.phone}
+                    </LTRTypography>
+                  </MenuItem>
+                )}
+                computeItemKey={(_, c) => c.code}
+              />
             )}
           </Box>
         </Menu>