Merge Stage into Main

blocks/article-cta/article-cta.css

@@ -0,0 +1,41 @@
+.article-cta-wrapper {
+  border-radius: 0.5rem;
+  box-shadow: 0 2px 8px 0 rgb(0 0 0 / 25%);
+  padding: 1rem;
+}
+
+.article-cta h2 {
+  font-size: 1.5rem;
+  font-weight: 700;
+  line-height: 1.25;
+  margin-top: 0.5rem;
+  text-align: left;
+}
+
+.article-cta span {
+  font-size: 1rem;
+  line-height: 0.5;
+}
+
+.article-cta button {
+  display: flex;
+  margin-top: 2rem;
+  justify-content: center;
+  align-items: center;
+  height: 2.5rem;
+  width: 100%;
+  font-size: 1.25rem;
+  font-weight: normal;
+  border-radius: 0.5rem;
+  background-color: var(--button-primary-color);
+}
+
+/* .article-cta button::after {
+  content: '';
+  -webkit-mask: url("../../icons/arrow.svg") center / 100% 100%;
+  mask: url("../../icons/arrow.svg") center / 100% 100%;
+  background-color: #fff;
+  padding: 0.5rem;
+  margin-left: 1rem;
+  display: inline-block;
+} */

blocks/article-cta/article-cta.js

@@ -0,0 +1,36 @@
+import { isMobile, isTablet } from '../../scripts/scripts.js';
+
+// TODO: this will come in as a fragment at a later date
+export default async function decorate(block) {
+  const heading = document.createElement('h2');
+  const img = document.createElement('img');
+  const details = document.createElement('span');
+  const button = document.createElement('button');
+
+  heading.textContent = 'Pet Insurance: A Pet Care Must Have';
+  details.textContent = 'Compare the top pet insurance plans all in one place to find the one that works best for you and your pet';
+
+  img.classList.add('article-cta-img');
+  img.width = 322;
+  img.height = 184;
+  if (isMobile()) {
+    img.src = '/icons/compare-plans-screen.svg';
+  } else if (isTablet()) {
+    img.src = '/icons/compare-plans-tablet.svg';
+    img.width = 672;
+    img.height = 184;
+  } else {
+    img.src = '/icons/compare-plans-screen.svg';
+  }
+
+  button.textContent = 'Get Started';
+  button.addEventListener('click', (e) => {
+    e.preventDefault();
+    window.open('/lost-pet-protection/membership', '_blank');
+  });
+
+  block.append(heading);
+  block.append(img);
+  block.append(details);
+  block.append(button);
+}

blocks/callout-get-a-quote/callout-get-a-quote.css

@@ -0,0 +1 @@
+/* eslint-disable no-empty-source */

blocks/carousel/carousel.css

@@ -20,7 +20,8 @@ main .carousel img {
     margin: 0 auto;
 }
 
