@paro.io/expert-shared-components 1.4.11 → 1.5.0

package/lib/components/DocumentCenter/ParoDocumentsTable.js

@@ -0,0 +1,380 @@
+"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.ParoDocumentsTable = void 0;
+const react_1 = __importStar(require("react"));
+const core_1 = require("@material-ui/core");
+const Pagination_1 = __importDefault(require("../Reviews/Pagination"));
+const DocumentUploadRow_1 = require("./DocumentUploadRow");
+const base_icons_1 = require("@paro.io/base-icons");
+const ClientDocumentsTable_1 = require("./ClientDocumentsTable");
+const date_fns_1 = require("date-fns");
+const DeleteDocumentModal_1 = require("./DeleteDocumentModal");
+const utils_1 = require("../shared/utils");
+const headCells = [
+    {
+        id: 'fileName',
+        label: 'File Name',
+    },
+    {
+        id: 'docType',
+        label: 'Document Type',
+    },
+    {
+        id: 'uploadedDate',
+        label: 'Uploaded Date',
+    },
+    {
+        id: 'expiryDate',
+        label: 'Expiry Date',
+    },
+];
+function descendingComparator(a, b, orderBy) {
+    var _a, _b;
+    if (orderBy === 'uploadedDate' || orderBy === 'expiryDate') {
+        //@ts-ignore
+        const dateA = a === null || a === void 0 ? void 0 : a[orderBy];
+        //@ts-ignore
+        const dateB = b === null || b === void 0 ? void 0 : b[orderBy];
+        //@ts-ignore
+        if (dateB < dateA) {
+            return -1;
+        }
+        //@ts-ignore
+        if (dateB > dateA) {
+            return 1;
+        }
+        return 0;
+    }
+    else if (orderBy === 'fileName' || orderBy === 'docType') {
+        //@ts-ignore
+        const valueA = (_a = a === null || a === void 0 ? void 0 : a[orderBy]) !== null && _a !== void 0 ? _a : "";
+        //@ts-ignore
+        const valueB = (_b = b === null || b === void 0 ? void 0 : b[orderBy]) !== null && _b !== void 0 ? _b : "";
+        if (valueB < valueA) {
+            return -1;
+        }
+        if (valueB > valueA) {
+            return 1;
+        }
+        return 0;
+    }
+    else {
+        (0, utils_1.compareItems)(a, b, orderBy);
+    }
+}
+const ParoDocumentsTable = ({ legacyFreelancerId, expiryDate, setExpiryDate, expertFiles, setExpertFiles, uploadFileData, deleteFileMutation, updateFreelancerExpiryMutation, foldername, paroDocuments, getFileLazyQuery, getFilesLazyQuery, }) => {
+    const classes = (0, ClientDocumentsTable_1.useStyles)();
+    const [order, setOrder] = react_1.default.useState('desc');
+    const [orderBy, setOrderBy] = react_1.default.useState('uploadedDate');
+    const [currentPage, setCurrentPage] = (0, react_1.useState)(1);
+    const [perPageItems, setPerPageItems] = (0, react_1.useState)(10);
+    const [files, setFiles] = (0, react_1.useState)(expertFiles);
+    const [documentName, setDocumentName] = (0, react_1.useState)('');
+    const [clientAndProject, setClientAndProject] = (0, react_1.useState)('');
+    const [docType, setDocType] = (0, react_1.useState)('');
+    const [searchText, setSearchText] = (0, react_1.useState)('');
+    const [isUploading, setIsUploading] = (0, react_1.useState)(false);
+    const [downloadFilename, setDownloadFilename] = (0, react_1.useState)('');
+    const [apiFoldername, setApiFoldername] = (0, react_1.useState)('');
+    const [isDeleteModalOpen, setDeleteModalOpen] = (0, react_1.useState)(false);
+    const [deleteFileName, setDeleteFileName] = (0, react_1.useState)('');
+    const [insuranceExpiryDate, setInsuranceExpiryDate] = (0, react_1.useState)(null);
+    const [error, setError] = (0, react_1.useState)(null);
+    const [fileData, setFileData] = (0, react_1.useState)('');
+    const firstItem = (currentPage - 1) * perPageItems;
+    const lastItem = (currentPage - 1) * perPageItems + perPageItems;
+    const tableData = (files === null || files === void 0 ? void 0 : files.length) ? files === null || files === void 0 ? void 0 : files.map((file) => {
+        var _a, _b, _c, _d;
+        return {
+            fileName: ((_a = file === null || file === void 0 ? void 0 : file.filename) === null || _a === void 0 ? void 0 : _a.split('/').pop()) || "-",
+            docType: ((_b = file.filename) === null || _b === void 0 ? void 0 : _b.split('/').slice(-2, -1)[0].includes('auth0')) ? '-' : (_c = file.filename) === null || _c === void 0 ? void 0 : _c.split('/').slice(-2, -1)[0],
+            uploadedDate: (0, utils_1.formatDate)(Number(file.lastmodified)),
+            expiryDate: ((_d = file.filename) === null || _d === void 0 ? void 0 : _d.includes('/EO Insurance/')) ? expiryDate : 'N/A',
+        };
+    }) : [];
+    (0, react_1.useEffect)(() => {
+        const sortByTextProjects = searchText === ''
+            ? expertFiles
+            : expertFiles.filter((file) => {
+                var _a, _b;
+                return ((_a = file === null || file === void 0 ? void 0 : file.filename) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(searchText.toLowerCase())) ||
+                    ((_b = file === null || file === void 0 ? void 0 : file.documentType) === null || _b === void 0 ? void 0 : _b.toLowerCase().includes(searchText.toLowerCase()));
+            });
+        setFiles(sortByTextProjects);
+    }, [searchText]);
+    const getFileData = (_a) => __awaiter(void 0, [_a], void 0, function* ({ fileName, folderName }) {
+        var _b, _c;
+        const fileData = yield getFileLazyQuery({
+            skip: !downloadFilename,
+            variables: {
+                input: {
+                    foldername: folderName,
+                    filename: fileName,
+                },
+            },
+        });
+        if ((_c = (_b = fileData === null || fileData === void 0 ? void 0 : fileData.data) === null || _b === void 0 ? void 0 : _b.getFile) === null || _c === void 0 ? void 0 : _c.data) {
+            (0, utils_1.showToast)('success', 'File Data fetched successfully!');
+            setFileData(fileData);
+        }
+        else {
+            (0, utils_1.showToast)('warning', 'Failed to fetch file data! Please try again.');
+        }
+    });
+    (0, react_1.useEffect)(() => {
+        var _a, _b;
+        if (!fileData || !fileData.data || !fileData.data.getFile || !fileData.data.getFile.data) {
+            console.error("Invalid file data.");
+            return;
+        }
+        try {
+            const a = document.createElement('a');
+            const mimeType = (0, utils_1.getFileMimeType)(downloadFilename);
+            if (mimeType === 'application/pdf') {
+                //handle pdf type files
+                (0, utils_1.handleDownloadPdf)({ fileData, downloadFilename });
+            }
+            else {
+                // handle other type files
+                a.href = `data:${mimeType};base64,${(_b = (_a = fileData === null || fileData === void 0 ? void 0 : fileData.data) === null || _a === void 0 ? void 0 : _a.getFile) === null || _b === void 0 ? void 0 : _b.data}`;
+                a.download = downloadFilename;
+                a.click();
+            }
+        }
+        catch (error) {
+            console.error('Error downloading file:', error);
+            (0, utils_1.showToast)('warning', 'Failed to download file! Please try again.');
+        }
+        finally {
+            setDownloadFilename('');
+            setApiFoldername('');
+            setFileData('');
+        }
+    }, [fileData]);
+    const handleRequestSort = (event, property) => {
+        const isDesc = orderBy === property && order === 'desc';
+        setOrder(isDesc ? 'asc' : 'desc');
+        setOrderBy(property);
+    };
+    const createSortHandler = (property) => (event) => {
+        handleRequestSort(event, property);
+    };
+    const refetchFiles = (isUpload) => __awaiter(void 0, void 0, void 0, function* () {
+        try {
+            const { data } = yield getFilesLazyQuery({
+                variables: { input: { foldername: foldername } },
+                fetchPolicy: 'network-only',
+            });
+            if (docType === 'EO Insurance' && isUpload) {
+                insuranceExpiryDate && setExpiryDate((0, utils_1.formatDate)(insuranceExpiryDate));
+            }
+            setExpertFiles(data === null || data === void 0 ? void 0 : data.getFiles);
+            setFiles(data === null || data === void 0 ? void 0 : data.getFiles);
+        }
+        catch (error) {
+            console.error('Error refetching query:', error);
+        }
+    });
+    const handleDelete = () => {
+        setIsUploading(true);
+        if (apiFoldername.split('/')[1] === 'EO Insurance') {
+            updateFreelancerExpiryMutation({
+                variables: {
+                    id: legacyFreelancerId,
+                },
+            })
+                .catch((err) => { console.log(`Error deleting insurance from freelancer table ${err}`); });
+            setInsuranceExpiryDate(null);
+        }
+        deleteFileMutation({
+            variables: {
+                input: {
+                    foldername: apiFoldername,
+                    filename: deleteFileName,
+                },
+            },
+            onCompleted: () => __awaiter(void 0, void 0, void 0, function* () {
+                refetchFiles(false);
+            })
+        })
+            .then(() => {
+            toggleDeleteModal(deleteFileName);
+            (0, utils_1.showToast)('success', 'File deleted successfully!');
+        })
+            .catch((err) => {
+            toggleDeleteModal(deleteFileName);
+            console.log(`Error deleting file ${err}`);
+            (0, utils_1.showToast)('warning', 'Failed to delete file! Please retry.');
+        });
+        setIsUploading(false);
+    };
+    const handleDownloadFile = (fileName) => __awaiter(void 0, void 0, void 0, function* () {
+        var _a, _b, _c;
+        if (fileName) {
+            setDownloadFilename(fileName);
+            const segments = (_b = (_a = files === null || files === void 0 ? void 0 : files.filter((row) => row.filename.split('/').pop() === fileName)[0]) === null || _a === void 0 ? void 0 : _a.filename) === null || _b === void 0 ? void 0 : _b.split('/');
+            const folderName = (_c = segments === null || segments === void 0 ? void 0 : segments.slice(0, segments.length - 1)) === null || _c === void 0 ? void 0 : _c.join('/');
+            setApiFoldername(folderName);
+            getFileData({ fileName, folderName });
+        }
+    });
+    const toggleDeleteModal = (fileName) => {
+        var _a, _b, _c;
+        setDeleteModalOpen(!isDeleteModalOpen);
+        if (fileName) {
+            setDeleteFileName(fileName);
+            const segments = (_b = (_a = files === null || files === void 0 ? void 0 : files.filter((row) => row.filename.split('/').pop() === fileName)[0]) === null || _a === void 0 ? void 0 : _a.filename) === null || _b === void 0 ? void 0 : _b.split('/');
+            setApiFoldername((_c = segments === null || segments === void 0 ? void 0 : segments.slice(0, segments.length - 1)) === null || _c === void 0 ? void 0 : _c.join('/'));
+        }
+    };
+    const uploadFile = (fileForUpload, fileExtension) => {
+        setIsUploading(true);
+        uploadFileData({
+            variables: {
+                input: {
+                    foldername,
+                    subfolder: docType,
+                    filename: `${documentName}.${fileExtension}`,
+                    data: fileForUpload,
+                    expirationDate: ((docType === 'EO Insurance') && insuranceExpiryDate) ? insuranceExpiryDate : '',
+                    valid: true,
+                    sourceOfEOInsurance: 'Dashboard',
+                },
+            },
+            onCompleted: () => __awaiter(void 0, void 0, void 0, function* () {
+                refetchFiles(true);
+            })
+        })
+            .then(() => {
+            (0, utils_1.showToast)('success', 'File Uploaded successfully!');
+        })
+            .catch((err) => {
+            (0, utils_1.showToast)('warning', 'Upload failed! Please try again.');
+        });
+        setIsUploading(false);
+        setApiFoldername('');
+        setDocumentName('');
+    };
+    const handleUpload = (event) => {
+        const selectedFile = event.target.files && event.target.files[0];
+        if (!(0, utils_1.validateFileUpload)(selectedFile, false)) {
+            return;
+        }
+        if (selectedFile) {
+            const fileExtension = selectedFile.name.substring(selectedFile.name.lastIndexOf('.') + 1);
+            const reader = new FileReader();
+            reader.onloadend = () => {
+                const fileForUpload = String(reader.result).split(';base64,')[1];
+                uploadFile(fileForUpload, fileExtension);
+            };
+            reader.readAsDataURL(selectedFile);
+        }
+    };
+    const handleDateChange = (date) => {
+        if (date) {
+            const currentDate = (0, date_fns_1.startOfDay)(new Date);
+            if ((0, date_fns_1.isBefore)(date, currentDate)) {
+                setError('The expiration date cannot be in the past.');
+            }
+            else {
+                setInsuranceExpiryDate(date);
+                setError(null);
+            }
+        }
+    };
+    return (react_1.default.createElement(utils_1.CustomPaper, null,
+        react_1.default.createElement(DocumentUploadRow_1.DocumentUploadRow, { documentName: documentName, setDocumentName: setDocumentName, clientAndProject: clientAndProject, setClientAndProject: setClientAndProject, docType: docType, setDocType: setDocType, searchText: searchText, setSearchText: setSearchText, paroDocuments: paroDocuments, handleUpload: handleUpload, expiryDate: insuranceExpiryDate, handleDateChange: handleDateChange, error: error, isUploading: isUploading }),
+        react_1.default.createElement(core_1.Box, { mt: 2 }, (files === null || files === void 0 ? void 0 : files.length) > 0 ?
+            react_1.default.createElement(core_1.Table, { style: { overflow: 'auto' } },
+                react_1.default.createElement(core_1.TableHead, null,
+                    react_1.default.createElement(core_1.TableRow, { className: [classes.tableCellBorder, classes.shade].join(" ") },
+                        react_1.default.createElement(core_1.TableCell, { className: classes.tableCell, align: "center" }),
+                        headCells.map((headCell) => (react_1.default.createElement(core_1.TableCell, { key: headCell.id, sortDirection: orderBy === headCell.id ? order : false, align: "center", className: classes.tableCell },
+                            react_1.default.createElement(core_1.TableSortLabel, { active: orderBy === headCell.id, direction: orderBy === headCell.id ? order : 'asc', onClick: createSortHandler(headCell.id) },
+                                react_1.default.createElement("div", { className: "flex flex-row items-center gap-x-1" },
+                                    react_1.default.createElement("div", { className: "flex flex-col justify-center items-center" },
+                                        react_1.default.createElement("b", null, headCell.label)),
+                                    orderBy === headCell.id && null))))),
+                        react_1.default.createElement(core_1.TableCell, { className: classes.tableCell, align: "center" }))),
+                react_1.default.createElement(core_1.TableBody, null, (0, utils_1.stableSort)(tableData, (0, utils_1.getComparator)(order, orderBy, descendingComparator)).slice(firstItem, lastItem).map((row, index) => {
+                    const { fileName, docType, uploadedDate, expiryDate, } = row;
+                    return (react_1.default.createElement(core_1.TableRow, { key: index },
+                        react_1.default.createElement(core_1.TableCell, { className: classes.tableCell, align: "center" }, index + 1),
+                        react_1.default.createElement(core_1.TableCell, { className: classes.tableCell, align: "center" },
+                            react_1.default.createElement("a", { onClick: () => handleDownloadFile(fileName), style: {
+                                    color: 'blue',
+                                    textDecoration: 'underline',
+                                    cursor: 'pointer',
+                                } }, fileName)),
+                        react_1.default.createElement(core_1.TableCell, { className: classes.tableCell, align: "center" }, docType),
+                        react_1.default.createElement(core_1.TableCell, { className: classes.tableCell, align: "center" }, uploadedDate),
+                        react_1.default.createElement(core_1.TableCell, { className: classes.tableCell, align: "center" }, expiryDate),
+                        react_1.default.createElement(core_1.TableCell, { className: classes.tableCell },
+                            react_1.default.createElement(core_1.Grid, { item: true, container: true, direction: "row", justify: "space-evenly", alignItems: "center" },
+                                react_1.default.createElement(core_1.Tooltip, { arrow: true, placement: "top", interactive: true, className: "whitespace-nowrap", title: "Download Document" },
+                                    react_1.default.createElement(core_1.IconButton, { onClick: () => handleDownloadFile(fileName) },
+                                        " ",
+                                        react_1.default.createElement(base_icons_1.IconDocumentDownload, { size: "sm" }),
+                                        " ")),
+                                react_1.default.createElement(core_1.Tooltip, { arrow: true, placement: "top", interactive: true, className: "whitespace-nowrap", title: "This will delete the document for you and the Client" },
+                                    react_1.default.createElement(core_1.IconButton, { onClick: () => toggleDeleteModal(fileName) },
+                                        " ",
+                                        react_1.default.createElement(base_icons_1.IconTrash, { size: "sm" }),
+                                        " "))))));
+                })))
+            :
+                react_1.default.createElement(core_1.Box, null,
+                    react_1.default.createElement(core_1.Divider, null),
+                    react_1.default.createElement(core_1.Typography, { variant: "h6", style: { fontWeight: 'bold' }, align: 'center' }, "No Documents Found"),
+                    react_1.default.createElement(core_1.Typography, { variant: "body1", align: 'center' }, "You haven\u2019t uploaded any documents yet. Click above and upload any .pdf , .doc, .docx, .ppt, .xls, .xlsx file. Your resume is a great way to start."))),
+        (expertFiles === null || expertFiles === void 0 ? void 0 : expertFiles.length) >= 10 && react_1.default.createElement(core_1.Box, { m: 2 },
+            react_1.default.createElement(Pagination_1.default, { total: expertFiles === null || expertFiles === void 0 ? void 0 : expertFiles.length, currentPage: currentPage, setCurrentPage: setCurrentPage, perPageItems: perPageItems, setPerPageItems: setPerPageItems, displayText: "projects" })),
+        react_1.default.createElement(DeleteDocumentModal_1.DeleteDocumentModal, { isDeleteModalOpen: isDeleteModalOpen, setDeleteModalOpen: setDeleteModalOpen, handleDelete: handleDelete, content: apiFoldername.split('/')[1] !== "EO Insurance" ? (react_1.default.createElement(react_1.default.Fragment, null,
+                "Are you sure you want to delete document ",
+                react_1.default.createElement("strong", null, deleteFileName),
+                " ?",
+                react_1.default.createElement("br", null),
+                "If you continue, this document will no longer be available.")) : (react_1.default.createElement(react_1.default.Fragment, null,
+                "Are you sure you want to delete Insurance document ",
+                react_1.default.createElement("strong", null, deleteFileName),
+                " ?",
+                react_1.default.createElement("br", null),
+                react_1.default.createElement("strong", null, "Note:"),
+                " You hold only one insurance document. Deleting it might effect your 'Matching'.")) })));
+};
+exports.ParoDocumentsTable = ParoDocumentsTable;

