Replace moment.js with native Date/Intl APIs

.changeset/plenty-peaches-agree.md

@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": patch
+---
+
+Replace a few moment.js invocations with native browser APIs

src/giftCards/GiftCardUpdate/providers/GiftCardDetailsProvider/utils.ts

@@ -1,17 +1,17 @@
-// @ts-strict-ignore
-import moment from "moment";
-
 import { type ExtendedGiftCard, type GiftCardBase } from "./types";
 
 function isGiftCardExpired<T extends GiftCardBase>(giftCard: T): boolean {
   if (!giftCard?.expiryDate) {
     return false;
   }
 
-  return moment(giftCard?.expiryDate).isBefore(moment());
+  return new Date(giftCard.expiryDate) < new Date();
 }
 
-export function getExtendedGiftCard<T extends GiftCardBase>(giftCard?: T): ExtendedGiftCard<T> {
+export function getExtendedGiftCard<T extends GiftCardBase>(
+  giftCard?: T,
+): ExtendedGiftCard<T> | undefined {
+  // todo do not accept optional value, check for existence higher
   if (!giftCard) {
     return undefined;
   }

src/giftCards/GiftCardsList/providers/GiftCardListProvider/GiftCardListProvider.tsx

@@ -135,7 +135,10 @@ export const GiftCardsListProvider = ({ children, params }: GiftCardsListProvide
     variables: newQueryVariables,
     handleError: handleGiftCardListError,
   });
-  const giftCards = mapEdgesToItems(data?.giftCards)?.map(getExtendedGiftCard) ?? [];
+  const giftCards =
+    mapEdgesToItems(data?.giftCards)
+      ?.map(getExtendedGiftCard)
+      .filter((g): g is NonNullable<typeof g> => g !== undefined) ?? [];
   const providerValues: GiftCardsListConsumerProps = {
     onSort: handleSort,
     sort: getSortParams(params),

src/products/utils/handlers.ts

@@ -15,7 +15,6 @@ import {
 } from "@dashboard/graphql";
 import { type FormChange, type UseFormResult } from "@dashboard/hooks/useForm";
 import { diff } from "fast-array-diff";
-import moment from "moment";
 
 export function createChannelsPriceChangeHandler(
   channelListings: ChannelData[],
@@ -113,7 +112,7 @@ export const createPreorderEndDateChangeHandler =
   event => {
     form.change(event);
 
-    if (moment(event.target.value).isSameOrBefore(Date.now())) {
+    if (new Date(event.target.value) <= new Date()) {
       form.setError("preorderEndDateTime", preorderPastDateErrorMessage);
     } else {
       form.clearErrors("preorderEndDateTime");

src/taxes/components/TaxAppLabel.stories.tsx

@@ -0,0 +1,57 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { TaxAppLabel } from "./TaxAppLabel";
+
+const meta: Meta<typeof TaxAppLabel> = {
+  title: "Taxes/TaxAppLabel",
+  component: TaxAppLabel,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof TaxAppLabel>;
+
+export const WithNameAndDate: Story = {
+  args: {
+    name: "Avalara",
+    logoUrl: undefined,
+    created: "2024-01-15T10:30:00Z",
+    id: "app-1",
+  },
+};
+
+export const WithLogo: Story = {
+  args: {
+    name: "TaxJar",
+    logoUrl: "https://placeholdit.com/128x128/dddddd/999999?text=app",
+    created: "2024-06-20T14:00:00Z",
+    id: "app-2",
+  },
+};
+
+export const WithoutDate: Story = {
+  args: {
+    name: "Tax App",
+    logoUrl: undefined,
+    created: null,
+    id: "app-3",
+  },
+};
+
+export const WithoutName: Story = {
+  args: {
+    name: null,
+    logoUrl: undefined,
+    created: "2024-03-10T08:00:00Z",
+    id: "app-4",
+  },
+};
+
+export const MinimalProps: Story = {
+  args: {
+    name: null,
+    logoUrl: undefined,
+    created: null,
+    id: "app-5",
+  },
+};

src/taxes/components/TaxAppLabel.test.tsx

@@ -0,0 +1,56 @@
+import { render, screen } from "@testing-library/react";
+
+import { TaxAppLabel } from "./TaxAppLabel";
+
+jest.mock("@dashboard/extensions/components/AppAvatar/AppAvatar", () => ({
+  AppAvatar: () => <div data-testid="app-avatar" />,
+}));
+
+jest.mock("@dashboard/hooks/useLocale", () => () => ({
+  locale: "en",
+  setLocale: () => undefined,
+}));
+
+describe("TaxAppLabel", () => {
+  it("renders locale-formatted date from ISO string", () => {
+    // Arrange & Act
+    render(
+      <TaxAppLabel name="Tax App" logoUrl={undefined} created="2024-06-15T10:30:00Z" id="1" />,
+    );
+
+    // Assert
+    const expected = new Intl.DateTimeFormat("en", {
+      year: "numeric",
+      month: "2-digit",
+      day: "2-digit",
+    }).format(new Date("2024-06-15T10:30:00Z"));
+
+    expect(screen.getByText(`(${expected})`)).toBeInTheDocument();
+  });
+
+  it("does not render date when created is null", () => {
+    // Arrange & Act
+    const { container } = render(
+      <TaxAppLabel name="Tax App" logoUrl={undefined} created={null} id="1" />,
+    );
+
+    // Assert
+    expect(container.textContent).not.toContain("(");
+  });
+
+  it("renders app name section when name is provided", () => {
+    // Arrange & Act
+    render(<TaxAppLabel name="Tax App" logoUrl={undefined} created={null} id="1" />);
+
+    // Assert
+    expect(screen.getByText(/Use app/)).toBeInTheDocument();
+  });
+
+  it("does not render name section when name is null", () => {
+    // Arrange & Act
+    render(<TaxAppLabel name={null} logoUrl={undefined} created="2024-01-01T00:00:00Z" id="1" />);
+
+    // Assert
+    expect(screen.queryByText(/Use app/)).not.toBeInTheDocument();
+  });
+});

src/taxes/components/TaxAppLabel.tsx

@@ -1,6 +1,6 @@
 import { AppAvatar } from "@dashboard/extensions/components/AppAvatar/AppAvatar";
+import useLocale from "@dashboard/hooks/useLocale";
 import { Box, Text } from "@saleor/macaw-ui-next";
-import moment from "moment";
 import { FormattedMessage } from "react-intl";
 
 interface TaxAppLabelProps {
@@ -10,7 +10,18 @@ interface TaxAppLabelProps {
   id: string;
 }
 
+const formatDate = (locale: string, created: string): string => {
+  const dateTimeString = new Intl.DateTimeFormat(locale, {
+    year: "numeric",
+    month: "2-digit",
+    day: "2-digit",
+  }).format(new Date(created));
+
+  return `(${dateTimeString})`;
+};
+
 export const TaxAppLabel = ({ name, logoUrl, created }: TaxAppLabelProps) => {
+  const { locale } = useLocale();
   const logo = logoUrl ? { source: logoUrl } : undefined;
 
   return (
@@ -33,7 +44,7 @@ export const TaxAppLabel = ({ name, logoUrl, created }: TaxAppLabelProps) => {
       )}
       {created && (
         <Text size={2} color="default2">
-          ({moment(created).format("YYYY-MM-DD")})
+          {formatDate(locale, created)}
         </Text>
       )}
     </Box>

src/welcomePage/WelcomePageOnboarding/hooks/useNewUserCheck.ts

@@ -1,5 +1,4 @@
 import { useUser } from "@dashboard/auth/useUser";
-import moment from "moment";
 
 export const useNewUserCheck = () => {
   const { user } = useUser();
@@ -19,18 +18,19 @@ export const useNewUserCheck = () => {
     };
   }
 
-  const userJoinedDate = moment(user.dateJoined);
-  const thresholdDate = moment(thresholdDateString);
+  const userJoinedDate = new Date(user.dateJoined);
+  // Reset time, so timezone will not flip the day
+  const thresholdDate = new Date(`${thresholdDateString}T00:00:00`);
 
-  if (!userJoinedDate.isValid() || !thresholdDate.isValid()) {
+  if (isNaN(userJoinedDate.getTime()) || isNaN(thresholdDate.getTime())) {
     return {
       isNewUser: false,
       isUserLoading: false,
     };
   }
 
   return {
-    isNewUser: userJoinedDate.isAfter(thresholdDate),
+    isNewUser: userJoinedDate > thresholdDate,
     isUserLoading: false,
   };
 };