@paro.io/expert-shared-components 1.12.36 → 1.12.38

package/lib/components/Escalations/EscalationSubmitForm.js

@@ -0,0 +1,217 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const base_icons_1 = require("@paro.io/base-icons");
+const base_ui_1 = require("@paro.io/base-ui");
+const core_1 = require("@material-ui/core");
+const LogTimeModalAuthenticated_1 = require("../ProjectCard/LogTimeModalAuthenticated");
+const dayjs_1 = __importDefault(require("dayjs"));
+const issueTypeOptions = [
+    { value: 'CommunicationIssues', label: 'Communication Issues' },
+    { value: 'Professionalism', label: 'Professionalism' },
+    { value: 'ProjectAbandonment', label: 'Project Abandonment' },
+    { value: 'DelayedDeliverables', label: 'Delayed Deliverables or Deadlines due to Missing Information/Documentation' },
+    { value: 'BillingConcern', label: 'Billing Concern' },
+    { value: 'ScopeCreep', label: 'Scope Creep/Unauthorized Requests' },
+    { value: 'Other', label: 'Other' },
+];
+const EscalationSubmitForm = ({ goBack, goHome, experts, projects, isExpert = false }) => {
+    const [isChecked, setIsChecked] = (0, react_1.useState)(false);
+    const [problemInput, setProblemInput] = (0, react_1.useState)('');
+    const [outcomeInput, setOutcomeInput] = (0, react_1.useState)('');
+    const [uploadFiles, setUploadFiles] = (0, react_1.useState)([]);
+    const [uploadingFile, setUploadingFile] = (0, react_1.useState)(false);
+    const [expertOptions, setExpertOptions] = (0, react_1.useState)([]);
+    const [selectedExpert, setSelectedExpert] = (0, react_1.useState)(null);
+    const [projectOptions, setProjectOptions] = (0, react_1.useState)([]);
+    const [selectedProjects, setSelectedProjects] = (0, react_1.useState)([]);
+    const [issueType, setIssueType] = (0, react_1.useState)('');
+    const [severity, setSeverity] = (0, react_1.useState)('');
+    const [startDate, setStartDate] = (0, react_1.useState)(undefined);
+    const [isDateInvalid, setIsDateInvalid] = (0, react_1.useState)(false);
+    const fileInputRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        if (experts && experts.length > 0) {
+            const options = experts.map((expert) => ({
+                label: isExpert ? expert.name : expert.freelancerName,
+                value: isExpert ? expert.id : expert.freelancerId,
+            }));
+            setExpertOptions(options);
+        }
+    }, [experts]);
+    (0, react_1.useEffect)(() => {
+        if (projects && projects.length > 0) {
+            const options = projects
+                .filter((p) => {
+                if (isExpert) {
+                    return p.client.id === Number(selectedExpert);
+                }
+                else {
+                    return p.freelancer.id === Number(selectedExpert);
+                }
+            })
+                .map((p) => ({
+                label: isExpert ? p.name : p.name,
+                value: isExpert ? p : p,
+            }));
+            setProjectOptions(options);
+        }
+    }, [projects, selectedExpert]);
+    const handleFileUpload = (event) => {
+        const files = Array.from(event.target.files);
+        setUploadFiles(prev => [...prev, ...files]);
+    };
+    const isFormValid = () => {
+        const requiredProjectSelection = isExpert || (!isExpert && selectedProjects.length > 0);
+        return (selectedExpert !== null &&
+            issueType !== '' &&
+            severity !== '' &&
+            problemInput.trim() !== '' &&
+            outcomeInput.trim() !== '' &&
+            isChecked &&
+            startDate !== undefined &&
+            requiredProjectSelection);
+    };
+    const handleSubmit = () => {
+        if (!isFormValid())
+            return;
+        const formData = {
+            selectedExpert,
+            selectedProjects,
+            issueType,
+            severity,
+            startDate,
+            problem: problemInput,
+            expectedOutcome: outcomeInput,
+            supportingDocs: uploadFiles.map(f => f.name),
+        };
+        console.log('Escalation Submitted:', formData);
+        // Redirect or perform additional logic
+        goHome();
+    };
+    const validateDate = (date) => {
+        const minDate = LogTimeModalAuthenticated_1.constants.MIN_DATE;
+        const maxDate = new Date();
+        const isValid = date ? date.setHours(0, 0, 0, 0) < minDate.setHours(0, 0, 0, 0) || date.setHours(0, 0, 0, 0) > maxDate.setHours(0, 0, 0, 0) : true;
+        setIsDateInvalid(isValid);
+        return !isValid;
+    };
+    return (react_1.default.createElement("div", { className: 'w-full max-w-full' },
+        react_1.default.createElement("button", { onClick: goBack, className: "flex items-center text-blue-600 mb-6" },
+            react_1.default.createElement(base_icons_1.IconChevronLeft, { size: "xs" }),
+            " Back"),
+        react_1.default.createElement("div", { className: "mb-6" },
+            react_1.default.createElement("h2", { className: "text-xl font-bold" }, "Report Issue with Your Expert"),
+            react_1.default.createElement("p", { className: "text-gray-600 mt-1" }, "Provide details about the issue you're experiencing and we'll resolve it within 4-8 hours")),
+        react_1.default.createElement("div", { className: "bg-red-50 border border-red-200 rounded-lg p-4 mb-6" },
+            react_1.default.createElement("div", { className: "flex items-start" },
+                react_1.default.createElement("span", { className: "mr-3" }, "!"),
+                react_1.default.createElement("div", null,
+                    react_1.default.createElement("p", { className: "font-medium text-red-800" }, "Common Issues We Can Help With"),
+                    react_1.default.createElement("ul", { className: "mt-1 text-sm text-red-700 list-disc list-inside space-y-1" },
+                        react_1.default.createElement("li", null, `Communication delays (${isExpert ? 'client' : 'expert'} not responding)`),
+                        !isExpert && react_1.default.createElement("li", null, "Missed deadlines or project delays"),
+                        !isExpert && react_1.default.createElement("li", null, "Quality concerns with deliverables"),
+                        react_1.default.createElement("li", null, "Scope changes or unexpected requests"),
+                        react_1.default.createElement("li", null, "Billing or payment disputes"))))),
+        react_1.default.createElement("div", { className: "border rounded-lg overflow-hidden mb-6" },
+            react_1.default.createElement("div", { className: "bg-gray-50 p-3 border-b" },
+                react_1.default.createElement("h3", { className: "font-medium" }, "Issue Details")),
+            react_1.default.createElement("div", { className: "p-4 space-y-4" },
+                react_1.default.createElement("div", null,
+                    react_1.default.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-1" }, `Which ${isExpert ? 'client' : 'expert'} are you experiencing the issue with?`),
+                    react_1.default.createElement(core_1.Select, { fullWidth: true, value: selectedExpert !== null && selectedExpert !== void 0 ? selectedExpert : '', onChange: e => setSelectedExpert(e.target.value === '' ? null : Number(e.target.value)), displayEmpty: true, variant: "outlined", placeholder: `Select a ${isExpert ? 'Client' : 'Expert'}` },
+                        react_1.default.createElement(core_1.MenuItem, { disabled: true, value: "" },
+                            react_1.default.createElement("em", null, `Select a ${isExpert ? 'Client' : 'Expert'}`)),
+                        expertOptions.map(option => (react_1.default.createElement(core_1.MenuItem, { key: option.value, value: option.value }, option.label))))),
+                react_1.default.createElement("div", null,
+                    react_1.default.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-1" }, "Which Project(s)?"),
+                    react_1.default.createElement(core_1.Select, { multiple: true, fullWidth: true, value: selectedProjects, onChange: (e) => {
+                            const value = e.target.value;
+                            setSelectedProjects(Array.isArray(value) ? value : [value]);
+                        }, variant: "outlined", displayEmpty: true, renderValue: (selected) => {
+                            if (selected.length === 0) {
+                                return react_1.default.createElement("span", { className: "text-gray-400" }, "Select project(s)");
+                            }
+                            return projectOptions
+                                .filter(opt => selected.includes(opt.value))
+                                .map(opt => opt.label)
+                                .join(', ');
+                        }, placeholder: `Select a Project(s)` },
+                        react_1.default.createElement(core_1.MenuItem, { disabled: true, value: "" },
+                            react_1.default.createElement("em", null, "Select a Project(s)...")),
+                        projectOptions.map(option => (react_1.default.createElement(core_1.MenuItem, { key: option.value, value: option.value }, option.label))))),
+                react_1.default.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4" },
+                    react_1.default.createElement("div", null,
+                        react_1.default.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-1" }, "Issue Type"),
+                        react_1.default.createElement(core_1.Select, { fullWidth: true, value: issueType, onChange: e => setIssueType(e.target.value), displayEmpty: true, variant: "outlined" },
+                            react_1.default.createElement(core_1.MenuItem, { disabled: true, value: "" },
+                                react_1.default.createElement("em", null, "Select issue type...")),
+                            issueTypeOptions
+                                .filter(option => {
+                                if (isExpert) {
+                                    return option.label !== 'Billing Concern';
+                                }
+                                else {
+                                    return option.label !== 'Scope Creep/Unauthorized Requests';
+                                }
+                            })
+                                .map(option => (react_1.default.createElement(core_1.MenuItem, { key: option.value, value: option.value }, option.label))))),
+                    react_1.default.createElement("div", null,
+                        react_1.default.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-1" }, "Severity Level"),
+                        react_1.default.createElement(core_1.Select, { fullWidth: true, value: severity, onChange: e => setSeverity(e.target.value), displayEmpty: true, variant: "outlined" },
+                            react_1.default.createElement(core_1.MenuItem, { disabled: true, value: "" },
+                                react_1.default.createElement("em", null, "Select severity...")),
+                            react_1.default.createElement(core_1.MenuItem, { value: "Critical" }, "Critical"),
+                            react_1.default.createElement(core_1.MenuItem, { value: "High" }, "High"),
+                            react_1.default.createElement(core_1.MenuItem, { value: "Medium" }, "Medium"),
+                            react_1.default.createElement(core_1.MenuItem, { value: "Low" }, "Low")))),
+                react_1.default.createElement("div", null,
+                    react_1.default.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-1" }, "When did this issue start?"),
+                    react_1.default.createElement(LogTimeModalAuthenticated_1.SelectDate, { timeLogDate: startDate, setTimeLogDate: setStartDate, isInvalid: false, setIsDateInvalid: setIsDateInvalid, validateDate: validateDate, maxDate: (0, dayjs_1.default)(new Date()).format("MM-DD-YYYY") })),
+                react_1.default.createElement("div", null,
+                    react_1.default.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-1" }, "What's the problem?"),
+                    react_1.default.createElement(base_ui_1.Input, { type: "text", value: problemInput, placeholder: "Describe the issue...", onChange: (e) => setProblemInput(e.target.value) })),
+                react_1.default.createElement("div", null,
+                    react_1.default.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-1" }, "What outcome are you looking for?"),
+                    react_1.default.createElement(base_ui_1.Input, { type: "text", value: outcomeInput, placeholder: "What would you like to see happen?", onChange: (e) => setOutcomeInput(e.target.value) })),
+                react_1.default.createElement("div", null,
+                    react_1.default.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-1" }, "Supporting Documents (Optional)"),
+                    react_1.default.createElement("div", { className: "border border-dashed border-gray-300 rounded-md p-6 text-center" },
+                        react_1.default.createElement("p", { className: "text-sm text-gray-600" }, "Upload screenshots, emails, or documents"),
+                        react_1.default.createElement("input", { ref: fileInputRef, type: "file", multiple: true, accept: ".pdf,.doc,.docx,.jpeg,.png,.gif,.csv", hidden: true, onChange: handleFileUpload }),
+                        react_1.default.createElement(base_ui_1.Button, { label: "Attach Files", iconLeft: react_1.default.createElement(base_icons_1.IconPlus, { size: "sm" }), onClick: () => { var _a; return (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); }, color: "info", isLoading: uploadingFile, size: "sm" }),
+                        uploadFiles.length > 0 && (react_1.default.createElement("ul", { className: "mt-2 text-sm text-gray-600 list-disc list-inside" }, uploadFiles.map(f => react_1.default.createElement("li", { key: f.name }, f.name)))))),
+                react_1.default.createElement("div", { className: "bg-[#EFF6FF] p-3 rounded" },
+                    react_1.default.createElement(base_ui_1.Checkbox, { id: "checkbox-1", label: `I understand this will notify my ${isExpert ? 'client' : 'expert'} and the Paro support team`, name: "acknowledge", isChecked: isChecked, onChange: () => setIsChecked(prev => !prev) })),
+                react_1.default.createElement("div", { className: "flex justify-end space-x-3 pt-4" },
+                    react_1.default.createElement(base_ui_1.Button, { label: "Cancel", onClick: goBack }),
+                    react_1.default.createElement(base_ui_1.Button, { label: "Submit issue", onClick: handleSubmit, color: "primary", disabled: !isFormValid() }))))));
+};
+exports.default = EscalationSubmitForm;

