[MWPW-156526] ECC Form Status Tag

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

@@ -289,11 +289,24 @@
   color: var(--color-red);
 }
 
+.form-handler .main-frame .section:first-of-type .step-heading-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.form-handler .main-frame .section:first-of-type .step-heading-wrapper .event-status-tag {
+  padding: 0 8px;
+  background-color: var(--color-white);
+  border-radius: 4px;
+}
+
 .form-handler .main-frame .section:not(:first-of-type) {
   padding: 24px 56px;
   border-radius: 10px;
   margin: 24px;
   box-shadow: 0 3px 6px 0 rgb(0 0 0 / 16%);
+  background-color: var(--color-white);
 }
 
 .form-handler .fragment.hidden {
@@ -368,6 +381,10 @@
   width: 20px;
 }
 
+.form-handler .main-frame .section:first-of-type .step-heading-wrapper .event-status-tag .icon {
+  margin-right: 4px;
+}
+
 .form-handler .form-handler-ctas-panel .form-handler-forward-wrapper > div:first-of-type {
   padding-right: 64px;
   border-right: 1px solid var(--color-black);

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

@@ -584,12 +584,15 @@ function initFormCtas(props) {
   });
 
   backBtn.addEventListener('click', async () => {
+    toggleBtnsSubmittingState(true);
     const resp = await saveEvent(props);
     if (resp?.error) {
       buildErrorMessage(props, resp);
     } else {
       props.currentStep -= 1;
     }
+
+    toggleBtnsSubmittingState(false);
   });
 }
 
@@ -666,6 +669,29 @@ function initDeepLink(props) {
   }
 }
 
+function updateStatusTag(props) {
+  const { eventDataResp } = props;
+
+  if (eventDataResp?.published === undefined) return;
+
+  const currentFragment = getCurrentFragment(props);
+
+  const headingSection = currentFragment.querySelector(':scope > .section:first-child');
+
+  const eixstingStatusTag = headingSection.querySelector('.event-status-tag');
+  if (eixstingStatusTag) eixstingStatusTag.remove();
+
+  const heading = headingSection.querySelector('h2', 'h3', 'h3', 'h4');
+  const headingWrapper = createTag('div', { class: 'step-heading-wrapper' });
+  const dot = eventDataResp.published ? getIcon('dot-purple') : getIcon('dot-green');
+  const text = eventDataResp.published ? 'Published' : 'Draft';
+  const statusTag = createTag('span', { class: 'event-status-tag' });
+
+  statusTag.append(dot, text);
+  heading.parentElement?.replaceChild(headingWrapper, heading);
+  headingWrapper.append(heading, statusTag);
+}
+
 async function buildECCForm(el) {
   const props = {
     el,
@@ -691,6 +717,7 @@ async function buildECCForm(el) {
           renderFormNavigation(target, oldValue, value);
           updateSideNav(target);
           initRequiredFieldsValidation(target);
+          updateStatusTag(target);
           break;
         }
 
@@ -746,6 +773,8 @@ async function buildECCForm(el) {
   updateRequiredFields(proxyProps);
   enableSideNavForEditFlow(proxyProps);
   initDeepLink(proxyProps);
+  updateStatusTag(proxyProps);
+
   el.addEventListener('show-error-toast', (e) => {
     e.stopPropagation();
     e.preventDefault();