diff --git a/.changeset/brown-wolves-stare.md b/.changeset/brown-wolves-stare.md new file mode 100644 index 0000000000..c2866475d1 --- /dev/null +++ b/.changeset/brown-wolves-stare.md @@ -0,0 +1,5 @@ +--- +"@adyen/adyen-web": patch +--- + +fix: vouchers (econtext and dragonpay) can now show expiration date with time diff --git a/packages/lib/src/components/Dragonpay/components/DragonpayVoucherResult/DragonpayVoucherResult.tsx b/packages/lib/src/components/Dragonpay/components/DragonpayVoucherResult/DragonpayVoucherResult.tsx index 004c173d0b..3da84ad37f 100644 --- a/packages/lib/src/components/Dragonpay/components/DragonpayVoucherResult/DragonpayVoucherResult.tsx +++ b/packages/lib/src/components/Dragonpay/components/DragonpayVoucherResult/DragonpayVoucherResult.tsx @@ -25,7 +25,7 @@ export default function DragonpayVoucherResult(props: DragonpayVoucherResultProp surcharge={surcharge && i18n.amount(surcharge.value, surcharge.currency)} voucherDetails={ [ - { label: i18n.get('voucher.expirationDate'), value: i18n.date(expiresAt) }, + { label: i18n.get('voucher.expirationDate'), value: i18n.dateTime(expiresAt) }, { label: i18n.get('voucher.alternativeReference'), value: alternativeReference } ] as VoucherDetail[] } diff --git a/packages/lib/src/components/Econtext/components/EcontextVoucherResult/EcontextVoucherResult.tsx b/packages/lib/src/components/Econtext/components/EcontextVoucherResult/EcontextVoucherResult.tsx index 123b9dda41..6ad1fb9eee 100644 --- a/packages/lib/src/components/Econtext/components/EcontextVoucherResult/EcontextVoucherResult.tsx +++ b/packages/lib/src/components/Econtext/components/EcontextVoucherResult/EcontextVoucherResult.tsx @@ -20,7 +20,7 @@ const EcontextVoucherResult = (props: EcontextVoucherResultProps) => { amount={totalAmount && i18n.amount(totalAmount.value, totalAmount.currency)} voucherDetails={[ { label: i18n.get('voucher.collectionInstitutionNumber'), value: collectionInstitutionNumber }, - { label: i18n.get('voucher.expirationDate'), value: i18n.date(expiresAt) }, + { label: i18n.get('voucher.expirationDate'), value: i18n.dateTime(expiresAt) }, { label: i18n.get('voucher.telephoneNumber'), value: maskedTelephoneNumber } ]} copyBtn diff --git a/packages/lib/src/language/Language.ts b/packages/lib/src/language/Language.ts index 1cba414d9d..7a14806692 100644 --- a/packages/lib/src/language/Language.ts +++ b/packages/lib/src/language/Language.ts @@ -3,7 +3,7 @@ import { FALLBACK_LOCALE, defaultTranslation } from './config'; import locales from './locales'; import { getLocalisedAmount } from '../utils/amount-util'; import DateTimeFormatOptions = Intl.DateTimeFormatOptions; - +import DateTimeFormat = Intl.DateTimeFormat; export class Language { private readonly supportedLocales: string[]; @@ -13,6 +13,18 @@ export class Language { public readonly customTranslations; public loaded: Promise; + public readonly timeFormatOptions: DateTimeFormatOptions = { + hour: 'numeric', + minute: 'numeric' + }; + public readonly timeAndDateFormatOptions: DateTimeFormatOptions = { + year: 'numeric', + month: '2-digit', + day: '2-digit', + ...this.timeFormatOptions + }; + public readonly timeAndDateFormatter: DateTimeFormat; + constructor(locale: string = FALLBACK_LOCALE, customTranslations: object = {}) { const defaultLocales = Object.keys(locales); this.customTranslations = formatCustomTranslations(customTranslations, defaultLocales); @@ -23,6 +35,8 @@ export class Language { const [languageCode] = this.locale.split('-'); this.languageCode = languageCode; + this.timeAndDateFormatter = DateTimeFormat(this.locale, this.timeAndDateFormatOptions); + this.loaded = loadTranslations(this.locale, this.customTranslations).then(translations => { this.translations = translations; }); @@ -59,9 +73,19 @@ export class Language { * @param options - Options for {@link Date.toLocaleDateString} */ date(date: string, options: object = {}) { + if (date === undefined) return ''; const dateOptions: DateTimeFormatOptions = { year: 'numeric', month: '2-digit', day: '2-digit', ...options }; return new Date(date).toLocaleDateString(this.locale, dateOptions); } + + /** + * Returns a localized string for a date and time + * @param date - Date to be localized + */ + dateTime(date: string) { + if (date === undefined) return ''; + return this.timeAndDateFormatter.format(new Date(date)); + } } export default Language;