package/lib/components/Escalations/EscalationTabs.d.ts

@@ -0,0 +1,9 @@
+interface EscalationTabProps {
+    activeTab: string;
+    setActiveTab: (activeTab: string) => void;
+    activeIssues: number;
+    inProgressIssues: number;
+    resolvedIssues: number;
+}
+declare const EscalationTabs: ({ activeTab, setActiveTab, activeIssues, inProgressIssues, resolvedIssues, }: EscalationTabProps) => JSX.Element;
+export default EscalationTabs;

package/lib/components/Escalations/EscalationTabs.js

@@ -0,0 +1,30 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+;
+const EscalationTabs = ({ activeTab, setActiveTab, activeIssues = 0, inProgressIssues = 0, resolvedIssues = 0, }) => {
+    return (react_1.default.createElement("div", { className: "border-b border-gray-200 mb-6" },
+        react_1.default.createElement("nav", { className: "flex space-x-8" },
+            react_1.default.createElement("button", { onClick: () => setActiveTab('action-required'), className: `py-2 px-1 border-b-2 font-medium text-sm flex items-center ${activeTab === 'action-required'
+                    ? 'border-[#A73A43] text-[#A73A43]'
+                    : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'}` },
+                react_1.default.createElement("div", { className: "bg-[#A73A43] w-2 h-2 rounded-full mr-2" }),
+                "Action Required",
+                react_1.default.createElement("div", { className: "bg-[#F9BABF] text-[#A73A43] font-bold rounded-full px-2 py-1 text-xs ml-2" }, activeIssues)),
+            react_1.default.createElement("button", { onClick: () => setActiveTab('in-progress'), className: `py-2 px-1 border-b-2 font-medium text-sm flex items-center ${activeTab === 'in-progress'
+                    ? 'border-[#115484] text-[#115484]'
+                    : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'}` },
+                react_1.default.createElement("div", { className: "bg-[#115484] w-2 h-2 rounded-full mr-2" }),
+                "In Progress",
+                react_1.default.createElement("div", { className: "bg-[#A3C9E5] text-[#115484] font-bold rounded-full px-2 py-1 text-xs ml-2" }, inProgressIssues)),
+            react_1.default.createElement("button", { onClick: () => setActiveTab('resolved'), className: `py-2 px-1 border-b-2 font-medium text-sm flex items-center ${activeTab === 'resolved'
+                    ? 'border-[#12756F] text-[#12756F]'
+                    : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'}` },
+                react_1.default.createElement("div", { className: "bg-[#12756F] w-2 h-2 rounded-full mr-2" }),
+                "Resolved",
+                react_1.default.createElement("div", { className: "bg-[#A3DCD8] text-[#12756F] font-bold rounded-full px-2 py-1 text-xs ml-2" }, resolvedIssues)))));
+};
+exports.default = EscalationTabs;

