Introduction

Beyond basic beverage selection and pouring, the CUI Kit can integrate additional lifecycles into its state machine—one of which manages user inactivity. This inactivity lifecycle handles default navigation and state transitions when the user is idle or no longer present at the dispenser.

Inactivity Lifecycle Use Cases

The inactivity lifecycle addresses three common scenarios:

Idle with No Beverage Selected:

• Ambient Screen:

When no beverage is selected and the UI is idle for a configurable duration, an ambient screen (typically displaying an image or video) is shown.

• Attract Screen:

If the ambient screen remains active without user interaction for an additional period, the UI transitions to an attract screen with alternate branding to boost user engagement.

Beverage Selected but Not Poured:

• After a set timeout, an “Are You There?” prompt appears while the user is browsing beverage options.
• No Response:

If the user does not acknowledge the prompt, the selection is cleared and the UI navigates back to the home screen.

• User Acknowledgement:

If the user confirms their presence, the session continues. This scenario handles cases where the user might walk away mid-selection.

Beverage Selected and Poured:

• The flow is similar to the previous case, but typically with shorter timeouts to quickly return to a default state after pouring begins.

These scenarios involve several sub-states, which can lead to complex and error-prone implementations if handled manually.

Initializing the Inactivity Lifecycle

To simplify this process, the CUI Kit offers the useDefaultCuiKitLifecycle hook. This hook is configured with various timeouts and integrates directly with the CUI Kit instance, ensuring that navigation handlers maintain state integrity. For example:

// apps/training-zero4-ui/src/app/components/main-view/main-view.tsx
const kit = useCuiKitContext();
// Initialize the default lifecycle with specific timeouts:
// - For general inactivity (idle and "Are You There?" prompts)
// - For the pouring state (with shorter timeouts)
// - For screen transitions (ambient to attract screens)
const {
  showAreYouThere,
  areYouThereCountdown,
  clearAreYouThere,
  showAmbientScreen,
  showAttractScreen,
  pauseScreenTimer,
} = useDefaultCuiKitLifecycle({
  kit,
  inactivity: {
    idleTimeout: 15,
    areYouThereTimeoutOffset: 10,
  },
  pour: {
    idleTimeout: 10,
    areYouThereTimeoutOffset: 5,
  },
  screens: {
    attractTimeout: 20,
    ambientTimeoutOffset: 10,
  },
});

Managing Display State

The useDefaultCuiKitLifecycle hook returns both state values and handler functions that drive the display of alternate views. This design allows the UI to simply reflect the current state without managing separate timers or complex business logic. For instance, you can conditionally render different components based on the lifecycle state:

{showAmbientScreen && <Ambient onReset={pauseScreenTimer} />}
{showAttractScreen && <Attract onReset={pauseScreenTimer} />}
<AreYouThere
  countdown={areYouThereCountdown}
  show={showAreYouThere}
  onClose={clearAreYouThere}
/>

Here, the ambient, attract, and “Are You There?” views are shown or hidden automatically as the underlying state machine updates.

Current State

With just a few lines of code, the entire inactivity lifecycle—along with other custom lifecycles—can be managed by the CUI Kit. All underlying timers and state transitions are handled by the lifecycle handler, which is integrated with the CUI Kit’s navigation. This ensures that all application states remain consistent. For example, after a delay, you will see the “Are You There?” prompt, and subsequently, the attract or ambient screens will be displayed at the appropriate times.

Conclusion

You have now integrated the inactivity lifecycle into the Zero4 Consumer UI tutorial. The CUI Kit’s lifecycle management capabilities simplify the implementation of sophisticated workflows, ensuring a consistent and responsive user experience without the need for complex custom code.