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

package/lib/components/EarningsTracker/EditDateModal.js

@@ -0,0 +1,149 @@
+"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.EditDateModal = void 0;
+const react_1 = __importStar(require("react"));
+const react_hot_toast_1 = __importDefault(require("react-hot-toast"));
+const base_ui_1 = require("@paro.io/base-ui");
+const LogTimeModalAuthenticated_1 = require("./LogTimeModalAuthenticated");
+const dayjs_1 = __importDefault(require("dayjs"));
+const utc_1 = __importDefault(require("dayjs/plugin/utc"));
+const timezone_1 = __importDefault(require("dayjs/plugin/timezone"));
+dayjs_1.default.extend(utc_1.default);
+dayjs_1.default.extend(timezone_1.default);
+const options = [
+    {
+        label: 'Select a Reason',
+        value: '',
+    },
+    {
+        label: 'The client has delayed the project',
+        value: 'The client has delayed the project',
+    },
+    {
+        label: 'The expert has delayed the project',
+        value: 'The expert has delayed the project',
+    },
+    {
+        label: 'Extension of the previous phase',
+        value: 'Extension of the previous phase',
+    },
+    {
+        label: 'Other',
+        value: 'Other',
+    }
+];
+const EditDateModal = ({ freelancerId, freelancerEmail, project, previousDate, editDate, setEditDate, setIsDateInvalid, validateDate, isDateInvalid, changeType, expertName, isAuthenticated, selectedTab, createChangeRequestMutation, GetAllProjectIrprDetailsForFreelancerDocument, createChangeRequest, isTestEnv }) => {
+    const [date, setDate] = (0, react_1.useState)(null);
+    const [loading, setLoading] = (0, react_1.useState)(false);
+    const [reason, setReason] = (0, react_1.useState)('');
+    const [inputReason, setInputReason] = (0, react_1.useState)('');
+    const todayDate = new Date();
+    const dateToUse = (project === null || project === void 0 ? void 0 : project.endDate) ? new Date(project === null || project === void 0 ? void 0 : project.endDate) : todayDate;
+    const maxDate = changeType === 'start' ? dateToUse : todayDate.setMonth((todayDate).getMonth() + 12);
+    const minDate = changeType === 'start' ? new Date(project === null || project === void 0 ? void 0 : project.startDate).setMonth((todayDate).getMonth() - 3) : project === null || project === void 0 ? void 0 : project.startDate;
+    const handleSubmitDate = () => __awaiter(void 0, void 0, void 0, function* () {
+        var _a;
+        setLoading(true);
+        const projectTypes = ["ACTIVE", "ADHOC", "UPCOMING", "INACTIVE", "COMPLETED"];
+        try {
+            const changeRequestDetails = {
+                dateSubmitted: (0, dayjs_1.default)(new Date()).format('MM/DD/YYYY'),
+                changeReason: reason !== null && reason !== void 0 ? reason : inputReason,
+                changeType: `${changeType.charAt(0).toUpperCase() + changeType.slice(1)} Date`,
+                entityName: project === null || project === void 0 ? void 0 : project.name,
+                freelancerId: Number(freelancerId),
+                oldValue: (0, dayjs_1.default)(previousDate).format('MM/DD/YYYY'),
+                newValue: (0, dayjs_1.default)(date).format('MM/DD/YYYY'),
+                status: 'New',
+                projectType: projectTypes[selectedTab],
+                freelancerName: expertName,
+                email: freelancerEmail,
+                csmEmail: isTestEnv ? "admin@paro.io" : project === null || project === void 0 ? void 0 : project.csmEmail,
+                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);
+            (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' },
+            });
+            setLoading(false);
+            setDate(null);
+            setEditDate(false);
+            setReason('');
+            setInputReason('');
+        }
+        catch (error) {
+            setLoading(false);
+            console.log(`Error updating ${changeType} date`, error);
+            (0, react_hot_toast_1.default)(react_1.default.createElement(base_ui_1.Alert, { color: "danger", icon: "danger", label: `Failed to update ${changeType.charAt(0).toUpperCase() + changeType.slice(1)} Date` }), {
+                position: 'bottom-right',
+                style: { borderRadius: '8px' },
+            });
+        }
+    });
+    const onCloseModal = () => {
+        setLoading(false);
+        setDate(null);
+        setEditDate(false);
+        setReason('');
+        setInputReason('');
+    };
+    return (react_1.default.createElement(base_ui_1.Modal, { open: editDate, 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: "font-bold text-xl" }, `Change the ${changeType === 'start' ? 'Start' : 'End'} Date`),
+            react_1.default.createElement("p", { className: "text-md mb-6" }, `To make changes to the ${changeType === 'start' ? 'start' : 'end'} date please fill out the fields below.`),
+            react_1.default.createElement("p", { className: "font-bold" }, `What is the new ${changeType === 'start' ? 'start' : 'end'} date?`),
+            react_1.default.createElement(LogTimeModalAuthenticated_1.SelectDate, { timeLogDate: date, setTimeLogDate: setDate, isInvalid: false, setIsDateInvalid: setIsDateInvalid, validateDate: validateDate, maxDate: (0, dayjs_1.default)(maxDate).format('MM/DD/YYYY'), minDate: (0, dayjs_1.default)(minDate).format('MM/DD/YYYY') }),
+            isDateInvalid && react_1.default.createElement("div", { className: "text-red-800 text-xs" }, "Please enter a valid date"),
+            react_1.default.createElement("p", { className: "font-bold mt-2" }, "Please select a reason for change:"),
+            react_1.default.createElement("div", { className: "w-full sm:w-2/3 flex flex-col gap-y-2" },
+                react_1.default.createElement(base_ui_1.Autocomplete, { label: "", name: 'reason-select', value: reason, onSelect: (value) => setReason(value), options: options, isInvalid: reason === '', isInvalidText: "Reason can't be empty", size: 'md' }),
+                reason === 'Other' && (react_1.default.createElement(base_ui_1.Input, { type: "select", placeholder: `Please enter your reason for ${changeType === 'start' ? 'start' : 'end'} date change`, value: inputReason, onChange: (e) => setInputReason(e.target.value) }))),
+            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: () => handleSubmitDate(), label: "SAVE", className: "mt-4", color: "primary", disabled: isDateInvalid || !reason || !date, isLoading: loading })))));
+};
+exports.EditDateModal = EditDateModal;

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

