@tap-payments/os-micro-frontend-shared 0.0.189 → 0.0.191

package/build/components/Calender/Calender.js

@@ -15,7 +15,7 @@ import ClickAwayListener from '@mui/material/ClickAwayListener';
 import Popper from '@mui/material/Popper';
 import { useTranslation } from 'react-i18next';
 import { Calendar as MDPicker, DateObject } from 'react-multi-date-picker';
-import TimePicker, { getDefaultHour, getDefaultMinute, convertTo12Hour } from '../Timepicker';
+import TimePicker, { getDefaultHour, getDefaultMinute, convertTo12Hour, getPeriodFrom24Hour, convertTo24Hour } from '../Timepicker';
 import { darkLeftArrowIcon, darkRightArrowIcon } from '../../constants/index.js';
 import { ArrowButton, CalenderWrapper, SelectedDate, Wrapper, ButtonsWrapper, CancelButton, OkayButton, FooterButtonsWrapper } from './style';
 const weekDays = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
@@ -26,7 +26,12 @@ function Calender(_a) {
     const [date, setDate] = useState(value ? new DateObject(new Date(value.toLocaleString())) : new DateObject(new Date()));
     const [tempDate, setTempDate] = useState(value ? new DateObject(new Date(value.toLocaleString())) : new DateObject(new Date()));
     const defaultHour = (value === null || value === void 0 ? void 0 : value.hour) ? convertTo12Hour(value.hour) : getDefaultHour();
-    const [time, setTime] = useState({ hour: defaultHour, minute: (_b = value === null || value === void 0 ? void 0 : value.minute) !== null && _b !== void 0 ? _b : getDefaultMinute() });
+    const defaultPeriod = (value === null || value === void 0 ? void 0 : value.hour) ? getPeriodFrom24Hour(value.hour) : getPeriodFrom24Hour(new Date().getHours());
+    const [time, setTime] = useState({
+        hour: defaultHour,
+        minute: (_b = value === null || value === void 0 ? void 0 : value.minute) !== null && _b !== void 0 ? _b : getDefaultMinute(),
+        period: defaultPeriod,
+    });
     const { t } = useTranslation();
     const open = Boolean(anchorEl);
     const getArrow = (direction) => {
@@ -42,7 +47,11 @@ function Calender(_a) {
         setAnchorEl(null);
     };
     const handleSubmit = () => {
-        const dateValue = enableTimePicker ? tempDate.setHour(time.hour).setMinute(time.minute) : tempDate;
+        let hour24 = time.hour;
+        if (enableTimePicker) {
+            hour24 = convertTo24Hour(time.hour, time.period || 'AM');
+        }
+        const dateValue = enableTimePicker ? tempDate.setHour(hour24).setMinute(time.minute) : tempDate;
         setDate(dateValue);
         if (setValue)
             setValue(dateValue);

package/build/components/Timepicker/Timepicker.d.ts

@@ -1,6 +1,7 @@
 export type Time = {
     hour: number;
     minute: number;
+    period?: 'AM' | 'PM';
 };
 interface TimePickerProps {
     defaultTime?: Time;

package/build/components/Timepicker/Timepicker.js

@@ -9,18 +9,18 @@ import { Arrow, Button, Period, PeriodWrapper, Wrapper, Time, TimeWrapper, Input
 import { getDefaultHour, getDefaultMinute } from './utils';
 import { maxHour, maxMinute, periodList } from './constant';
 export function TimePicker({ onChange, defaultTime }) {
-    var _a, _b;
+    var _a, _b, _c;
     const [anchorEl, setAnchorEl] = useState(null);
-    const [period, setPeriod] = useState(new Date().getHours() >= maxHour ? 'PM' : 'AM');
-    const [hours, setHours] = useState((_a = defaultTime === null || defaultTime === void 0 ? void 0 : defaultTime.hour) !== null && _a !== void 0 ? _a : getDefaultHour());
-    const [minutes, setMinutes] = useState((_b = defaultTime === null || defaultTime === void 0 ? void 0 : defaultTime.minute) !== null && _b !== void 0 ? _b : getDefaultMinute());
+    const [period, setPeriod] = useState((_a = defaultTime === null || defaultTime === void 0 ? void 0 : defaultTime.period) !== null && _a !== void 0 ? _a : (new Date().getHours() >= maxHour ? 'PM' : 'AM'));
+    const [hours, setHours] = useState((_b = defaultTime === null || defaultTime === void 0 ? void 0 : defaultTime.hour) !== null && _b !== void 0 ? _b : getDefaultHour());
+    const [minutes, setMinutes] = useState((_c = defaultTime === null || defaultTime === void 0 ? void 0 : defaultTime.minute) !== null && _c !== void 0 ? _c : getDefaultMinute());
     const open = Boolean(anchorEl);
     const onOpen = (e) => {
         setAnchorEl(e.currentTarget);
     };
     const onClose = () => {
         setAnchorEl(null);
-        onChange === null || onChange === void 0 ? void 0 : onChange({ hour: period === 'PM' ? hours + 12 : hours, minute: minutes });
+        onChange === null || onChange === void 0 ? void 0 : onChange({ hour: hours, minute: minutes, period: period });
     };
     const onClickPeriod = (selectedPeriod) => {
         setPeriod(selectedPeriod);

package/build/components/Timepicker/utils.d.ts

@@ -1,3 +1,5 @@
 export declare const convertTo12Hour: (hour24: number) => number;
+export declare const getPeriodFrom24Hour: (hour24: number) => 'AM' | 'PM';
 export declare const getDefaultMinute: () => number;
 export declare const getDefaultHour: () => number;
+export declare const convertTo24Hour: (hour12: number, period: 'AM' | 'PM') => number;

package/build/components/Timepicker/utils.js

@@ -5,8 +5,20 @@ export const convertTo12Hour = (hour24) => {
         return hour24;
     return hour24 - 12;
 };
+export const getPeriodFrom24Hour = (hour24) => {
+    return hour24 >= 12 ? 'PM' : 'AM';
+};
 export const getDefaultMinute = () => new Date().getMinutes();
 export const getDefaultHour = () => {
     const currentHour = new Date().getHours();
     return convertTo12Hour(currentHour);
 };
+export const convertTo24Hour = (hour12, period) => {
+    if (period === 'AM' && hour12 === 12) {
+        return 0;
+    }
+    else if (period === 'PM' && hour12 !== 12) {
+        return hour12 + 12;
+    }
+    return hour12;
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tap-payments/os-micro-frontend-shared",
   "description": "Shared components and utilities for Tap Payments micro frontends",
-  "version": "0.0.189",
+  "version": "0.0.191",
   "type": "module",
   "main": "build/index.js",
   "module": "build/index.js",