feat: add skip payroll functionality

src/components/Common/UI/Button/ButtonIcon.module.scss

@@ -11,5 +11,11 @@
       width: toRem(20);
       height: toRem(20);
     }
+
+    &[data-loading='true'] {
+      svg {
+        display: none;
+      }
+    }
   }
 }

src/components/Common/index.ts

@@ -22,3 +22,4 @@ export { DatePickerField } from './Fields/DatePickerField'
 export { NumberInputField } from './Fields/NumberInputField'
 export { SwitchField } from './Fields/SwitchField'
 export { VisuallyHidden } from './VisuallyHidden'
+export { HamburgerMenu } from './HamburgerMenu'

src/components/Payroll/PayrollList/PayrollList.stories.tsx

@@ -20,6 +20,10 @@ export const PayrollListStory = () => {
       paySchedules={[{ uuid: '1234', version: '1', customName: 'pay day' }]}
       onRunPayroll={action('run_payroll')}
       onSubmitPayroll={action('submit_payroll')}
+      onSkipPayroll={action('skip_payroll')}
+      showSkipSuccessAlert={false}
+      onDismissSkipSuccessAlert={action('dismiss_alert')}
+      skippingPayrollId={null}
     />
   )
 }
@@ -31,6 +35,56 @@ export const EmptyPayrollListStory = () => {
       paySchedules={[]}
       onRunPayroll={action('run_payroll')}
       onSubmitPayroll={action('submit_payroll')}
+      onSkipPayroll={action('skip_payroll')}
+      showSkipSuccessAlert={false}
+      onDismissSkipSuccessAlert={action('dismiss_alert')}
+      skippingPayrollId={null}
+    />
+  )
+}
+
+export const PayrollListWithSkipAlertStory = () => {
+  return (
+    <PayrollListPresentation
+      payrolls={[
+        {
+          checkDate: '2025-12-12',
+          payrollDeadline: new Date(),
+          payrollType: 'Regular',
+          payrollUuid: 'abcd',
+          payPeriod: { payScheduleUuid: '1234', startDate: '2025-01-01', endDate: '2025-01-13' },
+        },
+      ]}
+      paySchedules={[{ uuid: '1234', version: '1', customName: 'pay day' }]}
+      onRunPayroll={action('run_payroll')}
+      onSubmitPayroll={action('submit_payroll')}
+      onSkipPayroll={action('skip_payroll')}
+      showSkipSuccessAlert={true}
+      onDismissSkipSuccessAlert={action('dismiss_alert')}
+      skippingPayrollId={null}
+    />
+  )
+}
+
+export const PayrollListSkippingStory = () => {
+  return (
+    <PayrollListPresentation
+      payrolls={[
+        {
+          checkDate: '2025-12-12',
+          payrollDeadline: new Date(),
+          payrollType: 'Regular',
+          payrollUuid: 'abcd',
+          payPeriod: { payScheduleUuid: '1234', startDate: '2025-01-01', endDate: '2025-01-13' },
+        },
+      ]}
+      paySchedules={[{ uuid: '1234', version: '1', customName: 'pay day' }]}
+      onRunPayroll={action('run_payroll')}
+      onSubmitPayroll={action('submit_payroll')}
+      onSkipPayroll={action('skip_payroll')}
+      showSkipSuccessAlert={false}
+      onDismissSkipSuccessAlert={action('dismiss_alert')}
+      skippingPayrollId="abcd"
     />
   )
 }

src/components/Payroll/PayrollList/PayrollList.tsx

@@ -1,11 +1,14 @@
+import { useState } from 'react'
 import { usePayrollsListSuspense } from '@gusto/embedded-api/react-query/payrollsList'
 import { usePaySchedulesGetAllSuspense } from '@gusto/embedded-api/react-query/paySchedulesGetAll'
+import { usePayrollsSkipMutation } from '@gusto/embedded-api/react-query/payrollsSkip'
+import { PayrollType } from '@gusto/embedded-api/models/operations/postcompaniespayrollskipcompanyuuid'
 import { ProcessingStatuses } from '@gusto/embedded-api/models/operations/getv1companiescompanyidpayrolls'
 import type { Payroll } from '@gusto/embedded-api/models/components/payroll'
 import { getPayrollType } from '../helpers'
 import { PayrollListPresentation } from './PayrollListPresentation'
 import type { BaseComponentInterface } from '@/components/Base'
