# @ecommission/epg-modal

React modal component with iframe support for eCommission EPG integration.

## Installation

```bash
npm install @ecommission/epg-modal
```

## Usage

Add the `EpgModal` component to your app root:

```tsx
import EpgModal from "@ecommission/epg-modal";

function App() {
  return (
    <>
      {/* Your app content */}
      <EpgModal />
    </>
  );
}
```

Open the modal from anywhere using the global function:

```ts
window.openEpgModal("https://cdn.ecommission.com/lw/terms.php?jwt=...");
```

For the **payment-authorization clickwrap** (`auth.php`) use `epg_auth` — it opens a slightly wider/taller modal (660 × 590) sized for the authorization text plus the Accept/Decline buttons:

```ts
window.epg_auth("https://cdn.ecommission.com/lw/auth.php?jwt=...");
```

The modal closes automatically when it receives a close message from the iframe.

## Vanilla / non-React usage

For non-React pages (e.g. server-rendered PHP), use the prebuilt global bundle — no React required. It registers the same `window.openEpgModal` / `window.epg_auth` globals and closes on the iframe's postMessage:

```html
<script src="https://unpkg.com/@ecommission/epg-modal/dist/epg-modal.global.js"></script>
<script>
  window.epg_auth("https://cdn.ecommission.com/lw/auth.php?jwt=...");
</script>
```

(Or self-host `dist/epg-modal.global.js`.) Business logic — e.g. handling Accept vs Decline from the auth clickwrap — stays in your own `message` listener; this bundle only opens/closes the modal.

## License

MIT