Preview mode

src/model/client-config.js

@@ -14,6 +14,8 @@
  * limitations under the License.
  */
 
+import {PreviewManager} from '../runtime/preview-mode';
+
 /**
  * Client configuration options.
  *
@@ -40,6 +42,7 @@ export class ClientConfig {
     attributionParams,
     autoPromptConfig,
     paySwgVersion,
+    previewAvailable,
     uiPredicates,
     usePrefixedHostPath,
     useUpdatedOfferFlows,
@@ -51,6 +54,9 @@ export class ClientConfig {
     /** @const {string|undefined} */
     this.paySwgVersion = paySwgVersion;
 
+    /** @const {string|undefined} */
+    this.previewAvailable = previewAvailable;
+
     /** @const {boolean} */
     this.usePrefixedHostPath = usePrefixedHostPath || false;
 
@@ -65,6 +71,10 @@ export class ClientConfig {
 
     /** @const {./attribution-params.AttributionParams|undefined} */
     this.attributionParams = attributionParams;
+
+    if (PreviewManager.isPreviewEnabled()) {
+      PreviewManager.getPreviewManager().setClientConfig(this);
+    }
   }
 }
 

src/runtime/client-config-manager.js

@@ -18,6 +18,8 @@ import {AttributionParams} from '../model/attribution-params';
 import {AutoPromptConfig} from '../model/auto-prompt-config';
 import {ClientConfig, UiPredicates} from '../model/client-config';
 import {ClientTheme} from '../api/basic-subscriptions';
+import {PreviewManager} from './preview-mode';
+import {addQueryParam} from '../utils/url';
 import {serviceUrl} from './services';
 import {warn} from '../utils/log';
 
