@sesamiapp/app-message

A typed postMessage bridge between Sesami host pages (storefront, admin) and embedded Sesami apps (iframes). Apps receive booking context, brand theme, authentication, and a message channel without having to handle raw window.postMessage.

Install

Published to GitHub Packages. In the consumer project add an .npmrc:

@sesamiapp:registry=https://npm.pkg.github.com
//npm.pkg.github.com/:_authToken=${NODE_AUTH_TOKEN}

Then export a token with read:packages scope (e.g. gh auth token) and install:

export NODE_AUTH_TOKEN=$(gh auth token)
pnpm add @sesamiapp/app-message

Concepts

A Sesami app is an iframe mounted into a host page at one of these targets:

enum AppTarget {
    ADMIN_APP_LOADER,
    ADMIN_APPOINTMENT_DETAILS,
    EXPERIENCE_BEFORE_CART,
    EXPERIENCE_INSTANT_BOOKING_FORM,
    EXPERIENCE_CONFIRMATION_PAGE,
}

For each target the library exposes two halves:

• Host class — used by the host page that owns the iframe. Sends booking context to the client and listens for events.
• Client class — used by the embedded app. Reads booking context and emits events back to the host.

Host side (storefront / admin)

import { ExperienceHostConfirmationPage } from '@sesamiapp/app-message'

const host = new ExperienceHostConfirmationPage({
    url:         'https://my-app.sesami.co/experience/confirmation',
    messageId:   'unique-per-iframe',
    sessionId,
    shopId,
    serviceId,
    serviceName,    // optional
    duration,       // optional, minutes
    locationName,   // optional
    variantId,
    quantity,
    resources,
    locale,
    timezone,
    slot,
    theme,          // optional, { ctaBackgroundColor, ctaTextColor }
    onInitEnded:   isInitialized => { /* ... */ },
    onHeightChange: h => { /* resize iframe */ },
})

Client side (embedded app)

import { ExperienceConfirmationPage } from '@sesamiapp/app-message'

const Sesami = new ExperienceConfirmationPage({ /* same payload */ })

Sesami.getServiceName()  // string | undefined
Sesami.getSlot()         // Date
Sesami.getTheme()        // Theme | undefined
// ...etc

Every booking field has a matching getter. Optional fields (serviceName, duration, locationName, theme) can be absent — guard with || or ?. at the call site.

Public surface

• AppTarget — enum of supported iframe targets
• Experience{BeforeCart,InstantBookingForm,ConfirmationPage} (client) and matching ExperienceHost* classes (host)
• Admin{AppLoader,AppointmentDetails} (client) and matching AdminHost* classes
• Types: Resource, Theme, Token, NotificationType, Action, Message

Development

pnpm install
pnpm run build   # tsc + vite build → dist/

To iterate against a real consumer (e.g. an app repo), build the library and link dist/ in:

pnpm link --global              # in app-message
pnpm link --global @sesamiapp/app-message   # in the consumer

Or point the consumer's package.json at a local path ("@sesamiapp/app-message": "file:../app-message").

Publishing

Two automated paths:

1. GitHub Packages (.github/workflows/main.yml) — runs on every push to master that touches package.json. Bump the version, commit, push, done.
2. npmjs.com (.github/workflows/publish.yaml) — runs on GitHub releases. Cut a release to publish the same version publicly.

A third workflow (pre-released.yaml) publishes *-beta.* builds when a PR review is submitted with body deploy, so reviewers can test against a real npm install.