Skip to content

Commit

Permalink
feat: adds skipLuhnValidation (#234)
Browse files Browse the repository at this point in the history
  • Loading branch information
@kevinperaza
kevinperaza committed Mar 5, 2024
1 parent 42ded99 commit 6404d8a
Show file tree
Hide file tree
Showing 6 changed files with 92 additions and 78 deletions.
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
57 changes: 30 additions & 27 deletions src/elements/CardElement.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,60 +14,63 @@ 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<CardElementEvents, 'blur'>;
onChange?: ElementEventListener<CardElementEvents, 'change'>;
onFocus?: ElementEventListener<CardElementEvents, 'focus'>;
onBlur?: ElementEventListener<CardElementEvents, 'blur'>;
onReady?: ElementEventListener<CardElementEvents, 'ready'>;
onKeyDown?: ElementEventListener<CardElementEvents, 'keydown'>;
cardTypes?: CreditCardType[];
validateOnChange?: boolean;
enableCopy?: boolean;
onReady?: ElementEventListener<CardElementEvents, 'ready'>;
readOnly?: boolean;
inputMode?: `${InputMode}`;
skipLuhnValidation?: boolean;
style?: ElementStyle;
validateOnChange?: boolean;
value?: CardElementValue<'static'>;
}

const CardElementC: FC<
CardElementProps & { elementRef?: ForwardedRef<ICardElement> }
> = ({
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<HTMLDivElement>(null);
const element = useElement<ICardElement, CreateCardElementOptions>(
id,
'card',
wrapperRef,
{
enableCopy,
validateOnChange,
style,
autoComplete,
cardTypes,
disabled,
readOnly,
enableCopy,
inputMode,
autoComplete,
readOnly,
skipLuhnValidation,
style,
validateOnChange,
value,
cardTypes,
},
bt,
elementRef
Expand Down
71 changes: 37 additions & 34 deletions src/elements/CardNumberElement.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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<CardNumberElementEvents, 'blur'>;
onChange?: ElementEventListener<CardNumberElementEvents, 'change'>;
onFocus?: ElementEventListener<CardNumberElementEvents, 'focus'>;
onBlur?: ElementEventListener<CardNumberElementEvents, 'blur'>;
onReady?: ElementEventListener<CardNumberElementEvents, 'ready'>;
onKeyDown?: ElementEventListener<CardNumberElementEvents, 'keydown'>;
cardTypes?: CreditCardType[];
onReady?: ElementEventListener<CardNumberElementEvents, 'ready'>;
placeholder?: string;
readOnly?: boolean;
skipLuhnValidation?: boolean;
style?: ElementStyle;
validateOnChange?: boolean;
enableCopy?: boolean;
value?: string;
}

const CardNumberElementC: FC<
CardNumberElementProps & { elementRef?: ForwardedRef<ICardNumberElement> }
> = ({
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<HTMLDivElement>(null);
const element = useElement<
Expand All @@ -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
Expand Down
10 changes: 7 additions & 3 deletions test/elements/CardElement.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ describe('CardElement', () => {
let validateOnChange: boolean;
let enableCopy: boolean;
let readOnly: boolean;
let skipLuhnValidation: boolean;
let onReady: jest.Mock;
let onChange: jest.Mock;
let onFocus: jest.Mock;
Expand All @@ -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' }),
Expand Down Expand Up @@ -91,6 +93,7 @@ describe('CardElement', () => {
onReady={onReady}
readOnly={readOnly}
ref={ref}
skipLuhnValidation={skipLuhnValidation}
style={style}
validateOnChange={validateOnChange}
value={value}
Expand All @@ -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
Expand Down
18 changes: 11 additions & 7 deletions test/elements/CardNumberElement.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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();
Expand Down Expand Up @@ -87,6 +89,7 @@ describe('CardNumberElement', () => {
placeholder={placeholder}
readOnly={readOnly}
ref={ref}
skipLuhnValidation={skipLuhnValidation}
style={style}
validateOnChange={validateOnChange}
value={value}
Expand All @@ -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
Expand Down
12 changes: 6 additions & 6 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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==
Expand Down

0 comments on commit 6404d8a

Please sign in to comment.