Untitled

import { useTranslation } from "react-i18next";
import { FaCircle, FaDotCircle } from "react-icons/fa";

import { Space, Typography } from "antd";

import { DATE_TIME_FORMAT, formatPrice } from "@amaze-fe/helpers";
import i18n from "@app/seller/lib/i18n/config";
import dayjs from "dayjs";
import styled from "styled-components";

import { ReturnPartitionData, ReturnPromotionType } from "../../type";

interface PopoverContentPromotionsProps {
  data: {
    ongoing: ReturnPartitionData[];
    upcoming: ReturnPartitionData[];
  };
  isShowOriginalPrice: boolean;
  originalPrice: number;
}

// @ts-ignore
const StyleTypography = styled(Typography.Text)`
  font-size: 12px;
  margin: 0;
`;

const recordPromotionName: Record<ReturnPromotionType, string> = {
  addon: "Add-on deal",
  discount: i18n.t(
    "product:list.tableView.popoverContents.recordPromotionName.discount",
    {
      defaultValue: "Discount Promotions"
    }
  ),
  flashSale: "Flash sale",
  bundle: "Bundle deal"
};

const PopoverContentPromotions = ({
  data,
  isShowOriginalPrice,
  originalPrice = 0
}: PopoverContentPromotionsProps) => {
  const { t } = useTranslation();
  const { ongoing, upcoming } = data;
  const isOngoingWithDOF = ongoing?.some((item) =>
    ["discount", "flashSale"].includes(item.type)
  );
  return (
    <Space
      direction="vertical"
      style={{
        width: "350px",
        padding: "10px",
        maxHeight: "250px",
        overflow: "auto"
      }}
    >
      {isShowOriginalPrice && (
        <Space
          direction="horizontal"
          style={{ justifyContent: "space-between", width: "100%" }}
        >
          <StyleTypography>
            {t("product:list.tableView.popoverContents.price.label.original", {
              defaultValue: "Original Price"
            })}
          </StyleTypography>
          <StyleTypography
            style={{
              color: "rgba(17, 17, 17, 0.45)",
              ...(isOngoingWithDOF && { textDecoration: "line-through" })
            }}
          >
            {formatPrice(originalPrice)}
          </StyleTypography>
        </Space>
      )}
      {ongoing.length > 0 && (
        <Space direction="vertical" style={{ width: "100%" }}>
          <Space direction="horizontal">
            <StyleTypography>
              {t("product:list.tableView.popoverContents.price.label.ongoing", {
                defaultValue: "Ongoing Campaigns"
              })}
            </StyleTypography>
            <FaCircle style={{ color: "red", fontSize: "12px" }} />
          </Space>
          {ongoing.map((item) => {
            return (
              <Space direction="vertical" style={{ width: "100%" }}>
                <Space
                  direction="horizontal"
                  style={{ justifyContent: "space-between", width: "100%" }}
                >
                  <StyleTypography>
                    {t(
                      "product:list.tableView.popoverContents.price.label.campaignName",
                      {
                        defaultValue: "Campaign Name"
                      }
                    )}
                  </StyleTypography>
                  <StyleTypography style={{ fontWeight: "500" }}>
                    {`${recordPromotionName[item.type]} (${item.name})`}
                  </StyleTypography>
                </Space>
                {["flashSale", "discount"].includes(item.type) && (
                  <Space
                    direction="horizontal"
                    style={{ justifyContent: "space-between", width: "100%" }}
                  >
                    <StyleTypography>
                      {t(
                        "product:list.tableView.popoverContents.price.label.promotion",
                        {
                          defaultValue: "Promotion Price"
                        }
                      )}
                    </StyleTypography>
                    <StyleTypography style={{ fontWeight: "600" }}>
                      {formatPrice(item?.price || 0)}
                    </StyleTypography>
                  </Space>
                )}
                <Space
                  direction="horizontal"
                  style={{ justifyContent: "space-between", width: "100%" }}
                >
                  <StyleTypography>
                    {t(
                      "product:list.tableView.popoverContents.price.label.duration",
                      {
                        defaultValue: "Duration"
                      }
                    )}
                  </StyleTypography>
                  <StyleTypography
                    style={{
                      fontSize: "12px",
                      color: "rgba(17, 17, 17, 0.45)"
                    }}
                  >
                    {`${dayjs(item.start_time).format(
                      DATE_TIME_FORMAT
                    )} - ${dayjs(item.end_time).format(DATE_TIME_FORMAT)}`}
                  </StyleTypography>
                </Space>
              </Space>
            );
          })}
        </Space>
      )}
      {upcoming.length > 0 && (
        <Space direction="vertical" style={{ width: "100%" }}>
          <Space direction="horizontal">
            <StyleTypography>
              {t(
                "product:list.tableView.popoverContents.price.label.upcoming",
                {
                  defaultValue: "Upcoming Campaigns"
                }
              )}
            </StyleTypography>
            <FaDotCircle style={{ color: "red", fontSize: "12px" }} />
          </Space>
          {upcoming.map((item) => (
            <Space direction="vertical" style={{ width: "100%" }}>
              <Space
                direction="horizontal"
                style={{ justifyContent: "space-between", width: "100%" }}
              >
                <StyleTypography>
                  {t(
                    "product:list.tableView.popoverContents.price.label.upcoming.campaignName",
                    {
                      defaultValue: "Campaign Name"
                    }
                  )}
                </StyleTypography>
                <StyleTypography style={{ fontWeight: "500" }}>
                  {`${recordPromotionName[item.type]} (${item.name})`}
                </StyleTypography>
              </Space>
              {["flashSale", "discount"].includes(item.type) && (
                <Space
                  direction="horizontal"
                  style={{ justifyContent: "space-between", width: "100%" }}
                >
                  <StyleTypography>
                    {t(
                      "product:list.tableView.popoverContents.price.label.promotion.upcoming",
                      {
                        defaultValue: "Promotion Price"
                      }
                    )}
                  </StyleTypography>
                  <StyleTypography style={{ fontWeight: "600" }}>
                    {formatPrice(item?.price || 0)}
                  </StyleTypography>
                </Space>
              )}
              <Space
                direction="horizontal"
                style={{ justifyContent: "space-between", width: "100%" }}
              >
                <StyleTypography>
                  {t(
                    "product:list.tableView.popoverContents.price.label.upcoming.duration",
                    {
                      defaultValue: "Duration"
                    }
                  )}
                </StyleTypography>
                <StyleTypography
                  style={{ fontSize: "12px", color: "rgba(17, 17, 17, 0.45)" }}
                >
                  {`${dayjs(item.start_time).format(
                    DATE_TIME_FORMAT
                  )} - ${dayjs(item.end_time).format(DATE_TIME_FORMAT)}`}
                </StyleTypography>
              </Space>
            </Space>
          ))}
        </Space>
      )}
    </Space>
  );
};

export default PopoverContentPromotions;