Skip to content

Commit 46d1e87

Browse files
Add example/nextjs-app-router (#334)
* setting up new nextjs example for SSR testing * Add example/nextjs-app-router * Remove tsconfig.json * fix husky, remove nextjs test, update to use alpha version of USC * update .husky file * Add date-fns in package.json * Refactor code as per next13 app router --------- Co-authored-by: Nick DeJesus <ndejesus1227@gmail.com>
1 parent 0df8624 commit 46d1e87

30 files changed

+1017
-493
lines changed

.husky/pre-commit

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
#!/usr/bin/env sh
2+
. "$(dirname -- "$0")/_/husky.sh"
3+
4+
npm test
5+
./node_modules/.bin/lint-staged

examples/nextjs-root-layout/package.json renamed to examples/nextjs-app-router/package.json

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"name": "nextjs-root-layout",
2+
"name": "nextjs-app-router",
33
"version": "0.1.0",
44
"private": true,
55
"scripts": {
@@ -9,15 +9,16 @@
99
"lint": "next lint"
1010
},
1111
"dependencies": {
12+
"@stripe/stripe-js": "^1.14.0",
1213
"autoprefixer": "10.4.14",
1314
"eslint": "8.40.0",
1415
"eslint-config-next": "13.4.1",
1516
"next": "13.4.1",
1617
"postcss": "8.4.23",
1718
"react": "18.2.0",
1819
"react-dom": "18.2.0",
20+
"stripe": "^13.10.0",
1921
"tailwindcss": "3.3.2",
20-
"use-shopping-cart": "workspace:^3.1.5"
22+
"use-shopping-cart": "3.2.0-alpha.0"
2123
}
2224
}
23-
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
1-
import { useShoppingCart } from "use-shopping-cart";
2-
import { formatCurrencyString } from "use-shopping-cart";
3-
import Image from "next/image";
1+
'use client'
2+
import { useShoppingCart, formatCurrencyString } from 'use-shopping-cart'
3+
import Image from 'next/image'
44

55
export default function CartItem({ item }) {
6-
const { name, emoji, quantity, price } = item;
7-
const { removeItem } = useShoppingCart();
6+
const { name, emoji, quantity, price } = item
7+
const { removeItem } = useShoppingCart()
88

99
const removeItemFromCart = () => {
10-
removeItem(item.id);
11-
};
10+
removeItem(item.id)
11+
}
1212

1313
return (
1414
<div className="flex items-center gap-4 mb-3">
@@ -17,7 +17,7 @@ export default function CartItem({ item }) {
1717
{name} <span className="text-xs">({quantity})</span>
1818
</div>
1919
<div className="ml-auto">
20-
{formatCurrencyString({ value: price, currency: "GBP" })}
20+
{formatCurrencyString({ value: price, currency: 'GBP' })}
2121
</div>
2222
<button
2323
onClick={() => removeItemFromCart()}
@@ -26,5 +26,5 @@ export default function CartItem({ item }) {
2626
<Image alt="delete icon" src="./trash.svg" width={20} height={20} />
2727
</button>
2828
</div>
29-
);
29+
)
3030
}
Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
import { useState } from 'react'
2+
import { useShoppingCart } from 'use-shopping-cart'
3+
4+
export default function CheckoutButton() {
5+
const [status, setStatus] = useState('idle')
6+
const { redirectToCheckout, cartCount, totalPrice, cartDetails } =
7+
useShoppingCart()
8+
9+
async function handleClick(event) {
10+
event.preventDefault()
11+
if (cartCount > 0) {
12+
setStatus('loading')
13+
try {
14+
const res = await fetch('/session', {
15+
method: 'POST',
16+
body: JSON.stringify(cartDetails)
17+
})
18+
const data = await res.json()
19+
const result = await redirectToCheckout(data.sessionId)
20+
if (result?.error) {
21+
console.error(result)
22+
setStatus('redirect-error')
23+
}
24+
} catch (error) {
25+
console.error(error)
26+
setStatus('redirect-error')
27+
}
28+
} else {
29+
setStatus('no-items')
30+
}
31+
}
32+
33+
return (
34+
<article className="mt-3 flex flex-col">
35+
<div className="text-red-700 text-xs mb-3 h-5 text-center">
36+
{totalPrice && totalPrice < 30
37+
? 'You must have at least £0.30 in your basket'
38+
: cartCount && cartCount > 20
39+
? 'You cannot have more than 20 items'
40+
: status === 'redirect-error'
41+
? 'Unable to redirect to Stripe checkout page'
42+
: status === 'no-items'
43+
? 'Please add some items to your cart'
44+
: null}
45+
</div>
46+
<button
47+
onClick={handleClick}
48+
className="bg-emerald-50 hover:bg-emerald-500 hover:text-white transition-colors duration-500 text-emerald-500 py-3 px-5 rounded-md w-100 disabled:bg-slate-300 disabled:cursor-not-allowed disabled:text-white"
49+
disabled={
50+
(totalPrice && totalPrice < 30) ||
51+
(cartCount && cartCount > 20) ||
52+
status == 'no-items'
53+
? true
54+
: false
55+
}
56+
>
57+
{status !== 'loading' ? 'Proceed to checkout' : 'Loading...'}
58+
</button>
59+
</article>
60+
)
61+
}

0 commit comments

Comments
 (0)