From ca15a355e8b49db1ae98bd2f19586ee4521ed722 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=89mile=20R=C3=A9?= <emile@getprobo.com>
Date: Thu, 7 May 2026 09:59:54 +0400
Subject: [PATCH] Defer banner button validation until config is loaded
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The validation now runs on probo-ready instead of connectedCallback
so it can check config.texts to decide which buttons are required
for the active consent mode.

Signed-off-by: Émile Ré <emile@getprobo.com>
---
 .../cookie-banner/src/components/banner.ts    | 25 +++++++++++--------
 1 file changed, 15 insertions(+), 10 deletions(-)

diff --git a/packages/cookie-banner/src/components/banner.ts b/packages/cookie-banner/src/components/banner.ts
index 335200d86..be6f21b2b 100644
--- a/packages/cookie-banner/src/components/banner.ts
+++ b/packages/cookie-banner/src/components/banner.ts
@@ -15,12 +15,7 @@
 import { ProboElement } from "./base";
 import type { ProboRootElement } from "./base";
 import type { ProboCookieBannerRoot } from "./cookie-banner-root";
-
-const REQUIRED_BUTTONS = [
-  "probo-accept-button",
-  "probo-reject-button",
-  "probo-customize-button",
-] as const;
+import type { BannerConfig } from "../types";
 
 export class ProboBanner extends ProboElement {
   private root: ProboRootElement | null = null;
@@ -32,29 +27,39 @@ export class ProboBanner extends ProboElement {
     }
   };
 
+  private onReady = (e: Event): void => {
+    const config = (e as CustomEvent).detail.config as BannerConfig;
+    this.validate(config);
+  };
+
   connectedCallback(): void {
     this.hidden = true;
     this.root = this.findAncestor<ProboCookieBannerRoot>("probo-cookie-banner-root");
 
     if (this.root) {
       this.root.addEventListener("probo-state", this.onStateChange);
+      this.root.addEventListener("probo-ready", this.onReady, { once: true });
       if (this.root.state === "banner") {
         this.hidden = false;
       }
     }
-
-    this.scheduleValidation(() => this.validate());
   }
 
   disconnectedCallback(): void {
     if (this.root) {
       this.root.removeEventListener("probo-state", this.onStateChange);
+      this.root.removeEventListener("probo-ready", this.onReady);
     }
   }
 
-  private validate(): void {
+  private validate(config: BannerConfig): void {
+    const texts = config.texts ?? {};
+    const required: string[] = ["probo-accept-button"];
+    if (texts.button_reject_all) required.push("probo-reject-button");
+    if (texts.button_customize) required.push("probo-customize-button");
+
     const missing: string[] = [];
-    for (const tag of REQUIRED_BUTTONS) {
+    for (const tag of required) {
       if (!this.querySelector(tag)) {
         missing.push(tag);
       }