Claims Modal

Creates a claims page popup modal that's embedded in pages with the following code.

<script type="module">
  import { createClaimModal } from 'https://cdn.addtowallet.io/js/claim/modal/v0.1.15/claimsmodal.js';

  const modal = createClaimModal({
    baseUrl: 'https://staging.addtowallet.io',
  });
  modal.open({
    campaign: '123456',
    jwt: 'xxxxx.xxxx',
  });
</script>

The same API is also available as an npm package:

import { createClaimModal } from '@basetime/a2w-claims-modal';

const modal = createClaimModal({
  baseUrl: 'https://staging.addtowallet.io',
});
modal.open({
  campaign: '123456',
  jwt: 'xxxxx.xxxx',
});

You can also control which same-origin document the modal mounts into by passing frame:

<script type="module">
  import { createClaimModal } from 'https://cdn.addtowallet.io/js/claim/modal/v0.1.15/claimsmodal.js';

  const modal = createClaimModal({
    frame: window.parent,
  });

  modal.open({
    campaign: '123456',
    jwt: 'xxxxx.xxxx',
  });
</script>

app/claims-modal is the standalone workspace for the popup claims modal.

It owns the modal bundle that can be embedded on a page and opened with createClaimModal(). The modal uses the shared claims UI that is also consumed by the full claims page flow elsewhere in the monorepo.

Create Options

createClaimModal() accepts the following create options:

• design: Partial claims page design overrides.
• baseUrl: Optional backend origin used for relative modal requests. When omitted, the modal falls back to the build-time BASE_URL and then window.location.origin.
• target: The element or selector where the modal mount node should be added.
• frame: A same-origin Window or HTMLIFrameElement used to resolve the document for selectors, mount nodes, and injected assets.

When frame is omitted, the modal uses the current page document.

If both frame and a string target are provided, the selector is resolved inside the frame document.

Same-origin access is required when using frame. Cross-origin parent frames and iframes cannot be mounted into directly.

What This App Does

This workspace builds the browser bundle for the popup claims experience.

• Entry point: src/claimsmodal.tsx
• Build output: build/claimsmodal.js
• npm entry point: dist/index.js
• Package name: @basetime/a2w-claims-modal

The bundle is intended to be loaded by backend-rendered pages such as app/backend/src/templates/claimmodal.html.twig.

Install From npm

Install the published package together with its runtime peer dependencies:

pnpm add @basetime/a2w-claims-modal react react-dom @emotion/react @emotion/styled

The npm package is intended for browser-based React applications and exports:

• createClaimModal
• Public TypeScript types for the modal API

The existing CDN bundle remains available for <script type="module"> usage.

Install

From the repository root:

pnpm install

This workspace uses:

• Node 22.12.0
• pnpm 8.15.8

If you want to work from inside the workspace directory:

cd app/claims-modal

Watch

Use the following URL to create popups for testing.

https://localhost:5009/claimmodal

To rebuild the modal bundle on file changes:

pnpm watch

This runs node build.mjs watch and writes the bundle to:

app/claims-modal/build/claimsmodal.js

Note: this watch command rebuilds the modal workspace output. If you are testing through backend-served /assets/... URLs, make sure the backend asset copy step is also up to date.

Build

To create a production build:

pnpm build

This runs:

NODE_ENV=production node build.mjs

The build script uses the shared builder in packages/builder/build.mjs and emits an ESM bundle with source maps.

To create the npm package bundle:

pnpm build:npm

This writes the npm entry to:

app/claims-modal/dist/index.js

To emit the npm package type declarations:

pnpm build:types

Deploy To CDN

The workspace includes a deployment script for publishing the built modal bundle to the CDN.

Deployment metadata is stored in:

app/claims-modal/claimsmodal-cdn.json

The current deploy script is:

app/claims-modal/claimsmodal-build.sh

To build and deploy the modal bundle:

./claimsmodal-build.sh

The script will:

• Run pnpm build
• Read the current version from claimsmodal-cdn.json
• Increment the patch version
• Upload the contents of build/ to gs://cdn.addtowallet.io/js/claim/modal/v<version>
• Write the new version back to claimsmodal-cdn.json

Example CDN output path:

https://cdn.addtowallet.io/js/claim/modal/v0.1.14/claimsmodal.js

Before deploying, make sure you have:

• Access to the correct Google Cloud project and bucket
• gcloud installed and authenticated
• jq installed locally, since the script uses it to update the version file

Helpful Commands

Lint the workspace:

pnpm lint

Run tests:

pnpm test

Run tests in watch mode:

pnpm test:watch

Create the publishable npm tarball preview:

pnpm pack:dry-run