Merge branch 'main' into feature/fet-1191-name-wrapper-section-in-mor…

…e-tab

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

@@ -1,8 +1,9 @@
-import { ForwardedRef, forwardRef, InputHTMLAttributes } from 'react'
+import { ForwardedRef, forwardRef, InputHTMLAttributes, useState } from 'react'
 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'
 
@@ -77,6 +78,10 @@ export const Calendar = forwardRef(
     ref: ForwardedRef<HTMLInputElement>,
   ) => {
     const inputRef = useDefaultRef<HTMLInputElement>(ref)
+    const [minDuratiion] = useState(min ?? value)
+    const minDate = secondsToDate(minDuratiion)
+
+    const breakpoint = useBreakpoint()
 
     return (
       <Label htmlFor="calendar" $highlighted={highlighted}>
@@ -87,25 +92,33 @@ export const Calendar = forwardRef(
           {...props}
           ref={inputRef}
           value={secondsToDateInput(value)}
-          min={secondsToDateInput(min ?? value)}
+          min={secondsToDateInput(minDuratiion)}
           onFocus={(e) => {
             e.target.select()
           }}
           onChange={(e) => {
             if (!onChange) return
 
-            let { valueAsDate: newValueAsDate } = e.currentTarget
-            if (newValueAsDate) {
-              // Have to add in the timezone offset to make sure that the date shows up correctly after calendar picking for UTC
-              newValueAsDate = new Date(
-                newValueAsDate.getTime() + newValueAsDate.getTimezoneOffset() * 60 * 1000,
-              )
-            }
-            onChange({ ...e, currentTarget: { ...e.currentTarget, valueAsDate: newValueAsDate } })
+            const { valueAsDate: newValueAsDate } = e.currentTarget
+            if (!newValueAsDate) return
+
+            // Have to add in the timezone offset to make sure that the date shows up correctly after calendar picking for UTC
+            const normalizedValueAsDate = new Date(
+              newValueAsDate.getTime() + newValueAsDate.getTimezoneOffset() * 60 * 1000,
+            )
+
+            const limitedValueAsDate =
+              minDate > normalizedValueAsDate ? minDate : normalizedValueAsDate
+            onChange({
+              ...e,
+              currentTarget: { ...e.currentTarget, valueAsDate: limitedValueAsDate },
+            })
           }}
           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) => {