🌐 [Story subscription] Subscription localization async (#38204)

* Added tasts * Undo * Make subscriptions localize the template async * Add dep check
ampproject · May 18, 2022 · fb3f61c · fb3f61c
1 parent 2fb4e15
commit fb3f61c
Show file tree

Hide file tree

Showing 3 changed files with 74 additions and 66 deletions.
diff --git a/build-system/test-configs/dep-check-config.js b/build-system/test-configs/dep-check-config.js
@@ -283,6 +283,7 @@ exports.rules = [
       'extensions/amp-story-page-attachment/0.1/amp-story-form.js->extensions/amp-story/1.0/amp-story-localization-service.js',
       'extensions/amp-story-page-attachment/0.1/amp-story-page-attachment.js->extensions/amp-story/1.0/amp-story-localization-service.js',
       'extensions/amp-story-shopping/0.1/amp-story-shopping-attachment.js->extensions/amp-story/1.0/amp-story-localization-service.js',
+      'extensions/amp-story-subscriptions/0.1/amp-story-subscriptions.js->extensions/amp-story/1.0/amp-story-localization-service.js',
 
       // Subscriptions.
       'extensions/amp-subscriptions/0.1/expr.js->extensions/amp-access/0.1/access-expr.js',

diff --git a/extensions/amp-story-subscriptions/0.1/amp-story-subscriptions.js b/extensions/amp-story-subscriptions/0.1/amp-story-subscriptions.js
@@ -8,6 +8,8 @@ import {LocalizedStringId_Enum} from '#service/localization/strings';
 
 import {dev, devAssert} from '#utils/log';
 
+import {localizeTemplate} from 'extensions/amp-story/1.0/amp-story-localization-service';
+
 import {CSS} from '../../../build/amp-story-subscriptions-0.1.css';
 import {
   Action,
@@ -43,9 +45,6 @@ export class AmpStorySubscriptions extends AMP.BaseElement {
     /** @private {?../../../extensions/amp-subscriptions/0.1/amp-subscriptions.SubscriptionService} */
     this.subscriptionService_ = null;
 
-    /** @private {?../../../src/service/localization.LocalizationService} */
-    this.localizationService_ = null;
-
     /** @private {?../../../src/service/viewer-interface.ViewerInterface} */
     this.viewer_ = null;
 
@@ -64,50 +63,53 @@ export class AmpStorySubscriptions extends AMP.BaseElement {
       Services.storyStoreServiceForOrNull(this.win),
       Services.subscriptionsServiceForDoc(this.element),
       Services.localizationServiceForOrNull(this.element),
-    ]).then(([storeService, subscriptionService, localizationService]) => {
-      this.storeService_ = storeService;
-      this.subscriptionService_ = subscriptionService;
-      this.localizationService_ = localizationService;
-
-      const pages = this.win.document.querySelectorAll(
-        'amp-story-page:not([ad])'
-      );
-      devAssert(
-        pages.length >= 4,
-        'The number of pages should be at least 4 to enable subscriptions feature, got %s',
-        pages.length
-      );
+    ]).then(
+      ([storeService, subscriptionService, unusedLocalizationService]) => {
+        this.storeService_ = storeService;
+        this.subscriptionService_ = subscriptionService;
 
-      let subscriptionsPageIndex = parseInt(
-        this.element.getAttribute('subscriptions-page-index'),
-        10
-      );
-      subscriptionsPageIndex = isNaN(subscriptionsPageIndex)
-        ? DEFAULT_SUBSCRIPTIONS_PAGE_INDEX
-        : subscriptionsPageIndex;
-      this.storeService_.dispatch(
-        Action.SET_SUBSCRIPTIONS_PAGE_INDEX,
-        clamp(
-          subscriptionsPageIndex,
-          DEFAULT_SUBSCRIPTIONS_PAGE_INDEX,
-          pages.length - 1
-        )
-      );
+        const pages = this.win.document.querySelectorAll(
+          'amp-story-page:not([ad])'
+        );
+        devAssert(
+          pages.length >= 4,
+          'The number of pages should be at least 4 to enable subscriptions feature, got %s',
+          pages.length
+        );
 
-      // Get grant status immediately to set up the initial subscriptions state.
-      this.getGrantStatusAndUpdateState_();
-      // When the user finishes any of the actions, e.g. log in or subscribe, new entitlements would be
-      // re-fetched and this callback would be executed. Update states based on new entitlements.
-      this.subscriptionService_.addOnEntitlementResolvedCallback(() =>
-        this.getGrantStatusAndUpdateState_()
-      );
+        let subscriptionsPageIndex = parseInt(
+          this.element.getAttribute('subscriptions-page-index'),
+          10
+        );
+        subscriptionsPageIndex = isNaN(subscriptionsPageIndex)
+          ? DEFAULT_SUBSCRIPTIONS_PAGE_INDEX
+          : subscriptionsPageIndex;
+        this.storeService_.dispatch(
+          Action.SET_SUBSCRIPTIONS_PAGE_INDEX,
+          clamp(
+            subscriptionsPageIndex,
+            DEFAULT_SUBSCRIPTIONS_PAGE_INDEX,
+            pages.length - 1
+          )
+        );
 
-      // Create a paywall dialog element that have required attributes to be able to be
-      // rendered by amp-subscriptions.
-      this.element.appendChild(this.renderSubscriptionsDialogTemplate_());
+        // Get grant status immediately to set up the initial subscriptions state.
+        this.getGrantStatusAndUpdateState_();
+        // When the user finishes any of the actions, e.g. log in or subscribe, new entitlements would be
+        // re-fetched and this callback would be executed. Update states based on new entitlements.
+        this.subscriptionService_.addOnEntitlementResolvedCallback(() =>
+          this.getGrantStatusAndUpdateState_()
+        );
 
-      this.initializeListeners_();
-    });
+        // Create a paywall dialog element that have required attributes to be able to be
+        // rendered by amp-subscriptions.
+        const template = this.renderSubscriptionsDialogTemplate_();
+        return localizeTemplate(template, this.element).then(() => {
+          this.element.appendChild(template);
+          this.initializeListeners_();
+        });
+      }
+    );
   }
 
   /** @override */
