Merge pull request #858 from ensdomains/fet-1635-mobile-month-short-name

make registration calendar month short

src/components/@atoms/Calendar/Calendar.test.tsx

@@ -1,14 +1,24 @@
-import { fireEvent, render, screen } from '@app/test-utils'
+import { fireEvent, mockFunction, render, screen } from '@app/test-utils'
 
-import { fireEvent } from '@testing-library/react'
 import { InputHTMLAttributes, useState } from 'react'
 import { describe, expect, it, vi } from 'vitest'
 
 import { secondsToDate, secondsToDateInput } from '@app/utils/date'
 import { formatExpiry } from '@app/utils/utils'
 
 import { Calendar } from './Calendar'
+import { useBreakpoint } from '@app/utils/BreakpointProvider'
 
+vi.mock('@app/utils/BreakpointProvider')
+
+const mockUseBreakpoint = mockFunction(useBreakpoint)
+mockUseBreakpoint.mockReturnValue({
+  xs: true,
+  sm: true,
+  md: true,
+  lg: false,
+  xl: false,
+})
 
 const value = 3600
 const min = 0

src/components/@atoms/Calendar/Calendar.tsx

@@ -3,6 +3,7 @@ import styled, { css } from 'styled-components'
 
 import CalendarSVG from '@app/assets/Calendar.svg'
 import { useDefaultRef } from '@app/hooks/useDefaultRef'
+import { useBreakpoint } from '@app/utils/BreakpointProvider'
 import { secondsToDate, secondsToDateInput } from '@app/utils/date'
 import { formatExpiry } from '@app/utils/utils'
 
@@ -80,6 +81,8 @@ export const Calendar = forwardRef(
     const [minDuratiion] = useState(min ?? value)
     const minDate = secondsToDate(minDuratiion)
 
+    const breakpoint = useBreakpoint()
+
     return (
       <Label htmlFor="calendar" $highlighted={highlighted}>
         <LabelInput
@@ -113,7 +116,9 @@ export const Calendar = forwardRef(
           }}
           onClick={() => inputRef.current!.showPicker()}
         />
-        <span data-testid="calendar-date">{formatExpiry(secondsToDate(value))}</span>
+        <span data-testid="calendar-date">
+          {formatExpiry(secondsToDate(value), { short: !breakpoint.sm })}
+        </span>
         <CalendarIcon>
           <CalendarSVG height={16} width={16} />
         </CalendarIcon>

src/components/@molecules/DateSelection/DateSelection.test.tsx

@@ -1,13 +1,27 @@
-import { act, render, renderHook, screen, userEvent, waitFor } from '@app/test-utils'
+import { act, mockFunction, render, renderHook, screen, userEvent, waitFor } from '@app/test-utils'
 
 import { useState } from 'react'
-import { afterEach, describe, expect, it, vi } from 'vitest'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 
 import { ONE_DAY, ONE_YEAR } from '@app/utils/time'
 
 import { DateSelection } from './DateSelection'
+import { useBreakpoint } from '@app/utils/BreakpointProvider'
+
+vi.mock('@app/utils/BreakpointProvider')
+
+const mockUseBreakpoint = mockFunction(useBreakpoint)
 
 describe('DateSelection', () => {
+  beforeEach(() => {
+    mockUseBreakpoint.mockReturnValue({
+      xs: true,
+      sm: true,
+      md: true,
+      lg: false,
+      xl: false,
+    })
+  })
   afterEach(() => {
     vi.resetAllMocks()
   })

src/utils/utils.test.ts

@@ -65,6 +65,18 @@ describe('formatExpiry', () => {
     const result = formatExpiry(expiry)
     expect(result).toEqual('January 1, 2020')
   })
+
+  it('should format the date with short month if options.short is true', () => {
+    const expiry = new Date('2020-01-01')
+    const result = formatExpiry(expiry, { short: true })
+    expect(result).toEqual('Jan 1, 2020')
+  })
+
+  it('should format the date with long month if options.short is false', () => {
+    const expiry = new Date('2020-01-01')
+    const result = formatExpiry(expiry, { short: false })
+    expect(result).toEqual('January 1, 2020')
+  })
 })
 
 describe('formatDateTime', () => {

src/utils/utils.ts

@@ -31,9 +31,9 @@ export const deriveYearlyFee = ({
   return yearlyFee
 }
 
-export const formatExpiry = (expiry: Date) =>
+export const formatExpiry = (expiry: Date, options: { short?: boolean } = {}) =>
   `${expiry.toLocaleDateString(undefined, {
-    month: 'long',
+    month: options.short ? 'short' : 'long',
   })} ${expiry.getDate()}, ${expiry.getFullYear()}`
 
 export const formatDateTime = (date: Date) => {