teamforus · RobinMeles · Feb 13, 2025 · Jan 16, 2025 · Jan 16, 2025 · Jan 16, 2025
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -33,7 +33,7 @@
     "@babel/preset-typescript": "^7.26.0",
     "@mdi/react": "^1.5.0",
     "@svgr/webpack": "^8.0.1",
-    "@types/diff": "^6.0.0",
+    "@types/diff": "^7.0.1",
     "@types/file-saver": "^2.0.7",
     "@types/jquery": "^3.5.18",
     "@types/lodash": "^4.14.192",
@@ -54,13 +54,9 @@
     "compression-webpack-plugin": "^11.1.0",
     "copy-webpack-plugin": "^12.0.2",
     "css-loader": "^7.1.2",
-    "eslint": "^8.37.0",
-    "eslint-config-fbjs": "^4.0",
-    "eslint-config-prettier": "^9.1.0",
+    "eslint": "^9.19.0",
+    "eslint-config-prettier": "^10.0.1",
     "eslint-plugin-babel": "^5.3.1",
-    "eslint-plugin-eslint-plugin": "^6.3.1",
-    "eslint-plugin-flowtype": "^8.0.3",
-    "eslint-plugin-jsx-a11y": "^6.5.1",
     "eslint-plugin-no-for-of-loops": "^1.0.1",
     "eslint-plugin-no-function-declare-after-return": "^1.1.0",
     "eslint-plugin-prettier": "^5.0.0",
@@ -112,7 +108,7 @@
     "query-string": "^9.1.0",
     "react": "^18.1.0",
     "react-chartjs-2": "^5.2.0",
-    "react-datepicker": "^7.4.0",
+    "react-datepicker": "^8.0.0",
     "react-dom": "^18.1.0",
     "react-error-boundary": "^5.0.0",
     "react-gtm-module": "^2.0.11",

