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 | 21x 1x 1x 1x 1x 1x 1x 1x 21x 21x 26x 1x | import { StyledIconButton } from "@common/IconButton";
import { Badge, BadgeProps, Box, styled } from "@mui/material";
import { ConversationsIcon } from "@assets/icons";
import { useCustomTheme } from "@theme/hooks/useCustomTheme";
import { animated, useTransition } from "react-spring";
import { HiddenComponent } from "@containers/HiddenComponent";
import { palette } from "@palette";
import { useRef } from "react";
type Props = {
isLoading: boolean;
handleOpenConversationsModal: (open?: boolean | undefined) => void;
isOpen?: boolean;
isOpenChangeLog?: boolean;
totalUnread: number;
isReplyFromMerchant?: boolean;
};
const ConversationsButton = ({
isLoading,
handleOpenConversationsModal,
isOpen = false,
isOpenChangeLog = false,
isReplyFromMerchant = false,
...rest
}: Props) => {
const { isMobileView } = useCustomTheme();
const hasAnimated = useRef(false);
const transitions = useTransition(
Boolean(isOpen && !isMobileView && hasAnimated.current),
{
from: { transform: "translateY(100px)", opacity: 0 },
enter: { transform: "translateY(0px)", opacity: 1 },
leave: { transform: "translateY(100px)", opacity: 0 },
config: { duration: 300, easing: (t: any) => t * (2 - t) },
},
);
const isOpenState = isOpen || isOpenChangeLog;
const AnimatedButton = animated(StyledIconButton);
return transitions((style, isModalVisible) => (
<HiddenComponent hidden={isMobileView && isModalVisible}>
<AnimatedButton
style={style}
id="conversationButton"
onClick={() =>
handleOpenConversationsModal(!isMobileView ? true : !isOpen)
}
disabled={isLoading}
sx={{
borderRadius: "50%",
position: isMobileView
? isOpenState
? "relative"
: "fixed"
: "absolute",
bottom: isMobileView ? (isOpenState ? "initial" : "30px") : "25px",
left: isMobileView ? (isOpenState ? "0px" : "initial") : "-70px",
right: isMobileView ? "20px" : "70px",
...(isMobileView && { top: isOpenState ? "0px" : "initial" }),
boxShadow: isMobileView
? "0px 2.625px 13.125px 0px rgba(2, 2, 2, 0.15)"
: "initial",
}}
data-testid="conversation-button"
>
<StyledContainer>
<CustomBadge
color="primary"
badgeContent={rest.totalUnread || undefined}
isReplyFromMerchant={isReplyFromMerchant}
data-testid="unread-conversation-badge"
>
<ConversationsIcon />
</CustomBadge>
</StyledContainer>
</AnimatedButton>
</HiddenComponent>
));
};
export default ConversationsButton;
const StyledContainer = styled(Box)({
borderRadius: "50%",
padding: "11px",
backgroundColor: palette.neutral.white,
});
interface CustomBadgeProps extends BadgeProps {
isReplyFromMerchant: boolean;
}
const CustomBadge = styled(Badge, {
shouldForwardProp: (prop) => prop !== "isReplyFromMerchant",
})<CustomBadgeProps>(({ isReplyFromMerchant }) => ({
"& .MuiBadge-badge": {
right: "-3px",
top: "-3px",
...(isReplyFromMerchant && {
color: "#FFFFFF",
backgroundColor: "#FF8124",
}),
},
}));
|