SummaryCard Update: maintain parity with web

added translations and update to include end date === today lint fixes isostring instead of toString()
Shopify · Jun 28, 2022 · 209839f · 209839f
1 parent efc564e
commit 209839f
Show file tree

Hide file tree

Showing 20 changed files with 49 additions and 22 deletions.
diff --git a/locales/da.json b/locales/da.json
@@ -165,6 +165,7 @@
         "activeSingleDate": "Aktiv den {date}",
         "activeFromDate": "Aktiv fra den {date}",
         "activeFromTodayUntilDate": "Aktiv fra i dag indtil {date}",
+        "activeFromDateUntilToday": "Aktiv fra den {date} indtil i dag",
         "activeFromDateToDate": "Aktiv fra {startDate} til {endDate}"
       },
       "AvailableOnPos": {

diff --git a/locales/de.json b/locales/de.json
@@ -164,6 +164,7 @@
         "today": "heute",
         "activeSingleDate": "Am {date} aktiv",
         "activeFromDate": "Aktiv ab {date}",
+        "activeFromDateUntilToday": "Aktiv seit dem {date} bis heute",
         "activeFromTodayUntilDate": "Aktiv von heute bis {date}",
         "activeFromDateToDate": "Aktiv von {startDate} bis {endDate}"
       },

diff --git a/locales/en.json b/locales/en.json
@@ -191,6 +191,7 @@
         "today": "today",
         "activeSingleDate": "Active {date}",
         "activeFromDate": "Active from {date}",
+        "activeFromDateUntilToday": "Active from {date} until today",
         "activeFromTodayUntilDate": "Active from today until {date}",
         "activeFromDateToDate": "Active from {startDate} to {endDate}"
       },

diff --git a/locales/es.json b/locales/es.json
@@ -168,6 +168,7 @@
         "today": "hoy",
         "activeSingleDate": "Activo el {date}",
         "activeFromDate": "Activo desde el {date}",
+        "activeFromDateUntilToday": "Activo a partir del {date} hasta hoy",
         "activeFromTodayUntilDate": "Activo desde hoy hasta el {date}",
         "activeFromDateToDate": "Activo desde el {startDate} hasta el {endDate}"
       },

diff --git a/locales/fi.json b/locales/fi.json
@@ -165,7 +165,8 @@
         "activeSingleDate": "Aktiivinen {date}",
         "activeFromDate": "Aktiivinen {date} alkaen",
         "activeFromTodayUntilDate": "Aktiivinen tästä päivästä päivämäärään {date} asti",
