All files / app/shipping/shippingOption StaticShippingOption.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
46
47
 
17x
 
17x
 
17x
17x
 
 
 
 
 
 
17x
28x
28x
 
28x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
17x
 
import { ShippingOption } from '@bigcommerce/checkout-sdk';
import React from 'react';
 
import { ShopperCurrency } from '../../currency';
 
import ShippingOptionAdditionalDescription from './ShippingOptionAdditionalDescription';
import './StaticShippingOption.scss';
 
interface StaticShippingOptionProps {
    displayAdditionalInformation?: boolean;
    method: ShippingOption;
}
 
const StaticShippingOption: React.FunctionComponent<StaticShippingOptionProps> = ({
displayAdditionalInformation = true,
method,
}) => {
    return (
        <>
            <div className="shippingOption shippingOption--alt">
                { method.imageUrl &&
                    <span className="shippingOption-figure">
                        <img
                            alt={ method.description }
                            className="shippingOption-img"
                            src={ method.imageUrl }
                        />
                    </span> }
                <span className="shippingOption-desc">
                    { method.description }
                    { method.transitTime &&
                        <span className="shippingOption-transitTime">
                            { method.transitTime }
                        </span> }
                    { method.additionalDescription && displayAdditionalInformation &&
                        <ShippingOptionAdditionalDescription description={ method.additionalDescription } /> }
                </span>
                <span className="shippingOption-price">
                    <ShopperCurrency amount={ method.cost } />
                </span>
            </div>
        </>
    );
};
 
export default StaticShippingOption;