-
Notifications
You must be signed in to change notification settings - Fork 255
/
ProductForm.tsx
80 lines (78 loc) · 2.16 KB
/
ProductForm.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
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
import {Link} from '@remix-run/react';
import {type VariantOption, VariantSelector} from '@shopify/hydrogen';
import type {
ProductFragment,
ProductVariantFragment,
} from 'storefrontapi.generated';
import {AddToCartButton} from '~/components/AddToCartButton';
import {useAside} from '~/components/Aside';
export function ProductForm({
product,
selectedVariant,
variants,
}: {
product: ProductFragment;
selectedVariant: ProductFragment['selectedVariant'];
variants: Array<ProductVariantFragment>;
}) {
const {open} = useAside();
return (
<div className="product-form">
<VariantSelector
handle={product.handle}
options={product.options.filter((option) => option.values.length > 1)}
variants={variants}
>
{({option}) => <ProductOptions key={option.name} option={option} />}
</VariantSelector>
<br />
<AddToCartButton
disabled={!selectedVariant || !selectedVariant.availableForSale}
onClick={() => {
open('cart');
}}
lines={
selectedVariant
? [
{
merchandiseId: selectedVariant.id,
quantity: 1,
selectedVariant,
},
]
: []
}
>
{selectedVariant?.availableForSale ? 'Add to cart' : 'Sold out'}
</AddToCartButton>
</div>
);
}
function ProductOptions({option}: {option: VariantOption}) {
return (
<div className="product-options" key={option.name}>
<h5>{option.name}</h5>
<div className="product-options-grid">
{option.values.map(({value, isAvailable, isActive, to}) => {
return (
<Link
className="product-options-item"
key={option.name + value}
prefetch="intent"
preventScrollReset
replace
to={to}
style={{
border: isActive ? '1px solid black' : '1px solid transparent',
opacity: isAvailable ? 1 : 0.3,
}}
>
{value}
</Link>
);
})}
</div>
<br />
</div>
);
}