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

package/lib/components/ProjectCard/RightCardUI.js

@@ -0,0 +1,237 @@
+"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.RightCardUI = void 0;
+const react_1 = __importStar(require("react"));
+const base_icons_1 = require("@paro.io/base-icons");
+const base_ui_1 = require("@paro.io/base-ui");
+const core_1 = require("@material-ui/core");
+const LogTimeModalAuthenticated_1 = require("./LogTimeModalAuthenticated");
+const dayjs_1 = __importDefault(require("dayjs"));
+const EmailModal_1 = require("./EmailModal");
+const EditDateModal_1 = require("./EditDateModal");
+const EndProjectModal_1 = require("./EndProjectModal");
+const ReviewRequestModal_1 = require("./ReviewRequestModal");
+const ActiveProjectCard_1 = require("./ActiveProjectCard");
+const ReviewModal_1 = __importDefault(require("../ReviewsTab/ReviewModal"));
+const isWithinHours = (date, hours) => (0, dayjs_1.default)((0, dayjs_1.default)().tz("America/Los_Angeles").format("YYYY-MM-DD HH:mm:ss")).diff((0, dayjs_1.default)(date).format("YYYY-MM-DD HH:mm:ss"), "hour") < hours;
+const projectWithRecentRating = (project) => {
+    var _a, _b;
+    return (project === null || project === void 0 ? void 0 : project.rating) &&
+        ((_a = project === null || project === void 0 ? void 0 : project.rating[0]) === null || _a === void 0 ? void 0 : _a.overallRating) &&
+        isWithinHours((_b = project === null || project === void 0 ? void 0 : project.rating[0]) === null || _b === void 0 ? void 0 : _b.createdAt.replace("Z", ""), 48);
+};
+const TicketModal = ({ ticketModal, setTicketModal }) => {
+    return (react_1.default.createElement(base_ui_1.Modal, { open: ticketModal, onClose: () => { setTicketModal(false); }, size: "sm", className: "z-[100]" },
+        react_1.default.createElement("h1", { className: "font-bold text-xl mb-6" }, "Your ticket has been submitted!"),
+        react_1.default.createElement("p", { className: "font-bold text-md mb-2" }, "Thank you for reaching out to Paro Support, we will contact you within the next business day to follow up on your request."),
+        react_1.default.createElement(base_ui_1.Button, { type: "button", onClick: () => { setTicketModal(false); }, label: "OK", className: "mt-4", color: "primary" })));
+};
+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, }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
+    const [expandClient, setExpandClient] = (0, react_1.useState)(false);
+    const [expandSupport, setExpandSupport] = (0, react_1.useState)(false);
+    const [emailModal, setEmailModal] = (0, react_1.useState)(false);
+    const [emailText, setEmailText] = (0, react_1.useState)("");
+    const [ticketModal, setTicketModal] = (0, react_1.useState)(false);
+    const [showConfirmationModal, setShowConfirmationModal] = (0, react_1.useState)(false);
+    const [isDateInvalid, setIsDateInvalid] = (0, react_1.useState)(false);
+    const [requestModal, setRequestModal] = (0, react_1.useState)(false);
+    const [sowData, setSowData] = (0, react_1.useState)();
+    const [sowLoading, setSowLoading] = (0, react_1.useState)(false);
+    const [openReviewModal, setOpenReviewModal] = (0, react_1.useState)(false);
+    const classes = (0, ActiveProjectCard_1.useStyles)();
+    const sow = !!(project === null || project === void 0 ? void 0 : project.contractId);
+    const sowId = !!(project === null || project === void 0 ? void 0 : project.scopeOfWorkId);
+    const projectType = `${projectFrequencyType}-${projectRateType}`;
+    const nDaysSinceLastRatingIsSubmiited = 30;
+    const isProjectCompletedIn2024 = (0, dayjs_1.default)(project === null || project === void 0 ? void 0 : project.rowUpdateTimestamp).year() === 2024;
+    const [requestStatus, setRequestStatus] = (0, react_1.useState)();
+    const isTestEnv = isStageProd !== "prod";
+    (0, react_1.useEffect)(() => {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        const isRatingBeforeRatingRequest = (0, dayjs_1.default)((_b = (_a = project === null || project === void 0 ? void 0 : project.rating) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.createdAt).isBefore((0, dayjs_1.default)((_d = (_c = project === null || project === void 0 ? void 0 : project.ratingRequest) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.createdAt));
+        const isRatingRequestAfterRowUpdate = (0, dayjs_1.default)((_f = (_e = project === null || project === void 0 ? void 0 : project.ratingRequest) === null || _e === void 0 ? void 0 : _e[0]) === null || _f === void 0 ? void 0 : _f.createdAt).isAfter((0, dayjs_1.default)(project === null || project === void 0 ? void 0 : project.rowUpdateTimestamp));
+        const isRatingRequestStatusRequested = ((_h = (_g = project === null || project === void 0 ? void 0 : project.ratingRequest) === null || _g === void 0 ? void 0 : _g[0]) === null || _h === void 0 ? void 0 : _h.status) === 'Requested';
+        const getRequestStatus = () => {
+            var _a, _b, _c, _d;
+            if (selectedTab === 4) {
+                if (isRatingBeforeRatingRequest && isRatingRequestAfterRowUpdate && isProjectCompletedIn2024 && isRatingRequestStatusRequested) {
+                    return (_b = (_a = project === null || project === void 0 ? void 0 : project.ratingRequest) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.status;
+                }
+            }
+            else {
+                if (isRatingBeforeRatingRequest && isRatingRequestStatusRequested) {
+                    return (_d = (_c = project === null || project === void 0 ? void 0 : project.ratingRequest) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.status;
+                }
+            }
+            return undefined;
+        };
+        setRequestStatus(getRequestStatus());
+    }, [project, selectedTab, isProjectCompletedIn2024]);
+    (0, react_1.useEffect)(() => {
+        if (sowData && sowData.presignedUrl) {
+            window.open(sowData.presignedUrl);
+        }
+    }, [sowData]);
+    const isWithinDays = (date, days) => (0, dayjs_1.default)((0, dayjs_1.default)().tz('America/Los_Angeles').format('YYYY-MM-DD HH:mm:ss')).diff((0, dayjs_1.default)(date).format('YYYY-MM-DD HH:mm:ss'), 'day') < days;
+    const isWithinHours = (date, hours) => (0, dayjs_1.default)((0, dayjs_1.default)().tz('America/Los_Angeles').format('YYYY-MM-DD HH:mm:ss')).diff((0, dayjs_1.default)(date).format('YYYY-MM-DD HH:mm:ss'), 'hours') < hours;
+    const hasRecentRating = !!((project === null || project === void 0 ? void 0 : project.rating) && ((_a = project === null || project === void 0 ? void 0 : project.rating[0]) === null || _a === void 0 ? void 0 : _a.overallRating) && isWithinHours((_b = project === null || project === void 0 ? void 0 : project.rating[0]) === null || _b === void 0 ? void 0 : _b.createdAt.replace('Z', ''), 48) &&
+        (!(((_c = project === null || project === void 0 ? void 0 : project.ratingRequest) === null || _c === void 0 ? void 0 : _c.length) > 0) || ((_d = project === null || project === void 0 ? void 0 : project.ratingRequest[0]) === null || _d === void 0 ? void 0 : _d.status) !== 'Requested' && (0, dayjs_1.default)((_e = project === null || project === void 0 ? void 0 : project.ratingRequest[0]) === null || _e === void 0 ? void 0 : _e.createdAt).isBefore((0, dayjs_1.default)((_f = project === null || project === void 0 ? void 0 : project.rating[0]) === null || _f === void 0 ? void 0 : _f.createdAt))));
+    const getMaxDate = () => {
+        let maxDate = LogTimeModalAuthenticated_1.constants.MAX_DATE;
+        const todayDate = new Date();
+        if (editStartDate) {
+            maxDate = new Date(project === null || project === void 0 ? void 0 : project.endDate);
+        }
+        else if (editEndDate) {
+            maxDate = new Date(todayDate.setMonth((todayDate).getMonth() + 12));
+        }
+        return new Date(maxDate);
+    };
+    const validateDate = (date) => {
+        const minDate = LogTimeModalAuthenticated_1.constants.MIN_DATE;
+        const maxDate = getMaxDate();
+        const isValid = date ? date.setHours(0, 0, 0, 0) < minDate.setHours(0, 0, 0, 0) || date.setHours(0, 0, 0, 0) > maxDate.setHours(0, 0, 0, 0) : true;
+        setIsDateInvalid(isValid);
+        return !isValid;
+    };
+    const downloadSow = (sowId) => __awaiter(void 0, void 0, void 0, function* () {
+        setSowLoading(true);
+        yield getSowLazyQuery({ variables: { getSowId: sowId } })
+            .then((res) => {
+            setSowData(res.data.getSow);
+        })
+            .catch((error) => {
+            console.error("Failed to download SOW:", error);
+        })
+            .finally(() => {
+            setSowLoading(false);
+        });
+    });
+    const isRecentRatingAfterRowUpdate = (ratingDate, rowUpdateTimestamp) => (0, dayjs_1.default)(ratingDate).isAfter((0, dayjs_1.default)(rowUpdateTimestamp));
+    const hasRecentRatingCondition = (selectedTab, hasRecentRating, project, isProjectCompletedIn2024) => {
+        var _a, _b;
+        if (selectedTab === 4) {
+            return hasRecentRating && isRecentRatingAfterRowUpdate((_b = (_a = project === null || project === void 0 ? void 0 : project.rating) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.createdAt, project === null || project === void 0 ? void 0 : project.rowUpdateTimestamp) && isProjectCompletedIn2024;
+        }
+        return hasRecentRating;
+    };
+    const reviewGivenCondition = (selectedTab, showRating, project, isProjectCompletedIn2024, nDaysSinceLastRatingIsSubmiited) => {
+        var _a, _b, _c, _d;
+        if (!showRating)
+            return false;
+        if (selectedTab === 4) {
+            return isRecentRatingAfterRowUpdate((_b = (_a = project === null || project === void 0 ? void 0 : project.rating) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.createdAt, project === null || project === void 0 ? void 0 : project.rowUpdateTimestamp) && isProjectCompletedIn2024;
+        }
+        return isWithinDays((_d = (_c = project === null || project === void 0 ? void 0 : project.rating) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.createdAt, nDaysSinceLastRatingIsSubmiited);
+    };
+    const requestReviewButtonLabel = () => {
+        const hasRecentRatings = hasRecentRatingCondition(selectedTab, hasRecentRating, project, isProjectCompletedIn2024);
+        const reviewGiven = reviewGivenCondition(selectedTab, showRating, project, isProjectCompletedIn2024, nDaysSinceLastRatingIsSubmiited);
+        if (hasRecentRatings) {
+            return 'Review Pending';
+        }
+        else if (requestStatus === 'Requested') {
+            return 'Requested';
+        }
+        else if (reviewGiven) {
+            return 'Review Given';
+        }
+        return 'Request Review';
+    };
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("div", { className: "w-full md:w-2/12 flex flex-col gap-y-2.5" },
+            (internalPortal && csmUserGroup) || (!internalPortal && !csmUserGroup) && !clientPortal ? react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement("h1", { className: "text-[#64748B] text-md font-bold" }, "Actions"),
+                checkStartDate ?
+                    react_1.default.createElement(core_1.Tooltip, { classes: { tooltip: classes.tooltip }, title: activeProject && "The project has not started yet. Request to change the project start date to the current date in order to edit the project end date.", placement: "top", arrow: true }, upcomingProject ? react_1.default.createElement("div", null,
+                        react_1.default.createElement(base_ui_1.Button, { label: "LOG YOUR TIME", disabled: true, size: "sm", color: "primary", className: "w-full", onClick: () => { setShowTimeModal(true); } }))
+                        : react_1.default.createElement("div", null,
+                            react_1.default.createElement(base_ui_1.Button, { label: "LOG YOUR TIME", disabled: checkStartDate || !activeProject, size: "sm", color: "primary", className: "w-full", onClick: () => { setShowTimeModal(true); } })))
+                    :
+                        react_1.default.createElement(core_1.Tooltip, { classes: { tooltip: classes.tooltip }, title: (projectType === "One-time-Fixed" || projectType === "Recurring-Fixed") ? "Please reach out to your Customer Success Manager if you would like to submit time for Fixed Projects." : "", placement: "top", arrow: true },
+                            react_1.default.createElement("div", null,
+                                react_1.default.createElement(base_ui_1.Button, { label: "LOG YOUR TIME", disabled: !activeProject, size: "sm", color: "primary", className: "w-full", onClick: () => { setShowTimeModal(true); } }))),
+                upcomingProject ? react_1.default.createElement(base_ui_1.Button, { label: "EDIT START DATE", disabled: false, size: "sm", className: "w-full", onClick: () => { setEditStartDate(true); } }) :
+                    react_1.default.createElement(base_ui_1.Button, { label: "EDIT START DATE", disabled: !activeProject, size: "sm", className: "w-full", onClick: () => { setEditStartDate(true); } }),
+                checkStartDate ?
+                    react_1.default.createElement(core_1.Tooltip, { classes: { tooltip: classes.tooltip }, title: activeProject && "The project has not started yet, please wait until the project start date to request a change to edit the end date.", placement: "top", arrow: true }, upcomingProject ? react_1.default.createElement("div", null,
+                        react_1.default.createElement(base_ui_1.Button, { label: "EDIT END DATE", disabled: true, size: "sm", className: "w-full", onClick: () => { setEditEndDate(true); } })) :
+                        react_1.default.createElement("div", null,
+                            react_1.default.createElement(base_ui_1.Button, { label: "EDIT END DATE", disabled: checkStartDate || !activeProject, size: "sm", className: "w-full", onClick: () => { setEditEndDate(true); } })))
+                    :
+                        react_1.default.createElement(base_ui_1.Button, { label: "EDIT END DATE", disabled: !activeProject, size: "sm", className: "w-full", onClick: () => { setEditEndDate(true); } }),
+                react_1.default.createElement(base_ui_1.Button, { label: "END PROJECT", disabled: selectedTab === 2 || selectedTab === 3 || selectedTab === 4, size: "sm", className: "w-full", onClick: () => { setShowConfirmationModal(true); } }),
+                react_1.default.createElement(base_ui_1.Button, { label: "VIEW SOW", size: "sm", disabled: !sow, className: "w-full", onClick: () => window.open(`/contract/${project === null || project === void 0 ? void 0 : project.contractId}`, '_blank') }),
+                !internalPortal && react_1.default.createElement(base_ui_1.Button, { label: "DOWNLOAD SOW", size: "sm", disabled: !sowId, className: "w-full", onClick: () => { downloadSow(project === null || project === void 0 ? void 0 : project.scopeOfWorkId); }, isLoading: sowLoading }),
+                (selectedTab === 0 || selectedTab === 1 || selectedTab === 4) && isRequestReviewEnabled && !internalPortal &&
+                    react_1.default.createElement(base_ui_1.Button, { label: requestReviewButtonLabel(), disabled: requestReviewButtonLabel() !== 'Request Review', size: "sm", className: "w-full", onClick: () => setRequestModal(true), isLoading: sowLoading })) : null,
+            clientPortal && react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement("h1", { className: "text-[#64748B] text-md font-bold" }, "Actions"),
+                react_1.default.createElement(base_ui_1.Button, { label: signedSow ? "DOWNLOAD SOW" : "SIGN SOW", size: "sm", disabled: !sowId, className: "w-full", onClick: () => { downloadSow(project === null || project === void 0 ? void 0 : project.scopeOfWorkId); }, isLoading: sowLoading }),
+                signedSow &&
+                    react_1.default.createElement(base_ui_1.Button, { label: "SUBMIT REVIEW", size: "sm", className: "w-full", onClick: () => setOpenReviewModal(true) })),
+            react_1.default.createElement("div", { className: "gap-y-1 mt-4" },
+                react_1.default.createElement("div", { className: "flex flex-row justify-between" },
+                    react_1.default.createElement("h1", { className: "font-bold text-lg mb-2" }, clientPortal ? "AE Information" : "Client Contact"),
+                    react_1.default.createElement("button", { onClick: () => { setExpandClient(!expandClient); }, className: "font-bold text-md mb-2" }, expandClient ? react_1.default.createElement(base_icons_1.IconChevronUp, null) : react_1.default.createElement(base_icons_1.IconChevronDown, null))),
+                expandClient && react_1.default.createElement("div", { className: "m-1 overflow-auto" },
+                    react_1.default.createElement("p", null, (_g = project === null || project === void 0 ? void 0 : project.client) === null || _g === void 0 ? void 0 : _g.name),
+                    react_1.default.createElement("p", null, (_h = project === null || project === void 0 ? void 0 : project.client) === null || _h === void 0 ? void 0 : _h.clientEmail),
+                    react_1.default.createElement("p", null, (_k = ((_j = project === null || project === void 0 ? void 0 : project.client) === null || _j === void 0 ? void 0 : _j.clientPhone)) === null || _k === void 0 ? void 0 : _k.replace(/(\d{3})(\d{3})(\d{4})/, "$1-$2-$3")))),
+            react_1.default.createElement("div", { className: "gap-y-1 mt-4" },
+                react_1.default.createElement("div", { className: "flex flex-row justify-between" },
+                    react_1.default.createElement("h1", { className: "font-bold text-lg mb-2" }, "Paro Support"),
+                    react_1.default.createElement("button", { onClick: () => { setExpandSupport(!expandSupport); }, className: "font-bold text-md mb-2" }, expandSupport ? react_1.default.createElement(base_icons_1.IconChevronUp, null) : react_1.default.createElement(base_icons_1.IconChevronDown, null))),
+                expandSupport && react_1.default.createElement(react_1.default.Fragment, null,
+                    react_1.default.createElement("b", null, "Customer Success Manager"),
+                    react_1.default.createElement("div", { className: "m-1 overflow-auto" },
+                        react_1.default.createElement("p", null, ((_m = (_l = project === null || project === void 0 ? void 0 : project.paroContact) === null || _l === void 0 ? void 0 : _l.firstName) !== null && _m !== void 0 ? _m : '') + ' ' + ((_p = (_o = project === null || project === void 0 ? void 0 : project.paroContact) === null || _o === void 0 ? void 0 : _o.lastName) !== null && _p !== void 0 ? _p : '')),
+                        react_1.default.createElement("a", { href: `mailto:${(_q = project === null || project === void 0 ? void 0 : project.paroContact) === null || _q === void 0 ? void 0 : _q.email}`, className: "underline text-[#1878BD]" }, (_r = project === null || project === void 0 ? void 0 : project.paroContact) === null || _r === void 0 ? void 0 : _r.email),
+                        react_1.default.createElement("p", null, (_s = project === null || project === void 0 ? void 0 : project.paroContact) === null || _s === void 0 ? void 0 : _s.phone)),
+                    react_1.default.createElement(base_ui_1.Button, { label: "CONTACT SUPPORT", size: "sm", className: "max-w-max mt-2", onClick: () => setEmailModal(true) })))),
+        react_1.default.createElement(LogTimeModalAuthenticated_1.LogTimeModalAuthenticated, { project: project, freelancerId: freelancerId, showTimeModal: showTimeModal, setShowTimeModal: setShowTimeModal, validateDate: validateDate, setIsDateInvalid: setIsDateInvalid, isDateInvalid: isDateInvalid, setSingleProjectData: setSingleProjectData, projectData: projectData, selectedTab: selectedTab, isAuthenticated: isAuthenticated, submitProjectHoursMutation: submitProjectHoursMutation, GetAllProjectIrprDetailsForFreelancerDocument: GetAllProjectIrprDetailsForFreelancerDocument, getAuth0Roles: getAuth0Roles, submitProjectHoursLambda: submitProjectHoursLambda, user: user }),
+        react_1.default.createElement(EditDateModal_1.EditDateModal, { freelancerId: freelancerId, freelancerEmail: freelancerEmail, project: project, previousDate: project === null || project === void 0 ? void 0 : project.startDate, editDate: editStartDate, setEditDate: setEditStartDate, validateDate: validateDate, setIsDateInvalid: setIsDateInvalid, isDateInvalid: isDateInvalid, changeType: "start", expertName: expertName, isAuthenticated: isAuthenticated, selectedTab: selectedTab, createChangeRequestMutation: createChangeRequestMutation, GetAllProjectIrprDetailsForFreelancerDocument: GetAllProjectIrprDetailsForFreelancerDocument, createChangeRequest: createChangeRequest, isTestEnv: isTestEnv }),
+        react_1.default.createElement(EditDateModal_1.EditDateModal, { freelancerId: freelancerId, freelancerEmail: freelancerEmail, project: project, previousDate: project === null || project === void 0 ? void 0 : project.endDate, editDate: editEndDate, setEditDate: setEditEndDate, validateDate: validateDate, setIsDateInvalid: setIsDateInvalid, isDateInvalid: isDateInvalid, changeType: "end", expertName: expertName, isAuthenticated: isAuthenticated, selectedTab: selectedTab, createChangeRequestMutation: createChangeRequestMutation, GetAllProjectIrprDetailsForFreelancerDocument: GetAllProjectIrprDetailsForFreelancerDocument, createChangeRequest: createChangeRequest, isTestEnv: isTestEnv }),
+        react_1.default.createElement(EndProjectModal_1.EndProjectModal, { freelancerId: freelancerId, project: project, expertName: expertName, showConfirmationModal: showConfirmationModal, setShowConfirmationModal: setShowConfirmationModal, projectType: projectType, isAuthenticated: isAuthenticated, selectedTab: selectedTab, projectTagsMap: projectTagsMap, updateProjectStatusMutation: updateProjectStatusMutation, GetAllProjectIrprDetailsForFreelancerDocument: GetAllProjectIrprDetailsForFreelancerDocument, updateParoProjectTagsMutation: updateParoProjectTagsMutation, GetParoProjectsDocument: GetParoProjectsDocument, updateProjectTagReviewStatusMutation: updateProjectTagReviewStatusMutation, updateProjectStatus: updateProjectStatus, updateProjectTags: updateProjectTags }),
+        react_1.default.createElement(EmailModal_1.EmailModal, { emailModal: emailModal, setEmailModal: setEmailModal, emailText: emailText, setEmailText: setEmailText, setTicketModal: setTicketModal, project: project, expertName: expertName, sendParoSupportEmail: sendParoSupportEmail, isTestEnv: isTestEnv }),
+        react_1.default.createElement(TicketModal, { ticketModal: ticketModal, setTicketModal: setTicketModal }),
+        react_1.default.createElement(ReviewRequestModal_1.ReviewRequestModal, { project: project, requestModal: requestModal, setRequestModal: setRequestModal, expertName: expertName, freelancerId: freelancerId, setRequestStatus: setRequestStatus, createOrUpdateRatingRequestMutation: createOrUpdateRatingRequestMutation }),
+        react_1.default.createElement(ReviewModal_1.default, { openReviewModal: openReviewModal, setOpenReviewModal: setOpenReviewModal, freelancer: (_t = project === null || project === void 0 ? void 0 : project.projectScope) === null || _t === void 0 ? void 0 : _t.freelancer, projects: [project], projectsWithRecentRating: projectWithRecentRating(project), projectsEligibleForRating: [project], createOrUpdateRatingRequestMutation: createOrUpdateRatingRequestMutation, createOrUpdateRating: createOrUpdateRating, getparoProjectsByClientIdDocument: getParoProjectsByClientIdDocument, clientId: (_u = project === null || project === void 0 ? void 0 : project.client) === null || _u === void 0 ? void 0 : _u.id })));
+};
+exports.RightCardUI = RightCardUI;

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

@@ -0,0 +1 @@
+export { ActiveProjectCard } from './ActiveProjectCard';

package/lib/components/ProjectCard/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ActiveProjectCard = void 0;
+var ActiveProjectCard_1 = require("./ActiveProjectCard");
+Object.defineProperty(exports, "ActiveProjectCard", { enumerable: true, get: function () { return ActiveProjectCard_1.ActiveProjectCard; } });

package/lib/components/ReviewsTab/ReviewModal.js

@@ -77,7 +77,7 @@ const ClientReviewModal = ({ openReviewModal, setOpenReviewModal, freelancer, pr
             communicationRating: communicationRating,
             executionOfDeliverablesRating: deliveryRating,
             review,
-            projectId: isSingleProject ? projectData === null || projectData === void 0 ? void 0 : projectData.id : projectId,
+            projectId: isSingleProject ? +(projectData === null || projectData === void 0 ? void 0 : projectData.id) : projectId,
             clientId: (_a = projectData === null || projectData === void 0 ? void 0 : projectData.client) === null || _a === void 0 ? void 0 : _a.id,
             freelancerId: (_b = projectData === null || projectData === void 0 ? void 0 : projectData.freelancer) === null || _b === void 0 ? void 0 : _b.id,
             submittedBy: projectData === null || projectData === void 0 ? void 0 : projectData.clientFirstName,

package/lib/components/ServiceLinesTemplate/index.js

@@ -273,8 +273,8 @@ const ServiceLinesTemplate = ({ getFreelancerDataResult, createOrUpdateRates, ge
             setDisablePublicProfile(false);
         };
         return react_1.default.createElement(core_1.Grid, { container: true, direction: "row", justifyContent: "space-evenly", style: { margin: 'auto' }, spacing: 2 },
-            react_1.default.createElement(base_ui_1.Button, { label: "PREVIEW PUBLIC PROFILE", onClick: () => window.open(`${reactAppUrl}/public/${legacyFreelancerId}`, '_blank'), type: "button", disabled: disablePublicProfile, isLoading: updateClicked, size: "sm" }),
-            react_1.default.createElement(base_ui_1.Button, { label: "UPDATE PROFILE", onClick: handleButtonClick, type: "button", isLoading: updateClicked, disabled: isUpdateButtonDisabled(), color: "primary", size: "sm" }));
+            react_1.default.createElement(base_ui_1.Button, { label: "PREVIEW PUBLIC PROFILE", onClick: () => window.open(`${reactAppUrl}/public/${legacyFreelancerId}`, '_blank'), type: "button", disabled: disablePublicProfile, isLoading: updateClicked, size: "sm", className: "m-2" }),
+            react_1.default.createElement(base_ui_1.Button, { label: "UPDATE PROFILE", onClick: handleButtonClick, type: "button", isLoading: updateClicked, disabled: isUpdateButtonDisabled(), color: "primary", size: "sm", className: "m-2" }));
     };
     const newServiceLine = () => {
         var _a, _b;
@@ -338,7 +338,7 @@ const ServiceLinesTemplate = ({ getFreelancerDataResult, createOrUpdateRates, ge
                                                     handleServiceToggle(service.title, true);
                                                 }
                                             } })),
-                                    react_1.default.createElement(core_1.Box, { sx: { flex: 1 } },
+                                    react_1.default.createElement(core_1.Box, { sx: { flex: 1, width: '100%' } },
                                         react_1.default.createElement(core_1.Box, { display: 'flex', alignItems: 'center', justifyContent: 'space-between' },
                                             react_1.default.createElement(core_1.Box, { display: 'flex', alignItems: 'center' },
                                                 react_1.default.createElement(core_1.Typography, { component: "div", style: { fontWeight: 600, fontSize: '12px', color: '#1C1F2B', fontFamily: "Roboto" } },

package/lib/components/shared/Error.d.ts

@@ -1,6 +1,6 @@
-type SectionContents = {
-    handleClose?: (...args: any) => void;
-    formError?: boolean;
-};
-declare const Error: ({ handleClose }: SectionContents) => JSX.Element;
-export default Error;
+import React from "react";
+interface ErrorProps {
+    message?: string;
+}
+declare const Error: ({ message }: ErrorProps) => React.JSX.Element;
+export default Error;

package/lib/components/shared/Error.js

@@ -1,40 +1,16 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
-const core_1 = require("@material-ui/core");
-const styled_components_1 = __importDefault(require("styled-components"));
-const colors_1 = __importDefault(require("../shared/constants/colors"));
-const CopyToClipboardAlert_1 = __importDefault(require("./CopyToClipboardAlert"));
-const ErrorBox = (0, styled_components_1.default)(core_1.Box) `
-  width: 100%;
-  padding-bottom: 100;
-`;
-const ParoTitle = (0, styled_components_1.default)(core_1.Box) `
-  color: ${colors_1.default.paroBlack};
-  padding: 0px 0px 18px 0px;
-`;
-const ParoSubtitle = styled_components_1.default.div `
-  color: ${colors_1.default.paroBlack};
-  margin-bottom: 24px;
-  font-size: 1rem;
-`;
-const reloadWindow = () => {
-    window.location.reload();
-};
-const Error = ({ handleClose }) => {
-    const handleCancel = handleClose ? handleClose : reloadWindow;
-    const handleCancelLanguage = handleClose ? 'Close' : 'Retry';
-    return (react_1.default.createElement(ErrorBox, null,
-        react_1.default.createElement(core_1.Box, { display: 'flex', alignContent: 'center', alignItems: 'center', justifyContent: 'center', flexDirection: 'column', padding: '100px 0px 36px 5px;' },
-            react_1.default.createElement(core_1.Typography, { variant: 'h6', gutterBottom: true },
-                react_1.default.createElement(ParoTitle, null, "Oops! We had a misstep.")),
-            react_1.default.createElement(core_1.Typography, { component: 'span', gutterBottom: true },
-                react_1.default.createElement(ParoSubtitle, null, "Contact support if the issue persists")),
-            react_1.default.createElement(core_1.DialogActions, null,
-                react_1.default.createElement(core_1.Button, { variant: 'outlined', onClick: handleCancel, color: 'primary' }, handleCancelLanguage),
-                react_1.default.createElement(CopyToClipboardAlert_1.default, { alertMessage: 'Email address copied to clipboard', button: core_1.Button, buttonContent: 'Copy support email', copyContent: 'people@paro.io', variant: 'contained' })))));
-};
-exports.default = Error;
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const Error = ({ message = 'Error while loading this page. Please refresh and try again.' }) => {
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("div", { className: "flex align-middle justify-center" },
+            react_1.default.createElement("div", { className: "flex-col" },
+                react_1.default.createElement("div", { className: "flex item-center justify-center" },
+                    react_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-12 w-12 text-grey-light", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor" },
+                        react_1.default.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }))),
+                react_1.default.createElement("div", { className: "text-grey" }, message)))));
+};
+exports.default = Error;

