Skip to content

Commit 2c27bca

Browse files
fnhipsterfnhipster
committed
Error handling
1 parent 5ed4824 commit 2c27bca

File tree

7 files changed

+97
-33
lines changed

7 files changed

+97
-33
lines changed

‎components/Product/ProductTypes/BundledProduct/BundledProduct.tsx

+14-5
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import React, { FunctionComponent, useCallback } from 'react'
1+
import React, { FunctionComponent, useCallback, useState } from 'react'
22
import { Root } from './BundledProduct.styled'
3-
import Form, { Input } from '@storystore/ui/dist/components/Form'
3+
import Form, { Input, Error } from '@storystore/ui/dist/components/Form'
44
import Button from '@storystore/ui/dist/components/Button'
55
import { useCart } from '~/hooks/useCart/useCart'
66
import { useStoryStore } from '~/lib/storystore'
@@ -16,17 +16,25 @@ export const BundledProduct: FunctionComponent<BundledProductProps> = ({ sku, in
1616

1717
const { addSimpleProductToCart, addingSimpleProductsToCart } = useCart({ cartId })
1818

19+
const [error, setError] = useState<string | null>(null)
20+
1921
const history = useRouter()
2022

2123
const handleAddToCart = useCallback(
2224
async ({ items }) => {
2325
if (!cartId || !inStock || addingSimpleProductsToCart.loading) return
2426

25-
await addSimpleProductToCart(items)
27+
try {
28+
setError(null)
29+
30+
await addSimpleProductToCart(items)
2631

27-
await history.push('/cart')
32+
await history.push('/cart')
2833

29-
window.scrollTo(0, 0)
34+
window.scrollTo(0, 0)
35+
} catch (e) {
36+
setError(e.message)
37+
}
3038
},
3139
[addSimpleProductToCart, inStock, addingSimpleProductsToCart, history, cartId]
3240
)
@@ -36,6 +44,7 @@ export const BundledProduct: FunctionComponent<BundledProductProps> = ({ sku, in
3644
<Input name="items[0].data.sku" type="hidden" value={sku} rules={{ required: true }} />
3745
{/* <Quantity name="items[0].data.quantity" defaultValue={1} minValue={1} addLabel="Add" removeLabel="Remove" rules={{ required: true, min: 1 }} hideError /> */}
3846
<Button type="submit" as="button" text={inStock ? 'Add to Cart' : 'Sold Out'} disabled={!inStock} loading={false} />
47+
{error && <Error>{error}</Error>}
3948
</Root>
4049
)
4150
}

‎components/Product/ProductTypes/ConfigurableProduct/ConfigurableProduct.tsx

+14-4
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, { FunctionComponent, useCallback, useState, useRef } from 'react'
22
import { Root } from './ConfigurableProduct.styled'
3-
import Form, { TextSwatchesProps, TextSwatches, Select, Quantity } from '@storystore/ui/dist/components/Form'
3+
import Form, { TextSwatchesProps, TextSwatches, Select, Quantity, Error } from '@storystore/ui/dist/components/Form'
44
import { useCart } from '~/hooks/useCart/useCart'
55
import { useStoryStore } from '~/lib/storystore'
66
import { useRouter } from 'next/router'
@@ -48,6 +48,8 @@ export const ConfigurableProduct: FunctionComponent<ConfigurableProductProps> =
4848

4949
const [variantSku, setVariantSku] = useState(sku)
5050

51+
const [error, setError] = useState<string | null>(null)
52+
5153
const inStock = stock === 'IN_STOCK'
5254

5355
const { setGallery, setPrice } = useProductLayout()
@@ -111,11 +113,17 @@ export const ConfigurableProduct: FunctionComponent<ConfigurableProductProps> =
111113
async ({ quantity = 1 }) => {
112114
if (!cartId || !inStock || addingConfigurableProductToCart.loading) return
113115

114-
await addConfigurableProductToCart({ sku, variantSku, quantity })
116+
try {
117+
setError(null)
118+
await addConfigurableProductToCart({ sku, variantSku, quantity })
115119

116-
await history.push('/cart')
120+
await history.push('/cart')
117121

118-
window.scrollTo(0, 0)
122+
window.scrollTo(0, 0)
123+
} catch (e) {
124+
console.log(e)
125+
setError(e.message)
126+
}
119127
},
120128
[sku, variantSku, addConfigurableProductToCart, inStock, addingConfigurableProductToCart, history, cartId]
121129
)
@@ -173,6 +181,8 @@ export const ConfigurableProduct: FunctionComponent<ConfigurableProductProps> =
173181
<Quantity name="quantity" defaultValue={1} minValue={1} addLabel="Add" removeLabel="Remove" rules={{ required: true, min: 1 }} hideError />
174182

175183
<Button type="submit" as="button" text={inStock ? 'Add to Cart' : 'Sold Out'} disabled={!inStock} loading={addingConfigurableProductToCart.loading} />
184+
185+
{error && <Error>{error}</Error>}
176186
</Root>
177187
</div>
178188
)

