@sesamy/sesamy-js 1.3.0 → 1.3.1

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

@@ -0,0 +1,62 @@
+/// <reference path="../types/analytics-scroll-utils.d.ts" />
+import { onScrollChange } from '@analytics/scroll-utils';
+import { TrackEvents } from '../types/track-event';
+import { trackEvent } from '..';
+
+export type ScrollEvent = {
+  direction: string;
+  range: number[];
+  scrollMax: number;
+  scrollMin: number;
+  trigger: number;
+};
+
+export function addScrollListener(itemSrc: string, publisherContentId: string) {
+  onScrollChange({
+    25: (scrollData: ScrollEvent) => {
+      trackEvent({
+        name: TrackEvents.Scroll,
+        scrollData: scrollData.direction,
+        percentage: scrollData.trigger,
+        itemSrc,
+        publisherContentId,
+      });
+    },
+    50: (scrollData: ScrollEvent) => {
+      trackEvent({
+        name: TrackEvents.Scroll,
+        scrollData: scrollData.direction,
+        percentage: scrollData.trigger,
+        itemSrc,
+        publisherContentId,
+      });
+    },
+    75: (scrollData: ScrollEvent) => {
+      trackEvent({
+        name: TrackEvents.Scroll,
+        scrollData: scrollData.direction,
+        percentage: scrollData.trigger,
+        itemSrc,
+        publisherContentId,
+      });
+    },
+    90: (scrollData: ScrollEvent) => {
+      trackEvent({
+        name: TrackEvents.Scroll,
+        scrollData: scrollData.direction,
+        percentage: scrollData.trigger,
+        itemSrc,
+        publisherContentId,
+      });
+    },
+    100: (scrollData: ScrollEvent) => {
+      trackEvent({
+        name: TrackEvents.Scroll,
+        scrollData: scrollData.direction,
+        percentage: scrollData.trigger,
+        itemSrc,
+        publisherContentId,
+      });
+    },
+  });
+}

package/src/services/analytics/session-id.ts

@@ -0,0 +1,11 @@
+const SESSION_ID_KEY = 'sesamy_session_id';
+
+export function getSessionId() {
+  let sessionId = sessionStorage.getItem(SESSION_ID_KEY);
+
+  if (!sessionId) {
+    sessionId = Math.random().toString(36).slice(2, 9);
+    sessionStorage.setItem(SESSION_ID_KEY, sessionId);
+  }
+  return sessionId;
+}

package/src/services/analytics/types/analytics-activity-utils.d.ts

@@ -0,0 +1,54 @@
+interface OnDomActivityOptions {
+  throttle?: number;
+}
+
+interface AnalyticsEvent {}
+
+interface OnUserActivityOptions {
+  onIdle?: (elapsedTime: number, event?: AnalyticsEvent) => void;
+  onWakeUp?: (elapsedTime: number, event?: AnalyticsEvent) => void;
+  onHeartbeat?: (elapsedTime: number, event?: AnalyticsEvent) => void;
+  timeout?: number;
+  throttle?: number;
+}
+
+interface UserActivityStatus {
+  disable: () => () => void;
+  getStatus: () => {
+    isIdle: boolean;
+    isDisabled: boolean;
+    active: number;
+    idle: number;
+  };
+}
+
+declare module '@analytics/activity-utils' {
+  /**
+   * Function to handle user inactivity.
+   * @param onIdle Function to be called when the user is idle.
+   * @param opts Optional configuration object.
+   * @returns An object with methods to control and get the status of the listener.
+   */
+  function onIdle(
+    onIdle: (elapsedTime: number, event?: AnalyticsEvent) => void,
+    opts?: OnUserActivityOptions,
+  ): UserActivityStatus;
+
+  /**
+   * Function to handle user wake up from idle.
+   * @param onWakeUp Function to be called when the user wakes up from idle.
+   * @param opts Optional configuration object.
+   * @returns An object with methods to control and get the status of the listener.
+   */
+  function onWakeUp(
+    onWakeUp: (elapsedTime: number, event?: AnalyticsEvent) => void,
+    opts?: OnUserActivityOptions,
+  ): UserActivityStatus;
+
+  /**
+   * Function to handle user activity.
+   * @param options Configuration object for user activity.
+   * @returns An object with methods to control and get the status of the listener.
+   */
+  function onUserActivity(options: OnUserActivityOptions): UserActivityStatus;
+}