package/lib/components/Escalations/EscalationTabsContent.d.ts

@@ -0,0 +1,17 @@
+export type EscalationChatDetails = {
+    title: string;
+    project: string;
+    id: string;
+    status: string;
+};
+interface EscalationTabProps {
+    activeTab: string;
+    openEscalationChat: (details: EscalationChatDetails) => void;
+    setSelectedIssueId: (issue: number) => void;
+    activeIssues: any[];
+    inProgressIssues: any[];
+    resolvedIssues: any[];
+    isExpert: boolean;
+}
+declare const EscalationTabsContent: ({ activeTab, openEscalationChat, setSelectedIssueId, activeIssues, inProgressIssues, resolvedIssues, isExpert, }: EscalationTabProps) => JSX.Element;
+export default EscalationTabsContent;

package/lib/components/Escalations/EscalationTabsContent.js

@@ -0,0 +1,92 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const EscalationIssueCard_1 = __importStar(require("./EscalationIssueCard"));
+const base_ui_1 = require("@paro.io/base-ui");
+;
+const EscalationTabsContent = ({ activeTab, openEscalationChat, setSelectedIssueId, activeIssues, inProgressIssues, resolvedIssues, isExpert, }) => {
+    if (activeTab === 'action-required') {
+        return (react_1.default.createElement("div", null,
+            react_1.default.createElement("div", { className: "flex items-center justify-between mb-4" },
+                react_1.default.createElement("h3", { className: "text-lg font-semibold text-gray-900" }, "Issues Requiring Your Response")),
+            react_1.default.createElement(EscalationIssueCard_1.default, { issues: activeIssues, isExpert: isExpert, openEscalationChat: openEscalationChat, showRespondButton: true, setSelectedIssueId: setSelectedIssueId })));
+    }
+    if (activeTab === 'in-progress') {
+        return (react_1.default.createElement("div", null,
+            react_1.default.createElement("div", { className: "flex items-center justify-between mb-4" },
+                react_1.default.createElement("h3", { className: "text-lg font-semibold text-gray-900" }, "Issues In Progress")),
+            react_1.default.createElement(EscalationIssueCard_1.default, { issues: inProgressIssues, isExpert: isExpert, openEscalationChat: openEscalationChat, showMarkResolvedButton: true })));
+    }
+    if (activeTab === 'resolved') {
+        return (react_1.default.createElement("div", null,
+            react_1.default.createElement("div", { className: "flex items-center justify-between mb-4" },
+                react_1.default.createElement("h3", { className: "text-lg font-semibold text-gray-900" }, "Recently Resolved Issues")),
+            resolvedIssues.length > 0 ? react_1.default.createElement("div", { className: "space-y-3" }, resolvedIssues.map((issue) => {
+                const project = issue.projectName && Array.isArray(issue.projectName) && issue.projectName.length > 0
+                    ? `${issue.projectName[0]}${issue.projectName.length > 1 ? ` +${issue.projectName.length - 1} more` : ''} `
+                    : '';
+                return (react_1.default.createElement("div", { key: issue.id, className: "border border-green-200 rounded-lg bg-green-50 p-4" },
+                    react_1.default.createElement("div", { className: "flex items-start justify-between" },
+                        react_1.default.createElement("div", { className: "flex items-start" },
+                            react_1.default.createElement("div", null,
+                                react_1.default.createElement("div", { className: "flex flex-row justify-between" },
+                                    react_1.default.createElement("h4", { className: "font-medium text-gray-900 mb-1" },
+                                        issue.problem,
+                                        " ",
+                                        react_1.default.createElement(EscalationIssueCard_1.CustomTag, { label: issue.severityLevel }))),
+                                react_1.default.createElement("div", { className: "flex items-center text-sm text-gray-600 mb-2" },
+                                    react_1.default.createElement("span", null, issue.person),
+                                    react_1.default.createElement("span", { className: "mx-2" }, "\u2022"),
+                                    react_1.default.createElement("span", null, project),
+                                    react_1.default.createElement("span", { className: "mx-2" }, "\u2022"),
+                                    react_1.default.createElement("span", null,
+                                        "Case #",
+                                        issue.id)),
+                                react_1.default.createElement("p", { className: "text-sm text-gray-600 mb-3" }, issue.description),
+                                react_1.default.createElement("div", { className: "flex items-center text-sm text-gray-600 mb-2" },
+                                    react_1.default.createElement("span", { className: "text-xs text-gray-500" },
+                                        "Resolved ",
+                                        issue.resolvedDate),
+                                    react_1.default.createElement("span", { className: "mx-2" }, "\u2022"),
+                                    react_1.default.createElement("span", { className: "text-xs text-gray-500" },
+                                        "Resolved By ",
+                                        issue.resolvedBy)))),
+                        react_1.default.createElement(base_ui_1.Button, { onClick: () => openEscalationChat({
+                                title: issue.chatTitle,
+                                project: issue.projectName,
+                                id: issue.id,
+                                status: issue.chatStatus
+                            }), label: "Chat", color: "primary" }))));
+            }))
+                :
+                    react_1.default.createElement("div", null, "No resolved issues.")));
+    }
+    return react_1.default.createElement(react_1.default.Fragment, null);
+};
+exports.default = EscalationTabsContent;

