Develop

package.json

@@ -117,7 +117,7 @@
     "react-dom": "^18.1.0",
     "react-error-boundary": "^6.0.0",
     "react-gtm-module": "^2.0.11",
-    "react-i18next": "^15.0.1",
+    "react-i18next": "^16.0.0",
     "react-image-crop": "^11.0.6",
     "react-range-slider-input": "^3.2.1",
     "react-router": "^7.5.2",

react/assets/forus-webshop/scss/includes/blocks/block-faq.scss

@@ -115,10 +115,19 @@
         }
     }
 
-    @media screen and (max-width: 1000px) {
+    @media screen and (max-width: 1200px) {
+        .block-faq-header,
+        .block-faq-group,
+        .faq-item {
+            width: 800px;
+        }
+    }
+
+    @media screen and (max-width: 850px) {
         gap: 20px;
 
         .block-faq-header {
+            width: 100%;
             margin-bottom: 5px;
 
             .block-faq-title {
@@ -130,7 +139,13 @@
             }
         }
 
+        .block-faq-group {
+            width: 100%;
+        }
+
         .faq-item {
+            width: 100%;
+
             .faq-item-header {
                 padding: 15px 14px 15px 15px;
 

react/src/dashboard/components/modals/ModalVouchersUpload.tsx

@@ -48,7 +48,7 @@ type CSVErrorProp = {
 type RowDataProp = {
     _uid?: string;
     amount?: number;
-    expires_at?: string;
+    expire_at?: string;
     note?: string;
     bsn?: string;
     email?: string;

react/src/dashboard/services/VoucherService.ts

@@ -128,16 +128,16 @@ export class VoucherService<T = SponsorVoucher> {
         return this.apiRequest.post(`${this.prefix}/${organizationId}/sponsor/transactions`, data);
     }
 
-    public sampleCSVBudgetVoucher(expires_at = '2020-02-20'): string {
-        const headers = ['amount', 'expires_at', 'note', 'email', 'activate', 'activation_code', 'client_uid'];
-        const values = [10, expires_at, 'voorbeeld notitie', 'test@example.com', 0, 0, ''];
+    public sampleCSVBudgetVoucher(expire_at = '2020-02-20'): string {
+        const headers = ['amount', 'expire_at', 'note', 'email', 'activate', 'activation_code', 'client_uid'];
+        const values = [10, expire_at, 'voorbeeld notitie', 'test@example.com', 0, 0, ''];
 
         return Papa.unparse([headers, values]);
     }
 
-    public sampleCSVProductVoucher(product_id = null, expires_at = '2020-02-20'): string {
-        const headers = ['product_id', 'expires_at', 'note', 'email', 'activate', 'activation_code', 'client_uid'];
-        const values = [product_id, expires_at, 'voorbeeld notitie', 'test@example.com', 0, 0, ''];
+    public sampleCSVProductVoucher(product_id = null, expire_at = '2020-02-20'): string {
+        const headers = ['product_id', 'expire_at', 'note', 'email', 'activate', 'activation_code', 'client_uid'];
+        const values = [product_id, expire_at, 'voorbeeld notitie', 'test@example.com', 0, 0, ''];
 
         return Papa.unparse([headers, values]);
     }

react/src/webshop/components/elements/top-navbar/TopNavbarSearch.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useContext, useEffect, useRef, useState } from 'react';
 import { useNavigateState, useStateRoutes } from '../../../modules/state_router/Router';
 import useAppConfigs from '../../../hooks/useAppConfigs';
 import { mainContext } from '../../../contexts/MainContext';
@@ -21,6 +21,8 @@ import TopNavbarSearchResultItem from './TopNavbarSearchResultItem';
 import useSetProgress from '../../../../dashboard/hooks/useSetProgress';
 import { clickOnKeyEnter } from '../../../../dashboard/helpers/wcag';
 import classNames from 'classnames';
+import { ResponseError } from '../../../../dashboard/props/ApiResponses';
+import usePushDanger from '../../../../dashboard/hooks/usePushDanger';
 
 export type SearchResultGroupLocal = SearchResultGroup & {
     shown?: boolean;
@@ -34,18 +36,22 @@ export type SearchResultLocal = {
 
 export default function TopNavbarSearch({ autoFocus = false }: { autoFocus?: boolean }) {
     const appConfigs = useAppConfigs();
-    const { route } = useStateRoutes();
-    const { setShowSearchBox, searchFilter } = useContext(mainContext);
+    const { setShowSearchBox } = useContext(mainContext);
     const inputRef = useRef<HTMLInputElement>(null);
 
     const translate = useTranslate();
     const navigateState = useNavigateState();
     const searchService = useSearchService();
 
+    const pushDanger = usePushDanger();
     const setProgress = useSetProgress();
 
+    const hideSearchDropdown = useRef<boolean>(false);
+    const searchingForDropdown = useRef<boolean>(false);
+
     const [dropdown, setDropdown] = useState(false);
     const [searchFocused, setSearchFocused] = useState(false);
+    const { route: currentState } = useStateRoutes();
 
     const [results, setResults] = useState<SearchResultLocal>(null);
     const [resultsAll, setResultsAll] = useState<Array<SearchResultGroupItem>>(null);
@@ -59,14 +65,7 @@ export default function TopNavbarSearch({ autoFocus = false }: { autoFocus?: boo
         q: '',
     });
 
-    const { resetFilters, update: filterUpdate } = filters;
-    const { update: updateSearchFilters } = searchFilter;
-
-    const globalQuery = useMemo(() => searchFilter?.values?.q, [searchFilter?.values?.q]);
-
-    const isSearchResultPage = useMemo(() => {
-        return route.state.name === 'search-result';
-    }, [route?.state?.name]);
+    const { resetFilters } = filters;
 
     const hideDropDown = useCallback(() => {
         setDropdown(false);
@@ -123,34 +122,44 @@ export default function TopNavbarSearch({ autoFocus = false }: { autoFocus?: boo
     useEffect(() => {
         setLastQuery(filters.activeValues.q);
 
-        if (isSearchResultPage) {
-            return;
-        }
-
         if (!filters.activeValues.q || filters.activeValues.q?.length == 0) {
             return clearSearch();
         }
+
         setProgress(0);
+        searchingForDropdown.current = true;
 
         searchService
             .searchWithOverview({ q: filters.activeValues.q, with_external: 1, take: 9 })
-            .then((res) => updateResults(res.data.data))
-            .finally(() => setProgress(100));
-    }, [filters.activeValues.q, isSearchResultPage, searchService, clearSearch, updateResults, setProgress]);
+            .then((res) => {
+                updateResults(res.data.data);
+
+                if (hideSearchDropdown.current) {
+                    hideDropDown();
+                }
+            })
+            .catch((err: ResponseError) => {
+                pushDanger(translate('push.error'), err.data?.message);
+            })
+            .finally(() => {
+                setProgress(100);
+                hideSearchDropdown.current = false;
+                searchingForDropdown.current = false;
+            });
+    }, [
+        filters.activeValues.q,
+        searchService,
+        clearSearch,
+        updateResults,
+        setProgress,
+        hideDropDown,
+        pushDanger,
+        translate,
+    ]);
 
     useEffect(() => {
-        let timer: number;
-
-        if (isSearchResultPage) {
-            timer = window.setTimeout(() => updateSearchFilters({ q: filters.values.q }));
-        }
-
-        return () => window.clearTimeout(timer);
-    }, [filters.values.q, isSearchResultPage, updateSearchFilters]);
-
-    useEffect(() => {
-        filterUpdate({ q: globalQuery });
-    }, [filterUpdate, globalQuery]);
+        clearSearch();
+    }, [currentState?.state?.name, clearSearch]);
 
     return (
         <div className={classNames(`block block-navbar-search`, dropdown && 'block-navbar-search-results')}>
@@ -159,11 +168,13 @@ export default function TopNavbarSearch({ autoFocus = false }: { autoFocus?: boo
                     e?.preventDefault();
                     e?.stopPropagation();
 
-                    hideSearchBox();
-
-                    if (!isSearchResultPage) {
-                        navigateState('search-result', {}, { q: filters.values.q });
+                    clearSearch();
+                    if (searchingForDropdown.current) {
+                        hideSearchDropdown.current = true;
                     }
+
+                    navigateState('search-result', {}, { q: filters.values.q });
+                    document.querySelector<HTMLInputElement>('#main_search')?.focus();
                 }}
                 className={`search-form form ${resultsAll?.length > 0 ? 'search-form-found' : ''}`}>
                 <ClickOutside onClickOutside={hideSearchBox}>

react/src/webshop/components/pages/search/Search.tsx

@@ -1,7 +1,6 @@
-import React, { Fragment, useCallback, useContext, useEffect, useMemo, useState } from 'react';
+import React, { Fragment, useCallback, useEffect, useMemo, useState } from 'react';
 import useTranslate from '../../../../dashboard/hooks/useTranslate';
 import useAuthIdentity from '../../../hooks/useAuthIdentity';
-import { mainContext } from '../../../contexts/MainContext';
 import { SearchItem, useSearchService } from '../../../services/SearchService';
 import { useFundService } from '../../../services/FundService';
 import { useOrganizationService } from '../../../../dashboard/services/OrganizationService';
@@ -23,6 +22,7 @@ import { clickOnKeyEnter, clickOnKeyEnterOrSpace } from '../../../../dashboard/h
 import { PaginationData } from '../../../../dashboard/props/ApiResponses';
 import PayoutTransaction from '../../../../dashboard/props/models/PayoutTransaction';
 import usePayoutTransactionService from '../../../services/PayoutTransactionService';
+import UIControlText from '../../../../dashboard/components/elements/forms/ui-controls/UIControlText';
 
 export default function Search() {
     const authIdentity = useAuthIdentity();
@@ -37,14 +37,9 @@ export default function Search() {
     const productCategoryService = useProductCategoryService();
     const payoutTransactionService = usePayoutTransactionService();
 
-    const { searchFilter } = useContext(mainContext);
-
     const [displayType, setDisplayType] = useState<'list' | 'grid'>('list');
     const [searchItems, setSearchItems] = useState<PaginationData<SearchItem & { stateParams?: object }>>(null);
 
-    const globalQuery = useMemo(() => searchFilter?.values?.q, [searchFilter?.values?.q]);
-    const [globalInitialized, setGlobalInitialized] = useState(false);
-
     // Search direction
     const [sortByOptions] = useState<
         Array<{
@@ -248,18 +243,6 @@ export default function Search() {
         );
     }, [doSearch, filterValuesActive, sortByOptions]);
 
-    useEffect(() => {
-        setGlobalInitialized(true);
-
-        if (!globalInitialized && filterValues?.q) {
-            setTimeout(() => searchFilter.update({ q: filterValues.q }), 150);
-        }
-    }, [filterValues.q, globalInitialized, searchFilter]);
-
-    useEffect(() => {
-        filterUpdate({ q: globalQuery });
-    }, [filterUpdate, globalQuery]);
-
     return (
         <BlockShowcasePage
             countFiltersApplied={countFiltersApplied}
@@ -273,6 +256,19 @@ export default function Search() {
                 organizations &&
                 productCategories && (
                     <div className="showcase-aside-block">
+                        <div className="form-group">
+                            <label className="form-label" htmlFor="main_search">
+                                {translate('search.filters.search')}
+                            </label>
+                            <UIControlText
+                                value={filterValues.q}
+                                autoFocus={true}
+                                onChangeValue={(q: string) => filterUpdate({ q })}
+                                ariaLabel={translate('search.filters.search')}
+                                id="main_search"
+                            />
+                        </div>
+
                         <div className="form-label">{translate('search.filters.highlighted')}</div>
                         {searchItemTypes?.map((itemType) => (
                             <div key={itemType.key} className="form-group">
@@ -358,10 +354,9 @@ export default function Search() {
                 <Fragment>
                     <div className="showcase-content-header">
                         <div className="showcase-filters-title">
-                            {translate('search.title')}
                             {filterValuesActive.q && (
                                 <Fragment>
-                                    {' ' + translate('search.filters.found_for', { query: filterValuesActive.q })}
+                                    {translate('search.filters.found_for', { query: filterValuesActive.q })}
                                 </Fragment>
                             )}
                             <div className="showcase-filters-title-count" data-nosnippet="true">