@widergy/energy-ui 3.124.0 → 3.125.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [3.125.0](https://github.com/widergy/energy-ui/compare/v3.124.0...v3.125.0) (2025-12-09)
+
+
+### Features
+
+* [PROMI] calendar ([#736](https://github.com/widergy/energy-ui/issues/736)) ([32cc5c2](https://github.com/widergy/energy-ui/commit/32cc5c2e7816acbbb3ba760f521695d7fb687a7b))
+
 # [3.124.0](https://github.com/widergy/energy-ui/compare/v3.123.1...v3.124.0) (2025-12-09)
 
 

package/dist/components/UTCalendar/components/Day/index.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = require("prop-types");
+var _dayjs = _interopRequireDefault(require("dayjs"));
+var _UTTouchableWithoutFeedback = _interopRequireDefault(require("../../../UTTouchableWithoutFeedback"));
+var _constants = require("../../constants");
+var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const GenericRenderDay = _ref => {
+  let {
+    date,
+    bookingOptions,
+    selectedDayIndex,
+    setSelectedDayIndex,
+    dayInCurrentMonth
+  } = _ref;
+  const index = bookingOptions.findIndex(item => (0, _dayjs.default)(item.value).isSame((0, _dayjs.default)(date), 'day'));
+  const available = dayInCurrentMonth && index !== -1;
+  const isSelected = index === selectedDayIndex;
+  return /*#__PURE__*/_react.default.createElement(_UTTouchableWithoutFeedback.default, {
+    className: "".concat(_stylesModule.default.daysRender, "  ").concat(!available && _stylesModule.default.disabledButton, " ").concat(isSelected && _stylesModule.default.selectedDay, " ").concat(!dayInCurrentMonth && _stylesModule.default.notInCurrentMonth),
+    onClick: available ? () => setSelectedDayIndex(index) : undefined
+  }, dayInCurrentMonth ? (0, _dayjs.default)(date).format(_constants.DAY_FORMAT) : '');
+};
+GenericRenderDay.propTypes = {
+  date: _propTypes.object,
+  bookingOptions: _propTypes.object,
+  selectedDayIndex: _propTypes.number,
+  setSelectedDayIndex: _propTypes.func,
+  dayInCurrentMonth: _propTypes.bool
+};
+var _default = exports.default = GenericRenderDay;

package/dist/components/UTCalendar/components/Day/styles.module.scss

@@ -0,0 +1,36 @@
+.dateContainer {
+  grid-gap: 16px;
+  padding: 16px;
+
+  & > * {
+    padding: 0;
+  }
+}
+
+.daysRender {
+  background-color: var(--light01);
+  color: var(--gray04);
+  place-content: center;
+  flex-grow: 1;
+  height: 40px;
+  flex-wrap: wrap;
+
+  &:hover {
+    cursor: default;
+  }
+}
+
+.disabledButton {
+  background-color: var(--semanticError01);
+  color: var(--semanticError05);
+}
+
+.selectedDay {
+  background-color: var(--actionAccent04);
+  color: var(--light01);
+}
+
+.notInCurrentMonth { 
+  background-color: var(--light013);
+}
+

package/dist/components/UTCalendar/components/TimeInput/index.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = require("prop-types");
+var _UTLabel = _interopRequireDefault(require("../../../UTLabel"));
+var _UTRadioGroup = _interopRequireDefault(require("../../../UTRadioGroup"));
+var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const TimeInput = _ref => {
+  let {
+    availableTimeSlots,
+    selectedTime,
+    setSelectedTime
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.timeInputContainer
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.timeInputHeader
+  }, /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+    variant: "subtitle1"
+  }, "Seleccione el horario"), /*#__PURE__*/_react.default.createElement(_UTLabel.default, null, "Debe seleccionar un horario para continuar")), /*#__PURE__*/_react.default.createElement(_UTRadioGroup.default, {
+    options: availableTimeSlots,
+    value: selectedTime,
+    onChange: setSelectedTime,
+    version: "V1",
+    verticalSpacing: "small",
+    variant: "card"
+  }));
+};
+TimeInput.propTypes = {
+  availableTimeSlots: _propTypes.array,
+  selectedTime: _propTypes.string,
+  setSelectedTime: _propTypes.func
+};
+var _default = exports.default = TimeInput;

