From c82ae3472533e5ef6e573850b9f57380544788dd Mon Sep 17 00:00:00 2001 From: Lucas Chociay Date: Thu, 6 Oct 2022 17:50:13 -0300 Subject: [PATCH 1/5] feat: add value prop to elements --- src/types/elements/options.ts | 31 +++++++++++++++++++++++++++---- 1 file changed, 27 insertions(+), 4 deletions(-) diff --git a/src/types/elements/options.ts b/src/types/elements/options.ts index b5d7d05c..96ccd05a 100644 --- a/src/types/elements/options.ts +++ b/src/types/elements/options.ts @@ -30,6 +30,7 @@ interface SanitizedElementOptions { iconPosition?: string; cardBrand?: string; autoComplete?: string; + value?: string; } type ElementOptions = ElementInternalOptions & SanitizedElementOptions; @@ -47,12 +48,32 @@ interface AutoCompleteOption { type CustomizableElementOptions = Pick & AutoCompleteOption; -type CreateCardElementOptions = CustomizableElementOptions; +interface CardElementValue { + number: string; + // disabling camecalse so that the element value matches the API data + /* eslint-disable camelcase */ + expiration_month?: number; + expiration_year?: number; + /* eslint-enable camelcase */ + cvc?: string; +} + +interface CardExpirationDateValue { + // disabling camecalse so that the element value matches the API data + /* eslint-disable camelcase */ + expiration_month?: number; + expiration_year?: number; + /* eslint-enable camelcase */ +} + +type CreateCardElementOptions = CustomizableElementOptions & { + value?: CardElementValue; +}; type UpdateCardElementOptions = CreateCardElementOptions; type CreateTextElementOptions = CustomizableElementOptions & - Pick & + Pick & TransformOption & Required> & { 'aria-label'?: string; @@ -64,7 +85,7 @@ type UpdateTextElementOptions = Omit< >; type CreateCardNumberElementOptions = CustomizableElementOptions & - Pick & + Pick & Required> & { 'aria-label'?: string; }; @@ -78,6 +99,7 @@ type CreateCardExpirationDateElementOptions = CustomizableElementOptions & Pick & Required> & { 'aria-label'?: string; + value?: CardExpirationDateValue; }; type UpdateCardExpirationDateElementOptions = Omit< @@ -86,7 +108,7 @@ type UpdateCardExpirationDateElementOptions = Omit< >; type CreateCardVerificationCodeElementOptions = CustomizableElementOptions & - Pick & + Pick & Required> & { 'aria-label'?: string; }; @@ -113,6 +135,7 @@ export type { UpdateCardExpirationDateElementOptions, CreateCardVerificationCodeElementOptions, UpdateCardVerificationCodeElementOptions, + CardElementValue, }; export { ELEMENTS_TYPES }; From bb1d86943a3a52ec1fdc4335a00dfa2ff0be3056 Mon Sep 17 00:00:00 2001 From: Lucas Chociay Date: Fri, 7 Oct 2022 10:19:25 -0300 Subject: [PATCH 2/5] fix: change expiration date value type to match element methods --- src/types/elements/options.ts | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/src/types/elements/options.ts b/src/types/elements/options.ts index 96ccd05a..edbf0e1f 100644 --- a/src/types/elements/options.ts +++ b/src/types/elements/options.ts @@ -59,11 +59,8 @@ interface CardElementValue { } interface CardExpirationDateValue { - // disabling camecalse so that the element value matches the API data - /* eslint-disable camelcase */ - expiration_month?: number; - expiration_year?: number; - /* eslint-enable camelcase */ + month?: number; + year?: number; } type CreateCardElementOptions = CustomizableElementOptions & { From 6b9184e14732b590ef72e311566f7974fd9f60d1 Mon Sep 17 00:00:00 2001 From: Lucas Chociay Date: Fri, 7 Oct 2022 10:27:25 -0300 Subject: [PATCH 3/5] fix: export CardExpirationDateValue type --- src/types/elements/options.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/types/elements/options.ts b/src/types/elements/options.ts index edbf0e1f..76de38fc 100644 --- a/src/types/elements/options.ts +++ b/src/types/elements/options.ts @@ -133,6 +133,7 @@ export type { CreateCardVerificationCodeElementOptions, UpdateCardVerificationCodeElementOptions, CardElementValue, + CardExpirationDateValue, }; export { ELEMENTS_TYPES }; From a7ca8790e65446b075826ef2e20212dca4ebc1f8 Mon Sep 17 00:00:00 2001 From: Lucas Chociay Date: Fri, 7 Oct 2022 10:43:21 -0300 Subject: [PATCH 4/5] fix: make both values on expiration date required --- src/types/elements/options.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/types/elements/options.ts b/src/types/elements/options.ts index 76de38fc..b4169195 100644 --- a/src/types/elements/options.ts +++ b/src/types/elements/options.ts @@ -59,8 +59,8 @@ interface CardElementValue { } interface CardExpirationDateValue { - month?: number; - year?: number; + month: number; + year: number; } type CreateCardElementOptions = CustomizableElementOptions & { From b4405603fd518118fec3acde3890968b757622b8 Mon Sep 17 00:00:00 2001 From: Lucas Chociay Date: Fri, 7 Oct 2022 11:02:08 -0300 Subject: [PATCH 5/5] fix: make card number optional --- src/types/elements/options.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/types/elements/options.ts b/src/types/elements/options.ts index b4169195..1e069dba 100644 --- a/src/types/elements/options.ts +++ b/src/types/elements/options.ts @@ -49,7 +49,7 @@ type CustomizableElementOptions = Pick & AutoCompleteOption; interface CardElementValue { - number: string; + number?: string; // disabling camecalse so that the element value matches the API data /* eslint-disable camelcase */ expiration_month?: number;