diff --git a/package.json b/package.json index 8fd939c..07824a3 100644 --- a/package.json +++ b/package.json @@ -30,7 +30,7 @@ "postinstall": "husky install" }, "dependencies": { - "@basis-theory/basis-theory-js": "^2.5.0" + "@basis-theory/basis-theory-js": "^4.1.0" }, "devDependencies": { "@babel/cli": "^7.22.15", diff --git a/src/elements/CardElement.tsx b/src/elements/CardElement.tsx index 2824aaf..594256b 100644 --- a/src/elements/CardElement.tsx +++ b/src/elements/CardElement.tsx @@ -14,44 +14,46 @@ import { useElement } from './useElement'; import { useListener } from './useListener'; interface CardElementProps { - id: string; + autoComplete?: 'on' | 'off'; bt?: BasisTheoryReact; - style?: ElementStyle; + cardTypes?: CreditCardType[]; disabled?: boolean; - autoComplete?: 'on' | 'off'; - value?: CardElementValue<'static'>; + enableCopy?: boolean; + id: string; + inputMode?: `${InputMode}`; + onBlur?: ElementEventListener; onChange?: ElementEventListener; onFocus?: ElementEventListener; - onBlur?: ElementEventListener; - onReady?: ElementEventListener; onKeyDown?: ElementEventListener; - cardTypes?: CreditCardType[]; - validateOnChange?: boolean; - enableCopy?: boolean; + onReady?: ElementEventListener; readOnly?: boolean; - inputMode?: `${InputMode}`; + skipLuhnValidation?: boolean; + style?: ElementStyle; + validateOnChange?: boolean; + value?: CardElementValue<'static'>; } const CardElementC: FC< CardElementProps & { elementRef?: ForwardedRef } > = ({ - id, + autoComplete, bt, - style, + cardTypes, disabled, - autoComplete, - value, - onReady, + elementRef, + enableCopy, + id, + inputMode, + onBlur, onChange, onFocus, - onBlur, onKeyDown, - elementRef, - validateOnChange, - enableCopy, + onReady, readOnly, - inputMode, - cardTypes, + skipLuhnValidation, + style, + validateOnChange, + value, }) => { const wrapperRef = useRef(null); const element = useElement( @@ -59,15 +61,16 @@ const CardElementC: FC< 'card', wrapperRef, { - enableCopy, - validateOnChange, - style, + autoComplete, + cardTypes, disabled, - readOnly, + enableCopy, inputMode, - autoComplete, + readOnly, + skipLuhnValidation, + style, + validateOnChange, value, - cardTypes, }, bt, elementRef diff --git a/src/elements/CardNumberElement.tsx b/src/elements/CardNumberElement.tsx index c1eb5c8..d36e02e 100644 --- a/src/elements/CardNumberElement.tsx +++ b/src/elements/CardNumberElement.tsx @@ -14,50 +14,52 @@ import { useElement } from './useElement'; import { useListener } from './useListener'; interface CardNumberElementProps { - id: string; + 'aria-label'?: string; + autoComplete?: 'on' | 'off'; bt?: BasisTheoryReact; - style?: ElementStyle; + cardTypes?: CreditCardType[]; disabled?: boolean; - readOnly?: boolean; - inputMode?: `${InputMode}`; - autoComplete?: 'on' | 'off'; - 'aria-label'?: string; - placeholder?: string; + enableCopy?: boolean; iconPosition?: SanitizedElementOptions['iconPosition']; - value?: string; + id: string; + inputMode?: `${InputMode}`; + onBlur?: ElementEventListener; onChange?: ElementEventListener; onFocus?: ElementEventListener; - onBlur?: ElementEventListener; - onReady?: ElementEventListener; onKeyDown?: ElementEventListener; - cardTypes?: CreditCardType[]; + onReady?: ElementEventListener; + placeholder?: string; + readOnly?: boolean; + skipLuhnValidation?: boolean; + style?: ElementStyle; validateOnChange?: boolean; - enableCopy?: boolean; + value?: string; } const CardNumberElementC: FC< CardNumberElementProps & { elementRef?: ForwardedRef } > = ({ - id, + 'aria-label': ariaLabel, + autoComplete, bt, - style, + cardTypes, disabled, - readOnly, - autoComplete, - 'aria-label': ariaLabel, - placeholder, - inputMode, + elementRef, + enableCopy, iconPosition, - value, - onReady, + id, + inputMode, + onBlur, onChange, onFocus, - onBlur, onKeyDown, - elementRef, + onReady, + placeholder, + readOnly, + skipLuhnValidation, + style, validateOnChange, - enableCopy, - cardTypes, + value, }) => { const wrapperRef = useRef(null); const element = useElement< @@ -68,19 +70,20 @@ const CardNumberElementC: FC< 'cardNumber', wrapperRef, { - targetId: id, - style, - readOnly, + 'aria-label': ariaLabel, + autoComplete, + cardTypes, disabled, + enableCopy, + iconPosition, inputMode, - autoComplete, - 'aria-label': ariaLabel, placeholder, - iconPosition, - value, + readOnly, + skipLuhnValidation, + style, + targetId: id, validateOnChange, - enableCopy, - cardTypes, + value, }, bt, elementRef diff --git a/test/elements/CardElement.test.tsx b/test/elements/CardElement.test.tsx index acb38b4..69f7668 100644 --- a/test/elements/CardElement.test.tsx +++ b/test/elements/CardElement.test.tsx @@ -28,6 +28,7 @@ describe('CardElement', () => { let validateOnChange: boolean; let enableCopy: boolean; let readOnly: boolean; + let skipLuhnValidation: booleanl; let onReady: jest.Mock; let onChange: jest.Mock; let onFocus: jest.Mock; @@ -45,6 +46,7 @@ describe('CardElement', () => { }; disabled = chance.bool(); readOnly = chance.bool(); + skipLuhnValidation = chance.bool(); autoComplete = chance.pickone(['on', 'off']); value = { number: chance.cc({ type: 'mc' }), @@ -91,6 +93,7 @@ describe('CardElement', () => { onReady={onReady} readOnly={readOnly} ref={ref} + skipLuhnValidation={skipLuhnValidation} style={style} validateOnChange={validateOnChange} value={value} @@ -103,14 +106,15 @@ describe('CardElement', () => { 'card', { current: wrapperDiv }, { - style, + autoComplete, disabled, enableCopy, inputMode, - autoComplete, readOnly, - value, + skipLuhnValidation, + style, validateOnChange, + value, }, undefined, // eslint-disable-next-line unicorn/no-null diff --git a/test/elements/CardNumberElement.test.tsx b/test/elements/CardNumberElement.test.tsx index 136375b..b15a44c 100644 --- a/test/elements/CardNumberElement.test.tsx +++ b/test/elements/CardNumberElement.test.tsx @@ -30,6 +30,7 @@ describe('CardNumberElement', () => { let value: string; let validateOnChange: boolean; let enableCopy: boolean; + let skipLuhnValidation: boolean; let inputMode: `${InputMode}`; let onReady: jest.Mock; let onChange: jest.Mock; @@ -55,6 +56,7 @@ describe('CardNumberElement', () => { value = chance.cc({ type: 'mc' }); validateOnChange = chance.bool(); enableCopy = chance.bool(); + skipLuhnValidation = chance.bool(); inputMode = 'numeric'; onReady = jest.fn(); onChange = jest.fn(); @@ -87,6 +89,7 @@ describe('CardNumberElement', () => { placeholder={placeholder} readOnly={readOnly} ref={ref} + skipLuhnValidation={skipLuhnValidation} style={style} validateOnChange={validateOnChange} value={value} @@ -99,18 +102,19 @@ describe('CardNumberElement', () => { 'cardNumber', { current: wrapperDiv }, { - targetId: id, - style, + 'aria-label': ariaLabel, + autoComplete, disabled, enableCopy, - autoComplete, - readOnly, + iconPosition, inputMode, - 'aria-label': ariaLabel, placeholder, - iconPosition, - value, + readOnly, + skipLuhnValidation, + style, + targetId: id, validateOnChange, + value, }, undefined, // eslint-disable-next-line unicorn/no-null diff --git a/yarn.lock b/yarn.lock index 0023a27..216d180 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1474,12 +1474,12 @@ "@babel/helper-validator-identifier" "^7.22.20" to-fast-properties "^2.0.0" -"@basis-theory/basis-theory-js@^2.5.0": - version "2.5.0" - resolved "https://registry.yarnpkg.com/@basis-theory/basis-theory-js/-/basis-theory-js-2.5.0.tgz#fd3e5996dc854a3f2548ab55bd060a6a2f9745fd" - integrity sha512-ZIBBRu1lLEqpwMTAWbJES9HjTEOxdgrIbaWACQp9hUn/7RobUIMmsjTv4/DWB4PNdg0jJllECeKtaI5Jd0D66g== +"@basis-theory/basis-theory-js@^4.1.0": + version "4.1.0" + resolved "https://registry.yarnpkg.com/@basis-theory/basis-theory-js/-/basis-theory-js-4.1.0.tgz#6440689eeff919a4bd6d63b8f7336aec681eecab" + integrity sha512-8gCNj2iT6khH+ptdAk4LoN/q8k341+qPQottUnpdwf4TkVABRdrbayJkyqMtM/0VQGMDyLAeIS0hPgdmrA4rLQ== dependencies: - axios "^1.6.0" + axios "^1.6.4" camelcase-keys "^6.2.2" csstype "^3.0.11" os "^0.1.2" @@ -3378,7 +3378,7 @@ axe-core@^4.0.2: resolved "https://registry.npmjs.org/axe-core/-/axe-core-4.3.2.tgz" integrity sha512-5LMaDRWm8ZFPAEdzTYmgjjEdj1YnQcpfrVajO/sn/LhbpGp0Y0H64c2hLZI1gRMxfA+w1S71Uc/nHaOXgcCvGg== -axios@^0.21.4, axios@^1.6.0: +axios@^0.21.4, axios@^1.6.4: version "0.21.4" resolved "https://registry.yarnpkg.com/axios/-/axios-0.21.4.tgz#c67b90dc0568e5c1cf2b0b858c43ba28e2eda575" integrity sha512-ut5vewkiu8jjGBdqpM44XxjuCjq9LAKeHVmoVfHVzy8eHgxxq8SbAVQNovDA8mVi05kP0Ea/n/UzcSHcTJQfNg==