chore: pr feedback

Author: jeffredodd

src/components/ContractorPayment/CreatePayment/CreatePayment.stories.tsx renamed to src/components/Contractor/Payments/CreatePayment/CreatePayment.stories.tsx

@@ -0,0 +1,12 @@
+import type { PaymentFlowProps } from './PaymentFlowComponents'
+import { PaymentFlow } from './Flow'
+import type { BaseComponentInterface } from '@/components/Base/Base'
+import { BaseComponent } from '@/components/Base/Base'
+
+export function ContractorPayments(props: PaymentFlowProps & BaseComponentInterface) {
+  return (
+    <BaseComponent {...props}>
+      <PaymentFlow {...props} />
+    </BaseComponent>
+  )
+}

src/components/ContractorPayment/CreatePayment/CreatePaymentPresentation.tsx renamed to src/components/Contractor/Payments/CreatePayment/CreatePaymentPresentation.tsx

@@ -1,13 +1,13 @@
 import type { StoryDefault, Story } from '@ladle/react'
 import { action } from '@ladle/react'
-import { ContractorPayment } from './ContractorPayment'
+import { ContractorPayments } from './ContractorPayments'
 
 export default {
-  title: 'Domain/ContractorPayment/Complete Flow',
+  title: 'Domain/Contractor/Payments/Complete Flow',
 } satisfies StoryDefault
 
 export const CompleteFlow: Story = () => {
-  return <ContractorPayment companyId="test-company-123" onEvent={action('onEvent')} />
+  return <ContractorPayments companyId="test-company-123" onEvent={action('onEvent')} />
 }
 
 CompleteFlow.meta = {
@@ -16,7 +16,7 @@ CompleteFlow.meta = {
 }
 
 export const WithDifferentCompany: Story = () => {
-  return <ContractorPayment companyId="different-company-456" onEvent={action('onEvent')} />
+  return <ContractorPayments companyId="different-company-456" onEvent={action('onEvent')} />
 }
 
 WithDifferentCompany.meta = {
@@ -26,7 +26,7 @@ WithDifferentCompany.meta = {
 export const MobileView: Story = () => {
   return (
     <div style={{ maxWidth: '375px', margin: '0 auto' }}>
-      <ContractorPayment companyId="test-company-123" onEvent={action('onEvent')} />
+      <ContractorPayments companyId="test-company-123" onEvent={action('onEvent')} />
     </div>
   )
 }

src/components/ContractorPayment/Detail/Detail.stories.tsx renamed to src/components/Contractor/Payments/Detail/Detail.stories.tsx

@@ -0,0 +1,24 @@
+import { createMachine } from 'robot3'
+import { useMemo } from 'react'
+import { paymentMachine } from './paymentStateMachine'
+import type { PaymentFlowProps, PaymentFlowContextInterface } from './PaymentFlowComponents'
+import { PaymentHistoryContextual } from './PaymentFlowComponents'
+import { Flow } from '@/components/Flow/Flow'
+
+export const PaymentFlow = ({ companyId, onEvent, defaultValues }: PaymentFlowProps) => {
+  const flow = useMemo(
+    () =>
+      createMachine(
+        'paymentHistory',
+        paymentMachine,
+        (initialContext: PaymentFlowContextInterface) => ({
+          ...initialContext,
+          component: PaymentHistoryContextual,
+          companyId,
+          defaultValues,
+        }),
+      ),
+    [companyId, defaultValues],
+  )
+  return <Flow machine={flow} onEvent={onEvent} />
+}

src/components/ContractorPayment/Detail/DetailPresentation.tsx renamed to src/components/Contractor/Payments/Detail/DetailPresentation.tsx

@@ -10,22 +10,22 @@ import { ensureRequired } from '@/helpers/ensureRequired'
 import { componentEvents } from '@/shared/constants'
 import { formatDateNamedWeekdayShortPlusDate } from '@/helpers/dateFormatting'
 
-export type ContractorPaymentFlowDefaultValues = Record<string, unknown>
+export type PaymentFlowDefaultValues = Record<string, unknown>
 
-export interface ContractorPaymentFlowProps extends BaseComponentInterface {
+export interface PaymentFlowProps extends BaseComponentInterface {
   companyId: string
-  defaultValues?: ContractorPaymentFlowDefaultValues
+  defaultValues?: PaymentFlowDefaultValues
 }
 
-export interface ContractorPaymentFlowContextInterface extends FlowContextInterface {
+export interface PaymentFlowContextInterface extends FlowContextInterface {
   companyId: string
   paymentGroupId?: string
   selectedDate?: string
-  defaultValues?: ContractorPaymentFlowDefaultValues
+  defaultValues?: PaymentFlowDefaultValues
 }
 
-export function ContractorPaymentPaymentHistoryContextual() {
-  const { onEvent } = useFlow<ContractorPaymentFlowContextInterface>()
+export function PaymentHistoryContextual() {
+  const { onEvent } = useFlow<PaymentFlowContextInterface>()
   const [showData, setShowData] = useState(false)
 
   const mockHistory = [
@@ -54,8 +54,8 @@ export function ContractorPaymentPaymentHistoryContextual() {
   )
 }
 
-export function ContractorPaymentCreatePaymentContextual() {
-  const { onEvent } = useFlow<ContractorPaymentFlowContextInterface>()
+export function CreatePaymentContextual() {
+  const { onEvent } = useFlow<PaymentFlowContextInterface>()
   const [contractors] = useState<ContractorPaymentForGroup[]>([
     {
       uuid: '1',
@@ -110,13 +110,13 @@ export function ContractorPaymentCreatePaymentContextual() {
   )
 }
 
-export function ContractorPaymentEditContextual() {
+export function PaymentEditContextual() {
   // TODO: PLACEHOLDER - Implement flow state machine to pass contractor data
   return null
 }
 
-export function ContractorPaymentOverviewContextual() {
-  const { onEvent } = useFlow<ContractorPaymentFlowContextInterface>()
+export function OverviewContextual() {
+  const { onEvent } = useFlow<PaymentFlowContextInterface>()
 
   // TODO: PLACEHOLDER - Replace with actual contractor payment group from API
   const mockContractorPaymentGroup: ContractorPaymentGroup = {
@@ -182,8 +182,8 @@ export function ContractorPaymentOverviewContextual() {
   )
 }
 
-export function ContractorPaymentDetailContextual() {
-  const { selectedDate, onEvent } = useFlow<ContractorPaymentFlowContextInterface>()
+export function DetailContextual() {
+  const { selectedDate, onEvent } = useFlow<PaymentFlowContextInterface>()
 
   const mockPayments = [
     {

src/components/Contractor/Payments/Flow/ContractorPayments.tsx

@@ -1,9 +1,9 @@
 import { transition, reduce, state } from 'robot3'
 import {
-  ContractorPaymentPaymentHistoryContextual,
-  ContractorPaymentCreatePaymentContextual,
-  ContractorPaymentOverviewContextual,
-} from './ContractorPaymentFlowComponents'
+  PaymentHistoryContextual,
+  CreatePaymentContextual,
+  OverviewContextual,
+} from './PaymentFlowComponents'
 import { componentEvents } from '@/shared/constants'
 import type { MachineEventType, MachineTransition } from '@/types/Helpers'
 import type { FlowContextInterface } from '@/components/Flow/useFlow'
@@ -21,27 +21,27 @@ type EventPayloads = {
   [componentEvents.BACK_TO_LIST]: undefined
 }
 
-export interface ContractorPaymentFlowContextInterface extends FlowContextInterface {
+export interface PaymentFlowContextInterface extends FlowContextInterface {
   companyId: string
   paymentGroupId?: string
   selectedDate?: string
 }
 
 const createReducer =
-  (overrides: Partial<ContractorPaymentFlowContextInterface>) =>
-  (ctx: ContractorPaymentFlowContextInterface): ContractorPaymentFlowContextInterface => ({
+  (overrides: Partial<PaymentFlowContextInterface>) =>
+  (ctx: PaymentFlowContextInterface): PaymentFlowContextInterface => ({
     ...ctx,
     ...overrides,
   })
 
-export const contractorPaymentMachine = {
+export const paymentMachine = {
   paymentHistory: state<MachineTransition>(
     transition(
       componentEvents.CREATE_PAYMENT_SELECTED,
       'createPayment',
       reduce(
         createReducer({
-          component: ContractorPaymentCreatePaymentContextual,
+          component: CreatePaymentContextual,
         }),
       ),
     ),
@@ -52,11 +52,11 @@ export const contractorPaymentMachine = {
       'overview',
       reduce(
         (
-          ctx: ContractorPaymentFlowContextInterface,
+          ctx: PaymentFlowContextInterface,
           ev: MachineEventType<EventPayloads, typeof componentEvents.PAYMENT_CONFIGURED>,
-        ): ContractorPaymentFlowContextInterface => ({
+        ): PaymentFlowContextInterface => ({
           ...ctx,
-          component: ContractorPaymentOverviewContextual,
+          component: OverviewContextual,
           paymentGroupId: ev.payload.paymentGroupId,
         }),
       ),
@@ -66,7 +66,7 @@ export const contractorPaymentMachine = {
       'paymentHistory',
       reduce(
         createReducer({
-          component: ContractorPaymentPaymentHistoryContextual,
+          component: PaymentHistoryContextual,
         }),
       ),
     ),
@@ -77,7 +77,7 @@ export const contractorPaymentMachine = {
       'createPayment',
       reduce(
         createReducer({
-          component: ContractorPaymentCreatePaymentContextual,
+          component: CreatePaymentContextual,
         }),
       ),
     ),
@@ -86,7 +86,7 @@ export const contractorPaymentMachine = {
       'paymentHistory',
       reduce(
         createReducer({
-          component: ContractorPaymentPaymentHistoryContextual,
+          component: PaymentHistoryContextual,
         }),
       ),
     ),
@@ -96,9 +96,9 @@ export const contractorPaymentMachine = {
       componentEvents.BACK_TO_LIST,
       'paymentHistory',
       reduce(
-        (ctx: ContractorPaymentFlowContextInterface): ContractorPaymentFlowContextInterface => ({
+        (ctx: PaymentFlowContextInterface): PaymentFlowContextInterface => ({
           ...ctx,
-          component: ContractorPaymentPaymentHistoryContextual,
+          component: PaymentHistoryContextual,
           selectedDate: undefined,
         }),
       ),