adding in local time on the prefernce page for digest schedules

packages/react-preferences/src/components/DigestSchedule.tsx

@@ -1,7 +1,8 @@
+import { usePreferences } from "@trycourier/react-hooks";
 import React, { useEffect, useState } from "react";
 import styled from "styled-components";
 import { DigestSchedule } from "~/types";
-import { usePreferences } from "@trycourier/react-hooks";
+import formatDigest, { toUpperCaseFirstLetter } from "~/utils/format_digest";
 
 const DigestScheduleContainer = styled.div`
   display: flex;
@@ -68,12 +69,6 @@ const DigestSchedules: React.FunctionComponent<{
     onScheduleChange(value);
   };
 
-  const format = (schedule: string) => {
-    if (!schedule) return "";
-    const formatted = schedule.charAt(0).toUpperCase() + schedule.slice(1);
-    return formatted;
-  };
-
   return (
     <div>
       {schedules.map((schedule) => (
@@ -86,9 +81,9 @@ const DigestSchedules: React.FunctionComponent<{
             onChange={handleChange}
           />
           <div className="digest-details">
-            <div className="digest-period">{format(schedule.period)}</div>
+            <div className="digest-period">{formatDigest(schedule)}</div>
             <div className="digest-repetition">
-              {format(schedule.repetition)}
+              {toUpperCaseFirstLetter(schedule.repetition)}
             </div>
           </div>
         </DigestScheduleContainer>

packages/react-preferences/src/types.ts

@@ -36,6 +36,14 @@ export interface DigestSchedule {
   repetition: string;
   scheduleId: string;
   default?: boolean;
+  start: string;
+  recurrence: string;
+  repeat?: {
+    frequency: number;
+    interval: "day" | "week" | "month" | "year";
+    on?: string | RepeatOn;
+  };
+  end?: number | string;
 }
 
 export interface IPreferenceTemplate {
@@ -52,3 +60,13 @@ export interface IRecipientPreference {
   routingPreferences: Array<ChannelClassification>;
   digestSchedule: string;
 }
+
+export type RepeatOn = {
+  sunday?: boolean;
+  monday?: boolean;
+  tuesday?: boolean;
+  wednesday?: boolean;
+  thursday?: boolean;
+  friday?: boolean;
+  saturday?: boolean;
+};

packages/react-preferences/src/utils/format_digest.ts

@@ -0,0 +1,67 @@
+import format from "date-fns/format";
+import { DigestSchedule, RepeatOn } from "~/types";
+
+export const toUpperCaseFirstLetter = (str: string) => {
+  return str.charAt(0).toUpperCase() + str.slice(1);
+};
+
+const formatDigest = (schedule: DigestSchedule) => {
+  if (schedule.period === "Instant") return "Instant";
+  else if (!schedule.start) {
+    if (!schedule.period) {
+      return "";
+    }
+    return toUpperCaseFirstLetter(schedule.period) + " UTC";
+  }
+  const formatted = getScheduleString(schedule);
+  return toUpperCaseFirstLetter(formatted);
+};
+
+const getScheduleString = (schedule: DigestSchedule) => {
+  if (schedule?.recurrence === "custom") {
+    let scheduleString = `Every ${schedule?.repeat?.frequency} ${schedule?.repeat?.interval}(s)`;
+    switch (schedule?.repeat?.interval) {
+      case "week":
+        scheduleString += ` on ${getWeekdaysRepeatOnString(
+          schedule?.repeat?.on as RepeatOn
+        )}`;
+        break;
+      case "month":
+        scheduleString += ` on ${schedule?.repeat?.on} of the month`;
+        break;
+      default:
+        scheduleString += "";
+    }
+
+    if (schedule?.end) {
+      scheduleString +=
+        typeof schedule.end === "number"
+          ? ` (${schedule.end} occurrences)`
+          : ` (until ${format(new Date(schedule.end), "MM-dd-yyyy")})`;
+    }
+
+    return scheduleString;
+  }
+  if (schedule?.recurrence === "instant") {
+    return "Instant";
+  }
+
+  return `${schedule?.recurrence} at ${format(
+    new Date(schedule?.start),
+    "h:mmaaaaa'm'" // lowercase am/pm while date-fns is older than 2.23.0
+  )}`;
+};
+
+const getWeekdaysRepeatOnString = (repeatOn: RepeatOn) => {
+  const weekdays = Object.keys(repeatOn)
+    .map((weekday) => {
+      if (repeatOn[weekday]) {
+        return `${weekday.charAt(0).toUpperCase()}${weekday.substring(1, 3)}`;
+      }
+    })
+    .filter(Boolean) as string[];
+
+  return weekdays.join(", ");
+};
+
+export default formatDigest;