diff --git a/react/src/dashboard/components/elements/forms/controls/FormGroup.tsx b/react/src/dashboard/components/elements/forms/controls/FormGroup.tsx
@@ -16,7 +16,7 @@ export default function FormGroup({
     id?: string;
     error?: string | Array<string>;
     inline?: boolean;
-    inlineSize?: 'sm' | 'md' | 'lg';
+    inlineSize?: 'sm' | 'md' | 'lg' | 'xl';
     label?: string | React.ReactElement | Array<React.ReactElement>;
     input?: (input_id: string) => React.ReactElement;
     required?: boolean;
@@ -32,6 +32,7 @@ export default function FormGroup({
                 inlineSize === 'sm' && 'form-group-inline-sm',
                 inlineSize === 'md' && 'form-group-inline-md',
                 inlineSize === 'lg' && 'form-group-inline-lg',
+                inlineSize === 'xl' && 'form-group-inline-xl',
                 error && 'form-group-error',
                 className,
             )}>

diff --git a/react/src/dashboard/components/elements/forms/ui-controls/UIControlCheckbox.tsx b/react/src/dashboard/components/elements/forms/ui-controls/UIControlCheckbox.tsx
@@ -10,6 +10,7 @@ export default function UIControlCheckbox({
     slim = false,
     className = '',
     disabled = false,
+    dataDusk = null,
     onChange = null,
     onChangeValue = null,
 }: {
@@ -21,6 +22,7 @@ export default function UIControlCheckbox({
     checked?: boolean;
     className?: string;
     disabled?: boolean;
+    dataDusk?: string;
     onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
     onChangeValue?: (checked: boolean) => void;
 }) {
@@ -59,6 +61,7 @@ export default function UIControlCheckbox({
                 htmlFor={innerId}
                 tabIndex={0}
                 aria-checked={inputRef?.current?.checked}
+                data-dusk={dataDusk}
                 onKeyDown={toggleCheckbox}>
                 <span className="ui-checkbox-box">
                     <em className="mdi mdi-check" />

diff --git a/react/src/dashboard/components/elements/forms/ui-controls/UIControlDate.tsx b/react/src/dashboard/components/elements/forms/ui-controls/UIControlDate.tsx
@@ -10,6 +10,7 @@ export default function UIControlDate({
     onChange,
     placeholder = null,
     className,
+    dataDusk = null,
 }: {
     id?: string;
     dateMin?: Date;
@@ -19,13 +20,14 @@ export default function UIControlDate({
     onChange: (date?: Date) => void;
     placeholder?: string;
     className?: string;
+    dataDusk?: string;
 }) {
     const reset = useCallback(() => {
         onChange(null);
     }, [onChange]);
 
     return (
-        <div id={id} className={`ui-control ui-control-date ${className}`}>
+        <div id={id} className={`ui-control ui-control-date ${className}`} data-dusk={dataDusk}>
             <DatePickerControl
                 dateFormat={format || null}
                 value={value}

diff --git a/react/src/dashboard/components/elements/forms/ui-controls/UIControlStep.tsx b/react/src/dashboard/components/elements/forms/ui-controls/UIControlStep.tsx
@@ -3,6 +3,7 @@ import classNames from 'classnames';
 
 export default function UIControlStep({
     id,
+    dataDusk = null,
     min = null,
     max = null,
     name,
@@ -13,6 +14,7 @@ export default function UIControlStep({
     className,
 }: {
     id?: string;
+    dataDusk?: string;
     min?: number;
     max?: number;
     name?: string;
@@ -34,12 +36,14 @@ export default function UIControlStep({
         <div
             className={classNames(`ui-control ui-control-step`, className)}
             role={role}
+            data-dusk={dataDusk}
             aria-label="Aanpassen"
             aria-valuenow={value}
             aria-valuemin={min}
             aria-valuemax={max}>
             <input type="number" name={name} id={id} value={value} hidden={true} readOnly={true} />
             <div
+                data-dusk="decreaseStep"
                 className="ui-control-step-icon"
                 onKeyDown={(e) => (e.key == 'Enter' ? decrease() : null)}
                 onClick={decrease}
@@ -52,6 +56,7 @@ export default function UIControlStep({
             <div className="ui-control-step-value">{value?.toString()}</div>
 
             <div
+                data-dusk="increaseStep"
                 className="ui-control-step-icon"
                 onKeyDown={(e) => (e.key == 'Enter' ? increase() : null)}
                 onClick={increase}

diff --git a/react/src/dashboard/components/pages/implementations-cms/ImplementationsCms.tsx b/react/src/dashboard/components/pages/implementations-cms/ImplementationsCms.tsx
@@ -25,6 +25,7 @@ import CheckboxControl from '../../elements/forms/controls/CheckboxControl';
 import PhotoSelectorData from '../../elements/photo-selector/types/PhotoSelectorData';
 import useTranslate from '../../../hooks/useTranslate';
 import FormGroupInfo from '../../elements/forms/elements/FormGroupInfo';
+import FormGroup from '../../elements/forms/controls/FormGroup';
 
 export default function ImplementationsCms() {
     const { id } = useParams();
@@ -77,6 +78,11 @@ export default function ImplementationsCms() {
         { value: true, label: 'Ja' },
     ]);
 
+    const [privacyAndTermsState] = useState([
+        { value: false, label: 'Nee' },
+        { value: true, label: 'Ja' },
+    ]);
+
     const [announcementTypes] = useState([
         { value: 'warning', label: 'Waarschuwing' },
         { value: 'success', label: 'Succes' },
@@ -113,6 +119,8 @@ export default function ImplementationsCms() {
         description_html?: string;
         description_alignment?: string;
         informal_communication?: boolean;
+        show_privacy_checkbox?: boolean;
+        show_terms_checkbox?: boolean;
         announcement?: {
             type?: string;
             title?: string;
@@ -264,6 +272,8 @@ export default function ImplementationsCms() {
                 page_title_suffix: implementation.page_title_suffix,
                 description_alignment: implementation.description_alignment,
                 informal_communication: implementation.informal_communication,
+                show_terms_checkbox: implementation.show_terms_checkbox,
+                show_privacy_checkbox: implementation.show_privacy_checkbox,
                 announcement: {
                     type: announcementTypes[0].value,
                     active: announcementState[0].value,
@@ -652,6 +662,86 @@ export default function ImplementationsCms() {
                         </div>
                     </div>
 
+                    <div className="card-section card-section-primary">
+                        <div className="row">
+                            <div className="col col-lg-9">
+                                <FormGroup
+                                    inline={true}
+                                    inlineSize={'xl'}
+                                    label={translate('implementation_edit.labels.show_privacy_checkbox')}
+                                    error={form.errors.show_privacy_checkbox}
+                                    input={(id) => (
+                                        <FormGroupInfo
+                                            info={
+                                                <Fragment>
+                                                    <p>
+                                                        Activeer deze instelling als de gebruiker akkoord moet gaan met
+                                                        de privacyvoorwaarden op de website. Op de aanmeldpagina
+                                                        verschijnt een checkbox.
+                                                    </p>
+                                                    <p>
+                                                        <strong>Belangrijk!</strong> Zorg ervoor dat de privacypagina is
+                                                        ingesteld in het CMS, zodat de link naar deze pagina goed werkt.
+                                                    </p>
+                                                </Fragment>
+                                            }>
+                                            <SelectControl
+                                                id={id}
+                                                className="form-control"
+                                                propKey="value"
+                                                propValue="label"
+                                                allowSearch={false}
+                                                options={privacyAndTermsState}
+                                                value={form.values?.show_privacy_checkbox}
+                                                onChange={(value?: boolean) => {
+                                                    form.update({ show_privacy_checkbox: value });
+                                                }}
+                                                optionsComponent={SelectControlOptions}
+                                            />
+                                        </FormGroupInfo>
+                                    )}
+                                />
+                                <FormGroup
+                                    inline={true}
+                                    inlineSize={'xl'}
+                                    label={translate('implementation_edit.labels.show_terms_checkbox')}
+                                    error={form.errors.show_terms_checkbox}
+                                    input={(id) => (
+                                        <FormGroupInfo
+                                            info={
+                                                <Fragment>
+                                                    <p>
+                                                        Activeer deze instelling als de gebruiker akkoord moet gaan met
+                                                        de voorwaarden van de website. Op de aanmeldpagina verschijnt
+                                                        een checkbox.
+                                                    </p>
+                                                    <p>
+                                                        <strong>Belangrijk!</strong> Zorg ervoor dat de voorwaarden
+                                                        pagina is ingesteld in het CMS, zodat de link naar deze pagina
+                                                        goed werkt.
+                                                    </p>
+                                                </Fragment>
+                                            }>
+                                            <SelectControl
+                                                id={id}
+                                                className="form-control"
+                                                propKey="value"
+                                                propValue="label"
+                                                allowSearch={false}
+                                                options={privacyAndTermsState}
+                                                value={form.values?.show_terms_checkbox}
+                                                onChange={(value?: boolean) => {
+                                                    form.update({ show_terms_checkbox: value });
+                                                }}
+                                                optionsComponent={SelectControlOptions}
+                                            />
+                                        </FormGroupInfo>
+                                    )}
+                                />
+                            </div>
+                        </div>
+                    </div>
+
                     <div className="card-section card-section-primary">
                         <div className="button-group flex-center">
                             <StateNavLink

diff --git a/react/src/dashboard/i18n/i18n-nl.js b/react/src/dashboard/i18n/i18n-nl.js
@@ -440,6 +440,8 @@ export default {
             footer_opening_times: 'Footer openingstijden content',
             footer_app_info: 'Footer download de Me-app content',
             cms_media_links: 'Social media links',
+            show_terms_checkbox: 'Toon voorwaarden checkbox',
+            show_privacy_checkbox: 'Toon privacy checkbox',
         },
         implementations_table: {
             title: "Webshop pagina's",

diff --git a/react/src/dashboard/props/models/Implementation.tsx b/react/src/dashboard/props/models/Implementation.tsx
@@ -64,5 +64,7 @@ export default interface Implementation {
     pre_check_banner_title: string;
     allow_per_fund_notification_templates?: boolean;
     page_title_suffix?: string;
+    show_terms_checkbox?: boolean;
+    show_privacy_checkbox?: boolean;
     languages?: Array<Language>;
 }
diff --git a/react/src/dashboard/services/ConfigService.ts b/react/src/dashboard/services/ConfigService.ts
@@ -166,13 +166,15 @@ export type AppConfigProp = {
     pages: {
         home: ImplementationPage;
         funds: ImplementationPage;
+        privacy: ImplementationPage;
         products: ImplementationPage;
         provider: ImplementationPage;
         providers: ImplementationPage;
         explanation: ImplementationPage;
         block_home_products: ImplementationPage;
         footer_app_info: ImplementationPage;
         footer_opening_times: ImplementationPage;
+        terms_and_conditions: ImplementationPage;
         footer_contact_details: ImplementationPage;
     };
     has_productboard_integration: boolean;
@@ -197,6 +199,8 @@ export type AppConfigProp = {
     show_voucher_map: boolean;
     show_product_map: boolean;
     page_title_suffix?: string;
+    show_terms_checkbox?: boolean;
+    show_privacy_checkbox?: boolean;
     languages: Array<Language>;
 };
 

diff --git a/react/src/props/EnvDataWebshopProp.ts b/react/src/props/EnvDataWebshopProp.ts
@@ -55,7 +55,6 @@ export default interface EnvDataWebshopProp {
             noPrintOption?: boolean;
             activateFirstFund?: boolean;
             accessibilityPage?: boolean;
-            privacyPage?: boolean;
 
             // home
             showStartButton?: boolean;