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

Shopgate's ENGAGE library.

import "core-js/modules/es.regexp.flags.js";
import React from 'react';
import PropTypes from 'prop-types';
import { I18n, SurroundPortals, RippleButton } from '@shopgate/engage/components';
import { CART_CHECKOUT_BUTTON } from '@shopgate/pwa-common-commerce/cart/constants/Portals';
import { FulfillmentSheet, STAGE_RESERVE_FORM } from "../../../locations";
import { CartContext } from "../../cart.context";
import { button, disabledButton } from "./PaymentBarCheckoutButton.style";
import connect from "./PaymentBarReserveButton.connector";

/**
 * The reserve button component.
 * @param {Object} props The component props.
 * @param {Function} props.historyReset The history reset function.
 * @return {JSX.Element} The rendered component.
 */
import { jsx as _jsx } from "react/jsx-runtime";
const PaymentBarReserveButton = ({
  historyReset
}) => {
  const {
    flags: {
      orderable
    }
  } = React.useContext(CartContext);

  /**
   * Handles the click on the button.
   */
  const handleClick = React.useCallback(() => {
    FulfillmentSheet.open({
      stage: STAGE_RESERVE_FORM,
      callback: (_location, _product, orderSuccess) => {
        if (orderSuccess === true) {
          historyReset();
        }
      }
    });
  }, [historyReset]);
  return /*#__PURE__*/_jsx(SurroundPortals, {
    portalName: CART_CHECKOUT_BUTTON,
    portalProps: {
      isActive: orderable
    },
    children: /*#__PURE__*/_jsx(RippleButton, {
      onClick: handleClick,
      disabled: !orderable,
      type: "regular",
      className: orderable ? button : disabledButton,
      children: /*#__PURE__*/_jsx(I18n.Text, {
        string: "cart.reserve"
      })
    })
  });
};
export default connect(PaymentBarReserveButton);