@paro.io/expert-shared-components 1.9.6 → 1.9.7

package/lib/components/EarningsTracker/LeftCardUI.js

@@ -0,0 +1,189 @@
+"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.LeftCardUI = void 0;
+const react_1 = __importStar(require("react"));
+const core_1 = require("@material-ui/core");
+const base_icons_1 = require("@paro.io/base-icons");
+const ActiveProjectCard_1 = require("./ActiveProjectCard");
+const moment_1 = __importDefault(require("moment"));
+const react_hot_toast_1 = __importDefault(require("react-hot-toast"));
+const base_ui_1 = require("@paro.io/base-ui");
+const ProgressBar_1 = __importStar(require("./ProgressBar"));
+const LeftCardUI = ({ projectData, projectRateType, projectFrequencyType, project, isAuthenticated, activeProject, adhocProject, freelancerId, selectedTab, updateProjectTaskMutation, GetAllProjectIrprDetailsForFreelancerDocument, updateProjectTask, clientPortal, }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    const projectHealth = (_a = project === null || project === void 0 ? void 0 : project.healthGrade) !== null && _a !== void 0 ? _a : "!";
+    const maxFloorHours = (_b = projectData === null || projectData === void 0 ? void 0 : projectData.maxHours) !== null && _b !== void 0 ? _b : 0;
+    const loggedHours = (_c = projectData === null || projectData === void 0 ? void 0 : projectData.hoursInvoiced) !== null && _c !== void 0 ? _c : 0;
+    const payRate = (_d = projectData === null || projectData === void 0 ? void 0 : projectData.expertRate) !== null && _d !== void 0 ? _d : 0;
+    const invoicedAmount = payRate * loggedHours;
+    const expertSowValue = (_e = projectData === null || projectData === void 0 ? void 0 : projectData.expertSowValue) !== null && _e !== void 0 ? _e : 0;
+    const isNegative = (expertSowValue - invoicedAmount) < 0;
+    const textColor = isNegative ? "#A73A43" : "#248384";
+    const classes = (0, ActiveProjectCard_1.useStyles)();
+    const endDate = (0, moment_1.default)((_f = projectData === null || projectData === void 0 ? void 0 : projectData.endDate) !== null && _f !== void 0 ? _f : (0, moment_1.default)().format('YYYY-MM-DD'));
+    const startDate = (0, moment_1.default)((_g = projectData === null || projectData === void 0 ? void 0 : projectData.startDate) !== null && _g !== void 0 ? _g : (0, moment_1.default)().format('YYYY-MM-DD'));
+    const totalProjectHrs = (projectData === null || projectData === void 0 ? void 0 : projectData.totalProjectHrs) || 0;
+    const containerRef = (0, react_1.useRef)(null);
+    const today = new Date();
+    const currMonth = today.toLocaleDateString('en-US', { month: 'short' });
+    const { minFloorHours } = (0, ActiveProjectCard_1.getAllProjectRecommendationData)({ projectData });
+    const toolTipText = projectFrequencyType === "Recurring" ? "(Max Hours for a month * Expert Rate for that project) - Monthly $ Invoiced" : "";
+    /* How earnings are calculated
+        Project Type:
+        ·Fixed One Time: Total $ for project - (Hours Invoiced * Expert Rate)
+        ·Fixed Recurring: Expert Rate for Project(aka Monthly Earnings)
+            ·If even one hour invoiced for Fixed Recurring project, then no unrealized earnings
+        ·Hourly One Time: Max Hours * Expert Rate - ( Hours Invoiced * Expert Rate)
+        ·Hourly Recurring: Max Hours * Expert Rate - ( Hours Invoiced * Expert Rate)
+    */
+    const calculateUnrealizedEarnings = (projectFrequency, projectRate, data) => {
+        if (!data)
+            return;
+        const oneTime = (data === null || data === void 0 ? void 0 : data.maxHours) * (data === null || data === void 0 ? void 0 : data.expertRate);
+        if (projectRate === "Hourly") {
+            return oneTime - invoicedAmount;
+        }
+        if (projectRate === "Fixed" && projectFrequency === "One-time") {
+            const { expertSowValue } = data;
+            return expertSowValue - invoicedAmount;
+        }
+        if (projectRate === "Fixed" && projectFrequency === "Recurring") {
+            // Hours invoiced is total hours invoiced since start of month
+            const { hoursInvoiced, expertRate } = data;
+            if (hoursInvoiced > 0) {
+                return 0;
+            }
+            return expertRate;
+        }
+    };
+    const totalUnrealizedEarnings = startDate.diff(endDate, 'months') * maxFloorHours * payRate;
+    const [tskid, setTskid] = (0, react_1.useState)(undefined);
+    const [statusId, setStatusId] = (0, react_1.useState)(undefined);
+    const loadingUpdateTask = false;
+    const updateTaskStatus = (taskId, statusValue) => __awaiter(void 0, void 0, void 0, function* () {
+        console.log(`Updating task ${taskId} status to ${statusValue}`);
+        try {
+            setTskid(taskId);
+            setStatusId(statusValue);
+            isAuthenticated ?
+                updateProjectTaskMutation({
+                    variables: { id: taskId, statusId: statusValue },
+                    refetchQueries: [
+                        { query: GetAllProjectIrprDetailsForFreelancerDocument, variables: { freelancerId, projectType: 3, activeTabId: selectedTab } }
+                    ]
+                }).then((res) => {
+                    if (res) {
+                        (0, react_hot_toast_1.default)(react_1.default.createElement(base_ui_1.Alert, { color: "success", icon: "success", label: `Successfully updated task status` }), {
+                            position: 'bottom-right',
+                            style: { borderRadius: '8px' },
+                        });
+                    }
+                }) : yield updateProjectTask({ id: taskId, statusId: statusValue });
+        }
+        catch (error) {
+            console.error(`Error updating status`, error);
+            (0, react_hot_toast_1.default)(react_1.default.createElement(base_ui_1.Alert, { color: "danger", icon: "danger", label: `Failed to update` }), {
+                position: 'bottom-right',
+                style: { borderRadius: '8px' },
+            });
+        }
+        setTskid(undefined);
+        setStatusId(undefined);
+    });
+    return (react_1.default.createElement("div", { className: `flex w-full ${projectRateType === "Fixed" ? "flex-col items-center justify-around gap-x-10 gap-y-4 md:flex-row" : "flex-col md:w-1/3"}` },
+        projectRateType === "Fixed" &&
+            react_1.default.createElement("div", { className: 'mb-2 w-3/4' },
+                react_1.default.createElement("div", { className: "flex py-3" },
+                    react_1.default.createElement("div", { className: "flex-1 pr-4 sm:pr-2 text-right sm:text-left font-bold text-lg" }, "SOW Tasks:"),
+                    react_1.default.createElement("div", { className: "flex-initial w-44 pl-4 sm:pl-2 text-left sm:text-left font-bold text-lg mr-4" }, "Status")),
+                react_1.default.createElement("div", null, ((_h = project === null || project === void 0 ? void 0 : project.projectScopeTasks) === null || _h === void 0 ? void 0 : _h.length) > 0 ? (project.projectScopeTasks.map((task) => {
+                    var _a;
+                    return (react_1.default.createElement("div", { className: "flex py-3 items-center justify-between my-4" },
+                        react_1.default.createElement("div", { key: task.id, className: 'flex-1 pr-4 sm:pr-2 text-right sm:text-left mr-4' },
+                            react_1.default.createElement("div", { ref: containerRef, className: 'w-full' },
+                                react_1.default.createElement("p", { className: 'border px-2 py-1 rounded bg-slate-100 flex-wrap' }, String((_a = task === null || task === void 0 ? void 0 : task.name) !== null && _a !== void 0 ? _a : '')))),
+                        react_1.default.createElement("div", { className: 'flex-initial w-44 pl-5 sm:pl-2 text-left sm:text-left mr-4' },
+                            react_1.default.createElement(core_1.FormControl, { fullWidth: true },
+                                react_1.default.createElement(core_1.Select, { labelId: "status", id: "status", label: "Status", value: task.statusId || '', variant: "standard", className: "border-none w-36", onChange: (event) => {
+                                        const newStatusValue = event.target.value;
+                                        updateTaskStatus(task.id, newStatusValue);
+                                    }, disabled: loadingUpdateTask || !activeProject || clientPortal },
+                                    react_1.default.createElement(core_1.MenuItem, { value: 2 }, "Pending"),
+                                    react_1.default.createElement(core_1.MenuItem, { value: 1 }, "Completed"),
+                                    react_1.default.createElement(core_1.MenuItem, { value: 3 }, "In Progress"),
+                                    react_1.default.createElement(core_1.MenuItem, { value: 4 }, "Not Needed"))))));
+                })) : (react_1.default.createElement("p", null, "No tasks found")))),
+        projectRateType !== "Fixed" && react_1.default.createElement(react_1.default.Fragment, null,
+            !adhocProject && (react_1.default.createElement("div", { className: "flex flex-col justify-content-center items-center" },
+                react_1.default.createElement("h1", { className: "text-md font-bold" }, "Project Health Grade"),
+                react_1.default.createElement(core_1.Tooltip, { classes: { tooltip: classes.tooltip }, title: "Project health grades can take up to 24 hours to update even after logging hours.", placement: "top", arrow: true },
+                    react_1.default.createElement("div", { className: `h-12 w-16 border-2 border-solid rounded-md flex place-content-center items-center mt-4 ${['A', 'B', 'C', 'D'].includes(projectHealth) ? (['A', 'B'].includes(projectHealth) && "bg-[#F1F5F9] border-[#A3DCD8]") || (['C', 'D'].includes(projectHealth) && "bg-[#A73A43 border-[#F9C34F]") : "bg-[#A73A43] text-[#F1F5F9] border-[#F1F5F9]"}` },
+                        react_1.default.createElement("h1", { className: "text-xl" }, projectHealth))))),
+            !adhocProject && (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement("div", { className: "mt-8" },
+                    (projectData === null || projectData === void 0 ? void 0 : projectData.minFloorHours) > 0 && react_1.default.createElement(ActiveProjectCard_1.CheckItem, { checked: projectData === null || projectData === void 0 ? void 0 : projectData.minimumFloorHoursCompleted, text: "Minimum Floor Hours Completed" }),
+                    react_1.default.createElement(ActiveProjectCard_1.CheckItem, { checked: projectData === null || projectData === void 0 ? void 0 : projectData.weeklyMinHoursLogged, text: "Weekly Minimum Hours Logged" })),
+                react_1.default.createElement("div", { className: "flex flex-row m-2 gap-x-1" },
+                    react_1.default.createElement("p", null, "How does this grade affect me?"),
+                    react_1.default.createElement(core_1.Tooltip, { classes: { tooltip: classes.tooltip }, title: "This grade does not have an impact on your standing with Paro but if you see a low grade or action required, please reach out to the Customer Success Team to help make sure you are staying up to date with your projects.", placement: "top", arrow: true },
+                        react_1.default.createElement("div", null,
+                            react_1.default.createElement(base_icons_1.IconInfoCircle, null)))))),
+            react_1.default.createElement("p", { className: "font-bold text-lg mt-6 mb-6" }, projectFrequencyType === "Recurring" ? `Hours Logged for ${currMonth}` : "Hours Logged"),
+            react_1.default.createElement("div", { className: "mb-10 mt-10" },
+                react_1.default.createElement(ProgressBar_1.default, { minFloorHours: Number(minFloorHours), maxFloorHours: Number(maxFloorHours), loggedHours: Number(loggedHours) }))),
+        react_1.default.createElement("div", { className: `flex flex-col ${projectRateType === 'Fixed' ? "w-full md:w-1/4 mt-2" : "w-full"}` },
+            react_1.default.createElement("div", { className: "flex flex-row justify-between" },
+                react_1.default.createElement("p", null,
+                    projectFrequencyType === "Recurring" && "Monthly",
+                    " Hours Invoiced"),
+                react_1.default.createElement("p", null, (0, ProgressBar_1.formatNumberingSystem)(loggedHours))),
+            react_1.default.createElement("div", { className: "flex flex-row justify-between" },
+                react_1.default.createElement("p", null,
+                    projectFrequencyType === "Recurring" && "Monthly",
+                    " $ Invoiced"),
+                react_1.default.createElement("p", null,
+                    "$ ",
+                    (0, ProgressBar_1.formatNumberingSystem)(invoicedAmount))),
+            react_1.default.createElement(core_1.Tooltip, { classes: { tooltip: classes.tooltip }, title: toolTipText, placement: "top", arrow: true },
+                react_1.default.createElement("div", { className: "flex flex-row justify-between mt-1 font-bold text-md" },
+                    react_1.default.createElement("p", null, projectFrequencyType === 'Recurring' ? 'Monthly Unrealized Earnings' : 'Unrealized Earnings'),
+                    react_1.default.createElement("p", { className: `text-[${textColor}]` },
+                        "$ ",
+                        (0, ProgressBar_1.formatNumberingSystem)(Math.max(calculateUnrealizedEarnings(projectFrequencyType, projectRateType, projectData), 0))))))));
+};
+exports.LeftCardUI = LeftCardUI;

