Skip to content

feat(pci-project): implement FM willpayment within project creation page #19460

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Oct 6, 2025
Merged

feat(pci-project): implement FM willpayment within project creation page #19460

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
3dd8dce
feat(pci-project): add willpayment module federation configuration
seven-amid Sep 16, 2025
5444f96
feat(pci-project): implement project creation logic after payement va…
seven-amid Sep 18, 2025
60fa38e
feat(pci-project): intercept the registred payement method info via e…
seven-amid Sep 24, 2025
cc525fb
refactor(pci-project): refactor payment section in order to separate …
seven-amid Sep 24, 2025
c035bdb
feat(pci-project): add credit payment implementation within project c…
seven-amid Sep 30, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/manager/apps/pci-project/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,7 @@
"validator": "^13.15.15"
},
"devDependencies": {
"@originjs/vite-plugin-federation": "^1.3.9",
"@testing-library/react": "*",
"@types/validator": "^13.15.2",
"@vitest/coverage-v8": "^2.1.9",
Expand Down
240 changes: 198 additions & 42 deletions packages/manager/apps/pci-project/src/pages/creation/Creation.page.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,9 +78,28 @@ vi.mock('./hooks/useConfigForm', () => ({
const mockUseStepper = vi.fn();

vi.mock('./hooks/useStepper', () => ({
Step: {
Config: 0,
Payment: 1,
CreditConfirmation: 2,
},
useStepper: () => mockUseStepper(),
}));

// Mock useProjectCreation hook
const mockUseProjectCreation = vi.fn();

vi.mock('./hooks/useProjectCreation', () => ({
useProjectCreation: () => mockUseProjectCreation(),
}));

// Mock useWillPayment hook
const mockUseWillPayment = vi.fn();

vi.mock('./hooks/useWillPayment', () => ({
useWillPayment: () => mockUseWillPayment(),
}));

// Mock useAntiFraud hook
const mockUseAntiFraud = vi.fn();

Expand Down Expand Up @@ -129,10 +148,6 @@ vi.mock('@/components/FullPageSpinner', () => ({
}));

// Mock step components
vi.mock('./steps/ConfigurationStep', () => ({
default: () => <div data-testid="configuration-step">Configuration Step</div>,
}));

vi.mock('./steps/ConfigStep', () => ({
default: () => <div data-testid="config-step">Config Step</div>,
}));
Expand All @@ -141,6 +156,12 @@ vi.mock('./steps/PaymentStep', () => ({
default: () => <div data-testid="payment-step">Payment Step</div>,
}));

vi.mock('./components/credit/CreditConfirmation.component', () => ({
default: () => (
<div data-testid="credit-confirmation">Credit Confirmation</div>
),
}));

const renderWithProviders = (component: ReactElement) => {
const Wrapper = createWrapper(mockShellContext);

Expand All @@ -155,7 +176,7 @@ describe('Creation Page', () => {
mockUseParams.mockReturnValue({ projectId: 'test-project-id' });

mockUseGetCart.mockReturnValue({
cart: {
data: {
cartId: 'test-cart-id',
description: 'Test Cart',
items: [],
Expand Down Expand Up @@ -193,7 +214,11 @@ describe('Creation Page', () => {
});

mockUseGetOrderProjectId.mockReturnValue({
orderId: null,
data: {
itemId: 'test-project-item-id',
cartId: 'test-cart-id',
type: 'publicCloudProject',
},
isLoading: false,
error: null,
});
Expand All @@ -217,18 +242,37 @@ describe('Creation Page', () => {
});

mockUseStepper.mockReturnValue({
currentStep: 'generalInformations',
setCurrentStep: vi.fn(),
goToConfig: vi.fn(),
goToPayment: vi.fn(),
goToCreditConfirmation: vi.fn(),
isConfigChecked: false,
isConfigLocked: false,
isPaymentOpen: false,
isPaymentChecked: false,
isPaymentLocked: false,
goToStep: vi.fn(),
nextStep: vi.fn(),
previousStep: vi.fn(),
isFirstStep: true,
isLastStep: false,
isPaymentLocked: true,
isCreditConfirmationOpen: false,
isCreditConfirmationChecked: false,
isCreditConfirmationLocked: false,
});

mockUseProjectCreation.mockReturnValue({
isSubmitting: false,
needToCheckCustomerInfo: false,
billingHref: '',
handleProjectCreation: vi.fn(),
handleCreditAndPay: vi.fn(),
});

mockUseWillPayment.mockReturnValue({
isCreditPayment: false,
creditAmount: null,
needsSave: false,
isSaved: false,
canSubmit: true,
hasDefaultPaymentMethod: false,
savePaymentMethod: vi.fn(),
handlePaymentStatusChange: vi.fn(),
handleRegisteredPaymentMethodSelected: vi.fn(),
});

mockUseAttachConfigurationToCartItem.mockReturnValue({
Expand Down Expand Up @@ -261,33 +305,73 @@ describe('Creation Page', () => {
expect(screen.getByTestId('payment-step')).toBeInTheDocument();
});

it('should show proper content when cart is loading', () => {
it('should show spinner when cart or projectItem is null', () => {
// Override the default mocks to return null data
mockUseCreateAndAssignCart.mockReturnValue({
mutate: vi.fn(),
data: null, // No created cart
isLoading: false,
error: null,
});

mockUseGetCart.mockReturnValue({
cart: null,
isLoading: true,
data: null, // No existing cart
isLoading: false,
error: null,
});

mockUseOrderProjectItem.mockReturnValue({
mutate: vi.fn(),
data: null, // No created project item
isLoading: false,
error: null,
});

mockUseGetOrderProjectId.mockReturnValue({
data: null, // No existing project item
isLoading: false,
error: null,
});

renderWithProviders(<Creation />);

// Component should still render the basic structure
expect(screen.getByTestId('config-step')).toBeInTheDocument();
expect(screen.getByTestId('payment-step')).toBeInTheDocument();
expect(screen.getByTestId('full-page-spinner')).toBeInTheDocument();
});

it('should handle cart loading error', () => {
const error = new Error('Failed to load cart');

// Override all cart/project related mocks to return null
mockUseCreateAndAssignCart.mockReturnValue({
mutate: vi.fn(),
data: null,
isLoading: false,
error,
});

mockUseGetCart.mockReturnValue({
cart: null,
data: null,
isLoading: false,
error,
});

mockUseOrderProjectItem.mockReturnValue({
mutate: vi.fn(),
data: null,
isLoading: false,
error,
});

mockUseGetOrderProjectId.mockReturnValue({
data: null,
isLoading: false,
error,
});

renderWithProviders(<Creation />);

// Component should still render even with error
expect(screen.getByTestId('config-step')).toBeInTheDocument();
expect(screen.getByTestId('payment-step')).toBeInTheDocument();
// Should show spinner when cart/projectItem is null
expect(screen.getByTestId('full-page-spinner')).toBeInTheDocument();
});

it('should render config step by default', () => {
Expand Down Expand Up @@ -315,35 +399,57 @@ describe('Creation Page', () => {
expect(screen.getByTestId('payment-step')).toBeInTheDocument();
});

// Verify cart hook is called
// Verify hooks are called
expect(mockUseGetCart).toHaveBeenCalled();
expect(mockUseAntiFraud).toHaveBeenCalled();
expect(mockUseProjectCreation).toHaveBeenCalled();
expect(mockUseWillPayment).toHaveBeenCalled();
});

it('should handle anti-fraud polling', () => {
mockUseAntiFraud.mockReturnValue({
checkAntiFraud: vi.fn(),
isPolling: true,
error: null,
it('should handle project creation submission', () => {
const mockHandleProjectCreation = vi.fn();

mockUseProjectCreation.mockReturnValue({
isSubmitting: false,
needToCheckCustomerInfo: false,
billingHref: '',
handleProjectCreation: mockHandleProjectCreation,
handleCreditAndPay: vi.fn(),
});

mockUseWillPayment.mockReturnValue({
isCreditPayment: false,
creditAmount: null,
needsSave: false,
isSaved: false,
canSubmit: true,
hasDefaultPaymentMethod: true, // Has default payment method
savePaymentMethod: vi.fn(),
handlePaymentStatusChange: vi.fn(),
handleRegisteredPaymentMethodSelected: vi.fn(),
});

renderWithProviders(<Creation />);

// Component should handle polling state appropriately
expect(mockUseAntiFraud).toHaveBeenCalled();
expect(mockUseProjectCreation).toHaveBeenCalled();
expect(mockUseWillPayment).toHaveBeenCalled();
});

it('should handle anti-fraud error', () => {
const error = new Error('Anti-fraud check failed');
mockUseAntiFraud.mockReturnValue({
checkAntiFraud: vi.fn(),
isPolling: false,
error,
it('should handle credit payment flow', () => {
mockUseWillPayment.mockReturnValue({
isCreditPayment: true,
creditAmount: { value: 100, currency: 'EUR' },
needsSave: false,
isSaved: false,
canSubmit: true,
hasDefaultPaymentMethod: false,
savePaymentMethod: vi.fn(),
handlePaymentStatusChange: vi.fn(),
handleRegisteredPaymentMethodSelected: vi.fn(),
});

renderWithProviders(<Creation />);

expect(mockUseAntiFraud).toHaveBeenCalled();
expect(mockUseWillPayment).toHaveBeenCalled();
});

it('should handle order polling state', () => {
Expand All @@ -364,7 +470,7 @@ describe('Creation Page', () => {

it('should handle cart with items', () => {
mockUseGetCart.mockReturnValue({
cart: {
data: {
cartId: 'test-cart-id',
description: 'Cart with items',
items: [
Expand All @@ -386,7 +492,7 @@ describe('Creation Page', () => {

it('should handle readonly cart', () => {
mockUseGetCart.mockReturnValue({
cart: {
data: {
cartId: 'readonly-cart',
description: 'Readonly Cart',
items: [],
Expand All @@ -400,4 +506,54 @@ describe('Creation Page', () => {

expect(mockUseGetCart).toHaveBeenCalled();
});

it('should render credit confirmation when isCreditConfirmationOpen is true', () => {
mockUseStepper.mockReturnValue({
goToConfig: vi.fn(),
goToPayment: vi.fn(),
goToCreditConfirmation: vi.fn(),
isConfigChecked: true,
isConfigLocked: true,
isPaymentOpen: true,
isPaymentChecked: true,
isPaymentLocked: true,
isCreditConfirmationOpen: true,
isCreditConfirmationChecked: false,
isCreditConfirmationLocked: false,
});

renderWithProviders(<Creation />);

expect(screen.getByTestId('credit-confirmation')).toBeInTheDocument();
});

it('should call handleProjectCreation when isSaved becomes true', async () => {
const mockHandleProjectCreation = vi.fn();

mockUseProjectCreation.mockReturnValue({
isSubmitting: false,
needToCheckCustomerInfo: false,
billingHref: '',
handleProjectCreation: mockHandleProjectCreation,
handleCreditAndPay: vi.fn(),
});

mockUseWillPayment.mockReturnValue({
isCreditPayment: false,
creditAmount: null,
needsSave: false,
isSaved: true, // This should trigger handleProjectCreation
canSubmit: true,
hasDefaultPaymentMethod: false,
savePaymentMethod: vi.fn(),
handlePaymentStatusChange: vi.fn(),
handleRegisteredPaymentMethodSelected: vi.fn(),
});

renderWithProviders(<Creation />);

await waitFor(() => {
expect(mockHandleProjectCreation).toHaveBeenCalledWith({});
});
});
});
Loading
Loading