@shopgate/engage/page/components/NotFound.js

Shopgate's ENGAGE library.

import React, { useCallback } from 'react';
import { css } from 'glamor';
import { useDispatch } from 'react-redux';
import RippleButton from '@shopgate/pwa-ui-shared/RippleButton';
import { I18n } from '@shopgate/engage/components';
import { themeConfig } from '@shopgate/pwa-common/helpers/config';
import { historyPop, historyResetTo } from '@shopgate/pwa-common/actions/router';
import { i18n, INDEX_PATH } from "../../core";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const {
  variables
} = themeConfig;
const styles = {
  wrapper: css({
    display: 'flex',
    justifyContent: 'center',
    flexDirection: 'column',
    textAlign: 'center',
    padding: variables.gap.big,
    paddingTop: variables.gap.xxbig
  }).toString(),
  text: css({
    fontSize: '1.5rem'
  }).toString(),
  button: css({
    width: '100%',
    maxWidth: 250
  }).toString(),
  buttonContainer: css({
    flexGrow: '0',
    padding: `${variables.emptyPage.buttonVerticalGap}px ${variables.gap.big}px`,
    display: 'flex',
    flexDirection: 'column',
    gap: variables.gap.big,
    alignItems: 'center'
  }).toString()
};

/**
 * The NotFoundPage component renders a "Page Not Found" view
 * with options to navigate back or to the home page.
 * @returns {JSX.Element}
 */
const NotFound = () => {
  const dispatch = useDispatch();
  const handleBack = useCallback(() => {
    dispatch(historyPop());
  }, [dispatch]);
  const handleHome = useCallback(() => {
    dispatch(historyResetTo(INDEX_PATH));
  }, [dispatch]);
  return /*#__PURE__*/_jsxs("div", {
    className: styles.wrapper,
    children: [/*#__PURE__*/_jsx(I18n.Text, {
      className: styles.text,
      string: "page.not_found"
    }), /*#__PURE__*/_jsxs("div", {
      className: styles.buttonContainer,
      children: [/*#__PURE__*/_jsx(RippleButton, {
        onClick: handleBack,
        className: styles.button,
        type: "secondary",
        children: /*#__PURE__*/_jsx(I18n.Text, {
          string: "common.back"
        })
      }), /*#__PURE__*/_jsx(RippleButton, {
        onClick: handleHome,
        className: styles.button,
        type: "secondary",
        children: /*#__PURE__*/_jsx(I18n.Text, {
          string: "navigation.back",
          params: {
            title: i18n.text('navigation.home')
          }
        })
      })]
    })]
  });
};
export default NotFound;