Hi,

I am struggling with a "catalog" type of page where my users would add products to their basket.

I use Formik to have Field level validation (important feature) on each item (to make sure that whenever the user inputs a quantity, it is above the minimum required for that specific item).

Here is what my Page.tsx looks like (although I don't think it is relevant):

import getMyCatalogAction from '@/adapters/primaries/orders/getMyCatalog.action';
import Catalog from '@/components/orders/Catalog';

const EditOrder = async ({ params }: { params: { id: string } }) => {
  const catalog = await getMyCatalogAction();
  const { id } = params;
  const serializedCatalog = JSON.parse(JSON.stringify(catalog));
  return <Catalog catalog={serializedCatalog}/>;
};

export default EditOrder;

Here is my Catalog component (trimmed to the minimum):

'use client';
import addItemToOrderAction from '@/adapters/primaries/orders/addItemToOrder.action';
const Catalog: React.FC<CatalogProps> = ({ catalog, orderId }) => {
...necessary functions...
return (
    <Formik initialValues={formInitialValues} onSubmit={() => {}}>
      {({ values, errors, touched, setFieldValue }) => (
        <Form action={addItemToOrderAction}>
...
          <Field 
            name={item.ItemId} 
            type="number" 
            validate={(value: number) => validateMoQ(value, item) n}
            onChange={(e: any) => handleQuantityChange(e, setFieldValue)}
            onWheel={(e: any) => e.currentTarget.blur()}
           />
<button type="submit">Submit</button>
)
}

And here is my server action:

'use server';

export default async function addItemToOrderAction(
  items: any,
): Promise<{ success: boolean; redirectUrl: string }> {
  console.log(items);
  console.log('here');
}

my server action function is never called as I don't see theb logs on the server console.
I tried onSubmit instead of action with no better luck.

Any help is welcome