import React from 'react';
import PropTypes from 'prop-types';
import { Input } from 'react-components';
import { isValid } from 'proton-shared/lib/helpers/giftCode';
import { c } from 'ttag';

const GiftCodeInput = ({ value, ...rest }) => {
    const error = isValid(value) ? undefined : c('Error').t`Invalid gift code`;
    return <Input placeholder="AAAA-BBBB-CCCC-DDDD" error={error} {...rest} />;
};

GiftCodeInput.propTypes = {
    value: PropTypes.string
};

export default GiftCodeInput;

@@ -185,16 +185,80 @@
  'ttag';
+%0Aimport %7B GIFT_CODE_LENGTH %7D from 'proton-shared/lib/constants';
 %0A%0Aconst 
@@ -394,14 +394,118 @@
 urn 
-%3CInput
+(%0A        %3CInput%0A            maxlength=%7BGIFT_CODE_LENGTH%7D%0A            minlength=%7BGIFT_CODE_LENGTH%7D%0A           
  pla
@@ -534,16 +534,28 @@
 CC-DDDD%22
+%0A           
  error=%7B
@@ -564,21 +564,47 @@
 ror%7D
- %7B...rest%7D /%3E
+%0A            %7B...rest%7D%0A        /%3E%0A    )
 ;%0A%7D;

Fix https://github.com/ProtonMail/protonvpn-settings/issues/33