package/lib/components/DocumentCenter/UploadFilesButton.d.ts

@@ -0,0 +1,6 @@
+interface UploadFilesButtonProps {
+    onFileSelect: (file: File) => void;
+    isLoading?: boolean;
+}
+export declare const UploadFilesButton: ({ onFileSelect, isLoading, }: UploadFilesButtonProps) => JSX.Element;
+export {};

package/lib/components/DocumentCenter/UploadFilesButton.js

@@ -0,0 +1,29 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UploadFilesButton = void 0;
+const react_1 = __importDefault(require("react"));
+const base_ui_1 = require("@paro.io/base-ui");
+const react_2 = require("react");
+const UploadFilesButton = ({ onFileSelect, isLoading, }) => {
+    const fileInputRef = (0, react_2.useRef)(null);
+    const handleClick = () => {
+        var _a;
+        (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click();
+    };
+    const handleFileChange = (event) => {
+        var _a;
+        const file = (_a = event.target.files) === null || _a === void 0 ? void 0 : _a[0];
+        if (file) {
+            onFileSelect(file);
+        }
+        // Reset input value to allow uploading the same file again
+        event.target.value = '';
+    };
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement("input", { type: "file", ref: fileInputRef, onChange: handleFileChange, className: "hidden", accept: ".pdf,.doc,.docx,.xls,.xlsx,.ppt,.pptx" }),
+        react_1.default.createElement(base_ui_1.Button, { onClick: handleClick, disabled: isLoading })));
+};
+exports.UploadFilesButton = UploadFilesButton;

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

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

