npm - @adyen/adyen-web - Versions diffs - 6.0.0-alpha.3 → 6.0.0-alpha.4 - Mend

@adyen/adyen-web 6.0.0-alpha.3 → 6.0.0-alpha.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1054) hide show

package/dist/es/components/Card/components/CardInput/CardInput.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CardInput.js","sources":["../../../../../../src/components/Card/components/CardInput/CardInput.tsx"],"sourcesContent":["import { h, Fragment } from 'preact';\nimport { useState, useEffect, useRef, useMemo, useCallback } from 'preact/hooks';\nimport SecuredFieldsProvider from '../../../internal/SecuredFields/SFP/SecuredFieldsProvider';\nimport { OnChangeEventDetails, SFPState } from '../../../internal/SecuredFields/SFP/types';\nimport defaultProps from './defaultProps';\nimport './CardInput.scss';\nimport { AddressModeOptions, CardInputDataState, CardInputErrorState, CardInputProps, CardInputRef, CardInputValidState } from './types';\nimport { CVC_POLICY_REQUIRED, DATE_POLICY_REQUIRED, ENCRYPTED_CARD_NUMBER } from '../../../internal/SecuredFields/lib/configuration/constants';\nimport { BinLookupResponse } from '../../types';\nimport { cardInputFormatters, cardInputValidationRules, getRuleByNameAndMode } from './validate';\nimport CIExtensions from '../../../internal/SecuredFields/binLookup/extensions';\nimport useForm from '../../../../utils/useForm';\nimport { SetSRMessagesReturnObject, SortedErrorObject } from '../../../../core/Errors/types';\nimport { handlePartialAddressMode, extractPropsForCardFields, extractPropsForSFP, getLayout, lookupBlurBasedErrors, mapFieldKey } from './utils';\nimport { usePrevious } from '../../../../utils/hookUtils';\nimport Specifications from '../../../internal/Address/Specifications';\nimport { StoredCardFieldsWrapper } from './components/StoredCardFieldsWrapper';\nimport { CardFieldsWrapper } from './components/CardFieldsWrapper';\nimport { getAddressHandler, getAutoJumpHandler, getFocusHandler, setFocusOnFirstField } from './handlers';\nimport { InstallmentsObj } from './components/Installments/Installments';\nimport { TouchStartEventObj } from './components/types';\nimport classNames from 'classnames';\nimport { getPartialAddressValidationRules } from '../../../internal/Address/validate';\nimport { ERROR_ACTION_BLUR_SCENARIO, ERROR_ACTION_FOCUS_FIELD } from '../../../../core/Errors/constants';\nimport useSRPanelContext from '../../../../core/Errors/useSRPanelContext';\nimport { SetSRMessagesReturnFn } from '../../../../core/Errors/SRPanelProvider';\nimport useImage from '../../../../core/Context/useImage';\nimport { getArrayDifferences } from '../../../../utils/arrayUtils';\nimport FormInstruction from '../../../internal/FormInstruction';\nimport { AddressData } from '../../../../types/global-types';\nimport { CbObjOnFocus } from '../../../internal/SecuredFields/lib/types';\nimport { FieldErrorAnalyticsObject } from '../../../../core/Analytics/types';\n\nconst CardInput = (props: CardInputProps) => {\n const sfp = useRef(null);\n const isValidating = useRef(false);\n const getImage = useImage();\n\n /** SR stuff /\n const { setSRMessagesFromObjects, setSRMessagesFromStrings, clearSRPanel, shouldMoveFocusSR } = useSRPanelContext();\n\n // Generate a setSRMessages function - implemented as a partial, since the initial set of arguments don't change.\n const setSRMessages: SetSRMessagesReturnFn = setSRMessagesFromObjects?.({\n fieldTypeMappingFn: mapFieldKey\n });\n /* end SR stuff /\n\n const billingAddressRef = useRef(null);\n const setAddressRef = ref => {\n billingAddressRef.current = ref;\n };\n\n const cardInputRef = useRef<CardInputRef>({});\n // Just call once to create the object by which we expose the members expected by the parent Card comp\n if (!Object.keys(cardInputRef.current).length) {\n props.setComponentRef(cardInputRef.current);\n }\n\n const hasPanLengthRef = useRef(0);\n const isAutoJumping = useRef(false);\n\n const specifications = useMemo(() => new Specifications(props.specifications), [props.specifications]);\n\n // Store ref to sfp (useful for 'deep' debugging)\n cardInputRef.current.sfp = sfp;\n\n /\n STATE HOOKS\n /\n const [status, setStatus] = useState('ready');\n\n const [errors, setErrors] = useState<CardInputErrorState>({});\n const [valid, setValid] = useState<CardInputValidState>({\n ...(props.holderNameRequired && { holderName: false })\n });\n const [data, setData] = useState<CardInputDataState>({\n ...(props.hasHolderName && { holderName: props.data.holderName ?? '' })\n });\n\n const [sortedErrorList, setSortedErrorList] = useState<SortedErrorObject[]>(null);\n\n const [focusedElement, setFocusedElement] = useState('');\n const [isSfpValid, setIsSfpValid] = useState(false);\n const [expiryDatePolicy, setExpiryDatePolicy] = useState(DATE_POLICY_REQUIRED);\n const [cvcPolicy, setCvcPolicy] = useState(CVC_POLICY_REQUIRED);\n const [issuingCountryCode, setIssuingCountryCode] = useState<string>(null);\n\n const [dualBrandSelectElements, setDualBrandSelectElements] = useState([]);\n const [selectedBrandValue, setSelectedBrandValue] = useState(props.storedPaymentMethodId ? props.brand : ''); // If this is a storedCard comp initialise state with the storedCard's brand\n\n const showBillingAddress = props.billingAddressMode !== AddressModeOptions.none && props.billingAddressRequired;\n\n const partialAddressSchema = handlePartialAddressMode(props.billingAddressMode);\n // Keeps the value of the country set initially by the merchant, before the Address Component mutates it\n const partialAddressCountry = useRef<string>(partialAddressSchema && props.data?.billingAddress?.country);\n\n const [storePaymentMethod, setStorePaymentMethod] = useState(false);\n const [billingAddress, setBillingAddress] = useState<AddressData>(showBillingAddress ? props.data.billingAddress : null);\n const [showSocialSecurityNumber, setShowSocialSecurityNumber] = useState(false);\n const [socialSecurityNumber, setSocialSecurityNumber] = useState('');\n const [installments, setInstallments] = useState<InstallmentsObj>({ value: null });\n\n // re. Disable arrows for iOS: The name of the element calling for other elements to be disabled\n // - either a securedField type (like 'encryptedCardNumber') when call is coming from SF\n // or else the name of an internal, Adyen-web, element (like 'holderName')\n const [iOSFocusedField, setIOSFocusedField] = useState(null);\n\n /\n LOCAL VARS\n /\n const {\n handleChangeFor,\n triggerValidation,\n data: formData,\n valid: formValid,\n errors: formErrors,\n setSchema,\n setData: setFormData,\n setValid: setFormValid,\n setErrors: setFormErrors\n } = useForm<CardInputDataState>({\n schema: [],\n defaultData: props.data,\n formatters: cardInputFormatters,\n rules: cardInputValidationRules\n });\n\n const hasInstallments = !!Object.keys(props.installmentOptions).length && props.fundingSource !== 'debit';\n const showAmountsInInstallments = props.showInstallmentAmounts ?? true;\n\n const cardCountryCode: string = issuingCountryCode ?? props.countryCode;\n const isKorea = cardCountryCode === 'kr'; // If issuingCountryCode or the merchant defined countryCode is set to 'kr'\n const showKCP = props.configuration.koreanAuthenticationRequired && isKorea;\n\n const showBrazilianSSN: boolean =\n (showSocialSecurityNumber && props.configuration.socialSecurityNumberMode === 'auto') \|\|\n props.configuration.socialSecurityNumberMode === 'show';\n\n /\n HANDLERS\n /\n // Handlers for focus & blur on all fields. Can be renamed to onFieldFocus once the onFocusField is renamed in Field.tsx\n const onFieldFocusAnalytics = (who: string, e: Event \| CbObjOnFocus) => {\n props.onFocus({ fieldType: who, event: e });\n };\n const onFieldBlurAnalytics = (who: string, e: Event \| CbObjOnFocus) => {\n props.onBlur({ fieldType: who, event: e });\n };\n\n // Make SecuredFields aware of the focus & blur handlers\n const handleFocus = getFocusHandler(setFocusedElement, onFieldFocusAnalytics, onFieldBlurAnalytics);\n\n const retrieveLayout = (): string[] => {\n return getLayout({\n props,\n showKCP,\n showBrazilianSSN,\n ...(props.billingAddressRequired && {\n countrySpecificSchemas: specifications.getAddressSchemaForCountry(billingAddress?.country),\n billingAddressRequiredFields: props.billingAddressRequiredFields\n })\n });\n };\n\n /\n re. Disabling arrow keys in iOS:\n * Only by disabling all fields in the Card PM except for the active securedField input can we force the iOS soft keyboard arrow keys to disable\n \n NOTE: only called if ua.__IS_IOS = true && this.config.disableIOSArrowKeys = true (as referenced in CSF)\n \n @param obj - has fieldType prop saying whether this function is being called in response to an securedFields click ('encryptedCardNumber' etc)\n * - in which case we should disable all non-SF fields\n * or,\n * due to an internal action ('webInternalElement') - in which case we can enable all non-SF fields\n /\n const handleTouchstartIOS = useCallback((obj: TouchStartEventObj) => {\n const elementType = obj.fieldType !== 'webInternalElement' ? obj.fieldType : obj.name;\n setIOSFocusedField(elementType);\n }, []);\n\n const handleAddress = getAddressHandler(setFormData, setFormValid, setFormErrors);\n\n const doPanAutoJump = getAutoJumpHandler(isAutoJumping, sfp, retrieveLayout());\n\n const handleSecuredFieldsChange = (sfState: SFPState, eventDetails?: OnChangeEventDetails): void => {\n /\n Handling auto complete value for holderName (but only if the component is using a holderName field)\n /\n if (sfState.autoCompleteName) {\n if (!props.hasHolderName) return;\n const holderNameValidationFn = getRuleByNameAndMode('holderName', 'blur');\n const acHolderName = holderNameValidationFn(sfState.autoCompleteName) ? sfState.autoCompleteName : null;\n if (acHolderName) {\n setFormData('holderName', acHolderName);\n setFormValid('holderName', true); // only if holderName is valid does this fny get called - so we know it's valid and w/o error\n setFormErrors('holderName', null);\n }\n return;\n }\n\n /\n Decide if we can shift focus to the expiryDate field.\n \n We can if... the config prop, autoFocus, is true AND we have a panLength value from binLookup\n * AND we are responding to a handleOnFieldValid message about the PAN that says it is valid\n /\n if (\n props.autoFocus &&\n hasPanLengthRef.current > 0 &&\n eventDetails?.event === 'handleOnFieldValid' &&\n eventDetails?.fieldType === ENCRYPTED_CARD_NUMBER &&\n sfState.valid.encryptedCardNumber\n ) {\n doPanAutoJump();\n }\n\n /\n Process SFP state\n /\n setData({ ...data, ...sfState.data });\n setErrors({ ...errors, ...sfState.errors });\n setValid({ ...valid, ...sfState.valid });\n\n setIsSfpValid(sfState.isSfpValid);\n\n // Values relating to /binLookup response\n setCvcPolicy(sfState.cvcPolicy);\n setShowSocialSecurityNumber(sfState.showSocialSecurityNumber);\n setExpiryDatePolicy(sfState.expiryDatePolicy);\n };\n\n // Farm the handlers for binLookup related functionality out to another 'extensions' file\n const extensions = useMemo(\n () =>\n CIExtensions(\n props,\n { sfp },\n {\n dualBrandSelectElements,\n setDualBrandSelectElements,\n setSelectedBrandValue,\n issuingCountryCode,\n setIssuingCountryCode\n },\n hasPanLengthRef\n ),\n [dualBrandSelectElements, issuingCountryCode]\n );\n\n /\n EXPOSE METHODS expected by Card.tsx\n /\n cardInputRef.current.showValidation = () => {\n // set flag\n isValidating.current = true;\n\n /\n Clear errors prior to validating so that the screenreader will read them all again, and in the right order\n * - only using aria-atomic on the error panel will read them in the wrong order\n /\n clearSRPanel?.(); // TODO - recheck if this is still true\n\n // Validate SecuredFields\n sfp.current.showValidation();\n\n // Validate holderName & SSN & KCP (taxNumber) but not* billingAddress\n triggerValidation(['holderName', 'socialSecurityNumber', 'taxNumber']);\n\n // Validate Address\n if (billingAddressRef?.current) billingAddressRef.current.showValidation();\n };\n\n cardInputRef.current.processBinLookupResponse = (binLookupResponse: BinLookupResponse, isReset: boolean) => {\n extensions.processBinLookup(binLookupResponse, isReset);\n };\n\n cardInputRef.current.setStatus = setStatus;\n\n /*\n EFFECT HOOKS\n /\n useEffect(() => {\n // componentDidMount - expose more methods expected by Card.tsx\n cardInputRef.current.setFocusOn = sfp.current.setFocusOn;\n cardInputRef.current.updateStyles = sfp.current.updateStyles;\n cardInputRef.current.handleUnsupportedCard = sfp.current.handleUnsupportedCard;\n\n // componentWillUnmount\n return () => {\n sfp.current.destroy();\n };\n }, []);\n\n /\n Handle form schema updates\n /\n useEffect(() => {\n const newSchema = [\n ...(props.hasHolderName ? ['holderName'] : []),\n ...(showBrazilianSSN ? ['socialSecurityNumber'] : []),\n ...(showKCP ? ['taxNumber'] : []),\n ...(showBillingAddress ? ['billingAddress'] : [])\n ];\n setSchema(newSchema);\n }, [props.hasHolderName, showBrazilianSSN, showKCP]);\n\n /\n Handle updates from useForm\n /\n useEffect(() => {\n setData({ ...data, holderName: formData.holderName ?? '', taxNumber: formData.taxNumber });\n\n setSocialSecurityNumber(formData.socialSecurityNumber);\n\n if (showBillingAddress) setBillingAddress({ ...formData.billingAddress });\n\n setValid({\n ...valid,\n holderName: props.holderNameRequired ? formValid.holderName : true,\n // Setting value to false if it's falsy keeps in line with existing, expected behaviour\n // - but there is an argument to allow 'undefined' as a value to indicate the non-presence of the field\n socialSecurityNumber: formValid.socialSecurityNumber ? formValid.socialSecurityNumber : false,\n taxNumber: formValid.taxNumber ? formValid.taxNumber : false,\n billingAddress: formValid.billingAddress ? formValid.billingAddress : false\n });\n\n // Check if billingAddress errors object has any properties that aren't null or undefined\n const addressHasErrors = formErrors.billingAddress\n ? Object.entries(formErrors.billingAddress).reduce((acc, [, error]) => acc \|\| error != null, false)\n : false;\n\n // Errors\n setErrors({\n ...errors,\n holderName: props.holderNameRequired && !!formErrors.holderName ? formErrors.holderName : null,\n socialSecurityNumber: showBrazilianSSN && !!formErrors.socialSecurityNumber ? formErrors.socialSecurityNumber : null,\n taxNumber: showKCP && !!formErrors.taxNumber ? formErrors.taxNumber : null,\n billingAddress: showBillingAddress && addressHasErrors ? formErrors.billingAddress : null\n });\n }, [formData, formValid, formErrors]);\n\n // Get the previous value\n const previousSortedErrors = usePrevious(sortedErrorList);\n\n /\n Main 'componentDidUpdate' handler\n /\n useEffect(() => {\n const holderNameValid: boolean = valid.holderName;\n\n const sfpValid: boolean = isSfpValid;\n const addressValid: boolean = showBillingAddress ? valid.billingAddress : true;\n\n const koreanAuthentication: boolean = showKCP ? !!valid.taxNumber && !!valid.encryptedPassword : true;\n\n const socialSecurityNumberValid: boolean = showBrazilianSSN ? !!valid.socialSecurityNumber : true;\n\n const isValid: boolean = sfpValid && holderNameValid && addressValid && koreanAuthentication && socialSecurityNumberValid;\n\n const sfStateErrorsObj = sfp.current.mapErrorsToValidationRuleResult();\n const mergedErrors = { ...errors, ...sfStateErrorsObj }; // maps sfErrors AND solves race condition problems for sfp from showValidation\n\n // Extract and then flatten billingAddress errors into a new object with all* the field errors at top level\n const { billingAddress: extractedAddressErrors, ...errorsWithoutAddress } = mergedErrors;\n\n const errorsForPanel = { ...errorsWithoutAddress, ...extractedAddressErrors };\n\n // Pass dynamic props (errors, layout etc) to SRPanel via partial\n const srPanelResp: SetSRMessagesReturnObject = setSRMessages?.({\n errors: errorsForPanel,\n isValidating: isValidating.current,\n layout: retrieveLayout(),\n // If we don't have country specific address labels, we might have a label related to a partialAddressSchema (i.e. zipCode)\n countrySpecificLabels: specifications.getAddressLabelsForCountry(billingAddress?.country) ?? partialAddressSchema?.default?.labels\n });\n\n /*\n Need extra actions after setting SRPanel messages in order to focus field (if required) and because we have some errors that are fired onBlur\n /\n const currentErrorsSortedByLayout = srPanelResp?.currentErrorsSortedByLayout;\n\n // Store the array of sorted error objects separately so that we can use it to make comparisons between the old and new arrays\n setSortedErrorList(currentErrorsSortedByLayout);\n\n switch (srPanelResp?.action) {\n // A call to focus the first field in error will always follow the call to validate the whole form\n case ERROR_ACTION_FOCUS_FIELD:\n if (shouldMoveFocusSR) setFocusOnFirstField(isValidating.current, sfp, srPanelResp?.fieldToFocus);\n // Remove 'showValidation' mode - allowing time for collation of all the fields in error whilst it is 'showValidation' mode (some errors come in a second render pass)\n setTimeout(() => {\n isValidating.current = false;\n }, 300);\n break;\n /* On blur scenario: not validating, i.e. trying to submit form, but there might be an error, either to set or to clear /\n case ERROR_ACTION_BLUR_SCENARIO: {\n const difference = getArrayDifferences<SortedErrorObject, string>(currentErrorsSortedByLayout, previousSortedErrors, 'field');\n\n const latestErrorMsg = difference?.[0];\n\n if (latestErrorMsg) {\n // Use the error code to look up whether error is actually a blur based one (most are but some SF ones aren't)\n const isBlurBasedError = lookupBlurBasedErrors(latestErrorMsg.errorCode);\n\n /\n ONLY ADD BLUR BASED ERRORS TO THE ERROR PANEL - doing this step prevents the non-blur based errors from being read out twice\n * (once from the aria-live, error panel & once from the aria-describedby element)\n /\n const latestSRError = isBlurBasedError ? latestErrorMsg.errorMessage : null;\n // console.log('### CardInput2::componentDidUpdate:: #2 (not validating) single error:: latestSRError', latestSRError);\n setSRMessagesFromStrings(latestSRError);\n } else {\n // called when previousSortedErrors.length >= currentErrorsSortedByLayout.length\n // console.log('### CardInput2::componentDidUpdate:: #3(not validating) clearing errors:: NO latestErrorMsg');\n clearSRPanel();\n }\n break;\n }\n default:\n break;\n }\n\n // Analytics\n if (currentErrorsSortedByLayout) {\n const newErrors = getArrayDifferences<SortedErrorObject, string>(currentErrorsSortedByLayout, previousSortedErrors, 'field');\n newErrors?.forEach(errorItem => {\n const aObj: FieldErrorAnalyticsObject = {\n fieldType: errorItem.field,\n errorCode: errorItem.errorCode\n };\n\n props.onValidationErrorAnalytics(aObj);\n });\n }\n\n props.onChange({\n data,\n valid,\n errors: mergedErrors,\n isValid,\n billingAddress,\n selectedBrandValue,\n storePaymentMethod,\n socialSecurityNumber,\n installments\n });\n }, [data, valid, errors, selectedBrandValue, storePaymentMethod, installments]);\n\n /\n RENDER\n */\n const FieldToRender = props.storedPaymentMethodId ? StoredCardFieldsWrapper : CardFieldsWrapper;\n\n return (\n <Fragment>\n <SecuredFieldsProvider\n ref={sfp}\n {...extractPropsForSFP(props)}\n styles={{ ...props.styles }}\n koreanAuthenticationRequired={props.configuration.koreanAuthenticationRequired}\n hasKoreanFields={!!(props.configuration.koreanAuthenticationRequired && props.countryCode === 'kr')}\n onChange={handleSecuredFieldsChange}\n onBrand={props.onBrand}\n onFocus={handleFocus}\n type={props.brand}\n disableIOSArrowKeys={props.disableIOSArrowKeys ? handleTouchstartIOS : null}\n render={({ setRootNode, setFocusOn }, sfpState) => (\n <div\n ref={setRootNode}\n className={classNames({\n 'adyen-checkout__card-input': true,\n 'adyen-checkout-card-input__wrapper': true,\n [`adyen-checkout__card-input--${props.fundingSource ?? 'credit'}`]: true,\n 'adyen-checkout__card-input--loading': status === 'loading'\n })}\n role={'form'}\n >\n {props.showFormInstruction && <FormInstruction />}\n <FieldToRender\n // Extract exact props that we need to pass down\n {...extractPropsForCardFields(props)}\n // Pass on vars created in CardInput:\n // Base (shared w. StoredCard)\n data={data}\n valid={valid}\n errors={errors}\n handleChangeFor={handleChangeFor}\n focusedElement={focusedElement}\n setFocusOn={setFocusOn}\n sfpState={sfpState}\n cvcPolicy={cvcPolicy}\n hasInstallments={hasInstallments}\n showAmountsInInstallments={showAmountsInInstallments}\n handleInstallments={setInstallments}\n // For Card\n brandsIcons={props.brandsIcons}\n formData={formData}\n formErrors={formErrors}\n formValid={formValid}\n expiryDatePolicy={expiryDatePolicy}\n dualBrandSelectElements={dualBrandSelectElements}\n extensions={extensions}\n selectedBrandValue={selectedBrandValue}\n // For KCP\n showKCP={showKCP}\n // For SSN\n showBrazilianSSN={showBrazilianSSN}\n socialSecurityNumber={socialSecurityNumber}\n // For Store details\n handleOnStoreDetails={setStorePaymentMethod}\n // For Address\n setAddressRef={setAddressRef}\n billingAddress={billingAddress}\n billingAddressValidationRules={partialAddressSchema && getPartialAddressValidationRules(partialAddressCountry.current)}\n partialAddressSchema={partialAddressSchema}\n handleAddress={handleAddress}\n onAddressLookup={props.onAddressLookup}\n onAddressSelected={props.onAddressSelected}\n addressSearchDebounceMs={props.addressSearchDebounceMs}\n //\n iOSFocusedField={iOSFocusedField}\n //\n onFieldFocusAnalytics={onFieldFocusAnalytics}\n onFieldBlurAnalytics={onFieldBlurAnalytics}\n />\n </div>\n )}\n />\n {props.showPayButton &&\n props.payButton({\n status,\n variant: props.isPayButtonPrimaryVariant ? 'primary' : 'secondary',\n icon: getImage({ imageFolder: 'components/' })('lock')\n })}\n </Fragment>\n );\n};\n\nCardInput.defaultProps = defaultProps;\n\nexport default CardInput;\n"],"names":["CardInput","props","sfp","useRef","isValidating","getImage","useImage","setSRMessagesFromObjects","setSRMessagesFromStrings","clearSRPanel","shouldMoveFocusSR","useSRPanelContext","setSRMessages","fieldTypeMappingFn","mapFieldKey","billingAddressRef","setAddressRef","ref","current","cardInputRef","Object","keys","length","setComponentRef","hasPanLengthRef","isAutoJumping","specifications","useMemo","Specifications","status","setStatus","useState","errors","setErrors","valid","setValid","holderNameRequired","holderName","data","setData","hasHolderName","sortedErrorList","setSortedErrorList","focusedElement","setFocusedElement","isSfpValid","setIsSfpValid","expiryDatePolicy","setExpiryDatePolicy","DATE_POLICY_REQUIRED","cvcPolicy","setCvcPolicy","CVC_POLICY_REQUIRED","issuingCountryCode","setIssuingCountryCode","dualBrandSelectElements","setDualBrandSelectElements","selectedBrandValue","setSelectedBrandValue","storedPaymentMethodId","brand","showBillingAddress","billingAddressMode","AddressModeOptions","none","billingAddressRequired","partialAddressSchema","handlePartialAddressMode","partialAddressCountry","billingAddress","country","storePaymentMethod","setStorePaymentMethod","setBillingAddress","showSocialSecurityNumber","setShowSocialSecurityNumber","socialSecurityNumber","setSocialSecurityNumber","installments","setInstallments","value","iOSFocusedField","setIOSFocusedField","handleChangeFor","triggerValidation","formData","formValid","formErrors","setSchema","setFormData","setFormValid","setFormErrors","useForm","schema","defaultData","formatters","cardInputFormatters","rules","cardInputValidationRules","hasInstallments","installmentOptions","fundingSource","showAmountsInInstallments","showInstallmentAmounts","isKorea","countryCode","showKCP","configuration","koreanAuthenticationRequired","showBrazilianSSN","socialSecurityNumberMode","onFieldFocusAnalytics","who","e","onFocus","fieldType","event","onFieldBlurAnalytics","onBlur","handleFocus","getFocusHandler","retrieveLayout","getLayout","countrySpecificSchemas","getAddressSchemaForCountry","billingAddressRequiredFields","handleTouchstartIOS","useCallback","obj","elementType","name","handleAddress","getAddressHandler","doPanAutoJump","getAutoJumpHandler","extensions","CIExtensions","showValidation","processBinLookupResponse","binLookupResponse","isReset","processBinLookup","useEffect","setFocusOn","updateStyles","handleUnsupportedCard","destroy","newSchema","taxNumber","addressHasErrors","entries","reduce","acc","error","previousSortedErrors","usePrevious","holderNameValid","sfpValid","addressValid","koreanAuthentication","encryptedPassword","socialSecurityNumberValid","isValid","sfStateErrorsObj","mapErrorsToValidationRuleResult","mergedErrors","extractedAddressErrors","errorsWithoutAddress","errorsForPanel","srPanelResp","layout","countrySpecificLabels","getAddressLabelsForCountry","default","labels","currentErrorsSortedByLayout","action","ERROR_ACTION_FOCUS_FIELD","setFocusOnFirstField","fieldToFocus","setTimeout","ERROR_ACTION_BLUR_SCENARIO","difference","getArrayDifferences","latestErrorMsg","latestSRError","lookupBlurBasedErrors","errorCode","errorMessage","newErrors","forEach","errorItem","aObj","field","onValidationErrorAnalytics","onChange","FieldToRender","StoredCardFieldsWrapper","CardFieldsWrapper","h","Fragment","SecuredFieldsProvider","extractPropsForSFP","styles","hasKoreanFields","sfState","eventDetails","autoCompleteName","acHolderName","getRuleByNameAndMode","holderNameValidationFn","autoFocus","ENCRYPTED_CARD_NUMBER","encryptedCardNumber","onBrand","type","disableIOSArrowKeys","render","setRootNode","sfpState","div","className","classNames","role","showFormInstruction","FormInstruction","extractPropsForCardFields","handleInstallments","brandsIcons","handleOnStoreDetails","billingAddressValidationRules","getPartialAddressValidationRules","onAddressLookup","onAddressSelected","addressSearchDebounceMs","showPayButton","payButton","variant","isPayButtonPrimaryVariant","icon","imageFolder","defaultProps"],"mappings":"uyDAiCA,MAAMA,EAAaC,IACf,MAAMC,EAAMC,EAAO,MACbC,EAAeD,GAAO,GACtBE,EAAWC,KAGXC,yBAAEA,EAAwBC,yBAAEA,EAAwBC,aAAEA,EAAYC,kBAAEA,GAAsBC,IAG1FC,EAAuCL,IAA2B,CACpEM,mBAAoBC,IAIlBC,EAAoBZ,EAAO,MAC3Ba,EAAgBC,IAClBF,EAAkBG,QAAUD,CAAAA,EAG1BE,EAAehB,EAAqB,CAAA,GAErCiB,OAAOC,KAAKF,EAAaD,SAASI,QACnCrB,EAAMsB,gBAAgBJ,EAAaD,SAGvC,MAAMM,EAAkBrB,EAAO,GACzBsB,EAAgBtB,GAAO,GAEvBuB,EAAiBC,GAAQ,IAAM,IAAIC,EAAe3B,EAAMyB,iBAAiB,CAACzB,EAAMyB,iBAGtFP,EAAaD,QAAQhB,IAAMA,EAK3B,MAAO2B,GAAQC,IAAaC,EAAS,UAE9BC,GAAQC,IAAaF,EAA8B,CAAC,IACpDG,GAAOC,IAAYJ,EAA8B,IAChD9B,EAAMmC,oBAAsB,CAAEC,YAAY,MAE3CC,GAAMC,IAAWR,EAA6B,IAC7C9B,EAAMuC,eAAiB,CAAEH,WAAYpC,EAAMqC,KAAKD,YAAc,OAG/DI,GAAiBC,IAAsBX,EAA8B,OAErEY,GAAgBC,IAAqBb,EAAS,KAC9Cc,GAAYC,IAAiBf,GAAS,IACtCgB,GAAkBC,IAAuBjB,EAASkB,IAClDC,GAAWC,IAAgBpB,EAASqB,IACpCC,GAAoBC,IAAyBvB,EAAiB,OAE9DwB,GAAyBC,IAA8BzB,EAAS,KAChE0B,GAAoBC,IAAyB3B,EAAS9B,EAAM0D,sBAAwB1D,EAAM2D,MAAQ,IAEnGC,GAAqB5D,EAAM6D,qBAAuBC,EAAmBC,MAAQ/D,EAAMgE,uBAEnFC,GAAuBC,EAAyBlE,EAAM6D,oBAEtDM,GAAwBjE,EAAe+D,IAAwBjE,EAAMqC,MAAM+B,gBAAgBC,UAE1FC,GAAoBC,IAAyBzC,GAAS,IACtDsC,GAAgBI,IAAqB1C,EAAsB8B,GAAqB5D,EAAMqC,KAAK+B,eAAiB,OAC5GK,GAA0BC,IAA+B5C,GAAS,IAClE6C,GAAsBC,IAA2B9C,EAAS,KAC1D+C,GAAcC,IAAmBhD,EAA0B,CAAEiD,MAAO,QAKpEC,GAAiBC,IAAsBnD,EAAS,OAKjDoD,gBACFA,GAAeC,kBACfA,GACA9C,KAAM+C,GACNnD,MAAOoD,GACPtD,OAAQuD,GAAUC,UAClBA,GACAjD,QAASkD,GACTtD,SAAUuD,GACVzD,UAAW0D,IACXC,EAA4B,CAC5BC,OAAQ,GACRC,YAAa7F,EAAMqC,KACnByD,WAAYC,EACZC,MAAOC,IAGLC,KAAoB/E,OAAOC,KAAKpB,EAAMmG,oBAAoB9E,QAAkC,UAAxBrB,EAAMoG,cAC1EC,GAA4BrG,EAAMsG,yBAA0B,EAG5DC,GAA8B,QADJnD,IAAsBpD,EAAMwG,aAEtDC,GAAUzG,EAAM0G,cAAcC,8BAAgCJ,GAE9DK,GACDnC,IAA6E,SAAjDzE,EAAM0G,cAAcG,0BACA,SAAjD7G,EAAM0G,cAAcG,yBAMlBC,GAAwB,CAACC,EAAaC,KACxChH,EAAMiH,QAAQ,CAAEC,UAAWH,EAAKI,MAAOH,GAAE,EAEvCI,GAAuB,CAACL,EAAaC,KACvChH,EAAMqH,OAAO,CAAEH,UAAWH,EAAKI,MAAOH,GAAE,EAItCM,GAAcC,EAAgB5E,GAAmBmE,GAAuBM,IAExEI,GAAiB,IACZC,EAAU,CACbzH,QACAyG,WACAG,uBACI5G,EAAMgE,wBAA0B,CAChC0D,uBAAwBjG,EAAekG,2BAA2BvD,IAAgBC,SAClFuD,6BAA8B5H,EAAM4H,gCAgB1CC,GAAsBC,GAAaC,IACrC,MAAMC,EAAgC,uBAAlBD,EAAIb,UAAqCa,EAAIb,UAAYa,EAAIE,KACjFhD,GAAmB+C,EAAAA,GACpB,IAEGE,GAAgBC,EAAkB3C,GAAaC,GAAcC,IAE7D0C,GAAgBC,EAAmB7G,EAAevB,EAAKuH,MAkDvDc,GAAa5G,GACf,IACI6G,EACIvI,EACA,CAAEC,OACF,CACIqD,2BACAC,8BACAE,yBACAL,sBACAC,0BAEJ9B,IAER,CAAC+B,GAAyBF,KAM9BlC,EAAaD,QAAQuH,eAAiB,KAElCrI,EAAac,SAAU,EAMvBT,MAGAP,EAAIgB,QAAQuH,iBAGZrD,GAAkB,CAAC,aAAc,uBAAwB,cAGrDrE,GAAmBG,SAASH,EAAkBG,QAAQuH,gBAAc,EAG5EtH,EAAaD,QAAQwH,yBAA2B,CAACC,EAAsCC,KACnFL,GAAWM,iBAAiBF,EAAmBC,EAAAA,EAGnDzH,EAAaD,QAAQY,UAAYA,GAKjCgH,GAAU,KAEN3H,EAAaD,QAAQ6H,WAAa7I,EAAIgB,QAAQ6H,WAC9C5H,EAAaD,QAAQ8H,aAAe9I,EAAIgB,QAAQ8H,aAChD7H,EAAaD,QAAQ+H,sBAAwB/I,EAAIgB,QAAQ+H,sBAGlD,KACH/I,EAAIgB,QAAQgI,SAAO,IAExB,IAKHJ,GAAU,KACN,MAAMK,EAAY,IACVlJ,EAAMuC,cAAgB,CAAC,cAAgB,MACvCqE,GAAmB,CAAC,wBAA0B,MAC9CH,GAAU,CAAC,aAAe,MAC1B7C,GAAqB,CAAC,kBAAoB,IAElD2B,GAAU2D,EAAAA,GACX,CAAClJ,EAAMuC,cAAeqE,GAAkBH,KAK3CoC,GAAU,KACNvG,GAAQ,IAAKD,GAAMD,WAAYgD,GAAShD,YAAc,GAAI+G,UAAW/D,GAAS+D,YAE9EvE,GAAwBQ,GAAST,sBAE7Bf,IAAoBY,GAAkB,IAAKY,GAAShB,iBAExDlC,GAAS,IACFD,GACHG,YAAYpC,EAAMmC,oBAAqBkD,GAAUjD,WAGjDuC,uBAAsBU,GAAUV,sBAAuBU,GAAUV,qBACjEwE,YAAW9D,GAAU8D,WAAY9D,GAAU8D,UAC3C/E,iBAAgBiB,GAAUjB,gBAAiBiB,GAAUjB,iBAIzD,MAAMgF,IAAmB9D,GAAWlB,gBAC9BjD,OAAOkI,QAAQ/D,GAAWlB,gBAAgBkF,QAAO,CAACC,GAAK,CAAGC,KAAWD,GAAgB,MAATC,IAAe,GAIjGxH,GAAU,IACHD,GACHK,WAAYpC,EAAMmC,oBAAwBmD,GAAWlD,WAAakD,GAAWlD,WAAa,KAC1FuC,qBAAsBiC,IAAsBtB,GAAWX,qBAAuBW,GAAWX,qBAAuB,KAChHwE,UAAW1C,IAAanB,GAAW6D,UAAY7D,GAAW6D,UAAY,KACtE/E,eAAgBR,IAAsBwF,EAAmB9D,GAAWlB,eAAiB,MACzF,GACD,CAACgB,GAAUC,GAAWC,KAGzB,MAAMmE,GAAuBC,EAAYlH,IAKzCqG,GAAU,KACN,MAAMc,EAA2B1H,GAAMG,WAEjCwH,EAAoBhH,GACpBiH,GAAwBjG,IAAqB3B,GAAMmC,eAEnD0F,GAAgCrD,MAAYxE,GAAMkH,aAAelH,GAAM8H,kBAEvEC,GAAqCpD,MAAqB3E,GAAM0C,qBAEhEsF,EAAmBL,GAAYD,GAAmBE,GAAgBC,GAAwBE,EAE1FE,EAAmBjK,EAAIgB,QAAQkJ,kCAC/BC,EAAe,IAAKrI,MAAWmI,IAG7B9F,eAAgBiG,KAA2BC,GAAyBF,EAEtEG,EAAiB,IAAKD,KAAyBD,GAG/CG,EAAyC7J,IAAgB,CAC3DoB,OAAQwI,EACRpK,aAAcA,EAAac,QAC3BwJ,OAAQjD,KAERkD,sBAAuBjJ,EAAekJ,2BAA2BvG,IAAgBC,UAAYJ,IAAsB2G,SAASC,SAM1HC,EAA8BN,GAAaM,4BAKjD,OAFArI,GAAmBqI,GAEXN,GAAaO,QAEjB,KAAKC,EACGvK,GAAmBwK,EAAqB9K,EAAac,QAAShB,EAAKuK,GAAaU,cAEpFC,YAAW,KACPhL,EAAac,SAAU,CAAA,GACxB,KACH,MAEJ,KAAKmK,EAA4B,CAC7B,MAAMC,EAAaC,EAA+CR,EAA6BrB,GAAsB,SAE/G8B,EAAiBF,IAAa,GAEpC,GAAIE,EAAgB,CAEhB,MAMMC,EANmBC,EAAsBF,EAAeG,WAMrBH,EAAeI,aAAe,KAEvEpL,EAAyBiL,QAIzBhL,IAEJ,KACJ,EAMJ,GAAIsK,EAA6B,CAC7B,MAAMc,EAAYN,EAA+CR,EAA6BrB,GAAsB,SACpHmC,GAAWC,SAAQC,IACf,MAAMC,EAAkC,CACpC7E,UAAW4E,EAAUE,MACrBN,UAAWI,EAAUJ,WAGzB1L,EAAMiM,2BAA2BF,EAAAA,GAEzC,CAEA/L,EAAMkM,SAAS,CACX7J,QACAJ,SACAF,OAAQqI,EACRH,UACA7F,kBACAZ,sBACAc,sBACAK,wBACAE,iBACJ,GACD,CAACxC,GAAMJ,GAAOF,GAAQyB,GAAoBc,GAAoBO,KAKjE,MAAMsH,GAAgBnM,EAAM0D,sBAAwB0I,EAA0BC,EAE9E,OACIC,EAACC,OACGD,EAACE,EAAAA,CACGxL,IAAKf,KACDwM,EAAmBzM,GACvB0M,OAAQ,IAAK1M,EAAM0M,QACnB/F,6BAA8B3G,EAAM0G,cAAcC,6BAClDgG,mBAAoB3M,EAAM0G,cAAcC,8BAAsD,OAAtB3G,EAAMwG,aAC9E0F,SApRsB,CAACU,EAAmBC,KAIlD,GAAID,EAAQE,iBAAZ,CACI,IAAK9M,EAAMuC,cAAe,OAC1B,MACMwK,EADyBC,EAAqB,aAAc,OAC7CC,CAAuBL,EAAQE,kBAAoBF,EAAQE,iBAAmB,KAC/FC,IACAvH,GAAY,aAAcuH,GAC1BtH,GAAa,cAAc,GAC3BC,GAAc,aAAc,MAGpC,MASI1F,EAAMkN,WACN3L,EAAgBN,QAAU,GACF,uBAAxB4L,GAAc1F,OACd0F,GAAc3F,YAAciG,GAC5BP,EAAQ3K,MAAMmL,qBAEdhF,KAMJ9F,GAAQ,IAAKD,MAASuK,EAAQvK,OAC9BL,GAAU,IAAKD,MAAW6K,EAAQ7K,SAClCG,GAAS,IAAKD,MAAU2K,EAAQ3K,QAEhCY,GAAc+J,EAAQhK,YAGtBM,GAAa0J,EAAQ3J,WACrByB,GAA4BkI,EAAQnI,0BACpC1B,GAAoB6J,EAAQ9J,iBAAgB,EAyOpCuK,QAASrN,EAAMqN,QACfpG,QAASK,GACTgG,KAAMtN,EAAM2D,MACZ4J,oBAAqBvN,EAAMuN,oBAAsB1F,GAAsB,KACvE2F,OAAQ,EAAGC,cAAa3E,cAAc4E,IAClCpB,EAACqB,MAAAA,CACG3M,IAAKyM,EACLG,UAAWC,EAAW,CAClB,8BAA8B,EAC9B,sCAAsC,EACtC,CAAC,+BAA+B7N,EAAMoG,eAAiB,aAAa,EACpE,sCAAkD,YAAXxE,KAE3CkM,KAAM,QAEL9N,EAAM+N,qBAAuBzB,EAAC0B,EAAAA,MAC/B1B,EAACH,GAAAA,IAEO8B,EAA0BjO,GAG9BqC,KAAMA,GACNJ,MAAOA,GACPF,OAAQA,GACRmD,gBAAiBA,GACjBxC,eAAgBA,GAChBoG,WAAYA,EACZ4E,SAAUA,EACVzK,UAAWA,GACXiD,gBAAiBA,GACjBG,0BAA2BA,GAC3B6H,mBAAoBpJ,GAEpBqJ,YAAanO,EAAMmO,YACnB/I,SAAUA,GACVE,WAAYA,GACZD,UAAWA,GACXvC,iBAAkBA,GAClBQ,wBAAyBA,GACzBgF,WAAYA,GACZ9E,mBAAoBA,GAEpBiD,QAASA,GAETG,iBAAkBA,GAClBjC,qBAAsBA,GAEtByJ,qBAAsB7J,GAEtBxD,cAAeA,EACfqD,eAAgBA,GAChBiK,8BAA+BpK,IAAwBqK,EAAiCnK,GAAsBlD,SAC9GgD,qBAAsBA,GACtBiE,cAAeA,GACfqG,gBAAiBvO,EAAMuO,gBACvBC,kBAAmBxO,EAAMwO,kBACzBC,wBAAyBzO,EAAMyO,wBAE/BzJ,gBAAiBA,GAEjB8B,sBAAuBA,GACvBM,qBAAsBA,QAKrCpH,EAAM0O,eACH1O,EAAM2O,UAAU,CACZ/M,UACAgN,QAAS5O,EAAM6O,0BAA4B,UAAY,YACvDC,KAAM1O,EAAS,CAAE2O,YAAa,eAAxB3O,CAAyC,UACnD,EAKhBL,EAAUiP,aAAeA"}
1	+ {"version":3,"file":"CardInput.js","sources":["../../../../../../src/components/Card/components/CardInput/CardInput.tsx"],"sourcesContent":["import { h, Fragment } from 'preact';\nimport { useState, useEffect, useRef, useMemo, useCallback } from 'preact/hooks';\nimport SecuredFieldsProvider from '../../../internal/SecuredFields/SFP/SecuredFieldsProvider';\nimport { OnChangeEventDetails, SFPState } from '../../../internal/SecuredFields/SFP/types';\nimport defaultProps from './defaultProps';\nimport './CardInput.scss';\nimport { AddressModeOptions, CardInputDataState, CardInputErrorState, CardInputProps, CardInputRef, CardInputValidState } from './types';\nimport { CVC_POLICY_REQUIRED, DATE_POLICY_REQUIRED, ENCRYPTED_CARD_NUMBER } from '../../../internal/SecuredFields/lib/constants';\nimport { BinLookupResponse } from '../../types';\nimport { cardInputFormatters, cardInputValidationRules, getRuleByNameAndMode } from './validate';\nimport CIExtensions from '../../../internal/SecuredFields/binLookup/extensions';\nimport useForm from '../../../../utils/useForm';\nimport { SetSRMessagesReturnObject, SortedErrorObject } from '../../../../core/Errors/types';\nimport { handlePartialAddressMode, extractPropsForCardFields, extractPropsForSFP, getLayout, lookupBlurBasedErrors, mapFieldKey } from './utils';\nimport { usePrevious } from '../../../../utils/hookUtils';\nimport Specifications from '../../../internal/Address/Specifications';\nimport { StoredCardFieldsWrapper } from './components/StoredCardFieldsWrapper';\nimport { CardFieldsWrapper } from './components/CardFieldsWrapper';\nimport { getAddressHandler, getAutoJumpHandler, getFocusHandler, setFocusOnFirstField } from './handlers';\nimport { InstallmentsObj } from './components/Installments/Installments';\nimport { TouchStartEventObj } from './components/types';\nimport classNames from 'classnames';\nimport { getPartialAddressValidationRules } from '../../../internal/Address/validate';\nimport { ERROR_ACTION_BLUR_SCENARIO, ERROR_ACTION_FOCUS_FIELD } from '../../../../core/Errors/constants';\nimport useSRPanelContext from '../../../../core/Errors/useSRPanelContext';\nimport { SetSRMessagesReturnFn } from '../../../../core/Errors/SRPanelProvider';\nimport useImage from '../../../../core/Context/useImage';\nimport { getArrayDifferences } from '../../../../utils/arrayUtils';\nimport FormInstruction from '../../../internal/FormInstruction';\nimport { AddressData } from '../../../../types/global-types';\nimport { CbObjOnFocus } from '../../../internal/SecuredFields/lib/types';\nimport { FieldErrorAnalyticsObject } from '../../../../core/Analytics/types';\n\nconst CardInput = (props: CardInputProps) => {\n const sfp = useRef(null);\n const isValidating = useRef(false);\n const getImage = useImage();\n\n /** SR stuff /\n const { setSRMessagesFromObjects, setSRMessagesFromStrings, clearSRPanel, shouldMoveFocusSR } = useSRPanelContext();\n\n // Generate a setSRMessages function - implemented as a partial, since the initial set of arguments don't change.\n const setSRMessages: SetSRMessagesReturnFn = setSRMessagesFromObjects?.({\n fieldTypeMappingFn: mapFieldKey\n });\n /* end SR stuff /\n\n const billingAddressRef = useRef(null);\n const setAddressRef = ref => {\n billingAddressRef.current = ref;\n };\n\n const cardInputRef = useRef<CardInputRef>({});\n // Just call once to create the object by which we expose the members expected by the parent Card comp\n if (!Object.keys(cardInputRef.current).length) {\n props.setComponentRef(cardInputRef.current);\n }\n\n const hasPanLengthRef = useRef(0);\n const isAutoJumping = useRef(false);\n\n const specifications = useMemo(() => new Specifications(props.specifications), [props.specifications]);\n\n // Store ref to sfp (useful for 'deep' debugging)\n cardInputRef.current.sfp = sfp;\n\n /\n STATE HOOKS\n /\n const [status, setStatus] = useState('ready');\n\n const [errors, setErrors] = useState<CardInputErrorState>({});\n const [valid, setValid] = useState<CardInputValidState>({\n ...(props.holderNameRequired && { holderName: false })\n });\n const [data, setData] = useState<CardInputDataState>({\n ...(props.hasHolderName && { holderName: props.data.holderName ?? '' })\n });\n\n const [sortedErrorList, setSortedErrorList] = useState<SortedErrorObject[]>(null);\n\n const [focusedElement, setFocusedElement] = useState('');\n const [isSfpValid, setIsSfpValid] = useState(false);\n const [expiryDatePolicy, setExpiryDatePolicy] = useState(DATE_POLICY_REQUIRED);\n const [cvcPolicy, setCvcPolicy] = useState(CVC_POLICY_REQUIRED);\n const [issuingCountryCode, setIssuingCountryCode] = useState<string>(null);\n\n const [dualBrandSelectElements, setDualBrandSelectElements] = useState([]);\n const [selectedBrandValue, setSelectedBrandValue] = useState(props.storedPaymentMethodId ? props.brand : ''); // If this is a storedCard comp initialise state with the storedCard's brand\n\n const showBillingAddress = props.billingAddressMode !== AddressModeOptions.none && props.billingAddressRequired;\n\n const partialAddressSchema = handlePartialAddressMode(props.billingAddressMode);\n // Keeps the value of the country set initially by the merchant, before the Address Component mutates it\n const partialAddressCountry = useRef<string>(partialAddressSchema && props.data?.billingAddress?.country);\n\n const [storePaymentMethod, setStorePaymentMethod] = useState(false);\n const [billingAddress, setBillingAddress] = useState<AddressData>(showBillingAddress ? props.data.billingAddress : null);\n const [showSocialSecurityNumber, setShowSocialSecurityNumber] = useState(false);\n const [socialSecurityNumber, setSocialSecurityNumber] = useState('');\n const [installments, setInstallments] = useState<InstallmentsObj>({ value: null });\n\n // re. Disable arrows for iOS: The name of the element calling for other elements to be disabled\n // - either a securedField type (like 'encryptedCardNumber') when call is coming from SF\n // or else the name of an internal, Adyen-web, element (like 'holderName')\n const [iOSFocusedField, setIOSFocusedField] = useState(null);\n\n /\n LOCAL VARS\n /\n const {\n handleChangeFor,\n triggerValidation,\n data: formData,\n valid: formValid,\n errors: formErrors,\n setSchema,\n setData: setFormData,\n setValid: setFormValid,\n setErrors: setFormErrors\n } = useForm<CardInputDataState>({\n schema: [],\n defaultData: props.data,\n formatters: cardInputFormatters,\n rules: cardInputValidationRules\n });\n\n const hasInstallments = !!Object.keys(props.installmentOptions).length && props.fundingSource !== 'debit';\n const showAmountsInInstallments = props.showInstallmentAmounts ?? true;\n\n const cardCountryCode: string = issuingCountryCode ?? props.countryCode;\n const isKorea = cardCountryCode === 'kr'; // If issuingCountryCode or the merchant defined countryCode is set to 'kr'\n const showKCP = props.configuration.koreanAuthenticationRequired && isKorea;\n\n const showBrazilianSSN: boolean =\n (showSocialSecurityNumber && props.configuration.socialSecurityNumberMode === 'auto') \|\|\n props.configuration.socialSecurityNumberMode === 'show';\n\n /\n HANDLERS\n /\n // Handlers for focus & blur on all fields. Can be renamed to onFieldFocus once the onFocusField is renamed in Field.tsx\n const onFieldFocusAnalytics = (who: string, e: Event \| CbObjOnFocus) => {\n props.onFocus({ fieldType: who, event: e });\n };\n const onFieldBlurAnalytics = (who: string, e: Event \| CbObjOnFocus) => {\n props.onBlur({ fieldType: who, event: e });\n };\n\n // Make SecuredFields aware of the focus & blur handlers\n const handleFocus = getFocusHandler(setFocusedElement, onFieldFocusAnalytics, onFieldBlurAnalytics);\n\n const retrieveLayout = (): string[] => {\n return getLayout({\n props,\n showKCP,\n showBrazilianSSN,\n ...(props.billingAddressRequired && {\n countrySpecificSchemas: specifications.getAddressSchemaForCountry(billingAddress?.country),\n billingAddressRequiredFields: props.billingAddressRequiredFields\n })\n });\n };\n\n /\n re. Disabling arrow keys in iOS:\n * Only by disabling all fields in the Card PM except for the active securedField input can we force the iOS soft keyboard arrow keys to disable\n \n NOTE: only called if ua.__IS_IOS = true && this.config.disableIOSArrowKeys = true (as referenced in CSF)\n \n @param obj - has fieldType prop saying whether this function is being called in response to an securedFields click ('encryptedCardNumber' etc)\n * - in which case we should disable all non-SF fields\n * or,\n * due to an internal action ('webInternalElement') - in which case we can enable all non-SF fields\n /\n const handleTouchstartIOS = useCallback((obj: TouchStartEventObj) => {\n const elementType = obj.fieldType !== 'webInternalElement' ? obj.fieldType : obj.name;\n setIOSFocusedField(elementType);\n }, []);\n\n const handleAddress = getAddressHandler(setFormData, setFormValid, setFormErrors);\n\n const doPanAutoJump = getAutoJumpHandler(isAutoJumping, sfp, retrieveLayout());\n\n const handleSecuredFieldsChange = (sfState: SFPState, eventDetails?: OnChangeEventDetails): void => {\n /\n Handling auto complete value for holderName (but only if the component is using a holderName field)\n /\n if (sfState.autoCompleteName) {\n if (!props.hasHolderName) return;\n const holderNameValidationFn = getRuleByNameAndMode('holderName', 'blur');\n const acHolderName = holderNameValidationFn(sfState.autoCompleteName) ? sfState.autoCompleteName : null;\n if (acHolderName) {\n setFormData('holderName', acHolderName);\n setFormValid('holderName', true); // only if holderName is valid does this fny get called - so we know it's valid and w/o error\n setFormErrors('holderName', null);\n }\n return;\n }\n\n /\n Decide if we can shift focus to the expiryDate field.\n \n We can if... the config prop, autoFocus, is true AND we have a panLength value from binLookup\n * AND we are responding to a handleOnFieldValid message about the PAN that says it is valid\n /\n if (\n props.autoFocus &&\n hasPanLengthRef.current > 0 &&\n eventDetails?.event === 'handleOnFieldValid' &&\n eventDetails?.fieldType === ENCRYPTED_CARD_NUMBER &&\n sfState.valid.encryptedCardNumber\n ) {\n doPanAutoJump();\n }\n\n /\n Process SFP state\n /\n setData({ ...data, ...sfState.data });\n setErrors({ ...errors, ...sfState.errors });\n setValid({ ...valid, ...sfState.valid });\n\n setIsSfpValid(sfState.isSfpValid);\n\n // Values relating to /binLookup response\n setCvcPolicy(sfState.cvcPolicy);\n setShowSocialSecurityNumber(sfState.showSocialSecurityNumber);\n setExpiryDatePolicy(sfState.expiryDatePolicy);\n };\n\n // Farm the handlers for binLookup related functionality out to another 'extensions' file\n const extensions = useMemo(\n () =>\n CIExtensions(\n props,\n { sfp },\n {\n dualBrandSelectElements,\n setDualBrandSelectElements,\n setSelectedBrandValue,\n issuingCountryCode,\n setIssuingCountryCode\n },\n hasPanLengthRef\n ),\n [dualBrandSelectElements, issuingCountryCode]\n );\n\n /\n EXPOSE METHODS expected by Card.tsx\n /\n cardInputRef.current.showValidation = () => {\n // set flag\n isValidating.current = true;\n\n /\n Clear errors prior to validating so that the screenreader will read them all again, and in the right order\n * - only using aria-atomic on the error panel will read them in the wrong order\n /\n clearSRPanel?.(); // TODO - recheck if this is still true\n\n // Validate SecuredFields\n sfp.current.showValidation();\n\n // Validate holderName & SSN & KCP (taxNumber) but not* billingAddress\n triggerValidation(['holderName', 'socialSecurityNumber', 'taxNumber']);\n\n // Validate Address\n if (billingAddressRef?.current) billingAddressRef.current.showValidation();\n };\n\n cardInputRef.current.processBinLookupResponse = (binLookupResponse: BinLookupResponse, isReset: boolean) => {\n extensions.processBinLookup(binLookupResponse, isReset);\n };\n\n cardInputRef.current.setStatus = setStatus;\n\n /*\n EFFECT HOOKS\n /\n useEffect(() => {\n // componentDidMount - expose more methods expected by Card.tsx\n cardInputRef.current.setFocusOn = sfp.current.setFocusOn;\n cardInputRef.current.updateStyles = sfp.current.updateStyles;\n cardInputRef.current.handleUnsupportedCard = sfp.current.handleUnsupportedCard;\n\n // componentWillUnmount\n return () => {\n sfp.current.destroy();\n };\n }, []);\n\n /\n Handle form schema updates\n /\n useEffect(() => {\n const newSchema = [\n ...(props.hasHolderName ? ['holderName'] : []),\n ...(showBrazilianSSN ? ['socialSecurityNumber'] : []),\n ...(showKCP ? ['taxNumber'] : []),\n ...(showBillingAddress ? ['billingAddress'] : [])\n ];\n setSchema(newSchema);\n }, [props.hasHolderName, showBrazilianSSN, showKCP]);\n\n /\n Handle updates from useForm\n /\n useEffect(() => {\n setData({ ...data, holderName: formData.holderName ?? '', taxNumber: formData.taxNumber });\n\n setSocialSecurityNumber(formData.socialSecurityNumber);\n\n if (showBillingAddress) setBillingAddress({ ...formData.billingAddress });\n\n setValid({\n ...valid,\n holderName: props.holderNameRequired ? formValid.holderName : true,\n // Setting value to false if it's falsy keeps in line with existing, expected behaviour\n // - but there is an argument to allow 'undefined' as a value to indicate the non-presence of the field\n socialSecurityNumber: formValid.socialSecurityNumber ? formValid.socialSecurityNumber : false,\n taxNumber: formValid.taxNumber ? formValid.taxNumber : false,\n billingAddress: formValid.billingAddress ? formValid.billingAddress : false\n });\n\n // Check if billingAddress errors object has any properties that aren't null or undefined\n const addressHasErrors = formErrors.billingAddress\n ? Object.entries(formErrors.billingAddress).reduce((acc, [, error]) => acc \|\| error != null, false)\n : false;\n\n // Errors\n setErrors({\n ...errors,\n holderName: props.holderNameRequired && !!formErrors.holderName ? formErrors.holderName : null,\n socialSecurityNumber: showBrazilianSSN && !!formErrors.socialSecurityNumber ? formErrors.socialSecurityNumber : null,\n taxNumber: showKCP && !!formErrors.taxNumber ? formErrors.taxNumber : null,\n billingAddress: showBillingAddress && addressHasErrors ? formErrors.billingAddress : null\n });\n }, [formData, formValid, formErrors]);\n\n // Get the previous value\n const previousSortedErrors = usePrevious(sortedErrorList);\n\n /\n Main 'componentDidUpdate' handler\n /\n useEffect(() => {\n const holderNameValid: boolean = valid.holderName;\n\n const sfpValid: boolean = isSfpValid;\n const addressValid: boolean = showBillingAddress ? valid.billingAddress : true;\n\n const koreanAuthentication: boolean = showKCP ? !!valid.taxNumber && !!valid.encryptedPassword : true;\n\n const socialSecurityNumberValid: boolean = showBrazilianSSN ? !!valid.socialSecurityNumber : true;\n\n const isValid: boolean = sfpValid && holderNameValid && addressValid && koreanAuthentication && socialSecurityNumberValid;\n\n const sfStateErrorsObj = sfp.current.mapErrorsToValidationRuleResult();\n const mergedErrors = { ...errors, ...sfStateErrorsObj }; // maps sfErrors AND solves race condition problems for sfp from showValidation\n\n // Extract and then flatten billingAddress errors into a new object with all* the field errors at top level\n const { billingAddress: extractedAddressErrors, ...errorsWithoutAddress } = mergedErrors;\n\n const errorsForPanel = { ...errorsWithoutAddress, ...extractedAddressErrors };\n\n // Pass dynamic props (errors, layout etc) to SRPanel via partial\n const srPanelResp: SetSRMessagesReturnObject = setSRMessages?.({\n errors: errorsForPanel,\n isValidating: isValidating.current,\n layout: retrieveLayout(),\n // If we don't have country specific address labels, we might have a label related to a partialAddressSchema (i.e. zipCode)\n countrySpecificLabels: specifications.getAddressLabelsForCountry(billingAddress?.country) ?? partialAddressSchema?.default?.labels\n });\n\n /*\n Need extra actions after setting SRPanel messages in order to focus field (if required) and because we have some errors that are fired onBlur\n /\n const currentErrorsSortedByLayout = srPanelResp?.currentErrorsSortedByLayout;\n\n // Store the array of sorted error objects separately so that we can use it to make comparisons between the old and new arrays\n setSortedErrorList(currentErrorsSortedByLayout);\n\n switch (srPanelResp?.action) {\n // A call to focus the first field in error will always follow the call to validate the whole form\n case ERROR_ACTION_FOCUS_FIELD:\n if (shouldMoveFocusSR) setFocusOnFirstField(isValidating.current, sfp, srPanelResp?.fieldToFocus);\n // Remove 'showValidation' mode - allowing time for collation of all the fields in error whilst it is 'showValidation' mode (some errors come in a second render pass)\n setTimeout(() => {\n isValidating.current = false;\n }, 300);\n break;\n /* On blur scenario: not validating, i.e. trying to submit form, but there might be an error, either to set or to clear /\n case ERROR_ACTION_BLUR_SCENARIO: {\n const difference = getArrayDifferences<SortedErrorObject, string>(currentErrorsSortedByLayout, previousSortedErrors, 'field');\n\n const latestErrorMsg = difference?.[0];\n\n if (latestErrorMsg) {\n // Use the error code to look up whether error is actually a blur based one (most are but some SF ones aren't)\n const isBlurBasedError = lookupBlurBasedErrors(latestErrorMsg.errorCode);\n\n /\n ONLY ADD BLUR BASED ERRORS TO THE ERROR PANEL - doing this step prevents the non-blur based errors from being read out twice\n * (once from the aria-live, error panel & once from the aria-describedby element)\n /\n const latestSRError = isBlurBasedError ? latestErrorMsg.errorMessage : null;\n // console.log('### CardInput2::componentDidUpdate:: #2 (not validating) single error:: latestSRError', latestSRError);\n setSRMessagesFromStrings(latestSRError);\n } else {\n // called when previousSortedErrors.length >= currentErrorsSortedByLayout.length\n // console.log('### CardInput2::componentDidUpdate:: #3(not validating) clearing errors:: NO latestErrorMsg');\n clearSRPanel();\n }\n break;\n }\n default:\n break;\n }\n\n // Analytics\n if (currentErrorsSortedByLayout) {\n const newErrors = getArrayDifferences<SortedErrorObject, string>(currentErrorsSortedByLayout, previousSortedErrors, 'field');\n newErrors?.forEach(errorItem => {\n const aObj: FieldErrorAnalyticsObject = {\n fieldType: errorItem.field,\n errorCode: errorItem.errorCode\n };\n\n props.onValidationErrorAnalytics(aObj);\n });\n }\n\n props.onChange({\n data,\n valid,\n errors: mergedErrors,\n isValid,\n billingAddress,\n selectedBrandValue,\n storePaymentMethod,\n socialSecurityNumber,\n installments\n });\n }, [data, valid, errors, selectedBrandValue, storePaymentMethod, installments]);\n\n /\n RENDER\n */\n const FieldToRender = props.storedPaymentMethodId ? StoredCardFieldsWrapper : CardFieldsWrapper;\n\n return (\n <Fragment>\n <SecuredFieldsProvider\n ref={sfp}\n {...extractPropsForSFP(props)}\n styles={{ ...props.styles }}\n koreanAuthenticationRequired={props.configuration.koreanAuthenticationRequired}\n hasKoreanFields={!!(props.configuration.koreanAuthenticationRequired && props.countryCode === 'kr')}\n onChange={handleSecuredFieldsChange}\n onBrand={props.onBrand}\n onFocus={handleFocus}\n type={props.brand}\n disableIOSArrowKeys={props.disableIOSArrowKeys ? handleTouchstartIOS : null}\n render={({ setRootNode, setFocusOn }, sfpState) => (\n <div\n ref={setRootNode}\n className={classNames({\n 'adyen-checkout__card-input': true,\n 'adyen-checkout-card-input__wrapper': true,\n [`adyen-checkout__card-input--${props.fundingSource ?? 'credit'}`]: true,\n 'adyen-checkout__card-input--loading': status === 'loading'\n })}\n role={'form'}\n >\n {props.showFormInstruction && <FormInstruction />}\n <FieldToRender\n // Extract exact props that we need to pass down\n {...extractPropsForCardFields(props)}\n // Pass on vars created in CardInput:\n // Base (shared w. StoredCard)\n data={data}\n valid={valid}\n errors={errors}\n handleChangeFor={handleChangeFor}\n focusedElement={focusedElement}\n setFocusOn={setFocusOn}\n sfpState={sfpState}\n cvcPolicy={cvcPolicy}\n hasInstallments={hasInstallments}\n showAmountsInInstallments={showAmountsInInstallments}\n handleInstallments={setInstallments}\n // For Card\n brandsIcons={props.brandsIcons}\n formData={formData}\n formErrors={formErrors}\n formValid={formValid}\n expiryDatePolicy={expiryDatePolicy}\n dualBrandSelectElements={dualBrandSelectElements}\n extensions={extensions}\n selectedBrandValue={selectedBrandValue}\n // For KCP\n showKCP={showKCP}\n // For SSN\n showBrazilianSSN={showBrazilianSSN}\n socialSecurityNumber={socialSecurityNumber}\n // For Store details\n handleOnStoreDetails={setStorePaymentMethod}\n // For Address\n setAddressRef={setAddressRef}\n billingAddress={billingAddress}\n billingAddressValidationRules={partialAddressSchema && getPartialAddressValidationRules(partialAddressCountry.current)}\n partialAddressSchema={partialAddressSchema}\n handleAddress={handleAddress}\n onAddressLookup={props.onAddressLookup}\n onAddressSelected={props.onAddressSelected}\n addressSearchDebounceMs={props.addressSearchDebounceMs}\n //\n iOSFocusedField={iOSFocusedField}\n //\n onFieldFocusAnalytics={onFieldFocusAnalytics}\n onFieldBlurAnalytics={onFieldBlurAnalytics}\n />\n </div>\n )}\n />\n {props.showPayButton &&\n props.payButton({\n status,\n variant: props.isPayButtonPrimaryVariant ? 'primary' : 'secondary',\n icon: getImage({ imageFolder: 'components/' })('lock')\n })}\n </Fragment>\n );\n};\n\nCardInput.defaultProps = defaultProps;\n\nexport default CardInput;\n"],"names":["CardInput","props","sfp","useRef","isValidating","getImage","useImage","setSRMessagesFromObjects","setSRMessagesFromStrings","clearSRPanel","shouldMoveFocusSR","useSRPanelContext","setSRMessages","fieldTypeMappingFn","mapFieldKey","billingAddressRef","setAddressRef","ref","current","cardInputRef","Object","keys","length","setComponentRef","hasPanLengthRef","isAutoJumping","specifications","useMemo","Specifications","status","setStatus","useState","errors","setErrors","valid","setValid","holderNameRequired","holderName","data","setData","hasHolderName","sortedErrorList","setSortedErrorList","focusedElement","setFocusedElement","isSfpValid","setIsSfpValid","expiryDatePolicy","setExpiryDatePolicy","DATE_POLICY_REQUIRED","cvcPolicy","setCvcPolicy","CVC_POLICY_REQUIRED","issuingCountryCode","setIssuingCountryCode","dualBrandSelectElements","setDualBrandSelectElements","selectedBrandValue","setSelectedBrandValue","storedPaymentMethodId","brand","showBillingAddress","billingAddressMode","AddressModeOptions","none","billingAddressRequired","partialAddressSchema","handlePartialAddressMode","partialAddressCountry","billingAddress","country","storePaymentMethod","setStorePaymentMethod","setBillingAddress","showSocialSecurityNumber","setShowSocialSecurityNumber","socialSecurityNumber","setSocialSecurityNumber","installments","setInstallments","value","iOSFocusedField","setIOSFocusedField","handleChangeFor","triggerValidation","formData","formValid","formErrors","setSchema","setFormData","setFormValid","setFormErrors","useForm","schema","defaultData","formatters","cardInputFormatters","rules","cardInputValidationRules","hasInstallments","installmentOptions","fundingSource","showAmountsInInstallments","showInstallmentAmounts","isKorea","countryCode","showKCP","configuration","koreanAuthenticationRequired","showBrazilianSSN","socialSecurityNumberMode","onFieldFocusAnalytics","who","e","onFocus","fieldType","event","onFieldBlurAnalytics","onBlur","handleFocus","getFocusHandler","retrieveLayout","getLayout","countrySpecificSchemas","getAddressSchemaForCountry","billingAddressRequiredFields","handleTouchstartIOS","useCallback","obj","elementType","name","handleAddress","getAddressHandler","doPanAutoJump","getAutoJumpHandler","extensions","CIExtensions","showValidation","processBinLookupResponse","binLookupResponse","isReset","processBinLookup","useEffect","setFocusOn","updateStyles","handleUnsupportedCard","destroy","newSchema","taxNumber","addressHasErrors","entries","reduce","acc","error","previousSortedErrors","usePrevious","holderNameValid","sfpValid","addressValid","koreanAuthentication","encryptedPassword","socialSecurityNumberValid","isValid","sfStateErrorsObj","mapErrorsToValidationRuleResult","mergedErrors","extractedAddressErrors","errorsWithoutAddress","errorsForPanel","srPanelResp","layout","countrySpecificLabels","getAddressLabelsForCountry","default","labels","currentErrorsSortedByLayout","action","ERROR_ACTION_FOCUS_FIELD","setFocusOnFirstField","fieldToFocus","setTimeout","ERROR_ACTION_BLUR_SCENARIO","difference","getArrayDifferences","latestErrorMsg","latestSRError","lookupBlurBasedErrors","errorCode","errorMessage","newErrors","forEach","errorItem","aObj","field","onValidationErrorAnalytics","onChange","FieldToRender","StoredCardFieldsWrapper","CardFieldsWrapper","h","Fragment","SecuredFieldsProvider","extractPropsForSFP","styles","hasKoreanFields","sfState","eventDetails","autoCompleteName","acHolderName","getRuleByNameAndMode","holderNameValidationFn","autoFocus","ENCRYPTED_CARD_NUMBER","encryptedCardNumber","onBrand","type","disableIOSArrowKeys","render","setRootNode","sfpState","div","className","classNames","role","showFormInstruction","FormInstruction","extractPropsForCardFields","handleInstallments","brandsIcons","handleOnStoreDetails","billingAddressValidationRules","getPartialAddressValidationRules","onAddressLookup","onAddressSelected","addressSearchDebounceMs","showPayButton","payButton","variant","isPayButtonPrimaryVariant","icon","imageFolder","defaultProps"],"mappings":"yxDAiCA,MAAMA,EAAaC,IACf,MAAMC,EAAMC,EAAO,MACbC,EAAeD,GAAO,GACtBE,EAAWC,KAGXC,yBAAEA,EAAwBC,yBAAEA,EAAwBC,aAAEA,EAAYC,kBAAEA,GAAsBC,IAG1FC,EAAuCL,IAA2B,CACpEM,mBAAoBC,IAIlBC,EAAoBZ,EAAO,MAC3Ba,EAAgBC,IAClBF,EAAkBG,QAAUD,CAAAA,EAG1BE,EAAehB,EAAqB,CAAA,GAErCiB,OAAOC,KAAKF,EAAaD,SAASI,QACnCrB,EAAMsB,gBAAgBJ,EAAaD,SAGvC,MAAMM,EAAkBrB,EAAO,GACzBsB,EAAgBtB,GAAO,GAEvBuB,EAAiBC,GAAQ,IAAM,IAAIC,EAAe3B,EAAMyB,iBAAiB,CAACzB,EAAMyB,iBAGtFP,EAAaD,QAAQhB,IAAMA,EAK3B,MAAO2B,GAAQC,IAAaC,EAAS,UAE9BC,GAAQC,IAAaF,EAA8B,CAAC,IACpDG,GAAOC,IAAYJ,EAA8B,IAChD9B,EAAMmC,oBAAsB,CAAEC,YAAY,MAE3CC,GAAMC,IAAWR,EAA6B,IAC7C9B,EAAMuC,eAAiB,CAAEH,WAAYpC,EAAMqC,KAAKD,YAAc,OAG/DI,GAAiBC,IAAsBX,EAA8B,OAErEY,GAAgBC,IAAqBb,EAAS,KAC9Cc,GAAYC,IAAiBf,GAAS,IACtCgB,GAAkBC,IAAuBjB,EAASkB,IAClDC,GAAWC,IAAgBpB,EAASqB,IACpCC,GAAoBC,IAAyBvB,EAAiB,OAE9DwB,GAAyBC,IAA8BzB,EAAS,KAChE0B,GAAoBC,IAAyB3B,EAAS9B,EAAM0D,sBAAwB1D,EAAM2D,MAAQ,IAEnGC,GAAqB5D,EAAM6D,qBAAuBC,EAAmBC,MAAQ/D,EAAMgE,uBAEnFC,GAAuBC,EAAyBlE,EAAM6D,oBAEtDM,GAAwBjE,EAAe+D,IAAwBjE,EAAMqC,MAAM+B,gBAAgBC,UAE1FC,GAAoBC,IAAyBzC,GAAS,IACtDsC,GAAgBI,IAAqB1C,EAAsB8B,GAAqB5D,EAAMqC,KAAK+B,eAAiB,OAC5GK,GAA0BC,IAA+B5C,GAAS,IAClE6C,GAAsBC,IAA2B9C,EAAS,KAC1D+C,GAAcC,IAAmBhD,EAA0B,CAAEiD,MAAO,QAKpEC,GAAiBC,IAAsBnD,EAAS,OAKjDoD,gBACFA,GAAeC,kBACfA,GACA9C,KAAM+C,GACNnD,MAAOoD,GACPtD,OAAQuD,GAAUC,UAClBA,GACAjD,QAASkD,GACTtD,SAAUuD,GACVzD,UAAW0D,IACXC,EAA4B,CAC5BC,OAAQ,GACRC,YAAa7F,EAAMqC,KACnByD,WAAYC,EACZC,MAAOC,IAGLC,KAAoB/E,OAAOC,KAAKpB,EAAMmG,oBAAoB9E,QAAkC,UAAxBrB,EAAMoG,cAC1EC,GAA4BrG,EAAMsG,yBAA0B,EAG5DC,GAA8B,QADJnD,IAAsBpD,EAAMwG,aAEtDC,GAAUzG,EAAM0G,cAAcC,8BAAgCJ,GAE9DK,GACDnC,IAA6E,SAAjDzE,EAAM0G,cAAcG,0BACA,SAAjD7G,EAAM0G,cAAcG,yBAMlBC,GAAwB,CAACC,EAAaC,KACxChH,EAAMiH,QAAQ,CAAEC,UAAWH,EAAKI,MAAOH,GAAE,EAEvCI,GAAuB,CAACL,EAAaC,KACvChH,EAAMqH,OAAO,CAAEH,UAAWH,EAAKI,MAAOH,GAAE,EAItCM,GAAcC,EAAgB5E,GAAmBmE,GAAuBM,IAExEI,GAAiB,IACZC,EAAU,CACbzH,QACAyG,WACAG,uBACI5G,EAAMgE,wBAA0B,CAChC0D,uBAAwBjG,EAAekG,2BAA2BvD,IAAgBC,SAClFuD,6BAA8B5H,EAAM4H,gCAgB1CC,GAAsBC,GAAaC,IACrC,MAAMC,EAAgC,uBAAlBD,EAAIb,UAAqCa,EAAIb,UAAYa,EAAIE,KACjFhD,GAAmB+C,EAAAA,GACpB,IAEGE,GAAgBC,EAAkB3C,GAAaC,GAAcC,IAE7D0C,GAAgBC,EAAmB7G,EAAevB,EAAKuH,MAkDvDc,GAAa5G,GACf,IACI6G,EACIvI,EACA,CAAEC,OACF,CACIqD,2BACAC,8BACAE,yBACAL,sBACAC,0BAEJ9B,IAER,CAAC+B,GAAyBF,KAM9BlC,EAAaD,QAAQuH,eAAiB,KAElCrI,EAAac,SAAU,EAMvBT,MAGAP,EAAIgB,QAAQuH,iBAGZrD,GAAkB,CAAC,aAAc,uBAAwB,cAGrDrE,GAAmBG,SAASH,EAAkBG,QAAQuH,gBAAc,EAG5EtH,EAAaD,QAAQwH,yBAA2B,CAACC,EAAsCC,KACnFL,GAAWM,iBAAiBF,EAAmBC,EAAAA,EAGnDzH,EAAaD,QAAQY,UAAYA,GAKjCgH,GAAU,KAEN3H,EAAaD,QAAQ6H,WAAa7I,EAAIgB,QAAQ6H,WAC9C5H,EAAaD,QAAQ8H,aAAe9I,EAAIgB,QAAQ8H,aAChD7H,EAAaD,QAAQ+H,sBAAwB/I,EAAIgB,QAAQ+H,sBAGlD,KACH/I,EAAIgB,QAAQgI,SAAO,IAExB,IAKHJ,GAAU,KACN,MAAMK,EAAY,IACVlJ,EAAMuC,cAAgB,CAAC,cAAgB,MACvCqE,GAAmB,CAAC,wBAA0B,MAC9CH,GAAU,CAAC,aAAe,MAC1B7C,GAAqB,CAAC,kBAAoB,IAElD2B,GAAU2D,EAAAA,GACX,CAAClJ,EAAMuC,cAAeqE,GAAkBH,KAK3CoC,GAAU,KACNvG,GAAQ,IAAKD,GAAMD,WAAYgD,GAAShD,YAAc,GAAI+G,UAAW/D,GAAS+D,YAE9EvE,GAAwBQ,GAAST,sBAE7Bf,IAAoBY,GAAkB,IAAKY,GAAShB,iBAExDlC,GAAS,IACFD,GACHG,YAAYpC,EAAMmC,oBAAqBkD,GAAUjD,WAGjDuC,uBAAsBU,GAAUV,sBAAuBU,GAAUV,qBACjEwE,YAAW9D,GAAU8D,WAAY9D,GAAU8D,UAC3C/E,iBAAgBiB,GAAUjB,gBAAiBiB,GAAUjB,iBAIzD,MAAMgF,IAAmB9D,GAAWlB,gBAC9BjD,OAAOkI,QAAQ/D,GAAWlB,gBAAgBkF,QAAO,CAACC,GAAK,CAAGC,KAAWD,GAAgB,MAATC,IAAe,GAIjGxH,GAAU,IACHD,GACHK,WAAYpC,EAAMmC,oBAAwBmD,GAAWlD,WAAakD,GAAWlD,WAAa,KAC1FuC,qBAAsBiC,IAAsBtB,GAAWX,qBAAuBW,GAAWX,qBAAuB,KAChHwE,UAAW1C,IAAanB,GAAW6D,UAAY7D,GAAW6D,UAAY,KACtE/E,eAAgBR,IAAsBwF,EAAmB9D,GAAWlB,eAAiB,MACzF,GACD,CAACgB,GAAUC,GAAWC,KAGzB,MAAMmE,GAAuBC,EAAYlH,IAKzCqG,GAAU,KACN,MAAMc,EAA2B1H,GAAMG,WAEjCwH,EAAoBhH,GACpBiH,GAAwBjG,IAAqB3B,GAAMmC,eAEnD0F,GAAgCrD,MAAYxE,GAAMkH,aAAelH,GAAM8H,kBAEvEC,GAAqCpD,MAAqB3E,GAAM0C,qBAEhEsF,EAAmBL,GAAYD,GAAmBE,GAAgBC,GAAwBE,EAE1FE,EAAmBjK,EAAIgB,QAAQkJ,kCAC/BC,EAAe,IAAKrI,MAAWmI,IAG7B9F,eAAgBiG,KAA2BC,GAAyBF,EAEtEG,EAAiB,IAAKD,KAAyBD,GAG/CG,EAAyC7J,IAAgB,CAC3DoB,OAAQwI,EACRpK,aAAcA,EAAac,QAC3BwJ,OAAQjD,KAERkD,sBAAuBjJ,EAAekJ,2BAA2BvG,IAAgBC,UAAYJ,IAAsB2G,SAASC,SAM1HC,EAA8BN,GAAaM,4BAKjD,OAFArI,GAAmBqI,GAEXN,GAAaO,QAEjB,KAAKC,EACGvK,GAAmBwK,EAAqB9K,EAAac,QAAShB,EAAKuK,GAAaU,cAEpFC,YAAW,KACPhL,EAAac,SAAU,CAAA,GACxB,KACH,MAEJ,KAAKmK,EAA4B,CAC7B,MAAMC,EAAaC,EAA+CR,EAA6BrB,GAAsB,SAE/G8B,EAAiBF,IAAa,GAEpC,GAAIE,EAAgB,CAEhB,MAMMC,EANmBC,EAAsBF,EAAeG,WAMrBH,EAAeI,aAAe,KAEvEpL,EAAyBiL,QAIzBhL,IAEJ,KACJ,EAMJ,GAAIsK,EAA6B,CAC7B,MAAMc,EAAYN,EAA+CR,EAA6BrB,GAAsB,SACpHmC,GAAWC,SAAQC,IACf,MAAMC,EAAkC,CACpC7E,UAAW4E,EAAUE,MACrBN,UAAWI,EAAUJ,WAGzB1L,EAAMiM,2BAA2BF,EAAAA,GAEzC,CAEA/L,EAAMkM,SAAS,CACX7J,QACAJ,SACAF,OAAQqI,EACRH,UACA7F,kBACAZ,sBACAc,sBACAK,wBACAE,iBACJ,GACD,CAACxC,GAAMJ,GAAOF,GAAQyB,GAAoBc,GAAoBO,KAKjE,MAAMsH,GAAgBnM,EAAM0D,sBAAwB0I,EAA0BC,EAE9E,OACIC,EAACC,OACGD,EAACE,EAAAA,CACGxL,IAAKf,KACDwM,EAAmBzM,GACvB0M,OAAQ,IAAK1M,EAAM0M,QACnB/F,6BAA8B3G,EAAM0G,cAAcC,6BAClDgG,mBAAoB3M,EAAM0G,cAAcC,8BAAsD,OAAtB3G,EAAMwG,aAC9E0F,SApRsB,CAACU,EAAmBC,KAIlD,GAAID,EAAQE,iBAAZ,CACI,IAAK9M,EAAMuC,cAAe,OAC1B,MACMwK,EADyBC,EAAqB,aAAc,OAC7CC,CAAuBL,EAAQE,kBAAoBF,EAAQE,iBAAmB,KAC/FC,IACAvH,GAAY,aAAcuH,GAC1BtH,GAAa,cAAc,GAC3BC,GAAc,aAAc,MAGpC,MASI1F,EAAMkN,WACN3L,EAAgBN,QAAU,GACF,uBAAxB4L,GAAc1F,OACd0F,GAAc3F,YAAciG,GAC5BP,EAAQ3K,MAAMmL,qBAEdhF,KAMJ9F,GAAQ,IAAKD,MAASuK,EAAQvK,OAC9BL,GAAU,IAAKD,MAAW6K,EAAQ7K,SAClCG,GAAS,IAAKD,MAAU2K,EAAQ3K,QAEhCY,GAAc+J,EAAQhK,YAGtBM,GAAa0J,EAAQ3J,WACrByB,GAA4BkI,EAAQnI,0BACpC1B,GAAoB6J,EAAQ9J,iBAAgB,EAyOpCuK,QAASrN,EAAMqN,QACfpG,QAASK,GACTgG,KAAMtN,EAAM2D,MACZ4J,oBAAqBvN,EAAMuN,oBAAsB1F,GAAsB,KACvE2F,OAAQ,EAAGC,cAAa3E,cAAc4E,IAClCpB,EAACqB,MAAAA,CACG3M,IAAKyM,EACLG,UAAWC,EAAW,CAClB,8BAA8B,EAC9B,sCAAsC,EACtC,CAAC,+BAA+B7N,EAAMoG,eAAiB,aAAa,EACpE,sCAAkD,YAAXxE,KAE3CkM,KAAM,QAEL9N,EAAM+N,qBAAuBzB,EAAC0B,EAAAA,MAC/B1B,EAACH,GAAAA,IAEO8B,EAA0BjO,GAG9BqC,KAAMA,GACNJ,MAAOA,GACPF,OAAQA,GACRmD,gBAAiBA,GACjBxC,eAAgBA,GAChBoG,WAAYA,EACZ4E,SAAUA,EACVzK,UAAWA,GACXiD,gBAAiBA,GACjBG,0BAA2BA,GAC3B6H,mBAAoBpJ,GAEpBqJ,YAAanO,EAAMmO,YACnB/I,SAAUA,GACVE,WAAYA,GACZD,UAAWA,GACXvC,iBAAkBA,GAClBQ,wBAAyBA,GACzBgF,WAAYA,GACZ9E,mBAAoBA,GAEpBiD,QAASA,GAETG,iBAAkBA,GAClBjC,qBAAsBA,GAEtByJ,qBAAsB7J,GAEtBxD,cAAeA,EACfqD,eAAgBA,GAChBiK,8BAA+BpK,IAAwBqK,EAAiCnK,GAAsBlD,SAC9GgD,qBAAsBA,GACtBiE,cAAeA,GACfqG,gBAAiBvO,EAAMuO,gBACvBC,kBAAmBxO,EAAMwO,kBACzBC,wBAAyBzO,EAAMyO,wBAE/BzJ,gBAAiBA,GAEjB8B,sBAAuBA,GACvBM,qBAAsBA,QAKrCpH,EAAM0O,eACH1O,EAAM2O,UAAU,CACZ/M,UACAgN,QAAS5O,EAAM6O,0BAA4B,UAAY,YACvDC,KAAM1O,EAAS,CAAE2O,YAAa,eAAxB3O,CAAyC,UACnD,EAKhBL,EAAUiP,aAAeA"}

package/dist/es/components/Card/components/CardInput/components/CVC.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{createElement as e}from"../../../../../external/preact/dist/preact.js";import t from"../../../../../external/classnames/index.js";import o from"./CVCHint.js";import a from"../../../../internal/FormFields/Field/Field.js";import n from"../../../../../core/Context/useCoreContext.js";import{CVC_POLICY_HIDDEN as r,CVC_POLICY_OPTIONAL as c,ENCRYPTED_SECURITY_CODE as i,CVC_POLICY_REQUIRED as l}from"../../../../internal/SecuredFields/lib/configuration/constants.js";import s from"./DataSfSpan.js";import{alternativeLabelContent as d}from"./IframeLabelAlternative.js";function u(u){const{label:m,onFocusField:_=(()=>{}),error:f="",className:p="",classNameModifiers:y=[],focused:C,filled:x,isValid:h,frontCVC:F=!1,cvcPolicy:b=l,showContextualElement:k,contextualText:j}=u,{i18n:v}=n(),V=t(p,{"adyen-checkout__field__cvc":!0,"adyen-checkout__card__cvc__input--hidden":b===r,"adyen-checkout__field__cvc--optional":b===c}),N=t({"adyen-checkout__input":!0,"adyen-checkout__input--small":!0,"adyen-checkout__card__cvc__input":!0,"adyen-checkout__input--error":f,"adyen-checkout__input--focus":C,"adyen-checkout__input--valid":h}),T=b!==c?m:v.get("creditCard.securityCode.label.optional");return e(a,{label:T,focused:C,filled:x,classNameModifiers:[...y,"securityCode"],onFocusField:()=>_(i),className:V,errorMessage:f,isValid:h,dir:"ltr",name:i,i18n:v,contextVisibleToScreenReader:!1,useLabelElement:!1,renderAlternativeToLabel:d,showContextualElement:k,contextualText:j},e(s,{encryptedFieldType:i,className:N}),e(o,{frontCVC:F,fieldLabel:T}))}export{u as default};
+import{createElement as e}from"../../../../../external/preact/dist/preact.js";import t from"../../../../../external/classnames/index.js";import o from"./CVCHint.js";import a from"../../../../internal/FormFields/Field/Field.js";import{useCoreContext as r}from"../../../../../core/Context/CoreProvider.js";import{CVC_POLICY_HIDDEN as c,CVC_POLICY_OPTIONAL as i,ENCRYPTED_SECURITY_CODE as n,CVC_POLICY_REQUIRED as l}from"../../../../internal/SecuredFields/lib/constants.js";import s from"./DataSfSpan.js";import{alternativeLabelContent as d}from"./IframeLabelAlternative.js";function u(u){const{label:m,onFocusField:_=(()=>{}),error:f="",className:p="",classNameModifiers:y=[],focused:C,filled:h,isValid:x,frontCVC:F=!1,cvcPolicy:b=l,showContextualElement:k,contextualText:v}=u,{i18n:j}=r(),V=t(p,{"adyen-checkout__field__cvc":!0,"adyen-checkout__card__cvc__input--hidden":b===c,"adyen-checkout__field__cvc--optional":b===i}),N=t({"adyen-checkout__input":!0,"adyen-checkout__input--small":!0,"adyen-checkout__card__cvc__input":!0,"adyen-checkout__input--error":f,"adyen-checkout__input--focus":C,"adyen-checkout__input--valid":x}),T=b!==i?m:j.get("creditCard.securityCode.label.optional");return e(a,{label:T,focused:C,filled:h,classNameModifiers:[...y,"securityCode"],onFocusField:()=>_(n),className:V,errorMessage:f,isValid:x,dir:"ltr",name:n,i18n:j,contextVisibleToScreenReader:!1,useLabelElement:!1,renderAlternativeToLabel:d,showContextualElement:k,contextualText:v},e(s,{encryptedFieldType:n,className:N}),e(o,{frontCVC:F,fieldLabel:T}))}export{u as default};
 //# sourceMappingURL=CVC.js.map

package/dist/es/components/Card/components/CardInput/components/CVC.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CVC.js","sources":["../../../../../../../src/components/Card/components/CardInput/components/CVC.tsx"],"sourcesContent":["import { h } from 'preact';\nimport classNames from 'classnames';\nimport CVCHint from './CVCHint';\nimport Field from '../../../../internal/FormFields/Field';\nimport useCoreContext from '../../../../../core/Context/~~useCoreContext~~';\nimport { CVCProps } from './types';\nimport {\n CVC_POLICY_HIDDEN,\n CVC_POLICY_OPTIONAL,\n CVC_POLICY_REQUIRED,\n ENCRYPTED_SECURITY_CODE\n} from '../../../../internal/SecuredFields/lib/~~configuration/~~constants';\nimport DataSfSpan from './DataSfSpan';\nimport { alternativeLabelContent } from './IframeLabelAlternative';\n\nexport default function CVC(props: CVCProps) {\n const {\n label,\n onFocusField = () => {},\n error = '',\n className = '',\n classNameModifiers = [],\n focused,\n filled,\n isValid,\n frontCVC = false,\n cvcPolicy = CVC_POLICY_REQUIRED,\n showContextualElement,\n contextualText\n } = props;\n const { i18n } = useCoreContext();\n\n const fieldClassnames = classNames(className, {\n 'adyen-checkout__field__cvc': true,\n 'adyen-checkout__card__cvc__input--hidden': cvcPolicy === CVC_POLICY_HIDDEN,\n 'adyen-checkout__field__cvc--optional': cvcPolicy === CVC_POLICY_OPTIONAL\n });\n\n const cvcClassnames = classNames({\n 'adyen-checkout__input': true,\n 'adyen-checkout__input--small': true,\n 'adyen-checkout__card__cvc__input': true,\n 'adyen-checkout__input--error': error,\n 'adyen-checkout__input--focus': focused,\n 'adyen-checkout__input--valid': isValid\n });\n\n const fieldLabel = cvcPolicy !== CVC_POLICY_OPTIONAL ? label : i18n.get('creditCard.securityCode.label.optional');\n\n return (\n <Field\n label={fieldLabel}\n focused={focused}\n filled={filled}\n classNameModifiers={[...classNameModifiers, 'securityCode']}\n onFocusField={() => onFocusField(ENCRYPTED_SECURITY_CODE)}\n className={fieldClassnames}\n errorMessage={error}\n isValid={isValid}\n dir={'ltr'}\n name={ENCRYPTED_SECURITY_CODE}\n i18n={i18n}\n contextVisibleToScreenReader={false}\n useLabelElement={false}\n renderAlternativeToLabel={alternativeLabelContent}\n showContextualElement={showContextualElement}\n contextualText={contextualText}\n >\n <DataSfSpan encryptedFieldType={ENCRYPTED_SECURITY_CODE} className={cvcClassnames} />\n\n <CVCHint frontCVC={frontCVC} fieldLabel={fieldLabel} />\n </Field>\n );\n}\n"],"names":["CVC","props","label","onFocusField","error","className","classNameModifiers","focused","filled","isValid","frontCVC","cvcPolicy","CVC_POLICY_REQUIRED","showContextualElement","contextualText","i18n","useCoreContext","fieldClassnames","classNames","CVC_POLICY_HIDDEN","CVC_POLICY_OPTIONAL","cvcClassnames","fieldLabel","get","h","Field","ENCRYPTED_SECURITY_CODE","errorMessage","dir","name","contextVisibleToScreenReader","useLabelElement","renderAlternativeToLabel","alternativeLabelContent","DataSfSpan","encryptedFieldType","CVCHint"],"mappings":"~~0jBAee~~,SAASA,EAAIC,GACxB,MAAMC,MACFA,EAAKC,aACLA,EAAe,SAAQC,MACvBA,EAAQ,GAAEC,UACVA,EAAY,GAAEC,mBACdA,EAAqB,GAAEC,QACvBA,EAAOC,OACPA,EAAMC,QACNA,EAAOC,SACPA,GAAW,EAAKC,UAChBA,EAAYC,EAAmBC,sBAC/BA,EAAqBC,eACrBA,GACAb,GACEc,KAAEA,GAASC,IAEXC,EAAkBC,EAAWb,EAAW,CAC1C,8BAA8B,EAC9B,2CAA4CM,IAAcQ,EAC1D,uCAAwCR,IAAcS,IAGpDC,EAAgBH,EAAW,CAC7B,yBAAyB,EACzB,gCAAgC,EAChC,oCAAoC,EACpC,+BAAgCd,EAChC,+BAAgCG,EAChC,+BAAgCE,IAG9Ba,EAAaX,IAAcS,EAAsBlB,EAAQa,EAAKQ,IAAI,0CAExE,OACIC,EAACC,EAAAA,CACGvB,MAAOoB,EACPf,QAASA,EACTC,OAAQA,EACRF,mBAAoB,IAAIA,EAAoB,gBAC5CH,aAAc,IAAMA,EAAauB,GACjCrB,UAAWY,EACXU,aAAcvB,EACdK,QAASA,EACTmB,IAAK,MACLC,KAAMH,EACNX,KAAMA,EACNe,8BAA8B,EAC9BC,iBAAiB,EACjBC,yBAA0BC,EAC1BpB,sBAAuBA,EACvBC,eAAgBA,GAEhBU,EAACU,EAAAA,CAAWC,mBAAoBT,EAAyBrB,UAAWgB,IAEpEG,EAACY,EAAAA,CAAQ1B,SAAUA,EAAUY,WAAYA,IAGrD"}
1	+ {"version":3,"file":"CVC.js","sources":["../../../../../../../src/components/Card/components/CardInput/components/CVC.tsx"],"sourcesContent":["import { h } from 'preact';\nimport classNames from 'classnames';\nimport CVCHint from './CVCHint';\nimport Field from '../../../../internal/FormFields/Field';\nimport { useCoreContext } from '../../../../../core/Context/CoreProvider';\nimport { CVCProps } from './types';\nimport {\n CVC_POLICY_HIDDEN,\n CVC_POLICY_OPTIONAL,\n CVC_POLICY_REQUIRED,\n ENCRYPTED_SECURITY_CODE\n} from '../../../../internal/SecuredFields/lib/constants';\nimport DataSfSpan from './DataSfSpan';\nimport { alternativeLabelContent } from './IframeLabelAlternative';\n\nexport default function CVC(props: CVCProps) {\n const {\n label,\n onFocusField = () => {},\n error = '',\n className = '',\n classNameModifiers = [],\n focused,\n filled,\n isValid,\n frontCVC = false,\n cvcPolicy = CVC_POLICY_REQUIRED,\n showContextualElement,\n contextualText\n } = props;\n const { i18n } = useCoreContext();\n\n const fieldClassnames = classNames(className, {\n 'adyen-checkout__field__cvc': true,\n 'adyen-checkout__card__cvc__input--hidden': cvcPolicy === CVC_POLICY_HIDDEN,\n 'adyen-checkout__field__cvc--optional': cvcPolicy === CVC_POLICY_OPTIONAL\n });\n\n const cvcClassnames = classNames({\n 'adyen-checkout__input': true,\n 'adyen-checkout__input--small': true,\n 'adyen-checkout__card__cvc__input': true,\n 'adyen-checkout__input--error': error,\n 'adyen-checkout__input--focus': focused,\n 'adyen-checkout__input--valid': isValid\n });\n\n const fieldLabel = cvcPolicy !== CVC_POLICY_OPTIONAL ? label : i18n.get('creditCard.securityCode.label.optional');\n\n return (\n <Field\n label={fieldLabel}\n focused={focused}\n filled={filled}\n classNameModifiers={[...classNameModifiers, 'securityCode']}\n onFocusField={() => onFocusField(ENCRYPTED_SECURITY_CODE)}\n className={fieldClassnames}\n errorMessage={error}\n isValid={isValid}\n dir={'ltr'}\n name={ENCRYPTED_SECURITY_CODE}\n i18n={i18n}\n contextVisibleToScreenReader={false}\n useLabelElement={false}\n renderAlternativeToLabel={alternativeLabelContent}\n showContextualElement={showContextualElement}\n contextualText={contextualText}\n >\n <DataSfSpan encryptedFieldType={ENCRYPTED_SECURITY_CODE} className={cvcClassnames} />\n\n <CVCHint frontCVC={frontCVC} fieldLabel={fieldLabel} />\n </Field>\n );\n}\n"],"names":["CVC","props","label","onFocusField","error","className","classNameModifiers","focused","filled","isValid","frontCVC","cvcPolicy","CVC_POLICY_REQUIRED","showContextualElement","contextualText","i18n","useCoreContext","fieldClassnames","classNames","CVC_POLICY_HIDDEN","CVC_POLICY_OPTIONAL","cvcClassnames","fieldLabel","get","h","Field","ENCRYPTED_SECURITY_CODE","errorMessage","dir","name","contextVisibleToScreenReader","useLabelElement","renderAlternativeToLabel","alternativeLabelContent","DataSfSpan","encryptedFieldType","CVCHint"],"mappings":"4jBAee,SAASA,EAAIC,GACxB,MAAMC,MACFA,EAAKC,aACLA,EAAe,SAAQC,MACvBA,EAAQ,GAAEC,UACVA,EAAY,GAAEC,mBACdA,EAAqB,GAAEC,QACvBA,EAAOC,OACPA,EAAMC,QACNA,EAAOC,SACPA,GAAW,EAAKC,UAChBA,EAAYC,EAAmBC,sBAC/BA,EAAqBC,eACrBA,GACAb,GACEc,KAAEA,GAASC,IAEXC,EAAkBC,EAAWb,EAAW,CAC1C,8BAA8B,EAC9B,2CAA4CM,IAAcQ,EAC1D,uCAAwCR,IAAcS,IAGpDC,EAAgBH,EAAW,CAC7B,yBAAyB,EACzB,gCAAgC,EAChC,oCAAoC,EACpC,+BAAgCd,EAChC,+BAAgCG,EAChC,+BAAgCE,IAG9Ba,EAAaX,IAAcS,EAAsBlB,EAAQa,EAAKQ,IAAI,0CAExE,OACIC,EAACC,EAAAA,CACGvB,MAAOoB,EACPf,QAASA,EACTC,OAAQA,EACRF,mBAAoB,IAAIA,EAAoB,gBAC5CH,aAAc,IAAMA,EAAauB,GACjCrB,UAAWY,EACXU,aAAcvB,EACdK,QAASA,EACTmB,IAAK,MACLC,KAAMH,EACNX,KAAMA,EACNe,8BAA8B,EAC9BC,iBAAiB,EACjBC,yBAA0BC,EAC1BpB,sBAAuBA,EACvBC,eAAgBA,GAEhBU,EAACU,EAAAA,CAAWC,mBAAoBT,EAAyBrB,UAAWgB,IAEpEG,EAACY,EAAAA,CAAQ1B,SAAUA,EAAUY,WAAYA,IAGrD"}

package/dist/es/components/Card/components/CardInput/components/CardFields.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{createElement as e}from"../../../../../external/preact/dist/preact.js";import r from"./CardNumber.js";import t from"./CVC.js";import a from"./ExpirationDate.js";import d from"../../../../../core/Context/useCoreContext.js";import n from"../../../../../external/classnames/index.js";import{BRAND_ICON_UI_EXCLUSION_LIST as c,DATE_POLICY_HIDDEN as i,ENCRYPTED_EXPIRY_DATE as o,ENCRYPTED_SECURITY_CODE as l,ENCRYPTED_CARD_NUMBER as s}from"../../../../internal/SecuredFields/lib/configuration/constants.js";import u from"./AvailableBrands/AvailableBrands.js";function m({brand:m,brandsIcons:p,brandsConfiguration:y,dualBrandingElements:x,dualBrandingChangeHandler:C,dualBrandingSelected:f,errors:_,focusedElement:b,hasCVC:g,cvcPolicy:h,expiryDatePolicy:E,onFocusField:B,showBrandIcon:v,valid:F,showContextualElement:N}){const{i18n:j}=d(),k=(e,r)=>e[r]?j.get(e[r]):null,w=p?.filter((e=>!c?.includes(e.name))),D="amex"===m,S=D?j.get("creditCard.securityCode.contextualText.4digits"):j.get("creditCard.securityCode.contextualText.3digits");return e("div",{className:"adyen-checkout__card__form"},e(r,{brand:m,brandsConfiguration:y,error:k(_,s),focused:b===s,isValid:!!F.encryptedCardNumber,label:j.get("creditCard.cardNumber.label"),onFocusField:B,filled:!!_.encryptedCardNumber||!!F.encryptedCardNumber,showBrandIcon:v,dualBrandingElements:x,dualBrandingChangeHandler:C,dualBrandingSelected:f}),e(u,{activeBrand:m,brands:w}),e("div",{className:n("adyen-checkout__card__exp-cvc adyen-checkout__field-wrapper",{"adyen-checkout__card__exp-cvc__exp-date__input--hidden":E===i})},e(a,{error:k(_,o),focused:b===o,isValid:!!F.encryptedExpiryMonth&&!!F.encryptedExpiryYear,filled:!!_.encryptedExpiryDate||!!F.encryptedExpiryYear,label:j.get("creditCard.expiryDate.label"),onFocusField:B,className:"adyen-checkout__field--50",expiryDatePolicy:E,showContextualElement:N,contextualText:j.get("creditCard.expiryDate.contextualText")}),g&&e(t,{error:k(_,l),focused:b===l,cvcPolicy:h,isValid:!!F.encryptedSecurityCode,filled:!!_.encryptedSecurityCode||!!F.encryptedSecurityCode,label:j.get("creditCard.securityCode.label"),onFocusField:B,className:"adyen-checkout__field--50",frontCVC:D,showContextualElement:N,contextualText:S})))}export{m as default};
+import{createElement as e}from"../../../../../external/preact/dist/preact.js";import r from"./CardNumber.js";import a from"./CVC.js";import t from"./ExpirationDate.js";import{useCoreContext as d}from"../../../../../core/Context/CoreProvider.js";import n from"../../../../../external/classnames/index.js";import{BRAND_ICON_UI_EXCLUSION_LIST as c,DATE_POLICY_HIDDEN as i,ENCRYPTED_EXPIRY_DATE as o,ENCRYPTED_SECURITY_CODE as l,ENCRYPTED_CARD_NUMBER as s}from"../../../../internal/SecuredFields/lib/constants.js";import u from"./AvailableBrands/AvailableBrands.js";function m({brand:m,brandsIcons:p,brandsConfiguration:y,dualBrandingElements:x,dualBrandingChangeHandler:C,dualBrandingSelected:f,errors:_,focusedElement:b,hasCVC:g,cvcPolicy:h,expiryDatePolicy:E,onFocusField:v,showBrandIcon:B,valid:F,showContextualElement:N}){const{i18n:j}=d(),k=(e,r)=>e[r]?j.get(e[r]):null,w=p?.filter((e=>!c?.includes(e.name))),D="amex"===m,S=D?j.get("creditCard.securityCode.contextualText.4digits"):j.get("creditCard.securityCode.contextualText.3digits");return e("div",{className:"adyen-checkout__card__form"},e(r,{brand:m,brandsConfiguration:y,error:k(_,s),focused:b===s,isValid:!!F.encryptedCardNumber,label:j.get("creditCard.cardNumber.label"),onFocusField:v,filled:!!_.encryptedCardNumber||!!F.encryptedCardNumber,showBrandIcon:B,dualBrandingElements:x,dualBrandingChangeHandler:C,dualBrandingSelected:f}),e(u,{activeBrand:m,brands:w}),e("div",{className:n("adyen-checkout__card__exp-cvc adyen-checkout__field-wrapper",{"adyen-checkout__card__exp-cvc__exp-date__input--hidden":E===i})},e(t,{error:k(_,o),focused:b===o,isValid:!!F.encryptedExpiryMonth&&!!F.encryptedExpiryYear,filled:!!_.encryptedExpiryDate||!!F.encryptedExpiryYear,label:j.get("creditCard.expiryDate.label"),onFocusField:v,className:"adyen-checkout__field--50",expiryDatePolicy:E,showContextualElement:N,contextualText:j.get("creditCard.expiryDate.contextualText")}),g&&e(a,{error:k(_,l),focused:b===l,cvcPolicy:h,isValid:!!F.encryptedSecurityCode,filled:!!_.encryptedSecurityCode||!!F.encryptedSecurityCode,label:j.get("creditCard.securityCode.label"),onFocusField:v,className:"adyen-checkout__field--50",frontCVC:D,showContextualElement:N,contextualText:S})))}export{m as default};
 //# sourceMappingURL=CardFields.js.map

package/dist/es/components/Card/components/CardInput/components/CardFields.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CardFields.js","sources":["../../../../../../../src/components/Card/components/CardInput/components/CardFields.tsx"],"sourcesContent":["import { h } from 'preact';\nimport CardNumber from './CardNumber';\nimport CVC from './CVC';\nimport ExpirationDate from './ExpirationDate';\nimport useCoreContext from '../../../../../core/Context/~~useCoreContext~~';\nimport { CardFieldsProps } from './types';\nimport classNames from 'classnames';\nimport {\n BRAND_ICON_UI_EXCLUSION_LIST,\n DATE_POLICY_HIDDEN,\n ENCRYPTED_CARD_NUMBER,\n ENCRYPTED_EXPIRY_DATE,\n ENCRYPTED_SECURITY_CODE\n} from '../../../../internal/SecuredFields/lib/~~configuration/~~constants';\nimport AvailableBrands from './AvailableBrands';\n\nexport default function CardFields({\n brand,\n brandsIcons,\n brandsConfiguration,\n dualBrandingElements,\n dualBrandingChangeHandler,\n dualBrandingSelected,\n errors,\n focusedElement,\n hasCVC,\n cvcPolicy,\n expiryDatePolicy,\n onFocusField,\n showBrandIcon,\n valid,\n showContextualElement\n}: CardFieldsProps) {\n const { i18n } = useCoreContext();\n\n const getError = (errors, fieldType) => {\n return errors[fieldType] ? i18n.get(errors[fieldType]) : null;\n };\n\n // A set of brands filtered to exclude those that can never appear in the UI\n const allowedBrands = brandsIcons?.filter(brandsIcons => !BRAND_ICON_UI_EXCLUSION_LIST?.includes(brandsIcons.name));\n const isAmex = brand === 'amex';\n const cvcContextualText = isAmex\n ? i18n.get('creditCard.securityCode.contextualText.4digits')\n : i18n.get('creditCard.securityCode.contextualText.3digits');\n\n return (\n <div className=\"adyen-checkout__card__form\">\n <CardNumber\n brand={brand}\n brandsConfiguration={brandsConfiguration}\n error={getError(errors, ENCRYPTED_CARD_NUMBER)}\n focused={focusedElement === ENCRYPTED_CARD_NUMBER}\n isValid={!!valid.encryptedCardNumber}\n label={i18n.get('creditCard.cardNumber.label')}\n onFocusField={onFocusField}\n filled={!!errors.encryptedCardNumber \|\| !!valid.encryptedCardNumber}\n showBrandIcon={showBrandIcon}\n dualBrandingElements={dualBrandingElements}\n dualBrandingChangeHandler={dualBrandingChangeHandler}\n dualBrandingSelected={dualBrandingSelected}\n />\n\n <AvailableBrands activeBrand={brand} brands={allowedBrands} />\n\n <div\n className={classNames('adyen-checkout__card__exp-cvc adyen-checkout__field-wrapper', {\n 'adyen-checkout__card__exp-cvc__exp-date__input--hidden': expiryDatePolicy === DATE_POLICY_HIDDEN\n })}\n >\n <ExpirationDate\n error={getError(errors, ENCRYPTED_EXPIRY_DATE)}\n focused={focusedElement === ENCRYPTED_EXPIRY_DATE}\n isValid={!!valid.encryptedExpiryMonth && !!valid.encryptedExpiryYear}\n filled={!!errors.encryptedExpiryDate \|\| !!valid.encryptedExpiryYear}\n label={i18n.get('creditCard.expiryDate.label')}\n onFocusField={onFocusField}\n className={'adyen-checkout__field--50'}\n expiryDatePolicy={expiryDatePolicy}\n showContextualElement={showContextualElement}\n contextualText={i18n.get('creditCard.expiryDate.contextualText')}\n />\n\n {hasCVC && (\n <CVC\n error={getError(errors, ENCRYPTED_SECURITY_CODE)}\n focused={focusedElement === ENCRYPTED_SECURITY_CODE}\n cvcPolicy={cvcPolicy}\n isValid={!!valid.encryptedSecurityCode}\n filled={!!errors.encryptedSecurityCode \|\| !!valid.encryptedSecurityCode}\n label={i18n.get('creditCard.securityCode.label')}\n onFocusField={onFocusField}\n className={'adyen-checkout__field--50'}\n frontCVC={isAmex}\n showContextualElement={showContextualElement}\n contextualText={cvcContextualText}\n />\n )}\n </div>\n </div>\n );\n}\n"],"names":["CardFields","brand","brandsIcons","brandsConfiguration","dualBrandingElements","dualBrandingChangeHandler","dualBrandingSelected","errors","focusedElement","hasCVC","cvcPolicy","expiryDatePolicy","onFocusField","showBrandIcon","valid","showContextualElement","i18n","useCoreContext","getError","fieldType","get","allowedBrands","filter","BRAND_ICON_UI_EXCLUSION_LIST","includes","name","isAmex","cvcContextualText","h","div","className","CardNumber","error","ENCRYPTED_CARD_NUMBER","focused","isValid","encryptedCardNumber","label","filled","AvailableBrands","activeBrand","brands","classNames","DATE_POLICY_HIDDEN","ExpirationDate","ENCRYPTED_EXPIRY_DATE","encryptedExpiryMonth","encryptedExpiryYear","encryptedExpiryDate","contextualText","CVC","ENCRYPTED_SECURITY_CODE","encryptedSecurityCode","frontCVC"],"mappings":"~~gjBAgBe~~,SAASA,GAAWC,MAC/BA,EAAKC,YACLA,EAAWC,oBACXA,EAAmBC,qBACnBA,EAAoBC,0BACpBA,EAAyBC,qBACzBA,EAAoBC,OACpBA,EAAMC,eACNA,EAAcC,OACdA,EAAMC,UACNA,EAASC,iBACTA,EAAgBC,aAChBA,EAAYC,cACZA,EAAaC,MACbA,EAAKC,sBACLA,IAEA,MAAMC,KAAEA,GAASC,IAEXC,EAAW,CAACX,EAAQY,IACfZ,EAAOY,GAAaH,EAAKI,IAAIb,EAAOY,IAAc,KAIvDE,EAAgBnB,GAAaoB,QAAOpB,IAAgBqB,GAA8BC,SAAStB,EAAYuB,QACvGC,EAAmB,SAAVzB,EACT0B,EAAoBD,EACpBV,EAAKI,IAAI,kDACTJ,EAAKI,IAAI,kDAEf,OACIQ,EAACC,MAAAA,CAAIC,UAAU,8BACXF,EAACG,EAAAA,CACG9B,MAAOA,EACPE,oBAAqBA,EACrB6B,MAAOd,EAASX,EAAQ0B,GACxBC,QAAS1B,IAAmByB,EAC5BE,UAAWrB,EAAMsB,oBACjBC,MAAOrB,EAAKI,IAAI,+BAChBR,aAAcA,EACd0B,SAAU/B,EAAO6B,uBAAyBtB,EAAMsB,oBAChDvB,cAAeA,EACfT,qBAAsBA,EACtBC,0BAA2BA,EAC3BC,qBAAsBA,IAG1BsB,EAACW,EAAAA,CAAgBC,YAAavC,EAAOwC,OAAQpB,IAE7CO,EAACC,MAAAA,CACGC,UAAWY,EAAW,8DAA+D,CACjF,yDAA0D/B,IAAqBgC,KAGnFf,EAACgB,EAAAA,CACGZ,MAAOd,EAASX,EAAQsC,GACxBX,QAAS1B,IAAmBqC,EAC5BV,UAAWrB,EAAMgC,wBAA0BhC,EAAMiC,oBACjDT,SAAU/B,EAAOyC,uBAAyBlC,EAAMiC,oBAChDV,MAAOrB,EAAKI,IAAI,+BAChBR,aAAcA,EACdkB,UAAW,4BACXnB,iBAAkBA,EAClBI,sBAAuBA,EACvBkC,eAAgBjC,EAAKI,IAAI,0CAG5BX,GACGmB,EAACsB,EAAAA,CACGlB,MAAOd,EAASX,EAAQ4C,GACxBjB,QAAS1B,IAAmB2C,EAC5BzC,UAAWA,EACXyB,UAAWrB,EAAMsC,sBACjBd,SAAU/B,EAAO6C,yBAA2BtC,EAAMsC,sBAClDf,MAAOrB,EAAKI,IAAI,iCAChBR,aAAcA,EACdkB,UAAW,4BACXuB,SAAU3B,EACVX,sBAAuBA,EACvBkC,eAAgBtB,KAMxC"}
1	+ {"version":3,"file":"CardFields.js","sources":["../../../../../../../src/components/Card/components/CardInput/components/CardFields.tsx"],"sourcesContent":["import { h } from 'preact';\nimport CardNumber from './CardNumber';\nimport CVC from './CVC';\nimport ExpirationDate from './ExpirationDate';\nimport { useCoreContext } from '../../../../../core/Context/CoreProvider';\nimport { CardFieldsProps } from './types';\nimport classNames from 'classnames';\nimport {\n BRAND_ICON_UI_EXCLUSION_LIST,\n DATE_POLICY_HIDDEN,\n ENCRYPTED_CARD_NUMBER,\n ENCRYPTED_EXPIRY_DATE,\n ENCRYPTED_SECURITY_CODE\n} from '../../../../internal/SecuredFields/lib/constants';\nimport AvailableBrands from './AvailableBrands';\n\nexport default function CardFields({\n brand,\n brandsIcons,\n brandsConfiguration,\n dualBrandingElements,\n dualBrandingChangeHandler,\n dualBrandingSelected,\n errors,\n focusedElement,\n hasCVC,\n cvcPolicy,\n expiryDatePolicy,\n onFocusField,\n showBrandIcon,\n valid,\n showContextualElement\n}: CardFieldsProps) {\n const { i18n } = useCoreContext();\n\n const getError = (errors, fieldType) => {\n return errors[fieldType] ? i18n.get(errors[fieldType]) : null;\n };\n\n // A set of brands filtered to exclude those that can never appear in the UI\n const allowedBrands = brandsIcons?.filter(brandsIcons => !BRAND_ICON_UI_EXCLUSION_LIST?.includes(brandsIcons.name));\n const isAmex = brand === 'amex';\n const cvcContextualText = isAmex\n ? i18n.get('creditCard.securityCode.contextualText.4digits')\n : i18n.get('creditCard.securityCode.contextualText.3digits');\n\n return (\n <div className=\"adyen-checkout__card__form\">\n <CardNumber\n brand={brand}\n brandsConfiguration={brandsConfiguration}\n error={getError(errors, ENCRYPTED_CARD_NUMBER)}\n focused={focusedElement === ENCRYPTED_CARD_NUMBER}\n isValid={!!valid.encryptedCardNumber}\n label={i18n.get('creditCard.cardNumber.label')}\n onFocusField={onFocusField}\n filled={!!errors.encryptedCardNumber \|\| !!valid.encryptedCardNumber}\n showBrandIcon={showBrandIcon}\n dualBrandingElements={dualBrandingElements}\n dualBrandingChangeHandler={dualBrandingChangeHandler}\n dualBrandingSelected={dualBrandingSelected}\n />\n\n <AvailableBrands activeBrand={brand} brands={allowedBrands} />\n\n <div\n className={classNames('adyen-checkout__card__exp-cvc adyen-checkout__field-wrapper', {\n 'adyen-checkout__card__exp-cvc__exp-date__input--hidden': expiryDatePolicy === DATE_POLICY_HIDDEN\n })}\n >\n <ExpirationDate\n error={getError(errors, ENCRYPTED_EXPIRY_DATE)}\n focused={focusedElement === ENCRYPTED_EXPIRY_DATE}\n isValid={!!valid.encryptedExpiryMonth && !!valid.encryptedExpiryYear}\n filled={!!errors.encryptedExpiryDate \|\| !!valid.encryptedExpiryYear}\n label={i18n.get('creditCard.expiryDate.label')}\n onFocusField={onFocusField}\n className={'adyen-checkout__field--50'}\n expiryDatePolicy={expiryDatePolicy}\n showContextualElement={showContextualElement}\n contextualText={i18n.get('creditCard.expiryDate.contextualText')}\n />\n\n {hasCVC && (\n <CVC\n error={getError(errors, ENCRYPTED_SECURITY_CODE)}\n focused={focusedElement === ENCRYPTED_SECURITY_CODE}\n cvcPolicy={cvcPolicy}\n isValid={!!valid.encryptedSecurityCode}\n filled={!!errors.encryptedSecurityCode \|\| !!valid.encryptedSecurityCode}\n label={i18n.get('creditCard.securityCode.label')}\n onFocusField={onFocusField}\n className={'adyen-checkout__field--50'}\n frontCVC={isAmex}\n showContextualElement={showContextualElement}\n contextualText={cvcContextualText}\n />\n )}\n </div>\n </div>\n );\n}\n"],"names":["CardFields","brand","brandsIcons","brandsConfiguration","dualBrandingElements","dualBrandingChangeHandler","dualBrandingSelected","errors","focusedElement","hasCVC","cvcPolicy","expiryDatePolicy","onFocusField","showBrandIcon","valid","showContextualElement","i18n","useCoreContext","getError","fieldType","get","allowedBrands","filter","BRAND_ICON_UI_EXCLUSION_LIST","includes","name","isAmex","cvcContextualText","h","div","className","CardNumber","error","ENCRYPTED_CARD_NUMBER","focused","isValid","encryptedCardNumber","label","filled","AvailableBrands","activeBrand","brands","classNames","DATE_POLICY_HIDDEN","ExpirationDate","ENCRYPTED_EXPIRY_DATE","encryptedExpiryMonth","encryptedExpiryYear","encryptedExpiryDate","contextualText","CVC","ENCRYPTED_SECURITY_CODE","encryptedSecurityCode","frontCVC"],"mappings":"kjBAgBe,SAASA,GAAWC,MAC/BA,EAAKC,YACLA,EAAWC,oBACXA,EAAmBC,qBACnBA,EAAoBC,0BACpBA,EAAyBC,qBACzBA,EAAoBC,OACpBA,EAAMC,eACNA,EAAcC,OACdA,EAAMC,UACNA,EAASC,iBACTA,EAAgBC,aAChBA,EAAYC,cACZA,EAAaC,MACbA,EAAKC,sBACLA,IAEA,MAAMC,KAAEA,GAASC,IAEXC,EAAW,CAACX,EAAQY,IACfZ,EAAOY,GAAaH,EAAKI,IAAIb,EAAOY,IAAc,KAIvDE,EAAgBnB,GAAaoB,QAAOpB,IAAgBqB,GAA8BC,SAAStB,EAAYuB,QACvGC,EAAmB,SAAVzB,EACT0B,EAAoBD,EACpBV,EAAKI,IAAI,kDACTJ,EAAKI,IAAI,kDAEf,OACIQ,EAACC,MAAAA,CAAIC,UAAU,8BACXF,EAACG,EAAAA,CACG9B,MAAOA,EACPE,oBAAqBA,EACrB6B,MAAOd,EAASX,EAAQ0B,GACxBC,QAAS1B,IAAmByB,EAC5BE,UAAWrB,EAAMsB,oBACjBC,MAAOrB,EAAKI,IAAI,+BAChBR,aAAcA,EACd0B,SAAU/B,EAAO6B,uBAAyBtB,EAAMsB,oBAChDvB,cAAeA,EACfT,qBAAsBA,EACtBC,0BAA2BA,EAC3BC,qBAAsBA,IAG1BsB,EAACW,EAAAA,CAAgBC,YAAavC,EAAOwC,OAAQpB,IAE7CO,EAACC,MAAAA,CACGC,UAAWY,EAAW,8DAA+D,CACjF,yDAA0D/B,IAAqBgC,KAGnFf,EAACgB,EAAAA,CACGZ,MAAOd,EAASX,EAAQsC,GACxBX,QAAS1B,IAAmBqC,EAC5BV,UAAWrB,EAAMgC,wBAA0BhC,EAAMiC,oBACjDT,SAAU/B,EAAOyC,uBAAyBlC,EAAMiC,oBAChDV,MAAOrB,EAAKI,IAAI,+BAChBR,aAAcA,EACdkB,UAAW,4BACXnB,iBAAkBA,EAClBI,sBAAuBA,EACvBkC,eAAgBjC,EAAKI,IAAI,0CAG5BX,GACGmB,EAACsB,EAAAA,CACGlB,MAAOd,EAASX,EAAQ4C,GACxBjB,QAAS1B,IAAmB2C,EAC5BzC,UAAWA,EACXyB,UAAWrB,EAAMsC,sBACjBd,SAAU/B,EAAO6C,yBAA2BtC,EAAMsC,sBAClDf,MAAOrB,EAAKI,IAAI,iCAChBR,aAAcA,EACdkB,UAAW,4BACXuB,SAAU3B,EACVX,sBAAuBA,EACvBkC,eAAgBtB,KAMxC"}

package/dist/es/components/Card/components/CardInput/components/CardHolderName.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{createElement as e}from"../../../../../external/preact/dist/preact.js";import r from"../../../../internal/FormFields/Field/Field.js";import o from"../../../../../core/Context/useCoreContext.js";import a from"../../../../internal/FormFields/InputText.js";import{CREDITCARD_HOLDER_NAME_INVALID as t}from"../../../../../core/Errors/constants.js";function l({onBlur:l,onInput:n,placeholder:d,value:i,required:s,error:c=!1,isValid:m,disabled:u,onFieldFocusAnalytics:p,onFieldBlurAnalytics:h}){const{i18n:_}=o();return e(r,{label:_.get("creditCard.holderName"),className:"adyen-checkout__card__holderName",errorMessage:c&&_.get(t),isValid:!!m,name:"holderName",i18n:_,onFocus:e=>p("holderName",e),onBlur:e=>h("holderName",e)},e(a,{name:"holderName",className:"adyen-checkout__card__holderName__input adyen-checkout__input",placeholder:d,autocomplete:"cc-name",value:i,required:s,onBlur:l,onInput:n,disabled:u}))}export{l as default};
+import{createElement as e}from"../../../../../external/preact/dist/preact.js";import r from"../../../../internal/FormFields/Field/Field.js";import{useCoreContext as o}from"../../../../../core/Context/CoreProvider.js";import a from"../../../../internal/FormFields/InputText.js";import{CREDITCARD_HOLDER_NAME_INVALID as l}from"../../../../../core/Errors/constants.js";function t({onBlur:t,onInput:n,placeholder:d,value:i,required:c,error:s=!1,isValid:m,disabled:u,onFieldFocusAnalytics:p,onFieldBlurAnalytics:h}){const{i18n:_}=o();return e(r,{label:_.get("creditCard.holderName"),className:"adyen-checkout__card__holderName",errorMessage:s&&_.get(l),isValid:!!m,name:"holderName",i18n:_,onFocus:e=>p("holderName",e),onBlur:e=>h("holderName",e)},e(a,{name:"holderName",className:"adyen-checkout__card__holderName__input adyen-checkout__input",placeholder:d,autocomplete:"cc-name",value:i,required:c,onBlur:t,onInput:n,disabled:u}))}export{t as default};
 //# sourceMappingURL=CardHolderName.js.map

package/dist/es/components/Card/components/CardInput/components/CardHolderName.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CardHolderName.js","sources":["../../../../../../../src/components/Card/components/CardInput/components/CardHolderName.tsx"],"sourcesContent":["import { h } from 'preact';\nimport Field from '../../../../internal/FormFields/Field';\nimport useCoreContext from '../../../../../core/Context/~~useCoreContext~~';\nimport { CardHolderNameProps } from './types';\nimport InputText from '../../../../internal/FormFields/InputText';\nimport { CREDITCARD_HOLDER_NAME_INVALID } from '../../../../../core/Errors/constants';\n\nexport default function CardHolderName({\n onBlur,\n onInput,\n placeholder,\n value,\n required,\n error = false,\n isValid,\n disabled,\n onFieldFocusAnalytics,\n onFieldBlurAnalytics\n}: CardHolderNameProps) {\n const { i18n } = useCoreContext();\n\n return (\n <Field\n label={i18n.get('creditCard.holderName')}\n className={'adyen-checkout__card__holderName'}\n errorMessage={error && i18n.get(CREDITCARD_HOLDER_NAME_INVALID)}\n isValid={!!isValid}\n name={'holderName'}\n i18n={i18n}\n onFocus={e => onFieldFocusAnalytics('holderName', e)}\n onBlur={e => onFieldBlurAnalytics('holderName', e)}\n >\n <InputText\n name={'holderName'}\n className=\"adyen-checkout__card__holderName__input adyen-checkout__input\"\n placeholder={placeholder}\n autocomplete={'cc-name'}\n {...{ value, required, onBlur, onInput, disabled }}\n />\n </Field>\n );\n}\n"],"names":["CardHolderName","onBlur","onInput","placeholder","value","required","error","isValid","disabled","onFieldFocusAnalytics","onFieldBlurAnalytics","i18n","useCoreContext","h","Field","label","get","className","errorMessage","CREDITCARD_HOLDER_NAME_INVALID","name","onFocus","e","InputText","autocomplete"],"mappings":"~~8VAOe~~,SAASA,GAAeC,OACnCA,EAAMC,QACNA,EAAOC,YACPA,EAAWC,MACXA,EAAKC,SACLA,EAAQC,MACRA,GAAQ,EAAKC,QACbA,EAAOC,SACPA,EAAQC,sBACRA,EAAqBC,qBACrBA,IAEA,MAAMC,KAAEA,GAASC,IAEjB,OACIC,EAACC,EAAAA,CACGC,MAAOJ,EAAKK,IAAI,yBAChBC,UAAW,mCACXC,aAAcZ,GAASK,EAAKK,IAAIG,GAChCZ,UAAWA,EACXa,KAAM,aACNT,KAAMA,EACNU,QAASC,GAAKb,EAAsB,aAAca,GAClDrB,OAAQqB,GAAKZ,EAAqB,aAAcY,IAEhDT,EAACU,EAAAA,CACGH,KAAM,aACNH,UAAU,gEACVd,YAAaA,EACbqB,aAAc,UACRpB,QAAOC,WAAUJ,SAAQC,UAASM,aAIxD"}
1	+ {"version":3,"file":"CardHolderName.js","sources":["../../../../../../../src/components/Card/components/CardInput/components/CardHolderName.tsx"],"sourcesContent":["import { h } from 'preact';\nimport Field from '../../../../internal/FormFields/Field';\nimport { useCoreContext } from '../../../../../core/Context/CoreProvider';\nimport { CardHolderNameProps } from './types';\nimport InputText from '../../../../internal/FormFields/InputText';\nimport { CREDITCARD_HOLDER_NAME_INVALID } from '../../../../../core/Errors/constants';\n\nexport default function CardHolderName({\n onBlur,\n onInput,\n placeholder,\n value,\n required,\n error = false,\n isValid,\n disabled,\n onFieldFocusAnalytics,\n onFieldBlurAnalytics\n}: CardHolderNameProps) {\n const { i18n } = useCoreContext();\n\n return (\n <Field\n label={i18n.get('creditCard.holderName')}\n className={'adyen-checkout__card__holderName'}\n errorMessage={error && i18n.get(CREDITCARD_HOLDER_NAME_INVALID)}\n isValid={!!isValid}\n name={'holderName'}\n i18n={i18n}\n onFocus={e => onFieldFocusAnalytics('holderName', e)}\n onBlur={e => onFieldBlurAnalytics('holderName', e)}\n >\n <InputText\n name={'holderName'}\n className=\"adyen-checkout__card__holderName__input adyen-checkout__input\"\n placeholder={placeholder}\n autocomplete={'cc-name'}\n {...{ value, required, onBlur, onInput, disabled }}\n />\n </Field>\n );\n}\n"],"names":["CardHolderName","onBlur","onInput","placeholder","value","required","error","isValid","disabled","onFieldFocusAnalytics","onFieldBlurAnalytics","i18n","useCoreContext","h","Field","label","get","className","errorMessage","CREDITCARD_HOLDER_NAME_INVALID","name","onFocus","e","InputText","autocomplete"],"mappings":"8WAOe,SAASA,GAAeC,OACnCA,EAAMC,QACNA,EAAOC,YACPA,EAAWC,MACXA,EAAKC,SACLA,EAAQC,MACRA,GAAQ,EAAKC,QACbA,EAAOC,SACPA,EAAQC,sBACRA,EAAqBC,qBACrBA,IAEA,MAAMC,KAAEA,GAASC,IAEjB,OACIC,EAACC,EAAAA,CACGC,MAAOJ,EAAKK,IAAI,yBAChBC,UAAW,mCACXC,aAAcZ,GAASK,EAAKK,IAAIG,GAChCZ,UAAWA,EACXa,KAAM,aACNT,KAAMA,EACNU,QAASC,GAAKb,EAAsB,aAAca,GAClDrB,OAAQqB,GAAKZ,EAAqB,aAAcY,IAEhDT,EAACU,EAAAA,CACGH,KAAM,aACNH,UAAU,gEACVd,YAAaA,EACbqB,aAAc,UACRpB,QAAOC,WAAUJ,SAAQC,UAASM,aAIxD"}

package/dist/es/components/Card/components/CardInput/components/CardNumber.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{createElement as e}from"../../../../../external/preact/dist/preact.js";import n from"../../../../../external/classnames/index.js";import a from"./BrandIcon.js";import r from"./DualBrandingIcon/DualBrandingIcon.js";import o from"../../../../internal/FormFields/Field/Field.js";import d from"../../../../../core/Context/useCoreContext.js";import i from"./DataSfSpan.js";import{ENCRYPTED_CARD_NUMBER as t}from"../../../../internal/SecuredFields/lib/configuration/constants.js";import{alternativeLabelContent as c}from"./IframeLabelAlternative.js";function l(l){const{i18n:s}=d(),{error:u="",isValid:_=!1,onFocusField:m=(()=>{}),dualBrandingElements:f,dualBrandingChangeHandler:p,dualBrandingSelected:b}=l;return e(o,{label:l.label,focused:l.focused,filled:l.filled,classNameModifiers:["cardNumber"],onFocusField:()=>m(t),errorMessage:u,isValid:_,dir:"ltr",name:t,showValidIcon:!1,i18n:s,contextVisibleToScreenReader:!1,useLabelElement:!1,renderAlternativeToLabel:c},e(i,{encryptedFieldType:t,className:n({"adyen-checkout__input":!0,"adyen-checkout__input--large":!0,"adyen-checkout__card__cardNumber__input":!0,"adyen-checkout__input--error":u,"adyen-checkout__input--focus":l.focused,"adyen-checkout__input--valid":_,"adyen-checkout__card__cardNumber__input--noBrand":!l.showBrandIcon})}),l.showBrandIcon&&!f&&e(a,{brandsConfiguration:l.brandsConfiguration,brand:l.brand}),f&&!u&&e("div",{className:n(["adyen-checkout__card__dual-branding__buttons",{"adyen-checkout__card__dual-branding__buttons--active":_}])},f.map((n=>e(r,{key:n.id,brand:n.id,brandsConfiguration:l.brandsConfiguration,onClick:p,dataValue:n.id,notSelected:""!==b&&b!==n.id})))))}export{l as default};
+import{createElement as e}from"../../../../../external/preact/dist/preact.js";import n from"../../../../../external/classnames/index.js";import a from"./BrandIcon.js";import r from"./DualBrandingIcon/DualBrandingIcon.js";import d from"../../../../internal/FormFields/Field/Field.js";import{useCoreContext as o}from"../../../../../core/Context/CoreProvider.js";import i from"./DataSfSpan.js";import{ENCRYPTED_CARD_NUMBER as t}from"../../../../internal/SecuredFields/lib/constants.js";import{alternativeLabelContent as c}from"./IframeLabelAlternative.js";function l(l){const{i18n:s}=o(),{error:u="",isValid:_=!1,onFocusField:m=(()=>{}),dualBrandingElements:f,dualBrandingChangeHandler:p,dualBrandingSelected:b}=l;return e(d,{label:l.label,focused:l.focused,filled:l.filled,classNameModifiers:["cardNumber"],onFocusField:()=>m(t),errorMessage:u,isValid:_,dir:"ltr",name:t,showValidIcon:!1,i18n:s,contextVisibleToScreenReader:!1,useLabelElement:!1,renderAlternativeToLabel:c},e(i,{encryptedFieldType:t,className:n({"adyen-checkout__input":!0,"adyen-checkout__input--large":!0,"adyen-checkout__card__cardNumber__input":!0,"adyen-checkout__input--error":u,"adyen-checkout__input--focus":l.focused,"adyen-checkout__input--valid":_,"adyen-checkout__card__cardNumber__input--noBrand":!l.showBrandIcon})}),l.showBrandIcon&&!f&&e(a,{brandsConfiguration:l.brandsConfiguration,brand:l.brand}),f&&!u&&e("div",{className:n(["adyen-checkout__card__dual-branding__buttons",{"adyen-checkout__card__dual-branding__buttons--active":_}])},f.map((n=>e(r,{key:n.id,brand:n.id,brandsConfiguration:l.brandsConfiguration,onClick:p,dataValue:n.id,notSelected:""!==b&&b!==n.id})))))}export{l as default};
 //# sourceMappingURL=CardNumber.js.map

package/dist/es/components/Card/components/CardInput/components/CardNumber.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CardNumber.js","sources":["../../../../../../../src/components/Card/components/CardInput/components/CardNumber.tsx"],"sourcesContent":["import { h } from 'preact';\nimport classNames from 'classnames';\nimport BrandIcon from './BrandIcon';\nimport DualBrandingIcon from './DualBrandingIcon/DualBrandingIcon';\nimport Field from '../../../../internal/FormFields/Field';\nimport useCoreContext from '../../../../../core/Context/~~useCoreContext~~';\nimport { CardNumberProps } from './types';\nimport DataSfSpan from './DataSfSpan';\nimport { ENCRYPTED_CARD_NUMBER } from '../../../../internal/SecuredFields/lib/~~configuration/~~constants';\nimport { alternativeLabelContent } from './IframeLabelAlternative';\n\nexport default function CardNumber(props: CardNumberProps) {\n const { i18n } = useCoreContext();\n const { error = '', isValid = false, onFocusField = () => {}, dualBrandingElements, dualBrandingChangeHandler, dualBrandingSelected } = props;\n\n return (\n <Field\n label={props.label}\n focused={props.focused}\n filled={props.filled}\n classNameModifiers={['cardNumber']}\n onFocusField={() => onFocusField(ENCRYPTED_CARD_NUMBER)}\n errorMessage={error}\n isValid={isValid}\n dir={'ltr'}\n name={ENCRYPTED_CARD_NUMBER}\n showValidIcon={false}\n i18n={i18n}\n contextVisibleToScreenReader={false} // securedFields have their own, internal, aria-describedby element\n useLabelElement={false}\n renderAlternativeToLabel={alternativeLabelContent}\n >\n <DataSfSpan\n encryptedFieldType={ENCRYPTED_CARD_NUMBER}\n className={classNames({\n 'adyen-checkout__input': true,\n 'adyen-checkout__input--large': true,\n 'adyen-checkout__card__cardNumber__input': true,\n 'adyen-checkout__input--error': error,\n 'adyen-checkout__input--focus': props.focused,\n 'adyen-checkout__input--valid': isValid,\n 'adyen-checkout__card__cardNumber__input--noBrand': !props.showBrandIcon\n })}\n ></DataSfSpan>\n\n {props.showBrandIcon && !dualBrandingElements && <BrandIcon brandsConfiguration={props.brandsConfiguration} brand={props.brand} />}\n\n {dualBrandingElements && !error && (\n <div\n className={classNames([\n 'adyen-checkout__card__dual-branding__buttons',\n { 'adyen-checkout__card__dual-branding__buttons--active': isValid }\n ])}\n >\n {dualBrandingElements.map(element => (\n <DualBrandingIcon\n key={element.id}\n brand={element.id}\n brandsConfiguration={props.brandsConfiguration}\n onClick={dualBrandingChangeHandler}\n dataValue={element.id}\n notSelected={dualBrandingSelected !== '' && dualBrandingSelected !== element.id}\n />\n ))}\n </div>\n )}\n </Field>\n );\n}\n"],"names":["CardNumber","props","i18n","useCoreContext","error","isValid","onFocusField","dualBrandingElements","dualBrandingChangeHandler","dualBrandingSelected","h","Field","label","focused","filled","classNameModifiers","ENCRYPTED_CARD_NUMBER","errorMessage","dir","name","showValidIcon","contextVisibleToScreenReader","useLabelElement","renderAlternativeToLabel","alternativeLabelContent","DataSfSpan","encryptedFieldType","className","classNames","showBrandIcon","BrandIcon","brandsConfiguration","brand","div","map","element","DualBrandingIcon","key","id","onClick","dataValue","notSelected"],"mappings":"~~uiBAWe~~,SAASA,EAAWC,GAC/B,MAAMC,KAAEA,GAASC,KACXC,MAAEA,EAAQ,GAAEC,QAAEA,GAAU,EAAKC,aAAEA,EAAe,SAAQC,qBAAEA,EAAoBC,0BAAEA,EAAyBC,qBAAEA,GAAyBR,EAExI,OACIS,EAACC,EAAAA,CACGC,MAAOX,EAAMW,MACbC,QAASZ,EAAMY,QACfC,OAAQb,EAAMa,OACdC,mBAAoB,CAAC,cACrBT,aAAc,IAAMA,EAAaU,GACjCC,aAAcb,EACdC,QAASA,EACTa,IAAK,MACLC,KAAMH,EACNI,eAAe,EACflB,KAAMA,EACNmB,8BAA8B,EAC9BC,iBAAiB,EACjBC,yBAA0BC,GAE1Bd,EAACe,EAAAA,CACGC,mBAAoBV,EACpBW,UAAWC,EAAW,CAClB,yBAAyB,EACzB,gCAAgC,EAChC,2CAA2C,EAC3C,+BAAgCxB,EAChC,+BAAgCH,EAAMY,QACtC,+BAAgCR,EAChC,oDAAqDJ,EAAM4B,kBAIlE5B,EAAM4B,gBAAkBtB,GAAwBG,EAACoB,EAAAA,CAAUC,oBAAqB9B,EAAM8B,oBAAqBC,MAAO/B,EAAM+B,QAExHzB,IAAyBH,GACtBM,EAACuB,MAAAA,CACGN,UAAWC,EAAW,CAClB,+CACA,CAAE,uDAAwDvB,MAG7DE,EAAqB2B,KAAIC,GACtBzB,EAAC0B,EAAAA,CACGC,IAAKF,EAAQG,GACbN,MAAOG,EAAQG,GACfP,oBAAqB9B,EAAM8B,oBAC3BQ,QAAS/B,EACTgC,UAAWL,EAAQG,GACnBG,YAAsC,KAAzBhC,GAA+BA,IAAyB0B,EAAQG,QAOzG"}
1	+ {"version":3,"file":"CardNumber.js","sources":["../../../../../../../src/components/Card/components/CardInput/components/CardNumber.tsx"],"sourcesContent":["import { h } from 'preact';\nimport classNames from 'classnames';\nimport BrandIcon from './BrandIcon';\nimport DualBrandingIcon from './DualBrandingIcon/DualBrandingIcon';\nimport Field from '../../../../internal/FormFields/Field';\nimport { useCoreContext } from '../../../../../core/Context/CoreProvider';\nimport { CardNumberProps } from './types';\nimport DataSfSpan from './DataSfSpan';\nimport { ENCRYPTED_CARD_NUMBER } from '../../../../internal/SecuredFields/lib/constants';\nimport { alternativeLabelContent } from './IframeLabelAlternative';\n\nexport default function CardNumber(props: CardNumberProps) {\n const { i18n } = useCoreContext();\n const { error = '', isValid = false, onFocusField = () => {}, dualBrandingElements, dualBrandingChangeHandler, dualBrandingSelected } = props;\n\n return (\n <Field\n label={props.label}\n focused={props.focused}\n filled={props.filled}\n classNameModifiers={['cardNumber']}\n onFocusField={() => onFocusField(ENCRYPTED_CARD_NUMBER)}\n errorMessage={error}\n isValid={isValid}\n dir={'ltr'}\n name={ENCRYPTED_CARD_NUMBER}\n showValidIcon={false}\n i18n={i18n}\n contextVisibleToScreenReader={false} // securedFields have their own, internal, aria-describedby element\n useLabelElement={false}\n renderAlternativeToLabel={alternativeLabelContent}\n >\n <DataSfSpan\n encryptedFieldType={ENCRYPTED_CARD_NUMBER}\n className={classNames({\n 'adyen-checkout__input': true,\n 'adyen-checkout__input--large': true,\n 'adyen-checkout__card__cardNumber__input': true,\n 'adyen-checkout__input--error': error,\n 'adyen-checkout__input--focus': props.focused,\n 'adyen-checkout__input--valid': isValid,\n 'adyen-checkout__card__cardNumber__input--noBrand': !props.showBrandIcon\n })}\n ></DataSfSpan>\n\n {props.showBrandIcon && !dualBrandingElements && <BrandIcon brandsConfiguration={props.brandsConfiguration} brand={props.brand} />}\n\n {dualBrandingElements && !error && (\n <div\n className={classNames([\n 'adyen-checkout__card__dual-branding__buttons',\n { 'adyen-checkout__card__dual-branding__buttons--active': isValid }\n ])}\n >\n {dualBrandingElements.map(element => (\n <DualBrandingIcon\n key={element.id}\n brand={element.id}\n brandsConfiguration={props.brandsConfiguration}\n onClick={dualBrandingChangeHandler}\n dataValue={element.id}\n notSelected={dualBrandingSelected !== '' && dualBrandingSelected !== element.id}\n />\n ))}\n </div>\n )}\n </Field>\n );\n}\n"],"names":["CardNumber","props","i18n","useCoreContext","error","isValid","onFocusField","dualBrandingElements","dualBrandingChangeHandler","dualBrandingSelected","h","Field","label","focused","filled","classNameModifiers","ENCRYPTED_CARD_NUMBER","errorMessage","dir","name","showValidIcon","contextVisibleToScreenReader","useLabelElement","renderAlternativeToLabel","alternativeLabelContent","DataSfSpan","encryptedFieldType","className","classNames","showBrandIcon","BrandIcon","brandsConfiguration","brand","div","map","element","DualBrandingIcon","key","id","onClick","dataValue","notSelected"],"mappings":"yiBAWe,SAASA,EAAWC,GAC/B,MAAMC,KAAEA,GAASC,KACXC,MAAEA,EAAQ,GAAEC,QAAEA,GAAU,EAAKC,aAAEA,EAAe,SAAQC,qBAAEA,EAAoBC,0BAAEA,EAAyBC,qBAAEA,GAAyBR,EAExI,OACIS,EAACC,EAAAA,CACGC,MAAOX,EAAMW,MACbC,QAASZ,EAAMY,QACfC,OAAQb,EAAMa,OACdC,mBAAoB,CAAC,cACrBT,aAAc,IAAMA,EAAaU,GACjCC,aAAcb,EACdC,QAASA,EACTa,IAAK,MACLC,KAAMH,EACNI,eAAe,EACflB,KAAMA,EACNmB,8BAA8B,EAC9BC,iBAAiB,EACjBC,yBAA0BC,GAE1Bd,EAACe,EAAAA,CACGC,mBAAoBV,EACpBW,UAAWC,EAAW,CAClB,yBAAyB,EACzB,gCAAgC,EAChC,2CAA2C,EAC3C,+BAAgCxB,EAChC,+BAAgCH,EAAMY,QACtC,+BAAgCR,EAChC,oDAAqDJ,EAAM4B,kBAIlE5B,EAAM4B,gBAAkBtB,GAAwBG,EAACoB,EAAAA,CAAUC,oBAAqB9B,EAAM8B,oBAAqBC,MAAO/B,EAAM+B,QAExHzB,IAAyBH,GACtBM,EAACuB,MAAAA,CACGN,UAAWC,EAAW,CAClB,+CACA,CAAE,uDAAwDvB,MAG7DE,EAAqB2B,KAAIC,GACtBzB,EAAC0B,EAAAA,CACGC,IAAKF,EAAQG,GACbN,MAAOG,EAAQG,GACfP,oBAAqB9B,EAAM8B,oBAC3BQ,QAAS/B,EACTgC,UAAWL,EAAQG,GACnBG,YAAsC,KAAzBhC,GAA+BA,IAAyB0B,EAAQG,QAOzG"}

package/dist/es/components/Card/components/CardInput/components/DataSfSpan.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{createElement as e}from"../../../../../external/preact/dist/preact.js";import{DATA_ENCRYPTED_FIELD_ATTR as t,DATA_INFO as a,DATA_UID as n}from"../../../../internal/SecuredFields/lib/configuration/constants.js";function r(r){const s={[t]:r.encryptedFieldType,[a]:r["data-info"],[n]:r.uniqueId,className:r.className};return e("span",s,r.children)}export{r as default};
+import{createElement as e}from"../../../../../external/preact/dist/preact.js";import{DATA_ENCRYPTED_FIELD_ATTR as t,DATA_INFO as a,DATA_UID as n}from"../../../../internal/SecuredFields/lib/constants.js";function r(r){const s={[t]:r.encryptedFieldType,[a]:r["data-info"],[n]:r.uniqueId,className:r.className};return e("span",s,r.children)}export{r as default};
 //# sourceMappingURL=DataSfSpan.js.map

package/dist/es/components/Card/components/CardInput/components/DataSfSpan.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DataSfSpan.js","sources":["../../../../../../../src/components/Card/components/CardInput/components/DataSfSpan.tsx"],"sourcesContent":["import { h } from 'preact';\nimport { DATA_ENCRYPTED_FIELD_ATTR, DATA_INFO, DATA_UID } from '../../../../internal/SecuredFields/lib/~~configuration/~~constants';\nimport { SfSpanProps } from './types';\n\n/*\n Extract the relevant props and write them as attributes to the span that will contain the securedFields iframe\n * Specifically exists to make the uniqueId created by the Field comp accessible to the SFP via a data-uid attr\n */\nexport default function DataSfSpan(props: SfSpanProps) {\n const opts = {\n [DATA_ENCRYPTED_FIELD_ATTR]: props.encryptedFieldType,\n [DATA_INFO]: props['data-info'],\n [DATA_UID]: props.uniqueId,\n className: props.className\n };\n return <span {...opts}>{props.children}</span>;\n}\n"],"names":["DataSfSpan","props","opts","DATA_ENCRYPTED_FIELD_ATTR","encryptedFieldType","DATA_INFO","DATA_UID","uniqueId","className","h","span","children"],"mappings":"~~yNAQe~~,SAASA,EAAWC,GAC/B,MAAMC,EAAO,CACTC,CAACA,GAA4BF,EAAMG,mBACnCC,CAACA,GAAYJ,EAAM,aACnBK,CAACA,GAAWL,EAAMM,SAClBC,UAAWP,EAAMO,WAErB,OAAOC,EAACC,OAASR,EAAOD,EAAMU,SAClC"}
1	+ {"version":3,"file":"DataSfSpan.js","sources":["../../../../../../../src/components/Card/components/CardInput/components/DataSfSpan.tsx"],"sourcesContent":["import { h } from 'preact';\nimport { DATA_ENCRYPTED_FIELD_ATTR, DATA_INFO, DATA_UID } from '../../../../internal/SecuredFields/lib/constants';\nimport { SfSpanProps } from './types';\n\n/*\n Extract the relevant props and write them as attributes to the span that will contain the securedFields iframe\n * Specifically exists to make the uniqueId created by the Field comp accessible to the SFP via a data-uid attr\n */\nexport default function DataSfSpan(props: SfSpanProps) {\n const opts = {\n [DATA_ENCRYPTED_FIELD_ATTR]: props.encryptedFieldType,\n [DATA_INFO]: props['data-info'],\n [DATA_UID]: props.uniqueId,\n className: props.className\n };\n return <span {...opts}>{props.children}</span>;\n}\n"],"names":["DataSfSpan","props","opts","DATA_ENCRYPTED_FIELD_ATTR","encryptedFieldType","DATA_INFO","DATA_UID","uniqueId","className","h","span","children"],"mappings":"2MAQe,SAASA,EAAWC,GAC/B,MAAMC,EAAO,CACTC,CAACA,GAA4BF,EAAMG,mBACnCC,CAACA,GAAYJ,EAAM,aACnBK,CAACA,GAAWL,EAAMM,SAClBC,UAAWP,EAAMO,WAErB,OAAOC,EAACC,OAASR,EAAOD,EAAMU,SAClC"}

package/dist/es/components/Card/components/CardInput/components/ExpirationDate.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{createElement as e}from"../../../../../external/preact/dist/preact.js";import t from"../../../../../external/classnames/index.js";import a from"../../../../internal/FormFields/Field/Field.js";import n from"../../../../../core/Context/useCoreContext.js";import o from"./DataSfSpan.js";import{DATE_POLICY_HIDDEN as i,DATE_POLICY_OPTIONAL as r,ENCRYPTED_EXPIRY_DATE as l,DATE_POLICY_REQUIRED as c}from"../../../../internal/SecuredFields/lib/configuration/constants.js";import d from"../../../../../core/Context/useImage.js";import{alternativeLabelContent as s}from"./IframeLabelAlternative.js";function _(_){const{label:p,focused:u,filled:m,onFocusField:f,className:x="",error:h="",isValid:y=!1,expiryDatePolicy:k=c,showContextualElement:F,contextualText:j}=_,{i18n:b}=n(),g=d(),C=t(x,{"adyen-checkout__field__exp-date":!0,"adyen-checkout__card__exp-date__input--hidden":k===i,"adyen-checkout__field__exp-date--optional":k===r}),N=k!==r?p:`${p} ${b.get("field.title.optional")}`;return e(a,{label:N,classNameModifiers:["expiryDate"],className:C,focused:u,filled:m,onFocusField:()=>f(l),errorMessage:h,isValid:y,dir:"ltr",name:"encryptedExpiryDate",i18n:b,contextVisibleToScreenReader:!1,useLabelElement:!1,renderAlternativeToLabel:s,showContextualElement:F,contextualText:j},e(o,{encryptedFieldType:l,className:t("adyen-checkout__input","adyen-checkout__input--small","adyen-checkout__card__exp-date__input",{"adyen-checkout__input--error":h,"adyen-checkout__input--focus":u,"adyen-checkout__input--valid":y})}),e("span",{className:t("adyen-checkout__field__exp-date_hint_wrapper",{"adyen-checkout__field__exp-date_hint_wrapper--hidden":h||y})},e("img",{src:g({imageFolder:"components/"})("expiry_date_hint"),className:"adyen-checkout__field__exp-date_hint",alt:N})))}export{_ as default};
+import{createElement as e}from"../../../../../external/preact/dist/preact.js";import t from"../../../../../external/classnames/index.js";import a from"../../../../internal/FormFields/Field/Field.js";import{useCoreContext as i}from"../../../../../core/Context/CoreProvider.js";import n from"./DataSfSpan.js";import{DATE_POLICY_HIDDEN as o,DATE_POLICY_OPTIONAL as r,ENCRYPTED_EXPIRY_DATE as l,DATE_POLICY_REQUIRED as d}from"../../../../internal/SecuredFields/lib/constants.js";import c from"../../../../../core/Context/useImage.js";import{alternativeLabelContent as s}from"./IframeLabelAlternative.js";function _(_){const{label:p,focused:m,filled:u,onFocusField:f,className:x="",error:h="",isValid:y=!1,expiryDatePolicy:k=d,showContextualElement:F,contextualText:j}=_,{i18n:b}=i(),N=c(),g=t(x,{"adyen-checkout__field__exp-date":!0,"adyen-checkout__card__exp-date__input--hidden":k===o,"adyen-checkout__field__exp-date--optional":k===r}),C=k!==r?p:`${p} ${b.get("field.title.optional")}`;return e(a,{label:C,classNameModifiers:["expiryDate"],className:g,focused:m,filled:u,onFocusField:()=>f(l),errorMessage:h,isValid:y,dir:"ltr",name:"encryptedExpiryDate",i18n:b,contextVisibleToScreenReader:!1,useLabelElement:!1,renderAlternativeToLabel:s,showContextualElement:F,contextualText:j},e(n,{encryptedFieldType:l,className:t("adyen-checkout__input","adyen-checkout__input--small","adyen-checkout__card__exp-date__input",{"adyen-checkout__input--error":h,"adyen-checkout__input--focus":m,"adyen-checkout__input--valid":y})}),e("span",{className:t("adyen-checkout__field__exp-date_hint_wrapper",{"adyen-checkout__field__exp-date_hint_wrapper--hidden":h||y})},e("img",{src:N({imageFolder:"components/"})("expiry_date_hint"),className:"adyen-checkout__field__exp-date_hint",alt:C})))}export{_ as default};
 //# sourceMappingURL=ExpirationDate.js.map

package/dist/es/components/Card/components/CardInput/components/ExpirationDate.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ExpirationDate.js","sources":["../../../../../../../src/components/Card/components/CardInput/components/ExpirationDate.tsx"],"sourcesContent":["import { h } from 'preact';\nimport classNames from 'classnames';\nimport Field from '../../../../internal/FormFields/Field';\nimport useCoreContext from '../../../../../core/Context/~~useCoreContext~~';\nimport { ExpirationDateProps } from './types';\nimport DataSfSpan from './DataSfSpan';\n\nimport {\n DATE_POLICY_HIDDEN,\n DATE_POLICY_OPTIONAL,\n DATE_POLICY_REQUIRED,\n ENCRYPTED_EXPIRY_DATE\n} from '../../../../internal/SecuredFields/lib/~~configuration/~~constants';\nimport useImage from '../../../../../core/Context/useImage';\nimport { alternativeLabelContent } from './IframeLabelAlternative';\n\nexport default function ExpirationDate(props: ExpirationDateProps) {\n const {\n label,\n focused,\n filled,\n onFocusField,\n className = '',\n error = '',\n isValid = false,\n expiryDatePolicy = DATE_POLICY_REQUIRED,\n showContextualElement,\n contextualText\n } = props;\n const { i18n } = useCoreContext();\n const getImage = useImage();\n\n const fieldClassnames = classNames(className, {\n 'adyen-checkout__field__exp-date': true,\n 'adyen-checkout__card__exp-date__input--hidden': expiryDatePolicy === DATE_POLICY_HIDDEN,\n 'adyen-checkout__field__exp-date--optional': expiryDatePolicy === DATE_POLICY_OPTIONAL\n });\n\n const fieldLabel = expiryDatePolicy !== DATE_POLICY_OPTIONAL ? label : `${label} ${i18n.get('field.title.optional')}`;\n\n return (\n <Field\n label={fieldLabel}\n classNameModifiers={['expiryDate']}\n className={fieldClassnames}\n focused={focused}\n filled={filled}\n onFocusField={() => onFocusField(ENCRYPTED_EXPIRY_DATE)}\n errorMessage={error}\n isValid={isValid}\n dir={'ltr'}\n name={'encryptedExpiryDate'}\n i18n={i18n}\n contextVisibleToScreenReader={false}\n useLabelElement={false}\n renderAlternativeToLabel={alternativeLabelContent}\n showContextualElement={showContextualElement}\n contextualText={contextualText}\n >\n <DataSfSpan\n encryptedFieldType={ENCRYPTED_EXPIRY_DATE}\n className={classNames('adyen-checkout__input', 'adyen-checkout__input--small', 'adyen-checkout__card__exp-date__input', {\n 'adyen-checkout__input--error': error,\n 'adyen-checkout__input--focus': focused,\n 'adyen-checkout__input--valid': isValid\n })}\n />\n <span\n className={classNames('adyen-checkout__field__exp-date_hint_wrapper', {\n 'adyen-checkout__field__exp-date_hint_wrapper--hidden': error \|\| isValid\n })}\n >\n <img\n src={getImage({ imageFolder: 'components/' })('expiry_date_hint')}\n className=\"adyen-checkout__field__exp-date_hint\"\n alt={fieldLabel}\n />\n </span>\n </Field>\n );\n}\n"],"names":["ExpirationDate","props","label","focused","filled","onFocusField","className","error","isValid","expiryDatePolicy","DATE_POLICY_REQUIRED","showContextualElement","contextualText","i18n","useCoreContext","getImage","useImage","fieldClassnames","classNames","DATE_POLICY_HIDDEN","DATE_POLICY_OPTIONAL","fieldLabel","get","h","Field","classNameModifiers","ENCRYPTED_EXPIRY_DATE","errorMessage","dir","name","contextVisibleToScreenReader","useLabelElement","renderAlternativeToLabel","alternativeLabelContent","DataSfSpan","encryptedFieldType","span","img","src","imageFolder","alt"],"mappings":"~~slBAgBe~~,SAASA,EAAeC,GACnC,MAAMC,MACFA,EAAKC,QACLA,EAAOC,OACPA,EAAMC,aACNA,EAAYC,UACZA,EAAY,GAAEC,MACdA,EAAQ,GAAEC,QACVA,GAAU,EAAKC,iBACfA,EAAmBC,EAAoBC,sBACvCA,EAAqBC,eACrBA,GACAX,GACEY,KAAEA,GAASC,IACXC,EAAWC,IAEXC,EAAkBC,EAAWZ,EAAW,CAC1C,mCAAmC,EACnC,gDAAiDG,IAAqBU,EACtE,4CAA6CV,IAAqBW,IAGhEC,EAAaZ,IAAqBW,EAAuBlB,EAAQ,GAAGA,KAASW,EAAKS,IAAI,0BAE5F,OACIC,EAACC,EAAAA,CACGtB,MAAOmB,EACPI,mBAAoB,CAAC,cACrBnB,UAAWW,EACXd,QAASA,EACTC,OAAQA,EACRC,aAAc,IAAMA,EAAaqB,GACjCC,aAAcpB,EACdC,QAASA,EACToB,IAAK,MACLC,KAAM,sBACNhB,KAAMA,EACNiB,8BAA8B,EAC9BC,iBAAiB,EACjBC,yBAA0BC,EAC1BtB,sBAAuBA,EACvBC,eAAgBA,GAEhBW,EAACW,EAAAA,CACGC,mBAAoBT,EACpBpB,UAAWY,EAAW,wBAAyB,+BAAgC,wCAAyC,CACpH,+BAAgCX,EAChC,+BAAgCJ,EAChC,+BAAgCK,MAGxCe,EAACa,OAAAA,CACG9B,UAAWY,EAAW,+CAAgD,CAClE,uDAAwDX,GAASC,KAGrEe,EAACc,MAAAA,CACGC,IAAKvB,EAAS,CAAEwB,YAAa,eAAxBxB,CAAyC,oBAC9CT,UAAU,uCACVkC,IAAKnB,KAKzB"}
1	+ {"version":3,"file":"ExpirationDate.js","sources":["../../../../../../../src/components/Card/components/CardInput/components/ExpirationDate.tsx"],"sourcesContent":["import { h } from 'preact';\nimport classNames from 'classnames';\nimport Field from '../../../../internal/FormFields/Field';\nimport { useCoreContext } from '../../../../../core/Context/CoreProvider';\nimport { ExpirationDateProps } from './types';\nimport DataSfSpan from './DataSfSpan';\n\nimport {\n DATE_POLICY_HIDDEN,\n DATE_POLICY_OPTIONAL,\n DATE_POLICY_REQUIRED,\n ENCRYPTED_EXPIRY_DATE\n} from '../../../../internal/SecuredFields/lib/constants';\nimport useImage from '../../../../../core/Context/useImage';\nimport { alternativeLabelContent } from './IframeLabelAlternative';\n\nexport default function ExpirationDate(props: ExpirationDateProps) {\n const {\n label,\n focused,\n filled,\n onFocusField,\n className = '',\n error = '',\n isValid = false,\n expiryDatePolicy = DATE_POLICY_REQUIRED,\n showContextualElement,\n contextualText\n } = props;\n const { i18n } = useCoreContext();\n const getImage = useImage();\n\n const fieldClassnames = classNames(className, {\n 'adyen-checkout__field__exp-date': true,\n 'adyen-checkout__card__exp-date__input--hidden': expiryDatePolicy === DATE_POLICY_HIDDEN,\n 'adyen-checkout__field__exp-date--optional': expiryDatePolicy === DATE_POLICY_OPTIONAL\n });\n\n const fieldLabel = expiryDatePolicy !== DATE_POLICY_OPTIONAL ? label : `${label} ${i18n.get('field.title.optional')}`;\n\n return (\n <Field\n label={fieldLabel}\n classNameModifiers={['expiryDate']}\n className={fieldClassnames}\n focused={focused}\n filled={filled}\n onFocusField={() => onFocusField(ENCRYPTED_EXPIRY_DATE)}\n errorMessage={error}\n isValid={isValid}\n dir={'ltr'}\n name={'encryptedExpiryDate'}\n i18n={i18n}\n contextVisibleToScreenReader={false}\n useLabelElement={false}\n renderAlternativeToLabel={alternativeLabelContent}\n showContextualElement={showContextualElement}\n contextualText={contextualText}\n >\n <DataSfSpan\n encryptedFieldType={ENCRYPTED_EXPIRY_DATE}\n className={classNames('adyen-checkout__input', 'adyen-checkout__input--small', 'adyen-checkout__card__exp-date__input', {\n 'adyen-checkout__input--error': error,\n 'adyen-checkout__input--focus': focused,\n 'adyen-checkout__input--valid': isValid\n })}\n />\n <span\n className={classNames('adyen-checkout__field__exp-date_hint_wrapper', {\n 'adyen-checkout__field__exp-date_hint_wrapper--hidden': error \|\| isValid\n })}\n >\n <img\n src={getImage({ imageFolder: 'components/' })('expiry_date_hint')}\n className=\"adyen-checkout__field__exp-date_hint\"\n alt={fieldLabel}\n />\n </span>\n </Field>\n );\n}\n"],"names":["ExpirationDate","props","label","focused","filled","onFocusField","className","error","isValid","expiryDatePolicy","DATE_POLICY_REQUIRED","showContextualElement","contextualText","i18n","useCoreContext","getImage","useImage","fieldClassnames","classNames","DATE_POLICY_HIDDEN","DATE_POLICY_OPTIONAL","fieldLabel","get","h","Field","classNameModifiers","ENCRYPTED_EXPIRY_DATE","errorMessage","dir","name","contextVisibleToScreenReader","useLabelElement","renderAlternativeToLabel","alternativeLabelContent","DataSfSpan","encryptedFieldType","span","img","src","imageFolder","alt"],"mappings":"wlBAgBe,SAASA,EAAeC,GACnC,MAAMC,MACFA,EAAKC,QACLA,EAAOC,OACPA,EAAMC,aACNA,EAAYC,UACZA,EAAY,GAAEC,MACdA,EAAQ,GAAEC,QACVA,GAAU,EAAKC,iBACfA,EAAmBC,EAAoBC,sBACvCA,EAAqBC,eACrBA,GACAX,GACEY,KAAEA,GAASC,IACXC,EAAWC,IAEXC,EAAkBC,EAAWZ,EAAW,CAC1C,mCAAmC,EACnC,gDAAiDG,IAAqBU,EACtE,4CAA6CV,IAAqBW,IAGhEC,EAAaZ,IAAqBW,EAAuBlB,EAAQ,GAAGA,KAASW,EAAKS,IAAI,0BAE5F,OACIC,EAACC,EAAAA,CACGtB,MAAOmB,EACPI,mBAAoB,CAAC,cACrBnB,UAAWW,EACXd,QAASA,EACTC,OAAQA,EACRC,aAAc,IAAMA,EAAaqB,GACjCC,aAAcpB,EACdC,QAASA,EACToB,IAAK,MACLC,KAAM,sBACNhB,KAAMA,EACNiB,8BAA8B,EAC9BC,iBAAiB,EACjBC,yBAA0BC,EAC1BtB,sBAAuBA,EACvBC,eAAgBA,GAEhBW,EAACW,EAAAA,CACGC,mBAAoBT,EACpBpB,UAAWY,EAAW,wBAAyB,+BAAgC,wCAAyC,CACpH,+BAAgCX,EAChC,+BAAgCJ,EAChC,+BAAgCK,MAGxCe,EAACa,OAAAA,CACG9B,UAAWY,EAAW,+CAAgD,CAClE,uDAAwDX,GAASC,KAGrEe,EAACc,MAAAA,CACGC,IAAKvB,EAAS,CAAEwB,YAAa,eAAxBxB,CAAyC,oBAC9CT,UAAU,uCACVkC,IAAKnB,KAKzB"}

package/dist/es/components/Card/components/CardInput/components/Installments/Installments.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{createElement as e}from"../../../../../../external/preact/dist/preact.js";import{useState as l,useEffect as n}from"../../../../../../external/preact/hooks/dist/hooks.js";import t from"../../../../../internal/FormFields/Field/Field.js";import a from"../../../../../../core/Context/useCoreContext.js";import s from"../../../../../internal/FormFields/Fieldset/Fieldset.js";import i from"../../../../../internal/FormFields/RadioGroup/RadioGroup.js";import o from"../../../../../internal/FormFields/Select/Select.js";function r(r){const{i18n:m}=a(),{amount:u,brand:d,onChange:v,type:c}=r,p=r.installmentOptions[d]||r.installmentOptions.card,g=1===p?.values?.length,[f,b]=l(p?.preselectedValue||p?.values[0]),[h,F]=l("onetime"),C=p?.plans?.includes("revolving"),E=e=>{const l=e.target.value;b(Number(l))},j=e=>{const l=e.currentTarget.getAttribute("value");F(l)},N=e=>{let l,n;var t;return"amount"===c?(l="installmentOption",n={count:e,values:{times:e,partialValue:(t=e,m.amount(u.value/t,u.currency))}}):(l="installmentOptionMonths",n={count:e,values:{times:e}}),{id:e,name:u.value?m.get(l,n):`${e}`}};return n((()=>{p?.values?.includes(f)||b(p?.preselectedValue??p?.values[0])}),[d]),n((()=>{const e={value:f,...C&&"revolving"===h&&{plan:h,value:1},...C&&"onetime"===h&&{value:1}};v(p?e:{value:null})}),[f,p,h]),p?0===u.value?null:e("div",{className:"adyen-checkout__installments"},C?e(s,{classNameModifiers:["revolving-plan"],label:""},e(i,{items:[{id:"onetime",name:"installments.oneTime"},{id:"installments",name:"installments.installments"},{id:"revolving",name:"installments.revolving"}],onChange:j,value:h}),e(t,{className:"installments"!==h?"revolving-plan-installments__disabled":"revolving-plan-installments",classNameModifiers:["revolving-plan-installments"],name:"",useLabelElement:!1,showErrorElement:!1},e(o,{filterable:!1,items:p.values.map(N),selectedValue:f,onChange:E,name:"installments",disabled:"installments"!==h}))):e(t,{label:m.get("installments"),classNameModifiers:["installments"],name:"",useLabelElement:!1,showErrorElement:!1,readOnly:g},e(o,{filterable:!1,items:p.values.map(N),selectedValue:f,onChange:E,name:"installments",readonly:g}))):null}r.defaultProps={brand:"",amount:{},onChange:()=>{}};export{r as default};
+import{createElement as e}from"../../../../../../external/preact/dist/preact.js";import{useState as l,useEffect as n}from"../../../../../../external/preact/hooks/dist/hooks.js";import t from"../../../../../internal/FormFields/Field/Field.js";import{useCoreContext as a}from"../../../../../../core/Context/CoreProvider.js";import s from"../../../../../internal/FormFields/Fieldset/Fieldset.js";import i from"../../../../../internal/FormFields/RadioGroup/RadioGroup.js";import r from"../../../../../internal/FormFields/Select/Select.js";function o(o){const{i18n:m}=a(),{amount:u,brand:d,onChange:v,type:c}=o,p=o.installmentOptions[d]||o.installmentOptions.card,g=1===p?.values?.length,[f,b]=l(p?.preselectedValue||p?.values[0]),[h,F]=l("onetime"),E=p?.plans?.includes("revolving"),j=e=>{const l=e.target.value;b(Number(l))},C=e=>{const l=e.currentTarget.getAttribute("value");F(l)},N=e=>{let l,n;var t;return"amount"===c?(l="installmentOption",n={count:e,values:{times:e,partialValue:(t=e,m.amount(u.value/t,u.currency))}}):(l="installmentOptionMonths",n={count:e,values:{times:e}}),{id:e,name:u.value?m.get(l,n):`${e}`}};return n((()=>{p?.values?.includes(f)||b(p?.preselectedValue??p?.values[0])}),[d]),n((()=>{const e={value:f,...E&&"revolving"===h&&{plan:h,value:1},...E&&"onetime"===h&&{value:1}};v(p?e:{value:null})}),[f,p,h]),p?0===u.value?null:e("div",{className:"adyen-checkout__installments"},E?e(s,{classNameModifiers:["revolving-plan"],label:""},e(i,{items:[{id:"onetime",name:"installments.oneTime"},{id:"installments",name:"installments.installments"},{id:"revolving",name:"installments.revolving"}],onChange:C,value:h}),e(t,{className:"installments"!==h?"revolving-plan-installments__disabled":"revolving-plan-installments",classNameModifiers:["revolving-plan-installments"],name:"",useLabelElement:!1,showErrorElement:!1},e(r,{filterable:!1,items:p.values.map(N),selectedValue:f,onChange:j,name:"installments",disabled:"installments"!==h}))):e(t,{label:m.get("installments"),classNameModifiers:["installments"],name:"",useLabelElement:!1,showErrorElement:!1,readOnly:g},e(r,{filterable:!1,items:p.values.map(N),selectedValue:f,onChange:j,name:"installments",readonly:g}))):null}o.defaultProps={brand:"",amount:{},onChange:()=>{}};export{o as default};
 //# sourceMappingURL=Installments.js.map

package/dist/es/components/Card/components/CardInput/components/Installments/Installments.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Installments.js","sources":["../../../../../../../../src/components/Card/components/CardInput/components/Installments/Installments.tsx"],"sourcesContent":["import { h } from 'preact';\nimport { useState, useEffect } from 'preact/hooks';\nimport Field from '../../../../../internal/FormFields/Field';\nimport useCoreContext from '../../../../../../core/Context/~~useCoreContext~~';\nimport { InstallmentsItem, InstallmentsProps } from '../types';\nimport Fieldset from '../../../../../internal/FormFields/Fieldset/Fieldset';\nimport RadioGroup from '../../../../../internal/FormFields/RadioGroup';\nimport Select from '../../../../../internal/FormFields/Select';\n\nexport interface InstallmentsObj {\n value: number;\n plan?: 'revolving';\n}\n\n/*\n Installments generic dropdown\n */\nfunction Installments(props: InstallmentsProps) {\n const { i18n } = useCoreContext();\n const { amount, brand, onChange, type } = props;\n const installmentOptions = props.installmentOptions[brand] \|\| props.installmentOptions.card;\n const readOnly = installmentOptions?.values?.length === 1;\n const [installmentAmount, setInstallmentAmount] = useState(installmentOptions?.preselectedValue \|\| installmentOptions?.values[0]);\n const [radioBtnValue, setRadioBtnValue] = useState('onetime');\n\n // hasRadioButtonUI determines if we have 3 radio buttons in the UI ('onetime', 'installments' and 'revolving')\n const hasRadioButtonUI = installmentOptions?.plans?.includes('revolving');\n const getPartialAmount = (divider: number): string => i18n.amount(amount.value / divider, amount.currency);\n\n const onSelectInstallment = e => {\n const selectedInstallments = e.target.value;\n setInstallmentAmount(Number(selectedInstallments));\n };\n\n const onRadioSelect = e => {\n const selectedBtn = e.currentTarget.getAttribute('value');\n setRadioBtnValue(selectedBtn);\n };\n\n const installmentItemsMapper = (value: number): InstallmentsItem => {\n let translationKey;\n let translationObj;\n\n if (type === 'amount') {\n translationKey = 'installmentOption';\n translationObj = { count: value, values: { times: value, partialValue: getPartialAmount(value) } };\n } else {\n translationKey = `installmentOptionMonths`;\n translationObj = { count: value, values: { times: value } };\n }\n\n return {\n id: value,\n name: amount.value ? i18n.get(translationKey, translationObj) : `${value}`\n };\n };\n\n useEffect(() => {\n if (installmentOptions?.values?.includes(installmentAmount)) {\n return;\n }\n\n setInstallmentAmount(installmentOptions?.preselectedValue ?? installmentOptions?.values[0]);\n }, [brand]);\n\n useEffect(() => {\n const stateObj: InstallmentsObj = {\n value: installmentAmount, // No radio button interface or \"installments\" radio button selected\n ...(hasRadioButtonUI && radioBtnValue === 'revolving' && { plan: radioBtnValue, value: 1 }),\n ...(hasRadioButtonUI && radioBtnValue === 'onetime' && { value: 1 })\n };\n\n onChange(installmentOptions ? stateObj : { value: null });\n }, [installmentAmount, installmentOptions, radioBtnValue]);\n\n if (!installmentOptions) return null;\n if (amount.value === 0) return null;\n\n // Alternate interface for installments with the possibility of a \"revolving\" plan\n if (hasRadioButtonUI) {\n return (\n <div className=\"adyen-checkout__installments\">\n <Fieldset classNameModifiers={['revolving-plan']} label={''}>\n <RadioGroup\n items={[\n { id: 'onetime', name: 'installments.oneTime' },\n { id: 'installments', name: 'installments.installments' },\n { id: 'revolving', name: 'installments.revolving' }\n ]}\n onChange={onRadioSelect}\n value={radioBtnValue}\n />\n\n <Field\n className={radioBtnValue !== 'installments' ? 'revolving-plan-installments__disabled' : 'revolving-plan-installments'}\n classNameModifiers={['revolving-plan-installments']}\n name={''}\n useLabelElement={false}\n showErrorElement={false}\n >\n <Select\n filterable={false}\n items={installmentOptions.values.map(installmentItemsMapper)}\n selectedValue={installmentAmount}\n onChange={onSelectInstallment}\n name={'installments'}\n disabled={radioBtnValue !== 'installments'}\n />\n </Field>\n </Fieldset>\n </div>\n );\n }\n\n return (\n <div className=\"adyen-checkout__installments\">\n <Field\n label={i18n.get('installments')}\n classNameModifiers={['installments']}\n name={''}\n useLabelElement={false}\n showErrorElement={false}\n readOnly={readOnly}\n >\n <Select\n filterable={false}\n items={installmentOptions.values.map(installmentItemsMapper)}\n selectedValue={installmentAmount}\n onChange={onSelectInstallment}\n name={'installments'}\n readonly={readOnly}\n />\n </Field>\n </div>\n );\n}\n\nInstallments.defaultProps = {\n brand: '',\n amount: {},\n onChange: () => {}\n};\n\nexport default Installments;\n"],"names":["Installments","props","i18n","useCoreContext","amount","brand","onChange","type","installmentOptions","card","readOnly","values","length","installmentAmount","setInstallmentAmount","useState","preselectedValue","radioBtnValue","setRadioBtnValue","hasRadioButtonUI","plans","includes","onSelectInstallment","e","selectedInstallments","target","value","Number","onRadioSelect","selectedBtn","currentTarget","getAttribute","installmentItemsMapper","translationKey","translationObj","divider","count","times","partialValue","currency","id","name","get","useEffect","stateObj","plan","h","div","className","Fieldset","classNameModifiers","label","RadioGroup","items","Field","useLabelElement","showErrorElement","Select","filterable","map","selectedValue","disabled","readonly","defaultProps"],"mappings":"~~ugBAiBA~~,SAASA,EAAaC,GAClB,MAAMC,KAAEA,GAASC,KACXC,OAAEA,EAAMC,MAAEA,EAAKC,SAAEA,EAAQC,KAAEA,GAASN,EACpCO,EAAqBP,EAAMO,mBAAmBH,IAAUJ,EAAMO,mBAAmBC,KACjFC,EAAkD,IAAvCF,GAAoBG,QAAQC,QACtCC,EAAmBC,GAAwBC,EAASP,GAAoBQ,kBAAoBR,GAAoBG,OAAO,KACvHM,EAAeC,GAAoBH,EAAS,WAG7CI,EAAmBX,GAAoBY,OAAOC,SAAS,aAGvDC,EAAsBC,IACxB,MAAMC,EAAuBD,EAAEE,OAAOC,MACtCZ,EAAqBa,OAAOH,GAAAA,EAG1BI,EAAgBL,IAClB,MAAMM,EAAcN,EAAEO,cAAcC,aAAa,SACjDb,EAAiBW,EAAAA,EAGfG,EAA0BN,IAC5B,IAAIO,EACAC,EAdiB,IAACC,EAwBtB,MARa,WAAT5B,GACA0B,EAAiB,oBACjBC,EAAiB,CAAEE,MAAOV,EAAOf,OAAQ,CAAE0B,MAAOX,EAAOY,cAlBvCH,EAkBsET,EAlB1CxB,EAAKE,OAAOA,EAAOsB,MAAQS,EAAS/B,EAAOmC,eAoBzFN,EAAiB,0BACjBC,EAAiB,CAAEE,MAAOV,EAAOf,OAAQ,CAAE0B,MAAOX,KAG/C,CACHc,GAAId,EACJe,KAAMrC,EAAOsB,MAAQxB,EAAKwC,IAAIT,EAAgBC,GAAkB,GAAGR,IACvE,EAqBJ,OAlBAiB,GAAU,KACFnC,GAAoBG,QAAQU,SAASR,IAIzCC,EAAqBN,GAAoBQ,kBAAoBR,GAAoBG,OAAO,GAAE,GAC3F,CAACN,IAEJsC,GAAU,KACN,MAAMC,EAA4B,CAC9BlB,MAAOb,KACHM,GAAsC,cAAlBF,GAAiC,CAAE4B,KAAM5B,EAAeS,MAAO,MACnFP,GAAsC,YAAlBF,GAA+B,CAAES,MAAO,IAGpEpB,EAASE,EAAqBoC,EAAW,CAAElB,MAAO,MAAK,GACxD,CAACb,EAAmBL,EAAoBS,IAEtCT,EACgB,IAAjBJ,EAAOsB,MAAoB,KAKvBoB,EAACC,MAAAA,CAAIC,UAAU,gCAFnB7B,EAGQ2B,EAACG,EAAAA,CAASC,mBAAoB,CAAC,kBAAmBC,MAAO,IACrDL,EAACM,EAAAA,CACGC,MAAO,CACH,CAAEb,GAAI,UAAWC,KAAM,wBACvB,CAAED,GAAI,eAAgBC,KAAM,6BAC5B,CAAED,GAAI,YAAaC,KAAM,2BAE7BnC,SAAUsB,EACVF,MAAOT,IAGX6B,EAACQ,EAAAA,CACGN,UAA6B,iBAAlB/B,EAAmC,wCAA0C,8BACxFiC,mBAAoB,CAAC,+BACrBT,KAAM,GACNc,iBAAiB,EACjBC,kBAAkB,GAElBV,EAACW,EAAAA,CACGC,YAAY,EACZL,MAAO7C,EAAmBG,OAAOgD,IAAI3B,GACrC4B,cAAe/C,EACfP,SAAUgB,EACVmB,KAAM,eACNoB,SAA4B,iBAAlB5C,MAU1B6B,EAACQ,EAAAA,CACGH,MAAOjD,EAAKwC,IAAI,gBAChBQ,mBAAoB,CAAC,gBACrBT,KAAM,GACNc,iBAAiB,EACjBC,kBAAkB,EAClB9C,SAAUA,GAEVoC,EAACW,EAAAA,CACGC,YAAY,EACZL,MAAO7C,EAAmBG,OAAOgD,IAAI3B,GACrC4B,cAAe/C,EACfP,SAAUgB,EACVmB,KAAM,eACNqB,SAAUpD,MAvDM,IA4DpC,CAEAV,EAAa+D,aAAe,CACxB1D,MAAO,GACPD,OAAQ,CAAC,EACTE,SAAU"}
1	+ {"version":3,"file":"Installments.js","sources":["../../../../../../../../src/components/Card/components/CardInput/components/Installments/Installments.tsx"],"sourcesContent":["import { h } from 'preact';\nimport { useState, useEffect } from 'preact/hooks';\nimport Field from '../../../../../internal/FormFields/Field';\nimport { useCoreContext } from '../../../../../../core/Context/CoreProvider';\nimport { InstallmentsItem, InstallmentsProps } from '../types';\nimport Fieldset from '../../../../../internal/FormFields/Fieldset/Fieldset';\nimport RadioGroup from '../../../../../internal/FormFields/RadioGroup';\nimport Select from '../../../../../internal/FormFields/Select';\n\nexport interface InstallmentsObj {\n value: number;\n plan?: 'revolving';\n}\n\n/*\n Installments generic dropdown\n */\nfunction Installments(props: InstallmentsProps) {\n const { i18n } = useCoreContext();\n const { amount, brand, onChange, type } = props;\n const installmentOptions = props.installmentOptions[brand] \|\| props.installmentOptions.card;\n const readOnly = installmentOptions?.values?.length === 1;\n const [installmentAmount, setInstallmentAmount] = useState(installmentOptions?.preselectedValue \|\| installmentOptions?.values[0]);\n const [radioBtnValue, setRadioBtnValue] = useState('onetime');\n\n // hasRadioButtonUI determines if we have 3 radio buttons in the UI ('onetime', 'installments' and 'revolving')\n const hasRadioButtonUI = installmentOptions?.plans?.includes('revolving');\n const getPartialAmount = (divider: number): string => i18n.amount(amount.value / divider, amount.currency);\n\n const onSelectInstallment = e => {\n const selectedInstallments = e.target.value;\n setInstallmentAmount(Number(selectedInstallments));\n };\n\n const onRadioSelect = e => {\n const selectedBtn = e.currentTarget.getAttribute('value');\n setRadioBtnValue(selectedBtn);\n };\n\n const installmentItemsMapper = (value: number): InstallmentsItem => {\n let translationKey;\n let translationObj;\n\n if (type === 'amount') {\n translationKey = 'installmentOption';\n translationObj = { count: value, values: { times: value, partialValue: getPartialAmount(value) } };\n } else {\n translationKey = `installmentOptionMonths`;\n translationObj = { count: value, values: { times: value } };\n }\n\n return {\n id: value,\n name: amount.value ? i18n.get(translationKey, translationObj) : `${value}`\n };\n };\n\n useEffect(() => {\n if (installmentOptions?.values?.includes(installmentAmount)) {\n return;\n }\n\n setInstallmentAmount(installmentOptions?.preselectedValue ?? installmentOptions?.values[0]);\n }, [brand]);\n\n useEffect(() => {\n const stateObj: InstallmentsObj = {\n value: installmentAmount, // No radio button interface or \"installments\" radio button selected\n ...(hasRadioButtonUI && radioBtnValue === 'revolving' && { plan: radioBtnValue, value: 1 }),\n ...(hasRadioButtonUI && radioBtnValue === 'onetime' && { value: 1 })\n };\n\n onChange(installmentOptions ? stateObj : { value: null });\n }, [installmentAmount, installmentOptions, radioBtnValue]);\n\n if (!installmentOptions) return null;\n if (amount.value === 0) return null;\n\n // Alternate interface for installments with the possibility of a \"revolving\" plan\n if (hasRadioButtonUI) {\n return (\n <div className=\"adyen-checkout__installments\">\n <Fieldset classNameModifiers={['revolving-plan']} label={''}>\n <RadioGroup\n items={[\n { id: 'onetime', name: 'installments.oneTime' },\n { id: 'installments', name: 'installments.installments' },\n { id: 'revolving', name: 'installments.revolving' }\n ]}\n onChange={onRadioSelect}\n value={radioBtnValue}\n />\n\n <Field\n className={radioBtnValue !== 'installments' ? 'revolving-plan-installments__disabled' : 'revolving-plan-installments'}\n classNameModifiers={['revolving-plan-installments']}\n name={''}\n useLabelElement={false}\n showErrorElement={false}\n >\n <Select\n filterable={false}\n items={installmentOptions.values.map(installmentItemsMapper)}\n selectedValue={installmentAmount}\n onChange={onSelectInstallment}\n name={'installments'}\n disabled={radioBtnValue !== 'installments'}\n />\n </Field>\n </Fieldset>\n </div>\n );\n }\n\n return (\n <div className=\"adyen-checkout__installments\">\n <Field\n label={i18n.get('installments')}\n classNameModifiers={['installments']}\n name={''}\n useLabelElement={false}\n showErrorElement={false}\n readOnly={readOnly}\n >\n <Select\n filterable={false}\n items={installmentOptions.values.map(installmentItemsMapper)}\n selectedValue={installmentAmount}\n onChange={onSelectInstallment}\n name={'installments'}\n readonly={readOnly}\n />\n </Field>\n </div>\n );\n}\n\nInstallments.defaultProps = {\n brand: '',\n amount: {},\n onChange: () => {}\n};\n\nexport default Installments;\n"],"names":["Installments","props","i18n","useCoreContext","amount","brand","onChange","type","installmentOptions","card","readOnly","values","length","installmentAmount","setInstallmentAmount","useState","preselectedValue","radioBtnValue","setRadioBtnValue","hasRadioButtonUI","plans","includes","onSelectInstallment","e","selectedInstallments","target","value","Number","onRadioSelect","selectedBtn","currentTarget","getAttribute","installmentItemsMapper","translationKey","translationObj","divider","count","times","partialValue","currency","id","name","get","useEffect","stateObj","plan","h","div","className","Fieldset","classNameModifiers","label","RadioGroup","items","Field","useLabelElement","showErrorElement","Select","filterable","map","selectedValue","disabled","readonly","defaultProps"],"mappings":"uhBAiBA,SAASA,EAAaC,GAClB,MAAMC,KAAEA,GAASC,KACXC,OAAEA,EAAMC,MAAEA,EAAKC,SAAEA,EAAQC,KAAEA,GAASN,EACpCO,EAAqBP,EAAMO,mBAAmBH,IAAUJ,EAAMO,mBAAmBC,KACjFC,EAAkD,IAAvCF,GAAoBG,QAAQC,QACtCC,EAAmBC,GAAwBC,EAASP,GAAoBQ,kBAAoBR,GAAoBG,OAAO,KACvHM,EAAeC,GAAoBH,EAAS,WAG7CI,EAAmBX,GAAoBY,OAAOC,SAAS,aAGvDC,EAAsBC,IACxB,MAAMC,EAAuBD,EAAEE,OAAOC,MACtCZ,EAAqBa,OAAOH,GAAAA,EAG1BI,EAAgBL,IAClB,MAAMM,EAAcN,EAAEO,cAAcC,aAAa,SACjDb,EAAiBW,EAAAA,EAGfG,EAA0BN,IAC5B,IAAIO,EACAC,EAdiB,IAACC,EAwBtB,MARa,WAAT5B,GACA0B,EAAiB,oBACjBC,EAAiB,CAAEE,MAAOV,EAAOf,OAAQ,CAAE0B,MAAOX,EAAOY,cAlBvCH,EAkBsET,EAlB1CxB,EAAKE,OAAOA,EAAOsB,MAAQS,EAAS/B,EAAOmC,eAoBzFN,EAAiB,0BACjBC,EAAiB,CAAEE,MAAOV,EAAOf,OAAQ,CAAE0B,MAAOX,KAG/C,CACHc,GAAId,EACJe,KAAMrC,EAAOsB,MAAQxB,EAAKwC,IAAIT,EAAgBC,GAAkB,GAAGR,IACvE,EAqBJ,OAlBAiB,GAAU,KACFnC,GAAoBG,QAAQU,SAASR,IAIzCC,EAAqBN,GAAoBQ,kBAAoBR,GAAoBG,OAAO,GAAE,GAC3F,CAACN,IAEJsC,GAAU,KACN,MAAMC,EAA4B,CAC9BlB,MAAOb,KACHM,GAAsC,cAAlBF,GAAiC,CAAE4B,KAAM5B,EAAeS,MAAO,MACnFP,GAAsC,YAAlBF,GAA+B,CAAES,MAAO,IAGpEpB,EAASE,EAAqBoC,EAAW,CAAElB,MAAO,MAAK,GACxD,CAACb,EAAmBL,EAAoBS,IAEtCT,EACgB,IAAjBJ,EAAOsB,MAAoB,KAKvBoB,EAACC,MAAAA,CAAIC,UAAU,gCAFnB7B,EAGQ2B,EAACG,EAAAA,CAASC,mBAAoB,CAAC,kBAAmBC,MAAO,IACrDL,EAACM,EAAAA,CACGC,MAAO,CACH,CAAEb,GAAI,UAAWC,KAAM,wBACvB,CAAED,GAAI,eAAgBC,KAAM,6BAC5B,CAAED,GAAI,YAAaC,KAAM,2BAE7BnC,SAAUsB,EACVF,MAAOT,IAGX6B,EAACQ,EAAAA,CACGN,UAA6B,iBAAlB/B,EAAmC,wCAA0C,8BACxFiC,mBAAoB,CAAC,+BACrBT,KAAM,GACNc,iBAAiB,EACjBC,kBAAkB,GAElBV,EAACW,EAAAA,CACGC,YAAY,EACZL,MAAO7C,EAAmBG,OAAOgD,IAAI3B,GACrC4B,cAAe/C,EACfP,SAAUgB,EACVmB,KAAM,eACNoB,SAA4B,iBAAlB5C,MAU1B6B,EAACQ,EAAAA,CACGH,MAAOjD,EAAKwC,IAAI,gBAChBQ,mBAAoB,CAAC,gBACrBT,KAAM,GACNc,iBAAiB,EACjBC,kBAAkB,EAClB9C,SAAUA,GAEVoC,EAACW,EAAAA,CACGC,YAAY,EACZL,MAAO7C,EAAmBG,OAAOgD,IAAI3B,GACrC4B,cAAe/C,EACfP,SAAUgB,EACVmB,KAAM,eACNqB,SAAUpD,MAvDM,IA4DpC,CAEAV,EAAa+D,aAAe,CACxB1D,MAAO,GACPD,OAAQ,CAAC,EACTE,SAAU"}

package/dist/es/components/Card/components/CardInput/components/KCPAuthentication.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{createElement as e}from"../../../../../external/preact/dist/preact.js";import{useMemo as r}from"../../../../../external/preact/hooks/dist/hooks.js";import t from"../../../../../external/classnames/index.js";import a from"../../../../internal/FormFields/Field/Field.js";import o from"../../../../../core/Context/useCoreContext.js";import s from"./DataSfSpan.js";import n from"../../../../internal/FormFields/InputTelephone.js";import{alternativeLabelContent as d}from"./IframeLabelAlternative.js";import{CREDITCARD_TAX_NUMBER_INVALID as l}from"../../../../../core/Errors/constants.js";function i(i){const{i18n:c}=o(),u=r((()=>i.value?.length>6?c.get("creditCard.taxNumber.labelAlt"):c.get("creditCard.taxNumber.label")),[i.value]);return e("div",{className:"adyen-checkout__card__kcp-authentication"},e(a,{label:u,filled:i.filled,classNameModifiers:["kcp-taxNumber"],errorMessage:i.error&&c.get(l),isValid:i.isValid,dir:"ltr",name:"kcpTaxNumberOrDOB",onFocus:e=>i.onFieldFocusAnalytics("taxNumber",e),onBlur:e=>i.onFieldBlurAnalytics("taxNumber",e)},e(n,{name:"kcpTaxNumberOrDOB",className:"adyen-checkout__card__kcp-taxNumber__input adyen-checkout__input",maxLength:10,minLength:6,autoComplete:"false",value:i.value,required:!0,onBlur:i.onBlur,onInput:i.onInput,disabled:i.disabled,placeholder:i.placeholder})),e(a,{label:c.get("creditCard.password.label"),focused:"encryptedPassword"===i.focusedElement,filled:i.filled,classNameModifiers:["50","koreanAuthentication-encryptedPassword"],onFocusField:()=>i.onFocusField("encryptedPassword"),errorMessage:i.encryptedPasswordState.errors&&c.get(String(i.encryptedPasswordState.errors)),isValid:i.encryptedPasswordState.valid,dir:"ltr",name:"encryptedPassword",useLabelElement:!1,renderAlternativeToLabel:d},e(s,{encryptedFieldType:"encryptedPassword",className:t({"adyen-checkout__input":!0,"adyen-checkout__input--large":!0,"adyen-checkout__input--error":i.encryptedPasswordState.errors,"adyen-checkout__input--valid":i.encryptedPasswordState.valid,"adyen-checkout__input--focus":"encryptedPassword"===i.focusedElement})})))}export{i as default};
+import{createElement as e}from"../../../../../external/preact/dist/preact.js";import{useMemo as r}from"../../../../../external/preact/hooks/dist/hooks.js";import t from"../../../../../external/classnames/index.js";import a from"../../../../internal/FormFields/Field/Field.js";import{useCoreContext as o}from"../../../../../core/Context/CoreProvider.js";import s from"./DataSfSpan.js";import n from"../../../../internal/FormFields/InputTelephone.js";import{alternativeLabelContent as d}from"./IframeLabelAlternative.js";import{CREDITCARD_TAX_NUMBER_INVALID as l}from"../../../../../core/Errors/constants.js";function i(i){const{i18n:c}=o(),u=r((()=>i.value?.length>6?c.get("creditCard.taxNumber.labelAlt"):c.get("creditCard.taxNumber.label")),[i.value]);return e("div",{className:"adyen-checkout__card__kcp-authentication"},e(a,{label:u,filled:i.filled,classNameModifiers:["kcp-taxNumber"],errorMessage:i.error&&c.get(l),isValid:i.isValid,dir:"ltr",name:"kcpTaxNumberOrDOB",onFocus:e=>i.onFieldFocusAnalytics("taxNumber",e),onBlur:e=>i.onFieldBlurAnalytics("taxNumber",e)},e(n,{name:"kcpTaxNumberOrDOB",className:"adyen-checkout__card__kcp-taxNumber__input adyen-checkout__input",maxLength:10,minLength:6,autoComplete:"false",value:i.value,required:!0,onBlur:i.onBlur,onInput:i.onInput,disabled:i.disabled,placeholder:i.placeholder})),e(a,{label:c.get("creditCard.password.label"),focused:"encryptedPassword"===i.focusedElement,filled:i.filled,classNameModifiers:["50","koreanAuthentication-encryptedPassword"],onFocusField:()=>i.onFocusField("encryptedPassword"),errorMessage:i.encryptedPasswordState.errors&&c.get(String(i.encryptedPasswordState.errors)),isValid:i.encryptedPasswordState.valid,dir:"ltr",name:"encryptedPassword",useLabelElement:!1,renderAlternativeToLabel:d},e(s,{encryptedFieldType:"encryptedPassword",className:t({"adyen-checkout__input":!0,"adyen-checkout__input--large":!0,"adyen-checkout__input--error":i.encryptedPasswordState.errors,"adyen-checkout__input--valid":i.encryptedPasswordState.valid,"adyen-checkout__input--focus":"encryptedPassword"===i.focusedElement})})))}export{i as default};
 //# sourceMappingURL=KCPAuthentication.js.map

package/dist/es/components/Card/components/CardInput/components/KCPAuthentication.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"KCPAuthentication.js","sources":["../../../../../../../src/components/Card/components/CardInput/components/KCPAuthentication.tsx"],"sourcesContent":["import { h } from 'preact';\nimport { useMemo } from 'preact/hooks';\nimport classNames from 'classnames';\nimport Field from '../../../../internal/FormFields/Field';\nimport useCoreContext from '../../../../../core/Context/~~useCoreContext~~';\nimport { KCPProps } from './types';\nimport DataSfSpan from './DataSfSpan';\nimport InputTelephone from '../../../../internal/FormFields/InputTelephone';\nimport { alternativeLabelContent } from './IframeLabelAlternative';\nimport { CREDITCARD_TAX_NUMBER_INVALID } from '../../../../../core/Errors/constants';\n\nexport default function KCPAuthentication(props: KCPProps) {\n const { i18n } = useCoreContext();\n\n const taxNumberLabel = useMemo((): string => {\n if (props.value?.length > 6) return i18n.get('creditCard.taxNumber.labelAlt');\n\n return i18n.get('creditCard.taxNumber.label');\n }, [props.value]);\n\n return (\n <div className=\"adyen-checkout__card__kcp-authentication\">\n <Field\n label={taxNumberLabel}\n filled={props.filled}\n classNameModifiers={['kcp-taxNumber']}\n errorMessage={props.error && i18n.get(CREDITCARD_TAX_NUMBER_INVALID)}\n isValid={props.isValid}\n dir={'ltr'}\n name={'kcpTaxNumberOrDOB'}\n onFocus={e => props.onFieldFocusAnalytics('taxNumber', e)}\n onBlur={e => props.onFieldBlurAnalytics('taxNumber', e)}\n >\n <InputTelephone\n name={'kcpTaxNumberOrDOB'}\n className=\"adyen-checkout__card__kcp-taxNumber__input adyen-checkout__input\"\n maxLength={10}\n minLength={6}\n autoComplete={'false'}\n value={props.value}\n required={true}\n onBlur={props.onBlur}\n onInput={props.onInput}\n disabled={props.disabled}\n placeholder={props.placeholder}\n />\n </Field>\n\n <Field\n label={i18n.get('creditCard.password.label')}\n focused={props.focusedElement === 'encryptedPassword'}\n filled={props.filled}\n classNameModifiers={['50', 'koreanAuthentication-encryptedPassword']}\n onFocusField={() => props.onFocusField('encryptedPassword')}\n errorMessage={props.encryptedPasswordState.errors && i18n.get(String(props.encryptedPasswordState.errors))}\n isValid={props.encryptedPasswordState.valid}\n dir={'ltr'}\n name={'encryptedPassword'}\n useLabelElement={false}\n renderAlternativeToLabel={alternativeLabelContent}\n >\n <DataSfSpan\n encryptedFieldType=\"encryptedPassword\"\n className={classNames({\n 'adyen-checkout__input': true,\n 'adyen-checkout__input--large': true,\n 'adyen-checkout__input--error': props.encryptedPasswordState.errors,\n 'adyen-checkout__input--valid': props.encryptedPasswordState.valid,\n 'adyen-checkout__input--focus': props.focusedElement === 'encryptedPassword'\n })}\n />\n </Field>\n </div>\n );\n}\n"],"names":["KCPAuthentication","props","i18n","useCoreContext","taxNumberLabel","useMemo","value","length","get","h","div","className","Field","label","filled","classNameModifiers","errorMessage","error","CREDITCARD_TAX_NUMBER_INVALID","isValid","dir","name","onFocus","e","onFieldFocusAnalytics","onBlur","onFieldBlurAnalytics","InputTelephone","maxLength","minLength","autoComplete","required","onInput","disabled","placeholder","focused","focusedElement","onFocusField","encryptedPasswordState","errors","String","valid","useLabelElement","renderAlternativeToLabel","alternativeLabelContent","DataSfSpan","encryptedFieldType","classNames"],"mappings":"+~~kBAWe~~,SAASA,EAAkBC,GACtC,MAAMC,KAAEA,GAASC,IAEXC,EAAiBC,GAAQ,IACvBJ,EAAMK,OAAOC,OAAS,EAAUL,EAAKM,IAAI,iCAEtCN,EAAKM,IAAI,+BACjB,CAACP,EAAMK,QAEV,OACIG,EAACC,MAAAA,CAAIC,UAAU,4CACXF,EAACG,EAAAA,CACGC,MAAOT,EACPU,OAAQb,EAAMa,OACdC,mBAAoB,CAAC,iBACrBC,aAAcf,EAAMgB,OAASf,EAAKM,IAAIU,GACtCC,QAASlB,EAAMkB,QACfC,IAAK,MACLC,KAAM,oBACNC,QAASC,GAAKtB,EAAMuB,sBAAsB,YAAaD,GACvDE,OAAQF,GAAKtB,EAAMyB,qBAAqB,YAAaH,IAErDd,EAACkB,EAAAA,CACGN,KAAM,oBACNV,UAAU,mEACViB,UAAW,GACXC,UAAW,EACXC,aAAc,QACdxB,MAAOL,EAAMK,MACbyB,UAAU,EACVN,OAAQxB,EAAMwB,OACdO,QAAS/B,EAAM+B,QACfC,SAAUhC,EAAMgC,SAChBC,YAAajC,EAAMiC,eAI3BzB,EAACG,EAAAA,CACGC,MAAOX,EAAKM,IAAI,6BAChB2B,QAAkC,sBAAzBlC,EAAMmC,eACftB,OAAQb,EAAMa,OACdC,mBAAoB,CAAC,KAAM,0CAC3BsB,aAAc,IAAMpC,EAAMoC,aAAa,qBACvCrB,aAAcf,EAAMqC,uBAAuBC,QAAUrC,EAAKM,IAAIgC,OAAOvC,EAAMqC,uBAAuBC,SAClGpB,QAASlB,EAAMqC,uBAAuBG,MACtCrB,IAAK,MACLC,KAAM,oBACNqB,iBAAiB,EACjBC,yBAA0BC,GAE1BnC,EAACoC,EAAAA,CACGC,mBAAmB,oBACnBnC,UAAWoC,EAAW,CAClB,yBAAyB,EACzB,gCAAgC,EAChC,+BAAgC9C,EAAMqC,uBAAuBC,OAC7D,+BAAgCtC,EAAMqC,uBAAuBG,MAC7D,+BAAyD,sBAAzBxC,EAAMmC,oBAM9D"}
1	+ {"version":3,"file":"KCPAuthentication.js","sources":["../../../../../../../src/components/Card/components/CardInput/components/KCPAuthentication.tsx"],"sourcesContent":["import { h } from 'preact';\nimport { useMemo } from 'preact/hooks';\nimport classNames from 'classnames';\nimport Field from '../../../../internal/FormFields/Field';\nimport { useCoreContext } from '../../../../../core/Context/CoreProvider';\nimport { KCPProps } from './types';\nimport DataSfSpan from './DataSfSpan';\nimport InputTelephone from '../../../../internal/FormFields/InputTelephone';\nimport { alternativeLabelContent } from './IframeLabelAlternative';\nimport { CREDITCARD_TAX_NUMBER_INVALID } from '../../../../../core/Errors/constants';\n\nexport default function KCPAuthentication(props: KCPProps) {\n const { i18n } = useCoreContext();\n\n const taxNumberLabel = useMemo((): string => {\n if (props.value?.length > 6) return i18n.get('creditCard.taxNumber.labelAlt');\n\n return i18n.get('creditCard.taxNumber.label');\n }, [props.value]);\n\n return (\n <div className=\"adyen-checkout__card__kcp-authentication\">\n <Field\n label={taxNumberLabel}\n filled={props.filled}\n classNameModifiers={['kcp-taxNumber']}\n errorMessage={props.error && i18n.get(CREDITCARD_TAX_NUMBER_INVALID)}\n isValid={props.isValid}\n dir={'ltr'}\n name={'kcpTaxNumberOrDOB'}\n onFocus={e => props.onFieldFocusAnalytics('taxNumber', e)}\n onBlur={e => props.onFieldBlurAnalytics('taxNumber', e)}\n >\n <InputTelephone\n name={'kcpTaxNumberOrDOB'}\n className=\"adyen-checkout__card__kcp-taxNumber__input adyen-checkout__input\"\n maxLength={10}\n minLength={6}\n autoComplete={'false'}\n value={props.value}\n required={true}\n onBlur={props.onBlur}\n onInput={props.onInput}\n disabled={props.disabled}\n placeholder={props.placeholder}\n />\n </Field>\n\n <Field\n label={i18n.get('creditCard.password.label')}\n focused={props.focusedElement === 'encryptedPassword'}\n filled={props.filled}\n classNameModifiers={['50', 'koreanAuthentication-encryptedPassword']}\n onFocusField={() => props.onFocusField('encryptedPassword')}\n errorMessage={props.encryptedPasswordState.errors && i18n.get(String(props.encryptedPasswordState.errors))}\n isValid={props.encryptedPasswordState.valid}\n dir={'ltr'}\n name={'encryptedPassword'}\n useLabelElement={false}\n renderAlternativeToLabel={alternativeLabelContent}\n >\n <DataSfSpan\n encryptedFieldType=\"encryptedPassword\"\n className={classNames({\n 'adyen-checkout__input': true,\n 'adyen-checkout__input--large': true,\n 'adyen-checkout__input--error': props.encryptedPasswordState.errors,\n 'adyen-checkout__input--valid': props.encryptedPasswordState.valid,\n 'adyen-checkout__input--focus': props.focusedElement === 'encryptedPassword'\n })}\n />\n </Field>\n </div>\n );\n}\n"],"names":["KCPAuthentication","props","i18n","useCoreContext","taxNumberLabel","useMemo","value","length","get","h","div","className","Field","label","filled","classNameModifiers","errorMessage","error","CREDITCARD_TAX_NUMBER_INVALID","isValid","dir","name","onFocus","e","onFieldFocusAnalytics","onBlur","onFieldBlurAnalytics","InputTelephone","maxLength","minLength","autoComplete","required","onInput","disabled","placeholder","focused","focusedElement","onFocusField","encryptedPasswordState","errors","String","valid","useLabelElement","renderAlternativeToLabel","alternativeLabelContent","DataSfSpan","encryptedFieldType","classNames"],"mappings":"+lBAWe,SAASA,EAAkBC,GACtC,MAAMC,KAAEA,GAASC,IAEXC,EAAiBC,GAAQ,IACvBJ,EAAMK,OAAOC,OAAS,EAAUL,EAAKM,IAAI,iCAEtCN,EAAKM,IAAI,+BACjB,CAACP,EAAMK,QAEV,OACIG,EAACC,MAAAA,CAAIC,UAAU,4CACXF,EAACG,EAAAA,CACGC,MAAOT,EACPU,OAAQb,EAAMa,OACdC,mBAAoB,CAAC,iBACrBC,aAAcf,EAAMgB,OAASf,EAAKM,IAAIU,GACtCC,QAASlB,EAAMkB,QACfC,IAAK,MACLC,KAAM,oBACNC,QAASC,GAAKtB,EAAMuB,sBAAsB,YAAaD,GACvDE,OAAQF,GAAKtB,EAAMyB,qBAAqB,YAAaH,IAErDd,EAACkB,EAAAA,CACGN,KAAM,oBACNV,UAAU,mEACViB,UAAW,GACXC,UAAW,EACXC,aAAc,QACdxB,MAAOL,EAAMK,MACbyB,UAAU,EACVN,OAAQxB,EAAMwB,OACdO,QAAS/B,EAAM+B,QACfC,SAAUhC,EAAMgC,SAChBC,YAAajC,EAAMiC,eAI3BzB,EAACG,EAAAA,CACGC,MAAOX,EAAKM,IAAI,6BAChB2B,QAAkC,sBAAzBlC,EAAMmC,eACftB,OAAQb,EAAMa,OACdC,mBAAoB,CAAC,KAAM,0CAC3BsB,aAAc,IAAMpC,EAAMoC,aAAa,qBACvCrB,aAAcf,EAAMqC,uBAAuBC,QAAUrC,EAAKM,IAAIgC,OAAOvC,EAAMqC,uBAAuBC,SAClGpB,QAASlB,EAAMqC,uBAAuBG,MACtCrB,IAAK,MACLC,KAAM,oBACNqB,iBAAiB,EACjBC,yBAA0BC,GAE1BnC,EAACoC,EAAAA,CACGC,mBAAmB,oBACnBnC,UAAWoC,EAAW,CAClB,yBAAyB,EACzB,gCAAgC,EAChC,+BAAgC9C,EAAMqC,uBAAuBC,OAC7D,+BAAgCtC,EAAMqC,uBAAuBG,MAC7D,+BAAyD,sBAAzBxC,EAAMmC,oBAM9D"}

package/dist/es/components/Card/components/CardInput/components/StoredCardFields.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{createElement as e}from"../../../../../external/preact/dist/preact.js";import t from"./CVC.js";import r from"../../../../internal/FormFields/Field/Field.js";import a from"../../../../../core/Context/useCoreContext.js";import{ENCRYPTED_SECURITY_CODE as d}from"../../../../internal/SecuredFields/lib/configuration/constants.js";import c from"../../../../internal/FormFields/InputText.js";function i({brand:i,hasCVC:o,onFocusField:l,errors:n,valid:s,cvcPolicy:u,focusedElement:m,lastFour:p,expiryMonth:y,expiryYear:C,showContextualElement:_}){const{i18n:x}=a(),f=`${x.get("creditCard.storedCard.description.ariaLabel").replace("%@",p)}${y&&C?` ${x.get("creditCard.expiryDate.label")} ${y}/${C}`:""}`,F="amex"===i,h=F?x.get("creditCard.securityCode.contextualText.4digits"):x.get("creditCard.securityCode.contextualText.3digits");return e("div",{className:"adyen-checkout__card__form adyen-checkout__card__form--oneClick","aria-label":f},e("div",{className:"adyen-checkout__card__exp-cvc adyen-checkout__field-wrapper"},y&&C&&e(r,{label:x.get("creditCard.expiryDate.label"),className:"adyen-checkout__field--50",classNameModifiers:["storedCard"],name:"expiryDateField",disabled:!0},e(c,{name:"expiryDateField",className:"adyen-checkout__input adyen-checkout__input--disabled adyen-checkout__card__exp-date__input--oneclick",value:`${y} / ${C}`,disabled:!0,dir:"ltr"})),o&&e(t,{cvcPolicy:u,error:((e,t)=>e[t]?x.get(e[t]):null)(n,d),focused:"encryptedSecurityCode"===m,filled:!!s.encryptedSecurityCode||!!n.encryptedSecurityCode,isValid:!!s.encryptedSecurityCode,label:x.get("creditCard.securityCode.label"),onFocusField:l,...y&&C&&{className:"adyen-checkout__field--50"},classNameModifiers:["storedCard"],frontCVC:F,showContextualElement:_,contextualText:h})))}export{i as default};
+import{createElement as e}from"../../../../../external/preact/dist/preact.js";import t from"./CVC.js";import r from"../../../../internal/FormFields/Field/Field.js";import{useCoreContext as a}from"../../../../../core/Context/CoreProvider.js";import{ENCRYPTED_SECURITY_CODE as d}from"../../../../internal/SecuredFields/lib/constants.js";import c from"../../../../internal/FormFields/InputText.js";function i({brand:i,hasCVC:o,onFocusField:l,errors:s,valid:n,cvcPolicy:u,focusedElement:m,lastFour:p,expiryMonth:y,expiryYear:_,showContextualElement:C}){const{i18n:x}=a(),f=`${x.get("creditCard.storedCard.description.ariaLabel").replace("%@",p)}${y&&_?` ${x.get("creditCard.expiryDate.label")} ${y}/${_}`:""}`,F="amex"===i,h=F?x.get("creditCard.securityCode.contextualText.4digits"):x.get("creditCard.securityCode.contextualText.3digits");return e("div",{className:"adyen-checkout__card__form adyen-checkout__card__form--oneClick","aria-label":f},e("div",{className:"adyen-checkout__card__exp-cvc adyen-checkout__field-wrapper"},y&&_&&e(r,{label:x.get("creditCard.expiryDate.label"),className:"adyen-checkout__field--50",classNameModifiers:["storedCard"],name:"expiryDateField",disabled:!0},e(c,{name:"expiryDateField",className:"adyen-checkout__input adyen-checkout__input--disabled adyen-checkout__card__exp-date__input--oneclick",value:`${y} / ${_}`,disabled:!0,dir:"ltr"})),o&&e(t,{cvcPolicy:u,error:((e,t)=>e[t]?x.get(e[t]):null)(s,d),focused:"encryptedSecurityCode"===m,filled:!!n.encryptedSecurityCode||!!s.encryptedSecurityCode,isValid:!!n.encryptedSecurityCode,label:x.get("creditCard.securityCode.label"),onFocusField:l,...y&&_&&{className:"adyen-checkout__field--50"},classNameModifiers:["storedCard"],frontCVC:F,showContextualElement:C,contextualText:h})))}export{i as default};
 //# sourceMappingURL=StoredCardFields.js.map