@tap-payments/os-micro-frontend-shared 0.1.171-test.3 → 0.1.171-test.4

package/build/components/RangeCalender/RangeCalender.js

@@ -16,9 +16,11 @@ import { ButtonsWrapper, CalenderWrapper, CancelButton, FiltersArea, Footer, Mai
 import { getEndOfDate, getStartOfDate } from './utils';
 import { CustomTimePicker } from './components/CustomTimepicker';
 function RangeCalender({ defaultDate, onDateChange, mode = 'gregorian', onCalendarModeSwitch, numberOfMonths, noTimezone, noQuickFilter, maxDateRange, onCalendarGroupChange, groupBy, timezone, onChangeTimezoneHistory, onChangeTimezone, defaultTimezone, browserTimezone, renderCalendarButton, mainSx, popperProps, rangeDatePickerProps, }) {
+    var _a, _b;
     const [dates, setDates] = useState([new DateObject(defaultDate === null || defaultDate === void 0 ? void 0 : defaultDate[0]), new DateObject(defaultDate === null || defaultDate === void 0 ? void 0 : defaultDate[1])]);
     const [values, setValues] = useState(dates);
     const [selectedTimezone, setSelectedTimezone] = useState(timezone);
+    console.log({ s: (_a = values[0]) === null || _a === void 0 ? void 0 : _a.format('MM/DD/YYYY HH:mma'), e: (_b = values[1]) === null || _b === void 0 ? void 0 : _b.format('MM/DD/YYYY HH:mma') });
     const [selectedGroupBy, setSelectedGroupBy] = useState(groupBy || 'day');
     const [anchorEl, setAnchorEl] = useState(null);
     const open = Boolean(anchorEl);
@@ -97,6 +99,6 @@ function RangeCalender({ defaultDate, onDateChange, mode = 'gregorian', onCalend
                     onCloseCalender();
                 } })), _jsx(Popper, Object.assign({ open: open, anchorEl: anchorEl, placement: "bottom-end" }, popperProps, { children: _jsxs(CalenderWrapper, { children: [!noQuickFilter && (_jsxs(FiltersArea, { children: [_jsx(QuickFilters, { onChange: onChangeQuickFilter, isHijri: isHijri }), _jsxs(Settings, { children: [groupBy && (_jsx(GroupBy, { groupBy: selectedGroupBy, isCalenderOpen: open, onUpdate: (group) => {
                                                 setSelectedGroupBy(group);
-                                            } })), _jsx(Hijri, { isHijri: isHijri, onCalendarModeSwitch: onCalendarModeSwitch })] })] })), _jsxs(Box, Object.assign({ sx: { display: 'flex', flexDirection: 'column', justifyContent: 'space-between' } }, { children: [_jsx(RangeDatePicker, Object.assign({ values: values, onChange: onChange, isHijri: isHijri, ref: calendarRef, numberOfMonths: numberOfMonths }, rangeDatePickerProps)), _jsx(Collapse, Object.assign({ in: isError && Boolean(maxDateRange) }, { children: _jsx(Error, { error: t('dateRangeError', { number: maxDateRange }), sx: { marginInline: '16px', marginBottom: '16px' } }) })), _jsxs(Footer, Object.assign({ sx: { borderBottomLeftRadius: '8px' } }, { children: [!noTimezone ? (_jsx(TimeZone, { children: _jsx(CustomTimezone, { onChange: setSelectedTimezone, selectedTimezone: selectedTimezone, defaultTimezone: defaultTimezone, browserTimezone: browserTimezone }, String(open)) })) : (_jsx("div", {})), _jsx(CustomTimePicker, { values: values, setValues: setValues }), _jsxs(ButtonsWrapper, { children: [_jsx(CancelButton, Object.assign({ variant: "contained", onClick: onCloseCalender }, { children: t('cancel') })), _jsx(OkayButton, Object.assign({ variant: "contained", onClick: submitDate }, { children: t('okay') }))] })] }))] }))] }) }))] })));
+                                            } })), _jsx(Hijri, { isHijri: isHijri, onCalendarModeSwitch: onCalendarModeSwitch })] })] })), _jsxs(Box, Object.assign({ sx: { display: 'flex', flexDirection: 'column', justifyContent: 'space-between' } }, { children: [_jsx(RangeDatePicker, Object.assign({ values: values, onChange: onChange, isHijri: isHijri, ref: calendarRef, numberOfMonths: numberOfMonths }, rangeDatePickerProps)), _jsx(Collapse, Object.assign({ in: isError && Boolean(maxDateRange) }, { children: _jsx(Error, { error: t('dateRangeError', { number: maxDateRange }), sx: { marginInline: '16px', marginBottom: '16px' } }) })), _jsxs(Footer, Object.assign({ sx: { borderBottomLeftRadius: '8px' } }, { children: [!noTimezone ? (_jsx(TimeZone, { children: _jsx(CustomTimezone, { onChange: setSelectedTimezone, selectedTimezone: selectedTimezone, defaultTimezone: defaultTimezone, browserTimezone: browserTimezone }, String(open)) })) : (_jsx("div", {})), new DateObject(values[0]).dayOfYear === new DateObject(values[1]).dayOfYear && (_jsx(CustomTimePicker, { values: values, setValues: setValues })), _jsxs(ButtonsWrapper, { children: [_jsx(CancelButton, Object.assign({ variant: "contained", onClick: onCloseCalender }, { children: t('cancel') })), _jsx(OkayButton, Object.assign({ variant: "contained", onClick: submitDate }, { children: t('okay') }))] })] }))] }))] }) }))] })));
 }
 export default RangeCalender;

