-
Notifications
You must be signed in to change notification settings - Fork 132
/
ProductForm.js
120 lines (103 loc) · 3.21 KB
/
ProductForm.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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
import { useState, useEffect, useContext } from "react"
import { formatter } from '../utils/helpers'
import ProductOptions from "./ProductOptions"
import { CartContext } from "../context/shopContext"
import axios from "axios"
import useSWR from 'swr'
// setup inventory fetcher
const fetchInventory = (url, id) =>
axios
.get(url, {
params: {
id: id,
},
})
.then((res) => res.data)
export default function ProductForm({ product }) {
const { data: productInventory } = useSWR(
['/api/available', product.handle],
(url, id) => fetchInventory(url, id),
{ errorRetryCount: 3 }
)
const [available, setAvailable] = useState(true)
const { addToCart } = useContext(CartContext)
const allVariantOptions = product.variants.edges?.map(variant => {
const allOptions = {}
variant.node.selectedOptions.map(item => {
allOptions[item.name] = item.value
})
return {
id: variant.node.id,
title: product.title,
handle: product.handle,
image: variant.node.image?.url,
options: allOptions,
variantTitle: variant.node.title,
variantPrice: variant.node.priceV2.amount,
variantQuantity: 1
}
})
const defaultValues = {}
product.options.map(item => {
defaultValues[item.name] = item.values[0]
})
const [selectedVariant, setSelectedVariant] = useState(allVariantOptions[0])
const [selectedOptions, setSelectedOptions] = useState(defaultValues)
function setOptions(name, value) {
setSelectedOptions(prevState => {
return { ...prevState, [name]: value }
})
const selection = {
...selectedOptions,
[name]: value
}
allVariantOptions.map(item => {
if (JSON.stringify(item.options) === JSON.stringify(selection)) {
setSelectedVariant(item)
}
})
}
useEffect(() => {
if (productInventory) {
const checkAvailable = productInventory?.variants.edges.filter(item => item.node.id === selectedVariant.id)
if (checkAvailable[0]?.node.availableForSale) {
setAvailable(true)
} else {
setAvailable(false)
}
}
}, [productInventory, selectedVariant])
return (
<div className="flex flex-col w-full p-4 shadow-lg rounded-2xl md:w-1/3">
<h2 className="text-2xl font-bold">{product.title}</h2>
<span className="pb-3">{formatter.format(product.variants.edges[0].node.priceV2.amount)}</span>
{
product.options.map(({ name, values }) => (
<ProductOptions
key={`key-${name}`}
name={name}
values={values}
selectedOptions={selectedOptions}
setOptions={setOptions}
selectedVariant={selectedVariant}
productInventory={productInventory}
available={available}
/>
))
}
{
available ?
<button
onClick={() => {
addToCart(selectedVariant)
}}
className="px-2 py-3 mt-3 text-white bg-black rounded-lg hover:bg-gray-800">Add To Card
</button> :
<button
className="px-2 py-3 mt-3 text-white bg-gray-800 rounded-lg cursor-not-allowed">
Sold out!
</button>
}
</div>
)
}