@verifiedinc-public/shared-ui-elements 12.2.0 → 12.2.1

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

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

package/package.json

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