src/components/templates/Loyalty/CreditBased/Type2/CreditRewardType2.jsx

import React from "react";
import {Text, View} from "components/elementsThemed";
import Lbc from "@lunchboxinc/lunchbox-components";
import {withTemplate} from "components/hocs";
import {helpers, Copy} from "utils";
import css from "./creditRewardType2.module.scss";

const {Row} = Lbc.Grid;
const {roundFloat} = helpers;

/**
 * Renders available loyalty, a progress bar until the next reward & 'until next reward' number
 *
 * @author Shuai Wang
 * @memberof Templates.Templates/Loyalty
 * @param props - React props
 * @param {object} props.style - injected by withTemplate HOC using theme file
 * @param {object} props.loyaltyData - Loyalty Data fetched from the backend for the user for that restaurant
 */
const CreditRewardType2 = ({style, loyaltyData}) => {
  const {labels, views} = style;

  const {
    availableCredit = 0,
    totalSpent = 0,
    loyaltyDivisor = 1,
    tier,
  } = loyaltyData;
  const currentProgress =
    loyaltyDivisor !== 0
      ? roundFloat(totalSpent % loyaltyDivisor)
      : roundFloat(totalSpent % 1);

  const latestTier =
    tier &&
    tier
      .filter((t) => t.hasAchieved)
      .sort((a, b) => b.threshold - a.threshold)[0];
  const nextTier =
    tier &&
    tier
      .filter((t) => !t.hasAchieved)
      .sort((a, b) => a.threshold - b.threshold)[0];

  return (
    <View type={views.borderedBackground} className={css.loyaltyCredit}>
      <div className={css["loyaltyCredit-summary"]}>
        <Row spacing={10}>
          <Text type={labels.subDescription}>
            {roundFloat(loyaltyDivisor - currentProgress)}
            {Copy.PROFILE_STATIC.LOYALTY_UNTIL_YOUR_NEXT_REWARD}
          </Text>
        </Row>
        <Row spacing={10}>
          <Text type={labels.subtitle}>
            {Copy.PROFILE_STATIC.LOYALTY_AVAILABLE_LOYALTY}
            {availableCredit}
          </Text>
        </Row>
      </div>

      <div className={css["loyaltyCredit-next"]}>
        <Row spacing={10}>
          <Text type={labels.subDescription}>
            {Copy.PROFILE_STATIC.UNTIL_YOUR_NEXT_REWARD}
          </Text>
        </Row>
        <Row spacing={10}>
          <Text type={labels.subtitle}>
            {`${currentProgress} / ${loyaltyDivisor}`}
          </Text>
        </Row>
      </div>

      <div className={css["loyaltyCredit-status"]}>
        <Row spacing={10}>
          <Text type={labels.subDescription}>
            {Copy.PROFILE_STATIC.CURRENT_STATUS}
          </Text>
        </Row>
        <Row spacing={10}>
          <Text type={labels.subtitle}>
            {latestTier ? latestTier?.name : "No Current Status"}
          </Text>
        </Row>

        {nextTier && (
          <Row spacing={10}>
            <Text type={labels.smallDescription}>
              {helpers.stringReplacer(Copy.PROFILE_STATIC.LOYALTY_NEXT_TIER, [
                {
                  replaceTarget: "{threshold}",
                  replaceValue: nextTier?.threshold,
                },
                {replaceTarget: "{name}", replaceValue: nextTier?.name},
              ])}
            </Text>
          </Row>
        )}
      </div>
    </View>
  );
};

export default withTemplate(CreditRewardType2, "loyalty");