diff --git a/components/case/events.js b/components/case/events.js
index 958e90d1..6867d3dd 100644
--- a/components/case/events.js
+++ b/components/case/events.js
@@ -3,6 +3,10 @@ import { setCurrentPage } from "../../store/currentView/action";
import { connect } from "react-redux";
import useTranslation from "next-translate/useTranslation";
import { formatDates } from "../utils";
+import {
+ getLivePublishedEvent,
+ isEventLiveNow
+} from "./summary/utils/liveEvent";
const EventsDetails = (props) => {
let { t } = useTranslation();
@@ -23,8 +27,6 @@ const EventsDetails = (props) => {
return obj.hasOwnProperty(property) && obj[property] !== null;
}
- //console.log(eventsArr.length > 0);
-
return (
eventsArr.length > 0 && (
@@ -63,76 +65,26 @@ const EventsDetails = (props) => {
{item.pinswg_eventname}
)}
-
-
{hasOwnPropertyAndNotNull(
item,
- "pinswg_eventaddressline1"
- ) && (
- <>
-
-
- {t(
- "case:event-address-label"
- )}
-
- :
-
-
- {
- item.pinswg_eventaddressline1
- }
-
- >
- )}
-
- {hasOwnPropertyAndNotNull(
- item,
- "pinswg_eventaddressline2"
+ [
+ "pinswg_typeofevent@OData.Community.Display.V1.FormattedValue"
+ ]
) && (
+
+ {t(
+ "case:event-type-of-event-label"
+ )}
+
+ :{" "}
{
- item.pinswg_eventaddressline2
+ item[
+ "pinswg_typeofevent@OData.Community.Display.V1.FormattedValue"
+ ]
}
)}
- {hasOwnPropertyAndNotNull(
- item,
- "pinswg_eventaddresstown"
- ) && (
-
- {
- item.pinswg_eventaddresstown
- }
-
- )}
- {hasOwnPropertyAndNotNull(
- item,
- "pinswg_eventaddresscounty"
- ) && (
-
- {
- item.pinswg_eventaddresscounty
- }
-
- )}
- {hasOwnPropertyAndNotNull(
- item,
- "pinswg_eventaddresscounty"
- ) && (
-
- {
- item.pinswg_eventaddresspostcode
- }
-
- )}
-
- {/* type of event
- start date date of event - end date of event
-
- if virtual event no address showNoOfRecords
- show event address */}
-
{hasOwnPropertyAndNotNull(
item,
"pinswg_dateeventrequested"
@@ -171,25 +123,109 @@ const EventsDetails = (props) => {
{hasOwnPropertyAndNotNull(
item,
- [
- "pinswg_typeofevent@OData.Community.Display.V1.FormattedValue",
- ]
+ "pinswg_eventaddressline1"
) && (
-
-
- {t(
- "case:event-type-of-event-label"
- )}
-
- :{" "}
- {
- item[
- "pinswg_typeofevent@OData.Community.Display.V1.FormattedValue"
- ]
- }
-
+ <>
+
+
+ {t(
+ "case:event-address-label"
+ )}
+
+ :
+
+ {hasOwnPropertyAndNotNull(
+ item,
+ "pinswg_eventaddressline1"
+ ) && (
+
+ {
+ item.pinswg_eventaddressline1
+ }
+
+ )}
+ {hasOwnPropertyAndNotNull(
+ item,
+ "pinswg_eventaddressline2"
+ ) && (
+
+ {
+ item.pinswg_eventaddressline2
+ }
+
+ )}
+ {hasOwnPropertyAndNotNull(
+ item,
+ "pinswg_eventaddresstown"
+ ) && (
+
+ {
+ item.pinswg_eventaddresstown
+ }
+
+ )}
+ {hasOwnPropertyAndNotNull(
+ item,
+ "pinswg_eventaddresscounty"
+ ) && (
+
+ {
+ item.pinswg_eventaddresscounty
+ }
+
+ )}
+ {hasOwnPropertyAndNotNull(
+ item,
+ "pinswg_eventaddresscounty"
+ ) && (
+
+ {
+ item.pinswg_eventaddresspostcode
+ }
+
+ )}
+
+
+ >
)}
+ {/* type of event
+ start date date of event - end date of event
+
+ if virtual event no address showNoOfRecords
+ show event address */}
+
+ {hasOwnPropertyAndNotNull(
+ item,
+ "pinswg_linktotheevent"
+ ) &&
+ isEventLiveNow(item) && (
+
+ )}
>
)
@@ -203,7 +239,7 @@ const EventsDetails = (props) => {
const mapStateToProps = (state) => {
return {
- ...state,
+ ...state
};
};
@@ -214,7 +250,7 @@ const mapDispatchToProps = (dispatch) => {
},
setCurrentPage: (currentPage) => {
dispatch(setCurrentPage(currentPage));
- },
+ }
};
};
diff --git a/components/case/summary.js b/components/case/summary.js
index 6cc08be5..02548408 100644
--- a/components/case/summary.js
+++ b/components/case/summary.js
@@ -32,6 +32,10 @@ import {
import { signIn, useSession } from "next-auth/react";
import { destroyCookie, parseCookies, setCookie } from "nookies";
import { getFormCollectionByID, getDetailsProxy } from "../utils";
+import {
+ getLivePublishedEvent,
+ isEventLiveNow
+} from "./summary/utils/liveEvent";
import * as CaseTypes from "./summaryTypes"; // ✅ must match filename exactly
import {
@@ -321,6 +325,10 @@ const CaseSummary = (props) => {
Array.isArray(props.mediaObj?.value) &&
props.mediaObj.value.length > 0;
+ const livePublishedEvent = hasEventsTabData
+ ? getLivePublishedEvent(props.eventsObj)
+ : null;
+
let point = {};
let siteCoords = {};
let center = {};
@@ -359,6 +367,45 @@ const CaseSummary = (props) => {
showDetails == true ? (
<>
+ {livePublishedEvent && (
+
+
+
+ Live event
+
+
+
+
+ A live streamed event is happening now.
+
+
+ {livePublishedEvent.pinswg_eventname && (
+
+ {livePublishedEvent.pinswg_eventname}
+
+ )}
+
+
+ Watch live stream
+
+
+
+ )}
@@ -373,6 +420,7 @@ const CaseSummary = (props) => {
+
Contents
diff --git a/components/case/summary/utils/liveEvent.js b/components/case/summary/utils/liveEvent.js
new file mode 100644
index 00000000..bf507a5e
--- /dev/null
+++ b/components/case/summary/utils/liveEvent.js
@@ -0,0 +1,30 @@
+export function isEventLiveNow(item) {
+ if (!item?.pinswg_dateeventrequested) return false;
+
+ const now = new Date();
+ const start = new Date(item.pinswg_dateeventrequested);
+
+ if (isNaN(start.getTime())) return false;
+
+ if (item.pinswg_enddateoftheevent) {
+ const end = new Date(item.pinswg_enddateoftheevent);
+ if (isNaN(end.getTime())) return false;
+ return now >= start && now <= end;
+ }
+
+ const endOfStartDay = new Date(start);
+ endOfStartDay.setHours(23, 59, 59, 999);
+
+ return now >= start && now <= endOfStartDay;
+}
+
+export function getLivePublishedEvent(eventsObj) {
+ const eventsArr = eventsObj?.value || [];
+
+ return eventsArr.find(
+ (item) =>
+ item.pinswg_eventpublishflag &&
+ item.pinswg_linktotheevent &&
+ isEventLiveNow(item)
+ );
+}
diff --git a/styles/sass/welshgov/_application.scss b/styles/sass/welshgov/_application.scss
index 2d74acb6..ce02af54 100644
--- a/styles/sass/welshgov/_application.scss
+++ b/styles/sass/welshgov/_application.scss
@@ -3121,6 +3121,7 @@ ul.subFieldList {
border-bottom: 1px solid $lightgrey_semi;
padding-bottom: 10px;
+
@media screen and (max-width: 768px) {
display: block;
padding-bottom: 10px;
@@ -3128,7 +3129,13 @@ ul.subFieldList {
.eventColumn {
line-height: 1.5;
- width: 25%;
+ min-width: 33%;
+
+ div {
+ span {
+ display: block;
+ }
+ }
@media screen and (max-width: 768px) {
width: 100%;