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

package/lib/components/ProjectCard/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 && 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.error("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/ProjectCard/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;

package/lib/components/ProjectCard/ProgressBar.js

@@ -0,0 +1,66 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.formatNumberingSystem = void 0;
+const react_1 = __importDefault(require("react"));
+const formatNumberingSystem = (value) => {
+    const stringValue = value === null || value === void 0 ? void 0 : value.toString();
+    if (!stringValue)
+        return 0;
+    const formatter = new Intl.NumberFormat('en-US', {
+        minimumFractionDigits: 2,
+        maximumFractionDigits: 2,
+        style: 'decimal',
+    });
+    return formatter.format(stringValue);
+};
+exports.formatNumberingSystem = formatNumberingSystem;
+const ProgressBar = ({ minFloorHours, maxFloorHours, loggedHours }) => {
+    var _a, _b;
+    const totalLoggedHours = Number((loggedHours).toFixed(2));
+    const totalBar = maxFloorHours < totalLoggedHours ? totalLoggedHours : maxFloorHours * 1.1;
+    const dottedLinePosition = ((minFloorHours / totalBar) * 100).toFixed(2);
+    const solidLinePosition = ((maxFloorHours / totalBar) * 100).toFixed(2);
+    const isRounded = Number(((totalLoggedHours / totalBar) * 100).toFixed(0)) >= 100 || totalLoggedHours === 0;
+    const calculatePosition = () => {
+        let position;
+        if ((totalLoggedHours < (totalBar * 0.03))) {
+            position = (totalLoggedHours / totalBar) * 100;
+        }
+        else {
+            if ((totalLoggedHours < (totalBar * 0.12))) {
+                position = (totalLoggedHours / totalBar * 2) * 100;
+            }
+            else if ((totalLoggedHours >= totalBar) || (totalLoggedHours > (totalBar * 0.12))) {
+                position = ((totalLoggedHours / totalBar) * 100) / 2;
+            }
+            else {
+                position = ((totalLoggedHours / totalBar) * 100);
+            }
+        }
+        return position;
+    };
+    return (react_1.default.createElement("div", { className: `relative m-6 ${minFloorHours <= 0 ? 'pt-4' : 'pt-6'}` },
+        react_1.default.createElement("div", { className: "h-8 w-full border-2 border-solid border-[#64748B] rounded-full relative flex flex-wrap bg-[#F1F5F9]" },
+            react_1.default.createElement("div", { className: `h-full w-full rounded-l-full ${isRounded ? 'rounded-r-full' : ''} 
+                            ${totalLoggedHours >= minFloorHours && totalLoggedHours <= maxFloorHours
+                    ? 'bg-[#248384]'
+                    : totalLoggedHours < minFloorHours
+                        ? 'bg-[#F9BABF]'
+                        : 'bg-[#A73A43]'}`, style: { width: `${totalLoggedHours !== 0 ? ((totalLoggedHours / totalBar) * 100) : 0}%` } },
+                react_1.default.createElement("div", { className: `absolute top-1/2 left-1/2 transform -translate-x-1/2 z-10 
+                            ${totalLoggedHours < (totalBar * 0.03) || totalLoggedHours > totalBar || (totalLoggedHours < (totalBar * 0.12)) ? 'translate-y-full' : '-translate-y-1/2'}
+                            ${totalLoggedHours < minFloorHours || totalLoggedHours === 0 ? 'text-black' : 'text-white'} 
+                            font-bold`, style: { left: `calc(${calculatePosition()}% - 1px)` } },
+                    (0, exports.formatNumberingSystem)(totalLoggedHours),
+                    " hrs")),
+            react_1.default.createElement("div", { className: `absolute h-full border-dotted border-l-2 border-black`, style: { left: `calc(${dottedLinePosition}% - 1px)`, marginTop: "-12px", height: "40px" } }),
+            react_1.default.createElement("div", { className: `absolute h-full border-solid border-l-2 border-black`, style: { left: `calc(${solidLinePosition}% - 1px)`, marginBottom: "-12px", height: "40px" } }),
+            react_1.default.createElement("div", { className: `absolute transform -translate-x-1/2 -translate-y-full text-black`, style: { left: `calc(${dottedLinePosition}% - 1px)`, marginTop: '-12px' } }, (_a = (0, exports.formatNumberingSystem)(minFloorHours)) !== null && _a !== void 0 ? _a : 0,
+                " hrs Min"),
+            react_1.default.createElement("div", { className: `absolute transform -translate-x-1/2 translate-y-full text-black `, style: { left: `calc(${solidLinePosition}% - 1px)`, marginTop: '12px', width: 'max-content' } }, (_b = (0, exports.formatNumberingSystem)(maxFloorHours)) !== null && _b !== void 0 ? _b : 0,
+                " hrs Max"))));
+};
+exports.default = ProgressBar;

package/lib/components/ProjectCard/ReviewRequestModal.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+interface RequestReviewModalProps {
+    project: any;
+    requestModal: boolean;
+    setRequestModal: (requestModal: boolean) => void;
+    expertName: String;
+    freelancerId: number;
+    setRequestStatus: (requestStatus: string) => void;
+    selectedProject?: number | null;
+    setSelectedProject?: (selectedProject: number | null) => void;
+    clientId?: number;
+    refetchParoProjects?: () => void;
+    setHighlightedRatings?: (highlightedRatings: any) => void;
+    createOrUpdateRatingRequestMutation: any;
+}
+export declare const ReviewRequestModal: ({ project, requestModal, setRequestModal, expertName, freelancerId, setRequestStatus, selectedProject, setSelectedProject, clientId, refetchParoProjects, setHighlightedRatings, createOrUpdateRatingRequestMutation, }: RequestReviewModalProps) => React.JSX.Element;
+export {};

package/lib/components/ProjectCard/ReviewRequestModal.js

@@ -0,0 +1,135 @@
+"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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ReviewRequestModal = void 0;
+const react_1 = __importStar(require("react"));
+const base_ui_1 = require("@paro.io/base-ui");
+const react_fontawesome_1 = require("@fortawesome/react-fontawesome");
+const free_solid_svg_icons_1 = require("@fortawesome/free-solid-svg-icons");
+const react_hot_toast_1 = __importDefault(require("react-hot-toast"));
+const ReviewRequestModal = ({ project, requestModal, setRequestModal, expertName, freelancerId, setRequestStatus, selectedProject, setSelectedProject, clientId, refetchParoProjects, setHighlightedRatings, createOrUpdateRatingRequestMutation, }) => {
+    var _a;
+    const [showError, setShowError] = (0, react_1.useState)(false);
+    const [textareaValue, setTextareaValue] = (0, react_1.useState)(`Hi ${(_a = project === null || project === void 0 ? void 0 : project.client) === null || _a === void 0 ? void 0 : _a.name}, 
+I hope you are satisfied with the work I provided on ${project === null || project === void 0 ? void 0 : project.name}. Your feedback is very important to me and helps me improve my services and build my reputation on Paro. Could you please take a moment to leave a review of you experience? Your input is greatly appreciated! 
+  
+Thank you in advance for your time and feedback.
+Best regards,
+${expertName}`);
+    const [loading, setLoading] = (0, react_1.useState)(false);
+    const handleTextArea = (e) => {
+        setTextareaValue(e.target.value);
+        e.target.value.length >= 100 ? setShowError(false) : setShowError(true);
+    };
+    const handleSubmit = () => {
+        setLoading(true);
+        const inputData = clientId ? [{
+                clientId: clientId,
+                freelancerId: +freelancerId,
+                projectId: +(project === null || project === void 0 ? void 0 : project.id),
+                requestedBy: 'Expert',
+                status: 'Requested',
+                message: textareaValue,
+            }] :
+            [{
+                    clientId: +(project === null || project === void 0 ? void 0 : project.clientId),
+                    freelancerId: +freelancerId,
+                    projectId: +(project === null || project === void 0 ? void 0 : project.id),
+                    requestedBy: 'Expert',
+                    status: 'Requested',
+                    message: textareaValue,
+                }];
+        if (textareaValue.length < 100) {
+            setShowError(true);
+            return;
+        }
+        createOrUpdateRatingRequestMutation({
+            variables: {
+                input: inputData,
+            },
+        }).then(() => {
+            refetchParoProjects && refetchParoProjects();
+            setHighlightedRatings && setHighlightedRatings((prevState) => prevState.map((project) => {
+                if (selectedProject && project.id === selectedProject) {
+                    return Object.assign(Object.assign({}, project), { ratingRequest: [Object.assign(Object.assign({}, project.ratingRequest[0]), { status: "Requested" })] });
+                }
+                return project;
+            }));
+            setRequestStatus('Requested');
+            (0, react_hot_toast_1.default)(react_1.default.createElement(base_ui_1.Alert, { color: "success", icon: "success", label: `Request Submitted Successfully` }), {
+                position: 'bottom-right',
+                style: { borderRadius: '8px' },
+            });
+            setSelectedProject && setSelectedProject(null);
+            setRequestModal(false);
+        })
+            .catch((error) => {
+            console.error(error);
+            (0, react_hot_toast_1.default)(react_1.default.createElement(base_ui_1.Alert, { color: "danger", icon: "danger", label: `Failed to Send Request` }), {
+                position: 'bottom-right',
+                style: { borderRadius: '8px' },
+            });
+        }).finally(() => {
+            setLoading(false);
+        });
+    };
+    const handleOnClose = () => {
+        setRequestModal(false);
+        setSelectedProject && setSelectedProject(null);
+    };
+    return (react_1.default.createElement(base_ui_1.Modal, { size: "sm", open: requestModal, onClose: () => handleOnClose(), className: "request-review-modal" },
+        react_1.default.createElement("h1", { className: "font-bold text-2xl text-center my-2" }, "Request a Review"),
+        react_1.default.createElement("h2", { className: "font-bold text-center" }, "Boost Your Reputation and Attract More Clients"),
+        react_1.default.createElement("p", { className: "text-center my-2" },
+            "Client reviews are a key factor in building your reputation and growing your business on Paro.",
+            react_1.default.createElement("span", { className: "font-bold ml-1" }, "Here's why they are crucial: ")),
+        react_1.default.createElement("p", null,
+            react_1.default.createElement("span", { className: "font-bold my-2" },
+                react_1.default.createElement(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faCheck, className: "text-green-500 mr-2" }),
+                "Enhance Your Credibility :"),
+            react_1.default.createElement("span", { className: "ml-2" }, "Positive reviews from clients act as testimonials to your skills and professionalism. They provide social proof to potential clients, making them more likely to hire you.")),
+        react_1.default.createElement("br", null),
+        react_1.default.createElement("p", null,
+            react_1.default.createElement("span", { className: "font-bold my-2" },
+                react_1.default.createElement(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faCheck, className: "text-green-500 mr-2" }),
+                " Gain Valuable Feedback :"),
+            react_1.default.createElement("span", { className: "ml-2" }, "Constructive feedback helps you understand what you're doing well and where you can improve. This allows you to continuously enhance your services and client satisfaction.")),
+        react_1.default.createElement("br", null),
+        react_1.default.createElement("p", null,
+            react_1.default.createElement("span", { className: "font-bold my-2" },
+                react_1.default.createElement(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faCheck, className: "text-green-500 mr-2" }),
+                " Build Trust :"),
+            react_1.default.createElement("span", { className: "ml-2" }, "Clients are more likely to trust and hire Experts who have a track record of successful projects and satisfied clients. Reviews help build this trust and establish you as a reliable professional.")),
+        react_1.default.createElement("h2", { className: "font-bold text-center my-4" }, "Please modify the message below to your liking"),
+        react_1.default.createElement("textarea", { rows: 10, cols: 56, value: textareaValue, className: "overflow-auto my-4 text-left w-full bg-stone-200 p-4 text-gray-500", onChange: (e) => handleTextArea(e) }),
+        showError && react_1.default.createElement("p", { className: "text-red-600 font-medium mb-2" }, "Minimum 100 characters required*"),
+        react_1.default.createElement("div", { className: "justify-center w-full flex" },
+            react_1.default.createElement(base_ui_1.Button, { label: "CANCEL", className: "mx-4", onClick: () => setRequestModal(false), disabled: loading }),
+            react_1.default.createElement(base_ui_1.Button, { label: "SEND REQUEST", color: "primary", onClick: handleSubmit, isLoading: loading, disabled: showError }))));
+};
+exports.ReviewRequestModal = ReviewRequestModal;

