npm - @adyen/adyen-web - Versions diffs - 6.37.0 → 6.38.0 - Mend

@adyen/adyen-web 6.37.0 → 6.38.0

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 (194) 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/constants';\nimport { BinLookupResponse, DualBrandSelectElement } from '../../types';\nimport { cardInputFormatters, cardInputValidationRules, getRuleByNameAndMode } from './validate';\nimport CIExtensions from '../../../internal/SecuredFields/binLookup/extensions';\nimport useForm from '../../../../utils/useForm';\nimport { SortedErrorObject } from '../../../../core/Errors/types';\nimport {\n handlePartialAddressMode,\n extractPropsForCardFields,\n extractPropsForSFP,\n getLayout,\n shouldShowInstallmentsComponent,\n requiresDualBrandSelection\n} from './utils';\nimport Specifications from '../../../internal/Address/Specifications';\nimport { StoredCardFieldsWrapper } from './components/StoredCardFieldsWrapper';\nimport { CardFieldsWrapper } from './components/CardFieldsWrapper';\nimport { getAddressHandler, getAutoJumpHandler, getFocusHandler } from './handlers';\nimport { InstallmentsState } from './components/Installments/Installments';\nimport { TouchStartEventObj } from './components/types';\nimport classNames from 'classnames';\nimport { getPartialAddressValidationRules } from '../../../internal/Address/validate';\nimport useImage from '../../../../core/Context/useImage';\nimport { getArrayDifferences } from '../../../../utils/arrayUtils';\nimport FormInstruction from '../../../internal/FormInstruction';\nimport { AddressData } from '../../../../types/global-types';\nimport { CardBrandData, CardFocusData } from '../../../internal/SecuredFields/lib/types';\nimport { PREFIX } from '../../../internal/Icon/constants';\nimport useSRPanelForCardInputErrors from './useSRPanelForCardInputErrors';\nimport FastlaneSignup from '../Fastlane/FastlaneSignup';\nimport { fieldTypeToSnakeCase } from '../../../internal/SecuredFields/utils';\nimport { getErrorMessageFromCode } from '../../../../core/Errors/utils';\nimport { SF_ErrorCodes } from '../../../../core/Errors/constants';\nimport { usePrevious } from '../../../../utils/hookUtils';\nimport { AnalyticsInfoEvent, InfoEventType, UiTarget } from '../../../../core/Analytics/events/AnalyticsInfoEvent';\nimport { useAmount } from '../../../../core/Context/AmountProvider';\nimport { DUAL_BRANDS_THAT_NEED_SELECTION_MECHANISM } from '../../constants';\n\nconst CardInput = (props: Readonly<CardInputProps>) => {\n const sfp = useRef<SecuredFieldsProvider>(null);\n const isValidating = useRef(false);\n const getImage = useImage();\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 const { amount } = useAmount();\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 [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<DualBrandSelectElement[]>([]);\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) : null);\n const [showSocialSecurityNumber, setShowSocialSecurityNumber] = useState(false);\n const [socialSecurityNumber, setSocialSecurityNumber] = useState('');\n const [installments, setInstallments] = useState<InstallmentsState>({ 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 This stores the brand as detected by the internal regEx.\n * It eventually gets overwritten by the brand as detected by the /binLookup, but will revert back to the regEx detection\n * if the PAN length drops below the /binLookup digit threshold.\n * Default value, 'card', indicates no brand detected\n /\n const [internallyDetectedBrand, setInternallyDetectedBrand] = useState('card');\n\n /\n Used tho show and hide the pay button and instructions text\n * Should mimic the same logic as CardInput loading wrapper\n /\n const [showCardUIElements, setShowCardUIElements] = useState(false);\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 = shouldShowInstallmentsComponent({\n installmentOptions: props.installmentOptions,\n fundingSource: props.fundingSource,\n amount\n });\n\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 \| CardFocusData) => {\n props.onFocus({ fieldType: who, event: e });\n };\n const onFieldBlurAnalytics = (who: string, e: Event \| CardFocusData) => {\n props.onBlur({ fieldType: who, event: e });\n };\n\n const onBrand = useCallback((obj: CardBrandData) => {\n setInternallyDetectedBrand(obj.brand);\n props.onBrand(obj);\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 mapSfpErrorsToCardInputErrors = (sfpErrors: SFPState['errors']): Partial<CardInputErrorState> => {\n if (!sfpErrors) return {};\n\n return {\n encryptedCardNumber: !!sfpErrors.encryptedCardNumber,\n encryptedExpiryDate: !!sfpErrors.encryptedExpiryDate,\n encryptedSecurityCode: !!sfpErrors.encryptedSecurityCode,\n encryptedPassword: !!sfpErrors.encryptedPassword\n };\n };\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, null) ? 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, ...mapSfpErrorsToCardInputErrors(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 /\n Listen to the full SecureFieldsProvider state and handle actions\n * Used right now to mimic the loading status changes, this can only be done this way\n * Trying to do it via onConfiguSuccess or onChange has side effects\n /\n const handleSFPStateUpdate = useCallback(\n sfpState => {\n mimicLoadingStatusChange(sfpState);\n },\n [showCardUIElements, setShowCardUIElements]\n );\n\n /\n This function implements the same logic that LoadingProvider uses to show and hide elements\n * We want to mimic this behavior so we can hide and show the pay button or the instructions text\n * Deciding to do it this way since we garante there's no DOM changes to merchants\n * We can break this in the next major version (v7)\n /\n const mimicLoadingStatusChange = (sfpState: SFPState) => {\n if (!sfpState.status) return;\n if (sfpState.status == 'loading') {\n setShowCardUIElements(false);\n } else {\n setShowCardUIElements(true);\n }\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 // Use the custom hook to set (or clear) errors in the SRPanel\n const {\n sortedErrorList: currentErrorsSortedByLayout,\n previousSortedErrors,\n clearSRPanel\n } = useSRPanelForCardInputErrors({\n errors,\n props,\n isValidating,\n retrieveLayout,\n specifications,\n billingAddress,\n sfp\n });\n\n // Analytics: ValidationErrors\n useEffect(() => {\n if (currentErrorsSortedByLayout) {\n const newErrors = getArrayDifferences<SortedErrorObject, string>(currentErrorsSortedByLayout, previousSortedErrors, 'field');\n\n newErrors?.forEach(errorItem => {\n const event = new AnalyticsInfoEvent({\n component: props.type,\n type: InfoEventType.validationError,\n target: fieldTypeToSnakeCase(errorItem.field) as UiTarget,\n validationErrorCode: errorItem.errorCode,\n validationErrorMessage: getErrorMessageFromCode(errorItem.errorCode, SF_ErrorCodes)\n });\n props.onSubmitAnalytics(event);\n });\n }\n }, [currentErrorsSortedByLayout]);\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 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 \"Update\" handler related to dual brand buttons being initially displayed\n /\n useEffect(() => {\n if (dualBrandSelectElements.length > 0 && dualBrandSelectElements) {\n const dualBrandsArr: string[] = dualBrandSelectElements.map(item => item.id);\n const brand = dualBrandsArr[0]; // initially selected brand\n const dualBrands = dualBrandsArr.toString();\n\n const showDualBrandSelector = dualBrandSelectElements\n ? requiresDualBrandSelection(DUAL_BRANDS_THAT_NEED_SELECTION_MECHANISM, dualBrandSelectElements, 'id')\n : false;\n\n // Only send analytics event about displaying dualBrand selector for countries that need to show a selection mechanism\n if (showDualBrandSelector) {\n const event = new AnalyticsInfoEvent({\n component: props.type,\n type: InfoEventType.displayed,\n target: UiTarget.dualBrandButton,\n brand,\n configData: { dualBrands }\n });\n\n props.onSubmitAnalytics(event);\n }\n }\n }, [dualBrandSelectElements]);\n\n const previousSelectedBrandValue = usePrevious(selectedBrandValue);\n\n /\n \"Update\" handler related to a dual brand button being selected\n /\n useEffect(() => {\n if (previousSelectedBrandValue?.length && selectedBrandValue?.length) {\n const event = new AnalyticsInfoEvent({\n component: props.type,\n type: InfoEventType.selected,\n target: UiTarget.dualBrandButton,\n brand: selectedBrandValue\n });\n\n props.onSubmitAnalytics(event);\n }\n }, [selectedBrandValue]);\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 onSubmitAnalytics={props.onSubmitAnalytics}\n onChange={handleSecuredFieldsChange}\n onBrand={onBrand}\n onFocus={handleFocus}\n onStateUpdate={handleSFPStateUpdate}\n type={props.brand}\n componentType={props.type}\n disableIOSArrowKeys={props.disableIOSArrowKeys ? handleTouchstartIOS : null}\n render={({ setRootNode, setFocusOn }, sfpState: 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 {showCardUIElements && <FormInstruction />}\n\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\n {props.fastlaneConfiguration && (\n <FastlaneSignup\n {...props.fastlaneConfiguration}\n currentDetectedBrand={internallyDetectedBrand}\n onChange={props.onChange}\n onSubmitAnalytics={props.onSubmitAnalytics}\n type={props.type}\n />\n )}\n\n {showCardUIElements &&\n props.showPayButton &&\n props.payButton({\n status,\n variant: props.isPayButtonPrimaryVariant ? 'primary' : 'secondary',\n icon: getImage({ imageFolder: 'components/' })(`${PREFIX}lock`)\n })}\n </Fragment>\n );\n};\n\nCardInput.defaultProps = defaultProps;\n\nexport default CardInput;\n"],"names":["CardInput","props","sfp","useRef","isValidating","getImage","useImage","billingAddressRef","setAddressRef","ref","current","cardInputRef","Object","keys","length","setComponentRef","hasPanLengthRef","isAutoJumping","specifications","useMemo","Specifications","amount","useAmount","status","setStatus","useState","errors","setErrors","valid","setValid","holderNameRequired","holderName","data","setData","hasHolderName","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","internallyDetectedBrand","setInternallyDetectedBrand","showCardUIElements","setShowCardUIElements","handleChangeFor","triggerValidation","formData","formValid","formErrors","setSchema","setFormData","setFormValid","setFormErrors","useForm","schema","defaultData","formatters","cardInputFormatters","rules","cardInputValidationRules","hasInstallments","shouldShowInstallmentsComponent","installmentOptions","fundingSource","showAmountsInInstallments","showInstallmentAmounts","isKorea","countryCode","showKCP","configuration","koreanAuthenticationRequired","showBrazilianSSN","socialSecurityNumberMode","onFieldFocusAnalytics","who","e","onFocus","fieldType","event","onFieldBlurAnalytics","onBlur","onBrand","useCallback","obj","handleFocus","getFocusHandler","retrieveLayout","getLayout","countrySpecificSchemas","getAddressSchemaForCountry","billingAddressRequiredFields","handleTouchstartIOS","elementType","name","handleAddress","getAddressHandler","doPanAutoJump","getAutoJumpHandler","handleSFPStateUpdate","sfpState","mimicLoadingStatusChange","extensions","CIExtensions","showValidation","clearSRPanel","processBinLookupResponse","binLookupResponse","isReset","processBinLookup","useEffect","setFocusOn","updateStyles","handleUnsupportedCard","destroy","newSchema","taxNumber","addressHasErrors","entries","reduce","acc","error","sortedErrorList","currentErrorsSortedByLayout","previousSortedErrors","useSRPanelForCardInputErrors","newErrors","getArrayDifferences","forEach","errorItem","AnalyticsInfoEvent","component","type","InfoEventType","validationError","target","fieldTypeToSnakeCase","field","validationErrorCode","errorCode","validationErrorMessage","getErrorMessageFromCode","SF_ErrorCodes","onSubmitAnalytics","holderNameValid","sfpValid","addressValid","koreanAuthentication","encryptedPassword","socialSecurityNumberValid","isValid","sfStateErrorsObj","mapErrorsToValidationRuleResult","mergedErrors","onChange","dualBrandsArr","map","item","id","dualBrands","toString","requiresDualBrandSelection","DUAL_BRANDS_THAT_NEED_SELECTION_MECHANISM","displayed","UiTarget","dualBrandButton","configData","previousSelectedBrandValue","usePrevious","selected","FieldToRender","StoredCardFieldsWrapper","CardFieldsWrapper","h","Fragment","SecuredFieldsProvider","extractPropsForSFP","styles","hasKoreanFields","sfState","eventDetails","autoCompleteName","holderNameValidationFn","getRuleByNameAndMode","acHolderName","sfpErrors","autoFocus","ENCRYPTED_CARD_NUMBER","encryptedCardNumber","encryptedExpiryDate","encryptedSecurityCode","onStateUpdate","componentType","disableIOSArrowKeys","render","setRootNode","div","className","classNames","role","FormInstruction","extractPropsForCardFields","handleInstallments","brandsIcons","handleOnStoreDetails","billingAddressValidationRules","getPartialAddressValidationRules","onAddressLookup","onAddressSelected","addressSearchDebounceMs","fastlaneConfiguration","FastlaneSignup","currentDetectedBrand","showPayButton","payButton","variant","isPayButtonPrimaryVariant","icon","imageFolder","PREFIX","defaultProps"],"mappings":"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"}
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, DualBrandSelectElement } from '../../types';\nimport { cardInputFormatters, cardInputValidationRules, getRuleByNameAndMode } from './validate';\nimport CIExtensions from '../../../internal/SecuredFields/binLookup/extensions';\nimport useForm from '../../../../utils/useForm';\nimport { SortedErrorObject } from '../../../../core/Errors/types';\nimport {\n handlePartialAddressMode,\n extractPropsForCardFields,\n extractPropsForSFP,\n getLayout,\n shouldShowInstallmentsComponent,\n requiresDualBrandSelection\n} from './utils';\nimport Specifications from '../../../internal/Address/Specifications';\nimport { StoredCardFieldsWrapper } from './components/StoredCardFieldsWrapper';\nimport { CardFieldsWrapper } from './components/CardFieldsWrapper';\nimport { getAddressHandler, getAutoJumpHandler, getFocusHandler } from './handlers';\nimport { InstallmentsState } from './components/Installments/Installments';\nimport { TouchStartEventObj } from './components/types';\nimport classNames from 'classnames';\nimport { getPartialAddressValidationRules } from '../../../internal/Address/validate';\nimport useImage from '../../../../core/Context/useImage';\nimport { getArrayDifferences } from '../../../../utils/arrayUtils';\nimport FormInstruction from '../../../internal/FormInstruction';\nimport { AddressData } from '../../../../types/global-types';\nimport { CardBrandData, CardFocusData } from '../../../internal/SecuredFields/lib/types';\nimport { PREFIX } from '../../../internal/Icon/constants';\nimport useSRPanelForCardInputErrors from './useSRPanelForCardInputErrors';\nimport FastlaneSignup from '../Fastlane/FastlaneSignup';\nimport { fieldTypeToSnakeCase } from '../../../internal/SecuredFields/utils';\nimport { getErrorMessageFromCode } from '../../../../core/Errors/utils';\nimport { SF_ErrorCodes } from '../../../../core/Errors/constants';\nimport { usePrevious } from '../../../../utils/hookUtils';\nimport { AnalyticsInfoEvent, InfoEventType, UiTarget } from '../../../../core/Analytics/events/AnalyticsInfoEvent';\nimport { useAmount } from '../../../../core/Context/AmountProvider';\nimport { DUAL_BRANDS_THAT_NEED_SELECTION_MECHANISM } from '../../constants';\n\nconst CardInput = (props: Readonly<CardInputProps>) => {\n const sfp = useRef<SecuredFieldsProvider>(null);\n const isValidating = useRef(false);\n const getImage = useImage();\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 const { amount } = useAmount();\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 [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<DualBrandSelectElement[]>([]);\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) : null);\n const [showSocialSecurityNumber, setShowSocialSecurityNumber] = useState(false);\n const [socialSecurityNumber, setSocialSecurityNumber] = useState('');\n const [installments, setInstallments] = useState<InstallmentsState>({ 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 This stores the brand as detected by the internal regEx.\n * It eventually gets overwritten by the brand as detected by the /binLookup, but will revert back to the regEx detection\n * if the PAN length drops below the /binLookup digit threshold.\n * Default value, 'card', indicates no brand detected\n /\n const [internallyDetectedBrand, setInternallyDetectedBrand] = useState('card');\n\n /\n Used tho show and hide the pay button and instructions text\n * Should mimic the same logic as CardInput loading wrapper\n /\n const [showCardUIElements, setShowCardUIElements] = useState(false);\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 = shouldShowInstallmentsComponent({\n installmentOptions: props.installmentOptions,\n fundingSource: props.fundingSource,\n amount\n });\n\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 \| CardFocusData) => {\n props.onFocus({ fieldType: who, event: e });\n };\n const onFieldBlurAnalytics = (who: string, e: Event \| CardFocusData) => {\n props.onBlur({ fieldType: who, event: e });\n };\n\n const onBrand = useCallback((obj: CardBrandData) => {\n setInternallyDetectedBrand(obj.brand);\n props.onBrand(obj);\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 mapSfpErrorsToCardInputErrors = (sfpErrors: SFPState['errors']): Partial<CardInputErrorState> => {\n if (!sfpErrors) return {};\n\n return {\n encryptedCardNumber: !!sfpErrors.encryptedCardNumber,\n encryptedExpiryDate: !!sfpErrors.encryptedExpiryDate,\n encryptedSecurityCode: !!sfpErrors.encryptedSecurityCode,\n encryptedPassword: !!sfpErrors.encryptedPassword\n };\n };\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, null) ? 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, ...mapSfpErrorsToCardInputErrors(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 /\n Listen to the full SecureFieldsProvider state and handle actions\n * Used right now to mimic the loading status changes, this can only be done this way\n * Trying to do it via onConfiguSuccess or onChange has side effects\n /\n const handleSFPStateUpdate = useCallback(\n sfpState => {\n mimicLoadingStatusChange(sfpState);\n },\n [showCardUIElements, setShowCardUIElements]\n );\n\n /\n This function implements the same logic that LoadingProvider uses to show and hide elements\n * We want to mimic this behavior so we can hide and show the pay button or the instructions text\n * Deciding to do it this way since we garante there's no DOM changes to merchants\n * We can break this in the next major version (v7)\n /\n const mimicLoadingStatusChange = (sfpState: SFPState) => {\n if (!sfpState.status) return;\n if (sfpState.status == 'loading') {\n setShowCardUIElements(false);\n } else {\n setShowCardUIElements(true);\n }\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 // Use the custom hook to set (or clear) errors in the SRPanel\n const {\n sortedErrorList: currentErrorsSortedByLayout,\n previousSortedErrors,\n clearSRPanel\n } = useSRPanelForCardInputErrors({\n errors,\n props,\n isValidating,\n retrieveLayout,\n specifications,\n billingAddress,\n sfp\n });\n\n // Analytics: ValidationErrors\n useEffect(() => {\n if (currentErrorsSortedByLayout) {\n const newErrors = getArrayDifferences<SortedErrorObject, string>(currentErrorsSortedByLayout, previousSortedErrors, 'field');\n\n newErrors?.forEach(errorItem => {\n const event = new AnalyticsInfoEvent({\n component: props.type,\n type: InfoEventType.validationError,\n target: fieldTypeToSnakeCase(errorItem.field) as UiTarget,\n validationErrorCode: errorItem.errorCode,\n validationErrorMessage: getErrorMessageFromCode(errorItem.errorCode, SF_ErrorCodes)\n });\n props.onSubmitAnalytics(event);\n });\n }\n }, [currentErrorsSortedByLayout]);\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 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 \"Update\" handler related to dual brand buttons being initially displayed\n /\n useEffect(() => {\n if (dualBrandSelectElements.length > 0 && dualBrandSelectElements) {\n const dualBrandsArr: string[] = dualBrandSelectElements.map(item => item.id);\n const brand = dualBrandsArr[0]; // initially selected brand\n const dualBrands = dualBrandsArr.toString();\n\n const showDualBrandSelector = dualBrandSelectElements\n ? requiresDualBrandSelection(DUAL_BRANDS_THAT_NEED_SELECTION_MECHANISM, dualBrandSelectElements, 'id')\n : false;\n\n // Only send analytics event about displaying dualBrand selector for countries that need to show a selection mechanism\n if (showDualBrandSelector) {\n const event = new AnalyticsInfoEvent({\n component: props.type,\n type: InfoEventType.displayed,\n target: UiTarget.dualBrandButton,\n brand,\n configData: { dualBrands }\n });\n\n props.onSubmitAnalytics(event);\n }\n }\n }, [dualBrandSelectElements]);\n\n const previousSelectedBrandValue = usePrevious(selectedBrandValue);\n\n /\n \"Update\" handler related to a dual brand button being selected\n /\n useEffect(() => {\n if (previousSelectedBrandValue?.length && selectedBrandValue?.length) {\n const event = new AnalyticsInfoEvent({\n component: props.type,\n type: InfoEventType.selected,\n target: UiTarget.dualBrandButton,\n brand: selectedBrandValue\n });\n\n props.onSubmitAnalytics(event);\n }\n }, [selectedBrandValue]);\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 onSubmitAnalytics={props.onSubmitAnalytics}\n onChange={handleSecuredFieldsChange}\n onBrand={onBrand}\n onFocus={handleFocus}\n onStateUpdate={handleSFPStateUpdate}\n type={props.brand}\n componentType={props.type}\n disableIOSArrowKeys={props.disableIOSArrowKeys ? handleTouchstartIOS : null}\n render={({ setRootNode, setFocusOn }, sfpState: 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 {showCardUIElements && <FormInstruction />}\n\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\n {props.fastlaneConfiguration && (\n <FastlaneSignup\n {...props.fastlaneConfiguration}\n currentDetectedBrand={internallyDetectedBrand}\n onChange={props.onChange}\n onSubmitAnalytics={props.onSubmitAnalytics}\n type={props.type}\n />\n )}\n\n {showCardUIElements &&\n props.showPayButton &&\n props.payButton({\n status,\n variant: props.isPayButtonPrimaryVariant ? 'primary' : 'secondary',\n icon: getImage({ imageFolder: 'components/' })(`${PREFIX}lock`)\n })}\n </Fragment>\n );\n};\n\nCardInput.defaultProps = defaultProps;\n\nexport default CardInput;\n"],"names":["CardInput","props","sfp","useRef","isValidating","getImage","useImage","billingAddressRef","setAddressRef","ref","current","cardInputRef","Object","keys","length","setComponentRef","hasPanLengthRef","isAutoJumping","specifications","useMemo","Specifications","amount","useAmount","status","setStatus","useState","errors","setErrors","valid","setValid","holderNameRequired","holderName","data","setData","hasHolderName","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","internallyDetectedBrand","setInternallyDetectedBrand","showCardUIElements","setShowCardUIElements","handleChangeFor","triggerValidation","formData","formValid","formErrors","setSchema","setFormData","setFormValid","setFormErrors","useForm","schema","defaultData","formatters","cardInputFormatters","rules","cardInputValidationRules","hasInstallments","shouldShowInstallmentsComponent","installmentOptions","fundingSource","showAmountsInInstallments","showInstallmentAmounts","isKorea","countryCode","showKCP","configuration","koreanAuthenticationRequired","showBrazilianSSN","socialSecurityNumberMode","onFieldFocusAnalytics","who","e","onFocus","fieldType","event","onFieldBlurAnalytics","onBlur","onBrand","useCallback","obj","handleFocus","getFocusHandler","retrieveLayout","getLayout","countrySpecificSchemas","getAddressSchemaForCountry","billingAddressRequiredFields","handleTouchstartIOS","elementType","name","handleAddress","getAddressHandler","doPanAutoJump","getAutoJumpHandler","handleSFPStateUpdate","sfpState","mimicLoadingStatusChange","extensions","CIExtensions","showValidation","clearSRPanel","processBinLookupResponse","binLookupResponse","isReset","processBinLookup","useEffect","setFocusOn","updateStyles","handleUnsupportedCard","destroy","newSchema","taxNumber","addressHasErrors","entries","reduce","acc","error","sortedErrorList","currentErrorsSortedByLayout","previousSortedErrors","useSRPanelForCardInputErrors","newErrors","getArrayDifferences","forEach","errorItem","AnalyticsInfoEvent","component","type","InfoEventType","validationError","target","fieldTypeToSnakeCase","field","validationErrorCode","errorCode","validationErrorMessage","getErrorMessageFromCode","SF_ErrorCodes","onSubmitAnalytics","holderNameValid","sfpValid","addressValid","koreanAuthentication","encryptedPassword","socialSecurityNumberValid","isValid","sfStateErrorsObj","mapErrorsToValidationRuleResult","mergedErrors","onChange","dualBrandsArr","map","item","id","dualBrands","toString","requiresDualBrandSelection","DUAL_BRANDS_THAT_NEED_SELECTION_MECHANISM","displayed","UiTarget","dualBrandButton","configData","previousSelectedBrandValue","usePrevious","selected","FieldToRender","StoredCardFieldsWrapper","CardFieldsWrapper","h","Fragment","SecuredFieldsProvider","extractPropsForSFP","styles","hasKoreanFields","sfState","eventDetails","autoCompleteName","holderNameValidationFn","getRuleByNameAndMode","acHolderName","sfpErrors","autoFocus","ENCRYPTED_CARD_NUMBER","encryptedCardNumber","encryptedExpiryDate","encryptedSecurityCode","onStateUpdate","componentType","disableIOSArrowKeys","render","setRootNode","div","className","classNames","role","FormInstruction","extractPropsForCardFields","handleInstallments","brandsIcons","handleOnStoreDetails","billingAddressValidationRules","getPartialAddressValidationRules","onAddressLookup","onAddressSelected","addressSearchDebounceMs","fastlaneConfiguration","FastlaneSignup","currentDetectedBrand","showPayButton","payButton","variant","isPayButtonPrimaryVariant","icon","imageFolder","PREFIX","defaultProps"],"mappings":"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"}

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

@@ -1,2 +1,2 @@
-import{createElement as r}from"../../../../../../external/preact/dist/preact.js";import{useMemo as a}from"../../../../../../external/preact/hooks/dist/hooks.js";import n from"../../../../../../_virtual/index.js";import{getFullBrandName as e}from"../../utils.js";import{BrandIcons as o}from"../../../../../internal/BrandIcons/BrandIcons.js";const t=({brands:t,activeBrand:s})=>{if(!t?.length)return null;const c="card"!==s,d=a(()=>t.map(r=>({src:r.icon,alt:e(r.name)})),[t]);return r(o,{className:n("adyen-checkout__card__brands",{"adyen-checkout__card__brands--hidden":c}),brandIcons:d,smallIcons:!0,showIconOnError:!0,containerType:"grid"})};export{t as default};
+import{createElement as r}from"../../../../../../external/preact/dist/preact.js";import{useMemo as a}from"../../../../../../external/preact/hooks/dist/hooks.js";import n from"../../../../../../_virtual/index.js";import{getFullBrandName as e}from"../../utils.js";import{BrandIcons as o}from"../../../../../internal/BrandIcons/BrandIcons.js";const t=({brands:t,activeBrand:s})=>{if(!t?.length)return null;const c="card"!==s,d=a(()=>t.map(r=>({src:r.icon,alt:e(r.name)})),[t]);return r(o,{className:n("adyen-checkout__card__brands",{"adyen-checkout__card__brands--hidden":c}),brandIcons:d,smallIcons:!0,showIconOnError:!0,containerType:"grid",ariaHidden:c||void 0})};export{t as default};
 //# sourceMappingURL=AvailableBrands.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"AvailableBrands.js","sources":["../../../../../../../../src/components/Card/components/CardInput/components/AvailableBrands/AvailableBrands.tsx"],"sourcesContent":["import { h } from 'preact';\nimport { useMemo } from 'preact/hooks';\nimport cn from 'classnames';\n\nimport { BrandConfiguration } from '../../../../types';\nimport { getFullBrandName } from '../../utils';\nimport { BrandIcons } from '../../../../../internal/BrandIcons/BrandIcons';\nimport './AvailableBrands.scss';\n\ntype AvailableBrands = Array<BrandConfiguration>;\n\ninterface PaymentMethodBrandsProps {\n brands: AvailableBrands;\n activeBrand: string;\n}\n\nconst AvailableBrands = ({ brands, activeBrand }: Readonly<PaymentMethodBrandsProps>) => {\n if (!brands?.length) {\n return null;\n }\n\n const isValidBrand = activeBrand !== 'card';\n\n const brandIcons = useMemo(\n () =>\n brands.map(brand => ({\n src: brand.icon,\n alt: getFullBrandName(brand.name)\n })),\n [brands]\n );\n\n return (\n <BrandIcons\n className={cn('adyen-checkout__card__brands', {\n 'adyen-checkout__card__brands--hidden': isValidBrand\n })}\n brandIcons={brandIcons}\n smallIcons\n showIconOnError\n containerType=\"grid\"\n />\n );\n};\n\nexport default AvailableBrands;\n"],"names":["AvailableBrands","brands","activeBrand","length","isValidBrand","brandIcons","useMemo","map","brand","src","icon","alt","getFullBrandName","name","h","BrandIcons","className","cn","smallIcons","showIconOnError","containerType"],"mappings":"oVAgBA,MAAMA,EAAkB,EAAGC,SAAQC,kBAC/B,IAAKD,GAAQE,OACT,OAAO,KAGX,MAAMC,EAA+B,SAAhBF,EAEfG,EAAaC,EACf,IACIL,EAAOM,IAAIC,KACPC,IAAKD,EAAME,KACXC,IAAKC,EAAiBJ,EAAMK,SAEpC,CAACZ,IAGL,OACIa,EAACC,EAAAA,CACGC,UAAWC,EAAG,+BAAgC,CAC1C,uCAAwCb,IAE5CC,WAAYA,EACZa,YAAAA,EACAC,iBAAAA,EACAC,cAAc"}
1	+ {"version":3,"file":"AvailableBrands.js","sources":["../../../../../../../../src/components/Card/components/CardInput/components/AvailableBrands/AvailableBrands.tsx"],"sourcesContent":["import { h } from 'preact';\nimport { useMemo } from 'preact/hooks';\nimport cn from 'classnames';\n\nimport { BrandConfiguration } from '../../../../types';\nimport { getFullBrandName } from '../../utils';\nimport { BrandIcons } from '../../../../../internal/BrandIcons/BrandIcons';\nimport './AvailableBrands.scss';\n\ntype AvailableBrands = Array<BrandConfiguration>;\n\ninterface PaymentMethodBrandsProps {\n brands: AvailableBrands;\n activeBrand: string;\n}\n\nconst AvailableBrands = ({ brands, activeBrand }: Readonly<PaymentMethodBrandsProps>) => {\n if (!brands?.length) {\n return null;\n }\n\n const isValidBrand = activeBrand !== 'card';\n\n const brandIcons = useMemo(\n () =>\n brands.map(brand => ({\n src: brand.icon,\n alt: getFullBrandName(brand.name)\n })),\n [brands]\n );\n\n return (\n <BrandIcons\n className={cn('adyen-checkout__card__brands', {\n 'adyen-checkout__card__brands--hidden': isValidBrand\n })}\n brandIcons={brandIcons}\n smallIcons\n showIconOnError\n containerType=\"grid\"\n ariaHidden={isValidBrand \|\| undefined}\n />\n );\n};\n\nexport default AvailableBrands;\n"],"names":["AvailableBrands","brands","activeBrand","length","isValidBrand","brandIcons","useMemo","map","brand","src","icon","alt","getFullBrandName","name","h","BrandIcons","className","cn","smallIcons","showIconOnError","containerType","ariaHidden","undefined"],"mappings":"oVAgBA,MAAMA,EAAkB,EAAGC,SAAQC,kBAC/B,IAAKD,GAAQE,OACT,OAAO,KAGX,MAAMC,EAA+B,SAAhBF,EAEfG,EAAaC,EACf,IACIL,EAAOM,IAAIC,KACPC,IAAKD,EAAME,KACXC,IAAKC,EAAiBJ,EAAMK,SAEpC,CAACZ,IAGL,OACIa,EAACC,EAAAA,CACGC,UAAWC,EAAG,+BAAgC,CAC1C,uCAAwCb,IAE5CC,WAAYA,EACZa,YAAAA,EACAC,iBAAAA,EACAC,cAAc,OACdC,WAAYjB,QAAgBkB"}

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 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 './FieldLabelAlternative';\nimport './CardNumber.scss';\nimport { requiresDualBrandSelection } from '../utils';\nimport { DUAL_BRANDS_THAT_NEED_SELECTION_MECHANISM } from '../../../constants';\nimport DualBrandSelector from './DualBrandSelector';\n\nexport default function CardNumber(props: Readonly<CardNumberProps>) {\n const { i18n } = useCoreContext();\n const {\n error = '',\n isValid = false,\n onFocusField = () => {},\n dualBrandingElements,\n dualBrandingChangeHandler,\n brandsConfiguration,\n selectedBrandValue\n } = props;\n\n const handleIconClick = () => {\n onFocusField(ENCRYPTED_CARD_NUMBER);\n };\n\n const showDualBrandSelector = dualBrandingElements\n ? requiresDualBrandSelection(DUAL_BRANDS_THAT_NEED_SELECTION_MECHANISM, dualBrandingElements, 'id')\n : false;\n\n // Unlike other fields we don't respect the 'showContextualElement' config prop (that the merchant can set to false)\n // We always show the contextual text for dual branding that requires selection\n const contextualText = showDualBrandSelector ? i18n.get('creditCard.dualBrand.description') : undefined;\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 onInputContainerClick={handleIconClick}\n contextualText={contextualText}\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 className={classNames(['adyen-checkout__card__dual-branding__icons'])}>\n {showDualBrandSelector ? (\n <DualBrandSelector\n dualBrandingElements={dualBrandingElements}\n dualBrandingChangeHandler={dualBrandingChangeHandler}\n brandsConfiguration={brandsConfiguration}\n selectedBrandValue={selectedBrandValue}\n />\n ) : (\n dualBrandingElements.map(element => {\n return <BrandIcon key={element.id} brand={element.id} brandsConfiguration={props.brandsConfiguration} />;\n })\n )}\n </div>\n )}\n <span className=\"adyen-checkout__card__dual-branding__sr-only\" aria-live=\"polite\">\n {contextualText}\n </span>\n </Field>\n );\n}\n"],"names":["CardNumber","props","i18n","useCoreContext","error","isValid","onFocusField","dualBrandingElements","dualBrandingChangeHandler","brandsConfiguration","selectedBrandValue","showDualBrandSelector","requiresDualBrandSelection","DUAL_BRANDS_THAT_NEED_SELECTION_MECHANISM","contextualText","get","undefined","h","Field","label","focused","filled","classNameModifiers","ENCRYPTED_CARD_NUMBER","errorMessage","dir","name","showValidIcon","contextVisibleToScreenReader","useLabelElement","renderAlternativeToLabel","alternativeLabelContent","onInputContainerClick","DataSfSpan","encryptedFieldType","className","classNames","showBrandIcon","BrandIcon","brand","div","DualBrandSelector","map","element","key","id","span","aria-live"],"mappings":"wpBAce,SAASA,EAAWC,GAC/B,MAAMC,KAAEA,GAASC,KACXC,MACFA,EAAQ,GAAEC,QACVA,GAAU,EAAKC,aACfA,EAAe,OAAQC,qBACvBA,EAAoBC,0BACpBA,EAAyBC,oBACzBA,EAAmBC,mBACnBA,GACAT,EAMEU,IAAwBJ,GACxBK,EAA2BC,EAA2CN,EAAsB,MAK5FO,EAAiBH,EAAwBT,EAAKa,IAAI,yCAAsCC,EAE9F,OACIC,EAACC,EAAAA,CACGC,MAAOlB,EAAMkB,MACbC,QAASnB,EAAMmB,QACfC,OAAQpB,EAAMoB,OACdC,mBAAoB,CAAC,cACrBhB,aAAc,IAAMA,EAAaiB,GACjCC,aAAcpB,EACdC,QAASA,EACToB,IAAK,MACLC,KAAMH,EACNI,eAAe,EACfzB,KAAMA,EACN0B,8BAA8B,EAC9BC,iBAAiB,EACjBC,yBAA0BC,EAC1BC,sBA5BgB,KACpB1B,EAAaiB,IA4BTT,eAAgBA,GAEhBG,EAACgB,EAAAA,CACGC,mBAAoBX,EACpBY,UAAWC,EAAW,CAClB,yBAAyB,EACzB,gCAAgC,EAChC,2CAA2C,EAC3C,+BAAgChC,EAChC,+BAAgCH,EAAMmB,QACtC,+BAAgCf,EAChC,oDAAqDJ,EAAMoC,kBAIlEpC,EAAMoC,gBAAkB9B,GAAwBU,EAACqB,EAAAA,CAAU7B,oBAAqBR,EAAMQ,oBAAqB8B,MAAOtC,EAAMsC,QAExHhC,IAAyBH,GACtBa,EAACuB,MAAAA,CAAIL,UAAWC,EAAW,CAAC,gDACvBzB,EACGM,EAACwB,EAAAA,CACGlC,qBAAsBA,EACtBC,0BAA2BA,EAC3BC,oBAAqBA,EACrBC,mBAAoBA,IAGxBH,EAAqBmC,IAAIC,GACd1B,EAACqB,EAAAA,CAAUM,IAAKD,EAAQE,GAAIN,MAAOI,EAAQE,GAAIpC,oBAAqBR,EAAMQ,wBAKjGQ,EAAC6B,OAAAA,CAAKX,UAAU,+CAA+CY,YAAU,UACpEjC,GAIjB"}
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 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 './FieldLabelAlternative';\nimport './CardNumber.scss';\nimport { requiresDualBrandSelection } from '../utils';\nimport { DUAL_BRANDS_THAT_NEED_SELECTION_MECHANISM } from '../../../constants';\nimport DualBrandSelector from './DualBrandSelector';\n\nexport default function CardNumber(props: Readonly<CardNumberProps>) {\n const { i18n } = useCoreContext();\n const {\n error = '',\n isValid = false,\n onFocusField = () => {},\n dualBrandingElements,\n dualBrandingChangeHandler,\n brandsConfiguration,\n selectedBrandValue\n } = props;\n\n const handleIconClick = () => {\n onFocusField(ENCRYPTED_CARD_NUMBER);\n };\n\n const showDualBrandSelector = dualBrandingElements\n ? requiresDualBrandSelection(DUAL_BRANDS_THAT_NEED_SELECTION_MECHANISM, dualBrandingElements, 'id')\n : false;\n\n // Unlike other fields we don't respect the 'showContextualElement' config prop (that the merchant can set to false)\n // We always show the contextual text for dual branding that requires selection\n const contextualText = showDualBrandSelector ? i18n.get('creditCard.dualBrand.description') : undefined;\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 onInputContainerClick={handleIconClick}\n contextualText={contextualText}\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 />\n\n {props.showBrandIcon && !dualBrandingElements && <BrandIcon brandsConfiguration={props.brandsConfiguration} brand={props.brand} />}\n\n {dualBrandingElements && !error && (\n <div className={classNames(['adyen-checkout__card__dual-branding__icons'])}>\n {showDualBrandSelector ? (\n <DualBrandSelector\n dualBrandingElements={dualBrandingElements}\n dualBrandingChangeHandler={dualBrandingChangeHandler}\n brandsConfiguration={brandsConfiguration}\n selectedBrandValue={selectedBrandValue}\n />\n ) : (\n dualBrandingElements.map(element => {\n return <BrandIcon key={element.id} brand={element.id} brandsConfiguration={props.brandsConfiguration} />;\n })\n )}\n </div>\n )}\n <span className=\"adyen-checkout__card__dual-branding__sr-only\" aria-live=\"polite\">\n {contextualText}\n </span>\n </Field>\n );\n}\n"],"names":["CardNumber","props","i18n","useCoreContext","error","isValid","onFocusField","dualBrandingElements","dualBrandingChangeHandler","brandsConfiguration","selectedBrandValue","showDualBrandSelector","requiresDualBrandSelection","DUAL_BRANDS_THAT_NEED_SELECTION_MECHANISM","contextualText","get","undefined","h","Field","label","focused","filled","classNameModifiers","ENCRYPTED_CARD_NUMBER","errorMessage","dir","name","showValidIcon","contextVisibleToScreenReader","useLabelElement","renderAlternativeToLabel","alternativeLabelContent","onInputContainerClick","DataSfSpan","encryptedFieldType","className","classNames","showBrandIcon","BrandIcon","brand","div","DualBrandSelector","map","element","key","id","span","aria-live"],"mappings":"wpBAce,SAASA,EAAWC,GAC/B,MAAMC,KAAEA,GAASC,KACXC,MACFA,EAAQ,GAAEC,QACVA,GAAU,EAAKC,aACfA,EAAe,OAAQC,qBACvBA,EAAoBC,0BACpBA,EAAyBC,oBACzBA,EAAmBC,mBACnBA,GACAT,EAMEU,IAAwBJ,GACxBK,EAA2BC,EAA2CN,EAAsB,MAK5FO,EAAiBH,EAAwBT,EAAKa,IAAI,yCAAsCC,EAE9F,OACIC,EAACC,EAAAA,CACGC,MAAOlB,EAAMkB,MACbC,QAASnB,EAAMmB,QACfC,OAAQpB,EAAMoB,OACdC,mBAAoB,CAAC,cACrBhB,aAAc,IAAMA,EAAaiB,GACjCC,aAAcpB,EACdC,QAASA,EACToB,IAAK,MACLC,KAAMH,EACNI,eAAe,EACfzB,KAAMA,EACN0B,8BAA8B,EAC9BC,iBAAiB,EACjBC,yBAA0BC,EAC1BC,sBA5BgB,KACpB1B,EAAaiB,IA4BTT,eAAgBA,GAEhBG,EAACgB,EAAAA,CACGC,mBAAoBX,EACpBY,UAAWC,EAAW,CAClB,yBAAyB,EACzB,gCAAgC,EAChC,2CAA2C,EAC3C,+BAAgChC,EAChC,+BAAgCH,EAAMmB,QACtC,+BAAgCf,EAChC,oDAAqDJ,EAAMoC,kBAIlEpC,EAAMoC,gBAAkB9B,GAAwBU,EAACqB,EAAAA,CAAU7B,oBAAqBR,EAAMQ,oBAAqB8B,MAAOtC,EAAMsC,QAExHhC,IAAyBH,GACtBa,EAACuB,MAAAA,CAAIL,UAAWC,EAAW,CAAC,gDACvBzB,EACGM,EAACwB,EAAAA,CACGlC,qBAAsBA,EACtBC,0BAA2BA,EAC3BC,oBAAqBA,EACrBC,mBAAoBA,IAGxBH,EAAqBmC,IAAIC,GACd1B,EAACqB,EAAAA,CAAUM,IAAKD,EAAQE,GAAIN,MAAOI,EAAQE,GAAIpC,oBAAqBR,EAAMQ,wBAKjGQ,EAAC6B,OAAAA,CAAKX,UAAU,+CAA+CY,YAAU,UACpEjC,GAIjB"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"utils.js","sources":["../../../../../../src/components/Card/components/CardInput/utils.ts"],"sourcesContent":["import Language from '../../../../language/Language';\nimport { AddressModeOptions, CardInputProps, LayoutObj } from './types';\nimport {\n CREDIT_CARD,\n CREDIT_CARD_NAME_BOTTOM,\n CREDIT_CARD_NAME_TOP,\n KCP_CARD,\n KCP_CARD_NAME_BOTTOM,\n KCP_CARD_NAME_TOP,\n SSN_CARD,\n SSN_CARD_NAME_BOTTOM,\n SSN_CARD_NAME_TOP\n} from './layouts';\nimport { AddressSpecifications, StringObject } from '../../../internal/Address/types';\nimport { PARTIAL_ADDRESS_SCHEMA } from '../../../internal/Address/constants';\nimport type { InstallmentOptions, InstallmentsState } from './components/Installments/Installments';\nimport { SFPProps } from '../../../internal/SecuredFields/SFP/types';\nimport { BRAND_READABLE_NAME_MAP } from '../../../internal/SecuredFields/lib/constants';\nimport useImage, { UseImageHookType } from '../../../../core/Context/useImage';\nimport { SF_ErrorCodes } from '../../../../core/Errors/constants';\nimport { BrandObject, CardBrandsConfiguration, DualBrandSelectElement, DualBrandButtons } from '../../types';\nimport { PaymentAmount } from '../../../../types';\n\nexport const getCardImageUrl = (brand: string, getImage: UseImageHookType): string => {\n const imageOptions = {\n type: brand === 'card' ? 'nocard' : brand \|\| 'nocard',\n extension: 'svg'\n };\n\n return getImage(imageOptions)(brand);\n};\n\n/*\n 'installments' should be added to the payload if it has plan as revolving or bonus\n * or value greater than 1.\n \n More about it here: COWEB-1070\n /\nexport const shouldIncludeInstallmentsInPaymentData = (installment?: InstallmentsState): boolean => {\n return ['revolving', 'bonus'].includes(installment?.plan) \|\| installment?.value > 1;\n};\n\nexport const getLayout = ({\n props,\n showKCP,\n showBrazilianSSN,\n countrySpecificSchemas = null,\n billingAddressRequiredFields = null\n}: LayoutObj): string[] => {\n let layout = CREDIT_CARD;\n const hasRequiredHolderName = props.hasHolderName && props.holderNameRequired;\n\n if (hasRequiredHolderName) {\n layout = props.positionHolderNameOnTop ? CREDIT_CARD_NAME_TOP : CREDIT_CARD_NAME_BOTTOM;\n }\n\n if (showKCP) {\n layout = KCP_CARD;\n if (hasRequiredHolderName) {\n layout = props.positionHolderNameOnTop ? KCP_CARD_NAME_TOP : KCP_CARD_NAME_BOTTOM;\n }\n }\n\n if (showBrazilianSSN) {\n layout = SSN_CARD;\n if (hasRequiredHolderName) {\n layout = props.positionHolderNameOnTop ? SSN_CARD_NAME_TOP : SSN_CARD_NAME_BOTTOM;\n }\n }\n\n // w. Billing address\n if (countrySpecificSchemas) {\n // Flatten array and remove any numbers that describe how fields should be aligned\n const countrySpecificSchemasFlat: string[] = countrySpecificSchemas['flat'](2).filter(item => typeof item !== 'number') as string[];\n\n let countryBasedAddressLayout = countrySpecificSchemasFlat;\n\n if (billingAddressRequiredFields) {\n // Get intersection of the 2 arrays\n countryBasedAddressLayout = countrySpecificSchemasFlat.filter(x => billingAddressRequiredFields.includes(x));\n }\n\n layout = CREDIT_CARD.concat(countryBasedAddressLayout);\n if (hasRequiredHolderName) {\n layout = props.positionHolderNameOnTop\n ? CREDIT_CARD_NAME_TOP.concat(countryBasedAddressLayout)\n : CREDIT_CARD_NAME_BOTTOM.concat(countryBasedAddressLayout);\n }\n // TODO we are not yet creating a layout for AVS + SSN field (w. or w/o holderName) - is AVS + SSN a real world scenario?\n }\n return layout;\n};\n\n/\n Lookup service to map local (CardInput) field refs to a key, possibly region specific, by which to retrieve the translation\n /\nexport const mapFieldKey = (key: string, i18n: Language, countrySpecificLabels: StringObject): string => {\n // console.log('### utils::mapFieldKey:: key', key);\n switch (key) {\n case 'socialSecurityNumber':\n return i18n.get(`boleto.${key}`);\n // Address related - if we have a country specific key for the field - use that to get the translation\n case 'street':\n case 'houseNumberOrName':\n case 'postalCode':\n case 'stateOrProvince':\n case 'city':\n case 'country':\n return countrySpecificLabels?.[key] ? i18n.get(countrySpecificLabels?.[key]) : i18n.get(key);\n // We know that the translated error messages do contain a reference to the field they refer to, so we won't need to map them (currently applies mostly to SecuredFields related errors)\n default:\n return null;\n }\n};\n\nexport const extractPropsForCardFields = (props: CardInputProps) => {\n return {\n // Extract props for CardFieldsWrapper & StoredCardFieldsWrapper(just needs hasCVC, installmentOptions)\n billingAddressRequired: props.billingAddressRequired,\n billingAddressRequiredFields: props.billingAddressRequiredFields,\n billingAddressAllowedCountries: props.billingAddressAllowedCountries,\n brandsConfiguration: props.brandsConfiguration,\n showStoreDetailsCheckbox: props.showStoreDetailsCheckbox,\n hasCVC: props.hasCVC,\n hasHolderName: props.hasHolderName,\n holderNameRequired: props.holderNameRequired,\n installmentOptions: props.installmentOptions,\n placeholders: props.placeholders,\n positionHolderNameOnTop: props.positionHolderNameOnTop,\n // Extract props for CardFields > CardNumber\n showBrandIcon: props.showBrandIcon,\n showContextualElement: props.showContextualElement,\n // Extract props for StoredCardFields\n lastFour: props.lastFour,\n expiryMonth: props.expiryMonth,\n expiryYear: props.expiryYear,\n disclaimerMessage: props.disclaimerMessage\n };\n};\n\nexport const extractPropsForSFP = (props: CardInputProps): Pick<SFPProps, 'clientKey' \| 'loadingContext'> & Partial<SFPProps> => {\n return {\n autoFocus: props.autoFocus,\n brands: props.brands,\n brandsConfiguration: props.brandsConfiguration,\n clientKey: props.clientKey,\n countryCode: props.countryCode,\n forceCompat: props.forceCompat,\n i18n: props.i18n,\n implementationType: props.implementationType,\n keypadFix: props.keypadFix,\n legacyInputMode: props.legacyInputMode,\n loadingContext: props.loadingContext,\n maskSecurityCode: props.maskSecurityCode,\n exposeExpiryDate: props.exposeExpiryDate,\n minimumExpiryDate: props.minimumExpiryDate,\n onAdditionalSFConfig: props.onAdditionalSFConfig,\n onAdditionalSFRemoved: props.onAdditionalSFRemoved,\n onAllValid: props.onAllValid,\n onAutoComplete: props.onAutoComplete,\n onBinValue: props.onBinValue,\n onConfigSuccess: props.onConfigSuccess,\n handleKeyPress: props.handleKeyPress,\n onError: props.onError,\n onFieldValid: props.onFieldValid,\n onLoad: props.onLoad,\n placeholders: props.placeholders,\n resources: props.resources,\n showContextualElement: props.showContextualElement,\n showWarnings: props.showWarnings,\n trimTrailingSeparator: props.trimTrailingSeparator\n };\n};\n\nexport const handlePartialAddressMode = (addressMode: AddressModeOptions): AddressSpecifications \| null => {\n return addressMode == AddressModeOptions.partial ? PARTIAL_ADDRESS_SCHEMA : null;\n};\n\n// Almost all errors are blur based, but some SF ones are not i.e. when an unsupported card is entered or the expiry date is out of range\nexport function lookupBlurBasedErrors(errorCode) {\n // If it's NOT one of these, then it's a blur based error\n return ![\n SF_ErrorCodes.ERROR_MSG_UNSUPPORTED_CARD_ENTERED,\n SF_ErrorCodes.ERROR_MSG_CARD_TOO_OLD,\n SF_ErrorCodes.ERROR_MSG_CARD_TOO_FAR_IN_FUTURE,\n SF_ErrorCodes.ERROR_MSG_CARD_EXPIRES_TOO_SOON\n ].includes(errorCode);\n}\n\nexport function getFullBrandName(brand: string): string {\n return BRAND_READABLE_NAME_MAP[brand] ?? brand;\n}\n\nexport const mapDualBrandButtons = (\n dualBrandSelectElements: DualBrandSelectElement[],\n brandsConfiguration?: CardBrandsConfiguration\n): DualBrandButtons[] => {\n return dualBrandSelectElements.map(item => {\n const brand = item.id;\n const getImage = useImage();\n const imageName = brand === 'card' ? 'nocard' : brand;\n const imageURL = brandsConfiguration?.[brand]?.icon ?? getCardImageUrl(imageName, getImage);\n\n // TODO - check below if we have to still generate altName through the mapping function or whether it just\n // corresponds to item.brandObject.localeBrand\n return {\n id: item.id,\n name: item.brandObject.localeBrand \|\| item.brandObject.brand,\n imageURL,\n altName: getFullBrandName(brand)\n };\n });\n};\n\n/\n Checks if any of the brands requiring a selection mechanism are present in the binLookup response.\n \n If the result from Array.some is true - then we are in a dual branding scenario that requires selection, i.e.\n * - Show the dualBranding selector UI\n * - Preselect a card brand\n /\nexport const requiresDualBrandSelection = (\n brandsRequiringSelection: readonly string[],\n returnedDualBrandingObjects: DualBrandSelectElement[] \| BrandObject[],\n key: string\n) => returnedDualBrandingObjects.some(item => brandsRequiringSelection.includes(item[key]));\n\n/\n Determines whether the Installments component should be rendered.\n \n Installments Component is displayed when:\n * - installmentOptions is provided and not empty\n * - amount is provided and not zero\n * - fundingSource is not provided or is 'credit'\n \n @param params.installmentOptions - The installment configuration options\n * @param params.fundingSource - The card funding source (e.g. 'credit', 'debit')\n * @param params.amount - The payment amount\n * @returns Whether the Installments component should be rendered\n */\nexport const shouldShowInstallmentsComponent = ({\n installmentOptions,\n fundingSource,\n amount\n}: {\n installmentOptions?: InstallmentOptions;\n fundingSource?: string;\n amount?: PaymentAmount;\n}): boolean => {\n if (!installmentOptions \|\| Object.keys(installmentOptions).length === 0) return false;\n if (!amount \|\| amount.value === 0) return false;\n if (fundingSource && fundingSource !== 'credit') return false;\n\n return true;\n};\n"],"names":["getCardImageUrl","brand","getImage","type","extension","shouldIncludeInstallmentsInPaymentData","installment","includes","plan","value","getLayout","props","showKCP","showBrazilianSSN","countrySpecificSchemas","billingAddressRequiredFields","layout","CREDIT_CARD","hasRequiredHolderName","hasHolderName","holderNameRequired","positionHolderNameOnTop","CREDIT_CARD_NAME_TOP","CREDIT_CARD_NAME_BOTTOM","KCP_CARD","KCP_CARD_NAME_TOP","KCP_CARD_NAME_BOTTOM","SSN_CARD","SSN_CARD_NAME_TOP","SSN_CARD_NAME_BOTTOM","countrySpecificSchemasFlat","filter","item","countryBasedAddressLayout","x","concat","mapFieldKey","key","i18n","countrySpecificLabels","get","extractPropsForCardFields","billingAddressRequired","billingAddressAllowedCountries","brandsConfiguration","showStoreDetailsCheckbox","hasCVC","installmentOptions","placeholders","showBrandIcon","showContextualElement","lastFour","expiryMonth","expiryYear","disclaimerMessage","extractPropsForSFP","autoFocus","brands","clientKey","countryCode","forceCompat","implementationType","keypadFix","legacyInputMode","loadingContext","maskSecurityCode","exposeExpiryDate","minimumExpiryDate","onAdditionalSFConfig","onAdditionalSFRemoved","onAllValid","onAutoComplete","onBinValue","onConfigSuccess","handleKeyPress","onError","onFieldValid","onLoad","resources","showWarnings","trimTrailingSeparator","handlePartialAddressMode","addressMode","AddressModeOptions","partial","PARTIAL_ADDRESS_SCHEMA","lookupBlurBasedErrors","errorCode","SF_ErrorCodes","ERROR_MSG_UNSUPPORTED_CARD_ENTERED","ERROR_MSG_CARD_TOO_OLD","ERROR_MSG_CARD_TOO_FAR_IN_FUTURE","ERROR_MSG_CARD_EXPIRES_TOO_SOON","getFullBrandName","BRAND_READABLE_NAME_MAP","mapDualBrandButtons","dualBrandSelectElements","map","id","useImage","imageName","imageURL","icon","name","brandObject","localeBrand","altName","requiresDualBrandSelection","brandsRequiringSelection","returnedDualBrandingObjects","some","shouldShowInstallmentsComponent","fundingSource","amount","Object","keys","length"],"mappings":"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"}
1	+ {"version":3,"file":"utils.js","sources":["../../../../../../src/components/Card/components/CardInput/utils.ts"],"sourcesContent":["import Language from '../../../../language/Language';\nimport { AddressModeOptions, CardInputProps, LayoutObj } from './types';\nimport {\n CREDIT_CARD,\n CREDIT_CARD_NAME_BOTTOM,\n CREDIT_CARD_NAME_TOP,\n KCP_CARD,\n KCP_CARD_NAME_BOTTOM,\n KCP_CARD_NAME_TOP,\n SSN_CARD,\n SSN_CARD_NAME_BOTTOM,\n SSN_CARD_NAME_TOP\n} from './layouts';\nimport { AddressSpecifications, StringObject } from '../../../internal/Address/types';\nimport { PARTIAL_ADDRESS_SCHEMA } from '../../../internal/Address/constants';\nimport type { InstallmentOptions, InstallmentsState } from './components/Installments/Installments';\nimport { SFPProps } from '../../../internal/SecuredFields/SFP/types';\nimport { BRAND_READABLE_NAME_MAP } from '../../../internal/SecuredFields/lib/constants';\nimport useImage, { UseImageHookType } from '../../../../core/Context/useImage';\nimport { SF_ErrorCodes } from '../../../../core/Errors/constants';\nimport { BrandObject, CardBrandsConfiguration, DualBrandSelectElement, DualBrandButtons } from '../../types';\nimport { PaymentAmount } from '../../../../types';\n\nexport const getCardImageUrl = (brand: string, getImage: UseImageHookType): string => {\n const imageOptions = {\n type: brand === 'card' ? 'nocard' : brand \|\| 'nocard',\n extension: 'svg'\n };\n\n return getImage(imageOptions)(brand);\n};\n\n/*\n 'installments' should be added to the payload if it has plan as revolving or bonus\n * or value greater than 1.\n \n More about it here: COWEB-1070\n /\nexport const shouldIncludeInstallmentsInPaymentData = (installment?: InstallmentsState): boolean => {\n return ['revolving', 'bonus'].includes(installment?.plan) \|\| installment?.value > 1;\n};\n\nexport const getLayout = ({\n props,\n showKCP,\n showBrazilianSSN,\n countrySpecificSchemas = null,\n billingAddressRequiredFields = null\n}: LayoutObj): string[] => {\n let layout = CREDIT_CARD;\n const hasRequiredHolderName = props.hasHolderName && props.holderNameRequired;\n\n if (hasRequiredHolderName) {\n layout = props.positionHolderNameOnTop ? CREDIT_CARD_NAME_TOP : CREDIT_CARD_NAME_BOTTOM;\n }\n\n if (showKCP) {\n layout = KCP_CARD;\n if (hasRequiredHolderName) {\n layout = props.positionHolderNameOnTop ? KCP_CARD_NAME_TOP : KCP_CARD_NAME_BOTTOM;\n }\n }\n\n if (showBrazilianSSN) {\n layout = SSN_CARD;\n if (hasRequiredHolderName) {\n layout = props.positionHolderNameOnTop ? SSN_CARD_NAME_TOP : SSN_CARD_NAME_BOTTOM;\n }\n }\n\n // w. Billing address\n if (countrySpecificSchemas) {\n // Flatten array and remove any numbers that describe how fields should be aligned\n const countrySpecificSchemasFlat: string[] = countrySpecificSchemas['flat'](2).filter(item => typeof item !== 'number');\n\n let countryBasedAddressLayout = countrySpecificSchemasFlat;\n\n if (billingAddressRequiredFields) {\n // Get intersection of the 2 arrays\n countryBasedAddressLayout = countrySpecificSchemasFlat.filter(x => billingAddressRequiredFields.includes(x));\n }\n\n layout = CREDIT_CARD.concat(countryBasedAddressLayout);\n if (hasRequiredHolderName) {\n layout = props.positionHolderNameOnTop\n ? CREDIT_CARD_NAME_TOP.concat(countryBasedAddressLayout)\n : CREDIT_CARD_NAME_BOTTOM.concat(countryBasedAddressLayout);\n }\n // TODO we are not yet creating a layout for AVS + SSN field (w. or w/o holderName) - is AVS + SSN a real world scenario?\n }\n return layout;\n};\n\n/\n Lookup service to map local (CardInput) field refs to a key, possibly region specific, by which to retrieve the translation\n /\nexport const mapFieldKey = (key: string, i18n: Language, countrySpecificLabels: StringObject): string => {\n // console.log('### utils::mapFieldKey:: key', key);\n switch (key) {\n case 'socialSecurityNumber':\n return i18n.get(`boleto.${key}`);\n // Address related - if we have a country specific key for the field - use that to get the translation\n case 'street':\n case 'houseNumberOrName':\n case 'postalCode':\n case 'stateOrProvince':\n case 'city':\n case 'country':\n return countrySpecificLabels?.[key] ? i18n.get(countrySpecificLabels?.[key]) : i18n.get(key);\n // We know that the translated error messages do contain a reference to the field they refer to, so we won't need to map them (currently applies mostly to SecuredFields related errors)\n default:\n return null;\n }\n};\n\nexport const extractPropsForCardFields = (props: CardInputProps) => {\n return {\n // Extract props for CardFieldsWrapper & StoredCardFieldsWrapper(just needs hasCVC, installmentOptions)\n billingAddressRequired: props.billingAddressRequired,\n billingAddressRequiredFields: props.billingAddressRequiredFields,\n billingAddressAllowedCountries: props.billingAddressAllowedCountries,\n brandsConfiguration: props.brandsConfiguration,\n showStoreDetailsCheckbox: props.showStoreDetailsCheckbox,\n hasCVC: props.hasCVC,\n hasHolderName: props.hasHolderName,\n holderNameRequired: props.holderNameRequired,\n installmentOptions: props.installmentOptions,\n placeholders: props.placeholders,\n positionHolderNameOnTop: props.positionHolderNameOnTop,\n // Extract props for CardFields > CardNumber\n showBrandIcon: props.showBrandIcon,\n showContextualElement: props.showContextualElement,\n // Extract props for StoredCardFields\n lastFour: props.lastFour,\n expiryMonth: props.expiryMonth,\n expiryYear: props.expiryYear,\n disclaimerMessage: props.disclaimerMessage\n };\n};\n\nexport const extractPropsForSFP = (props: CardInputProps): Pick<SFPProps, 'clientKey' \| 'loadingContext'> & Partial<SFPProps> => {\n return {\n autoFocus: props.autoFocus,\n brands: props.brands,\n brandsConfiguration: props.brandsConfiguration,\n clientKey: props.clientKey,\n countryCode: props.countryCode,\n forceCompat: props.forceCompat,\n i18n: props.i18n,\n implementationType: props.implementationType,\n keypadFix: props.keypadFix,\n legacyInputMode: props.legacyInputMode,\n loadingContext: props.loadingContext,\n maskSecurityCode: props.maskSecurityCode,\n exposeExpiryDate: props.exposeExpiryDate,\n minimumExpiryDate: props.minimumExpiryDate,\n onAdditionalSFConfig: props.onAdditionalSFConfig,\n onAdditionalSFRemoved: props.onAdditionalSFRemoved,\n onAllValid: props.onAllValid,\n onAutoComplete: props.onAutoComplete,\n onBinValue: props.onBinValue,\n onConfigSuccess: props.onConfigSuccess,\n handleKeyPress: props.handleKeyPress,\n onError: props.onError,\n onFieldValid: props.onFieldValid,\n onLoad: props.onLoad,\n placeholders: props.placeholders,\n resources: props.resources,\n showContextualElement: props.showContextualElement,\n showWarnings: props.showWarnings,\n trimTrailingSeparator: props.trimTrailingSeparator\n };\n};\n\nexport const handlePartialAddressMode = (addressMode: AddressModeOptions): AddressSpecifications \| null => {\n return addressMode == AddressModeOptions.partial ? PARTIAL_ADDRESS_SCHEMA : null;\n};\n\n// Almost all errors are blur based, but some SF ones are not i.e. when an unsupported card is entered or the expiry date is out of range\nexport function lookupBlurBasedErrors(errorCode) {\n // If it's NOT one of these, then it's a blur based error\n return ![\n SF_ErrorCodes.ERROR_MSG_UNSUPPORTED_CARD_ENTERED,\n SF_ErrorCodes.ERROR_MSG_CARD_TOO_OLD,\n SF_ErrorCodes.ERROR_MSG_CARD_TOO_FAR_IN_FUTURE,\n SF_ErrorCodes.ERROR_MSG_CARD_EXPIRES_TOO_SOON\n ].includes(errorCode);\n}\n\nexport function getFullBrandName(brand: string): string {\n return BRAND_READABLE_NAME_MAP[brand] ?? brand;\n}\n\nexport const mapDualBrandButtons = (\n dualBrandSelectElements: DualBrandSelectElement[],\n brandsConfiguration?: CardBrandsConfiguration\n): DualBrandButtons[] => {\n return dualBrandSelectElements.map(item => {\n const brand = item.id;\n const getImage = useImage();\n const imageName = brand === 'card' ? 'nocard' : brand;\n const imageURL = brandsConfiguration?.[brand]?.icon ?? getCardImageUrl(imageName, getImage);\n\n // TODO - check below if we have to still generate altName through the mapping function or whether it just\n // corresponds to item.brandObject.localeBrand\n return {\n id: item.id,\n name: item.brandObject.localeBrand \|\| item.brandObject.brand,\n imageURL,\n altName: getFullBrandName(brand)\n };\n });\n};\n\n/\n Checks if any of the brands requiring a selection mechanism are present in the binLookup response.\n \n If the result from Array.some is true - then we are in a dual branding scenario that requires selection, i.e.\n * - Show the dualBranding selector UI\n * - Preselect a card brand\n /\nexport const requiresDualBrandSelection = (\n brandsRequiringSelection: readonly string[],\n returnedDualBrandingObjects: DualBrandSelectElement[] \| BrandObject[],\n key: string\n) => returnedDualBrandingObjects.some(item => brandsRequiringSelection.includes(item[key]));\n\n/\n Determines whether the Installments component should be rendered.\n \n Installments Component is displayed when:\n * - installmentOptions is provided and not empty\n * - amount is provided and not zero\n * - fundingSource is not provided or is 'credit'\n \n @param params.installmentOptions - The installment configuration options\n * @param params.fundingSource - The card funding source (e.g. 'credit', 'debit')\n * @param params.amount - The payment amount\n * @returns Whether the Installments component should be rendered\n */\nexport const shouldShowInstallmentsComponent = ({\n installmentOptions,\n fundingSource,\n amount\n}: {\n installmentOptions?: InstallmentOptions;\n fundingSource?: string;\n amount?: PaymentAmount;\n}): boolean => {\n if (!installmentOptions \|\| Object.keys(installmentOptions).length === 0) return false;\n if (!amount \|\| amount.value === 0) return false;\n if (fundingSource && fundingSource !== 'credit') return false;\n\n return true;\n};\n"],"names":["getCardImageUrl","brand","getImage","type","extension","shouldIncludeInstallmentsInPaymentData","installment","includes","plan","value","getLayout","props","showKCP","showBrazilianSSN","countrySpecificSchemas","billingAddressRequiredFields","layout","CREDIT_CARD","hasRequiredHolderName","hasHolderName","holderNameRequired","positionHolderNameOnTop","CREDIT_CARD_NAME_TOP","CREDIT_CARD_NAME_BOTTOM","KCP_CARD","KCP_CARD_NAME_TOP","KCP_CARD_NAME_BOTTOM","SSN_CARD","SSN_CARD_NAME_TOP","SSN_CARD_NAME_BOTTOM","countrySpecificSchemasFlat","filter","item","countryBasedAddressLayout","x","concat","mapFieldKey","key","i18n","countrySpecificLabels","get","extractPropsForCardFields","billingAddressRequired","billingAddressAllowedCountries","brandsConfiguration","showStoreDetailsCheckbox","hasCVC","installmentOptions","placeholders","showBrandIcon","showContextualElement","lastFour","expiryMonth","expiryYear","disclaimerMessage","extractPropsForSFP","autoFocus","brands","clientKey","countryCode","forceCompat","implementationType","keypadFix","legacyInputMode","loadingContext","maskSecurityCode","exposeExpiryDate","minimumExpiryDate","onAdditionalSFConfig","onAdditionalSFRemoved","onAllValid","onAutoComplete","onBinValue","onConfigSuccess","handleKeyPress","onError","onFieldValid","onLoad","resources","showWarnings","trimTrailingSeparator","handlePartialAddressMode","addressMode","AddressModeOptions","partial","PARTIAL_ADDRESS_SCHEMA","lookupBlurBasedErrors","errorCode","SF_ErrorCodes","ERROR_MSG_UNSUPPORTED_CARD_ENTERED","ERROR_MSG_CARD_TOO_OLD","ERROR_MSG_CARD_TOO_FAR_IN_FUTURE","ERROR_MSG_CARD_EXPIRES_TOO_SOON","getFullBrandName","BRAND_READABLE_NAME_MAP","mapDualBrandButtons","dualBrandSelectElements","map","id","useImage","imageName","imageURL","icon","name","brandObject","localeBrand","altName","requiresDualBrandSelection","brandsRequiringSelection","returnedDualBrandingObjects","some","shouldShowInstallmentsComponent","fundingSource","amount","Object","keys","length"],"mappings":"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"}

package/dist/es/components/Card/components/Fastlane/USOnlyPhoneInput.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{createElement as e}from"../../../../external/preact/dist/preact.js";import{useRef as r,useCallback as o,useEffect as t}from"../../../../external/preact/hooks/dist/hooks.js";import l from"../../../internal/FormFields/Field/Field.js";import m from"../../../../utils/useForm/useForm.js";import a from"../../../internal/FormFields/InputTelephone.js";import{useCoreContext as i}from"../../../../core/Context/CoreProvider.js";import n from"./utils/mobile-number-formatter.js";const u=({initialValue:u,onChange:s})=>{const{i18n:b}=i(),{handleChangeFor:c,data:f}=m({schema:["mobileNumber"],defaultData:{mobileNumber:u},formatters:{mobileNumber:n}}),p=r(null),d=o(()=>{p.current?.focus()},[p.current]);return t(()=>{s(f.mobileNumber?.replaceAll(" ",""))},[f.mobileNumber,s]),e(l,{name:"mobile-number",label:b.get("card.fastlane.mobileInputLabel"),staticValue:"+1",onInputContainerClick:d},e(a,{name:"mobile-number",autocorrect:"off",spellcheck:!1,maxlength:12,value:f.mobileNumber,onInput:c("mobileNumber","input"),onBlur:c("mobileNumber","blur"),setRef:p}))};export{u as default};
+import{createElement as e}from"../../../../external/preact/dist/preact.js";import{useRef as r,useCallback as t,useEffect as o}from"../../../../external/preact/hooks/dist/hooks.js";import l from"../../../internal/FormFields/Field/Field.js";import m from"../../../../utils/useForm/useForm.js";import"../../../internal/SecuredFields/lib/CSF/utils/userAgent.js";import a from"../../../internal/FormFields/InputTelephone.js";import{useCoreContext as i}from"../../../../core/Context/CoreProvider.js";import n from"./utils/mobile-number-formatter.js";const u=({initialValue:u,onChange:s})=>{const{i18n:b}=i(),{handleChangeFor:c,data:p}=m({schema:["mobileNumber"],defaultData:{mobileNumber:u},formatters:{mobileNumber:n}}),f=r(null),d=t(()=>{f.current?.focus()},[f.current]);return o(()=>{s(p.mobileNumber?.replaceAll(" ",""))},[p.mobileNumber,s]),e(l,{name:"mobile-number",label:b.get("card.fastlane.mobileInputLabel"),staticValue:"+1",onInputContainerClick:d},e(a,{name:"mobile-number",autocorrect:"off",spellcheck:!1,maxlength:12,value:p.mobileNumber,onInput:c("mobileNumber","input"),onBlur:c("mobileNumber","blur"),setRef:f}))};export{u as default};
 //# sourceMappingURL=USOnlyPhoneInput.js.map

package/dist/es/components/Card/components/Fastlane/USOnlyPhoneInput.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"USOnlyPhoneInput.js","sources":["../../../../../../src/components/Card/components/Fastlane/USOnlyPhoneInput.tsx"],"sourcesContent":["import { h } from 'preact';\nimport { useCallback, useEffect, useRef } from 'preact/hooks';\nimport Field from '../../../internal/FormFields/Field';\nimport useForm from '../../../../utils/useForm';\nimport InputTelephone from '../../../internal/FormFields/InputTelephone';\nimport { useCoreContext } from '../../../../core/Context/CoreProvider';\nimport mobileNumberFormatter from './utils/mobile-number-formatter';\n\ninterface USOnlyPhoneInputStateData {\n mobileNumber?: string;\n}\n\ninterface USOnlyPhoneInputProps {\n onChange(mobileNumber: string): void;\n initialValue?: string;\n}\n\nconst USOnlyPhoneInput = ({ initialValue, onChange }: Readonly<USOnlyPhoneInputProps>) => {\n const { i18n } = useCoreContext();\n const formSchema = ['mobileNumber'];\n const { handleChangeFor, data } = useForm<USOnlyPhoneInputStateData>({\n schema: formSchema,\n defaultData: {\n mobileNumber: initialValue\n },\n formatters: {\n mobileNumber: mobileNumberFormatter\n }\n });\n const inputRef = useRef<HTMLInputElement>(null);\n\n const focusInput = useCallback(() => {\n inputRef.current?.focus();\n }, [inputRef.current]);\n\n useEffect(() => {\n onChange(data.mobileNumber?.replaceAll(' ', ''));\n }, [data.mobileNumber, onChange]);\n\n return (\n <Field name=\"mobile-number\" label={i18n.get('card.fastlane.mobileInputLabel')} staticValue=\"+1\" onInputContainerClick={focusInput}>\n <InputTelephone\n name={'mobile-number'}\n autocorrect={'off'}\n spellcheck={false}\n maxlength={12}\n value={data.mobileNumber}\n onInput={handleChangeFor('mobileNumber', 'input')}\n onBlur={handleChangeFor('mobileNumber', 'blur')}\n setRef={inputRef}\n />\n </Field>\n );\n};\n\nexport default USOnlyPhoneInput;\n"],"names":["USOnlyPhoneInput","initialValue","onChange","i18n","useCoreContext","handleChangeFor","data","useForm","schema","defaultData","mobileNumber","formatters","mobileNumberFormatter","inputRef","useRef","focusInput","useCallback","current","focus","useEffect","replaceAll","h","Field","name","label","get","staticValue","onInputContainerClick","InputTelephone","autocorrect","spellcheck","maxlength","value","onInput","onBlur","setRef"],"mappings":"~~6dAiBA~~,MAAMA,EAAmB,EAAGC,eAAcC,eACtC,MAAMC,KAAEA,GAASC,KAEXC,gBAAEA,EAAeC,KAAEA,GAASC,EAAmC,CACjEC,OAFe,CAAC,gBAGhBC,YAAa,CACTC,aAAcT,GAElBU,WAAY,CACRD,aAAcE,KAGhBC,EAAWC,EAAyB,MAEpCC,EAAaC,EAAY,KAC3BH,EAASI,SAASC,SACnB,CAACL,EAASI,UAMb,OAJAE,EAAU,KACNjB,EAASI,EAAKI,cAAcU,WAAW,IAAK,MAC7C,CAACd,EAAKI,aAAcR,IAGnBmB,EAACC,EAAAA,CAAMC,KAAK,gBAAgBC,MAAOrB,EAAKsB,IAAI,kCAAmCC,YAAY,KAAKC,sBAAuBZ,GACnHM,EAACO,EAAAA,CACGL,KAAM,gBACNM,YAAa,MACbC,YAAY,EACZC,UAAW,GACXC,MAAO1B,EAAKI,aACZuB,QAAS5B,EAAgB,eAAgB,SACzC6B,OAAQ7B,EAAgB,eAAgB,QACxC8B,OAAQtB"}
1	+ {"version":3,"file":"USOnlyPhoneInput.js","sources":["../../../../../../src/components/Card/components/Fastlane/USOnlyPhoneInput.tsx"],"sourcesContent":["import { h } from 'preact';\nimport { useCallback, useEffect, useRef } from 'preact/hooks';\nimport Field from '../../../internal/FormFields/Field';\nimport useForm from '../../../../utils/useForm';\nimport InputTelephone from '../../../internal/FormFields/InputTelephone';\nimport { useCoreContext } from '../../../../core/Context/CoreProvider';\nimport mobileNumberFormatter from './utils/mobile-number-formatter';\n\ninterface USOnlyPhoneInputStateData {\n mobileNumber?: string;\n}\n\ninterface USOnlyPhoneInputProps {\n onChange(mobileNumber: string): void;\n initialValue?: string;\n}\n\nconst USOnlyPhoneInput = ({ initialValue, onChange }: Readonly<USOnlyPhoneInputProps>) => {\n const { i18n } = useCoreContext();\n const formSchema = ['mobileNumber'];\n const { handleChangeFor, data } = useForm<USOnlyPhoneInputStateData>({\n schema: formSchema,\n defaultData: {\n mobileNumber: initialValue\n },\n formatters: {\n mobileNumber: mobileNumberFormatter\n }\n });\n const inputRef = useRef<HTMLInputElement>(null);\n\n const focusInput = useCallback(() => {\n inputRef.current?.focus();\n }, [inputRef.current]);\n\n useEffect(() => {\n onChange(data.mobileNumber?.replaceAll(' ', ''));\n }, [data.mobileNumber, onChange]);\n\n return (\n <Field name=\"mobile-number\" label={i18n.get('card.fastlane.mobileInputLabel')} staticValue=\"+1\" onInputContainerClick={focusInput}>\n <InputTelephone\n name={'mobile-number'}\n autocorrect={'off'}\n spellcheck={false}\n maxlength={12}\n value={data.mobileNumber}\n onInput={handleChangeFor('mobileNumber', 'input')}\n onBlur={handleChangeFor('mobileNumber', 'blur')}\n setRef={inputRef}\n />\n </Field>\n );\n};\n\nexport default USOnlyPhoneInput;\n"],"names":["USOnlyPhoneInput","initialValue","onChange","i18n","useCoreContext","handleChangeFor","data","useForm","schema","defaultData","mobileNumber","formatters","mobileNumberFormatter","inputRef","useRef","focusInput","useCallback","current","focus","useEffect","replaceAll","h","Field","name","label","get","staticValue","onInputContainerClick","InputTelephone","autocorrect","spellcheck","maxlength","value","onInput","onBlur","setRef"],"mappings":"giBAiBA,MAAMA,EAAmB,EAAGC,eAAcC,eACtC,MAAMC,KAAEA,GAASC,KAEXC,gBAAEA,EAAeC,KAAEA,GAASC,EAAmC,CACjEC,OAFe,CAAC,gBAGhBC,YAAa,CACTC,aAAcT,GAElBU,WAAY,CACRD,aAAcE,KAGhBC,EAAWC,EAAyB,MAEpCC,EAAaC,EAAY,KAC3BH,EAASI,SAASC,SACnB,CAACL,EAASI,UAMb,OAJAE,EAAU,KACNjB,EAASI,EAAKI,cAAcU,WAAW,IAAK,MAC7C,CAACd,EAAKI,aAAcR,IAGnBmB,EAACC,EAAAA,CAAMC,KAAK,gBAAgBC,MAAOrB,EAAKsB,IAAI,kCAAmCC,YAAY,KAAKC,sBAAuBZ,GACnHM,EAACO,EAAAA,CACGL,KAAM,gBACNM,YAAa,MACbC,YAAY,EACZC,UAAW,GACXC,MAAO1B,EAAKI,aACZuB,QAAS5B,EAAgB,eAAgB,SACzC6B,OAAQ7B,EAAgB,eAAgB,QACxC8B,OAAQtB"}

package/dist/es/components/Dragonpay/components/DragonpayInput/DragonpayInput.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{createElement as e}from"../../../../external/preact/dist/preact.js";import{useState as a,useRef as r,useEffect as o}from"../../../../external/preact/hooks/dist/hooks.js";import t from"../../../../utils/useForm/useForm.js";import s from"../../../internal/FormFields/Field/Field.js";import i from"../../../../utils/get-issuer-image.js";import{useCoreContext as n}from"../../../../core/Context/CoreProvider.js";import l from"../../../internal/FormFields/InputEmail.js";import p from"../../../internal/FormFields/Select/Select.js";import m from"../../../../core/Context/useImage.js";import{validationRules as u}from"../../../../utils/Validator/defaultRules.js";import{getErrorMessage as d}from"../../../../utils/getErrorMessage.js";function c(c){const{i18n:g}=n(),h=m(),f=()=>["dragonpay_ebanking","dragonpay_otc_banking","dragonpay_otc_non_banking"].includes(c.type),[_,y]=a("ready"),{handleChangeFor:E,triggerValidation:k,data:F,valid:j,errors:C,isValid:b}=t({schema:[...f()?["issuer"]:[],"shopperEmail"],rules:{issuer:{validate:e=>f()&&!!e,modes:["input","blur"]},shopperEmail:u.emailRule}}),x=r({setStatus:y,showValidation:()=>{k()}}),V=i({},c.type,h),v=c.items.map(e=>({...e,icon:V(e.id&&e.id.toLowerCase())}));return o(()=>{c.onChange({isValid:b,data:F,valid:j,errors:C})},[b,F,j,C]),o(()=>{c.setComponentRef(x.current)},[c.setComponentRef]),e("div",{className:"adyen-checkout__dragonpay-input__field"},e(s,{label:g.get("shopperEmail"),errorMessage:d(g,C.shopperEmail,g.get("shopperEmail")),name:"dragonpay-shopperEmail"},e(l,{name:"dragonpay-shopperEmail",autoCorrect:"off",value:F.shopperEmail,className:"adyen-checkout__input--large",spellcheck:!1,onInput:E("shopperEmail","input"),onBlur:E("shopperEmail","blur")})),f()&&e(s,{label:g.get((w=c.type,"dragonpay_otc_non_banking"===w?"dragonpayVoucher.selectField.contextualText.nonBank":"dragonpayVoucher.selectField.contextualText.bank")),errorMessage:!!C.issuer,name:"issuer"},e(p,{items:v,selectedValue:F.issuer,name:"issuer",className:"adyen-checkout__dropdown--large adyen-checkout__issuer-list__dropdown",onChange:E("issuer")})),c.showPayButton&&c.payButton({status:_,label:g.get("confirmPurchase")}));var w}c.defaultProps={data:{},items:[],onChange:()=>{}};export{c as default};
+import{createElement as e}from"../../../../external/preact/dist/preact.js";import{useState as a,useRef as r,useEffect as o}from"../../../../external/preact/hooks/dist/hooks.js";import t from"../../../../utils/useForm/useForm.js";import"../../../internal/SecuredFields/lib/CSF/utils/userAgent.js";import s from"../../../internal/FormFields/Field/Field.js";import i from"../../../../utils/get-issuer-image.js";import{useCoreContext as n}from"../../../../core/Context/CoreProvider.js";import l from"../../../internal/FormFields/InputEmail.js";import p from"../../../internal/FormFields/Select/Select.js";import m from"../../../../core/Context/useImage.js";import{validationRules as u}from"../../../../utils/Validator/defaultRules.js";import{getErrorMessage as d}from"../../../../utils/getErrorMessage.js";function c(c){const{i18n:g}=n(),h=m(),f=()=>["dragonpay_ebanking","dragonpay_otc_banking","dragonpay_otc_non_banking"].includes(c.type),[_,y]=a("ready"),{handleChangeFor:F,triggerValidation:E,data:k,valid:j,errors:C,isValid:b}=t({schema:[...f()?["issuer"]:[],"shopperEmail"],rules:{issuer:{validate:e=>f()&&!!e,modes:["input","blur"]},shopperEmail:u.emailRule}}),x=r({setStatus:y,showValidation:()=>{E()}}),V=i({},c.type,h),v=c.items.map(e=>({...e,icon:V(e.id&&e.id.toLowerCase())}));return o(()=>{c.onChange({isValid:b,data:k,valid:j,errors:C})},[b,k,j,C]),o(()=>{c.setComponentRef(x.current)},[c.setComponentRef]),e("div",{className:"adyen-checkout__dragonpay-input__field"},e(s,{label:g.get("shopperEmail"),errorMessage:d(g,C.shopperEmail,g.get("shopperEmail")),name:"dragonpay-shopperEmail"},e(l,{name:"dragonpay-shopperEmail",autoCorrect:"off",value:k.shopperEmail,className:"adyen-checkout__input--large",spellcheck:!1,onInput:F("shopperEmail","input"),onBlur:F("shopperEmail","blur")})),f()&&e(s,{label:g.get((S=c.type,"dragonpay_otc_non_banking"===S?"dragonpayVoucher.selectField.contextualText.nonBank":"dragonpayVoucher.selectField.contextualText.bank")),errorMessage:!!C.issuer,name:"issuer"},e(p,{items:v,selectedValue:k.issuer,name:"issuer",className:"adyen-checkout__dropdown--large adyen-checkout__issuer-list__dropdown",onChange:F("issuer")})),c.showPayButton&&c.payButton({status:_,label:g.get("confirmPurchase")}));var S}c.defaultProps={data:{},items:[],onChange:()=>{}};export{c as default};
 //# sourceMappingURL=DragonpayInput.js.map

package/dist/es/components/Dragonpay/components/DragonpayInput/DragonpayInput.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DragonpayInput.js","sources":["../../../../../../src/components/Dragonpay/components/DragonpayInput/DragonpayInput.tsx"],"sourcesContent":["import { h } from 'preact';\nimport { useEffect, useRef, useState } from 'preact/hooks';\nimport useForm from '../../../../utils/useForm';\nimport Field from '../../../internal/FormFields/Field';\nimport getIssuerImageUrl from '../../../../utils/get-issuer-image';\nimport { useCoreContext } from '../../../../core/Context/CoreProvider';\nimport { DragonpayInputData, DragonpayInputIssuerItem, DragonpayInputProps } from '../../types';\nimport InputEmail from '../../../internal/FormFields/InputEmail';\nimport Select from '../../../internal/FormFields/Select';\nimport useImage from '../../../../core/Context/useImage';\nimport { validationRules } from '../../../../utils/Validator/defaultRules';\nimport { getErrorMessage } from '../../../../utils/getErrorMessage';\nimport { ComponentMethodsRef } from '../../../internal/UIElement/types';\n\nexport default function DragonpayInput(props: Readonly<DragonpayInputProps>) {\n const { i18n } = useCoreContext();\n const getImage = useImage();\n const isIssuerRequired = () => {\n const typesRequiringIssuers = ['dragonpay_ebanking', 'dragonpay_otc_banking', 'dragonpay_otc_non_banking'];\n return typesRequiringIssuers.includes(props.type);\n };\n const [status, setStatus] = useState('ready');\n\n const { handleChangeFor, triggerValidation, data, valid, errors, isValid } = useForm<DragonpayInputData>({\n schema: [...(isIssuerRequired() ? ['issuer'] : []), 'shopperEmail'],\n rules: {\n issuer: {\n validate: issuer => isIssuerRequired() && !!issuer,\n modes: ['input', 'blur']\n },\n shopperEmail: validationRules.emailRule\n }\n });\n\n const self = useRef<ComponentMethodsRef>({\n setStatus: setStatus,\n showValidation: () => {\n triggerValidation();\n }\n });\n\n const getIssuerIcon = getIssuerImageUrl({}, props.type, getImage);\n const items = props.items.map(\n (item: DragonpayInputIssuerItem): DragonpayInputIssuerItem => ({\n ...item,\n icon: getIssuerIcon(item.id && item.id.toLowerCase())\n })\n );\n\n const getIssuerSelectFieldKey = type => {\n if (type === 'dragonpay_otc_non_banking') {\n return 'dragonpayVoucher.selectField.contextualText.nonBank';\n }\n return 'dragonpayVoucher.selectField.contextualText.bank';\n };\n\n useEffect(() => {\n props.onChange({ isValid, data, valid, errors });\n }, [isValid, data, valid, errors]);\n\n useEffect(() => {\n props.setComponentRef(self.current);\n }, [props.setComponentRef]);\n\n return (\n <div className=\"adyen-checkout__dragonpay-input__field\">\n <Field\n label={i18n.get('shopperEmail')}\n errorMessage={getErrorMessage(i18n, errors.shopperEmail, i18n.get('shopperEmail'))}\n name={'dragonpay-shopperEmail'}\n >\n <InputEmail\n name={'dragonpay-shopperEmail'}\n autoCorrect={'off'}\n value={data.shopperEmail}\n className={'adyen-checkout__input--large'}\n spellcheck={false}\n onInput={handleChangeFor('shopperEmail', 'input')}\n onBlur={handleChangeFor('shopperEmail', 'blur')}\n />\n </Field>\n\n {isIssuerRequired() && (\n <Field label={i18n.get(getIssuerSelectFieldKey(props.type))} errorMessage={!!errors.issuer} name={'issuer'}>\n <Select\n items={items}\n selectedValue={data.issuer}\n name={'issuer'}\n className={'adyen-checkout__dropdown--large adyen-checkout__issuer-list__dropdown'}\n onChange={handleChangeFor('issuer')}\n />\n </Field>\n )}\n\n {props.showPayButton && props.payButton({ status, label: i18n.get('confirmPurchase') })}\n </div>\n );\n}\n\nDragonpayInput.defaultProps = {\n data: {},\n items: [],\n onChange: () => {}\n};\n"],"names":["DragonpayInput","props","i18n","useCoreContext","getImage","useImage","isIssuerRequired","includes","type","status","setStatus","useState","handleChangeFor","triggerValidation","data","valid","errors","isValid","useForm","schema","rules","issuer","validate","modes","shopperEmail","validationRules","emailRule","self","useRef","showValidation","getIssuerIcon","getIssuerImageUrl","items","map","item","icon","id","toLowerCase","useEffect","onChange","setComponentRef","current","h","div","className","Field","label","get","errorMessage","getErrorMessage","name","InputEmail","autoCorrect","value","spellcheck","onInput","onBlur","Select","selectedValue","showPayButton","payButton","defaultProps"],"mappings":"~~+tBAce~~,SAASA,EAAeC,GACnC,MAAMC,KAAEA,GAASC,IACXC,EAAWC,IACXC,EAAmB,IACS,CAAC,qBAAsB,wBAAyB,6BACjDC,SAASN,EAAMO,OAEzCC,EAAQC,GAAaC,EAAS,UAE/BC,gBAAEA,EAAeC,kBAAEA,EAAiBC,KAAEA,EAAIC,MAAEA,EAAKC,OAAEA,EAAMC,QAAEA,GAAYC,EAA4B,CACrGC,OAAQ,IAAKb,IAAqB,CAAC,UAAY,GAAK,gBACpDc,MAAO,CACHC,OAAQ,CACJC,SAAUD,GAAUf,OAAwBe,EAC5CE,MAAO,CAAC,QAAS,SAErBC,aAAcC,EAAgBC,aAIhCC,EAAOC,EAA4B,CACrClB,UAAWA,EACXmB,eAAgB,KACZhB,OAIFiB,EAAgBC,EAAkB,CAAA,EAAI9B,EAAMO,KAAMJ,GAClD4B,EAAQ/B,EAAM+B,MAAMC,IACrBC,QACMA,EACHC,KAAML,EAAcI,EAAKE,IAAMF,EAAKE,GAAGC,kBAmB/C,OARAC,EAAU,KACNrC,EAAMsC,SAAS,CAAEtB,UAASH,OAAMC,QAAOC,YACxC,CAACC,EAASH,EAAMC,EAAOC,IAE1BsB,EAAU,KACNrC,EAAMuC,gBAAgBb,EAAKc,UAC5B,CAACxC,EAAMuC,kBAGNE,EAACC,MAAAA,CAAIC,UAAU,0CACXF,EAACG,EAAAA,CACGC,MAAO5C,EAAK6C,IAAI,gBAChBC,aAAcC,EAAgB/C,EAAMc,EAAOQ,aAActB,EAAK6C,IAAI,iBAClEG,KAAM,0BAENR,EAACS,EAAAA,CACGD,KAAM,yBACNE,YAAa,MACbC,MAAOvC,EAAKU,aACZoB,UAAW,+BACXU,YAAY,EACZC,QAAS3C,EAAgB,eAAgB,SACzC4C,OAAQ5C,EAAgB,eAAgB,WAI/CN,KACGoC,EAACG,EAAAA,CAAMC,MAAO5C,EAAK6C,KAlCCvC,EAkC2BP,EAAMO,KAjChD,8BAATA,EACO,sDAEJ,qDA8B8DwC,eAAgBhC,EAAOK,OAAQ6B,KAAM,UAC9FR,EAACe,EAAAA,CACGzB,MAAOA,EACP0B,cAAe5C,EAAKO,OACpB6B,KAAM,SACNN,UAAW,wEACXL,SAAU3B,EAAgB,aAKrCX,EAAM0D,eAAiB1D,EAAM2D,UAAU,CAAEnD,SAAQqC,MAAO5C,EAAK6C,IAAI,sBA7C1CvC,IAAAA,CAgDpC,CAEAR,EAAe6D,aAAe,CAC1B/C,KAAM,CAAA,EACNkB,MAAO,GACPO,SAAU"}
1	+ {"version":3,"file":"DragonpayInput.js","sources":["../../../../../../src/components/Dragonpay/components/DragonpayInput/DragonpayInput.tsx"],"sourcesContent":["import { h } from 'preact';\nimport { useEffect, useRef, useState } from 'preact/hooks';\nimport useForm from '../../../../utils/useForm';\nimport Field from '../../../internal/FormFields/Field';\nimport getIssuerImageUrl from '../../../../utils/get-issuer-image';\nimport { useCoreContext } from '../../../../core/Context/CoreProvider';\nimport { DragonpayInputData, DragonpayInputIssuerItem, DragonpayInputProps } from '../../types';\nimport InputEmail from '../../../internal/FormFields/InputEmail';\nimport Select from '../../../internal/FormFields/Select';\nimport useImage from '../../../../core/Context/useImage';\nimport { validationRules } from '../../../../utils/Validator/defaultRules';\nimport { getErrorMessage } from '../../../../utils/getErrorMessage';\nimport { ComponentMethodsRef } from '../../../internal/UIElement/types';\n\nexport default function DragonpayInput(props: Readonly<DragonpayInputProps>) {\n const { i18n } = useCoreContext();\n const getImage = useImage();\n const isIssuerRequired = () => {\n const typesRequiringIssuers = ['dragonpay_ebanking', 'dragonpay_otc_banking', 'dragonpay_otc_non_banking'];\n return typesRequiringIssuers.includes(props.type);\n };\n const [status, setStatus] = useState('ready');\n\n const { handleChangeFor, triggerValidation, data, valid, errors, isValid } = useForm<DragonpayInputData>({\n schema: [...(isIssuerRequired() ? ['issuer'] : []), 'shopperEmail'],\n rules: {\n issuer: {\n validate: issuer => isIssuerRequired() && !!issuer,\n modes: ['input', 'blur']\n },\n shopperEmail: validationRules.emailRule\n }\n });\n\n const self = useRef<ComponentMethodsRef>({\n setStatus: setStatus,\n showValidation: () => {\n triggerValidation();\n }\n });\n\n const getIssuerIcon = getIssuerImageUrl({}, props.type, getImage);\n const items = props.items.map(\n (item: DragonpayInputIssuerItem): DragonpayInputIssuerItem => ({\n ...item,\n icon: getIssuerIcon(item.id && item.id.toLowerCase())\n })\n );\n\n const getIssuerSelectFieldKey = type => {\n if (type === 'dragonpay_otc_non_banking') {\n return 'dragonpayVoucher.selectField.contextualText.nonBank';\n }\n return 'dragonpayVoucher.selectField.contextualText.bank';\n };\n\n useEffect(() => {\n props.onChange({ isValid, data, valid, errors });\n }, [isValid, data, valid, errors]);\n\n useEffect(() => {\n props.setComponentRef(self.current);\n }, [props.setComponentRef]);\n\n return (\n <div className=\"adyen-checkout__dragonpay-input__field\">\n <Field\n label={i18n.get('shopperEmail')}\n errorMessage={getErrorMessage(i18n, errors.shopperEmail, i18n.get('shopperEmail'))}\n name={'dragonpay-shopperEmail'}\n >\n <InputEmail\n name={'dragonpay-shopperEmail'}\n autoCorrect={'off'}\n value={data.shopperEmail}\n className={'adyen-checkout__input--large'}\n spellcheck={false}\n onInput={handleChangeFor('shopperEmail', 'input')}\n onBlur={handleChangeFor('shopperEmail', 'blur')}\n />\n </Field>\n\n {isIssuerRequired() && (\n <Field label={i18n.get(getIssuerSelectFieldKey(props.type))} errorMessage={!!errors.issuer} name={'issuer'}>\n <Select\n items={items}\n selectedValue={data.issuer}\n name={'issuer'}\n className={'adyen-checkout__dropdown--large adyen-checkout__issuer-list__dropdown'}\n onChange={handleChangeFor('issuer')}\n />\n </Field>\n )}\n\n {props.showPayButton && props.payButton({ status, label: i18n.get('confirmPurchase') })}\n </div>\n );\n}\n\nDragonpayInput.defaultProps = {\n data: {},\n items: [],\n onChange: () => {}\n};\n"],"names":["DragonpayInput","props","i18n","useCoreContext","getImage","useImage","isIssuerRequired","includes","type","status","setStatus","useState","handleChangeFor","triggerValidation","data","valid","errors","isValid","useForm","schema","rules","issuer","validate","modes","shopperEmail","validationRules","emailRule","self","useRef","showValidation","getIssuerIcon","getIssuerImageUrl","items","map","item","icon","id","toLowerCase","useEffect","onChange","setComponentRef","current","h","div","className","Field","label","get","errorMessage","getErrorMessage","name","InputEmail","autoCorrect","value","spellcheck","onInput","onBlur","Select","selectedValue","showPayButton","payButton","defaultProps"],"mappings":"kyBAce,SAASA,EAAeC,GACnC,MAAMC,KAAEA,GAASC,IACXC,EAAWC,IACXC,EAAmB,IACS,CAAC,qBAAsB,wBAAyB,6BACjDC,SAASN,EAAMO,OAEzCC,EAAQC,GAAaC,EAAS,UAE/BC,gBAAEA,EAAeC,kBAAEA,EAAiBC,KAAEA,EAAIC,MAAEA,EAAKC,OAAEA,EAAMC,QAAEA,GAAYC,EAA4B,CACrGC,OAAQ,IAAKb,IAAqB,CAAC,UAAY,GAAK,gBACpDc,MAAO,CACHC,OAAQ,CACJC,SAAUD,GAAUf,OAAwBe,EAC5CE,MAAO,CAAC,QAAS,SAErBC,aAAcC,EAAgBC,aAIhCC,EAAOC,EAA4B,CACrClB,UAAWA,EACXmB,eAAgB,KACZhB,OAIFiB,EAAgBC,EAAkB,CAAA,EAAI9B,EAAMO,KAAMJ,GAClD4B,EAAQ/B,EAAM+B,MAAMC,IACrBC,QACMA,EACHC,KAAML,EAAcI,EAAKE,IAAMF,EAAKE,GAAGC,kBAmB/C,OARAC,EAAU,KACNrC,EAAMsC,SAAS,CAAEtB,UAASH,OAAMC,QAAOC,YACxC,CAACC,EAASH,EAAMC,EAAOC,IAE1BsB,EAAU,KACNrC,EAAMuC,gBAAgBb,EAAKc,UAC5B,CAACxC,EAAMuC,kBAGNE,EAACC,MAAAA,CAAIC,UAAU,0CACXF,EAACG,EAAAA,CACGC,MAAO5C,EAAK6C,IAAI,gBAChBC,aAAcC,EAAgB/C,EAAMc,EAAOQ,aAActB,EAAK6C,IAAI,iBAClEG,KAAM,0BAENR,EAACS,EAAAA,CACGD,KAAM,yBACNE,YAAa,MACbC,MAAOvC,EAAKU,aACZoB,UAAW,+BACXU,YAAY,EACZC,QAAS3C,EAAgB,eAAgB,SACzC4C,OAAQ5C,EAAgB,eAAgB,WAI/CN,KACGoC,EAACG,EAAAA,CAAMC,MAAO5C,EAAK6C,KAlCCvC,EAkC2BP,EAAMO,KAjChD,8BAATA,EACO,sDAEJ,qDA8B8DwC,eAAgBhC,EAAOK,OAAQ6B,KAAM,UAC9FR,EAACe,EAAAA,CACGzB,MAAOA,EACP0B,cAAe5C,EAAKO,OACpB6B,KAAM,SACNN,UAAW,wEACXL,SAAU3B,EAAgB,aAKrCX,EAAM0D,eAAiB1D,EAAM2D,UAAU,CAAEnD,SAAQqC,MAAO5C,EAAK6C,IAAI,sBA7C1CvC,IAAAA,CAgDpC,CAEAR,EAAe6D,aAAe,CAC1B/C,KAAM,CAAA,EACNkB,MAAO,GACPO,SAAU"}

package/dist/es/components/Dropin/components/PaymentMethod/OrderPaymentMethods.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{createElement as e}from"../../../../external/preact/dist/preact.js";import t from"./PaymentMethodIcon.js";import{useCoreContext as a}from"../../../../core/Context/CoreProvider.js";import n from"../../../../core/Context/useImage.js";const o=({order:o,orderStatus:r,onOrderCancel:d,brandLogoConfiguration:m})=>{const{i18n:c}=a(),u=n();return e("div",null,e("ul",{className:"adyen-checkout__order-payment-methods-list"},r?.paymentMethods?.map((a,n)=>e("li",{key:`${a.type}-${n}`,className:"adyen-checkout__order-payment-method"},e("div",{className:"adyen-checkout__order-payment-method__header"},e("div",{className:"adyen-checkout__payment-method__header__title"},e(t,{altDescription:a.name,type:a.type,src:m[a.type]||u()(a.type)}),a.label?`${a.label}`:`•••• ${a.lastFour}`),d&&e("button",{type:"button",className:"adyen-checkout__button adyen-checkout__button--inline adyen-checkout__button--link",onClick:()=>{d({order:o})}},c.get("storedPaymentMethod.disable.button"))),e("div",{className:"adyen-checkout__order-payment-method__details"},e("div",{className:"adyen-checkout__order-payment-method__deducted-amount"},e("span",{className:"adyen-checkout__order-payment-method__deducted-amount__label"},c.get("deductedBalance")),e("span",{className:"adyen-checkout__order-payment-method__deducted-amount__value"},c.amount(a.amount.value,a.amount.currency))))))),r.remainingAmount&&e("p",{className:"adyen-checkout__order-remaining-amount"},c.get("partialPayment.warning")," ",e("strong",null,c.amount(r.remainingAmount.value,r.remainingAmount.currency))))};export{o as OrderPaymentMethods,o as default};
+import{createElement as e}from"../../../../external/preact/dist/preact.js";import t from"./PaymentMethodIcon.js";import{useCoreContext as a}from"../../../../core/Context/CoreProvider.js";import n from"../../../../core/Context/useImage.js";const o=({order:o,orderStatus:r,onOrderCancel:d,brandLogoConfiguration:m})=>{const{i18n:c}=a(),u=n();return e("div",null,e("ul",{className:"adyen-checkout__order-payment-methods-list"},r?.paymentMethods?.map((a,n)=>e("li",{key:`${a.type}-${n}`,className:"adyen-checkout__order-payment-method"},e("div",{className:"adyen-checkout__order-payment-method__header"},e("div",{className:"adyen-checkout__payment-method__header__title"},e(t,{alt:a.name,type:a.type,src:m[a.type]||u()(a.type)}),a.label?`${a.label}`:`•••• ${a.lastFour}`),d&&e("button",{type:"button",className:"adyen-checkout__button adyen-checkout__button--inline adyen-checkout__button--link",onClick:()=>{d({order:o})}},c.get("storedPaymentMethod.disable.button"))),e("div",{className:"adyen-checkout__order-payment-method__details"},e("div",{className:"adyen-checkout__order-payment-method__deducted-amount"},e("span",{className:"adyen-checkout__order-payment-method__deducted-amount__label"},c.get("deductedBalance")),e("span",{className:"adyen-checkout__order-payment-method__deducted-amount__value"},c.amount(a.amount.value,a.amount.currency))))))),r.remainingAmount&&e("p",{className:"adyen-checkout__order-remaining-amount"},c.get("partialPayment.warning")," ",e("strong",null,c.amount(r.remainingAmount.value,r.remainingAmount.currency))))};export{o as OrderPaymentMethods,o as default};
 //# sourceMappingURL=OrderPaymentMethods.js.map

package/dist/es/components/Dropin/components/PaymentMethod/OrderPaymentMethods.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"OrderPaymentMethods.js","sources":["../../../../../../src/components/Dropin/components/PaymentMethod/OrderPaymentMethods.tsx"],"sourcesContent":["import { h } from 'preact';\nimport PaymentMethodIcon from './PaymentMethodIcon';\nimport { useCoreContext } from '../../../../core/Context/CoreProvider';\nimport useImage from '../../../../core/Context/useImage';\nimport './OrderPaymentMethods.scss';\nimport { Order, OrderStatus } from '../../../../types';\n\ntype OrderPaymentMethodsProps = {\n order: Order;\n orderStatus: OrderStatus;\n onOrderCancel: (order) => void;\n brandLogoConfiguration: any;\n};\n\nexport const OrderPaymentMethods = ({ order, orderStatus, onOrderCancel, brandLogoConfiguration }: Readonly<OrderPaymentMethodsProps>) => {\n const { i18n } = useCoreContext();\n const getImage = useImage();\n\n return (\n <div>\n <ul className={'adyen-checkout__order-payment-methods-list'}>\n {orderStatus?.paymentMethods?.map((orderPaymentMethod, index) => (\n <li key={`${orderPaymentMethod.type}-${index}`} className=\"adyen-checkout__order-payment-method\">\n <div className=\"adyen-checkout__order-payment-method__header\">\n <div className=\"adyen-checkout__payment-method__header__title\">\n <PaymentMethodIcon\n ~~altDescription~~={orderPaymentMethod.name}\n type={orderPaymentMethod.type}\n src={brandLogoConfiguration[orderPaymentMethod.type] \|\| getImage()(orderPaymentMethod.type)}\n />\n {orderPaymentMethod.label ? `${orderPaymentMethod.label}` : `•••• ${orderPaymentMethod.lastFour}`}\n </div>\n\n {onOrderCancel && (\n <button\n type=\"button\"\n className=\"adyen-checkout__button adyen-checkout__button--inline adyen-checkout__button--link\"\n onClick={() => {\n onOrderCancel({ order });\n }}\n >\n {i18n.get('storedPaymentMethod.disable.button')}\n </button>\n )}\n </div>\n <div className=\"adyen-checkout__order-payment-method__details\">\n <div className=\"adyen-checkout__order-payment-method__deducted-amount\">\n <span className=\"adyen-checkout__order-payment-method__deducted-amount__label\">{i18n.get('deductedBalance')}</span>\n <span className=\"adyen-checkout__order-payment-method__deducted-amount__value\">\n {i18n.amount(orderPaymentMethod.amount.value, orderPaymentMethod.amount.currency)}\n </span>\n </div>\n </div>\n </li>\n ))}\n </ul>\n\n {orderStatus.remainingAmount && (\n <p className=\"adyen-checkout__order-remaining-amount\">\n {i18n.get('partialPayment.warning')}{' '}\n <strong>{i18n.amount(orderStatus.remainingAmount.value, orderStatus.remainingAmount.currency)}</strong>\n </p>\n )}\n </div>\n );\n};\n\nexport default OrderPaymentMethods;\n"],"names":["OrderPaymentMethods","order","orderStatus","onOrderCancel","brandLogoConfiguration","i18n","useCoreContext","getImage","useImage","h","div","ul","className","paymentMethods","map","orderPaymentMethod","index","li","key","type","PaymentMethodIcon","~~altDescription~~","name","src","label","lastFour","button","onClick","get","span","amount","value","currency","remainingAmount","p","strong"],"mappings":"+OAcO,MAAMA,EAAsB,EAAGC,QAAOC,cAAaC,gBAAeC,6BACrE,MAAMC,KAAEA,GAASC,IACXC,EAAWC,IAEjB,OACIC,EAACC,WACGD,EAACE,KAAAA,CAAGC,UAAW,8CACVV,GAAaW,gBAAgBC,IAAI,CAACC,EAAoBC,IACnDP,EAACQ,KAAAA,CAAGC,IAAK,GAAGH,EAAmBI,QAAQH,IAASJ,UAAU,wCACtDH,EAACC,MAAAA,CAAIE,UAAU,gDACXH,EAACC,MAAAA,CAAIE,UAAU,iDACXH,EAACW,EAAAA,CACGC,~~eAAgBN~~,EAAmBO,~~KACnCH~~,KAAMJ,EAAmBI,KACzBI,IAAKnB,EAAuBW,EAAmBI,OAASZ,IAAWQ,EAAmBI,QAEzFJ,EAAmBS,MAAQ,GAAGT,EAAmBS,QAAU,QAAQT,EAAmBU,YAG1FtB,GACGM,EAACiB,SAAAA,CACGP,KAAK,SACLP,UAAU,qFACVe,QAAS,KACLxB,EAAc,CAAEF,YAGnBI,EAAKuB,IAAI,wCAItBnB,EAACC,MAAAA,CAAIE,UAAU,iDACXH,EAACC,MAAAA,CAAIE,UAAU,yDACXH,EAACoB,OAAAA,CAAKjB,UAAU,gEAAgEP,EAAKuB,IAAI,oBACzFnB,EAACoB,OAAAA,CAAKjB,UAAU,gEACXP,EAAKyB,OAAOf,EAAmBe,OAAOC,MAAOhB,EAAmBe,OAAOE,gBAQ/F9B,EAAY+B,iBACTxB,EAACyB,IAAAA,CAAEtB,UAAU,0CACRP,EAAKuB,IAAI,0BAA2B,IACrCnB,EAAC0B,cAAQ9B,EAAKyB,OAAO5B,EAAY+B,gBAAgBF,MAAO7B,EAAY+B,gBAAgBD"}
1	+ {"version":3,"file":"OrderPaymentMethods.js","sources":["../../../../../../src/components/Dropin/components/PaymentMethod/OrderPaymentMethods.tsx"],"sourcesContent":["import { h } from 'preact';\nimport PaymentMethodIcon from './PaymentMethodIcon';\nimport { useCoreContext } from '../../../../core/Context/CoreProvider';\nimport useImage from '../../../../core/Context/useImage';\nimport './OrderPaymentMethods.scss';\nimport { Order, OrderStatus } from '../../../../types';\n\ntype OrderPaymentMethodsProps = {\n order: Order;\n orderStatus: OrderStatus;\n onOrderCancel: (order) => void;\n brandLogoConfiguration: any;\n};\n\nexport const OrderPaymentMethods = ({ order, orderStatus, onOrderCancel, brandLogoConfiguration }: Readonly<OrderPaymentMethodsProps>) => {\n const { i18n } = useCoreContext();\n const getImage = useImage();\n\n return (\n <div>\n <ul className={'adyen-checkout__order-payment-methods-list'}>\n {orderStatus?.paymentMethods?.map((orderPaymentMethod, index) => (\n <li key={`${orderPaymentMethod.type}-${index}`} className=\"adyen-checkout__order-payment-method\">\n <div className=\"adyen-checkout__order-payment-method__header\">\n <div className=\"adyen-checkout__payment-method__header__title\">\n <PaymentMethodIcon\n alt={orderPaymentMethod.name}\n type={orderPaymentMethod.type}\n src={brandLogoConfiguration[orderPaymentMethod.type] \|\| getImage()(orderPaymentMethod.type)}\n />\n {orderPaymentMethod.label ? `${orderPaymentMethod.label}` : `•••• ${orderPaymentMethod.lastFour}`}\n </div>\n\n {onOrderCancel && (\n <button\n type=\"button\"\n className=\"adyen-checkout__button adyen-checkout__button--inline adyen-checkout__button--link\"\n onClick={() => {\n onOrderCancel({ order });\n }}\n >\n {i18n.get('storedPaymentMethod.disable.button')}\n </button>\n )}\n </div>\n <div className=\"adyen-checkout__order-payment-method__details\">\n <div className=\"adyen-checkout__order-payment-method__deducted-amount\">\n <span className=\"adyen-checkout__order-payment-method__deducted-amount__label\">{i18n.get('deductedBalance')}</span>\n <span className=\"adyen-checkout__order-payment-method__deducted-amount__value\">\n {i18n.amount(orderPaymentMethod.amount.value, orderPaymentMethod.amount.currency)}\n </span>\n </div>\n </div>\n </li>\n ))}\n </ul>\n\n {orderStatus.remainingAmount && (\n <p className=\"adyen-checkout__order-remaining-amount\">\n {i18n.get('partialPayment.warning')}{' '}\n <strong>{i18n.amount(orderStatus.remainingAmount.value, orderStatus.remainingAmount.currency)}</strong>\n </p>\n )}\n </div>\n );\n};\n\nexport default OrderPaymentMethods;\n"],"names":["OrderPaymentMethods","order","orderStatus","onOrderCancel","brandLogoConfiguration","i18n","useCoreContext","getImage","useImage","h","div","ul","className","paymentMethods","map","orderPaymentMethod","index","li","key","type","PaymentMethodIcon","alt","name","src","label","lastFour","button","onClick","get","span","amount","value","currency","remainingAmount","p","strong"],"mappings":"+OAcO,MAAMA,EAAsB,EAAGC,QAAOC,cAAaC,gBAAeC,6BACrE,MAAMC,KAAEA,GAASC,IACXC,EAAWC,IAEjB,OACIC,EAACC,WACGD,EAACE,KAAAA,CAAGC,UAAW,8CACVV,GAAaW,gBAAgBC,IAAI,CAACC,EAAoBC,IACnDP,EAACQ,KAAAA,CAAGC,IAAK,GAAGH,EAAmBI,QAAQH,IAASJ,UAAU,wCACtDH,EAACC,MAAAA,CAAIE,UAAU,gDACXH,EAACC,MAAAA,CAAIE,UAAU,iDACXH,EAACW,EAAAA,CACGC,IAAKN,EAAmBO,KACxBH,KAAMJ,EAAmBI,KACzBI,IAAKnB,EAAuBW,EAAmBI,OAASZ,IAAWQ,EAAmBI,QAEzFJ,EAAmBS,MAAQ,GAAGT,EAAmBS,QAAU,QAAQT,EAAmBU,YAG1FtB,GACGM,EAACiB,SAAAA,CACGP,KAAK,SACLP,UAAU,qFACVe,QAAS,KACLxB,EAAc,CAAEF,YAGnBI,EAAKuB,IAAI,wCAItBnB,EAACC,MAAAA,CAAIE,UAAU,iDACXH,EAACC,MAAAA,CAAIE,UAAU,yDACXH,EAACoB,OAAAA,CAAKjB,UAAU,gEAAgEP,EAAKuB,IAAI,oBACzFnB,EAACoB,OAAAA,CAAKjB,UAAU,gEACXP,EAAKyB,OAAOf,EAAmBe,OAAOC,MAAOhB,EAAmBe,OAAOE,gBAQ/F9B,EAAY+B,iBACTxB,EAACyB,IAAAA,CAAEtB,UAAU,0CACRP,EAAKuB,IAAI,0BAA2B,IACrCnB,EAAC0B,cAAQ9B,EAAKyB,OAAO5B,EAAY+B,gBAAgBF,MAAO7B,EAAY+B,gBAAgBD"}

package/dist/es/components/Dropin/components/PaymentMethod/PaymentMethodBrands/PaymentMethodBrands.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"../PaymentMethodIcon.js";import{getFullBrandName as n}from"../../../../Card/components/CardInput/utils.js";import{useCoreContext as a}from"../../../../../core/Context/CoreProvider.js";import{BrandIcons as o}from"../../../../internal/BrandIcons/BrandIcons.js";import{getMaxBrandsToShow as s}from"./utils.js";const m=({brands:m,excludedUIBrands:d=[],isPaymentMethodSelected:i,keepBrandsVisible:c=!1,showOtherInsteadOfNumber:l=!1})=>{const{i18n:p}=a();if(i&&!c)return null;const u=r(()=>m.filter(e=>!d?.includes(e.name)).map(e=>({alt:n(e.name),src:e.icon})),[m,d]);return e(o,{brandIcons:u,maxBrandsToShow:s(u),remainingBrandsLabel:l?`+ ${p.get("paymentMethodBrand.other")}`:void 0,className:"adyen-checkout__payment-method__brands",remainingBrandsLabelClassName:"adyen-checkout__payment-method__brand-number",renderBrandIcon:r=>e(t,{key:r.alt,altDescription:r.alt,type:r.alt,src:r.src})})};export{m 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"../PaymentMethodIcon.js";import{getFullBrandName as a}from"../../../../Card/components/CardInput/utils.js";import{useCoreContext as n}from"../../../../../core/Context/CoreProvider.js";import{BrandIcons as o}from"../../../../internal/BrandIcons/BrandIcons.js";import{getMaxBrandsToShow as s}from"./utils.js";const m=({brands:m,excludedUIBrands:d=[],isPaymentMethodSelected:i,keepBrandsVisible:c=!1,showOtherInsteadOfNumber:l=!1})=>{const{i18n:p}=n();if(i&&!c)return null;const u=r(()=>m.filter(e=>!d?.includes(e.name)).map(e=>({alt:a(e.name),src:e.icon})),[m,d]);return e(o,{brandIcons:u,maxBrandsToShow:s(u),remainingBrandsLabel:l?`+ ${p.get("paymentMethodBrand.other")}`:void 0,className:"adyen-checkout__payment-method__brands",remainingBrandsLabelClassName:"adyen-checkout__payment-method__brand-number",renderBrandIcon:r=>e(t,{key:r.alt,as:"li",alt:r.alt,type:r.alt,src:r.src})})};export{m as default};
 //# sourceMappingURL=PaymentMethodBrands.js.map

package/dist/es/components/Dropin/components/PaymentMethod/PaymentMethodBrands/PaymentMethodBrands.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PaymentMethodBrands.js","sources":["../../../../../../../src/components/Dropin/components/PaymentMethod/PaymentMethodBrands/PaymentMethodBrands.tsx"],"sourcesContent":["import { h } from 'preact';\nimport { useMemo } from 'preact/hooks';\n\nimport { BrandConfiguration } from '../../../../Card/types';\nimport PaymentMethodIcon from '../PaymentMethodIcon';\nimport { getFullBrandName } from '../../../../Card/components/CardInput/utils';\nimport { useCoreContext } from '../../../../../core/Context/CoreProvider';\nimport { BrandIcons } from '../../../../internal/BrandIcons/BrandIcons';\nimport { getMaxBrandsToShow } from './utils';\n\ninterface PaymentMethodBrandsProps {\n brands: Array<BrandConfiguration>;\n excludedUIBrands?: Array<string>;\n isPaymentMethodSelected: boolean;\n keepBrandsVisible?: boolean;\n showOtherInsteadOfNumber?: boolean;\n}\n\nconst PaymentMethodBrands = ({\n brands,\n excludedUIBrands = [],\n isPaymentMethodSelected,\n keepBrandsVisible = false,\n showOtherInsteadOfNumber = false\n}: Readonly<PaymentMethodBrandsProps>) => {\n const { i18n } = useCoreContext();\n\n if (isPaymentMethodSelected && !keepBrandsVisible) {\n return null;\n }\n\n const allowedBrands = useMemo(\n () => brands.filter(brand => !excludedUIBrands?.includes(brand.name)).map(brand => ({ alt: getFullBrandName(brand.name), src: brand.icon })),\n [brands, excludedUIBrands]\n );\n\n return (\n <BrandIcons\n brandIcons={allowedBrands}\n maxBrandsToShow={getMaxBrandsToShow(allowedBrands)}\n remainingBrandsLabel={showOtherInsteadOfNumber ? `+ ${i18n.get('paymentMethodBrand.other')}` : undefined}\n className=\"adyen-checkout__payment-method__brands\"\n remainingBrandsLabelClassName=\"adyen-checkout__payment-method__brand-number\"\n renderBrandIcon={brandIcon => (\n <PaymentMethodIcon key={brandIcon.alt} ~~altDescription~~={brandIcon.alt} type={brandIcon.alt} src={brandIcon.src} />\n )}\n />\n );\n};\n\nexport default PaymentMethodBrands;\n"],"names":["PaymentMethodBrands","brands","excludedUIBrands","isPaymentMethodSelected","keepBrandsVisible","showOtherInsteadOfNumber","i18n","useCoreContext","allowedBrands","useMemo","filter","brand","includes","name","map","alt","getFullBrandName","src","icon","h","BrandIcons","brandIcons","maxBrandsToShow","getMaxBrandsToShow","remainingBrandsLabel","get","undefined","className","remainingBrandsLabelClassName","renderBrandIcon","brandIcon","PaymentMethodIcon","key","~~altDescription~~","type"],"mappings":"4dAkBA,MAAMA,EAAsB,EACxBC,SACAC,mBAAmB,GACnBC,0BACAC,qBAAoB,EACpBC,4BAA2B,MAE3B,MAAMC,KAAEA,GAASC,IAEjB,GAAIJ,IAA4BC,EAC5B,OAAO,KAGX,MAAMI,EAAgBC,EAClB,IAAMR,EAAOS,OAAOC,IAAUT,GAAkBU,SAASD,EAAME,OAAOC,IAAIH,KAAYI,IAAKC,EAAiBL,EAAME,MAAOI,IAAKN,EAAMO,QACpI,CAACjB,EAAQC,IAGb,OACIiB,EAACC,EAAAA,CACGC,WAAYb,EACZc,gBAAiBC,EAAmBf,GACpCgB,qBAAsBnB,EAA2B,KAAKC,EAAKmB,IAAI,mCAAgCC,EAC/FC,UAAU,yCACVC,8BAA8B,+CAC9BC,gBAAiBC,GACbX,EAACY,EAAAA,CAAkBC,IAAKF,EAAUf,IAAKkB,~~eAAgBH~~,EAAUf,IAAKmB,KAAMJ,EAAUf,IAAKE,IAAKa,EAAUb"}
1	+ {"version":3,"file":"PaymentMethodBrands.js","sources":["../../../../../../../src/components/Dropin/components/PaymentMethod/PaymentMethodBrands/PaymentMethodBrands.tsx"],"sourcesContent":["import { h } from 'preact';\nimport { useMemo } from 'preact/hooks';\n\nimport { BrandConfiguration } from '../../../../Card/types';\nimport PaymentMethodIcon from '../PaymentMethodIcon';\nimport { getFullBrandName } from '../../../../Card/components/CardInput/utils';\nimport { useCoreContext } from '../../../../../core/Context/CoreProvider';\nimport { BrandIcons } from '../../../../internal/BrandIcons/BrandIcons';\nimport { getMaxBrandsToShow } from './utils';\n\ninterface PaymentMethodBrandsProps {\n brands: Array<BrandConfiguration>;\n excludedUIBrands?: Array<string>;\n isPaymentMethodSelected: boolean;\n keepBrandsVisible?: boolean;\n showOtherInsteadOfNumber?: boolean;\n}\n\nconst PaymentMethodBrands = ({\n brands,\n excludedUIBrands = [],\n isPaymentMethodSelected,\n keepBrandsVisible = false,\n showOtherInsteadOfNumber = false\n}: Readonly<PaymentMethodBrandsProps>) => {\n const { i18n } = useCoreContext();\n\n if (isPaymentMethodSelected && !keepBrandsVisible) {\n return null;\n }\n\n const allowedBrands = useMemo(\n () => brands.filter(brand => !excludedUIBrands?.includes(brand.name)).map(brand => ({ alt: getFullBrandName(brand.name), src: brand.icon })),\n [brands, excludedUIBrands]\n );\n\n return (\n <BrandIcons\n brandIcons={allowedBrands}\n maxBrandsToShow={getMaxBrandsToShow(allowedBrands)}\n remainingBrandsLabel={showOtherInsteadOfNumber ? `+ ${i18n.get('paymentMethodBrand.other')}` : undefined}\n className=\"adyen-checkout__payment-method__brands\"\n remainingBrandsLabelClassName=\"adyen-checkout__payment-method__brand-number\"\n renderBrandIcon={brandIcon => (\n <PaymentMethodIcon key={brandIcon.alt} as=\"li\" alt={brandIcon.alt} type={brandIcon.alt} src={brandIcon.src} />\n )}\n />\n );\n};\n\nexport default PaymentMethodBrands;\n"],"names":["PaymentMethodBrands","brands","excludedUIBrands","isPaymentMethodSelected","keepBrandsVisible","showOtherInsteadOfNumber","i18n","useCoreContext","allowedBrands","useMemo","filter","brand","includes","name","map","alt","getFullBrandName","src","icon","h","BrandIcons","brandIcons","maxBrandsToShow","getMaxBrandsToShow","remainingBrandsLabel","get","undefined","className","remainingBrandsLabelClassName","renderBrandIcon","brandIcon","PaymentMethodIcon","key","as","type"],"mappings":"4dAkBA,MAAMA,EAAsB,EACxBC,SACAC,mBAAmB,GACnBC,0BACAC,qBAAoB,EACpBC,4BAA2B,MAE3B,MAAMC,KAAEA,GAASC,IAEjB,GAAIJ,IAA4BC,EAC5B,OAAO,KAGX,MAAMI,EAAgBC,EAClB,IAAMR,EAAOS,OAAOC,IAAUT,GAAkBU,SAASD,EAAME,OAAOC,IAAIH,KAAYI,IAAKC,EAAiBL,EAAME,MAAOI,IAAKN,EAAMO,QACpI,CAACjB,EAAQC,IAGb,OACIiB,EAACC,EAAAA,CACGC,WAAYb,EACZc,gBAAiBC,EAAmBf,GACpCgB,qBAAsBnB,EAA2B,KAAKC,EAAKmB,IAAI,mCAAgCC,EAC/FC,UAAU,yCACVC,8BAA8B,+CAC9BC,gBAAiBC,GACbX,EAACY,EAAAA,CAAkBC,IAAKF,EAAUf,IAAKkB,GAAG,KAAKlB,IAAKe,EAAUf,IAAKmB,KAAMJ,EAAUf,IAAKE,IAAKa,EAAUb"}

package/dist/es/components/Dropin/components/PaymentMethod/PaymentMethodIcon.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{createElement as e}from"../../../../external/preact/dist/preact.js";import a from"../../../../_virtual/index.js";import{BrandImage as t}from"../../../internal/BrandImage/BrandImage.js";const r=["googlepay","paywithgoogle"],m=({src:m,altDescription:o,type:_})=>{const p=r.includes(_)?"adyen-checkout__payment-method__image__wrapper":a("adyen-checkout__payment-method__image__wrapper","adyen-checkout__payment-method__image__wrapper--outline");return e(t,{wrapperClassName:p,imgClassName:"adyen-checkout__payment-method__image",src:m,alt:o})};export{m as default};
+import{createElement as e}from"../../../../external/preact/dist/preact.js";import a from"../../../../_virtual/index.js";import{BrandImage as t}from"../../../internal/BrandImage/BrandImage.js";const r=new Set(["googlepay","paywithgoogle"]),m=({src:m,alt:_,type:o,as:p})=>{const n=r.has(o)?"adyen-checkout__payment-method__image__wrapper":a("adyen-checkout__payment-method__image__wrapper","adyen-checkout__payment-method__image__wrapper--outline");return e(t,{as:p,wrapperClassName:n,imgClassName:"adyen-checkout__payment-method__image",src:m,alt:_})};export{m as default};
 //# sourceMappingURL=PaymentMethodIcon.js.map

package/dist/es/components/Dropin/components/PaymentMethod/PaymentMethodIcon.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PaymentMethodIcon.js","sources":["../../../../../../src/components/Dropin/components/PaymentMethod/PaymentMethodIcon.tsx"],"sourcesContent":["import { h } from 'preact';\nimport classNames from 'classnames';\nimport { BrandImage } from '../../../internal/BrandImage';\n\ninterface PaymentMethodIconProps {\n ~~/** URL to the payment method icon /\n~~ src: string;\n\n ~~/* Alt description of payment method used of a11y /\n altDescription~~: string;\n\n ~~/* Type of the payment method*/\n~~ type: string;\n}\n\nconst paymentMethodsWithoutBorder = ['googlepay', 'paywithgoogle'];\n\nconst PaymentMethodIcon = ({ src, ~~altDescription~~, type }: Readonly<PaymentMethodIconProps>) => {\n const classes = paymentMethodsWithoutBorder.~~includes~~(type)\n ? 'adyen-checkout__payment-method__image__wrapper'\n : classNames('adyen-checkout__payment-method__image__wrapper', 'adyen-checkout__payment-method__image__wrapper--outline');\n\n return <BrandImage wrapperClassName={classes} imgClassName={'adyen-checkout__payment-method__image'} src={src} alt={~~altDescription~~} />;\n};\n\nexport default PaymentMethodIcon;\n"],"names":["paymentMethodsWithoutBorder","PaymentMethodIcon","src","~~altDescription~~","type","classes","~~includes~~","classNames","h","BrandImage","wrapperClassName","imgClassName"~~,"alt"~~],"mappings":"~~gMAeA~~,MAAMA,EAA8B,CAAC,YAAa,~~iBAE5CC~~,EAAoB,EAAGC,MAAKC,~~iBAAgBC~~,~~WAC9C~~,MAAMC,~~EAAUL~~,~~EAA4BM~~,~~SAASF~~,~~GAC/C~~,~~iDACAG~~,EAAW,iDAAkD,2DAEnE,OAAOC,EAACC,EAAAA,~~CAAWC~~,iBAAkBL,EAASM,aAAc,~~wCAAyCT~~,IAAKA,~~EAAKU~~,~~IAAKT~~"}
1	+ {"version":3,"file":"PaymentMethodIcon.js","sources":["../../../../../../src/components/Dropin/components/PaymentMethod/PaymentMethodIcon.tsx"],"sourcesContent":["import { h } from 'preact';\nimport classNames from 'classnames';\nimport { BrandImage } from '../../../internal/BrandImage';\nimport { ElementType } from 'preact/compat';\n\ninterface PaymentMethodIconProps {\n src: string;\n alt: string;\n type: string;\n as?: ElementType;\n}\n\nconst paymentMethodsWithoutBorder = new Set(['googlepay', 'paywithgoogle']);\n\nconst PaymentMethodIcon = ({ src, alt, type, as }: Readonly<PaymentMethodIconProps>) => {\n const classes = paymentMethodsWithoutBorder.has(type)\n ? 'adyen-checkout__payment-method__image__wrapper'\n : classNames('adyen-checkout__payment-method__image__wrapper', 'adyen-checkout__payment-method__image__wrapper--outline');\n\n return <BrandImage as={as} wrapperClassName={classes} imgClassName={'adyen-checkout__payment-method__image'} src={src} alt={alt} />;\n};\n\nexport default PaymentMethodIcon;\n"],"names":["paymentMethodsWithoutBorder","Set","PaymentMethodIcon","src","alt","type","as","classes","has","classNames","h","BrandImage","wrapperClassName","imgClassName"],"mappings":"gMAYA,MAAMA,EAA8B,IAAIC,IAAI,CAAC,YAAa,kBAEpDC,EAAoB,EAAGC,MAAKC,MAAKC,OAAMC,SACzC,MAAMC,EAAUP,EAA4BQ,IAAIH,GAC1C,iDACAI,EAAW,iDAAkD,2DAEnE,OAAOC,EAACC,EAAAA,CAAWL,GAAIA,EAAIM,iBAAkBL,EAASM,aAAc,wCAAyCV,IAAKA,EAAKC,IAAKA"}

package/dist/es/components/Dropin/components/PaymentMethod/PaymentMethodItem/PaymentMethodItem.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{Component as e,createElement as t}from"../../../../../external/preact/dist/preact.js";import o from"../../../../../_virtual/index.js";import{PaymentMethodDetails as n}from"../PaymentMethodDetails.js";import a from"../PaymentMethodIcon.js";import i from"../DisableOneClickConfirmation.js";import s from"../PaymentMethodBrands/PaymentMethodBrands.js";import{BRAND_ICON_UI_EXCLUSION_LIST as d}from"../../../../internal/SecuredFields/lib/constants.js";import r from"../PaymentMethodName.js";import{useCoreContext as m}from"../../../../../core/Context/CoreProvider.js";import h from"../../../../internal/ExpandButton/ExpandButton.js";import{getFullBrandName as l}from"../../../../Card/components/CardInput/utils.js";import{stopPropagationForActionKeys as p}from"../../../../internal/Button/stopPropagationForActionKeys.js";import c from"../../../../internal/Button/Button.js";function y(e,t,o){return t in e?Object.defineProperty(e,t,{value:o,enumerable:!0,configurable:!0,writable:!0}):e[t]=o,e}class u extends e{render({paymentMethod:e,isSelected:y,isDisablingPaymentMethod:u,isLoading:_,standalone:f,showRadioButton:b}){const{i18n:C}=m();if(!e)return null;const k="card"===e.props.type||"scheme"===e.props.type,M=o({"adyen-checkout__payment-method":!0,[`adyen-checkout__payment-method--${e.props.type}`]:!0,...k&&{[`adyen-checkout__payment-method--${e.props.fundingSource??"credit"}`]:!0},"adyen-checkout__payment-method--selected":y,"adyen-checkout__payment-method--loading":_,"adyen-checkout__payment-method--disabling":u,"adyen-checkout__payment-method--confirming":this.state.showDisableStoredPaymentMethodConfirmation,"adyen-checkout__payment-method--standalone":f,[e._id]:!0,[this.props.className]:!0}),P=this.props.showRemovePaymentMethodButton&&e.props.oneClick&&y,D=`remove-${e._id}`,S=`container-${e._id}`,g=`button-${e._id}`,w=!e.props.oneClick&&e.brands&&e.brands.length>0;return t("div",{key:e._id,className:M,onClick:this.handleOnListItemClick},t("div",{className:"adyen-checkout__payment-method__header"},t(h,{className:"adyen-checkout__payment-method__header__content",buttonId:g,showRadioButton:b,isSelected:y,expandContentId:S,standalone:f},t(a,{...e.props.oneClick&&{altDescription:l(e.props.brand)},type:e.type,src:e.icon}),t("div",{className:"adyen-checkout__payment-method__header__details"},t(r,{displayName:e.displayName,isSelected:y,additionalInfo:e.additionalInfo}),w&&t(s,{showOtherInsteadOfNumber:e.props.showOtherInsteadOfNumber,keepBrandsVisible:e.props.keepBrandsVisible,brands:e.brands,excludedUIBrands:d,isPaymentMethodSelected:y}))),P&&t(c,{inline:!0,variant:"link",onClick:this.toggleDisableConfirmation,onKeyPress:p,onKeyDown:p,ariaExpanded:this.state.showDisableStoredPaymentMethodConfirmation,ariaControls:D},C.get("storedPaymentMethod.disable.button"))),t("div",{className:"adyen-checkout-pm-details-wrapper","aria-hidden":!y},t("div",{className:"adyen-checkout__payment-method__details",id:S,inert:!y||void 0},P&&t(i,{id:D,open:this.state.showDisableStoredPaymentMethodConfirmation,onDisable:this.onDisableStoredPaymentMethod,onCancel:this.toggleDisableConfirmation}),t(n,{paymentMethodComponent:e,isSelected:y}))))}constructor(...e){super(...e),y(this,"state",{showDisableStoredPaymentMethodConfirmation:!1}),y(this,"toggleDisableConfirmation",()=>{this.setState({showDisableStoredPaymentMethodConfirmation:!this.state.showDisableStoredPaymentMethodConfirmation})}),y(this,"onDisableStoredPaymentMethod",()=>{this.props.onDisableStoredPaymentMethod(this.props.paymentMethod),this.toggleDisableConfirmation()}),y(this,"handleOnListItemClick",()=>{const{onSelect:e,paymentMethod:t}=this.props;e(t)})}}y(u,"defaultProps",{paymentMethod:null,isSelected:!1,isLoaded:!1,isLoading:!1,showDisableStoredPaymentMethodConfirmation:!1,showRadioButton:!1});export{u as default};
+import{Component as e,createElement as t}from"../../../../../external/preact/dist/preact.js";import o from"../../../../../_virtual/index.js";import{PaymentMethodDetails as n}from"../PaymentMethodDetails.js";import a from"../PaymentMethodIcon.js";import i from"../DisableOneClickConfirmation.js";import s from"../PaymentMethodBrands/PaymentMethodBrands.js";import{BRAND_ICON_UI_EXCLUSION_LIST as d}from"../../../../internal/SecuredFields/lib/constants.js";import r from"../PaymentMethodName.js";import{useCoreContext as m}from"../../../../../core/Context/CoreProvider.js";import h from"../../../../internal/ExpandButton/ExpandButton.js";import{getFullBrandName as l}from"../../../../Card/components/CardInput/utils.js";import{stopPropagationForActionKeys as p}from"../../../../internal/Button/stopPropagationForActionKeys.js";import c from"../../../../internal/Button/Button.js";function y(e,t,o){return t in e?Object.defineProperty(e,t,{value:o,enumerable:!0,configurable:!0,writable:!0}):e[t]=o,e}class u extends e{render({paymentMethod:e,isSelected:y,isDisablingPaymentMethod:u,isLoading:_,standalone:f,showRadioButton:b}){const{i18n:C}=m();if(!e)return null;const k="card"===e.props.type||"scheme"===e.props.type,M=o({"adyen-checkout__payment-method":!0,[`adyen-checkout__payment-method--${e.props.type}`]:!0,...k&&{[`adyen-checkout__payment-method--${e.props.fundingSource??"credit"}`]:!0},"adyen-checkout__payment-method--selected":y,"adyen-checkout__payment-method--loading":_,"adyen-checkout__payment-method--disabling":u,"adyen-checkout__payment-method--confirming":this.state.showDisableStoredPaymentMethodConfirmation,"adyen-checkout__payment-method--standalone":f,[e._id]:!0,[this.props.className]:!0}),P=this.props.showRemovePaymentMethodButton&&e.props.oneClick&&y,S=`remove-${e._id}`,g=`container-${e._id}`,D=`button-${e._id}`,w=!e.props.oneClick&&e.brands&&e.brands.length>0;return t("div",{key:e._id,className:M,onClick:this.handleOnListItemClick},t("div",{className:"adyen-checkout__payment-method__header"},t(h,{className:"adyen-checkout__payment-method__header__content",buttonId:D,showRadioButton:b,isSelected:y,expandContentId:g,standalone:f},t(a,{...e.props.oneClick&&{alt:l(e.props.brand)},type:e.type,src:e.icon}),t("div",{className:"adyen-checkout__payment-method__header__details"},t(r,{displayName:e.displayName,isSelected:y,additionalInfo:e.additionalInfo}),w&&t(s,{showOtherInsteadOfNumber:e.props.showOtherInsteadOfNumber,keepBrandsVisible:e.props.keepBrandsVisible,brands:e.brands,excludedUIBrands:d,isPaymentMethodSelected:y}))),P&&t(c,{inline:!0,variant:"link",onClick:this.toggleDisableConfirmation,onKeyPress:p,onKeyDown:p,ariaExpanded:this.state.showDisableStoredPaymentMethodConfirmation,ariaControls:S},C.get("storedPaymentMethod.disable.button"))),t("div",{className:"adyen-checkout-pm-details-wrapper","aria-hidden":!y},t("div",{className:"adyen-checkout__payment-method__details",id:g,inert:!y||void 0},P&&t(i,{id:S,open:this.state.showDisableStoredPaymentMethodConfirmation,onDisable:this.onDisableStoredPaymentMethod,onCancel:this.toggleDisableConfirmation}),t(n,{paymentMethodComponent:e,isSelected:y}))))}constructor(...e){super(...e),y(this,"state",{showDisableStoredPaymentMethodConfirmation:!1}),y(this,"toggleDisableConfirmation",()=>{this.setState({showDisableStoredPaymentMethodConfirmation:!this.state.showDisableStoredPaymentMethodConfirmation})}),y(this,"onDisableStoredPaymentMethod",()=>{this.props.onDisableStoredPaymentMethod(this.props.paymentMethod),this.toggleDisableConfirmation()}),y(this,"handleOnListItemClick",()=>{const{onSelect:e,paymentMethod:t}=this.props;e(t)})}}y(u,"defaultProps",{paymentMethod:null,isSelected:!1,isLoaded:!1,isLoading:!1,showDisableStoredPaymentMethodConfirmation:!1,showRadioButton:!1});export{u as default};
 //# sourceMappingURL=PaymentMethodItem.js.map