@dynamic-labs/sdk-react-core/src/lib/views/CollectUserDataView/UserDataFields/UserField/UserField.js

A React SDK for implementing wallet web3 authentication and authorization to your website.

'use client'
import { jsx, jsxs } from 'react/jsx-runtime';
import { Field } from 'formik';
import { CustomFieldType } from '@dynamic-labs/sdk-api-core';
import '@dynamic-labs/utils';
import '../../../../components/Accordion/components/AccordionItem/AccordionItem.js';
import 'react-i18next';
import 'react';
import '@dynamic-labs/iconic';
import '../../../../context/ViewContext/ViewContext.js';
import '../../../../../../_virtual/_tslib.js';
import '../../../../shared/logger.js';
import '@dynamic-labs/wallet-connector-core';
import '@dynamic-labs/wallet-book';
import '../../../../utils/constants/colors.js';
import '../../../../utils/constants/values.js';
import { countryCodes, teamNames, tShirtSizes } from '../../../../shared/consts/index.js';
import '../../../../components/Alert/Alert.js';
import '../../../../events/dynamicEvents.js';
import '../../../../context/DynamicContext/DynamicContext.js';
import '../../../../store/state/loadingAndLifecycle/loadingAndLifecycle.js';
import '../../../../store/state/authMode/authMode.js';
import '../../../../context/CaptchaContext/CaptchaContext.js';
import '../../../../context/ErrorContext/ErrorContext.js';
import '@dynamic-labs/multi-wallet';
import 'react-international-phone';
import '../../../../store/state/nonce/nonce.js';
import '../../../../store/state/projectSettings/projectSettings.js';
import '../../../../config/ApiEndpoint.js';
import '../../../../store/state/user/user.js';
import '../../../../locale/locale.js';
import '../../../../store/state/dynamicContextProps/dynamicContextProps.js';
import '../../../../store/state/primaryWalletId/primaryWalletId.js';
import '../../../../store/state/connectedWalletsInfo/connectedWalletsInfo.js';
import '../../../../context/AccessDeniedContext/AccessDeniedContext.js';
import '../../../../context/AccountExistsContext/AccountExistsContext.js';
import '../../../../context/UserWalletsContext/UserWalletsContext.js';
import '../../../../context/VerificationContext/VerificationContext.js';
import 'react-dom';
import '../../../../utils/functions/compareChains/compareChains.js';
import '../../../Passkey/utils/findPrimaryEmbeddedChain/findPrimaryEmbeddedChain.js';
import '../../../../context/ThemeContext/ThemeContext.js';
import '../../../../utils/hooks/useUserUpdateRequest/useUpdateUser/userFieldsSchema.js';
import 'bs58';
import '@dynamic-labs/types';
import '../../../../context/SocialRedirectContext/SocialRedirectContext.js';
import '../../../../context/LoadingContext/LoadingContext.js';
import '../../../../context/WalletContext/WalletContext.js';
import '../../../../utils/hooks/useEmbeddedWallet/useSecureEnclaveEmbeddedWallet/constants.js';
import 'yup';
import '../../../../context/MockContext/MockContext.js';
import '../../useFields.js';
import '../../../../context/FieldsStateContext/FieldsStateContext.js';
import '../../../../context/UserFieldEditorContext/UserFieldEditorContext.js';
import '@dynamic-labs/rpc-providers';
import '../../../../store/state/walletOptions/walletOptions.js';
import { Typography } from '../../../../components/Typography/Typography.js';
import '../../../../context/FooterAnimationContext/index.js';
import '../../../../components/ShadowDOM/ShadowDOM.js';
import '../../../../components/Transition/ZoomTransition/ZoomTransition.js';
import '../../../../components/Transition/SlideInUpTransition/SlideInUpTransition.js';
import '../../../../components/Transition/OpacityTransition/OpacityTransition.js';
import '../../../../components/OverlayCardBase/OverlayCardTarget/OverlayCardTarget.js';
import '../../../../context/WalletGroupContext/WalletGroupContext.js';
import '../../../../widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetHeader.js';
import 'react-focus-lock';
import '../../../../widgets/DynamicWidget/context/DynamicWidgetContext.js';
import '../../../../components/IconButton/IconButton.js';
import '../../../../components/MenuList/Dropdown/Dropdown.js';
import { UserPhoneField } from '../UserPhoneField/UserPhoneField.js';
import { getDisplayErrorMessage } from '../utils/getDisplayErrorMessage/getDisplayErrorMessage.js';
import '../../../../utils/hooks/useSubdomainCheck/useSubdomainCheck.js';
import '../../../../store/state/sendBalances.js';
import { Input } from '../../../../components/Input/Input.js';
import '../../../../components/OverlayCard/OverlayCard.js';
import '../../../TransactionConfirmationView/TransactionConfirmationView.js';
import '../../../../context/PasskeyContext/PasskeyContext.js';
import '../../../../widgets/DynamicWidget/views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.js';
import '../../../../context/OnrampContext/OnrampContext.js';
import 'qrcode';
import '../../../../widgets/DynamicWidget/views/ReceiveWalletFunds/ReceiveWalletFunds.js';
import '../../../../../index.js';
import '../../../../context/IpConfigurationContext/IpConfigurationContext.js';
import '../../../../context/ConnectWithOtpContext/ConnectWithOtpContext.js';
import '../../../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.js';
import '@hcaptcha/react-hcaptcha';
import { Checkbox } from '../../../../components/Checkbox/Checkbox.js';
import '../../../../context/ErrorContext/hooks/useErrorText/useErrorText.js';
import '../../../../components/PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.js';
import '../../../../widgets/DynamicWidget/helpers/convertExchangeKeyAndProviderEnum.js';
import '../../../../store/state/connectorsInitializing/connectorsInitializing.js';
import '../../../../store/state/tokenBalances.js';
import '../../../../shared/utils/functions/getInitialUrl/getInitialUrl.js';
import '../../../../components/InlineWidget/InlineWidget.js';
import '../../../../components/IsBrowser/IsBrowser.js';
import '../../../../components/Popper/Popper/Popper.js';
import '../../../../components/Popper/PopperContext/PopperContext.js';
import { Select } from '../../../../components/Select/Select.js';

