All files / src/features/Merchants/MerchantSidePanel/WithRepository/Challenges ChallengeHeader.tsx

100% Statements 6/6
0% Branches 0/2
100% Functions 2/2
100% Lines 6/6

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                                      5x 5x                                     5x         5x 5x                                                       5x        
import SidePanelHeaderVariant, {
  SidePanelHeaderVariantProps,
} from "@shared/SidePanel/components/SidePanelHeader/SidePanelHeaderVariant";
import GiveText from "@shared/Text/GiveText";
import { useCustomThemeV2 } from "@theme/hooks/useCustomThemeV2";
import { useMerchantSidePanelContext } from "../../Provider/MerchantSidePanelProvider";
import { Stack } from "@mui/material";
import GiveIconButton from "@shared/IconButton/GiveIconButton";
import { useAppTheme } from "@theme/v2/Provider";
import { ArrowLeftIcon } from "@phosphor-icons/react";
import { MERCHANT_FILE_TEXT } from "@constants/stringConstants";
 
export function ChallengeTitle({
  name,
  handleBack,
}: {
  name: string;
  handleBack: () => void;
}) {
  const theme = useAppTheme();
  return (
    <Stack direction="row" alignItems="center" gap={1}>
      <GiveIconButton
        Icon={ArrowLeftIcon}
        onClick={handleBack}
        data-testid="challenge-back-button"
        sx={{
          backgroundColor: theme.palette.surface?.secondary,
          "&:hover": {
            backgroundColor: theme.palette.primitive?.transparent["darken-5"],
          },
        }}
      />
      <GiveText fontSize="bodyM">{name}</GiveText>
    </Stack>
  );
}
 
export function ChallengeActions({ onClose }: { onClose: () => void }) {
  const { isMobileView } = useCustomThemeV2();
  const {
    handlers,
    isLast = true,
    isFirst = true,
  } = useMerchantSidePanelContext();
  const VariantProps: SidePanelHeaderVariantProps = {
    actions: [
      {
        text: "Agreement",
        hidden: !isMobileView,
        onClick: handlers.handleOpenAgreementSnapshot,
      },
      {
        text: MERCHANT_FILE_TEXT,
        hidden: !isMobileView,
        onClick: handlers.handleOpenMerchantFile,
      },
    ],
    nextPrevState: { isLast, isFirst },
    isControlModeAllowed: false,
    handlers: {
      displayRowHandlers: false,
      handleClose: onClose,
      ...handlers,
    } as any,
    hasUnreadMessages: false,
    hasAlert: false,
    isRiskMonitorAllowed: false,
    withMerchantFile: true,
    withRisk: false,
    withAgreement: true,
    isLoading: false,
  };
  return (
    <SidePanelHeaderVariant variant="challenge" HeaderProps={VariantProps} />
  );
}