feat: disable past dates in Pay Schedule first pay date picker

docs/component-adapter/component-inventory.md

@@ -265,24 +265,27 @@
 
 ## DatePickerProps
 
-| Prop                        | Type                            | Required | Description                                                            |
-| --------------------------- | ------------------------------- | -------- | ---------------------------------------------------------------------- |
-| **inputRef**                | `Ref<HTMLInputElement \| null>` | No       | React ref for the date input element                                   |
-| **isDisabled**              | `boolean`                       | No       | Disables the date picker and prevents interaction                      |
-| **isInvalid**               | `boolean`                       | No       | Indicates that the field has an error                                  |
-| **onChange**                | `(value: Date \| null) => void` | No       | Callback when selected date changes                                    |
-| **onBlur**                  | `() => void`                    | No       | Handler for blur events                                                |
-| **label**                   | `string`                        | Yes      | Label text for the date picker field                                   |
-| **value**                   | `null \| Date`                  | No       | Currently selected date value                                          |
-| **placeholder**             | `string`                        | No       | Placeholder text when no date is selected                              |
-| **portalContainer**         | `HTMLElement`                   | No       | Element to use as the portal container                                 |
-| **description**             | `React.ReactNode`               | No       | Optional description text for the field                                |
-| **errorMessage**            | `string`                        | No       | Error message to display when the field is invalid                     |
-| **isRequired**              | `boolean`                       | No       | Indicates if the field is required                                     |
-| **shouldVisuallyHideLabel** | `boolean`                       | No       | Hides the label visually while keeping it accessible to screen readers |
-| **className**               | `string`                        | No       | -                                                                      |
-| **id**                      | `string`                        | No       | -                                                                      |
-| **name**                    | `string`                        | No       | -                                                                      |
+| Prop                        | Type                            | Required | Description                                                                                   |
+| --------------------------- | ------------------------------- | -------- | --------------------------------------------------------------------------------------------- |
+| **inputRef**                | `Ref<HTMLInputElement \| null>` | No       | React ref for the date input element                                                          |
+| **isDisabled**              | `boolean`                       | No       | Disables the date picker and prevents interaction                                             |
+| **isInvalid**               | `boolean`                       | No       | Indicates that the field has an error                                                         |
+| **onChange**                | `(value: Date \| null) => void` | No       | Callback when selected date changes                                                           |
+| **onBlur**                  | `() => void`                    | No       | Handler for blur events                                                                       |
+| **label**                   | `string`                        | Yes      | Label text for the date picker field                                                          |
+| **value**                   | `null \| Date`                  | No       | Currently selected date value                                                                 |
+| **placeholder**             | `string`                        | No       | Placeholder text when no date is selected                                                     |
+| **portalContainer**         | `HTMLElement`                   | No       | Element to use as the portal container                                                        |
+| **minDate**                 | `Date`                          | No       | Minimum selectable date. Dates before this will be disabled.                                  |
+| **maxDate**                 | `Date`                          | No       | Maximum selectable date. Dates after this will be disabled.                                   |
+| **isDateDisabled**          | `(date: Date) => boolean`       | No       | Callback to determine if a specific date should be disabled. Return true to disable the date. |
+| **description**             | `React.ReactNode`               | No       | Optional description text for the field                                                       |
+| **errorMessage**            | `string`                        | No       | Error message to display when the field is invalid                                            |
+| **isRequired**              | `boolean`                       | No       | Indicates if the field is required                                                            |
+| **shouldVisuallyHideLabel** | `boolean`                       | No       | Hides the label visually while keeping it accessible to screen readers                        |
+| **className**               | `string`                        | No       | -                                                                                             |
+| **id**                      | `string`                        | No       | -                                                                                             |
+| **name**                    | `string`                        | No       | -                                                                                             |
 
 ## DescriptionListProps
 

docs/reference/endpoint-inventory.json

@@ -159,10 +159,15 @@
         {
           "method": "POST",
           "path": "/v1/companies/:companyId/pay_schedules"
+        },
+        {
+          "method": "GET",
+          "path": "/v1/companies/:companyUuid/payment_configs"
         }
       ],
       "variables": [
         "companyId",
+        "companyUuid",
         "payScheduleId"
       ]
     },
@@ -1309,6 +1314,10 @@
           "method": "POST",
           "path": "/v1/companies/:companyId/pay_schedules"
         },