@@ -0,0 +1,14 @@
+import React from "react";
+interface EmailModalProps {
+    emailModal: boolean;
+    setEmailModal: (emailModal: boolean) => void;
+    emailText: string;
+    setEmailText: (emailText: string) => void;
+    setTicketModal: (ticketModal: boolean) => void;
+    project: any;
+    expertName: string;
+    sendParoSupportEmail: any;
+    isTestEnv: boolean;
+}
+export declare const EmailModal: ({ emailModal, setEmailModal, emailText, setEmailText, setTicketModal, project, expertName, sendParoSupportEmail, isTestEnv }: EmailModalProps) => React.JSX.Element;
+export {};

package/lib/components/EarningsTracker/EmailModal.js

@@ -0,0 +1,79 @@
+"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.EmailModal = void 0;
+const react_1 = __importStar(require("react"));
+const react_hot_toast_1 = __importDefault(require("react-hot-toast"));
+const base_ui_1 = require("@paro.io/base-ui");
+const EmailModal = ({ emailModal, setEmailModal, emailText, setEmailText, setTicketModal, project, expertName, sendParoSupportEmail, isTestEnv }) => {
+    const [loading, setLoading] = (0, react_1.useState)(false);
+    const handleSubmit = () => __awaiter(void 0, void 0, void 0, function* () {
+        var _a, _b;
+        setLoading(true);
+        try {
+            yield sendParoSupportEmail({
+                csm_email: isTestEnv ? "admin@paro.io" : "projectsupport@paro.io",
+                am_email: isTestEnv ? "admin@paro.io" : (_a = project === null || project === void 0 ? void 0 : project.paroContact) === null || _a === void 0 ? void 0 : _a.email,
+                expert_name: expertName,
+                client_name: (_b = project === null || project === void 0 ? void 0 : project.client) === null || _b === void 0 ? void 0 : _b.name,
+                project_name: project === null || project === void 0 ? void 0 : project.name,
+                problem_description: emailText
+            });
+            (0, react_hot_toast_1.default)(react_1.default.createElement(base_ui_1.Alert, { color: "success", icon: "success", label: `Email sent successful` }), {
+                position: 'bottom-right',
+                style: { borderRadius: '8px' },
+            });
+            setTicketModal(true);
+            setEmailModal(false);
+            setEmailText("");
+            setLoading(false);
+        }
+        catch (error) {
+            setLoading(false);
+            console.log(`Error sending email`, error);
+            (0, react_hot_toast_1.default)(react_1.default.createElement(base_ui_1.Alert, { color: "danger", icon: "danger", label: `Failed to send email` }), {
+                position: 'bottom-right',
+                style: { borderRadius: '8px' },
+            });
+        }
+    });
+    return (react_1.default.createElement(base_ui_1.Modal, { open: emailModal, onClose: () => setEmailModal(false), size: "sm", className: "z-[100]" },
+        react_1.default.createElement("h1", { className: "font-bold text-lg mb-2" }, "Please describe your problem or issue"),
+        react_1.default.createElement(base_ui_1.Input, { value: emailText, type: "text", placeholder: "Please describe your problem or issue", onChange: (e) => setEmailText(e.target.value) }),
+        react_1.default.createElement(base_ui_1.Button, { type: "button", onClick: () => { handleSubmit(); }, label: "SUBMIT", className: "mt-4", color: "primary", isLoading: loading })));
+};
+exports.EmailModal = EmailModal;

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

