diff --git a/examples/nextjs-root-layout/src/app/components/ShoppingCart.js b/examples/nextjs-app-router/src/app/components/ShoppingCart.js
similarity index 54%
rename from examples/nextjs-root-layout/src/app/components/ShoppingCart.js
rename to examples/nextjs-app-router/src/app/components/ShoppingCart.js
index a6f4300..22899e3 100644
--- a/examples/nextjs-root-layout/src/app/components/ShoppingCart.js
+++ b/examples/nextjs-app-router/src/app/components/ShoppingCart.js
@@ -1,13 +1,13 @@
-import { useShoppingCart } from "use-shopping-cart";
-import CartItem from "./CartItem";
-import CheckoutButton from "./CheckoutButton";
+import { useShoppingCart } from 'use-shopping-cart'
+import CartItem from './CartItem'
+import CheckoutButton from './CheckoutButton'
export default function ShoppingCart() {
- const { shouldDisplayCart, cartCount, cartDetails } = useShoppingCart();
+ const { shouldDisplayCart, cartCount, cartDetails } = useShoppingCart()
return (
{cartCount && cartCount > 0 ? (
@@ -21,5 +21,5 @@ export default function ShoppingCart() {
You have no items in your cart
)}
- );
+ )
}
diff --git a/examples/nextjs-root-layout/src/app/components/providers.js b/examples/nextjs-app-router/src/app/components/providers.js
similarity index 76%
rename from examples/nextjs-root-layout/src/app/components/providers.js
rename to examples/nextjs-app-router/src/app/components/providers.js
index 8381445..f036b2a 100644
--- a/examples/nextjs-root-layout/src/app/components/providers.js
+++ b/examples/nextjs-app-router/src/app/components/providers.js
@@ -7,10 +7,8 @@ function CartProvider({ children }) {
return (
@@ -20,4 +18,3 @@ function CartProvider({ children }) {
}
export default CartProvider
-
diff --git a/examples/nextjs-root-layout/src/app/data/products.js b/examples/nextjs-app-router/src/app/data/products.js
similarity index 100%
rename from examples/nextjs-root-layout/src/app/data/products.js
rename to examples/nextjs-app-router/src/app/data/products.js
diff --git a/examples/nextjs-root-layout/src/app/favicon.ico b/examples/nextjs-app-router/src/app/favicon.ico
similarity index 100%
rename from examples/nextjs-root-layout/src/app/favicon.ico
rename to examples/nextjs-app-router/src/app/favicon.ico
diff --git a/examples/nextjs-root-layout/src/app/globals.css b/examples/nextjs-app-router/src/app/globals.css
similarity index 100%
rename from examples/nextjs-root-layout/src/app/globals.css
rename to examples/nextjs-app-router/src/app/globals.css
diff --git a/examples/nextjs-root-layout/src/app/layout.js b/examples/nextjs-app-router/src/app/layout.js
similarity index 65%
rename from examples/nextjs-root-layout/src/app/layout.js
rename to examples/nextjs-app-router/src/app/layout.js
index 52da278..77e17f6 100644
--- a/examples/nextjs-root-layout/src/app/layout.js
+++ b/examples/nextjs-app-router/src/app/layout.js
@@ -1,15 +1,15 @@
import './globals.css'
import { Inter } from 'next/font/google'
-// import { CartProvider } from 'use-shopping-cart'
import CartProvider from './components/providers'
-import Layout from './components/Layout'
+import NavBar from './components/NavBar'
const inter = Inter({ subsets: ['latin'] })
export const metadata = {
- title: 'Create Next App',
- description: 'Generated by create next app'
+ title: 'Fresh',
+ description:
+ 'Next.js 13 app router example to show how to use use-shopping-cart'
}
export default function RootLayout({ children }) {
@@ -17,10 +17,10 @@ export default function RootLayout({ children }) {
- {children}
+
)
}
-
diff --git a/examples/nextjs-app-router/src/app/page.js b/examples/nextjs-app-router/src/app/page.js
new file mode 100644
index 0000000..259a2f0
--- /dev/null
+++ b/examples/nextjs-app-router/src/app/page.js
@@ -0,0 +1,16 @@
+import Product from './components/Product'
+import { products } from './data/products'
+
+export default function Home() {
+ return (
+
+
+
+ {products.map((product) => (
+
+ ))}
+
+
+ )
+}
diff --git a/examples/nextjs-app-router/src/app/session/route.js b/examples/nextjs-app-router/src/app/session/route.js
new file mode 100644
index 0000000..a3774f9
--- /dev/null
+++ b/examples/nextjs-app-router/src/app/session/route.js
@@ -0,0 +1,19 @@
+import { stripe } from '../../lib/stripe'
+import { headers } from 'next/headers'
+import { products } from '../data/products'
+import { validateCartItems } from 'use-shopping-cart/utilities'
+
+export async function POST(request) {
+ const inventory = products
+ const cartProducts = await request.json()
+ const line_items = validateCartItems(inventory, cartProducts)
+ console.log('line_items', line_items)
+ const checkoutSession = await stripe.checkout.sessions.create({
+ mode: 'payment',
+ submit_type: 'pay',
+ line_items,
+ success_url: `${headers().get('origin')}/success`,
+ cancel_url: `${headers().get('origin')}/`
+ })
+ return Response.json({ sessionId: checkoutSession.id })
+}
diff --git a/examples/nextjs-app-router/src/app/success/page.js b/examples/nextjs-app-router/src/app/success/page.js
new file mode 100644
index 0000000..7407b0c
--- /dev/null
+++ b/examples/nextjs-app-router/src/app/success/page.js
@@ -0,0 +1,7 @@
+export default function SuccessPage() {
+ return (
+
+ Hi, Your order has been successfully placed
+
+ )
+}
diff --git a/examples/nextjs-app-router/src/lib/stripe.js b/examples/nextjs-app-router/src/lib/stripe.js
new file mode 100644
index 0000000..6129172
--- /dev/null
+++ b/examples/nextjs-app-router/src/lib/stripe.js
@@ -0,0 +1,9 @@
+import Stripe from 'stripe'
+export const stripe = new Stripe(process.env.STRIPE_SECRET_KEY, {
+ // https://github.com/stripe/stripe-node#configuration
+ apiVersion: '2023-08-16',
+ appInfo: {
+ name: 'projectname',
+ url: 'http://localhost:3000/'
+ }
+})
diff --git a/examples/nextjs-root-layout/tailwind.config.js b/examples/nextjs-app-router/tailwind.config.js
similarity index 100%
rename from examples/nextjs-root-layout/tailwind.config.js
rename to examples/nextjs-app-router/tailwind.config.js
diff --git a/examples/nextjs-root-layout/src/app/components/CheckoutButton.js b/examples/nextjs-root-layout/src/app/components/CheckoutButton.js
deleted file mode 100644
index 796e92e..0000000
--- a/examples/nextjs-root-layout/src/app/components/CheckoutButton.js
+++ /dev/null
@@ -1,55 +0,0 @@
-import { useState } from "react";
-import { useShoppingCart } from "use-shopping-cart";
-
-export default function CheckoutButton() {
- const [status, setStatus] = useState("idle");
- const { redirectToCheckout, cartCount, totalPrice } = useShoppingCart();
-
- async function handleClick(event) {
- event.preventDefault();
- if (cartCount > 0) {
- setStatus("loading");
- try {
- const result = await redirectToCheckout();
- if (result?.error) {
- console.error(result);
- setStatus("redirect-error");
- }
- } catch (error) {
- console.error(error);
- setStatus("redirect-error");
- }
- } else {
- setStatus("no-items");
- }
- }
-
- return (
-
-
- {totalPrice && totalPrice < 30
- ? "You must have at least £0.30 in your basket"
- : cartCount && cartCount > 20
- ? "You cannot have more than 20 items"
- : status === "redirect-error"
- ? "Unable to redirect to Stripe checkout page"
- : status === "no-items"
- ? "Please add some items to your cart"
- : null}
-
- 20) ||
- status == "no-items"
- ? true
- : false
- }
- >
- {status !== "loading" ? "Proceed to checkout" : "Loading..."}
-
-
- );
-}
diff --git a/examples/nextjs-root-layout/src/app/components/Layout.js b/examples/nextjs-root-layout/src/app/components/Layout.js
deleted file mode 100644
index 0bcb67d..0000000
--- a/examples/nextjs-root-layout/src/app/components/Layout.js
+++ /dev/null
@@ -1,24 +0,0 @@
-'use client'
-
-import Head from 'next/head'
-import NavBar from './NavBar'
-
-export default function Layout({ children }) {
- return (
- <>
-
- fresh
-
- {children}
-
-
- )
-}
diff --git a/examples/nextjs-root-layout/src/app/page.js b/examples/nextjs-root-layout/src/app/page.js
deleted file mode 100644
index d0bcb21..0000000
--- a/examples/nextjs-root-layout/src/app/page.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import Product from './components/Product'
-import { products } from './data/products'
-
-export default function Home() {
- return (
-
- {products.map((product) => (
-
- ))}
-