upgrade packages and update deprecated shopify API

ndimatteo · Dec 28, 2022 · 699c570 · 699c570 · vercel · Dec 28, 2022
1 parent 1242524
commit 699c570
Show file tree

Hide file tree

Showing 15 changed files with 223 additions and 165 deletions.
diff --git a/.sanity-template/manifest.json b/.sanity-template/manifest.json
@@ -1,55 +1,54 @@
 {
-    "version": 2,
-    "title": "HULL – Shopify Starter",
-    "description": "Headless Shopify starter powered by Next.js + Sanity.io",
-    "previewMedia": {
-      "type": "image",
-      "src": ".sanity-template/assets/HULL-cover.png",
-      "alt": "HULL"
+  "version": 2,
+  "title": "HULL – Shopify Starter",
+  "description": "Headless Shopify starter powered by Next.js + Sanity.io",
+  "previewMedia": {
+    "type": "image",
+    "src": ".sanity-template/assets/HULL-cover.png",
+    "alt": "HULL"
+  },
+  "technologies": [
+    {
+      "id": "nextjs",
+      "name": "Next.js",
+      "url": "https://nextjs.org/"
     },
-    "technologies": [
+    {
+      "id": "vercel",
+      "name": "Vercel",
+      "url": "https://vercel.com/"
+    },
+    {
+      "id": "shopify",
+      "name": "Shopify",
+      "url": "https://shopify.com/"
+    }
+  ],
+  "deployment": {
+    "provider": "vercel",
+    "studio": {
+      "basePath": "/studio"
+    },
+    "envVars": {
+      "dataset": ["NEXT_PUBLIC_SANITY_PROJECT_DATASET"],
+      "projectId": ["NEXT_PUBLIC_SANITY_PROJECT_ID"]
+    },
+    "tokens": [
       {
-        "id": "nextjs",
-        "name": "Next.js",
-        "url": "https://nextjs.org/"
-      },
+        "label": "Live Preview",
+        "role": "write",
+        "envVar": "SANITY_API_TOKEN"
+      }
+    ],
+    "corsOrigins": [
       {
-        "id": "vercel",
-        "name": "Vercel",
-        "url": "https://vercel.com/"
+        "origin": "https://*.vercel.app",
+        "allowCredentials": true
       },
       {
-        "id": "shopify",
-        "name": "Shopify",
-        "url": "https://shopify.com/"
+        "origin": "http://localhost:3000",
+        "allowCredentials": true
       }
-    ],
-    "deployment": {
-      "provider": "vercel",
-      "studio": {
-        "basePath": "/studio"
-      },
-      "envVars": {
-        "dataset": ["SANITY_PROJECT_DATASET"],
-        "projectId": ["SANITY_PROJECT_ID"]
-      },
-      "tokens": [
-          {
-              "label": "Live Preview",
-              "role": "write",
-              "envVar": "SANITY_API_TOKEN"
-          }
-      ],
-      "corsOrigins": [
-        {
-          "origin": "https://*.vercel.app",
-          "allowCredentials": true
-        },
-        {
-          "origin": "http://localhost:3000",
-          "allowCredentials": true
-        }
-      ]
-    }
+    ]
   }
-  
+}
diff --git a/README.md b/README.md
@@ -101,7 +101,7 @@ _Using the Sanity Vercel Deploy plugin, see how easy it is to empower your clien
 
 Quickly [deploy as a Sanity Starter](https://www.sanity.io/create?template=ndimatteo/HULL) on [Vercel](https://vercel.com) with a pre-populated store! Once deployed, simply follow step 2 and 3 below to connect your Shopify store.
 
-> ⚠️ **Important!** <br />You should delete the demo products once you connect your own Shopify account. Demo products will not function properly as they are not part of _your Shopify store_. Additionally, any existing products in your Shopify store will not automatically sync into Sanity. To trigger a sync, you must make a change to your existing product(s) in Shopify first.
+> **Warning** <br />You should delete the demo products once you connect your own Shopify account. Demo products will not function properly as they are not part of _your Shopify store_. Additionally, any existing products in your Shopify store will not automatically sync into Sanity. To trigger a sync, you must make a change to your existing product(s) in Shopify first.
 
 <br />
 
@@ -147,21 +147,21 @@ Clone this repository from your GitHub account with the [Use this template](http
    - Product creation - `[live-domain]/api/shopify/product-update`
    - Product update - `[live-domain]/api/shopify/product-update`
    - Product deletion - `[live-domain]/api/shopify/product-delete`
-     > ⚠️ **Note** <br />You have to use a real, live domain name (not localhost!). Be sure to use your Vercel project URL during development, and then switch to the production domain once live. You may not know your Vercel project URL until you deploy, feel free to enter something temporary, but make sure to update this once deployed!
+     > **Warning** <br />You have to use a real, live domain name (not localhost!). Be sure to use your Vercel project URL during development, and then switch to the production domain once live. You may not know your Vercel project URL until you deploy, feel free to enter something temporary, but make sure to update this once deployed!
 
 ### 4) NextJS
 
 1. `yarn` in the project root folder on local
 2. Create an `.env.local` file in the project folder, and add the following variables:
 
 ```
-SANITY_PROJECT_DATASET=production
-SANITY_PROJECT_ID=XXXXXX
+NEXT_PUBLIC_SANITY_PROJECT_DATASET=production
+NEXT_PUBLIC_SANITY_PROJECT_ID=XXXXXX
 SANITY_API_TOKEN=XXXXXX
 SANITY_STUDIO_PREVIEW_SECRET=XXXXXX
 
-SHOPIFY_STORE_ID=XXXXXX
-SHOPIFY_STOREFRONT_API_TOKEN=XXXXXX
+NEXT_PUBLIC_SHOPIFY_STORE_ID=XXXXXX
+NEXT_PUBLIC_SHOPIFY_STOREFRONT_API_TOKEN=XXXXXX
 SHOPIFY_ADMIN_API_TOKEN=XXXXXX
 SHOPIFY_WEBHOOK_INTEGRITY=XXXXXX
 
@@ -178,12 +178,12 @@ SENDGRID_API_KEY=XXXXXX
 
 3. Update all the `XXXXXX` values, here's where to find each:
 
-- `SANITY_PROJECT_ID` - You can grab this after you've initalized Sanity, either from the `studio/sanity.json` file, or from your Sanity Manage dashboard
+- `NEXT_PUBLIC_SANITY_PROJECT_ID` - You can grab this after you've initalized Sanity, either from the `studio/sanity.json` file, or from your Sanity Manage dashboard
 - `SANITY_API_TOKEN` - Generate an API token for your Sanity project. Access your project from the Sanity Manage dashboard, and navigate to: "Settings" -> "API" -> "Add New Token" button. Make sure you give `read + write` access!
 - `SANITY_STUDIO_PREVIEW_SECRET` - A unique string of your choice. This is used to confirm the authenticity of "preview mode" requests from the Sanity Studio
-- `SHOPIFY_STORE_ID` - This is your Shopify store ID, it's the subdomain behind `.myshopify.com`
+- `NEXT_PUBLIC_SHOPIFY_STORE_ID` - This is your Shopify store ID, it's the subdomain behind `.myshopify.com`
+- `NEXT_PUBLIC_SHOPIFY_STOREFRONT_API_TOKEN` - Copy the Storefront API access token from "Apps" -> "Develop apps" -> [your_custom_app] -> "API credentials".
 - `SHOPIFY_ADMIN_API_TOKEN` - Copy the Admin API access token from "Apps" -> "Develop apps" -> [your_custom_app] -> "API credentials". (__Note: you’ll only be able to reveal your Admin API token once.__)
-- `SHOPIFY_STOREFRONT_API_TOKEN` - Copy the Storefront API access token from "Apps" -> "Develop apps" -> [your_custom_app] -> "API credentials".
 - `SHOPIFY_WEBHOOK_INTEGRITY` - Copy the Integrity hash from "Settings" -> "Notifications" -> "Webhooks" _(very bottom of page)_
 - `KLAVIYO_API_KEY` - Create a Private API Key from your Klaviyo Account "Settings" -> "API Keys"
 - `MAILCHIMP_API_KEY` - Create an API key from "Account -> "Extras" -> API Keys
@@ -217,7 +217,7 @@ This will essentially "pass-through" URLs accessed at your Shopify Store to your
 `yarn dev` in the `/studio` folder to start the studio locally
 
 - Your Sanity Studio should be running on [http://localhost:3333](http://localhost:3333)
-  > ⚠️ **Gotcha!** <br />If you did not manually set up your project, the `projectId` in `/studio/sanity.json` will still be set to the HULL demo project. Make sure to update this before starting the studio, otherwise you will be denied access when trying to access your studio.
+  > **Warning** <br />If you did not manually set up your project, the `projectId` in `/studio/sanity.json` will still be set to the HULL demo project. Make sure to update this before starting the studio, otherwise you will be denied access when trying to access your studio.
 
 <br />
 

diff --git a/lib/sanity.js b/lib/sanity.js
@@ -2,10 +2,10 @@ import createSanityClient from '@sanity/client'
 import sanityImage from '@sanity/image-url'
 
 const options = {
-  dataset: process.env.SANITY_PROJECT_DATASET,
-  projectId: process.env.SANITY_PROJECT_ID,
+  dataset: process.env.NEXT_PUBLIC_SANITY_PROJECT_DATASET,
+  projectId: process.env.NEXT_PUBLIC_SANITY_PROJECT_ID,
   useCdn: process.env.NODE_ENV === 'production',
-  apiVersion: '2021-03-25',
+  apiVersion: '2022-08-30',
 }
 
 export const sanityClient = createSanityClient(options)

diff --git a/lib/shopify.js b/lib/shopify.js
@@ -4,7 +4,8 @@ import { isBrowser } from '@lib/helpers'
 
 // First, check that Shopify variables are set
 const hasShopify =
-  process.env.SHOPIFY_STORE_ID && process.env.SHOPIFY_STOREFRONT_API_TOKEN
+  process.env.NEXT_PUBLIC_SHOPIFY_STORE_ID &&
+  process.env.NEXT_PUBLIC_SHOPIFY_STOREFRONT_API_TOKEN
 
 // Warn the client if variables are missing
 if (!hasShopify && isBrowser) {
@@ -13,8 +14,8 @@ if (!hasShopify && isBrowser) {
 
 // Otherwise, setup the client and export
 const options = {
-  domain: `${process.env.SHOPIFY_STORE_ID}.myshopify.com`,
-  storefrontAccessToken: process.env.SHOPIFY_STOREFRONT_API_TOKEN,
+  domain: `${process.env.NEXT_PUBLIC_SHOPIFY_STORE_ID}.myshopify.com`,
+  storefrontAccessToken: process.env.NEXT_PUBLIC_SHOPIFY_STOREFRONT_API_TOKEN,
 }
 
 export default hasShopify ? Client.buildClient(options) : null
diff --git a/next.config.js b/next.config.js
@@ -1,9 +1,9 @@
 const sanityClient = require('@sanity/client')
 const client = sanityClient({
-  dataset: process.env.SANITY_PROJECT_DATASET,
-  projectId: process.env.SANITY_PROJECT_ID,
+  dataset: process.env.NEXT_PUBLIC_SANITY_PROJECT_DATASET,
+  projectId: process.env.NEXT_PUBLIC_SANITY_PROJECT_ID,
   useCdn: process.env.NODE_ENV === 'production',
-  apiVersion: '2021-03-25',
+  apiVersion: '2022-08-30',
 })
 
 // see breakdown of code bloat
@@ -13,47 +13,19 @@ const withBundleAnalyzer = require('@next/bundle-analyzer')({
 
 // get redirects from Sanity for Vercel
 async function fetchSanityRedirects() {
-  const data = await client.fetch(
-    `*[_type == "redirect"]{ from, to, isPermanent }`
-  )
-
-  const redirects = data.map((redirect) => {
-    return {
-      source: `/${redirect.from}`,
-      destination: `/${redirect.to}`,
-      permanent: redirect.isPermanent,
+  const redirectData = await client.fetch(`
+    *[_type == "redirect"]{
+      "source": "/" + from,
+      "destination": "/" + to,
+      "permanent": isPermanent
     }
-  })
+  `)
 
-  return redirects
+  return redirectData
 }
 
 module.exports = withBundleAnalyzer({
   swcMinify: true,
-  env: {
-    // Needed for Sanity powered data
-    SANITY_PROJECT_DATASET: process.env.SANITY_PROJECT_DATASET,
-    SANITY_PROJECT_ID: process.env.SANITY_PROJECT_ID,
-    SANITY_API_TOKEN: process.env.SANITY_API_TOKEN,
-
-    // Needed for Shopify product syncs
-    SHOPIFY_STORE_ID: process.env.SHOPIFY_STORE_ID,
-    SHOPIFY_STOREFRONT_API_TOKEN: process.env.SHOPIFY_STOREFRONT_API_TOKEN,
-
-    // Needed for Klaviyo forms
-    KLAVIYO_API_KEY: process.env.KLAVIYO_API_KEY,
-
-    // Needed for Yotpo reviews
-    YOTPO_API_KEY: process.env.YOTPO_API_KEY,
-    YOTPO_SECRET_KEY: process.env.YOTPO_SECRET_KEY,
-
-    // Needed for Mailchimp forms
-    MAILCHIMP_API_KEY: process.env.MAILCHIMP_API_KEY,
-    MAILCHIMP_SERVER: process.env.MAILCHIMP_SERVER,
-
-    // Needed for SendGrid forms
-    SENDGRID_API_KEY: process.env.SENDGRID_API_KEY,
-  },
   async redirects() {
     const sanityRedirects = await fetchSanityRedirects()
     return sanityRedirects
@@ -71,4 +43,14 @@ module.exports = withBundleAnalyzer({
       },
     ]
   },
+  images: {
+    domains: ['i.vimeocdn.com', 'img.youtube.com'],
+    deviceSizes: [
+      400, 600, 800, 1000, 1200, 1400, 1600, 1800, 2000, 2200, 2400, 2600, 2800,
+      3000, 3200, 3400,
+    ],
+    imageSizes: [
+      20, 30, 40, 50, 60, 80, 100, 120, 140, 180, 220, 260, 300, 340, 380, 390,
+    ],
+  },
 })
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "hull",
-  "version": "2.6.0",
+  "version": "2.7.0",
   "scripts": {
     "dev": "cross-env NODE_ENV=development next dev",
     "build": "echo 'Building Sanity to public/studio…' && cd studio && npx sanity build ../public/studio -y && cd .. && next build",
@@ -14,35 +14,35 @@
   "license": "MIT",
   "dependencies": {
     "@mailchimp/mailchimp_marketing": "^3.0.71",
-    "@reach/rect": "0.17.0",
+    "@reach/rect": "^0.18.0",
     "@sanity/block-content-to-react": "^3.0.0",
     "@sanity/client": "^3.0.3",
     "@sanity/image-url": "^1.0.1",
     "@vimeo/player": "^2.15.3",
-    "axios": "0.27.2",
+    "axios": "^1.2.1",
     "base64-string": "^1.1.2",
     "classnames": "^2.2.6",
     "contrast-color": "^1.0.1",
     "cross-env": "^7.0.3",
     "embla-carousel-react": "^7.0.1",
     "focus-trap-react": "^10.0.0",
-    "framer-motion": "^7.2.1",
+    "framer-motion": "^8.0.2",
     "js-cookie": "^3.0.0",
     "jsondiffpatch": "^0.4.1",
     "marqy": "^0.0.8",
     "next": "^12.0.7",
-    "next-themes": "0.2.0",
+    "next-themes": "^0.2.1",
     "qs": "^6.10.1",
-    "query-string": "^7.0.1",
+    "query-string": "^8.1.0",
     "raw-body": "^2.4.1",
     "react": "^18.2.0",
     "react-cool-inview": "3.0.1",
     "react-dom": "^18.2.0",
-    "react-hook-form": "7.34.2",
+    "react-hook-form": "^7.41.2",
     "react-keyed-flatten-children": "^1.3.0",
     "shopify-buy": "^2.13.0",
     "sitemap": "^7.0.0",
-    "swr": "^1.0.0"
+    "swr": "^2.0.0"
   },
   "devDependencies": {
     "@next/bundle-analyzer": "^12.0.1",
@@ -54,7 +54,7 @@
     "autoprefixer": "^10.4.0",
     "cssnano": "^5.0.13",
     "postcss": "^8.3.11",
-    "postcss-import": "^14.0.2",
+    "postcss-import": "^15.1.0",
     "tailwindcss": "^3.0.5",
     "typescript": "^4.4.4"
   },

diff --git a/pages/api/shopify/product-delete.js b/pages/api/shopify/product-delete.js
@@ -3,10 +3,10 @@ import crypto from 'crypto'
 const getRawBody = require('raw-body')
 
 const sanity = sanityClient({
-  dataset: process.env.SANITY_PROJECT_DATASET,
-  projectId: process.env.SANITY_PROJECT_ID,
+  dataset: process.env.NEXT_PUBLIC_SANITY_PROJECT_DATASET,
+  projectId: process.env.NEXT_PUBLIC_SANITY_PROJECT_ID,
   token: process.env.SANITY_API_TOKEN,
-  apiVersion: '2021-03-25',
+  apiVersion: '2022-08-30',
   useCdn: false,
 })
 

diff --git a/pages/api/shopify/product-images.js b/pages/api/shopify/product-images.js
@@ -5,10 +5,10 @@ import { queries } from '@data'
 import { buildSrc } from '@lib/helpers'
 
 const sanity = sanityClient({
-  dataset: process.env.SANITY_PROJECT_DATASET,
-  projectId: process.env.SANITY_PROJECT_ID,
+  dataset: process.env.NEXT_PUBLIC_SANITY_PROJECT_DATASET,
+  projectId: process.env.NEXT_PUBLIC_SANITY_PROJECT_ID,
   token: process.env.SANITY_API_TOKEN,
-  apiVersion: '2021-03-25',
+  apiVersion: '2022-08-30',
   useCdn: false,
 })
 
@@ -78,7 +78,7 @@ export default async function handler(req, res) {
 
   // Write our images to Shopify
   const shopifyProduct = await axios({
-    url: `https://${process.env.SHOPIFY_STORE_ID}.myshopify.com/admin/api/2021-04/products/${productID}.json`,
+    url: `https://${process.env.NEXT_PUBLIC_SHOPIFY_STORE_ID}.myshopify.com/admin/api/2022-10/products/${productID}.json`,
     method: 'PUT',
     headers: shopifyConfig,
     data: {

diff --git a/pages/api/shopify/product-inventory.js b/pages/api/shopify/product-inventory.js
@@ -6,7 +6,8 @@ export default async function send(req, res) {
   } = req
 
   const hasShopify =
-    process.env.SHOPIFY_STORE_ID && process.env.SHOPIFY_ADMIN_API_TOKEN
+    process.env.NEXT_PUBLIC_SHOPIFY_STORE_ID &&
+    process.env.SHOPIFY_ADMIN_API_TOKEN
 
   // Bail if no product ID was supplied
   if (!id) {
@@ -26,7 +27,7 @@ export default async function send(req, res) {
 
   // Fetch our product from Shopify
   const shopifyProduct = await axios({
-    url: `https://${process.env.SHOPIFY_STORE_ID}.myshopify.com/admin/api/2021-01/products/${id}.json`,
+    url: `https://${process.env.NEXT_PUBLIC_SHOPIFY_STORE_ID}.myshopify.com/admin/api/2022-10/products/${id}.json`,
     method: 'GET',
     headers: shopifyConfig,
   })