Add lastStepNextButton prop to allow customization of the next button in last step of the popover

apps/web/components/config.tsx

@@ -161,6 +161,11 @@ const tourConfig: StepType[] = [
     highlightedSelectors: ['.modaaals-modal'],
     mutationObservables: ['#portaaal'],
   },
+  {
+    selector: '[data-tour="open_modal"]',
+    content:
+      "You can also customize the next button in the last step and make it do what you want. Notice the Done button here, it'll close the tour.",
+  },
 ]
 
 const tourConfigAlt: StepType[] = [

apps/web/pages/index.tsx

@@ -5,12 +5,21 @@ import { isMobile } from 'react-device-detect'
 import Home from '../components/Home'
 import Portal from '../components/Portal'
 import { tourConfig, tourConfigAlt } from '../components/config'
+import { Button } from '../components/Button'
 
 function App() {
   const disableBody = (target: Element | HTMLElement) =>
     disableBodyScroll(target)
   const enableBody = (target: Element | HTMLElement) => enableBodyScroll(target)
 
+  const closeButton = (props) => {
+    const { setIsOpen } = props
+    const clickHandler = () => {
+      setIsOpen(false)
+    }
+    return <Button onClick={clickHandler}>Done</Button>
+  }
+
   return (
     <>
       <TourProvider
@@ -68,6 +77,7 @@ function App() {
           }
         }}
         disableKeyboardNavigation={['esc']}
+        lastStepNextButton={closeButton}
       >
         <ModalProvider
           modals={modals}

packages/tour/README.md

@@ -157,7 +157,7 @@ Prop to customize granurally each Component inside the _Popover_.
 | `Badge`      | `styles`                                                                                                                                                            |
 | `Close`      | `styles`, `onClick`, `disabled`                                                                                                                                     |
 | `Content`    | `content`,`setCurrentStep`,`transition`, `isHighlightingObserved`,`currentStep`,`setIsOpen`                                                                         |
-| `Navigation` | `styles`,`setCurrentStep`, `steps`, `currentStep`, `disableDots`, `nextButton`, `prevButton`, `setIsOpen`, `hideButtons`, `hideDots`, `disableAll`, `rtl`, `Arrow`, |
+| `Navigation` | `styles`,`setCurrentStep`, `steps`, `currentStep`, `disableDots`, `nextButton`, `prevButton`, `lastStepNextButton`, `setIsOpen`, `hideButtons`, `hideDots`, `disableAll`, `rtl`, `Arrow`, |
 | `Arrow`      | `styles`, `inverted`, `disabled`                                                                                                                                    |
 
 <details>
@@ -353,6 +353,8 @@ default: `reactour__mask`
 
 ### `prevButton?: (props: BtnFnProps) => void`
 
+### `lastStepNextButton?: (props: BtnFnProps) => void`
+
 <details>
   <summary><small>Type details</small></summary>
 
@@ -374,7 +376,11 @@ type NavButtonProps = {
 
 </details>
 
-Helper functions to customize the _Next_ and _Prev_ buttons inside _Popover_, with useful parameters. It is possible to use the base `Button` and customize the props.
+Helper functions to:
+- customize the _Next_ and _Prev_ buttons inside _Popover_ 
+- customize the _Next_ button of last step inside _Popover, with useful parameters
+
+It is possible to use the base `Button` and customize the props.
 
 ### `afterOpen?: (target: Element | null) => void`
 
@@ -618,6 +624,7 @@ type PopoverContentProps = {
   showBadge?: boolean
   nextButton?: (props: BtnFnProps) => void
   prevButton?: (props: BtnFnProps) => void
+  lastStepNextButton?: (props: BtnFnProps) => void
   disableDotsNavigation?: boolean
   rtl?: boolean
 }

packages/tour/components/Navigation.tsx

@@ -15,6 +15,7 @@ const Navigation: React.FC<NavigationProps> = ({
   setIsOpen,
   nextButton,
   prevButton,
+  lastStepNextButton,
   disableDots,
   hideDots,
   hideButtons,
@@ -24,6 +25,7 @@ const Navigation: React.FC<NavigationProps> = ({
 }) => {
   const stepsLength = steps.length
   const getStyles = stylesMatcher(styles)
+  const isLastStep = currentStep === steps.length - 1
 
   const Button: React.FC<PropsWithChildren<NavButtonProps>> = ({
     onClick,
@@ -114,7 +116,18 @@ const Navigation: React.FC<NavigationProps> = ({
         </div>
       ) : null}
       {!hideButtons ? (
-        nextButton && typeof nextButton === 'function' ? (
+        isLastStep &&
+        lastStepNextButton &&
+        typeof lastStepNextButton === 'function' ? (
+          lastStepNextButton({
+            Button,
+            setCurrentStep,
+            currentStep,
+            stepsLength,
+            setIsOpen,
+            steps,
+          })
+        ) : nextButton && typeof nextButton === 'function' ? (
           nextButton({
             Button,
             setCurrentStep,
@@ -142,6 +155,7 @@ export type NavigationProps = BaseProps & {
   disableDots?: boolean
   nextButton?: (props: BtnFnProps) => ReactNode | null
   prevButton?: (props: BtnFnProps) => ReactNode | null
+  lastStepNextButton?: (props: BtnFnProps) => ReactNode | null
   setIsOpen: Dispatch<React.SetStateAction<Boolean>>
   hideButtons?: boolean
   hideDots?: boolean

packages/tour/components/PopoverContent.tsx

@@ -17,6 +17,7 @@ const PopoverContent: React.FC<PopoverContentProps> = ({
   setIsOpen,
   nextButton,
   prevButton,
+  lastStepNextButton,
   disableDotsNavigation,
   rtl,
   showPrevNextButtons = true,
@@ -88,6 +89,7 @@ const PopoverContent: React.FC<PopoverContentProps> = ({
           aria-hidden={!accessibilityOptions?.showNavigationScreenReaders}
           nextButton={nextButton}
           prevButton={prevButton}
+          lastStepNextButton={lastStepNextButton}
           disableDots={disableDotsNavigation}
           hideButtons={!showPrevNextButtons}
           hideDots={!showDots}

packages/tour/types.tsx

@@ -27,6 +27,7 @@ type SharedProps = KeyboardHandler & {
   clipId?: string
   nextButton?: (props: BtnFnProps) => ReactNode | null
   prevButton?: (props: BtnFnProps) => ReactNode | null
+  lastStepNextButton?: (props: BtnFnProps) => ReactNode | null
   afterOpen?: (target: Element | null) => void
   beforeClose?: (target: Element | null) => void
   onClickMask?: (clickProps: ClickProps) => void
@@ -68,6 +69,7 @@ export type PopoverContentProps = {
   showDots?: boolean
   nextButton?: (props: BtnFnProps) => ReactNode | null
   prevButton?: (props: BtnFnProps) => ReactNode | null
+  lastStepNextButton?: (props: BtnFnProps) => ReactNode | null
   disableDotsNavigation?: boolean
   rtl?: boolean
   meta?: string