@zauru-sdk/components 6.6.0 → 6.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/CHANGELOG.md +22 -0
  2. package/dist/DiscountHistory/RejectionPercentageHistoryList.d.ts +2 -0
  3. package/dist/Form/Checkbox/index.d.ts +2 -0
  4. package/dist/esm/DiscountHistory/RejectionPercentageHistoryList.js +16 -7
  5. package/dist/esm/Form/Checkbox/index.js +7 -4
  6. package/package.json +8 -8
  7. package/src/DiscountHistory/RejectionPercentageHistoryList.tsx +27 -10
  8. package/src/Form/Checkbox/index.tsx +33 -2
package/CHANGELOG.md CHANGED
@@ -3,6 +3,28 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ # [6.8.0](https://github.com/intuitiva/zauru-typescript-sdk/compare/@zauru-sdk/components@6.7.0...@zauru-sdk/components@6.8.0) (2026-09-19)
7
+
8
+
9
+ ### Features
10
+
11
+ * guardar y mostrar motivo en historial de % rechazo ([02e546f](https://github.com/intuitiva/zauru-typescript-sdk/commit/02e546f716538b4c91542398e3984153145d862e))
12
+
13
+
14
+
15
+
16
+
17
+ # [6.7.0](https://github.com/intuitiva/zauru-typescript-sdk/compare/@zauru-sdk/components@6.6.0...@zauru-sdk/components@6.7.0) (2026-09-18)
18
+
19
+
20
+ ### Features
21
+
22
+ * descuento sucesivo en porcentajes de rechazo ([c437bbd](https://github.com/intuitiva/zauru-typescript-sdk/commit/c437bbd6a1305fd417c4ac55f8e07eb244f2fe3d))
23
+
24
+
25
+
26
+
27
+
6
28
  # [6.6.0](https://github.com/intuitiva/zauru-typescript-sdk/compare/@zauru-sdk/components@6.5.6...@zauru-sdk/components@6.6.0) (2026-09-18)
7
29
 
8
30
 
package/dist/DiscountHistory/RejectionPercentageHistoryList.d.ts CHANGED
@@ -6,6 +6,8 @@ export type RejectionPercentageHistoryItem = {
6
6
  employee_name?: string;
7
7
  created_at?: string;
8
8
  type?: string;
9
+ successive?: boolean;
10
+ observations?: string;
9
11
  };
10
12
  type NamedRecord = {
11
13
  id?: number;
package/dist/Form/Checkbox/index.d.ts CHANGED
@@ -10,6 +10,8 @@ type Props = {
10
10
  disabled?: boolean;
11
11
  borderColor?: string;
12
12
  required?: boolean;
13
+ helpText?: string;
14
+ helpAriaLabel?: string;
13
15
  };
14
16
  export declare const CheckBox: (props: Props) => import("react/jsx-runtime").JSX.Element;
15
17
  export {};
package/dist/esm/DiscountHistory/RejectionPercentageHistoryList.js CHANGED
@@ -36,19 +36,28 @@ export const RejectionPercentageHistoryList = ({ items, employees, agencies, act
36
36
  }
37
37
  return (_jsx("div", { className: `space-y-3 max-h-60 overflow-y-auto ${className}`.trim(), children: items.map((item, index) => {
38
38
  const isAutomatic = isAutomaticRejectionRuleHistoryType(item.type);
39
+ const isSuccessive = item.successive === true;
39
40
  const employeeName = item.employee_name?.trim() ||
40
41
  findName(employees, item.employee_id) ||
41
42
  (item.employee_id != null ? `ID: ${item.employee_id}` : "No especificado");
42
43
  const agencyName = findName(agencies, item.agency_id) ||
43
44
  (item.agency_id != null ? `ID: ${item.agency_id}` : "No especificada");
44
45
  const description = item.description || "Sin descripción";
45
- return (_jsxs("div", { className: isAutomatic
46
- ? "border border-indigo-200 rounded-lg p-3 bg-indigo-50"
47
- : "border border-gray-100 rounded-lg p-3 bg-gray-50", children: [_jsxs("div", { className: "flex justify-between items-start gap-3 mb-2", children: [_jsxs("div", { className: "flex items-center gap-2 min-w-0", children: [_jsx("span", { className: isAutomatic
48
- ? "font-semibold text-indigo-800"
49
- : "font-semibold text-blue-600", children: formatSignedPercentage(Number(item.discount) || 0, isAutomatic) }), isAutomatic ? (_jsx("span", { className: "shrink-0 whitespace-nowrap rounded-full bg-indigo-100 px-2 py-0.5 text-xs font-medium text-indigo-800", children: "Autom\u00E1tico" })) : null] }), item.created_at ? (_jsx("span", { className: "text-xs text-gray-500 shrink-0", children: formatHistoryDate(item.created_at) })) : null] }), _jsx("p", { className: isAutomatic
50
- ? "text-sm text-indigo-900 mb-1"
51
- : "text-sm text-gray-700 mb-1", title: description, children: description }), _jsxs("div", { className: "flex justify-between gap-3 text-xs text-gray-500", children: [_jsx("span", { className: "min-w-0", children: isAutomatic
46
+ const observations = item.observations?.trim() ?? "";
47
+ const noteClassName = isSuccessive
48
+ ? "text-sm text-amber-900 mb-1"
49
+ : isAutomatic
50
+ ? "text-sm text-indigo-900 mb-1"
51
+ : "text-sm text-gray-700 mb-1";
52
+ return (_jsxs("div", { className: isSuccessive
53
+ ? "border border-amber-200 rounded-lg p-3 bg-amber-50"
54
+ : isAutomatic
55
+ ? "border border-indigo-200 rounded-lg p-3 bg-indigo-50"
56
+ : "border border-gray-100 rounded-lg p-3 bg-gray-50", children: [_jsxs("div", { className: "flex justify-between items-start gap-3 mb-2", children: [_jsxs("div", { className: "flex items-center gap-2 min-w-0", children: [_jsx("span", { className: isSuccessive
57
+ ? "font-semibold text-amber-800"
58
+ : isAutomatic
59
+ ? "font-semibold text-indigo-800"
60
+ : "font-semibold text-blue-600", children: formatSignedPercentage(Number(item.discount) || 0, isAutomatic) }), isSuccessive ? (_jsx("span", { className: "shrink-0 whitespace-nowrap rounded-full bg-amber-100 px-2 py-0.5 text-xs font-medium text-amber-800", children: "Sucesivo" })) : null, isAutomatic ? (_jsx("span", { className: "shrink-0 whitespace-nowrap rounded-full bg-indigo-100 px-2 py-0.5 text-xs font-medium text-indigo-800", children: "Autom\u00E1tico" })) : null] }), item.created_at ? (_jsx("span", { className: "text-xs text-gray-500 shrink-0", children: formatHistoryDate(item.created_at) })) : null] }), _jsx("p", { className: noteClassName, title: description, children: description }), observations ? (_jsxs("p", { className: `${noteClassName} break-words whitespace-pre-wrap`, children: [_jsx("span", { className: "font-medium", children: "Motivo: " }), observations] })) : null, _jsxs("div", { className: "flex justify-between gap-3 text-xs text-gray-500", children: [_jsx("span", { className: "min-w-0", children: isAutomatic
52
61
  ? "Aplicado por el sistema"
53
62
  : `${actorLabel}: ${employeeName}` }), _jsxs("span", { className: "shrink-0", children: ["Agencia: ", agencyName] })] })] }, `${item.created_at ?? "entry"}-${item.type ?? "manual"}-${index}`));
54
63
  }) }));
package/dist/esm/Form/Checkbox/index.js CHANGED
@@ -1,9 +1,11 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { QuestionMarkIconSVG } from "@zauru-sdk/icons";
2
3
  import { useEffect, useState } from "react";
3
4
  import { useFormContext } from "react-hook-form";
4
5
  export const CheckBox = (props) => {
5
- const { id, name, defaultValue = false, onChange, disabled = false, label, required = false, } = props;
6
+ const { id, name, defaultValue = false, onChange, disabled = false, label, required = false, helpText, helpAriaLabel = "Más información", } = props;
6
7
  const [checked, setChecked] = useState(defaultValue);
8
+ const [showHelp, setShowHelp] = useState(false);
7
9
  useEffect(() => {
8
10
  setChecked(defaultValue);
9
11
  }, [defaultValue]);
@@ -27,9 +29,10 @@ export const CheckBox = (props) => {
27
29
  : undefined; // Solo usar register si está disponible
28
30
  const color = error ? "red" : "gray";
29
31
  const borderColor = disabled ? "border-gray-300" : `border-${color}-500`;
30
- const inputComponent = (_jsx("input", { type: "checkbox", id: id ?? name, checked: checked, className: `form-checkbox h-4 w-4 text-indigo-600 ${borderColor} focus:border-indigo-500 focus:ring-indigo-500`, disabled: disabled, ...(register ?? {}), name: name, onChange: handleInputChange }));
31
- if (!error && !label) {
32
+ const inputComponent = (_jsx("input", { type: "checkbox", id: id ?? name, checked: checked, className: `form-checkbox h-4 w-4 text-indigo-600 ${borderColor} ${disabled ? "cursor-not-allowed" : "cursor-pointer"} focus:border-indigo-500 focus:ring-indigo-500`, disabled: disabled, ...(register ?? {}), name: name, onChange: handleInputChange }));
33
+ const helpButton = helpText ? (_jsxs("div", { className: "relative ml-2 shrink-0", children: [_jsx("button", { type: "button", className: "cursor-pointer inline-flex items-center justify-center text-gray-500 hover:text-indigo-600 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-1 rounded-full", "aria-label": helpAriaLabel, "aria-expanded": showHelp, onMouseEnter: () => setShowHelp(true), onMouseLeave: () => setShowHelp(false), onFocus: () => setShowHelp(true), onBlur: () => setShowHelp(false), children: _jsx(QuestionMarkIconSVG, {}) }), showHelp ? (_jsx("div", { className: "absolute z-50 left-1/2 -translate-x-1/2 bottom-full mb-2 w-72 max-w-[min(18rem,calc(100vw-2rem))] rounded border border-gray-200 bg-white p-2 text-left text-sm text-black shadow motion-reduce:transition-none", children: helpText })) : null] })) : null;
34
+ if (!error && !label && !helpText) {
32
35
  return inputComponent;
33
36
  }
34
- return (_jsxs("div", { className: "col-span-6 sm:col-span-3", children: [_jsxs("div", { className: `flex items-center ${borderColor}`, children: [inputComponent, label && (_jsxs("label", { htmlFor: id ?? name, className: `ml-2 block text-sm font-medium text-${color}-700 dark:text-${color}-500`, children: [label, required && _jsx("span", { className: "text-red-500", children: "*" })] }))] }), error && (_jsxs("p", { className: `mt-2 text-sm text-${color}-600 dark:text-${color}-500`, children: [_jsx("span", { className: "font-medium", children: "Oops!" }), " ", error.message?.toString()] }))] }));
37
+ return (_jsxs("div", { className: "col-span-6 sm:col-span-3", children: [_jsxs("div", { className: `flex items-center ${borderColor}`, children: [inputComponent, label && (_jsxs("label", { htmlFor: id ?? name, className: `ml-2 block text-sm font-medium text-${color}-700 dark:text-${color}-500`, children: [label, required && _jsx("span", { className: "text-red-500", children: "*" })] })), helpButton] }), error && (_jsxs("p", { className: `mt-2 text-sm text-${color}-600 dark:text-${color}-500`, children: [_jsx("span", { className: "font-medium", children: "Oops!" }), " ", error.message?.toString()] }))] }));
35
38
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zauru-sdk/components",
3
- "version": "6.6.0",
3
+ "version": "6.8.0",
4
4
  "description": "Componentes reutilizables en las WebApps de Zauru.",
5
5
  "main": "./dist/esm/index.js",
6
6
  "module": "./dist/esm/index.js",
@@ -44,12 +44,12 @@
44
44
  "@reduxjs/toolkit": "^2.2.1",
45
45
  "@remix-run/node": "^2.8.1",
46
46
  "@remix-run/react": "^2.8.1",
47
- "@zauru-sdk/common": "^6.7.0",
48
- "@zauru-sdk/hooks": "^6.3.12",
49
- "@zauru-sdk/icons": "^6.0.0",
50
- "@zauru-sdk/redux": "^6.5.10",
51
- "@zauru-sdk/types": "^6.17.0",
52
- "@zauru-sdk/utils": "^6.17.0",
47
+ "@zauru-sdk/common": "^6.8.1",
48
+ "@zauru-sdk/hooks": "^6.3.14",
49
+ "@zauru-sdk/icons": "^6.1.0",
50
+ "@zauru-sdk/redux": "^6.5.12",
51
+ "@zauru-sdk/types": "^6.19.0",
52
+ "@zauru-sdk/utils": "^6.18.1",
53
53
  "browser-image-compression": "^2.0.2",
54
54
  "framer-motion": "^12.0.0",
55
55
  "jsonwebtoken": "^9.0.2",
@@ -62,5 +62,5 @@
62
62
  "styled-components": "^5.3.5",
63
63
  "zod": "^3.23.8"
64
64
  },
65
- "gitHead": "d3483aa3b55a9a692f955e6a56d13f33b70db1c4"
65
+ "gitHead": "7dd259a98a24d4aba27e749c085eda117c0d657d"
66
66
  }
package/src/DiscountHistory/RejectionPercentageHistoryList.tsx CHANGED
@@ -12,6 +12,8 @@ export type RejectionPercentageHistoryItem = {
12
12
  employee_name?: string;
13
13
  created_at?: string;
14
14
  type?: string;
15
+ successive?: boolean;
16
+ observations?: string;
15
17
  };
16
18
 
17
19
  type NamedRecord = {
@@ -78,6 +80,7 @@ export const RejectionPercentageHistoryList = ({
78
80
  <div className={`space-y-3 max-h-60 overflow-y-auto ${className}`.trim()}>
79
81
  {items.map((item, index) => {
80
82
  const isAutomatic = isAutomaticRejectionRuleHistoryType(item.type);
83
+ const isSuccessive = item.successive === true;
81
84
  const employeeName =
82
85
  item.employee_name?.trim() ||
83
86
  findName(employees, item.employee_id) ||
@@ -86,12 +89,20 @@ export const RejectionPercentageHistoryList = ({
86
89
  findName(agencies, item.agency_id) ||
87
90
  (item.agency_id != null ? `ID: ${item.agency_id}` : "No especificada");
88
91
  const description = item.description || "Sin descripción";
92
+ const observations = item.observations?.trim() ?? "";
93
+ const noteClassName = isSuccessive
94
+ ? "text-sm text-amber-900 mb-1"
95
+ : isAutomatic
96
+ ? "text-sm text-indigo-900 mb-1"
97
+ : "text-sm text-gray-700 mb-1";
89
98
 
90
99
  return (
91
100
  <div
92
101
  key={`${item.created_at ?? "entry"}-${item.type ?? "manual"}-${index}`}
93
102
  className={
94
- isAutomatic
103
+ isSuccessive
104
+ ? "border border-amber-200 rounded-lg p-3 bg-amber-50"
105
+ : isAutomatic
95
106
  ? "border border-indigo-200 rounded-lg p-3 bg-indigo-50"
96
107
  : "border border-gray-100 rounded-lg p-3 bg-gray-50"
97
108
  }
@@ -100,13 +111,20 @@ export const RejectionPercentageHistoryList = ({
100
111
  <div className="flex items-center gap-2 min-w-0">
101
112
  <span
102
113
  className={
103
- isAutomatic
114
+ isSuccessive
115
+ ? "font-semibold text-amber-800"
116
+ : isAutomatic
104
117
  ? "font-semibold text-indigo-800"
105
118
  : "font-semibold text-blue-600"
106
119
  }
107
120
  >
108
121
  {formatSignedPercentage(Number(item.discount) || 0, isAutomatic)}
109
122
  </span>
123
+ {isSuccessive ? (
124
+ <span className="shrink-0 whitespace-nowrap rounded-full bg-amber-100 px-2 py-0.5 text-xs font-medium text-amber-800">
125
+ Sucesivo
126
+ </span>
127
+ ) : null}
110
128
  {isAutomatic ? (
111
129
  <span className="shrink-0 whitespace-nowrap rounded-full bg-indigo-100 px-2 py-0.5 text-xs font-medium text-indigo-800">
112
130
  Automático
@@ -119,16 +137,15 @@ export const RejectionPercentageHistoryList = ({
119
137
  </span>
120
138
  ) : null}
121
139
  </div>
122
- <p
123
- className={
124
- isAutomatic
125
- ? "text-sm text-indigo-900 mb-1"
126
- : "text-sm text-gray-700 mb-1"
127
- }
128
- title={description}
129
- >
140
+ <p className={noteClassName} title={description}>
130
141
  {description}
131
142
  </p>
143
+ {observations ? (
144
+ <p className={`${noteClassName} break-words whitespace-pre-wrap`}>
145
+ <span className="font-medium">Motivo: </span>
146
+ {observations}
147
+ </p>
148
+ ) : null}
132
149
  <div className="flex justify-between gap-3 text-xs text-gray-500">
133
150
  <span className="min-w-0">
134
151
  {isAutomatic
package/src/Form/Checkbox/index.tsx CHANGED
@@ -1,3 +1,4 @@
1
+ import { QuestionMarkIconSVG } from "@zauru-sdk/icons";
1
2
  import React, { useEffect, useState } from "react";
2
3
  import { useFormContext } from "react-hook-form";
3
4
 
@@ -13,6 +14,8 @@ type Props = {
13
14
  disabled?: boolean;
14
15
  borderColor?: string;
15
16
  required?: boolean;
17
+ helpText?: string;
18
+ helpAriaLabel?: string;
16
19
  };
17
20
 
18
21
  export const CheckBox = (props: Props) => {
@@ -24,9 +27,12 @@ export const CheckBox = (props: Props) => {
24
27
  disabled = false,
25
28
  label,
26
29
  required = false,
30
+ helpText,
31
+ helpAriaLabel = "Más información",
27
32
  } = props;
28
33
 
29
34
  const [checked, setChecked] = useState(defaultValue);
35
+ const [showHelp, setShowHelp] = useState(false);
30
36
 
31
37
  useEffect(() => {
32
38
  setChecked(defaultValue);
@@ -63,7 +69,9 @@ export const CheckBox = (props: Props) => {
63
69
  type="checkbox"
64
70
  id={id ?? name}
65
71
  checked={checked}
66
- className={`form-checkbox h-4 w-4 text-indigo-600 ${borderColor} focus:border-indigo-500 focus:ring-indigo-500`}
72
+ className={`form-checkbox h-4 w-4 text-indigo-600 ${borderColor} ${
73
+ disabled ? "cursor-not-allowed" : "cursor-pointer"
74
+ } focus:border-indigo-500 focus:ring-indigo-500`}
67
75
  disabled={disabled}
68
76
  {...(register ?? {})}
69
77
  name={name}
@@ -71,7 +79,29 @@ export const CheckBox = (props: Props) => {
71
79
  />
72
80
  );
73
81
 
74
- if (!error && !label) {
82
+ const helpButton = helpText ? (
83
+ <div className="relative ml-2 shrink-0">
84
+ <button
85
+ type="button"
86
+ className="cursor-pointer inline-flex items-center justify-center text-gray-500 hover:text-indigo-600 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-1 rounded-full"
87
+ aria-label={helpAriaLabel}
88
+ aria-expanded={showHelp}
89
+ onMouseEnter={() => setShowHelp(true)}
90
+ onMouseLeave={() => setShowHelp(false)}
91
+ onFocus={() => setShowHelp(true)}
92
+ onBlur={() => setShowHelp(false)}
93
+ >
94
+ <QuestionMarkIconSVG />
95
+ </button>
96
+ {showHelp ? (
97
+ <div className="absolute z-50 left-1/2 -translate-x-1/2 bottom-full mb-2 w-72 max-w-[min(18rem,calc(100vw-2rem))] rounded border border-gray-200 bg-white p-2 text-left text-sm text-black shadow motion-reduce:transition-none">
98
+ {helpText}
99
+ </div>
100
+ ) : null}
101
+ </div>
102
+ ) : null;
103
+
104
+ if (!error && !label && !helpText) {
75
105
  return inputComponent;
76
106
  }
77
107
 
@@ -88,6 +118,7 @@ export const CheckBox = (props: Props) => {
88
118
  {required && <span className="text-red-500">*</span>}
89
119
  </label>
90
120
  )}
121
+ {helpButton}
91
122
  </div>
92
123
  {error && (
93
124
  <p className={`mt-2 text-sm text-${color}-600 dark:text-${color}-500`}>