Refactor registration module to utilize useExtensionPoint for form extension and streamline field management

Author: maksimzinchuk

src/VirtoCommerce.MarketplaceRegistrationModule.Web/vcmp-registration/src/modules/registration/composables/useRegistrationForm/index.ts

@@ -1,5 +1,4 @@
 import { ref, computed } from "vue";
-import { useExtensionData } from "@vc-shell/framework";
 
 export interface IFormField {
   name: string;
@@ -14,37 +13,79 @@ export interface IFormField {
   priority?: number;
 }
 
-export function useRegistrationForm() {
-  const { data, updateData, getValue, setValue } = useExtensionData("registration-form");
+const defaultFields: IFormField[] = [
+  {
+    name: "firstName",
+    type: "text",
+    component: "VcInput",
+    label: "VCMP_VENDOR_REGISTRATION.LABELS.FIRST_NAME",
+    placeholder: "VCMP_VENDOR_REGISTRATION.PLACEHOLDERS.FIRST_NAME",
+    required: true,
+    rules: "required",
+    priority: 10,
+  },
+  {
+    name: "lastName",
+    type: "text",
+    component: "VcInput",
+    label: "VCMP_VENDOR_REGISTRATION.LABELS.LAST_NAME",
+    placeholder: "VCMP_VENDOR_REGISTRATION.PLACEHOLDERS.LAST_NAME",
+    required: true,
+    rules: "required",
+    priority: 20,
+  },
+  {
+    name: "organizationName",
+    type: "text",
+    component: "VcInput",
+    label: "VCMP_VENDOR_REGISTRATION.LABELS.ORGANIZATION",
+    placeholder: "VCMP_VENDOR_REGISTRATION.PLACEHOLDERS.ORGANIZATION",
+    required: true,
+    rules: "required",
+    priority: 30,
+  },
+  {
+    name: "contactEmail",
+    type: "email",
+    component: "VcInput",
+    label: "VCMP_VENDOR_REGISTRATION.LABELS.EMAIL",
+    placeholder: "VCMP_VENDOR_REGISTRATION.PLACEHOLDERS.EMAIL",
+    hint: "VCMP_VENDOR_REGISTRATION.HINTS.EMAIL",
+    required: true,
+    rules: "emailWithServerValidation",
+    priority: 40,
+  },
+  {
+    name: "contactPhone",
+    type: "tel",
+    component: "VcInput",
+    label: "VCMP_VENDOR_REGISTRATION.LABELS.PHONE",
+    placeholder: "VCMP_VENDOR_REGISTRATION.PLACEHOLDERS.PHONE",
+    rules: "phone",
+    priority: 50,
+  },
+];
+
+// Module-level reactive state — other plugins can extend via extendForm()
+const fields = ref<IFormField[]>([...defaultFields]);
 
-  // Local form data
+export function useRegistrationForm() {
   const formData = ref<Record<string, unknown>>({});
 
-  // Fields from extension system
   const formConfig = computed(() => ({
-    fields: (data.value.fields || []).sort((a: IFormField, b: IFormField) => (a.priority || 0) - (b.priority || 0)),
+    fields: [...fields.value].sort((a, b) => (a.priority || 0) - (b.priority || 0)),
   }));
 
   const extendForm = (newFields: IFormField[]) => {
-    const currentFields = data.value.fields || [];
-    updateData({
-      fields: [...currentFields, ...newFields],
-    });
+    fields.value.push(...newFields);
   };
 
   const removeField = (fieldName: string) => {
-    const currentFields = data.value.fields || [];
-    updateData({
-      fields: currentFields.filter((field: IFormField) => field.name !== fieldName),
-    });
+    fields.value = fields.value.filter((f) => f.name !== fieldName);
   };
 
   const updateField = (fieldName: string, updates: Partial<IFormField>) => {
-    const currentFields = data.value.fields || [];
-    const updatedFields = currentFields.map((field: IFormField) =>
-      field.name === fieldName ? { ...field, ...updates } : field,
-    );
-    updateData({ fields: updatedFields });
+    fields.value = fields.value.map((f) => (f.name === fieldName ? { ...f, ...updates } : f));
   };
 
   const updateFormData = (fieldName: string, value: unknown) => {

src/VirtoCommerce.MarketplaceRegistrationModule.Web/vcmp-registration/src/modules/registration/index.ts

@@ -1,5 +1,5 @@
 import * as locales from "./locales";
-import { i18n, useExtensionData, useExtensionSlot } from "@vc-shell/framework";
+import { i18n, useExtensionPoint } from "@vc-shell/framework";
 import { Router } from "vue-router";
 import { App } from "vue";
 import { routes } from "./router";
@@ -28,72 +28,16 @@ export default {
       });
     }
 
-    const { addComponent } = useExtensionSlot("login-after-form");
+    const { add } = useExtensionPoint("auth:after-form");
 
-    addComponent({
+    add({
       id: "registration-button",
       component: RegistrationButton,
       props: {
         text: "Register",
       },
       priority: 10,
-    });
-
-    const { updateData } = useExtensionData("registration-form");
-
-    updateData({
-      fields: [
-        {
-          name: "firstName",
-          type: "text",
-          component: "VcInput",
-          label: "VCMP_VENDOR_REGISTRATION.LABELS.FIRST_NAME",
-          placeholder: "VCMP_VENDOR_REGISTRATION.PLACEHOLDERS.FIRST_NAME",
-          required: true,
-          rules: "required",
-          priority: 10,
-        },
-        {
-          name: "lastName",
-          type: "text",
-          component: "VcInput",
-          label: "VCMP_VENDOR_REGISTRATION.LABELS.LAST_NAME",
-          placeholder: "VCMP_VENDOR_REGISTRATION.PLACEHOLDERS.LAST_NAME",
-          required: true,
-          rules: "required",
-          priority: 20,
-        },
-        {
-          name: "organizationName",
-          type: "text",
-          component: "VcInput",
-          label: "VCMP_VENDOR_REGISTRATION.LABELS.ORGANIZATION",
-          placeholder: "VCMP_VENDOR_REGISTRATION.PLACEHOLDERS.ORGANIZATION",
-          required: true,
-          rules: "required",
-          priority: 30,
-        },
-        {
-          name: "contactEmail",
-          type: "email",
-          component: "VcInput",
-          label: "VCMP_VENDOR_REGISTRATION.LABELS.EMAIL",
-          placeholder: "VCMP_VENDOR_REGISTRATION.PLACEHOLDERS.EMAIL",
-          hint: "VCMP_VENDOR_REGISTRATION.HINTS.EMAIL",
-          required: true,
-          rules: "emailWithServerValidation",
-          priority: 40,
-        },
-        {
-          name: "contactPhone",
-          type: "tel",
-          component: "VcInput",
-          label: "VCMP_VENDOR_REGISTRATION.LABELS.PHONE",
-          placeholder: "VCMP_VENDOR_REGISTRATION.PLACEHOLDERS.PHONE",
-          rules: "phone",
-          priority: 50,
-        },
-      ],
+      meta: { type: "action", intent: "navigate" },
     });
   },
 };