Add Recent Locations to Location step

src/hooks/api/offers.ts

@@ -49,7 +49,10 @@ const useGetOffersByCreatorQuery = (
         advancedQuery?: string;
       }
   >,
-  configuration: UseQueryOptions = {},
+  {
+    queryArguments,
+    ...configuration
+  }: UseQueryOptions & { queryArguments?: any } = {},
 ) => {
   const defaultQuery = `creator:(${creator?.id} OR ${creator?.email})`;
   const query = advancedQuery
@@ -70,6 +73,7 @@ const useGetOffersByCreatorQuery = (
       ...createSortingArgument(sortOptions),
       ...(calendarSummaryFormats &&
         createEmbededCalendarSummaries(calendarSummaryFormats)),
+      ...(queryArguments ?? {}),
     },
     enabled: !!(creator?.id && creator?.email),
     ...configuration,

src/hooks/api/user.ts

@@ -1,3 +1,4 @@
+import { User } from '@/types/User';
 import { fetchFromApi, isErrorObject } from '@/utils/fetchFromApi';
 
 import {

src/i18n/de.json

@@ -200,6 +200,11 @@
         "events": "Wo findet diese Veranstaltung oder Aktivität statt?",
         "places": "Wo ist dieser Ort oder Ort?"
       },
+      "recent_locations": {
+        "title": "Wählen Sie einen Standort aus, den Sie kürzlich verwendet haben",
+        "info": "Wir haben die Standorte, für die Sie kürzlich eingegeben haben, hier für Sie gespeichert. Sie können sie mit einem Klick hinzufügen.",
+        "other": "Oder wählen Sie einen anderen Standort"
+      },
       "validation_messages": {
         "street_and_number": {
           "required": "Ihre Straße und Hausnummer entsprechen nicht den Anforderungen."

src/i18n/fr.json

@@ -200,6 +200,11 @@
         "events": "Où cet événement ou cette activité aura-t-il lieu?",
         "places": "Où est cet endroit ou cet emplacement?"
       },
+      "recent_locations": {
+        "title": "Choisissez un lieu que vous avez utilisé récemment",
+        "info": "Nous avons mis les lieux pour lesquels vous avez récemment entré ici pour vous. Vous pouvez les ajouter en un clic.",
+        "other": "Ou choisissez un autre lieu"
+      },
       "validation_messages": {
         "street_and_number": {
           "required": "Votre rue et votre numéro ne répondent pas aux exigences."

src/i18n/nl.json

@@ -200,6 +200,11 @@
         "events": "Waar vindt dit evenement of deze activiteit plaats?",
         "places": "Waar is deze plaats of locatie?"
       },
+      "recent_locations": {
+        "title": "Kies een locatie die je recent gebruikte",
+        "info": "We hebben de locaties waarvoor je recent invoerde hier voor je klaargezet. Met één klik voeg je ze toe.",
+        "other": "Of kies een andere locatie"
+      },
       "validation_messages": {
         "street_and_number": {
           "required": "Je straat en nummer voldoen niet aan de vereisten."

src/pages/steps/AdditionalInformationStep/OrganizerPicker.tsx

@@ -14,6 +14,7 @@ import { Values } from '@/types/Values';
 import { Alert, AlertVariants } from '@/ui/Alert';
 import { Badge, BadgeVariants } from '@/ui/Badge';
 import { Button, ButtonVariants } from '@/ui/Button';
+import { ButtonCard } from '@/ui/ButtonCard';
 import { FormElement } from '@/ui/FormElement';
 import { Icon, Icons } from '@/ui/Icon';
 import { Inline } from '@/ui/Inline';
@@ -81,63 +82,17 @@ const RecentUsedOrganizers = ({
               ? organizer.address[organizer.mainLanguage]
               : organizer.address
             : '';
+
           return (
-            <Button
+            <ButtonCard
               key={index}
               onClick={() => onChange(parseOfferId(organizer['@id']))}
-              padding={4}
-              borderRadius={getGlobalBorderRadius}
-              variant={ButtonVariants.UNSTYLED}
-              customChildren
-              marginBottom={4}
-              width="20rem"
               title={name}
-              css={`
-                flex-direction: column;
-                align-items: flex-start;
-                background-color: rgba(255, 255, 255, 1);
-                box-shadow: ${({ theme }) =>
-                  theme.components.button.boxShadow.small};
-
-                &:hover {
-                  background-color: #e6e6e6;
-                }
-              `}
-            >
-              <Paragraph
-                fontWeight="bold"
-                display="flex"
-                justifyContent="space-between"
-                width="18rem"
-                textAlign="left"
-                minHeight="1.9rem"
-              >
-                <Text
-                  width="80%"
-                  css={`
-                    white-space: nowrap;
-                    overflow: hidden;
-                    text-overflow: ellipsis;
-                  `}
-                >
-                  {name}
-                </Text>
-                {isUitpasOrganizer(organizer) && <UitpasBadge />}
-              </Paragraph>
-              {address && (
-                <Text
-                  textAlign="left"
-                  width="80%"
-                  css={`
-                    white-space: nowrap;
-                    overflow: hidden;
-                    text-overflow: ellipsis;
-                  `}
-                >
-                  {address.postalCode} {address.addressLocality}
-                </Text>
-              )}
-            </Button>
+              badge={isUitpasOrganizer(organizer) && <UitpasBadge />}
+              description={
+                address && `${address.postalCode} ${address.addressLocality}`
+              }
+            />
           );
         })}
       </Inline>