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

import { Card, Col, Image, Row } from "antd";
import PresentIcon from "components/Icons/cart/PresentIcon";
import { useTranslation } from "react-i18next";
import { Link, useParams } from "react-router-dom";
import { useGetRestaurantDetailsQuery } from "redux/api/others";
import { ACCESS_TOKEN } from "utils/constants";
import { colors } from "ThemeConstants.ts";
import ProText from "../ProText";
import styles from "./LoyaltyCard.module.css";
import { useAppSelector } from "redux/hooks";

const LoyaltyCard = () => {
  const { t } = useTranslation();
  const { subdomain } = useParams();
  const { data: restaurant } = useGetRestaurantDetailsQuery(subdomain);
  const { isRTL } = useAppSelector((state) => state.locale);
  const token = localStorage.getItem(ACCESS_TOKEN);
  const loyaltyStamps = restaurant?.loyalty_stamps ?? 0;
  const customerLoyaltyPoints = restaurant?.customer_loyalty_points ?? 0;
  const remainingToNextReward =
    loyaltyStamps - (customerLoyaltyPoints % loyaltyStamps);

  return (
    <div className={styles.loyaltyContainer}>
      <Card className={styles.loyaltyCard}>
        <Row
          justify="space-between"
          align="middle"
          style={{ marginBottom: "0.5rem" }}
        >
          <Col>
            <Row align="middle" gutter={[8, 8]}>
              {/* <Col>
                <LoyaltyIcon className={styles.loyaltyIcon} />
              </Col> */}
              <Col>
                <ProText
                  style={{
                    fontWeight: 600,
                    fontStyle: "SemiBold",
                    fontSize: "16px",
                    lineHeight: "140%",
                    letterSpacing: "0%",
                    color: "#333333",
                  }}
                >
                  {t("menu.loyaltyPoints")}
                </ProText>
              </Col>
            </Row>
            <ProText
              type="secondary"
              strong
              style={{
                fontWeight: 400,
                fontStyle: "Regular",
                fontSize: "12px",
                lineHeight: "140%",
                letterSpacing: "0%",
                top: -2,
                color: "#777580",
              }}
            >
              {token &&
                customerLoyaltyPoints < loyaltyStamps &&
                t("menu.loyaltyDescription", {
                  value: loyaltyStamps,
                })}
              {token &&
                customerLoyaltyPoints >= loyaltyStamps &&
                t("menu.youHaveXEarnedRewardsReadyToRedeem", {
                  rewards: Math.floor(customerLoyaltyPoints / loyaltyStamps),
                })}
              {!token && (
                <div style={{ paddingTop: 4 }}>
                  <Link
                    to={`/${subdomain}/login`}
                    style={{
                      color: colors.primary,
                      textDecoration: "underline",
                      fontSize: "14px",
                      fontWeight: 400,
                      padding: isRTL ? "0 0 0 4px" : "0 4px 0 0",
                    }}
                  >
                    {t("menu.joinUs")}
                  </Link>
                  <span
                    style={{
                      fontWeight: 400,
                      fontStyle: "Regular",
                      fontSize: "12px",
                      lineHeight: "140%",
                      letterSpacing: "0%",
                      color: "#777580",
                    }}
                  >
                    {t("menu.joinUsDescription")}
                  </span>
                </div>
              )}
            </ProText>
          </Col>
          {/* <Col> {isHasLoyaltyGift && <PresentIcon />}</Col> */}
        </Row>
        {token && (
          <>
            <div
              style={{
                display: "flex",
                flexDirection: "row",
                gap: 12,
                overflow: "auto",
                scrollbarWidth: "none",
                paddingBottom: 12,
              }}
            >
              {Array.from({ length: loyaltyStamps }).map((_, index) => {
                const currentPoints = customerLoyaltyPoints % loyaltyStamps;
                const isCollected = index < currentPoints;
                return (
                  <Col key={index}>
                    <Image
                      key={index}
                      className={styles.presentIconItem}
                      preview={false}
                      width={40}
                      height={40}
                      src={restaurant?.loyalty_stamp_image}
                      style={{
                        opacity: isCollected ? 1 : 0.4,
                      }}
                    />
                  </Col>
                );
              })}
            </div>
            <ProText
              strong
              style={{
                fontWeight: 400,
                fontStyle: "Regular",
                fontSize: "12px",
                lineHeight: "140%",
                letterSpacing: "0%",
                color:
                  customerLoyaltyPoints < loyaltyStamps ? "#777580" : "#32AD6D",
              }}
            >
              {customerLoyaltyPoints < loyaltyStamps &&
                t("menu.justXMorePurchasesToUnlockYourFREEItem", {
                  cups: remainingToNextReward,
                })}
              {customerLoyaltyPoints >= loyaltyStamps &&
                t("menu.youreJustXCupsAwayFromYourNextReward", {
                  cups: remainingToNextReward,
                })}
            </ProText>
          </>
        )}
      </Card>
    </div>
  );
};

export default LoyaltyCard;