Merge pull request #3428 from mhkawano/rewarded_ad_backlink

Add rewarded ad back link
subscriptions-project · Feb 21, 2024 · 59c1dab · 59c1dab
2 parents be6ca6f + 005fede
commit 59c1dab
Show file tree

Hide file tree

Showing 4 changed files with 70 additions and 2 deletions.
diff --git a/src/i18n/swg-strings.ts b/src/i18n/swg-strings.ts
@@ -552,4 +552,9 @@ export const SWG_I18N_STRINGS = {
     'zh-hk': '觀看廣告',
     'zh-tw': '觀看廣告',
   },
+  // TODO: mhkawano - Update with translations once they have been translated.
+  // Message ID: 7478828886861577969
+  'BACK_TO_HOMEPAGE': {
+    'en': 'Back to homepage',
+  },
 };
diff --git a/src/runtime/audience-action-local-flow-test.js b/src/runtime/audience-action-local-flow-test.js
@@ -431,6 +431,11 @@ describes.realWin('AudienceActionLocalFlow', (env) => {
         );
         expect(closeButton).not.to.be.null;
 
+        const backToHome = state.wrapper.shadowRoot.querySelector(
+          '.back-to-home-container'
+        );
+        expect(backToHome).to.be.null;
+
         await closeButton.click();
         await tick();
 
@@ -463,6 +468,11 @@ describes.realWin('AudienceActionLocalFlow', (env) => {
           '.rewarded-ad-close-button'
         );
         expect(prompt).to.be.null;
+
+        const backToHome = state.wrapper.shadowRoot.querySelector(
+          '.back-to-home-container'
+        );
+        expect(backToHome).not.to.be.null;
       });
 
       it('renders sign-in', async () => {

diff --git a/src/runtime/audience-action-local-flow.ts b/src/runtime/audience-action-local-flow.ts
@@ -23,6 +23,7 @@ import {
 } from './audience-action-flow';
 import {AutoPromptType} from '../api/basic-subscriptions';
 import {
+  BACK_TO_HOME_HTML,
   CONTRIBUTION_ICON,
   ERROR_HTML,
   LOADING_HTML,
@@ -471,6 +472,7 @@ export class AudienceActionLocalFlow implements AudienceActionFlow {
 
     // verified existance in initRewardedAdWall_
     const publication = config.publication!.name!;
+    const backToHomeHtml = this.getBackToHomeOrEmptyHTML_();
     const closeHtml = this.getCloseButtonOrEmptyHtml_(
       REWARDED_AD_CLOSE_BUTTON_HTML
     );
@@ -505,6 +507,7 @@ export class AudienceActionLocalFlow implements AudienceActionFlow {
       '$TITLE$',
       publication
     )
+      .replace('$BACK_TO_HOME_BUTTON$', backToHomeHtml)
       .replace('$REWARDED_AD_CLOSE_BUTTON_HTML$', closeHtml)
       .replace('$ICON$', icon)
       .replace('$MESSAGE$', message)
@@ -729,6 +732,25 @@ export class AudienceActionLocalFlow implements AudienceActionFlow {
     await this.initPrompt_();
   }
 
+  private getBackToHomeOrEmptyHTML_(): string {
+    if (!this.params_.isClosable) {
+      const language = this.clientConfigManager_.getLanguage();
+      const backToHomeText = msg(
+        SWG_I18N_STRINGS['BACK_TO_HOMEPAGE'],
+        language
+      )!;
+      return BACK_TO_HOME_HTML.replace(
+        '$BACK_TO_HOME_TEXT$',
+        backToHomeText
+      ).replace(
+        '$BACK_TO_HOME_LINK$',
+        parseUrl(this.deps_.win().location.href).origin
+      );
+    } else {
+      return '';
+    }
+  }
+
   private getCloseButtonOrEmptyHtml_(html: string) {
     const initialPromptIsClosable =
       this.params_.action === TYPE_REWARDED_AD &&

diff --git a/src/runtime/audience-action-local-ui.ts b/src/runtime/audience-action-local-ui.ts
@@ -38,6 +38,37 @@ const SLIDE_UP_ANIMATION = css`
   }
 `;
 
+const BACK_TO_HOME_CSS = css`
+  .back-to-home-container {
+    width: 100%;
+    display: flex;
+    flex-direction: row-reverse;
+  }
+
+  .back-to-home-button {
+    border-radius: 4px;
+    text-decoration: none;
+    font-size: 14px;
+    color: #1a73e8;
+    padding: 17px;
+    outline-offset: 4px;
+    outline-color: #145ab5;
+  }
+
+  .back-to-home-button:focus,
+  .back-to-home-button:hover {
+    background-color: #f2f8ff;
+  }
+`;
+
+export const BACK_TO_HOME_HTML = html`
+  <div class="back-to-home-container">
+    <a class="back-to-home-button" href="$BACK_TO_HOME_LINK$"
+      >$BACK_TO_HOME_TEXT$</a
+    >
+  </div>
+`;
+
 const REWARDED_AD_PROMPT = css`
   ${SLIDE_UP_ANIMATION}
 
@@ -276,12 +307,11 @@ export const LOADING_HTML = html`
 `;
 
 // Rewarded ad wall prompt css and html.
-// TODO: mhkawano - accessibility.
-// TODO: mhkawano - translate static strings.
 const REWARDED_AD_CSS = css`
   ${DEFAULT_BUTTON}
   ${REWARDED_AD_CLOSE_BUTTON_CSS}
   ${REWARDED_AD_PROMPT}
+  ${BACK_TO_HOME_CSS}
 
   .rewarded-ad-container {
     margin: 0px;
@@ -429,6 +459,7 @@ export const REWARDED_AD_HTML = html`
     aria-modal="true"
   >
     <div class="rewarded-ad-container">
+      $BACK_TO_HOME_BUTTON$
       <div class="rewarded-ad-header">
         <div class="rewarded-ad-title" id="title-id">$TITLE$</div>
         $REWARDED_AD_CLOSE_BUTTON_HTML$