@evershop/evershop 2.1.1 → 2.1.2

package/src/components/frontStore/checkout/Shipment.tsx

@@ -1,3 +1,4 @@
+import Area from '@components/common/Area.js';
 import {
   Card,
   CardContent,
@@ -146,33 +147,39 @@ export function Shipment() {
   };
 
   return (
-    <div className="checkout__shipment space-y-6 mt-6">
-      <Card className="transition-all overflow-hidden duration-200">
-        <CardHeader>
-          <CardTitle>
-            <div className="flex items-center gap-2">
-              <MapPin className="w-5 h-5" />
-              <span>{_('Shipping Address')}</span>
-            </div>
-          </CardTitle>
-        </CardHeader>
-        <CardContent>
-          <CustomerAddressForm
-            areaId="checkoutShippingAddressForm"
-            fieldNamePrefix="shippingAddress"
-            address={shippingAddress}
-          />
-        </CardContent>
-      </Card>
-      <ShippingMethods
-        methods={availableShippingMethods?.map((method) => ({
-          ...method,
-          isSelected: method.code === selectedShippingMethod
-        }))}
-        shippingAddress={shippingAddress}
-        onSelect={updateShipment}
-        isLoading={fetchingShippingMethods}
-      />
-    </div>
+    <>
+      <Area id="checkoutShipmentBefore" />
+      <div className="checkout__shipment space-y-6 mt-6">
+        <Card className="transition-all overflow-hidden duration-200">
+          <CardHeader>
+            <CardTitle>
+              <div className="flex items-center gap-2">
+                <MapPin className="w-5 h-5" />
+                <span>{_('Shipping Address')}</span>
+              </div>
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <CustomerAddressForm
+              areaId="checkoutShippingAddressForm"
+              fieldNamePrefix="shippingAddress"
+              address={shippingAddress}
+            />
+          </CardContent>
+        </Card>
+        <Area id="checkoutShippingMethodsBefore" noOuter />
+        <ShippingMethods
+          methods={availableShippingMethods?.map((method) => ({
+            ...method,
+            isSelected: method.code === selectedShippingMethod
+          }))}
+          shippingAddress={shippingAddress}
+          onSelect={updateShipment}
+          isLoading={fetchingShippingMethods}
+        />
+        <Area id="checkoutShippingMethodsAfter" noOuter />
+      </div>
+      <Area id="checkoutShipmentAfter" />
+    </>
   );
 }

package/src/components/frontStore/checkout/payment/PaymentMethods.tsx

