Skip to content

Commit bc3b890

Browse files
maksimzinchukmaksimzinchuk
committed
Update dependencies to latest versions, add asset type declarations, and refactor registration module for improved functionality and maintainability
1 parent 6c179e8 commit bc3b890

File tree

14 files changed

+1705
-1970
lines changed

14 files changed

+1705
-1970
lines changed

‎src/VirtoCommerce.MarketplaceRegistrationModule.Web/vcmp-registration/package.json‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -29,9 +29,9 @@
2929
"@types/node": "^20.10.5",
3030
"@typescript-eslint/eslint-plugin": "^6.16.0",
3131
"@typescript-eslint/parser": "^6.16.0",
32-
"@vc-shell/api-client-generator": "^1.1.52",
33-
"@vc-shell/release-config": "^1.1.52",
34-
"@vc-shell/ts-config": "^1.1.52",
32+
"@vc-shell/api-client-generator": "^1.1.83",
33+
"@vc-shell/release-config": "^1.1.83",
34+
"@vc-shell/ts-config": "^1.1.83",
3535
"@vitejs/plugin-vue": "^5.2.3",
3636
"@vue/eslint-config-prettier": "^9.0.0",
3737
"@vue/eslint-config-typescript": "^12.0.0",
@@ -59,8 +59,8 @@
5959
"vue-tsc": "^2.2.10"
6060
},
6161
"dependencies": {
62-
"@vc-shell/config-generator": "^1.1.52",
63-
"@vc-shell/framework": "^1.1.52",
62+
"@vc-shell/config-generator": "^1.1.83",
63+
"@vc-shell/framework": "^1.1.83",
6464
"@vcmp-registration/api": "1.0.0",
6565
"@vcmp-registration/modules": "1.0.0",
6666
"@vueuse/core": "^10.7.1",

‎src/VirtoCommerce.MarketplaceRegistrationModule.Web/vcmp-registration/src/modules/assets.d.ts‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
declare module '*.svg' {
2+
const content: string;
3+
export default content;
4+
}
5+
6+
declare module '*.svg?url' {
7+
const content: string;
8+
export default content;
9+
}
10+
11+
declare module '*.jpg' {
12+
const content: string;
13+
export default content;
14+
}
15+
16+
declare module '*.jpg?url' {
17+
const content: string;
18+
export default content;
19+
}

‎src/VirtoCommerce.MarketplaceRegistrationModule.Web/vcmp-registration/src/modules/registration/components/RegistrationButton.vue‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,22 @@
11
<template>
2-
<VcButton @click="onRegisterClick">Register</VcButton>
2+
<VcButton
3+
:variant="variant"
4+
@click="onRegisterClick"
5+
>{{ text }}</VcButton
6+
>
37
</template>
48

59
<script setup lang="ts">
10+
import { VcButton } from "@vc-shell/framework";
611
import { useRouter } from "vue-router";
712
13+
export interface Props {
14+
text: string;
15+
variant?: "primary" | "secondary";
16+
}
17+
18+
defineProps<Props>();
19+
820
const router = useRouter();
921
1022
const onRegisterClick = () => {

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

Lines changed: 24 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { ref, computed } from "vue";
2+
import { useExtensionData } from "@vc-shell/framework";
23

34
export interface IFormField {
45
name: string;
@@ -13,103 +14,37 @@ export interface IFormField {
1314
priority?: number;
1415
}
1516

16-
export interface IRegistrationFormConfig {
17-
fields: IFormField[];
18-
}
19-
20-
const defaultFields: IFormField[] = [
21-
{
22-
name: "firstName",
23-
type: "text",
24-
component: "VcInput",
25-
label: "VCMP_VENDOR_REGISTRATION.LABELS.FIRST_NAME",
26-
placeholder: "VCMP_VENDOR_REGISTRATION.PLACEHOLDERS.FIRST_NAME",
27-
required: true,
28-
rules: "required",
29-
priority: 10,
30-
},
31-
{
32-
name: "lastName",
33-
type: "text",
34-
component: "VcInput",
35-
label: "VCMP_VENDOR_REGISTRATION.LABELS.LAST_NAME",
36-
placeholder: "VCMP_VENDOR_REGISTRATION.PLACEHOLDERS.LAST_NAME",
37-
required: true,
38-
rules: "required",
39-
priority: 20,
40-
},
41-
{
42-
name: "organizationName",
43-
type: "text",
44-
component: "VcInput",
45-
label: "VCMP_VENDOR_REGISTRATION.LABELS.ORGANIZATION",
46-
placeholder: "VCMP_VENDOR_REGISTRATION.PLACEHOLDERS.ORGANIZATION",
47-
required: true,
48-
rules: "required",
49-
priority: 30,
50-
},
51-
{
52-
name: "contactEmail",
53-
type: "email",
54-
component: "VcInput",
55-
label: "VCMP_VENDOR_REGISTRATION.LABELS.EMAIL",
56-
placeholder: "VCMP_VENDOR_REGISTRATION.PLACEHOLDERS.EMAIL",
57-
hint: "VCMP_VENDOR_REGISTRATION.HINTS.EMAIL",
58-
required: true,
59-
rules: "emailWithServerValidation",
60-
priority: 40,
61-
},
62-
{
63-
name: "contactPhone",
64-
type: "tel",
65-
component: "VcInput",
66-
label: "VCMP_VENDOR_REGISTRATION.LABELS.PHONE",
67-
placeholder: "VCMP_VENDOR_REGISTRATION.PLACEHOLDERS.PHONE",
68-
rules: "phone",
69-
priority: 50,
70-
},
71-
];
72-
73-
const formConfig = ref<IRegistrationFormConfig>({
74-
fields: [...defaultFields],
75-
});
17+
export function useRegistrationForm() {
18+
const { data, updateData, getValue, setValue } = useExtensionData("registration-form");
7619

77-
const formData = ref<Record<string, unknown>>({});
20+
// Local form data
21+
const formData = ref<Record<string, unknown>>({});
7822

79-
defaultFields.forEach((field) => {
80-
formData.value[field.name] = "";
81-
});
23+
// Fields from extension system
24+
const formConfig = computed(() => ({
25+
fields: (data.value.fields || []).sort((a: IFormField, b: IFormField) => (a.priority || 0) - (b.priority || 0)),
26+
}));
8227

83-
export function useRegistrationForm() {
8428
const extendForm = (newFields: IFormField[]) => {
85-
formConfig.value.fields = [...formConfig.value.fields, ...newFields].sort(
86-
(a, b) => (a.priority || 0) - (b.priority || 0),
87-
);
88-
89-
newFields.forEach((field) => {
90-
if (!(field.name in formData.value)) {
91-
formData.value[field.name] = "";
92-
}
29+
const currentFields = data.value.fields || [];
30+
updateData({
31+
fields: [...currentFields, ...newFields],
9332
});
9433
};
9534

9635
const removeField = (fieldName: string) => {
97-
formConfig.value.fields = formConfig.value.fields.filter((field) => field.name !== fieldName);
98-
99-
delete formData.value[fieldName];
36+
const currentFields = data.value.fields || [];
37+
updateData({
38+
fields: currentFields.filter((field: IFormField) => field.name !== fieldName),
39+
});
10040
};
10141

10242
const updateField = (fieldName: string, updates: Partial<IFormField>) => {
103-
const fieldIndex = formConfig.value.fields.findIndex((field) => field.name === fieldName);
104-
if (fieldIndex !== -1) {
105-
formConfig.value.fields[fieldIndex] = {
106-
...formConfig.value.fields[fieldIndex],
107-
...updates,
108-
};
109-
if ("priority" in updates) {
110-
formConfig.value.fields = formConfig.value.fields.sort((a, b) => (a.priority || 0) - (b.priority || 0));
111-
}
112-
}
43+
const currentFields = data.value.fields || [];
44+
const updatedFields = currentFields.map((field: IFormField) =>
45+
field.name === fieldName ? { ...field, ...updates } : field,
46+
);
47+
updateData({ fields: updatedFields });
11348
};
11449

11550
const updateFormData = (fieldName: string, value: unknown) => {
@@ -120,16 +55,16 @@ export function useRegistrationForm() {
12055
return formData.value;
12156
};
12257

123-
const setFormData = (data: Record<string, unknown>) => {
124-
formData.value = { ...formData.value, ...data };
58+
const setFormData = (newData: Record<string, unknown>) => {
59+
formData.value = { ...formData.value, ...newData };
12560
};
12661

12762
const clearFormData = () => {
12863
formData.value = {};
12964
};
13065

13166
return {
132-
formConfig: computed(() => formConfig.value),
67+
formConfig,
13368
formData: computed(() => formData.value),
13469
extendForm,
13570
removeField,

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

Lines changed: 72 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
import * as locales from "./locales";
2-
import { i18n } from "@vc-shell/framework";
2+
import { i18n, useExtensionData, useExtensionSlot } from "@vc-shell/framework";
33
import { Router } from "vue-router";
44
import { App } from "vue";
55
import { routes } from "./router";
6-
import { useRegistrationForm } from "./composables/useRegistrationForm";
76
import { RegistrationButton } from "./components";
87

98
export default {
@@ -16,6 +15,9 @@ export default {
1615
}
1716

1817
routes.forEach((route) => {
18+
if (route.name === "DemoRegistration") {
19+
return;
20+
}
1921
routerInstance.addRoute(route);
2022
});
2123

@@ -25,13 +27,73 @@ export default {
2527
i18n.global.mergeLocaleMessage(key, message);
2628
});
2729
}
28-
},
29-
extensions: {
30-
inbound: {
31-
"registration-form": useRegistrationForm(),
32-
},
33-
outbound: {
34-
"login-after-form": [{ id: "RegistrationButton", component: RegistrationButton }],
35-
},
30+
31+
const { addComponent } = useExtensionSlot("login-after-form");
32+
33+
addComponent({
34+
id: "registration-button",
35+
component: RegistrationButton,
36+
props: {
37+
text: "Register",
38+
},
39+
priority: 10,
40+
});
41+
42+
const { updateData } = useExtensionData("registration-form");
43+
44+
updateData({
45+
fields: [
46+
{
47+
name: "firstName",
48+
type: "text",
49+
component: "VcInput",
50+
label: "VCMP_VENDOR_REGISTRATION.LABELS.FIRST_NAME",
51+
placeholder: "VCMP_VENDOR_REGISTRATION.PLACEHOLDERS.FIRST_NAME",
52+
required: true,
53+
rules: "required",
54+
priority: 10,
55+
},
56+
{
57+
name: "lastName",
58+
type: "text",
59+
component: "VcInput",
60+
label: "VCMP_VENDOR_REGISTRATION.LABELS.LAST_NAME",
61+
placeholder: "VCMP_VENDOR_REGISTRATION.PLACEHOLDERS.LAST_NAME",
62+
required: true,
63+
rules: "required",
64+
priority: 20,
65+
},
66+
{
67+
name: "organizationName",
68+
type: "text",
69+
component: "VcInput",
70+
label: "VCMP_VENDOR_REGISTRATION.LABELS.ORGANIZATION",
71+
placeholder: "VCMP_VENDOR_REGISTRATION.PLACEHOLDERS.ORGANIZATION",
72+
required: true,
73+
rules: "required",
74+
priority: 30,
75+
},
76+
{
77+
name: "contactEmail",
78+
type: "email",
79+
component: "VcInput",
80+
label: "VCMP_VENDOR_REGISTRATION.LABELS.EMAIL",
81+
placeholder: "VCMP_VENDOR_REGISTRATION.PLACEHOLDERS.EMAIL",
82+
hint: "VCMP_VENDOR_REGISTRATION.HINTS.EMAIL",
83+
required: true,
84+
rules: "emailWithServerValidation",
85+
priority: 40,
86+
},
87+
{
88+
name: "contactPhone",
89+
type: "tel",
90+
component: "VcInput",
91+
label: "VCMP_VENDOR_REGISTRATION.LABELS.PHONE",
92+
placeholder: "VCMP_VENDOR_REGISTRATION.PLACEHOLDERS.PHONE",
93+
rules: "phone",
94+
priority: 50,
95+
},
96+
],
97+
});
3698
},
3799
};

‎src/VirtoCommerce.MarketplaceRegistrationModule.Web/vcmp-registration/src/modules/registration/pages/demo.vue‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<script setup lang="ts">
2+
import RegistrationButton from "../components/RegistrationButton.vue";
3+
</script>
4+
5+
<template>
6+
<RegistrationButton />
7+
</template>

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,3 @@
11
export { default as Registration } from './registration.vue';
2+
export { default as RegistrationWrapper } from './RegistrationWrapper.vue';
3+
export { default as DemoRegistration } from './demo.vue';

‎src/VirtoCommerce.MarketplaceRegistrationModule.Web/vcmp-registration/src/modules/registration/pages/registration.vue‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
22
<VcLoginForm
33
:logo="customization.logo"
4-
:background="background"
4+
:background="customization.background"
55
:title="$t('VCMP_VENDOR_REGISTRATION.TITLE')"
66
>
77
<VcForm
@@ -32,7 +32,7 @@
3232
:loading="field.name === 'contactEmail' && validateEmailLoading"
3333
v-bind="field.props || {}"
3434
@update:model-value="
35-
(value) => {
35+
(value: any) => {
3636
handleChange(value);
3737
updateFormData(field.name, value);
3838
}
@@ -171,6 +171,7 @@ const onSubmit = async () => {
171171
const customization = computed(() => {
172172
return {
173173
logo: !customizationLoading.value ? uiSettings.value?.logo || props.logo : "",
174+
background: props.background,
174175
};
175176
});
176177
</script>

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

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,22 @@
11
import { RouteRecordRaw } from "vue-router";
22
import Registration from "../pages/registration.vue";
3-
// eslint-disable-next-line import/no-unresolved
4-
import whiteLogoImage from "/assets/logo-white.svg";
5-
// eslint-disable-next-line import/no-unresolved
6-
import bgImage from "/assets/background.jpg";
3+
import DemoRegistration from "../pages/demo.vue";
4+
import whiteLogoImage from "../../../../public/assets/logo-white.svg";
5+
import bgImage from "../../../../public/assets/background.jpg";
76

87
export const routes: RouteRecordRaw[] = [
98
{
109
path: "/registration",
1110
name: "Registration",
1211
component: Registration,
13-
props: (route) => ({
12+
props: () => ({
1413
logo: whiteLogoImage,
1514
background: bgImage,
1615
}),
1716
},
17+
{
18+
path: "/demo",
19+
name: "DemoRegistration",
20+
component: DemoRegistration,
21+
},
1822
];

‎src/VirtoCommerce.MarketplaceRegistrationModule.Web/vcmp-registration/src/modules/tsconfig.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,5 +8,5 @@
88
"types": ["vite/client", "../shims-vue.d.ts"],
99
},
1010
"files": ["package.json"],
11-
"include": ["index.ts", "**/*.ts", "**/*.vue", "**/*.json", "vite.config.mts"]
11+
"include": ["index.ts", "**/*.ts", "**/*.vue", "**/*.json", "vite.config.mts", "assets.d.ts"]
1212
}

0 commit comments

Comments
 (0)