web-menu-react-version/src/components/OrderSummary/OrderSummary.tsx

import { Card, Checkbox, Divider, Space, Tag } from "antd";
import ArabicPrice from "components/ArabicPrice";
import {
  selectCart,
  selectCartTotal,
  selectDiscountTotal,
  selectGrandTotal,
  selectHighestPricedLoyaltyItem,
  selectLoyaltyValidation,
  selectTaxAmount,
  updateUseLoyaltyPoints,
} from "features/order/orderSlice";
import { OrderType } from "pages/checkout/hooks/types";
import { useTranslation } from "react-i18next";
import { useParams } from "react-router-dom";
import { useGetRestaurantDetailsQuery } from "redux/api/others";
import { useAppDispatch, useAppSelector } from "redux/hooks";
import ProText from "../ProText";
import ProTitle from "../ProTitle";
import styles from "./OrderSummary.module.css";
import { CSSProperties } from "react";

export default function OrderSummary() {
  const { t } = useTranslation();
  const { useLoyaltyPoints, splitBillAmount } = useAppSelector(selectCart);
  const { subdomain } = useParams();
  const { data: restaurant } = useGetRestaurantDetailsQuery(subdomain);
  const { orderType, tip } = useAppSelector(selectCart);
  const dispatch = useAppDispatch();
  const subtotal = useAppSelector(selectCartTotal);
  const loyaltyValidation = useAppSelector(selectLoyaltyValidation);
  const highestLoyaltyItem = useAppSelector(selectHighestPricedLoyaltyItem);
  const taxAmount = useAppSelector(selectTaxAmount);
  const grandTotal = useAppSelector(selectGrandTotal);
  const discountAmount = useAppSelector(selectDiscountTotal);

  const isHasLoyaltyGift =
    (restaurant?.loyalty_stamps ?? 0) -
      (restaurant?.customer_loyalty_points ?? 0) <=
    0;

  const titlesStyle: CSSProperties = {
    fontWeight: 400,
    fontStyle: "Regular",
    fontSize: 16,
    lineHeight: "140%",
    letterSpacing: "0%",
    textAlign: "center",
  };

  return (
    <>
      <Card className={`${styles.orderSummary}`}>
        <ProTitle
          style={{
            fontWeight: 500,
            fontStyle: "Medium",
            fontSize: 18,
            lineHeight: "140%",
            letterSpacing: "0%",
            color: "#333333",
          }}
        >
          {t("cart.orderSummary")}
        </ProTitle>
        <Divider style={{ margin: "15px 0 15px 0" }} />
        <Space orientation="vertical" style={{ width: "100%", gap: 16 }}>
          <div className={styles.summaryRow}>
            <ProText type="secondary" style={titlesStyle}>
              {t("cart.basketTotal")}
            </ProText>
            <ArabicPrice price={subtotal} textStyle={titlesStyle} />
          </div>
          {orderType === OrderType.Delivery && (
            <div className={styles.summaryRow}>
              <ProText type="secondary" style={titlesStyle}>
                {t("cart.deliveryFee")}
              </ProText>
              <ArabicPrice
                price={Number(restaurant?.delivery_fees || 0)}
                textStyle={{ ...titlesStyle, color: "#434E5C" }}
              />
            </div>
          )}
          {orderType !== OrderType.Redeem && (
            <div className={styles.summaryRow}>
              <ProText type="secondary" style={titlesStyle}>
                {t("cart.discount")}
              </ProText>
              <div
                style={{
                  display: "flex",
                  alignItems: "center",
                  minHeight: "24px",
                }}
              >
                {isHasLoyaltyGift &&
                useLoyaltyPoints &&
                highestLoyaltyItem &&
                restaurant?.is_loyalty_enabled === 1 ? (
                  <Tag
                    color="green"
                    style={{
                      backgroundColor: "#EDFEF5",
                      borderRadius: "4px",
                      padding: "3px 10px",
                      fontWeight: 500,
                      fontStyle: "Medium",
                      fontSize: 12,
                      lineHeight: "140%",
                      letterSpacing: "0%",
                      placeItems: "center",
                      margin: "0 10px",
                      position: "relative",
                      top: -1,
                    }}
                  >
                    {t("cart.loyalty")}
                  </Tag>
                ) : null}
                <ArabicPrice
                  price={discountAmount}
                  textStyle={{ ...titlesStyle, color: "#434E5C" }}
                />
              </div>
            </div>
          )}
          {orderType !== OrderType.Redeem && (
            <div className={styles.summaryRow}>
              <ProText type="secondary" style={titlesStyle}>
                {t("cart.tip")}
              </ProText>
              <ArabicPrice
                price={tip || 0}
                textStyle={{ ...titlesStyle, color: "#434E5C" }}
              />
            </div>
          )}
          {orderType === OrderType.Redeem && (
            <div className={styles.summaryRow}>
              <ProText type="secondary" style={titlesStyle}>
                {t("cart.giftedItems")}
              </ProText>
              <ArabicPrice
                price={0}
                textStyle={{ ...titlesStyle, color: "#434E5C" }}
              />
            </div>
          )}
          {orderType === OrderType.Redeem && (
            <div className={styles.summaryRow}>
              <ProText type="secondary" style={titlesStyle}>
                {t("cart.voucherApplied")}
              </ProText>
              <ArabicPrice
                price={0}
                textStyle={{ ...titlesStyle, color: "#32AD6D" }}
              />
            </div>
          )}
          {orderType !== OrderType.Redeem && (
            <div className={styles.summaryRow}>
              <ProText type="secondary" style={titlesStyle}>
                {t("cart.tax")}
              </ProText>
              <ArabicPrice
                price={taxAmount || 0}
                textStyle={{ ...titlesStyle, color: "#434E5C" }}
              />
            </div>
          )}
          {orderType !== OrderType.Redeem && splitBillAmount > 0 && (
            <div className={styles.summaryRow}>
              <ProText type="secondary" style={titlesStyle}>
                {t("splitBill.splitBillAmount")}
              </ProText>
              <ArabicPrice
                price={splitBillAmount}
                textStyle={{ ...titlesStyle, color: "#434E5C" }}
              />
            </div>
          )}
          <Divider className={styles.summaryDivider} />
          <div className={`${styles.summaryRow} ${styles.totalRow}`}>
            <ProText
              style={{
                fontWeight: 600,
                fontStyle: "SemiBold",
                fontSize: 18,
                lineHeight: "140%",
                letterSpacing: "0%",
                textAlign: "center",
                color: "#333333",
              }}
            >
              {orderType === OrderType.Redeem
                ? t("cart.remainingToPay")
                : t("cart.totalAmount")}
            </ProText>
            <ArabicPrice
              price={grandTotal}
              textStyle={{
                fontWeight: 600,
                fontStyle: "SemiBold",
                fontSize: 18,
                lineHeight: "140%",
                letterSpacing: "0%",
                textAlign: "center",
              }}
            />
          </div>
        </Space>
      </Card>
    </>
  );
}