@replicated/portal-components 0.0.19 → 0.0.21

package/dist/linux-install-wizard.d.mts

@@ -1,13 +1,19 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { a as CreateServiceAccountResult, F as FetchChannelReleasesResult, N as NetworkAvailability, c as CreateInstallOptionsResult, e as GetInstallOptionsResult, f as UpdateInstallOptionsResult, C as ChannelRelease } from './index-BAiVrSSR.mjs';
-export { h as CreateServiceAccountInput, p as InstallInstructions, I as InstallOptions, q as InstallStep, i as ServiceAccountData, m as createInstallOptions, g as createServiceAccount, l as fetchChannelReleases, o as filterEmbeddedClusterReleases, n as getInstallOptions, u as updateInstallOptions } from './index-BAiVrSSR.mjs';
+import { a as CreateServiceAccountResult, F as FetchChannelReleasesResult, N as NetworkAvailability, c as CreateInstallOptionsResult, e as GetInstallOptionsResult, f as UpdateInstallOptionsResult, C as ChannelRelease } from './index-DyzJ0yKD.mjs';
+export { h as CreateServiceAccountInput, n as InstallInstructions, I as InstallOptions, o as InstallStep, i as ServiceAccountData, k as createInstallOptions, g as createServiceAccount, j as fetchChannelReleases, m as filterEmbeddedClusterReleases, l as getInstallOptions, u as updateInstallOptions } from './index-DyzJ0yKD.mjs';
+import './fetch-license-iTyF7_GY.mjs';
 import './actions/change-team.mjs';
