[Release] Stage to Main (#2571)

.github/workflows/merge-to-main.yaml

@@ -9,7 +9,6 @@ on:
 
 env:
   MILO_RELEASE_SLACK_WH: ${{ secrets.MILO_RELEASE_SLACK_WH }}
-  MILO_STAGE_SLACK_WH: ${{secrets.MILO_STAGE_SLACK_WH}}
 
 jobs:
   merge-to-main:

.github/workflows/merge-to-stage.js

@@ -132,7 +132,7 @@ const merge = async ({ prs, type }) => {
     try {
       if (files.some((file) => SEEN[file])) {
         commentOnPR(
-          `Skipped ${number}: ${title} due to file overlap. Merging will be attempted in the next batch`,
+          `Skipped ${number}: ${title} due to file "${file}" overlap. Merging will be attempted in the next batch`,
           number
         );
         continue;
@@ -157,10 +157,11 @@ const merge = async ({ prs, type }) => {
           number,
           title,
           prefix,
-        })
+        }).catch(console.error)
       );
       await new Promise((resolve) => setTimeout(resolve, 5000));
     } catch (error) {
+      files.forEach((file) => (SEEN[file] = false));
       commentOnPR(`Error merging ${number}: ${title} ` + error.message, number);
     }
   }

.github/workflows/merge-to-stage.yaml

@@ -11,6 +11,7 @@ env:
   MILO_RELEASE_SLACK_WH: ${{ secrets.MILO_RELEASE_SLACK_WH }}
   REQUIRED_APPROVALS: ${{ secrets.REQUIRED_APPROVALS }}
   SLACK_HIGH_IMPACT_PR_WEBHOOK: ${{ secrets.SLACK_HIGH_IMPACT_PR_WEBHOOK }}
+  MILO_STAGE_SLACK_WH: ${{secrets.MILO_STAGE_SLACK_WH}}
 
 jobs:
   merge-to-stage:

libs/blocks/merch-card/merch-card.js

@@ -135,6 +135,11 @@ const parseTwpContent = async (el, merchCard) => {
       const content = group.filter((e) => e.tagName.toLowerCase() === 'p' || e.tagName.toLowerCase() === 'ul');
       const bodySlot = createTag('div', { slot: 'body-xs' }, content);
       merchCard.append(bodySlot);
+
+      const whatsIncludedLink = bodySlot.querySelector('a[href*="merch-whats-included"]');
+      if (whatsIncludedLink) {
+        whatsIncludedLink.classList.add('merch-whats-included');
+      }
     } else if (index === 2) { // Footer section
       const footerContent = group.filter((e) => ['h5', 'p'].includes(e.tagName.toLowerCase()));
       const footer = createTag('div', { slot: 'footer' }, footerContent);

libs/blocks/merch-mnemonic-list/merch-mnemonic-list.css

@@ -0,0 +1,6 @@
+.merch-mnemonic-list {
+  display: flex;
+  height: 380px;
+  flex-flow: column;
+  flex-wrap: wrap;
+}

libs/blocks/merch-mnemonic-list/merch-mnemonic-list.js

@@ -0,0 +1,21 @@
+import '../../deps/merch-mnemonic-list.js';
+import '../../deps/merch-card.js';
+import { createTag } from '../../utils/utils.js';
+
+const init = async (el) => {
+  const rows = el.querySelectorAll(':scope p:not([class])');
+  if (rows.length < 1) return;
+  [...rows].forEach((paragraph) => {
+    const merchMnemonicList = createTag('merch-mnemonic-list');
+    paragraph.setAttribute('slot', 'description');
+    const picture = paragraph.querySelector('picture');
+    const img = picture.querySelector('img');
+    const icon = createTag('merch-icon', { slot: 'icon', size: 's', src: img.src });
+    picture.remove();
+    if (icon) merchMnemonicList.appendChild(icon);
+    if (paragraph) merchMnemonicList.appendChild(paragraph);
+    el.appendChild(merchMnemonicList);
+  });
+};
+
+export default init;

libs/blocks/merch-twp/merch-twp.js

@@ -72,6 +72,19 @@ export default async function init(el) {
   content.querySelector('h4').setAttribute('slot', 'detail-xl');
   twp.append(...[...content.querySelectorAll(':scope > h4, merch-card')]);
 
+  const whatsIncludedFragment = el.querySelector('.fragment[data-path*="merch-whats-included"]');
+  if (whatsIncludedFragment) {
+    const whatsIncludedSlot = createTag(
+      'div',
+      {
+        slot: 'merch-whats-included',
+        class: 'hidden merch-whats-included-container',
+      },
+      whatsIncludedFragment,
+    );
+    twp.append(whatsIncludedSlot);
+  }
+
   const cciFooter = createTag('div', { slot: 'cci-footer' });
   cciFooter.append(...[...content.querySelectorAll('p:not(hr ~ p)')]);
   const cctFooter = createTag('div', { slot: 'cct-footer' });

libs/blocks/merch-whats-included/merch-whats-included.css

@@ -0,0 +1,37 @@
+.merch-whats-included-container > .fragment {
+  width: inherit;
+  height: inherit;
+  max-height: 100%;
+  display: block;
+}
+
+.merch-whats-included-container .content h3 {
+  margin: 0;
+}
+
+.merch-whats-included-container .fragment .container {
+  display: contents;
+}
+
+.merch-whats-included-container .fragment .content {
+  float: right;
+}
+
+.merch-whats-included-container .fragment .content a[is="checkout-link"] {
+  margin-inline-start: var(--spacing-xxs);
+}
+
+@media screen and (max-width: 767px) {
+  .merch-whats-included-container {
+    position: fixed;
+    overflow: hidden scroll;
+  }
+
+  .merch-mnemonic-list {
+    height: auto;
+  }
+
+  .merch-whats-included-container .fragment .container {
+    grid-auto-flow: row;
+  }
+}

libs/blocks/merch-whats-included/merch-whats-included.js

@@ -0,0 +1,30 @@
+import '../../deps/merch-whats-included.js';
+import { createTag } from '../../utils/utils.js';
+
+const init = async (el) => {
+  const styles = Array.from(el.classList);
+  const mobileRows = styles.find((style) => /\d/.test(style));
+  const heading = el.querySelector('h3, h4');
+  const content = el.querySelector('.section');
+
+  const contentSlot = createTag(
+    'div',
+    { slot: 'content' },
+    content.innerHTML,
+  );
+  const whatsIncluded = createTag(
+    'merch-whats-included',
+    { mobileRows: mobileRows || 1 },
+  );
+  if (heading) {
+    heading.setAttribute('slot', 'heading');
+    whatsIncluded.appendChild(heading);
+  }
+
+  whatsIncluded.appendChild(contentSlot);
+  const divsWithoutClass = contentSlot.querySelectorAll('div:not([class])');
+  divsWithoutClass.forEach((div) => div.remove());
+  el.replaceWith(whatsIncluded);
+};
+
+export default init;