@verifiedinc-public/shared-ui-elements 11.8.0 → 11.9.0

package/dist/components/form/NewOneClickForm/core/fields/index.d.ts

@@ -616,6 +616,7 @@ export declare const fields: {
             placeholder: string;
         };
         zodSchema: import('zod').ZodEffects<import('zod').ZodString, string, string>;
+        format: (value: string) => string;
     };
     sex: {
         key: string;

package/dist/components/form/NewOneClickForm/core/fields/phone.d.ts

@@ -8,6 +8,7 @@ export declare const phone: {
         placeholder: string;
     };
     zodSchema: import('zod').ZodEffects<import('zod').ZodString, string, string>;
+    format: (value: string) => string;
 };
 declare module '../declarations' {
     interface FieldSchemaDefinitions {

package/dist/components/form/NewOneClickForm/core/fields/phone.mjs

@@ -1 +1 @@
-"use strict";import{phoneSchema as e}from"../validations/other/phone.schema.mjs";const o="phone",p={key:o,characteristics:{inputType:"text",label:"Phone Number",placeholder:"(555) 123-4567"},zodSchema:e};export{p as phone};
+"use strict";import{phoneFormat as e}from"../formats/phone.format.mjs";import{phoneSchema as o}from"../validations/other/phone.schema.mjs";const t="phone",a={key:t,characteristics:{inputType:"text",label:"Phone Number",placeholder:"(555) 123-4567"},zodSchema:o,format:e};export{a as phone};

package/dist/components/form/NewOneClickForm/core/formats/index.d.ts

@@ -1,5 +1,6 @@
 export * from './address.format';
 export * from './date.format';
 export * from './healthInsurance.format';
+export * from './phone.format';
 export * from './ssn.format';
 export * from './state.format';

package/dist/components/form/NewOneClickForm/core/formats/phone.format.d.ts

@@ -0,0 +1 @@
+export declare const phoneFormat: (value: string) => string;

package/dist/components/form/NewOneClickForm/core/formats/phone.format.mjs

@@ -0,0 +1 @@
+"use strict";import{parseToPhoneNational as o}from"../../../../../utils/phone/index.mjs";const r=t=>{if(!t)return t;try{return o(t)}catch{return t}};export{r as phoneFormat};

package/dist/components/form/NewOneClickForm/react/ui/fields/field-order.d.ts

@@ -0,0 +1,13 @@
+import { FormField } from '../../../core/form';
+/**
+ * Computes the ordered list of field keys to render.
+ *
+ * The phone field is hidden by default. When `showPhone` is enabled, the phone
+ * is surfaced and positioned between the name and address fields (per product
+ * rule: a phone that was not provided as input — e.g. sourced from autofill —
+ * must be shown so the user can confirm it). When `showPhone` is disabled (the
+ * default), the phone field is omitted entirely, preserving existing behavior.
+ */
+export declare function getDisplayFieldKeys(fields: Record<string, FormField>, { showPhone }: {
+    showPhone?: boolean;
+}): string[];

package/dist/components/form/NewOneClickForm/react/ui/fields/field-order.mjs

@@ -0,0 +1 @@
+"use strict";import{credentialKeys as e}from"../../../core/fields/index.mjs";function c(r,{showPhone:f}){const s=Object.keys(r),p=s.includes(e.phone);if(!f||!p)return s.filter(o=>o!==e.phone);const n=s.filter(o=>o!==e.phone),i=n.indexOf(e.fullName),l=n.indexOf(e.address);let t;return i!==-1?t=i+1:l!==-1?t=l:t=n.length,n.splice(t,0,e.phone),n}export{c as getDisplayFieldKeys};

package/dist/components/form/NewOneClickForm/react/ui/fields/input/field.mjs

@@ -1 +1 @@
-"use strict";import{Stack as h}from"@mui/material";import{credentialKeys as d}from"../../../../core/fields/index.mjs";import{useFormField as y}from"../../../core/field.hook.mjs";import{useOneClickForm as K}from"../../form.context.mjs";import{FieldRowContainer as n,FieldSectionTitle as m,FieldSectionContent as p}from"../style.mjs";import{AddressInputField as F}from"./address.field.mjs";import{TextInputField as f}from"./text.field.mjs";import{SelectInputField as k}from"./select.field.mjs";import{SSNInputField as v}from"./ssn.field.mjs";import{DateInputField as x}from"./date.field.mjs";import{HealthInsuranceInputField as I}from"./healthInsurance.field.mjs";import{jsx as e,jsxs as c,Fragment as T}from"react/jsx-runtime";import{fieldInputTypes as r}from"../../../../core/fields/constants.mjs";function u({fieldKey:i}){var a;const{field:l}=y({key:i}),o=(s,t)=>t?.schema.characteristics.inputType===r.text&&t?.schema.key===d.ssn?e(v,{fieldKey:s}):t?.schema.characteristics.inputType===r.date?e(x,{fieldKey:s}):t?.schema.characteristics.inputType===r.select?e(k,{fieldKey:s}):t?.schema.characteristics.inputType===r.text?e(f,{fieldKey:s}):(console.warn("Field not supported:",t?.schema.key),null);return((a=l?.schema)==null?void 0:a.key)===d.healthInsurance?c(n,{fieldKey:i,spacing:1.25,children:[e(m,{fieldKey:i,description:"Enter your insurance info:"}),e(p,{spacing:1.25,children:e(I,{fieldKey:i})})]}):l?.schema.characteristics.inputType===r.composite?l!=null&&l.children?l.schema.key===d.fullName?Object.keys(l.children).map(s=>{var t;return e(n,{fieldKey:`${i}.${s}`,children:o(`${i}.${s}`,(t=l.children)==null?void 0:t[s])},s)}):l.schema.key===d.address?c(T,{children:[e(n,{fieldKey:i,children:e(F,{fieldKey:i})}),e(n,{fieldKey:`${i}.line2`,children:e(f,{fieldKey:`${i}.line2`})})]}):c(n,{fieldKey:i,spacing:1.25,children:[e(m,{fieldKey:i}),e(p,{spacing:2,sx:{pt:1},children:Object.keys(l.children).map(s=>e(u,{fieldKey:`${i}.${s}`},s))})]}):null:e(n,{fieldKey:i,children:o(i,l)})}function $(){const i=K(),{fields:a}=i.formContext.state.form;return e(h,{spacing:2,sx:{width:"100%"},children:Object.entries(a).map(([l,o])=>o.schema.key===d.phone?null:e(u,{fieldKey:l},l))})}export{$ as EditFields};
+"use strict";import{Stack as y}from"@mui/material";import{credentialKeys as o}from"../../../../core/fields/index.mjs";import{useFormField as K}from"../../../core/field.hook.mjs";import{useOneClickForm as F}from"../../form.context.mjs";import{FieldRowContainer as d,FieldSectionTitle as m,FieldSectionContent as f}from"../style.mjs";import{getDisplayFieldKeys as v}from"../field-order.mjs";import{AddressInputField as k}from"./address.field.mjs";import{PhoneInputField as I}from"./phone.field.mjs";import{TextInputField as u}from"./text.field.mjs";import{SelectInputField as x}from"./select.field.mjs";import{SSNInputField as T}from"./ssn.field.mjs";import{DateInputField as $}from"./date.field.mjs";import{HealthInsuranceInputField as g}from"./healthInsurance.field.mjs";import{jsx as i,jsxs as p,Fragment as S}from"react/jsx-runtime";import{fieldInputTypes as t}from"../../../../core/fields/constants.mjs";function h({fieldKey:e}){var r,a;const{field:l}=K({key:e}),c=(n,s)=>s?.schema.characteristics.inputType===t.text&&s?.schema.key===o.ssn?i(T,{fieldKey:n}):s?.schema.characteristics.inputType===t.date?i($,{fieldKey:n}):s?.schema.characteristics.inputType===t.select?i(x,{fieldKey:n}):s?.schema.characteristics.inputType===t.text?i(u,{fieldKey:n}):(console.warn("Field not supported:",s?.schema.key),null);return((r=l?.schema)==null?void 0:r.key)===o.phone?i(d,{fieldKey:e,children:i(I,{fieldKey:e})}):((a=l?.schema)==null?void 0:a.key)===o.healthInsurance?p(d,{fieldKey:e,spacing:1.25,children:[i(m,{fieldKey:e,description:"Enter your insurance info:"}),i(f,{spacing:1.25,children:i(g,{fieldKey:e})})]}):l?.schema.characteristics.inputType===t.composite?l!=null&&l.children?l.schema.key===o.fullName?Object.keys(l.children).map(n=>{var s;return i(d,{fieldKey:`${e}.${n}`,children:c(`${e}.${n}`,(s=l.children)==null?void 0:s[n])},n)}):l.schema.key===o.address?p(S,{children:[i(d,{fieldKey:e,children:i(k,{fieldKey:e})}),i(d,{fieldKey:`${e}.line2`,children:i(u,{fieldKey:`${e}.line2`})})]}):p(d,{fieldKey:e,spacing:1.25,children:[i(m,{fieldKey:e}),i(f,{spacing:2,sx:{pt:1},children:Object.keys(l.children).map(n=>i(h,{fieldKey:`${e}.${n}`},n))})]}):null:i(d,{fieldKey:e,children:c(e,l)})}function w(){var e,r;const a=F(),{fields:l}=a.formContext.state.form,c=v(l,{showPhone:(r=(e=a.options.features.field)==null?void 0:e.phone)==null?void 0:r.show});return i(y,{spacing:2,sx:{width:"100%"},children:c.map(n=>i(h,{fieldKey:n},n))})}export{w as EditFields};

package/dist/components/form/NewOneClickForm/react/ui/fields/input/phone.field.d.ts

@@ -0,0 +1,3 @@
+export declare function PhoneInputField({ fieldKey }: {
+    fieldKey: string;
+}): import("react").JSX.Element | null;

package/dist/components/form/NewOneClickForm/react/ui/fields/input/phone.field.mjs

@@ -0,0 +1 @@
+"use strict";import{Box as a}from"@mui/material";import{PhoneInput as s}from"../../../../../PhoneInput.mjs";import{useFormField as t}from"../../../core/field.hook.mjs";import{FieldLabel as n}from"./label.mjs";import{jsx as l}from"react/jsx-runtime";function d({fieldKey:o}){const{field:e,setValue:i}=t({key:o});return e?l(a,{width:"100%",children:l(s,{variant:"outlined",size:"small",label:l(n,{fieldKey:o}),value:e.value||"",onChange:r=>{e.isDisabled||i(r)},error:!e.isValid,helperText:e.description,disabled:e.isDisabled,shouldHaveClearButton:!0,shouldHaveSelectCountryButton:!1,InputLabelProps:{shrink:!0}})}):null}export{d as PhoneInputField};

package/dist/components/form/NewOneClickForm/react/ui/fields/readonly/field.mjs

@@ -1 +1 @@
-"use strict";import{Stack as m}from"@mui/material";import{credentialKeys as d}from"../../../../core/fields/index.mjs";import{useFormField as f}from"../../../core/field.hook.mjs";import{useOneClickForm as p}from"../../form.context.mjs";import{FieldRowContainer as t,FieldRow as r,FieldSectionTitle as y,FieldSectionContent as h}from"../style.mjs";import{MultiField as c}from"./multi.field.mjs";import{SingleField as u}from"./single.field.mjs";import{HealthInsuranceField as K}from"./healthInsurance.field.mjs";import{DriversLicenseField as F}from"./driversLicense.field.mjs";import{jsx as l,jsxs as k}from"react/jsx-runtime";import{fieldInputTypes as v}from"../../../../core/fields/constants.mjs";function o({fieldKey:e}){var a,s;const{field:i}=f({key:e});return((a=i?.schema)==null?void 0:a.key)===d.driversLicense&&i.hasVariants?l(t,{fieldKey:e,spacing:1.25,children:l(F,{fieldKey:e})}):((s=i?.schema)==null?void 0:s.key)===d.healthInsurance?l(t,{fieldKey:e,spacing:1.25,children:l(K,{fieldKey:e})}):i?.schema.characteristics.inputType===v.composite&&i.children?i.schema.key===d.address?l(r,{fieldKey:e,children:l(c,{fieldKey:e})}):i.schema.key===d.fullName?l(t,{fieldKey:e,spacing:1.25,children:Object.keys(i.children).map(n=>l(o,{fieldKey:`${e}.${n}`},n))}):k(t,{fieldKey:e,spacing:1.25,children:[l(y,{fieldKey:e}),l(h,{spacing:1.25,children:Object.keys(i.children).map(n=>l(o,{fieldKey:`${e}.${n}`},n))})]}):l(r,{fieldKey:e,children:i!=null&&i.hasVariants?l(c,{fieldKey:e}):l(u,{fieldKey:e})})}function g(){const e=p(),{fields:a}=e.formContext.state.form;return l(m,{spacing:1.25,sx:{width:"100%"},onClick:()=>{var s,i;(((s=e.options.features.editMode)==null?void 0:s.hide)??((i=e.formContext.state.form)==null?void 0:i.isDisabled))||e.setEditMode(!0)},children:Object.entries(a).map(([s,i])=>i.schema.key===d.phone?null:l(o,{fieldKey:s},s))})}export{g as ReadonlyFields};
+"use strict";import{Stack as p}from"@mui/material";import{credentialKeys as a}from"../../../../core/fields/index.mjs";import{useFormField as h}from"../../../core/field.hook.mjs";import{useOneClickForm as y}from"../../form.context.mjs";import{FieldRowContainer as t,FieldRow as f,FieldSectionTitle as u,FieldSectionContent as K}from"../style.mjs";import{getDisplayFieldKeys as v}from"../field-order.mjs";import{MultiField as m}from"./multi.field.mjs";import{SingleField as F}from"./single.field.mjs";import{HealthInsuranceField as k}from"./healthInsurance.field.mjs";import{DriversLicenseField as g}from"./driversLicense.field.mjs";import{jsx as l,jsxs as x}from"react/jsx-runtime";import{fieldInputTypes as C}from"../../../../core/fields/constants.mjs";function r({fieldKey:e}){var d,s;const{field:i}=h({key:e});return((d=i?.schema)==null?void 0:d.key)===a.driversLicense&&i.hasVariants?l(t,{fieldKey:e,spacing:1.25,children:l(g,{fieldKey:e})}):((s=i?.schema)==null?void 0:s.key)===a.healthInsurance?l(t,{fieldKey:e,spacing:1.25,children:l(k,{fieldKey:e})}):i?.schema.characteristics.inputType===C.composite&&i.children?i.schema.key===a.address?l(f,{fieldKey:e,children:l(m,{fieldKey:e})}):i.schema.key===a.fullName?l(t,{fieldKey:e,spacing:1.25,children:Object.keys(i.children).map(o=>l(r,{fieldKey:`${e}.${o}`},o))}):x(t,{fieldKey:e,spacing:1.25,children:[l(u,{fieldKey:e}),l(K,{spacing:1.25,children:Object.keys(i.children).map(o=>l(r,{fieldKey:`${e}.${o}`},o))})]}):l(f,{fieldKey:e,children:i!=null&&i.hasVariants?l(m,{fieldKey:e}):l(F,{fieldKey:e})})}function w(){var e,d;const s=y(),{fields:i}=s.formContext.state.form,o=v(i,{showPhone:(d=(e=s.options.features.field)==null?void 0:e.phone)==null?void 0:d.show});return l(p,{spacing:1.25,sx:{width:"100%"},onClick:()=>{var n,c;(((n=s.options.features.editMode)==null?void 0:n.hide)??((c=s.formContext.state.form)==null?void 0:c.isDisabled))||s.setEditMode(!0)},children:o.map(n=>l(r,{fieldKey:n},n))})}export{w as ReadonlyFields};

package/dist/components/form/NewOneClickForm/react/ui/form.context.d.ts

@@ -13,6 +13,15 @@ type OneClickOptionFeatures = {
             /** When true, masks the year portion of the DOB field as ••••. */
             redactYear?: boolean;
         };
+        phone?: {
+            /**
+             * When true, shows the phone field in the form, positioned between the
+             * name and address fields. Phone is hidden by default; enable this when
+             * the phone was not provided as input (e.g. sourced from autofill) so the
+             * user can still see and confirm it.
+             */
+            show?: boolean;
+        };
     };
 };
 type OneClickOptionServicePaths = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@verifiedinc-public/shared-ui-elements",
-  "version": "11.8.0",
+  "version": "11.9.0",
   "description": "A set of UI components, utilities that is shareable with the core apps.",
   "private": false,
   "sideEffects": false,