@@ -94,7 +94,7 @@ export function PaymentMethods({
                     </div>
                   ) : (
                     <RadioGroup
-                      value={selectedPaymentMethod}
+                      value={selectedPaymentMethod ?? ''}
                       onValueChange={(value) => {
                         setValue('paymentMethod', value);
                       }}

package/src/components/frontStore/checkout/shipment/ShippingMethods.tsx

@@ -105,7 +105,11 @@ export function ShippingMethods({
   };
 
   return (
-    <div className="checkout-shipment">
+    <div
+      className="checkout-shipment"
+      aria-invalid={formState.errors.shippingMethod ? 'true' : 'false'}
+      tabIndex={-1}
+    >
       <Card>
         <CardHeader>
           <CardTitle>
@@ -151,7 +155,7 @@ export function ShippingMethods({
                   </div>
                 ) : (
                   <RadioGroup
-                    value={currentValue}
+                    value={currentValue ?? ''}
                     onValueChange={(value) => {
                       const method = methods.find((m) => m.code === value);
                       if (method) {

package/src/components/frontStore/customer/CustomerContext.tsx

@@ -203,7 +203,7 @@ interface Customer {
     value: string;
     text: string;
   };
-  [key: string]: any;
+  [key: string]: unknown;
 }
 
 interface CustomerState {
@@ -249,7 +249,7 @@ interface CustomerDispatchContextValue {
     data: {
       email: string;
       password: string;
-      [key: string]: any;
+      [key: string]: unknown;
     },
     redirectUrl: string
   ) => Promise<boolean>;
@@ -258,7 +258,7 @@ interface CustomerDispatchContextValue {
       full_name: string;
       email: string;
       password: string;
-      [key: string]: any;
+      [key: string]: unknown;
     },
     loginIfSuccess: boolean,
     redirectUrl: string
@@ -344,7 +344,7 @@ export function CustomerProvider({
       data: {
         email: string;
         password: string;
-        [key: string]: any;
+        [key: string]: unknown;
       },
       redirectUrl: string
     ): Promise<boolean> => {
@@ -385,7 +385,7 @@ export function CustomerProvider({
         full_name: string;
         email: string;
         password: string;
-        [key: string]: any;
+        [key: string]: unknown;
       },
       loginIfSuccess: boolean,
       redirectUrl: string

package/src/components/frontStore/customer/RegistrationForm.tsx

@@ -130,7 +130,7 @@ export const CustomerRegistrationForm: React.FC<{
                 component: {
                   default: <SubmitButton formId="registerForm" />
                 },
-                sortOrder: 30
+                sortOrder: 40
               }
             ]}
           />

package/src/components/frontStore/customer/address/addressForm/AddressForm.tsx

@@ -123,6 +123,7 @@ export function CustomerAddressForm({
           component: {
             default: (
               <ProvinceAndPostcode
+                key={selectedCountry}
                 provinces={
                   allowCountries.find(
                     (country) => country.value === selectedCountry

package/src/lib/componee/scanForComponents.ts

@@ -1,6 +1,5 @@
 import { existsSync, readdirSync } from 'fs';
 import { resolve, sep } from 'path';
-import { Extension } from '../../types/extension.js';
 import { Route } from '../../types/route.js';
 
 interface ComponentsMap {

package/src/lib/event/EventProcessor.ts

@@ -0,0 +1,78 @@
+import { debug, error } from '../log/logger.js';
+import { callSubscribers } from './callSubscibers.js';
+import type { EventRow, EventStorage } from './EventStorage.js';
+
+const BATCH_SIZE = 10;
+
+type Subscriber = {
+  event: string;
+  subscriber: (data: unknown) => void | Promise<void>;
+};
+
+type EventProcessorDeps = {
+  storage: Pick<EventStorage, 'claimBatch' | 'markDoneAndDelete'>;
+  subscribers: Subscriber[];
+};
+
+/**
+ * Pure event processing logic. Accepts storage and subscribers as dependencies
+ * so both can be replaced with mocks in tests — no real DB or filesystem needed.
+ */
+export function createEventProcessor({
+  storage,
+  subscribers
+}: EventProcessorDeps) {
+  // Guard: prevents concurrent DB claim transactions while one is in-flight
+  let isProcessing = false;
+
+  async function executeSubscribers(event: EventRow): Promise<void> {
+    try {
+      const matchingSubscribers = subscribers
+        .filter((s) => s.event === event.name)
+        .map((s) => s.subscriber);
+      await callSubscribers(matchingSubscribers, event.data);
+    } catch (e) {
+      error(e);
+    } finally {
+      try {
+        await storage.markDoneAndDelete(event.uuid);
+      } catch (e) {
+        error(e);
+      }
+    }
+  }
+
+  async function loadAndProcess(): Promise<void> {
+    if (isProcessing) return;
+    isProcessing = true;
+    try {
+      let events: EventRow[];
+      try {
+        events = await storage.claimBatch(BATCH_SIZE);
+      } catch (e) {
+        error(e);
+        return;
+      }
+
+      if (events.length === 0) return;
+
+      debug(`Processing ${events.length} event(s)`);
+
+      // Each event runs concurrently; errors are isolated per event
+      events.forEach((event) => {
+        executeSubscribers(event).catch((e) => error(e));
+      });
+
+      // Full batch — more rows likely waiting, schedule next claim immediately
+      if (events.length === BATCH_SIZE) {
+        setImmediate(() => loadAndProcess().catch((e) => error(e)));
+      }
+    } finally {
+      // Reset before subscribers finish so new notifications can trigger
+      // a fresh claim while current subscribers are still running
+      isProcessing = false;
+    }
+  }
+
+  return { loadAndProcess };
+}

package/src/lib/event/EventStorage.ts

@@ -0,0 +1,74 @@
+import type { Pool } from 'pg';
+
+const STUCK_TIMEOUT_MINUTES = 5;
+
+export type EventRow = {
+  event_id: number;
+  uuid: string;
+  name: string;
+  data: unknown;
+  status: string;
+  created_at: string;
+  started_at: string | null;
+  completed_at: string | null;
+};
+
+/**
+ * Wraps all PostgreSQL interactions for the event queue.
+ * Accepts a pg Pool so it can be replaced with a mock in tests.
+ */
+export class EventStorage {
+  private pool: Pool;
+
+  constructor(pool: Pool) {
+    this.pool = pool;
+  }
+
+  /**
+   * Atomically claims up to `batchSize` pending events using a single CTE
+   * query — no BEGIN/COMMIT/ROLLBACK needed, eliminating the pg multi-query
+   * deprecation warning entirely.
+   */
+  async claimBatch(batchSize: number): Promise<EventRow[]> {
+    const result = await this.pool.query<EventRow>(
+      `WITH claimed AS (
+         SELECT uuid FROM event
+         WHERE status = 'pending'
+         ORDER BY event_id ASC
+         LIMIT $1
+         FOR UPDATE SKIP LOCKED
+       )
+       UPDATE event SET status = 'processing', started_at = NOW()
+       WHERE uuid IN (SELECT uuid FROM claimed)
+       RETURNING *`,
+      [batchSize]
+    );
+    return result.rows;
+  }
+
+  /**
+   * Marks an event as successfully completed and removes it from the table.
+   * Updates status first so a failed DELETE doesn't leave the event as pending.
+   */
+  async markDoneAndDelete(uuid: string): Promise<void> {
+    await this.pool.query(
+      `UPDATE event SET status = 'done', completed_at = NOW() WHERE uuid = $1`,
+      [uuid]
+    );
+    await this.pool.query(`DELETE FROM event WHERE uuid = $1`, [uuid]);
+  }
+
+  /**
+   * At startup: mark any events that were stuck as 'processing' during a
+   * prior crash as 'failed'. At-most-once delivery — subscribers are never
+   * called twice. Returns the number of events marked failed.
+   */
+  async markStuckAsFailed(): Promise<number> {
+    const result = await this.pool.query(
+      `UPDATE event SET status = 'failed'
+       WHERE status = 'processing'
+         AND started_at < NOW() - INTERVAL '${STUCK_TIMEOUT_MINUTES} minutes'`
+    );
+    return result.rowCount ?? 0;
+  }
+}

package/src/lib/event/callSubscibers.ts

@@ -0,0 +1,13 @@
+import { error } from '../../lib/log/logger.js';
+
+export async function callSubscribers(subscribers, eventData) {
+  await Promise.all(
+    subscribers.map(async (subscriber) => {
+      try {
+        await subscriber(eventData);
+      } catch (e) {
+        error(e);
+      }
+    })
+  );
+}

package/src/lib/event/event-manager.ts

@@ -0,0 +1,96 @@
+import { Client } from 'pg';
+import { getEnabledExtensions } from '../../bin/extension/index.js';
+import { loadBootstrapScript } from '../../bin/lib/bootstrap/bootstrap.js';
+import { getCoreModules } from '../../bin/lib/loadModules.js';
+import { pool, connectionSetting } from '../../lib/postgres/connection.js';
+import { debug, error } from '../log/logger.js';
+import { lockHooks } from '../util/hookable.js';
+import { lockRegistry } from '../util/registry.js';
+import { createEventProcessor } from './EventProcessor.js';
+import { EventStorage } from './EventStorage.js';
+import { loadSubscribers } from './loadSubscribers.js';
+
+const POLL_INTERVAL = 10000;
+
+const modules = [...getCoreModules(), ...getEnabledExtensions()];
+const subscribers = await loadSubscribers(modules);
+
+const storage = new EventStorage(pool);
+const { loadAndProcess } = createEventProcessor({ storage, subscribers });
+
+const init = async () => {
+  try {
+    for (const module of modules) {
+      await loadBootstrapScript(module, {
+        ...JSON.parse(process.env.bootstrapContext || '{}'),
+        process: 'event'
+      });
+    }
+    lockHooks();
+    lockRegistry();
+  } catch (e) {
+    error(e);
+    process.exit(0);
+  }
+  process.env.ALLOW_CONFIG_MUTATIONS = 'false';
+
+  // Dedicated client for LISTEN — pool connections are transient and cannot
+  // maintain a persistent LISTEN registration
+  const listenClient = new Client(connectionSetting);
+  await listenClient.connect();
+  await listenClient.query('LISTEN new_event');
+
+  listenClient.on('notification', () => {
+    debug('Received pg_notify(new_event), waking up event processor');
+    loadAndProcess().catch((e) => error(e));
+  });
+
+  // If the LISTEN connection drops, restart the process — the parent will respawn it
+  listenClient.on('error', (e) => {
+    error('LISTEN client error, restarting event-manager process:');
+    error(e);
+    process.exit(1);
+  });
+
+  // Fallback poll: catches events inserted before LISTEN was ready, or missed notifications
+  setInterval(() => {
+    loadAndProcess().catch((e) => error(e));
+  }, POLL_INTERVAL);
+
+  // Mark events stuck as 'processing' from a previous crash as 'failed'.
+  // At-most-once delivery: subscribers are never called twice, failed events
+  // remain visible in the table for operator inspection.
+  const stuckCount = await storage.markStuckAsFailed();
+  if (stuckCount > 0) {
+    error(
+      `Marked ${stuckCount} stuck event(s) as failed — they were interrupted by a previous crash`
+    );
+  }
+
+  // Drain any events that were pending before this process started
+  await loadAndProcess();
+};
+
+process.on('SIGTERM', async () => {
+  debug('Event manager received SIGTERM, shutting down...');
+  try {
+    process.exit(0);
+  } catch (err) {
+    error('Error during shutdown:');
+    error(err);
+    process.exit(1);
+  }
+});
+
+process.on('SIGINT', async () => {
+  debug('Event manager received SIGINT, shutting down...');
+  try {
+    process.exit(0);
+  } catch (err) {
+    error('Error during shutdown:');
+    error(err);
+    process.exit(1);
+  }
+});
+
+init();

package/src/lib/event/{loadSubscribers.js → loadSubscribers.ts}

@@ -3,8 +3,20 @@ import path from 'path';
 import { pathToFileURL } from 'url';
 import { error } from '../../lib/log/logger.js';
 
-async function loadModuleSubscribers(modulePath) {
-  const subscribers = [];
+type Subscriber = {
+  event: string;
+  subscriber: (data: unknown) => void | Promise<void>;
+};
+
+type Module = {
+  path: string;
+  [key: string]: unknown;
+};
+
+async function loadModuleSubscribers(
+  modulePath: string
+): Promise<Subscriber[]> {
+  const subscribers: Subscriber[] = [];
   const subscribersDir = path.join(modulePath, 'subscribers');
 
   if (!fs.existsSync(subscribersDir)) {
@@ -29,10 +41,10 @@ async function loadModuleSubscribers(modulePath) {
       await Promise.all(
         files.map(async (file) => {
           const subscriberPath = path.join(eventSubscribersDir, file);
-          const module = await import(pathToFileURL(subscriberPath));
+          const mod = await import(pathToFileURL(subscriberPath).toString());
           subscribers.push({
             event: eventName,
-            subscriber: module.default
+            subscriber: mod.default
           });
         })
       );
@@ -42,13 +54,13 @@ async function loadModuleSubscribers(modulePath) {
   return subscribers;
 }
 
-export async function loadSubscribers(modules) {
-  const subscribers = [];
-  /** Loading subscriber  */
+export async function loadSubscribers(
+  modules: Module[]
+): Promise<Subscriber[]> {
+  const subscribers: Subscriber[] = [];
   await Promise.all(
     modules.map(async (module) => {
       try {
-        // Load subscribers
         subscribers.push(...(await loadModuleSubscribers(module.path)));
       } catch (e) {
         error(e);