Stage to Main for Express 25.11

express/code/blocks/frictionless-quick-action/frictionless-quick-action.js

@@ -7,7 +7,8 @@ import { buildFreePlanWidget } from '../../scripts/widgets/free-plan.js';
 import { sendFrictionlessEventToAdobeAnaltics } from '../../scripts/instrument.js';
 
 let createTag; let getConfig;
-let loadScript; let getMetadata;
+let getMetadata;
+let loadScript; let globalNavSelector;
 
 let ccEverywhere;
 let quickActionContainer;
@@ -40,6 +41,10 @@ const QA_CONFIGS = {
     ...getBaseImgCfg(JPG, JPEG, PNG),
     input_check: () => true,
   },
+  'qa-in-product-variant1': { ...getBaseImgCfg(JPG, JPEG, PNG) },
+  'qa-in-product-variant2': { ...getBaseImgCfg(JPG, JPEG, PNG) },
+  'qa-in-product-control': { ...getBaseImgCfg(JPG, JPEG, PNG) },
+  'qa-nba': { ...getBaseImgCfg(JPG, JPEG, PNG) },
 };
 
 function fade(element, action) {
@@ -61,6 +66,40 @@ function selectElementByTagPrefix(p) {
   return Array.from(allEls).find((e) => e.tagName.toLowerCase().startsWith(p.toLowerCase()));
 }
 
+function frictionlessQAExperiment(quickAction, docConfig, appConfig, exportConfig, contConfig) {
+  const urlParams = new URLSearchParams(window.location.search);
+  const urlVariant = urlParams.get('variant');
+  const isStage = urlParams.get('hzenv') === 'stage';
+  const variant = isStage && urlVariant ? urlVariant : quickAction;
+  appConfig.metaData.variant = variant;
+  switch (variant) {
+    case 'qa-nba':
+      ccEverywhere.quickAction.removeBackground(docConfig, appConfig, exportConfig, contConfig);
+      break;
+    case 'qa-in-product-control':
+      ccEverywhere.quickAction.removeBackground(docConfig, appConfig, exportConfig, contConfig);
+      break;
+    case 'qa-in-product-variant1':
+      appConfig.metaData.isFrictionlessQa = false;
+      document.querySelector(`${globalNavSelector}.ready`).style.display = 'none';
+      ccEverywhere.editor.createWithAsset(docConfig, appConfig, exportConfig, {
+        ...contConfig,
+        mode: 'modal',
+      });
+      break;
+    case 'qa-in-product-variant2':
+      appConfig.metaData.isFrictionlessQa = false;
+      document.querySelector(`${globalNavSelector}.ready`).style.display = 'none';
+      ccEverywhere.editor.createWithAsset(docConfig, appConfig, exportConfig, {
+        ...contConfig,
+        mode: 'modal',
+      });
+      break;
+    default:
+      break;
+  }
+}
+
 // eslint-disable-next-line default-param-last
 export function runQuickAction(quickAction, data, block) {
   // TODO: need the button labels from the placeholders sheet if the SDK default doens't work.
@@ -101,6 +140,7 @@ export function runQuickAction(quickAction, data, block) {
     parentElementId: `${quickAction}-container`,
     backgroundColor: 'transparent',
     hideCloseButton: true,
+    padding: 0,
   };
 
   const docConfig = {
@@ -110,6 +150,7 @@ export function runQuickAction(quickAction, data, block) {
       type: 'image',
     },
   };
+
   const appConfig = {
     metaData: { isFrictionlessQa: 'true' },
     receiveQuickActionErrors: false,
@@ -132,6 +173,10 @@ export function runQuickAction(quickAction, data, block) {
     },
   };
 
+  const urlParams = new URLSearchParams(window.location.search);
+  const variant = urlParams.get('variant');
+  const isStage = urlParams.get('hzenv') === 'stage';
+
   if (!ccEverywhere) return;
   switch (quickAction) {
     case 'convert-to-jpg':
@@ -151,11 +196,30 @@ export function runQuickAction(quickAction, data, block) {
       ccEverywhere.quickAction.resizeImage(docConfig, appConfig, exportConfig, contConfig);
       break;
     case 'remove-background':
+
+      if (variant && isStage) {
+        frictionlessQAExperiment(variant, docConfig, appConfig, exportConfig, contConfig);
+        break;
+      }
+
       ccEverywhere.quickAction.removeBackground(docConfig, appConfig, exportConfig, contConfig);
       break;
     case 'generate-qr-code':
       ccEverywhere.quickAction.generateQRCode({}, appConfig, exportConfig, contConfig);
       break;
+    // Experiment code, remove after done
+    case 'qa-nba':
+      frictionlessQAExperiment(quickAction, docConfig, appConfig, exportConfig, contConfig);
+      break;
+    case 'qa-in-product-control':
+      frictionlessQAExperiment(quickAction, docConfig, appConfig, exportConfig, contConfig);
+      break;
+    case 'qa-in-product-variant1':
+      frictionlessQAExperiment(quickAction, docConfig, appConfig, exportConfig, contConfig);
+      break;
+    case 'qa-in-product-variant2':
+      frictionlessQAExperiment(quickAction, docConfig, appConfig, exportConfig, contConfig);
+      break;
     default: break;
   }
 }
@@ -186,15 +250,19 @@ async function startSDK(data = '', quickAction, block) {
     if (country) ietf = getConfig().locales[country]?.ietf;
     if (ietf === 'zh-Hant-TW') ietf = 'tw-TW';
     else if (ietf === 'zh-Hans-CN') ietf = 'cn-CN';
-
+    // query parameter URL for overriding the cc everywhere
+    // iframe source URL, used for testing new experiences
+    const isStageEnv = urlParams.get('hzenv') === 'stage';
+    const baseQA = new URLSearchParams(window.location.search).get('base-qa');
     const ccEverywhereConfig = {
       hostInfo: {
         clientId,
         appName: 'express',
       },
       configParams: {
         locale: ietf?.replace('-', '_'),
-        env: urlParams.get('hzenv') === 'stage' ? 'stage' : 'prod',
+        env: isStageEnv ? 'stage' : 'prod',
+        urlOverride: isStageEnv ? baseQA : undefined,
       },
       authOption: () => ({ mode: 'delayed' }),
     };
@@ -248,9 +316,12 @@ async function startSDKWithUnconvertedFile(file, quickAction, block) {
 }
 
 export default async function decorate(block) {
-  await Promise.all([import(`${getLibs()}/utils/utils.js`), decorateButtonsDeprecated(block)]).then(([utils]) => {
-    ({ createTag, getConfig, loadScript, getMetadata } = utils);
-  });
+  const [utils, gNavUtils] = await Promise.all([import(`${getLibs()}/utils/utils.js`),
+    import(`${getLibs()}/blocks/global-navigation/utilities/utilities.js`),
+    decorateButtonsDeprecated(block)]);
+  ({ createTag, getMetadata, loadScript, getConfig } = utils);
+  globalNavSelector = gNavUtils?.selectors.globalNav;
+
   const rows = Array.from(block.children);
   rows[1].classList.add('fqa-container');
   const quickActionRow = rows.filter((r) => r.children && r.children[0].textContent.toLowerCase().trim() === 'quick-action');