-.section.pet-tags > .carousel-wrapper > div {
+.section.pet-tags > .carousel-wrapper > div,
+.section.pawpack-carousel > .carousel-wrapper > div {
     margin: 3rem;
 }
 

blocks/columns/columns.css

@@ -50,6 +50,11 @@ main .lost-pet-data > div div {
   border: none;
 }
 
+.columns-home-pumpkin-wellness .button-container ~ p {
+  font-size: 0.625rem;
+  color: #333F48;
+}
+
 .columns.transfer-microchip-registration-how-to > div {
   align-items: self-start;
   flex-direction: column-reverse;

blocks/header/header.js

@@ -475,6 +475,7 @@ export default async function decorate(block) {
     if (membershipsHoverContent.style.display === 'flex') {
       membershipsHoverContent.style.display = 'none';
       membershipDiv.className = 'before-click';
+      toggleMenu(nav, nav);
     } else {
       registerHoverContent.style.display = 'none';
       registerDiv.className = 'before-click';

blocks/pawpack/pawpack.css

@@ -0,0 +1,234 @@
+/* stylelint-disable no-descending-specificity */
+
+div[class*="pawpack"] {
+  --heading-font-size-xs: 1.3125rem; /* 21px */
+  --heading-line-height-xs: 1.938rem; /* 31px */
+  --heading-font-size-s: 1.625rem; /* 26px */
+  --heading-line-height-s: 2.25rem; /* 36px */
+  --heading-font-size-m: 2.188rem; /* 35px */
+  --heading-line-height-m: 2.8125rem; /* 45px */
+  --heading-font-size-xl: 3rem; /* 48px */
+  --heading-line-height-xl: 3.625rem; /* 58px */
+  --body-font-size-xs: .75rem; /* 12px */
+  --body-line-height-xs: 1.3125rem; /* 21px */
+  --body-line-height-l: 2.125rem; /* 34px */
+  --body-font-size-xl: 1.75rem; /* 28px */
+  --body-line-height-xl: 2.375rem; /* 38px */
+}
+
+
+.packpack-container {
+  display: none;
+}
+
+/* Hero */
+.pawpack-hero {
+  h1 {
+    position: absolute;
+    top: auto;
+    overflow: hidden;
+    clip: rect(1px, 1px, 1px, 1px);
+    width: 1px;
+    height: 1px;
+    white-space: nowrap;
+  }
+
+  h2 {
+    font-family: var(--body-font-family);
+    font-size: var(--body-font-size-l);
+    line-height: var(--body-line-height-l);
+
+    @media (min-width: 768px) {
+      font-size: var(--body-font-size-xl);
+      line-height: var(--body-line-height-xl);
+    }
+  }
+
+  .button-container a {
+    margin-top: 32px;
+  }
+}
+
+/* Callout */
+.pawpack-callout {
+  .default-content-wrapper {
+    display: flex;
+    align-items: center;
+    padding-block: 32px;
+
+    @media (min-width: 768px) {
+      gap: 38px;
+    }
+
+    > p,
+    > h2 {
+      margin: 0;
+    }
+
+    h2 {
+      font-size: var(--heading-font-size-xs);
+      line-height: var(--heading-line-height-xs);
+
+      @media (min-width: 768px) {
+        font-size: var(--heading-font-size-m);
+        line-height: var(--heading-line-height-m);
+        text-align: left;
+      }
+    }
+
+    @media (max-width: 767px) {
+      flex-direction: column;
+    }
+  }
+}
+
+/* Dog / Cat */
+.pawpack-dog,
+.pawpack-cat {
+  .columns > div {
+    @media (max-width: 767px) {
+      flex-direction: column-reverse;
+    }
+  } 
+
+  h2, h3 {
+    font-size: var(--heading-font-size-m);
+    line-height: var(--heading-line-height-m);
+  }
+
+  h2 {
+    @media (min-width: 768px) {
+      font-size: var(--heading-font-size-xl);
+      line-height: var(--heading-line-height-xl);
+    }
+  }
+
+  h2 + p {
+    font-size: var(--body-font-size-l);
+    line-height: var(--body-line-height-l);
+  }
+
+  h3 + p {
+    font-size: 1.25rem; /* 20px */
+    line-height: 1.5625rem; /* 25px */
+  }
+
+  .button-container + h4 {
+    margin-top: 56px;
+    padding: 8px 0;
+    font-size: var(--body-font-size-l);
+    line-height: var(--body-line-height-l);
+    color: #007680;
+    border-top: 1px solid #000;
+    border-bottom: 1px solid #000;
+
+    @media (min-width: 768px) {
+      margin-top: 0;
+    }
+  }
+
+  ul ~ p {
+    font-size: var(--body-font-size-xs);
+    line-height: var(--body-line-height-xs);
+  }
+}
+
+.pawpack-cat {
+  background-color: #ECEDEE;
+}
+
+/* Last Carousel */
+.pawpack-cat + .pawpack-carousel {
+  padding-bottom: 0;
+
+  .carousel-wrapper + .default-content-wrapper picture {
+    display: flex;
+    justify-content: center;
+  }
+}
+
+/* Carousel */
+.pawpack-carousel {
+  .default-content-wrapper {
+    text-align: center;
+
+    h2 {
+      font-size: var(--heading-font-size-s);
+      line-height: var(--heading-line-height-s);
+
+      @media (min-width: 768px) {
+        font-size: 2.375rem; /* 38px */
+        line-height: 2.4375rem; /* 39px */
+      }
+    }
+
+    > p,
+    > h2 {
+      margin: 0;
+    }
+
+    > h2 + p,
+    > .button-container {
+      margin-top: 32px;
+    }
+
+    > h2 + p {
+      font-size: var(--body-font-size-l);
+      line-height: var(--body-line-height-l);
+    }
+  }
+
+  .carousel-wrapper {
+    margin-top: 34px;
+    border: 1px solid #666A6C;
+
+    h2 {
+      color: #007680;
+
+      @media (min-width: 768px) {
+        font-size: var(--heading-font-size-s); /* 26px */
+        line-height: var(--heading-line-height-s); /* 36px */
+      }
+    }
+
+    h2 ~ p {
+      font-size: 1.125rem; /* 18px */
+      font-weight: 350;
+      line-height: 1.75rem; /* 28px */
+    }
+
+    h2 ~ p:last-of-type em {
+      font-size: 1.125rem; /* 18px */
+      line-height: 1.75rem; /* 28px */
+      font-weight: 700;
+      color: #000;
+    }
+
+    img {
+      height: 165px;
+
+      @media (min-width: 768px) {
+        height: 302px;
+      }
+    }
+  }
+
+  .carousel > .active {
+    @media (max-width: 767px) {
+      grid-template-rows: 2fr 4fr;
+    }
+  }
+
+  .carousel > .active > div:first-child {
+    > * {
+      text-align: left;
+    }
+  }
+
+  .carousel > .active > div:last-child {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 252px;
+  }
+}

blocks/plans-quote/summary-quote.js

@@ -20,6 +20,7 @@ export default async function decorateSummaryQuote(block, apiBaseUrl) {
   let petsList = [];
   let selectedProducts = [];
   let purchaseSummary = {};
+  let totalShipping = 0;
 
   // eslint-disable-next-line no-shadow
   async function getPurchaseSummary(ownerId) {
@@ -62,6 +63,11 @@ export default async function decorateSummaryQuote(block, apiBaseUrl) {
 
     try {
       purchaseSummary = await getPurchaseSummary(ownerData.id);
+
+      totalShipping = purchaseSummary.petSummaries.reduce((sum, pet) => {
+        const shipping = pet.nonInsurancePetSummary?.shipping || 0;
+        return sum + shipping;
+      }, 0);
     } catch (status) {
       // eslint-disable-next-line no-console
       console.log('Failed to get the purchase summary for owner:', ownerData.id, ' status:', status);
@@ -175,6 +181,7 @@ export default async function decorateSummaryQuote(block, apiBaseUrl) {
             <div>Monthly Fee</div>
             <div>$0.00</div>
         </div>
+        ${(totalShipping > 0) ? `<div><div>Shipping of Tag</div><div>$${totalShipping.toFixed(2)}</div></div>` : ''}
         <div>
             <div>Subtotal</div>
             <div>$${purchaseSummary.summary.subTotal}</div>

blocks/widget-aggregator/widget-aggregator.css

@@ -0,0 +1,9 @@
+.widget-aggregator iframe {
+  border: 0;
+  width: 100%;
+  height: 350px;
+
+  @media (max-width: 812px) {
+    height: 750px;
+  }
+}