initial commit

Author: julianbenegas

.babelrc

@@ -0,0 +1,22 @@
+{
+  "plugins": [
+    [
+      "@babel/plugin-proposal-optional-chaining",
+      {
+        "loose": true
+      }
+    ]
+  ],
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "node": "current"
+        }
+      }
+    ],
+    "@babel/preset-typescript",
+    "@babel/preset-react"
+  ]
+}

.github/workflows/test.yml

@@ -0,0 +1,32 @@
+name: Test
+
+on: push
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+
+      - name: Get yarn cache
+        id: yarn-cache
+        run: echo "::set-output name=dir::$(yarn cache dir)"
+
+      - uses: actions/cache@v1
+        with:
+          path: ${{ steps.yarn-cache.outputs.dir }}
+          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-yarn-
+
+      - uses: actions/setup-node@v1
+        with:
+          node-version: 14.x
+
+      - name: yarn install
+        run: yarn
+        env:
+          CI: true
+
+      - name: Run test
+        run: yarn test

.gitignore

@@ -0,0 +1,4 @@
+.DS_Store
+node_modules
+dist
+.next

README.md

@@ -0,0 +1 @@
+# next-shopify

package.json

@@ -0,0 +1,56 @@
+{
+  "name": "next-shopify",
+  "version": "0.0.1",
+  "main": "./dist/index.js",
+  "module": "./dist/index.modern.js",
+  "types": "./dist/index.d.ts",
+  "source": "./src/index.tsx",
+  "license": "MIT",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "prepublish": "yarn build",
+    "build": "microbundle --jsx React.createElement --compress --no-sourcemap",
+    "test": "jest"
+  },
+  "dependencies": {},
+  "peerDependencies": {
+    "next": "*",
+    "react": "*",
+    "react-dom": "*",
+    "react-query": "*",
+    "shopify-buy": "*"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.13.10",
+    "@babel/plugin-proposal-optional-chaining": "^7.11.0",
+    "@babel/preset-env": "^7.13.10",
+    "@babel/preset-react": "^7.12.13",
+    "@babel/preset-typescript": "^7.13.0",
+    "@testing-library/react": "^11.2.5",
+    "@types/jest": "^26.0.21",
+    "@types/next": "^9.0.0",
+    "@types/react": "^16.9.53",
+    "@types/shopify-buy": "^2.10.7",
+    "babel-jest": "^26.6.3",
+    "jest": "^26.6.3",
+    "microbundle": "^0.12.3",
+    "prettier": "^2.2.1",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
+    "react-query": "^3.21.0",
+    "shopify-buy": "^2.11.0",
+    "typescript": "^4.0.3"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/basementstudio/next-shopify.git"
+  },
+  "prettier": {
+    "semi": false,
+    "singleQuote": true,
+    "trailingComma": "none",
+    "arrowParens": "avoid"
+  }
+}

src/client.tsx

