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

Shopgate's ENGAGE library.

import React,{useContext,useMemo}from'react';import I18n from'@shopgate/pwa-common/components/I18n';import Link from'@shopgate/pwa-common/components/Link';import{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}
 */var PaymentBarCheckoutButton=function PaymentBarCheckoutButton(_ref){var isOrderable=_ref.isOrderable;var _useContext=useContext(CartContext),isLoading=_useContext.isLoading;var isActive=useMemo(function(){return isOrderable&&!isLoading;},[isLoading,isOrderable]);return React.createElement(SurroundPortals,{portalName:CART_CHECKOUT_BUTTON,portalProps:{isActive:isActive}},React.createElement(Link,{href:CHECKOUT_PATH,disabled:!isActive,tabIndex:0,role:"button","aria-disabled":!isActive},React.createElement(RippleButton,{disabled:!isActive,type:"regular",className:isActive?button:disabledButton},React.createElement(I18n.Text,{string:"cart.checkout"}))));};PaymentBarCheckoutButton.defaultProps={isOrderable:true};export default connect(PaymentBarCheckoutButton);