package/src/services/analytics/types/analytics-router-utils.d.ts

@@ -0,0 +1,7 @@
+declare module '@analytics/router-utils' {
+  interface definitionInterface {
+    (message: string): void;
+  }
+  function onRouteChange(callback: definitionInterface): void;
+  export default onRouteChange;
+}

package/src/services/analytics/types/analytics-scroll-utils.d.ts

@@ -0,0 +1,4 @@
+declare module '@analytics/scroll-utils' {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  function onScrollChange(t: any): any;
+}

package/src/services/analytics/types/track-event.ts

@@ -0,0 +1,70 @@
+export enum TrackEvents {
+  ViewArticle = 'viewArticle',
+  ActiveDuration = 'activeDuration',
+  IdleDuration = 'idleDuration',
+  Scroll = 'scroll',
+  ChangeView = 'changeView',
+  AddToCart = 'addToCart',
+  ViewArticleListing = 'viewArticleListing',
+}
+
+interface ViewArticleListingProps {
+  name: TrackEvents.ViewArticleListing;
+  publisherContentId?: string;
+  itemSrc: string;
+}
+
+interface AddToCartEventProps {
+  name: TrackEvents.AddToCart;
+  publisherContentId?: string;
+  itemSrc: string;
+}
+
+interface ChangeViewEventProps {
+  name: TrackEvents.ChangeView;
+  view: string;
+}
+
+interface ScrollEventProps {
+  name: TrackEvents.Scroll;
+  publisherContentId?: string;
+  itemSrc: string;
+  scrollData: string;
+  percentage: number;
+}
+
+interface IdleDurationEventProps {
+  name: TrackEvents.IdleDuration;
+  duration: number;
+  publisherContentId?: string;
+  itemSrc: string;
+}
+
+interface ActiveDurationEventProps {
+  name: TrackEvents.ActiveDuration;
+  duration: number;
+  publisherContentId?: string;
+  itemSrc: string;
+}
+
+interface ViewArticleEventProps {
+  name: TrackEvents.ViewArticle;
+  itemSrc: string;
+  publisherContentId?: string;
+  state: 'public' | 'locked' | 'unlocked' | 'logged-in';
+}
+
+interface Flushing {
+  flushing?: boolean;
+}
+
+export type TrackEvent = Flushing &
+  (
+    | ViewArticleEventProps
+    | ActiveDurationEventProps
+    | IdleDurationEventProps
+    | ScrollEventProps
+    | ChangeViewEventProps
+    | AddToCartEventProps
+    | ViewArticleListingProps
+  );

package/src/services/auth/index.ts

@@ -0,0 +1,74 @@
+import { Auth0Client, createAuth0Client } from '@auth0/auth0-spa-js';
+import { BASE_URL_DOMAIN } from '../../constants';
+import { triggerEvent } from '../../events/ready';
+import { Events } from '../../types/Events';
+
+let auth0Client: Auth0Client;
+
+export async function init({ clientId }: { clientId: string }) {
+  auth0Client = await createAuth0Client({
+    domain: `token.${BASE_URL_DOMAIN}`,
+    clientId,
+    cacheLocation: 'localstorage',
+  });
+
+  if (window.location.search.includes('code=')) {
+    try {
+      await auth0Client.handleRedirectCallback();
+      const user = await auth0Client.getUser();
+      triggerEvent(Events.AUTHENTICATED, user);
+      window.history.replaceState({}, document.title, '/');
+      const accessToken = await auth0Client.getTokenSilently();
+      localStorage.setItem('accessToken', accessToken);
+    } catch (err) {
+      // Fail silently
+    }
+  }
+}
+
+export async function isAuthenticated() {
+  if (!auth0Client) {
+    throw new Error('Auth0 client not initialized');
+  }
+  return auth0Client.isAuthenticated();
+}
+
+export async function getUser() {
+  if (!auth0Client) {
+    throw new Error('Auth0 client not initialized');
+  }
+  return auth0Client.getUser();
+}
+
+export function loginWithRedirect() {
+  if (!auth0Client) {
+    throw new Error('Auth0 client not initialized');
+  }
+
+  return auth0Client.loginWithRedirect({
+    authorizationParams: {
+      redirect_uri: window.location.href,
+    },
+  });
+}
+
+export async function getTokenSilently() {
+  if (!auth0Client) {
+    throw new Error('Auth0 client not initialized');
+  }
+  return auth0Client.getTokenSilently();
+}
+
+export async function logout() {
+  if (!auth0Client) {
+    throw new Error('Auth0 client not initialized');
+  }
+
+  triggerEvent(Events.LOGOUT, {});
+
+  return auth0Client.logout({
+    logoutParams: {
+      returnTo: window.location.href,
+    },
+  });
+}