package/lib/components/EarningsTracker/LogTimeModalAuthenticated.d.ts

@@ -0,0 +1,52 @@
+import React from 'react';
+import "date-fns";
+export declare const roundMinutes: (minutes: number, hours: number) => {
+    hours: number;
+    minutes: number;
+};
+export declare const TASK_DESCRIPTION_VALIDATION: {
+    MAX_LENGTH: number;
+    MIN_LENGTH: number;
+    LENGTH_VALIDATION_MESSAGE: string;
+};
+export declare const constants: {
+    MINUTES_ERROR_MESSAGE: string;
+    HOURS_ERROR_MESSAGE: string;
+    DATE_FORMAT: string;
+    MAX_DATE: Date;
+    MIN_DATE: Date;
+    DATE_VALIDATION_MESSAGE: string;
+    TASK_DESCRIPTION_ERROR_MESSAGE: string;
+};
+type SelectDateProps = {
+    timeLogDate: any;
+    setTimeLogDate: (e: any) => void;
+    isInvalid: boolean | "";
+    setIsDateInvalid: (e: any) => void;
+    validateDate: (e: any) => boolean;
+    showErrorText?: boolean;
+    disabled?: boolean;
+    maxDate?: string;
+    minDate?: string;
+};
+export declare const SelectDate: ({ timeLogDate, setTimeLogDate, isInvalid, setIsDateInvalid, validateDate, showErrorText, disabled, maxDate, minDate }: SelectDateProps) => React.JSX.Element;
+interface LogTimeModalAuthenticatedProps {
+    project: any;
+    freelancerId: number;
+    showTimeModal: boolean;
+    setShowTimeModal: (showTimeModal: boolean) => void;
+    isDateInvalid: any;
+    setIsDateInvalid: (isDateInvalid: any) => void;
+    validateDate: any;
+    setSingleProjectData: any;
+    projectData: any;
+    isAuthenticated: boolean;
+    selectedTab: number;
+    submitProjectHoursMutation: any;
+    GetAllProjectIrprDetailsForFreelancerDocument: any;
+    getAuth0Roles: any;
+    submitProjectHoursLambda: any;
+    user: any;
+}
+export declare const LogTimeModalAuthenticated: ({ project, freelancerId, showTimeModal, setShowTimeModal, isDateInvalid, setIsDateInvalid, validateDate, setSingleProjectData, projectData, isAuthenticated, selectedTab, submitProjectHoursMutation, GetAllProjectIrprDetailsForFreelancerDocument, getAuth0Roles, submitProjectHoursLambda, user, }: LogTimeModalAuthenticatedProps) => React.JSX.Element;
+export {};

package/lib/components/EarningsTracker/LogTimeModalAuthenticated.js

@@ -0,0 +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;

package/lib/components/EarningsTracker/ProgressBar.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const formatNumberingSystem: (value: any) => string | 0;
+declare const ProgressBar: ({ minFloorHours, maxFloorHours, loggedHours }: any) => React.JSX.Element;
+export default ProgressBar;