feat: render error when checkout session is not found (#1225)

wcole1-godaddy · pbennett1-godaddy · web-flow · commit 8c9ea8525f8d · 2025-11-25T10:12:58.000-05:00
* Display error message if checkout session doesn't exist

* return early from checkout exchange if no session

* update error state design

---------

Co-authored-by: Phil Bennett &lt;pbennett1@godaddy.com&gt;
diff --git a/.changeset/deep-dodos-work.md b/.changeset/deep-dodos-work.md
@@ -0,0 +1,6 @@
+---
+"@godaddy/localizations": patch
+"@godaddy/react": patch
+---
+
+Add missing session error state
diff --git a/packages/localizations/src/deDe.ts b/packages/localizations/src/deDe.ts
@@ -8,6 +8,8 @@ export const deDe = {
     apply: 'Anwenden',
     checkoutDisabled:
       'Der Checkout ist derzeit deaktiviert. Wir entschuldigen uns für die Unannehmlichkeiten.',
+    godaddyCheckout: 'GoDaddy Checkout',
+    poweredBy: 'Unterstützt von',
   },
   contact: {
     title: 'Kontakt',
diff --git a/packages/localizations/src/enIe.ts b/packages/localizations/src/enIe.ts
@@ -8,6 +8,8 @@ export const enIe = {
     apply: 'Apply',
     checkoutDisabled:
       'Checkout is currently disabled. We apologise for the inconvenience.',
+    godaddyCheckout: 'GoDaddy Checkout',
+    poweredBy: 'Powered by',
   },
   contact: {
     title: 'Contact',
diff --git a/packages/localizations/src/enUs.ts b/packages/localizations/src/enUs.ts
@@ -8,6 +8,8 @@ export const enUs = {
     apply: 'Apply',
     checkoutDisabled:
       'Checkout is currently disabled. We apologize for the inconvenience.',
+    godaddyCheckout: 'GoDaddy Checkout',
+    poweredBy: 'Powered by',
   },
   contact: {
     title: 'Contact',
diff --git a/packages/localizations/src/esAr.ts b/packages/localizations/src/esAr.ts
@@ -8,6 +8,8 @@ export const esAr = {
     apply: 'Aplicar',
     checkoutDisabled:
       'El checkout está deshabilitado actualmente. Pedimos disculpas por las molestias.',
+    godaddyCheckout: 'GoDaddy Checkout',
+    poweredBy: 'Desarrollado por',
   },
   contact: {
     title: 'Contacto',
diff --git a/packages/localizations/src/esCl.ts b/packages/localizations/src/esCl.ts
@@ -8,6 +8,8 @@ export const esCl = {
     apply: 'Aplicar',
     checkoutDisabled:
       'El checkout está actualmente deshabilitado. Pedimos disculpas por las molestias.',
+    godaddyCheckout: 'GoDaddy Checkout',
+    poweredBy: 'Desarrollado por',
   },
   contact: {
     title: 'Contacto',
diff --git a/packages/localizations/src/esCo.ts b/packages/localizations/src/esCo.ts
@@ -8,6 +8,8 @@ export const esCo = {
     apply: 'Aplicar',
     checkoutDisabled:
       'El checkout está deshabilitado actualmente. Pedimos disculpas por las molestias.',
+    godaddyCheckout: 'GoDaddy Checkout',
+    poweredBy: 'Desarrollado por',
   },
   contact: {
     title: 'Contacto',
diff --git a/packages/localizations/src/esEs.ts b/packages/localizations/src/esEs.ts
@@ -8,6 +8,8 @@ export const esEs = {
     apply: 'Aplicar',
     checkoutDisabled:
       'El checkout está deshabilitado actualmente. Pedimos disculpas por las molestias.',
+    godaddyCheckout: 'GoDaddy Checkout',
+    poweredBy: 'Desarrollado por',
   },
   contact: {
     title: 'Contacto',
diff --git a/packages/localizations/src/esMx.ts b/packages/localizations/src/esMx.ts
@@ -8,6 +8,8 @@ export const esMx = {
     apply: 'Aplicar',
     checkoutDisabled:
       'El checkout está deshabilitado temporalmente. Disculpe las molestias.',
+    godaddyCheckout: 'GoDaddy Checkout',
+    poweredBy: 'Desarrollado por',
   },
   contact: {
     title: 'Contacto',
diff --git a/packages/localizations/src/esPe.ts b/packages/localizations/src/esPe.ts
@@ -8,6 +8,8 @@ export const esPe = {
     apply: 'Aplicar',
     checkoutDisabled:
       'El checkout está deshabilitado actualmente. Disculpe las molestias.',
+    godaddyCheckout: 'GoDaddy Checkout',
+    poweredBy: 'Desarrollado por',
   },
   contact: {
     title: 'Contacto',
diff --git a/packages/localizations/src/esUs.ts b/packages/localizations/src/esUs.ts
@@ -8,6 +8,8 @@ export const esUs = {
     apply: 'Aplicar',
     checkoutDisabled:
       'El checkout está deshabilitado temporalmente. Disculpe las molestias.',
+    godaddyCheckout: 'GoDaddy Checkout',
+    poweredBy: 'Desarrollado por',
   },
   contact: {
     title: 'Contacto',
diff --git a/packages/localizations/src/frCa.ts b/packages/localizations/src/frCa.ts
@@ -8,6 +8,8 @@ export const frCa = {
     apply: 'Appliquer',
     checkoutDisabled:
       "Le checkout est présentement désactivé. Nous nous excusons pour l'inconvénient.",
+    godaddyCheckout: 'GoDaddy Checkout',
+    poweredBy: 'Propulsé par',
   },
   contact: {
     title: 'Contact',
diff --git a/packages/localizations/src/frFr.ts b/packages/localizations/src/frFr.ts
@@ -8,6 +8,8 @@ export const frFr = {
     apply: 'Appliquer',
     checkoutDisabled:
       'Le paiement est actuellement désactivé. Nous nous excusons pour la gêne occasionnée.',
+    godaddyCheckout: 'GoDaddy Checkout',
+    poweredBy: 'Propulsé par',
   },
   contact: {
     title: 'Contact',
diff --git a/packages/localizations/src/idId.ts b/packages/localizations/src/idId.ts
@@ -8,6 +8,8 @@ export const idId = {
     apply: 'Terapkan',
     checkoutDisabled:
       'Checkout saat ini dinonaktifkan. Kami mohon maaf atas ketidaknyamanannya.',
+    godaddyCheckout: 'GoDaddy Checkout',
+    poweredBy: 'Dipersembahkan oleh',
   },
   contact: {
     title: 'Kontak',
diff --git a/packages/localizations/src/itIt.ts b/packages/localizations/src/itIt.ts
@@ -8,6 +8,8 @@ export const itIt = {
     apply: 'Applica',
     checkoutDisabled:
       "Il checkout è attualmente disabilitato. Ci scusiamo per l'inconveniente.",
+    godaddyCheckout: 'GoDaddy Checkout',
+    poweredBy: 'Offerto da',
   },
   contact: {
     title: 'Contatto',
diff --git a/packages/localizations/src/ptBr.ts b/packages/localizations/src/ptBr.ts
@@ -8,6 +8,8 @@ export const ptBr = {
     apply: 'Aplicar',
     checkoutDisabled:
       'O checkout está temporariamente indisponível. Pedimos desculpas pelo inconveniente.',
+    godaddyCheckout: 'GoDaddy Checkout',
+    poweredBy: 'Desenvolvido por',
   },
   contact: {
     title: 'Contato',
diff --git a/packages/localizations/src/qaPs.ts b/packages/localizations/src/qaPs.ts
@@ -8,6 +8,8 @@ export const qaPs = {
     apply: '[Âþþlÿ]',
     checkoutDisabled:
       '[Çhéçkøüť îš çürrëñťlÿ dîšâblëd. Wé âþöløgîžé før ťhé îñçöñvéñîéñçé ând áppreciate your patience.]',
+    godaddyCheckout: '[GôDâddÿ Çhéçkøüť]',
+    poweredBy: '[Pöwéréd bÿ]',
   },
   contact: {
     title: '[Çöñťâçť]',
diff --git a/packages/localizations/src/trTr.ts b/packages/localizations/src/trTr.ts
@@ -8,6 +8,8 @@ export const trTr = {
     apply: 'Uygula',
     checkoutDisabled:
       'Ödeme işlemi şu anda devre dışı. Yaşanan rahatsızlık için özür dileriz.',
+    godaddyCheckout: 'GoDaddy Checkout',
+    poweredBy: 'Tarafından desteklenmektedir',
   },
   contact: {
     title: 'İletişim',
diff --git a/packages/localizations/src/viVn.ts b/packages/localizations/src/viVn.ts
@@ -8,6 +8,8 @@ export const viVn = {
     apply: 'Áp dụng',
     checkoutDisabled:
       'Thanh toán hiện tại đang bị vô hiệu hóa. Chúng tôi xin lỗi vì sự bất tiện này.',
+    godaddyCheckout: 'GoDaddy Checkout',
+    poweredBy: 'Được cung cấp bởi',
   },
   contact: {
     title: 'Liên hệ',
diff --git a/packages/localizations/src/zhCn.ts b/packages/localizations/src/zhCn.ts
@@ -7,6 +7,8 @@ export const zhCn = {
     closed: '已关闭',
     apply: '应用',
     checkoutDisabled: '结账功能暂时不可用。为此造成的不便，我们深表歉意。',
+    godaddyCheckout: 'GoDaddy Checkout',
+    poweredBy: '技术支持',
   },
   contact: {
     title: '联系方式',
diff --git a/packages/localizations/src/zhSg.ts b/packages/localizations/src/zhSg.ts
@@ -7,6 +7,8 @@ export const zhSg = {
     closed: '已关闭',
     apply: '应用',
     checkoutDisabled: '结账目前不可用。给您带来不便，深表歉意。',
+    godaddyCheckout: 'GoDaddy Checkout',
+    poweredBy: '技术支持',
   },
   contact: {
     title: '联系信息',
diff --git a/packages/react/src/components/checkout/checkout.tsx b/packages/react/src/components/checkout/checkout.tsx
@@ -1,5 +1,6 @@
 'use client';
 
+import { CircleAlert } from 'lucide-react';
 import React, { type ReactNode } from 'react';
 import { z } from 'zod';
 import { hasRegionData } from '@/components/checkout/address';
@@ -339,6 +340,35 @@ export function Checkout(props: CheckoutProps) {
     return getRequiredFieldsFromSchema(formSchema);
   }, [formSchema]);
 
+  if (!isLoadingJWT && !session) {
+    return (
+      <div className='flex items-center justify-center min-h-[50vh] p-4'>
+        <div className='max-w-md w-full'>
+          <h2 className='text-lg font-semibold mb-4 text-destructive-foreground'>
+            {t.general.godaddyCheckout}
+          </h2>
+
+          <div className='flex items-start mb-4 rounded-md border border-destructive bg-destructive/10 p-4 w-full'>
+            <CircleAlert className='text-destructive w-5 h-5 mr-3 flex-shrink-0 mt-0.5' />
+            <div className='text-destructive-foreground text-sm'>
+              {t.apiErrors.CHECKOUT_SESSION_NOT_FOUND}
+            </div>
+          </div>
+
+          <div className='text-xs text-muted-foreground border-t border-border pt-3 mt-4'>
+            {t.general.poweredBy}{' '}
+            <a
+              href='https://www.godaddy.com'
+              className='underline hover:text-foreground'
+            >
+              GoDaddy
+            </a>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
   return (
     <TrackingProvider
       session={session}
diff --git a/packages/react/src/hooks/use-checkout-session.tsx b/packages/react/src/hooks/use-checkout-session.tsx
@@ -98,7 +98,10 @@ export function useCheckoutSession(props?: CheckoutProps) {
       return;
     }
 
-    if (!sessionId || !sessionToken) return;
+    if (!sessionId || !sessionToken) {
+      setIsLoading(false);
+      return;
+    }
 
     setIsLoading(true);
 
