src/components/templates/Loyalty/CreditBased/Type1/CreditRewardType1.jsx

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

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

/**
 * Renders available loyalty, a progress bar until the next reward & 'until next reward' number
 *
 * @author Htin Linn Aung
 * @memberof Templates.Templates/Loyalty
 * @param style.style
 * @param style.loyaltyData
 * @param {object} style - injected by withTemplate HOC using theme file
 * @param {object} loyaltyData - prop from Loyalty parent component
 */
const CreditRewardType1 = ({style, loyaltyData}) => {
  const {labels, views} = style;
  const availableCredit = loyaltyData.availableCredit
    ? loyaltyData.availableCredit
    : 0;
  const totalSpent = loyaltyData.totalSpent ? loyaltyData.totalSpent : 0;
  const loyaltyDivisor = loyaltyData.loyaltyDivisor
    ? loyaltyData.loyaltyDivisor
    : 0;
  let currentProgress;
  let progressPercentage;

  if (loyaltyDivisor) {
    currentProgress = roundFloat(totalSpent % loyaltyDivisor);
    progressPercentage = roundFloat((currentProgress * 100) / loyaltyDivisor);
  } else {
    currentProgress = 0;
    progressPercentage = 0;
  }

  return (
    <View
      type={views.borderedBackground}
      className={css["loyalty-progress-section"]}
    >
      <Row spacing={10} className={css["loyalty-subcontainer"]}>
        {images?.art_misc_loyalty && (
          <Image
            src={images?.art_misc_loyalty}
            className={css["art-misc-loyalty"]}
            alt="Loyalty Reward Image"
          />
        )}
        <div className={css["loyalty-text-subcontainer"]}>
          <Row spacing={10}>
            <Text type={labels.subtitle}>
              {Copy.PROFILE_STATIC.LOYALTY_AVAILABLE_LOYALTY}
              {availableCredit}
            </Text>
          </Row>
          <Row spacing={10}>
            <Text type={labels.subDescription}>
              {roundFloat(loyaltyDivisor - currentProgress)}
              {Copy.PROFILE_STATIC.LOYALTY_UNTIL_YOUR_NEXT_REWARD}
            </Text>
          </Row>
        </div>
      </Row>

      <Row spacing={10}>
        <ProgressBar views={views} progressPercentage={progressPercentage} />
      </Row>
      <Row>
        <Text type={labels.smallDescription}>
          {Copy.PROFILE_STATIC.LOYALTY_EARN_ONE_POINT}
        </Text>
      </Row>
      <Row spacing={10}>
        <Text type={labels.smallDescription}>
          {Copy.PROFILE_STATIC.LOYALTY_ONCE_YOU_HIT_100}
        </Text>
      </Row>
    </View>
  );
};

export default withTemplate(CreditRewardType1, "loyalty");