package/lib/components/DocumentCenter/index.js

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

package/lib/components/ExpertProfileHeader/Banner.d.ts

@@ -1,5 +1,11 @@
 interface BannerProps {
     lifetimeFSV: number;
 }
+export declare const fsvRanges: {
+    fsv: number;
+    bgColor: string;
+    message: string;
+}[];
+export declare const getBGColor: (fsv: number) => string;
 declare const Banner: ({ lifetimeFSV }: BannerProps) => JSX.Element;
 export default Banner;

package/lib/components/ExpertProfileHeader/Banner.js

@@ -3,24 +3,26 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.getBGColor = exports.fsvRanges = void 0;
 const react_1 = __importDefault(require("react"));
 const base_icons_1 = require("@paro.io/base-icons");
 const core_1 = require("@material-ui/core");
-const fsvRanges = [
-    { fsv: 500000, bgColor: '#F9BABF', message: 'Experts who have accrued $85K+ in FSV tend to churn more than the average Expert' },
+exports.fsvRanges = [
+    { fsv: 500000, bgColor: '#F9BABF', message: 'Experts who have accrued $500K+ in FSV tend to churn more than the average Expert' },
     { fsv: 100000, bgColor: '#FBDD9B', message: 'Experts who have accrued $100K+ in FSV tend to churn more than the average Expert' },
     { fsv: 85000, bgColor: '#A3C9E5', message: 'Experts who have accrued $85K+ in FSV tend to churn more than the average Expert' },
 ];
 const getHoverMessage = (fsv) => {
-    const threshold = fsvRanges.find(threshold => fsv >= threshold.fsv);
+    const threshold = exports.fsvRanges.find(threshold => fsv >= threshold.fsv);
     return threshold ? threshold.message : '';
 };
 const getBGColor = (fsv) => {
-    const threshold = fsvRanges.find(threshold => fsv >= threshold.fsv);
+    const threshold = exports.fsvRanges.find(threshold => fsv >= threshold.fsv);
     return threshold ? threshold.bgColor : '';
 };
+exports.getBGColor = getBGColor;
 const Banner = ({ lifetimeFSV }) => {
-    const backgroundColor = getBGColor(lifetimeFSV);
+    const backgroundColor = (0, exports.getBGColor)(lifetimeFSV);
     const hoverText = getHoverMessage(lifetimeFSV);
     return (react_1.default.createElement(core_1.Box, { style: {
             backgroundColor: backgroundColor,

package/lib/components/ExpertProfileHeader/EarningsSection.d.ts

@@ -14,6 +14,7 @@ interface EarningsSectionProps {
     lifetimeIRPR: any;
     lifetimeWinRate: any;
     hasCompletedProjects: boolean;
+    lifetimeFSV: any;
 }
-declare const EarningsSection: ({ expertServiceLinesPlus, firmTags, haveATeamProp, expertLevels, currentMonthGoalHours, expertIRPRRatio, winRate, expertIRPRRatioPrev, winRatePrev, earnings, upsell, crossSell, lifetimeIRPR, lifetimeWinRate, hasCompletedProjects }: EarningsSectionProps) => JSX.Element;
+declare const EarningsSection: ({ expertServiceLinesPlus, firmTags, haveATeamProp, expertLevels, currentMonthGoalHours, expertIRPRRatio, winRate, expertIRPRRatioPrev, winRatePrev, earnings, upsell, crossSell, lifetimeIRPR, lifetimeWinRate, hasCompletedProjects, lifetimeFSV }: EarningsSectionProps) => JSX.Element;
 export default EarningsSection;

package/lib/components/ExpertProfileHeader/EarningsSection.js

@@ -17,6 +17,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const core_1 = require("@material-ui/core");
 const styles_1 = require("@material-ui/core/styles");
 const react_1 = __importDefault(require("react"));
+const Banner_1 = require("./Banner");
 const useStyles = (0, styles_1.makeStyles)((theme) => ({
     chip: (props) => ({
         background: '#248384',
@@ -60,9 +61,9 @@ const FirmTags = (_a) => {
             margin: 1,
         } }, chipProps));
 };
-const EarningsInfo = ({ label, value }) => (react_1.default.createElement(core_1.Box, { mr: 2, display: "flex", justifyContent: "space-between", alignItems: "center" },
+const EarningsInfo = ({ label, value, textColor = 'black' }) => (react_1.default.createElement(core_1.Box, { mr: 2, display: "flex", justifyContent: "space-between", alignItems: "center" },
     react_1.default.createElement(core_1.Typography, { variant: "body2" }, label),
-    react_1.default.createElement("b", null, value)));
+    react_1.default.createElement("b", { style: { color: textColor } }, value)));
 const DataCell = ({ label, value }) => {
     //@ts-ignore
     const classes = useStyles();
@@ -101,9 +102,10 @@ const ToLocalStringFn = (value) => {
         maximumFractionDigits: 2,
     });
 };
-const EarningsSection = ({ expertServiceLinesPlus, firmTags, haveATeamProp, expertLevels, currentMonthGoalHours, expertIRPRRatio, winRate, expertIRPRRatioPrev, winRatePrev, earnings, upsell, crossSell, lifetimeIRPR, lifetimeWinRate, hasCompletedProjects }) => {
+const EarningsSection = ({ expertServiceLinesPlus, firmTags, haveATeamProp, expertLevels, currentMonthGoalHours, expertIRPRRatio, winRate, expertIRPRRatioPrev, winRatePrev, earnings, upsell, crossSell, lifetimeIRPR, lifetimeWinRate, hasCompletedProjects, lifetimeFSV }) => {
     var _a;
     const earning = earnings && (earnings === null || earnings === void 0 ? void 0 : earnings.length) > 0 && ((_a = earnings[0]) === null || _a === void 0 ? void 0 : _a.earnings);
+    const backgroundColor = (0, Banner_1.getBGColor)(lifetimeFSV);
     return (react_1.default.createElement(core_1.Grid, { item: true, style: { width: '100%', padding: '6px' } },
         ((expertServiceLinesPlus === null || expertServiceLinesPlus === void 0 ? void 0 : expertServiceLinesPlus.length) > 0 || (firmTags === null || firmTags === void 0 ? void 0 : firmTags.length) > 0 || haveATeamProp || (expertLevels === null || expertLevels === void 0 ? void 0 : expertLevels.length) > 0) && react_1.default.createElement(react_1.default.Fragment, null,
             react_1.default.createElement(core_1.Grid, null,
@@ -134,6 +136,9 @@ const EarningsSection = ({ expertServiceLinesPlus, firmTags, haveATeamProp, expe
                 react_1.default.createElement(core_1.Box, { mb: 2 },
                     react_1.default.createElement(core_1.Divider, null)),
                 react_1.default.createElement(EarningsInfo, { label: "% to Goal", value: currentMonthGoalHours && earning ? `${ToLocalStringFn(((earning / currentMonthGoalHours) * 100).toFixed(2))} %` : 'N/A' }),
+                react_1.default.createElement(core_1.Box, { mb: 2 },
+                    react_1.default.createElement(core_1.Divider, null)),
+                react_1.default.createElement(EarningsInfo, { label: "Lifetime FSV", value: lifetimeFSV ? ToLocalStringFn(lifetimeFSV) : 'N/A', textColor: backgroundColor }),
                 react_1.default.createElement(core_1.Box, { mb: 2 },
                     react_1.default.createElement(core_1.Divider, null)),
                 react_1.default.createElement(core_1.Box, { mb: 2 },

package/lib/components/ExpertProfileHeader/ExpertProfileHeader.js

@@ -221,7 +221,7 @@ const ExpertProfileHeader = ({ expertId, address: addressForReducer, companyName
                         react_1.default.createElement(NetworkSection_1.default, { handleScrollToBottom: isInternal && handleScrollToBottom ? handleScrollToBottom : () => { }, preferenceTasks: preferenceTasks, isWhiteLabel: isWhiteLabel, detailsSectionCompleted: detailsSectionCompleted, infoColor: infoColor, leftSideStatus: leftSideStatus, rightSideStatus: rightSideStatus, isInternal: isInternal }),
                         react_1.default.createElement(core_1.Divider, { orientation: isSmallScreen ? 'horizontal' : 'vertical' })),
                     react_1.default.createElement(core_1.Grid, { item: true, container: true, direction: 'column', justify: 'space-between', xs: 12, md: true, style: { flex: '1', width: 'auto' } },
-                        react_1.default.createElement(EarningsSection_1.default, { expertServiceLinesPlus: expertServiceLinesPlus, firmTags: firmTags, haveATeamProp: haveATeamProp, expertLevels: expertLevels, currentMonthGoalHours: currentMonthGoalHours, expertIRPRRatio: expertIRPRRatio, winRate: winRate, expertIRPRRatioPrev: expertIRPRRatioPrev, winRatePrev: winRatePrev, earnings: earnings, upsell: upsell, crossSell: crossSell, lifetimeIRPR: lifetimeIRPR, lifetimeWinRate: lifetimeWinRate, hasCompletedProjects: (_k = expertMetricsData === null || expertMetricsData === void 0 ? void 0 : expertMetricsData.getExpertMetrics) === null || _k === void 0 ? void 0 : _k.lastProjectCompleted }),
+                        react_1.default.createElement(EarningsSection_1.default, { expertServiceLinesPlus: expertServiceLinesPlus, firmTags: firmTags, haveATeamProp: haveATeamProp, expertLevels: expertLevels, currentMonthGoalHours: currentMonthGoalHours, expertIRPRRatio: expertIRPRRatio, winRate: winRate, expertIRPRRatioPrev: expertIRPRRatioPrev, winRatePrev: winRatePrev, earnings: earnings, upsell: upsell, crossSell: crossSell, lifetimeIRPR: lifetimeIRPR, lifetimeWinRate: lifetimeWinRate, hasCompletedProjects: (_k = expertMetricsData === null || expertMetricsData === void 0 ? void 0 : expertMetricsData.getExpertMetrics) === null || _k === void 0 ? void 0 : _k.lastProjectCompleted, lifetimeFSV: lifetimeFSV }),
                         react_1.default.createElement(core_1.Divider, { orientation: isSmallScreen ? 'horizontal' : 'vertical' })),
                     (estimatedAvailability !== '-' || nextMonthTrueAvailability !== '-' || expertFirms) && (react_1.default.createElement(core_1.Grid, { item: true, container: true, direction: 'column', justify: 'space-between', xs: 12, md: true, style: { flex: '1', width: 'auto' } },
                         react_1.default.createElement(TeamsSection_1.default, { estimatedAvailability: estimatedAvailability, nextMonthTrueAvailability: nextMonthTrueAvailability, expertFirms: expertFirms, firstName: firstName, lastName: lastName, primaryServiceLine: primaryServiceLine, city: city, stateAbbreviation: stateAbbreviation, paroTenure: paroTenure, imageUrl: imageUrl }),

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

@@ -0,0 +1,10 @@
+import React from 'react';
+interface ToastModalProps {
+    color: 'success' | 'info' | 'warning' | 'danger';
+    icon: string;
+    message: string;
+    duration?: number;
+    position?: 'top-right' | 'bottom-right' | 'top-left' | 'bottom-left';
+}
+declare const ToastModal: React.FC<ToastModalProps>;
+export default ToastModal;

package/lib/components/shared/ToastNotification.js

@@ -0,0 +1,63 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const core_1 = require("@material-ui/core");
+const base_ui_1 = require("@paro.io/base-ui");
+const ToastModal = ({ color, icon, message, duration = 6000, // Default duration is 6 seconds
+position = 'bottom-right', }) => {
+    const [open, setOpen] = (0, react_1.useState)(false);
+    // Automatically open the modal on mount
+    (0, react_1.useEffect)(() => {
+        setOpen(true);
+        // Automatically close the modal after the specified duration
+        const timer = setTimeout(() => {
+            setOpen(false);
+        }, duration);
+        // Cleanup the timeout if the component unmounts or if the duration changes
+        return () => clearTimeout(timer);
+    }, [duration]);
+    console.log("triggered");
+    return (react_1.default.createElement(core_1.Dialog, { open: open, onClose: () => setOpen(false), "aria-labelledby": "toast-modal-title", maxWidth: "xs", fullWidth: true, PaperProps: {
+            style: {
+                backgroundColor: '#323232', // Dark background to resemble toast style
+                color: '#fff', // White text
+                borderRadius: '8px',
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+                zIndex: 9999, // Ensure it’s on top of the MUI Dialog
+                position: 'absolute', // Absolute positioning to control location
+                top: position.includes('top') ? '10%' : 'auto',
+                bottom: position.includes('bottom') ? '10%' : 'auto',
+                right: position.includes('right') ? '10%' : 'auto',
+                left: position.includes('left') ? '10%' : 'auto',
+            },
+        } },
+        react_1.default.createElement(core_1.DialogContent, { style: { textAlign: 'center' } },
+            react_1.default.createElement(base_ui_1.Alert, { color: color, icon: icon, label: message, className: color === 'warning' ? 'bg-warning' : 'bg-success' }),
+            ",")));
+};
+exports.default = ToastModal;