[ { "path": ".eslintrc.json", "content": "{\n \"extends\": [\"next\", \"next/core-web-vitals\", \"prettier\"]\n}\n" }, { "path": ".gitignore", "content": "node_modules\n# Keep environment variables out of version control\n.env\n.env.local\n\n.next\n" }, { "path": ".prettierrc.json", "content": "{}" }, { "path": "README.md", "content": "# Teini\n\n> Teini (tiny, [ˈtīnē]) is an extremely small webshop leveraging awesome and free solutions like Github and Vercel.\n\nMain purpose is to get you started fast and cheap. Hit the deploy button to create your own version of Teini or see a working demo here: https://teini.vercel.app/\n\n[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fzeekrey%2Fteini&env=STRIPE_SECRET_KEY,NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY,SHOP_NAME,SHOP_CONTACT,SHOP_HEADLINE,SHOP_SUBHEADLINE&envDescription=You'll%20need%20Stripe%20API%20key.&envLink=https%3A%2F%2Fstripe.com%2Fdocs%2Fkeys&project-name=teini-copy&repo-name=teini-copy&redirect-url=https%3A%2F%2Fkrey.io&demo-title=Teini%20-%20The%20smallest%20eShop%20in%20the%20world&demo-description=A%20real%20online%20store.%20But%20without%20the%20costs%20and%20without%20complexity.&demo-url=https%3A%2F%2Fteini.co&demo-image=https%3A%2F%2Fimages.unsplash.com%2Fphoto-1494256997604-768d1f608cac%3Fixid%3DMnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8%26ixlib%3Drb-1.2.1%26auto%3Dformat%26fit%3Dcrop%26w%3D1829%26q%3D80)\n\n## Installation\n\n### ...if you're not a developer\n\n> 💡 If you need help at any stage contact me. If you want me to setup Teini contact me as well.\n\n#### Accounts needed\n\nRunning Teini should be easy and for free. Although you'll need to create some accounts to make it work:\n\n| Account | Description/What it does | Link |\n| ------------- | -------------------------------------------------------------------------- | ------------------- |\n| Vercel | Deploys and keeps the actual website running. It's awesome. | https://vercel.com/ |\n| Stripe | Provides the whole checkout and payment infrastructure. It's awesome, too. | https://stripe.com |\n| Github/Gitlab | The place where the source code is stored. Awesome - yep. | https://github.com |\n\n> 🤑 While Vercel and Github should be free while respecting their fair use policies, Stripe will cost some money. Fortunately, these are transaction-dependent.\n\n#### Environment Variables\n\nTo configure your store you need to set some meta data and credentials upfront. The following data needs to be set:\n\n| Environment Variable | Description | Default |\n| ---------------------------------- | ---------------------------------------------------------------------------------------------------- | ------- |\n| STRIPE_SECRET_KEY | The Stripe secret key: https://stripe.com/docs/keys#obtain-api-keys |\n| NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY | The Stripe publishable key: https://stripe.com/docs/keys#obtain-api-keys |\n| SHOP_NAME | Will show up in the browser tab and in the seo config. |\n| SHOP_CONTACT | A way customers can contact your. Could be an email or a Twitter handle. Will show up in the footer. |\n| SHOP_HEADLINE | Will show up on the index (start) page and in the seo config. |\n| SHOP_SUBHEADLINE | Will show up on the index (start) page and in the seo config. |\n\nOnce you got everything together you can finally deploy your own version for Teini:\n\n[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fzeekrey%2Fteini&env=STRIPE_SECRET_KEY,NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY,SHOP_NAME,SHOP_CONTACT,SHOP_HEADLINE,SHOP_SUBHEADLINE&envDescription=You'll%20need%20Stripe%20API%20key.&envLink=https%3A%2F%2Fstripe.com%2Fdocs%2Fkeys&project-name=teini-copy&repo-name=teini-copy&redirect-url=https%3A%2F%2Fkrey.io&demo-title=Teini%20-%20The%20smallest%20eShop%20in%20the%20world&demo-description=A%20real%20online%20store.%20But%20without%20the%20costs%20and%20without%20complexity.&demo-url=https%3A%2F%2Fteini.co&demo-image=https%3A%2F%2Fimages.unsplash.com%2Fphoto-1494256997604-768d1f608cac%3Fixid%3DMnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8%26ixlib%3Drb-1.2.1%26auto%3Dformat%26fit%3Dcrop%26w%3D1829%26q%3D80)\n\n## Usage\n\nOnce your store is up and running you definitly what to add your own products. Here is how to do this:\n\n### 1. Access the repository\n\nTo make changes you need to access the repository and change the actual source code. To do this you'll need the following tools (all of them are for free):\n\n- Git -> https://git-scm.com/\n- VSCode -> https://code.visualstudio.com/\n- Prisma Studio -> https://www.prisma.io/studio\n\nOnce you got everything installed open a terminal and type the following command:\n\n```bash\ngit clone https://github.com/username/reponame\n```\n\n> 💡 The repo url depends on your choosen service, username and repo name.\n\n### 2. Make changes to the product database\n\nOpen Prisma Studio and open the product.db file. It is located at the root level of your repo and called `products.db`. Once the database add, update or delete products.\n\n### 3. Add product images\n\nTeini holds all its static files like product images in the `public` folder. Product images in particular are store under `public/prodcuts/[productid]`. To add product images you just need to add a folder with the corresponding product-id (see your products.db) and put all product images in there.\n\n> 💡 Google recommends using the WebP as image format. You can convert your files here: https://cloudconvert.com/webp-converter\n\n### 3. Make changes to the store itself\n\nOpen a terminal and navigate (cd) to your local repository copy. Run this command:\n\n```bash\ncode .\n```\n\nNow VSCode should open and you can change what ever you want.\n\n### 4.Push your changes\n\nTo make your changes visible you need to run the following commands:\n\n```bash\ngit add .\ngit commit -m \"A message describing your work like; Added images for product 1.\"\ngit push\n```\n\nIf your go to https://vercel.com and open your project you should see that a deployment is started. If it is successfull you customers can see your changes. If it failed feel free to create an issue: https://github.com/zeekrey/teini/issues/new/choose\n\n### ...if you're a developer\n\nClone, Edit, Push. Do what ever you want.\n\n## Notes\n\nCredits for the used photos:\n\nProduct photos\nPhoto by Boxed Water Is Better on Unsplash\n\nSuccess Page photo\nPhoto by Jason Dent on Unsplash\n" }, { "path": "__mocks__/fileMock.js", "content": "module.exports = \"test-file-stub\";\n" }, { "path": "__tests__/api/products.http", "content": "GET http://localhost:3000/api/products HTTP/1.1\n\n###\n\nGET http://localhost:3000/api/products?page=1 HTTP/1.1\n\n###" }, { "path": "__tests__/unit/cart.test.tsx", "content": "/**\n * @jest-environment jsdom\n */\n\n/**\n * This test file should test the cart feature.\n * Currently, there are three scenarios to be tested:\n *\n * 1. Add a product to cart\n * 2. Change amount of a product in cart\n * 3. Remove product\n */\n\nimport React from \"react\";\nimport { render, fireEvent } from \"@testing-library/react\";\nimport CartPage, { getStaticProps } from \"../../pages/cart\";\nimport { Tmeta } from \"../../types\";\n\nimport { PrismaClient, Prisma } from \"@prisma/client\";\nimport { useCart, CartProvider } from \"../../lib/cart\";\n\nconst prisma = new PrismaClient();\n\nlet product: null | Required;\n\nconst TestWrapper: React.FunctionComponent<{\n product: Required;\n}> = ({ children, product }) => {\n const { cart, dispatch } = useCart();\n\n React.useEffect(() => {\n dispatch({\n type: \"addItem\",\n item: { product: product, images: [], count: 1 },\n });\n }, []);\n\n return <>{children};\n};\n\nbeforeAll(() => {\n // Otherwise useEffect hooks won't work: https://github.com/testing-library/react-testing-library/issues/215\n jest.spyOn(React, \"useEffect\").mockImplementation(React.useLayoutEffect);\n\n return new Promise(async (resolve) => {\n const _product = await prisma.product.findFirst({\n where: {\n name: {\n equals: \"The first product\",\n },\n },\n include: {\n brand: true,\n },\n });\n\n product = _product;\n\n resolve(product);\n });\n});\n\n// @ts-ignore\nafterAll(() => React.useEffect.mockRestore());\n\ndescribe(\"Test cart\", () => {\n it(\"should add a product to cart\", async () => {\n /**\n * Get the actual cart page props.\n */\n const { props } = (await getStaticProps({\n params: undefined,\n })) as unknown as {\n props: {\n meta: Tmeta;\n shippingOptions: Required[];\n };\n };\n\n const { queryByText } = render(\n \n [];\n })}\n />\n ,\n {\n wrapper: (props) => ,\n }\n );\n\n const productContainer = queryByText(\"The first product\");\n expect(productContainer).toBeInTheDocument();\n });\n\n it(\"should add a product of same type (count++)\", async () => {\n /**\n * Get the actual cart page props.\n */\n const { props } = (await getStaticProps({\n params: undefined,\n })) as unknown as {\n props: {\n meta: Tmeta;\n shippingOptions: Required[];\n };\n };\n\n const { getByText, getByTestId } = render(\n \n [];\n })}\n />\n ,\n {\n wrapper: (props) => ,\n }\n );\n\n fireEvent.click(getByText(\"+\"));\n\n const productCount = getByTestId(\"productCount\");\n expect(productCount.textContent).toEqual(\"2\");\n });\n\n it(\"should remove a product of same type (count--)\", async () => {\n /**\n * Get the actual cart page props.\n */\n const { props } = (await getStaticProps({\n params: undefined,\n })) as unknown as {\n props: {\n meta: Tmeta;\n shippingOptions: Required[];\n };\n };\n\n const { getByText, queryByText } = render(\n \n [];\n })}\n />\n ,\n {\n wrapper: (props) => ,\n }\n );\n\n fireEvent.click(getByText(\"-\"));\n\n // product shouldn't be visibile because count === 0\n const productContainer = queryByText(\"The first product\");\n expect(productContainer).not.toBeInTheDocument();\n });\n});\n" }, { "path": "__tests__/unit/productsDb.test.ts", "content": "import { PrismaClient } from \"@prisma/client\";\nconst prisma = new PrismaClient();\n\nafterAll(async () => {\n await prisma.$disconnect();\n});\n\ntest(\"product.db should have at least one product\", async () => {\n const allProducts = await prisma.product.findMany();\n\n expect(allProducts.length).toBeGreaterThan(0);\n});\n\ntest(\"product.db should have at least one product in stock\", async () => {\n const productsInStock = await prisma.product.findMany({\n where: { availability: \"inStock\" },\n });\n\n expect(productsInStock.length).toBeGreaterThan(0);\n});\n" }, { "path": "__tests__/unit/shipping.test.tsx", "content": "/**\n * @jest-environment jsdom\n */\n\n/**\n * This test file should test the shipping option feature.\n * Currently, there are three scenarios to be tested:\n *\n * 1. A product needs shipping\n * 2. A product doesn't need shipping\n * 3. Shipping costs are set to $0.00 because of isFreeFrom attribute\n */\n\nimport React from \"react\";\nimport { render } from \"@testing-library/react\";\nimport CartPage, { getStaticProps } from \"../../pages/cart\";\nimport { Tmeta } from \"../../types\";\n\nimport { PrismaClient, Prisma } from \"@prisma/client\";\nimport { useCart, CartProvider } from \"../../lib/cart\";\n\nconst prisma = new PrismaClient();\n\nlet products: Map<\n \"productWithShipping\" | \"productWithoutShipping\" | \"productHasFreeShipping\",\n Required\n> = new Map();\n\nconst TestWrapper: React.FunctionComponent<{\n product: Required;\n}> = ({ children, product }) => {\n const { cart, dispatch } = useCart();\n\n React.useEffect(() => {\n dispatch({\n type: \"addItem\",\n item: { product: product, images: [], count: 1 },\n });\n }, []);\n\n return
{children}
;\n};\n\nbeforeAll(() => {\n // Otherwise useEffect hooks won't work: https://github.com/testing-library/react-testing-library/issues/215\n jest.spyOn(React, \"useEffect\").mockImplementation(React.useLayoutEffect);\n\n return new Promise(async (resolve) => {\n const productWithShipping = await prisma.product.findFirst({\n where: {\n needsShipping: {\n equals: true,\n },\n },\n include: {\n brand: true,\n },\n });\n\n const productWithoutShipping = await prisma.product.findFirst({\n where: {\n needsShipping: {\n equals: false,\n },\n },\n include: {\n brand: true,\n },\n });\n\n const productHasFreeShipping = await prisma.product.findFirst({\n where: {\n price: {\n gt: 10000,\n },\n needsShipping: {\n equals: true,\n },\n },\n include: {\n brand: true,\n },\n });\n\n products.set(\n \"productWithShipping\",\n productWithShipping as unknown as Required\n );\n products.set(\n \"productWithoutShipping\",\n productWithoutShipping as unknown as Required\n );\n products.set(\n \"productHasFreeShipping\",\n productHasFreeShipping as unknown as Required\n );\n\n resolve(products);\n });\n});\n\n// @ts-ignore\nafterAll(() => React.useEffect.mockRestore());\n\ndescribe(\"Test shipping methods\", () => {\n it(\"should not show shipping options (product doesn't need shipping).\", async () => {\n /**\n * Get the actual cart page props.\n */\n const { props } = (await getStaticProps({\n params: undefined,\n })) as unknown as {\n props: {\n meta: Tmeta;\n shippingOptions: Required[];\n };\n };\n\n const { queryByText } = render(\n \n [];\n })}\n />\n ,\n {\n wrapper: CartProvider,\n }\n );\n\n const shippingOption = queryByText(\"Free Shipping\");\n\n expect(shippingOption).not.toBeInTheDocument();\n });\n\n it(\"should show shipping options with 0.00 as price.\", async () => {\n /**\n * Get the actual cart page props.\n */\n const { props } = (await getStaticProps({\n params: undefined,\n })) as unknown as {\n props: {\n meta: Tmeta;\n shippingOptions: Required[];\n };\n };\n\n const { queryAllByText } = render(\n \n [];\n })}\n />\n ,\n {\n wrapper: (props) => ,\n }\n );\n\n const shippingOptionPrice = queryAllByText(\"$ 0.00\");\n expect(shippingOptionPrice[0]).toBeInTheDocument();\n });\n\n it(\"should show shipping options (product needs shipping).\", async () => {\n /**\n * Get the actual cart page props.\n */\n const { props } = (await getStaticProps({\n params: undefined,\n })) as unknown as {\n props: {\n meta: Tmeta;\n shippingOptions: Required[];\n };\n };\n\n const { queryByText, debug } = render(\n \n [];\n })}\n />\n ,\n {\n wrapper: (props) => ,\n }\n );\n\n const shippingOption = queryByText(\"Free Shipping\");\n expect(shippingOption).toBeInTheDocument();\n });\n});\n" }, { "path": "components/Button.tsx", "content": "import { styled, keyframes } from \"../stitches.config\";\n\nconst Button = styled(\"button\", {\n all: \"unset\",\n background: \"$crimson3\",\n fontFamily: \"Work Sans, sans serif\",\n color: \"$crimson11\",\n padding: \"18px 24px\",\n borderRadius: \"1px\",\n fontSize: \"$3\",\n cursor: \"pointer\",\n boxShadow:\n \"0px 4px 8px rgba(0, 0, 0, 0.04), 0px 0px 2px rgba(0, 0, 0, 0.06), 0px 0px 1px rgba(0, 0, 0, 0.04)\",\n\n \"&:hover\": {\n background: \"$crimson4\",\n },\n\n \"&:focus\": {\n boxShadow: \"0px 0px 2px 0px $crimson11\",\n },\n\n '&:disabled': {\n background: '$crimson2',\n color: '$crimson6',\n cursor: 'wait'\n }\n});\n\nexport const Loading = () => {\n const skBouncedelay = keyframes({\n \"0%, 80%, 100%\": {\n transform: \"scale(0)\",\n },\n \"40%\": {\n transform: \"scale(1.0)\",\n },\n });\n const Spinner = styled(\"div\", {\n textAlign: \"center\",\n margin: '0 $3',\n\n \"& > div\": {\n width: \" 8px\",\n height: \"8px\",\n backgroundColor: \"$crimson11\",\n marginLeft: '4px',\n\n borderRadius: \"100%\",\n display: \"inline-block\",\n animation: `${skBouncedelay} 1.4s infinite ease-in-out both`,\n },\n\n \"div:nth-child(1)\": {\n animationDelay: \"-0.32s\",\n },\n\n \"div:nth-child(2)\": {\n animationDelay: \"-0.16s\",\n },\n });\n\n return (\n \n {[...Array(3).keys()].map((i) => (\n
\n ))}\n \n );\n};\n\nexport default Button;\n" }, { "path": "components/Footer.tsx", "content": "import { styled } from \"../stitches.config\";\nimport type { Tmeta } from \"../types\";\n\nconst Wrapper = styled(\"footer\", {\n padding: \"$4\",\n});\n\nconst Footer: React.FunctionComponent = ({ name, contact }) => {\n return (\n \n {name}\n