@@ -0,0 +1,56 @@
+import React from "react";
+interface EndProjectModalProps {
+    project: any;
+    freelancerId: number;
+    expertName: string;
+    showConfirmationModal: boolean;
+    setShowConfirmationModal: (showConfirmationModal: boolean) => void;
+    projectType: string;
+    isAuthenticated: boolean;
+    selectedTab: number;
+    projectTagsMap: any;
+    updateProjectStatusMutation: any;
+    GetAllProjectIrprDetailsForFreelancerDocument: any;
+    updateParoProjectTagsMutation: any;
+    GetParoProjectsDocument: any;
+    updateProjectTagReviewStatusMutation: any;
+    updateProjectStatus: any;
+    updateProjectTags: any;
+}
+export declare enum BillRateTypes {
+    'Hourly' = 1,
+    'Fixed' = 2
+}
+export declare enum ProjectFrequencies {
+    'Recurring monthly' = 1,
+    'Recurring quarterly' = 2,
+    'One Time' = 3
+}
+export declare const TASK_DESCRIPTION_VALIDATION: {
+    MAX_LENGTH: number;
+    MIN_LENGTH: number;
+    LENGTH_VALIDATION_MESSAGE: string;
+};
+export declare const constants: {
+    MINUTES_ERROR_MESSAGE: string;
+    HOURS_ERROR_MESSAGE: string;
+    DATE_FORMAT: string;
+    MAX_DATE: Date;
+    MIN_DATE: Date;
+    DATE_VALIDATION_MESSAGE: string;
+    TASK_DESCRIPTION_ERROR_MESSAGE: string;
+};
+type SelectDateProps = {
+    timeLogDate: any;
+    setTimeLogDate: (e: any) => void;
+    isInvalid: boolean | "";
+    setIsDateInvalid: (e: any) => void;
+    validateDate: (e: any) => boolean;
+    showErrorText?: boolean;
+    disabled?: boolean;
+    maxDate?: string;
+    minDate?: string;
+};
+export declare const SelectDate: ({ timeLogDate, setTimeLogDate, isInvalid, setIsDateInvalid, validateDate, showErrorText, disabled, maxDate, minDate }: SelectDateProps) => React.JSX.Element;
+export declare const EndProjectModal: ({ project, freelancerId, expertName, showConfirmationModal, setShowConfirmationModal, projectType, isAuthenticated, selectedTab, projectTagsMap, updateProjectStatusMutation, GetAllProjectIrprDetailsForFreelancerDocument, updateParoProjectTagsMutation, GetParoProjectsDocument, updateProjectTagReviewStatusMutation, updateProjectStatus, updateProjectTags, }: EndProjectModalProps) => React.JSX.Element;
+export {};

package/lib/components/EarningsTracker/EndProjectModal.js

