@shopgate/engage/checkout/components/ResponsiveBackButton/ResponsiveBackButton.js

Shopgate's ENGAGE library.

import React, { useCallback } from 'react';
import PropTypes from 'prop-types';
import { RippleButton, I18n, ArrowIcon } from '@shopgate/engage/components';
import { useNavigation } from '@shopgate/engage/core';
import { container, button, buttonIcon } from "./ResponsiveBackButton.style";

/**
 * A back button  for the desktop checkout pages.
 * @returns {JSX}
 */
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const ResponsiveBackButton = ({
  label,
  onClick
}) => {
  const {
    pop
  } = useNavigation();
  const handleClick = useCallback(() => {
    if (onClick) {
      onClick();
      return;
    }
    pop();
  }, [onClick, pop]);
  return /*#__PURE__*/_jsx("div", {
    className: container,
    children: /*#__PURE__*/_jsxs(RippleButton, {
      flat: true,
      className: button,
      type: "secondary",
      onClick: handleClick,
      children: [/*#__PURE__*/_jsx(ArrowIcon, {
        className: buttonIcon
      }), /*#__PURE__*/_jsx(I18n.Text, {
        string: label
      })]
    })
  });
};
ResponsiveBackButton.defaultProps = {
  label: 'common.back',
  onClick: null
};
export default ResponsiveBackButton;