package/lib/components/Escalations/Escalations.d.ts

@@ -0,0 +1,10 @@
+interface EscalationsProps {
+    experts: any[];
+    projects: any[];
+    isExpert: boolean;
+    activeIssues: any[];
+    inProgressIssues: any[];
+    resolvedIssues: any[];
+}
+export declare const Escalations: ({ experts, projects, isExpert, activeIssues, inProgressIssues, resolvedIssues, }: EscalationsProps) => JSX.Element;
+export {};

package/lib/components/Escalations/Escalations.js

@@ -0,0 +1,146 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Escalations = void 0;
+const react_1 = __importStar(require("react"));
+const EscalationReportBanner_1 = __importDefault(require("./EscalationReportBanner"));
+const base_ui_1 = require("@paro.io/base-ui");
+const EscalationTabs_1 = __importDefault(require("./EscalationTabs"));
+const EscalationTabsContent_1 = __importDefault(require("./EscalationTabsContent"));
+const EscalationRespondForm_1 = __importDefault(require("./EscalationRespondForm"));
+const EscalationSubmitForm_1 = __importDefault(require("./EscalationSubmitForm"));
+const EscalationChat_1 = __importDefault(require("./EscalationChat"));
+const AccountSuspensionBanner_1 = __importDefault(require("./AccountSuspensionBanner"));
+const AccountSuspensionModal_1 = __importDefault(require("./AccountSuspensionModal"));
+const base_icons_1 = require("@paro.io/base-icons");
+const EscalationIssueCard_1 = require("./EscalationIssueCard");
+const Escalations = ({ experts, projects, isExpert = false, activeIssues, inProgressIssues, resolvedIssues, }) => {
+    const [activeSection, setActiveSection] = (0, react_1.useState)('support');
+    const [selectedProject, setSelectedProject] = (0, react_1.useState)(null);
+    const [selectedIssueId, setSelectedIssueId] = (0, react_1.useState)(null); // using selectedIssueId 0 for new escalation submission
+    const [showEscalationChat, setShowEscalationChat] = (0, react_1.useState)(false);
+    const [activeChatIssue, setActiveChatIssue] = (0, react_1.useState)(null); // update required
+    const [activeEscalationTab, setActiveEscalationTab] = (0, react_1.useState)('action-required');
+    const [showSuspensionModal, setShowSuspensionModal] = (0, react_1.useState)(false);
+    const goBack = () => {
+        if (selectedIssueId) {
+            setSelectedIssueId(null);
+        }
+        else if (selectedProject) {
+            setSelectedProject(null);
+        }
+        else {
+            setActiveSection('support');
+        }
+    };
+    const goHome = () => {
+        setSelectedIssueId(null);
+        setSelectedProject(null);
+        setActiveSection('support');
+    };
+    const openEscalationChat = (issue) => {
+        setActiveChatIssue(issue);
+        setShowEscalationChat(true);
+    };
+    return (react_1.default.createElement("div", { className: "bg-white w-full" },
+        react_1.default.createElement("div", { className: isExpert ? "p-6" : "mx-auto p-6 border-solid border-t-2" },
+            activeSection === 'support' && selectedIssueId === null && react_1.default.createElement("div", null,
+                react_1.default.createElement("div", { className: "flex justify-between items-center mb-1 mt-2" },
+                    react_1.default.createElement("h2", { className: "text-xl font-bold" }, "Support & Escalation Management"),
+                    activeIssues.length && react_1.default.createElement("div", { className: "flex items-center space-x-2" },
+                        react_1.default.createElement("div", { className: `border box-border text-center px-4 pb-0.5 pt-1 text-sm inline-block break-words text-white rounded-full bg-danger border-danger` },
+                            activeIssues.length,
+                            " ACTIVE ISSUES"))),
+                react_1.default.createElement("div", { className: "border-b pb-4 mb-6" },
+                    react_1.default.createElement("p", { className: "text-gray-600" }, `Manage escalations with integrated chat between you, your ${isExpert ? 'client' : 'expert'}, and Paro support. All conversations are organized by priority and status.`)),
+                react_1.default.createElement("div", { className: "bg-blue-50 border border-blue-200 rounded-lg p-4 mb-6" },
+                    react_1.default.createElement("h3", { className: "font-medium text-blue-800 mb-3" }, "How Our Escalation System Works"),
+                    react_1.default.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6" },
+                        react_1.default.createElement("div", null,
+                            react_1.default.createElement("h4", { className: "font-medium text-gray-900 mb-2" }, "Standard Resolution Process"),
+                            react_1.default.createElement("div", { className: "space-y-2 text-sm text-gray-600" },
+                                react_1.default.createElement("div", { className: "flex items-center" },
+                                    react_1.default.createElement("div", { className: "bg-blue-500 w-2 h-2 rounded-full mr-2" }),
+                                    react_1.default.createElement("span", null,
+                                        react_1.default.createElement("strong", null, "Step 1:"),
+                                        " ",
+                                        `Issue escalated to ${isExpert ? 'client' : 'expert'} & Paro support`)),
+                                react_1.default.createElement("div", { className: "flex items-center" },
+                                    react_1.default.createElement("div", { className: "bg-blue-500 w-2 h-2 rounded-full mr-2" }),
+                                    react_1.default.createElement("span", null,
+                                        react_1.default.createElement("strong", null, "Step 2:"),
+                                        " ",
+                                        `${isExpert ? 'Client' : 'Expert'} response with solution/timeline`)),
+                                react_1.default.createElement("div", { className: "flex items-center" },
+                                    react_1.default.createElement("div", { className: "bg-blue-500 w-2 h-2 rounded-full mr-2" }),
+                                    react_1.default.createElement("span", null,
+                                        react_1.default.createElement("strong", null, "Step 3:"),
+                                        " Implementation & resolution confirmation"))),
+                            react_1.default.createElement("div", { className: "mt-3 text-xs text-gray-600 bg-white p-2 rounded border" },
+                                react_1.default.createElement("strong", null, "Chat integration:"),
+                                " ",
+                                `All escalations include real-time chat with ${isExpert ? 'client' : 'expert'} and support team for transparent communication.`)),
+                        react_1.default.createElement("div", null,
+                            react_1.default.createElement("h4", { className: "font-medium text-gray-900 mb-2" }, "Priority Levels & Response Times"),
+                            react_1.default.createElement("div", { className: "space-y-2 text-sm" },
+                                react_1.default.createElement("div", { className: "flex items-center gap-x-2" },
+                                    react_1.default.createElement(EscalationIssueCard_1.CustomTag, { label: "Critical" }),
+                                    react_1.default.createElement("span", null, "All work blocked")),
+                                react_1.default.createElement("div", { className: "flex items-center gap-x-2" },
+                                    react_1.default.createElement(EscalationIssueCard_1.CustomTag, { label: "High" }),
+                                    react_1.default.createElement("span", null, "Progress blocked")),
+                                react_1.default.createElement("div", { className: "flex items-center gap-x-2" },
+                                    react_1.default.createElement(EscalationIssueCard_1.CustomTag, { label: "Medium" }),
+                                    react_1.default.createElement("span", null, "Timeline impacted")),
+                                react_1.default.createElement("div", { className: "flex items-center gap-x-2" },
+                                    react_1.default.createElement(EscalationIssueCard_1.CustomTag, { label: "Low" }),
+                                    react_1.default.createElement("span", null, "Minor issues")))))),
+                isExpert &&
+                    react_1.default.createElement("div", { className: "rounded-lg p-2 mb-4 shadow-lg" },
+                        react_1.default.createElement("div", { className: "flex items-center justify-between" },
+                            react_1.default.createElement("div", { className: "flex items-center" },
+                                react_1.default.createElement("div", { className: "bg-white bg-opacity-20 rounded-full p-2 mr-3" },
+                                    react_1.default.createElement(base_icons_1.IconExclamationCircle, { className: "h-6 w-6 text-black" })),
+                                react_1.default.createElement("div", null,
+                                    react_1.default.createElement("div", { className: "mr-4" },
+                                        react_1.default.createElement("h3", { className: "font-semibold text-sm mb-1" }, "Need Support with a Client?"),
+                                        react_1.default.createElement("p", { className: "text-xs" }, "Report payment, scope, or communication activeIssues")))),
+                            react_1.default.createElement(base_ui_1.Button, { label: "Report issue", onClick: () => setSelectedIssueId(0), iconLeft: react_1.default.createElement(base_icons_1.IconExclamation, { size: "sm", className: "text-white" }), color: "primary" }))),
+                isExpert &&
+                    react_1.default.createElement(AccountSuspensionBanner_1.default, { setShowSuspensionModal: setShowSuspensionModal, suspended: false }),
+                !isExpert &&
+                    react_1.default.createElement(EscalationReportBanner_1.default, { onReport: () => setSelectedIssueId(0) }),
+                react_1.default.createElement(EscalationTabs_1.default, { activeTab: activeEscalationTab, setActiveTab: setActiveEscalationTab, activeIssues: activeIssues.length, inProgressIssues: inProgressIssues.length, resolvedIssues: resolvedIssues.length }),
+                react_1.default.createElement(EscalationTabsContent_1.default, { activeTab: activeEscalationTab, openEscalationChat: openEscalationChat, setSelectedIssueId: setSelectedIssueId, activeIssues: activeIssues, inProgressIssues: inProgressIssues, resolvedIssues: resolvedIssues, isExpert: isExpert })),
+            activeSection === 'support' && activeIssues.filter((issue) => issue.id === selectedIssueId).length > 0 && (react_1.default.createElement(EscalationRespondForm_1.default, { goBack: goBack, selectedIssue: activeIssues.filter((issue) => issue.id === selectedIssueId), goHome: goHome })),
+            activeSection === 'support' && selectedIssueId === 0 && (react_1.default.createElement(EscalationSubmitForm_1.default, { goBack: goBack, goHome: goHome, experts: experts, projects: projects, isExpert: isExpert })),
+            showEscalationChat && activeChatIssue && (react_1.default.createElement(EscalationChat_1.default, { activeChatIssue: activeChatIssue, showEscalationChat: showEscalationChat, setShowEscalationChat: setShowEscalationChat })),
+            showSuspensionModal &&
+                react_1.default.createElement(AccountSuspensionModal_1.default, { showSuspensionModal: showSuspensionModal, onClose: () => setShowSuspensionModal(false) }))));
+};
+exports.Escalations = Escalations;

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

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

