@shopgate/engage/checkout/components/Checkout/CheckoutActions.js

Shopgate's ENGAGE library.

import React from 'react';
import { css } from 'glamor';
import { i18n } from '@shopgate/engage/core';
import { RippleButton, SurroundPortals } from '@shopgate/engage/components';
import { useCheckoutContext } from "../../hooks/common";
import { SupplementalContent } from "../SupplementalContent";
import { CHECKOUT_ACTIONS } from "../../constants";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const styles = {
  root: css({
    padding: 16,
    paddingTop: 0,
    display: 'flex',
    flexDirection: 'column',
    flex: '0 0 auto'
  }).toString()
};

/**
 * PickupContactForm
 * @returns {JSX}
 */
const Actions = () => {
  const {
    handleSubmitOrder,
    handleValidation,
    paymentButton: PaymentButton,
    isButtonLocked
  } = useCheckoutContext();
  const originalButton = /*#__PURE__*/_jsx(RippleButton, {
    type: "secondary",
    onClick: handleSubmitOrder,
    disabled: isButtonLocked,
    children: i18n.text('checkout.submit_order')
  });
  return /*#__PURE__*/_jsx(SurroundPortals, {
    portalName: CHECKOUT_ACTIONS,
    children: /*#__PURE__*/_jsxs("div", {
      className: styles.root,
      children: [PaymentButton ? /*#__PURE__*/_jsx(PaymentButton, {
        onSubmit: handleSubmitOrder,
        onValidate: handleValidation,
        disabled: isButtonLocked,
        children: originalButton
      }) : originalButton, /*#__PURE__*/_jsx(SupplementalContent, {})]
    })
  });
};
export default Actions;