r < d v170

react/assets/forus-webshop/scss/includes/blocks/block-cms-funds.scss

@@ -7,12 +7,13 @@
     .fund-item {
         width: 100%;
         display: flex;
+        gap: 100px;
         padding: 0 0 40px;
         border-bottom: 1px solid var(--border-color);
         transition: box-shadow 0.4s;
 
         .fund-media {
-            width: 52%;
+            width: 42%;
             order: 1;
 
             img {
@@ -22,16 +23,16 @@
         }
 
         .fund-information {
-            width: 50%;
-            padding-left: 100px;
             text-align: left;
             order: 2;
             display: flex;
             flex-direction: column;
             align-self: center;
+            flex: 1;
+            gap: 20px;
 
             .fund-label {
-                margin: 0 0 5px;
+                margin: 0 0 -10px;
                 line-height: 20px;
                 order: 1;
                 font-size: var(--cms-funds-label-font-size);
@@ -41,13 +42,13 @@
             .fund-title {
                 font: var(--cms-funds-title-font);
                 color: var(--cms-funds-title-color);
-                margin: 0 0 20px;
+                margin: 0 0;
                 order: 2;
             }
 
             .fund-description {
                 font: 400 18px/28px var(--base-font);
-                margin: 0 0 20px;
+                margin: 0 0;
                 order: 3;
             }
 
@@ -70,8 +71,6 @@
 
             .fund-information {
                 order: 1;
-                padding-left: 0;
-                padding-right: 100px;
             }
         }
 
@@ -96,6 +95,7 @@
 
             .fund-item {
                 display: flex;
+                gap: 0;
                 flex-wrap: wrap;
                 flex-direction: column;
                 flex: 0 1 calc((100% - (calc(var(--gap) * 2))) / 3);
@@ -122,8 +122,6 @@
                     flex-direction: column;
 
                     .fund-label {
-                        margin: 0 0 15px;
-
                         .label {
                             font-size: 12px;
                         }
@@ -132,14 +130,11 @@
                     .fund-title {
                         font: var(--cms-funds-compact-title-font);
                         color: var(--cms-funds-compact-title-color);
-                        margin: 0 0 15px;
                     }
 
                     .fund-description {
-                        margin: 0 0 0;
                         display: flex;
-                        flex-grow: 1;
-
+
                         .block.block-markdown ul, .block.block-markdown p {
                             &:last-child {
                                 margin-bottom: 0;
@@ -148,8 +143,6 @@
                     }
 
                     .fund-button {
-                        padding-top: 15px;
-
                         .fund-button-link {
                             padding: 0;
                             display: inline-block;
@@ -184,8 +177,11 @@
             }
 
             &.block-cms-funds-2-in-row {
+                --gap: 60px;
+                gap: var(--gap);
+
                 .fund-item {
-                    width: calc(calc(100% / 2) - var(--padding));
+                    flex: 0 1 calc((100% - (calc(var(--gap)))) / 2);
                 }
             }
         }
@@ -195,6 +191,7 @@
         gap: 30px;
 
         .fund-item {
+            gap: 0;
             padding: 0 0 30px;
             flex-direction: column;
 
@@ -205,15 +202,10 @@
 
             .fund-information {
                 width: 100%;
-                padding: 0;
+                gap: 15px;
 
                 .fund-title {
                     font: 400 20px/26px var(--base-font);
-                    margin: 0 0 10px;
-                }
-
-                .fund-description {
-                    margin: 0 0 10px;
                 }
 
                 .fund-button {
@@ -238,7 +230,6 @@
 
                 .fund-information {
                     order: 2;
-                    padding: 0;
                 }
             }
         }

react/src/dashboard/components/pages/implementation-pages/elements/ImplementationsInlineBlockEditor.tsx

@@ -140,7 +140,7 @@ export default function ImplementationsInlineBlockEditor({
                             id={id}
                             placeholder={'Paragraaf'}
                             className={'form-control'}
-                            value={pageBlock?.description}
+                            value={pageBlock?.description ?? ''}
                             onChange={(e) => setPageBlock({ ...pageBlock, description: e.target.value })}
                         />
                     )

react/src/dashboard/components/pages/implementations-edit/elements/ImplementationsBlockEditorItem.tsx

@@ -95,7 +95,7 @@ export default function ImplementationsBlockEditorItem({
 
             {!isCollapsed && (
                 <div className="block-body">
-                    <div className="form">
+                    <div className="form flex flex-gap flex-vertical">
                         <div className="form-group">
                             <PhotoSelector
                                 type={'implementation_block_media'}

react/src/dashboard/components/pages/vouchers-view/VouchersViewComponent.tsx

@@ -269,6 +269,41 @@ export default function VouchersViewComponent() {
         [activeOrganization.id, openModal, pushApiError, pushSuccess, setProgress, translate, voucher, voucherService],
     );
 
+    const sendVoucherByEmailToIdentity = useCallback(() => {
+        openModal((modal) => (
+            <ModalDangerZone
+                modal={modal}
+                title={translate('modals.danger_zone.send_voucher_by_email.title')}
+                description={translate('modals.danger_zone.send_voucher_by_email.description')}
+                buttonCancel={{
+                    onClick: modal.close,
+                    text: translate('modals.danger_zone.send_voucher_by_email.buttons.cancel'),
+                }}
+                buttonSubmit={{
+                    onClick: () => {
+                        modal.close();
+
+                        voucherService
+                            .sendToEmail(activeOrganization.id, voucher.id)
+                            .then(() => pushSuccess('Opgeslagen!'))
+                            .catch(pushApiError)
+                            .finally(() => setProgress(100));
+                    },
+                    text: translate('modals.danger_zone.send_voucher_by_email.buttons.confirm'),
+                }}
+            />
+        ));
+    }, [
+        activeOrganization.id,
+        openModal,
+        pushApiError,
+        pushSuccess,
+        setProgress,
+        translate,
+        voucher?.id,
+        voucherService,
+    ]);
+
     useEffect(() => {
         fetchVoucher();
     }, [fetchVoucher]);
@@ -321,6 +356,19 @@ export default function VouchersViewComponent() {
                     {hasPermission(activeOrganization, Permission.MANAGE_VOUCHERS) && (
                         <div className="card-header-filters">
                             <div className="block block-inline-filters">
+                                {voucher.granted &&
+                                    !voucher.expired &&
+                                    voucher.state !== 'deactivated' &&
+                                    !voucher.external &&
+                                    voucher.fund?.show_qr_code && (
+                                        <div
+                                            className="button button-primary button-sm"
+                                            onClick={sendVoucherByEmailToIdentity}>
+                                            <em className="mdi mdi-email icon-start " />
+                                            {translate('vouchers.labels.send_to_email')}
+                                        </div>
+                                    )}
+
                                 {showMakeTransactionButton && fund?.allow_voucher_top_ups && (
                                     <div className="button button-default button-sm" onClick={makeTopUpTransaction}>
                                         <em className="mdi mdi-cash-plus icon-start" />

react/src/dashboard/i18n/nl/i18n-modals-danger_zone.js

@@ -18,6 +18,7 @@ import remove_mollie_connection from './modals/danger-zone/remove-mollie-connect
 import exclude_pre_check_fund from './modals/danger-zone/exclude_pre_check_fund';
 import remove_prevalidation_request from './modals/danger-zone/remove-prevalidation-request';
 import confirm_extra_payment_refund from './modals/danger-zone/confirm-extra-payment-refund';
+import send_voucher_by_email from './modals/danger-zone/send-voucher-by-email';
 
 export default {
     remove_provider_application,
@@ -40,4 +41,5 @@ export default {
     exclude_pre_check_fund,
     remove_prevalidation_request,
     confirm_extra_payment_refund,
+    send_voucher_by_email,
 };

react/src/dashboard/i18n/nl/modals/danger-zone/send-voucher-by-email.js

@@ -0,0 +1,8 @@
+export default {
+    title: 'QR-code versturen per e-mail',
+    description: 'Weet u zeker dat u de QR-code naar de inwoner wilt versturen?',
+    buttons: {
+        cancel: 'Annuleren',
+        confirm: 'Bevestigen',
+    },
+};