-import { BaseComponent } from '@/components/Base'
+import { BaseComponent, useBase } from '@/components/Base'
 import { componentEvents } from '@/shared/constants'
 
 const createPayrollProjection = (p: Payroll) => ({
@@ -17,7 +20,19 @@ interface PayrollListBlockProps extends BaseComponentInterface {
   companyId: string
 }
 
-export const PayrollList = ({ companyId, onEvent }: PayrollListBlockProps) => {
+export function PayrollList(props: PayrollListBlockProps) {
+  return (
+    <BaseComponent {...props}>
+      <Root {...props} />
+    </BaseComponent>
+  )
+}
+
+const Root = ({ companyId, onEvent }: PayrollListBlockProps) => {
+  const { baseSubmitHandler } = useBase()
+  const [showSkipSuccessAlert, setShowSkipSuccessAlert] = useState(false)
+  const [skippingPayrollId, setSkippingPayrollId] = useState<string | null>(null)
+
   const { data: payrollsData } = usePayrollsListSuspense({
     companyId,
     processingStatuses: [ProcessingStatuses.Unprocessed],
@@ -28,20 +43,50 @@ export const PayrollList = ({ companyId, onEvent }: PayrollListBlockProps) => {
   })
   const paySchedulesList = paySchedulesData.payScheduleList!
 
+  const { mutateAsync: skipPayroll } = usePayrollsSkipMutation()
+
   const onRunPayroll = ({ payrollId }: { payrollId: string }) => {
     onEvent(componentEvents.RUN_PAYROLL_SELECTED, { payrollId })
   }
   const onSubmitPayroll = ({ payrollId }: { payrollId: string }) => {
     onEvent(componentEvents.REVIEW_PAYROLL, { payrollId })
   }
+  const onSkipPayroll = async ({ payrollId }: { payrollId: string }) => {
+    const payroll = payrollList.find(payroll => payroll.payrollUuid === payrollId)
+
+    if (payroll?.payPeriod) {
+      setSkippingPayrollId(payrollId)
+      await baseSubmitHandler({}, async () => {
+        await skipPayroll({
+          request: {
+            companyUuid: companyId,
+            requestBody: {
+              payrollType: PayrollType.Regular,
+              startDate: payroll.payPeriod?.startDate,
+              endDate: payroll.payPeriod?.endDate,
+              payScheduleUuid: payroll.payPeriod?.payScheduleUuid ?? undefined,
+            },
+          },
+        })
+
+        setShowSkipSuccessAlert(true)
+        onEvent(componentEvents.PAYROLL_SKIPPED, { payrollId })
+      })
+      setSkippingPayrollId(null)
+    }
+  }
   return (
-    <BaseComponent onEvent={onEvent}>
-      <PayrollListPresentation
-        payrolls={payrollList.map(createPayrollProjection)}
-        paySchedules={paySchedulesList}
-        onRunPayroll={onRunPayroll}
-        onSubmitPayroll={onSubmitPayroll}
-      />
-    </BaseComponent>
+    <PayrollListPresentation
+      payrolls={payrollList.map(createPayrollProjection)}
+      paySchedules={paySchedulesList}
+      onRunPayroll={onRunPayroll}
+      onSubmitPayroll={onSubmitPayroll}
+      onSkipPayroll={onSkipPayroll}
+      showSkipSuccessAlert={showSkipSuccessAlert}
+      onDismissSkipSuccessAlert={() => {
+        setShowSkipSuccessAlert(false)
+      }}
+      skippingPayrollId={skippingPayrollId}
+    />
   )
 }

src/components/Payroll/PayrollList/PayrollListPresentation.module.scss

@@ -1,9 +1,10 @@
-.doneIcon {
-  align-items: center;
-  border: 1px solid lightgray;
-  border-radius: 12px;
+.actionsContainer {
   display: flex;
-  height: 32px;
-  justify-content: center;
-  width: 32px;
+  gap: toRem(4);
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.alertContainer {
+  width: 100%;
 }