Merge main into feature branch

.github/CODEOWNERS

@@ -1,7 +1,7 @@
 # CODEOWNERS are automatically assigned as possible reviewers to new PRs.
 
 # Global owners (also need to be duplicated in later rules)
-* @simon-debruijn @brampauwelyn @HanneSips @Anahkiasen
+* @simon-debruijn @brampauwelyn @Anahkiasen
 
 # Jenkins / deployment owners
 Gemfile* @willaerk @paulherbosch

next.config.js

@@ -6,7 +6,6 @@ const { withSentryConfig } = require('@sentry/nextjs');
 const moduleExports = {
   productionBrowserSourceMaps: true,
   swcMinify: true,
-  sentry: { hideSourceMaps: false },
   async redirects() {
     // Redirects to fix non-existing paths should go in `src/redirects.js`!!!
     const env = process.env.NEXT_PUBLIC_ENVIRONMENT;
@@ -50,9 +49,30 @@ const moduleExports = {
 
 /** @type {Partial<import('@sentry/nextjs').SentryWebpackPluginOptions>} */
 const SentryWebpackPluginOptions = {
+  silent: true,
+  org: 'publiq-vzw',
+  project: 'udb3-frontend',
   dryRun: true,
 };
 
 module.exports.withoutSentry = moduleExports;
 
-module.exports = withSentryConfig(moduleExports, SentryWebpackPluginOptions);
+module.exports = withSentryConfig(moduleExports, SentryWebpackPluginOptions, {
+  // For all available options, see:
+  // https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/
+
+  // Upload a larger set of source maps for prettier stack traces (increases build time)
+  widenClientFileUpload: true,
+
+  // Transpiles SDK to be compatible with IE11 (increases bundle size)
+  transpileClientSDK: true,
+
+  // Routes browser requests to Sentry through a Next.js rewrite to circumvent ad-blockers (increases server load)
+  tunnelRoute: '/monitoring',
+
+  // Hides source maps from generated client bundles
+  hideSourceMaps: false,
+
+  // Automatically tree-shake Sentry logger statements to reduce bundle size
+  disableLogger: true,
+});

sentry.client.config.js

@@ -1,5 +1,5 @@
-// This file configures the initialization of Sentry on the browser.
-// The config you add here will be used whenever a page is visited.
+// This file configures the initialization of Sentry on the client.
+// The config you add here will be used whenever a users loads a page in their browser.
 // https://docs.sentry.io/platforms/javascript/guides/nextjs/
 
 import * as Sentry from '@sentry/nextjs';
@@ -10,7 +10,25 @@ const { publicRuntimeConfig } = getConfig();
 Sentry.init({
   dsn: publicRuntimeConfig.sentryDsn,
   environment: publicRuntimeConfig.environment,
-  // Note: if you want to override the automatic release value, do not set a
-  // `release` value here - use the environment variable `SENTRY_RELEASE`, so
-  // that it will also get attached to your source maps
+
+  // Adjust this value in production, or use tracesSampler for greater control
+  tracesSampleRate: 1,
+
+  // Setting this option to true will print useful information to the console while you're setting up Sentry.
+  debug: false,
+
+  replaysOnErrorSampleRate: 1.0,
+
+  // This sets the sample rate to be 10%. You may want this to be 100% while
+  // in development and sample at a lower rate in production
+  replaysSessionSampleRate: 0.1,
+
+  // You can remove this option if you're not planning to use the Sentry Session Replay feature:
+  integrations: [
+    new Sentry.Replay({
+      // Additional Replay configuration goes in here, for example:
+      maskAllText: true,
+      blockAllMedia: true,
+    }),
+  ],
 });

sentry.edge.config.js

@@ -1,5 +1,6 @@
-// This file configures the initialization of Sentry on the edge.
-// The config you add here will be used whenever the edge handles a request.
+// This file configures the initialization of Sentry for edge features (middleware, edge routes, and so on).
+// The config you add here will be used whenever one of the edge features is loaded.
+// Note that this config is unrelated to the Vercel Edge Runtime and is also required when running locally.
 // https://docs.sentry.io/platforms/javascript/guides/nextjs/
 
 import * as Sentry from '@sentry/nextjs';
@@ -10,7 +11,10 @@ const { publicRuntimeConfig } = getConfig();
 Sentry.init({
   dsn: publicRuntimeConfig.sentryDsn,
   environment: publicRuntimeConfig.environment,
-  // Note: if you want to override the automatic release value, do not set a
-  // `release` value here - use the environment variable `SENTRY_RELEASE`, so
-  // that it will also get attached to your source maps
+
+  // Adjust this value in production, or use tracesSampler for greater control
+  tracesSampleRate: 1,
+
+  // Setting this option to true will print useful information to the console while you're setting up Sentry.
+  debug: false,
 });

sentry.server.config.js

@@ -10,7 +10,10 @@ const { publicRuntimeConfig } = getConfig();
 Sentry.init({
   dsn: publicRuntimeConfig.sentryDsn,
   environment: publicRuntimeConfig.environment,
-  // Note: if you want to override the automatic release value, do not set a
-  // `release` value here - use the environment variable `SENTRY_RELEASE`, so
-  // that it will also get attached to your source maps
+
+  // Adjust this value in production, or use tracesSampler for greater control
+  tracesSampleRate: 1,
+
+  // Setting this option to true will print useful information to the console while you're setting up Sentry.
+  debug: false,
 });

src/i18n/de.json

@@ -447,6 +447,7 @@
         "or_choose_other_organizer": "Fügen Sie eine Organisation hinzu",
         "choose_other_organizer": "Wählen Sie eine Organisation aus",
         "uitpas_cardsystems": "UiTPAS Kartensysteme",
+        "uitpas_select_distribution_key": "Wählen Sie einen Verteilungsschlüssel aus",
         "uitpas_alert": {
           "success": "Ihre Aktivität ist jetzt als UitPAS-Aktivität registriert.",
           "no_price": "Dies ist ein UiTPAS-Organisator. Fügen Sie einen <link1>Preis</link1> hinzu, um Ihre Veranstaltung als UiTPAS-Aktivität zu veröffentlichen.",

src/i18n/fr.json

@@ -449,6 +449,7 @@
         "or_choose_other_organizer": "Ou ajouter une nouvelle organisation",
         "choose_other_organizer": "Ajouter une nouvelle organisation",
         "uitpas_cardsystems": "UiTPAS systèmes de cartes",
+        "uitpas_select_distribution_key": "Sélectionnez une clé de distribution",
         "uitpas_alert": {
           "success": "Votre activité est désormais enregistrée en tant qu'activité UitPAS.",
           "no_price": "Ceci est un organisateur UiTPAS. Ajoutez <link1>un prix</link1> pour publier votre événement en tant qu'activité UiTPAS.",

src/i18n/nl.json

@@ -449,6 +449,7 @@
         "or_choose_other_organizer": "Of een nieuwe organisatie toevoegen",
         "choose_other_organizer": "Een nieuwe organisatie toevoegen",
         "uitpas_cardsystems": "UiTPAS Kaartsystemen",
+        "uitpas_select_distribution_key": "Selecteer een verdeelsleutel",
         "uitpas_alert": {
           "success": "Je activiteit is nu geregistreerd als UiTPAS activiteit.",
           "no_price": "Dit is een UiTPAS organisator. Voeg een <link1>prijs</link1> toe om je evenement te publiceren als UiTPAS activiteit.",
@@ -693,7 +694,7 @@
     "activities": "Activiteiten per jaar",
     "activities_info": "De rijkste vrijetijdsdatabank van Vlaanderen staat open voor de meest uiteenlopende activiteiten.",
     "channels": "Verschillende kanalen",
-    "channels_info": "De UiTdatabank levert informatie aan meer dan 1.000 online <1>{{link}}</1>, apps en gedrukte bladen.",
+    "channels_info": "De UiTdatabank levert informatie aan UiTinVlaanderen en meer dan 1.000 andere online <1>{{link}}</1>, apps en gedrukte bladen.",
     "channels_info_link_text": "agenda's",
     "channels_info_link_url": "https://www.publiq.be/nl/publicatiekanalen",
     "flanders_image": "vlaanderen-logo.svg",

src/layouts/Sidebar.tsx

@@ -501,7 +501,7 @@ const Sidebar = () => {
       children: t('menu.home'),
     },
     {
-      href: '/event',
+      href: '/create',
       iconName: Icons.PLUS_CIRCLE,
       children: t('menu.add'),
     },
@@ -580,7 +580,7 @@ const Sidebar = () => {
       forwardedAs="nav"
       height="100%"
       css={`
-        overflow: hidden;
+        overflow: scroll;
       `}
       width={{ default: '240px', s: '65px' }}
       backgroundColor={getValueForSidebar('backgroundColor')}

src/pages/AvailabilityPageMultiple.js → src/pages/AvailabilityPageMultiple.tsx

@@ -13,12 +13,15 @@ import { Page } from '@/ui/Page';
 import { SelectionTable } from '@/ui/SelectionTable';
 import { Stack } from '@/ui/Stack';
 import { Text, TextVariants } from '@/ui/Text';
+import { getGlobalBorderRadius, getValueFromTheme } from '@/ui/theme';
 import { formatPeriod } from '@/utils/formatPeriod';
 import { parseOfferId } from '@/utils/parseOfferId';
 
 import { BookingAvailabilityModal } from './BookingAvailabilityModal';
 import { StatusModal } from './StatusModal';
 
+const getGlobalValue = getValueFromTheme('global');
+
 const Status = ({ type, reason }) => {
   const { i18n } = useTranslation();
   return (
@@ -141,30 +144,41 @@ const AvailabilityPageMultiple = ({ event, refetchEvent }) => {
       <Page.Title>{t('offerStatus.title', { name })}</Page.Title>
       <Page.Content spacing={5}>
         <Alert>{t('offerStatus.info')}</Alert>
-        <SelectionTable
-          columns={columns}
-          data={data}
-          onSelectionChanged={setSelectedRows}
-          actions={[
-            {
-              iconName: Icons.PENCIL,
-              title: t('offerStatus.changeStatus'),
-              onClick: () => setIsModalVisible(true),
-              disabled: selectedRows.length === 0,
-            },
-            {
-              iconName: Icons.PENCIL,
-              title: t('bookingAvailability.change'),
-              onClick: () => setIsBookingModalVisible(true),
-              disabled: selectedRows.length === 0,
-            },
-          ]}
-          translateSelectedRowCount={(count) =>
-            t('selectionTable.rowsSelectedCount', {
-              count,
-            })
-          }
-        />
+        <Stack
+          backgroundColor="white"
+          padding={4}
+          borderRadius={getGlobalBorderRadius}
+          spacing={5}
+          css={`
+            box-shadow: ${getGlobalValue('boxShadow.medium')};
+          `}
+        >
+          <SelectionTable
+            columns={columns}
+            data={data}
+            onSelectionChanged={setSelectedRows}
+            actions={[
+              {
+                iconName: Icons.PENCIL,
+                title: t('offerStatus.changeStatus'),
+                onClick: () => setIsModalVisible(true),
+                disabled: selectedRows.length === 0,
+              },
+              {
+                iconName: Icons.PENCIL,
+                title: t('bookingAvailability.change'),
+                onClick: () => setIsBookingModalVisible(true),
+                disabled: selectedRows.length === 0,
+              },
+            ]}
+            translateSelectedRowCount={(count) =>
+              t('selectionTable.rowsSelectedCount', {
+                count,
+              })
+            }
+          />
+        </Stack>
+
         <Link
           href={`/event/${eventId}/preview`}
           variant={LinkVariants.BUTTON_SUCCESS}

src/pages/AvailabilityPageSingle.js → src/pages/AvailabilityPageSingle.tsx

@@ -2,6 +2,7 @@ import { useRouter } from 'next/router';
 import PropTypes from 'prop-types';
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { css } from 'styled-components';
 
 import { CalendarType } from '@/constants/CalendarType';
 import { OfferStatus } from '@/constants/OfferStatus';
@@ -13,12 +14,14 @@ import { Button, ButtonVariants } from '@/ui/Button';
 import { Inline } from '@/ui/Inline';
 import { Page } from '@/ui/Page';
 import { Spinner } from '@/ui/Spinner';
-import { getValueFromTheme } from '@/ui/theme';
+import { Stack } from '@/ui/Stack';
+import { getGlobalBorderRadius, getValueFromTheme } from '@/ui/theme';
 import { Title, TitleVariants } from '@/ui/Title';
 import { parseOfferId } from '@/utils/parseOfferId';
 import { parseOfferType } from '@/utils/parseOfferType';
 
 const getValue = getValueFromTheme('statusPage');
+const getGlobalValue = getValueFromTheme('global');
 
 const AvailabilityPageSingle = ({ offer, error, useChangeStatusMutation }) => {
   const { t, i18n } = useTranslation();
@@ -98,16 +101,25 @@ const AvailabilityPageSingle = ({ offer, error, useChangeStatusMutation }) => {
   return (
     <Page>
       <Page.Title>{t('offerStatus.title', { name })}</Page.Title>
-      <Page.Content spacing={5} maxWidth="36rem">
+      <Page.Content maxWidth="50rem">
         {changeStatusMutation.status === QueryStatus.LOADING ? (
           <Spinner marginTop={4} />
         ) : error || changeStatusMutation.error ? (
           <Alert variant={AlertVariants.WARNING}>
             {error.message || changeStatusMutation.error?.message}
           </Alert>
         ) : (
-          [
-            offer.calendarType === CalendarType.SINGLE && [
+          <Stack
+            padding={5}
+            spacing={5}
+            marginBottom={3}
+            backgroundColor="white"
+            borderRadius={getGlobalBorderRadius}
+            css={`
+              box-shadow: ${getGlobalValue('boxShadow.medium')};
+            `}
+          >
+            {offer.calendarType === CalendarType.SINGLE && [
               <Title
                 key="status-form-title"
                 variant={TitleVariants.UNDERLINED}
@@ -124,7 +136,7 @@ const AvailabilityPageSingle = ({ offer, error, useChangeStatusMutation }) => {
                   setBookingAvailabilityType(e.target.value)
                 }
               />,
-            ],
+            ]}
             <Title
               key="status-form-title"
               variant={TitleVariants.UNDERLINED}
@@ -133,7 +145,7 @@ const AvailabilityPageSingle = ({ offer, error, useChangeStatusMutation }) => {
               alignItems="center"
             >
               {t('offerStatus.newStatus')}
-            </Title>,
+            </Title>
             <StatusForm
               key="reason-and-type"
               offerType={`${offerType}s`}
@@ -143,7 +155,7 @@ const AvailabilityPageSingle = ({ offer, error, useChangeStatusMutation }) => {
               onInputStatusReason={(e) =>
                 setReasonInCurrentLanguage(e.target.value)
               }
-            />,
+            />
             <Inline key="actions" spacing={3}>
               <Button
                 variant={ButtonVariants.PRIMARY}
@@ -160,8 +172,8 @@ const AvailabilityPageSingle = ({ offer, error, useChangeStatusMutation }) => {
               >
                 {t('offerStatus.actions.cancel')}
               </Button>
-            </Inline>,
-          ]
+            </Inline>
+          </Stack>
         )}
       </Page.Content>
     </Page>

src/pages/_error.jsx

@@ -0,0 +1,17 @@
+import * as Sentry from '@sentry/nextjs';
+import Error from 'next/error';
+
+const CustomErrorComponent = (props) => {
+  return <Error statusCode={props.statusCode} />;
+};
+
+CustomErrorComponent.getInitialProps = async (contextData) => {
+  // In case this is running in a serverless function, await this in order to give Sentry
+  // time to send the error before the lambda exits
+  await Sentry.captureUnderscoreErrorException(contextData);
+
+  // This will contain the status code of the response
+  return Error.getInitialProps(contextData);
+};
+
+export default CustomErrorComponent;