add ability to share search via url

blocks/gmo-program-header/gmo-program-header.css

@@ -154,11 +154,20 @@
             }
         }
     }
-    & > .reset-filters {
-        font: normal normal normal 14px/17px Adobe Clean;
-        &.inactive {
-            display: none;
-            visibility: hidden;
+    & > .right-controls-wrapper {
+        display: flex;
+        & > .reset-filters, .share-search {
+            font: normal normal normal 12px/15px Adobe Clean;
+            background: #FFFFFF;
+            border: 1px solid #959595;
+            border-radius: 4px;
+            height: 20px;
+            line-height: 20px;
+            padding: 0 7px 0 7px;
+            &.inactive {
+                display: none;
+                visibility: hidden;
+            }
         }
     }
 }
@@ -197,3 +206,35 @@
 .autocomplete-items div:last-child {
     border-bottom: none;
 }
+.share-modal {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background: rgb(247, 246, 246);
+    padding: 20px;
+    border-radius: 8px;
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
+    max-width: 600px;
+    text-align: center;
+    font-size: 14px;
+    line-height: 14px;
+    overflow-wrap: anywhere;
+}
+.share-modal-close {
+    position: absolute;
+    top: 4%;
+    right: 1.25%;
+}
+
+.share-modal-message {
+    font-weight: bold;
+    text-align: left;
+}
+
+.share-modal-url {
+    font-size: 12px;
+    background-color: white;
+    border-radius: 4px;
+    border: 1px solid black;
+}

blocks/gmo-program-header/gmo-program-header.js

@@ -1,7 +1,10 @@
 import { decorateIcons } from '../../scripts/lib-franklin.js';
 //import { graphqlCampaignByName } from '../../scripts/graphql.js';
 import { graphqlProgramByName } from '../../scripts/graphql.js';
-import { statusMapping, productList, getMappingArray } from '../../scripts/shared-program.js';
+import { 
+    statusMapping, productList, getMappingArray, 
+    getFilterCookie, div, img 
+} from '../../scripts/shared-program.js';
 
 export default async function decorate(block) {
     block.innerHTML = `
@@ -68,7 +71,11 @@ export default async function decorate(block) {
     <div class="selections-wrapper">
         <div class="selected-filters-list">
         </div>
-        <div class="reset-filters inactive">Reset filters</div>
+        <div class="right-controls-wrapper">
+            <div class="share-search inactive">Share search</div>
+            <div class="reset-filters inactive">Reset filters</div>
+        </div>
+
     </div>
     <span class="icon icon-close inactive"></span>
     `;
@@ -170,6 +177,10 @@ function attachEventListeners() {
     if (resetFiltersBtn) {
         resetFiltersBtn.addEventListener('click', resetFiltersClickHandler);
     }
+    const shareSearchBtn = document.querySelector('.share-search');
+    if (shareSearchBtn) {
+        shareSearchBtn.addEventListener('click', shareSearchClickHandler);
+    }
 }
 
 function populateDropdown(response, dropdownId, type) {
@@ -343,10 +354,13 @@ function resetProductsDropDown(){
 function checkResetBtn() {
     const selectedOptions = document.querySelectorAll('.dropoption.selected');
     const resetFiltersBtn = document.querySelector('.reset-filters');
+    const shareSearchBtn = document.querySelector('.share-search');
     if (selectedOptions.length > 0) {
         if (resetFiltersBtn.classList.contains('inactive')) resetFiltersBtn.classList.remove('inactive');
+        if (shareSearchBtn.classList.contains('inactive')) shareSearchBtn.classList.remove('inactive');
     } else {
         resetFiltersBtn.classList.add('inactive');
+        shareSearchBtn.classList.add('inactive');
     }
 }
 
@@ -380,6 +394,40 @@ function resetFiltersClickHandler() {
     resetAllFilters();
 }
 
+function shareSearchClickHandler() {
+    shareSearch();
+}
+
+function closeShareSearchClickHandler(event) {
+    closeShareSearch();
+}
+
+function shareSearch() {
+    const cookie = getFilterCookie();
+    const filterValue = cookie[1];
+    const url = window.location.href.replace(/#$/, '');
+    const shareUrl = url + '?isShare=true&searchFilter=' + filterValue;
+    const shareMessage = `Your share URL is:`;
+
+    const modalElements = div(
+        { class: 'share-modal-overlay' },
+        div({ class: 'share-modal' },
+            div(
+                { class: 'share-modal-close' },
+                img({ src: '../icons/close.svg'})
+            ),
+            div({ class: 'share-modal-message' }, shareMessage),
+            div({ class: 'share-modal-url' }, shareUrl),
+        ),
+    );
+    modalElements.querySelector('.share-modal-close').addEventListener('click', closeShareSearchClickHandler);
+    document.body.appendChild(modalElements);
+}
+
+function closeShareSearch() {
+    document.querySelector('.share-modal-overlay').remove();
+}
+
 function sendGmoCampaignListBlockEvent() {
     const blockEvent = new CustomEvent('gmoCampaignListBlock');
     document.dispatchEvent(blockEvent);

blocks/gmo-program-list/gmo-program-list.js

@@ -7,7 +7,7 @@ import { toggleOption } from '../gmo-program-header/gmo-program-header.js';
 import { 
     getProductMapping, checkBlankString, statusMapping,
     dateFormat, showLoadingOverlay, hideLoadingOverlay,
-    div, span
+    getFilterCookie, div, span
 } from '../../scripts/shared-program.js'
 
 const headerConfig = [
@@ -89,13 +89,18 @@ export default async function decorate(block, numPerPage = currentNumberPerPage,
     // check if this was a 'back' from details. if so, retrieve search params from cookie
     const params = new URLSearchParams(window.location.search);
     const isBack = params.get('isBack');
+    const isShared = params.get('isShare');
+
     // clear the params from the url
     clearURLParams();
-    // retrieve previous search from cookie
-    if (isBack) { 
-        const filterValue = getFilterFromCookie();
-        if (filterValue) graphQLFilter = JSON.parse(filterValue);
-        // add filter values to filter list
+
+    // handle saved/shared search params
+    if (isBack || isShared) {
+        const filterSource = isBack ? getFilterCookie()?.[1] : params.get('searchFilter');
+        if (filterSource) {
+            const filterValue = decodeURIComponent(filterSource);
+            graphQLFilter = JSON.parse(filterValue);
+        }
         displayFilterSelections(graphQLFilter);
     }
 
@@ -582,12 +587,6 @@ function createSearchFilterCookie(graphQLFilter) {
     document.cookie = `MH_PROGRAM_FILTER=${encodeURIComponent(searchParams)}; ${expires}; path=/`;
 }
 
-function getFilterFromCookie() {
-    const cookieName = 'MH_PROGRAM_FILTER';
-    const cookie = document.cookie.match(new RegExp(`(?:^|; )${cookieName}=([^;]*)`));
-    return cookie ? decodeURIComponent(cookie[1]) : null; // Return null if the cookie is not found 
-}
-
 function clearURLParams() {
     const currentUrl = window.location.href;
     const baseUrl = currentUrl.split('?')[0];

scripts/shared-program.js

@@ -150,6 +150,13 @@ export function domEl(tag, ...items) {
     return element;
   }
 
+export function getFilterCookie() {
+    const cookieName = 'MH_PROGRAM_FILTER';
+    const cookie = document.cookie.match(new RegExp(`(?:^|; )${cookieName}=([^;]*)`));
+    return cookie ? cookie : null; // Return null if the cookie is not found 
+}
+
+
 /*
   More short hand functions can be added for very common DOM elements below.
   domEl function from above can be used for one off DOM element occurrences.