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

import { Card, Checkbox, Divider, Space } 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 } = 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} style={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)}
                style={{ ...titlesStyle, color: "#434E5C" }}
              />
            </div>
          )}
          <div className={styles.summaryRow}>
            <ProText type="secondary" style={titlesStyle}>
              {t("cart.discount")}
            </ProText>
            <ArabicPrice
              price={discountAmount}
              style={{ ...titlesStyle, color: "#434E5C" }}
            />
          </div>
          <div className={styles.summaryRow}>
            <ProText type="secondary" style={titlesStyle}>
              {t("cart.tax")}
            </ProText>
            <ArabicPrice
              price={taxAmount || 0}
              style={{ ...titlesStyle, color: "#434E5C" }}
            />
          </div>
          {splitBillAmount > 0 && (
            <div className={styles.summaryRow}>
              <ProText type="secondary" style={titlesStyle}>
                {t("splitBill.splitBillAmount")}
              </ProText>
              <ArabicPrice
                price={splitBillAmount}
                style={{ ...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",
              }}
            >
              {t("cart.totalAmount")}
            </ProText>
            <ArabicPrice
              price={grandTotal}
              style={{
                fontWeight: 600,
                fontStyle: "SemiBold",
                fontSize: 18,
                lineHeight: "140%",
                letterSpacing: "0%",
                textAlign: "center",
              }}
            />
          </div>
        </Space>

        {isHasLoyaltyGift && restaurant?.is_loyalty_enabled === 1 && (
          <>
            <Checkbox
              checked={useLoyaltyPoints}
              onChange={(value) => {
                dispatch(updateUseLoyaltyPoints(value.target.checked));
              }}
              style={{ marginTop: 8 }}
            >
              {t("cart.useLoyaltyPoints")}
            </Checkbox>
          </>
        )}

        {isHasLoyaltyGift && loyaltyValidation.errorMessage && (
          <div style={{ marginTop: 8, color: "red", fontSize: "12px" }}>
            {t(loyaltyValidation.errorMessage)}
          </div>
        )}

        {isHasLoyaltyGift &&
          useLoyaltyPoints &&
          highestLoyaltyItem &&
          restaurant?.is_loyalty_enabled === 1 && (
            <div style={{ marginTop: 8, color: "green", fontSize: "12px" }}>
              {t("cart.loyaltyDiscountApplied", {
                itemName: highestLoyaltyItem.name,
                amount: Math.round(highestLoyaltyItem.price || 0).toFixed(2),
              })}
            </div>
          )}
      </Card>
    </>
  );
}