‎components/Product/ProductTypes/DownloadableProduct/DownloadableProduct.tsx

+14-4
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, { FunctionComponent, useCallback, useEffect, useState } from 'react'
22
import { Root, Downloads, DownloadIcon, DownloadLabel } from './DownloadableProduct.styled'
3-
import Form, { Input, Checkbox } from '@storystore/ui/dist/components/Form'
3+
import Form, { Input, Checkbox, Error } from '@storystore/ui/dist/components/Form'
44
import Button from '@storystore/ui/dist/components/Button'
55
import { useCart } from '~/hooks/useCart/useCart'
66
import { useStoryStore } from '~/lib/storystore'
@@ -27,6 +27,8 @@ export const DownloadableProduct: FunctionComponent<DownloadableProductProps> =
2727

2828
const [selectedDownloads, setSelectedDownloads] = useState([...downloads])
2929

30+
const [error, setError] = useState<string | null>(null)
31+
3032
// Set Prices –
3133
useEffect(() => {
3234
if (downloads.length > 1) {
@@ -65,11 +67,17 @@ export const DownloadableProduct: FunctionComponent<DownloadableProductProps> =
6567

6668
if (!cartId || !inStock || addingDownloadableProductToCart.loading) return
6769

68-
await addDownloadableProductToCart(items)
70+
try {
71+
setError(null)
72+
73+
await addDownloadableProductToCart(items)
6974

70-
await history.push('/cart')
75+
await history.push('/cart')
7176

72-
window.scrollTo(0, 0)
77+
window.scrollTo(0, 0)
78+
} catch (e) {
79+
setError(e.message)
80+
}
7381
},
7482
[addDownloadableProductToCart, inStock, addingDownloadableProductToCart, history, cartId]
7583
)
@@ -141,6 +149,8 @@ export const DownloadableProduct: FunctionComponent<DownloadableProductProps> =
141149
)}
142150

143151
<Button type="submit" as="button" text={inStock ? 'Add to Cart' : 'Sold Out'} disabled={!inStock} loading={addingDownloadableProductToCart.loading} />
152+
153+
{error && <Error>{error}</Error>}
144154
</Root>
145155
)
146156
}

‎components/Product/ProductTypes/GiftCard/GiftCard.tsx

