sales-frontend-components 0.0.63 → 0.0.65

package/dist/index.cjs.js

@@ -1058,8 +1058,34 @@ const SEARCH_SECTIONS = [
   { value: "response", label: "\uC751\uB2F5" },
   { value: "error", label: "\uC5D0\uB7EC" }
 ];
+const getLogInfo = (log) => {
+  if (log.holdStatus === "held") {
+    if ("request" in log) {
+      return log.request;
+    }
+    if ("response" in log) {
+      return log.response;
+    }
+    if ("error" in log) {
+      return log.error;
+    }
+  }
+  return log;
+};
 const NetworkLog = ({ onClose }) => {
-  const { requests, responses, errors, clear } = salesFrontendApi.useDebugStore();
+  const {
+    requests,
+    responses,
+    errors,
+    clear,
+    isHold,
+    toggleHold,
+    heldRequests,
+    heldResponses,
+    heldErrors,
+    playAllRequests,
+    playAllResponses
+  } = salesFrontendApi.useDebugStore();
   const [searchTerm, setSearchTerm] = React.useState("");
   const [searchSection, setSearchSection] = React.useState(SEARCH_SECTIONS[0]?.value);
   const allLogs = React.useMemo(() => {
@@ -1067,52 +1093,61 @@ const NetworkLog = ({ onClose }) => {
     requests.forEach((req) => logs.push({ ...req, type: "request" }));
     responses.forEach((res) => logs.push({ ...res, type: "response" }));
     errors.forEach((err) => logs.push({ ...err, type: "error" }));
+    heldRequests.forEach((req) => logs.push({ ...req, type: "request", holdStatus: "held" }));
+    heldResponses.forEach((res) => logs.push({ ...res, type: "response", holdStatus: "held" }));
+    heldErrors.forEach((err) => logs.push({ ...err, type: "error", holdStatus: "held" }));
     logs.sort((a, b) => {
-      const aTime = "startTime" in a ? a.startTime : 0;
-      const bTime = "startTime" in b ? b.startTime : 0;
+      const aInfo = getLogInfo(a);
+      const bInfo = getLogInfo(b);
+      const aTime = "startTime" in aInfo ? aInfo.startTime : 0;
+      const bTime = "startTime" in bInfo ? bInfo.startTime : 0;
       return bTime - aTime;
     });
     return logs;
-  }, [requests, responses, errors]);
+  }, [requests, responses, errors, heldRequests, heldResponses, heldErrors]);
   const filteredLogs = React.useMemo(() => {
     if (!searchTerm) {
       return allLogs;
     }
     const lowercasedTerm = searchTerm.toLowerCase();
     return allLogs.filter((log) => {
+      const logInfo = getLogInfo(log);
       switch (searchSection) {
         case "url":
-          return log.url?.toLowerCase().includes(lowercasedTerm);
+          return logInfo.url?.toLowerCase().includes(lowercasedTerm);
         case "headers":
-          return "headers" in log && log.headers && JSON.stringify(log.headers)?.toLowerCase().includes(lowercasedTerm);
+          return "headers" in logInfo && logInfo.headers && JSON.stringify(logInfo.headers)?.toLowerCase().includes(lowercasedTerm);
         case "params":
-          return "params" in log && log.params && JSON.stringify(log.params)?.toLowerCase().includes(lowercasedTerm);
+          return "params" in logInfo && logInfo.params && JSON.stringify(logInfo.params)?.toLowerCase().includes(lowercasedTerm);
         case "data":
-          return "data" in log && log.data && log.type === "request" && JSON.stringify(log.data)?.toLowerCase().includes(lowercasedTerm);
+          return "data" in logInfo && logInfo.data && log.type === "request" && JSON.stringify(logInfo.data)?.toLowerCase().includes(lowercasedTerm);
         case "response":
-          return "data" in log && log.data && log.type === "response" && JSON.stringify(log.data)?.toLowerCase().includes(lowercasedTerm);
+          return "data" in logInfo && logInfo.data && log.type === "response" && JSON.stringify(logInfo.data)?.toLowerCase().includes(lowercasedTerm);
         case "error":
-          return log.type === "error" && JSON.stringify(log)?.toLowerCase().includes(lowercasedTerm);
+          return log.type === "error" && JSON.stringify(logInfo)?.toLowerCase().includes(lowercasedTerm);
         case "all":
         default:
-          return JSON.stringify(log).toLowerCase().includes(lowercasedTerm);
+          return JSON.stringify(logInfo).toLowerCase().includes(lowercasedTerm);
       }
     });
   }, [allLogs, searchTerm, searchSection]);
   const renderLogSummary = (log) => {
+    const logInfo = getLogInfo(log);
+    const prefix = log.holdStatus === "held" ? "[HELD] " : "";
     if (log.type === "request") {
-      return `[REQ] ${log.method.toUpperCase()} ${log.url}`;
+      return `${prefix}[REQ] ${logInfo.method.toUpperCase()} ${logInfo.url}`;
     }
-    if (log.type === "response" && "status" in log) {
-      return `[RES] ${log.method.toUpperCase()} ${log.url} - ${log.status}`;
+    if (log.type === "response" && "status" in logInfo) {
+      return `${prefix}[RES] ${logInfo.method.toUpperCase()} ${logInfo.url} - ${logInfo.status}`;
     }
-    if (log.type === "error" && "message" in log) {
-      return `[ERR] ${log.method.toUpperCase()} ${log.url} - ${log.message}`;
+    if (log.type === "error" && "message" in logInfo) {
+      return `${prefix}[ERR] ${logInfo.method.toUpperCase()} ${logInfo.url} - ${logInfo.message}`;
     }
     return "Unknown Log";
   };
   const renderLogContent = (log) => {
-    return /* @__PURE__ */ jsxRuntime.jsx("pre", { children: JSON.stringify(log, null, 2) });
+    const logInfo = getLogInfo(log);
+    return /* @__PURE__ */ jsxRuntime.jsx("pre", { children: JSON.stringify(logInfo, null, 2) });
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(salesFrontendDesignSystem.Modal.Root, { isOpen: true, onClose, modalSize: "full-screen", children: [
     /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Modal.Overlay, {}),
@@ -1130,8 +1165,13 @@ const NetworkLog = ({ onClose }) => {
               onChange: (e) => setSearchTerm(e.target.value)
             }
           ),
+          /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Checkbox, { id: "hold-checkbox", checked: isHold, onChange: toggleHold, size: "small", variant: "main", children: "Hold" }),
           /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Button, { variant: "neutral", appearance: "outline", size: "xsmall", onClick: clear, children: "clear" })
         ] }),
