Skip to content

Commit

Permalink
make registration calendar month short
Browse files Browse the repository at this point in the history
  • Loading branch information
storywithoutend committed Sep 4, 2024
1 parent fdd6460 commit 3915630
Show file tree
Hide file tree
Showing 3 changed files with 20 additions and 3 deletions.
7 changes: 6 additions & 1 deletion src/components/@atoms/Calendar/Calendar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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'

Expand Down Expand Up @@ -78,6 +79,8 @@ export const Calendar = forwardRef(
) => {
const inputRef = useDefaultRef<HTMLInputElement>(ref)

const breakpoint = useBreakpoint()

return (
<Label htmlFor="calendar" $highlighted={highlighted}>
<LabelInput
Expand Down Expand Up @@ -105,7 +108,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>
Expand Down
12 changes: 12 additions & 0 deletions src/utils/utils.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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', () => {
Expand Down
4 changes: 2 additions & 2 deletions src/utils/utils.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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) => {
Expand Down

0 comments on commit 3915630

Please sign in to comment.