Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 | 24x 24x 24x 24x 24x 24x 24x 9x 9x 9x 9x 9x 9x 9x 9x 9x 24x | import { noop } from 'lodash';
import React, { useCallback, useMemo, FunctionComponent } from 'react';
import { preventDefault } from '../../common/dom';
import { withCurrency, TranslatedString, WithCurrencyProps } from '../../locale';
import { CheckboxInput } from '../../ui/form';
import { Tooltip, TooltipTrigger } from '../../ui/tooltip';
export interface StoreCreditFieldProps {
availableStoreCredit: number;
name: string;
usableStoreCredit: number;
isStoreCreditApplied: boolean;
onChange?(value: boolean): void;
}
const StoreCreditField: FunctionComponent<StoreCreditFieldProps & WithCurrencyProps> = ({
availableStoreCredit,
currency,
name,
onChange = noop,
usableStoreCredit,
isStoreCreditApplied,
}) => {
const handleChange = useCallback(event => onChange(event.target.checked), [onChange]);
const labelContent = useMemo(() => (
<>
<TranslatedString id="redeemable.apply_store_credit_before_action" />
{ ' ' }
<TooltipTrigger
placement="top-start"
tooltip={
<Tooltip testId="payment-store-credit-tooltip">
<TranslatedString
data={ { storeCredit: currency.toCustomerCurrency(availableStoreCredit) } }
id="redeemable.store_credit_available_text"
/>
</Tooltip>
}
>
<a href="#" onClick={ preventDefault() }>
{ currency.toCustomerCurrency(usableStoreCredit) }
</a>
</TooltipTrigger>
{ ' ' }
<TranslatedString id="redeemable.apply_store_credit_after_action" />
</>
), [
availableStoreCredit,
currency,
usableStoreCredit,
]);
return <CheckboxInput
checked={ isStoreCreditApplied }
id={ name }
label={ labelContent }
name={ name }
onChange={ handleChange }
value={ name }
/>;
};
export default withCurrency(StoreCreditField);
|