package/src/services/sesamy/index.ts

@@ -0,0 +1,160 @@
+import { dedupe, retry } from "wretch/middlewares";
+import wretch, {
+  ConfiguredMiddleware,
+  WretchOptions,
+  WretchResponse,
+} from "wretch";
+import { BASE_URL_DOMAIN } from "../../constants";
+import { getTokenSilently } from "../auth";
+import { Entitlement } from "../../types/Entitlement";
+import { Contract } from "../../types/Contracts";
+import { Bill } from "../../types/Bills";
+import { Tag, TagValue } from "../../types/Tag";
+
+const auth0Middleware: ConfiguredMiddleware =
+  next =>
+  (url: string, options: WretchOptions): Promise<WretchResponse> => {
+    return new Promise(async (resolve, reject) => {
+      try {
+        const accessToken = await getTokenSilently();
+
+        const modifiedOptions = {
+          ...options,
+          headers: {
+            ...options.headers,
+            Authorization: `Bearer ${accessToken}`,
+          },
+        };
+
+        resolve(next(url, modifiedOptions));
+      } catch (error) {
+        console.error('Error fetching access token:', error);
+        reject(error);
+      }
+    });
+  };
+
+const basicAuthMiddleware: ConfiguredMiddleware =
+  next =>
+  (url: string, options: WretchOptions): Promise<WretchResponse> => {
+    const anonymousId = localStorage.getItem('__anon_id');
+    const accessToken = btoa(`${anonymousId}:`);
+
+    const modifiedOptions = {
+      ...options,
+      headers: {
+        ...options.headers,
+        Authorization: `Basic ${accessToken}`,
+      },
+    };
+
+    return next(url, modifiedOptions);
+  };
+
+const api = wretch(`https://api2.${BASE_URL_DOMAIN}`)
+  .headers({ 'Content-Type': 'application/json' })
+  .middlewares([
+    auth0Middleware,
+    dedupe(),
+    retry({
+      delayTimer: 1000,
+      delayRamp: (delay, nbOfAttempts) => delay * nbOfAttempts,
+      maxAttempts: 3,
+      until: response => response?.ok || false,
+      retryOnNetworkError: false,
+    }),
+  ]);
+
+const apiWithBasicAuth = wretch(`https://api2.${BASE_URL_DOMAIN}`)
+  .headers({ 'Content-Type': 'application/json' })
+  .middlewares([
+    basicAuthMiddleware,
+    dedupe(),
+    retry({
+      delayTimer: 1000,
+      delayRamp: (delay, nbOfAttempts) => delay * nbOfAttempts,
+      maxAttempts: 3,
+      until: response => response?.ok || false,
+      retryOnNetworkError: false,
+    }),
+  ]);
+
+export async function getEntitlements(): Promise<Entitlement[]> {
+  return api.get('/entitlements').json();
+}
+
+export async function getEntitlement(entitlementId: string) {
+  const entitlements: Entitlement[] = await api.get('/entitlements').json();
+
+  return entitlements?.find(entitlement => entitlement.id === entitlementId);
+}
+
+export async function getContracts(): Promise<Contract[]> {
+  return api.get('/contracts').json();
+}
+
+export async function getContract(contractId: string) {
+  const contracts: Contract[] = await api.get('/contracts').json();
+
+  return contracts?.find(contract => contract.id === contractId);
+}
+
+export async function getBills(): Promise<Bill[]> {
+  return api.get('/bills').json();
+}
+
+export async function getBill(billId: string) {
+  const bills: Bill[] = await api.get('/bills').json();
+
+  return bills?.find(bill => bill.id === billId);
+}
+
+export async function getTags() {
+  const tags: { [id: string]: TagValue }[] = await apiWithBasicAuth
+    .get("/tags")
+    .json();
+
+  return tags;
+}
+
+export async function setTag(id: string, value: string | number | (string | number)[]) {
+  const tags: { [id: string]: Tag }[] = await apiWithBasicAuth
+    .url(`/tags/${id}`)
+    .put({
+      value,
+    })
+    .json();
+
+  return tags;
+}
+
+export async function pushTag(id: string, value: string | number) {
+  const tags: { [id: string]: TagValue }[] = await apiWithBasicAuth
+    .url(`/tags/${id}/push`)
+    .put({
+      value,
+    })
+    .json();
+
+  return tags;
+}
+
+// Deprecated. Use tags instead
+export interface AccessArticleParams {
+  articleId: string;
+}
+
+export async function accessArticle(params: AccessArticleParams): Promise<{ status: string }> {
+  const userId = localStorage.getItem('__anon_id');
+  if (!userId) {
+    throw new Error('User id not found');
+  }
+
+  return apiWithBasicAuth
+    .url('/articles/access')
+    .post({
+      articleId: params.articleId,
+      userId,
+    })
+    .json();
+}

