Sticky deliverables header, update graphql endpoints

blocks/gmo-program-details/gmo-program-details.css

@@ -313,6 +313,16 @@ body {
         color: #505050;
         display: flex;
         align-items: center;
+        position: sticky;
+        position: -webkit-sticky;
+        top: 0;
+    }
+}
+.table-content {
+    height: 45vh;
+    overflow-y: auto;
+    &::-webkit-scrollbar {
+        display: none;
     }
 }
 .inactive {

blocks/gmo-program-details/gmo-program-details.js

@@ -1,19 +1,24 @@
 import { decorateIcons, readBlockConfig } from '../../scripts/lib-franklin.js';
 import { getQueryVariable } from '../../scripts/shared.js';
-import { getProgramInfo } from '../../scripts/graphql.js';
+import { executeQuery } from '../../scripts/graphql.js';
 import { resolveMappings, filterArray, getProductMapping, checkBlankString } from '../../scripts/shared-program.js';
 import { getBaseConfigPath } from '../../scripts/site-config.js';
 import { searchAsset } from '../../scripts/assets.js';
 
 let blockConfig;
 const programName = getQueryVariable('programName');
+const programRefNumber = getQueryVariable('programReferenceNumber');
 const deliverableMappings = resolveMappings("getDeliverableTypeMapping");
 const platformMappings = resolveMappings("getPlatformsMapping");
 
 export default async function decorate(block) {
 
-    const programData = await getProgramInfo(programName, "getProgramDetails");
-    const deliverables = getProgramInfo(programName, "getProgramDeliverables");
+    const encodedSemi = encodeURIComponent(';');
+    const encodedProgram = encodeURIComponent(programName);
+    const programQueryString = `getProgramDetails${encodedSemi}programName=${encodedProgram}${encodedSemi}programReferenceNumber=${encodeURIComponent(programRefNumber)}`;
+    const programData = await executeQuery(programQueryString);
+    const deliverableQueryString = `getProgramDeliverables${encodedSemi}programName=${encodedProgram}`;
+    const deliverables = await executeQuery(deliverableQueryString);
 
     const p0TargetMarketArea = programData.data.programList.items[0].p0TargetMarketArea;
     const p1TargetMarketArea = programData.data.programList.items[0].p1TargetMarketArea;

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

@@ -165,7 +165,9 @@ async function buildCampaignList(campaigns, numPerPage) {
         campaignInfoWrapper.classList.add('campaign-info-wrapper', 'column-1');
 
         const campaignIconLink = document.createElement('a');
-        campaignIconLink.href = host + `/${detailsPage}?programName=${campaign.node.programName}`;
+        let campaignDetailsLink = host + `/${detailsPage}?programName=${campaign.node.programName}&`;
+        campaignDetailsLink += `programReferenceNumber=${campaign.node.programReferenceNumber ? campaign.node.programReferenceNumber : ""}`
+        campaignIconLink.href = campaignDetailsLink;
 
         const campaignIcon = document.createElement('div');
         campaignIcon.classList.add('campaign-icon');

scripts/graphql.js

@@ -222,23 +222,18 @@ export function generateFilterJSON(filterParams) {
   return result;
 }
 
-// add additional query types as needed
-export async function getProgramInfo(programName, queryType) {
+// general function for executing graphql queries
+export async function executeQuery(queryString) {
   const baseApiUrl = `${await getGraphqlEndpoint()}/graphql/execute.json`;
   const projectId = 'gmo';
-  //const queryName = (queryType == "deliverables") ? "getProgramDeliverables" : "getProgramDetails";
-  const encodedProgramName = encodeURIComponent(programName);
-  const encodedSemiColon = encodeURIComponent(';');
-  //persisted query URLs have to be encoded together with the first semicolon
-  const graphqlEndpoint = `${baseApiUrl}/${projectId}/${queryType}${encodedSemiColon}programName=${encodedProgramName}`;
+  const queryEndpoint = `${baseApiUrl}/${projectId}/${queryString}`;
   const jwtToken = await getBearerToken();
 
-  // Return the fetch promise chain so that it can be awaited outside
-  return fetch(graphqlEndpoint, {
-      method: 'GET',
-      headers: {
-          Authorization: jwtToken,
-      },
+  return fetch(queryEndpoint, {
+    method: 'GET',
+    headers: {
+        Authorization: jwtToken,
+    },
   }).then(response => {
       if (!response.ok) {
           throw new Error(`HTTP error! Status: ${response.status}`);
@@ -250,4 +245,4 @@ export async function getProgramInfo(programName, queryType) {
       console.error('Error fetching data: ', error);
       throw error; // Rethrow or handle error as appropriate
   });
-}
+};