-
Notifications
You must be signed in to change notification settings - Fork 7
/
index.jsx
94 lines (87 loc) · 2.62 KB
/
index.jsx
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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
import React, { Fragment, PureComponent } from 'react';
import PropTypes from 'prop-types';
import Transition from 'react-transition-group/Transition';
import { AppBar } from '@shopgate/pwa-ui-material';
import { CartIcon } from '@shopgate/pwa-ui-shared';
import { Portal } from '@shopgate/pwa-common/components';
import {
APP_BAR_CART_BUTTON,
APP_BAR_CART_BUTTON_BEFORE,
APP_BAR_CART_BUTTON_AFTER,
} from '@shopgate/pwa-common/constants/Portals';
import { themeConfig } from '@shopgate/pwa-common/helpers/config';
import { withWidgetSettings, i18n } from '@shopgate/engage/core';
import Badge from '../CartBadge';
import connect from './connector';
import styles from './style';
import transition from './transition';
const { colors } = themeConfig;
/**
* The CartButton component.
*/
class CartButton extends PureComponent {
static propTypes = {
count: PropTypes.number.isRequired,
navigate: PropTypes.func.isRequired,
widgetSettings: PropTypes.shape().isRequired,
};
/**
* @returns {JSX}
*/
get badge() {
const { count } = this.props;
return () => <Badge style={this.style.badge} count={count} />;
}
/**
* @returns {JSX}
*/
get style() {
const {
buttonCartBackground,
buttonCartColor,
buttonCartBadgeBackground,
buttonCartBadgeColor,
} = this.props.widgetSettings;
return {
icon: {
background: buttonCartBackground || colors.primary,
color: buttonCartColor || colors.primaryContrast,
},
badge: {
background: buttonCartBadgeBackground,
color: buttonCartBadgeColor,
},
};
}
/**
* @returns {JSX}
*/
render() {
const { count, navigate } = this.props;
const ariaLabel = `${i18n.text('navigation.cart')}. ${i18n.text('common.products')}: ${count}.`;
return (
<Transition in={count > 0} timeout={250}>
{state => (
<Fragment key="cart">
<Portal name={APP_BAR_CART_BUTTON_BEFORE} />
<Portal name={APP_BAR_CART_BUTTON}>
<div className={styles} style={transition[state]}>
<AppBar.Icon
{...this.style.icon}
badge={this.badge}
icon={CartIcon}
onClick={navigate}
testId="CartButton"
aria-label={ariaLabel}
aria-hidden={!count}
/>
</div>
</Portal>
<Portal name={APP_BAR_CART_BUTTON_AFTER} />
</Fragment>
)}
</Transition>
);
}
}
export default withWidgetSettings(connect(CartButton), '@shopgate/engage/components/AppBar');