Dev -> Stage Aug 15th

ecc/blocks/form-handler/controllers/event-format-component-controller.js

@@ -24,14 +24,6 @@ function prepopulateTimeZone(component) {
 }
 
 function initStepLock(component) {
-  const { search } = window.location;
-  const urlParams = new URLSearchParams(search);
-  const skipValidation = urlParams.get('skipValidation');
-
-  if (skipValidation === 'true' && ['stage', 'local'].includes(MILO_CONFIG.env.name)) {
-    return;
-  }
-
   const step = component.closest('.fragment');
   const inputs = component.querySelectorAll('#bu-select-input, #series-select-input');
 

ecc/blocks/form-handler/controllers/venue-info-component-controller.js

@@ -4,6 +4,18 @@ import { ECC_ENV } from '../../../scripts/scripts.js';
 import { changeInputValue, getSecret } from '../../../scripts/utils.js';
 import { buildErrorMessage } from '../form-handler.js';
 
+function togglePrefillableFieldsHiddenState(component, showPrefilledFields) {
+  const addressInput = component.querySelector('#venue-info-venue-address');
+  const cityInput = component.querySelector('#location-city');
+  const stateInput = component.querySelector('#location-state');
+  const postalCodeInput = component.querySelector('#location-zip-code');
+  const countryInput = component.querySelector('#location-country');
+
+  [addressInput, cityInput, stateInput, postalCodeInput, countryInput].forEach((input) => {
+    input.classList.toggle('hidden', showPrefilledFields);
+  });
+}
+
 async function loadGoogleMapsAPI(callback) {
   const script = document.createElement('script');
   const apiKey = await getSecret(`${ECC_ENV}-google-places-api`);
@@ -83,6 +95,8 @@ function initAutocomplete(el) {
       changeInputValue(country, 'value', addressInfo.country);
       changeInputValue(placeId, 'value', place.place_id);
       changeInputValue(mapUrl, 'value', place.url);
+
+      togglePrefillableFieldsHiddenState(el, false);
     }
 
     if (place.geometry) {
@@ -121,6 +135,8 @@ export default async function init(component, props) {
   const mapUrlInput = component.querySelector('#google-map-url');
   const gmtoffsetInput = component.querySelector('#google-place-gmt-offset');
 
+  togglePrefillableFieldsHiddenState(component, true);
+
   venueNameInput.addEventListener('change', () => {
     if (!venueNameInput.value) {
       changeInputValue(addressInput, 'value', '');
@@ -163,7 +179,10 @@ export default async function init(component, props) {
     changeInputValue(mapUrlInput, 'value', mapUrl);
     changeInputValue(gmtoffsetInput, 'value', venue.gmtOffset);
 
-    if (venueName) component.classList.add('prefilled');
+    if (venueName) {
+      component.classList.add('prefilled');
+      togglePrefillableFieldsHiddenState(component, false);
+    }
   }
 
   if (showVenuePostEvent) {

ecc/blocks/form-handler/form-handler.css

@@ -129,7 +129,7 @@
   outline: none;
 }
 
-.form-handler sp-textfield[quiet]:focus {
+.form-handler sp-textfield[quiet]:not(:read-only):focus {
   outline: 1px var(--color-gray-500) solid;
   border-radius: 4px;
 }
@@ -170,6 +170,10 @@
 
 .form-handler .form-handler-ctas-panel a {
   font-size: var(--type-body-s-size);
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  transition: background-color 0.2s, filter 0.2s;
 }
 
 .form-handler .side-menu ul li a {
@@ -350,7 +354,6 @@
 .form-handler .form-handler-ctas-panel .form-handler-panel-wrapper > div {
   display: flex;
   align-items: center;
-  gap: 14px;
 }
 
 .form-handler .form-handler-ctas-panel .form-handler-backward-wrapper .back-btn {
@@ -367,8 +370,15 @@
 }
 
 .form-handler .form-handler-ctas-panel .form-handler-forward-wrapper > div:first-of-type {
-  padding-right: 16px;
-  border-right: 2px solid var(--color-black);
+  padding-right: 64px;
+  border-right: 1px solid var(--color-black);
+  margin-right: 104px;
+}
+
+.form-handler .form-handler-ctas-panel .form-handler-forward-wrapper .action-area {
+  display: flex;
+  align-items: center;
+  gap: 16px;
 }
 
 .form-handler .form-handler-ctas-panel a.disabled,
@@ -384,8 +394,8 @@
 }
 
 .form-handler .form-handler-ctas-panel a.next-button:hover {
-  filter: invert();
-}
+  background-color: var(--color-black)
+} 
 
 .form-handler .form-handler-ctas-panel a.fill {
   background-color: var(--color-gray-200);
@@ -396,14 +406,18 @@
   min-height: 21px;
   padding: 7px 18px 8px;
   border: 2px solid var(--color-white);
-  display: inline-block;
 }
 
 .form-handler .form-handler-ctas-panel a.fill:hover {
   text-decoration: none;
   filter: invert();
 }
 
+.form-handler .form-handler-ctas-panel a.preview-btns svg {
+  height: 20px;
+  width: 28px;
+}
+
 .form-handler .form-handler-ctas-panel .form-handler-panel-wrapper .con-button.outline {
   color: var(--color-white);
   border-color: var(--color-white);

ecc/blocks/form-handler/form-handler.js

@@ -151,14 +151,6 @@ function getCurrentFragment(props) {
 }
 
 function validateRequiredFields(fields) {
-  const { search } = window.location;
-  const urlParams = new URLSearchParams(search);
-  const skipValidation = urlParams.get('skipValidation');
-
-  if (skipValidation === 'true' && ['stage', 'local'].includes(MILO_CONFIG.env.name)) {
-    return true;
-  }
-
   return fields.length === 0 || Array.from(fields).every((f) => f.value);
 }
 
@@ -446,10 +438,16 @@ function renderFormNavigation(props, prevStep, currentStep) {
   frags[prevStep].classList.add('hidden');
   frags[currentStep].classList.remove('hidden');
 
-  if (currentStep === props.maxStep) {
-    nextBtn.textContent = nextBtn.dataset.finalStateText;
+  if (props.currentStep === props.maxStep) {
+    if (props.eventDataResp.published) {
+      nextBtn.textContent = nextBtn.dataset.republishStateText;
+    } else {
+      nextBtn.textContent = nextBtn.dataset.finalStateText;
+    }
+    nextBtn.prepend(getIcon('golden-rocket'));
   } else {
     nextBtn.textContent = nextBtn.dataset.nextStateText;
+    nextBtn.append(getIcon('chev-right-white'));
   }
 
   backBtn.classList.toggle('disabled', currentStep === 0);
@@ -481,6 +479,7 @@ function initFormCtas(props) {
   const forwardWrapper = createTag('div', { class: 'form-handler-forward-wrapper' }, '', { parent: panelWrapper });
 
   forwardActionsWrappers.forEach((w) => {
+    w.classList.add('action-area');
     forwardWrapper.append(w);
   });
 
@@ -520,22 +519,13 @@ function initFormCtas(props) {
         if (ctaUrl.hash === '#next') {
           cta.classList.add('next-button');
           const [nextStateText, finalStateText, doneStateText, republishStateText] = cta.textContent.split('||');
+
           cta.textContent = nextStateText;
+          cta.append(getIcon('chev-right-white'));
           cta.dataset.nextStateText = nextStateText;
           cta.dataset.finalStateText = finalStateText;
           cta.dataset.doneStateText = doneStateText;
           cta.dataset.republishStateText = republishStateText;
-
-          if (props.currentStep === props.maxStep) {
-            if (props.eventDataResp.published) {
-              cta.textContent = republishStateText;
-            } else {
-              cta.textContent = finalStateText;
-            }
-            cta.prepend(getIcon('golden-rocket'));
-          } else {
-            cta.textContent = nextStateText;
-          }
         }
 
         cta.addEventListener('click', async (e) => {
@@ -615,18 +605,6 @@ function updateCtas(props) {
         a.classList.remove('preview-not-ready');
       }
     }
-
-    if (a.classList.contains('next-button')) {
-      if (props.currentStep === props.maxStep) {
-        if (eventDataResp.published) {
-          a.textContent = a.dataset.republishStateText;
-        } else {
-          a.textContent = a.dataset.finalStateText;
-        }
-      } else {
-        a.textContent = a.dataset.nextStateText;
-      }
-    }
   });
 }
 

ecc/blocks/venue-info-component/venue-info-component.css

@@ -1,7 +1,7 @@
 .venue-info-component {
   display: flex;
   flex-direction: column;
-  gap: 20px;
+  gap: 8px;
 }
 
 .venue-info-component sp-textfield {
@@ -14,7 +14,6 @@
 
 .venue-info-component sp-textfield[readonly] {
   padding-bottom: 10px;
-  border-bottom: 1px solid var(--color-gray-500);
 }
 
 .venue-info-component .venue-info-field-location .location-input[readonly] {
@@ -44,7 +43,11 @@
 .venue-info-component .venue-info-field-location .location-wrapper {
   display: flex;
   flex-wrap: wrap;
-  gap: 32px;
+  gap: 8px;
+}
+
+.venue-info-component #venue-info-venue-address {
+  border-bottom: none;
 }
 
 .venue-info-component .venue-info-field-location .location-input {
@@ -56,6 +59,7 @@
 }
 
 .venue-info-component .venue-info-addition-wrapper {
+  margin-top: 40px;
   display: flex;
   justify-content: flex-end;
 }

ecc/blocks/venue-info-component/venue-info-component.js

@@ -155,6 +155,7 @@ export default function init(el) {
           id: 'venue-info-venue-address',
           quiet: true,
           size: 'xl',
+          readonly: true,
         });
         break;
       case 3:

ecc/components/agenda-fieldset-group/agenda-fieldset-group.js

@@ -55,7 +55,7 @@ export default class AgendaFieldsetGroup extends LitElement {
           @update-agenda=${(event) => this.handleAgendaUpdate(event, index)}>
           <div slot="delete-btn" class="delete-btn">
             ${this.agendaItems.length === 1 && this.hasOnlyEmptyAgendaLeft() ? nothing : html`
-              <img class="icon icon-remove-circle" src="/ecc/icons/remove-circle.svg" alt="remove-repeater" @click=${() => this.deleteAgenda(index)}></img>
+              <img class="icon icon-remove-circle" src="${this.agendaItems.length === 1 ? '/ecc/icons/delete.svg' : '/ecc/icons/remove-circle.svg'}" alt="remove-repeater" @click=${() => this.deleteAgenda(index)}></img>
             `}
           </div>
         </agenda-fieldset>

ecc/components/partner-selector-group/partner-selector-group.js

@@ -108,7 +108,7 @@ export default class PartnerSelectorGroup extends LitElement {
           @update-partner=${(event) => this.handlePartnerUpdate(event.detail.partner, index)} @select-partner=${(event) => this.handlePartnerSelect(event.detail.partner, index)}>
           <div slot="delete-btn" class="delete-btn">
             ${this.hasOnlyOneUnsavedPartnerLeft() ? nothing : html`
-              <img class="icon icon-remove-circle" src="/ecc/icons/remove-circle.svg" alt="remove-repeater" @click=${() => this.deletePartner(index)}></img>
+              <img class="icon icon-remove-circle" src="${this.partners.length === 1 ? '/ecc/icons/delete.svg' : '/ecc/icons/remove-circle.svg'}" alt="remove-repeater" @click=${() => this.deletePartner(index)}></img>
             `}
           </div>
           ${imgTag}

ecc/components/partner-selector/partner-selector.js

@@ -154,9 +154,10 @@ export default class PartnerSelector extends LitElement {
             </div>
             <div class="partner-input">
               <label>${this.fieldLabels.urlLabelText}</label>
-              <sp-textfield pattern=${LINK_REGEX} value=${this.partner.link} placeholder="Enter partner full URL", @change=${(event) => {
+              <sp-textfield pattern=${LINK_REGEX} value=${this.partner.link} placeholder="Enter partner full URL" @change=${(event) => {
   this.updatePartner({ link: event.target.value });
-}}></sp-textfield>
+  // FIXME: I really shouldn't need to do this, but the pattern attribute doesn't reset properly.
+}} ?valid=${this.partner.link?.match(LINK_REGEX)}></sp-textfield>
             </div>
           </div>
         </div>

ecc/components/product-selector-group/product-selector-group.js

@@ -98,7 +98,7 @@ export default class ProductSelectorGroup extends LitElement {
           @update-product=${(event) => this.handleProductUpdate(event, index)}>
           <div slot="delete-btn" class="delete-btn">
             ${this.selectedProducts.length === 1 && this.hasOnlyEmptyProductLeft() ? nothing : html`
-              <img class="icon icon-remove-circle" src="/ecc/icons/remove-circle.svg" alt="remove-repeater" @click=${() => this.deleteProduct(index)}></img>
+              <img class="icon icon-remove-circle" src="${this.selectedProducts.length === 1 ? '/ecc/icons/delete.svg' : '/ecc/icons/remove-circle.svg'}" alt="remove-repeater" @click=${() => this.deleteProduct(index)}></img>
             `}
           </div>
         </product-selector>

ecc/components/profile-container/profile-container.js

@@ -97,7 +97,7 @@ export class ProfileContainer extends LitElement {
         return html`
         <div class="profile-container">
         <profile-ui seriesId=${this.seriesId} profile=${JSON.stringify(profile)} fieldlabels=${JSON.stringify(fieldlabels)} class="form-component" firstnamesearch=${JSON.stringify(firstNameSearch)} lastnamesearch=${JSON.stringify(lastNameSearch)} @update-profile=${(event) => this.updateProfile(index, event.detail.profile)} @select-profile=${(event) => this.setProfile(index, event.detail.profile)}>${imgTag}</profile-ui>
-        ${this.profiles?.length > 1 || !this.profiles[0].isPlaceholder ? html`<img class="icon-remove-circle" src="/ecc/icons/remove-circle.svg" alt="remove-repeater" @click=${() => {
+        ${this.profiles?.length > 1 || !this.profiles[0].isPlaceholder ? html`<img class="icon-remove-circle" src="${this.profiles.length === 1 ? '/ecc/icons/delete.svg' : '/ecc/icons/remove-circle.svg'}" alt="remove-repeater" @click=${() => {
     if (this.profiles.length === 1) {
       this.profiles = [defaultProfile];
     } else {