@verifiedinc-public/shared-ui-elements 9.0.1 → 9.1.1

package/dist/components/form/DateInput/index.d.ts

@@ -16,6 +16,7 @@ interface DateInputProps extends Omit<TextFieldProps, 'onBlur' | 'onChange'> {
     InputProps?: TextFieldProps['InputProps'] & {
         'data-mask-me'?: boolean;
     };
+    redactYear?: boolean;
 }
 export declare const DateInput: import('react').ForwardRefExoticComponent<Omit<Readonly<DateInputProps>, "ref"> & import('react').RefAttributes<unknown>>;
 export {};

package/dist/components/form/DateInput/index.mjs

@@ -1 +1 @@
-"use strict";import{forwardRef as S,useState as M,useRef as O,useMemo as Y}from"react";import{TextField as F,Box as T,Stack as A,IconButton as N}from"@mui/material";import{CalendarToday as $}from"@mui/icons-material";import y from"../../../node_modules/react-datepicker/dist/es/index.mjs";import{useOnClickOutside as E}from"../../../hooks/useOnClickOutside.mjs";import R from"../../../styles/lib/react-datepicker.css.mjs";import{masks as B}from"../../../utils/masks/index.mjs";import{InputMask as j}from"../InputMask.mjs";import{jsxs as C,Fragment as z,jsx as a}from"react/jsx-runtime";const K=y.default??y,W=S(function(t,r){return a(A,{ref:r,sx:{position:"relative"},children:a(N,{edge:"end",size:"small",onClick:()=>{var l;t.disabled||(l=t.onFocus)==null||l.call(t)},disabled:t.disabled,children:a($,{fontSize:"small"})})})}),_=function({value:t,onChange:r,defaultSelectedDate:l,overflow:h=!1,clickOutsideBoundaryElement:u,minDate:x,maxDate:p,disabled:c}){const[b,d]=M(!1),m=O(null),k=new Date("08/01/1989"),f=x??new Date(1900,0,1),n=p??new Date,w=e=>{if(!e||!(e instanceof Date)||isNaN(e.getTime()))return"";try{const o=e.getDate().toString().padStart(2,"0"),s=(e.getMonth()+1).toString().padStart(2,"0"),i=e.getFullYear();return s==="00"||s>"12"||o==="00"||o>"31"||i<1900||i>n.getFullYear()?"":`${s}/${o}/${i}`}catch{return""}},D=Y(()=>{if(!t)return l??void 0;const e=new Date(t);return isNaN(+e)||!/^\d{2}\/\d{2}\/\d{4}$/.test(t)||e<f||e>n?k:e},[t]);return E(m,()=>{d(!1)},"mousedown",{},u),C(T,{ref:m,sx:{position:"relative","& .react-datepicker-popper":h?{transform:"translate(calc(-100% + 32px), calc(-50% + 10px))!important"}:{}},children:[a("style",{children:R}),a(K,{open:b,onFocus:()=>{d(e=>!e)},popperPlacement:"bottom-end",placeholderText:"MM/DD/YYYY",showPopperArrow:!1,showYearDropdown:!0,showMonthDropdown:!0,scrollableYearDropdown:!1,dateFormat:"MM/dd/yyyy",minDate:f,maxDate:n,selected:D,dropdownMode:"select",onSelect:e=>{const o=w(e);o&&(r?.({target:{value:o}}),d(!1))},disabled:c,customInput:a(W,{disabled:c})})]})};function G({label:t="Date",value:r,error:l,helperText:h,onChange:u,onBlur:x,disabled:p,pickerDefaultSelectedDate:c,pickerClickOutsideBoundaryElement:b,pickerInputOverflow:d=!1,inputMaskProps:m,minDate:k,maxDate:f,...n},w){var D;const[e,o]=M(""),s=r!==void 0,i=s?r:e,g=P=>{const v=P.target.value;s||o(v),u&&u(v)},I={label:t,error:l,helperText:h,fullWidth:!0,...n,autoComplete:"bday",inputProps:{...n.inputProps,inputMode:"numeric",tabIndex:0,mask:B.DOB_MASK},InputProps:{...n.InputProps,endAdornment:C(z,{children:[a(_,{onChange:g,value:i,overflow:d,clickOutsideBoundaryElement:b,defaultSelectedDate:c,minDate:k,maxDate:f,disabled:p}),(D=n.InputProps)==null?void 0:D.endAdornment]})}};return a(j,{mask:B.DOB_MASK,maskPlaceholder:null,disabled:p,value:i,onBlur:x,onChange:g,...m,children:a(F,{...I,inputRef:w,fullWidth:!0,sx:{flex:1,"& input":{boxShadow:"none!important",border:"none!important",letterSpacing:"1px"}}})})}const q=S(G);export{q as DateInput};
+"use strict";import{forwardRef as Y,useState as I,useRef as A,useMemo as N}from"react";import{TextField as P,Box as R,Stack as $,IconButton as z}from"@mui/material";import{CalendarToday as E}from"@mui/icons-material";import _ from"../../../node_modules/react-datepicker/dist/es/index.mjs";import{useOnClickOutside as W}from"../../../hooks/useOnClickOutside.mjs";import j from"../../../styles/lib/react-datepicker.css.mjs";import{masks as B}from"../../../utils/masks/index.mjs";import{InputMask as K}from"../InputMask.mjs";import{TextMaskCustom as q}from"../TextMaskCustom.mjs";import{jsxs as O,Fragment as G,jsx as n}from"react/jsx-runtime";const H=_.default??_,J=Y(function(t,s){return n($,{ref:s,sx:{position:"relative"},children:n(z,{edge:"end",size:"small",onClick:()=>{var i;t.disabled||(i=t.onFocus)==null||i.call(t)},disabled:t.disabled,children:n(E,{fontSize:"small"})})})}),L=function({value:t,onChange:s,defaultSelectedDate:i,overflow:h=!1,clickOutsideBoundaryElement:a,minDate:g,maxDate:m,disabled:D}){const[w,c]=I(!1),v=A(null),C=new Date("08/01/1989"),x=g??new Date(1900,0,1),u=m??new Date,r=e=>{if(!e||!(e instanceof Date)||isNaN(e.getTime()))return"";try{const o=e.getDate().toString().padStart(2,"0"),d=(e.getMonth()+1).toString().padStart(2,"0"),l=e.getFullYear();return d==="00"||d>"12"||o==="00"||o>"31"||l<1900||l>u.getFullYear()?"":`${d}/${o}/${l}`}catch{return""}},b=N(()=>{if(!t)return i??void 0;const e=new Date(t);return isNaN(+e)||!/^\d{2}\/\d{2}\/\d{4}$/.test(t)||e<x||e>u?C:e},[t]);return W(v,()=>{c(!1)},"mousedown",{},a),O(R,{ref:v,sx:{position:"relative","& .react-datepicker-popper":h?{transform:"translate(calc(-100% + 32px), calc(-50% + 10px))!important"}:{}},children:[n("style",{children:j}),n(H,{open:w,onFocus:()=>{c(e=>!e)},popperPlacement:"bottom-end",placeholderText:"MM/DD/YYYY",showPopperArrow:!1,showYearDropdown:!0,showMonthDropdown:!0,scrollableYearDropdown:!1,dateFormat:"MM/dd/yyyy",minDate:x,maxDate:u,selected:b,dropdownMode:"select",onSelect:e=>{const o=r(e);o&&(s?.({target:{value:o}}),c(!1))},disabled:D,customInput:n(J,{disabled:D})})]})};function V({label:t="Date",value:s,error:i,helperText:h,onChange:a,onBlur:g,disabled:m,pickerDefaultSelectedDate:D,pickerClickOutsideBoundaryElement:w,pickerInputOverflow:c=!1,inputMaskProps:v,minDate:C,maxDate:x,redactYear:u=!1,...r},b){var e;const[o,d]=I(""),l=s!==void 0,p=l?s:o,M=f=>{const k=f.target.value;l||d(k),a&&a(k)},y=O(G,{children:[!u&&n(L,{onChange:M,value:p,overflow:c,clickOutsideBoundaryElement:w,defaultSelectedDate:D,minDate:C,maxDate:x,disabled:m}),(e=r.InputProps)==null?void 0:e.endAdornment]}),S={flex:1,"& input":{boxShadow:"none!important",border:"none!important",letterSpacing:"1px"}};if(u)return n(P,{label:t,error:i,helperText:h,fullWidth:!0,...r,autoComplete:"bday",inputRef:b,value:p?.replace(/-/g,"")??"",onChange:((f,k)=>{if(!k)return;const F=p?.replace(/\//g,"")??"";if(f.target.value.replace(/\//g,"").length<F.length){a?.(""),l||d("");return}a?.(f.target.value),l||d(f.target.value)}),onBlur:g,disabled:m,placeholder:"__/__/____",inputProps:{...r.inputProps,useOnComplete:!1,unmask:!1,lazy:!0,mask:"00/00/YYYY",definitions:{Y:{mask:/[0-9•]/,displayChar:"\u2022"}},placeholderChar:"_",inputMode:"numeric",overwrite:!1,tabIndex:0},InputProps:{...r.InputProps,inputComponent:q,endAdornment:y},sx:S});const T={label:t,error:i,helperText:h,fullWidth:!0,...r,autoComplete:"bday",inputProps:{...r.inputProps,inputMode:"numeric",tabIndex:0,mask:B.DOB_MASK},InputProps:{...r.InputProps,endAdornment:y}};return n(K,{mask:B.DOB_MASK,maskPlaceholder:null,disabled:m,value:p,onBlur:g,onChange:M,...v,children:n(P,{...T,inputRef:b,fullWidth:!0,sx:S})})}const Q=Y(V);export{Q as DateInput};

package/dist/components/form/InputMask.d.ts

@@ -20,6 +20,7 @@ export interface InputMaskProps {
     onBlur?: ChangeEventHandler<HTMLInputElement>;
     beforeMaskedStateChange?: (options: BeforeMaskedStateChangeOptions) => void;
     maskPlaceholder?: string | null;
+    onFocus?: () => void;
     alwaysShowMask?: boolean;
     disabled?: boolean;
 }

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

@@ -61,22 +61,22 @@ export declare const healthInsurance: {
         payer: z.ZodObject<{
             verifiedId: z.ZodString;
             name: z.ZodString;
-            logoUrl: z.ZodOptional<z.ZodString>;
+            logoUrl: z.ZodOptional<z.ZodNullable<z.ZodString>>;
         }, "strip", z.ZodTypeAny, {
             name: string;
             verifiedId: string;
-            logoUrl?: string | undefined;
+            logoUrl?: string | null | undefined;
         }, {
             name: string;
             verifiedId: string;
-            logoUrl?: string | undefined;
+            logoUrl?: string | null | undefined;
         }>;
     }, "strip", z.ZodTypeAny, {
         memberId: string;
         payer: {
             name: string;
             verifiedId: string;
-            logoUrl?: string | undefined;
+            logoUrl?: string | null | undefined;
         };
         id?: number | undefined;
     }, {
@@ -84,7 +84,7 @@ export declare const healthInsurance: {
         payer: {
             name: string;
             verifiedId: string;
-            logoUrl?: string | undefined;
+            logoUrl?: string | null | undefined;
         };
         id?: number | undefined;
     }>;

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

@@ -525,22 +525,22 @@ export declare const fields: {
             payer: import('zod').ZodObject<{
                 verifiedId: import('zod').ZodString;
                 name: import('zod').ZodString;
-                logoUrl: import('zod').ZodOptional<import('zod').ZodString>;
+                logoUrl: import('zod').ZodOptional<import('zod').ZodNullable<import('zod').ZodString>>;
             }, "strip", import('zod').ZodTypeAny, {
                 name: string;
                 verifiedId: string;
-                logoUrl?: string | undefined;
+                logoUrl?: string | null | undefined;
             }, {
                 name: string;
                 verifiedId: string;
-                logoUrl?: string | undefined;
+                logoUrl?: string | null | undefined;
             }>;
         }, "strip", import('zod').ZodTypeAny, {
             memberId: string;
             payer: {
                 name: string;
                 verifiedId: string;
-                logoUrl?: string | undefined;
+                logoUrl?: string | null | undefined;
             };
             id?: number | undefined;
         }, {
@@ -548,7 +548,7 @@ export declare const fields: {
             payer: {
                 name: string;
                 verifiedId: string;
-                logoUrl?: string | undefined;
+                logoUrl?: string | null | undefined;
             };
             id?: number | undefined;
         }>;

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

@@ -12,7 +12,7 @@ export declare class Form {
             payer: {
                 name: string;
                 verifiedId: string;
-                logoUrl?: string | undefined;
+                logoUrl?: string | null | undefined;
             };
             id?: number | undefined;
         } | {

package/dist/components/form/NewOneClickForm/core/validations/healthInsurance/healthInsurance.schema.d.ts

@@ -5,22 +5,22 @@ export declare const healthInsuranceSchema: z.ZodObject<{
     payer: z.ZodObject<{
         verifiedId: z.ZodString;
         name: z.ZodString;
-        logoUrl: z.ZodOptional<z.ZodString>;
+        logoUrl: z.ZodOptional<z.ZodNullable<z.ZodString>>;
     }, "strip", z.ZodTypeAny, {
         name: string;
         verifiedId: string;
-        logoUrl?: string | undefined;
+        logoUrl?: string | null | undefined;
     }, {
         name: string;
         verifiedId: string;
-        logoUrl?: string | undefined;
+        logoUrl?: string | null | undefined;
     }>;
 }, "strip", z.ZodTypeAny, {
     memberId: string;
     payer: {
         name: string;
         verifiedId: string;
-        logoUrl?: string | undefined;
+        logoUrl?: string | null | undefined;
     };
     id?: number | undefined;
 }, {
@@ -28,7 +28,7 @@ export declare const healthInsuranceSchema: z.ZodObject<{
     payer: {
         name: string;
         verifiedId: string;
-        logoUrl?: string | undefined;
+        logoUrl?: string | null | undefined;
     };
     id?: number | undefined;
 }>;

package/dist/components/form/NewOneClickForm/core/validations/healthInsurance/healthInsurance.schema.mjs

@@ -1 +1 @@
-"use strict";import{z as e}from"zod";import{memberIdSchema as r}from"./memberId.schema.mjs";import{payerNameSchema as m}from"./payerName.schema.mjs";const o=e.object({id:e.number().optional(),memberId:r,payer:e.object({verifiedId:e.string().regex(/^V\d+$/),name:m,logoUrl:e.string().url().optional()})});export{o as healthInsuranceSchema};
+"use strict";import{z as e}from"zod";import{memberIdSchema as r}from"./memberId.schema.mjs";import{payerNameSchema as m}from"./payerName.schema.mjs";const a=e.object({id:e.number().optional(),memberId:r,payer:e.object({verifiedId:e.string().regex(/^V\d+$/),name:m,logoUrl:e.string().url().nullish()})});export{a as healthInsuranceSchema};

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

@@ -1 +1 @@
-"use strict";import{useRef as x,useState as M}from"react";import{Box as S}from"@mui/material";import{USDateSchema as A}from"../../../../../../../validations/date.schema.mjs";import{formatDateMMDDYYYY as I}from"../../../../../../../utils/date.mjs";import{credentialKeys as B}from"../../../../core/fields/index.mjs";import{useFormField as K}from"../../../core/field.hook.mjs";import{useOneClickForm as N}from"../../form.context.mjs";import{getAutoCompleteAttributeValue as O}from"../shared.mjs";import{FieldLabel as P}from"./label.mjs";import{ClearFieldAdornment as V}from"./clear-field-adornment.mjs";import{jsx as i}from"react/jsx-runtime";import{fieldInputTypes as E}from"../../../../core/fields/constants.mjs";import{DateInput as R}from"../../../../../DateInput/index.mjs";function L({fieldKey:l}){var o;const{options:m}=N(),{field:e,setValue:t}=K({key:l}),u=x(null),[d,n]=M(e!=null&&e.value?I(e?.value):"");if(!e||e.schema.characteristics.inputType!==E.date)return null;const s=e.schema.key===B.birthDate,a=new Date,p=1900,c=1,f=1,D=s?a.getUTCFullYear()-18:a.getUTCFullYear()+100,h=s?a.getUTCMonth()+1:12,C=s?a.getUTCDate():31,g=new Date(p,c-1,f),k=new Date(D,h-1,C),y=r=>{if(e.isDisabled)return;const F=A.safeParse(r),T=r.replace(/[^0-9]/g,"");if(n(r),T.length<=0)return t("");if(!F.success)return t("NaN");const[v,U,Y]=r.split("/").map(Number),w=Date.UTC(Y,v-1,U,12,0,0,0);t(String(w))},b=()=>{n(""),t("")};return i(S,{width:"100%",children:i(R,{inputRef:u,variant:"outlined",size:"small",autoComplete:O(e.schema.key),label:i(P,{fieldKey:l}),value:d,onChange:y,error:!(e!=null&&e.isValid),helperText:(o=e.errorMessage)!=null&&o.length?e.errorMessage:e?.description,placeholder:e.schema.characteristics.placeholder,pickerClickOutsideBoundaryElement:m.features.datePickerClickOutsideBoundaryElement,pickerDefaultSelectedDate:new Date("08/01/1989"),minDate:g,maxDate:k,disabled:e.isDisabled,InputProps:{"data-mask-me":!0,endAdornment:i(V,{fieldKey:l,onClick:b,disabled:e.isDisabled})}})})}export{L as DateInputField};
+"use strict";import{useRef as S,useState as A}from"react";import{Box as I}from"@mui/material";import{USDateSchema as B}from"../../../../../../../validations/date.schema.mjs";import{formatDateMMDDYYYY as K}from"../../../../../../../utils/date.mjs";import{credentialKeys as N}from"../../../../core/fields/index.mjs";import{useFormField as O}from"../../../core/field.hook.mjs";import{useOneClickForm as P}from"../../form.context.mjs";import{getAutoCompleteAttributeValue as V}from"../shared.mjs";import{FieldLabel as E}from"./label.mjs";import{ClearFieldAdornment as R}from"./clear-field-adornment.mjs";import{jsx as l}from"react/jsx-runtime";import{fieldInputTypes as j}from"../../../../core/fields/constants.mjs";import{DateInput as z}from"../../../../../DateInput/index.mjs";function L({fieldKey:s}){var o,n,m;const{options:u}=P(),{field:e,setValue:t}=O({key:s}),p=S(null),[c,d]=A(e!=null&&e.value?K(e?.value):"");if(!e||e.schema.characteristics.inputType!==j.date)return null;const a=e.schema.key===N.birthDate,r=new Date,f=1900,D=1,h=1,C=a?r.getUTCFullYear()-18:r.getUTCFullYear()+100,g=a?r.getUTCMonth()+1:12,b=a?r.getUTCDate():31,k=new Date(f,D-1,h),y=new Date(C,g-1,b),v=i=>{if(e.isDisabled)return;const T=B.safeParse(i),Y=i.replace(/[^0-9]/g,"");if(d(i),Y.length<=0)return t("");if(!T.success)return t("NaN");const[U,w,x]=i.split("/").map(Number),M=Date.UTC(x,U-1,w,12,0,0,0);t(String(M))},F=()=>{d(""),t("")};return l(I,{width:"100%",children:l(z,{inputRef:p,variant:"outlined",size:"small",autoComplete:V(e.schema.key),label:l(E,{fieldKey:s}),value:c,onChange:v,error:!(e!=null&&e.isValid),helperText:(o=e.errorMessage)!=null&&o.length?e.errorMessage:e?.description,placeholder:e.schema.characteristics.placeholder,pickerClickOutsideBoundaryElement:u.features.datePickerClickOutsideBoundaryElement,pickerDefaultSelectedDate:new Date("08/01/1989"),minDate:k,maxDate:y,disabled:e.isDisabled,redactYear:a&&((m=(n=u.features.field)==null?void 0:n.dob)==null?void 0:m.redactYear),InputProps:{"data-mask-me":!0,endAdornment:l(R,{fieldKey:s,onClick:F,disabled:e.isDisabled})}})})}export{L as DateInputField};

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

@@ -1 +1 @@
-"use strict";import{useState as v,useRef as x,useCallback as C,createElement as D}from"react";import{Stack as M,Autocomplete as A,TextField as H,Box as O,Avatar as S,Typography as T,InputAdornment as U,IconButton as z}from"@mui/material";import{Close as w}from"@mui/icons-material";import{useQuery as E}from"@tanstack/react-query";import{useDebounceValue as q}from"../../../../../../../hooks/useDebounceValue.mjs";import{MemberIdInput as V}from"../../../../../MemberIdInput.mjs";import{useFormField as j}from"../../../core/field.hook.mjs";import{useOneClickForm as B}from"../../form.context.mjs";import{jsxs as y,jsx as i,Fragment as K}from"react/jsx-runtime";const g=20;function R(m){const{options:a}=B(),s=q(m,300),[p,h]=v([]),[d,f]=v(!0),[t,u]=v(!1),c=x(0),{isLoading:I}=E({queryKey:["insurance-providers",s],queryFn:async({signal:n})=>{var l,o;const e=await((o=(l=a.servicePaths).oneClickHealthProviderPayers)==null?void 0:o.call(l,{search:s||void 0,limit:g,skip:0},n))??[];return c.current=e.length,h(e),f(e.length>=g),e},refetchOnMount:!0,enabled:!!a.servicePaths.oneClickHealthProviderPayers}),b=C(async()=>{var n,l;if(!(t||!d)){u(!0);try{const o=await((l=(n=a.servicePaths).oneClickHealthProviderPayers)==null?void 0:l.call(n,{search:s||void 0,limit:g,skip:c.current}))??[];h(e=>[...e,...o]),c.current+=o.length,f(o.length>=g)}finally{u(!1)}}},[t,d,s,a.servicePaths]);return{providers:p,isLoading:I,isLoadingMore:t,hasMore:d,loadMore:b}}function F({children:m}){return y(K,{children:[m," ",i(T,{"data-asterisk":!0,component:"span",color:"error",variant:"subtitle2",sx:{fontSize:"inherit"},children:"\u273D"})]})}function W({fieldKey:m}){const{field:a,setValue:s}=j({key:m}),[p,h]=v(""),{providers:d,isLoading:f,isLoadingMore:t,hasMore:u,loadMore:c}=R(p),I=x(null),b=C(e=>{const r=e.currentTarget;r.scrollTop+r.clientHeight>=r.scrollHeight-50&&u&&!t&&c()},[u,t,c]);if(!a)return null;const n=a.value;if(!n)return null;const l=e=>{s({...n,...e})},o=d.find(e=>e.verifiedId===n.payer.verifiedId)??n.payer;return y(M,{spacing:2,children:[i(A,{fullWidth:!0,disabled:a.isDisabled,options:d,loading:f||t,filterOptions:e=>e,value:o.verifiedId?o:null,inputValue:p,onInputChange:(e,r)=>{h(r)},onChange:(e,r)=>{l(r?{payer:{name:r.name,logoUrl:r.logoUrl,verifiedId:r.verifiedId},memberId:""}:{payer:{name:"",logoUrl:"",verifiedId:""},memberId:""})},isOptionEqualToValue:(e,r)=>!!e&&!!r&&e.verifiedId===r.verifiedId,getOptionLabel:e=>e.name,ListboxProps:{ref:I,onScroll:b},renderOption:(e,r)=>{var P,k;return D(O,{component:"li",...e,key:r.verifiedId},y(M,{direction:"row",spacing:1.5,alignItems:"center",children:[i(S,{src:r.logoUrl,alt:(P=r.name[0])==null?void 0:P.toUpperCase(),sx:{width:32,height:32,bgcolor:"primary.main"},slotProps:{img:{onError:L=>{L.currentTarget.style.display="none"}}},children:(k=r.name[0])==null?void 0:k.toUpperCase()}),i(T,{sx:{textAlign:"left"},children:r.name})]}))},renderInput:e=>i(H,{...e,label:i(F,{children:"Insurer"}),helperText:"The company that provides your health insurance",placeholder:"Search...",size:"small",InputLabelProps:{shrink:!0},InputProps:{...e.InputProps,"data-mask-me":!0,endAdornment:e.InputProps.endAdornment}})}),i(V,{fullWidth:!0,label:i(F,{children:"Member ID"}),placeholder:"Enter member ID",size:"small",disabled:a.isDisabled,value:n.memberId,onChange:e=>l({memberId:e.target.value}),helperText:"From your health insurance ID card",InputProps:{"data-mask-me":!0,endAdornment:n.memberId?i(U,{position:"end",children:i(z,{tabIndex:-1,"aria-label":"clear member id",edge:"end",size:"small",disabled:a.isDisabled,onClick:()=>l({memberId:""}),children:i(w,{fontSize:"small"})})}):null}})]})}export{W as HealthInsuranceInputField};
+"use strict";import{useState as v,useRef as x,useCallback as C,createElement as D}from"react";import{Stack as M,Autocomplete as A,TextField as H,Box as O,Avatar as S,Typography as T,InputAdornment as U,IconButton as z}from"@mui/material";import{Close as w}from"@mui/icons-material";import{useQuery as E}from"@tanstack/react-query";import{useDebounceValue as q}from"../../../../../../../hooks/useDebounceValue.mjs";import{MemberIdInput as V}from"../../../../../MemberIdInput.mjs";import{useFormField as j}from"../../../core/field.hook.mjs";import{useOneClickForm as B}from"../../form.context.mjs";import{jsxs as y,jsx as i,Fragment as K}from"react/jsx-runtime";const g=20;function R(m){const{options:a}=B(),s=q(m,300),[p,h]=v([]),[d,f]=v(!0),[t,u]=v(!1),c=x(0),{isLoading:I}=E({queryKey:["insurance-providers",s],queryFn:async({signal:n})=>{var o,l;const e=await((l=(o=a.servicePaths).oneClickHealthProviderPayers)==null?void 0:l.call(o,{search:s||void 0,limit:g,skip:0},n))??[];return c.current=e.length,h(e),f(e.length>=g),e},refetchOnMount:!0,enabled:!!a.servicePaths.oneClickHealthProviderPayers}),b=C(async()=>{var n,o;if(!(t||!d)){u(!0);try{const l=await((o=(n=a.servicePaths).oneClickHealthProviderPayers)==null?void 0:o.call(n,{search:s||void 0,limit:g,skip:c.current}))??[];h(e=>[...e,...l]),c.current+=l.length,f(l.length>=g)}finally{u(!1)}}},[t,d,s,a.servicePaths]);return{providers:p,isLoading:I,isLoadingMore:t,hasMore:d,loadMore:b}}function F({children:m}){return y(K,{children:[m," ",i(T,{"data-asterisk":!0,component:"span",color:"error",variant:"subtitle2",sx:{fontSize:"inherit"},children:"\u273D"})]})}function W({fieldKey:m}){const{field:a,setValue:s}=j({key:m}),[p,h]=v(""),{providers:d,isLoading:f,isLoadingMore:t,hasMore:u,loadMore:c}=R(p),I=x(null),b=C(e=>{const r=e.currentTarget;r.scrollTop+r.clientHeight>=r.scrollHeight-50&&u&&!t&&c()},[u,t,c]);if(!a)return null;const n=a.value;if(!n)return null;const o=e=>{s({...n,...e})},l=d.find(e=>e.verifiedId===n.payer.verifiedId)??n.payer;return y(M,{spacing:2,children:[i(A,{fullWidth:!0,disabled:a.isDisabled,options:d,loading:f||t,filterOptions:e=>e,value:l.verifiedId?l:null,inputValue:p,onInputChange:(e,r)=>{h(r)},onChange:(e,r)=>{o(r?{payer:{name:r.name,logoUrl:r.logoUrl,verifiedId:r.verifiedId},memberId:""}:{payer:{name:"",logoUrl:void 0,verifiedId:""},memberId:""})},isOptionEqualToValue:(e,r)=>!!e&&!!r&&e.verifiedId===r.verifiedId,getOptionLabel:e=>e.name,ListboxProps:{ref:I,onScroll:b},renderOption:(e,r)=>{var P,k;return D(O,{component:"li",...e,key:r.verifiedId},y(M,{direction:"row",spacing:1.5,alignItems:"center",children:[i(S,{src:r.logoUrl??void 0,alt:(P=r.name[0])==null?void 0:P.toUpperCase(),sx:{width:32,height:32,bgcolor:"primary.main"},slotProps:{img:{onError:L=>{L.currentTarget.style.display="none"}}},children:(k=r.name[0])==null?void 0:k.toUpperCase()}),i(T,{sx:{textAlign:"left"},children:r.name})]}))},renderInput:e=>i(H,{...e,label:i(F,{children:"Insurer"}),helperText:"The company that provides your health insurance",placeholder:"Search...",size:"small",InputLabelProps:{shrink:!0},InputProps:{...e.InputProps,"data-mask-me":!0,endAdornment:e.InputProps.endAdornment}})}),i(V,{fullWidth:!0,label:i(F,{children:"Member ID"}),placeholder:"Enter member ID",size:"small",disabled:a.isDisabled,value:n.memberId,onChange:e=>o({memberId:e.target.value}),helperText:"From your health insurance ID card",InputProps:{"data-mask-me":!0,endAdornment:n.memberId?i(U,{position:"end",children:i(z,{tabIndex:-1,"aria-label":"clear member id",edge:"end",size:"small",disabled:a.isDisabled,onClick:()=>o({memberId:""}),children:i(w,{fontSize:"small"})})}):null}})]})}export{W as HealthInsuranceInputField};

package/dist/components/form/NewOneClickForm/react/ui/fields/shared.d.ts

@@ -1,18 +1,20 @@
 import { FormField } from '../../../core/form';
+import { OneClickFormOptions } from '../form.context';
 /**
  * Makes attributes for a field.
  * @param field The field to make attributes for.
  * @returns The attributes for the field.
  */
-export declare const makeAttributes: ({ userPrivacyEnabled, field, fieldKey, }: {
+export declare const makeAttributes: ({ userPrivacyEnabled, field, fieldKey, options, }: {
     userPrivacyEnabled?: boolean;
     field: FormField | undefined;
     fieldKey: string;
+    options: OneClickFormOptions;
 }) => {
     role: string;
     'aria-label': string | undefined;
     'data-testid': string;
-    'data-verified-sdk-field-value': undefined;
+    'data-verified-sdk-field-value': ReturnType<typeof getFieldValue>;
 };
 /**
  * Returns the autocomplete attribute value based on the type of the field.
@@ -25,4 +27,34 @@ export declare function getAutoCompleteAttributeValue(key: string): "off" | "tel
  * @param field The field to get the value from.
  * @returns The value or display value of the field.
  */
-export declare const getFieldValue: (field: FormField) => any;
+export declare const getFieldValue: (field: FormField, options: OneClickFormOptions) => string | {
+    memberId: string;
+    payer: {
+        name: string;
+        verifiedId: string;
+        logoUrl?: string | null | undefined;
+    };
+    id?: number | undefined;
+} | {
+    firstName?: string | undefined;
+    lastName?: string | undefined;
+    middleName?: string | undefined;
+} | {
+    line1?: string | undefined;
+    line2?: string | undefined;
+    city?: string | undefined;
+    state?: string | undefined;
+    country?: string | undefined;
+    zipCode?: string | undefined;
+} | {
+    documentNumber?: string | undefined;
+    issuanceState?: string | undefined;
+    issuanceDate?: string | undefined;
+    expirationDate?: string | undefined;
+    address?: undefined;
+} | null | undefined;
+/**
+ * Get the display value for a field, applying feature-flag-driven
+ * transformations (e.g. year redaction for DOB).
+ */
+export declare const getFieldDisplayValue: (field: FormField, options: OneClickFormOptions) => string | null;

package/dist/components/form/NewOneClickForm/react/ui/fields/shared.mjs

@@ -1 +1 @@
-"use strict";import{credentialKeys as a}from"../../../core/fields/index.mjs";import{fieldInputTypes as d}from"../../../core/fields/constants.mjs";const r=({userPrivacyEnabled:e,field:t,fieldKey:s})=>{const i={role:"region","aria-label":t?.schema.characteristics.label,"data-testid":t?.schema.characteristics.inputType===d.composite?`data-field-composite-${s}`:`data-field-atomic-${s}`,"data-verified-sdk-field-value":void 0};return e||(i["data-verified-sdk-field-value"]=t?l(t):void 0),i};function c(e){return e===a.firstName?"given-name":e===a.lastName?"family-name":e===a.phone?"tel":e===a.address?"street-address address-level2 address-level1 postal-code":e===a.line2?"address-line2":"off"}const l=e=>{if(!(typeof e.value=="object"&&e.schema.key!==a.address&&e.schema.key!==a.healthInsurance))return e.schema.key===a.state||e.schema.key===a.issuanceState||e.schema.key===a.birthDate||e.schema.key===a.expirationDate||e.schema.key===a.issuanceDate?e.value:e.displayValue};export{c as getAutoCompleteAttributeValue,l as getFieldValue,r as makeAttributes};
+"use strict";import{credentialKeys as a}from"../../../core/fields/index.mjs";import{fieldInputTypes as o}from"../../../core/fields/constants.mjs";const c=({userPrivacyEnabled:e,field:t,fieldKey:i,options:l})=>{const s={role:"region","aria-label":t?.schema.characteristics.label,"data-testid":t?.schema.characteristics.inputType===o.composite?`data-field-composite-${i}`:`data-field-atomic-${i}`,"data-verified-sdk-field-value":void 0};return e||(s["data-verified-sdk-field-value"]=t?d(t,l):void 0),s};function n(e){return e===a.firstName?"given-name":e===a.lastName?"family-name":e===a.phone?"tel":e===a.address?"street-address address-level2 address-level1 postal-code":e===a.line2?"address-line2":"off"}const d=(e,t)=>{if(!(typeof e.value=="object"&&e.schema.key!==a.address&&e.schema.key!==a.healthInsurance))return e.schema.key===a.state||e.schema.key===a.issuanceState||e.schema.key===a.birthDate||e.schema.key===a.expirationDate||e.schema.key===a.issuanceDate?e.value:r(e,t)},r=(e,t)=>{var i,l;const s=e.displayValue;return(l=(i=t.features.field)==null?void 0:i.dob)!=null&&l.redactYear&&e.schema.key===a.birthDate&&typeof s=="string"?s.replace(/\/\d{4}$/,"/\u2022\u2022\u2022\u2022"):s};export{n as getAutoCompleteAttributeValue,r as getFieldDisplayValue,d as getFieldValue,c as makeAttributes};

package/dist/components/form/NewOneClickForm/react/ui/fields/style.mjs

@@ -1 +1 @@
-"use strict";import{Stack as l,Typography as d}from"@mui/material";import{useFormField as o}from"../../core/field.hook.mjs";import{makeAttributes as h}from"./shared.mjs";import{useOneClickForm as x}from"../form.context.mjs";import{jsx as t,jsxs as c}from"react/jsx-runtime";function f({label:e,sx:i}){return t(l,{sx:{flexShrink:0,alignItems:"flex-start",justifyContent:"flex-start",width:100,mt:.7,...i},children:t(d,{component:"span",variant:"subtitle2",textTransform:"uppercase",color:"text.primary",sx:{position:"relative",fontSize:12,fontWeight:700,textAlign:"left",alignSelf:"flex-start",letterSpacing:1},children:e})})}function a({fieldKey:e,label:i,sx:n}){const{fieldProps:r}=o({key:e}),s=i??r.label;return t(f,{label:s,sx:n})}function b({fieldKey:e}){const{field:i}=o({key:e});return i?t(d,{"data-mask-me":!0,variant:"body1",sx:{fontSize:20,fontWeight:300,wordBreak:"break-word",textAlign:"left"},children:i?.displayValue||(i!=null&&i.isRequired?null:"-")}):null}function u({description:e}){return t(d,{variant:"body1",color:"text.secondary",sx:{fontSize:12,fontWeight:400,wordBreak:"break-word",mt:.5,mr:1.75,textAlign:"left"},children:e})}function p({fieldKey:e,description:i}){const{fieldProps:n}=o({key:e}),r=i??n.description;return r?t(u,{description:r}):null}function m({fieldKey:e,children:i,spacing:n}){const r=x(),{field:s}=o({key:e}),y=h({userPrivacyEnabled:r.options.features.enableUserPrivacy,field:s,fieldKey:e});return t(l,{component:"section",...y,spacing:n,style:{width:"100%"},children:i})}function g({fieldKey:e,children:i}){return t(m,{fieldKey:e,children:c(l,{direction:"row",width:"100%",children:[t(a,{fieldKey:e}),t(l,{direction:"column",children:i})]})})}function k({fieldKey:e,description:i}){return c(l,{children:[t(a,{fieldKey:e,sx:{width:"100%",mt:0}}),t(p,{fieldKey:e,description:i})]})}function F({children:e,spacing:i,sx:n}){return t(l,{spacing:i,sx:{pl:2,borderLeftWidth:1,borderLeftColor:"neutral.main",borderLeftStyle:"solid",...n},children:e})}export{p as FieldDescription,u as FieldDescriptionBase,a as FieldLabel,f as FieldLabelBase,g as FieldRow,m as FieldRowContainer,F as FieldSectionContent,k as FieldSectionTitle,b as FieldValue};
+"use strict";import{Stack as l,Typography as a}from"@mui/material";import{useFormField as o}from"../../core/field.hook.mjs";import{makeAttributes as x,getFieldDisplayValue as b}from"./shared.mjs";import{useOneClickForm as c}from"../form.context.mjs";import{jsx as t,jsxs as f}from"react/jsx-runtime";function p({label:e,sx:i}){return t(l,{sx:{flexShrink:0,alignItems:"flex-start",justifyContent:"flex-start",width:100,mt:.7,...i},children:t(a,{component:"span",variant:"subtitle2",textTransform:"uppercase",color:"text.primary",sx:{position:"relative",fontSize:12,fontWeight:700,textAlign:"left",alignSelf:"flex-start",letterSpacing:1},children:e})})}function d({fieldKey:e,label:i,sx:n}){const{fieldProps:r}=o({key:e}),s=i??r.label;return t(p,{label:s,sx:n})}function g({fieldKey:e}){const{field:i}=o({key:e}),{options:n}=c();if(!i)return null;const r=b(i,n);return t(a,{"data-mask-me":!0,variant:"body1",sx:{fontSize:20,fontWeight:300,wordBreak:"break-word",textAlign:"left"},children:r||(i!=null&&i.isRequired?null:"-")})}function u({description:e}){return t(a,{variant:"body1",color:"text.secondary",sx:{fontSize:12,fontWeight:400,wordBreak:"break-word",mt:.5,mr:1.75,textAlign:"left"},children:e})}function y({fieldKey:e,description:i}){const{fieldProps:n}=o({key:e}),r=i??n.description;return r?t(u,{description:r}):null}function m({fieldKey:e,children:i,spacing:n}){const r=c(),{field:s}=o({key:e}),h=x({userPrivacyEnabled:r.options.features.enableUserPrivacy,field:s,fieldKey:e,options:r.options});return t(l,{component:"section",...h,spacing:n,style:{width:"100%"},children:i})}function k({fieldKey:e,children:i}){return t(m,{fieldKey:e,children:f(l,{direction:"row",width:"100%",children:[t(d,{fieldKey:e}),t(l,{direction:"column",children:i})]})})}function F({fieldKey:e,description:i}){return f(l,{children:[t(d,{fieldKey:e,sx:{width:"100%",mt:0}}),t(y,{fieldKey:e,description:i})]})}function w({children:e,spacing:i,sx:n}){return t(l,{spacing:i,sx:{pl:2,borderLeftWidth:1,borderLeftColor:"neutral.main",borderLeftStyle:"solid",...n},children:e})}export{y as FieldDescription,u as FieldDescriptionBase,d as FieldLabel,p as FieldLabelBase,k as FieldRow,m as FieldRowContainer,w as FieldSectionContent,F as FieldSectionTitle,g as FieldValue};

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

@@ -8,6 +8,12 @@ type OneClickOptionFeatures = {
     editMode?: {
         hide?: boolean;
     };
+    field?: {
+        dob?: {
+            /** When true, masks the year portion of the DOB field as ••••. */
+            redactYear?: boolean;
+        };
+    };
 };
 type OneClickOptionServicePaths = {
     googlePlacesAutocompletePlaces?: (input: string, signal?: AbortSignal) => Promise<unknown>;

package/package.json

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