feat: add setCustomize method

Author: multivoltage

.changeset/tidy-bananas-find.md

@@ -0,0 +1,5 @@
+---
+"react-use-zendesk": minor
+---
+
+add setCustomize method

README.md

@@ -115,6 +115,7 @@ Library add some useful fields.
 | useSessionAuth | () => void | See details on [Zendesk docs](https://developer.zendesk.com/api-reference/widget-messaging/web/authentication/).
 | logoutUser            | () => void                                 | Your app may have a logout function that brings users back to a login screen. In this case, revert the messaging Web Widget to a pre-login state
 | resetWidget            | () => void                                 | This method clears all widget local state, including user data, conversations, and connections.
+| setCustomize | (theme: Partial<ZendeskCustomizationTheme>) => void | Dynamically updates the Web Widget Messenger’s color theme so it aligns with your brand or site theme.
 | isOpen            | boolean                                 | this flag indicates if chat is visible or hidden. Derivated from from `onOpen` and `onCLose`
 | unreadMessages            | number / undefined                                 | this flag indicates number of unread messages . Derivated from from `onUnreadMessages`. Before internal callback this flag is `undefined`                       |                                                                                                                                           
 

apps/docs/README.md

@@ -1 +1 @@
-## [TBD]
+## See [README.md](https://github.com/multivoltage/react-use-zendesk/blob/main/README.md)

apps/docs/app/components/ExampleList.tsx

@@ -260,6 +260,29 @@ export const ExampleList: React.FC = () => {
         resetWidget();
       },
     },
+    {
+      id: "setCustomize",
+      title: "Set Customize",
+      description: (
+        <div>
+          Dynamically updates the Web Widget Messenger’s color theme so it aligns with your brand or site theme.{" "}
+          <a
+            href="https://developer.zendesk.com/api-reference/widget-messaging/web/core/#set-customize"
+            target="_blank"
+          >
+            Set Customize
+          </a>
+
+        </div>
+      ),
+      buttonText: "customize",
+      onClick({ setCustomize }) {
+        setCustomize({
+          primary: "#DB5F46",
+          background: "#518e37ff"
+        });
+      },
+    },
     {
       id: "useSessionAuth",
       title: "useSessionAuth",

packages/react-use-zendesk/src/provider.tsx

@@ -5,6 +5,7 @@ import {
   LoginFailedError,
   ZendeskContextValues,
   ZendeskConversationField,
+  ZendeskCustomizationTheme,
   ZendeskProviderProps,
 } from "./types";
 import { PropsWithChildren } from "react";
@@ -145,6 +146,12 @@ export const ZendeskProvider: React.FC<
     });
   }, []);
 
+  const setCustomize = React.useCallback((theme: Partial<ZendeskCustomizationTheme>) => {
+    ZendeskApi("messenger:set", "customization", {
+      theme
+    });
+  }, []);
+
   const useSessionAuth = React.useCallback(() => {
     ZendeskApi("messenger", "useSessionAuth");
   }, []);
@@ -162,6 +169,7 @@ export const ZendeskProvider: React.FC<
     loginUser,
     logoutUser,
     resetWidget,
+    setCustomize,
     useSessionAuth,
     isOpen,
     unreadMessages,

packages/react-use-zendesk/src/types.ts

@@ -17,6 +17,24 @@ export type LoginFailedError = {
   type: string;
 };
 
+export type ZendeskCustomizationTheme = {
+  primary: string;
+  onPrimary: string;
+  message: string;
+  onMessage: string;
+  action: string;
+  onAction: string;
+  businessMessage: string;
+  onBusinessMessage: string;
+  background: string;
+  onBackground: string;
+  error: string;
+  onError: string;
+  notify: string;
+  onNotify: string
+  onSecondaryAction: string;
+}
+
 export type ZendeskContextValues = {
   show: () => void;
   hide: () => void;
@@ -35,6 +53,7 @@ export type ZendeskContextValues = {
   ) => void;
   logoutUser: () => void;
   resetWidget: () => void;
+  setCustomize: (theme: Partial<ZendeskCustomizationTheme>) => void;
   useSessionAuth: () => void;
   isOpen: boolean;
   unreadMessages: number | undefined;
@@ -54,4 +73,5 @@ export type ZendeskMethod =
   | "loginUser"
   | "logoutUser"
   | "resetWidget"
-  | "useSessionAuth";
+  | "customization"
+  | "useSessionAuth"