@graphcommerce/next-ui 9.0.0-canary.88 → 9.0.0-canary.89

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Change Log
 
+## 9.0.0-canary.89
+
+### Patch Changes
+
+- [#2393](https://github.com/graphcommerce-org/graphcommerce/pull/2393) [`8946991`](https://github.com/graphcommerce-org/graphcommerce/commit/894699122c2748724acf439ce3ff14fa56a1e68c) - Solve an issue where the success page would show a back button which would go back to the payment page (which would be empty) ([@carlocarels90](https://github.com/carlocarels90))
+
 ## 9.0.0-canary.88
 
 ## 9.0.0-canary.87

package/Layout/components/LayoutHeader.tsx

@@ -1,13 +1,14 @@
 import { Box, SxProps, Theme } from '@mui/material'
 import React from 'react'
 import { extendableComponent } from '../../Styles'
-import { LayoutHeaderBack, useShowBack } from './LayoutHeaderBack'
+import { BackProps, LayoutHeaderBack, useShowBack } from './LayoutHeaderBack'
 import { LayoutHeaderClose, useShowClose } from './LayoutHeaderClose'
 import { LayoutHeaderContent, LayoutHeaderContentProps } from './LayoutHeaderContent'
 import { FloatingProps } from './LayoutHeadertypes'
 
 export type LayoutHeaderProps = FloatingProps &
-  Omit<LayoutHeaderContentProps, 'left' | 'right'> & {
+  Omit<LayoutHeaderContentProps, 'left' | 'right'> &
+  Pick<BackProps, 'disableBackNavigation'> & {
     /**
      * Button to display on the left side of the title
      *
@@ -44,10 +45,9 @@ type ComponentStyleProps = {
   size: 'small' | 'responsive'
 }
 
-const { selectors, withState } = extendableComponent<ComponentStyleProps, 'LayoutHeader'>(
-  'LayoutHeader',
-  ['root'] as const,
-)
+const { withState } = extendableComponent<ComponentStyleProps, 'LayoutHeader'>('LayoutHeader', [
+  'root',
+] as const)
 
 export const LayoutHeader = React.memo<LayoutHeaderProps>((props) => {
   const {
@@ -63,6 +63,7 @@ export const LayoutHeader = React.memo<LayoutHeaderProps>((props) => {
     bgColor,
     hideSm = false,
     hideMd = false,
+    disableBackNavigation,
   } = props
   const showBack = useShowBack() && !hideBackButton
   const showClose = useShowClose()
@@ -76,7 +77,12 @@ export const LayoutHeader = React.memo<LayoutHeaderProps>((props) => {
   if (divider || primary || secondary) floatingSm = false
 
   const close = showClose && <LayoutHeaderClose />
-  const back = showBack && <LayoutHeaderBack breakpoint={floatingSm ? 'xs' : undefined} />
+  const back = showBack && (
+    <LayoutHeaderBack
+      breakpoint={floatingSm ? 'xs' : undefined}
+      disableBackNavigation={disableBackNavigation}
+    />
+  )
 
   let left = secondary
   let right = primary

package/Layout/components/LayoutHeaderBack.tsx

@@ -12,7 +12,12 @@ import { IconSvg } from '../../IconSvg'
 import { responsiveVal } from '../../Styles'
 import { iconChevronLeft } from '../../icons'
 
-export type BackProps = Omit<LinkOrButtonProps, 'onClick' | 'children'>
+export type BackProps = Omit<LinkOrButtonProps, 'onClick' | 'children'> & {
+  /**
+   * Will not use `router.back()` if available, and will always use the `up.href`
+   */
+  disableBackNavigation?: boolean
+}
 
 export function useShowBack() {
   const path = useRouter().asPath.split('?')[0]
@@ -21,10 +26,7 @@ export function useShowBack() {
   const { backSteps } = usePageContext()
 
   const canClickBack = backSteps > 0 && path !== prevUp?.href
-
-  if (canClickBack) return true
-  if (up?.href && up.href !== path) return true
-  return false
+  return canClickBack || (up?.href && up.href !== path)
 }
 
 const buttonSx: SxProps<Theme> = (theme) => ({
@@ -41,6 +43,7 @@ const buttonSx: SxProps<Theme> = (theme) => ({
 })
 
 export function LayoutHeaderBack(props: BackProps) {
+  const { disableBackNavigation = false } = props
   const router = useRouter()
   const path = router.asPath.split('?')[0]
   const up = useUp()
@@ -49,7 +52,7 @@ export function LayoutHeaderBack(props: BackProps) {
   const prevPageRouter = usePrevPageRouter()
 
   const backIcon = <IconSvg src={iconChevronLeft} size='medium' />
-  const canClickBack = backSteps > 0 && path !== prevUp?.href
+  const canClickBack = backSteps > 0 && path !== prevUp?.href && !disableBackNavigation
 
   let label = i18n._(/* i18n */ 'Back')
   if (up?.href === path && up?.title) label = up.title

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/next-ui",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "9.0.0-canary.88",
+  "version": "9.0.0-canary.89",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -26,13 +26,13 @@
     "typescript": "5.5.3"
   },
   "peerDependencies": {
-    "@graphcommerce/eslint-config-pwa": "^9.0.0-canary.88",
-    "@graphcommerce/framer-next-pages": "^9.0.0-canary.88",
-    "@graphcommerce/framer-scroller": "^9.0.0-canary.88",
-    "@graphcommerce/framer-utils": "^9.0.0-canary.88",
-    "@graphcommerce/image": "^9.0.0-canary.88",
-    "@graphcommerce/prettier-config-pwa": "^9.0.0-canary.88",
-    "@graphcommerce/typescript-config-pwa": "^9.0.0-canary.88",
+    "@graphcommerce/eslint-config-pwa": "^9.0.0-canary.89",
+    "@graphcommerce/framer-next-pages": "^9.0.0-canary.89",
+    "@graphcommerce/framer-scroller": "^9.0.0-canary.89",
+    "@graphcommerce/framer-utils": "^9.0.0-canary.89",
+    "@graphcommerce/image": "^9.0.0-canary.89",
+    "@graphcommerce/prettier-config-pwa": "^9.0.0-canary.89",
+    "@graphcommerce/typescript-config-pwa": "^9.0.0-canary.89",
     "@lingui/core": "^4.2.1",
     "@lingui/macro": "^4.2.1",
     "@lingui/react": "^4.2.1",