{t("select-mode")}
+ +| {t("table-image")} | +{t("table-event")} | +{t("table-date")} | ++ |
|---|---|---|---|
|
+ {imageUrls?.small && (
+ |
+
+ {title}
+ + {organizer?.name} + |
+ + {occurrences?.length > 0 && formatDate(occurrences[0]?.start)} + {occurrences?.length > 1 && , ...} + | ++ + | +
| {t("no-results")} | +|||
{t("choose-an-occurrence")}
+| {t("table-date")} | +{t("table-price")} | ++ |
|---|---|---|
| {formatDate(start)} | +{ticketPriceRange} | ++ + | +
{t("selected-type-single")}
+ +
+ {t("chosen-event")}: {singleSelectedEvent.title} (
+ {singleSelectedEvent?.organizer?.name})
+
+ )}
+ {singleSelectedOccurrence && (
+
+ {t("chosen-occurrence")}:{" "}
+ {formatDate(singleSelectedOccurrence.startDate)}
+ {singleSelectedOccurrence?.ticketPriceRange &&
+ ` - ${singleSelectedOccurrence.ticketPriceRange}`}
+
+ )}
+
+
+ {t("search-for-event")}
+{t("filters")}
+
+
+
+
+
+
+ handleSelect("subscriptionPlaceValue", newValue)
+ }
+ value={subscriptionPlaceValue ?? []}
+ placeholder={t("subscription-search-placeholder")}
+ labelledBy={t("filters-place")}
+ />
+
+
+
+
+
+
+
+ handleSelect("subscriptionOrganizerValue", newValue)
+ }
+ value={subscriptionOrganizerValue ?? []}
+ placeholder={t("subscription-search-placeholder")}
+ labelledBy={t("filters-organizer")}
+ />
+
+
+
+
+
+
+
+ handleSelect("subscriptionTagValue", newValue)
+ }
+ value={subscriptionTagValue ?? []}
+ placeholder={t("subscription-search-placeholder")}
+ labelledBy={t("filters-tag")}
+ />
+
+
+
+
+ );
+}
+
+PosterSubscriptionCriteria.propTypes = {
+ optionsEndpoint: PropTypes.string.isRequired,
+ configuration: PropTypes.shape({
+ subscriptionPlaceValue: PropTypes.arrayOf(
+ PropTypes.shape({ label: PropTypes.string, value: PropTypes.number })
+ ),
+ subscriptionOrganizerValue: PropTypes.arrayOf(
+ PropTypes.shape({ label: PropTypes.string, value: PropTypes.number })
+ ),
+ subscriptionTagValue: PropTypes.arrayOf(
+ PropTypes.shape({ label: PropTypes.string, value: PropTypes.number })
+ ),
+ subscriptionNumberValue: PropTypes.number,
+ }).isRequired,
+ handleSelect: PropTypes.func.isRequired,
+};
+
+export default PosterSubscriptionCriteria;
diff --git a/src/components/slide/content/poster/poster-subscription.jsx b/src/components/slide/content/poster/poster-subscription.jsx
new file mode 100644
index 000000000..d62eb93fc
--- /dev/null
+++ b/src/components/slide/content/poster/poster-subscription.jsx
@@ -0,0 +1,193 @@
+import { React, useEffect, useState } from "react";
+import PropTypes from "prop-types";
+import { useTranslation } from "react-i18next";
+import { Row, Spinner } from "react-bootstrap";
+import Col from "react-bootstrap/Col";
+import { formatDate, getHeaders } from "./poster-helper";
+import PosterSubscriptionCriteria from "./poster-subscription-criteria";
+
+/**
+ * @param {object} props Props.
+ * @param {object} props.feedSource Feed source.
+ * @param {Function} props.configurationChange Configuration onChange.
+ * @param {object} props.configuration The configuration object.
+ * @param {object} props.feedSource.admin The admin configuration.
+ * @returns {React.JSX.Element} The poster subscription component.
+ */
+function PosterSubscription({
+ configurationChange,
+ configuration,
+ feedSource: { admin },
+}) {
+ const { t } = useTranslation("common", { keyPrefix: "poster-selector-v2" });
+
+ const [subscriptionOccurrences, setSubscriptionOccurrences] = useState(null);
+ const [loadingResults, setLoadingResults] = useState(false);
+
+ const [firstAdmin] = admin;
+ const optionsEndpoint = firstAdmin.endpointOption ?? null;
+ const subscriptionEndpoint = firstAdmin.endpointSubscription ?? null;
+
+ const {
+ subscriptionNumberValue = 5,
+ subscriptionPlaceValue = [],
+ subscriptionOrganizerValue = [],
+ subscriptionTagValue = [],
+ } = configuration;
+
+ const handleSelect = (id, value = []) => {
+ if (!id) {
+ return;
+ }
+
+ configurationChange({ target: { id, value } });
+ };
+
+ const subscriptionFetch = () => {
+ const query = new URLSearchParams({
+ numberOfItems: subscriptionNumberValue,
+ });
+
+ const places = subscriptionPlaceValue.map(({ value }) => value);
+
+ places.forEach((place) => {
+ query.append("location[]", place);
+ });
+
+ const organizers = subscriptionOrganizerValue.map(({ value }) => value);
+
+ organizers.forEach((organizer) => {
+ query.append("organization[]", organizer);
+ });
+
+ const tags = subscriptionTagValue.map(({ value }) => value);
+
+ tags.forEach((tag) => {
+ query.append("tag[]", tag);
+ });
+
+ setLoadingResults(true);
+
+ fetch(`${subscriptionEndpoint}?${query}`, {
+ headers: getHeaders(),
+ })
+ .then((response) => response.json())
+ .then((data) => {
+ setSubscriptionOccurrences(data);
+ })
+ .finally(() => {
+ setLoadingResults(false);
+ });
+ };
+
+ useEffect(() => {
+ if (configuration) {
+ subscriptionFetch();
+ }
+ }, [configuration]);
+
+ return (
+ <>
+
+
+
+
+
+ {t("selected-type-subscription")}
+ {t("subscription-helptext")} + +
+
+
+
+
+
+
+ {t("subscription-preview-of-events-helptext")}
+
+ {t("preview-of-events")}
+ {loadingResults &&| {t("table-image")} | +{t("table-event")} | +{t("table-place")} | +{t("table-date")} | +
|---|---|---|---|
|
+ |
+
+ {title}
+ + {organizer?.name} + |
+ {place?.name} | ++ {formatDate(startDate, "L HH:mm")} + {" - "} + {formatDate(endDate, "L HH:mm")} + | +