Merge pull request #3378 from mhkawano/main

Update local audience action error view
subscriptions-project · Jan 9, 2024 · 2664bc7 · 2664bc7
2 parents d683439 + f3ecbba
commit 2664bc7
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 20 deletions.
diff --git a/src/runtime/audience-action-local-flow-test.js b/src/runtime/audience-action-local-flow-test.js
@@ -113,7 +113,7 @@ describes.realWin('AudienceActionLocalFlow', (env) => {
         '.audience-action-local-wrapper'
       );
       expect(wrapper).to.not.be.null;
-      const prompt = wrapper.shadowRoot.querySelector('.prompt');
+      const prompt = wrapper.shadowRoot.querySelector('.rewarded-ad-prompt');
       expect(prompt.innerHTML).contains('Something went wrong.');
       const closePromptButton = prompt.querySelector('.closePromptButton');
       expect(closePromptButton).to.be.null;
@@ -494,7 +494,9 @@ describes.realWin('AudienceActionLocalFlow', (env) => {
         );
         expect(wrapper).to.not.be.null;
 
-        const errorPrompt = wrapper.shadowRoot.querySelector('.prompt');
+        const errorPrompt = wrapper.shadowRoot.querySelector(
+          '.rewarded-ad-prompt'
+        );
         expect(errorPrompt.innerHTML).contains('Something went wrong.');
         expect(eventManager.logSwgEvent).to.be.calledWith(
           AnalyticsEvent.EVENT_REWARDED_AD_CONFIG_ERROR
@@ -512,7 +514,9 @@ describes.realWin('AudienceActionLocalFlow', (env) => {
           DEFAULT_CONFIG
         );
 
-        const errorPrompt = state.wrapper.shadowRoot.querySelector('.prompt');
+        const errorPrompt = state.wrapper.shadowRoot.querySelector(
+          '.rewarded-ad-prompt'
+        );
         expect(errorPrompt.innerHTML).contains('Something went wrong.');
         expect(eventManager.logSwgEvent).to.be.calledWith(
           AnalyticsEvent.EVENT_REWARDED_AD_PAGE_ERROR
@@ -1058,7 +1062,7 @@ describes.realWin('AudienceActionLocalFlow', (env) => {
 
         const shadowRoot = state.wrapper.shadowRoot;
         expect(shadowRoot.innerHTML).to.not.contain('newsletter_code_snippet');
-        const prompt = shadowRoot.querySelector('.prompt');
+        const prompt = shadowRoot.querySelector('.rewarded-ad-prompt');
         expect(prompt.innerHTML).contains('Something went wrong.');
         expect(eventManager.logSwgEvent).to.be.calledWith(
           AnalyticsEvent.EVENT_BYOP_NEWSLETTER_OPT_IN_CONFIG_ERROR
@@ -1087,7 +1091,9 @@ describes.realWin('AudienceActionLocalFlow', (env) => {
         expect(shadowRoot.innerHTML).to.not.contain('newsletter_code_snippet');
         const form = state.wrapper.shadowRoot.querySelector('form');
         expect(form).to.be.null;
-        const prompt = state.wrapper.shadowRoot.querySelector('.prompt');
+        const prompt = state.wrapper.shadowRoot.querySelector(
+          '.rewarded-ad-prompt'
+        );
         expect(prompt.innerHTML).contains('Something went wrong.');
         expect(eventManager.logSwgEvent).to.be.calledWith(
           AnalyticsEvent.EVENT_BYOP_NEWSLETTER_OPT_IN_CODE_SNIPPET_ERROR

diff --git a/src/runtime/audience-action-local-ui.ts b/src/runtime/audience-action-local-ui.ts
@@ -154,27 +154,21 @@ export const OPT_IN_CLOSE_BUTTON_HTML = html`<style>
   </div>`;
 
 // Error view for prompts that fail to init.
-// TODO: mhkawano - Update once UX finished.
-// TODO: mhkawano - allow error view to be closed.
 const ERROR_CSS = css`
-  .prompt {
-    margin-left: auto !important;
-    margin-right: auto !important;
-    margin-top: auto !important;
-    width: 600px;
-    height: 200px;
-    background: white;
-    pointer-events: auto !important;
-    text-align: center;
-  }
+  ${REWARDED_AD_PROMPT}
 `;
 
-// TODO: mhkawano - allow error view to be closed.
 export const ERROR_HTML = html`
   <style>
-    ${ERROR_CSS}
+    ${ERROR_CSS} .rewarded-ad-prompt {
+      height: 120px;
+      width: 100%;
+      align-items: center;
+      justify-items: center;
+      display: grid;
+    }
   </style>
-  <div class="prompt">Something went wrong.</div>
+  <div class="rewarded-ad-prompt">Something went wrong.</div>
 `;
 
 const LOADING_CSS = css`