@@ -0,0 +1,180 @@
+import React from 'react'
+import { useMutation, useQuery, useQueryClient } from 'react-query'
+import { useToggleState, ToggleState } from './utils'
+
+type LineItem = {
+  id: string
+  title: string
+  quantity: number
+  variant: {
+    image: { src: string; altText?: string }
+    price: string
+    selectedOptions: { name: string; value: string }[]
+  }
+}
+
+export type Cart = Omit<any, 'checkoutUrl' | 'lineItems'> & {
+  webUrl: string
+  lineItems: LineItem[]
+}
+
+type Context = {
+  cartToggleState: ToggleState
+  cart: Cart | undefined
+  onAddLineItem: (vars: {
+    variantId: string
+    quantity: number
+  }) => Promise<void>
+  onRemoveLineItem: (vars: { variantId: string }) => Promise<void>
+  onUpdateLineItem: (vars: {
+    variantId: string
+    quantity: number
+  }) => Promise<void>
+}
+
+const ShopifyContext = React.createContext<Context | undefined>(undefined)
+
+const getQueryKey = (checkoutId: string | null) => ['checkout', checkoutId]
+
+export const ShopifyContextProvider = ({
+  children
+}: {
+  children?: React.ReactNode
+}) => {
+  const cartToggleState = useToggleState()
+  const [localStorageCheckoutId, setLocalStorageCheckoutId] = React.useState<
+    string | null
+  >(null)
+  const queryClient = useQueryClient()
+
+  const queryKey = React.useMemo(() => getQueryKey(localStorageCheckoutId), [
+    localStorageCheckoutId
+  ])
+
+  React.useEffect(() => {
+    const checkoutId = localStorage.getItem('checkout-id')
+    if (checkoutId) setLocalStorageCheckoutId(checkoutId)
+    else {
+      fetch('/api/checkout').then(async res => {
+        const { checkout } = await res.json()
+        const checkoutId = checkout.id.toString()
+        queryClient.setQueryData(['checkout', checkoutId], checkout)
+        localStorage.setItem('checkout-id', checkoutId)
+        setLocalStorageCheckoutId(checkoutId)
+      })
+    }
+  }, [queryClient])
+
+  const { data: cart } = useQuery<Cart>(queryKey, {
+    enabled: !!localStorageCheckoutId,
+    queryFn: async () => {
+      const res = await fetch(`/api/checkout/${localStorageCheckoutId}`)
+      const { checkout } = await res.json()
+      const checkoutId = checkout.id.toString()
+      if (checkoutId !== localStorageCheckoutId) {
+        // the checkout was invalid
+        localStorage.setItem('checkout-id', checkoutId)
+        setLocalStorageCheckoutId(checkoutId)
+        queryClient.setQueryData(getQueryKey(checkoutId), checkout)
+      }
+      return checkout
+    }
+  })
+
+  const { mutateAsync: onAddLineItem } = useMutation({
+    mutationFn: async ({
+      variantId,
+      quantity
+    }: {
+      variantId: string
+      quantity: number
+    }) => {
+      const res = await fetch(`/api/checkout/${localStorageCheckoutId}`, {
+        method: 'POST',
+        body: JSON.stringify({ variantId, quantity }),
+        headers: {
+          'content-type': 'application/json'
+        }
+      })
+      const { checkout } = await res.json()
+      return checkout
+    },
+    onSuccess: newCheckout => {
+      queryClient.setQueryData(queryKey, newCheckout)
+    },
+    // Always refetch after error or success:
+    onSettled: () => {
+      queryClient.invalidateQueries(queryKey)
+    }
+  })
+
+  const { mutateAsync: onUpdateLineItem } = useMutation({
+    mutationFn: async ({
+      variantId,
+      quantity
+    }: {
+      variantId: string
+      quantity: number
+    }) => {
+      const res = await fetch(`/api/checkout/${localStorageCheckoutId}`, {
+        method: 'PUT',
+        body: JSON.stringify({ variantId, quantity, putAction: 'update' }),
+        headers: {
+          'content-type': 'application/json'
+        }
+      })
+      const { checkout } = await res.json()
+      return checkout
+    },
+    onSuccess: newCheckout => {
+      queryClient.setQueryData(queryKey, newCheckout)
+    },
+    // Always refetch after error or success:
+    onSettled: () => {
+      queryClient.invalidateQueries(queryKey)
+    }
+  })
+
+  const { mutateAsync: onRemoveLineItem } = useMutation({
+    mutationFn: async ({ variantId }: { variantId: string }) => {
+      const res = await fetch(`/api/checkout/${localStorageCheckoutId}`, {
+        method: 'PUT',
+        body: JSON.stringify({ variantId, putAction: 'remove' }),
+        headers: {
+          'content-type': 'application/json'
+        }
+      })
+      const { checkout } = await res.json()
+      return checkout
+    },
+    onSuccess: newCheckout => {
+      queryClient.setQueryData(queryKey, newCheckout)
+    },
+    // Always refetch after error or success:
+    onSettled: () => {
+      queryClient.invalidateQueries(queryKey)
+    }
+  })
+
+  return (
+    <ShopifyContext.Provider
+      value={{
+        cart,
+        cartToggleState,
+        onAddLineItem,
+        onRemoveLineItem,
+        onUpdateLineItem
+      }}
+    >
+      {children}
+    </ShopifyContext.Provider>
+  )
+}
+
+export const useShopify = () => {
+  const ctx = React.useContext(ShopifyContext)
+  if (ctx === undefined) {
+    throw new Error('useShopify must be used below <ShopifyContextProvider />')
+  }
+  return ctx
+}

src/index.tsx

@@ -0,0 +1,2 @@
+export { ShopifyContextProvider, useShopify, Cart } from './client'
+export { handleShopify } from './server'

src/lib/api-responses.ts

@@ -0,0 +1,50 @@
+import { NextApiResponse } from 'next'
+
+// Some helpers for usual http responses
+
+const formatError = (e: unknown) => {
+  try {
+    if (typeof e === 'string' ? { message: e } : e) {
+      switch (typeof e) {
+        case 'string':
+          return { message: e }
+        default:
+        case 'object': {
+          const anyError = e as any
+          return { message: anyError.message, code: anyError.code }
+        }
+      }
+    }
+  } catch (error) {
+    return { message: 'An unknown error ocurred.' }
+  }
+}
+
+function success(res: NextApiResponse, json: { [key: string]: any } = {}) {
+  return res.status(200).json(json)
+}
+
+function badRequest(res: NextApiResponse, error: unknown = 'Bad Request') {
+  console.error(error)
+  return res.status(400).json({ error: formatError(error) })
+}
+
+function notAuthorized(
+  res: NextApiResponse,
+  error: unknown = 'Not Authorized'
+) {
+  console.error(error)
+  return res.status(401).json({ error: formatError(error) })
+}
+
+function notFound(res: NextApiResponse, error: unknown = 'Not Found') {
+  console.error(error)
+  return res.status(404).json({ error: formatError(error) })
+}
+
+function internalServerError(res: NextApiResponse, error: unknown, code = 500) {
+  console.error(error)
+  return res.status(code).json({ error: formatError(error) })
+}
+
+export { success, badRequest, notAuthorized, notFound, internalServerError }

src/lib/shopify.ts

@@ -0,0 +1,12 @@
+import Client from 'shopify-buy'
+
+const domain = process.env.NEXT_PUBLIC_SHOPIFY_DOMAIN
+const storefrontAccessToken = process.env.SHOPIFY_STOREFRONT_ACCESS_TOKEN
+
+if (typeof domain !== 'string' || typeof storefrontAccessToken !== 'string') {
+  throw new Error(
+    `domain (${domain}) and storefrontAccessToken (${storefrontAccessToken}) must be strings`
+  )
+}
+
+export const client = Client.buildClient({ domain, storefrontAccessToken })