@@ -244,11 +246,12 @@ export class AmpStorySubscriptions extends AMP.BaseElement {
     return (
       <div subscriptions-dialog subscriptions-display="NOT granted">
         <div class="i-amphtml-story-subscriptions-dialog-banner">
-          <button class="i-amphtml-story-subscriptions-dialog-banner-button">
-            {this.localizationService_.getLocalizedString(
+          <button
+            class="i-amphtml-story-subscriptions-dialog-banner-button"
+            i-amphtml-i18n-text-content={
               LocalizedStringId_Enum.AMP_STORY_SUBSCRIPTIONS_SKIP
-            )}
-          </button>
+            }
+          ></button>
         </div>
         <div class="i-amphtml-story-subscriptions-dialog-content">
           <span class="i-amphtml-story-subscriptions-price">
@@ -274,9 +277,11 @@ export class AmpStorySubscriptions extends AMP.BaseElement {
           >
             <img class="i-amphtml-story-subscriptions-publisher-logo"></img>
             <span class="i-amphtml-story-subscriptions-publisher-button-text">
-              {this.localizationService_.getLocalizedString(
-                LocalizedStringId_Enum.AMP_STORY_SUBSCRIPTIONS_CTA
-              )}
+              <span
+                i-amphtml-i18n-text-content={
+                  LocalizedStringId_Enum.AMP_STORY_SUBSCRIPTIONS_CTA
+                }
+              ></span>
               &nbsp;
               {getStoryAttributeSrc(this.element, 'publisher', /* warn */ true)}
             </span>
@@ -289,25 +294,27 @@ export class AmpStorySubscriptions extends AMP.BaseElement {
             subscriptions-decorate="false"
           >
             <span class="i-amphtml-story-subscriptions-google-logo"></span>
-            <span class="i-amphtml-story-subscriptions-google-button-text">
-              {this.localizationService_.getLocalizedString(
+            <span
+              class="i-amphtml-story-subscriptions-google-button-text"
+              i-amphtml-i18n-text-content={
                 LocalizedStringId_Enum.AMP_STORY_SUBSCRIPTIONS_SWG
-              )}
-            </span>
+              }
+            ></span>
           </button>
           <span class="i-amphtml-story-subscriptions-signin">
-            {this.localizationService_.getLocalizedString(
-              LocalizedStringId_Enum.AMP_STORY_SUBSCRIPTIONS_SUBSCRIBER_QUESTION
-            )}
+            <span
+              i-amphtml-i18n-text-content={
+                LocalizedStringId_Enum.AMP_STORY_SUBSCRIPTIONS_SUBSCRIBER_QUESTION
+              }
+            ></span>
             &nbsp;
             <button
               subscriptions-action="login"
               subscriptions-display="NOT granted"
-            >
-              {this.localizationService_.getLocalizedString(
+              i-amphtml-i18n-text-content={
                 LocalizedStringId_Enum.AMP_STORY_SUBSCRIPTIONS_SIGN_IN
-              )}
-            </button>
+              }
+            ></button>
           </span>
         </div>
       </div>

diff --git a/extensions/amp-story-subscriptions/0.1/test/test-amp-story-subscriptions.js b/extensions/amp-story-subscriptions/0.1/test/test-amp-story-subscriptions.js
@@ -1,12 +1,13 @@
 import * as Preact from '#core/dom/jsx';
 
 import {Services} from '#service';
-import {LocalizationService} from '#service/localization';
 
 import {afterRenderPromise} from '#testing/helpers';
 
+import {getLocalizationService} from 'extensions/amp-story/1.0/amp-story-localization-service';
 import {AdvancementMode} from 'extensions/amp-story/1.0/story-analytics';
 
+import LocalizedStringsEn from '../../../amp-story/1.0/_locales/en.json' assert {type: 'json'}; // lgtm[js/syntax-error]
 import {
   Action,
   AmpStoryStoreService,
@@ -45,10 +46,9 @@ describes.realWin(
         .returns(Promise.resolve(storeService));
       env.sandbox.stub(Services, 'storyStoreService').returns(storeService);
 
-      const localizationService = new LocalizationService(doc.body);
-      env.sandbox
-        .stub(Services, 'localizationServiceForOrNull')
-        .returns(Promise.resolve(localizationService));
+      getLocalizationService(doc.body).registerLocalizedStringBundles({
+        'en': LocalizedStringsEn,
+      });
 
       const platformConfig = {
         'services': [