package/dist/components/UTCalendar/components/TimeInput/styles.module.scss

@@ -0,0 +1,12 @@
+.timeInputContainer {
+  display: flex;
+  flex-direction: column;
+  grid-gap: 24px;
+  width: 100%;
+}
+
+.timeInputHeader {
+  display: flex;
+  flex-direction: column;
+  grid-gap: 4px;
+}

package/dist/components/UTCalendar/constants.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ONLY_ONE_WORK_SCHEDULE = exports.INPUT_VALUE_DEFAULT = exports.ICON_SIZE_DEFAULT = exports.FORMAT_DATE = exports.FIELD_KEYS = exports.DAY_FORMAT = void 0;
+const INPUT_VALUE_DEFAULT = exports.INPUT_VALUE_DEFAULT = '00:00';
+const ONLY_ONE_WORK_SCHEDULE = exports.ONLY_ONE_WORK_SCHEDULE = 0;
+const DAY_FORMAT = exports.DAY_FORMAT = 'DD';
+const FORMAT_DATE = exports.FORMAT_DATE = 'YYYY-MM-DD';
+const ICON_SIZE_DEFAULT = exports.ICON_SIZE_DEFAULT = 32;
+const FIELD_KEYS = exports.FIELD_KEYS = {
+  DATE: 'date',
+  TIME: 'time'
+};

package/dist/components/UTCalendar/index.js