+        isHold && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "row" }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Button, { size: "xsmall", onClick: () => playAllRequests(), variant: "primary", appearance: "outline", children: "REQ Resolve" }),
+          /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Button, { size: "xsmall", onClick: () => playAllResponses(), variant: "primary", appearance: "outline", children: "RES Resolve" })
+        ] }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$3["log-list"], children: filteredLogs.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("p", { children: "\uD45C\uC2DC\uD560 \uB85C\uADF8\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4." }) : /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Accordion.Root, { children: filteredLogs.map((log, index) => /* @__PURE__ */ jsxRuntime.jsxs(salesFrontendDesignSystem.Accordion.Item, { children: [
           /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Accordion.HeaderButton, { children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: styles$3["log-summary"], children: renderLogSummary(log) }) }),
           /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Accordion.Content, { variant: "text", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$3["log-content"], children: renderLogContent(log) }) })
@@ -1448,21 +1488,11 @@ const menuItems = [
 
 const useEnvironment = () => {
   const [envInfo, setEnvInfo] = React.useState({
-    env: "unknown"
+    env: "prd"
   });
   React.useEffect(() => {
     const { hostname } = window.location;
-    let currentEnv = "unknown";
-    if (hostname.includes("localhost") || hostname.includes("127.0.0.1")) {
-      currentEnv = "local";
-    } else if (hostname.includes("dev.")) {
-      currentEnv = "dev";
-    } else if (hostname.includes("stg.")) {
-      currentEnv = "stage";
-    } else {
-      currentEnv = "prod";
-    }
-    setEnvInfo({ env: currentEnv });
+    setEnvInfo({ env: salesFrontendUtils.getEnvironmentFromHostname(hostname) });
   }, []);
   return envInfo;
 };
@@ -1479,7 +1509,7 @@ const DebugTool = ({ onLogin, envOverride, menuItemsOverride }) => {
   const menuItems$1 = menuItemsOverride || menuItems;
   const [isMenuOpen, setMenuOpen] = React.useState(false);
   const [activeFeature, setActiveFeature] = React.useState(null);
-  const isVisible = ["local", "dev", "stage"].includes(env);
+  const isVisible = ["local", "dev", "stg"].includes(env);
   const handleMenuClick = (itemComponent) => {
     setActiveFeature(() => itemComponent);
     setMenuOpen(false);