feat(SDK-551): add PolicyListPresentation component

e2e/main.tsx

@@ -114,33 +114,42 @@ const FLOW_OPTIONS: { value: FlowType; label: string }[] = [
 ]
 
 function FlowSelector({ currentFlow }: { currentFlow: FlowType }) {
-  const handleChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
-    const params = new URLSearchParams(window.location.search)
-    params.set('flow', e.target.value)
-    window.location.search = params.toString()
-  }
-
   return (
-    <div
-      aria-hidden="true"
-      style={{ padding: '8px 0', borderBottom: '1px solid #e5e7eb', marginBottom: 16 }}
+    <nav
+      aria-label="Flow selector"
+      style={{
+        padding: '8px 0',
+        borderBottom: '1px solid #e5e7eb',
+        marginBottom: 16,
+        display: 'flex',
+        gap: 8,
+        flexWrap: 'wrap',
+        alignItems: 'center',
+        fontSize: 13,
+      }}
     >
-      <label htmlFor="flow-selector" style={{ marginRight: 8, fontSize: 14 }}>
-        Flow:
-      </label>
-      <select
-        id="flow-selector"
-        value={currentFlow}
-        onChange={handleChange}
-        style={{ fontSize: 14 }}
-      >
-        {FLOW_OPTIONS.map(opt => (
-          <option key={opt.value} value={opt.value}>
-            {opt.label}
-          </option>
-        ))}
-      </select>
-    </div>
+      <span style={{ fontWeight: 600 }}>Flow:</span>
+      {FLOW_OPTIONS.map((opt, i) => {
+        const params = new URLSearchParams(window.location.search)
+        params.set('flow', opt.value)
+        const isActive = opt.value === currentFlow
+        return (
+          <span key={opt.value}>
+            {i > 0 && <span style={{ color: '#d1d5db' }}>|</span>}
+            <a
+              href={`?${params.toString()}`}
+              style={{
+                fontWeight: isActive ? 600 : 400,
+                color: isActive ? '#111827' : '#6b7280',
+                textDecoration: isActive ? 'none' : 'underline',
+              }}
+            >
+              {opt.label}
+            </a>
+          </span>
+        )
+      })}
+    </nav>
   )
 }
 

src/components/UNSTABLE_TimeOff/PolicyList/PolicyListPresentation.module.scss

@@ -0,0 +1,6 @@
+.actionsCell {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: toRem(12);
+}

src/components/UNSTABLE_TimeOff/PolicyList/PolicyListPresentation.tsx

