Build your own UI for JavaScript

import { initCookieYes } from "@cookieyes/core";

export const { consentStore, consentManager } = initCookieYes({
  mode: "cookie-only",
  regulation: "GDPR",
});

import type { ConsentStoreState } from "@cookieyes/core";
import { consentStore } from "./consent";

// The categories a visitor can decide on. Required ones are always on and never shown.
const optional = consentStore.categories.list.filter((c) => !c.required);

export function render(root: HTMLElement, state: ConsentStoreState): void {
  if (state.hasActed && state.activeUI !== "dialog") {
    root.innerHTML = "";
    return;
  }

  if (state.activeUI === "dialog") {
    root.innerHTML = `
      <div role="dialog" aria-labelledby="cy-title">
        <h2 id="cy-title">Cookie preferences</h2>
        ${optional
          .map(
            (c) => `
          <label>
            <input type="checkbox" data-category="${c.id}" ${state.consents[c.id] ? "checked" : ""} />
            ${c.id}
          </label>`,
          )
          .join("")}
        <button data-action="save">Save</button>
        <button data-action="close">Cancel</button>
      </div>`;
    return;
  }

  root.innerHTML = `
    <div role="dialog" aria-labelledby="cy-title">
      <h2 id="cy-title">We use cookies</h2>
      <p>Required cookies are always on. Analytics and marketing need your yes first.</p>
      <button data-action="accept">Accept all</button>
      <button data-action="reject">Reject all</button>
      <button data-action="customise">Customise</button>
    </div>`;
}

import { consentManager, consentStore } from "./consent";
import { render } from "./render";

const root = document.getElementById("consent") as HTMLElement;

// Draw on every change, including switches flipped inside the dialog.
consentStore.subscribe((state) => render(root, state));
render(root, consentStore.getState());

// One listener for every button. The manager updates the store, subscribe() redraws.
root.addEventListener("click", (event) => {
  const target = event.target as HTMLElement;
  switch (target.dataset.action) {
    case "accept":
      consentManager.acceptAll("banner");
      break;
    case "reject":
      consentManager.rejectAll("banner");
      break;
    case "customise":
      consentManager.showPreferences();
      break;
    case "save":
      consentManager.savePreferences("preferences");
      consentManager.hidePreferences();
      break;
    case "close":
      consentManager.hidePreferences();
      break;
  }
});

// A checkbox flips the live value; nothing is saved until Save.
root.addEventListener("change", (event) => {
  const input = event.target as HTMLInputElement;
  if (input.dataset.category) consentManager.updateCategory(input.dataset.category, input.checked);
});