packages/components/containers/payments/PaymentGiftCode.tsx

   1 import type { RefObject } from 'react';
   2 import { useEffect, useState } from 'react';
   3
   4 import { c } from 'ttag';
   5
   6 import { Button, Input } from '@proton/atoms';
   7 import UnderlineButton from '@proton/components/components/button/UnderlineButton';
   8 import Icon from '@proton/components/components/icon/Icon';
   9 import Info from '@proton/components/components/link/Info';
  10 import useToggle from '@proton/components/hooks/useToggle';
  11
  12 interface Props {
  13     loading?: boolean;
  14     giftCode?: string;
  15     onApply: (value: string) => void;
  16     giftCodeRef: RefObject<HTMLInputElement>;
  17 }
  18
  19 const getFormattedGiftCode = (giftCode: string) => {
  20     const splittedGiftCode = giftCode.replace(/-/g, '').match(/.{1,4}/g) || [''];
  21     return splittedGiftCode.join('-').toUpperCase();
  22 };
  23
  24 const PaymentGiftCode = ({ giftCodeRef, giftCode = '', onApply, loading }: Props) => {
  25     const { state, toggle, set } = useToggle();
  26     const [code, setCode] = useState('');
  27
  28     const handleCancel = () => {
  29         set(false);
  30         setCode('');
  31     };
  32
  33     useEffect(() => {
  34         // When we remove the gift code
  35         if (!giftCode) {
  36             handleCancel();
  37         }
  38     }, [giftCode]);
  39
  40     if (giftCode) {
  41         return (
  42             <div className="flex items-center">
  43                 <span className="flex-1 flex-nowrap items-center">
  44                     <Icon name="gift" className="mr-2 mb-1 shrink-0" />
  45                     <code>{getFormattedGiftCode(giftCode)}</code>
  46                 </span>
  47                 <Button
  48                     icon
  49                     shape="ghost"
  50                     className="flex items-center ml-1"
  51                     onClick={() => onApply('')}
  52                     title={c('Action').t`Remove gift code`}
  53                 >
  54                     <Icon name="trash" alt={c('Action').t`Remove gift code`} />
  55                 </Button>
  56             </div>
  57         );
  58     }
  59
  60     if (state) {
  61         const handleSubmit = () => {
  62             if (!code) {
  63                 return;
  64             }
  65             onApply(code);
  66         };
  67
  68         return (
  69             <div className="flex flex-nowrap items-center items-start mb-2">
  70                 <div className="pr-2 flex-1">
  71                     <Input
  72                         value={code}
  73                         ref={giftCodeRef}
  74                         placeholder={c('Placeholder').t`Gift code`}
  75                         autoFocus
  76                         onValue={setCode}
  77                         data-testid="gift-code-input"
  78                         onKeyDown={(event) => {
  79                             if (event.key === 'Enter') {
  80                                 event.preventDefault();
  81                                 handleSubmit();
  82                             }
  83                         }}
  84                     />
  85                 </div>
  86                 <Button
  87                     color="norm"
  88                     title={c('Title').t`Apply gift code`}
  89                     loading={loading}
  90                     disabled={!code}
  91                     onClick={handleSubmit}
  92                     data-testid="apply-gift-code"
  93                 >{c('Action').t`Apply`}</Button>
  94             </div>
  95         );
  96     }
  97
  98     return (
  99         <>
 100             <UnderlineButton className="mr-2" onClick={toggle} data-testid="add-gift-code">{c('Link')
 101                 .t`Add a gift code`}</UnderlineButton>
 102             <Info
 103                 title={c('Tooltip')
 104                     .t`If you purchased a gift code or received one from our support team, you can enter it here.`}
 105             />
 106         </>
 107     );
 108 };
 109
 110 export default PaymentGiftCode;