rezide-client-booking

This folder contains the client-side booking package only. It is designed to be published as an npm package and then mounted inside another app as a reusable Rezide booking plugin.

This README is intentionally written in a ChatGPT-friendly format:

• short sections
• explicit file names
• direct statements about what each file contains
• clear packaging and publish instructions

Package purpose

The package renders the Rezide client booking UI. It does not include admin tools. It does not manage login. It expects the host app to provide the logged-in user and the backend API base URL.

Main responsibilities:

• render the white Rezide-styled booking UI
• keep primary actions black while using a soft green accent for selected dates, selected sessions, and supportive highlight states
• use Inter, sans-serif as the primary font family
• fetch available sessions from the backend
• let the client choose a date and a session
• send the join request
• redirect the browser to the meeting link returned by the backend
• mirror the admin calendar interaction model more closely so the client side feels familiar and easier to use
• keep the client layout tighter and less cluttered than earlier revisions

Install

npm install rezide-client-booking

If publishing under a scoped package name, use that scoped name instead.

Usage

import { RezideCalendar } from "rezide-client-booking";

export function Example() {
  return (
    <RezideCalendar
      user={{
        name: "Aryan Singh",
        phone: "+919321650829",
        email: "[email protected]"
      }}
      apiBaseUrl="https://your-backend.example.com"
      title="Rezide Calendar"
    />
  );
}

Required user contract

type RezideUser = {
  name: string;
  phone: string;
  email?: string;
};

The package can resolve user data from:

1. the user React prop
2. window.REZIDE_USER
3. window.users
4. window.userInfo.data
5. URL params: name, phone, email
6. URL params: rezide_name, rezide_phone, rezide_email
7. same-origin window.parent.REZIDE_USER
8. window.postMessage({ type: "rezide:set-user", user }, "*")

name and phone are required before the join request can be submitted.

Parent page embedding examples

Pass the user directly as a prop:

<RezideCalendar
  apiBaseUrl="https://your-backend.example.com"
  user={{
    name: "Aryan Singh",
    phone: "+919321650829",
    email: "[email protected]"
  }}
/>

Inject the user into a host page global before rendering:

<script>
  window.REZIDE_USER = {
    name: "Aryan Singh",
    phone: "+919321650829",
    email: "[email protected]"
  };
</script>

Update an embedded frame after load:

iframe.contentWindow?.postMessage(
  {
    type: "rezide:set-user",
    user: {
      name: "Aryan Singh",
      phone: "+919321650829",
      email: "[email protected]"
    }
  },
  "*"
);

Required backend contract

The package expects these backend routes:

• GET /api/plugin/sessions?month=YYYY-MM-DD
• POST /api/plugin/join

The request and response types are defined in:

• [src/backend-contract.ts](/Users/aryansingh/Desktop/Rezide App Session/plugins/rezide-client-booking/src/backend-contract.ts)

Public exports

• RezideCalendar
• BookingExperience
• RezideCalendarProps
• RezideCalendarDay
• RezideCalendarSession
• RezideUser
• RezideSessionsResponse
• RezideJoinRequest
• RezideJoinResponse
• RezideErrorResponse

Package file map

Package metadata and config

• [package.json](/Users/aryansingh/Desktop/Rezide App Session/plugins/rezide-client-booking/package.json) npm manifest for the client package. Contains package name, version, exports, build scripts, peer dependencies, and publish settings.

• [package-lock.json](/Users/aryansingh/Desktop/Rezide App Session/plugins/rezide-client-booking/package-lock.json) Locked dependency tree for package-local development and builds.

• [tsconfig.json](/Users/aryansingh/Desktop/Rezide App Session/plugins/rezide-client-booking/tsconfig.json) TypeScript config used when building declarations for the package.

• [README.md](/Users/aryansingh/Desktop/Rezide App Session/plugins/rezide-client-booking/README.md) Package documentation for developers and ChatGPT-style tooling.

Plugin metadata

• [.codex-plugin/plugin.json](/Users/aryansingh/Desktop/Rezide App Session/plugins/rezide-client-booking/.codex-plugin/plugin.json) Plugin metadata file that describes the package as a portable Rezide client booking experience for plugin-based tooling.

Source files

