fix: display date and time in some vouchers (#2618)

* fix: display date and time in some vouhcers * fix imports * fix locale issue * adds safety checks
Adyen · Apr 8, 2024 · 57bacc7 · 57bacc7
1 parent 17f15e9
commit 57bacc7
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 3 deletions.
diff --git a/.changeset/brown-wolves-stare.md 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/...lib/src/components/Dragonpay/components/DragonpayVoucherResult/DragonpayVoucherResult.tsx b/...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/...es/lib/src/components/Econtext/components/EcontextVoucherResult/EcontextVoucherResult.tsx b/...es/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
@@ -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<any>;
 
+    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;