package/build/components/RangeCalender/components/CustomTimepicker/CustomTimepicker.d.ts

@@ -3,5 +3,5 @@ interface CustomTimePickerProps {
     values: Dates;
     setValues: (values: Dates) => void;
 }
-export declare function CustomTimePicker({ values, setValues, }: CustomTimePickerProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function CustomTimePicker({ values, setValues }: CustomTimePickerProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/build/components/RangeCalender/components/CustomTimepicker/CustomTimepicker.js

@@ -1,31 +1,36 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useEffect } from 'react';
+import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { DateObject } from 'react-multi-date-picker';
-// import TimePicker from 'react-multi-date-picker/plugins/time_picker'
 import { IOSSwitch } from '../../../index.js';
+import TimePicker, { convertTo12Hour, maxHour } from '../../../Timepicker';
 import { AllDayStyled, TimeArea, TimePickerWrapper, TimeAreaInner } from './style';
-import { getEndOfDate } from '../../utils';
-import TimePicker from '../../../Timepicker';
-export function CustomTimePicker({ values, setValues, }) {
-    const [isAllDay, setIsAllDay] = useState();
-    // const [lastTime, setLastTime] = useState<DateObject[]>(values)
-    const fromDate = new DateObject(values[0]);
-    const toDate = new DateObject(values[1] || values[0]);
+import { getEndOfDate, getStartOfDate } from '../../utils';
+export function CustomTimePicker({ values, setValues }) {
     const { t } = useTranslation();
-    useEffect(() => {
-        if (values)
-            setIsAllDay(fromDate.dayOfYear === toDate.dayOfYear && fromDate.hour === 0 && fromDate.minute === 0 && toDate.hour === 23 && toDate.minute === 59);
-    }, [values]);
-    if (new DateObject(values[0]).dayOfYear !== new DateObject(values[1]).dayOfYear)
-        return null;
+    const startDate = new DateObject(values[0]);
+    const endDate = new DateObject(values[1] || values[0]);
+    const [isAllDay, setIsAllDay] = useState(startDate.dayOfYear === endDate.dayOfYear && startDate.hour === 0 && startDate.minute === 0 && endDate.hour === 23 && endDate.minute === 59);
     return (_jsx(TimeArea, { children: _jsxs(TimeAreaInner, { children: [_jsxs(AllDayStyled, Object.assign({ isAllDay: isAllDay }, { children: [_jsx("span", Object.assign({ className: "label" }, { children: t('allDay') })), _jsx(IOSSwitch, { checked: isAllDay, onChange: (e) => {
                                 setIsAllDay(!isAllDay);
                                 if (e.target.checked) {
-                                    setValues([getEndOfDate(values[0]), getEndOfDate(values[1])]);
+                                    setValues([getStartOfDate(values[0]), getEndOfDate(values[1])]);
                                 }
                                 else {
                                     setValues(values);
                                 }
-                            } })] })), !isAllDay && (_jsxs(TimePickerWrapper, { children: [_jsx(TimePicker, {}), _jsx(TimePicker, {})] }))] }) }));
+                            } })] })), !isAllDay && (_jsxs(TimePickerWrapper, { children: [_jsx(TimePicker, { defaultTime: {
+                                hour: convertTo12Hour(startDate.hour),
+                                minute: startDate.minute,
+                                period: startDate.hour >= maxHour ? 'PM' : 'AM',
+                            }, size: "small", onChange: ({ hour, minute, period }) => {
+                                console.log('from', { hour });
+                                setValues([startDate.setHour(period === 'PM' ? hour + 12 : hour).setMinute(minute), endDate]);
+                            } }, `${values[0].toString()}-start`), _jsx(TimePicker, { defaultTime: {
+                                hour: convertTo12Hour(endDate.hour),
+                                minute: endDate.minute,
+                                period: endDate.hour >= maxHour ? 'PM' : 'AM',
+                            }, size: "small", onChange: ({ hour, minute, period }) => {
+                                setValues([startDate, endDate.setHour(period === 'PM' ? hour + 12 : hour).setMinute(minute)]);
+                            } }, `${values[1].toString()}-end`)] }))] }) }));
 }

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

