@shopgate/engage/registration/components/Registration/RegistrationFormToggle.js

Shopgate's ENGAGE library.

import React, { useCallback } from 'react';
import PropTypes from 'prop-types';
import { css } from 'glamor';
import { i18n } from '@shopgate/engage/core';
import { Toggle } from '@shopgate/engage/components';
import { ELEMENT_ID_SHIPPING_CONTACT_TOGGLE } from "../../constants";
import { useRegistration } from "../../hooks";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const styles = {
  root: css({
    display: 'flex',
    justifyContent: 'space-between',
    paddingBottom: 24
  }).toString(),
  label: css({
    paddingRight: 8
  }).toString()
};

/**
 * @param {Object} props The component props
 * @returns {JSX.Element}
 */
const RegistrationFormToggle = ({
  isGuest
}) => {
  const {
    isShippingAddressSelectionEnabled,
    isShippingFormVisible,
    setIsShippingFormVisible
  } = useRegistration(isGuest);
  const handleChange = useCallback(e => {
    setIsShippingFormVisible(e.target.checked);
  }, [setIsShippingFormVisible]);
  if (!isShippingAddressSelectionEnabled) {
    return null;
  }
  return /*#__PURE__*/_jsxs("div", {
    className: styles.root,
    id: ELEMENT_ID_SHIPPING_CONTACT_TOGGLE,
    children: [/*#__PURE__*/_jsx("label", {
      "aria-hidden": true,
      className: styles.label,
      htmlFor: "toggle-shipping-form",
      id: "toggle-shipping-form-label",
      children: i18n.text('registration.different_shipping_address_label')
    }), /*#__PURE__*/_jsx(Toggle, {
      id: "toggle-shipping-form",
      checked: isShippingFormVisible,
      onChange: handleChange
    })]
  });
};
RegistrationFormToggle.defaultProps = {
  isGuest: false
};
export default RegistrationFormToggle;