@sesamy/sesamy-js 1.3.0 → 1.3.1

package/.env

@@ -0,0 +1,2 @@
+VITE_BASE_URL_DOMAIN = "sesamy.dev"
+VITE_ANALYTICS_BASE_URL = "https://logs.sesamy.dev/events"

package/.env.production

@@ -0,0 +1,2 @@
+VITE_BASE_URL_DOMAIN = "sesamy.com"
+VITE_ANALYTICS_BASE_URL = "https://logs.sesamy.com/events"

package/.eslintignore

@@ -0,0 +1,4 @@
+.github
+.vscode
+dist
+node_modules

package/.eslintrc

@@ -0,0 +1,18 @@
+{
+  "root": true,
+  "parser": "@typescript-eslint/parser",
+  "plugins": ["@typescript-eslint", "prettier"],
+  "extends": [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/eslint-recommended",
+    "plugin:@typescript-eslint/recommended",
+    "prettier"
+  ],
+  "env": {
+    "browser": true,
+    "node": true
+  },
+  "rules": {
+    "prettier/prettier": "error"
+  }
+}

package/.github/workflows/release.yml

@@ -0,0 +1,23 @@
+name: Release
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  release:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+          registry-url: "https://registry.npmjs.org"
+      - run: yarn
+      - run: yarn build:prod
+      - run: yarn semantic-release
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

package/.nvmrc

@@ -0,0 +1 @@
+20.11.0

package/.prettierignore

@@ -0,0 +1,4 @@
+.github
+.vscode
+dist
+node_modules

package/.prettierrc

@@ -0,0 +1,5 @@
+{
+  "singleQuote": true,
+  "arrowParens": "avoid",
+  "printWidth": 120
+}

package/CHANGELOG.md