package/lib/components/Escalations/index.js

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

package/lib/components/ExpertProfileHeader/ActionButtonSection.js

@@ -11,12 +11,12 @@ const CopyToClipboardAlert_1 = __importDefault(require("../shared/CopyToClipboar
 const colors_1 = __importDefault(require("../ClientReferencesSection/constants/colors"));
 const Banner_1 = __importDefault(require("./Banner"));
 const base_icons_1 = require("@paro.io/base-icons");
-const StyledButton = (0, styled_components_1.default)(core_1.Button) `
-    margin: 0px !important;
-    padding: 26px 0 18px 0 !important;
-    span {
-        color: ${colors_1.default.buttonText} !important
-     }
+const StyledButton = (0, styled_components_1.default)(core_1.Button) `
+    margin: 0px !important;
+    padding: 26px 0 18px 0 !important;
+    span {
+        color: ${colors_1.default.buttonText} !important
+     }
 `;
 const ActionButton = ({ title, ariaLabel, onClick, icon: Icon }) => (react_1.default.createElement(core_1.Tooltip, { arrow: true, placement: "top", interactive: true, className: "whitespace-nowrap", title: title },
     react_1.default.createElement(core_1.IconButton, { "aria-label": ariaLabel, onClick: onClick },

package/lib/components/ExpertProfileHeader/ProfileSection.js

@@ -53,13 +53,13 @@ const formatPhoneNumber = (phone) => {
     return `(${numericPhone.slice(0, 3)}) ${numericPhone.slice(3, 6)} - ${numericPhone.slice(6)}`;
 };
 exports.formatPhoneNumber = formatPhoneNumber;
-exports.ProfilePhotoPreview = styled_components_1.default.img `
-  height: 86px;
-  width: 86px;
-  border: 1px solid ${colors_1.default.lightGray};
-  border-radius: 50%;
-  object-fit: cover;
-  object-position: top;
+exports.ProfilePhotoPreview = styled_components_1.default.img `
+  height: 86px;
+  width: 86px;
+  border: 1px solid ${colors_1.default.lightGray};
+  border-radius: 50%;
+  object-fit: cover;
+  object-position: top;
 `;
 const ProfileSection = ({ legacyFreelancerId, imageUrl, shouldAllowEditProfile, firstName, lastName, primaryServiceLine, editServiceLine, city, stateAbbreviation, email, phone, setOpen, paroProjectsData, getUserDocument, uploadUserPhotoMutation, loadingNewImage, imageUpdateError, isInternal, getUserByEmail, updateUserEmail, updateUserMutation, getUserByEmailLazyQuery, updateUserPassword, verifyUserPassword, getExpertRates, paroTenure, hourlyRate, }) => {
     var _a;

package/lib/components/Invoices/TestDecisionSection.d.ts

@@ -1 +1 @@
-export declare const TestDecisionSection: () => JSX.Element;
+export declare const TestDecisionSection: () => JSX.Element;