@shopgate/engage/cart/components/CartSummaryWide/CartSummaryWideCheckoutButton.js

Shopgate's ENGAGE library.

import React, { useContext, useMemo } from 'react';
import classNames from 'classnames';
import { SurroundPortals, I18n, Link } 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 { container, button, disabledButton } from "./CartSummaryWideCheckoutButton.style";
import connect from "./CartSummaryWideCheckoutButton.connector";

/**
 * @param {Object} props The component props
 * @param {boolean} props.isOrderable Indicates whether the cart is orderable.
 * @returns {JSX.Element}
 */
import { jsx as _jsx } from "react/jsx-runtime";
const CartSummaryWideCheckoutButton = ({
  isOrderable
}) => {
  const {
    isLoading
  } = useContext(CartContext);
  const isActive = useMemo(() => isOrderable && !isLoading, [isLoading, isOrderable]);
  const classes = classNames(button, {
    [disabledButton]: !isActive
  });
  return /*#__PURE__*/_jsx("div", {
    className: container,
    children: /*#__PURE__*/_jsx(SurroundPortals, {
      portalName: CART_CHECKOUT_BUTTON,
      portalProps: {
        isActive
      },
      children: /*#__PURE__*/_jsx(Link, {
        href: CHECKOUT_PATH,
        disabled: !isActive,
        children: /*#__PURE__*/_jsx(RippleButton, {
          disabled: !isActive,
          type: "regular",
          className: classes,
          children: /*#__PURE__*/_jsx(I18n.Text, {
            string: "cart.checkout"
          })
        })
      })
    })
  });
};
CartSummaryWideCheckoutButton.defaultProps = {
  isOrderable: true
};
export default connect(CartSummaryWideCheckoutButton);