@@ -0,0 +1,153 @@
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import type { PolicyListPresentationProps, PolicyListItem } from './PolicyListTypes'
+import styles from './PolicyListPresentation.module.scss'
+import {
+  DataView,
+  Flex,
+  EmptyData,
+  ActionsLayout,
+  HamburgerMenu,
+  useDataView,
+} from '@/components/Common'
+import { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'
+import { useI18n } from '@/i18n'
+
+export function PolicyListPresentation({
+  policies,
+  onCreatePolicy,
+  onEditPolicy,
+  onFinishSetup,
+  onDeletePolicy,
+  deleteSuccessAlert,
+  onDismissDeleteAlert,
+  isDeletingPolicyId,
+}: PolicyListPresentationProps) {
+  const { Button, Heading, Text, Alert, Dialog } = useComponentContext()
+  useI18n('Company.TimeOff.TimeOffPolicies')
+  const { t } = useTranslation('Company.TimeOff.TimeOffPolicies')
+
+  const [deletePolicyDialogState, setDeletePolicyDialogState] = useState<{
+    isOpen: boolean
+    policy: PolicyListItem | null
+  }>({
+    isOpen: false,
+    policy: null,
+  })
+
+  const handleOpenDeleteDialog = (policy: PolicyListItem) => {
+    setDeletePolicyDialogState({ isOpen: true, policy })
+  }
+
+  const handleCloseDeleteDialog = () => {
+    setDeletePolicyDialogState({ isOpen: false, policy: null })
+  }
+
+  const handleConfirmDelete = () => {
+    if (deletePolicyDialogState.policy) {
+      onDeletePolicy(deletePolicyDialogState.policy)
+      handleCloseDeleteDialog()
+    }
+  }
+
+  const { ...dataViewProps } = useDataView({
+    data: policies,
+    columns: [
+      {
+        title: t('tableHeaders.name'),
+        render: (policy: PolicyListItem) => <Text weight="medium">{policy.name}</Text>,
+      },
+      {
+        title: t('tableHeaders.enrolled'),
+        render: (policy: PolicyListItem) => (
+          <Text variant="supporting">{policy.enrolledDisplay}</Text>
+        ),
+      },
+    ],
+    itemMenu: (policy: PolicyListItem) => {
+      const isDeleting = isDeletingPolicyId === policy.uuid
+
+      return (
+        <div className={styles.actionsCell}>
+          {!policy.isComplete && (
+            <Button
+              variant="secondary"
+              onClick={() => {
+                onFinishSetup(policy)
+              }}
+            >
+              {t('finishSetupCta')}
+            </Button>
+          )}
+          <HamburgerMenu
+            isLoading={isDeleting}
+            menuLabel={t('tableLabel')}
+            items={[
+              {
+                label: t('actions.editPolicy'),
+                onClick: () => {
+                  onEditPolicy(policy)
+                },
+              },
+              {
+                label: t('actions.deletePolicy'),
+                onClick: () => {
+                  handleOpenDeleteDialog(policy)
+                },
+              },
+            ]}
+          />
+        </div>
+      )
+    },
+    emptyState: () => (
+      <EmptyData title={t('emptyState.heading')} description={t('emptyState.body')}>
+        <ActionsLayout justifyContent="center">
+          <Button variant="secondary" onClick={onCreatePolicy}>
+            {t('createPolicyCta')}
+          </Button>
+        </ActionsLayout>
+      </EmptyData>
+    ),
+  })
+
+  return (
+    <Flex flexDirection="column" gap={16}>
+      {deleteSuccessAlert && (
+        <Alert status="success" label={deleteSuccessAlert} onDismiss={onDismissDeleteAlert} />
+      )}
+
+      <Flex
+        flexDirection={{ base: 'column', medium: 'row' }}
+        justifyContent="space-between"
+        alignItems="flex-start"
+        gap={{ base: 12, medium: 24 }}
+      >
+        <Heading as="h2">{t('pageTitle')}</Heading>
+        {policies.length > 0 && (
+          <Button variant="primary" onClick={onCreatePolicy}>
+            {t('createPolicyCta')}
+          </Button>
+        )}
+      </Flex>
+
+      <DataView label={t('tableLabel')} {...dataViewProps} />
+
+      <Dialog
+        isOpen={deletePolicyDialogState.isOpen}
+        onClose={handleCloseDeleteDialog}
+        onPrimaryActionClick={handleConfirmDelete}
+        isDestructive
+        title={t('deletePolicyDialog.title', {
+          name: deletePolicyDialogState.policy?.name ?? '',
+        })}
+        primaryActionLabel={t('deletePolicyDialog.confirmCta')}
+        closeActionLabel={t('deletePolicyDialog.cancelCta')}
+      >
+        {t('deletePolicyDialog.description', {
+          name: deletePolicyDialogState.policy?.name ?? '',
+        })}
+      </Dialog>
+    </Flex>
+  )
+}

src/components/UNSTABLE_TimeOff/PolicyList/PolicyListTypes.ts

@@ -0,0 +1,18 @@
+export interface PolicyListItem {
+  uuid: string
+  name: string
+  policyType: string
+  isComplete: boolean
+  enrolledDisplay: string
+}
+
+export interface PolicyListPresentationProps {
+  policies: PolicyListItem[]
+  onCreatePolicy: () => void
+  onEditPolicy: (policy: PolicyListItem) => void
+  onFinishSetup: (policy: PolicyListItem) => void
+  onDeletePolicy: (policy: PolicyListItem) => void
+  deleteSuccessAlert?: string | null
+  onDismissDeleteAlert?: () => void
+  isDeletingPolicyId?: string | null
+}

src/i18n/en/Company.TimeOff.TimeOffPolicies.json

@@ -1,31 +1,35 @@
 {
-  "pageTitle": "Time off policies",
-  "addPolicyCta": "Add policy",
+  "pageTitle": "Time Off Policies",
+  "createPolicyCta": "Create policy",
   "tableHeaders": {
     "name": "Name",
-    "enrolled": "Enrolled",
-    "actions": "Actions"
+    "enrolled": "Enrolled"
   },
+  "tableLabel": "Time off policies",
   "actions": {
-    "viewPolicy": "View policy",
     "editPolicy": "Edit policy",
     "deletePolicy": "Delete policy"
   },
+  "finishSetupCta": "Finish setup",
+  "allEmployeesLabel": "All employees",
+  "enrolledDash": "\u2013",
   "employeeCount_one": "{{count}} employee",
   "employeeCount_other": "{{count}} employees",
   "incompleteBadge": "Incomplete",
   "holidayPayPolicy": "Holiday pay policy",
   "deletePolicyDialog": {
     "title": "Are you sure you want to delete the policy \"{{name}}\"?",
-    "description": "This will delete the policy \"{{name}}\" and all associated time off requests."
+    "description": "This will delete the policy \"{{name}}\" and all associated time off requests.",
+    "confirmCta": "Delete policy",
+    "cancelCta": "Cancel"
   },
   "deleteHolidayDialog": {
     "title": "Are you sure you want to delete the company holiday pay policy?",
     "description": "This will delete the company holiday pay policy."
   },
   "emptyState": {
-    "heading": "You haven't added any time off policies yet",
-    "body": "Time off policies help you track and approve employee leave."
+    "heading": "You don't have any time off policies",
+    "body": "Manage employee time off by creating a policy."
   },
   "selectPolicyType": {
     "title": "Select policy type",

src/types/i18next.d.ts

@@ -479,24 +479,28 @@ export interface CompanyTimeOffHolidayPolicy{
 };
 export interface CompanyTimeOffTimeOffPolicies{
 "pageTitle":string;
-"addPolicyCta":string;
+"createPolicyCta":string;
 "tableHeaders":{
 "name":string;
 "enrolled":string;
-"actions":string;
 };
+"tableLabel":string;
 "actions":{
-"viewPolicy":string;
 "editPolicy":string;
 "deletePolicy":string;
 };
+"finishSetupCta":string;
+"allEmployeesLabel":string;
+"enrolledDash":string;
 "employeeCount_one":string;
 "employeeCount_other":string;
 "incompleteBadge":string;
 "holidayPayPolicy":string;
 "deletePolicyDialog":{
 "title":string;
 "description":string;
+"confirmCta":string;
+"cancelCta":string;
 };
 "deleteHolidayDialog":{
 "title":string;