fix(charges-page): fix billing periods calculation

Author: OliverDudgeon

components/finance/ProductCharges.tsx

@@ -20,6 +20,7 @@ import {
 import { filesize } from "filesize";
 
 import { toLocalTimeString } from "../../utils/app/datetime";
+import { formatOrdinals } from "../../utils/app/ordinals";
 import { getBillingPeriods } from "../../utils/app/products";
 import { CenterLoader } from "../CenterLoader";
 
@@ -57,9 +58,9 @@ export const ProductCharges = ({ productId }: ProductChargesProps) => {
         <em>{productData.product.organisation.name}</em> organisation{" "}
       </Typography>
       <Typography gutterBottom component="h2" variant="h4">
-        Billing period
+        Billing period (Billed on the {formatOrdinals(productData.product.unit.billing_day)} of the
+        month)
       </Typography>
-
       <Select
         id="select-billing-cycle"
         size="small"
@@ -72,7 +73,6 @@ export const ProductCharges = ({ productId }: ProductChargesProps) => {
           <MenuItem key={d1} value={i}>{`${d1} — ${d2}`}</MenuItem>
         ))}
       </Select>
-
       <Typography gutterBottom sx={{ mt: 2 }} variant="h2">
         Charges
       </Typography>

components/results/DateTimeListItem.tsx

@@ -2,9 +2,9 @@ import { ListItem, ListItemText, useMediaQuery, useTheme } from "@mui/material";
 import dayjs from "dayjs";
 import utc from "dayjs/plugin/utc";
 
-dayjs.extend(utc);
+import { DATE_FORMAT, TIME_FORMAT } from "../../constants/datetimes";
 
-import { DATE_FORMAT, TIME_FORMAT } from "../../utils/app/datetime";
+dayjs.extend(utc);
 
 export interface DateTimeListItemProps {
   /**

constants/datetimes.ts

@@ -0,0 +1,2 @@
+export const DATE_FORMAT = "DD/MM/YY";
+export const TIME_FORMAT = "HH:mm:ss";

utils/app/datetime.ts

@@ -1,10 +1,9 @@
 import dayjs from "dayjs";
 import utc from "dayjs/plugin/utc";
 
-dayjs.extend(utc);
+import { DATE_FORMAT, TIME_FORMAT } from "../../constants/datetimes";
 
-export const DATE_FORMAT = "DD/MM/YY";
-export const TIME_FORMAT = "HH:mm:ss";
+dayjs.extend(utc);
 
 export const toLocalTimeString = (
   utcTimestamp: string,

utils/app/ordinals.ts

@@ -0,0 +1,14 @@
+const pr = new Intl.PluralRules("en-US", { type: "ordinal" });
+
+const suffixes = new Map([
+  ["one", "st"],
+  ["two", "nd"],
+  ["few", "rd"],
+  ["other", "th"],
+]);
+
+export const formatOrdinals = (n: number) => {
+  const rule = pr.select(n);
+  const suffix = suffixes.get(rule);
+  return `${n}${suffix}`;
+};

utils/app/products.ts

@@ -2,6 +2,8 @@ import type { Dayjs } from "dayjs";
 import dayjs from "dayjs";
 import utc from "dayjs/plugin/utc";
 
+import { DATE_FORMAT } from "../../constants/datetimes";
+
 dayjs.extend(utc);
 
 /**
@@ -27,14 +29,7 @@ export const getBillingDay = () => {
 export const getBillingPeriods = (billingDay: number, created: string) => {
   const createdDay = dayjs.utc(created);
 
-  let firstBillingDay: Dayjs;
-  if (billingDay > createdDay.day()) {
-    // Current moths billing day hasn't happened yet
-    firstBillingDay = createdDay.set("day", billingDay);
-  } else {
-    // Current months billing day has already passed
-    firstBillingDay = createdDay.set("day", billingDay).add(1, "month");
-  }
+  const firstBillingDay = createdDay.set("date", billingDay);
 
   let date = firstBillingDay;
   const dates: Dayjs[] = [];
@@ -45,7 +40,7 @@ export const getBillingPeriods = (billingDay: number, created: string) => {
 
   return dates.map((d, index) => [
     index - dates.length + 1,
-    d.local().format("YYYY-MM-DD"),
-    d.local().add(1, "month").subtract(1, "day").format("YYYY-MM-DD"),
+    d.local().format(DATE_FORMAT),
+    d.local().add(1, "month").format(DATE_FORMAT),
   ]);
 };