'use client'
import React, { useState, useCallback, useEffect } from 'react'
import {
Box,
alpha,
keyframes,
Popover,
Typography,
Button,
Paper,
IconButton,
GlobalStyles,
} from '@mui/material'
import CalendarTodayIcon from '@mui/icons-material/CalendarToday'
import ArrowBackIcon from '@mui/icons-material/ArrowBack'
import TextField, { TextFieldProps } from '../../Text'
// Sacred animations
const floatGlyph = keyframes`
0% { transform: translateY(0px) scale(1); }
50% { transform: translateY(-2px) scale(1.1); }
100% { transform: translateY(0px) scale(1); }
`
const glowPulse = keyframes`
0% {
box-shadow: 0 0 20px rgba(255, 215, 0, 0.3), 0 0 40px rgba(255, 215, 0, 0.1);
border-color: ${alpha('#FFD700', 0.5)};
}
50% {
box-shadow: 0 0 30px rgba(255, 215, 0, 0.5), 0 0 60px rgba(255, 215, 0, 0.2);
border-color: ${alpha('#FFD700', 0.8)};
}
100% {
box-shadow: 0 0 20px rgba(255, 215, 0, 0.3), 0 0 40px rgba(255, 215, 0, 0.1);
border-color: ${alpha('#FFD700', 0.5)};
}
`
// Egyptian calendar styles for Storybook compatibility
const EgyptianCalendarStyles = () => (
)
// Month names for display
const MONTHS = [
'Jan',
'Feb',
'Mar',
'Apr',
'May',
'Jun',
'Jul',
'Aug',
'Sep',
'Oct',
'Nov',
'Dec',
]
// Generate years from current year to current year + 20
const generateYears = (): number[] => {
const currentYear = new Date().getFullYear()
const years: number[] = []
for (let i = 0; i < 21; i++) {
years.push(currentYear + i)
}
return years
}
// Check if a date is valid and in the future (for expiration dates)
const isValidFutureDate = (year: number, month: number): boolean => {
// Check if it's in the future or current month
const today = new Date()
const currentYear = today.getFullYear()
const currentMonth = today.getMonth() + 1 // getMonth() returns 0-11
// For expiration dates, we allow current month and future months
return year > currentYear || (year === currentYear && month >= currentMonth)
}
export interface CreditCardExpirationProps
extends Omit {
/**
* Callback when expiration date changes and passes validation
*/
onChange?: (
value: string,
isValid: boolean,
expirationDate: Date | null
) => void
/**
* Current expiration value (MM/YY format)
*/
value?: string
/**
* Custom error message for invalid expiration dates
*/
errorMessage?: string
/**
* Enable sacred Egyptian theme
*/
sacredTheme?: boolean
/**
* Whether this is a default/existing value that should be partially masked
*/
isDefaultValue?: boolean
}
const CreditCardExpiration: React.FC = ({
onChange,
value = '',
errorMessage = 'Invalid expiration date',
sacredTheme = false,
isDefaultValue = false,
...props
}) => {
const [internalValue, setInternalValue] = useState(value)
const [isValid, setIsValid] = useState(true)
const [isFocused, setIsFocused] = useState(false)
const [hasBeenEdited, setHasBeenEdited] = useState(false)
const [isCalendarOpen, setIsCalendarOpen] = useState(false)
const [step, setStep] = useState<'month' | 'year' | 'confirmation'>('month')
const [selectedMonth, setSelectedMonth] = useState(null)
const [selectedYear, setSelectedYear] = useState(null)
const [dragPosition, setDragPosition] = useState({ x: 0, y: 0 })
const [isDragging, setIsDragging] = useState(false)
const [dragOffset, setDragOffset] = useState({ x: 0, y: 0 })
const [suppressFormatting, setSuppressFormatting] = useState(false)
/**
* Validates an expiration date string (MM/YY format)
*/
const validateExpiration = useCallback((expiration: string): boolean => {
// Remove any non-digit characters except slash
const cleanValue = expiration.replace(/[^\d/]/g, '')
// Check if empty and consider valid if empty (for optional fields)
if (cleanValue === '') return true
// Check format MM/YY
const parts = cleanValue.split('/')
if (parts.length !== 2) return false
const month = parseInt(parts[0], 10)
const year = parseInt(parts[1], 10)
// Validate month (01-12)
if (isNaN(month) || month < 1 || month > 12) return false
// Validate year (assume 20XX for YY format)
if (isNaN(year) || year < 0 || year > 99) return false
// Convert 2-digit year to full year (assume 20XX)
const fullYear = 2000 + year
// Use the centralized future date validation
return isValidFutureDate(fullYear, month)
}, [])
// Format the input: MM/YY
const formatInput = useCallback(
(input: string): string => {
// Remove all non-digits
const digits = input.replace(/\D/g, '')
// If suppressing formatting, just return the digits without auto-adding "/"
if (suppressFormatting) {
return digits.slice(0, 4)
}
// Apply MM/YY formatting
if (digits.length >= 2) {
return digits.slice(0, 2) + '/' + digits.slice(2, 4)
}
return digits
},
[suppressFormatting]
)
// Mask expiration for security - show M*/Y*
const maskExpiration = useCallback((expiration: string): string => {
if (!expiration) return expiration
const parts = expiration.split('/')
if (parts.length === 2) {
const maskedMonth = parts[0].charAt(0) + '*'
const maskedYear = parts[1].charAt(0) + '*'
return maskedMonth + '/' + maskedYear
}
return '*'.repeat(expiration.length)
}, [])
// Parse expiration string to Date object
const parseExpirationDate = useCallback((expiration: string): Date | null => {
const parts = expiration.split('/')
if (parts.length === 2) {
const month = parseInt(parts[0], 10)
const year = parseInt(parts[1], 10)
if (!isNaN(month) && !isNaN(year)) {
// Last day of the expiration month
const fullYear = 2000 + year
return new Date(fullYear, month, 0) // Day 0 gives last day of previous month
}
}
return null
}, [])
// Get display value based on focus state and default value status
const getDisplayValue = useCallback(() => {
if (isDefaultValue && !isFocused && !hasBeenEdited && internalValue) {
return maskExpiration(internalValue)
}
return internalValue
}, [isDefaultValue, isFocused, hasBeenEdited, internalValue, maskExpiration])
useEffect(() => {
// Update internal value when prop value changes
setInternalValue(value)
// Validate the new value
setIsValid(validateExpiration(value))
}, [value, validateExpiration])
const handleChange = useCallback(
(e: React.ChangeEvent) => {
const rawValue = e.target.value
const formattedValue = formatInput(rawValue)
// Limit to 5 characters (MM/YY)
const truncatedValue = formattedValue.slice(0, 5)
setInternalValue(truncatedValue)
setHasBeenEdited(true)
// Reset formatting suppression after change is processed
if (suppressFormatting) {
setTimeout(() => setSuppressFormatting(false), 0)
}
const valid = validateExpiration(truncatedValue)
setIsValid(valid)
const expirationDate = parseExpirationDate(truncatedValue)
if (onChange) {
onChange(truncatedValue, valid, expirationDate)
}
},
[
onChange,
validateExpiration,
formatInput,
parseExpirationDate,
suppressFormatting,
]
)
const handleFocus = useCallback(
(e: React.FocusEvent) => {
setIsFocused(true)
props.onFocus?.(e)
},
[props]
)
const handleBlur = useCallback(
(e: React.FocusEvent) => {
setIsFocused(false)
props.onBlur?.(e)
},
[props]
)
const handleKeyDown = useCallback(
(e: React.KeyboardEvent) => {
const input = e.currentTarget
const selectionStart = input.selectionStart || 0
let selectedPart: 'month' | 'year'
if (selectionStart <= 2) {
selectedPart = 'month'
} else {
selectedPart = 'year'
}
// Handle backspace at position 2 (on the "/") or position 3 (after the "/") to go back to month
if (
e.key === 'Backspace' &&
(selectionStart === 2 || selectionStart === 3) &&
internalValue.length >= 3 &&
internalValue.includes('/')
) {
e.preventDefault()
// Suppress formatting temporarily to prevent "/" from being re-added
setSuppressFormatting(true)
// Remove everything after the month (keep only first 2 characters)
const monthOnly = internalValue.slice(0, 2)
setInternalValue(monthOnly)
setHasBeenEdited(true)
const valid = validateExpiration(monthOnly)
setIsValid(valid)
const expirationDate = parseExpirationDate(monthOnly)
if (onChange) {
onChange(monthOnly, valid, expirationDate)
}
// Move cursor to end of month and reset formatting suppression
setTimeout(() => {
input.setSelectionRange(2, 2)
setSuppressFormatting(false)
}, 0)
return
}
if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
e.preventDefault()
const parts = internalValue.split('/')
if (parts.length === 2) {
let month = parseInt(parts[0], 10) || 1
let year = parseInt(parts[1], 10) || 23
const increment = e.key === 'ArrowUp' ? 1 : -1
if (selectedPart === 'month') {
month += increment
if (month > 12) month = 1
if (month < 1) month = 12
} else {
year += increment
if (year > 99) year = 23
if (year < 23) year = 99
}
const newValue = `${month.toString().padStart(2, '0')}/${year
.toString()
.padStart(2, '0')}`
setInternalValue(newValue)
setHasBeenEdited(true)
const valid = validateExpiration(newValue)
setIsValid(valid)
const expirationDate = parseExpirationDate(newValue)
if (onChange) {
onChange(newValue, valid, expirationDate)
}
setTimeout(() => {
if (selectedPart === 'month') {
input.setSelectionRange(0, 2)
} else {
input.setSelectionRange(3, 5)
}
}, 0)
}
}
},
[internalValue, validateExpiration, parseExpirationDate, onChange]
)
const handleClick = useCallback((e: React.MouseEvent) => {
const input = e.currentTarget
const clickPosition = input.selectionStart || 0
if (clickPosition <= 2) {
input.setSelectionRange(0, 2)
} else {
input.setSelectionRange(3, 5)
}
}, [])
const handleCalendarIconClick = useCallback((e: React.MouseEvent) => {
e.stopPropagation()
setIsCalendarOpen(true)
setStep('month')
// Reset position when opening
setDragPosition({ x: 0, y: 0 })
}, [])
// Drag handlers
const handleMouseDown = useCallback(
(e: React.MouseEvent) => {
e.preventDefault()
setIsDragging(true)
// If starting from center (0,0), convert to absolute coordinates
let currentX = dragPosition.x
let currentY = dragPosition.y
if (dragPosition.x === 0 && dragPosition.y === 0) {
// Get the actual popup element position when centered
const popup = document.querySelector('.MuiPopover-paper') as HTMLElement
if (popup) {
const rect = popup.getBoundingClientRect()
currentX = rect.left
currentY = rect.top
} else {
// Fallback to calculated center
currentX = window.innerWidth / 2 - 175 // half popup width
currentY = window.innerHeight / 2 - 200 // half popup height
}
}
setDragOffset({
x: e.clientX - currentX,
y: e.clientY - currentY,
})
},
[dragPosition]
)
const handleMouseMove = useCallback(
(e: MouseEvent) => {
if (isDragging) {
const newX = e.clientX - dragOffset.x
const newY = e.clientY - dragOffset.y
// Keep within reasonable bounds (allow some off-screen movement)
const maxX = window.innerWidth - 100
const minX = -250
const maxY = window.innerHeight - 100
const minY = -200
setDragPosition({
x: Math.max(minX, Math.min(maxX, newX)),
y: Math.max(minY, Math.min(maxY, newY)),
})
}
},
[isDragging, dragOffset]
)
const handleMouseUp = useCallback(() => {
setIsDragging(false)
}, [])
// Add and remove mouse event listeners
useEffect(() => {
if (isDragging) {
document.addEventListener('mousemove', handleMouseMove)
document.addEventListener('mouseup', handleMouseUp)
document.body.style.userSelect = 'none' // Prevent text selection while dragging
} else {
document.removeEventListener('mousemove', handleMouseMove)
document.removeEventListener('mouseup', handleMouseUp)
document.body.style.userSelect = ''
}
return () => {
document.removeEventListener('mousemove', handleMouseMove)
document.removeEventListener('mouseup', handleMouseUp)
document.body.style.userSelect = ''
}
}, [isDragging, handleMouseMove, handleMouseUp])
// Handle month selection
const handleMonthSelect = useCallback((monthIndex: number) => {
setSelectedMonth(monthIndex)
setStep('year')
}, [])
// Filter months based on current date for future validation
const getAvailableMonths = (): {
month: string
index: number
isDisabled: boolean
}[] => {
const currentYear = new Date().getFullYear()
const currentMonth = new Date().getMonth() // 0-11
return MONTHS.map((month, index) => ({
month,
index,
isDisabled:
currentYear === new Date().getFullYear() && index < currentMonth,
}))
}
// Handle year selection and show confirmation
const handleYearSelect = useCallback(
(year: number) => {
if (selectedMonth !== null) {
// Validate the complete date before proceeding
if (isValidFutureDate(year, selectedMonth + 1)) {
setSelectedYear(year)
setStep('confirmation')
const month = (selectedMonth + 1).toString().padStart(2, '0')
const yearStr = (year % 100).toString().padStart(2, '0')
const formattedValue = `${month}/${yearStr}`
setInternalValue(formattedValue)
setHasBeenEdited(true)
const valid = validateExpiration(formattedValue)
setIsValid(valid)
const expirationDate = parseExpirationDate(formattedValue)
if (onChange) {
onChange(formattedValue, valid, expirationDate)
}
// Close picker after showing confirmation
setTimeout(() => {
setIsCalendarOpen(false)
setStep('month')
setSelectedMonth(null)
setSelectedYear(null)
}, 1500)
}
}
},
[selectedMonth, validateExpiration, parseExpirationDate, onChange]
)
// Custom picker component
const CustomMonthYearPicker = () => (
{step === 'year' && (
setStep('month')}
onMouseDown={e => e.stopPropagation()} // Prevent drag when clicking back button
sx={{
color: sacredTheme ? '#FFD700' : '#666',
mr: 1,
'&:hover': {
backgroundColor: sacredTheme
? alpha('#FFD700', 0.1)
: alpha('#666', 0.1),
...(sacredTheme && {
boxShadow: '0 0 8px rgba(255, 215, 0, 0.4)',
}),
},
}}
>
Select Year for {MONTHS[selectedMonth || 0]}
Click and drag header to move • Back arrow to change month
)}
{step === 'month' && (
Select Month
Click and drag to move popup
)}
{step === 'confirmation' && (
✓ Date Selected
{MONTHS[selectedMonth || 0]} {selectedYear}
Expiration: {(selectedMonth! + 1).toString().padStart(2, '0')}/
{(selectedYear! % 100).toString().padStart(2, '0')}
Drag to reposition • Closing automatically...
)}
{step !== 'confirmation' &&
(step === 'month' ? (
{getAvailableMonths().map(({ month, index, isDisabled }) => (
))}
) : (
{generateYears().map(year => (
))}
))}
)
const ExpirationAdornment = () => (
{sacredTheme && (
𓂝
)}
)
return (
<>
{sacredTheme && }
}
inputProps={{
...props.inputProps,
maxLength: 5,
autoComplete: 'cc-exp',
inputMode: 'numeric',
}}
slotProps={{
input: {
sx: {
'& .MuiInputBase-input': {
paddingLeft: sacredTheme ? '12px' : '14px',
marginTop: '2px',
},
'&::placeholder': {
paddingLeft: sacredTheme ? '12px' : '14px',
marginTop: '2px',
},
},
},
}}
/>
{/* Custom Month/Year Picker */}
{
setIsCalendarOpen(false)
setStep('month')
}}
anchorReference="none"
sx={{
'& .MuiPopover-paper': {
position: 'fixed',
top: dragPosition.y === 0 ? '50%' : `${dragPosition.y}px`,
left: dragPosition.x === 0 ? '50%' : `${dragPosition.x}px`,
transform:
dragPosition.x === 0 && dragPosition.y === 0
? 'translate(-50%, -50%)'
: 'none',
cursor: isDragging ? 'grabbing' : 'default',
},
}}
>
)
}
CreditCardExpiration.displayName = 'CreditCardExpiration'
export default CreditCardExpiration