feat: set up apm by edwin-joseph-cko · Pull Request #193 · processout/processout.js

edwin-joseph-cko · 2025-06-09T12:56:09Z

Description

Solution

Demo

Checklist

I bumped the version of the project using yarn bump-version
I have checked the code for any potential issues
I tested my changes in the browser

Notes

Jira Issue

adam-kazmierczak-cko · 2025-06-26T09:26:20Z

@edwin-joseph-cko I consider this reviewed and we can start merging stuff into this branch

- Add StateManager class with singleton pattern for global state management - Implement useComponentState hook for React-like state management - Add component lifecycle management and automatic cleanup - Include comprehensive documentation and migration guide - Support IE 11 compatibility with batched updates - Add TypeScript support with generic state types

- Add CancelButton element for payment cancellation - Add StatusTick element for displaying payment status - Add CancelRequest view for payment cancellation confirmation - Support cancel event emission and navigation - Integrate with existing APM event system

- Simplify FormFieldResult type using conditional types - Add Prettify helper type for better IntelliSense - Improve type safety with TransformFormField utility - Clean up type definitions for better maintainability - Remove duplicate type definitions

- Add POLLING_CANCELLED flag for proper polling control - Implement polling cancellation in API methods - Add hasReturnedFirstPending flag for better state tracking - Improve getCurrentStep method with flow-specific logic - Add pending state persistence in storage - Clean up pending state on success - Improve type safety in Context configuration

- Migrate all APM elements to use new StateManager system - Replace manual DOM manipulation with declarative state management - Add useComponentState hooks to all interactive elements - Improve element lifecycle management and cleanup - Enhance type safety across all element components - Standardize element state management patterns

- Update all APM views to work with new StateManager system - Improve view rendering with declarative component patterns - Add support for new cancel functionality in views - Update form utilities to work with new state management - Enhance render-elements utility for better component integration - Update Main layout to support new UI components - Improve view lifecycle management and state persistence

- Update Page class to support new StateManager integration - Enhance Theme system for better component styling - Improve utility functions for new state management patterns - Update references to include new components and types - Enhance event listener system for better state synchronization - Update main APM index to export new functionality - Improve core infrastructure for better component lifecycle management

- Update APM UI system documentation to reflect new StateManager - Enhance migration guide with new component patterns - Update example to demonstrate new state management - Document new cancel functionality and UI components - Improve developer experience with better examples and guides

… management - Add flexbox layout to the container in Theme for better spacing - Update NextStepProps to support multiple config types and refactor state management functions - Remove unused button in Success view for cleaner UI - Eliminate OTP state clearing in form submission for better state handling

- Replace interface definitions with type aliases for Authorization and Tokenization response types - Enhance type definitions for better readability and maintainability - Minor formatting fix in Components.ts for consistency

…ps view - Update setFormState function to return null for improved type safety - Capture form state in a local variable for better readability during submission - Refactor error handling in render method for clearer logic

…erience - Update APM index to include new Forage authorization and tokenization options - Refactor API response types to support redirect state handling - Improve error handling and state management in API methods - Enhance theme system for better color scheme support and dynamic styling - Update form utilities to prevent unnecessary re-renders and improve performance - Refactor layout components to support new responsive design patterns - Add support for new HTML elements in APM views for better accessibility

…direct - Emit events for redirect initiation and completion to enhance tracking - Implement error handling for redirect failures with detailed error information - Simplify cancel button logic in the render method for better clarity

…consistency - Introduced `generateUniqueId` function for generating unique IDs with an optional prefix. - Updated `StateManager`, `CopyInstruction`, and `QR` components to use `generateUniqueId` instead of `Math.random()` for ID generation, enhancing maintainability and readability.

- Added comments to the `generateUniqueId` function to indicate its use for component ID generation and to address security concerns related to random ID generation. - Added ignore comment for codeql

…ation Co-authored-by: Copilot Autofix powered by AI <62310815+github-advanced-security[bot]@users.noreply.github.com>

…e files - Added `include` section to `tsconfig.json` to specify the inclusion of the string includes polyfill and all TypeScript files in the `src` directory for improved compilation.

- Updated the font URL validation logic to use `indexOf` for checking allowed hosts and font inclusion, improving robustness in URL handling.

edwin-joseph-cko commented Jun 9, 2025

View reviewed changes

Comment thread src/apm/API.ts

edwin-joseph-cko requested a review from adam-kazmierczak-cko June 11, 2025 08:04

adam-kazmierczak-cko requested a review from jakubjasinsky June 12, 2025 07:24