split by query param or header

Signed-off-by: Stephen Rugh <[email protected]>

scripts/commerce.js

@@ -1,5 +1,7 @@
 /* eslint-disable import/prefer-default-export, import/no-cycle */
-import { getConfigValue, getCookie, getHeaders } from './configs.js';
+import {
+  getConfigValue, getCookie, getQueryParams,
+} from './configs.js';
 import { getConsent } from './scripts.js';
 
 /* Common query fragments */
@@ -22,10 +24,9 @@ export const priceFieldsFragment = `fragment priceFields on ProductViewPrice {
 export async function commerceEndpointWithQueryParams() {
   // Set Query Parameters so they can be appended to the endpoint
   const urlWithQueryParams = new URL(await getConfigValue('commerce-endpoint'));
-  await getHeaders('pdp').then((headers) => {
-    Object.keys(headers).forEach((key) => {
-      // TODO: is it OK to apply all headers as query param even if they include things like api-key and content-type which was not previously a query param?
-      urlWithQueryParams.searchParams.append(key, headers[key]);
+  await getQueryParams('pdp').then((params) => {
+    Object.keys(params).forEach((key) => {
+      urlWithQueryParams.searchParams.append(key, params[key]);
     });
   });
   return urlWithQueryParams;

scripts/configs.js

@@ -80,7 +80,8 @@ export const getConfigValue = async (configParam, environment) => {
   return configElements.find((c) => c.key === configParam)?.value;
 };
 
-/** Retrieves headers from config entries like commerce.headers.pdp.my-header, etc and
+/**
+ * Retrieves headers from config entries like commerce.headers.pdp.my-header, etc and
  * returns as object of all headers like { my-header: value, ... }
 */
 export const getHeaders = async (scope, environment) => {
@@ -97,6 +98,24 @@ export const getHeaders = async (scope, environment) => {
   }, {});
 };
 
+/**
+ * Retrieves query params from config entries like commerce.queryparams.pdp.my-param, etc and
+ * returns as object of all params like { my-query-param: value, ... }
+*/
+export const getQueryParams = async (scope, environment) => {
+  const env = environment || calcEnvironment();
+  const config = await getConfigForEnvironment(env);
+  const configElements = config.data.filter((el) => el?.key.includes(`queryparam.${scope}`));
+
+  return configElements.reduce((obj, item) => {
+    let { key } = item;
+    if (key.includes(`commerce.queryparam.${scope}.`)) {
+      key = key.replace(`commerce.queryparam.${scope}.`, '');
+    }
+    return { ...obj, [key]: item.value };
+  }, {});
+};
+
 export const getCookie = (cookieName) => {
   const cookies = document.cookie.split(';');
   let foundValue;

scripts/initializers/pdp.js

@@ -29,7 +29,6 @@ await initializeDropin(async () => {
   setEndpoint(await commerceEndpointWithQueryParams());
 
   // Set Fetch Headers (Service)
-  // TODO: is it OK to apply all headers even though the commerceEndpointWithQueryParams also applies them?
   setFetchGraphQlHeaders(await getHeaders('pdp'));
 
   const sku = getSkuFromUrl();