@paro.io/expert-shared-components 1.14.32 → 1.14.34

package/lib/components/EarningsTracker/LogTimeModalAuthenticated.js

@@ -1,358 +1,358 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.LogTimeModalAuthenticated = exports.SelectDate = exports.constants = exports.TASK_DESCRIPTION_VALIDATION = exports.roundMinutes = void 0;
-const react_1 = __importStar(require("react"));
-const base_ui_1 = require("@paro.io/base-ui");
-require("date-fns");
-const classnames_1 = __importDefault(require("classnames"));
-const dayjs_1 = __importDefault(require("dayjs"));
-const react_hot_toast_1 = __importDefault(require("react-hot-toast"));
-const ActiveProjectCard_1 = require("./ActiveProjectCard");
-const moment_1 = __importDefault(require("moment"));
-const pickers_1 = require("@material-ui/pickers");
-const dayjs_2 = __importDefault(require("@date-io/dayjs"));
-const core_1 = require("@material-ui/core");
-const roundMinutes = (minutes, hours) => {
-    if (minutes === 0)
-        return { hours: hours, minutes: 0 };
-    if (minutes <= 15)
-        return { hours: hours, minutes: 15 };
-    if (minutes <= 30)
-        return { hours: hours, minutes: 30 };
-    if (minutes <= 45)
-        return { hours: hours, minutes: 45 };
-    return { hours: hours + 1, minutes: 0 };
-};
-exports.roundMinutes = roundMinutes;
-exports.TASK_DESCRIPTION_VALIDATION = {
-    MAX_LENGTH: 120,
-    MIN_LENGTH: 3,
-    LENGTH_VALIDATION_MESSAGE: `Task Description should be greater than 3 characters.`,
-};
-const TASK_MIN_VALIDATION = {
-    MAX_LENGTH: 59,
-    MIN_LENGTH: 0,
-    LENGTH_ERROR_MSG: 'Minutes should be poisitive number and less than 60.',
-    NON_EMPTY_ERROR_MSG: "Minutes can't be empty",
-    GREATER_THAN_ZERO: "Hours or minutes should be greater than zero"
-};
-const TASK_HOURS_VALIDATION = {
-    MAX_LENGTH: 999,
-    MIN_LENGTH: 0,
-    LENGTH_ERROR_MSG: 'Hours should be less than 1000.',
-    NON_EMPTY_ERROR_MSG: "Hours can't be empty",
-    GREATER_THAN_ZERO: "Hours or minutes should be greater than zero"
-};
-const addHoursAndMinutes = (hours, minutes) => {
-    const MINUTES_IN_AN_HOUR = 60;
-    const minutesToHours = minutes / MINUTES_IN_AN_HOUR;
-    return Number((hours + minutesToHours).toFixed(2));
-};
-const getMaxDateForAddTimeLog = () => {
-    const date = new Date();
-    date.setMonth(date.getMonth() + 1);
-    return date;
-};
-const getMinDateForAddTimeLog = () => {
-    const date = new Date();
-    date.setFullYear(date.getFullYear() - 1);
-    return date;
-};
-exports.constants = {
-    MINUTES_ERROR_MESSAGE: "Minutes can't be empty",
-    HOURS_ERROR_MESSAGE: "Hours can't be empty",
-    DATE_FORMAT: 'MM/DD/YYYY',
-    MAX_DATE: getMaxDateForAddTimeLog(),
-    MIN_DATE: getMinDateForAddTimeLog(),
-    DATE_VALIDATION_MESSAGE: 'Please enter valid date',
-    TASK_DESCRIPTION_ERROR_MESSAGE: "Task Description can't be empty",
-};
-const SelectDate = ({ timeLogDate, setTimeLogDate, isInvalid, setIsDateInvalid, validateDate, showErrorText = true, disabled, maxDate, minDate }) => {
-    const theme = (0, core_1.useTheme)();
-    const mobileScreen = (0, core_1.useMediaQuery)(theme.breakpoints.down('sm'));
-    const handleDateChange = (date) => {
-        const currentDate = date.$d;
-        setTimeLogDate(currentDate);
-        validateDate(currentDate);
-    };
-    const onBlur = (event) => {
-        let currentDate = new Date(event.target.value);
-        currentDate = currentDate.toString() !== "Invalid Date" ? currentDate : "";
-        setTimeLogDate(currentDate);
-        validateDate(currentDate);
-    };
-    const getDatePicker = (showErrorText) => {
-        return (react_1.default.createElement(pickers_1.MuiPickersUtilsProvider, { utils: dayjs_2.default },
-            react_1.default.createElement(pickers_1.KeyboardDatePicker, { className: (0, classnames_1.default)({
-                    "base-ui-date-picker": true,
-                    "base-ui-date-picker-error": isInvalid,
-                }), "data-testid": "date-picker-inline", disableToolbar: true, variant: mobileScreen ? "dialog" : "inline", format: exports.constants.DATE_FORMAT, margin: "normal", placeholder: "Select Date", value: timeLogDate, onChange: () => {
-                    setIsDateInvalid("");
-                }, onBlur: onBlur, onAccept: handleDateChange, maxDate: maxDate !== null && maxDate !== void 0 ? maxDate : exports.constants.MAX_DATE, minDate: minDate !== null && minDate !== void 0 ? minDate : exports.constants.MIN_DATE, helperText: showErrorText && isInvalid && exports.constants.DATE_VALIDATION_MESSAGE, error: isInvalid !== "" && isInvalid, style: { margin: 0 }, KeyboardButtonProps: Object.assign({ "aria-label": "change date" }, { ["data-testid"]: "timelog-datepicker" }), fullWidth: true, disabled: disabled, autoOk: true })));
-    };
-    return (react_1.default.createElement("div", { className: "mt-1" },
-        react_1.default.createElement("div", { className: "block w-full sm:w-1/3" }, getDatePicker(showErrorText))));
-};
-exports.SelectDate = SelectDate;
-const LogTimeModalAuthenticated = ({ project, freelancerId, showTimeModal, setShowTimeModal, isDateInvalid, setIsDateInvalid, validateDate, setSingleProjectData, projectData, isAuthenticated, selectedTab, submitProjectHoursMutation, GetAllProjectIrprDetailsForFreelancerDocument, getAuth0Roles, submitProjectHoursLambda, user, }) => {
-    var _a, _b, _c, _d;
-    const [timeLogDate, setTimeLogDate] = (0, react_1.useState)(new Date());
-    const [hours, setHours] = (0, react_1.useState)('');
-    const [minutes, setMinutes] = (0, react_1.useState)('');
-    const [isHoursInvalid, setIsHoursInvalid] = (0, react_1.useState)(false);
-    const [isMinutesInvalid, setIsMinutesInvalid] = (0, react_1.useState)(false);
-    const [isMinutesInvalidText, setIsMinutesInvalidText] = (0, react_1.useState)(exports.constants.MINUTES_ERROR_MESSAGE);
-    const [isHoursInvalidText, setIsHoursInvalidText] = (0, react_1.useState)(exports.constants.HOURS_ERROR_MESSAGE);
-    const [isHoursExceeded, setIsHoursExceeded] = (0, react_1.useState)(false);
-    const [taskDescription, setTaskDescription] = (0, react_1.useState)('');
-    const [isTaskdescriptionInvalid, setIsTaskdescriptionInvalid] = (0, react_1.useState)(false);
-    const [isTaskdescriptionInvalidText, setIsTaskdescriptionInvalidText] = (0, react_1.useState)(exports.constants.TASK_DESCRIPTION_ERROR_MESSAGE);
-    const [loading, setLoading] = (0, react_1.useState)(false);
-    const [error, setError] = (0, react_1.useState)(false);
-    const currProjectHours = parseFloat(projectData === null || projectData === void 0 ? void 0 : projectData.hoursInvoiced);
-    const { hoursPerWeek, minFloorHours } = (0, ActiveProjectCard_1.getAllProjectRecommendationData)({ projectData });
-    const firstDateOfMonth = (0, moment_1.default)().startOf('month').format('MM/DD/YY');
-    const lastDateOfMonth = (0, moment_1.default)().endOf('month').format('MM/DD/YY');
-    const isRecurringHourlyProject = ((_a = project === null || project === void 0 ? void 0 : project.projectScope) === null || _a === void 0 ? void 0 : _a.projectFrequencyId) === 1 || ((_b = project === null || project === void 0 ? void 0 : project.projectScope) === null || _b === void 0 ? void 0 : _b.projectFrequencyId) === 2;
-    const auth0Roles = user && getAuth0Roles(user);
-    const disableHoursRounding = auth0Roles && auth0Roles.includes('expert_disable_rounding');
-    const validateHours = (value) => {
-        const empty = value == '';
-        const maxvalue = parseInt(value) > TASK_HOURS_VALIDATION.MAX_LENGTH;
-        const minvalue = parseInt(value) < TASK_HOURS_VALIDATION.MIN_LENGTH;
-        if (empty || maxvalue || minvalue) {
-            setIsHoursInvalid(true);
-        }
-        else {
-            setIsHoursInvalid(false);
-            setIsHoursInvalidText(TASK_HOURS_VALIDATION.NON_EMPTY_ERROR_MSG);
-        }
-        if (value === "0" && minutes === "0") {
-            setIsHoursInvalid(true);
-            setIsHoursInvalidText(TASK_HOURS_VALIDATION.GREATER_THAN_ZERO);
-        }
-        if (maxvalue || minvalue) {
-            setIsHoursInvalidText(TASK_HOURS_VALIDATION.LENGTH_ERROR_MSG);
-        }
-        else {
-            return true;
-        }
-        return false;
-    };
-    (0, react_1.useEffect)(() => {
-        const hoursAndMinutes = addHoursAndMinutes(Number(hours), Number(minutes) || 0).toFixed(2);
-        if (Number(hoursAndMinutes) > 24) {
-            setIsHoursExceeded(true);
-        }
-    }, [hours, minutes]);
-    const validateMinutes = (value) => {
-        const empty = value == '';
-        const maxvalue = parseInt(value) > TASK_MIN_VALIDATION.MAX_LENGTH;
-        const minvalue = parseInt(value) < TASK_MIN_VALIDATION.MIN_LENGTH;
-        if (empty || maxvalue || minvalue) {
-            setIsMinutesInvalid(true);
-        }
-        else {
-            setIsMinutesInvalid(false);
-            setIsMinutesInvalidText(TASK_MIN_VALIDATION.NON_EMPTY_ERROR_MSG);
-        }
-        if (value === "0" && hours === "0") {
-            setIsMinutesInvalid(true);
-            setIsMinutesInvalidText(TASK_MIN_VALIDATION.GREATER_THAN_ZERO);
-        }
-        if (maxvalue || minvalue) {
-            setIsMinutesInvalidText(TASK_MIN_VALIDATION.LENGTH_ERROR_MSG);
-        }
-        else {
-            return true;
-        }
-        return false;
-    };
-    const validateTaskDescription = (value) => {
-        const arealength = value.trim().length < exports.TASK_DESCRIPTION_VALIDATION.MIN_LENGTH;
-        if (arealength) {
-            setIsTaskdescriptionInvalid(true);
-        }
-        else {
-            setIsTaskdescriptionInvalid(false);
-        }
-        if (arealength) {
-            setIsTaskdescriptionInvalidText(exports.TASK_DESCRIPTION_VALIDATION.LENGTH_VALIDATION_MESSAGE);
-        }
-        else {
-            return true;
-        }
-        return false;
-    };
-    const handleChange = (name, value) => {
-        setError(false);
-        if (name === 'hours') {
-            const numberOnly = value.replace(/\D/g, '');
-            setHours(numberOnly);
-            validateHours(numberOnly);
-            setMinutes(minutes || "0");
-            validateMinutes(minutes || "0");
-            setIsHoursExceeded(false);
-        }
-        else if (name === 'minutes') {
-            const numberOnly = value.replace(/\D/g, '');
-            setMinutes(numberOnly);
-            validateMinutes(numberOnly);
-            setHours(hours || "0");
-            validateHours(hours || "0");
-            setIsHoursExceeded(false);
-        }
-        else if (name === 'textarea') {
-            setTaskDescription(value);
-            validateTaskDescription(value);
-        }
-    };
-    const handleBlur = () => {
-        setHours(hours || '0');
-        validateHours(hours || '0');
-        setMinutes(minutes || '0');
-        validateMinutes(minutes || '0');
-    };
-    const handleSubmit = () => __awaiter(void 0, void 0, void 0, function* () {
-        setLoading(true);
-        const isDateValid = validateDate(timeLogDate);
-        const isHoursInValid = validateHours(hours);
-        const minutesInvalid = validateMinutes(minutes);
-        const taskDescriptionInvalid = validateTaskDescription(taskDescription);
-        if (isHoursInValid && minutesInvalid && taskDescriptionInvalid) {
-            const roundedTime = (0, exports.roundMinutes)(Number(minutes), Number(hours));
-            const totalHours = disableHoursRounding ? parseFloat(addHoursAndMinutes(Number(hours), Number(minutes) || 0).toFixed(2)) : parseFloat((roundedTime.hours + roundedTime.minutes / 60).toFixed(2));
-            let progressBarHours = 0;
-            if (isRecurringHourlyProject) {
-                progressBarHours = (0, moment_1.default)(timeLogDate).isBetween(firstDateOfMonth, lastDateOfMonth, null, '[]') ? totalHours : 0;
-            }
-            else {
-                progressBarHours = totalHours;
-            }
-            try {
-                const projectHours = {
-                    date: (0, dayjs_1.default)(timeLogDate).format('MM/DD/YY'),
-                    description: taskDescription,
-                    hours: totalHours,
-                    sourceId: 55,
-                    freelancerId: freelancerId,
-                    projectId: parseInt(project === null || project === void 0 ? void 0 : project.id)
-                };
-                if (isAuthenticated) {
-                    yield submitProjectHoursMutation({
-                        variables: {
-                            input: projectHours,
-                        },
-                        refetchQueries: [
-                            { query: GetAllProjectIrprDetailsForFreelancerDocument, variables: { freelancerId, projectType: 3, activeTabId: selectedTab } }
-                        ]
-                    });
-                }
-                else {
-                    yield submitProjectHoursLambda(projectHours);
-                }
-                const totalNewHours = currProjectHours + progressBarHours;
-                const hoursLeftToLog = Number(hoursPerWeek);
-                setSingleProjectData((prev) => (Object.assign(Object.assign({}, prev), { hoursInvoiced: totalNewHours, weeklyMinHoursLogged: hoursLeftToLog > 0 ? progressBarHours >= hoursLeftToLog : true, minimumFloorHoursCompleted: totalNewHours >= minFloorHours })));
-                (0, react_hot_toast_1.default)(react_1.default.createElement(base_ui_1.Alert, { color: "success", icon: "success", label: `Logged hours successful` }), {
-                    position: 'bottom-right',
-                    style: { borderRadius: '8px' },
-                });
-                setLoading(false);
-                setShowTimeModal(false);
-                setTimeLogDate(null);
-                setHours('');
-                setMinutes('');
-                setTaskDescription('');
-            }
-            catch (error) {
-                //@ts-ignore
-                setLoading(false);
-                console.log("error updating Project Hours", error);
-                (0, react_hot_toast_1.default)(react_1.default.createElement(base_ui_1.Alert, { color: "danger", icon: "danger", label: `Failed to update logged hours` }), {
-                    position: 'bottom-right',
-                    style: { borderRadius: '8px' },
-                });
-            }
-        }
-        else {
-            setLoading(false);
-        }
-    });
-    const onCloseModal = () => {
-        setLoading(false);
-        setShowTimeModal(false);
-        setTimeLogDate(null);
-        setHours('');
-        setMinutes('');
-        setTaskDescription('');
-    };
-    return (react_1.default.createElement(base_ui_1.Modal, { open: showTimeModal, onClose: () => onCloseModal(), size: "sm", className: "z-[100]" },
-        react_1.default.createElement("div", { className: "flex flex-col gap-y-2" },
-            react_1.default.createElement("h1", { className: "text-lg font-bold" },
-                "Add time for ", (_c = project === null || project === void 0 ? void 0 : project.client) === null || _c === void 0 ? void 0 :
-                _c.name),
-            react_1.default.createElement("h1", { className: "text-md font-bold" },
-                "Project: ", project === null || project === void 0 ? void 0 :
-                project.name),
-            react_1.default.createElement("div", { className: 'text-xs italic mb-6' }, " Note: Entries are rounded up to the nearest 15-minute increment"),
-            react_1.default.createElement("p", { className: "font-bold" }, "Select Date"),
-            react_1.default.createElement(exports.SelectDate, { timeLogDate: timeLogDate, setTimeLogDate: setTimeLogDate, isInvalid: false, setIsDateInvalid: setIsDateInvalid, validateDate: validateDate, maxDate: project === null || project === void 0 ? void 0 : project.endDate }),
-            react_1.default.createElement("p", { className: "font-bold mt-2" }, "Enter Time"),
-            react_1.default.createElement("div", { className: "flex flex-col sm:flex-row gap-x-6" },
-                react_1.default.createElement(base_ui_1.Input, { label: "Hours", className: "sm:text-sm h-12", placeholder: "HH", name: "hours", onChange: (event) => handleChange('hours', event.target.value), onBlur: (_event) => handleBlur(), value: hours, isInvalid: isHoursInvalid, isInvalidText: isHoursInvalidText, maxLength: 3 }),
-                react_1.default.createElement(base_ui_1.Input, { label: "Minutes", className: "sm:text-sm h-12", placeholder: "MM", name: "minutes", onChange: (event) => handleChange('minutes', event.target.value), onBlur: (_event) => handleBlur(), value: minutes, isInvalid: isMinutesInvalid, isInvalidText: isMinutesInvalidText, maxLength: 2 })),
-            isHoursExceeded && react_1.default.createElement("div", { className: "text-red-800 text-xs mt-2" },
-                "Submitting over 24 hours for a single date is not allowed, please contact ",
-                react_1.default.createElement("a", { className: "text-blue-600", href: "mailto:projectsupport@paro.io" }, "projectsupport@paro.io"),
-                " if you are experiencing any issues"),
-            react_1.default.createElement("div", { className: "w-full" },
-                react_1.default.createElement("textarea", { value: taskDescription, onChange: (event) => handleChange('textarea', event.target.value), cols: 1, style: { resize: 'none' }, className: (0, classnames_1.default)({
-                        'p-2.5 mt-1 w-full bg-gray-100 focus:bg-white text-sm block sm:text-sm rounded focus:outline-none focus:ring-1 focus:ring-primary': true,
-                        'focus:outline-none focus:ring-danger focus:border-danger border border-danger': isTaskdescriptionInvalid,
-                        'focus:border-primary border border-gray-300': !isTaskdescriptionInvalid,
-                    }), placeholder: "Task Description" }),
-                isTaskdescriptionInvalid && (react_1.default.createElement("div", { className: "block text-sm text-danger-dark mt-1" }, isTaskdescriptionInvalidText))),
-            react_1.default.createElement("div", { className: "flex flex-row gap-x-2 mt-12 mb-4" },
-                react_1.default.createElement(base_ui_1.Button, { type: "button", onClick: () => onCloseModal(), label: "CANCEL", className: "mt-4" }),
-                react_1.default.createElement(base_ui_1.Button, { type: "button", onClick: () => { handleSubmit(); }, label: "SUBMIT", className: "mt-4 w-1/2 sm:w-1/4", color: "primary", isLoading: loading, disabled: isHoursInvalid || isMinutesInvalid || isHoursExceeded || isTaskdescriptionInvalid || !taskDescription.length || !timeLogDate || error })),
-            error && react_1.default.createElement("div", { className: "w-full" },
-                "You cannot log over the max hours of ", (_d = projectData === null || projectData === void 0 ? void 0 : projectData.maxHours) !== null && _d !== void 0 ? _d : 0,
-                " for this project. Please reach out to your Customer Success Manager if you have communication from the Client that you can submit over this amount."))));
-};
-exports.LogTimeModalAuthenticated = LogTimeModalAuthenticated;
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LogTimeModalAuthenticated = exports.SelectDate = exports.constants = exports.TASK_DESCRIPTION_VALIDATION = exports.roundMinutes = void 0;
+const react_1 = __importStar(require("react"));
+const base_ui_1 = require("@paro.io/base-ui");
+require("date-fns");
+const classnames_1 = __importDefault(require("classnames"));
+const dayjs_1 = __importDefault(require("dayjs"));
+const react_hot_toast_1 = __importDefault(require("react-hot-toast"));
+const ActiveProjectCard_1 = require("./ActiveProjectCard");
+const moment_1 = __importDefault(require("moment"));
+const pickers_1 = require("@material-ui/pickers");
+const dayjs_2 = __importDefault(require("@date-io/dayjs"));
+const core_1 = require("@material-ui/core");
+const roundMinutes = (minutes, hours) => {
+    if (minutes === 0)
+        return { hours: hours, minutes: 0 };
+    if (minutes <= 15)
+        return { hours: hours, minutes: 15 };
+    if (minutes <= 30)
+        return { hours: hours, minutes: 30 };
+    if (minutes <= 45)
+        return { hours: hours, minutes: 45 };
+    return { hours: hours + 1, minutes: 0 };
+};
+exports.roundMinutes = roundMinutes;
+exports.TASK_DESCRIPTION_VALIDATION = {
+    MAX_LENGTH: 120,
+    MIN_LENGTH: 3,
+    LENGTH_VALIDATION_MESSAGE: `Task Description should be greater than 3 characters.`,
+};
+const TASK_MIN_VALIDATION = {
+    MAX_LENGTH: 59,
+    MIN_LENGTH: 0,
+    LENGTH_ERROR_MSG: 'Minutes should be poisitive number and less than 60.',
+    NON_EMPTY_ERROR_MSG: "Minutes can't be empty",
+    GREATER_THAN_ZERO: "Hours or minutes should be greater than zero"
+};
+const TASK_HOURS_VALIDATION = {
+    MAX_LENGTH: 999,
+    MIN_LENGTH: 0,
+    LENGTH_ERROR_MSG: 'Hours should be less than 1000.',
+    NON_EMPTY_ERROR_MSG: "Hours can't be empty",
+    GREATER_THAN_ZERO: "Hours or minutes should be greater than zero"
+};
+const addHoursAndMinutes = (hours, minutes) => {
+    const MINUTES_IN_AN_HOUR = 60;
+    const minutesToHours = minutes / MINUTES_IN_AN_HOUR;
+    return Number((hours + minutesToHours).toFixed(2));
+};
+const getMaxDateForAddTimeLog = () => {
+    const date = new Date();
+    date.setMonth(date.getMonth() + 1);
+    return date;
+};
+const getMinDateForAddTimeLog = () => {
+    const date = new Date();
+    date.setFullYear(date.getFullYear() - 1);
+    return date;
+};
+exports.constants = {
+    MINUTES_ERROR_MESSAGE: "Minutes can't be empty",
+    HOURS_ERROR_MESSAGE: "Hours can't be empty",
+    DATE_FORMAT: 'MM/DD/YYYY',
+    MAX_DATE: getMaxDateForAddTimeLog(),
+    MIN_DATE: getMinDateForAddTimeLog(),
+    DATE_VALIDATION_MESSAGE: 'Please enter valid date',
+    TASK_DESCRIPTION_ERROR_MESSAGE: "Task Description can't be empty",
+};
+const SelectDate = ({ timeLogDate, setTimeLogDate, isInvalid, setIsDateInvalid, validateDate, showErrorText = true, disabled, maxDate, minDate }) => {
+    const theme = (0, core_1.useTheme)();
+    const mobileScreen = (0, core_1.useMediaQuery)(theme.breakpoints.down('sm'));
+    const handleDateChange = (date) => {
+        const currentDate = date.$d;
+        setTimeLogDate(currentDate);
+        validateDate(currentDate);
+    };
+    const onBlur = (event) => {
+        let currentDate = new Date(event.target.value);
+        currentDate = currentDate.toString() !== "Invalid Date" ? currentDate : "";
+        setTimeLogDate(currentDate);
+        validateDate(currentDate);
+    };
+    const getDatePicker = (showErrorText) => {
+        return (react_1.default.createElement(pickers_1.MuiPickersUtilsProvider, { utils: dayjs_2.default },
+            react_1.default.createElement(pickers_1.KeyboardDatePicker, { className: (0, classnames_1.default)({
+                    "base-ui-date-picker": true,
+                    "base-ui-date-picker-error": isInvalid,
+                }), "data-testid": "date-picker-inline", disableToolbar: true, variant: mobileScreen ? "dialog" : "inline", format: exports.constants.DATE_FORMAT, margin: "normal", placeholder: "Select Date", value: timeLogDate, onChange: () => {
+                    setIsDateInvalid("");
+                }, onBlur: onBlur, onAccept: handleDateChange, maxDate: maxDate !== null && maxDate !== void 0 ? maxDate : exports.constants.MAX_DATE, minDate: minDate !== null && minDate !== void 0 ? minDate : exports.constants.MIN_DATE, helperText: showErrorText && isInvalid && exports.constants.DATE_VALIDATION_MESSAGE, error: isInvalid !== "" && isInvalid, style: { margin: 0 }, KeyboardButtonProps: Object.assign({ "aria-label": "change date" }, { ["data-testid"]: "timelog-datepicker" }), fullWidth: true, disabled: disabled, autoOk: true })));
+    };
+    return (react_1.default.createElement("div", { className: "mt-1" },
+        react_1.default.createElement("div", { className: "block w-full sm:w-1/3" }, getDatePicker(showErrorText))));
+};
+exports.SelectDate = SelectDate;
+const LogTimeModalAuthenticated = ({ project, freelancerId, showTimeModal, setShowTimeModal, isDateInvalid, setIsDateInvalid, validateDate, setSingleProjectData, projectData, isAuthenticated, selectedTab, submitProjectHoursMutation, GetAllProjectIrprDetailsForFreelancerDocument, getAuth0Roles, submitProjectHoursLambda, user, }) => {
+    var _a, _b, _c, _d;
+    const [timeLogDate, setTimeLogDate] = (0, react_1.useState)(new Date());
+    const [hours, setHours] = (0, react_1.useState)('');
+    const [minutes, setMinutes] = (0, react_1.useState)('');
+    const [isHoursInvalid, setIsHoursInvalid] = (0, react_1.useState)(false);
+    const [isMinutesInvalid, setIsMinutesInvalid] = (0, react_1.useState)(false);
+    const [isMinutesInvalidText, setIsMinutesInvalidText] = (0, react_1.useState)(exports.constants.MINUTES_ERROR_MESSAGE);
+    const [isHoursInvalidText, setIsHoursInvalidText] = (0, react_1.useState)(exports.constants.HOURS_ERROR_MESSAGE);
+    const [isHoursExceeded, setIsHoursExceeded] = (0, react_1.useState)(false);
+    const [taskDescription, setTaskDescription] = (0, react_1.useState)('');
+    const [isTaskdescriptionInvalid, setIsTaskdescriptionInvalid] = (0, react_1.useState)(false);
+    const [isTaskdescriptionInvalidText, setIsTaskdescriptionInvalidText] = (0, react_1.useState)(exports.constants.TASK_DESCRIPTION_ERROR_MESSAGE);
+    const [loading, setLoading] = (0, react_1.useState)(false);
+    const [error, setError] = (0, react_1.useState)(false);
+    const currProjectHours = parseFloat(projectData === null || projectData === void 0 ? void 0 : projectData.hoursInvoiced);
+    const { hoursPerWeek, minFloorHours } = (0, ActiveProjectCard_1.getAllProjectRecommendationData)({ projectData });
+    const firstDateOfMonth = (0, moment_1.default)().startOf('month').format('MM/DD/YY');
+    const lastDateOfMonth = (0, moment_1.default)().endOf('month').format('MM/DD/YY');
+    const isRecurringHourlyProject = ((_a = project === null || project === void 0 ? void 0 : project.projectScope) === null || _a === void 0 ? void 0 : _a.projectFrequencyId) === 1 || ((_b = project === null || project === void 0 ? void 0 : project.projectScope) === null || _b === void 0 ? void 0 : _b.projectFrequencyId) === 2;
+    const auth0Roles = user && getAuth0Roles(user);
+    const disableHoursRounding = auth0Roles && auth0Roles.includes('expert_disable_rounding');
+    const validateHours = (value) => {
+        const empty = value == '';
+        const maxvalue = parseInt(value) > TASK_HOURS_VALIDATION.MAX_LENGTH;
+        const minvalue = parseInt(value) < TASK_HOURS_VALIDATION.MIN_LENGTH;
+        if (empty || maxvalue || minvalue) {
+            setIsHoursInvalid(true);
+        }
+        else {
+            setIsHoursInvalid(false);
+            setIsHoursInvalidText(TASK_HOURS_VALIDATION.NON_EMPTY_ERROR_MSG);
+        }
+        if (value === "0" && minutes === "0") {
+            setIsHoursInvalid(true);
+            setIsHoursInvalidText(TASK_HOURS_VALIDATION.GREATER_THAN_ZERO);
+        }
+        if (maxvalue || minvalue) {
+            setIsHoursInvalidText(TASK_HOURS_VALIDATION.LENGTH_ERROR_MSG);
+        }
+        else {
+            return true;
+        }
+        return false;
+    };
+    (0, react_1.useEffect)(() => {
+        const hoursAndMinutes = addHoursAndMinutes(Number(hours), Number(minutes) || 0).toFixed(2);
+        if (Number(hoursAndMinutes) > 24) {
+            setIsHoursExceeded(true);
+        }
+    }, [hours, minutes]);
+    const validateMinutes = (value) => {
+        const empty = value == '';
+        const maxvalue = parseInt(value) > TASK_MIN_VALIDATION.MAX_LENGTH;
+        const minvalue = parseInt(value) < TASK_MIN_VALIDATION.MIN_LENGTH;
+        if (empty || maxvalue || minvalue) {
+            setIsMinutesInvalid(true);
+        }
+        else {
+            setIsMinutesInvalid(false);
+            setIsMinutesInvalidText(TASK_MIN_VALIDATION.NON_EMPTY_ERROR_MSG);
+        }
+        if (value === "0" && hours === "0") {
+            setIsMinutesInvalid(true);
+            setIsMinutesInvalidText(TASK_MIN_VALIDATION.GREATER_THAN_ZERO);
+        }
+        if (maxvalue || minvalue) {
+            setIsMinutesInvalidText(TASK_MIN_VALIDATION.LENGTH_ERROR_MSG);
+        }
+        else {
+            return true;
+        }
+        return false;
+    };
+    const validateTaskDescription = (value) => {
+        const arealength = value.trim().length < exports.TASK_DESCRIPTION_VALIDATION.MIN_LENGTH;
+        if (arealength) {
+            setIsTaskdescriptionInvalid(true);
+        }
+        else {
+            setIsTaskdescriptionInvalid(false);
+        }
+        if (arealength) {
+            setIsTaskdescriptionInvalidText(exports.TASK_DESCRIPTION_VALIDATION.LENGTH_VALIDATION_MESSAGE);
+        }
+        else {
+            return true;
+        }
+        return false;
+    };
+    const handleChange = (name, value) => {
+        setError(false);
+        if (name === 'hours') {
+            const numberOnly = value.replace(/\D/g, '');
+            setHours(numberOnly);
+            validateHours(numberOnly);
+            setMinutes(minutes || "0");
+            validateMinutes(minutes || "0");
+            setIsHoursExceeded(false);
+        }
+        else if (name === 'minutes') {
+            const numberOnly = value.replace(/\D/g, '');
+            setMinutes(numberOnly);
+            validateMinutes(numberOnly);
+            setHours(hours || "0");
+            validateHours(hours || "0");
+            setIsHoursExceeded(false);
+        }
+        else if (name === 'textarea') {
+            setTaskDescription(value);
+            validateTaskDescription(value);
+        }
+    };
+    const handleBlur = () => {
+        setHours(hours || '0');
+        validateHours(hours || '0');
+        setMinutes(minutes || '0');
+        validateMinutes(minutes || '0');
+    };
+    const handleSubmit = () => __awaiter(void 0, void 0, void 0, function* () {
+        setLoading(true);
+        const isDateValid = validateDate(timeLogDate);
+        const isHoursInValid = validateHours(hours);
+        const minutesInvalid = validateMinutes(minutes);
+        const taskDescriptionInvalid = validateTaskDescription(taskDescription);
+        if (isHoursInValid && minutesInvalid && taskDescriptionInvalid) {
+            const roundedTime = (0, exports.roundMinutes)(Number(minutes), Number(hours));
+            const totalHours = disableHoursRounding ? parseFloat(addHoursAndMinutes(Number(hours), Number(minutes) || 0).toFixed(2)) : parseFloat((roundedTime.hours + roundedTime.minutes / 60).toFixed(2));
+            let progressBarHours = 0;
+            if (isRecurringHourlyProject) {
+                progressBarHours = (0, moment_1.default)(timeLogDate).isBetween(firstDateOfMonth, lastDateOfMonth, null, '[]') ? totalHours : 0;
+            }
+            else {
+                progressBarHours = totalHours;
+            }
+            try {
+                const projectHours = {
+                    date: (0, dayjs_1.default)(timeLogDate).format('MM/DD/YY'),
+                    description: taskDescription,
+                    hours: totalHours,
+                    sourceId: 55,
+                    freelancerId: freelancerId,
+                    projectId: parseInt(project === null || project === void 0 ? void 0 : project.id)
+                };
+                if (isAuthenticated) {
+                    yield submitProjectHoursMutation({
+                        variables: {
+                            input: projectHours,
+                        },
+                        refetchQueries: [
+                            { query: GetAllProjectIrprDetailsForFreelancerDocument, variables: { freelancerId, projectType: 3, activeTabId: selectedTab } }
+                        ]
+                    });
+                }
+                else {
+                    yield submitProjectHoursLambda(projectHours);
+                }
+                const totalNewHours = currProjectHours + progressBarHours;
+                const hoursLeftToLog = Number(hoursPerWeek);
+                setSingleProjectData((prev) => (Object.assign(Object.assign({}, prev), { hoursInvoiced: totalNewHours, weeklyMinHoursLogged: hoursLeftToLog > 0 ? progressBarHours >= hoursLeftToLog : true, minimumFloorHoursCompleted: totalNewHours >= minFloorHours })));
+                (0, react_hot_toast_1.default)(react_1.default.createElement(base_ui_1.Alert, { color: "success", icon: "success", label: `Logged hours successful` }), {
+                    position: 'bottom-right',
+                    style: { borderRadius: '8px' },
+                });
+                setLoading(false);
+                setShowTimeModal(false);
+                setTimeLogDate(null);
+                setHours('');
+                setMinutes('');
+                setTaskDescription('');
+            }
+            catch (error) {
+                //@ts-ignore
+                setLoading(false);
+                console.log("error updating Project Hours", error);
+                (0, react_hot_toast_1.default)(react_1.default.createElement(base_ui_1.Alert, { color: "danger", icon: "danger", label: `Failed to update logged hours` }), {
+                    position: 'bottom-right',
+                    style: { borderRadius: '8px' },
+                });
+            }
+        }
+        else {
+            setLoading(false);
+        }
+    });
+    const onCloseModal = () => {
+        setLoading(false);
+        setShowTimeModal(false);
+        setTimeLogDate(null);
+        setHours('');
+        setMinutes('');
+        setTaskDescription('');
+    };
+    return (react_1.default.createElement(base_ui_1.Modal, { open: showTimeModal, onClose: () => onCloseModal(), size: "sm", className: "z-[100]" },
+        react_1.default.createElement("div", { className: "flex flex-col gap-y-2" },
+            react_1.default.createElement("h1", { className: "text-lg font-bold" },
+                "Add time for ", (_c = project === null || project === void 0 ? void 0 : project.client) === null || _c === void 0 ? void 0 :
+                _c.name),
+            react_1.default.createElement("h1", { className: "text-md font-bold" },
+                "Project: ", project === null || project === void 0 ? void 0 :
+                project.name),
+            react_1.default.createElement("div", { className: 'text-xs italic mb-6' }, " Note: Entries are rounded up to the nearest 15-minute increment"),
+            react_1.default.createElement("p", { className: "font-bold" }, "Select Date"),
+            react_1.default.createElement(exports.SelectDate, { timeLogDate: timeLogDate, setTimeLogDate: setTimeLogDate, isInvalid: false, setIsDateInvalid: setIsDateInvalid, validateDate: validateDate, maxDate: project === null || project === void 0 ? void 0 : project.endDate }),
+            react_1.default.createElement("p", { className: "font-bold mt-2" }, "Enter Time"),
+            react_1.default.createElement("div", { className: "flex flex-col sm:flex-row gap-x-6" },
+                react_1.default.createElement(base_ui_1.Input, { label: "Hours", className: "sm:text-sm h-12", placeholder: "HH", name: "hours", onChange: (event) => handleChange('hours', event.target.value), onBlur: (_event) => handleBlur(), value: hours, isInvalid: isHoursInvalid, isInvalidText: isHoursInvalidText, maxLength: 3 }),
+                react_1.default.createElement(base_ui_1.Input, { label: "Minutes", className: "sm:text-sm h-12", placeholder: "MM", name: "minutes", onChange: (event) => handleChange('minutes', event.target.value), onBlur: (_event) => handleBlur(), value: minutes, isInvalid: isMinutesInvalid, isInvalidText: isMinutesInvalidText, maxLength: 2 })),
+            isHoursExceeded && react_1.default.createElement("div", { className: "text-red-800 text-xs mt-2" },
+                "Submitting over 24 hours for a single date is not allowed, please contact ",
+                react_1.default.createElement("a", { className: "text-blue-600", href: "mailto:projectsupport@paro.io" }, "projectsupport@paro.io"),
+                " if you are experiencing any issues"),
+            react_1.default.createElement("div", { className: "w-full" },
+                react_1.default.createElement("textarea", { value: taskDescription, onChange: (event) => handleChange('textarea', event.target.value), cols: 1, style: { resize: 'none' }, className: (0, classnames_1.default)({
+                        'p-2.5 mt-1 w-full bg-gray-100 focus:bg-white text-sm block sm:text-sm rounded focus:outline-none focus:ring-1 focus:ring-primary': true,
+                        'focus:outline-none focus:ring-danger focus:border-danger border border-danger': isTaskdescriptionInvalid,
+                        'focus:border-primary border border-gray-300': !isTaskdescriptionInvalid,
+                    }), placeholder: "Task Description" }),
+                isTaskdescriptionInvalid && (react_1.default.createElement("div", { className: "block text-sm text-danger-dark mt-1" }, isTaskdescriptionInvalidText))),
+            react_1.default.createElement("div", { className: "flex flex-row gap-x-2 mt-12 mb-4" },
+                react_1.default.createElement(base_ui_1.Button, { type: "button", onClick: () => onCloseModal(), label: "CANCEL", className: "mt-4" }),
+                react_1.default.createElement(base_ui_1.Button, { type: "button", onClick: () => { handleSubmit(); }, label: "SUBMIT", className: "mt-4 w-1/2 sm:w-1/4", color: "primary", isLoading: loading, disabled: isHoursInvalid || isMinutesInvalid || isHoursExceeded || isTaskdescriptionInvalid || !taskDescription.length || !timeLogDate || error })),
+            error && react_1.default.createElement("div", { className: "w-full" },
+                "You cannot log over the max hours of ", (_d = projectData === null || projectData === void 0 ? void 0 : projectData.maxHours) !== null && _d !== void 0 ? _d : 0,
+                " for this project. Please reach out to your Customer Success Manager if you have communication from the Client that you can submit over this amount."))));
+};
+exports.LogTimeModalAuthenticated = LogTimeModalAuthenticated;