Handle checkout for logged in users (#405)

* create a jwt token if there is a customerId, move the get customer id to the main utils folder.  Need to add in more value to the env file.  Updated the env sample.

* remove yarn.lock and tsconfig.json

* remove build settings

* remove build settings

* remove build settings

* Update tsconfig.json

* Delete package-lock.json

* fix typescript errors

* Update tsconfig.json

Co-authored-by: George Fitzgibbons <george.fitzgibbons@c02zw1aqlvdn.lan>

.env.template

@@ -7,6 +7,10 @@ BIGCOMMERCE_STORE_API_URL=
 BIGCOMMERCE_STORE_API_TOKEN=
 BIGCOMMERCE_STORE_API_CLIENT_ID=
 BIGCOMMERCE_CHANNEL_ID=
+BIGCOMMERCE_STORE_URL=
+BIGCOMMERCE_STORE_API_STORE_HASH=
+BIGCOMMERCE_STORE_API_CLIENT_SECRET=
+
 
 NEXT_PUBLIC_SHOPIFY_STORE_DOMAIN=
 NEXT_PUBLIC_SHOPIFY_STOREFRONT_ACCESS_TOKEN=

framework/bigcommerce/api/endpoints/checkout/checkout.ts

@@ -1,4 +1,7 @@
 import type { CheckoutEndpoint } from '.'
+import getCustomerId from '../../utils/get-customer-id'
+import jwt from 'jsonwebtoken'
+import { uuid } from 'uuidv4'
 
 const fullCheckout = true
 
@@ -9,22 +12,47 @@ const checkout: CheckoutEndpoint['handlers']['checkout'] = async ({
 }) => {
   const { cookies } = req
   const cartId = cookies[config.cartCookie]
-
+  const customerToken = cookies[config.customerCookie]
   if (!cartId) {
     res.redirect('/cart')
     return
   }
-
   const { data } = await config.storeApiFetch(
     `/v3/carts/${cartId}/redirect_urls`,
     {
       method: 'POST',
     }
   )
+  const customerId =
+    customerToken && (await getCustomerId({ customerToken, config }))
 
-  if (fullCheckout) {
+  //if there is a customer create a jwt token
-    res.redirect(data.checkout_url)
+  if (!customerId) {
-    return
+    if (fullCheckout) {
+      res.redirect(data.checkout_url)
+      return
+    }
+  } else {
+    const dateCreated = Math.round(new Date().getTime() / 1000)
+    const payload = {
+      iss: config.storeApiClientId,
+      iat: dateCreated,
+      jti: uuid(),
+      operation: 'customer_login',
+      store_hash: config.storeHash,
+      customer_id: customerId,
+      channel_id: config.storeChannelId,
+      redirect_to: data.checkout_url,
+    }
+    let token = jwt.sign(payload, config.storeApiClientSecret!, {
+      algorithm: 'HS256',
+    })
+    let checkouturl = `${config.storeUrl}/login/token/${token}`
+    console.log('checkouturl', checkouturl)
+    if (fullCheckout) {
+      res.redirect(checkouturl)
+      return
+    }
   }
 
   // TODO: make the embedded checkout work too!

framework/bigcommerce/api/endpoints/wishlist/add-item.ts

@@ -1,6 +1,6 @@
 import getCustomerWishlist from '../../operations/get-customer-wishlist'
 import { parseWishlistItem } from '../../utils/parse-item'
-import getCustomerId from './utils/get-customer-id'
+import getCustomerId from '../../utils/get-customer-id'
 import type { WishlistEndpoint } from '.'
 
 // Return wishlist info

framework/bigcommerce/api/endpoints/wishlist/get-wishlist.ts

@@ -1,6 +1,6 @@
 import type { Wishlist } from '../../../types/wishlist'
 import type { WishlistEndpoint } from '.'
-import getCustomerId from './utils/get-customer-id'
+import getCustomerId from '../../utils/get-customer-id'
 import getCustomerWishlist from '../../operations/get-customer-wishlist'
 
 // Return wishlist info

framework/bigcommerce/api/endpoints/wishlist/remove-item.ts

@@ -1,6 +1,6 @@
 import type { Wishlist } from '../../../types/wishlist'
 import getCustomerWishlist from '../../operations/get-customer-wishlist'
-import getCustomerId from './utils/get-customer-id'
+import getCustomerId from '../../utils/get-customer-id'
 import type { WishlistEndpoint } from '.'
 
 // Return wishlist info

framework/bigcommerce/api/index.ts

@@ -32,6 +32,9 @@ export interface BigcommerceConfig extends CommerceAPIConfig {
   storeApiToken: string
   storeApiClientId: string
   storeChannelId?: string
+  storeUrl?: string
+  storeApiClientSecret?: string
+  storeHash?:string
   storeApiFetch<T>(endpoint: string, options?: RequestInit): Promise<T>
 }
 
@@ -41,6 +44,9 @@ const STORE_API_URL = process.env.BIGCOMMERCE_STORE_API_URL
 const STORE_API_TOKEN = process.env.BIGCOMMERCE_STORE_API_TOKEN
 const STORE_API_CLIENT_ID = process.env.BIGCOMMERCE_STORE_API_CLIENT_ID
 const STORE_CHANNEL_ID = process.env.BIGCOMMERCE_CHANNEL_ID
+const STORE_URL = process.env.BIGCOMMERCE_STORE_URL
+const CLIENT_SECRET = process.env.BIGCOMMERCE_STORE_API_CLIENT_SECRET
+const STOREFRONT_HASH = process.env.BIGCOMMERCE_STORE_API_STORE_HASH
 
 if (!API_URL) {
   throw new Error(
@@ -75,6 +81,9 @@ const config: BigcommerceConfig = {
   storeApiToken: STORE_API_TOKEN,
   storeApiClientId: STORE_API_CLIENT_ID,
   storeChannelId: STORE_CHANNEL_ID,
+  storeUrl:STORE_URL,
+  storeApiClientSecret:CLIENT_SECRET,
+  storeHash: STOREFRONT_HASH,
   storeApiFetch: createFetchStoreApi(() => getCommerceApi().getConfig()),
 }
 

framework/bigcommerce/api/utils/get-customer-id.ts

@@ -1,5 +1,5 @@
-import type { GetCustomerIdQuery } from '../../../../schema'
+import type { GetCustomerIdQuery } from '../../schema'
-import type { BigcommerceConfig } from '../../..'
+import type { BigcommerceConfig } from '../'
 
 export const getCustomerIdQuery = /* GraphQL */ `
   query getCustomerId {

next-env.d.ts

@@ -1,2 +1,3 @@
 /// <reference types="next" />
 /// <reference types="next/types/global" />
+/// <reference types="next/image-types/global" />

package.json

@@ -45,7 +45,8 @@
     "swell-js": "^4.0.0-next.0",
     "swr": "^0.5.6",
     "tabbable": "^5.2.0",
-    "tailwindcss": "^2.2.2"
+    "tailwindcss": "^2.2.2",
+    "uuidv4": "^6.2.10"
   },
   "devDependencies": {
     "@graphql-codegen/cli": "^1.21.5",