All files / src/features/GiveConversation/components MessagesHeader.tsx

61.53% Statements 8/13
54.54% Branches 6/11
33.33% Functions 1/3
61.53% Lines 8/13

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                                              19x 19x 19x   19x 19x 19x         19x                     19x                                                    
import { Stack } from "@mui/material";
import { ArrowUpRightIcon, CaretLeftIcon } from "@phosphor-icons/react";
import GiveIconButton from "@shared/IconButton/GiveIconButton";
import GiveTruncateText from "@shared/Text/GiveTruncateText";
import { useAppTheme } from "@theme/v2/Provider";
import { useConversationContext } from "../ConversationProvider";
import { GiveConversationSections } from "../constants";
import GiveLink from "@shared/Link/GiveLink";
import { useCustomThemeV2 } from "@theme/hooks/useCustomThemeV2";
import NiceModal from "@ebay/nice-modal-react";
import { UNDERWRITING_TASK_MODAL } from "modals/modal_names";
import { useEnterprisePermissions } from "@components/AcquirerEnterprises/CreateEnterprise/hooks/useEnterprisePermissions";
import { CONVERSATION_MODAL } from "modals/modal_names";
import { ConversationContextTypes } from "../types";
 
export default function MessagesHeader({
  defaultContext,
}: {
  defaultContext?: Pick<
    ConversationContextTypes,
    "setSectionInView" | "clearThread" | "currentThread" | "merchantData"
  >;
}) {
  const { palette } = useAppTheme();
  const { isMobileView } = useCustomThemeV2();
  const context = useConversationContext();
  const { setSectionInView, clearThread, currentThread, merchantData } =
    defaultContext || context;
  const { merchant_underwriting } = useEnterprisePermissions();
  const goBack = () => {
    setSectionInView(GiveConversationSections.MESSAGE_LIST);
    clearThread();
  };
 
  const handleOpenTask = () => {
    if (currentThread?.taskID) {
      NiceModal.remove(CONVERSATION_MODAL);
      NiceModal.show(UNDERWRITING_TASK_MODAL, {
        openFromConversation: true,
        merchantData: { merchantId: merchantData.id },
        challengeData: { id: currentThread.taskID },
      });
    }
  };
 
  return (
    <Stack
      direction="row"
      alignItems="center"
      padding={isMobileView ? "12px 12px" : "8px 12px"}
      bgcolor={palette.surface?.["secondary-transparent"]}
      gap="8px"
    >
      <GiveIconButton Icon={CaretLeftIcon} onClick={goBack} variant="ghost" />
      <GiveTruncateText lineClamp={1} flex={1} variant="bodyS">
        {currentThread?.name || "New Message"}
      </GiveTruncateText>
      {Boolean(currentThread?.taskID) && merchant_underwriting && (
        <GiveLink
          component="button"
          Icon={ArrowUpRightIcon}
          iconPosition="right"
          color="secondary"
          onClick={handleOpenTask}
        >
          View Task
        </GiveLink>
      )}
    </Stack>
  );
}