@paro.io/expert-shared-components 1.9.9 → 1.9.11

package/lib/components/ProjectCard/ActiveProjectCard.js

@@ -40,6 +40,7 @@ const LeftCardUI_1 = require("./LeftCardUI");
 const CenterCardUI_1 = require("./CenterCardUI");
 const utc_1 = __importDefault(require("dayjs/plugin/utc"));
 const timezone_1 = __importDefault(require("dayjs/plugin/timezone"));
+const ProjectDateRequest_1 = __importDefault(require("./ProjectDateRequest"));
 dayjs_1.default.extend(utc_1.default);
 dayjs_1.default.extend(timezone_1.default);
 exports.useStyles = (0, styles_1.makeStyles)({
@@ -97,8 +98,13 @@ const checkProjectRateType = (freelanceRateTypeId) => {
     }
     return projectType;
 };
-const ActiveProjectCard = ({ project, projectsData, expertName, freelancerId, freelancerEmail, isAuthenticated, activeProject, adhocProject, upcomingProject, selectedTab, projectTagsMap, updateProjectStatusMutation, GetAllProjectIrprDetailsForFreelancerDocument, updateParoProjectTagsMutation, GetParoProjectsDocument, updateProjectTagReviewStatusMutation, updateProjectStatus, updateProjectTags, getSowLazyQuery, sendParoSupportEmail, createChangeRequestMutation, createChangeRequest, createOrUpdateRatingRequestMutation, updateProjectTaskMutation, updateProjectTask, submitProjectHoursMutation, getAuth0Roles, submitProjectHoursLambda, createOrUpdateRating, getParoProjectsByClientIdDocument, user, internalPortal = false, csmUserGroup = false, clientPortal = false, signedSow = false, isStageProd, isRequestReviewEnabled = false, }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
+const getDays = (oldValue, newValue) => {
+    const oldDate = (0, dayjs_1.default)(oldValue);
+    const newDate = (0, dayjs_1.default)(newValue);
+    return newDate.diff(oldDate, 'day');
+};
+const ActiveProjectCard = ({ project, projectsData, expertName, freelancerId, freelancerEmail, isAuthenticated, activeProject, adhocProject, upcomingProject, selectedTab, projectTagsMap, updateProjectStatusMutation, GetAllProjectIrprDetailsForFreelancerDocument, updateParoProjectTagsMutation, GetParoProjectsDocument, updateProjectTagReviewStatusMutation, updateProjectStatus, updateProjectTags, getSowLazyQuery, sendParoSupportEmail, createChangeRequestMutation, createChangeRequest, createOrUpdateRatingRequestMutation, updateProjectTaskMutation, updateProjectTask, submitProjectHoursMutation, getAuth0Roles, submitProjectHoursLambda, createOrUpdateRating, getParoProjectsByClientIdDocument, user, internalPortal = false, csmUserGroup = false, clientPortal = false, signedSow = false, isStageProd, isRequestReviewEnabled = false, changeRequests, GetAllChangeRequestsForFreelancerDocument, updateProjectRequestStatus, updateDBProjectRequestStatus, }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
     const [editEndDate, setEditEndDate] = (0, react_1.useState)(false);
     const [editStartDate, setEditStartDate] = (0, react_1.useState)(false);
     const [showTimeModal, setShowTimeModal] = (0, react_1.useState)(false);
@@ -110,8 +116,8 @@ const ActiveProjectCard = ({ project, projectsData, expertName, freelancerId, fr
     const checkStartDate = (0, dayjs_1.default)(project === null || project === void 0 ? void 0 : project.startDate).isSame((0, dayjs_1.default)(), 'day') || (0, dayjs_1.default)(project === null || project === void 0 ? void 0 : project.startDate).isAfter((0, dayjs_1.default)());
     const classes = (0, exports.useStyles)();
     let sumOfRatingValuesOfSingleProject = 0;
-    project === null || project === void 0 ? void 0 : project.rating.forEach((rating) => sumOfRatingValuesOfSingleProject += rating.overallRating);
-    const [ratingValue, setRatingValue] = (0, react_1.useState)((sumOfRatingValuesOfSingleProject / ((_d = project === null || project === void 0 ? void 0 : project.rating) === null || _d === void 0 ? void 0 : _d.length)).toFixed(1));
+    (_d = project === null || project === void 0 ? void 0 : project.rating) === null || _d === void 0 ? void 0 : _d.forEach((rating) => sumOfRatingValuesOfSingleProject += rating.overallRating);
+    const [ratingValue, setRatingValue] = (0, react_1.useState)((sumOfRatingValuesOfSingleProject / ((_e = project === null || project === void 0 ? void 0 : project.rating) === null || _e === void 0 ? void 0 : _e.length)).toFixed(1));
     (0, react_1.useEffect)(() => {
         setSingleProjectData(projectsData.find((projectData) => projectData.id === (project === null || project === void 0 ? void 0 : project.id)));
     }, [projectsData, project]);
@@ -124,10 +130,27 @@ const ActiveProjectCard = ({ project, projectsData, expertName, freelancerId, fr
     if ((project === null || project === void 0 ? void 0 : project.ratingRequest.length) > 1) {
         project.ratingRequest = sortRatingsAndRequests(project.ratingRequest);
     }
-    const showRating = ratingValue && (0, dayjs_1.default)((0, dayjs_1.default)().tz('America/Los_Angeles').format('YYYY-MM-DD HH:mm:ss')).diff((0, dayjs_1.default)((_f = (_e = project === null || project === void 0 ? void 0 : project.rating) === null || _e === void 0 ? void 0 : _e[0]) === null || _f === void 0 ? void 0 : _f.createdAt.replace('Z', '')).format('YYYY-MM-DD HH:mm:ss'), 'hours') > 48;
-    const freelancerName = (_j = (_h = (_g = project === null || project === void 0 ? void 0 : project.projectScope) === null || _g === void 0 ? void 0 : _g.freelancer) === null || _h === void 0 ? void 0 : _h.name) !== null && _j !== void 0 ? _j : ((_m = (_l = (_k = project === null || project === void 0 ? void 0 : project.projectScope) === null || _k === void 0 ? void 0 : _k.freelancer) === null || _l === void 0 ? void 0 : _l.freelancerProfile) === null || _m === void 0 ? void 0 : _m.firstName) + ' ' + ((_q = (_p = (_o = project === null || project === void 0 ? void 0 : project.projectScope) === null || _o === void 0 ? void 0 : _o.freelancer) === null || _p === void 0 ? void 0 : _p.freelancerProfile) === null || _q === void 0 ? void 0 : _q.lastName);
-    const displayName = clientPortal ? freelancerName : (_r = project === null || project === void 0 ? void 0 : project.client) === null || _r === void 0 ? void 0 : _r.name;
+    const showRating = ratingValue && (0, dayjs_1.default)((0, dayjs_1.default)().tz('America/Los_Angeles').format('YYYY-MM-DD HH:mm:ss')).diff((0, dayjs_1.default)((_g = (_f = project === null || project === void 0 ? void 0 : project.rating) === null || _f === void 0 ? void 0 : _f[0]) === null || _g === void 0 ? void 0 : _g.createdAt.replace('Z', '')).format('YYYY-MM-DD HH:mm:ss'), 'hours') > 48;
+    const freelancerName = (_k = (_j = (_h = project === null || project === void 0 ? void 0 : project.projectScope) === null || _h === void 0 ? void 0 : _h.freelancer) === null || _j === void 0 ? void 0 : _j.name) !== null && _k !== void 0 ? _k : ((_o = (_m = (_l = project === null || project === void 0 ? void 0 : project.projectScope) === null || _l === void 0 ? void 0 : _l.freelancer) === null || _m === void 0 ? void 0 : _m.freelancerProfile) === null || _o === void 0 ? void 0 : _o.firstName) + ' ' + ((_r = (_q = (_p = project === null || project === void 0 ? void 0 : project.projectScope) === null || _p === void 0 ? void 0 : _p.freelancer) === null || _q === void 0 ? void 0 : _q.freelancerProfile) === null || _r === void 0 ? void 0 : _r.lastName);
+    const displayName = clientPortal ? freelancerName : (_s = project === null || project === void 0 ? void 0 : project.client) === null || _s === void 0 ? void 0 : _s.name;
     return (react_1.default.createElement("div", { className: "w-full mb-8" },
+        internalPortal && changeRequests && changeRequests.length > 0 && (react_1.default.createElement("div", null, changeRequests
+            .filter((cr) => cr.entityId === project.id)
+            .map((changerequest) => {
+            const { oldValue, newValue, status, changeType, entityId, ID, dateSubmitted, changeReason } = changerequest;
+            const dateInfo = {
+                currentDate: oldValue,
+                newDate: newValue,
+                daysDifference: getDays(oldValue, newValue),
+                changeType: changeType,
+                entityId: entityId,
+                ID: ID,
+                status: status,
+                dateSubmitted: dateSubmitted,
+                changeReason: changeReason
+            };
+            return (status === "New" && csmUserGroup && (react_1.default.createElement(ProjectDateRequest_1.default, { key: ID, dateInfo: dateInfo, userVal: user, project: project, expertName: expertName, freelancerId: freelancerId, freelancerEmail: freelancerEmail, updateProjectRequestStatus: updateProjectRequestStatus, GetAllProjectIrprDetailsForFreelancerDocument: GetAllProjectIrprDetailsForFreelancerDocument, GetAllChangeRequestsForFreelancerDocument: GetAllChangeRequestsForFreelancerDocument, changeType: changeType, isStageProd: isStageProd, selectedTab: selectedTab })));
+        }))),
         react_1.default.createElement("h1", { className: "font-bold text-lg m-2" },
             displayName,
             ":",
@@ -137,7 +160,7 @@ const ActiveProjectCard = ({ project, projectsData, expertName, freelancerId, fr
             react_1.default.createElement("div", { className: "flex flex-col-reverse justify-between w-full mt-3 md:flex-row gap-y-4" },
                 react_1.default.createElement("div", { className: "flex flex-col" },
                     react_1.default.createElement("h1", null, displayName),
-                    react_1.default.createElement("p", { className: "font-bold text-md mt-1" }, `${(_s = project === null || project === void 0 ? void 0 : project.name) !== null && _s !== void 0 ? _s : "Project"} ${(singleProjectData === null || singleProjectData === void 0 ? void 0 : singleProjectData.minFloorHours) ? "WITH" : "WITHOUT"} a min floor.`)),
+                    react_1.default.createElement("p", { className: "font-bold text-md mt-1" }, `${(_t = project === null || project === void 0 ? void 0 : project.name) !== null && _t !== void 0 ? _t : "Project"} ${(singleProjectData === null || singleProjectData === void 0 ? void 0 : singleProjectData.minFloorHours) ? "WITH" : "WITHOUT"} a min floor.`)),
                 react_1.default.createElement("div", { className: "flex flex-row gap-x-2 items-center ml-auto" },
                     showRating && react_1.default.createElement("div", { className: "flex flex-auto items-center justify-between" },
                         react_1.default.createElement(lab_1.Rating, { name: "read-only", value: Number(ratingValue), precision: 0.5, size: "large", readOnly: true, emptyIcon: react_1.default.createElement(Star_1.default, { fontSize: "inherit" }) })),
@@ -157,6 +180,6 @@ const ActiveProjectCard = ({ project, projectsData, expertName, freelancerId, fr
                 react_1.default.createElement(LeftCardUI_1.LeftCardUI, { projectData: singleProjectData, projectFrequencyType: projectFrequencyType, projectRateType: projectRateType, project: project, isAuthenticated: isAuthenticated, adhocProject: adhocProject, activeProject: activeProject, freelancerId: freelancerId, selectedTab: selectedTab, updateProjectTaskMutation: updateProjectTaskMutation, GetAllProjectIrprDetailsForFreelancerDocument: GetAllProjectIrprDetailsForFreelancerDocument, updateProjectTask: updateProjectTask, clientPortal: clientPortal }),
                 react_1.default.createElement("div", { className: "flex flex-col flex-grow md:flex-row gap-x-0 justify-around" },
                     react_1.default.createElement(CenterCardUI_1.CenterCardUI, { startDate: project === null || project === void 0 ? void 0 : project.startDate, endDate: project === null || project === void 0 ? void 0 : project.endDate, projectData: singleProjectData, projectRateType: projectRateType, project: project, projectFrequencyType: projectFrequencyType, adhocProject: adhocProject, clientPortal: clientPortal }),
-                    react_1.default.createElement(RightCardUI_1.RightCardUI, { project: project, expertName: expertName, freelancerEmail: freelancerEmail, freelancerId: freelancerId, isAuthenticated: isAuthenticated, editEndDate: editEndDate, setEditEndDate: setEditEndDate, editStartDate: editStartDate, setEditStartDate: setEditStartDate, showTimeModal: showTimeModal, setShowTimeModal: setShowTimeModal, setSingleProjectData: setSingleProjectData, projectData: singleProjectData, checkStartDate: checkStartDate, activeProject: activeProject, projectRateType: projectRateType, projectFrequencyType: projectFrequencyType, upcomingProject: upcomingProject, selectedTab: selectedTab, showRating: !!showRating, projectTagsMap: projectTagsMap, updateProjectStatusMutation: updateProjectStatusMutation, GetAllProjectIrprDetailsForFreelancerDocument: GetAllProjectIrprDetailsForFreelancerDocument, updateParoProjectTagsMutation: updateParoProjectTagsMutation, GetParoProjectsDocument: GetParoProjectsDocument, updateProjectTagReviewStatusMutation: updateProjectTagReviewStatusMutation, updateProjectStatus: updateProjectStatus, updateProjectTags: updateProjectTags, getSowLazyQuery: getSowLazyQuery, sendParoSupportEmail: sendParoSupportEmail, createChangeRequestMutation: createChangeRequestMutation, createChangeRequest: createChangeRequest, createOrUpdateRatingRequestMutation: createOrUpdateRatingRequestMutation, submitProjectHoursMutation: submitProjectHoursMutation, getAuth0Roles: getAuth0Roles, submitProjectHoursLambda: submitProjectHoursLambda, createOrUpdateRating: createOrUpdateRating, getParoProjectsByClientIdDocument: getParoProjectsByClientIdDocument, user: user, internalPortal: internalPortal, csmUserGroup: csmUserGroup, clientPortal: clientPortal, signedSow: signedSow, isStageProd: isStageProd, isRequestReviewEnabled: isRequestReviewEnabled }))))));
+                    react_1.default.createElement(RightCardUI_1.RightCardUI, { project: project, expertName: expertName, freelancerEmail: freelancerEmail, freelancerId: freelancerId, isAuthenticated: isAuthenticated, editEndDate: editEndDate, setEditEndDate: setEditEndDate, editStartDate: editStartDate, setEditStartDate: setEditStartDate, showTimeModal: showTimeModal, setShowTimeModal: setShowTimeModal, setSingleProjectData: setSingleProjectData, projectData: singleProjectData, checkStartDate: checkStartDate, activeProject: activeProject, projectRateType: projectRateType, projectFrequencyType: projectFrequencyType, upcomingProject: upcomingProject, selectedTab: selectedTab, showRating: !!showRating, projectTagsMap: projectTagsMap, updateProjectStatusMutation: updateProjectStatusMutation, GetAllProjectIrprDetailsForFreelancerDocument: GetAllProjectIrprDetailsForFreelancerDocument, updateParoProjectTagsMutation: updateParoProjectTagsMutation, GetParoProjectsDocument: GetParoProjectsDocument, updateProjectTagReviewStatusMutation: updateProjectTagReviewStatusMutation, updateProjectStatus: updateProjectStatus, updateProjectTags: updateProjectTags, getSowLazyQuery: getSowLazyQuery, sendParoSupportEmail: sendParoSupportEmail, createChangeRequestMutation: createChangeRequestMutation, createChangeRequest: createChangeRequest, createOrUpdateRatingRequestMutation: createOrUpdateRatingRequestMutation, submitProjectHoursMutation: submitProjectHoursMutation, getAuth0Roles: getAuth0Roles, submitProjectHoursLambda: submitProjectHoursLambda, createOrUpdateRating: createOrUpdateRating, getParoProjectsByClientIdDocument: getParoProjectsByClientIdDocument, user: user, internalPortal: internalPortal, csmUserGroup: csmUserGroup, clientPortal: clientPortal, signedSow: signedSow, isStageProd: isStageProd, isRequestReviewEnabled: isRequestReviewEnabled, updateDBProjectRequestStatus: updateDBProjectRequestStatus }))))));
 };
 exports.ActiveProjectCard = ActiveProjectCard;

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

@@ -17,6 +17,8 @@ interface EditDateModalProps {
     GetAllProjectIrprDetailsForFreelancerDocument: any;
     createChangeRequest?: any;
     isTestEnv: boolean;
+    updateDBProjectRequestStatus: any;
+    internalPortal: boolean;
 }
-export declare const EditDateModal: ({ freelancerId, freelancerEmail, project, previousDate, editDate, setEditDate, setIsDateInvalid, validateDate, isDateInvalid, changeType, expertName, isAuthenticated, selectedTab, createChangeRequestMutation, GetAllProjectIrprDetailsForFreelancerDocument, createChangeRequest, isTestEnv }: EditDateModalProps) => React.JSX.Element;
+export declare const EditDateModal: ({ freelancerId, freelancerEmail, project, previousDate, editDate, setEditDate, setIsDateInvalid, validateDate, isDateInvalid, changeType, expertName, isAuthenticated, selectedTab, createChangeRequestMutation, GetAllProjectIrprDetailsForFreelancerDocument, createChangeRequest, isTestEnv, updateDBProjectRequestStatus, internalPortal, }: EditDateModalProps) => React.JSX.Element;
 export {};

package/lib/components/ProjectCard/EditDateModal.js

@@ -67,7 +67,7 @@ const options = [
         value: 'Other',
     }
 ];
-const EditDateModal = ({ freelancerId, freelancerEmail, project, previousDate, editDate, setEditDate, setIsDateInvalid, validateDate, isDateInvalid, changeType, expertName, isAuthenticated, selectedTab, createChangeRequestMutation, GetAllProjectIrprDetailsForFreelancerDocument, createChangeRequest, isTestEnv }) => {
+const EditDateModal = ({ freelancerId, freelancerEmail, project, previousDate, editDate, setEditDate, setIsDateInvalid, validateDate, isDateInvalid, changeType, expertName, isAuthenticated, selectedTab, createChangeRequestMutation, GetAllProjectIrprDetailsForFreelancerDocument, createChangeRequest, isTestEnv, updateDBProjectRequestStatus, internalPortal, }) => {
     const [date, setDate] = (0, react_1.useState)(null);
     const [loading, setLoading] = (0, react_1.useState)(false);
     const [reason, setReason] = (0, react_1.useState)('');
@@ -97,14 +97,30 @@ const EditDateModal = ({ freelancerId, freelancerEmail, project, previousDate, e
                 amEmail: isTestEnv ? "admin@paro.io" : (_a = project === null || project === void 0 ? void 0 : project.paroContact) === null || _a === void 0 ? void 0 : _a.email,
                 entityId: Number(project === null || project === void 0 ? void 0 : project.id),
             };
-            isAuthenticated ? createChangeRequestMutation({
-                variables: {
-                    input: changeRequestDetails
-                },
-                refetchQueries: [
-                    { query: GetAllProjectIrprDetailsForFreelancerDocument, variables: { freelancerId, projectType: 3, activeTabId: selectedTab } }
-                ]
-            }) : yield createChangeRequest(changeRequestDetails);
+            if (internalPortal) {
+                updateDBProjectRequestStatus({
+                    variables: {
+                        input: {
+                            changeType: changeType,
+                            newValue: (0, dayjs_1.default)(date).format('MM/DD/YYYY'),
+                            projectId: parseInt(project === null || project === void 0 ? void 0 : project.id),
+                        }
+                    },
+                    refetchQueries: [
+                        { query: GetAllProjectIrprDetailsForFreelancerDocument, variables: { freelancerId, projectType: 3, activeTabId: selectedTab } }
+                    ]
+                });
+            }
+            else {
+                isAuthenticated ? createChangeRequestMutation({
+                    variables: {
+                        input: changeRequestDetails
+                    },
+                    refetchQueries: [
+                        { query: GetAllProjectIrprDetailsForFreelancerDocument, variables: { freelancerId, projectType: 3, activeTabId: selectedTab } }
+                    ]
+                }) : yield createChangeRequest(changeRequestDetails);
+            }
             (0, react_hot_toast_1.default)(react_1.default.createElement(base_ui_1.Alert, { color: "success", icon: "success", label: `Succesfully submitted ${changeType.charAt(0).toUpperCase() + changeType.slice(1)} Date Change Request` }), {
                 position: 'bottom-right',
                 style: { borderRadius: '8px' },

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

@@ -0,0 +1,17 @@
+import React from 'react';
+interface ProjectDateRequestProps {
+    freelancerId: number;
+    expertName: string;
+    dateInfo: any;
+    project: any;
+    freelancerEmail: string;
+    updateProjectRequestStatus: any;
+    userVal: any;
+    changeType: string;
+    GetAllChangeRequestsForFreelancerDocument: any;
+    isStageProd: string;
+    GetAllProjectIrprDetailsForFreelancerDocument: any;
+    selectedTab: number;
+}
+declare const ProjectDateRequest: ({ freelancerId, expertName, dateInfo, project, freelancerEmail, updateProjectRequestStatus, userVal, changeType, GetAllChangeRequestsForFreelancerDocument, isStageProd, GetAllProjectIrprDetailsForFreelancerDocument, selectedTab, }: ProjectDateRequestProps) => React.JSX.Element;
+export default ProjectDateRequest;

package/lib/components/ProjectCard/ProjectDateRequest.js

@@ -0,0 +1,132 @@
+"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 });
+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 dayjs_1 = __importDefault(require("dayjs"));
+const ProjectDateRequest = ({ freelancerId, expertName, dateInfo, project, freelancerEmail, updateProjectRequestStatus, userVal, changeType, GetAllChangeRequestsForFreelancerDocument, isStageProd, GetAllProjectIrprDetailsForFreelancerDocument, selectedTab, }) => {
+    const [approveLoading, setApproveLoading] = (0, react_1.useState)(false);
+    const [declineLoading, setDeclineLoading] = (0, react_1.useState)(false);
+    const isTestEnv = isStageProd !== "prod";
+    const hanldeSubmit = (status) => __awaiter(void 0, void 0, void 0, function* () {
+        var _a;
+        if (status === "Approved") {
+            setApproveLoading(true);
+        }
+        else {
+            setDeclineLoading(true);
+        }
+        ;
+        try {
+            yield updateProjectRequestStatus({
+                variables: {
+                    input: {
+                        projectId: parseInt(project === null || project === void 0 ? void 0 : project.id),
+                        changeType: dateInfo.changeType,
+                        dateSubmitted: dateInfo.dateSubmitted,
+                        changeReason: dateInfo.changeReason,
+                        entityName: project === null || project === void 0 ? void 0 : project.name,
+                        freelancerId: freelancerId,
+                        oldValue: (0, dayjs_1.default)(dateInfo.currentDate).format('MM/DD/YYYY'),
+                        newValue: (0, dayjs_1.default)(dateInfo.newDate).format('MM/DD/YYYY'),
+                        status: (status === 'Approved') ? 'Approved' : 'Denied',
+                        freelancerName: expertName,
+                        email: isTestEnv ? "admin@paro.io" : freelancerEmail,
+                        amEmail: isTestEnv ? "admin@paro.io" : (_a = project === null || project === void 0 ? void 0 : project.paroContact) === null || _a === void 0 ? void 0 : _a.email,
+                        csmEmail: isTestEnv ? "admin@paro.io" : project === null || project === void 0 ? void 0 : project.csmEmail,
+                        changeRequestId: dateInfo.ID,
+                        completedBy: userVal === null || userVal === void 0 ? void 0 : userVal.nickname
+                    }
+                },
+                refetchQueries: [
+                    { query: GetAllProjectIrprDetailsForFreelancerDocument, variables: { freelancerId, projectType: 3, activeTabId: selectedTab } },
+                    { query: GetAllChangeRequestsForFreelancerDocument, variables: { freelancerId } }
+                ]
+            });
+            setApproveLoading(false);
+            setDeclineLoading(false);
+        }
+        catch (error) {
+            setApproveLoading(false);
+            setDeclineLoading(false);
+            console.log(`Error updating ${dateInfo.changeType}`, error);
+        }
+    });
+    const calculateDateDifference = (startDate, endDate) => {
+        const startMoment = (0, dayjs_1.default)(startDate);
+        const endMoment = (0, dayjs_1.default)(endDate);
+        const differenceInDays = endMoment === null || endMoment === void 0 ? void 0 : endMoment.diff(startMoment, 'days');
+        if (differenceInDays === 0) {
+            return 'Same day';
+        }
+        else if (differenceInDays > 0) {
+            return `${differenceInDays} ${differenceInDays === 1 ? 'day' : 'days'} later`;
+        }
+        else {
+            return `${-differenceInDays} ${differenceInDays > 1 || differenceInDays < -1 ? 'days' : 'day'} earlier`;
+        }
+    };
+    const getProjectRequestType = (type) => {
+        if (type === "End Project") {
+            return react_1.default.createElement("p", { className: "flex flex-wrap gap-x-1" },
+                "The Expert has requested to End the project ", project === null || project === void 0 ? void 0 :
+                project.name);
+        }
+        else {
+            return react_1.default.createElement("p", { className: "flex flex-wrap gap-x-1" },
+                "Expert is requesting to move this project's ",
+                react_1.default.createElement("span", { className: "font-bold" }, dateInfo.changeType),
+                " from",
+                ' ',
+                `${(0, dayjs_1.default)(dateInfo.currentDate).format('MM/DD/YYYY')} to ${(0, dayjs_1.default)(dateInfo.newDate).format('MM/DD/YYYY')}`,
+                " (",
+                calculateDateDifference(dateInfo === null || dateInfo === void 0 ? void 0 : dateInfo.currentDate, dateInfo === null || dateInfo === void 0 ? void 0 : dateInfo.newDate),
+                ")");
+        }
+    };
+    return (react_1.default.createElement("div", { className: "border border-solid border-danger rounded-lg w-max p-3 flex flex-row w-max-full flex-wrap gap-x-4 items-center my-2" },
+        react_1.default.createElement(base_icons_1.IconExclamation
+        //@ts-ignore
+        , { 
+            //@ts-ignore
+            stroke: "#EF5360" }),
+        getProjectRequestType(changeType),
+        react_1.default.createElement(base_ui_1.Button, { label: "Approve", color: "danger", isLoading: approveLoading, onClick: () => { hanldeSubmit("Approved"); } }),
+        react_1.default.createElement(base_ui_1.Button, { label: "Decline", color: "", isLoading: declineLoading, onClick: () => { hanldeSubmit("Denied"); } })));
+};
+exports.default = ProjectDateRequest;

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

@@ -45,6 +45,7 @@ interface RightCardUIProps {
     signedSow: boolean;
     isStageProd: string;
     isRequestReviewEnabled: boolean;
+    updateDBProjectRequestStatus: any;
 }
-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 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, updateDBProjectRequestStatus, }: RightCardUIProps) => React.JSX.Element;
 export {};

package/lib/components/ProjectCard/RightCardUI.js

@@ -61,7 +61,7 @@ const TicketModal = ({ ticketModal, setTicketModal }) => {
         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, }) => {
+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, updateDBProjectRequestStatus, }) => {
     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);
@@ -213,9 +213,9 @@ const RightCardUI = ({ project, expertName, freelancerId, freelancerEmail, isAut
                     }, 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" },
+            !clientPortal && 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("h1", { className: "font-bold text-lg mb-2" }, "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),
@@ -233,8 +233,8 @@ const RightCardUI = ({ project, expertName, freelancerId, freelancerEmail, isAut
                         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(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, internalPortal: internalPortal, updateDBProjectRequestStatus: updateDBProjectRequestStatus }),
+        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, internalPortal: internalPortal, updateDBProjectRequestStatus: updateDBProjectRequestStatus }),
         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 }),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@paro.io/expert-shared-components",
-  "version": "1.9.9",
+  "version": "1.9.11",
   "description": "",
   "main": "lib/index.js",
   "scripts": {