fix(ott-2710): mobile test fixes

src/features/HeaderFilters/store/hooks/index.tsx

@@ -41,18 +41,18 @@ export const useFilters = () => {
     closeDropdownList,
     confirmClear,
     currentFilters,
+    filtersListName,
     filtersSize,
     getDropdownList,
     handleSetFilters,
     inputValue,
     isEmptyFilters,
     isFiltersShown,
-    isOpenList,
     matchesList,
-    openDropdownList,
     openPopup,
     queryParams,
     setTournamentMatches,
+    toggleDropdownList,
   } = useMatchFilters({
     selectedDate,
     selectedTournament,
@@ -111,6 +111,7 @@ export const useFilters = () => {
     closeDropdownList,
     confirmClear,
     currentFilters,
+    filtersListName,
     filtersSize,
     getDropdownList,
     handleClickBack,
@@ -118,11 +119,9 @@ export const useFilters = () => {
     inputValue,
     isEmptyFilters,
     isFiltersShown,
-    isOpenList,
     isShowTournament,
     isTodaySelected,
     matchesList,
-    openDropdownList,
     openPopup,
     queryParams,
     resetFilters,
@@ -139,6 +138,7 @@ export const useFilters = () => {
     setSelectedTournament,
     setSportIds,
     sportIds,
+    toggleDropdownList,
     updateDate,
   }), [
     activeFilters,
@@ -150,6 +150,7 @@ export const useFilters = () => {
     closeDropdownList,
     confirmClear,
     currentFilters,
+    filtersListName,
     filtersSize,
     getDropdownList,
     handleClickBack,
@@ -157,11 +158,9 @@ export const useFilters = () => {
     inputValue,
     isEmptyFilters,
     isFiltersShown,
-    isOpenList,
     isShowTournament,
     isTodaySelected,
     matchesList,
-    openDropdownList,
     openPopup,
     queryParams,
     resetFilters,
@@ -178,6 +177,7 @@ export const useFilters = () => {
     setSelectedTournament,
     setSportIds,
     sportIds,
+    toggleDropdownList,
     updateDate,
   ])
 

src/features/HeaderFilters/store/hooks/useMatchFilters.tsx

@@ -68,17 +68,23 @@ export const useMatchFilters = ({
 }: TUseMatchFilters) => {
   const [matchesList, setMatchesList] = useState<Array<Match>>([])
   const [tournamentMatches, setTournamentMatches] = useState<Array<Match>>([])
-  const [isOpenList, setOpenList] = useState<string>('')
+  const [filtersListName, setFiltersListName] = useState<string>('')
   const [activeFilters, setActiveFilters] = useState<TActiveFilters>(DEFAULT_FILTERS)
   const [inputValue, setInputValue] = useState<string>('')
   const [openPopup, setOpenPopup] = useState(false)
 
-  const openDropdownList = (title: string) => () => {
+  const toggleDropdownList = (title: string) => () => {
-    setOpenList(title === isOpenList ? '' : title)
+    if (title === filtersListName) {
+      setFiltersListName('')
+      setInputValue('')
+    } else {
+      setFiltersListName(title)
+    }
   }
 
   const closeDropdownList = () => {
-    setOpenList('')
+    setFiltersListName('')
+    setInputValue('')
   }
 
   const clearAllFilters = () => {
@@ -266,17 +272,17 @@ export const useMatchFilters = ({
     closeDropdownList,
     confirmClear,
     currentFilters,
+    filtersListName,
     filtersSize,
     getDropdownList,
     handleSetFilters,
     inputValue,
     isEmptyFilters,
     isFiltersShown,
-    isOpenList,
     matchesList,
-    openDropdownList,
     openPopup,
     queryParams,
     setTournamentMatches,
+    toggleDropdownList,
   }
 }

src/features/HomePage/components/ClearFiltersPopup/index.tsx

@@ -1,6 +1,6 @@
 import { useHeaderFiltersStore } from 'features/HeaderFilters'
 import { T9n } from 'features/T9n'
-import React from 'react'
+
 import {
   ButtonsContainer,
   CancelButton,
@@ -25,7 +25,8 @@ export const ClearFiltersPopup = () => {
           <T9n t='clear_filters' />
         </PopupTitle>
         <PopupText>
-          <T9n t='clear_popup_message' />
+          {/* <T9n t='clear_popup_message' /> */}
+          <span>Do you want to clear all filter selections?</span>
         </PopupText>
         <ButtonsContainer>
           <ConfirmButton onClick={confirmClear}>

src/features/HomePage/components/ClearFiltersPopup/styled.tsx

@@ -1,23 +1,31 @@
 import styled, { css } from 'styled-components/macro'
 
 import { ModalWindow } from 'features/Modal/styled'
+import { OutsideClickWrapper } from 'features/OutsideClick'
 import {
   Modal as BaseModal,
 } from 'features/AuthServiceApp/components/RegisterPopup/styled'
 import { isMobileDevice } from 'config/userAgent'
 
 export const Modal = styled(BaseModal)`
+  ${OutsideClickWrapper} {
+    ${isMobileDevice
+    ? css`height: 100%;`
+    : ''}
+  }
+
   ${ModalWindow} {
     ${isMobileDevice
     ? css`
-    min-height: 201px;
+      min-height: 201px;
-    max-width: 351px;
+      max-width: 351px;
-    padding: 26px 19px 33px 19px;
+      padding: 26px 15px 33px 15px;
+      top: 19vh;
     `
     : css`
-    min-height: 220px;
+      min-height: 220px;
-    max-width: 611px;
+      max-width: 611px;
-    padding: 37px 0 39px 0;
+      padding: 37px 0 39px 0;
     `}
   }
 `

src/features/HomePage/components/Dropdown/styled.tsx

@@ -1,4 +1,5 @@
 import styled, { css } from 'styled-components/macro'
+
 import { customScrollbar } from 'features/Common'
 import { Checkbox as BaseCheckbox } from 'features/Common/Checkbox'
 import { Label } from 'features/Common/Checkbox/styled'
@@ -17,6 +18,7 @@ export const DropDownContainer = styled.div`
       border-radius: 3.5px;
       z-index: 10;`}
 `
+
 export const FiltersList = styled.ul`
   overflow-y: auto;
   display: flex;

src/features/HomePage/components/MatchesFilters/index.tsx

@@ -54,13 +54,13 @@ export const MatchesFilters = ({ isMobile }: TFiltersProps) => {
     changeInput,
     clearFilters,
     currentFilters,
+    filtersListName,
     filtersSize,
     getDropdownList,
     handleSetFilters,
     inputValue,
-    isOpenList,
     matchesList,
-    openDropdownList,
+    toggleDropdownList,
   } = useHeaderFiltersStore()
 
   return (
@@ -79,9 +79,9 @@ export const MatchesFilters = ({ isMobile }: TFiltersProps) => {
 
         return (
           <FilterContainer
-            active={isOpenList === filterTitle}
+            active={filtersListName === filterTitle}
             key={filterTitle}
-            onClick={openDropdownList(filterTitle)}
+            onClick={toggleDropdownList(filterTitle)}
           >
             {/* <T9n className='filter_title' t={filterTitle} /> */}
             <span className='filter_title'>{filterTitle}</span>
@@ -111,14 +111,14 @@ export const MatchesFilters = ({ isMobile }: TFiltersProps) => {
                 </FiltersCount>
               )}
             </ActiveFilters>
-            {isOpenList === filterTitle && !isNil(matchesList) && !isMobileDevice && (
+            {filtersListName === filterTitle && !isNil(matchesList) && !isMobileDevice && (
               <DropDown
+                activeFilters={activeFilters}
                 changeInput={changeInput}
-                inputValue={inputValue}
                 clearFilters={clearFilters}
-                activeFilters={activeFilters}
-                setFilters={handleSetFilters}
                 filterTitle={filterTitle}
+                inputValue={inputValue}
+                setFilters={handleSetFilters}
               />
             )}
           </FilterContainer>

src/features/HomePage/components/MobileMatchesFilters/index.tsx

@@ -26,11 +26,11 @@ export const MobileMatchesFilters = () => {
     clickClearAll,
     closeDropdownList,
     currentFilters,
+    filtersListName,
     filtersSize,
     handleSetFilters,
     inputValue,
     isEmptyFilters,
-    isOpenList,
     matchesList,
   } = useHeaderFiltersStore()
 
@@ -54,7 +54,7 @@ export const MobileMatchesFilters = () => {
             {filtersSize !== 0 && <FiltersCount>{` ${filtersSize}`}</FiltersCount>}
           </FilterContainer>
           <Modal isOpen={isOpen} withCloseButton={false}>
-            {isEmpty(isOpenList)
+            {!filtersListName
               ? (
                 <>
                   <MatchesFilters isMobile />
@@ -70,13 +70,13 @@ export const MobileMatchesFilters = () => {
                 <>
                   {!isNil(matchesList) && (
                     <DropDown
+                      activeFilters={activeFilters}
                       changeInput={changeInput}
-                      inputValue={inputValue}
                       clearFilters={clearFilters}
-                      activeFilters={activeFilters}
-                      setFilters={handleSetFilters}
-                      filterTitle={isOpenList}
                       closeDropdownList={closeDropdownList}
+                      filterTitle={filtersListName}
+                      inputValue={inputValue}
+                      setFilters={handleSetFilters}
                     />
                   )}
                   <CloseButton onClick={closeFilters} />

src/features/HomePage/index.tsx

@@ -31,7 +31,7 @@ const Home = () => {
     isShowConfirmPopup,
     setIsOpenDownload,
   } = useHomePage()
-  const { isOpenList } = useHeaderFiltersStore()
+  const { filtersListName } = useHeaderFiltersStore()
 
   return (
     <PageWrapper>
@@ -41,7 +41,7 @@ const Home = () => {
           setIsOpenDownload={setIsOpenDownload}
         />
       ) : (
-        <Header disabled={Boolean(isOpenList)} />
+        <Header disabled={Boolean(filtersListName)} />
       )}
       <Main>
         <UserFavorites />