const renderSelectField = ({ key, name, label, type, options, disabled, dataTestId }, { errors, touched }) => (jsx(Field, { copykey: key, as: Select, type: type, id: name, name: name, label: label, error: Boolean(errors[name] && touched[name]), selectDataTestId: dataTestId, message: touched[name] && getDisplayErrorMessage(label, errors[name]), disabled: disabled, children: options.map((option) => typeof option === 'string' ? (jsx("option", { value: option, children: option }, option)) : (jsx("option", { value: option.value, children: option.label }, option.value))) }, name));
const renderCheckboxGroup = (key, name, label, validationRules, errors, touched, disabled) => (jsxs("div", { children: [jsx("div", { role: 'group', "aria-labelledby": 'checkbox-group', className: `user-field__checkbox-container ${errors[name] && touched[name]
                ? 'user-field__checkbox-container--error'
                : ''}`, children: (validationRules === null || validationRules === void 0 ? void 0 : validationRules.checkboxText) && (jsxs("div", { className: 'user-field__consent-checkbox', children: [jsx(Field, { as: Checkbox, id: key, name: name, type: 'checkbox', value: '0', disabled: disabled, selectDataTestId: 'customFieldCheckbox' }, key), jsx("label", { htmlFor: key, className: 'user-field__checkbox-label', children: jsx(Typography, { variant: 'body_small', color: 'secondary', children: validationRules.checkboxText }) })] }, key)) }, 'customConsentGroup'), touched[name] && getDisplayErrorMessage(label, errors[name]) && (jsx(Typography, { variant: 'body_mini', className: 'user-field__error-message', children: `${name.charAt(0).toUpperCase() + name.slice(1)} is required` }))] }));
const renderPoliciesConsentGroup = (key, policiesConsentInnerComponentArray, disabled) => (jsx("div", { role: 'group', "aria-labelledby": 'checkbox-group', className: 'user-field__checkbox-container', children: policiesConsentInnerComponentArray === null || policiesConsentInnerComponentArray === void 0 ? void 0 : policiesConsentInnerComponentArray.map((component, index) => (jsxs("div", { className: 'user-field__consent-checkbox', children: [jsx(Field, { copykey: key, as: Checkbox, id: `policiesConsent_${index}`, name: 'policiesConsentArray', type: 'checkbox', value: `${index}`, disabled: disabled }, `policiesConsent_${index}`), jsx("label", { htmlFor: `policiesConsent_${index}`, className: 'user-field__checkbox-label', children: jsx(Typography, { variant: 'body_small', color: 'secondary', children: component }) })] }, `policiesConsent_${index}`))) }, 'policiesConsentGroup'));
const UserField = ({ fieldData: { validationRules, isCustom, key, label: defaultLabel, type, autoComplete, }, fieldSettings: { enabled, name, required, verify, label = defaultLabel }, errors, touched, disabled, policiesConsentInnerComponentArray, }) => {
    if (isCustom) {
        if (type === CustomFieldType.Select && (validationRules === null || validationRules === void 0 ? void 0 : validationRules.validOptions)) {
            const options = validationRules.validOptions.map((opt) => opt.label);
            return renderSelectField({
                dataTestId: 'customFieldSelect',
                disabled,
                key,
                label,
                name,
                options,
                type,
            }, { errors, touched });
        }
        else if (type === CustomFieldType.Checkbox) {
            return renderCheckboxGroup(key, name, label, validationRules, errors, touched, disabled);
        }
    }
    switch (name) {
        case 'tShirtSize':
            return renderSelectField({
                dataTestId: 'tShirtSizeSelect',
                disabled,
                key,
                label,
                name,
                options: tShirtSizes,
                type,
            }, { errors, touched });
        case 'team':
            return renderSelectField({
                dataTestId: 'teamSelect',
                disabled,
                key,
                label,
                name,
                options: teamNames,
                type,
            }, { errors, touched });
        case 'country':
            return renderSelectField({
                dataTestId: 'countrySelect',
                disabled,
                key,
                label,
                name,
                options: countryCodes.map((countryCode) => ({
                    label: countryCode.name,
                    value: countryCode.code,
                })),
                type,
            }, { errors, touched });
        case 'policiesConsent':
            return renderPoliciesConsentGroup(key, policiesConsentInnerComponentArray, disabled);
        case 'phoneNumber':
            return (jsx(Field, { name: name, as: UserPhoneField, disabled: disabled, label: label, required: required, error: touched[name] && errors[name]
                    ? getDisplayErrorMessage(label, errors[name])
                    : undefined, verify: verify, autoComplete: autoComplete }, name));
        default:
            return (jsx(Field, { copykey: key, disabled: disabled, as: Input, type: type, id: name, name: name, label: label, optional: enabled && !required, error: errors[name] && touched[name], message: touched[name] && getDisplayErrorMessage(label, errors[name]), autoComplete: autoComplete }, name));
    }
};

export { UserField };