Untitled
typescript
a month ago
6.4 kB
1
Indexable
Never
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;