-        "activeFromDateToDate": "Aktiivinen {startDate}–{endDate}"
+        "activeFromDateToDate": "Aktiivinen {startDate}–{endDate}",
+        "activeFromDateUntilToday": "Aktiivinen päivästä {date} tähän päivään saakka"
       },
       "AvailableOnPos": {
         "availableOnCheckoutAndPos": "Saatavilla verkkomyyntikanavissa ja Point of Salessa",

diff --git a/locales/fr.json b/locales/fr.json
@@ -169,6 +169,7 @@
         "activeSingleDate": "Actif le {date}",
         "activeFromDate": "Actif dès le {date}",
         "activeFromTodayUntilDate": "Actif à partir d’aujourd’hui jusqu’au {date}",
+        "activeFromDateUntilToday": "Actif depuis le {date} jusqu’à ce jour",
         "activeFromDateToDate": "Actif du {startDate} au {endDate}"
       },
       "AvailableOnPos": {

diff --git a/locales/it.json b/locales/it.json
@@ -169,7 +169,8 @@
         "activeSingleDate": "Attivo il giorno {date}",
         "activeFromDate": "Attivo dal giorno {date}",
         "activeFromTodayUntilDate": "Attivo da oggi fino al giorno {date}",
-        "activeFromDateToDate": "Attivo dal {startDate} al {endDate}"
+        "activeFromDateToDate": "Attivo dal {startDate} al {endDate}",
+        "activeFromDateUntilToday": "Attivo dal giorno {date} a oggi"
       },
       "AvailableOnPos": {
         "availableOnCheckoutAndPos": "Disponibile sui canali di vendita online e Point of Sale",

diff --git a/locales/ja.json b/locales/ja.json
@@ -165,6 +165,7 @@
         "activeSingleDate": "{date}に有効",
         "activeFromDate": "{date}から有効",
         "activeFromTodayUntilDate": "今日から{date}まで有効",
+        "activeFromDateUntilToday": "{date}から本日まで有効",
         "activeFromDateToDate": "{startDate}から{endDate}まで有効"
       },
       "AvailableOnPos": {

diff --git a/locales/ko.json b/locales/ko.json
@@ -165,6 +165,7 @@
         "activeSingleDate": "{date}에 활성화",
         "activeFromDate": "{date}부터 활성화",
         "activeFromTodayUntilDate": "오늘부터 {date}까지 활성화",
+        "activeFromDateUntilToday": "{date}부터 오늘까지 활성 상태임",
         "activeFromDateToDate": "{startDate}부터 {endDate}까지 활성화"
       },
       "AvailableOnPos": {

diff --git a/locales/nb.json b/locales/nb.json
@@ -165,7 +165,8 @@
         "activeSingleDate": "Aktiv {date}",
         "activeFromDate": "Aktiv fra {date}",
         "activeFromTodayUntilDate": "Aktiv fra i dag til {date}",
-        "activeFromDateToDate": "Aktiv fra {startDate} til {endDate}"
+        "activeFromDateToDate": "Aktiv fra {startDate} til {endDate}",
+        "activeFromDateUntilToday": "Aktiv fra {date} til i dag"
       },
       "AvailableOnPos": {
         "availableOnCheckoutAndPos": "Tilgjengelig i salgskanaler på nettet og Point of Sale",

diff --git a/locales/nl.json b/locales/nl.json
@@ -165,7 +165,8 @@
         "activeSingleDate": "Actief op {date}",
         "activeFromDate": "Actief vanaf {date}",
         "activeFromTodayUntilDate": "Actief vanaf vandaag tot {date}",
-        "activeFromDateToDate": "Actief van {startDate} tot {endDate}"
+        "activeFromDateToDate": "Actief van {startDate} tot {endDate}",
+        "activeFromDateUntilToday": "Actief vanaf {date} tot vandaag"
       },
       "AvailableOnPos": {
         "availableOnCheckoutAndPos": "Beschikbaar op online verkoopkanalen en Point of Sale",

diff --git a/locales/pt-BR.json b/locales/pt-BR.json
@@ -169,7 +169,8 @@
         "activeSingleDate": "Ativo em {date}",
         "activeFromDate": "Ativo a partir de {date}",
         "activeFromTodayUntilDate": "Ativo de hoje até {date}",
-        "activeFromDateToDate": "Ativo de {startDate} até {endDate}"
+        "activeFromDateToDate": "Ativo de {startDate} até {endDate}",
+        "activeFromDateUntilToday": "Ativo de {date} até hoje"
       },
       "AvailableOnPos": {
         "availableOnCheckoutAndPos": "Disponível em canais de vendas online e no Shopify PDV",

diff --git a/locales/sv.json b/locales/sv.json
@@ -165,7 +165,8 @@
         "activeSingleDate": "Aktivt {date}",
         "activeFromDate": "Aktiv från {date}",
         "activeFromTodayUntilDate": "Aktiv från i dag till {date}",
-        "activeFromDateToDate": "Aktiv från {startDate} till {endDate}"
+        "activeFromDateToDate": "Aktiv från {startDate} till {endDate}",
+        "activeFromDateUntilToday": "Aktiv från och med {date} till i dag"
       },
       "AvailableOnPos": {
         "availableOnCheckoutAndPos": "Tillgänglig på online-försäljningskanaler och Point of sale",

diff --git a/locales/th.json b/locales/th.json
@@ -165,7 +165,8 @@
         "activeSingleDate": "ใช้งานเมื่อ {date}",
         "activeFromDate": "ใช้งานตั้งแต่ {date}",
         "activeFromTodayUntilDate": "ใช้งานตั้งแต่วันนี้จนถึง {date}",
-        "activeFromDateToDate": "ใช้งานตั้งแต่ {startDate} ถึง {endDate}"
+        "activeFromDateToDate": "ใช้งานตั้งแต่ {startDate} ถึง {endDate}",
+        "activeFromDateUntilToday": "ใช้งานตั้งแต่วันที่ {date} จนถึงวันนี้"
       },
       "AvailableOnPos": {
         "availableOnCheckoutAndPos": "ใช้ได้ในช่องทางการขายออนไลน์และการขายหน้าร้าน",

diff --git a/locales/tr.json b/locales/tr.json
@@ -165,7 +165,8 @@
         "activeSingleDate": "Etkin olduğu tarih: {date}",
         "activeFromDate": "Şu tarihten itibaren etkin: {date}",
         "activeFromTodayUntilDate": "Bugünden {date} tarihine kadar etkin",
-        "activeFromDateToDate": "{startDate} tarihinden {endDate} tarihine kadar etkin"
+        "activeFromDateToDate": "{startDate} tarihinden {endDate} tarihine kadar etkin",
+        "activeFromDateUntilToday": "{date} tarihinden bugüne kadar etkin"
       },
       "AvailableOnPos": {
         "availableOnCheckoutAndPos": "Online satış kanallarında ve Point of Sale'de kullanılabilir",

diff --git a/locales/vi.json b/locales/vi.json
@@ -165,7 +165,8 @@
         "activeSingleDate": "Có hiệu lực vào {date}",
         "activeFromDate": "Có hiệu lực từ {date}",
         "activeFromTodayUntilDate": "Có hiệu lực từ hôm nay đến {date}",
-        "activeFromDateToDate": "Có hiệu lực từ {startDate} đến {endDate}"
+        "activeFromDateToDate": "Có hiệu lực từ {startDate} đến {endDate}",
+        "activeFromDateUntilToday": "Hoạt động từ {date} đến tận hôm nay"
       },
       "AvailableOnPos": {
         "availableOnCheckoutAndPos": "Có trên các kênh bán hàng trực tuyến và Point of Sale",

diff --git a/locales/zh-CN.json b/locales/zh-CN.json
@@ -165,6 +165,7 @@
         "activeSingleDate": "在 {date} 有效",
         "activeFromDate": "从 {date} 开始生效",
         "activeFromTodayUntilDate": "从今天开始生效直到 {date}",
+        "activeFromDateUntilToday": "有效期为 {date} 至今天",
         "activeFromDateToDate": "从 {startDate} 开始生效直到 {endDate}"
       },
       "AvailableOnPos": {

diff --git a/locales/zh-TW.json b/locales/zh-TW.json
@@ -165,7 +165,8 @@
         "activeSingleDate": "啟用日期 {date}",
         "activeFromDate": "從 {date} 啟用",
         "activeFromTodayUntilDate": "啟用日期從今天起至 {date} 為止",
-        "activeFromDateToDate": "啟用日期從 {startDate} 至 {endDate} 為止"
+        "activeFromDateToDate": "啟用日期從 {startDate} 至 {endDate} 為止",
+        "activeFromDateUntilToday": "啟用日期從 {date} 起至今天為止"
       },
       "AvailableOnPos": {
         "availableOnCheckoutAndPos": "在線上銷售管道和 Point of Sale (POS) 中可供使用",

diff --git a/src/components/SummaryCard/components/ActiveDates/ActiveDates.tsx b/src/components/SummaryCard/components/ActiveDates/ActiveDates.tsx
@@ -46,6 +46,7 @@ const getDateSummary = (
   }
 
   const endDateAsDate = new Date(endDate);
+  const endsAtIsToday = isToday(endDateAsDate, ianaTimezone);
   if (isSameDay(startDateAsDate, endDateAsDate, ianaTimezone)) {
     const date = startsAtIsToday
       ? i18n.translate('today', I18N_SCOPE)
@@ -58,6 +59,10 @@ const getDateSummary = (
     return i18n.translate('activeFromTodayUntilDate', I18N_SCOPE, {
       date: formatDateForSummary(endDateAsDate, i18n),
     });
+  } else if (endsAtIsToday) {
+    return i18n.translate('activeFromDateUntilToday', I18N_SCOPE, {
+      date: formatDateForSummary(startDateAsDate, i18n),
+    });
   } else {
     return i18n.translate('activeFromDateToDate', I18N_SCOPE, {
       startDate: formatDateForSummary(startDateAsDate, i18n),

diff --git a/src/components/SummaryCard/components/ActiveDates/tests/ActiveDates.test.tsx b/src/components/SummaryCard/components/ActiveDates/tests/ActiveDates.test.tsx
@@ -7,6 +7,12 @@ import {ActiveDates} from '../ActiveDates';
 describe('<ActiveDates />', () => {
   const todayInShopTimeZone = new Date('2022-05-15T12:00:00.000Z');
 
+  function addMonthToNow(offset: number) {
+    const oneMonthFromNow = new Date(todayInShopTimeZone);
+    oneMonthFromNow.setMonth(oneMonthFromNow.getMonth() + offset);
+    return oneMonthFromNow;
+  }
+
   beforeEach(() => {
     clock.mock(todayInShopTimeZone);
   });
@@ -16,8 +22,8 @@ describe('<ActiveDates />', () => {
   });
 
   const mockProps = {
-    startDate: new Date(),
-    endDate: new Date(),
+    startDate: todayInShopTimeZone,
+    endDate: todayInShopTimeZone,
     displayEndDate: false,
     shopIanaTimeZone: 'America/Montreal',
   };
@@ -114,20 +120,18 @@ describe('<ActiveDates />', () => {
     expect(activeDates).toContainReactText('Active from Jul 15, 2024');
   });
 
-  it('displays active from today until date summary when start date is today and end date is within current year', () => {
-    const oneMonthFromNow = new Date(
-      todayInShopTimeZone.setMonth(todayInShopTimeZone.getMonth() + 1),
-    );
+  it('displays active from date until today summary when start date is within current year and end date is today', () => {
+    const oneMonthAgo = addMonthToNow(-1);
 
     const activeDates = mountWithApp(
       <ActiveDates
         {...mockProps}
-        startDate={new Date().toISOString()}
-        endDate={oneMonthFromNow.toISOString()}
+        startDate={oneMonthAgo.toISOString()}
+        endDate={todayInShopTimeZone.toISOString()}
       />,
     );
 
-    expect(activeDates).toContainReactText('Active from today until Aug 15');
+    expect(activeDates).toContainReactText('Active from Jun 15 until today');
   });
 
   it('displays active from today until date summary when start date is today and end date is after current year', () => {
@@ -143,7 +147,7 @@ describe('<ActiveDates />', () => {
       />,
     );
 
-    expect(activeDates).toContainReactText('Active from Aug 15, 2025');
+    expect(activeDates).toContainReactText('Active from Jul 15, 2025');
   });
 
   it('displays active from date to date summary when both start dates are in the future and after current year', () => {
@@ -163,7 +167,7 @@ describe('<ActiveDates />', () => {
     );
 
     expect(activeDates).toContainReactText(
-      'Active from Aug 15, 2026 to Aug 15, 2027',
+      'Active from Jul 15, 2026 to Jul 15, 2027',
     );
   });
 
@@ -183,6 +187,6 @@ describe('<ActiveDates />', () => {
       />,
     );
 
-    expect(activeDates).toContainReactText('Active from Sep 15 to Oct 15');
+    expect(activeDates).toContainReactText('Active from Aug 15 to Sep 15');
   });
 });