Add subscription-message-number to SwG smartbox button. This is allow…

… users to control the message on the button. Example is updated accordingly. (#28213)
ampproject · May 6, 2020 · 579e523 · 579e523
1 parent 396c36c
commit 579e523
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 5 deletions.
diff --git a/examples/amp-subscriptions-smartbox.amp.html → ...oogle/amp-subscriptions-smartbox.amp.html b/examples/amp-subscriptions-smartbox.amp.html → ...oogle/amp-subscriptions-smartbox.amp.html
@@ -215,18 +215,16 @@
     <div class="brand-logo">
       PublisherLogo - Subscriptions Demo
     </div>
+    <p>You need to append "#swg.experiments=smartbox" at the end of the URL and then refresh.</p>
   </header>
 
-
-
-
-
   <h3>"Smart Button (Light)"</h3>
 
     <button id="smartboxButton" subscriptions-display="NOT loggedIn"
       subscriptions-lang="en"
       subscriptions-action="subscribe-smartbutton"
       subscriptions-service="subscribe.google.com"
+      subscriptions-message-number="1"
       subscriptions-decorate>Yes I will Contribute</button>
 
   <h3>"Smart Button (Dark)"</h3>
@@ -235,6 +233,7 @@ <h3>"Smart Button (Dark)"</h3>
       subscriptions-lang="en"
       subscriptions-action="subscribe-smartbutton-dark"
       subscriptions-service="subscribe.google.com"
+      subscriptions-message-number="1"
       subscriptions-decorate>Yes I will Contribute</button>
 
   <h3>"Smart Button (Dark w/ custom message text color)"</h3>
@@ -244,8 +243,8 @@ <h3>"Smart Button (Dark w/ custom message text color)"</h3>
       subscriptions-action="subscribe-smartbutton-dark"
       subscriptions-service="subscribe.google.com"
       subscriptions-message-text-color="rgba(0, 120, 255, 0.95)"
+      subscriptions-message-number="1"
       subscriptions-decorate>Yes I will Contribute</button>
 
-
 </body>
 </html>
diff --git a/extensions/amp-subscriptions-google/0.1/amp-subscriptions-google.js b/extensions/amp-subscriptions-google/0.1/amp-subscriptions-google.js
@@ -579,6 +579,12 @@ export class GoogleSubscriptionsPlatform {
         if (messageTextColor) {
           opts.messageTextColor = messageTextColor;
         }
+        const messageNumber = element.getAttribute(
+          'subscriptions-message-number'
+        );
+        if (messageNumber) {
+          opts.messageNumber = messageNumber;
+        }
         this.runtime_.attachSmartButton(element, opts, () => {});
         break;
       default:

diff --git a/extensions/amp-subscriptions-google/0.1/test/test-amp-subscriptions-google.js b/extensions/amp-subscriptions-google/0.1/test/test-amp-subscriptions-google.js
@@ -673,6 +673,20 @@ describes.realWin('amp-subscriptions-google', {amp: true}, (env) => {
     });
   });
 
+  it('should use message number', () => {
+    const elem = env.win.document.createElement('div');
+    const attachStub = env.sandbox.stub(platform.runtime_, 'attachSmartButton');
+    elem.textContent = 'some html';
+    elem.setAttribute('subscriptions-lang', 'en');
+    elem.setAttribute('subscriptions-message-number', 1);
+    platform.decorateUI(elem, 'subscribe-smartbutton');
+    expect(attachStub).to.be.calledWith(elem, {
+      lang: 'en',
+      theme: 'light',
+      messageNumber: '1', // Message is 'Subscribe with just a few taps' on smartbox button.
+    });
+  });
+
   it('should throw if smartButton language is missing', () => {
     //expectAsyncConsoleError(/must have a language attrbiute/);
     const elem = env.win.document.createElement('div');