@coding-blocks/vmc-web-components 0.1.0 → 0.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md
CHANGED
|
@@ -34,14 +34,26 @@ can't leak in and the component's CSS can't leak out.
|
|
|
34
34
|
### `<vmc-online-lead>`
|
|
35
35
|
|
|
36
36
|
The "Want a call back?" lead form. Fields posted to the backend:
|
|
37
|
-
`name`, `email`, `dial_code`, `mobile`, `
|
|
38
|
-
`city_id`.
|
|
37
|
+
`name`, `email`, `dial_code`, `mobile`, `form_class_id`, `form_course_id`,
|
|
38
|
+
`state_id`, `city_id`.
|
|
39
|
+
|
|
40
|
+
All eight visible fields are mandatory — name, email, mobile, class, course,
|
|
41
|
+
state and city are validated on submit, each showing its own message under the
|
|
42
|
+
field (`Please select a class.`) and a red border, plus `required` /
|
|
43
|
+
`aria-required` on the control itself. Course stays disabled until a class is
|
|
44
|
+
picked and city until a state is picked, and each resets when its parent
|
|
45
|
+
changes, so an orphaned pair can't be submitted.
|
|
39
46
|
|
|
40
47
|
Mobile verification is mandatory: **Submit stays disabled until the number is
|
|
41
48
|
OTP-verified** and the consent box is ticked. Editing the number after
|
|
42
49
|
verification drops it back to unverified, so a submission can never carry an OTP
|
|
43
50
|
that belongs to a different number.
|
|
44
51
|
|
|
52
|
+
Once verified, the dial code and mobile inputs are disabled, and the verified
|
|
53
|
+
number is held in verification state. The submit payload is built from that
|
|
54
|
+
stored value rather than from the inputs, so re-enabling the fields through
|
|
55
|
+
devtools cannot put an unverified number on the wire.
|
|
56
|
+
|
|
45
57
|
| Attribute | Default | Purpose |
|
|
46
58
|
| --- | --- | --- |
|
|
47
59
|
| `api-base` | build-time `VITE_API_URL` | Override the compiled-in base (testing only) |
|
|
@@ -51,7 +63,6 @@ that belongs to a different number.
|
|
|
51
63
|
| `submit-label` | `Submit` | Submit button label |
|
|
52
64
|
| `success-title` | `Thank you!` | Heading after a successful submit |
|
|
53
65
|
| `success-message` | counsellor call-back copy | Body after a successful submit |
|
|
54
|
-
| `source` | `website` | Sent through as `source` in the payload |
|
|
55
66
|
| `extra-payload` | — | JSON object merged into the submit payload |
|
|
56
67
|
|
|
57
68
|
Events (bubbling and composed, so they cross the shadow boundary):
|
|
@@ -120,18 +131,23 @@ POST {otp-verify-path} { mobile_number, dial_code, otp_id, otp } -> 2xx
|
|
|
120
131
|
"email": "…",
|
|
121
132
|
"dial_code": "+91",
|
|
122
133
|
"mobile": "9999999999",
|
|
123
|
-
"
|
|
124
|
-
"
|
|
134
|
+
"form_class_id": 6,
|
|
135
|
+
"form_course_id": 61,
|
|
125
136
|
"state_id": 2,
|
|
126
137
|
"city_id": 21,
|
|
138
|
+
"admission_test_id": 2147483647,
|
|
127
139
|
"otp_id": "…",
|
|
128
140
|
"mobile_verified": true,
|
|
129
141
|
"consent": true,
|
|
130
|
-
"source": "
|
|
142
|
+
"source": "vmc-online-lead-form",
|
|
131
143
|
"page_url": "https://…"
|
|
132
144
|
}
|
|
133
145
|
```
|
|
134
146
|
|
|
147
|
+
`source` is always `vmc-online-lead-form`, and `admission_test_id` is always
|
|
148
|
+
`2147483647` — the fixed placeholder row for leads
|
|
149
|
+
that arrive without a test assigned.
|
|
150
|
+
|
|
135
151
|
Errors are read from `{ error }` (falling back to `{ message }`) on any non-2xx
|
|
136
152
|
response, so backend validation messages surface directly in the form.
|
|
137
153
|
|
|
@@ -10,8 +10,10 @@ type InputProps = {
|
|
|
10
10
|
autoComplete?: string;
|
|
11
11
|
disabled?: boolean;
|
|
12
12
|
invalid?: boolean;
|
|
13
|
+
required?: boolean;
|
|
14
|
+
error?: string;
|
|
13
15
|
};
|
|
14
|
-
export declare const Input: ({ name, placeholder, value, onChange, type, inputMode, maxLength, autoComplete, disabled, invalid, }: InputProps) => import("react").JSX.Element;
|
|
16
|
+
export declare const Input: ({ name, placeholder, value, onChange, type, inputMode, maxLength, autoComplete, disabled, invalid, required, error, }: InputProps) => import("react").JSX.Element;
|
|
15
17
|
type SelectProps = {
|
|
16
18
|
name: string;
|
|
17
19
|
placeholder: string;
|
|
@@ -20,9 +22,11 @@ type SelectProps = {
|
|
|
20
22
|
options: LookupItem[];
|
|
21
23
|
disabled?: boolean;
|
|
22
24
|
invalid?: boolean;
|
|
25
|
+
required?: boolean;
|
|
26
|
+
error?: string;
|
|
23
27
|
className?: string;
|
|
24
28
|
};
|
|
25
|
-
export declare const Select: ({ name, placeholder, value, onChange, options, disabled, invalid, className, }: SelectProps) => import("react").JSX.Element;
|
|
29
|
+
export declare const Select: ({ name, placeholder, value, onChange, options, disabled, invalid, required, error, className, }: SelectProps) => import("react").JSX.Element;
|
|
26
30
|
type OtpInputProps = {
|
|
27
31
|
length: number;
|
|
28
32
|
value: string;
|
|
@@ -19,6 +19,11 @@ type Options = {
|
|
|
19
19
|
*/
|
|
20
20
|
export declare const useMobileVerification: ({ api, sendPath, verifyPath, dialCode, mobile, resendSeconds, }: Options) => {
|
|
21
21
|
status: VerificationStatus;
|
|
22
|
+
/** Non-null only while `isVerified` — the exact number the OTP was issued for. */
|
|
23
|
+
verified: {
|
|
24
|
+
dialCode: string;
|
|
25
|
+
mobile: string;
|
|
26
|
+
} | null;
|
|
22
27
|
otp: string;
|
|
23
28
|
setOtp: import("react").Dispatch<import("react").SetStateAction<string>>;
|
|
24
29
|
otpId: string;
|