+11-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import React, { FunctionComponent, useCallback } from 'react'
1+
import React, { FunctionComponent, useCallback, useState } from 'react'
22
import { Root } from './GiftCard.styled'
3-
import Form from '@storystore/ui/dist/components/Form' // Quantity // Input,
3+
import Form, { Error } from '@storystore/ui/dist/components/Form' // Quantity // Input,
44
// import Button from '@storystore/ui/dist/components/Button'
55
// import { useCart } from '~/hooks/useCart/useCart'
66
// import { useStoryStore } from '~/lib/storystore'
@@ -21,14 +21,22 @@ export const GiftCard: FunctionComponent<GiftCardProps> = (
2121
// const { addGiftCardToCart, addingGiftCardsToCart } = useCart({ cartId })
2222

2323
// const history = useRouter()
24+
const [error, setError] = useState<string | null>(null)
2425

25-
const handleAddToCart = useCallback(async () => {}, [])
26+
const handleAddToCart = useCallback(async () => {
27+
try {
28+
setError(null)
29+
} catch (e) {
30+
setError(e.message)
31+
}
32+
}, [])
2633

2734
return (
2835
<Root as={Form} onSubmit={handleAddToCart}>
2936
{/* <Input name="items[0].data.sku" type="hidden" value={sku} rules={{ required: true }} /> */}
3037
{/* <Quantity name="items[0].data.quantity" defaultValue={1} minValue={1} addLabel="Add" removeLabel="Remove" rules={{ required: true, min: 1 }} hideError /> */}
3138
{/* <Button type="submit" as="button" text={inStock ? 'Add to Cart' : 'Sold Out'} disabled={!inStock} loading={addingGiftCardsToCart.loading} /> */}
39+
{error && <Error>{error}</Error>}
3240
</Root>
3341
)
3442
}

‎components/Product/ProductTypes/GroupedProduct/GroupedProduct.tsx

+17-7
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import React, { FunctionComponent, useCallback, useMemo } from 'react'
1+
import React, { FunctionComponent, useCallback, useMemo, useState } from 'react'
22
import { Root, Item, Title, PriceContainer } from './GroupedProduct.styled'
3-
import Form, { Input, Quantity } from '@storystore/ui/dist/components/Form'
3+
import Form, { Input, Quantity, Error } from '@storystore/ui/dist/components/Form'
44
import Button from '@storystore/ui/dist/components/Button'
55
import { useCart } from '~/hooks/useCart/useCart'
66
import { useStoryStore } from '~/lib/storystore'
@@ -34,6 +34,8 @@ export const GroupedProduct: FunctionComponent<GroupedProductProps> = ({ group }
3434

3535
const history = useRouter()
3636

37+
const [error, setError] = useState<string | null>(null)
38+
3739
const items = group?.map(({ product }) => ({
3840
quantity: product.quantity,
3941
sku: product.sku,
@@ -46,15 +48,21 @@ export const GroupedProduct: FunctionComponent<GroupedProductProps> = ({ group }
4648
async ({ items }) => {
4749
if (!cartId || addingSimpleProductsToCart.loading) return
4850

49-
const values = items.filter((item: any) => item.data.quantity > 0)
51+
try {
52+
setError(null)
53+
54+
const values = items.filter((item: any) => item.data.quantity > 0)
5055

51-
if (values.length === 0) return
56+
if (values.length === 0) return
5257

53-
await addSimpleProductToCart(values)
58+
await addSimpleProductToCart(values)
5459

55-
await history.push('/cart')
60+
await history.push('/cart')
5661

57-
window.scrollTo(0, 0)
62+
window.scrollTo(0, 0)
63+
} catch (e) {
64+
setError(e.message)
65+
}
5866
},
5967
[cartId, addingSimpleProductsToCart.loading, addSimpleProductToCart, history]
6068
)
@@ -94,6 +102,8 @@ export const GroupedProduct: FunctionComponent<GroupedProductProps> = ({ group }
94102
)
95103
})}
96104
<Button type="submit" as="button" text="Add to Cart" loading={addingSimpleProductsToCart.loading} />
105+
106+
{error && <Error>{error}</Error>}
97107
</Root>
98108
)
99109
}

‎components/Product/ProductTypes/SimpleProduct/SimpleProduct.tsx

