Update ActiveDatesCard to accept an optional timezone

Shopify · Sep 5, 2024 · 0befa03 · 0befa03
1 parent bdfbad7
commit 0befa03
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 3 deletions.
diff --git a/src/components/ActiveDatesCard/ActiveDatesCard.tsx b/src/components/ActiveDatesCard/ActiveDatesCard.tsx
@@ -25,10 +25,15 @@ export interface ActiveDatesCardProps {
   endDate: Field<DateTime | null>;
 
   /**
-   * The shop's time zone abbreviation. This can be queried from the [Shop gql object](https://shopify.dev/api/admin-graphql/2022-07/objects/Shop#field-shop-timezoneabbreviation).
+   * The shop's time zone abbreviation. This can be queried from the [Shop gql object](https://shopify.dev/api/admin-graphql/2022-07/objects/Shop#field-timezoneabbreviation).
    */
   timezoneAbbreviation: string;
 
+  /**
+   * (optional) The shop's iana time zone. This can be queried from the [Shop gql object](https://shopify.dev/api/admin-graphql/2022-07/objects/Shop#field-ianatimezone).
+   */
+  timezone?: string;
+
   /**
    * (optional) The day that should be used as the start of the week.
    *
@@ -48,13 +53,14 @@ export function ActiveDatesCard({
   startDate,
   endDate,
   timezoneAbbreviation,
+  timezone,
   weekStartsOn = DEFAULT_WEEK_START_DAY,
   disabled,
 }: ActiveDatesCardProps) {
   const [i18n] = useI18n();
   const nowInUTC = new Date();
 
-  const ianaTimezone = i18n.defaultTimezone!;
+  const ianaTimezone = timezone ?? i18n.defaultTimezone!;
   const showEndDate = Boolean(endDate.value);
 
   // When start date or time changes, updates the end date to be later than start date (if applicable)

diff --git a/src/components/ActiveDatesCard/tests/ActiveDatesCard.test.tsx b/src/components/ActiveDatesCard/tests/ActiveDatesCard.test.tsx
@@ -14,7 +14,7 @@ describe('<ActiveDatesCard />', () => {
     startDate: mockField('2023-02-20T18:23:00.000Z'),
     endDate: mockField('2023-03-20T18:23:00.000Z'),
     locale: 'en-US',
-    ianaTimeZone: 'America/Toronto',
+    timezone: 'America/Toronto',
     timezoneAbbreviation: 'EDT',
   };