-
Notifications
You must be signed in to change notification settings - Fork 51
/
ProductSummaryBuyButton.js
83 lines (76 loc) · 2.38 KB
/
ProductSummaryBuyButton.js
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
import React from 'react'
import BuyButton from 'vtex.store-components/BuyButton'
import { equals, path } from 'ramda'
import classNames from 'classnames'
import { IOMessage } from 'vtex.native-types'
import displayButtonTypes from '../../utils/displayButtonTypes'
import productSummary from '../../productSummary.css'
const ProductSummaryBuyButton = ({
product,
displayBuyButton,
isOneClickBuy,
buyButtonText,
runtime: {
hints: { mobile },
},
isHovering,
containerClass,
}) => {
const hoverBuyButton =
equals(displayBuyButton, displayButtonTypes.DISPLAY_ALWAYS.value) ||
!equals(displayBuyButton, displayButtonTypes.DISPLAY_ON_HOVER.value) ||
(isHovering && !mobile)
const showBuyButton =
!equals(displayBuyButton, displayButtonTypes.DISPLAY_NONE.value) &&
!(
equals(displayBuyButton, displayButtonTypes.DISPLAY_ON_HOVER.value) &&
mobile
)
const buyButtonClasses = classNames(
`${productSummary.buyButton} center mw-100`,
{
[productSummary.isHidden]: !hoverBuyButton,
}
)
const quantity =
path(['sku', 'seller', 'commertialOffer', 'AvailableQuantity'], product) ||
0
const isAvailable = quantity > 0
return (
showBuyButton && (
<div className={containerClass}>
<div className={buyButtonClasses}>
<BuyButton
available={isAvailable}
skuItems={
path(['sku', 'itemId'], product) && [
{
detailUrl: `/${product.linkText}/p`,
imageUrl: path(['sku', 'image', 'imageUrl'], product),
listPrice: path(
['sku', 'seller', 'commertialOffer', 'ListPrice'],
product
),
skuId: path(['sku', 'itemId'], product),
quantity: 1,
seller: path(['sku', 'seller', 'sellerId'], product),
name: product.productName,
price: path(
['sku', 'seller', 'commertialOffer', 'Price'],
product
),
variant: product.sku.name,
brand: product.brand,
},
]
}
isOneClickBuy={isOneClickBuy}
>
<IOMessage id={buyButtonText} />
</BuyButton>
</div>
</div>
)
)
}
export default ProductSummaryBuyButton