Untitled

import { IconButton, TextField } from '@mui/material';
import Chip from 'components/Chips/Chip';
import ChipsList from 'components/Chips/ChipsList';
import Divider from 'components/Divider';
import CheckIcon from 'components/Icons/CheckIcon';
import MinusIcon from 'components/Icons/MinusIcon';
import PlusIcon from 'components/Icons/PlusIcon';
import useWizardContext from 'components/Wizard/useWizardContext';
import { getColor } from 'components/theme';
import {
  setAmountPerGiftcard,
  setGiftcardCount,
} from 'containers/Gifts/duck/GiftsActions';
import selectAmountPerGiftcard from 'containers/Gifts/duck/selectors/selectAmountPerGiftcard';
import selectGiftcardCount from 'containers/Gifts/duck/selectors/selectGiftcardCount';
import selectMaxPurchaseOrder from 'containers/Gifts/duck/selectors/selectMaxPurchaseOrder';
import Caption, { CaptionStyles } from 'designSystem/Typography/Caption';
import H4 from 'designSystem/Typography/H4';
import Small from 'designSystem/Typography/Small';
import XSmall from 'designSystem/Typography/XSmall';
import { useEffect, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { useTranslate } from 'services/languageService';
import styled from 'styled-components';
import useSafeSelector from 'utils/useSafeSelector';

const GLEDE_PRICING_URL = 'https://www.glede.app/priser';
const CHIP_VALUES = [100, 500, 1000, 1500];

const GiftcardsConfig = () => {
  const translate = useTranslate();
  const maxPurchaseOrder = useSafeSelector(selectMaxPurchaseOrder);
  const amountPerGiftcard = useSelector(selectAmountPerGiftcard);
  const giftcardCount = useSelector(selectGiftcardCount);
  const { setCanNavigateForward } = useWizardContext();
  const [error, setError] = useState(false);
  const dispatch = useDispatch();

  const totalAmount = amountPerGiftcard * (giftcardCount || 0);

  useEffect(() => {
    setCanNavigateForward(false);

    return () => {
      setCanNavigateForward(true);
    };
  }, []);

  useEffect(() => {
    if (!amountPerGiftcard || !giftcardCount) {
      return;
    }

    if (totalAmount > maxPurchaseOrder) {
      setError(true);
      setCanNavigateForward(false);
      return;
    }

    setError(false);
    setCanNavigateForward(true);
  }, [giftcardCount, amountPerGiftcard]);

  const handleGiftcardCountFieldChange = (value: string) => {
    if (value === '') {
      setCanNavigateForward(false);
      dispatch(setGiftcardCount(undefined));
      return;
    }

    const parsedValue = parseInt(value);

    if (isNaN(parsedValue) || parsedValue < 1) {
      return;
    }

    dispatch(setGiftcardCount(parsedValue));
  };

  const incrementGiftcardCount = (value: number) => {
    if (!giftcardCount) {
      dispatch(setGiftcardCount(1));
      return;
    }

    if (giftcardCount + value < 1) {
      return;
    }

    dispatch(setGiftcardCount(giftcardCount + value));
  };

  return (
    <Container>
      <XSmall>{translate('Lottery_Wizard_GiftCardAmount')}</XSmall>
      <StyledChipsList>
        {CHIP_VALUES.map((v) =>
          v === amountPerGiftcard ? (
            <Chip
              startIcon={<CheckIcon />}
              key={v}
              value={`${v} NOK`}
              type="basic"
            />
          ) : (
            <Chip
              onClick={() => dispatch(setAmountPerGiftcard(v))}
              key={v}
              value={`${v} NOK`}
              type="basic"
              color="grey"
            />
          ),
        )}
      </StyledChipsList>
      <StyledXSmall>
        {translate('Lottery_Wizard_NumberOfGiftcardsToGiveAway')}
      </StyledXSmall>
      <TextFieldContainer>
        <TextField
          error={error}
          inputProps={{ inputMode: 'numeric', pattern: '[0-9]*' }}
          onChange={(e) => handleGiftcardCountFieldChange(e.target.value)}
          value={giftcardCount}
        />
        <StyledIconButton onClick={() => incrementGiftcardCount(-1)}>
          <MinusIcon color="primary" />
        </StyledIconButton>
        <StyledIconButton onClick={() => incrementGiftcardCount(1)}>
          <PlusIcon color="primary" />
        </StyledIconButton>
      </TextFieldContainer>
      {error && (
        <>
          <StyledError color="error">
            {translate('Lottery_Wizard_MaxOrderValueExceeded')}
          </StyledError>
          <Caption color="error">{`${maxPurchaseOrder} NOK`}</Caption>
        </>
      )}
      <DividerContainer>
        <Divider />
      </DividerContainer>
      <Small>{translate('Lottery_Wizard_YouWillSpendForThisPromotion')}</Small>
      <StyledH4 color={error ? 'error' : 'black'} bold>{`${
        totalAmount || 0
      } NOK`}</StyledH4>
      <StyledCaption>
        {translate('Lottery_Wizard_TaxIncluded', { tax: '3' })}
      </StyledCaption>
      <PricingInfoContainer>
        <Link href={GLEDE_PRICING_URL} target="_blank">
          {translate('Lottery_Wizard_GledePricing')}
        </Link>
        <StyledCaption color="grey600">
          {translate('Lottery_Wizard_ForMoreInfo')}
        </StyledCaption>
      </PricingInfoContainer>
    </Container>
  );
};

const StyledError = styled(Caption)`
  margin-top: 16px;
  text-align: center;
`;

const StyledCaption = styled(Caption)`
  text-align: center;
`;

const DividerContainer = styled.div`
  display: flex;
  justify-content: center;
  padding: 32px 24px;
  width: 100%;
  max-width: 800px;
`;

const Link = styled.a`
  ${CaptionStyles}
  color: ${getColor('grey600')};
`;

const PricingInfoContainer = styled.div`
  display: flex;
  gap: 4px;
`;

const StyledH4 = styled(H4)`
  margin: 8px 0 16px;
`;

const StyledChipsList = styled(ChipsList)`
  margin: 16px 0 32px;
  justify-content: center;
`;

const StyledIconButton = styled(IconButton)`
  border-radius: 50px;

  && {
    border: 1px solid ${getColor('grey400')};
  }
`;

const TextFieldContainer = styled.div`
  display: flex;
  align-items: center;
  gap: 16px;

  margin-top: 16px;
`;

const StyledXSmall = styled(XSmall)`
  margin-top: 16px;
`;

const Container = styled.div`
  display: flex;
  flex-direction: column;
  align-items: center;

  width: 100%;
`;

export default GiftcardsConfig;