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

92.85% Statements 13/14
62.5% Branches 10/16
100% Functions 3/3
92.85% Lines 13/14

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                                3x 21x 21x 21x 21x   21x 21x   21x 21x       21x 7x         21x                                               1x              
import { Stack } from "@mui/material";
import { PlusIcon } from "@phosphor-icons/react";
import GiveButton from "@shared/Button/GiveButton";
import { useCustomThemeV2 } from "@theme/hooks/useCustomThemeV2";
import { useAppTheme } from "@theme/v2/Provider";
import { useConversationContext } from "../ConversationProvider";
import GiveTooltip from "@shared/Tooltip/GiveTooltip";
import {
  GiveConversationSections,
  MERCHANT_IN_ONBOARDING_TOOLTIP_TEXT,
  NO_PRIMARY_ACCOUNT_HOLDER_TOOLTIP_TEXT,
  NO_PRIMARY_ACCOUNT_HOLDER_TOOLTIP_TEXT_PROVIDER,
  PROVIDER_IN_ONBOARDING_TOOLTIP_TEXT,
} from "../constants";
import { checkPortals } from "@utils/routing";
 
export const NewMessageFooter = () => {
  const { palette } = useAppTheme();
  const { isMobileView } = useCustomThemeV2();
  const { merchantData, setSectionInView } = useConversationContext();
  const { isAcquirerEnterprises } = checkPortals();
 
  const hasPahJoined = merchantData?.pahInvitationStatus === "joined";
  const isMerchantInOnboarding = merchantData?.isOnboarding;
 
  const getTooltipText = () => {
    Iif (isMerchantInOnboarding && hasPahJoined)
      return isAcquirerEnterprises
        ? PROVIDER_IN_ONBOARDING_TOOLTIP_TEXT
        : MERCHANT_IN_ONBOARDING_TOOLTIP_TEXT;
    if (!hasPahJoined)
      return isAcquirerEnterprises
        ? NO_PRIMARY_ACCOUNT_HOLDER_TOOLTIP_TEXT_PROVIDER
        : NO_PRIMARY_ACCOUNT_HOLDER_TOOLTIP_TEXT;
  };
 
  return (
    <Stack
      direction="row"
      justifyContent="center"
      width="100%"
      data-testid="give-conversation-new-message-button-wrapper"
      sx={{ ...(isMobileView && { padding: "0px 20px" }) }}
    >
      <GiveTooltip
        title={getTooltipText()}
        disableHoverListener={hasPahJoined && !isMerchantInOnboarding}
      >
        <GiveButton
          data-testid="give-conversation-new-message-button"
          fullWidth={isMobileView}
          variant="filled"
          size="large"
          label="New Message"
          endIcon={<PlusIcon color={palette?.primitive?.neutral?.[0]} />}
          sx={{
            marginBottom: "20px",
          }}
          disabled={!hasPahJoined || isMerchantInOnboarding}
          onClick={() => {
            setSectionInView(GiveConversationSections.MESSAGE_NEW);
          }}
        />
      </GiveTooltip>
    </Stack>
  );
};