src/components/templates/Loyalty/WalletBased/Rewards/Type1/WalletRewardType1.jsx

import React, {useRef} from "react";
import Lbc from "@lunchboxinc/lunchbox-components";
import {Condition} from "components/elements";
import {Text, View, Button} from "components/elementsThemed";
import {withTemplate} from "components/hocs";
import {Copy, helpers} from "utils";
import RewardCardsSelector from "../../RewardCards";
import css from "./walletRewardType1.module.scss";

const {Condition: If} = Condition;
const {Row, Col} = Lbc.Grid;
const {disableScroll, enableScroll, onWheelHandler} = helpers;

/**
 * Renders Your Rewards section in Your Rewards under Profile
 *
 * @author Htin Linn Aung
 * @memberof Templates.Templates/Loyalty
 * @param {object} props
 * @param {object} prop.style - Theme - Theme value from template provider
 * @param {boolean} props.showRedeem - To decide whether to show redeem indicator
 * @param {Function} props.onClickReward - Callback for when a reward card rendered by this component is clicked
 * @param props.style
 * @param props.onClickRedeem
 * @param {object} props.history - Memory Router history - from Loyalty.jsx
 * @param {object} props.loyaltyData - Loyalty data fetched by parent to this component
 */
const WalletRewardType1 = ({
  style,
  showRedeem,
  onClickReward,
  onClickRedeem,
  loyaltyData,
}) => {
  const {labels, views, buttons, cells} = style;
  const scrollingTabRef = useRef();

  const renderRewardsInWallet = () => {
    if (loyaltyData?.wallet?.length) {
      return loyaltyData.wallet.map((reward) => (
        <RewardCardsSelector
          key={reward.id}
          type={cells.walletCard}
          onClick={onClickReward}
          {...reward}
        />
      ));
    }
    return (
      <View type={views.secondary} className={css.rewardCard}>
        <Row>
          <Text type={labels.empty}>
            {Copy.PROFILE_STATIC.LOYALTY_NO_REWARDS}
          </Text>
        </Row>
      </View>
    );
  };

  return (
    <View type={views.borderedBackground} className={css.loyaltyRewardSection}>
      <Row spacing={10}>
        <Col xs="1-2">
          <Text type={labels.subtitle}>{Copy.PROFILE_STATIC.YOUR_REWARDS}</Text>
        </Col>
        <Col xs="1-2">
          <If is={showRedeem}>
            <Button
              type={buttons.alternate}
              className={css.redeemPromoButton}
              onClick={onClickRedeem}
            >
              redeem a promo
            </Button>
          </If>
        </Col>
      </Row>
      <Row spacing={10}>
        <div
          className={css.horizontalScrollbar}
          onWheel={(e) => onWheelHandler(e, scrollingTabRef)}
          onMouseEnter={disableScroll}
          onMouseLeave={enableScroll}
          ref={scrollingTabRef}
        >
          {renderRewardsInWallet()}
        </div>
      </Row>
    </View>
  );
};

WalletRewardType1.defaultProps = {
  history: {},
  loyaltyData: {
    wallet: [],
  },
  onClickRedeem: null,
  onClickReward: null,
  showRedeem: false,
};
export default withTemplate(WalletRewardType1, "loyalty");