@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`, `class_id`, `course_id`, `state_id`,
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
- "class_id": 6,
124
- "course_id": 61,
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": "website",
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;