Fix/remove client check (#322)

* add nextjs example with root layout (this looks like dog shit rn)

* adjust conditions for rendering with persistence

* add "use client" directive to react modules (doesn't actually work tho)

* update lib version

Author: dayhaysoos

examples/nextjs-root-layout/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

examples/nextjs-root-layout/.gitignore

@@ -0,0 +1,35 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

examples/nextjs-root-layout/README.md

@@ -0,0 +1,34 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.js`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

examples/nextjs-root-layout/jsconfig.json

@@ -0,0 +1,7 @@
+{
+  "compilerOptions": {
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}

examples/nextjs-root-layout/next.config.js

@@ -0,0 +1,4 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {}
+
+module.exports = nextConfig

examples/nextjs-root-layout/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "nextjs-root-layout",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "autoprefixer": "10.4.14",
+    "eslint": "8.40.0",
+    "eslint-config-next": "13.4.1",
+    "next": "13.4.1",
+    "postcss": "8.4.23",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "tailwindcss": "3.3.2",
+    "use-shopping-cart": "workspace:^3.1.5"
+  }
+}
+

examples/nextjs-root-layout/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

examples/nextjs-root-layout/src/app/components/CartItem.js

@@ -0,0 +1,30 @@
+import { useShoppingCart } from "use-shopping-cart";
+import { formatCurrencyString } from "use-shopping-cart";
+import Image from "next/image";
+
+export default function CartItem({ item }) {
+  const { name, emoji, quantity, price } = item;
+  const { removeItem } = useShoppingCart();
+
+  const removeItemFromCart = () => {
+    removeItem(item.id);
+  };
+
+  return (
+    <div className="flex items-center gap-4 mb-3">
+      <p className="text-4xl">{emoji}</p>
+      <div>
+        {name} <span className="text-xs">({quantity})</span>
+      </div>
+      <div className="ml-auto">
+        {formatCurrencyString({ value: price, currency: "GBP" })}
+      </div>
+      <button
+        onClick={() => removeItemFromCart()}
+        className="hover:bg-emerald-50 transition-colors rounded-full duration-500 p-1"
+      >
+        <Image alt="delete icon" src="./trash.svg" width={20} height={20} />
+      </button>
+    </div>
+  );
+}

examples/nextjs-root-layout/src/app/components/CheckoutButton.js

@@ -0,0 +1,55 @@
+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 (
+    <article className="mt-3 flex flex-col">
+      <div className="text-red-700 text-xs mb-3 h-5 text-center">
+        {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}
+      </div>
+      <button
+        onClick={handleClick}
+        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"
+        disabled={
+          (totalPrice && totalPrice < 30) ||
+          (cartCount && cartCount > 20) ||
+          status == "no-items"
+            ? true
+            : false
+        }
+      >
+        {status !== "loading" ? "Proceed to checkout" : "Loading..."}
+      </button>
+    </article>
+  );
+}

examples/nextjs-root-layout/src/app/components/Layout.js

@@ -0,0 +1,24 @@
+'use client'
+
+import Head from 'next/head'
+import NavBar from './NavBar'
+
+export default function Layout({ children }) {
+  return (
+    <>
+      <Head>
+        <title>fresh</title>
+        <meta
+          name="description"
+          content="A simple website to show how to use use-shopping-cart"
+        />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+      <NavBar />
+      <main className="bg-[#f8f7f5] min-h-[calc(100vh-76px)] px-10 py-8">
+        <div className="container md:mx-auto md:max-w-[850px]">{children}</div>
+      </main>
+    </>
+  )
+}

examples/nextjs-root-layout/src/app/components/NavBar.js

@@ -0,0 +1,31 @@
+'use client'
+
+import { useShoppingCart } from 'use-shopping-cart'
+import Image from 'next/image'
+import Link from 'next/link'
+import ShoppingCart from './ShoppingCart'
+
+export default function NavBar() {
+  const { handleCartClick, cartCount } = useShoppingCart()
+  return (
+    <nav className="py-5 px-12 flex justify-between">
+      <Link href="/">
+        <p className="bg-white text-3xl font-bold underline underline-offset-4 decoration-wavy decoration-2 decoration-emerald-500">
+          fresh
+        </p>
+      </Link>
+      <button className="relative" onClick={() => handleCartClick()}>
+        <Image
+          src="./cart.svg"
+          width={40}
+          height={40}
+          alt="shopping cart icon"
+        />
+        <div className="rounded-full flex justify-center items-center bg-emerald-500 text-xs text-white absolute w-6 h-5 bottom-6 -right-1">
+          {cartCount}
+        </div>
+      </button>
+      <ShoppingCart />
+    </nav>
+  )
+}

examples/nextjs-root-layout/src/app/components/Product.js

@@ -0,0 +1,57 @@
+'use client'
+
+import { useState } from 'react'
+import { formatCurrencyString } from 'use-shopping-cart'
+import { useShoppingCart } from 'use-shopping-cart'
+
+export default function Product({ product }) {
+  const { addItem } = useShoppingCart()
+  const { name, price, emoji } = product
+  const [quantity, setQuantity] = useState(1)
+
+  const decreaseQuantity = () => {
+    if (quantity > 1) {
+      setQuantity(quantity - 1)
+    }
+  }
+
+  const increaseQuantity = () => {
+    setQuantity(quantity + 1)
+  }
+
+  const addToCart = () => {
+    addItem(product, { count: quantity })
+    setQuantity(1)
+  }
+
+  return (
+    <article className="flex flex-col gap-3 bg-white p-8 rounded-xl shadow-md text-center mb-6">
+      <div className="text-8xl cursor-default">{emoji}</div>
+      <div className="text-lg">{name}</div>
+      <div className="text-2xl font-semibold mt-auto">
+        {formatCurrencyString({ value: price, currency: 'GBP' })}
+      </div>
+      <div className="flex justify-around items-center mt-4 mb-2 ">
+        <button
+          onClick={decreaseQuantity}
+          className="hover:text-emerald-500 hover:bg-emerald-50 w-8 h-8 rounded-full transition-colors duration-500"
+        >
+          -
+        </button>
+        <span className="w-10 text-center rounded-md mx-3">{quantity}</span>
+        <button
+          onClick={increaseQuantity}
+          className="hover:text-emerald-500 hover:bg-emerald-50 w-8 h-8 rounded-full transition-colors duration-500"
+        >
+          +
+        </button>
+      </div>
+      <button
+        onClick={() => addToCart()}
+        className="bg-emerald-50 hover:bg-emerald-500 hover:text-white transition-colors duration-500 text-emerald-500 rounded-md px-5 py-2"
+      >
+        Add to cart
+      </button>
+    </article>
+  )
+}

examples/nextjs-root-layout/src/app/components/ShoppingCart.js

@@ -0,0 +1,25 @@
+import { useShoppingCart } from "use-shopping-cart";
+import CartItem from "./CartItem";
+import CheckoutButton from "./CheckoutButton";
+
+export default function ShoppingCart() {
+  const { shouldDisplayCart, cartCount, cartDetails } = useShoppingCart();
+  return (
+    <div
+      className={`bg-white flex flex-col absolute right-3 md:right-9 top-14 w-80 py-4 px-4 shadow-[0_5px_15px_0_rgba(0,0,0,.15)] rounded-md transition-opacity duration-500 ${
+        shouldDisplayCart ? "opacity-100" : "opacity-0"
+      }`}
+    >
+      {cartCount && cartCount > 0 ? (
+        <>
+          {Object.values(cartDetails ?? {}).map((entry) => (
+            <CartItem key={entry.id} item={entry} />
+          ))}
+          <CheckoutButton />
+        </>
+      ) : (
+        <div className="p-5">You have no items in your cart</div>
+      )}
+    </div>
+  );
+}

examples/nextjs-root-layout/src/app/components/providers.js

@@ -0,0 +1,23 @@
+'use client'
+
+import React from 'react'
+import { CartProvider as USCProvider } from 'use-shopping-cart'
+
+function CartProvider({ children }) {
+  return (
+    <USCProvider
+      mode="checkout-session"
+      stripe={'test'}
+      currency={'USD'}
+      successUrl={'https://example.com/success'}
+      cancelUrl={'https://example.com/cancel'}
+      allowedCountries={['US', 'GB', 'CA']}
+      billingAddressCollection={true}
+    >
+      {children}
+    </USCProvider>
+  )
+}
+
+export default CartProvider
+