trampa-frontend/src/components/Cards/UserReviewsCard/UserReviewsCard.js

import React, { useMemo } from "react";
import PropTypes from "prop-types";
import {
  ProfileImage,
  ProfileImageContainer,
  ProfileName,
  ReviewContainer,
  ReviewDetails,
  ReviewDetailsText,
  ReviewDetailsValue,
  ReviewQuote,
  ReviewQuoteBox,
  ReviewQuoteText,
  ThumbBox,
  ThumbDown,
  ThumbUp,
} from "./UserReviewsCard.styled";
import { ListItem } from "@mui/material";
import selectedTheme from "../../../themes";
import { useTranslation } from "react-i18next";
import ReviewOffer from "./ReviewOffer/ReviewOffer";

const UserReviewsCard = (props) => {
  const { t } = useTranslation();

  const review = useMemo(() => {
    if (props.givingReview) {
      return {
        ...props.review,
      };
    }
    let isSuccessfulSwap = "DA";
    if (props.review.succeeded === "failed") isSuccessfulSwap = "NE";
    let isGoodCommunication = "DA";
    if (props.review.communication === "could be better")
      isGoodCommunication = "MOŽE BOLJE";
    if (props.review.communication === "no") isGoodCommunication = "NE";
    return {
      name: props.review.companyName,
      image: props.review.image,
      isGoodCommunication,
      isSuccessfulSwap,
      quote: props?.review?.message,
    };
  }, [props.review]);

  return (
    <ReviewContainer key={review?.image}>
      <ListItem alignItems="flex-start" sx={{ alignItems: "center", mt: 2 }}>
        <ProfileImageContainer>
          <ProfileImage alt={review?.name} src={review?.image} />
        </ProfileImageContainer>
        <ProfileName sx={{ color: selectedTheme.primaryPurple }}>
          <b>{review?.name}</b>
        </ProfileName>
      </ListItem>
      <ReviewQuote
        container
        direction="row"
        justifyContent="start"
        alignItems="center"
        spacing={2}
        sx={{ pl: 2, py: 2 }}
      >
        <ThumbBox item>
          {review.isSuccessfulSwap === "DA" ? (
            <ThumbUp color="success" />
          ) : (
            <ThumbDown color="error" />
          )}
        </ThumbBox>
        <ReviewQuoteBox item>
          <ReviewQuoteText>&quot;{review?.quote}&quot;</ReviewQuoteText>
        </ReviewQuoteBox>
      </ReviewQuote>
      <ReviewDetails sx={{ pl: 2, pb: 2 }}>
        <ReviewDetailsText variant="body2" sx={{ display: "block" }}>
          {t("reviews.isCorrectCommunication") + ": "}
          <ReviewDetailsValue>
            {review?.isGoodCommunication?.toUpperCase()}
          </ReviewDetailsValue>
        </ReviewDetailsText>
        <ReviewDetailsText variant="body2" sx={{ display: "block" }}>
          {t("reviews.hasExchangeSucceed") + ": "}
          <ReviewDetailsValue>
            {review?.isSuccessfulSwap?.toUpperCase()}
          </ReviewDetailsValue>
        </ReviewDetailsText>
      </ReviewDetails>
      <ReviewOffer />
    </ReviewContainer>
  );
};

UserReviewsCard.propTypes = {
  children: PropTypes.node,
  heading: PropTypes.string,
  isProfileReviews: PropTypes.bool,
  profileReviews: PropTypes.any,
  className: PropTypes.string,
  review: PropTypes.any,
  givingReview: PropTypes.bool,
};
UserReviewsCard.defaultProps = {
  isProfileReviews: false,
  profileReviews: [],
};

export default UserReviewsCard;