+import './actions/trial-signup.mjs';
 
 declare const LINUX_INSTALL_SERVICE_ACCOUNT_KEY = "linux_install_service_account";
 declare const LINUX_INSTALL_OPTIONS_KEY = "linux_install_options";
 interface LinuxInstallWizardProps {
     /** JWT token for authentication */
     token: string;
+    /** Primary branding color for buttons (default: DEFAULT_SECONDARY_COLOR) */
+    primaryColor?: string;
+    /** Secondary branding color for links (default: DEFAULT_SECONDARY_COLOR) */
+    secondaryColor?: string;
     /** Server action to create service account - REQUIRED */
     createServiceAccountAction: (name: string, token: string) => Promise<CreateServiceAccountResult>;
     /** Server action to fetch channel releases - REQUIRED for version dropdown */
@@ -59,7 +65,7 @@ interface LinuxInstallWizardProps {
     supportPortalLink?: string;
 }
 declare const LinuxInstallWizard: {
-    ({ token, createServiceAccountAction, fetchChannelReleasesAction, createInstallOptionsAction, getInstallOptionsAction, updateInstallOptionsAction, onStepChange, onInstallOptionsIdChange, initialStep, initialNetwork, initialInstallOptionsId, initialInstallOptionsData, initialChannelReleases, supportPortalLink }: LinuxInstallWizardProps): react_jsx_runtime.JSX.Element;
+    ({ token, primaryColor, secondaryColor, createServiceAccountAction, fetchChannelReleasesAction, createInstallOptionsAction, getInstallOptionsAction, updateInstallOptionsAction, onStepChange, onInstallOptionsIdChange, initialStep, initialNetwork, initialInstallOptionsId, initialInstallOptionsData, initialChannelReleases, supportPortalLink }: LinuxInstallWizardProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 

package/dist/linux-install-wizard.d.ts

@@ -1,13 +1,19 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { a as CreateServiceAccountResult, F as FetchChannelReleasesResult, N as NetworkAvailability, c as CreateInstallOptionsResult, e as GetInstallOptionsResult, f as UpdateInstallOptionsResult, C as ChannelRelease } from './index-DWt-N5od.js';
-export { h as CreateServiceAccountInput, p as InstallInstructions, I as InstallOptions, q as InstallStep, i as ServiceAccountData, m as createInstallOptions, g as createServiceAccount, l as fetchChannelReleases, o as filterEmbeddedClusterReleases, n as getInstallOptions, u as updateInstallOptions } from './index-DWt-N5od.js';
+import { a as CreateServiceAccountResult, F as FetchChannelReleasesResult, N as NetworkAvailability, c as CreateInstallOptionsResult, e as GetInstallOptionsResult, f as UpdateInstallOptionsResult, C as ChannelRelease } from './index-sMbq94M7.js';
+export { h as CreateServiceAccountInput, n as InstallInstructions, I as InstallOptions, o as InstallStep, i as ServiceAccountData, k as createInstallOptions, g as createServiceAccount, j as fetchChannelReleases, m as filterEmbeddedClusterReleases, l as getInstallOptions, u as updateInstallOptions } from './index-sMbq94M7.js';
+import './fetch-license-iTyF7_GY.js';
 import './actions/change-team.js';
+import './actions/trial-signup.js';
 
 declare const LINUX_INSTALL_SERVICE_ACCOUNT_KEY = "linux_install_service_account";
 declare const LINUX_INSTALL_OPTIONS_KEY = "linux_install_options";
 interface LinuxInstallWizardProps {
     /** JWT token for authentication */
     token: string;
+    /** Primary branding color for buttons (default: DEFAULT_SECONDARY_COLOR) */
+    primaryColor?: string;
+    /** Secondary branding color for links (default: DEFAULT_SECONDARY_COLOR) */
+    secondaryColor?: string;
     /** Server action to create service account - REQUIRED */
     createServiceAccountAction: (name: string, token: string) => Promise<CreateServiceAccountResult>;
     /** Server action to fetch channel releases - REQUIRED for version dropdown */
@@ -59,7 +65,7 @@ interface LinuxInstallWizardProps {
     supportPortalLink?: string;
 }
 declare const LinuxInstallWizard: {
-    ({ token, createServiceAccountAction, fetchChannelReleasesAction, createInstallOptionsAction, getInstallOptionsAction, updateInstallOptionsAction, onStepChange, onInstallOptionsIdChange, initialStep, initialNetwork, initialInstallOptionsId, initialInstallOptionsData, initialChannelReleases, supportPortalLink }: LinuxInstallWizardProps): react_jsx_runtime.JSX.Element;
+    ({ token, primaryColor, secondaryColor, createServiceAccountAction, fetchChannelReleasesAction, createInstallOptionsAction, getInstallOptionsAction, updateInstallOptionsAction, onStepChange, onInstallOptionsIdChange, initialStep, initialNetwork, initialInstallOptionsId, initialInstallOptionsData, initialChannelReleases, supportPortalLink }: LinuxInstallWizardProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 

package/dist/linux-install-wizard.js

@@ -8,7 +8,40 @@ var buffer = require('buffer');
  * Enterprise Portal Components
  * This file is generated by tsup. Do not edit manually.
  */
+var __defProp = Object.defineProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+
+// datadog/tracer.ts
+var tracer_exports = {};
+__export(tracer_exports, {
+  default: () => tracer_default
+});
+var tracer_default;
 
+// src/utils/constants.ts
+var DEFAULT_SECONDARY_COLOR = "#6366f1";
+function useCopyToClipboard(resetDelay = 2e3) {
+  const [copied, setCopied] = react.useState(false);
+  const copy = react.useCallback(async (text) => {
+    if (!navigator.clipboard) {
+      console.warn("[useCopyToClipboard] Clipboard API not available");
+      return false;
+    }
+    try {
+      await navigator.clipboard.writeText(text);
+      setCopied(true);
+      setTimeout(() => setCopied(false), resetDelay);
+      return true;
+    } catch (error) {
+      console.error("[useCopyToClipboard] Failed to copy:", error);
+      return false;
+    }
+  }, [resetDelay]);
+  return { copy, copied };
+}
 var LINUX_INSTALL_SERVICE_ACCOUNT_KEY = "linux_install_service_account";
 var LINUX_INSTALL_OPTIONS_KEY = "linux_install_options";
 var navigateTo = (href) => {
@@ -21,19 +54,12 @@ var navigateTo = (href) => {
     console.error("[linux-install-wizard] navigation failed", error);
   }
 };
-var copyToClipboard = async (text) => {
-  try {
-    await navigator.clipboard.writeText(text);
-    return true;
-  } catch {
-    return false;
-  }
-};
-var StepIndicator = ({ step }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center gap-3", children: [
+var StepIndicator = ({ step, primaryColor = DEFAULT_SECONDARY_COLOR }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center gap-3", children: [
   /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: `flex h-10 w-10 items-center justify-center rounded-full border-2 ${step > 1 ? "border-gray-900 bg-gray-900 text-white" : "border-indigo-500"}`,
+      className: `flex h-10 w-10 items-center justify-center rounded-full border-2 ${step > 1 ? "border-gray-900 bg-gray-900 text-white" : ""}`,
+      style: step === 1 ? { borderColor: primaryColor } : void 0,
       children: step > 1 ? /* @__PURE__ */ jsxRuntime.jsx(
         "svg",
         {
@@ -45,7 +71,7 @@ var StepIndicator = ({ step }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { class
           strokeWidth: "2",
           children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m3.5 8 3 3 6-6" })
         }
-      ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "h-2.5 w-2.5 rounded-full bg-indigo-500" })
+      ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "h-2.5 w-2.5 rounded-full", style: { backgroundColor: primaryColor } })
     }
   ),
   /* @__PURE__ */ jsxRuntime.jsx("div", { className: `h-0.5 w-12 ${step > 1 ? "bg-gray-900" : "bg-gray-200"}` }),
@@ -61,13 +87,11 @@ var CodeBlock = ({
   command,
   onCopy
 }) => {
-  const [copied, setCopied] = react.useState(false);
+  const { copy, copied } = useCopyToClipboard();
   const handleCopy = async () => {
-    const success = await copyToClipboard(command);
+    const success = await copy(command);
     if (success) {
-      setCopied(true);
       onCopy?.();
-      setTimeout(() => setCopied(false), 2e3);
     }
   };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "group relative ml-8 mt-2 min-w-0", children: [
@@ -89,11 +113,12 @@ var VersionDropdown = ({
   selectedRelease,
   onSelect,
   isLoading,
-  error
+  error,
+  primaryColor = DEFAULT_SECONDARY_COLOR
 }) => {
   if (isLoading) {
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ml-8 flex items-center gap-2 text-sm text-gray-500", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-4 w-4 animate-spin rounded-full border-2 border-gray-300 border-t-indigo-500" }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-4 w-4 animate-spin rounded-full border-2 border-gray-300", style: { borderTopColor: primaryColor } }),
       "Loading versions..."
     ] });
   }
@@ -133,13 +158,14 @@ var InstallationInstructions = ({
   instructions,
   isLoading,
   completedSteps = {},
-  isProxy = false
+  isProxy = false,
+  primaryColor = DEFAULT_SECONDARY_COLOR
 }) => {
   if (isLoading && !instructions?.steps?.length) {
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
       /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-semibold text-gray-900", children: "Installation Instructions" }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-sm text-gray-500", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-4 w-4 animate-spin rounded-full border-2 border-gray-300 border-t-indigo-500" }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-4 w-4 animate-spin rounded-full border-2 border-gray-300", style: { borderTopColor: primaryColor } }),
         "Loading instructions..."
       ] })
     ] });