+14-5
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import React, { FunctionComponent, useCallback } from 'react'
1+
import React, { FunctionComponent, useCallback, useState } from 'react'
22
import { Root } from './SimpleProduct.styled'
3-
import Form, { Input, Quantity } from '@storystore/ui/dist/components/Form'
3+
import Form, { Input, Quantity, Error } from '@storystore/ui/dist/components/Form'
44
import Button from '@storystore/ui/dist/components/Button'
55
import { useCart } from '~/hooks/useCart/useCart'
66
import { useStoryStore } from '~/lib/storystore'
@@ -16,6 +16,8 @@ export const SimpleProduct: FunctionComponent<SimpleProductProps> = ({ sku, stoc
1616

1717
const { addSimpleProductToCart, addingSimpleProductsToCart } = useCart({ cartId })
1818

19+
const [error, setError] = useState<string | null>(null)
20+
1921
const history = useRouter()
2022

2123
const inStock = stock === 'IN_STOCK'
@@ -24,11 +26,17 @@ export const SimpleProduct: FunctionComponent<SimpleProductProps> = ({ sku, stoc
2426
async ({ items }) => {
2527
if (!cartId || !inStock || addingSimpleProductsToCart.loading) return
2628

27-
await addSimpleProductToCart(items)
29+
try {
30+
setError(null)
31+
32+
await addSimpleProductToCart(items)
2833

29-
await history.push('/cart')
34+
await history.push('/cart')
3035

31-
window.scrollTo(0, 0)
36+
window.scrollTo(0, 0)
37+
} catch (e) {
38+
setError(e)
39+
}
3240
},
3341
[addSimpleProductToCart, inStock, addingSimpleProductsToCart, history, cartId]
3442
)
@@ -38,6 +46,7 @@ export const SimpleProduct: FunctionComponent<SimpleProductProps> = ({ sku, stoc
3846
<Input name="items[0].data.sku" type="hidden" value={sku} rules={{ required: true }} />
3947
<Quantity name="items[0].data.quantity" defaultValue={1} minValue={1} addLabel="Add" removeLabel="Remove" rules={{ required: true, min: 1 }} hideError />
4048
<Button type="submit" as="button" text={inStock ? 'Add to Cart' : 'Sold Out'} disabled={!inStock} loading={addingSimpleProductsToCart.loading} />
49+
{error && <Error>{error}</Error>}
4150
</Root>
4251
)
4352
}

‎components/Product/ProductTypes/VirtualProduct/VirtualProduct.tsx

+13-5
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import React, { FunctionComponent, useCallback } from 'react'
1+
import React, { FunctionComponent, useCallback, useState } from 'react'
22
import { Root } from './VirtualProduct.styled'
3-
import Form, { Quantity } from '@storystore/ui/dist/components/Form'
3+
import Form, { Quantity, Error } from '@storystore/ui/dist/components/Form'
44
import Button from '@storystore/ui/dist/components/Button'
55
import { useCart } from '~/hooks/useCart/useCart'
66
import { useStoryStore } from '~/lib/storystore'
@@ -18,17 +18,23 @@ export const VirtualProduct: FunctionComponent<VirtualProductProps> = ({ sku, st
1818

1919
const history = useRouter()
2020

21+
const [error, setError] = useState<string | null>(null)
22+
2123
const inStock = stock === 'IN_STOCK'
2224

2325
const handleAddToCart = useCallback(
2426
async ({ quantity = 1 }) => {
2527
if (!cartId || !inStock || addingVirtualProductsToCart.loading) return
2628

27-
await addVirtualProductToCart({ sku, quantity })
29+
try {
30+
await addVirtualProductToCart({ sku, quantity })
2831

29-
await history.push('/cart')
32+
await history.push('/cart')
3033

31-
window.scrollTo(0, 0)
34+
window.scrollTo(0, 0)
35+
} catch (e) {
36+
setError(e.message)
37+
}
3238
},
3339
[sku, addVirtualProductToCart, inStock, addingVirtualProductsToCart, history, cartId]
3440
)
@@ -38,6 +44,8 @@ export const VirtualProduct: FunctionComponent<VirtualProductProps> = ({ sku, st
3844
<Quantity name="quantity" defaultValue={1} minValue={1} addLabel="Add" removeLabel="Remove" rules={{ required: true, min: 1 }} hideError />
3945

4046
<Button type="submit" as="button" text={inStock ? 'Add to Cart' : 'Sold Out'} disabled={!inStock} loading={addingVirtualProductsToCart.loading} />
47+
48+
{error && <Error>{error}</Error>}
4149
</Root>
4250
)
4351
}

0 commit comments

Comments
 (0)