5.4.0 Release Bug Fixes (#2789)

* fix: addresses CORL-848

Fixed copy for new commenters feature.

* fix: address CORL-847

Revert the line hight changes on select fields for now.

* fix: addressed CORL-851

Changed copy on CSS field.

* fix: addressed CORL-840

Changed deletion window to 24 hours.
Refactored durations to use TIME enum.

src/core/client/stream/tabs/Comments/Stream/DeleteAccount/StreamDeletionRequestCalloutContainer.tsx

@@ -2,7 +2,7 @@ import { Localized } from "@fluent/react/compat";
 import React, { FunctionComponent, useCallback } from "react";
 import { graphql } from "react-relay";
 
-import { SCHEDULED_DELETION_TIMESPAN_DAYS } from "coral-common/constants";
+import { SCHEDULED_DELETION_WINDOW_DURATION } from "coral-common/constants";
 import { useCoralContext } from "coral-framework/lib/bootstrap";
 import { useMutation, withFragmentContainer } from "coral-framework/lib/relay";
 import CLASSES from "coral-stream/classes";
@@ -24,8 +24,8 @@ interface Props {
   viewer: StreamDeletionRequestCalloutContainer_viewer;
 }
 
-const formatter = (locales: string[], date: Date) => {
-  return Intl.DateTimeFormat(locales, {
+const formatter = (locales: string[], date: Date) =>
+  Intl.DateTimeFormat(locales, {
     year: "numeric",
     month: "numeric",
     day: "numeric",
@@ -33,11 +33,9 @@ const formatter = (locales: string[], date: Date) => {
     minute: "numeric",
     second: "numeric",
   }).format(date);
-};
 
-const subtractDays = (date: Date, days: number) => {
-  const millisecondsInADay = 86400000;
-  return new Date(date.getTime() - days * millisecondsInADay);
+const subtractSeconds = (date: Date, seconds: number) => {
+  return new Date(date.getTime() - seconds * 1000);
 };
 
 const StreamDeletionRequestCalloutContainer: FunctionComponent<Props> = ({
@@ -57,9 +55,9 @@ const StreamDeletionRequestCalloutContainer: FunctionComponent<Props> = ({
   const requestDate = viewer.scheduledDeletionDate
     ? formatter(
         locales,
-        subtractDays(
+        subtractSeconds(
           new Date(viewer.scheduledDeletionDate),
-          SCHEDULED_DELETION_TIMESPAN_DAYS
+          SCHEDULED_DELETION_WINDOW_DURATION
         )
       )
     : null;

src/core/client/stream/tabs/Profile/Settings/ChangeUsername/ChangeUsernameContainer.tsx

@@ -9,8 +9,9 @@ import React, {
 } from "react";
 import { Field, Form } from "react-final-form";
 
-import { ALLOWED_USERNAME_CHANGE_FREQUENCY } from "coral-common/constants";
-import { reduceSeconds, UNIT } from "coral-common/helpers/i18n";
+import { ALLOWED_USERNAME_CHANGE_TIMEFRAME_DURATION } from "coral-common/constants";
+import { reduceSeconds } from "coral-common/helpers/i18n";
+import TIME from "coral-common/time";
 import getAuthenticationIntegrations from "coral-framework/helpers/getAuthenticationIntegrations";
 import { useCoralContext } from "coral-framework/lib/bootstrap";
 import { InvalidRequestError } from "coral-framework/lib/errors";
@@ -50,9 +51,10 @@ import UpdateUsernameMutation from "./UpdateUsernameMutation";
 
 import styles from "./ChangeUsernameContainer.css";
 
-const FREQUENCYSCALED = reduceSeconds(ALLOWED_USERNAME_CHANGE_FREQUENCY, [
-  UNIT.DAYS,
-]);
+const FREQUENCYSCALED = reduceSeconds(
+  ALLOWED_USERNAME_CHANGE_TIMEFRAME_DURATION,
+  [TIME.DAY]
+);
 
 interface Props {
   viewer: ViewerData;
@@ -107,7 +109,8 @@ const ChangeUsernameContainer: FunctionComponent<Props> = ({
     if (username && username.history.length > 1) {
       const lastUsernameEditAllowed = new Date();
       lastUsernameEditAllowed.setSeconds(
-        lastUsernameEditAllowed.getSeconds() - ALLOWED_USERNAME_CHANGE_FREQUENCY
+        lastUsernameEditAllowed.getSeconds() -
+          ALLOWED_USERNAME_CHANGE_TIMEFRAME_DURATION
       );
       const lastUsernameEdit =
         username.history[username.history.length - 1].createdAt;
@@ -122,7 +125,9 @@ const ChangeUsernameContainer: FunctionComponent<Props> = ({
       const date = new Date(
         username.history[username.history.length - 1].createdAt
       );
-      date.setSeconds(date.getSeconds() + ALLOWED_USERNAME_CHANGE_FREQUENCY);
+      date.setSeconds(
+        date.getSeconds() + ALLOWED_USERNAME_CHANGE_TIMEFRAME_DURATION
+      );
       return date;
     }
     return null;

src/core/client/stream/tabs/Profile/Settings/DeleteAccount/Pages/RequestAccountDeletionMutation.tsx

@@ -1,8 +1,7 @@
-import { DateTime } from "luxon";
 import { graphql } from "react-relay";
 import { Environment } from "relay-runtime";
 
-import { SCHEDULED_DELETION_TIMESPAN_DAYS } from "coral-common/constants";
+import { SCHEDULED_DELETION_WINDOW_DURATION } from "coral-common/constants";
 import { getViewer } from "coral-framework/helpers";
 import {
   commitMutationPromiseNormalized,
@@ -49,9 +48,9 @@ const RequestAccountDeletionMutation = createMutation(
           },
           optimisticUpdater: store => {
             const viewer = getViewer(environment)!;
-            const deletionDate = DateTime.fromJSDate(new Date())
-              .plus({ days: SCHEDULED_DELETION_TIMESPAN_DAYS })
-              .toISO();
+            const deletionDate = new Date(
+              Date.now() + SCHEDULED_DELETION_WINDOW_DURATION * 1000
+            ).toISOString();
             const viewerProxy = store.get(viewer.id);
             if (viewerProxy !== null) {
               viewerProxy.setValue(deletionDate, "scheduledDeletionDate");

src/core/client/stream/tabs/Profile/Settings/DownloadCommentsContainer.tsx

@@ -3,8 +3,9 @@ import cn from "classnames";
 import React, { FunctionComponent, useCallback } from "react";
 import { graphql } from "react-relay";
 
-import { DOWNLOAD_LIMIT_TIMEFRAME } from "coral-common/constants";
-import { reduceSeconds, UNIT } from "coral-common/helpers/i18n";
+import { DOWNLOAD_LIMIT_TIMEFRAME_DURATION } from "coral-common/constants";
+import { reduceSeconds } from "coral-common/helpers/i18n";
+import TIME from "coral-common/time";
 import { useCoralContext } from "coral-framework/lib/bootstrap";
 import { useMutation, withFragmentContainer } from "coral-framework/lib/relay";
 import CLASSES from "coral-stream/classes";
@@ -34,8 +35,8 @@ const DownloadCommentsContainer: FunctionComponent<Props> = ({ viewer }) => {
     ? Math.ceil((Date.now() - lastDownloadedAt.getTime()) / 1000)
     : 0;
   const canDownload =
-    !lastDownloadedAt || sinceLastDownload >= DOWNLOAD_LIMIT_TIMEFRAME;
-  const tilCanDownload = DOWNLOAD_LIMIT_TIMEFRAME - sinceLastDownload;
+    !lastDownloadedAt || sinceLastDownload >= DOWNLOAD_LIMIT_TIMEFRAME_DURATION;
+  const tilCanDownload = DOWNLOAD_LIMIT_TIMEFRAME_DURATION - sinceLastDownload;
   const formatter = new Intl.DateTimeFormat(locales, {
     day: "2-digit",
     month: "2-digit",
@@ -46,9 +47,9 @@ const DownloadCommentsContainer: FunctionComponent<Props> = ({ viewer }) => {
     timeZoneName: "short",
   });
   const { scaled, unit } = reduceSeconds(tilCanDownload, [
-    UNIT.DAYS,
-    UNIT.HOURS,
-    UNIT.MINUTES,
+    TIME.DAY,
+    TIME.HOUR,
+    TIME.MINUTE,
   ]);
 
   return (