@@ -0,0 +1,221 @@
+"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.EndProjectModal = exports.SelectDate = exports.constants = exports.TASK_DESCRIPTION_VALIDATION = exports.ProjectFrequencies = exports.BillRateTypes = void 0;
+const react_1 = __importStar(require("react"));
+const react_hot_toast_1 = __importDefault(require("react-hot-toast"));
+const base_ui_1 = require("@paro.io/base-ui");
+const pickers_1 = require("@material-ui/pickers");
+const classnames_1 = __importDefault(require("classnames"));
+const dayjs_1 = __importDefault(require("@date-io/dayjs"));
+const core_1 = require("@material-ui/core");
+var BillRateTypes;
+(function (BillRateTypes) {
+    BillRateTypes[BillRateTypes["Hourly"] = 1] = "Hourly";
+    BillRateTypes[BillRateTypes["Fixed"] = 2] = "Fixed";
+})(BillRateTypes || (exports.BillRateTypes = BillRateTypes = {}));
+var ProjectFrequencies;
+(function (ProjectFrequencies) {
+    ProjectFrequencies[ProjectFrequencies["Recurring monthly"] = 1] = "Recurring monthly";
+    ProjectFrequencies[ProjectFrequencies["Recurring quarterly"] = 2] = "Recurring quarterly";
+    ProjectFrequencies[ProjectFrequencies["One Time"] = 3] = "One Time";
+})(ProjectFrequencies || (exports.ProjectFrequencies = ProjectFrequencies = {}));
+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.TASK_DESCRIPTION_VALIDATION = {
+    MAX_LENGTH: 120,
+    MIN_LENGTH: 3,
+    LENGTH_VALIDATION_MESSAGE: `Task Description should be greater than 3 characters.`,
+};
+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 addHoursAndMinutes = (hours, minutes) => {
+    const MINUTES_IN_AN_HOUR = 60;
+    const minutesToHours = minutes / MINUTES_IN_AN_HOUR;
+    return Number((hours + minutesToHours).toFixed(2));
+};
+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_1.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 EndProjectModal = ({ project, freelancerId, expertName, showConfirmationModal, setShowConfirmationModal, projectType, isAuthenticated, selectedTab, projectTagsMap, updateProjectStatusMutation, GetAllProjectIrprDetailsForFreelancerDocument, updateParoProjectTagsMutation, GetParoProjectsDocument, updateProjectTagReviewStatusMutation, updateProjectStatus, updateProjectTags, }) => {
+    const [completeProjectLoading, setCompleteProjectLoading] = (0, react_1.useState)(false);
+    const isTestEnv = true; //process.env.STAGE !== "prod"
+    const handleCompleteProject = () => __awaiter(void 0, void 0, void 0, function* () {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        setCompleteProjectLoading(true);
+        try {
+            const endProjectUpdateData = {
+                projectId: +(project === null || project === void 0 ? void 0 : project.id),
+                input: {
+                    projectStatusId: 3,
+                    isExpertEnded: true,
+                    csmName: ((_a = project === null || project === void 0 ? void 0 : project.paroContact) === null || _a === void 0 ? void 0 : _a.firstName) + " " + ((_b = project === null || project === void 0 ? void 0 : project.paroContact) === null || _b === void 0 ? void 0 : _b.lastName),
+                    aeName: ((_c = project === null || project === void 0 ? void 0 : project.paroContact) === null || _c === void 0 ? void 0 : _c.firstName) + " " + ((_d = project === null || project === void 0 ? void 0 : project.paroContact) === null || _d === void 0 ? void 0 : _d.lastName),
+                    expertName: expertName,
+                    projectName: project === null || project === void 0 ? void 0 : project.name,
+                    clientName: (_e = project === null || project === void 0 ? void 0 : project.client) === null || _e === void 0 ? void 0 : _e.name,
+                    projectType: projectType,
+                    csmEmail: isTestEnv ? "admin@paro.io" : project === null || project === void 0 ? void 0 : project.csmEmail,
+                    aeEmail: isTestEnv ? "admin@paro.io" : (_f = project === null || project === void 0 ? void 0 : project.paroContact) === null || _f === void 0 ? void 0 : _f.email,
+                    startDate: project === null || project === void 0 ? void 0 : project.startDate,
+                    endDate: project === null || project === void 0 ? void 0 : project.endDate,
+                    projectFrequency: ProjectFrequencies[(_g = project === null || project === void 0 ? void 0 : project.projectScope) === null || _g === void 0 ? void 0 : _g.projectFrequencyId],
+                    billType: BillRateTypes[(_h = project === null || project === void 0 ? void 0 : project.projectScope) === null || _h === void 0 ? void 0 : _h.freelanceRateTypeId],
+                    freelancerId: freelancerId,
+                },
+            };
+            let softwareTags = [], skillTags = [];
+            if (projectTagsMap[project === null || project === void 0 ? void 0 : project.id]) {
+                softwareTags = ((_j = project === null || project === void 0 ? void 0 : project.tags) === null || _j === void 0 ? void 0 : _j.reduce((acc, tag) => (tag === null || tag === void 0 ? void 0 : tag.field) === 'softwares' ? [...acc, tag.value] : acc, [])) || [];
+                skillTags = ((_k = project === null || project === void 0 ? void 0 : project.tags) === null || _k === void 0 ? void 0 : _k.reduce((acc, tag) => (tag === null || tag === void 0 ? void 0 : tag.field) === 'skills' ? [...acc, tag.value] : acc, [])) || [];
+            }
+            if (isAuthenticated) {
+                yield updateProjectStatusMutation({
+                    variables: endProjectUpdateData,
+                    refetchQueries: [
+                        { query: GetAllProjectIrprDetailsForFreelancerDocument, variables: { freelancerId, projectType: 3, activeTabId: selectedTab } }
+                    ]
+                });
+                if (projectTagsMap[project === null || project === void 0 ? void 0 : project.id]) {
+                    yield updateParoProjectTagsMutation({
+                        variables: {
+                            projectId: project === null || project === void 0 ? void 0 : project.id,
+                            input: [
+                                ...softwareTags,
+                                ...skillTags,
+                            ],
+                            merge: true,
+                            freelancerId
+                        },
+                        refetchQueries: [{
+                                query: GetParoProjectsDocument,
+                                variables: {
+                                    legacyFreelancerId: freelancerId
+                                }
+                            }]
+                    });
+                    yield updateProjectTagReviewStatusMutation({
+                        variables: {
+                            projectId: project === null || project === void 0 ? void 0 : project.id,
+                            input: {
+                                tagReviewStatus: 2
+                            }
+                        }
+                    });
+                }
+            }
+            else {
+                yield updateProjectStatus(endProjectUpdateData);
+                if (projectTagsMap[project === null || project === void 0 ? void 0 : project.id]) {
+                    const updateProjectTagsData = {
+                        projectId: project === null || project === void 0 ? void 0 : project.id,
+                        softwareTags,
+                        skillTags,
+                        merge: true,
+                        tagReviewStatus: 2,
+                        freelancerId
+                    };
+                    yield updateProjectTags(updateProjectTagsData);
+                }
+            }
+            (0, react_hot_toast_1.default)(react_1.default.createElement(base_ui_1.Alert, { color: "success", icon: "success", label: `Succesfully Ended Project` }), {
+                position: 'bottom-right',
+                style: { borderRadius: '8px' },
+            });
+        }
+        catch (error) {
+            console.log("error ending project", error);
+            (0, react_hot_toast_1.default)(react_1.default.createElement(base_ui_1.Alert, { color: "danger", icon: "danger", label: `Failed to End Project` }), {
+                position: 'bottom-right',
+                style: { borderRadius: '8px' },
+            });
+        }
+        finally {
+            setCompleteProjectLoading(false);
+            setShowConfirmationModal(false);
+        }
+    });
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(base_ui_1.Modal, { open: showConfirmationModal, onClose: () => setShowConfirmationModal(false), className: "z-[100]", size: "sm" },
+            react_1.default.createElement("div", { className: "flex flex-col items-center" },
+                react_1.default.createElement("h1", { className: "font-bold text-xl mb-6" }, "Are you sure ?"),
+                react_1.default.createElement("p", { className: "text-md mb-6 font-medium w-3/4" }, "When you end a project, you will no longer be able to bill additional hours and it will be removed from your active projects list."),
+                react_1.default.createElement("p", { className: "text-md mb-10 font-medium w-3/4" }, "By ending this project any other pending change request will be removed from the platform."),
+                react_1.default.createElement("div", { className: "flex flex-row gap-x-2" },
+                    react_1.default.createElement(base_ui_1.Button, { type: "button", onClick: () => setShowConfirmationModal(false), label: "CANCEL", className: "mt-4" }),
+                    react_1.default.createElement(base_ui_1.Button, { type: "button", onClick: () => { handleCompleteProject(); }, label: "END PROJECT", className: "mt-4", color: "primary", isLoading: completeProjectLoading }))))));
+};
+exports.EndProjectModal = EndProjectModal;

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

@@ -0,0 +1,18 @@
+import React from 'react';
+interface LeftCardUIProps {
+    projectData: any;
+    projectRateType: string;
+    projectFrequencyType: string;
+    project: any;
+    isAuthenticated: boolean;
+    activeProject: any;
+    adhocProject: any;
+    freelancerId: number;
+    selectedTab: number;
+    updateProjectTaskMutation: any;
+    GetAllProjectIrprDetailsForFreelancerDocument: any;
+    updateProjectTask: any;
+    clientPortal: boolean;
+}
+export declare const LeftCardUI: ({ projectData, projectRateType, projectFrequencyType, project, isAuthenticated, activeProject, adhocProject, freelancerId, selectedTab, updateProjectTaskMutation, GetAllProjectIrprDetailsForFreelancerDocument, updateProjectTask, clientPortal, }: LeftCardUIProps) => React.JSX.Element;
+export {};