package/lib/index.d.ts

@@ -9,3 +9,4 @@ export { DocumentCenter } from './components/DocumentCenter';
 export { HeaderNavBar } from './components/HeaderNavBar';
 export { ServiceLinesTemplate } from './components/ServiceLinesTemplate';
 export { sharedUtils } from './components/shared/utils';
+export { ActiveProjectCard } from './components/ProjectCard/ActiveProjectCard';

package/lib/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.sharedUtils = exports.ServiceLinesTemplate = exports.HeaderNavBar = exports.DocumentCenter = exports.ProfileCompletedPercentage = exports.ExpertProfileHeader = exports.OrganizationChart = exports.FirmEmployeeSection = exports.ClientReferenceSection = exports.Reviews = exports.ReviewsTab = void 0;
+exports.ActiveProjectCard = exports.sharedUtils = exports.ServiceLinesTemplate = exports.HeaderNavBar = exports.DocumentCenter = exports.ProfileCompletedPercentage = exports.ExpertProfileHeader = exports.OrganizationChart = exports.FirmEmployeeSection = exports.ClientReferenceSection = exports.Reviews = exports.ReviewsTab = void 0;
 var ReviewsTab_1 = require("./components/ReviewsTab");
 Object.defineProperty(exports, "ReviewsTab", { enumerable: true, get: function () { return ReviewsTab_1.ReviewsTab; } });
 var Reviews_1 = require("./components/Reviews");