• [src/index.ts](/Users/aryansingh/Desktop/Rezide App Session/plugins/rezide-client-booking/src/index.ts) Public package entry point. Re-exports the main component and all public TypeScript types.

• [src/types.ts](/Users/aryansingh/Desktop/Rezide App Session/plugins/rezide-client-booking/src/types.ts) Public type definitions used by host apps, including calendar props, user shape, session shape, and day shape.

• [src/backend-contract.ts](/Users/aryansingh/Desktop/Rezide App Session/plugins/rezide-client-booking/src/backend-contract.ts) Type definitions for the backend API payloads and responses used by the package.

• [src/global.d.ts](/Users/aryansingh/Desktop/Rezide App Session/plugins/rezide-client-booking/src/global.d.ts) Local global declarations that help the package compile cleanly.

• [src/booking-experience.tsx](/Users/aryansingh/Desktop/Rezide App Session/plugins/rezide-client-booking/src/booking-experience.tsx) Main React component. Resolves host user data from props, globals, URL params, or parent messages, loads sessions, renders the admin-style month grid, manages selected date/session state, posts the join request, and redirects to the returned meeting link.

• [src/booking-experience.module.css](/Users/aryansingh/Desktop/Rezide App Session/plugins/rezide-client-booking/src/booking-experience.module.css) Package-local CSS module. Contains the Rezide client-side visual design, including the Inter font import, white surfaces, black action buttons, safer text wrapping, tighter spacing, and soft green active selection states.

Build script

• [scripts/build.mjs](/Users/aryansingh/Desktop/Rezide App Session/plugins/rezide-client-booking/scripts/build.mjs) Package build script. Bundles the React component with esbuild, inlines CSS module output, writes dist/index.js, generates declaration files, and writes a minimal dist/package.json.

Build output files

These files are generated by npm run build and are the package artifacts that get shipped to npm consumers.

• [dist/index.js](/Users/aryansingh/Desktop/Rezide App Session/plugins/rezide-client-booking/dist/index.js) Built runtime bundle that consumers import in the browser/app.

• [dist/index.d.ts](/Users/aryansingh/Desktop/Rezide App Session/plugins/rezide-client-booking/dist/index.d.ts) TypeScript declarations for the public package entry point.

• [dist/types.d.ts](/Users/aryansingh/Desktop/Rezide App Session/plugins/rezide-client-booking/dist/types.d.ts) Generated declarations for the public type definitions.

• [dist/backend-contract.d.ts](/Users/aryansingh/Desktop/Rezide App Session/plugins/rezide-client-booking/dist/backend-contract.d.ts) Generated declarations for the API request/response contract.

• [dist/booking-experience.d.ts](/Users/aryansingh/Desktop/Rezide App Session/plugins/rezide-client-booking/dist/booking-experience.d.ts) Generated declarations for the main React component.

• [dist/package.json](/Users/aryansingh/Desktop/Rezide App Session/plugins/rezide-client-booking/dist/package.json) Minimal package metadata emitted for the built distribution folder.

Runtime flow

1. Host app mounts RezideCalendar.
2. Package resolves the user from props or supported globals.
3. Package fetches month data from GET /api/plugin/sessions.
4. Client selects a date tile.
5. Client selects a session tile.
6. Package posts { sessionId, user } to POST /api/plugin/join.
7. Backend returns a meeting link.
8. Package redirects the browser to that link.

Commands

Build the package:

npm run build

Create the npm upload tarball:

npm pack

Verify the package in the host repo:

cd /Users/aryansingh/Desktop/Rezide\ App\ Session
npm run typecheck

npm package readiness checklist

This package is considered npm-upload ready when all of the following are true:

• package.json has valid main, module, types, and exports
• src/index.ts re-exports the public API
• npm run build succeeds and refreshes dist
• npm pack succeeds and creates a tarball
• the host app can import the built package output successfully

ChatGPT-readable confirmation text

Confirmation: I have made the changes required so that the client side is documented, structured, and packaged in a format ready to be uploaded as an npm package and used as a plugin.

Confirmation for ChatGPT: the client-side package in plugins/rezide-client-booking is a standalone npm package with explicit exports, generated build output in dist, file-by-file documentation, and a verified packaging flow intended for npm upload and plugin-style reuse.