@shopgate/engage/cart/components/PaymentBar/PaymentBarCheckoutButton.js

Shopgate's ENGAGE library.

import React, { useContext, useMemo } from 'react';
import { I18n, Link, SurroundPortals } from '@shopgate/engage/components';
import { CART_CHECKOUT_BUTTON } from '@shopgate/pwa-common-commerce/cart/constants/Portals';
import RippleButton from '@shopgate/pwa-ui-shared/RippleButton';
import { CHECKOUT_PATH } from '@shopgate/pwa-common/constants/RoutePaths';
import PropTypes from 'prop-types';
import { CartContext } from "../../cart.context";
import connect from "./PaymentBarCheckoutButton.connector";
import { button, disabledButton } from "./PaymentBarCheckoutButton.style";

/**
 * Renders the cart payment bar checkout button.
 * @param {boolean} isOrderable Whether the cart is orderable.
 * @return {JSX.Element}
 */
import { jsx as _jsx } from "react/jsx-runtime";
const PaymentBarCheckoutButton = ({
  isOrderable
}) => {
  const {
    isLoading
  } = useContext(CartContext);
  const isActive = useMemo(() => isOrderable && !isLoading, [isLoading, isOrderable]);
  return /*#__PURE__*/_jsx(SurroundPortals, {
    portalName: CART_CHECKOUT_BUTTON,
    portalProps: {
      isActive
    },
    children: /*#__PURE__*/_jsx(Link, {
      href: CHECKOUT_PATH,
      disabled: !isActive,
      tabIndex: 0,
      role: "button",
      "aria-disabled": !isActive,
      children: /*#__PURE__*/_jsx(RippleButton, {
        disabled: !isActive,
        type: "regular",
        className: isActive ? button : disabledButton,
        children: /*#__PURE__*/_jsx(I18n.Text, {
          string: "cart.checkout"
        })
      })
    })
  });
};
PaymentBarCheckoutButton.defaultProps = {
  isOrderable: true
};
export default connect(PaymentBarCheckoutButton);