All files / app/giftCertificate AppliedGiftCertificate.tsx

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
 
26x
 
26x
26x
 
 
 
 
 
26x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
26x
 
import { GiftCertificate } from '@bigcommerce/checkout-sdk';
import React, { memo, FunctionComponent } from 'react';
 
import { ShopperCurrency } from '../currency';
import { TranslatedString } from '../locale';
 
export interface AppliedGiftCertificateProps {
    giftCertificate: GiftCertificate;
}
 
const AppliedGiftCertificate: FunctionComponent<AppliedGiftCertificateProps> = ({ giftCertificate }) => (
    <div
        className="redeemable-column redeemable-info"
        data-test="redeemable-item--giftCertificate"
    >
        <span className="redeemable-info-header">
            <span className="redeemable-info-header--highlight" data-test="giftCertificate-amount">
                <ShopperCurrency amount={ giftCertificate.used } />
            </span>
 
            { ' ' }
 
            <TranslatedString id="redeemable.gift_certificate_text" />
        </span>
 
        <span className="redeemable-info-subHeader">
            { giftCertificate.remaining > 0 && <span className="redeemable-info-subHeader--remaining">
                <TranslatedString id="redeemable.gift_certificate_remaining_text" />
 
                { ' ' }
 
                <span data-test="giftCertificate-remaining">
                    <ShopperCurrency amount={ giftCertificate.remaining } />
                </span>
            </span> }
 
            <span data-test="giftCertificate-code">
                { giftCertificate.code }
            </span>
        </span>
    </div>
);
 
export default memo(AppliedGiftCertificate);