package/src/state.ts

@@ -0,0 +1,3 @@
+{
+  // Soon to come more stuff here..
+}

package/src/style.css

@@ -0,0 +1,99 @@
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+sesamy-app {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.vanilla:hover {
+  filter: drop-shadow(0 0 2em #3178c6aa);
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+.hidden {
+  display: none;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}

package/src/types/Bills.ts

@@ -0,0 +1,12 @@
+export type Bill = {
+  id: string;
+  items: [
+    {
+      sku: string;
+      title: string;
+      purchaseOption: string;
+    },
+  ];
+  status: string;
+  createdAt: string;
+};

package/src/types/Config.ts

@@ -0,0 +1,11 @@
+export interface Config {
+  clientId: string;
+  namespace?: string;
+  analytics?: Partial<AnalyticsConfig>;
+}
+
+export interface AnalyticsConfig {
+  clientId: string;
+  enabled?: boolean;
+  endpoint?: string;
+}

package/src/types/Contracts.ts

@@ -0,0 +1,12 @@
+export type Contract = {
+  id: string;
+  items: [
+    {
+      sku: string;
+      title: string;
+      purchaseOption: string;
+    },
+  ];
+  status: string;
+  createdAt: string;
+};

package/src/types/Entitlement.ts

@@ -0,0 +1,9 @@
+export type Entitlement = {
+  id: string;
+  sku: string;
+  cover: string;
+  title: string;
+  description: string;
+  createdAt: string;
+  updatedAt: string;
+};

package/src/types/Events.ts

@@ -0,0 +1,6 @@
+export enum Events {
+  READY = 'sesamyReady',
+  AUTHENTICATED = 'sesamyAuthenticated',
+  LOGOUT = 'sesamyLogout',
+  SOFT_PAYWALL = 'sesamySoftPaywall',
+}

package/src/types/Tag.ts

@@ -0,0 +1,16 @@
+export type TagValue = string | number | (string | number)[];
+
+export type Tag = {
+  id: string;
+  value: TagValue;
+  policies?: {
+    // ttl in seconds
+    ttl?: number;
+    maxItems?: number;
+    unique?: boolean;
+    overflow?: "block" | "fifo";
+    ipSessionSharing?: boolean;
+  };
+  updatedAt: string;
+  createdAt: string;
+};

package/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "types": ["vite/client"]
+  },
+  "include": ["src"]
+}

package/vite.config.ts

@@ -0,0 +1,43 @@
+/// <reference types="vitest" />
+import path from 'path';
+import { defineConfig } from 'vite';
+
+const getPackageName = () => {
+  return 'sesamy-js';
+};
+
+const getPackageNameCamelCase = () => {
+  try {
+    return getPackageName().replace(/-./g, char => char[1].toUpperCase());
+  } catch (err) {
+    throw new Error('Name property in package.json is missing.');
+  }
+};
+
+const fileName = {
+  es: `${getPackageName()}.mjs`,
+  cjs: `${getPackageName()}.cjs`,
+  iife: `${getPackageName()}.iife.js`,
+};
+
+const formats = Object.keys(fileName) as Array<keyof typeof fileName>;
+
+module.exports = defineConfig({
+  base: './',
+  build: {
+    outDir: './build/dist',
+    lib: {
+      entry: path.resolve(__dirname, 'src/index.ts'),
+      name: getPackageNameCamelCase(),
+      formats,
+      fileName: format => fileName[format],
+    },
+  },
+  test: {},
+  resolve: {
+    alias: [
+      { find: '@', replacement: path.resolve(__dirname, 'src') },
+      { find: '@@', replacement: path.resolve(__dirname) },
+    ],
+  },
+});