feat: Popup Context

src/popup/Popup.tsx

@@ -3,9 +3,14 @@ import './Popup.scss'
 import React from 'react'
 
 import { RouterProvider } from '@/components/router-provider'
+import { PopupProvider } from '@/providers/popup-context'
 
 const Popup = () => {
-  return <RouterProvider />
+  return (
+    <PopupProvider>
+      <RouterProvider />
+    </PopupProvider>
+  )
 }
 
 export default Popup

src/providers/__tests__/popup-context.test.tsx

@@ -0,0 +1,90 @@
+import { act, render, screen } from '@testing-library/react'
+import React, { useContext } from 'react'
+
+import { defaultData, PopupContext, PopupProvider } from '../popup-context'
+
+const TestComponent = () => {
+  const { data, setData } = useContext(PopupContext)
+
+  return (
+    <div>
+      <div data-testid="amount">{data.amount}</div>
+      <div data-testid="rateOfPay">{data.rateOfPay}</div>
+      <button onClick={() => setData({ ...data, amount: 100 })}>Update Amount</button>
+    </div>
+  )
+}
+
+const MockChildComponent = () => {
+  const { data } = useContext(PopupContext)
+  return <div data-testid="mock-child">{data.amount}</div>
+}
+
+describe('PopupProvider', () => {
+  it('provides the initial context values', () => {
+    render(
+      <PopupProvider>
+        <TestComponent />
+      </PopupProvider>,
+    )
+
+    expect(screen.getByTestId('amount').textContent).toBe('0')
+    expect(screen.getByTestId('rateOfPay').textContent).toBe('0.36')
+  })
+
+  it('updates context values when setData is called', () => {
+    render(
+      <PopupProvider>
+        <TestComponent />
+      </PopupProvider>,
+    )
+
+    act(() => {
+      screen.getByText('Update Amount').click()
+    })
+
+    expect(screen.getByTestId('amount').textContent).toBe('100')
+  })
+
+  it('displays different initial values correctly', () => {
+    const customInitialData = {
+      ...defaultData,
+      amount: 50,
+      rateOfPay: 0.45,
+    }
+
+    render(
+      <PopupContext.Provider value={{ data: customInitialData, setData: () => {} }}>
+        <TestComponent />
+      </PopupContext.Provider>,
+    )
+
+    expect(screen.getByTestId('amount').textContent).toBe('50')
+    expect(screen.getByTestId('rateOfPay').textContent).toBe('0.45')
+  })
+
+  it('handles multiple updates to context values', () => {
+    render(
+      <PopupProvider>
+        <TestComponent />
+      </PopupProvider>,
+    )
+
+    act(() => {
+      screen.getByText('Update Amount').click()
+      screen.getByText('Update Amount').click()
+    })
+
+    expect(screen.getByTestId('amount').textContent).toBe('100')
+  })
+
+  it('renders child component with context data', () => {
+    render(
+      <PopupProvider>
+        <MockChildComponent />
+      </PopupProvider>,
+    )
+
+    expect(screen.getByTestId('mock-child').textContent).toBe('0')
+  })
+})

src/providers/index.ts

@@ -0,0 +1,3 @@
+import { PopupProvider } from './popup-context'
+
+export { PopupProvider }

src/providers/popup-context.tsx

@@ -0,0 +1,33 @@
+import React, { createContext, useState } from 'react'
+
+import { PopupContextValue, TPopupContext } from './providers.interface'
+
+export const defaultData = {
+  amount: 0,
+  amountType: {
+    recurring: true,
+  },
+  rateOfPay: 0.36,
+  wmEnabled: true,
+  accessTokenQuote: '',
+  accessTokenOutgoing: '',
+  refreshToken: '',
+  manageUrl: '',
+}
+
+interface IProps {
+  children: React.ReactNode
+}
+
+export const PopupContext = createContext<PopupContextValue>({
+  data: defaultData,
+  setData: () => {},
+})
+
+export const PopupProvider: React.FC<IProps> = ({ children }) => {
+  const [data, setData] = useState<TPopupContext>(defaultData)
+
+  return <PopupContext.Provider value={{ data, setData }}>{children}</PopupContext.Provider>
+}
+
+export default PopupProvider

src/providers/providers.interface.ts

@@ -0,0 +1,19 @@
+import React from 'react'
+
+export interface PopupContextValue {
+  data: TPopupContext
+  setData: React.Dispatch<React.SetStateAction<TPopupContext>>
+}
+
+export type TPopupContext = {
+  amount: number
+  amountType: {
+    recurring: boolean
+  }
+  rateOfPay: number
+  wmEnabled: boolean
+  accessTokenQuote: string
+  accessTokenOutgoing: string
+  refreshToken: string
+  manageUrl: string
+}

tsconfig.json

@@ -21,6 +21,7 @@
       "@/content/*": ["./content/*"],
       "@/assets/*": ["./assets/*"],
       "@/components/*": ["./components/*"],
+      "@/providers/*": ["./providers/*"],
       "@/types/*": ["./types/*"],
       "@/hooks/*": ["./hooks/*"]
     }

webpack.config.utils.ts

@@ -217,6 +217,7 @@ export const getResolves = () => {
       '@/content': path.resolve(__dirname, './src/content/'),
       '@/assets': path.resolve(__dirname, './src/assets/'),
       '@/components': path.resolve(__dirname, './src/components/'),
+      '@/providers': path.resolve(__dirname, './src/providers/'),
       '@/types': path.resolve(__dirname, './src/types/'),
       '@/hooks': path.resolve(__dirname, './src/hooks/'),
     },