{contact}

\n \n );\n};\n\nexport default Footer;\n" }, { "path": "components/Layout.tsx", "content": "import { styled, Box } from \"../stitches.config\";\n\nconst LayoutWrapper = styled(\"div\", {\n background: \"$mauve1\",\n\n \"@small\": {\n padding: \"10% 10%\",\n },\n\n \"@medium\": {\n padding: \"10% 15%\",\n },\n\n \"@large\": {\n padding: \"5% 20%\",\n },\n});\n\nconst PageWrapper = styled(\"div\", {\n margin: \"0 $4\",\n borderLeft: \"1px solid $mauve4\",\n borderRight: \"1px solid $mauve4\",\n});\n\nconst Layout: React.FunctionComponent = ({ children }) => {\n return (\n \n \n \n \n {children}\n \n );\n};\n\nexport default Layout;\n" }, { "path": "components/MenuBar.tsx", "content": "import Link from \"next/link\";\nimport { styled, keyframes, Box } from \"../stitches.config\";\nimport { useCart } from \"../lib/cart\";\nimport {\n HomeIcon,\n ArchiveIcon,\n GearIcon,\n SunIcon,\n MoonIcon,\n} from \"@modulz/radix-icons\";\nimport * as Popover from \"@radix-ui/react-popover\";\nimport * as Switch from \"@radix-ui/react-switch\";\nimport { useTheme } from \"next-themes\";\nimport { useEffect, useRef, useState } from \"react\";\n\nconst scaleUp = keyframes({\n \"0%\": { transform: \"scale(1)\", background: \"$crimson10\" },\n \"50%\": { transform: \"scale(1.5)\" },\n \"100%\": { transform: \"scale(1)\" },\n});\n\nconst Wrapper = styled(\"div\", {\n paddingLeft: \"$4\",\n marginLeft: \"-$4\",\n paddingRight: \"$4\",\n marginRight: \"-$4\",\n borderBottom: \"1px solid $mauve4\",\n borderTop: \"1px solid $mauve4\",\n});\n\nconst MenuBarBox = styled(\"div\", {\n display: \"flex\",\n justifyContent: \"space-between\",\n alignItems: \"center\",\n boxShadow:\n \"0px 10px 20px rgba(0, 0, 0, 0.04), 0px 2px 6px rgba(0, 0, 0, 0.04), 0px 0px 1px rgba(0, 0, 0, 0.04)\",\n background: \"$mauve1\",\n\n \"&>svg\": {\n cursor: \"pointer\",\n color: \"$mauve11\",\n },\n});\n\nconst CartSizeIcon = styled(\"div\", {\n position: \"absolute\",\n bottom: \"-4px\",\n right: \"-8px\",\n background: \"$crimson1\",\n border: \"1px solid $mauve5\",\n width: \"16px\",\n height: \"16px\",\n fontSize: \"6px\",\n borderRadius: \"9999px\",\n display: \"grid\",\n placeContent: \"center\",\n\n variants: {\n animate: {\n true: {\n animation: `${scaleUp} 200ms`,\n },\n false: {},\n },\n },\n\n defaultVariants: {\n animate: false,\n },\n});\n\nconst Item = styled(\"div\", {\n flex: 1,\n display: \"grid\",\n placeContent: \"center\",\n padding: \"$4\",\n cursor: \"pointer\",\n\n \"&:hover\": {\n background: \"$mauve2\",\n },\n\n \"&:focus, &:active\": {\n boxShadow: \"0px 0px 2px 0px $mauve10\",\n },\n});\n\nconst StyledContent = styled(Popover.Content, {\n borderRadius: 1,\n padding: \"20px\",\n fontSize: 14,\n backgroundColor: \"$mauve1\",\n border: \"1px solid $mauve4\",\n color: \"black\",\n});\n\nconst StyledTrigger = styled(Popover.Trigger, {\n all: \"unset\",\n});\n\nconst StyledSwitch = styled(Switch.Root, {\n all: \"unset\",\n width: 42,\n height: 25,\n backgroundColor: \"$crimson8\",\n borderRadius: \"9999px\",\n position: \"relative\",\n WebkitTapHighlightColor: \"rgba(0, 0, 0, 0)\",\n \"&:focus\": { boxShadow: `0 0 0 2px $crimson9` },\n '&[data-state=\"checked\"]': { backgroundColor: \"$crimson9\" },\n});\n\nconst StyledThumb = styled(Switch.Thumb, {\n display: \"grid\",\n placeContent: \"center\",\n width: 21,\n height: 21,\n backgroundColor: \"$crimson4\",\n color: \"$crimson11\",\n borderRadius: \"9999px\",\n transition: \"transform 100ms\",\n transform: \"translateX(2px)\",\n willChange: \"transform\",\n '&[data-state=\"checked\"]': { transform: \"translateX(19px)\" },\n});\n\nconst Flex = styled(\"div\", { display: \"flex\" });\nconst Label = styled(\"label\", {\n color: \"$crimson12\",\n fontSize: 15,\n lineHeight: 1,\n userSelect: \"none\",\n});\n\nconst MenuBar: React.FunctionComponent = () => {\n const { cart } = useCart();\n const { theme, setTheme } = useTheme();\n const [animate, setAnimate] = useState(false);\n\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n {cart && (\n setAnimate(false)}\n >\n {cart.length}\n \n )}\n \n \n \n \n \n \n \n \n \n \n \n \n \n setTheme(theme === \"light\" ? \"dark\" : \"light\")}\n aria-label=\"Theme switch\"\n >\n \n {theme === \"light\" ? : }\n \n \n \n {/* */}\n {/* */}\n \n \n \n \n );\n};\n\nexport default MenuBar;\n" }, { "path": "components/PageHeadline.tsx", "content": "import { styled, Box } from \"../stitches.config\";\n\nconst Headline = styled(\"h1\", {\n all: \"unset\",\n color: \"$crimson12\",\n fontSize: \"36px\",\n lineHeight: \"34px\",\n fontFamily: \"Work Sans, sans serif\",\n});\n\nconst PageHeadline: React.FunctionComponent = ({ children }) => (\n \n {children}\n \n);\n\nexport default PageHeadline;\n" }, { "path": "components/ProductCard.tsx", "content": "import Link from \"next/link\";\nimport Image from \"next/image\";\nimport { styled, Box } from \"../stitches.config\";\nimport { Prisma } from \"@prisma/client\";\nimport { currencyCodeToSymbol } from \"../lib/stripeHelpers\";\n\nimport PlaceholderImage from \"../public/placeholder.png\";\n\nconst Wrapper = styled(\"div\", {\n display: \"flex\",\n background: \"$crimson1\",\n cursor: \"pointer\",\n\n a: {\n flex: 1,\n },\n});\n\nconst ProductName = styled(\"div\", {\n fontFamily: \"Work Sans, sans serif\",\n color: \"$crimson12\",\n fontSize: \"22px\",\n});\n\nconst ProductPrice = styled(\"div\", {\n display: \"grid\",\n placeContent: \"center\",\n});\n\nconst ProductBrand = styled(\"div\", {\n color: \"$crimson11\",\n fontSize: '12px',\n});\n\nconst ImageContainer = styled(\"div\", {\n position: \"relative\",\n height: \"240px\",\n width: \"100%\",\n});\n\nconst AnimatedImage = styled(Image, {\n transition: \".3s\",\n});\n\nconst ProductCard: React.FunctionComponent<{\n product: Required<\n Prisma.ProductUncheckedCreateInput & {\n brand: Prisma.BrandUncheckedCreateInput;\n }\n >;\n images?: {\n id: number;\n images: { paths: string[]; blurDataURLs: string[] };\n };\n}> = ({ product, images }) => {\n return (\n \n \n \n \n {images ? (\n \n ) : (\n \n )}\n \n \n
\n {product.brand.name}\n {product.name}\n
\n \n {currencyCodeToSymbol(product.currency)} {product.price / 100}\n \n \n \n \n \n );\n};\n\nexport default ProductCard;\n" }, { "path": "components/ProductCardCart.tsx", "content": "import Link from \"next/link\";\nimport Image from \"next/image\";\nimport { styled, Box } from \"../stitches.config\";\nimport { Prisma } from \"@prisma/client\";\nimport { useCart } from \"../lib/cart\";\nimport { currencyCodeToSymbol } from \"../lib/stripeHelpers\";\nimport PlaceholderImage from \"../public/placeholder.png\";\n\nimport type { CartItem } from \"../lib/cart\";\nimport { useEffect, useState, useCallback } from \"react\";\n\nconst Wrapper = styled(\"div\", {\n boxShadow:\n \"0px 4px 8px rgba(0, 0, 0, 0.04), 0px 0px 2px rgba(0, 0, 0, 0.06), 0px 0px 1px rgba(0, 0, 0, 0.04)\",\n borderRadius: \"1px\",\n display: \"flex\",\n background: \"$crimson1\",\n});\n\nconst ProductName = styled(\"strong\", {\n all: \"unset\",\n fontSize: \"18px\",\n lineHeight: \"18px\",\n color: \"$crimson12\",\n fontFamily: \"Work Sans, sans-serif\",\n});\n\nconst ProductPrice = styled(\"div\", {\n fontSize: \"20px\",\n lineHeight: \"20px\",\n color: \"$crimson12\",\n fontFamily: \"Work Sans, sans-serif\",\n});\n\nconst ProductDescription = styled(\"p\", {\n color: \"$mauve10\",\n fontSize: \"12px\",\n padding: 0,\n margin: 0,\n});\n\nconst CountButton = styled(\"button\", {\n all: \"unset\",\n width: 30,\n height: 30,\n background: \"$mauve3\",\n color: \"$mauve10\",\n borderRadius: \"$small\",\n display: \"inline-grid\",\n placeContent: \"center\",\n cursor: \"pointer\",\n\n \"&:hover\": {\n background: \"$mauve4\",\n },\n\n \"&:focus\": {\n boxShadow: \"0px 0px 2px 0px $mauve10\",\n },\n});\n\nconst ImageContainer = styled(\"a\", {\n all: \"unset\",\n position: \"relative\",\n height: \"130px\",\n width: \"110px\",\n cursor: \"pointer\",\n});\n\nconst ProductCardCart: React.FunctionComponent<{\n item: CartItem;\n cart: CartItem[];\n}> = ({ item }) => {\n const { cart, dispatch } = useCart();\n const { product, images } = item;\n\n const count = cart.find((p) => p.product.id === item.product.id)?.count ?? 0;\n\n const handleAddItem = () => {\n dispatch({\n type: \"addItem\",\n item: { product: product, images: [...(images ?? [])], count: 1 },\n });\n };\n\n const handleRemoveItem = () => {\n dispatch({\n type: \"removeItem\",\n item: { product: product, images: [...(images ?? [])], count: 1 },\n });\n };\n return (\n \n \n \n \n {images?.length ? (\n \n ) : (\n \n )}\n \n \n \n \n {product.name}\n \n {product.description.substr(0, 40)}...\n \n \n {currencyCodeToSymbol(product.currency)} {product.price / 100}\n \n \n \n +\n \n {count}\n \n -\n \n \n \n \n );\n};\n\nexport default ProductCardCart;\n" }, { "path": "jest.config.js", "content": "module.exports = {\n collectCoverageFrom: [\n \"**/*.{js,jsx,ts,tsx}\",\n \"!**/*.d.ts\",\n \"!**/node_modules/**\",\n ],\n moduleNameMapper: {\n /* Handle CSS imports (with CSS modules)\n https://jestjs.io/docs/webpack#mocking-css-modules */\n // '^.+\\\\.module\\\\.(css|sass|scss)$': 'identity-obj-proxy',\n\n // Handle CSS imports (without CSS modules)\n // '^.+\\\\.(css|sass|scss)$': '/__mocks__/styleMock.js',\n\n /* Handle image imports\n https://jestjs.io/docs/webpack#handling-static-assets */\n '^.+\\\\.(jpg|jpeg|png|gif|webp|svg)$': '/__mocks__/fileMock.js',\n },\n testPathIgnorePatterns: [\"/node_modules/\", \"/.next/\"],\n transform: {\n /* Use babel-jest to transpile tests with the next/babel preset\n https://jestjs.io/docs/configuration#transform-objectstring-pathtotransformer--pathtotransformer-object */\n \"^.+\\\\.(js|jsx|ts|tsx)$\": [\"babel-jest\", { presets: [\"next/babel\"] }],\n },\n transformIgnorePatterns: [\n \"/node_modules/\",\n \"^.+\\\\.module\\\\.(css|sass|scss)$\",\n ],\n setupFilesAfterEnv: ['/jest.setup.js']\n};\n" }, { "path": "jest.setup.js", "content": "import \"@testing-library/jest-dom/extend-expect\";\n\njest.mock(\"next/image\", () => ({\n __esModule: true,\n default: (props) => {\n // Use div instead of img tag. Img tag would require props.\n // eslint-disable-next-line jsx-a11y/alt-text, @next/next/no-img-element\n return
;\n },\n}));\n" }, { "path": "lib/cart.tsx", "content": "import { Prisma } from \"@prisma/client\";\nimport {\n createContext,\n useReducer,\n FunctionComponent,\n useContext,\n} from \"react\";\n\nexport type CartItem = {\n product: Required;\n count: number;\n images?: { path: string; blurDataURL: string }[];\n};\n\ntype CartAction =\n | { type: \"removeItem\"; item: CartItem }\n | { type: \"addItem\"; item: CartItem }\n | { type: \"clearCart\" };\ntype Dispatch = (action: CartAction) => void;\n\ntype CartState = CartItem[] | [];\n\nconst CartContext = createContext<\n { cart: CartState; dispatch: Dispatch } | undefined\n>(undefined);\n\nconst cartReducer = (cart: CartState, action: CartAction) => {\n switch (action.type) {\n case \"addItem\": {\n // Find the index of the given product\n const foundProductIndex = cart.findIndex(\n (_item) => _item.product.id === action.item.product.id\n );\n\n // If the product was found, increse the count by 1\n if (foundProductIndex > -1) {\n cart[foundProductIndex].count++;\n\n // Return a copy of the array, otherwise react won't rerender.\n return [...cart];\n }\n // If the product wasn't found, add it to the cart array\n else {\n return [...cart, { ...action.item, count: 1 }];\n }\n }\n case \"removeItem\": {\n // Find the index of the given product\n const foundProductIndex = cart.findIndex(\n (_item) => _item.product.id === action.item.product.id\n );\n\n // If the product has a count > 1, reduce the count by one\n if (foundProductIndex > -1 && cart[foundProductIndex].count > 1) {\n cart[foundProductIndex].count--;\n // Return a copy of the array, otherwise react won't rerender.\n return [...cart];\n }\n // If the product has a count === 1, remove the product from cart\n else {\n cart.splice(foundProductIndex, 1);\n // Return a copy of the array, otherwise react won't rerender.\n return [...cart];\n }\n }\n case \"clearCart\": {\n return []\n }\n default: {\n throw new Error(`Unhandled action type: ${JSON.stringify(action)}`);\n }\n }\n};\n\nconst CartProvider: FunctionComponent = ({ children }) => {\n const [cart, dispatch] = useReducer(cartReducer, []);\n\n const value = { cart, dispatch };\n\n return {children};\n};\n\nconst useCart = () => {\n const context = useContext(CartContext);\n\n if (context === undefined)\n throw new Error(\"useCart must be used within CartProvider\");\n\n // Get the total price for all products in cart\n // @ts-ignore\n const productsTotal: number = context.cart.reduce(\n (total: number, item: CartItem) => total + item.product.price * item.count,\n 0\n );\n\n const needsShipping = !!context.cart.filter(\n (item) => item.product.needsShipping\n ).length;\n\n return { ...context, productsTotal, needsShipping };\n};\n\nexport { CartProvider, useCart };\n" }, { "path": "lib/fetcher.tsx", "content": "export async function fetchGetJSON(url: string) {\n try {\n const data = await fetch(url).then((res) => res.json());\n return data;\n } catch (err) {\n console.error(err);\n throw new Error();\n }\n}\n\nexport async function fetchPostJSON(url: string, data?: {}) {\n try {\n // Default options are marked with *\n const response = await fetch(url, {\n method: \"POST\", // *GET, POST, PUT, DELETE, etc.\n mode: \"cors\", // no-cors, *cors, same-origin\n cache: \"no-cache\", // *default, no-cache, reload, force-cache, only-if-cached\n credentials: \"same-origin\", // include, *same-origin, omit\n headers: {\n \"Content-Type\": \"application/json\",\n // 'Content-Type': 'application/x-www-form-urlencoded',\n },\n redirect: \"follow\", // manual, *follow, error\n referrerPolicy: \"no-referrer\", // no-referrer, *client\n body: JSON.stringify(data || {}), // body data type must match \"Content-Type\" header\n });\n return await response.json(); // parses JSON response into native JavaScript objects\n } catch (err) {\n console.error(err);\n throw new Error();\n }\n}\n" }, { "path": "lib/mapToObject.tsx", "content": "export const replacer = (key: any, value: any) => {\n if (value instanceof Map) {\n return {\n dataType: \"Map\",\n value: Array.from(value.entries()), // or with spread: value: [...value]\n };\n } else {\n return value;\n }\n};\n\nexport const reviver = (key: any, value: any) => {\n if (typeof value === \"object\" && value !== null) {\n if (value.dataType === \"Map\") {\n return new Map(value.value);\n }\n }\n return value;\n};\n" }, { "path": "lib/stripeHelpers.tsx", "content": "import { Prisma } from \"@prisma/client\";\nimport type { CartItem } from \"./cart\";\n\nexport const cartItemToLineItem = ({\n cartItem,\n images,\n}: {\n cartItem: CartItem;\n images: string[];\n}) => {\n return {\n price_data: {\n currency: cartItem.product.currency, //ISO Code https://www.six-group.com/dam/download/financial-information/data-center/iso-currrency/amendments/lists/list_one.xml\n unit_amount_decimal: cartItem.product.price,\n product_data: {\n name: cartItem.product.name,\n description: cartItem.product.description,\n images: [\"urlToImage\"],\n // meta: { key: \"value\" },\n // tax_code: \"dqwd\", // https://stripe.com/docs/tax/tax-codes\n },\n },\n adjustable_quantity: {\n enabled: true,\n },\n // dynamic_tax_rates\n quantity: cartItem.count,\n };\n};\n\n/**\n * This is a singleton to ensure we only instantiate Stripe once.\n * Use @stripe/stripe-js/pure to delay loading of Stripe.js until Checkout.\n */\nimport { loadStripe } from \"@stripe/stripe-js/pure\";\nimport type { Stripe } from \"@stripe/stripe-js\";\n\nlet stripePromise: Promise;\nexport const getStripe = () => {\n if (!stripePromise) {\n stripePromise = loadStripe(process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY!);\n }\n return stripePromise;\n};\n\nconst currencies = new Map([\n [\"usd\", \"$\"],\n [\"eur\", \"€\"],\n]);\n\nexport const currencyCodeToSymbol = (currencyCode: string) => {\n return currencies.get(currencyCode);\n};\n" }, { "path": "license.md", "content": "MIT License\n\nCopyright (c) 2021 zeekrey\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE." }, { "path": "next-env.d.ts", "content": "/// \n/// \n/// \n\n// NOTE: This file should not be edited\n// see https://nextjs.org/docs/basic-features/typescript for more information.\n" }, { "path": "next.config.js", "content": "/** @type {import('next').NextConfig} */\nmodule.exports = {\n reactStrictMode: true,\n serverRuntimeConfig: {\n PROJECT_ROOT: __dirname,\n },\n swcMinify: true,\n};\n" }, { "path": "package.json", "content": "{\n \"name\": \"my-app\",\n \"version\": \"0.2.0\",\n \"private\": true,\n \"scripts\": {\n \"dev\": \"next dev\",\n \"build\": \"next build\",\n \"start\": \"next start\",\n \"lint\": \"next lint\",\n \"test\": \"jest\",\n \"release:patch\": \"release patch\",\n \"release:minor\": \"release minor\",\n \"release:major\": \"release major\",\n \"gh:release\": \"gh release create\"\n },\n \"dependencies\": {\n \"@modulz/radix-icons\": \"^4.0.0\",\n \"@prisma/client\": \"^3.4.1\",\n \"@radix-ui/colors\": \"^0.1.7\",\n \"@radix-ui/react-popover\": \"^0.1.1\",\n \"@radix-ui/react-radio-group\": \"^0.1.1\",\n \"@radix-ui/react-switch\": \"^0.1.1\",\n \"@stitches/react\": \"^1.2.5\",\n \"@stripe/stripe-js\": \"^1.21.1\",\n \"blurhash\": \"^1.1.4\",\n \"next\": \"12.0.3\",\n \"next-seo\": \"^4.28.1\",\n \"next-themes\": \"^0.0.15\",\n \"plaiceholder\": \"^2.2.0\",\n \"react\": \"17.0.2\",\n \"react-dom\": \"17.0.2\",\n \"sharp\": \"^0.29.2\",\n \"stripe\": \"^8.186.1\",\n \"swr\": \"^1.0.1\"\n },\n \"devDependencies\": {\n \"@testing-library/jest-dom\": \"^5.15.0\",\n \"@testing-library/react\": \"^12.1.2\",\n \"@types/jest\": \"^27.0.2\",\n \"@types/react\": \"17.0.34\",\n \"babel-jest\": \"^27.3.1\",\n \"eslint\": \"7.32.0\",\n \"eslint-config-next\": \"12.0.3\",\n \"eslint-config-prettier\": \"^8.3.0\",\n \"jest\": \"^27.3.1\",\n \"prettier\": \"2.4.1\",\n \"prisma\": \"^3.4.1\",\n \"react-test-renderer\": \"^17.0.2\",\n \"release\": \"^6.3.0\",\n \"ts-node\": \"^10.4.0\",\n \"typescript\": \"4.4.4\"\n },\n \"prisma\": {\n \"seed\": \"ts-node --compiler-options {\\\"module\\\":\\\"CommonJS\\\"} prisma/seed.ts\"\n }\n}\n" }, { "path": "pages/_app.tsx", "content": "import type { NextPage } from \"next\";\nimport type { AppProps } from \"next/app\";\nimport { globalStyles, darkTheme } from \"../stitches.config\";\nimport { ThemeProvider } from \"next-themes\";\nimport { IdProvider } from \"@radix-ui/react-id\";\nimport { CartProvider } from \"../lib/cart\";\n\ntype NextPageWithLayout = NextPage & {\n layout: React.FunctionComponent;\n};\n\ntype AppPropsWithLayout = AppProps & {\n Component: NextPageWithLayout;\n};\n\nfunction MyApp({ Component, pageProps }: AppPropsWithLayout) {\n const PageLayout = Component.layout ?? (({ children }) => children);\n globalStyles();\n return (\n \n \n \n \n \n \n \n \n \n );\n}\nexport default MyApp;\n" }, { "path": "pages/_document.tsx", "content": "// eslint-disable-next-line @next/next/no-document-import-in-page\nimport Document, { Html, Head, Main, NextScript } from \"next/document\";\nimport { getCssText } from \"../stitches.config\";\n\nclass MyDocument extends Document {\n render() {\n return (\n \n \n \n \n \n \n
\n \n \n \n );\n }\n}\n\nexport default MyDocument;\n" }, { "path": "pages/api/checkout_sessions/[id].ts", "content": "import { NextApiRequest, NextApiResponse } from \"next\";\nimport Stripe from \"stripe\";\n\nconst stripe = new Stripe(process.env.STRIPE_SECRET_KEY!, {\n apiVersion: \"2020-08-27\",\n});\n\nexport default async function handler(\n req: NextApiRequest,\n res: NextApiResponse\n) {\n const id: string = req.query.id as string;\n try {\n if (!id.startsWith(\"cs_\")) {\n throw Error(\"Incorrect CheckoutSession ID.\");\n }\n const checkout_session: Stripe.Checkout.Session =\n await stripe.checkout.sessions.retrieve(id, {\n expand: [\"payment_intent\"],\n });\n\n res.status(200).json(checkout_session);\n } catch (err) {\n console.error(err);\n res.status(500).json({ statusCode: 500, message: \"Something went wrong!\" });\n }\n}\n" }, { "path": "pages/api/checkout_sessions/index.ts", "content": "import type { NextApiRequest, NextApiResponse } from \"next\";\n\nconst stripe = require(\"stripe\")(process.env.STRIPE_SECRET_KEY);\n\ntype ResponseData = {\n name: string;\n};\n\nexport default async function handler(\n req: NextApiRequest,\n res: NextApiResponse\n) {\n if (req.method === \"POST\") {\n const { line_items } = req.body;\n\n try {\n const session = await stripe.checkout.sessions.create({\n line_items,\n payment_method_types: [\"card\"],\n mode: \"payment\",\n billing_address_collection: \"required\",\n shipping_address_collection: {\n allowed_countries: [\"DE\", \"US\"],\n },\n success_url: `${req.headers.origin}/confirmation/?success=true&session_id={CHECKOUT_SESSION_ID}`,\n cancel_url: `${req.headers.origin}/?canceled=true`,\n });\n\n res.status(200).json(session);\n } catch (err) {\n console.error(\"Something went wront during Stripe session creation.\");\n console.error(err);\n res.status(500).end();\n }\n } else {\n res.setHeader(\"Allow\", \"POST\");\n res.status(405).end(\"Method Not Allowed\");\n }\n}\n" }, { "path": "pages/api/products/index.ts", "content": "import { NextApiRequest, NextApiResponse } from \"next\";\nimport { PrismaClient } from \"@prisma/client\";\nimport { getPlaiceholder } from \"plaiceholder\";\nimport path from \"path\";\nimport getConfig from \"next/config\";\n\nimport { promises as fs } from \"fs\";\n\nconst prisma = new PrismaClient({\n datasources: {\n db: {\n url: `file:${path.join(\n getConfig().serverRuntimeConfig.PROJECT_ROOT,\n \"products.db\"\n )}`,\n },\n },\n});\n\nexport default async function handler(\n req: NextApiRequest,\n res: NextApiResponse\n) {\n if (req.method === \"GET\") {\n const page = (req.query.page as string) || \"0\";\n\n const pageSize = 6;\n\n const results = await prisma.product.findMany({\n where: {\n availability: {\n not: \"notVisible\",\n },\n },\n include: {\n brand: true,\n },\n skip: pageSize * parseInt(page),\n take: pageSize,\n });\n\n let allImagePaths = [];\n\n for (const product of results) {\n const imagesDirectory = path.join(\n process.cwd(),\n `public/products/${product.id}`\n );\n\n try {\n const productImagePaths = await fs.readdir(imagesDirectory);\n\n const blurDataURLs = await Promise.all(\n productImagePaths.map(async (src) => {\n const { base64 } = await getPlaiceholder(\n `/products/${product.id}/${src}`\n );\n return base64;\n })\n ).then((values) => values);\n\n allImagePaths.push({\n id: product.id,\n images: {\n paths: productImagePaths.map(\n (path) => `/products/${product.id}/${path}`\n ),\n blurDataURLs: blurDataURLs,\n },\n });\n } catch (error) {\n console.warn(\n `Image ${product.name} has no images under /public/product/[id]!`\n );\n }\n }\n res.status(200).json(\n JSON.stringify({\n products: results.map((product) => ({\n ...product,\n // Date objects needs to be converted to strings because the props object will be serialized as JSON\n createdAt: product.createdAt.toString(),\n updatedAt: product.updatedAt.toString(),\n })),\n images: await Promise.all(allImagePaths),\n })\n );\n } else {\n // 501 Not Implemented\n res.status(501).end();\n }\n}\n" }, { "path": "pages/cart.tsx", "content": "import Button, { Loading } from \"../components/Button\";\nimport { styled, Box } from \"../stitches.config\";\nimport { PrismaClient, Prisma } from \"@prisma/client\";\nimport { useCart } from \"../lib/cart\";\nimport { currencyCodeToSymbol } from \"../lib/stripeHelpers\";\nimport ProductCardCart from \"../components/ProductCardCart\";\nimport { getStripe, cartItemToLineItem } from \"../lib/stripeHelpers\";\nimport Layout from \"../components/Layout\";\nimport PageHeadline from \"../components/PageHeadline\";\nimport Footer from \"../components/Footer\";\nimport { GetStaticProps, NextPage } from \"next\";\nimport { Tmeta } from \"../types\";\nimport MenuBar from \"../components/MenuBar\";\nimport { NextSeo } from \"next-seo\";\nimport { useEffect, useState } from \"react\";\nimport * as RadioGroup from \"@radix-ui/react-radio-group\";\n\nconst prisma = new PrismaClient();\n\nexport const getStaticProps: GetStaticProps = async () => {\n /**\n * Get shop meta data from env\n */\n\n const allShippingOptions = await prisma.shippingCode.findMany({});\n\n const {\n headline = \"Teini is the most smallest shop ever\",\n subheadline = \"It gets you starting. Without budget. Without the ecommerce complexity you normally see.\",\n contact = \"Twitter: @zeekrey\",\n name = \"Teini\",\n } = process.env;\n\n /**\n * Get all shipping options\n */\n\n return {\n props: {\n meta: {\n headline,\n subheadline,\n contact,\n name,\n },\n shippingOptions: allShippingOptions,\n },\n };\n};\n\nconst ProductList = styled(\"div\", {\n paddingBottom: \"$4\",\n display: \"grid\",\n gap: \"$4\",\n\n \"@small\": {\n gridTemplateColumns: \"repeat(2, 1fr)\",\n },\n\n \"@medium\": {\n gap: \"$5\",\n },\n\n \"@large\": {\n gap: \"40px\",\n },\n});\n\nconst ShippingOptionRadioGroup = styled(RadioGroup.Root, {\n display: \"flex\",\n flexDirection: \"column\",\n});\n\nconst ShippingOption = styled(RadioGroup.Item, {\n all: \"unset\",\n display: \"flex\",\n background: \"$crimson1\",\n flex: 1,\n padding: \"$2\",\n cursor: \"pointer\",\n alignItems: \"center\",\n\n transition: \"all 0.2s\",\n\n \"&:hover\": {\n background: \"$crimson2\",\n },\n\n color: \"$mauve10\",\n\n \"&[data-state='checked']\": {\n color: \"$mauve12\",\n },\n});\n\nconst ProductPrice = styled(\"div\", {\n fontSize: \"20px\",\n lineHeight: \"20px\",\n fontFamily: \"Work Sans, sans-serif\",\n});\n\nconst ShippingOptionIndicator = styled(RadioGroup.Indicator, {\n display: \"grid\",\n fontSize: \"$1\",\n fontFamily: \"Work Sans\",\n borderRadius: \"$small\",\n background: \"$mauve5\",\n color: \"$mauve12\",\n placeContent: \"center\",\n padding: \"$1 $2\",\n marginRight: \"$2\",\n});\n\nconst CartPage: NextPage<{\n meta: Tmeta;\n shippingOptions: Required[];\n}> = ({ meta, shippingOptions }) => {\n const { cart, productsTotal, needsShipping } = useCart();\n const [isLoading, setIsLoading] = useState(false);\n const [shippingOption, setShippingOption] = useState<\n undefined | false | Required\n >(undefined);\n const [total, setTotal] = useState(productsTotal);\n\n useEffect(() => {\n if (shippingOption) setTotal(productsTotal + shippingOption.price);\n }, [shippingOption, productsTotal]);\n\n const calcShipping = (value: string) => {\n // Get the whole shippingOption object for the provided value\n const selectedShippingOption = shippingOptions.find(\n (shippingOption) => shippingOption.name === value\n );\n\n // If the cart sum is bigger than 'isFreeFrom' set the shipping costs to 0, otherwise set the shipping costs.\n if (productsTotal >= selectedShippingOption!.isFreeFrom)\n setShippingOption({ ...selectedShippingOption!, price: 0 });\n else setShippingOption(selectedShippingOption!);\n };\n\n const handleCheckout = async () => {\n setIsLoading(true);\n const stripe = await getStripe();\n const lineItems = [...cart.values()].map((item) =>\n cartItemToLineItem({ cartItem: item, images: [\"\"] })\n );\n\n // Create a line item for shipping costs if they exist\n const lineItemsWithShipping = shippingOption\n ? [\n {\n price_data: {\n currency: \"usd\",\n unit_amount_decimal: shippingOption?.price,\n product_data: {\n name: shippingOption?.name,\n },\n },\n quantity: 1,\n },\n ...lineItems,\n ]\n : lineItems;\n\n const response = await fetch(\"/api/checkout_sessions\", {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n },\n body: JSON.stringify({\n line_items: lineItemsWithShipping,\n }),\n });\n\n const session = await response.json();\n\n const { error } = await stripe!.redirectToCheckout({\n sessionId: session.id,\n });\n error && console.warn(error.message);\n };\n\n return (\n <>\n \n \n Cart\n \n To protect you and us the checkout will be processed by Stripe.\n \n <>\n {cart.length ? (\n <>\n \n {cart.map((item) => (\n \n ))}\n \n {needsShipping && (\n
\n \n Shipping:\n \n calcShipping(value)}\n >\n {shippingOptions.map((shippingOption) => (\n \n \n \n {shippingOption.name}{\" \"}\n \n \n {shippingOption.description}\n \n \n \n SELECTED\n \n \n {productsTotal >= shippingOption.isFreeFrom\n ? \"$ 0.00\"\n : `$ ${shippingOption.price / 100}`}\n \n \n ))}\n \n
\n )}\n \n
\n \n Total:\n {/* Get the currency code of the first item for now. */}\n \n \n {currencyCodeToSymbol(cart[0].product.currency)} {total / 100}\n \n
\n \n {isLoading ? : \"Buy now\"}\n \n \n \n ) : (\n
Go and add some items to your cart!
\n )}\n \n