@diffsome/react 1.3.3 → 1.3.4

package/dist/chat.css

@@ -500,6 +500,98 @@
   }
 }
 
+/* Offline Form */
+.diffsome-chat-offline-body {
+  flex: 1;
+  padding: 24px 20px;
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+}
+
+.diffsome-chat-offline-form {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.diffsome-chat-offline-msg {
+  color: var(--diffsome-chat-text-muted);
+  font-size: 14px;
+  line-height: 1.5;
+  margin-bottom: 4px;
+}
+
+.diffsome-chat-offline-input {
+  width: 100%;
+  padding: 10px 14px;
+  border: 1px solid var(--diffsome-chat-border);
+  border-radius: 8px;
+  font-size: 14px;
+  outline: none;
+  transition: border-color 0.2s;
+  background: var(--diffsome-chat-bg);
+  color: var(--diffsome-chat-text);
+  font-family: inherit;
+  box-sizing: border-box;
+}
+
+.diffsome-chat-offline-input:focus {
+  border-color: var(--diffsome-chat-primary);
+}
+
+.diffsome-chat-offline-textarea {
+  width: 100%;
+  padding: 10px 14px;
+  border: 1px solid var(--diffsome-chat-border);
+  border-radius: 8px;
+  font-size: 14px;
+  outline: none;
+  resize: vertical;
+  transition: border-color 0.2s;
+  background: var(--diffsome-chat-bg);
+  color: var(--diffsome-chat-text);
+  font-family: inherit;
+  box-sizing: border-box;
+}
+
+.diffsome-chat-offline-textarea:focus {
+  border-color: var(--diffsome-chat-primary);
+}
+
+.diffsome-chat-offline-btn {
+  width: 100%;
+  padding: 12px;
+  background: var(--diffsome-chat-primary);
+  color: white;
+  border: none;
+  border-radius: 8px;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: opacity 0.2s;
+  font-family: inherit;
+}
+
+.diffsome-chat-offline-btn:hover:not(:disabled) {
+  opacity: 0.9;
+}
+
+.diffsome-chat-offline-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.diffsome-chat-offline-success {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  height: 100%;
+  text-align: center;
+}
+
 /* Dark mode support */
 @media (prefers-color-scheme: dark) {
   .diffsome-chat-bubble-container {

package/dist/index.js

@@ -2901,8 +2901,22 @@ var ChatBubble = ({
   const [unreadCount, setUnreadCount] = (0, import_react24.useState)(0);
   const [initialized, setInitialized] = (0, import_react24.useState)(false);
   const [ended, setEnded] = (0, import_react24.useState)(false);
+  const [offline, setOffline] = (0, import_react24.useState)(false);
+  const [offlineMessage, setOfflineMessage] = (0, import_react24.useState)("");
+  const [offlineSent, setOfflineSent] = (0, import_react24.useState)(false);
+  const [offlineLoading, setOfflineLoading] = (0, import_react24.useState)(false);
   const seenMessageIds = (0, import_react24.useRef)(/* @__PURE__ */ new Set());
   const connectionRef = (0, import_react24.useRef)(null);
+  (0, import_react24.useEffect)(() => {
+    client.chat.checkAvailability().then((result) => {
+      const data = result?.data ?? result;
+      if (data?.within_operating_hours === false) {
+        setOffline(true);
+        setOfflineMessage(data.offline_message || "We are currently offline. Please leave a message.");
+      }
+    }).catch(() => {
+    });
+  }, [client.chat]);
   const setupListeners = (0, import_react24.useCallback)((conn) => {
     conn.onMessage((msg) => {
       if (seenMessageIds.current.has(msg.id)) {
@@ -3045,6 +3059,23 @@ var ChatBubble = ({
     seenMessageIds.current.clear();
     initChat();
   };
+  const handleOfflineSubmit = async (name, email, message) => {
+    setOfflineLoading(true);
+    try {
+      await client.chat.start({
+        visitor_name: name || "Visitor",
+        visitor_email: email,
+        initial_message: message,
+        channel: "web",
+        metadata: { offline: true }
+      });
+      setOfflineSent(true);
+    } catch (error) {
+      console.error("Failed to send offline message:", error);
+    } finally {
+      setOfflineLoading(false);
+    }
+  };
   (0, import_react24.useEffect)(() => {
     return () => {
       connectionRef.current?.disconnect();
@@ -3057,7 +3088,17 @@ var ChatBubble = ({
       className: `diffsome-chat-bubble-container ${positionClass} ${className}`,
       style: { "--diffsome-chat-primary": primaryColor, zIndex },
       children: [
-        isOpen && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        isOpen && (offline ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          OfflineForm,
+          {
+            title,
+            offlineMessage,
+            onClose: handleClose,
+            onSubmit: handleOfflineSubmit,
+            submitted: offlineSent,
+            loading: offlineLoading
+          }
+        ) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           ChatWidget,
           {
             messages,
@@ -3077,7 +3118,7 @@ var ChatBubble = ({
             loginUrl,
             loginPromptMessage
           }
-        ),
+        )),
         /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
           "button",
           {
@@ -3114,6 +3155,72 @@ var ChatBubble = ({
     }
   );
 };
+var OfflineForm = ({
+  title,
+  offlineMessage,
+  onClose,
+  onSubmit,
+  submitted,
+  loading
+}) => {
+  const [name, setName] = (0, import_react24.useState)("");
+  const [email, setEmail] = (0, import_react24.useState)("");
+  const [message, setMessage] = (0, import_react24.useState)("");
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    if (!email || !message) return;
+    onSubmit(name, email, message);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "diffsome-chat-widget", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "diffsome-chat-header", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "diffsome-chat-header-info", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "diffsome-chat-header-title", children: title }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "diffsome-chat-header-subtitle", children: "Offline" })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { className: "diffsome-chat-header-close", onClick: onClose, "aria-label": "Close", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", width: "24", height: "24", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" }) }) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "diffsome-chat-offline-body", children: submitted ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "diffsome-chat-offline-success", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "#10b981", width: "48", height: "48", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { style: { fontWeight: 600, fontSize: "16px", color: "#1f2937" }, children: "Message sent!" }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { style: { color: "#6b7280" }, children: "We'll get back to you soon." })
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("form", { onSubmit: handleSubmit, className: "diffsome-chat-offline-form", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "diffsome-chat-offline-msg", children: offlineMessage }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        "input",
+        {
+          type: "text",
+          placeholder: "Your name",
+          value: name,
+          onChange: (e) => setName(e.target.value),
+          className: "diffsome-chat-offline-input"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        "input",
+        {
+          type: "email",
+          placeholder: "Email *",
+          value: email,
+          onChange: (e) => setEmail(e.target.value),
+          required: true,
+          className: "diffsome-chat-offline-input"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        "textarea",
+        {
+          placeholder: "Your message *",
+          value: message,
+          onChange: (e) => setMessage(e.target.value),
+          required: true,
+          rows: 4,
+          className: "diffsome-chat-offline-textarea"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { type: "submit", disabled: loading || !email || !message, className: "diffsome-chat-offline-btn", children: loading ? "Sending..." : "Leave Message" })
+    ] }) })
+  ] });
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ChatBubble,

package/dist/index.mjs

@@ -2809,8 +2809,22 @@ var ChatBubble = ({
   const [unreadCount, setUnreadCount] = useState22(0);
   const [initialized, setInitialized] = useState22(false);
   const [ended, setEnded] = useState22(false);
+  const [offline, setOffline] = useState22(false);
+  const [offlineMessage, setOfflineMessage] = useState22("");
+  const [offlineSent, setOfflineSent] = useState22(false);
+  const [offlineLoading, setOfflineLoading] = useState22(false);
   const seenMessageIds = useRef3(/* @__PURE__ */ new Set());
   const connectionRef = useRef3(null);
+  useEffect20(() => {
+    client.chat.checkAvailability().then((result) => {
+      const data = result?.data ?? result;
+      if (data?.within_operating_hours === false) {
+        setOffline(true);
+        setOfflineMessage(data.offline_message || "We are currently offline. Please leave a message.");
+      }
+    }).catch(() => {
+    });
+  }, [client.chat]);
   const setupListeners = useCallback22((conn) => {
     conn.onMessage((msg) => {
       if (seenMessageIds.current.has(msg.id)) {
@@ -2953,6 +2967,23 @@ var ChatBubble = ({
     seenMessageIds.current.clear();
     initChat();
   };
+  const handleOfflineSubmit = async (name, email, message) => {
+    setOfflineLoading(true);
+    try {
+      await client.chat.start({
+        visitor_name: name || "Visitor",
+        visitor_email: email,
+        initial_message: message,
+        channel: "web",
+        metadata: { offline: true }
+      });
+      setOfflineSent(true);
+    } catch (error) {
+      console.error("Failed to send offline message:", error);
+    } finally {
+      setOfflineLoading(false);
+    }
+  };
   useEffect20(() => {
     return () => {
       connectionRef.current?.disconnect();
@@ -2965,7 +2996,17 @@ var ChatBubble = ({
       className: `diffsome-chat-bubble-container ${positionClass} ${className}`,
       style: { "--diffsome-chat-primary": primaryColor, zIndex },
       children: [
-        isOpen && /* @__PURE__ */ jsx6(
+        isOpen && (offline ? /* @__PURE__ */ jsx6(
+          OfflineForm,
+          {
+            title,
+            offlineMessage,
+            onClose: handleClose,
+            onSubmit: handleOfflineSubmit,
+            submitted: offlineSent,
+            loading: offlineLoading
+          }
+        ) : /* @__PURE__ */ jsx6(
           ChatWidget,
           {
             messages,
@@ -2985,7 +3026,7 @@ var ChatBubble = ({
             loginUrl,
             loginPromptMessage
           }
-        ),
+        )),
         /* @__PURE__ */ jsxs5(
           "button",
           {
@@ -3022,6 +3063,72 @@ var ChatBubble = ({
     }
   );
 };
+var OfflineForm = ({
+  title,
+  offlineMessage,
+  onClose,
+  onSubmit,
+  submitted,
+  loading
+}) => {
+  const [name, setName] = useState22("");
+  const [email, setEmail] = useState22("");
+  const [message, setMessage] = useState22("");
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    if (!email || !message) return;
+    onSubmit(name, email, message);
+  };
+  return /* @__PURE__ */ jsxs5("div", { className: "diffsome-chat-widget", children: [
+    /* @__PURE__ */ jsxs5("div", { className: "diffsome-chat-header", children: [
+      /* @__PURE__ */ jsxs5("div", { className: "diffsome-chat-header-info", children: [
+        /* @__PURE__ */ jsx6("div", { className: "diffsome-chat-header-title", children: title }),
+        /* @__PURE__ */ jsx6("div", { className: "diffsome-chat-header-subtitle", children: "Offline" })
+      ] }),
+      /* @__PURE__ */ jsx6("button", { className: "diffsome-chat-header-close", onClick: onClose, "aria-label": "Close", children: /* @__PURE__ */ jsx6("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", width: "24", height: "24", children: /* @__PURE__ */ jsx6("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" }) }) })
+    ] }),
+    /* @__PURE__ */ jsx6("div", { className: "diffsome-chat-offline-body", children: submitted ? /* @__PURE__ */ jsxs5("div", { className: "diffsome-chat-offline-success", children: [
+      /* @__PURE__ */ jsx6("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "#10b981", width: "48", height: "48", children: /* @__PURE__ */ jsx6("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" }) }),
+      /* @__PURE__ */ jsx6("p", { style: { fontWeight: 600, fontSize: "16px", color: "#1f2937" }, children: "Message sent!" }),
+      /* @__PURE__ */ jsx6("p", { style: { color: "#6b7280" }, children: "We'll get back to you soon." })
+    ] }) : /* @__PURE__ */ jsxs5("form", { onSubmit: handleSubmit, className: "diffsome-chat-offline-form", children: [
+      /* @__PURE__ */ jsx6("p", { className: "diffsome-chat-offline-msg", children: offlineMessage }),
+      /* @__PURE__ */ jsx6(
+        "input",
+        {
+          type: "text",
+          placeholder: "Your name",
+          value: name,
+          onChange: (e) => setName(e.target.value),
+          className: "diffsome-chat-offline-input"
+        }
+      ),
+      /* @__PURE__ */ jsx6(
+        "input",
+        {
+          type: "email",
+          placeholder: "Email *",
+          value: email,
+          onChange: (e) => setEmail(e.target.value),
+          required: true,
+          className: "diffsome-chat-offline-input"
+        }
+      ),
+      /* @__PURE__ */ jsx6(
+        "textarea",
+        {
+          placeholder: "Your message *",
+          value: message,
+          onChange: (e) => setMessage(e.target.value),
+          required: true,
+          rows: 4,
+          className: "diffsome-chat-offline-textarea"
+        }
+      ),
+      /* @__PURE__ */ jsx6("button", { type: "submit", disabled: loading || !email || !message, className: "diffsome-chat-offline-btn", children: loading ? "Sending..." : "Leave Message" })
+    ] }) })
+  ] });
+};
 export {
   ChatBubble,
   ChatInput,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@diffsome/react",
-  "version": "1.3.3",
+  "version": "1.3.4",
   "description": "React hooks and providers for Diffsome SDK - Headless e-commerce & CMS",
   "main": "dist/index.js",
   "module": "dist/index.mjs",