+        {
+          "method": "GET",
+          "path": "/v1/companies/:companyUuid/payment_configs"
+        },
         {
           "method": "PUT",
           "path": "/v1/companies/:companyUuid/tax_requirements/:state"

docs/reference/endpoint-reference.md

@@ -44,6 +44,7 @@ import inventory from '@gusto/embedded-react-sdk/endpoint-inventory.json'
 |  | PUT | `/v1/companies/:companyId/pay_schedules/:payScheduleId` |
 |  | GET | `/v1/companies/:companyId/pay_schedules` |
 |  | POST | `/v1/companies/:companyId/pay_schedules` |
+|  | GET | `/v1/companies/:companyUuid/payment_configs` |
 | **Company.StateTaxes** | PUT | `/v1/companies/:companyUuid/tax_requirements/:state` |
 |  | GET | `/v1/companies/:companyUuid/tax_requirements/:state` |
 |  | GET | `/v1/companies/:companyUuid/tax_requirements` |

src/components/Common/UI/DatePicker/DatePicker.tsx

@@ -14,7 +14,7 @@ import {
 } from 'react-aria-components'
 import { useTranslation } from 'react-i18next'
 import classNames from 'classnames'
-import { parseDate } from '@internationalized/date'
+import { parseDate, type CalendarDate } from '@internationalized/date'
 import { useFieldIds } from '../hooks/useFieldIds'
 import styles from './DatePicker.module.scss'
 import type { DatePickerProps } from './DatePickerTypes'
@@ -26,6 +26,21 @@ import CaretLeft from '@/assets/icons/caret-left.svg?react'
 import AlertCircle from '@/assets/icons/alert-circle.svg?react'
 import { formatDateToStringDate } from '@/helpers/dateFormatting'
 
+function dateToCalendarDate(date: Date): CalendarDate | undefined {
+  if (!(date instanceof Date) || isNaN(date.getTime())) {
+    return undefined
+  }
+
+  // Use local date parts to avoid UTC timezone shift from toISOString()
+  const dateString = [
+    String(date.getFullYear()).padStart(4, '0'),
+    String(date.getMonth() + 1).padStart(2, '0'),
+    String(date.getDate()).padStart(2, '0'),
+  ].join('-')
+
+  return parseDate(dateString)
+}
+
 function calendarDateValueToDate(dateValue: DateValue | null): Date | null {
   if (!dateValue) return null
 
@@ -52,6 +67,9 @@ export const DatePicker = ({
   onBlur,
   value,
   portalContainer,
+  minDate,
+  maxDate,
+  isDateDisabled,
   ...props
 }: DatePickerProps) => {
   const { t } = useTranslation()
@@ -67,6 +85,16 @@ export const DatePicker = ({
   const formattedDate = value ? formatDateToStringDate(value) : ''
   const internalValue = formattedDate ? parseDate(formattedDate) : null
 
+  // Convert date constraint props to react-aria DateValue format
+  const minValue = minDate ? dateToCalendarDate(minDate) : undefined
+  const maxValue = maxDate ? dateToCalendarDate(maxDate) : undefined
+  const isDateUnavailable = isDateDisabled
+    ? (dateValue: DateValue) => {
+        const jsDate = calendarDateValueToDate(dateValue)
+        return jsDate ? isDateDisabled(jsDate) : false
+      }
+    : undefined
+
   // Handle internal onChange to convert DateValue back to Date
   const handleChange = (dateValue: DateValue | null) => {
     if (onChange) {
@@ -95,6 +123,9 @@ export const DatePicker = ({
           isInvalid={isInvalid}
           value={internalValue}
           onChange={handleChange}
+          minValue={minValue}
+          maxValue={maxValue}
+          isDateUnavailable={isDateUnavailable}
           {...props}
         >
           <Group>

src/components/Common/UI/DatePicker/DatePickerTypes.ts

@@ -41,4 +41,17 @@ export interface DatePickerProps
    * Element to use as the portal container
    */
   portalContainer?: HTMLElement
+  /**
+   * Minimum selectable date. Dates before this will be disabled.
+   */
+  minDate?: Date
+  /**
+   * Maximum selectable date. Dates after this will be disabled.
+   */
+  maxDate?: Date
+  /**
+   * Callback to determine if a specific date should be disabled.
+   * Return true to disable the date.
+   */
+  isDateDisabled?: (date: Date) => boolean
 }

src/components/Company/PaySchedule/PaySchedule.tsx

@@ -6,6 +6,7 @@ import { usePaySchedulesGetPreview } from '@gusto/embedded-api/react-query/paySc
 import { usePaySchedulesUpdateMutation } from '@gusto/embedded-api/react-query/paySchedulesUpdate'
 import { usePaySchedulesGetAllSuspense } from '@gusto/embedded-api/react-query/paySchedulesGetAll'
 import { usePaySchedulesCreateMutation } from '@gusto/embedded-api/react-query/paySchedulesCreate'
+import { usePaymentConfigsGet } from '@gusto/embedded-api/react-query/paymentConfigsGet'
 import type { PayScheduleObject as PayScheduleType } from '@gusto/embedded-api/models/components/payscheduleobject'
 import type { Frequency } from '@gusto/embedded-api/models/operations/postv1companiescompanyidpayschedules'
 import type { MODE, PayScheduleInputs, PayScheduleOutputs } from './usePaySchedule'
@@ -54,6 +55,9 @@ const Root = ({ companyId, children, defaultValues }: PayScheduleProps) => {
     companyId,
   })
 
+  const { data: paymentConfigs } = usePaymentConfigsGet({ companyUuid: companyId })
+  const paymentSpeed = paymentConfigs?.paymentConfigs?.paymentSpeed
+
   const [mode, setMode] = useState<MODE>(
     paySchedules.payScheduleList?.length === 0 ? 'ADD_PAY_SCHEDULE' : 'LIST_PAY_SCHEDULES',
   )
@@ -219,6 +223,7 @@ const Root = ({ companyId, children, defaultValues }: PayScheduleProps) => {
         payPeriodPreview: payPreviewData?.object?.payPeriods,
         payPreviewLoading: isLoading,
         currentPaySchedule,
+        paymentSpeed,
       }}
     >
       <span data-testid="pay-schedule-edit-form">

src/components/Company/PaySchedule/_parts/Edit.tsx

@@ -20,7 +20,7 @@ export const Edit = () => {
   const Components = useComponentContext()
   const { t } = useTranslation('Company.PaySchedule')
   const dateFormatter = useDateFormatter()
-  const { payPeriodPreview, mode, payPreviewLoading } = usePaySchedule()
+  const { payPeriodPreview, mode, payPreviewLoading, paymentSpeed } = usePaySchedule()
   const { setValue } = useFormContext<PayScheduleInputs>()
   const [selectedPayPeriodIndex, setSelectedPayPeriodIndex] = useState(0)
 
@@ -73,8 +73,11 @@ export const Edit = () => {
             <DatePickerField
               name="anchorPayDate"
               label={t('labels.firstPayDate')}
-              description={t('descriptions.anchorPayDateDescription')}
+              description={t('descriptions.anchorPayDateDescription', {
+                count: paymentSpeed ? Number(paymentSpeed.split('-')[0]) : 2,
+              })}
               isRequired
+              minDate={new Date()}
             />
             <DatePickerField
               name="anchorEndOfPayPeriod"

src/components/Company/PaySchedule/usePaySchedule.ts

@@ -23,6 +23,7 @@ type PayScheduleContextType = {
   currentPaySchedule: PayScheduleType | undefined | null
   payPeriodPreview?: PayPeriods[]
   payPreviewLoading?: boolean
+  paymentSpeed?: string
 }
 
 export const PayScheduleSchema = z.object({

src/i18n/en/Company.PaySchedule.json

@@ -33,7 +33,8 @@
   "loading": "Loading...",
   "descriptions": {
     "frequencyOptionsDescription": "Select the pay days for the month.",
-    "anchorPayDateDescription": "Please account for the 2 days it will take to process payroll.",
+    "anchorPayDateDescription_one": "Please account for the {{count}} day it will take to process payroll.",
+    "anchorPayDateDescription_other": "Please account for the {{count}} days it will take to process payroll.",
     "anchorEndOfPayPeriodDescription": "The last date of the first pay period to help calculate future pay periods. This can be the same date as the first pay date."
   },
   "payPreview": {

src/types/i18next.d.ts

@@ -278,7 +278,8 @@ export interface CompanyPaySchedule{
 "loading":string;
 "descriptions":{
 "frequencyOptionsDescription":string;
-"anchorPayDateDescription":string;
+"anchorPayDateDescription_one":string;
+"anchorPayDateDescription_other":string;
 "anchorEndOfPayPeriodDescription":string;
 };
 "payPreview":{