@@ -0,0 +1,119 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _pickers = require("@material-ui/pickers");
+var _propTypes = require("prop-types");
+var _react = _interopRequireWildcard(require("react"));
+var _dateFns = _interopRequireDefault(require("@date-io/date-fns"));
+var _es = _interopRequireDefault(require("date-fns/locale/es"));
+var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
+var _UTLabel = _interopRequireDefault(require("../UTLabel"));
+var _UTIcon = _interopRequireDefault(require("../UTIcon"));
+var _UTFieldLabel = _interopRequireDefault(require("../UTFieldLabel"));
+var _utils = require("../UTValidation/utils");
+var _UTValidation = _interopRequireDefault(require("../UTValidation"));
+var _constants = require("./constants");
+var _TimeInput = _interopRequireDefault(require("./components/TimeInput"));
+var _Day = _interopRequireDefault(require("./components/Day"));
+var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const Calendar = _ref => {
+  var _options$selectedDayI, _options$selectedDayI2;
+  let {
+    dataTestId,
+    actions,
+    error,
+    onChange,
+    options,
+    required,
+    showLegend,
+    timeSelection,
+    title,
+    value
+  } = _ref;
+  const [selectedDayIndex, setSelectedDayIndex] = (0, _react.useState)(value === null || value === void 0 ? void 0 : value[_constants.FIELD_KEYS.DATE]);
+  const [selectedTime, setSelectedTime] = (0, _react.useState)(value === null || value === void 0 ? void 0 : value[_constants.FIELD_KEYS.TIME]);
+  const selectedDay = (_options$selectedDayI = options[selectedDayIndex]) === null || _options$selectedDayI === void 0 ? void 0 : _options$selectedDayI.value;
+  const validationData = (0, _react.useMemo)(() => error && (0, _utils.formatErrorToValidation)(error), [error]);
+  (0, _react.useEffect)(() => {
+    setSelectedTime(null);
+    onChange({
+      [_constants.FIELD_KEYS.DATE]: selectedDay
+    });
+  }, [selectedDayIndex]);
+  (0, _react.useEffect)(() => {
+    onChange(currentValue => ({
+      ...currentValue,
+      [_constants.FIELD_KEYS.TIME]: selectedTime
+    }));
+  }, [selectedTime]);
+  const availableTimeSlots = options === null || options === void 0 || (_options$selectedDayI2 = options[selectedDayIndex]) === null || _options$selectedDayI2 === void 0 ? void 0 : _options$selectedDayI2.configuration.times;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.container,
+    "data-testid": dataTestId
+  }, title && /*#__PURE__*/_react.default.createElement(_UTFieldLabel.default, {
+    actions: actions,
+    required: required
+  }, title), /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.container
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.calendarContainer
+  }, /*#__PURE__*/_react.default.createElement(_pickers.MuiPickersUtilsProvider, {
+    utils: _dateFns.default,
+    locale: _es.default
+  }, /*#__PURE__*/_react.default.createElement(_pickers.DatePicker, {
+    disableToolbar: true,
+    variant: "static",
+    value: selectedDay,
+    onChange: () => null,
+    renderDay: (date, _, dayInCurrentMonth) => /*#__PURE__*/_react.default.createElement(_Day.default, {
+      date: date,
+      bookingOptions: options,
+      selectedDayIndex: selectedDayIndex,
+      setSelectedDayIndex: setSelectedDayIndex,
+      dayInCurrentMonth: dayInCurrentMonth,
+      setSelectedDay: setSelectedDayIndex
+    }),
+    minDate: new Date()
+  })), showLegend && /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.bottomReference
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.legendReference
+  }), /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+    colorTheme: "gray",
+    className: _stylesModule.default.legendLabel
+  }, "Sin horarios disponibles"))), timeSelection && /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(_stylesModule.default.timeRankContainer, " ").concat((0, _isEmpty.default)(availableTimeSlots) && _stylesModule.default.emptyTimeRankContainer)
+  }, !(0, _isEmpty.default)(availableTimeSlots) ? /*#__PURE__*/_react.default.createElement(_TimeInput.default, {
+    availableTimeSlots: availableTimeSlots,
+    selectedTime: selectedTime,
+    setSelectedTime: setSelectedTime
+  }) : /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.calendarIconWrapper
+  }, /*#__PURE__*/_react.default.createElement(_UTIcon.default, {
+    name: "IconCalendarEvent",
+    colorTheme: "gray",
+    size: _constants.ICON_SIZE_DEFAULT
+  })), /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+    colorTheme: "gray"
+  }, selectedDay ? 'No hay horarios disponibles' : 'Debe seleccionar una fecha primero')))), validationData && /*#__PURE__*/_react.default.createElement(_UTValidation.default, {
+    validationData: validationData
+  }));
+};
+Calendar.propTypes = {
+  actions: _propTypes.array,
+  dataTestId: _propTypes.string,
+  error: _propTypes.string,
+  onChange: _propTypes.func,
+  options: _propTypes.array,
+  required: _propTypes.bool,
+  showLegend: _propTypes.bool,
+  timeSelection: _propTypes.bool,
+  title: _propTypes.string,
+  value: _propTypes.object
+};
+var _default = exports.default = Calendar;

package/dist/components/UTCalendar/styles.module.scss

