Refactor remaining mutations to use typed payloads and RootState

Updated the remaining mutations (including vehicle, damage, service location, customer, schedule, line items, payment, referral, application user, RESET, external params, updateStateWithOrderInformation, updateExperiments, updateTriggeredSiteEntry, updateAffiliateCookies, updateHasTriggeredError) to ensure they utilize typed payloads and RootState for improved type safety.

2026-03-09 16:55:00 -04:00

5 KiB

Raw Blame History

TypeScript Conversion Status

Last updated: March 9, 2026
Branch: feature/page-prereqs-refactor

This document summarizes the Vue/Vuex → TypeScript conversion work done so far and what remains. Use it as context when resuming the conversion.

Completed Work

1. TypeScript Setup

package.json: Added @vue/cli-plugin-typescript, @typescript-eslint/parser, @babel/preset-typescript, @popperjs/core (Bootstrap peer dep)
tsconfig.json: Created with Vue/JS compatibility
jest.config.js: Configured to transform .ts files
babel.config.js: Added @babel/preset-typescript
vue.config.js: Entry override removed so Vue CLI uses main.ts

2. Store Conversion

src/store/index.js → src/store/index.ts: Full conversion with createStore<RootState>({...})
src/store/types.ts: New file defining:
- RootState, OrderState, VehicleState, DamageState, ServiceLocationState, ScheduleState, CustomerState, LineItemsState, PaymentState, ApplicationUserState, etc.
- FlexibleRecord = { [key: string]: any } — used for dynamic API responses (e.g. updateStateWithOrderInformation) where structure is not fully known
- LineItemWithTax and related types for line-item mapping

3. Vue Module Augmentation

src/shims-vue.d.ts: Declares this.$store as Store<RootState> and extends Window for $/jQuery

4. Main Entry

src/main.js → src/main.ts: Converted; Vue CLI entry points to main.ts

5. Mutations Typed

All mutations now use (state: RootState, payload?: TypedPayload):

Vehicle: updateYear, updateMake, updateModel, updateStyle, updateVehicleVin, updateVehicle, updateRegistration, resetVehicleState, etc.
Damage: updateIsRepair, updateNumberOfChips, updateGlassToReplace, updatePartQuestionAnswers, etc.
Service location, customer, schedule: updateServiceZip, updateServiceLocation, updateSchedule, updateCustomerDetails, etc.
Line items, payment, referral, application user: updateGlassParts, updateVaps, updatePageData, etc.
RESET mutations: resetState, resetVehicleState, resetDamageState, resetSchedule, etc.
Misc: updateStateWithOrderInformation, updateExperiments, updateTriggeredSiteEntry, updateAffiliateCookies, updateHasTriggeredError

6. Other Fixes

src/global-methods.js: additionalSuccessEventDataHandler = undefined, payload = {} as defaults for optional params
store/index.ts: Fixed methods → method in four callHttpClient calls
store/types.ts: savedSessionTimeout typed as string | null (matches getDateForSavedSessionTimeout())
store/types.ts: cashPriceSubTotal added to OrderState
store/index.ts: updateBillToAcctNumber parameter typed
store/index.ts: updateStateWithOrderInformation uses FlexibleRecord for order and applicationUser from session API
store/index.ts: resetSchedule callback typed as (item: { partType?: string }) => ...

7. Test Status

Store tests: 139 passing (npm run test:unit:lite -- --testPathPattern=store.spec --runInBand)

Remaining Work

Phase 3e — Type Actions

Add ActionContext<RootState, RootState> to store actions
Add payload types for action parameters
Typed return values where applicable

Step 4 — Fix Remaining Test Failures

Some specs may have import issues (e.g. base-input-button)
Run full test suite and fix any failures

Build Verification

Confirm npm run build completes successfully
Last run was still in progress; verify no TypeScript errors

Optional / Future

Convert more .js files to .ts (e.g. global-methods.js, constants/store-actions.js, constants/store-mutations.js, mixins)
Add stricter typing where beneficial
Consider converting Vue SFCs to <script lang="ts"> incrementally

Key Files

File	Notes
`src/store/index.ts`	Main Vuex store (converted)
`src/store/types.ts`	RootState and sub-state types, FlexibleRecord
`src/shims-vue.d.ts`	Vue module augmentation for $store
`src/main.ts`	App entry point
`tsconfig.json`	TypeScript config

Useful Commands

# Run store tests
npm run test:unit:lite -- --testPathPattern=store.spec --runInBand

# Full build
npm run build

# Type check only (if vue-tsc available)
npx vue-tsc --noEmit

Gotchas

FlexibleRecord: Uses any for nested values to allow assigning dynamic API responses to typed state. ESLint disable for no-explicit-any is intentional on that type.
Session API: updateStateWithOrderInformation receives sessionInformation.order and sessionInformation.applicationUser from the Session API. Structure is dynamic; casting to FlexibleRecord enables property access without dozens of explicit casts.
PowerShell: Use ; not && for chaining commands.
Store actions: Still untyped; they use context and payloads without ActionContext or payload interfaces.

5 KiB Raw Blame History