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

Shopgate's ENGAGE library.

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

/**
 * The RegistrationFormExtra component.
 * @param {Object} props The component props
 * @returns {JSX}
 */
import { jsx as _jsx } from "react/jsx-runtime";
const RegistrationFormExtra = ({
  isGuest
}) => {
  const {
    defaultExtraFormState,
    updateExtraForm,
    customerAttributes,
    extraFormValidationErrors,
    supportedCountries,
    countrySortOrder,
    userLocation
  } = useRegistration(isGuest);
  const formConfig = useMemo(() => generateFormConfig({
    customerAttributes,
    isGuest,
    supportedCountries,
    countrySortOrder,
    userLocation
  }), [countrySortOrder, customerAttributes, isGuest, supportedCountries, userLocation]);
  const handleUpdate = useCallback(values => {
    updateExtraForm(values);
  }, [updateExtraForm]);
  return /*#__PURE__*/_jsx(Section, {
    className: section,
    hasForm: true,
    id: ELEMENT_ID_CUSTOMER_ATTRIBUTES,
    children: /*#__PURE__*/_jsx(FormBuilder, {
      className: form,
      name: "RegistrationExtra",
      config: formConfig,
      defaults: defaultExtraFormState,
      validationErrors: extraFormValidationErrors,
      handleUpdate: handleUpdate
    })
  });
};
RegistrationFormExtra.defaultProps = {
  isGuest: false
};
export default RegistrationFormExtra;