Develop

package.json

@@ -118,7 +118,7 @@
     "react-i18next": "^15.0.1",
     "react-image-crop": "^11.0.6",
     "react-range-slider-input": "^3.2.1",
-    "react-router-dom": "^6.27.0",
+    "react-router": "^7.5.2",
     "react-slider": "^2.0.6",
     "summernote": "^0.9.1",
     "terser-webpack-plugin": "^5.3.9",

react/src/dashboard/Dashboard.tsx

@@ -2,7 +2,7 @@ import { ModalsProvider } from './modules/modals/context/ModalContext';
 import { AuthProvider } from './contexts/AuthContext';
 import React, { useContext, useEffect } from 'react';
 import { Layout } from './layout/Layout';
-import { HashRouter, Route, Routes, BrowserRouter } from 'react-router-dom';
+import { HashRouter, Route, Routes, BrowserRouter } from 'react-router';
 import EnvDataProp from '../props/EnvData';
 import { MainProvider, mainContext } from './contexts/MainContext';
 import i18n from 'i18next';

react/src/dashboard/components/elements/empty-card/EmptyCard.tsx

@@ -1,5 +1,5 @@
 import React, { Fragment, ReactNode, useMemo } from 'react';
-import { NavLink } from 'react-router-dom';
+import { NavLink } from 'react-router';
 
 interface EmptyButtonType {
     to?: string;

react/src/dashboard/components/elements/tables/elements/CardHeaderFilter.tsx

@@ -24,6 +24,7 @@ export default function CardHeaderFilter({
             )}
 
             <button
+                data-dusk="showFilters"
                 className="button button-default button-icon"
                 onClick={(e) => {
                     e.stopPropagation();

react/src/dashboard/components/elements/tables/elements/FilterItemToggle.tsx

@@ -4,10 +4,12 @@ export default function FilterItemToggle({
     children,
     label,
     show = false,
+    dusk = null,
 }: {
     children: React.ReactElement | Array<React.ReactElement>;
     label: string;
     show?: boolean;
+    dusk?: string;
 }) {
     const [visible, setVisible] = useState(show);
 
@@ -16,6 +18,7 @@ export default function FilterItemToggle({
             <label
                 htmlFor=""
                 className={`form-label form-label-toggle ${visible ? 'active' : ''}`}
+                data-dusk={dusk}
                 onClick={() => setVisible(!visible)}>
                 <span>{label}</span>
                 <em className="mdi mdi-menu-right form-label-icon" />

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

@@ -23,6 +23,7 @@ import SelectControlOptionsFund from '../elements/select-control/templates/Selec
 import FormGroupInfo from '../elements/forms/elements/FormGroupInfo';
 import TranslateHtml from '../elements/translate-html/TranslateHtml';
 import usePushApiError from '../../hooks/usePushApiError';
+import InfoBox from '../elements/info-box/InfoBox';
 
 export default function ModalVoucherCreate({
     funds,
@@ -468,6 +469,30 @@ export default function ModalVoucherCreate({
                                             </div>
                                         </div>
 
+                                        {fund?.backoffice?.backoffice_enabled && assignType.key !== 'bsn' && (
+                                            <div className="form-group form-group-inline form-group-inline-lg">
+                                                <div className={`form-label`}>&nbsp;</div>
+                                                <div className="form-offset">
+                                                    <InfoBox
+                                                        type={'warning'}
+                                                        iconPosition={'top'}
+                                                        iconColor={'warning'}>
+                                                        <p className={'text-strong'}>
+                                                            Let op! De backoffice integratie stuurt mogelijk geen data
+                                                        </p>
+                                                        <p>
+                                                            Om data te laten versturen via de backoffice integratie, is
+                                                            het noodzakelijk dat de inwoner een BSN heeft geverifieerd
+                                                            door in te loggen met DigiD. Bij het aanmaken van een tegoed
+                                                            op basis van een activatiecode of e-mailadres, wordt deze
+                                                            stap overgeslagen en zal er mogelijk geen data vanuit het
+                                                            systeem worden verstuurd via de backoffice integratie.
+                                                        </p>
+                                                    </InfoBox>
+                                                </div>
+                                            </div>
+                                        )}
+
                                         {assignType.hasInput && (
                                             <div className="form-group form-group-inline form-group-inline-lg">
                                                 <div
@@ -478,27 +503,35 @@ export default function ModalVoucherCreate({
                                                     }`}>
                                                     {assignType.inputLabel}
                                                 </div>
-                                                <input
-                                                    className="form-control"
-                                                    placeholder={assignType.inputLabel}
-                                                    value={form.values[assignType.key] || ''}
-                                                    onChange={(e) => form.update({ [assignType.key]: e.target.value })}
-                                                />
-                                                <FormError error={form.errors?.[assignType.key]} />
+                                                <div className="form-offset">
+                                                    <input
+                                                        className="form-control"
+                                                        placeholder={assignType.inputLabel}
+                                                        value={form.values[assignType.key] || ''}
+                                                        onChange={(e) =>
+                                                            form.update({ [assignType.key]: e.target.value })
+                                                        }
+                                                    />
+                                                    <FormError error={form.errors?.[assignType.key]} />
+                                                </div>
                                             </div>
                                         )}
 
                                         <div className="form-group form-group-inline form-group-inline-lg">
                                             <div className="form-label">
                                                 {translate('modals.modal_voucher_create.labels.client_uid')}
                                             </div>
-                                            <input
-                                                className="form-control"
-                                                placeholder={translate('modals.modal_voucher_create.labels.client_uid')}
-                                                value={form.values.client_uid || ''}
-                                                onChange={(e) => form.update({ client_uid: e.target.value })}
-                                            />
-                                            <FormError error={form.errors?.client_uid} />
+                                            <div className="form-offset">
+                                                <input
+                                                    className="form-control"
+                                                    placeholder={translate(
+                                                        'modals.modal_voucher_create.labels.client_uid',
+                                                    )}
+                                                    value={form.values.client_uid || ''}
+                                                    onChange={(e) => form.update({ client_uid: e.target.value })}
+                                                />
+                                                <FormError error={form.errors?.client_uid} />
+                                            </div>
                                         </div>
 
                                         <div className="form-group form-group-inline form-group-inline-lg">

react/src/dashboard/components/pages/auth/Auth2FA.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import Auth2FAInfoBox from '../../elements/auth2fa-info-box/Auth2FAInfoBox';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router';
 import { getStateRouteUrl } from '../../../modules/state_router/Router';
 import useOpenModal from '../../../hooks/useOpenModal';
 import Modal2FASetup from '../../modals/Modal2FASetup';

react/src/dashboard/components/pages/auth/IdentityRestore.tsx

@@ -1,7 +1,7 @@
-import React, { useCallback, useContext, useEffect } from 'react';
+import React, { useCallback, useContext, useEffect, useState } from 'react';
 import { authContext } from '../../../contexts/AuthContext';
 import { useIdentityService } from '../../../services/IdentityService';
-import { useNavigate, useParams } from 'react-router-dom';
+import { useNavigate, useParams } from 'react-router';
 import { getStateRouteUrl } from '../../../modules/state_router/Router';
 import { StringParam, useQueryParams } from 'use-query-params';
 import { pushNotificationContext } from '../../../modules/push_notifications/context/PushNotificationsContext';
@@ -11,10 +11,13 @@ const targetNewSignup = 'newSignup';
 
 export default function IdentityRestore({ confirmation = false }: { confirmation: boolean }) {
     const tokenParam = useParams().token;
-    const [query] = useQueryParams({
-        token: StringParam,
-        target: StringParam,
-    });
+
+    const [query] = useState(
+        useQueryParams({
+            token: StringParam,
+            target: StringParam,
+        })[0],
+    );
 
     const { setToken } = useContext(authContext);
     const { pushDanger } = useContext(pushNotificationContext);

react/src/dashboard/components/pages/auth/SignIn.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useContext, useEffect, useState } from 'react';
 import useFormBuilder from '../../../hooks/useFormBuilder';
 import { getStateRouteUrl } from '../../../modules/state_router/Router';
-import { NavLink, useNavigate } from 'react-router-dom';
+import { NavLink, useNavigate } from 'react-router';
 import { useIdentityService } from '../../../services/IdentityService';
 import QrCode from '../../elements/qr-code/QrCode';
 import { authContext } from '../../../contexts/AuthContext';

react/src/dashboard/components/pages/auth/SignOut.tsx

@@ -1,7 +1,7 @@
 import React, { useContext, useEffect } from 'react';
 import { authContext } from '../../../contexts/AuthContext';
 import { mainContext } from '../../../contexts/MainContext';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router';
 import { getStateRouteUrl } from '../../../modules/state_router/Router';
 
 export default function SignOut() {

react/src/dashboard/components/pages/auth/SignUpProvider.tsx

@@ -1,5 +1,5 @@
 import React, { Fragment, useCallback, useContext, useEffect, useMemo, useState } from 'react';
-import { NavLink, useNavigate } from 'react-router-dom';
+import { NavLink, useNavigate } from 'react-router';
 import { getStateRouteUrl } from '../../../modules/state_router/Router';
 import ProgressStorage from '../../../helpers/ProgressStorage';
 import useFormBuilder from '../../../hooks/useFormBuilder';

react/src/dashboard/components/pages/auth/SignUpSponsor.tsx

@@ -1,5 +1,5 @@
 import React, { Fragment, useCallback, useContext, useEffect, useMemo, useState } from 'react';
-import { NavLink, useNavigate } from 'react-router-dom';
+import { NavLink, useNavigate } from 'react-router';
 import { getStateRouteUrl } from '../../../modules/state_router/Router';
 import ProgressStorage from '../../../helpers/ProgressStorage';
 import Organization from '../../../props/models/Organization';

react/src/dashboard/components/pages/auth/SignUpValidator.tsx

@@ -1,5 +1,5 @@
 import React, { Fragment, useCallback, useContext, useEffect, useMemo, useState } from 'react';
-import { NavLink, useNavigate } from 'react-router-dom';
+import { NavLink, useNavigate } from 'react-router';
 import { getStateRouteUrl } from '../../../modules/state_router/Router';
 import ProgressStorage from '../../../helpers/ProgressStorage';
 import { useOrganizationService } from '../../../services/OrganizationService';

react/src/dashboard/components/pages/employees/Employees.tsx

@@ -1,7 +1,7 @@
 import React, { Fragment, useCallback, useContext, useEffect, useState } from 'react';
 import { mainContext } from '../../../contexts/MainContext';
 import { useEmployeeService } from '../../../services/EmployeeService';
-import { NavLink } from 'react-router-dom';
+import { NavLink } from 'react-router';
 import { hasPermission } from '../../../helpers/utils';
 import { getStateRouteUrl } from '../../../modules/state_router/Router';
 import useFilter from '../../../hooks/useFilter';

react/src/dashboard/components/pages/extra-payments-view/ExtraPaymentsView.tsx

@@ -4,7 +4,7 @@ import LoadingCard from '../../elements/loading-card/LoadingCard';
 import StateNavLink from '../../../modules/state_router/StateNavLink';
 import { hasPermission } from '../../../helpers/utils';
 import useSetProgress from '../../../hooks/useSetProgress';
-import { useParams } from 'react-router-dom';
+import { useParams } from 'react-router';
 import useProductReservationService from '../../../services/ProductReservationService';
 import useTransactionService from '../../../services/TransactionService';
 import useEnvData from '../../../hooks/useEnvData';

react/src/dashboard/components/pages/feature/Feature.tsx

@@ -6,7 +6,7 @@ import useAssetUrl from '../../../hooks/useAssetUrl';
 import ModalFeatureContact from '../../modals/ModalFeatureContact';
 import useOpenModal from '../../../hooks/useOpenModal';
 import { snakeCase } from 'lodash';
-import { useParams } from 'react-router-dom';
+import { useParams } from 'react-router';
 import StateNavLink from '../../../modules/state_router/StateNavLink';
 import LoadingCard from '../../elements/loading-card/LoadingCard';
 import BiTools from './items/BiTools';

react/src/dashboard/components/pages/feature/elements/AdditionalFeatureList.tsx

@@ -1,7 +1,7 @@
 import React, { Fragment } from 'react';
 import { kebabCase } from 'lodash';
 import { getStateRouteUrl } from '../../../../modules/state_router/Router';
-import { NavLink } from 'react-router-dom';
+import { NavLink } from 'react-router';
 import OrganizationFeature from '../../../../services/types/OrganizationFeature';
 import Organization from '../../../../props/models/Organization';
 import useAssetUrl from '../../../../hooks/useAssetUrl';

react/src/dashboard/components/pages/features/elements/FeatureList.tsx

@@ -1,7 +1,7 @@
 import React, { Fragment } from 'react';
 import { kebabCase } from 'lodash';
 import { getStateRouteUrl } from '../../../../modules/state_router/Router';
-import { NavLink } from 'react-router-dom';
+import { NavLink } from 'react-router';
 import OrganizationFeature from '../../../../services/types/OrganizationFeature';
 import Organization from '../../../../props/models/Organization';
 import useAssetUrl from '../../../../hooks/useAssetUrl';