@@ -7,6 +7,7 @@ interface TimePickerProps {
     defaultTime?: Time;
     onChange?: (time: Time) => void;
     enableRealTimeChange?: boolean;
+    size?: 'large' | 'small';
 }
-export declare function TimePicker({ onChange, defaultTime, enableRealTimeChange }: TimePickerProps): import("react/jsx-runtime").JSX.Element;
+export declare function TimePicker({ onChange, defaultTime, enableRealTimeChange, size }: TimePickerProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/build/components/Timepicker/Timepicker.js

@@ -8,7 +8,7 @@ import { greyUpArrowIcon, greyDownArrowIcon } from '../../constants/index.js';
 import { Arrow, Button, Period, PeriodWrapper, Wrapper, Time, TimeWrapper, Input } from './style';
 import { getDefaultHour, getDefaultMinute } from './utils';
 import { maxHour, maxMinute, periodList } from './constant';
-export function TimePicker({ onChange, defaultTime, enableRealTimeChange }) {
+export function TimePicker({ onChange, defaultTime, enableRealTimeChange, size = 'large' }) {
     var _a, _b, _c;
     const [anchorEl, setAnchorEl] = useState(null);
     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'));
@@ -80,7 +80,7 @@ export function TimePicker({ onChange, defaultTime, enableRealTimeChange }) {
         });
     };
     const formatTime = useCallback((time) => (time < 10 ? `0${time}` : time), []);
-    return (_jsx(ClickAwayListener, Object.assign({ onClickAway: onClose }, { children: _jsxs(Box, { children: [_jsx(Button, Object.assign({ open: open, onClick: onOpen }, { children: `${formatTime(hours)}:${formatTime(minutes)}${period.toLowerCase()}` })), _jsx(Menu, Object.assign({ open: open, anchorEl: anchorEl, placement: "top-start", sx: { marginTop: '8px', marginBottom: '8px' } }, { children: _jsxs(Wrapper, { children: [_jsxs(TimeWrapper, { children: [_jsxs(Time, { children: [_jsx(Arrow, Object.assign({ onClick: onIncreaseHours }, { children: _jsx("img", { src: greyUpArrowIcon, alt: "arrow" }) })), _jsx(Input, { value: formatTime(hours), onChange: onChangeHours }), _jsx(Arrow, Object.assign({ onClick: onDecreaseHours }, { children: _jsx("img", { src: greyDownArrowIcon, alt: "arrow" }) }))] }), _jsx(Text, { children: ":" }), _jsxs(Time, { children: [_jsx(Arrow, Object.assign({ onClick: onIncreaseMinutes }, { children: _jsx("img", { src: greyUpArrowIcon, alt: "arrow" }) })), _jsx(Input, { value: formatTime(minutes), onChange: onChangeMinutes }), _jsx(Arrow, Object.assign({ onClick: onDecreaseMinutes }, { children: _jsx("img", { src: greyDownArrowIcon, alt: "arrow" }) }))] })] }), _jsx(PeriodWrapper, { children: periodList.map((item) => (_jsx(Period, Object.assign({ onClick: () => {
+    return (_jsx(ClickAwayListener, Object.assign({ onClickAway: onClose }, { children: _jsxs(Box, { children: [_jsx(Button, Object.assign({ size: size, open: open, onClick: onOpen }, { children: `${formatTime(hours)}:${formatTime(minutes)}${period.toLowerCase()}` })), _jsx(Menu, Object.assign({ open: open, anchorEl: anchorEl, placement: "top-start", sx: { marginTop: '8px', marginBottom: '8px' } }, { children: _jsxs(Wrapper, { children: [_jsxs(TimeWrapper, { children: [_jsxs(Time, { children: [_jsx(Arrow, Object.assign({ onClick: onIncreaseHours }, { children: _jsx("img", { src: greyUpArrowIcon, alt: "arrow" }) })), _jsx(Input, { value: formatTime(hours), onChange: onChangeHours }), _jsx(Arrow, Object.assign({ onClick: onDecreaseHours }, { children: _jsx("img", { src: greyDownArrowIcon, alt: "arrow" }) }))] }), _jsx(Text, { children: ":" }), _jsxs(Time, { children: [_jsx(Arrow, Object.assign({ onClick: onIncreaseMinutes }, { children: _jsx("img", { src: greyUpArrowIcon, alt: "arrow" }) })), _jsx(Input, { value: formatTime(minutes), onChange: onChangeMinutes }), _jsx(Arrow, Object.assign({ onClick: onDecreaseMinutes }, { children: _jsx("img", { src: greyDownArrowIcon, alt: "arrow" }) }))] })] }), _jsx(PeriodWrapper, { children: periodList.map((item) => (_jsx(Period, Object.assign({ onClick: () => {
                                         onClickPeriod(item);
                                     }, selected: period === item }, { children: item }), item))) })] }) }))] }) })));
 }

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

@@ -1,4 +1,5 @@
 import { TimePicker } from './Timepicker';
 export * from './utils';
 export * from './Timepicker';
+export * from './constant';
 export default TimePicker;

package/build/components/Timepicker/index.js

@@ -1,4 +1,5 @@
 import { TimePicker } from './Timepicker';
 export * from './utils';
 export * from './Timepicker';
+export * from './constant';
 export default TimePicker;

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

@@ -8,6 +8,7 @@ export declare const Button: import("@emotion/styled").StyledComponent<import("@
     component?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 } & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
     open: boolean;
+    size: 'large' | 'small';
 }, {}, {}>;
 export declare const Arrow: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;

package/build/components/Timepicker/style.js

@@ -10,7 +10,7 @@ export const Wrapper = styled(Box)(() => ({
     justifyContent: 'center',
     gap: '16px',
 }));
-export const Button = styled(Text, { shouldForwardProp: (props) => props !== 'open' })(({ theme, open }) => (Object.assign({ fontSize: '11px', fontWeight: 500, background: theme.palette.common.white, border: `1px solid ${theme.palette.divider}`, borderRadius: '19px', height: 32, width: 74, display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer' }, (open && { boxShadow: '0px 0px 4px 0px #1F88D080', borderColor: theme.palette.info.dark }))));
+export const Button = styled(Text, { shouldForwardProp: (props) => props !== 'open' && props !== 'size' })(({ theme, open, size }) => (Object.assign({ fontSize: '11px', fontWeight: 500, background: theme.palette.common.white, border: `1px solid ${theme.palette.divider}`, borderRadius: '19px', height: size === 'large' ? 32 : 24, width: size === 'large' ? 74 : 58, display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer' }, (open && { boxShadow: '0px 0px 4px 0px #1F88D080', borderColor: theme.palette.info.dark }))));
 export const Arrow = styled(Box)(() => ({
     textAlign: 'center',
     cursor: 'pointer',

package/build/utils/date.js

@@ -65,7 +65,8 @@ export const formatUTCOffset = (offset = 0) => {
  * @returns - Array of two dates [startDate, endDate]
  */
 export const getDefaultDateRange = (startDay = 6) => {
-    const monthDaysMinus = dayjs().subtract(startDay, 'day').hour(0).minute(0).second(0).toDate();
+    // const monthDaysMinus = dayjs().subtract(startDay, 'day').hour(0).minute(0).second(0).toDate()
+    const monthDaysMinus = dayjs(new Date()).hour(10).minute(0).second(0).toDate();
     const today = dayjs(new Date()).hour(23).minute(59).second(59).toDate();
     return [monthDaysMinus, today];
 };

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@tap-payments/os-micro-frontend-shared",
   "description": "Shared components and utilities for Tap Payments micro frontends",
-  "version": "0.1.171-test.3",
-  "testVersion": 3,
+  "version": "0.1.171-test.4",
+  "testVersion": 4,
   "type": "module",
   "main": "build/index.js",
   "module": "build/index.js",