package/lib/components/ProjectCard/RightCardUI.d.ts

@@ -0,0 +1,50 @@
+import React from 'react';
+interface RightCardUIProps {
+    project: any;
+    expertName: string;
+    freelancerId: number;
+    freelancerEmail: string;
+    isAuthenticated: boolean;
+    editEndDate: any;
+    setEditEndDate: (editEndDate: any) => void;
+    editStartDate: any;
+    setEditStartDate: (editStartDate: any) => void;
+    showTimeModal: boolean;
+    setShowTimeModal: (showTimeModal: boolean) => void;
+    setSingleProjectData: any;
+    projectData: any;
+    checkStartDate: any;
+    activeProject: any;
+    projectFrequencyType: any;
+    projectRateType: string;
+    upcomingProject: any;
+    selectedTab: number;
+    showRating: boolean;
+    projectTagsMap: any;
+    updateProjectStatusMutation: any;
+    GetAllProjectIrprDetailsForFreelancerDocument: any;
+    updateParoProjectTagsMutation: any;
+    GetParoProjectsDocument: any;
+    updateProjectTagReviewStatusMutation: any;
+    updateProjectStatus: any;
+    updateProjectTags: any;
+    getSowLazyQuery: any;
+    sendParoSupportEmail: any;
+    createChangeRequestMutation: any;
+    createChangeRequest: any;
+    createOrUpdateRatingRequestMutation: any;
+    submitProjectHoursMutation: any;
+    getAuth0Roles: any;
+    submitProjectHoursLambda: any;
+    createOrUpdateRating: any;
+    getParoProjectsByClientIdDocument: any;
+    user: any;
+    internalPortal: boolean;
+    csmUserGroup: boolean;
+    clientPortal: boolean;
+    signedSow: boolean;
+    isStageProd: string;
+    isRequestReviewEnabled: boolean;
+}
+export declare const RightCardUI: ({ project, expertName, freelancerId, freelancerEmail, isAuthenticated, editEndDate, setEditEndDate, editStartDate, setEditStartDate, showTimeModal, setShowTimeModal, setSingleProjectData, projectData, checkStartDate, activeProject, projectFrequencyType, projectRateType, upcomingProject, selectedTab, showRating, projectTagsMap, updateProjectStatusMutation, GetAllProjectIrprDetailsForFreelancerDocument, updateParoProjectTagsMutation, GetParoProjectsDocument, updateProjectTagReviewStatusMutation, updateProjectStatus, updateProjectTags, getSowLazyQuery, sendParoSupportEmail, createChangeRequestMutation, createChangeRequest, createOrUpdateRatingRequestMutation, submitProjectHoursMutation, getAuth0Roles, submitProjectHoursLambda, createOrUpdateRating, getParoProjectsByClientIdDocument, user, internalPortal, csmUserGroup, clientPortal, signedSow, isStageProd, isRequestReviewEnabled, }: RightCardUIProps) => React.JSX.Element;
+export {};