@@ -0,0 +1,132 @@
+## [1.3.1](https://github.com/sesamyab/sesamy-js/compare/v1.3.0...v1.3.1) (2024-02-23)
+
+
+### Bug Fixes
+
+* remove files ([b9d5776](https://github.com/sesamyab/sesamy-js/commit/b9d57760933df2f0eb12e3e5f0dcec7c6baa11ea))
+
+# [1.3.0](https://github.com/sesamyab/sesamy-js/compare/v1.2.0...v1.3.0) (2024-02-23)
+
+
+### Bug Fixes
+
+* add back old vite config ([34268b9](https://github.com/sesamyab/sesamy-js/commit/34268b99fc6548e9bd022a6b1a4e5237386a639e))
+* add copyfiles ([d834a7f](https://github.com/sesamyab/sesamy-js/commit/d834a7f6050ab6091daa98cf78fc4e4fdf9541dc))
+* add dts to build pacakges ([e8aad37](https://github.com/sesamyab/sesamy-js/commit/e8aad375b294f0e0f5f2d36b07d11cac4dda6ff1))
+* added typescript types for analytics ([8ae867a](https://github.com/sesamyab/sesamy-js/commit/8ae867a81ba28f0df38970fe866503071616b44d))
+* issues with merging ([9bd4f62](https://github.com/sesamyab/sesamy-js/commit/9bd4f62f225faf5d399c1838c9009e1333bc98c7))
+* update demo pages entry file ([ed69b4e](https://github.com/sesamyab/sesamy-js/commit/ed69b4e24848c044d4f3d66e1b431189679801ff))
+
+
+### Features
+
+* vite dev/preview config ([dbafe1f](https://github.com/sesamyab/sesamy-js/commit/dbafe1f7d8d6cbd5536a6479f4077974405161c2))
+
+
+### Reverts
+
+* package name ([2ad3a24](https://github.com/sesamyab/sesamy-js/commit/2ad3a24e2c24480530f33a47ac3d86f176a600f0))
+* use vite envs ([c950bab](https://github.com/sesamyab/sesamy-js/commit/c950bab561b123dc1abd080ffea71a9a588b59ef))
+
+# [1.2.0](https://github.com/sesamyab/sesamy-js/compare/v1.1.0...v1.2.0) (2024-02-22)
+
+
+### Bug Fixes
+
+* add tags api ([aa294e0](https://github.com/sesamyab/sesamy-js/commit/aa294e037350c25eae6f8465ce143fa619a15515))
+* add tags policies ([381fb2d](https://github.com/sesamyab/sesamy-js/commit/381fb2d876da68c6933b8ebde4f10d6992920bd1))
+* check if document is defined ([764f102](https://github.com/sesamyab/sesamy-js/commit/764f102e7ba2f4a8ff411e4c5049b6e3d3ad6ed4))
+* getVersion ([ced22da](https://github.com/sesamyab/sesamy-js/commit/ced22da9f124c9c936e8f5f3f1b25c9fb379cc96))
+* merge conflict ([b37b096](https://github.com/sesamyab/sesamy-js/commit/b37b096c8ab01dde19f5823e8989222ed1bd084b))
+* more merge conflicts ([7a6a4c1](https://github.com/sesamyab/sesamy-js/commit/7a6a4c18ec36f8d9426017d57b3e54d3faf95810))
+* remove unnecessary promise ([d7fa080](https://github.com/sesamyab/sesamy-js/commit/d7fa080d758c85ce4dc9ef2bd43a20b86b5c1f78))
+* update readme ([4d08b44](https://github.com/sesamyab/sesamy-js/commit/4d08b4480f20ce14ce0c38791a481c2d5eb711ed))
+
+
+### Features
+
+* add prettier ([102f50d](https://github.com/sesamyab/sesamy-js/commit/102f50dd5e271404ecf9af74f200c58ca12f6c07))
+* eslint added ([43af52e](https://github.com/sesamyab/sesamy-js/commit/43af52efe5520d5097d8514a210fd54896e3a5da))
+* prettier first run ([85acd28](https://github.com/sesamyab/sesamy-js/commit/85acd287496b108cf50ae217f4712fd3bc2143bf))
+
+# [1.1.0](https://github.com/sesamyab/sesamy-js/compare/v1.0.4...v1.1.0) (2024-02-16)
+
+### Bug Fixes
+
+- add contracts page to vite ([0e7a079](https://github.com/sesamyab/sesamy-js/commit/0e7a079b1a6f815cbb1a6de4e3d05a264e183098))
+- **deps:** update dependency analytics to v0.8.11 ([e0e65cc](https://github.com/sesamyab/sesamy-js/commit/e0e65cc1b44b7a43c7ff8cc674a7d32e4e7ef9a1))
+- remove params to make vercel happy ([e41cfff](https://github.com/sesamyab/sesamy-js/commit/e41cfff15409681fcd926c088a5255651e3fa23d))
+- use api for paywall ([a64db31](https://github.com/sesamyab/sesamy-js/commit/a64db3118b8ad0d306f23499e18d7c0c0cd12ff2))
+
+### Features
+
+- add a naive soft paywall ([5c7de83](https://github.com/sesamyab/sesamy-js/commit/5c7de836a518eacd15627f9a9549ef4249354e08))
+
+## [1.0.4](https://github.com/sesamyab/sesamy-js/compare/v1.0.3...v1.0.4) (2024-02-12)
+
+### Bug Fixes
+
+- add getEntitlement to api ([da3bc35](https://github.com/sesamyab/sesamy-js/commit/da3bc354373b43801aba28fc90b868c154c585dc))
+- casing ([b9abe9b](https://github.com/sesamyab/sesamy-js/commit/b9abe9beada21b13a3d61b9fe70a6128089ea6aa))
+- merge conflicts ([62ba130](https://github.com/sesamyab/sesamy-js/commit/62ba130c44c21f10df025e751f76b63e10d5af54))
+- refatorentitlements ([4acb013](https://github.com/sesamyab/sesamy-js/commit/4acb013db3f7db5429420c120e4ce35349f44be7))
+- type the response ([1930077](https://github.com/sesamyab/sesamy-js/commit/1930077237502c9000c0ed7014b60b8fa5ad3b6c))
+
+## [1.0.3](https://github.com/sesamyab/sesamy-js/compare/v1.0.2...v1.0.3) (2024-02-09)
+
+### Bug Fixes
+
+- format ([48e956f](https://github.com/sesamyab/sesamy-js/commit/48e956fbc8ed0c1a073f17098de4103dfecd42fc))
+- identify events ([81dfc0d](https://github.com/sesamyab/sesamy-js/commit/81dfc0d2d1d28b1067d93c605df49e9e8c85dbcc))
+- update readme ([3debe9e](https://github.com/sesamyab/sesamy-js/commit/3debe9ec9bf43f779a56508122555cb76aea6a43))
+
+## [1.0.2](https://github.com/sesamyab/sesamy-js/compare/v1.0.1...v1.0.2) (2024-02-08)
+
+### Bug Fixes
+
+- ci stuff ([52c0e61](https://github.com/sesamyab/sesamy-js/commit/52c0e610d92bfeb04803bf69a0d9daff899e0da5))
+- ci updates ([2103816](https://github.com/sesamyab/sesamy-js/commit/21038162475cf2dbbb52dc78e5b32506aa2dcd21))
+
+## [1.0.1](https://github.com/sesamyab/sesamy-js/compare/v1.0.0...v1.0.1) (2024-02-08)
+
+### Bug Fixes
+
+- bump versions ([5abb699](https://github.com/sesamyab/sesamy-js/commit/5abb6994778036868a438f8ce4709fccf0876c29))
+
+# 1.0.0 (2024-02-08)
+
+### Bug Fixes
+
+- add another missing lib ([d5cf928](https://github.com/sesamyab/sesamy-js/commit/d5cf928a3af3dda59651ddec3796a6684764435f))
+- add prod config ([646b4e5](https://github.com/sesamyab/sesamy-js/commit/646b4e57b65b14a0658b2d5831e928bfb08c59c5))
+- add semantic release ([9c1edd0](https://github.com/sesamyab/sesamy-js/commit/9c1edd0d16d14c38445f88dfd31aeeced7836b59))
+- add semantic versioning ([aa13062](https://github.com/sesamyab/sesamy-js/commit/aa13062c54b6a64db3e5439dcd88b30ff8450bc5))
+- add specific exports ([d95f904](https://github.com/sesamyab/sesamy-js/commit/d95f9041dfa32349105d18e4aaf9b4aa7574d3df))
+- added a vite config for multiple html files ([780fd13](https://github.com/sesamyab/sesamy-js/commit/780fd13501a59cd6ad7785662885eddf24d6434c))
+- added missing lib ([49174b4](https://github.com/sesamyab/sesamy-js/commit/49174b435ae254fe0078813edfa42f525b7feb30))
+- analytics config ([8d1f2bc](https://github.com/sesamyab/sesamy-js/commit/8d1f2bc8f8c1f57abbbb80409d8be6088a36b532))
+- casing ([b8b9492](https://github.com/sesamyab/sesamy-js/commit/b8b9492eb8ee4cc469b18edf4d80728dd44c78dd))
+- change log endpoint ([9ee757d](https://github.com/sesamyab/sesamy-js/commit/9ee757d86ec78f840da3aa467164827d7ed87f83))
+- ci ([d162031](https://github.com/sesamyab/sesamy-js/commit/d1620315f1a3c9a2d47a8995e1e05940f8203bf7))
+- debug ([8e0def3](https://github.com/sesamyab/sesamy-js/commit/8e0def35fd27163e6e076d5c67c8f6ae465c2628))
+- handle redirect ([0947f80](https://github.com/sesamyab/sesamy-js/commit/0947f80c16c0f353a1dc4d178292fa2ecc655c99))
+- meta tag ([dde6d2e](https://github.com/sesamyab/sesamy-js/commit/dde6d2e0249b62265f6bccaa92b81bc9d9b1594c))
+- metatags ([4ce1e22](https://github.com/sesamyab/sesamy-js/commit/4ce1e222a0b83f5bd0dc8f48fb284691c297ac6d))
+- more tokens ([6c2a99a](https://github.com/sesamyab/sesamy-js/commit/6c2a99a0d1d6195d346d04dd5eb999820a61f348))
+- npm config ([b495c5c](https://github.com/sesamyab/sesamy-js/commit/b495c5ca91c81b0f2f15c1b22607cf4d28866abb))
+- review comments ([02ed539](https://github.com/sesamyab/sesamy-js/commit/02ed539b8216229d2c81f7e720cc9c6b88a73d37))
+- separate the vite config ([e96521e](https://github.com/sesamyab/sesamy-js/commit/e96521e873e9abfbc13371f00054417880b136f9))
+- set explicit any ([d7f774b](https://github.com/sesamyab/sesamy-js/commit/d7f774bb72660cb45d2e403ef3b7ec63a8e0ddf8))
+- specify files ([38f8e45](https://github.com/sesamyab/sesamy-js/commit/38f8e45a43b529c9625506693cda87efe1cfe3a2))
+- switch to a scoped package ([6e7c652](https://github.com/sesamyab/sesamy-js/commit/6e7c65259de9e6ffe78a9a6bfb9641b4d9687fc6))
+- type checks ([3300cf2](https://github.com/sesamyab/sesamy-js/commit/3300cf2bcc18118840f12e5aa46fa1015ef626b9))
+- update auth0 credentials ([c5a019c](https://github.com/sesamyab/sesamy-js/commit/c5a019c46131273b2f9824ab926fd4cce5dcd5f0))
+- use fetch post for sending analytics unless the page is unloading ([cc79c23](https://github.com/sesamyab/sesamy-js/commit/cc79c23594fbd2d5a034b5fb9fd9b79582b7a597))
+- use separate config ([aec3336](https://github.com/sesamyab/sesamy-js/commit/aec333641af3a471a051e0f6e98b91679a6e0efd))
+
+### Features
+
+- add active and idle ([b7f0256](https://github.com/sesamyab/sesamy-js/commit/b7f025674ab72bbcd7257400e42dcad2f9368e47))
+- boilerplate ([fb5fb03](https://github.com/sesamyab/sesamy-js/commit/fb5fb0358c9205e2c9af641444c8d8956912476f))
+- extend config ([0b24bba](https://github.com/sesamyab/sesamy-js/commit/0b24bba068a8a5f5dc85b09193a566ff6c1e77f5))
+- move existing analytics ([3f3e73a](https://github.com/sesamyab/sesamy-js/commit/3f3e73a22dd1d1cbe1b815ef89deb2ada91f93c1))

package/article.html

@@ -0,0 +1,65 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/png" href="/sesamy.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Test acticle</title>
+    <script type="application/json" id="sesamy-js">
+      {
+        "clientId": "demo",
+        "analytics": {
+          "enabled": true
+        }
+      }
+    </script>
+    <meta property="sesamy:client-id" content="demo" />
+    <meta property="sesamy:price" content="19" />
+    <meta property="sesamy:currency" content="SEK" />
+    <meta name="title" content="Sesamy-js test article" />
+  </head>
+
+  <body>
+    <article>
+      <h1>Test article</h1>
+      <a href="#" onclick="navigateToArticle()">Go to next article</a>
+    </article>
+    <button id="buy" onclick="buy()">Buy</button>
+    <script type="module" src="/src/index.ts"></script>
+    <script type="module" src="/src/app.ts"></script>
+    <script>
+      function buy() {
+        console.log('TODO: Call checkout here');
+      }
+
+      function navigateToArticle() {
+        // Parse the current URL and its query parameters
+        const currentUrl = new URL(window.location.href);
+        const searchParams = currentUrl.searchParams;
+
+        // Get the current 'articleId' value, if it exists
+        const currentArticleId = searchParams.get('articleId');
+
+        // Determine the new articleId: increment if exists, otherwise set to 1
+        const newArticleId = currentArticleId ? parseInt(currentArticleId, 10) + 1 : 1;
+
+        // Set the new articleId value in the search parameters
+        searchParams.set('articleId', newArticleId);
+
+        // Update the search part of the URL
+        currentUrl.search = searchParams.toString();
+
+        // Navigate to the new URL
+        window.location.href = currentUrl.toString();
+      }
+
+      window.addEventListener('sesamySoftPaywall', function (event) {
+        alert('Soft paywall triggered');
+      });
+
+      window.addEventListener('sesamyReady', function (event) {
+        sesamy.articles.access(window.location.href);
+      });
+    </script>
+  </body>
+</html>

package/contracts.html

@@ -0,0 +1,23 @@
+<!doctype html>
+<html lang="sv">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/png" href="/sesamy.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Article</title>
+    <script type="application/json" id="sesamy-js">
+      {
+        "clientId": "sesamy",
+        "analytics": {
+          "enabled": true
+        }
+      }
+    </script>
+  </head>
+
+  <body>
+    <sesamy-contracts></sesamy-contracts>
+    <script type="module" src="/src/index.ts"></script>
+    <script type="module" src="/src/SesamyContracts.ts"></script>
+  </body>
+</html>

package/dts-bundle-generator.config.ts

@@ -0,0 +1,11 @@
+const config = {
+  entries: [
+    {
+      filePath: './src/index.ts',
+      outFile: './build/dist/index.d.ts',
+      noCheck: false,
+    },
+  ],
+};
+
+module.exports = config;

package/entitlements.html

@@ -0,0 +1,23 @@
+<!doctype html>
+<html lang="sv">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/png" href="/sesamy.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Article</title>
+    <script type="application/json" id="sesamy-js">
+      {
+        "clientId": "sesamy",
+        "analytics": {
+          "enabled": true
+        }
+      }
+    </script>
+  </head>
+
+  <body>
+    <sesamy-entitlements></sesamy-entitlements>
+    <script type="module" src="/src/index.ts"></script>
+    <script type="module" src="/src/SesamyEntitlements.ts"></script>
+  </body>
+</html>

package/index.html

@@ -0,0 +1,24 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/png" href="/sesamy.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Sesamy JS</title>
+    <script type="application/json" id="sesamy-js">
+      {
+        "clientId": "sesamy",
+        "analytics": {
+          "enabled": true
+        }
+      }
+    </script>
+  </head>
+
+  <body>
+    <div id="app"></div>
+    <sesamy-app></sesamy-app>
+    <script type="module" src="/src/index.ts"></script>
+    <script type="module" src="/src/app.ts"></script>
+  </body>
+</html>

package/package.json

@@ -6,13 +6,9 @@
     "registry": "https://registry.npmjs.org/",
     "tag": "latest"
   },
-  "version": "1.3.0",
+  "version": "1.3.1",
   "main": "./dist/sesamy-js.cjs",
   "module": "./dist/sesamy-js.mjs",
-  "files": [
-    "dist/sesamy-js.es.js",
-    "dist/sesamy-js.umd.js"
-  ],
   "exports": {
     ".": {
       "require": "./dist/sesamy-js.cjs",

package/renovate.json

@@ -0,0 +1,4 @@
+{
+  "$schema": "https://docs.renovatebot.com/renovate-schema.json",
+  "extends": ["config:recommended"]
+}

package/src/SesamyContracts.ts

@@ -0,0 +1,86 @@
+import './style.css';
+import './entitlementsStyle.css';
+import { Events } from './types/Events';
+import { getContracts, getContract } from './services/sesamy/index';
+
+class SesamyContracts extends HTMLElement {
+  public contracts: any;
+  public li: any = '';
+
+  constructor() {
+    super();
+  }
+
+  async _handleContracts() {
+    this.contracts = await getContracts();
+    this.contracts.map((contract: any) => {
+      this.li += `
+          <li>
+            <button class="entitlementBtn auth-visible" id="contract-btn" data-id="${contract.id}">
+              <div class="details">
+              ${
+                contract.items.length > 0
+                  ? `<div class="cell">
+                    ${contract.items.map((item: any) => {
+                      `<div class="item">${item.sku}</div>
+                      <div class="item">${item.title}</div>
+                      <div class="item">${item.purchaseOption}</div>`;
+                    })}
+                  </div>`
+                  : `<div class="cell"></div>`
+              }
+                <span class="type">${contract.status}</span>
+                <span class="date"> ${contract.createdAt} </span>
+              </div>
+            </button>
+          </li>`;
+    });
+    this.render();
+  }
+
+  _handleContractClick(contractID: any) {
+    getContract(contractID).then(response => {
+      console.log(response);
+    });
+  }
+
+  async connectedCallback() {
+    this.setupEventListeners();
+    if (!window.sesamy) {
+      window.addEventListener(Events.READY, () => this._handleContracts());
+      return;
+    }
+
+    this._handleContracts();
+  }
+
+  render() {
+    if (!this.contracts) {
+      return (this.innerHTML = `<div class="container"> Not Found Any Contracts </div>`);
+    }
+
+    return (this.innerHTML = `
+      <div class="container">
+        <div class="title"><h1>Contracts</h1></div>
+        <div class="contant">
+          <ul>
+            ${this.li}
+          </ul>
+        </div>
+      </div>`);
+  }
+
+  private setupEventListeners() {
+    this.addEventListener('click', event => {
+      const clickedElement = event.target as Element;
+      const contractBtn = clickedElement.closest('#contract-btn');
+
+      if (contractBtn) {
+        const contractID = contractBtn.getAttribute('data-id');
+        this._handleContractClick(contractID);
+      }
+    });
+  }
+}
+
+customElements.define('sesamy-contracts', SesamyContracts);

package/src/SesamyEntitlements.ts

@@ -0,0 +1,85 @@
+import './style.css';
+import './entitlementsStyle.css';
+import { Events } from './types/Events';
+import { getEntitlements, getEntitlement } from './services/sesamy/index';
+/**
+ * This class is only used for rendering the UI and not shipped in the bundle
+ */
+
+class SesamyEntitlements extends HTMLElement {
+  public entitlements: any;
+  public li: any = '';
+
+  constructor() {
+    super();
+  }
+
+  async _handleEntitlements() {
+    this.entitlements = await getEntitlements();
+    this.entitlements.map((entitlement: any) => {
+      this.li += `
+          <li>
+            <button class="entitlementBtn auth-visible" id="entitlement-btn" data-id="${entitlement.id}">
+              <div class="image-container">
+                <img
+                  src="${entitlement.cover}" 
+                  alt= "${entitlement.title}"
+                  onerror="this.onerror=null; this.src='https://placehold.co/600x400'"
+                />
+              </div>
+              <div class="details">
+                <span class="type">${entitlement.productType}</span>
+                <span class="date"> ${entitlement.created} </span>
+              </div>
+            </button>
+          </li>`;
+    });
+    this.render();
+  }
+
+  _handleEntitlementClick(entitlementID: any) {
+    getEntitlement(entitlementID).then(response => {
+      console.log(response);
+    });
+  }
+
+  async connectedCallback() {
+    this.setupEventListeners();
+    if (!window.sesamy) {
+      window.addEventListener(Events.READY, () => this._handleEntitlements());
+      return;
+    }
+
+    this._handleEntitlements();
+  }
+
+  render() {
+    if (!this.entitlements) {
+      return (this.innerHTML = `<div class="container"> Not Found Purchases </div>`);
+    }
+
+    return (this.innerHTML = `
+      <div class="container">
+        <div class="title"><h1>Purchases</h1></div>
+        <div class="contant">
+          <ul>
+            ${this.li}
+          </ul>
+        </div>
+      </div>`);
+  }
+
+  private setupEventListeners() {
+    this.addEventListener('click', event => {
+      const clickedElement = event.target as Element;
+      const entitlementBtn = clickedElement.closest('#entitlement-btn');
+
+      if (entitlementBtn) {
+        const entitlementID = entitlementBtn.getAttribute('data-id');
+        this._handleEntitlementClick(entitlementID);
+      }
+    });
+  }
+}
+
+customElements.define('sesamy-entitlements', SesamyEntitlements);

package/src/app.ts

@@ -0,0 +1,101 @@
+import { User } from '@auth0/auth0-spa-js';
+import './style.css';
+import sesamyLogo from '/sesamy.png';
+import { Events } from './types/Events';
+
+/**
+ * This class is only used for rendering the UI and not shipped in the bundle
+ */
+
+class SesamyAppComponent extends HTMLElement {
+  private user: User | undefined;
+
+  constructor() {
+    super();
+  }
+
+  async _handleProfile() {
+    this.user = await window.sesamy.auth.getUser();
+    this.render();
+  }
+
+  async connectedCallback() {
+    this.setupEventListeners();
+
+    if (!window.sesamy) {
+      window.addEventListener(Events.READY, () => this._handleProfile());
+      return;
+    }
+
+    this._handleProfile();
+  }
+
+  render() {
+    this.innerHTML = `
+      <div>
+        <a href="https://docs.sesamy.com" target="_blank">
+          <img src="${sesamyLogo}" class="logo" alt="Vite logo" />
+        </a>    
+        <h1>Sesamy JS</h1>
+        <p class="read-the-docs">
+          Click on the Sesamy logo to learn more
+        </p>
+        ${this.user ? this.renderUserProfile() : this.renderLoginButton()}
+      </div>
+    `;
+  }
+
+  private renderLoginButton(): string {
+    return '<button part="login-btn" class="login auth-visible" id="login-btn"> Login </button>';
+  }
+
+  private renderUserProfile(): string {
+    return `<div class="user" part="user">
+      <a href="/profile" part="user-link">
+        ${
+          this.user?.picture
+            ? ` <img
+              class="big"
+              part="user-img img-big"
+              src=${this.user.picture}
+              alt=${this.user.name || 'User avatar'}
+            />`
+            : `<div part="avatar avatar-big" class="avatar big"> Placeholder </div>`
+        }
+        <h2 class="user-name">${this.user?.name || 'User Name'}</h2>
+      </a>
+
+      <div class="logout-wrap"> 
+        <a href="#" class="logout-btn" id="logout-btn"> Logout </a> 
+      </div> 
+      <div>
+        <a href="/entitlements.html">
+          View Entitlements
+        </a>
+      </div>
+      <div>
+        <a href="/contracts.html">
+          View Contracts
+        </a> 
+      </div> 
+    </div>`;
+  }
+
+  private setupEventListeners() {
+    this.addEventListener('click', event => {
+      const clickedElement = event.target as Element;
+      const logoutButton = clickedElement.closest('#logout-btn');
+      const loginButton = clickedElement.closest('#login-btn');
+
+      if (logoutButton) {
+        window.sesamy.auth.logout();
+      }
+
+      if (loginButton) {
+        window.sesamy.auth.loginWithRedirect();
+      }
+    });
+  }
+}
+
+customElements.define('sesamy-app', SesamyAppComponent);

package/src/constants.ts

@@ -0,0 +1,2 @@
+export const BASE_URL_DOMAIN = import.meta.env.VITE_BASE_URL_DOMAIN;
+export const ANALYTICS_BASE_URL = import.meta.env.VITE_ANALYTICS_BASE_URL;

package/src/controllers/index.ts

@@ -0,0 +1 @@
+// Will be stuff in here later