@@ -149,10 +175,10 @@ var InstallationInstructions = ({
   }
   const stepOffset = isProxy ? 3 : 2;
   console.debug("[InstallationInstructions] Rendering with stepOffset", { isProxy, stepOffset, stepsCount: instructions?.steps?.length });
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `min-w-0 space-y-4 transition-opacity duration-150 ${isLoading ? "opacity-60" : ""}`, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `min-w-0 space-y-4 transition-opacity duration-200 ${isLoading ? "opacity-60" : ""}`, children: [
     /* @__PURE__ */ jsxRuntime.jsxs("h3", { className: "text-lg font-semibold text-gray-900", children: [
       "Installation Instructions",
-      isLoading && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-2 inline-block h-4 w-4 animate-spin rounded-full border-2 border-gray-300 border-t-indigo-500" })
+      isLoading && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-2 inline-block h-4 w-4 animate-spin rounded-full border-2 border-gray-300", style: { borderTopColor: primaryColor } })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx("ol", { className: "min-w-0 space-y-6 text-sm text-gray-700", children: instructions.steps.map((step, index) => {
       const completableStepNames = ["download_assets", "install"];
@@ -160,7 +186,7 @@ var InstallationInstructions = ({
       const isCompleted = canComplete && completedSteps[step.step_name];
       return /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "space-y-2", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-6 w-6 items-center justify-center rounded-full bg-indigo-100 font-semibold text-indigo-500", children: index + stepOffset }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-6 w-6 items-center justify-center rounded-full font-semibold", style: { backgroundColor: `${primaryColor}20`, color: primaryColor }, children: index + stepOffset }),
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium text-gray-900", children: step.title }),
           canComplete && /* @__PURE__ */ jsxRuntime.jsx(
             "span",
@@ -179,6 +205,8 @@ var InstallationInstructions = ({
 };
 var LinuxInstallWizard = ({
   token,
+  primaryColor = DEFAULT_SECONDARY_COLOR,
+  secondaryColor = DEFAULT_SECONDARY_COLOR,
   createServiceAccountAction,
   fetchChannelReleasesAction,
   createInstallOptionsAction,
@@ -610,7 +638,7 @@ var LinuxInstallWizard = ({
         console.error("[linux-install-wizard] Failed to save admin console URL", error);
       }
     }
-    navigateTo("/update");
+    navigateTo("/updates/checking");
   }, [installOptionsId, updateInstallOptionsAction, adminConsoleUrl, token]);
   const handleReleaseSelect = react.useCallback((release) => {
     setSelectedRelease(release);
@@ -618,14 +646,14 @@ var LinuxInstallWizard = ({
   const isProxy = networkAvailability === "proxy";
   if (step === 2) {
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-6", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(StepIndicator, { step: 2 }),
+      /* @__PURE__ */ jsxRuntime.jsx(StepIndicator, { step: 2, primaryColor }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-hidden rounded-2xl border border-gray-100 bg-gray-50 p-6", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 space-y-6", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0", children: [
           /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-xl font-semibold text-gray-900", children: isProxy ? "Linux Single Node Proxy Install" : "Linux Single Node Online Install" }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-6 space-y-6", children: [
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-indigo-500", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-6 w-6 items-center justify-center rounded-full bg-indigo-100 font-semibold", children: "1" }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", style: { color: primaryColor }, children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-6 w-6 items-center justify-center rounded-full font-semibold", style: { backgroundColor: `${primaryColor}20` }, children: "1" }),
                 /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium text-gray-900", children: "Select a version" })
               ] }),
               /* @__PURE__ */ jsxRuntime.jsx(
@@ -635,13 +663,14 @@ var LinuxInstallWizard = ({
                   selectedRelease,
                   onSelect: handleReleaseSelect,
                   isLoading: isLoadingReleases,
-                  error: releasesError
+                  error: releasesError,
+                  primaryColor
                 }
               )
             ] }),
             isProxy && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-indigo-500", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-6 w-6 items-center justify-center rounded-full bg-indigo-100 font-semibold", children: "2" }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", style: { color: primaryColor }, children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-6 w-6 items-center justify-center rounded-full font-semibold", style: { backgroundColor: `${primaryColor}20` }, children: "2" }),
                 /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium text-gray-900", children: "Configure proxy URL" })
               ] }),
               /* @__PURE__ */ jsxRuntime.jsx(
@@ -660,12 +689,13 @@ var LinuxInstallWizard = ({
                 instructions,
                 isLoading: isLoadingInstructions,
                 completedSteps,
-                isProxy
+                isProxy,
+                primaryColor
               }
             ),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-indigo-500", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-6 w-6 items-center justify-center rounded-full bg-indigo-100 font-semibold", children: (instructions?.steps?.length ?? 0) + (isProxy ? 3 : 2) }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", style: { color: primaryColor }, children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-6 w-6 items-center justify-center rounded-full font-semibold", style: { backgroundColor: `${primaryColor}20` }, children: (instructions?.steps?.length ?? 0) + (isProxy ? 3 : 2) }),
                 /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium text-gray-900", children: "(Optional) Add the Admin Console URL" })
               ] }),
               /* @__PURE__ */ jsxRuntime.jsx(
@@ -697,7 +727,8 @@ var LinuxInstallWizard = ({
             {
               type: "button",
               onClick: handleFinish,
-              className: "rounded-xl bg-indigo-500 px-4 py-2 font-medium text-white transition hover:bg-indigo-600",
+              className: "rounded-xl px-4 py-2 font-medium text-white transition hover:brightness-90",
+              style: { backgroundColor: primaryColor },
               children: "Finish"
             }
           )
@@ -708,7 +739,8 @@ var LinuxInstallWizard = ({
           /* @__PURE__ */ jsxRuntime.jsx(
             "a",
             {
-              className: "text-indigo-500 hover:text-indigo-600",
+              className: "hover:opacity-80",
+              style: { color: secondaryColor },
               href: supportPortalLink,
               target: "_blank",
               rel: "noopener noreferrer",
@@ -720,7 +752,7 @@ var LinuxInstallWizard = ({
     ] });
   }
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-6", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(StepIndicator, { step: 1 }),
+    /* @__PURE__ */ jsxRuntime.jsx(StepIndicator, { step: 1, primaryColor }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-2xl border border-gray-100 bg-gray-50 p-6", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "block text-sm font-medium text-gray-700", children: [
@@ -789,7 +821,8 @@ var LinuxInstallWizard = ({
             type: "button",
             onClick: handleContinue,
             disabled: isCreatingServiceAccount,
-            className: "rounded-xl bg-indigo-500 px-4 py-2 font-medium text-white transition hover:bg-indigo-600 disabled:cursor-not-allowed disabled:opacity-50",
+            className: "rounded-xl px-4 py-2 font-medium text-white transition-opacity duration-200 hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-50",
+            style: { backgroundColor: primaryColor },
             children: isCreatingServiceAccount ? "Creating..." : "Continue"
           }
         )
@@ -822,8 +855,17 @@ async function handle401() {
   const { redirect } = await import('next/navigation');
   return redirect("/?expired=1");
 }
+function isErrorPage(url) {
+  try {
+    const urlObj = new URL(url);
+    return urlObj.pathname === "/error";
+  } catch {
+    return url === "/error" || url.startsWith("/error?");
+  }
+}
 async function handleServerError(statusCode) {
   const { redirect } = await import('next/navigation');
+  const { cookies } = await import('next/headers');
   let sourceUrl;
   try {
     const { headers } = await import('next/headers');
@@ -831,12 +873,20 @@ async function handleServerError(statusCode) {
     const referer = headersList.get("referer");
     const host = headersList.get("host");
     const pathname = headersList.get("x-invoke-path") || headersList.get("x-forwarded-path");
-    if (referer) {
+    if (referer && !isErrorPage(referer)) {
       sourceUrl = referer;
     } else if (host && pathname) {
       const protocol = headersList.get("x-forwarded-proto") || "https";
       sourceUrl = `${protocol}://${host}${pathname}`;
     }
+    if (!sourceUrl || isErrorPage(sourceUrl)) {
+      const cookieStore = await cookies();
+      const preservedSource = cookieStore.get("portal_error_source");
+      if (preservedSource?.value) {
+        sourceUrl = decodeURIComponent(preservedSource.value);
+        cookieStore.delete("portal_error_source");
+      }
+    }
   } catch (error) {
     console.debug("[portal-components] Could not determine source URL", error);
   }
@@ -1152,11 +1202,15 @@ var fetchCustomBrandingImpl = async () => {
   const payload = await response.json();
   const brandingObject = {
     logo: payload.logoUrl,
-    title: payload.appName,
-    customColor1: payload.primaryColor,
-    customColor2: payload.secondaryColor,
+    title: payload.title,
+    primaryColor: payload.primaryColor,
+    secondaryColor: payload.secondaryColor,
     favicon: payload.faviconUrl,
-    supportPortalLink: payload.supportPortalLink || ""
+    supportPortalLink: payload.supportPortalLink || "",
+    background: payload.background,
+    backgroundImage: payload.backgroundImage,
+    customColor1: payload.customColor1,
+    customColor2: payload.customColor2
   };
   const brandingData = buffer.Buffer.from(JSON.stringify(brandingObject)).toString("base64");
   return {