@@ -164,11 +166,15 @@ export class ClientConfigManager {
         } else {
           // If there was no article from the entitlement manager, we need
           // to fetch our own using the internal version.
-          const url = serviceUrl(
+          let url = serviceUrl(
             '/publication/' +
               encodeURIComponent(this.publicationId_) +
               '/clientconfiguration'
           );
+          if (PreviewManager.isPreviewEnabled()) {
+            url = addQueryParam(url, 'previewRequested', '1');
+          }
+
           return this.fetcher_.fetchCredentialedJson(url).then((json) => {
             if (json.errorMessages && json.errorMessages.length > 0) {
               for (const errorMessage of json.errorMessages) {

src/runtime/entitlements-manager.js

@@ -37,6 +37,7 @@ import {
 import {JwtHelper} from '../utils/jwt';
 import {MeterClientTypes} from '../api/metering';
 import {MeterToastApi} from './meter-toast-api';
+import {PreviewManager} from './preview-mode';
 import {Toast} from '../ui/toast';
 import {addQueryParam, getCanonicalUrl, parseQueryString} from '../utils/url';
 import {analyticsEventToEntitlementResult} from './event-type-mapping';
@@ -381,6 +382,9 @@ export class EntitlementsManager {
     let url =
       '/publication/' + encodeURIComponent(this.publicationId_) + this.action_;
     url = addDevModeParamsToUrl(this.win_.location, url);
+    if (PreviewManager.isPreviewEnabled()) {
+      url = addQueryParam(url, 'previewRequested', '1');
+    }
 
     // Promise that sets this.encodedParams_ when it resolves.
     const encodedParamsPromise = this.encodedParams_
@@ -426,6 +430,9 @@ export class EntitlementsManager {
    */
   getEntitlementsFlow_(params) {
     return this.fetchEntitlementsWithCaching_(params).then((entitlements) => {
+      if (PreviewManager.isPreviewEnabled()) {
+        PreviewManager.getPreviewManager().setEntitlements(entitlements);
+      }
       this.onEntitlementsFetched_(entitlements);
       return entitlements;
     });
@@ -840,6 +847,11 @@ export class EntitlementsManager {
 
         url = addDevModeParamsToUrl(this.win_.location, url);
 
+        // Preview mode request?
+        if (PreviewManager.isPreviewEnabled()) {
+          url = addQueryParam(url, 'previewRequested', 'true');
+        }
+
         // Add encryption param.
         if (params?.encryption) {
           url = addQueryParam(

src/runtime/pay-flow.js

@@ -30,6 +30,7 @@ import {ActivityIframeView} from '../ui/activity-iframe-view';
 import {AnalyticsEvent, EventParams} from '../proto/api_messages';
 import {Constants} from '../utils/constants';
 import {JwtHelper} from '../utils/jwt';
+import {PreviewManager} from './preview-mode';
 import {
   ProductType,
   SubscriptionFlows,
@@ -98,6 +99,9 @@ export class PayStartFlow {
     /** @private @const {!./deps.DepsDef} */
     this.deps_ = deps;
 
+    /** @private @const {!Window} */
+    this.win_ = deps.win();
+
     /** @private @const {!./pay-client.PayClient} */
     this.payClient_ = deps.payClient();
 
@@ -131,7 +135,18 @@ export class PayStartFlow {
     // Get the paySwgVersion for buyflow.
     const promise = this.clientConfigManager_.getClientConfig();
     return promise.then((clientConfig) => {
-      this.start_(clientConfig.paySwgVersion);
+      if (
+        PreviewManager.isPreviewEnabled() /*&& clientConfig.previewAvailable*/
+      ) {
+        PreviewManager.getPreviewManager().showPreviewResult(
+          clientConfig,
+          this.subscriptionRequest_,
+          this.productType_
+        );
+        return Promise.resolve();
+      } else {
+        this.start_(clientConfig.paySwgVersion);
+      }
     });
   }
 

src/runtime/preview-frame.js

@@ -0,0 +1,118 @@
+/**
+ * Copyright 2022 The Subscribe with Google Authors. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS-IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export const PREVIEW_FRAME_JS = `
+  const SENTINEL = "SWGPREV"
+  function clickHandler(event) {
+    if (!event.target.id) {
+      return;
+    }
+
+    let message = {
+      sentinel: SENTINEL,
+      type: event.type,
+      target: event.target.id,
+    };
+    window.parent.postMessage(message, '*');
+  }
+  window.addEventListener('click',clickHandler);
+`;
+
+export const PREVIEW_FRAME_STYLE = `
+body {
+  padding: 5px 0 5px;
+  font-family: sans-serif;
+  line-height: 1.3;
+  max-height: 100vh;
+  font-size: 14px;
+}
+.menu {margin: 5px 5px 0 5px }
+.header { text-align: center; font-weight: bold; padding: 0 5px 0 5px; color: #444  }
+.clickable { cursor: pointer; }
+.menuItem {     
+  padding: 3px 8px 2px 8px;
+  color: #444;
+  margin: 0 3px 0 3px;
+  background: #fff;
+  border: none;
+  border-bottom: 2px transparent;
+
+}
+.menuItem:hover {
+  background: #eee;
+  border-bottom: 2px solid #eee;
+}
+.active, .active:hover {     
+  color: #000;
+  border-bottom: 2px solid blue;
+}
+.prevMenu li { margin: 2px 0 2px 0}
+.hidden { display: none }
+.expand #tidy, .show { display: block }
+#dataPane { border-top: 1px solid #ccc; overflow: scroll;  position: fixed; top: 53px; bottom: 0; 
+width: 100%;  }
+#dataPane > div { padding: 5px 0 0 5px }
+#tidy {     
+  position: fixed;
+  top: 25px;
+  right: 3px;
+  font-size: 36px;
+  height: 25px;
+  display: none;
+ }
+ #close { float: right; padding-right 5px}
+.placeholder { margin: 15px 0 15px; text-align: center; font-weight: bold;}
+pre { margin: 0.5em 0; font-size: 12px };
+
+`;
+
+export const PREVIEW_FRAME_HTML = `
+  <div class="header">
+    Reader Revenue Dev Tools
+    <span id="close" class="clickable">&#x2715</span>
+  </div>
+  <div class=menu>
+    <button class="menuItem clickable" id="prev">Previews</button>
+    <button class="menuItem clickable" id="conf">Config</button>
+    <button class="menuItem clickable" id="ents">Entitlements</button>
+  </div>
+  <div id="dataPane">
+    <div class="hidden" id="confData">
+      <div>On page config:</div>
+      <pre id="pageConfig">
+
+      </pre>
+      <div>Config from server:</div>
+      <pre id="clientConfig"> Loading ... </pre>
+    </div>
+    <div class="hidden" id="entsData">
+      <div>Entitlement response from server:</div>
+      <pre id="entitlementDetail">Fetching entitlments ...</pre>
+    </div>
+    <div class="hidden" id="prevData">
+      <div>Available Previews</div>
+      <ol class="prevMenu"> 
+        <li><button id="subscription">Show Paywall</button></li>
+        <li><button id="contribution">Show Contributions</button></li>
+      </ol>
+      <div id="previewResult" class="hidden">
+        <div>Requested Transaction</div>
+        <pre id="previewResultData"></pre>
+      </div>
+    </div>
+    <div id="tidy" class="clickable">&#708;</div>
+  </div>
+`;