Release/v4.2.0

src/components/giving-tuesday/Countdown.js

@@ -1,120 +1,107 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import classNames from 'classnames';
 import SbEditable from 'storyblok-react';
 
 import CountdownPie from './CountdownPie';
 import UseCountdown from '../../hooks/useCountdown';
 
+// use useId when it becomes available
+const generateClassName = (key) =>
+  `${key}-${Math.floor(Math.random() * 100000, 5)}`;
+
 const getDescriptorString = (descriptor, time) => {
   return time !== 1 ? `${descriptor}s` : descriptor;
 };
 
 const convertDaysToHours = (days) => (days ? days * 24 : 0);
 
 const Countdown = ({ blok }) => {
-  const { date, hasDays, hourPieRange, useNew } = blok;
+  const { date, dayPieRange, hasDays, hourPieRange, isDST } = blok;
   const [countdownDate, setCountdownDate] = useState(null);
   const [days, hours, minutes, seconds] = UseCountdown(countdownDate) || [];
   const displayHours = hasDays ? hours : convertDaysToHours(days) + hours;
   const displayHourPieRange = hasDays ? 24 : hourPieRange;
+  const noTime = days + hours + minutes + seconds <= 0;
+  const daysClassName = useMemo(() => generateClassName('days'), []);
+  const hoursClassName = useMemo(() => generateClassName('hours'), []);
+  const minutesClassName = useMemo(() => generateClassName('minutes'), []);
+  const secondsClassName = useMemo(() => generateClassName('seconds'), []);
+  const pacificTimeOffset = useMemo(() => {
+    const pacificTime = isDST ? 420 : 480;
+    return pacificTime * 60 * 1000;
+  }, [isDST]);
 
   useEffect(() => {
     if (!countdownDate) {
-      if (!date) {
-        if (useNew) {
-          /**
-           * manually set date to 04/05/2024 7PM w/ a UTC offset (no daylight savings)
-           * this should only stay for the current campaign, can remove this and make
-           * component purely storyblok configurable after campaign
-           */
-          setCountdownDate(new Date(Date.UTC(2024, 3, 6, 2, 0, 0)));
-        } else {
-          /**
-           * manually set date to 04/04/2024 7AM w/ a UTC offset (no daylight savings)
-           * this should only stay for the current campaign, can remove this and make
-           * component purely storyblok configurable after campaign
-           */
-          setCountdownDate(new Date(Date.UTC(2024, 3, 4, 14, 0, 0)));
-        }
-      } else {
-        /**
-         * the date prop returns in the following format: "2023-11-21 23:56"
-         * we have convert it to be usable for the js Date object
-         */
-        const dateArray = date.split(' ');
-
-        setCountdownDate(new Date(`${dateArray[0]}T${dateArray[1]}`));
-      }
+      /**
+       * the date prop returns in the following format: "2023-11-21 23:56"
+       * we have convert it to be a usable for the js Date object
+       */
+      const blokDateArray = date?.split(' ');
+      const dateArray = blokDateArray?.[0]?.split('-');
+      const timeArray = blokDateArray?.[1]?.split(':');
+      const blokDateObj = new Date(
+        `${dateArray?.[0]}-${dateArray?.[1]}-${dateArray?.[2]} ${timeArray?.[0]}:${timeArray?.[1]}`
+      );
+      const utcOffset = blokDateObj?.getTimezoneOffset() * 60 * 1000;
+      const timezoneDifference = utcOffset - pacificTimeOffset;
+      const utcDateObj = new Date(
+        blokDateObj?.getTime() + utcOffset - timezoneDifference
+      );
+      setCountdownDate(
+        new Date(
+          Date.UTC(
+            utcDateObj?.getFullYear(),
+            utcDateObj?.getMonth(),
+            utcDateObj?.getDate(),
+            utcDateObj?.getHours(),
+            utcDateObj?.getMinutes()
+          )
+        )
+      );
     }
-  }, [countdownDate, setCountdownDate]);
+  }, [date, countdownDate, setCountdownDate]);
 
   return (
     <SbEditable content={blok}>
-      {days + hours + minutes + seconds <= 0 ? (
-        <div
-          className={classNames('countdown-wrapper', {
-            ['has-days']: days > 0,
-          })}
-        >
-          {days > 0 && hasDays && (
-            <CountdownPie className="pie-days" descriptor="days" percent={0}>
-              0
-            </CountdownPie>
-          )}
-          <CountdownPie clasName="pie-hours" descriptor="hours" percent={0}>
-            0
-          </CountdownPie>
-          <CountdownPie clasName="pie-minutes" descriptor="minutes" percent={0}>
-            0
-          </CountdownPie>
+      <div
+        aria-atomic="true"
+        className={classNames('countdown-wrapper', {
+          ['has-days']: days > 0 && hasDays,
+        })}
+        role="timer"
+      >
+        {days > 0 && hasDays && (
           <CountdownPie
-            className="pie-seconds"
-            descriptor="seconds"
-            percent={0}
+            className={daysClassName}
+            descriptor={getDescriptorString('day', days)}
+            percent={noTime ? 0 : (days / dayPieRange) * 100}
           >
-            0
+            {noTime ? 0 : days}
           </CountdownPie>
-        </div>
-      ) : (
-        <div
-          aria-atomic="true"
-          className={classNames('countdown-wrapper', {
-            ['has-days']: days > 0,
-          })}
-          role="timer"
+        )}
+        <CountdownPie
+          className={hoursClassName}
+          descriptor={getDescriptorString('hour', displayHours)}
+          percent={noTime ? 0 : (displayHours / displayHourPieRange) * 100}
         >
-          {days > 0 && hasDays && (
-            <CountdownPie
-              className="pie-days"
-              descriptor={getDescriptorString('day', days)}
-              percent={(days / 29) * 100}
-            >
-              {days}
-            </CountdownPie>
-          )}
-          <CountdownPie
-            className="pie-hours"
-            descriptor={getDescriptorString('hour', displayHours)}
-            percent={(displayHours / displayHourPieRange) * 100}
-          >
-            {displayHours}
-          </CountdownPie>
-          <CountdownPie
-            className="pie-minutes"
-            descriptor={getDescriptorString('minute', minutes)}
-            percent={(minutes / 60) * 100}
-          >
-            {minutes}
-          </CountdownPie>
-          <CountdownPie
-            className="pie-seconds"
-            descriptor={getDescriptorString('second', seconds)}
-            percent={(seconds / 60) * 100}
-          >
-            {seconds}
-          </CountdownPie>
-        </div>
-      )}
+          {noTime ? 0 : displayHours}
+        </CountdownPie>
+        <CountdownPie
+          className={minutesClassName}
+          descriptor={getDescriptorString('minute', minutes)}
+          percent={noTime ? 0 : (minutes / 60) * 100}
+        >
+          {noTime ? 0 : minutes}
+        </CountdownPie>
+        <CountdownPie
+          className={secondsClassName}
+          descriptor={getDescriptorString('second', seconds)}
+          percent={noTime ? 0 : (seconds / 60) * 100}
+        >
+          {noTime ? 0 : seconds}
+        </CountdownPie>
+      </div>
     </SbEditable>
   );
 };