@coding-blocks/vmc-web-components 0.1.0 → 0.1.2

package/README.md

@@ -5,8 +5,17 @@ inside, plain custom elements on the outside — a host page only needs one
 `<script>` tag and the element.
 
 Every component in this repo ships in **one bundle**: `dist/vmc-web-components.js`
-(React and the CSS are inlined, so there are no peer dependencies and no extra
-network requests).
+— 37.8 kB, ~14 kB gzipped over the wire, with the runtime and the CSS inlined.
+No peer dependencies, no extra network requests.
+
+The source is written against React, but the build aliases `react`/`react-dom`
+to `preact/compat`, which is what actually ships — same JSX and hooks, ~5x
+smaller for a script that loads on other people's pages. Nothing in `src/`
+imports Preact directly, so the alias in `vite.config.ts` is the only place that
+knows. Two build notes worth keeping: the published bundle carries **no
+sourcemap** (it was 4.5x the size of the code), and terser's `unsafe_*` /
+`booleans_as_integers` options are deliberately off — they saved ~2 kB and broke
+Preact's event proxy at runtime.
 
 ## Usage
 
@@ -34,14 +43,26 @@ can't leak in and the component's CSS can't leak out.
 ### `<vmc-online-lead>`
 
 The "Want a call back?" lead form. Fields posted to the backend:
-`name`, `email`, `dial_code`, `mobile`, `class_id`, `course_id`, `state_id`,
-`city_id`.
+`name`, `email`, `dial_code`, `mobile`, `form_class_id`, `form_course_id`,
+`state_id`, `city_id`.
+
+All eight visible fields are mandatory — name, email, mobile, class, course,
+state and city are validated on submit, each showing its own message under the
+field (`Please select a class.`) and a red border, plus `required` /
+`aria-required` on the control itself. Course stays disabled until a class is
+picked and city until a state is picked, and each resets when its parent
+changes, so an orphaned pair can't be submitted.
 
 Mobile verification is mandatory: **Submit stays disabled until the number is
 OTP-verified** and the consent box is ticked. Editing the number after
 verification drops it back to unverified, so a submission can never carry an OTP
 that belongs to a different number.
 
+Once verified, the dial code and mobile inputs are disabled, and the verified
+number is held in verification state. The submit payload is built from that
+stored value rather than from the inputs, so re-enabling the fields through
+devtools cannot put an unverified number on the wire.
+
 | Attribute | Default | Purpose |
 | --- | --- | --- |
 | `api-base` | build-time `VITE_API_URL` | Override the compiled-in base (testing only) |
@@ -51,7 +72,6 @@ that belongs to a different number.
 | `submit-label` | `Submit` | Submit button label |
 | `success-title` | `Thank you!` | Heading after a successful submit |
 | `success-message` | counsellor call-back copy | Body after a successful submit |
-| `source` | `website` | Sent through as `source` in the payload |
 | `extra-payload` | — | JSON object merged into the submit payload |
 
 Events (bubbling and composed, so they cross the shadow boundary):
@@ -120,18 +140,23 @@ POST {otp-verify-path}  { mobile_number, dial_code, otp_id, otp }  -> 2xx
   "email": "…",
   "dial_code": "+91",
   "mobile": "9999999999",
-  "class_id": 6,
-  "course_id": 61,
+  "form_class_id": 6,
+  "form_course_id": 61,
   "state_id": 2,
   "city_id": 21,
+  "admission_test_id": 2147483647,
   "otp_id": "…",
   "mobile_verified": true,
   "consent": true,
-  "source": "website",
+  "source": "vmc-online-lead-form",
   "page_url": "https://…"
 }
 ```
 
+`source` is always `vmc-online-lead-form`, and `admission_test_id` is always
+`2147483647` — the fixed placeholder row for leads
+that arrive without a test assigned.
+
 Errors are read from `{ error }` (falling back to `{ message }`) on any non-2xx
 response, so backend validation messages surface directly in the form.
 

package/dist/types/components/ui.d.ts

@@ -10,8 +10,10 @@ type InputProps = {
     autoComplete?: string;
     disabled?: boolean;
     invalid?: boolean;
+    required?: boolean;
+    error?: string;
 };
-export declare const Input: ({ name, placeholder, value, onChange, type, inputMode, maxLength, autoComplete, disabled, invalid, }: InputProps) => import("react").JSX.Element;
+export declare const Input: ({ name, placeholder, value, onChange, type, inputMode, maxLength, autoComplete, disabled, invalid, required, error, }: InputProps) => import("react").JSX.Element;
 type SelectProps = {
     name: string;
     placeholder: string;
@@ -20,9 +22,11 @@ type SelectProps = {
     options: LookupItem[];
     disabled?: boolean;
     invalid?: boolean;
+    required?: boolean;
+    error?: string;
     className?: string;
 };
-export declare const Select: ({ name, placeholder, value, onChange, options, disabled, invalid, className, }: SelectProps) => import("react").JSX.Element;
+export declare const Select: ({ name, placeholder, value, onChange, options, disabled, invalid, required, error, className, }: SelectProps) => import("react").JSX.Element;
 type OtpInputProps = {
     length: number;
     value: string;

package/dist/types/lib/useMobileVerification.d.ts

@@ -19,6 +19,11 @@ type Options = {
  */
 export declare const useMobileVerification: ({ api, sendPath, verifyPath, dialCode, mobile, resendSeconds, }: Options) => {
     status: VerificationStatus;
+    /** Non-null only while `isVerified` — the exact number the OTP was issued for. */
+    verified: {
+        dialCode: string;
+        mobile: string;
+    } | null;
     otp: string;
     setOtp: import("react").Dispatch<import("react").SetStateAction<string>>;
     otpId: string;