diff --git a/ecc/blocks/event-info-component/event-info-component.css b/ecc/blocks/event-info-component/event-info-component.css index 9d326171..a76ab279 100644 --- a/ecc/blocks/event-info-component/event-info-component.css +++ b/ecc/blocks/event-info-component/event-info-component.css @@ -42,7 +42,7 @@ .event-info-component .date-time-row > .date-picker { position: relative; border-bottom: 1px solid var(--color-black); - min-width: 280px; + min-width: 300px; display: flex; align-items: center; gap: 8px; diff --git a/ecc/blocks/form-handler/controllers/event-info-component-controller.js b/ecc/blocks/form-handler/controllers/event-info-component-controller.js index 6c599992..740caf45 100644 --- a/ecc/blocks/form-handler/controllers/event-info-component-controller.js +++ b/ecc/blocks/form-handler/controllers/event-info-component-controller.js @@ -357,9 +357,13 @@ function checkEventDuplication(event, compareMetrics) { export default async function init(component, props) { const allEventsResp = await getEvents(); - const dupEventError = await miloReplaceKey('duplicate-event-title-error'); const allEvents = allEventsResp?.events; const eventData = props.eventDataResp; + const sameSeriesEvents = allEvents?.filter((e) => { + const matchInPayload = e.seriesId === props.payload.seriesId; + const matchInResp = e.seriesId === eventData.seriesId; + return matchInPayload || matchInResp; + }) || []; const eventTitleInput = component.querySelector('#info-field-event-title'); const startTimeInput = component.querySelector('#time-picker-start-time'); @@ -368,13 +372,7 @@ export default async function init(component, props) { initCalendar(component); - eventTitleInput.addEventListener('change', () => { - const sameSeriesEvents = allEvents?.filter((e) => { - const matchInPayload = e.seriesId === props.payload.seriesId; - const matchInResp = e.seriesId === eventData.seriesId; - return matchInPayload || matchInResp; - }) || []; - + eventTitleInput.addEventListener('input', () => { BlockMediator.set('eventDupMetrics', { ...BlockMediator.get('eventDupMetrics'), title: eventTitleInput.value }); }); @@ -418,7 +416,7 @@ export default async function init(component, props) { BlockMediator.subscribe('eventDupMetrics', (store) => { const metrics = store.newValue; - const isDup = allEvents?.some((e) => checkEventDuplication(e, metrics)); + const isDup = sameSeriesEvents?.some((e) => checkEventDuplication(e, metrics)); if (isDup) { props.el.classList.add('show-dup-event-error'); eventTitleInput.invalid = true; @@ -426,6 +424,8 @@ export default async function init(component, props) { props.el.classList.remove('show-dup-event-error'); eventTitleInput.invalid = false; } + + eventTitleInput.dispatchEvent(new Event('change')); }); const { @@ -451,6 +451,15 @@ export default async function init(component, props) { changeInputValue(endTimeInput, 'value', localEndTime || ''); changeInputValue(component.querySelector('#time-zone-select-input'), 'value', `${timezone}` || ''); + BlockMediator.set('eventDupMetrics', { + ...BlockMediator.get('eventDupMetrics'), + ...{ + title, + startDate: localStartDate, + eventId: eventData.eventId, + }, + }); + datePicker.dataset.startDate = localStartDate || ''; datePicker.dataset.endDate = localEndDate || ''; updateInput(component, { diff --git a/ecc/blocks/form-handler/controllers/venue-info-component-controller.js b/ecc/blocks/form-handler/controllers/venue-info-component-controller.js index 55ac0ddc..380ecd3e 100644 --- a/ecc/blocks/form-handler/controllers/venue-info-component-controller.js +++ b/ecc/blocks/form-handler/controllers/venue-info-component-controller.js @@ -179,7 +179,7 @@ export default async function init(component, props) { changeInputValue(placeIdInput, 'value', placeId); changeInputValue(mapUrlInput, 'value', mapUrl); changeInputValue(gmtoffsetInput, 'value', venue.gmtOffset); - BlockMediator.set('eventDupMetrics', { ...BlockMediator.get('eventDupMetrics'), placeId }); + BlockMediator.set('eventDupMetrics', { ...BlockMediator.get('eventDupMetrics'), city }); if (venueName) { component.classList.add('prefilled'); diff --git a/ecc/blocks/form-handler/form-handler.css b/ecc/blocks/form-handler/form-handler.css index 479646f5..efb38db6 100644 --- a/ecc/blocks/form-handler/form-handler.css +++ b/ecc/blocks/form-handler/form-handler.css @@ -82,7 +82,10 @@ .form-handler.show-dup-event-error #info-field-event-title { --mod-textfield-icon-size-invalid: 16px; --mod-textfield-border-color-invalid-default: unset; - +} + +.form-handler.show-dup-event-error #info-field-event-title sp-help-text { + display: flex; } .form-handler .main-frame { @@ -103,7 +106,6 @@ justify-content: center; } - .form-handler .side-menu, .form-handler .main-frame, .form-handler .form-handler-ctas-panel, diff --git a/ecc/blocks/form-handler/form-handler.js b/ecc/blocks/form-handler/form-handler.js index 86a4e8db..9f268dd0 100644 --- a/ecc/blocks/form-handler/form-handler.js +++ b/ecc/blocks/form-handler/form-handler.js @@ -638,6 +638,7 @@ function initNavigation(props) { navItems.forEach((nav, i) => { nav.addEventListener('click', async () => { + if (nav.closest('li').classList.contains('active')) return; if (!nav.disabled && !sideMenu.classList.contains('disabled')) { sideMenu.classList.add('disabled');