Third cut for new component [amp-access-fewcents] (#37414)

* [amp-access-fewcents] Imported extension in the example after release * [amp-access-fewcents] Configured multiple environment * [amp-access-fewcents] Added .protoascii file * [amp-access-fewcents] Updated fewcents logo url * [amp-access-fewcents] Added documentation for publisher config * [amp-access-fewcents] Updated validator tests * [amp-access-fewcents] Added unit testcases for multiple env config * [amp-access-fewcents] Formatting fixes * [amp-access-fewcents] Added the fewcents example to the allowed list for the validator * [amp-access-fewcents] Added comment in constants * [amp-access-fewcents] Removed latest from .protoascii file
ampproject · Jan 31, 2022 · 67b4f72 · 67b4f72
1 parent 0eab595
commit 67b4f72
Show file tree

Hide file tree

Showing 9 changed files with 162 additions and 31 deletions.
diff --git a/build-system/test-configs/config.js b/build-system/test-configs/config.js
@@ -199,6 +199,9 @@ const htmlFixtureGlobs = [
   '!examples/visual-tests/amp-story-player/!(*.amp.html)',
   '!test/fixtures/e2e/amp-story-player/!(*.amp.html)',
 
+  // Remove this from the list after TODO(#37467) gets closed.
+  '!examples/amp-access-fewcents.html',
+
   // TODO(#25149): Fix these invalid files and remove them from this list.
   '!examples/accordion.amp.html',
   '!examples/ad-lightbox.amp.html',

diff --git a/examples/amp-access-fewcents.html b/examples/amp-access-fewcents.html
@@ -24,6 +24,7 @@
         "vendor": "fewcents",
         "noPingback": true,
         "fewcents": {
+          "environment": "development",
           "publisherLogoUrl" : "https://www.jagranimages.com/images/jagran-logo-2021.png",
           "contentSelector" : "amp-access-fewcents-dialog",
           "primaryColor" : "#FF6363",
@@ -37,10 +38,6 @@
     <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
     <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
     <style amp-custom>
-      amp-access-fewcents {
-        color: red;
-      }
-
       .main-container {
         height: auto;
       }
@@ -124,6 +121,7 @@
       }
     </style>
     <script async custom-element="amp-access" src="https://cdn.ampproject.org/v0/amp-access-0.1.js"></script>
+    <script async custom-element="amp-access-fewcents" src="https://cdn.ampproject.org/v0/amp-access-fewcents-0.1.js"></script>
     <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
     <script async src="https://cdn.ampproject.org/v0.js"></script>
   </head>

diff --git a/extensions/amp-access-fewcents/0.1/fewcents-constants.js b/extensions/amp-access-fewcents/0.1/fewcents-constants.js
@@ -4,9 +4,16 @@ export const TAG = 'amp-access-fewcents';
 /** @const {string} Extension shorthand name used for CSS classes */
 export const TAG_SHORTHAND = 'aaf';
 
-/** @const {string} */
-export const CONFIG_BASE_PATH =
-  'https://api.hounds.fewcents.co/v1/amp/authorizeBid?articleUrl=SOURCE_URL&ampReaderId=READER_ID&returnUrl=RETURN_URL';
+/** @const {json} */
+export const CONFIG_BASE_PATH = {
+  development: 'https://api.hounds.fewcents.co/',
+  demo: 'https://api.demo.fewcents.co/',
+  production: 'https://api.fewcents.co/',
+};
+
+/** @const {string} Path params for authorize url */
+export const CONFIG_PATH_PARAMS =
+  'v1/amp/authorizeBid?articleUrl=SOURCE_URL&ampReaderId=READER_ID&returnUrl=RETURN_URL';
 
 /** @const {number} */
 export const AUTHORIZATION_TIMEOUT = 10000;
@@ -17,8 +24,7 @@ export const DEFAULT_MESSAGES = {
   fcTitleText: 'Instant Access With Fewcents.',
   fcPromptText: 'I already bought this',
   fcButtonText: 'Unlock',
-  fcPoweredImageRef:
-    'https://dev.fewcents.co/static/media/powered-fewcents.5c8ee304.png',
+  fcPoweredImageRef: 'https://images.fewcents.co/paywall/powered-fewcents.png',
   fcTermsRef: 'https://www.fewcents.co/terms',
   fcPrivacyRef: 'https://www.fewcents.co/privacy',
   fcContactUsRef: 'mailto:support@fewcents.co',

diff --git a/extensions/amp-access-fewcents/0.1/fewcents-impl.js b/extensions/amp-access-fewcents/0.1/fewcents-impl.js
@@ -26,6 +26,7 @@ import {parseUrlDeprecated} from 'src/url';
 import {
   AUTHORIZATION_TIMEOUT,
   CONFIG_BASE_PATH,
+  CONFIG_PATH_PARAMS,
   DEFAULT_MESSAGES,
   TAG,
   TAG_SHORTHAND,
@@ -96,7 +97,10 @@ export class AmpAccessFewcents {
         (response) => {
           // removing the paywall if shown and showing the content
           this.emptyContainer_();
-          return {access: response.data.access, data: JSON.stringify(response)};
+          return {
+            access: response.data.access,
+            data: JSON.stringify(response),
+          };
         },
         (err) => {
           // showing the paywall
@@ -143,9 +147,10 @@ export class AmpAccessFewcents {
     const category = this.fewcentsConfig_['category'];
 
     const {hostname} = parseUrlDeprecated();
+    const basePath = this.getConfigBasePath_() + CONFIG_PATH_PARAMS;
 
     const url =
-      CONFIG_BASE_PATH +
+      basePath +
       '&accessKey=' +
       encodeURIComponent(accessKey) +
       '&category=' +
@@ -158,6 +163,22 @@ export class AmpAccessFewcents {
     return url;
   }
 
+  /**
+   * Returns the base path for authorize endpoint
+   * @private
+   * @return {string}
+   */
+  getConfigBasePath_() {
+    const env = this.fewcentsConfig_['environment'];
+    if (env === 'development') {
+      return CONFIG_BASE_PATH.development;
+    } else if (env === 'demo') {
+      return CONFIG_BASE_PATH.demo;
+    } else {
+      return CONFIG_BASE_PATH.production;
+    }
+  }
+
   /**
    * Parse the response from authorize endpoint
    * @param {json} response

diff --git a/extensions/amp-access-fewcents/0.1/test/test-amp-access-fewcents.js b/extensions/amp-access-fewcents/0.1/test/test-amp-access-fewcents.js
@@ -20,6 +20,15 @@ const TAG = 'amp-access-fewcents';
 
 const TAG_SHORTHAND = 'aaf';
 
+const fewcentsConfigValue = {
+  publisherLogoUrl: 'https://www.jagranimages.com/images/jagran-logo-2021.png',
+  contentSelector: 'amp-access-fewcents-dialog',
+  primaryColor: '',
+  accessKey: 'localhost',
+  category: 'paywall',
+  articleIdentifier: 'mockArticleIdentifier',
+};
+
 const paywallResponse = {
   success: true,
   message: 'Amp article price returned with unlock url.',
@@ -66,15 +75,8 @@ describes.realWin(
       ampdoc = env.ampdoc;
       document = win.document;
 
-      fewcentsConfig = {
-        publisherLogoUrl:
-          'https://www.jagranimages.com/images/jagran-logo-2021.png',
-        contentSelector: 'amp-access-fewcents-dialog',
-        primaryColor: '',
-        accessKey: 'localhost',
-        category: 'paywall',
-        articleIdentifier: 'mockArticleIdentifier',
-      };
+      fewcentsConfig = fewcentsConfigValue;
+      fewcentsConfig['environment'] = 'development';
 
       accessSource = {
         getAdapterConfig: () => {
@@ -100,7 +102,7 @@ describes.realWin(
       xhrMock.verify();
     });
 
-    describe('authorize', () => {
+    describe('authorize on development environment', () => {
       let emptyContainerStub;
       beforeEach(() => {
         emptyContainerStub = env.sandbox.stub(vendor, 'emptyContainer_');
@@ -233,6 +235,90 @@ describes.realWin(
       });
     });
 
+    describe('authorize on demo environment', () => {
+      let emptyContainerStub;
+
+      beforeEach(() => {
+        fewcentsConfig = fewcentsConfigValue;
+        fewcentsConfig['environment'] = 'demo';
+        vendor = new AmpAccessFewcents(accessService, accessSource);
+        emptyContainerStub = env.sandbox.stub(vendor, 'emptyContainer_');
+        env.sandbox.stub(vendor, 'renderPurchaseOverlay_');
+      });
+
+      afterEach(() => {
+        vendor.fewCentsBidId_ = null;
+      });
+
+      it('should show the paywall on demo : authorization response fails - 402 error', () => {
+        accessSourceMock
+          .expects('buildUrl')
+          .returns(Promise.resolve('https://builturl'))
+          .once();
+
+        xhrMock
+          .expects('fetchJson')
+          .returns(
+            Promise.reject({
+              response: {
+                status: 402,
+                json() {
+                  return Promise.resolve(paywallResponse);
+                },
+              },
+            })
+          )
+          .once();
+
+        emptyContainerStub.returns(Promise.resolve());
+        return vendor.authorize().then((res) => {
+          expect(res.access).to.be.false;
+        });
+      });
+    });
+
+    describe('authorize on default environment', () => {
+      let emptyContainerStub;
+
+      beforeEach(() => {
+        fewcentsConfig = fewcentsConfigValue;
+        fewcentsConfig['environment'] = 'production';
+        vendor = new AmpAccessFewcents(accessService, accessSource);
+        emptyContainerStub = env.sandbox.stub(vendor, 'emptyContainer_');
+        env.sandbox.stub(vendor, 'renderPurchaseOverlay_');
+      });
+
+      afterEach(() => {
+        vendor.fewCentsBidId_ = null;
+      });
+
+      it('should show the paywall on demo : authorization response fails - 402 error', () => {
+        accessSourceMock
+          .expects('buildUrl')
+          .returns(Promise.resolve('https://builturl'))
+          .once();
+
+        xhrMock
+          .expects('fetchJson')
+          .returns(
+            Promise.reject({
+              response: {
+                status: 402,
+                json() {
+                  return Promise.resolve(paywallResponse);
+                },
+              },
+            })
+          )
+          .once();
+
+        emptyContainerStub.returns(Promise.resolve());
+        return vendor.authorize().then((res) => {
+          expect(res.access).to.be.false;
+        });
+      });
+    });
+
     describe('Unlocking an article', () => {
       let container;
 

diff --git a/extensions/amp-access-fewcents/0.1/test/validator-amp-access-fewcents.html b/extensions/amp-access-fewcents/0.1/test/validator-amp-access-fewcents.html
@@ -9,9 +9,10 @@
         "vendor": "fewcents",
         "noPingback": true,
         "fewcents": {
+          "environment": "development",
           "publisherLogoUrl" : "https://www.jagranimages.com/images/jagran-logo-2021.png",
           "contentSelector" : "amp-access-fewcents-dialog",
-          "primaryColor" : "",
+          "primaryColor" : "#FF6363",
           "accessKey" : "localhost",
           "category": "paywall",
           "articleIdentifier": "mockArticleIdentifier"
@@ -22,10 +23,6 @@
     <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
     <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
     <style amp-custom>
-      amp-access-fewcents {
-        color: red;
-      }
-
       .main-container {
         height: auto;
       }
@@ -109,6 +106,7 @@
       }
     </style>
     <script async custom-element="amp-access" src="https://cdn.ampproject.org/v0/amp-access-0.1.js"></script>
+    <script async custom-element="amp-access-fewcents" src="https://cdn.ampproject.org/v0/amp-access-fewcents-0.1.js"></script>
     <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
     <script async src="https://cdn.ampproject.org/v0.js"></script>
   </head>

diff --git a/extensions/amp-access-fewcents/0.1/test/validator-amp-access-fewcents.out b/extensions/amp-access-fewcents/0.1/test/validator-amp-access-fewcents.out
@@ -10,9 +10,10 @@ PASS
 |          "vendor": "fewcents",
 |          "noPingback": true,
 |          "fewcents": {
+|            "environment": "development",
 |            "publisherLogoUrl" : "https://www.jagranimages.com/images/jagran-logo-2021.png",
 |            "contentSelector" : "amp-access-fewcents-dialog",
-|            "primaryColor" : "",
+|            "primaryColor" : "#FF6363",
 |            "accessKey" : "localhost",
 |            "category": "paywall",
 |            "articleIdentifier": "mockArticleIdentifier"
@@ -23,10 +24,6 @@ PASS
 |      <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
 |      <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
 |      <style amp-custom>
-|        amp-access-fewcents {
-|          color: red;
-|        }
-|
 |        .main-container {
 |          height: auto;
 |        }
@@ -110,6 +107,7 @@ PASS
 |        }
 |      </style>
 |      <script async custom-element="amp-access" src="https://cdn.ampproject.org/v0/amp-access-0.1.js"></script>
+|      <script async custom-element="amp-access-fewcents" src="https://cdn.ampproject.org/v0/amp-access-fewcents-0.1.js"></script>
 |      <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
 |      <script async src="https://cdn.ampproject.org/v0.js"></script>
 |    </head>

diff --git a/extensions/amp-access-fewcents/amp-access-fewcents.md b/extensions/amp-access-fewcents/amp-access-fewcents.md
@@ -83,6 +83,16 @@ Configuration is similar to `amp-access`, but no authorization, pingback and log
   </script>
 ```
 
+### Keys summary:
+
+-   `vendor` : This is mandatory to pass and its value is "fewcents"
+-   `publisherLogoUrl` : Url of image of the publisher logo in the format of png.
+-   `contentSelector` : Id of div element where paywall will be rendered
+-   `primaryColor` : Background colour of the unlock button, else default colour will be used
+-   `accessKey` : This will be provided by fewcents to the publisher
+-   `categoty` : Represent catetory of paywall and will be provided by fewcents
+-   `articleIdentifier` : This lets fewcents to uniquely identify each article, and publisher should share this data with fewcents
+
 ## Analytics
 
 Given that `amp-access-laterpay` is based on `amp-access` it supports all the [analytics events](../amp-access/amp-access.md) sent by `amp-access`.

diff --git a/extensions/amp-access-fewcents/validator-amp-access-fewcents.protoascii b/extensions/amp-access-fewcents/validator-amp-access-fewcents.protoascii
@@ -0,0 +1,11 @@
+tags: {  # amp-access-fewcents
+  html_format: AMP
+  tag_name: "SCRIPT"
+  requires_extension: "amp-access"
+  extension_spec: {
+    name: "amp-access-fewcents"
+    version: "0.1"
+    requires_usage: NONE
+  }
+  attr_lists: "common-extension-attrs"
+}