@@ -0,0 +1,122 @@
+@use '../../scss/variables/mediaQueries.module.scss' as *;
+
+
+$default-shadow-gray-bottom-1: 0px 3px 6px rgba(24, 44, 73, 0.1);
+
+.container {
+  display: flex;
+  grid-gap: 32px;
+  height: 100%;
+  max-width: 1200px;
+
+  width: 100%;
+
+  @media #{$tablet-mobile} {
+    flex-direction: column;
+  }
+}
+
+%containers {
+  background-color: var(--light01);
+  border-radius: 8px;
+  box-shadow: var(--shadowGrayBottom1, $default-shadow-gray-bottom-1);
+  display: flex;
+  padding:24px;
+}
+
+.calendarContainer {
+  @extend %containers;
+  padding: 16px;
+  flex-grow: 1;
+  
+
+  :global(.MuiPickersStaticWrapper-staticWrapperRoot) {
+    flex-grow: 1;
+  }
+
+  :global(.MuiPickersBasePicker-pickerView) {
+    justify-content: unset;
+    max-width: inherit;
+        height: 336px;
+  } 
+
+  :global(.MuiPickersSlideTransition-transitionContainer) {
+    text-transform: capitalize;
+
+  }
+
+  :global(.MuiPickersCalendar-week) {
+    background: var(--light03);
+    justify-content: flex-start;
+
+    > div {
+      border: 1px solid var(--light04);
+      min-width: 40px;
+      width: 100%;
+    }
+  }
+
+    :global(.MuiPickersCalendarHeader-daysHeader) {
+
+    > span {
+      color: var(--gray03);
+      width: 100%;
+    }
+  }
+
+ :global(.MuiPickersCalendarHeader-dayLabel) {
+    text-transform: uppercase;
+  }
+} 
+
+.timeRankContainer {
+  @extend %containers;
+  flex-grow: 1;
+
+  @media #{$tablet-mobile} {
+    width: unset;
+  }
+}
+
+.emptyTimeRankContainer {
+  align-items: center;
+  background-color: var(--light03);
+  border: 2px solid var(--light04);
+  box-shadow: none;
+  display: flex;
+  flex-direction: column;
+  grid-gap: 16px;
+  justify-content: center;
+}
+
+.calendarIconWrapper {
+  background-color: var(--light04);
+  border-radius: 100px;
+  display: flex;
+  padding: 14px;
+}
+
+.legendLabel {
+  text-align: end;
+}
+
+.bottomReference {
+  align-items: center;
+  display: flex;
+  grid-gap: 12px;
+  justify-content: flex-end;
+  padding: 16px;
+}
+
+.legendReference {
+  background: var(--semanticError01);
+  border-radius: 2px;
+  height: 16px;
+  width: 16px;
+}
+
+.container {
+  display: flex;
+  flex-direction: column;
+  grid-gap: 16px;
+}

package/dist/components/UTRadioGroup/versions/V1/components/Radio/theme.js

@@ -109,11 +109,7 @@ const retrieveStyle = _ref => {
         [_constants.SPACING.SMALL]: '8px',
         [_constants.SPACING.MEDIUM]: '16px'
       }[spacing],
-      minHeight: {
-        [_constants2.RADIO_VARIANTS.CARD]: '48px',
-        [_constants2.RADIO_VARIANTS.BUTTON]: '24px',
-        [_constants2.RADIO_VARIANTS.DEFAULT]: '24px'
-      }[variant],
+      minHeight: '24px',
       overflow: 'hidden',
       padding: '12px 16px',
       ...(disabled ? disabledTheme : selected ? selectedTheme : baseTheme)

package/dist/index.js

@@ -87,6 +87,12 @@ Object.defineProperty(exports, "UTCBUInput", {
     return _UTCBUInput.default;
   }
 });
+Object.defineProperty(exports, "UTCalendar", {
+  enumerable: true,
+  get: function () {
+    return _UTCalendar.default;
+  }
+});
 Object.defineProperty(exports, "UTCaptcha", {
   enumerable: true,
   get: function () {
@@ -598,4 +604,5 @@ var _WithLoading = _interopRequireDefault(require("./components/WithLoading"));
 var _WithTouch = _interopRequireDefault(require("./components/WithTouch"));
 var _stylesDeduplicationUtils = _interopRequireDefault(require("./utils/stylesDeduplicationUtils"));
 var _useScrollBasedMenu = _interopRequireDefault(require("./utils/hooks/use-scroll-based-menu"));
+var _UTCalendar = _interopRequireDefault(require("./components/UTCalendar"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@widergy/energy-ui",
-  "version": "3.124.0",
+  "version": "3.125.0",
   "description": "Widergy Web Components",
   "author": "widergy",
   "license": "MIT",
@@ -31,6 +31,7 @@
   },
   "dependencies": {
     "@babel/eslint-parser": "^7.23.10",
+    "@date-io/date-fns": "^1.3.11",
     "@date-io/dayjs": "1.x",
     "@material-ui/core": "^4.4.0",
     "@material-ui/icons": "^3.0.1",
@@ -46,6 +47,7 @@
     "babel-plugin-inline-react-svg": "^2.0.2",
     "babel-plugin-named-asset-import": "^0.3.2",
     "d3": "^7.0.1",
+    "date-fns": "2.30.0",
     "dayjs": "^1.10.7",
     "downloadjs": "^1.4.7",
     "emojilib": "^3.0.10",