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

Shopgate's ENGAGE library.

import React, { useMemo, useCallback } from 'react';
import PropTypes from 'prop-types';
import { FormBuilder } from '@shopgate/engage/components';
import { useRegistration } from "../../hooks";
import Section from "../../../checkout/components/Checkout/CheckoutSection";
import { ELEMENT_ID_BILLING_CONTACT } from "../../constants";
import generateFormConfig from "./RegistrationFormBilling.config";
import { form, section } from "./RegistrationContent.style";

/**
 * The RegistrationFormBilling component.
 * @param {Object} props The component props
 * @returns {JSX.Element}
 */
import { jsx as _jsx } from "react/jsx-runtime";
const RegistrationFormBilling = ({
  isGuest
}) => {
  const {
    supportedCountries,
    countrySortOrder,
    userLocation,
    defaultBillingFormState,
    billingFormValidationErrors,
    updateBillingForm,
    numberOfAddressLines,
    orderReserveOnly,
    isBillingAddressSelectionEnabled
  } = useRegistration(isGuest);
  const formConfig = useMemo(() => generateFormConfig({
    supportedCountries,
    countrySortOrder,
    userLocation,
    numberOfAddressLines,
    isGuest,
    isReserveOnly: orderReserveOnly
  }), [countrySortOrder, isGuest, numberOfAddressLines, orderReserveOnly, supportedCountries, userLocation]);
  const title = useMemo(() => {
    if (isGuest && orderReserveOnly) {
      return 'registration.headlines.billing_address_reserve';
    }
    return 'registration.headlines.billing_address';
  }, [isGuest, orderReserveOnly]);
  const handleUpdate = useCallback(values => {
    updateBillingForm(values);
  }, [updateBillingForm]);
  if (!isBillingAddressSelectionEnabled) {
    return null;
  }
  return /*#__PURE__*/_jsx(Section, {
    title: title,
    className: section,
    hasForm: true,
    id: ELEMENT_ID_BILLING_CONTACT,
    children: /*#__PURE__*/_jsx(FormBuilder, {
      className: form,
      name: "RegistrationBilling",
      config: formConfig,
      defaults: defaultBillingFormState,
      validationErrors: billingFormValidationErrors,
      handleUpdate: handleUpdate
    })
  });
};
RegistrationFormBilling.defaultProps = {
  isGuest: false
};
export default RegistrationFormBilling;