Flash Messages

Your server actions may need to display information to the User after a redirection. This guide explains how to use Front-Commerce's flash messages to achieve this.

Front-Commerce 2.3 introduced a "flash message" mechanism to allow developers to implement ephemeral messages without boilerplate. It can be helpful on a confirmation URL or for return endpoints (for instance, when a customer comes back to your website from a third-party service).

Add flash messages server side

A req.addFlashMessage() method is available on the Express request object. It allows you to add a flash message that will be server rendered and displayed wherever the new <FlashMessages /> component (see below) is used.

Messages can be either a string or an object with the following attributes:

• message text
• type key: allows to display a specific component (see below)
• data object: additional data to be passed to the component displayed

Advanced

If you want to consume flash messages server side, you can use the req.useFlashMessages() method. It will return the currently registered flash messages and remove them from the session. This is what Front-Commerce SSR mechanism uses internally.

Display flash messages

Flash messages are displayed using the <FlashMessages /> component. By default, flash messages are used on the Cart and Checkout success pages.

You can include them in your page with the following lines:

import React from "react";
import FlashMessages from "theme/modules/FlashMessages";

const MyPage = () => {
  return (
    <div>
      <FlashMessages />
      <p>Hello</p>
      <p>World</p>
    </div>
  );
};

Create custom flash message components

The previous type key allows you to render flash messages in custom ways. It is useful to display a specific user message by presenting different structured information.

Out of the box, Front-Commerce supports the following types:

• default
• info
• error
• success

To override this mechanism and add your own types, you must override the getFlashMessageComponent.js module. Here is an snippet (from the Adyen payment module documentation):

mkdir -p my-module/web/theme/modules/FlashMessages
cp -u node_modules/front-commerce/src/web/theme/modules/FlashMessages/getFlashMessageComponent.js my-module/web/theme/modules/FlashMessages/getFlashMessageComponent.js

my-module/web/theme/modules/FlashMessages/getFlashMessageComponent.js

import React from "react";
import {
  InfoAlert,
  ErrorAlert,
  SuccessAlert,
} from "theme/components/molecules/Alert";
import { BodyParagraph } from "theme/components/atoms/Typography/Body";
import {
  AdyenPaymentSuccess,
  AdyenPaymentError,
} from "theme/modules/Adyen/FlashMessage";

// […]

const ComponentMap = {
  default: makeAlertMessageComponent(InfoAlert),
  info: makeAlertMessageComponent(InfoAlert),
  error: makeAlertMessageComponent(ErrorAlert),
  success: makeAlertMessageComponent(SuccessAlert),
  adyenSuccess: AdyenPaymentSuccess,
  adyenError: AdyenPaymentError,
};