fix: avoid checkout error when refreshing quickly

Author: malessani

components/hooks/useSettingsOrInvalid.ts

@@ -1,4 +1,5 @@
 import { useRouter } from "next/router"
+import { useRef } from "react"
 import useSWR from "swr"
 
 const fetcher = (url: string) => fetch(url).then((r) => r.json())
@@ -9,13 +10,17 @@ interface UseSettingsOrInvalid {
 }
 
 export const useSettingsOrInvalid = (): UseSettingsOrInvalid => {
+  const random = useRef(Date.now())
   const router = useRouter()
   const { orderId, accessToken, paymentReturn } = router.query
   const paymentReturnQuery =
     paymentReturn === "true" ? "&paymentReturn=true" : ""
   const { data, error } = useSWR(
     router.isReady
-      ? `/api/settings?accessToken=${accessToken}&orderId=${orderId}${paymentReturnQuery}`
+      ? [
+          `/api/settings?accessToken=${accessToken}&orderId=${orderId}${paymentReturnQuery}`,
+          random,
+        ]
       : null,
     fetcher,
     { revalidateOnFocus: false }

cypress/integration/checkout-bundle.spec.ts

@@ -8,7 +8,7 @@ describe("Checkout Bundle", () => {
   const email = internet.email().toLocaleLowerCase()
   const password = internet.password()
 
-  const returnUrl = "https://commercelayer.io"
+  const returnUrl = "https://commercelayer.io/"
 
   before(function () {
     cy.createCustomer({ email: email, password: password }).then(() => {

cypress/integration/checkout-complete.spec.ts

@@ -8,7 +8,7 @@ describe("Checkout Complete", () => {
   const email = internet.email().toLocaleLowerCase()
   const password = internet.password()
 
-  const returnUrl = "https://commercelayer.io"
+  const returnUrl = "https://commercelayer.io/"
 
   before(function () {
     cy.createCustomer({ email: email, password: password }).then(() => {

cypress/integration/checkout-digital.spec.ts

@@ -3,7 +3,7 @@ import { internet } from "faker"
 import { euAddress } from "../support/utils"
 
 describe("Checkout Checkout-Digital", () => {
-  const returnUrl = "https://commercelayer.io"
+  const returnUrl = "https://commercelayer.io/"
 
   const filename = "checkout-digital"
 

cypress/integration/checkout-free-payment.spec.ts

@@ -8,7 +8,7 @@ describe("Checkout Free Payment", () => {
   const email = internet.email().toLocaleLowerCase()
   const password = internet.password()
 
-  const returnUrl = "https://commercelayer.io"
+  const returnUrl = "https://commercelayer.io/"
 
   before(function () {
     cy.createCustomer({ email: email, password: password }).then(() => {

cypress/integration/checkout-only-bundle.ts

@@ -8,7 +8,7 @@ describe("Checkout Only Bundle", () => {
   const email = internet.email().toLocaleLowerCase()
   const password = internet.password()
 
-  const returnUrl = "https://commercelayer.io"
+  const returnUrl = "https://commercelayer.io/"
 
   before(function () {
     cy.createCustomer({ email: email, password: password }).then(() => {

pages/api/settings.ts

@@ -77,7 +77,7 @@ export default async (req: NextApiRequest, res: NextApiResponse) => {
   let order
 
   try {
-    const orderFetched: Order = await cl.orders.retrieve(orderId, {
+    order = await cl.orders.retrieve(orderId, {
       fields: {
         orders: [
           "id",
@@ -93,15 +93,15 @@ export default async (req: NextApiRequest, res: NextApiResponse) => {
       include: ["line_items"],
     })
 
-    if (orderFetched.status === "draft" || orderFetched.status === "pending") {
+    if (order.status === "draft" || order.status === "pending") {
       const _refresh = !paymentReturn
 
       order = await cl.orders.update({
-        id: orderFetched.id,
+        id: order.id,
         _refresh,
-        ...(!orderFetched.autorefresh && { autorefresh: true }),
+        ...(!order.autorefresh && { autorefresh: true }),
       })
-    } else if (orderFetched.status === "placed") {
+    } else if (order.status === "placed") {
       order = await cl.orders.retrieve(orderId)
     }
   } catch (e) {