Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 | 40x 40x 40x 40x 40x 40x 80x 40x 40x 40x 1x 1x 1x 40x 40x 40x | import { Stack } from "@mui/material";
import { useConversationContext } from "../ConversationProvider";
import GiveTabs from "@shared/Tabs/GiveTabs";
import CounterCircle from "./CounterCircle";
import GiveSwitch from "@shared/Switch/GiveSwitch";
import GiveText from "@shared/Text/GiveText";
import { GiveConversationTabType } from "../types";
import { ConversationSearch } from "./ConversationSearch";
import { GiveConversationSections } from "../constants";
import MessagesHeader from "./MessagesHeader";
import SubjectInput from "./SubjectInput";
import { getCounterVariant } from "../utils";
import { checkPortals } from "@utils/routing";
import { useCustomThemeV2 } from "@theme/hooks/useCustomThemeV2";
import { useEnterprisePermissions } from "@components/AcquirerEnterprises/CreateEnterprise/hooks/useEnterprisePermissions";
export default function ConversationTabs() {
const {
setTab,
tab,
toggleMentions,
clearThread,
setSectionInView,
showMentions,
currentThread,
searchState,
sectionInView,
stats,
} = useConversationContext();
const { isAcquirerEnterprises, isEnterprisePortal } = checkPortals();
const { isMobileView } = useCustomThemeV2();
const { merchant_underwriting } = useEnterprisePermissions();
const isProviderWithoutUnderwriting =
isEnterprisePortal && !merchant_underwriting;
const allTabs = [
{
label: "Team",
value: "team",
dataTestId: "give-conversation-tab-team",
hidden: isProviderWithoutUnderwriting,
endItem: (
<CounterCircle
count={stats?.totalUnreadMessagesInternal || 0}
variant={getCounterVariant({
isMentioned: !!stats?.isMentionedInternal,
// For team chat, we should not show red icon for merchant reply
didMerchantReply: false,
unreadMessagesCount: stats?.totalUnreadMessagesInternal || 0,
})}
/>
),
},
{
label: isAcquirerEnterprises ? "Provider" : "Merchant",
value: "merchant",
dataTestId: "give-conversation-tab-merchant",
endItem: (
<CounterCircle
count={stats?.totalUnreadMessagesExternal || 0}
variant={getCounterVariant({
isMentioned: !!stats?.isMentionedExternal,
didMerchantReply: !!stats?.didMerchantReplyExternal,
})}
/>
),
},
];
const tabs = allTabs.filter((t) => !t.hidden);
const { taskID, riskTriggerID, id } = currentThread || {};
//we only need to show mentions switch on Team tab, and if no single thread is opened
const hasMentionsSwitch =
tab === "team" &&
!id &&
sectionInView !== GiveConversationSections.MESSAGE_NEW;
const switchTab = (value: GiveConversationTabType) => {
clearThread();
setSectionInView(GiveConversationSections.MESSAGE_LIST);
setTab(value as GiveConversationTabType);
};
const isNewMessage = GiveConversationSections?.MESSAGE_NEW === sectionInView;
const isMessageList = sectionInView !== GiveConversationSections.MESSAGE_LIST;
return (
<>
<GiveTabs
onClick={switchTab as any}
items={tabs}
type="line"
selected={tab}
variant="underline"
containerSx={{
display: "flex",
overflow: "auto",
scrollbarWidth: "none",
width: "100%",
gap: "16px",
padding: isMobileView ? "16px 20px 0px 20px" : "16px 12px 0px 12px",
}}
/>
{searchState?.isOpened && <ConversationSearch />}
{hasMentionsSwitch && (
<Stack
direction="row"
gap="12px"
paddingBottom="16px"
padding={isMobileView ? "16px 20px" : "16px 12px"}
>
<GiveSwitch onChange={toggleMentions} checked={showMentions} />
<GiveText variant="bodyS">@Mentions</GiveText>
</Stack>
)}
{isMessageList && (
<>
<MessagesHeader />
{isNewMessage && !taskID && !riskTriggerID && <SubjectInput />}
</>
)}
</>
);
}
|