@sesamy/sesamy-js 1.3.0 → 1.3.1

package/src/controllers/paywall.ts

@@ -0,0 +1,14 @@
+import { triggerEvent } from '../events/ready';
+import { accessArticle as accessArticleService } from '../services/sesamy';
+import { Events } from '../types/Events';
+
+export async function accessArticle(articleId: string) {
+  // Call the API to access the article
+  const response = await accessArticleService({ articleId });
+
+  if (response.status !== 'ok') {
+    triggerEvent(Events.SOFT_PAYWALL, {});
+  }
+
+  return response;
+}

package/src/entitlementsStyle.css

@@ -0,0 +1,147 @@
+.container {
+  background-color: var(--background, transparent);
+  font-family: var(--font-family, 'Helvetica');
+}
+ul {
+  list-style-type: none;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--items-gap, 16px);
+  margin-top: 0;
+  padding: 0;
+}
+ul > * {
+  flex-grow: 1;
+  flex-shrink: 1;
+  flex-basis: var(--item-width, 300px);
+}
+button {
+  appearance: none;
+  display: inline-block;
+  text-decoration: none;
+  text-align: left;
+  background: none;
+  border: none;
+  width: 100%;
+  display: flex;
+  align-items: stretch;
+  text-decoration: none;
+  cursor: pointer;
+}
+button::-moz-focus-inner {
+  border: 0;
+  padding: 0;
+}
+button > * {
+  flex-shrink: 0;
+}
+.image-container {
+  padding-bottom: 14px;
+}
+img {
+  width: var(--image-size, 95px);
+  height: var(--image-size, 95px);
+  border-radius: var(--image-border-radius, 12px);
+  object-fit: cover;
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+.details {
+  margin-left: var(--details-margin-left, 8px);
+  border-bottom-color: var(--divider-color, #70707023);
+  border-bottom-width: var(--divider-width, 1px);
+  padding-bottom: 14px;
+  border-bottom-style: solid;
+  display: flex;
+  flex-direction: column;
+  justify-content: var(--details-justify-content, space-between);
+  flex: 1;
+}
+p {
+  font-weight: normal;
+  margin: 0;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+}
+.title {
+  color: var(--title-color, #131313);
+  font-size: 15px;
+  -webkit-line-clamp: 1;
+}
+.summary {
+  color: var(--summary-color, #22222260);
+  font-size: 12px;
+  -webkit-line-clamp: 2;
+}
+span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+span.type {
+  color: var(--type-color, #22222270);
+  text-transform: uppercase;
+  font-size: var(--type-font-size, 11px);
+  font-weight: medium;
+  margin-top: 4px;
+  font-family: var(--type-font-family, var(--font-family, 'Helvetica'));
+}
+span.date {
+  color: var(--date-color, #22222260);
+  font-size: var(--date-font-size, 12px);
+  font-weight: normal;
+  font-family: var(--date-font-family, var(--font-family, 'Helvetica'));
+}
+.modal {
+  display: none;
+  position: fixed;
+  z-index: var(--modal-zindex, 100);
+  padding-top: 20px;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+}
+.modal-blackout {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.4);
+}
+
+.modal-container {
+  position: relative;
+  background-color: white;
+  margin: auto;
+  padding: 0;
+  max-width: 500px;
+  -webkit-animation-name: animatetop;
+  -webkit-animation-duration: 0.4s;
+  animation-name: animatetop;
+  animation-duration: 0.4s;
+}
+.close-container {
+  position: absolute;
+  right: 16px;
+  top: 16px;
+  cursor: pointer;
+  z-index: 900;
+  width: auto;
+}
+@media only screen and (max-width: 768px) {
+  .modal {
+    padding: 10px 0;
+  }
+  .modal-container {
+    max-width: 100%;
+  }
+}

package/src/events/ready.ts

@@ -0,0 +1,12 @@
+import { Events } from '../types/Events';
+
+// TODO: Separate the event into a function per event so they can be typed
+export function triggerEvent(eventType: Events, payload: any) {
+  const customEvent = new CustomEvent(eventType, {
+    detail: payload,
+    bubbles: true,
+    composed: true,
+  });
+
+  dispatchEvent(customEvent);
+}

package/src/index.ts

@@ -0,0 +1,36 @@
+import { triggerEvent } from './events/ready';
+import { registerAPI } from './javascript-api';
+import { Config } from './types/Config';
+import { init as initAuth } from './services/auth';
+import { initAnalytics } from './services/analytics';
+import { Events } from './types/Events';
+
+export async function init(config: Config) {
+  initAnalytics({
+    clientId: config.clientId,
+    // The default client id can be overridden by the config
+    ...config.analytics,
+  });
+
+  // Auth needs to be initated after the analytics so that the auth events can be tracked
+  await initAuth(config);
+
+  const api = registerAPI(config.namespace);
+
+  triggerEvent(Events.READY, {});
+
+  return api;
+}
+
+// This is for checking if the script is being loaded in the browser
+if (typeof document !== 'undefined') {
+  const configElement = document.getElementById('sesamy-js');
+  if (configElement?.textContent) {
+    try {
+      const config = JSON.parse(configElement.textContent);
+      init(config);
+    } catch (err) {
+      console.error('Failed to parse config', err);
+    }
+  }
+}

package/src/javascript-api.ts

@@ -0,0 +1,84 @@
+import { loginWithRedirect, getUser, isAuthenticated, logout } from './services/auth';
+import {
+  getEntitlement,
+  getEntitlements,
+  getContract,
+  getContracts,
+  getBill,
+  getBills,
+  getTags,
+  setTag,
+  pushTag,
+} from './services/sesamy';
+import { accessArticle } from './controllers/paywall';
+import { version } from '../package.json';
+
+function getVersion() {
+  return version;
+}
+
+export interface SesamyApi {
+  articles: {
+    access: typeof accessArticle;
+  };
+  auth: {
+    getUser: typeof getUser;
+    isAuthenticated: typeof isAuthenticated;
+    loginWithRedirect: typeof loginWithRedirect;
+    logout: typeof logout;
+  };
+  tags: {
+    list: typeof getTags;
+    set: typeof setTag;
+    push: typeof pushTag;
+  };
+  getEntitlement: typeof getEntitlement;
+  getEntitlements: typeof getEntitlements;
+  getContract: typeof getContract;
+  getContracts: typeof getContracts;
+  getBill: typeof getBill;
+  getBills: typeof getBills;
+  getVersion: typeof getVersion;
+}
+
+interface SesamyWindow {
+  sesamy: SesamyApi;
+}
+
+// Extend the global Window type with your SesamyWindow interface
+declare global {
+  interface Window extends SesamyWindow {}
+}
+
+export function registerAPI(namespace: string | null = 'sesamy') {
+  const api: SesamyApi = {
+    auth: {
+      getUser,
+      isAuthenticated,
+      loginWithRedirect,
+      logout,
+    },
+    articles: {
+      access: accessArticle,
+    },
+    tags: {
+      list: getTags,
+      set: setTag,
+      push: pushTag,
+    },
+    getEntitlement,
+    getEntitlements,
+    getContract,
+    getContracts,
+    getBill,
+    getBills,
+    getVersion,
+  };
+
+  if (namespace !== null) {
+    // This makes it possible to use a different namespace
+    (window as any)[namespace] = api;
+  }
+
+  return api;
+}

package/src/services/analytics/element-tracker.ts

@@ -0,0 +1,117 @@
+/// <reference path="./types/analytics-activity-utils.d.ts" />
+import { onUserActivity } from '@analytics/activity-utils';
+
+// IDLE_TIME is in ms
+const timeout = 5000;
+
+export interface ElementTrackerOptions {
+  element: HTMLElement;
+  viewCallback?: () => void;
+  activeDurationCallback?: (duration: number) => void;
+  idleDurationCallback?: (duration: number) => void;
+}
+
+export default class ElementTracker {
+  element: HTMLElement;
+
+  isInViewport = false;
+
+  isAwake = false;
+
+  isFlushing?: boolean;
+
+  observer: IntersectionObserver;
+
+  lastEventAt = Date.now();
+
+  registeredView = false;
+
+  viewCallback?: () => void;
+
+  activeDurationCallback?: (duration: number, flushing?: boolean) => void;
+
+  idleDurationCallback?: (duration: number, flushing?: boolean) => void;
+
+  constructor(options: ElementTrackerOptions) {
+    this.element = options.element;
+    // We NEED to have callbacks here rather than using events as events will be lost when the browser is unloading
+    this.viewCallback = options.viewCallback;
+    this.activeDurationCallback = options.activeDurationCallback;
+    this.idleDurationCallback = options.idleDurationCallback;
+
+    // Setup the interaction observer
+    this.observer = new IntersectionObserver(
+      entries => {
+        // I guess there will only be one entry? Verify?
+        entries.forEach(entry => {
+          this.handleInViewPort(entry.isIntersecting);
+        });
+      },
+      {
+        threshold: 0,
+      },
+    );
+    this.observer.observe(this.element);
+
+    // Setup the active/idle
+    onUserActivity({
+      onIdle: (elapsedTime: number) => this.handleAwake(false, elapsedTime),
+      onWakeUp: (elapsedTime: number) => this.handleAwake(true, elapsedTime),
+      timeout,
+    });
+  }
+
+  /**
+   * Flush the awake timer in case the page is unloading
+   */
+  flush() {
+    this.isFlushing = true;
+    this.handleAwake(!this.isAwake, Math.round((Date.now() - this.lastEventAt) / 1000));
+  }
+
+  handleInViewPort(isInViewport: boolean) {
+    if (isInViewport) {
+      // A view envent only occurs if the element is active.
+      this.isAwake = true;
+      this.trackInViewport();
+    } else {
+      // An article outside the viewport is not active
+      this.handleAwake(false, Math.round((Date.now() - this.lastEventAt) / 1000));
+    }
+
+    this.isInViewport = isInViewport;
+  }
+
+  handleAwake(isAwake: boolean, elapsedTime: number) {
+    // Store the current awake state
+    this.isAwake = isAwake;
+    this.lastEventAt = isAwake ? Date.now() - elapsedTime * timeout : Date.now();
+
+    if (!this.isInViewport) {
+      return;
+    }
+    this.trackAwake(isAwake, elapsedTime);
+  }
+
+  trackAwake(awake: boolean, elapsedTime: number) {
+    if (!awake && this.activeDurationCallback) {
+      this.activeDurationCallback(elapsedTime, this.isFlushing);
+    }
+
+    if (awake && this.idleDurationCallback) {
+      this.idleDurationCallback(elapsedTime, this.isFlushing);
+    }
+  }
+
+  trackInViewport() {
+    if (this.registeredView) {
+      return;
+    }
+
+    this.registeredView = true;
+
+    if (this.viewCallback) {
+      this.viewCallback();
+    }
+  }
+}

package/src/services/analytics/index.ts

@@ -0,0 +1,234 @@
+import Analytics, { AnalyticsInstance } from 'analytics';
+import saturated from 'saturated';
+import { name, version } from '../../../package.json';
+import { TrackEvent } from './types/track-event';
+import { AnalyticsConfig } from '../../types/Config';
+import { routeChangeListener } from './listeners';
+import ElementTracker from './element-tracker';
+import { ANALYTICS_BASE_URL } from '../../constants';
+import { getSessionId } from './session-id';
+import { Events } from '../../types/Events';
+
+type Analytic = {
+  anonymousId: string;
+  userId?: string;
+  properties: { [key: string]: string | number };
+  event?: string;
+  type: string;
+};
+
+let flushing = false;
+
+let _clientId: string;
+let _enabled: boolean;
+let _endpoint: string;
+
+export interface AnalyticsEventWithType extends Analytic {
+  type: string;
+}
+
+export function initAnalytics({ clientId, enabled = true, endpoint = ANALYTICS_BASE_URL }: AnalyticsConfig) {
+  _clientId = clientId;
+  _enabled = enabled;
+  _endpoint = endpoint;
+
+  if (!_enabled) {
+    return;
+  }
+
+  // Register route change listener
+  routeChangeListener();
+
+  // Register body events
+  const bodyTracker = new ElementTracker({
+    element: document.body,
+    viewCallback: () => {
+      analytics.page();
+    },
+    activeDurationCallback: (duration: number, flushing?: boolean) => {
+      analytics.track('activeDuration', {
+        duration,
+        flushing,
+      });
+    },
+    idleDurationCallback: (duration: number, flushing?: boolean) => {
+      analytics.track('idleDuration', {
+        duration,
+        flushing,
+      });
+    },
+  });
+
+  addUnloadPageListener(document.body, () => {
+    bodyTracker.flush();
+  });
+
+  window.addEventListener(Events.AUTHENTICATED, async (event: Event) => {
+    const customEvent = event as CustomEvent;
+    await analytics.identify(customEvent.detail.sub);
+  });
+
+  window.addEventListener(Events.LOGOUT, async () => {
+    await analytics.track('logout', {});
+    queue.flush();
+    await analytics.reset();
+  });
+}
+
+function createMessage(payload: AnalyticsEventWithType[]): string {
+  return JSON.stringify(
+    payload.map(item => ({
+      ...item,
+      clientId: _clientId,
+      requestId: Math.random().toString(36).slice(2, 9),
+      sessionId: getSessionId(),
+      timestamp: new Date().toISOString(),
+      version,
+      event: item.event,
+      context: {
+        page: {
+          url: window.location.hostname,
+          path: window.location.pathname,
+          title: document.title,
+          search: window.location.search,
+          referrer: document.referrer,
+        },
+        locale: navigator.language,
+        library: name,
+        userAgent: navigator.userAgent,
+        clientId: _clientId,
+      },
+    })),
+  );
+}
+
+const queue = saturated(
+  async arr => {
+    if (arr.length > 0) {
+      const payload = createMessage(arr);
+
+      if (flushing) {
+        navigator.sendBeacon(_endpoint, payload);
+      } else {
+        const response = await fetch(_endpoint, {
+          method: 'POST',
+          body: payload,
+          headers: {
+            'Content-Type': 'text/plain',
+          },
+        });
+
+        if (!response.ok) {
+          // TODO: Retry, maybe store data in local storage
+        }
+      }
+    }
+  },
+  {
+    max: 10, // limit
+    interval: 3000, // 3s
+  },
+);
+
+function send(payload: AnalyticsEventWithType) {
+  if (!payload.anonymousId) {
+    // When resetting the analytics, the anonymousId is set to null. Skip sending these events
+  } else if (payload.properties?.flushing) {
+    const payloadWithoutFlushing = { ...payload };
+    delete payloadWithoutFlushing.properties.flushing;
+
+    navigator.sendBeacon(_endpoint, createMessage([payloadWithoutFlushing]));
+  } else {
+    queue.push(payload);
+  }
+}
+
+export const analytics: AnalyticsInstance = Analytics({
+  app: name,
+  version,
+  plugins: [
+    {
+      name: 'custom-analytics-plugin',
+      page: ({ payload }: { payload: Analytic }) => {
+        const { properties, anonymousId, userId, event } = payload;
+        const analyticsEvent = {
+          anonymousId,
+          userId,
+          properties,
+          event,
+          type: 'page',
+        };
+        // Send data to custom collection endpoint
+        send(analyticsEvent);
+      },
+      track: ({ payload }: { payload: Analytic }) => {
+        const { properties, anonymousId, userId, event } = payload;
+        const analyticsEvent: AnalyticsEventWithType = {
+          anonymousId,
+          userId,
+          properties,
+          event,
+          type: 'track',
+        };
+        send(analyticsEvent);
+      },
+      identify: ({ payload }: { payload: Analytic }) => {
+        const { properties, anonymousId, userId } = payload;
+        const analyticsEvent: AnalyticsEventWithType = {
+          anonymousId,
+          userId,
+          properties,
+          type: 'identify',
+        };
+        send(analyticsEvent);
+      },
+    },
+  ],
+});
+
+export function getAnonymousUserId() {
+  return analytics.user().anonymousId;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function track(eventName: string, payload: any): void {
+  analytics.track(eventName, payload);
+}
+
+export function trackEvent(event: TrackEvent): void {
+  analytics.track(event.name, event);
+}
+
+export function flushQueue() {
+  flushing = true;
+  return queue.flush();
+}
+
+export function enableInteractions(callback?: () => void) {
+  analytics.plugins.enable('custom-analytics-plugin', callback);
+}
+
+export function disableInteractions(callback?: () => void) {
+  analytics.plugins.disable('custom-analytics-plugin', callback || (() => true));
+}
+
+export type Action = () => void;
+const unloadPageListeners = new Map<Element, Action>();
+
+export function addUnloadPageListener(element: Element, action: Action) {
+  unloadPageListeners.set(element, action);
+}
+
+export function removeUnloadPageListener(element: Element) {
+  unloadPageListeners.delete(element);
+}
+
+window.addEventListener('beforeunload', () => {
+  // Flush the queues for all the registered element trackers
+  unloadPageListeners.forEach((action, element) => {
+    action.bind(element)();
+  });
+
+  // Flush the outbound queue
+  flushQueue();
+});

package/src/services/analytics/listeners/index.ts

@@ -0,0 +1,2 @@
+export * from './scroll.js';
+export * from './route.js';

package/src/services/analytics/listeners/route.ts

@@ -0,0 +1,9 @@
+/// <reference path="../types/analytics-router-utils.d.ts" />
+import onRouteChange from '@analytics/router-utils';
+import { analytics } from '../index.js';
+
+export function routeChangeListener() {
+  onRouteChange(() => {
+    analytics.page();
+  });
+}