@@ -23,3 +23,5 @@ var ServiceLinesTemplate_1 = require("./components/ServiceLinesTemplate");
 Object.defineProperty(exports, "ServiceLinesTemplate", { enumerable: true, get: function () { return ServiceLinesTemplate_1.ServiceLinesTemplate; } });
 var utils_1 = require("./components/shared/utils");
 Object.defineProperty(exports, "sharedUtils", { enumerable: true, get: function () { return utils_1.sharedUtils; } });
+var ActiveProjectCard_1 = require("./components/ProjectCard/ActiveProjectCard");
+Object.defineProperty(exports, "ActiveProjectCard", { enumerable: true, get: function () { return ActiveProjectCard_1.ActiveProjectCard; } });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@paro.io/expert-shared-components",
-  "version": "1.9.5",
+  "version": "1.9.7",
   "description": "",
   "main": "lib/index.js",
   "scripts": {
@@ -18,6 +18,7 @@
   "author": "apande@paro.io",
   "license": "MIT",
   "dependencies": {
+    "@date-io/dayjs": "1.x",
     "@fortawesome/fontawesome-svg-core": "^6.6.0",
     "@fortawesome/free-solid-svg-icons": "^6.6.0",
     "@fortawesome/react-fontawesome": "^0.2.2",
@@ -25,11 +26,13 @@
     "@material-ui/core": "^4.11.0",
     "@material-ui/icons": "^4.11.3",
     "@material-ui/lab": "^4.0.0-alpha.61",
+    "@material-ui/pickers": "^3.3.11",
     "@paro.io/base-icons": "^1.0.4",
     "@paro.io/base-ui": "^1.8.3",
     "@types/react-input-mask": "^3.0.5",
     "dayjs": "^1.10.7",
     "lodash": "^4.17.21",
+    "moment": "2.29.4",
     "react": "^18.2.0",
     "react-copy-to-clipboard": "^5.0.4",
     "react-datepicker": "^4.6.0",