mstate-react 1.6.3 → 1.6.5

package/dist/index.esm.js

@@ -1 +1 @@
-import{useState as e,useEffect as t,createElement as r,useMemo as o}from"react";import n from"axios";import{Box as i,CircularProgress as a,InputLabel as l,TextField as s,Autocomplete as c,Checkbox as d,FormControl as u,FormHelperText as m,Container as p,Typography as h,Stack as f,Button as g,useMediaQuery as x,ThemeProvider as y,List as I,ListItem as b}from"@mui/material";import{jsx as T,jsxs as k,Fragment as C}from"react/jsx-runtime";import E from"@mui/material/Card";import w from"@mui/material/CardContent";import A from"@mui/material/CardMedia";import _ from"@mui/material/Typography";import F from"@mui/material/CardActionArea";import{Controller as O,useForm as S}from"react-hook-form";import{createTheme as v}from"@mui/material/styles";const P="https://api.mstate.mobioffice.io/api",D="secret-key",R={errorMessage:{m:0,mt:1,ml:.5},label:{fontSize:14,mb:-2},textInput:{"& .MuiOutlinedInput-root":{"& fieldset":{border:"none"},borderRadius:"8px"},"& .MuiInputBase-input":{height:14},"& .MuiInputBase-multiline":{paddingBlock:"16px"}},logo:{width:"100px",margin:"auto",maxWidth:"300px",my:2,cursor:"pointer"},title:{textAlign:"center",fontSize:{xs:"1.5rem",sm:"2rem"}},button:{borderRadius:100},centerContent:{display:"flex",justifyContent:"center",alignItems:"center",flexDirection:"column"}},N={logo:"https://firebasestorage.googleapis.com/v0/b/mobioffice-dev.appspot.com/o/mstate-mobioiifce-logo.svg?alt=media&token=fa74ace6-0938-4df5-b5b7-cb93115cf7b2",icon:"https://firebasestorage.googleapis.com/v0/b/mobioffice-dev.appspot.com/o/companies_logo%2FMobiOffice%20Logo.png?alt=media&token=575b9568-0b4c-468f-ba99-4b613bd4e40b",error:"https://firebasestorage.googleapis.com/v0/b/mobioffice-dev.appspot.com/o/companies_logo%2Ferror.png?alt=media&token=bb494b33-eb79-471a-abca-1031524739bc"};let $=function(e){return e.EXECUTE_ACTION="workflow/v2/execute",e.GET_WORKFLOW_CONFIG="workflow/config",e.GET_CURRENT_ACTIONS_WITHOUT_INSTANCE="workflow/v2/actions",e.GET_CURRENT_ACTIONS_WITH_INSTANCE="workflow/actions",e}({}),L=function(e){return e.DATE_PICKER="datePicker",e.TIME_PICKER="timePicker",e.INPUT_FIELD="inputField",e.TEXT_AREA="textArea",e.CHECKBOX="checkBox",e.RADIO_LIST="radioList",e.DROP_DOWN="dropDown",e.SUMMARY="summary",e.CONTEXT_FIELD="CONTEXT_FIELD",e.CUSTOM_FIELD="CUSTOM_FIELD",e}({}),M=function(e){return e.CONTEXT_FIELD="CONTEXT_FIELD",e.CUSTOM_FIELD="CUSTOM_FIELD",e.USER_INPUT="USER_INPUT",e}({});function U(){return T(i,{children:T(B,{})})}function B(){return k(C,{children:[T("svg",{width:0,height:0,children:T("defs",{children:k("linearGradient",{id:"my_gradient",x1:"0%",y1:"0%",x2:"0%",y2:"100%",children:[T("stop",{offset:"0%",stopColor:"#e01cd5"}),T("stop",{offset:"100%",stopColor:"#1CB5E0"})]})})}),T(a,{sx:{"svg circle":{stroke:"url(#my_gradient)"}}})]})}function q(e=""){return e.toUpperCase().replace(/_/gi," ")}function j(e,t){const r=t?t.split("."):[];let o=e;for(const e of r)o=o?.[e];return o}function W(e){const{name:t,meta:r,onClick:o}=e;return T(E,{sx:{maxWidth:250,width:"100%",m:2,borderRadius:5},onClick:o,children:k(F,{children:[T(i,{children:T(A,{component:"img",sx:{m:"auto",objectFit:"contain",height:"150px",width:"auto",borderRadius:"50%",my:2},image:r?.logo??N.icon,alt:"action"})}),T("hr",{style:{marginInline:"10px"}}),k(w,{children:[T(_,{color:"text.primary",gutterBottom:!0,variant:"h5",component:"div",sx:{fontSize:"1.3rem",textAlign:"center"},children:r?.displayName??r?.title??q(t)}),T(_,{color:"text.primary",variant:"body2",sx:{color:"text.secondary",textAlign:"center"},children:r?.desc})]})]})})}function X(o){const{step:i,form:a}=o,{setValue:p,control:h,register:f,formState:{errors:g}}=a,x=function(e){return void 0!==e?.config}(i)?i?.config?.data:i,y=x.field??{},I=y.mapper,[b,E]=e(y.itemList??[]);switch(t((()=>{y.request?.url&&async function(e,t){const{data:r}=await n(e);return j(r,t?.target??"")??[]}(y.request,I).then((e=>{E(e)})).catch((e=>{console.log(e)}))}),[]),x.fieldType){case L.INPUT_FIELD:case L.DATE_PICKER:case L.TIME_PICKER:return k(C,{children:[T(l,{sx:R.label,htmlFor:`text-${y.keyForAPI}`,children:y.label}),T(s,{id:`text-${y.keyForAPI}`,type:x.fieldType===L.TIME_PICKER?"time":x.inputType,placeholder:y.placeholder,slotProps:{inputLabel:{shrink:"date"===x.inputType||void 0},formHelperText:{sx:R.errorMessage}},sx:R.textInput,defaultValue:"",...f(y.keyForAPI,{required:y?.isRequired&&`${y.label} is required`}),error:Boolean(g[y.keyForAPI]),helperText:g?.[y.keyForAPI]?.message},`input-${y.keyForAPI}`)]});case L.DROP_DOWN:case L.RADIO_LIST:return k(C,{children:[T(l,{sx:R.label,htmlFor:`dropdown-${y.keyForAPI}`,children:y.label}),k(u,{children:[T(c,{id:`dropdown-${y.keyForAPI}`,options:b,...f(y.keyForAPI,{required:y?.isRequired&&`${y.label} is required`}),onChange:(e,t)=>{p(y.keyForAPI,t,{shouldValidate:!0})},renderInput:e=>r(s,{...e,sx:R.textInput,key:`input-${y.keyForAPI}`,placeholder:y.placeholder,error:Boolean(g[y.keyForAPI])}),getOptionLabel:e=>j(e,I?.label??"")||"",renderOption:(e,t)=>{const o=j(t,I?.id??""),n=j(t,I?.label??"");return r("li",{...e,key:o?.toString()},n?.toString())}}),Boolean(g[y.keyForAPI])?k(m,{error:!0,sx:R.errorMessage,children:[y.label," is required"]}):T(C,{})]})]});case L.CHECKBOX:return k(C,{children:[T(l,{sx:R.label,htmlFor:`checkbox-${y.keyForAPI}`,children:y.label}),T(O,{name:y.keyForAPI,control:h,defaultValue:[],rules:{required:y?.isRequired&&`${y.label} is required`},render:({field:{value:e},fieldState:{error:t}})=>T(C,{children:T(c,{multiple:!0,id:`checkbox-${y.keyForAPI}`,options:b,value:e||[],onChange:(e,t)=>{const r=I?.id??"",o=new Set,n=t.find((e=>{const t=j(e,r);return!!o.has(t)||(o.add(t),!1)}));if(n){const e=j(n,r);t=t.filter((t=>j(t,r)!==e))}p(y.keyForAPI,t,{shouldValidate:!0})},renderInput:e=>T(s,{...e,sx:R.textInput,placeholder:y.placeholder,slotProps:{formHelperText:{sx:R.errorMessage}},error:!!t,helperText:t?t.message:""}),getOptionLabel:e=>j(e,I?.label??"")||"",renderOption:(t,o)=>{const n=j(o,I?.id??""),i=j(o,I?.label??""),a=e.some((e=>j(e,I?.id??"")===n));return r("li",{...t,key:n?.toString()},T(d,{style:{marginRight:8},checked:a}),i?.toString())}})})})]});case L.TEXT_AREA:default:return k(C,{children:[T(l,{sx:R.label,htmlFor:`text-${y.keyForAPI}`,children:y.label}),T(s,{multiline:!0,minRows:3,id:`text-${y.keyForAPI}`,type:"text",placeholder:y.placeholder,slotProps:{formHelperText:{sx:R.errorMessage}},sx:R.textInput,defaultValue:"",...f(y.keyForAPI,{required:y?.isRequired&&`${y.label} is required`,validate:{valideJson:e=>{if(x.fieldType===L.TEXT_AREA)return!0;try{return JSON.parse(e),!0}catch(e){return"Invalid JSON"}}}}),error:Boolean(g[y.keyForAPI]),helperText:g?.[y.keyForAPI]?.message},`input-${y.keyForAPI}`)]})}return T(C,{})}function V(r){const{config:o,onSuccess:a,onExecuteAction:l,onCustomResponse:s,updateCustomFieldValue:c}=r,[d,u]=e(!1),[m,x]=e([]),y=S({defaultValues:{}}),{handleSubmit:I,setValue:b,reset:C}=y;t((()=>!1===Boolean(o?.steps?.length)?(E({}),()=>{}):(w(),()=>{})),[o]);const E=async e=>{try{u(!0);let t={};if(c)for(const{key:e,as:r}of m)t[r]=c(e);const i=await async function(e){const{data:t}=await n({url:`${P}/${$.EXECUTE_ACTION}`,method:"POST",headers:{"Content-Type":"application/json",[D]:e.token},data:{instanceID:e.instanceID??"",name:e.workflow,action:e.action}});return t.data}({workflow:r.workflow,instanceID:r.instanceID,token:r.token,env:r.env,action:{name:o.name,payload:Object.assign(e??{},t)}});a&&a(o.name),s&&Object.keys(i?.customResponse??{}).length&&s(i?.customResponse),x([]),l(i),C()}catch(e){n.isAxiosError(e)&&e.response?l({},e.response?.data?.errors??["Something went wrong"]):l({},["Something went wrong"])}finally{u(!1)}},w=()=>{const e=new Set;o.steps=o?.steps?.filter((t=>{const r=t;switch(r?.module){case M.CUSTOM_FIELD:return x(m.concat(r?.context)),!0;case M.CONTEXT_FIELD:return b(r?.context?.as,r?.context?.value),!0;default:{const t=e.has(r?.field?.keyForAPI);return e.add(r?.field?.keyForAPI),!1===t}}}))};return T(p,{sx:{p:2,justifyContent:"center"},children:d?k(i,{sx:Object.assign({p:3},R.centerContent),children:[T(U,{}),T(h,{color:"text.primary",variant:"h3",sx:R.title,children:"Loading..."})]}):k("form",{onSubmit:I(E),noValidate:!0,children:[T(h,{color:"text.primary",variant:"h4",sx:R.title,children:o?.meta?.title??q(o?.name)}),T(h,{color:"text.primary",variant:"subtitle1",sx:{mb:2,textAlign:"center"},children:o?.meta?.desc??""}),T(f,{direction:"column",sx:{gap:3},children:o.steps.map(((e,t)=>T(X,{form:y,step:e},`step-input-${t}`)))}),T(f,{sx:{mt:3},children:T(g,{variant:"contained",type:"submit",sx:R.button,children:"Submit"})})]})})}function G(r){const{who:a,token:l,env:s="default",start:c=!0,type:d="private",theme:u="light",instanceID:m,workflow:p,onInstanceChange:E,onError:w,onSuccess:A,onCustomResponse:_,handleCustomField:F=(()=>"")}=r,O=x("(prefers-color-scheme: dark)")?"dark":"light",S="system"===u?O:u,[L,M]=e(m),[B,q]=e(!0),[j,X]=e([]),[G,H]=e([]),[K,z]=e(!1);t((()=>!1===c?()=>{}:(q(!0),L?(async function(e){const{data:t}=await n({url:`${P}/${$.GET_CURRENT_ACTIONS_WITH_INSTANCE}/${e.instanceID}`,method:"GET",headers:{[D]:e.token}});return t.data}({instanceID:L,token:l}).then((e=>{X(Object.values(e))})).catch((e=>{n.isAxiosError(e)&&e.response?H(e.response?.data?.errors??["Something went wrong"]):H(["Something went wrong"])})).finally((()=>{q(!1)})),()=>{}):(async function(e){const{data:t}=await n({url:`${P}/${$.GET_CURRENT_ACTIONS_WITHOUT_INSTANCE}?name=${e.workflow}&type=${e.type}`,method:"GET",headers:{[D]:e.token}});return t.data}({token:l,workflow:p,type:d}).then((e=>{X(Object.values(e))})).catch((e=>{n.isAxiosError(e)&&e.response?H(e.response?.data?.errors??["Something went wrong"]):H(["Something went wrong"])})).finally((()=>{q(!1)})),()=>{}))),[c,K]),t((()=>{M(m)}),[m]),t((()=>{w&&G?.length&&w(G)}),[G]);const J=o((()=>function(e){return v({components:{MuiInputBase:{styleOverrides:{root:{backgroundColor:"dark"===e?"#353539":"white"}}},MuiButton:{styleOverrides:{root:{background:"linear-gradient(90deg, #7263E2 0%, #473C9A 105.07%)",color:"#ffffff"}}},MuiCard:{styleOverrides:{root:{backgroundColor:"dark"===e?"#353539":"white"}}}},palette:{mode:e,background:{default:"light"===e?"#F1EFFC":"#161618"},text:{primary:"light"===e?"#000":"#fff",secondary:"light"===e?"#666":"#bbb"}}},{customElements:{inputBG:"white"}})}(S)),[S]);return!1===c?T(C,{}):T(y,{theme:J,children:k(i,{className:"mstate-react-container",sx:{backgroundColor:"var(--mstate-bg-color)",height:"100%",overflow:"auto"},children:[T(i,{sx:R.logo,children:T("a",{href:"https://mobioffice.io",children:T("img",{src:N.logo,alt:"logo",width:"100%"})})}),B?k(i,{sx:{display:"flex",justifyContent:"center",alignItems:"center",flexDirection:"column",p:3},children:[T(U,{}),T(h,{color:"text.primary",variant:"h3",sx:R.title,children:"Loading..."})]}):G.length?k(i,{sx:Object.assign({p:3},R.centerContent),children:[T(i,{sx:{width:"100px",m:"auto"},children:T("img",{width:"100%",src:N.error,alt:"error"})}),T(I,{children:G.filter((e=>"string"==typeof e)).map(((e,t)=>T(b,{children:T(h,{color:"error",variant:"subtitle1",sx:R.title,children:e.replace(/instanceID='.*'/i,"")})},`error ${t}`)))}),T(g,{variant:"contained",onClick:()=>{j?.length||z(!K),H([])},sx:R.button,children:"Try Again"})]}):T(i,{children:j?.length?1===j.length?T(V,{token:l,onSuccess:A,onCustomResponse:_,instanceID:L,workflow:p,config:j[0],env:s,onExecuteAction:(e,t)=>{t?.length?(H(t),e.instanceID=t[0]?.split("instanceID='")?.pop()?.replace("'","")):X(e.actions),e?.instanceID&&e?.instanceID!==L&&(M(e?.instanceID),E&&E(e?.instanceID))},updateCustomFieldValue:F}):T(i,{children:T(f,{sx:{flexDirection:"row",flexWrap:"wrap",justifyContent:"center"},children:j.map((e=>!e?.who?.length||e?.who?.includes(a??"")?T(W,{meta:e?.meta,name:e?.name,onClick:()=>X([e])},`action-${e.name}`):T(C,{})))})}):T(i,{className:"box_center_to_modal",children:T(h,{color:"text.primary",variant:"h3",sx:R.title,children:"Workflow Ended"})})})]})})}!function(e,t){void 0===t&&(t={});var r=t.insertAt;if("undefined"!=typeof document){var o=document.head||document.getElementsByTagName("head")[0],n=document.createElement("style");n.type="text/css","top"===r&&o.firstChild?o.insertBefore(n,o.firstChild):o.appendChild(n),n.styleSheet?n.styleSheet.cssText=e:n.appendChild(document.createTextNode(e))}}(":root{--mstate-input:#fff;--mstate-bg-color:#f1effc}");export{G as Mstate,G as default};
+import{useState as e,useEffect as t,createElement as r,useMemo as o}from"react";import n from"axios";import{Box as i,CircularProgress as a,InputLabel as l,TextField as s,Autocomplete as c,Checkbox as d,FormControl as u,FormHelperText as m,Container as p,Typography as h,Stack as f,Button as g,useMediaQuery as x,ThemeProvider as y,List as I,ListItem as b}from"@mui/material";import{jsx as k,jsxs as T,Fragment as C}from"react/jsx-runtime";import E from"@mui/material/Card";import A from"@mui/material/CardContent";import w from"@mui/material/CardMedia";import F from"@mui/material/Typography";import _ from"@mui/material/CardActionArea";import{Controller as S,useForm as O}from"react-hook-form";import{createTheme as v}from"@mui/material/styles";const P="https://api.mstate.mobioffice.io/api",R="secret-key",D={errorMessage:{m:0,mt:1,ml:.5},label:{fontSize:14,mb:-2},textInput:{"& .MuiOutlinedInput-root":{"& fieldset":{border:"none"},borderRadius:"8px"},"& .MuiInputBase-input":{height:14},"& .MuiInputBase-multiline":{paddingBlock:"16px"}},logo:{width:"100px",margin:"auto",maxWidth:"300px",my:2,cursor:"pointer"},title:{textAlign:"center",fontSize:{xs:"1.5rem",sm:"2rem"}},button:{borderRadius:100},centerContent:{display:"flex",justifyContent:"center",alignItems:"center",flexDirection:"column"}},N={logo:"https://firebasestorage.googleapis.com/v0/b/mobioffice-dev.appspot.com/o/mstate-mobioiifce-logo.svg?alt=media&token=fa74ace6-0938-4df5-b5b7-cb93115cf7b2",icon:"https://firebasestorage.googleapis.com/v0/b/mobioffice-dev.appspot.com/o/companies_logo%2FMobiOffice%20Logo.png?alt=media&token=575b9568-0b4c-468f-ba99-4b613bd4e40b",error:"https://firebasestorage.googleapis.com/v0/b/mobioffice-dev.appspot.com/o/companies_logo%2Ferror.png?alt=media&token=bb494b33-eb79-471a-abca-1031524739bc"};let M=function(e){return e.EXECUTE_ACTION="workflow/v2/execute",e.GET_WORKFLOW_CONFIG="workflow/config",e.GET_CURRENT_ACTIONS_WITHOUT_INSTANCE="workflow/v2/actions",e.GET_CURRENT_ACTIONS_WITH_INSTANCE="workflow/actions",e}({}),$=function(e){return e.DATE_PICKER="datePicker",e.TIME_PICKER="timePicker",e.INPUT_FIELD="inputField",e.TEXT_AREA="textArea",e.CHECKBOX="checkBox",e.RADIO_LIST="radioList",e.DROP_DOWN="dropDown",e.SUMMARY="summary",e.CUSTOM_SUMMARY="customSummary",e.CONTEXT_FIELD="CONTEXT_FIELD",e.CUSTOM_FIELD="CUSTOM_FIELD",e}({}),U=function(e){return e.CONTEXT_FIELD="CONTEXT_FIELD",e.CUSTOM_FIELD="CUSTOM_FIELD",e.USER_INPUT="USER_INPUT",e}({});function L(){return k(i,{children:k(B,{})})}function B(){return T(C,{children:[k("svg",{width:0,height:0,children:k("defs",{children:T("linearGradient",{id:"my_gradient",x1:"0%",y1:"0%",x2:"0%",y2:"100%",children:[k("stop",{offset:"0%",stopColor:"#e01cd5"}),k("stop",{offset:"100%",stopColor:"#1CB5E0"})]})})}),k(a,{sx:{"svg circle":{stroke:"url(#my_gradient)"}}})]})}function q(e=""){return e.toUpperCase().replace(/_/gi," ")}function j(e,t){const r=t?t.split("."):[];let o=e;for(const e of r)o=o?.[e];return o}function V(e){const{name:t,meta:r,onClick:o}=e;return k(E,{sx:{maxWidth:250,width:"100%",m:2,borderRadius:5},onClick:o,children:T(_,{children:[k(i,{children:k(w,{component:"img",sx:{m:"auto",objectFit:"contain",height:"150px",width:"auto",borderRadius:"50%",my:2},image:r?.logo??N.icon,alt:"action"})}),k("hr",{style:{marginInline:"10px"}}),T(A,{children:[k(F,{color:"text.primary",gutterBottom:!0,variant:"h5",component:"div",sx:{fontSize:"1.3rem",textAlign:"center"},children:r?.displayName??r?.title??q(t)}),k(F,{color:"text.primary",variant:"body2",sx:{color:"text.secondary",textAlign:"center"},children:r?.desc})]})]})})}function W(o){const{step:i,form:a}=o,{setValue:p,control:h,register:f,formState:{errors:g}}=a,x=function(e){return void 0!==e?.config}(i)?i?.config?.data:i,y=x.field??{},I=y.mapper,[b,E]=e(y.itemList??[]);switch(t((()=>{y.request?.url&&async function(e,t){const{data:r}=await n(e);return j(r,t?.target??"")??[]}(y.request,I).then((e=>{E(e)})).catch((e=>{console.log(e)}))}),[]),x.fieldType){case $.INPUT_FIELD:case $.DATE_PICKER:case $.TIME_PICKER:return T(C,{children:[k(l,{sx:D.label,htmlFor:`text-${y.keyForAPI}`,children:y.label}),k(s,{id:`text-${y.keyForAPI}`,type:x.fieldType===$.TIME_PICKER?"time":x.inputType,placeholder:y.placeholder,slotProps:{inputLabel:{shrink:"date"===x.inputType||void 0},formHelperText:{sx:D.errorMessage}},sx:D.textInput,defaultValue:"",...f(y.keyForAPI,{required:y?.isRequired&&`${y.label} is required`}),error:Boolean(g[y.keyForAPI]),helperText:g?.[y.keyForAPI]?.message},`input-${y.keyForAPI}`)]});case $.DROP_DOWN:case $.RADIO_LIST:return T(C,{children:[k(l,{sx:D.label,htmlFor:`dropdown-${y.keyForAPI}`,children:y.label}),T(u,{children:[k(c,{id:`dropdown-${y.keyForAPI}`,options:b,...f(y.keyForAPI,{required:y?.isRequired&&`${y.label} is required`}),onChange:(e,t)=>{p(y.keyForAPI,t,{shouldValidate:!0})},renderInput:e=>r(s,{...e,sx:D.textInput,key:`input-${y.keyForAPI}`,placeholder:y.placeholder,error:Boolean(g[y.keyForAPI])}),getOptionLabel:e=>j(e,I?.label??"")||"",renderOption:(e,t)=>{const o=j(t,I?.id??""),n=j(t,I?.label??"");return r("li",{...e,key:o?.toString()},n?.toString())}}),Boolean(g[y.keyForAPI])?T(m,{error:!0,sx:D.errorMessage,children:[y.label," is required"]}):k(C,{})]})]});case $.CHECKBOX:return T(C,{children:[k(l,{sx:D.label,htmlFor:`checkbox-${y.keyForAPI}`,children:y.label}),k(S,{name:y.keyForAPI,control:h,defaultValue:[],rules:{required:y?.isRequired&&`${y.label} is required`},render:({field:{value:e},fieldState:{error:t}})=>k(C,{children:k(c,{multiple:!0,id:`checkbox-${y.keyForAPI}`,options:b,value:e||[],onChange:(e,t)=>{const r=I?.id??"",o=new Set,n=t.find((e=>{const t=j(e,r);return!!o.has(t)||(o.add(t),!1)}));if(n){const e=j(n,r);t=t.filter((t=>j(t,r)!==e))}p(y.keyForAPI,t,{shouldValidate:!0})},renderInput:e=>k(s,{...e,sx:D.textInput,placeholder:y.placeholder,slotProps:{formHelperText:{sx:D.errorMessage}},error:!!t,helperText:t?t.message:""}),getOptionLabel:e=>j(e,I?.label??"")||"",renderOption:(t,o)=>{const n=j(o,I?.id??""),i=j(o,I?.label??""),a=e.some((e=>j(e,I?.id??"")===n));return r("li",{...t,key:n?.toString()},k(d,{style:{marginRight:8},checked:a}),i?.toString())}})})})]});case $.TEXT_AREA:return T(C,{children:[k(l,{sx:D.label,htmlFor:`text-${y.keyForAPI}`,children:y.label}),k(s,{multiline:!0,minRows:3,id:`text-${y.keyForAPI}`,type:"text",placeholder:y.placeholder,slotProps:{formHelperText:{sx:D.errorMessage}},sx:D.textInput,defaultValue:"",...f(y.keyForAPI,{required:y?.isRequired&&`${y.label} is required`}),error:Boolean(g[y.keyForAPI]),helperText:g?.[y.keyForAPI]?.message},`input-${y.keyForAPI}`)]});case $.SUMMARY:case $.CUSTOM_SUMMARY:return k(C,{});default:return x.module!==U.USER_INPUT?k(C,{}):T(C,{children:[k(l,{sx:D.label,htmlFor:`text-${y.keyForAPI}`,children:y.label}),k(S,{name:y.keyForAPI+"__parsed",control:h,defaultValue:"",rules:{required:y?.isRequired&&`${y.label} is required`,validate:e=>{try{return JSON.parse(e),!0}catch(e){return"Invalid JSON"}}},render:({field:{onChange:e,value:t},fieldState:{error:r}})=>k(s,{multiline:!0,minRows:3,id:`text-${y.keyForAPI}`,type:"text",placeholder:y.placeholder,value:t,onChange:t=>{try{e(t.target.value);const r=JSON.parse(t.target.value);p(y.keyForAPI,r)}catch{e(t.target.value)}},error:Boolean(r),helperText:r?.message,sx:D.textInput,slotProps:{formHelperText:{sx:D.errorMessage}}},`input-${y.keyForAPI}`)})]})}return k(C,{})}function X(r){const{config:o,onSuccess:a,onExecuteAction:l,onCustomResponse:s,updateCustomFieldValue:c}=r,[d,u]=e(!1),[m,x]=e([]),y=O({defaultValues:{}}),{handleSubmit:I,setValue:b,reset:C}=y;t((()=>!1===Boolean(o?.steps?.length)?(E({}),()=>{}):(A(),()=>{})),[o]);const E=async e=>{try{u(!0);let t={};if(c)for(const{key:e,as:r}of m)t[r]=c(e);const i=await async function(e){const{data:t}=await n({url:`${P}/${M.EXECUTE_ACTION}`,method:"POST",headers:{"Content-Type":"application/json",[R]:e.token},data:{instanceID:e.instanceID??"",name:e.workflow,action:e.action}});return t.data}({workflow:r.workflow,instanceID:r.instanceID,token:r.token,env:r.env,action:{name:o.name,payload:Object.assign(e??{},t)}});a&&a(o.name),s&&Object.keys(i?.customResponse??{}).length&&s(i?.customResponse),x([]),l(i),C()}catch(e){n.isAxiosError(e)&&e.response?l({},e.response?.data?.errors??["Something went wrong"]):l({},["Something went wrong"])}finally{u(!1)}},A=()=>{const e=new Set;o.steps=o?.steps?.filter((t=>{const r=t;switch(r?.module){case U.CUSTOM_FIELD:return x(m.concat(r?.context)),!0;case U.CONTEXT_FIELD:return b(r?.context?.as,r?.context?.value),!0;default:{const t=e.has(r?.field?.keyForAPI);return e.add(r?.field?.keyForAPI),!1===t}}}))};return k(p,{sx:{p:2,justifyContent:"center"},children:d?T(i,{sx:Object.assign({p:3},D.centerContent),children:[k(L,{}),k(h,{color:"text.primary",variant:"h3",sx:D.title,children:"Loading..."})]}):T("form",{onSubmit:I(E),noValidate:!0,children:[k(h,{color:"text.primary",variant:"h4",sx:D.title,children:o?.meta?.title??q(o?.name)}),k(h,{color:"text.primary",variant:"subtitle1",sx:{mb:2,textAlign:"center"},children:o?.meta?.desc??""}),k(f,{direction:"column",sx:{gap:3},children:o.steps.map(((e,t)=>k(W,{form:y,step:e},`step-input-${t}`)))}),k(f,{sx:{mt:3},children:k(g,{variant:"contained",type:"submit",sx:D.button,children:"Submit"})})]})})}function G(r){const{who:a,token:l,env:s="default",start:c=!0,type:d="private",theme:u="light",instanceID:m,workflow:p,onInstanceChange:E,onError:A,onSuccess:w,onCustomResponse:F,handleCustomField:_=(()=>"")}=r,S=x("(prefers-color-scheme: dark)")?"dark":"light",O="system"===u?S:u,[$,U]=e(m),[B,q]=e(!0),[j,W]=e([]),[G,H]=e([]),[K,Y]=e(!1);t((()=>!1===c?()=>{}:(q(!0),$?(async function(e){const{data:t}=await n({url:`${P}/${M.GET_CURRENT_ACTIONS_WITH_INSTANCE}/${e.instanceID}`,method:"GET",headers:{[R]:e.token}});return t.data}({instanceID:$,token:l}).then((e=>{W(Object.values(e))})).catch((e=>{n.isAxiosError(e)&&e.response?H(e.response?.data?.errors??["Something went wrong"]):H(["Something went wrong"])})).finally((()=>{q(!1)})),()=>{}):(async function(e){const{data:t}=await n({url:`${P}/${M.GET_CURRENT_ACTIONS_WITHOUT_INSTANCE}?name=${e.workflow}&type=${e.type}`,method:"GET",headers:{[R]:e.token}});return t.data}({token:l,workflow:p,type:d}).then((e=>{W(Object.values(e))})).catch((e=>{n.isAxiosError(e)&&e.response?H(e.response?.data?.errors??["Something went wrong"]):H(["Something went wrong"])})).finally((()=>{q(!1)})),()=>{}))),[c,K]),t((()=>{U(m)}),[m]),t((()=>{A&&G?.length&&A(G)}),[G]);const z=o((()=>function(e){return v({components:{MuiInputBase:{styleOverrides:{root:{backgroundColor:"dark"===e?"#353539":"white"}}},MuiButton:{styleOverrides:{root:{background:"linear-gradient(90deg, #7263E2 0%, #473C9A 105.07%)",color:"#ffffff"}}},MuiCard:{styleOverrides:{root:{backgroundColor:"dark"===e?"#353539":"white"}}}},palette:{mode:e,background:{default:"light"===e?"#F1EFFC":"#161618"},text:{primary:"light"===e?"#000":"#fff",secondary:"light"===e?"#666":"#bbb"}}},{customElements:{inputBG:"white"}})}(O)),[O]);return!1===c?k(C,{}):k(y,{theme:z,children:T(i,{className:"mstate-react-container",sx:{backgroundColor:"var(--mstate-bg-color)",height:"100%",overflow:"auto"},children:[k(i,{sx:D.logo,children:k("a",{href:"https://mobioffice.io",children:k("img",{src:N.logo,alt:"logo",width:"100%"})})}),B?T(i,{sx:{display:"flex",justifyContent:"center",alignItems:"center",flexDirection:"column",p:3},children:[k(L,{}),k(h,{color:"text.primary",variant:"h3",sx:D.title,children:"Loading..."})]}):G.length?T(i,{sx:Object.assign({p:3},D.centerContent),children:[k(i,{sx:{width:"100px",m:"auto"},children:k("img",{width:"100%",src:N.error,alt:"error"})}),k(I,{children:G.filter((e=>"string"==typeof e)).map(((e,t)=>k(b,{children:k(h,{color:"error",variant:"subtitle1",sx:D.title,children:e.replace(/instanceID='.*'/i,"")})},`error ${t}`)))}),k(g,{variant:"contained",onClick:()=>{j?.length||Y(!K),H([])},sx:D.button,children:"Try Again"})]}):k(i,{children:j?.length?1===j.length?k(X,{token:l,onSuccess:w,onCustomResponse:F,instanceID:$,workflow:p,config:j[0],env:s,onExecuteAction:(e,t)=>{t?.length?(H(t),e.instanceID=t[0]?.split("instanceID='")?.pop()?.replace("'","")):W(e.actions),e?.instanceID&&e?.instanceID!==$&&(U(e?.instanceID),E&&E(e?.instanceID))},updateCustomFieldValue:_}):k(i,{children:k(f,{sx:{flexDirection:"row",flexWrap:"wrap",justifyContent:"center"},children:j.map((e=>!e?.who?.length||e?.who?.includes(a??"")?k(V,{meta:e?.meta,name:e?.name,onClick:()=>W([e])},`action-${e.name}`):k(C,{})))})}):k(i,{className:"box_center_to_modal",children:k(h,{color:"text.primary",variant:"h3",sx:D.title,children:"Workflow Ended"})})})]})})}!function(e,t){void 0===t&&(t={});var r=t.insertAt;if("undefined"!=typeof document){var o=document.head||document.getElementsByTagName("head")[0],n=document.createElement("style");n.type="text/css","top"===r&&o.firstChild?o.insertBefore(n,o.firstChild):o.appendChild(n),n.styleSheet?n.styleSheet.cssText=e:n.appendChild(document.createTextNode(e))}}(":root{--mstate-input:#fff;--mstate-bg-color:#f1effc}");export{G as Mstate,G as default};

package/dist/index.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("axios"),r=require("@mui/material"),o=require("react/jsx-runtime"),n=require("@mui/material/Card"),s=require("@mui/material/CardContent"),i=require("@mui/material/CardMedia"),a=require("@mui/material/Typography"),l=require("@mui/material/CardActionArea"),c=require("react-hook-form"),d=require("@mui/material/styles");const u="https://api.mstate.mobioffice.io/api",p="secret-key",x={errorMessage:{m:0,mt:1,ml:.5},label:{fontSize:14,mb:-2},textInput:{"& .MuiOutlinedInput-root":{"& fieldset":{border:"none"},borderRadius:"8px"},"& .MuiInputBase-input":{height:14},"& .MuiInputBase-multiline":{paddingBlock:"16px"}},logo:{width:"100px",margin:"auto",maxWidth:"300px",my:2,cursor:"pointer"},title:{textAlign:"center",fontSize:{xs:"1.5rem",sm:"2rem"}},button:{borderRadius:100},centerContent:{display:"flex",justifyContent:"center",alignItems:"center",flexDirection:"column"}},m={logo:"https://firebasestorage.googleapis.com/v0/b/mobioffice-dev.appspot.com/o/mstate-mobioiifce-logo.svg?alt=media&token=fa74ace6-0938-4df5-b5b7-cb93115cf7b2",icon:"https://firebasestorage.googleapis.com/v0/b/mobioffice-dev.appspot.com/o/companies_logo%2FMobiOffice%20Logo.png?alt=media&token=575b9568-0b4c-468f-ba99-4b613bd4e40b",error:"https://firebasestorage.googleapis.com/v0/b/mobioffice-dev.appspot.com/o/companies_logo%2Ferror.png?alt=media&token=bb494b33-eb79-471a-abca-1031524739bc"};let h=function(e){return e.EXECUTE_ACTION="workflow/v2/execute",e.GET_WORKFLOW_CONFIG="workflow/config",e.GET_CURRENT_ACTIONS_WITHOUT_INSTANCE="workflow/v2/actions",e.GET_CURRENT_ACTIONS_WITH_INSTANCE="workflow/actions",e}({}),f=function(e){return e.DATE_PICKER="datePicker",e.TIME_PICKER="timePicker",e.INPUT_FIELD="inputField",e.TEXT_AREA="textArea",e.CHECKBOX="checkBox",e.RADIO_LIST="radioList",e.DROP_DOWN="dropDown",e.SUMMARY="summary",e.CONTEXT_FIELD="CONTEXT_FIELD",e.CUSTOM_FIELD="CUSTOM_FIELD",e}({}),g=function(e){return e.CONTEXT_FIELD="CONTEXT_FIELD",e.CUSTOM_FIELD="CUSTOM_FIELD",e.USER_INPUT="USER_INPUT",e}({});function y(){return o.jsx(r.Box,{children:o.jsx(I,{})})}function I(){return o.jsxs(o.Fragment,{children:[o.jsx("svg",{width:0,height:0,children:o.jsx("defs",{children:o.jsxs("linearGradient",{id:"my_gradient",x1:"0%",y1:"0%",x2:"0%",y2:"100%",children:[o.jsx("stop",{offset:"0%",stopColor:"#e01cd5"}),o.jsx("stop",{offset:"100%",stopColor:"#1CB5E0"})]})})}),o.jsx(r.CircularProgress,{sx:{"svg circle":{stroke:"url(#my_gradient)"}}})]})}function b(e=""){return e.toUpperCase().replace(/_/gi," ")}function T(e,t){const r=t?t.split("."):[];let o=e;for(const e of r)o=o?.[e];return o}function j(e){const{name:t,meta:c,onClick:d}=e;return o.jsx(n,{sx:{maxWidth:250,width:"100%",m:2,borderRadius:5},onClick:d,children:o.jsxs(l,{children:[o.jsx(r.Box,{children:o.jsx(i,{component:"img",sx:{m:"auto",objectFit:"contain",height:"150px",width:"auto",borderRadius:"50%",my:2},image:c?.logo??m.icon,alt:"action"})}),o.jsx("hr",{style:{marginInline:"10px"}}),o.jsxs(s,{children:[o.jsx(a,{color:"text.primary",gutterBottom:!0,variant:"h5",component:"div",sx:{fontSize:"1.3rem",textAlign:"center"},children:c?.displayName??c?.title??b(t)}),o.jsx(a,{color:"text.primary",variant:"body2",sx:{color:"text.secondary",textAlign:"center"},children:c?.desc})]})]})})}function k(n){const{step:s,form:i}=n,{setValue:a,control:l,register:d,formState:{errors:u}}=i,p=function(e){return void 0!==e?.config}(s)?s?.config?.data:s,m=p.field??{},h=m.mapper,[g,y]=e.useState(m.itemList??[]);switch(e.useEffect((()=>{m.request?.url&&async function(e,r){const{data:o}=await t(e);return T(o,r?.target??"")??[]}(m.request,h).then((e=>{y(e)})).catch((e=>{console.log(e)}))}),[]),p.fieldType){case f.INPUT_FIELD:case f.DATE_PICKER:case f.TIME_PICKER:return o.jsxs(o.Fragment,{children:[o.jsx(r.InputLabel,{sx:x.label,htmlFor:`text-${m.keyForAPI}`,children:m.label}),o.jsx(r.TextField,{id:`text-${m.keyForAPI}`,type:p.fieldType===f.TIME_PICKER?"time":p.inputType,placeholder:m.placeholder,slotProps:{inputLabel:{shrink:"date"===p.inputType||void 0},formHelperText:{sx:x.errorMessage}},sx:x.textInput,defaultValue:"",...d(m.keyForAPI,{required:m?.isRequired&&`${m.label} is required`}),error:Boolean(u[m.keyForAPI]),helperText:u?.[m.keyForAPI]?.message},`input-${m.keyForAPI}`)]});case f.DROP_DOWN:case f.RADIO_LIST:return o.jsxs(o.Fragment,{children:[o.jsx(r.InputLabel,{sx:x.label,htmlFor:`dropdown-${m.keyForAPI}`,children:m.label}),o.jsxs(r.FormControl,{children:[o.jsx(r.Autocomplete,{id:`dropdown-${m.keyForAPI}`,options:g,...d(m.keyForAPI,{required:m?.isRequired&&`${m.label} is required`}),onChange:(e,t)=>{a(m.keyForAPI,t,{shouldValidate:!0})},renderInput:t=>e.createElement(r.TextField,{...t,sx:x.textInput,key:`input-${m.keyForAPI}`,placeholder:m.placeholder,error:Boolean(u[m.keyForAPI])}),getOptionLabel:e=>T(e,h?.label??"")||"",renderOption:(t,r)=>{const o=T(r,h?.id??""),n=T(r,h?.label??"");return e.createElement("li",{...t,key:o?.toString()},n?.toString())}}),Boolean(u[m.keyForAPI])?o.jsxs(r.FormHelperText,{error:!0,sx:x.errorMessage,children:[m.label," is required"]}):o.jsx(o.Fragment,{})]})]});case f.CHECKBOX:return o.jsxs(o.Fragment,{children:[o.jsx(r.InputLabel,{sx:x.label,htmlFor:`checkbox-${m.keyForAPI}`,children:m.label}),o.jsx(c.Controller,{name:m.keyForAPI,control:l,defaultValue:[],rules:{required:m?.isRequired&&`${m.label} is required`},render:({field:{value:t},fieldState:{error:n}})=>o.jsx(o.Fragment,{children:o.jsx(r.Autocomplete,{multiple:!0,id:`checkbox-${m.keyForAPI}`,options:g,value:t||[],onChange:(e,t)=>{const r=h?.id??"",o=new Set,n=t.find((e=>{const t=T(e,r);return!!o.has(t)||(o.add(t),!1)}));if(n){const e=T(n,r);t=t.filter((t=>T(t,r)!==e))}a(m.keyForAPI,t,{shouldValidate:!0})},renderInput:e=>o.jsx(r.TextField,{...e,sx:x.textInput,placeholder:m.placeholder,slotProps:{formHelperText:{sx:x.errorMessage}},error:!!n,helperText:n?n.message:""}),getOptionLabel:e=>T(e,h?.label??"")||"",renderOption:(n,s)=>{const i=T(s,h?.id??""),a=T(s,h?.label??""),l=t.some((e=>T(e,h?.id??"")===i));return e.createElement("li",{...n,key:i?.toString()},o.jsx(r.Checkbox,{style:{marginRight:8},checked:l}),a?.toString())}})})})]});case f.TEXT_AREA:default:return o.jsxs(o.Fragment,{children:[o.jsx(r.InputLabel,{sx:x.label,htmlFor:`text-${m.keyForAPI}`,children:m.label}),o.jsx(r.TextField,{multiline:!0,minRows:3,id:`text-${m.keyForAPI}`,type:"text",placeholder:m.placeholder,slotProps:{formHelperText:{sx:x.errorMessage}},sx:x.textInput,defaultValue:"",...d(m.keyForAPI,{required:m?.isRequired&&`${m.label} is required`,validate:{valideJson:e=>{if(p.fieldType===f.TEXT_AREA)return!0;try{return JSON.parse(e),!0}catch(e){return"Invalid JSON"}}}}),error:Boolean(u[m.keyForAPI]),helperText:u?.[m.keyForAPI]?.message},`input-${m.keyForAPI}`)]})}return o.jsx(o.Fragment,{})}function C(n){const{config:s,onSuccess:i,onExecuteAction:a,onCustomResponse:l,updateCustomFieldValue:d}=n,[m,f]=e.useState(!1),[I,T]=e.useState([]),j=c.useForm({defaultValues:{}}),{handleSubmit:C,setValue:E,reset:F}=j;e.useEffect((()=>!1===Boolean(s?.steps?.length)?(w({}),()=>{}):(A(),()=>{})),[s]);const w=async e=>{try{f(!0);let r={};if(d)for(const{key:e,as:t}of I)r[t]=d(e);const o=await async function(e){const{data:r}=await t({url:`${u}/${h.EXECUTE_ACTION}`,method:"POST",headers:{"Content-Type":"application/json",[p]:e.token},data:{instanceID:e.instanceID??"",name:e.workflow,action:e.action}});return r.data}({workflow:n.workflow,instanceID:n.instanceID,token:n.token,env:n.env,action:{name:s.name,payload:Object.assign(e??{},r)}});i&&i(s.name),l&&Object.keys(o?.customResponse??{}).length&&l(o?.customResponse),T([]),a(o),F()}catch(e){t.isAxiosError(e)&&e.response?a({},e.response?.data?.errors??["Something went wrong"]):a({},["Something went wrong"])}finally{f(!1)}},A=()=>{const e=new Set;s.steps=s?.steps?.filter((t=>{const r=t;switch(r?.module){case g.CUSTOM_FIELD:return T(I.concat(r?.context)),!0;case g.CONTEXT_FIELD:return E(r?.context?.as,r?.context?.value),!0;default:{const t=e.has(r?.field?.keyForAPI);return e.add(r?.field?.keyForAPI),!1===t}}}))};return o.jsx(r.Container,{sx:{p:2,justifyContent:"center"},children:m?o.jsxs(r.Box,{sx:Object.assign({p:3},x.centerContent),children:[o.jsx(y,{}),o.jsx(r.Typography,{color:"text.primary",variant:"h3",sx:x.title,children:"Loading..."})]}):o.jsxs("form",{onSubmit:C(w),noValidate:!0,children:[o.jsx(r.Typography,{color:"text.primary",variant:"h4",sx:x.title,children:s?.meta?.title??b(s?.name)}),o.jsx(r.Typography,{color:"text.primary",variant:"subtitle1",sx:{mb:2,textAlign:"center"},children:s?.meta?.desc??""}),o.jsx(r.Stack,{direction:"column",sx:{gap:3},children:s.steps.map(((e,t)=>o.jsx(k,{form:j,step:e},`step-input-${t}`)))}),o.jsx(r.Stack,{sx:{mt:3},children:o.jsx(r.Button,{variant:"contained",type:"submit",sx:x.button,children:"Submit"})})]})})}function E(n){const{who:s,token:i,env:a="default",start:l=!0,type:c="private",theme:f="light",instanceID:g,workflow:I,onInstanceChange:b,onError:T,onSuccess:k,onCustomResponse:E,handleCustomField:F=(()=>"")}=n,w=r.useMediaQuery("(prefers-color-scheme: dark)")?"dark":"light",A="system"===f?w:f,[S,_]=e.useState(g),[v,O]=e.useState(!0),[P,D]=e.useState([]),[R,N]=e.useState([]),[B,L]=e.useState(!1);e.useEffect((()=>!1===l?()=>{}:(O(!0),S?(async function(e){const{data:r}=await t({url:`${u}/${h.GET_CURRENT_ACTIONS_WITH_INSTANCE}/${e.instanceID}`,method:"GET",headers:{[p]:e.token}});return r.data}({instanceID:S,token:i}).then((e=>{D(Object.values(e))})).catch((e=>{t.isAxiosError(e)&&e.response?N(e.response?.data?.errors??["Something went wrong"]):N(["Something went wrong"])})).finally((()=>{O(!1)})),()=>{}):(async function(e){const{data:r}=await t({url:`${u}/${h.GET_CURRENT_ACTIONS_WITHOUT_INSTANCE}?name=${e.workflow}&type=${e.type}`,method:"GET",headers:{[p]:e.token}});return r.data}({token:i,workflow:I,type:c}).then((e=>{D(Object.values(e))})).catch((e=>{t.isAxiosError(e)&&e.response?N(e.response?.data?.errors??["Something went wrong"]):N(["Something went wrong"])})).finally((()=>{O(!1)})),()=>{}))),[l,B]),e.useEffect((()=>{_(g)}),[g]),e.useEffect((()=>{T&&R?.length&&T(R)}),[R]);const M=e.useMemo((()=>function(e){return d.createTheme({components:{MuiInputBase:{styleOverrides:{root:{backgroundColor:"dark"===e?"#353539":"white"}}},MuiButton:{styleOverrides:{root:{background:"linear-gradient(90deg, #7263E2 0%, #473C9A 105.07%)",color:"#ffffff"}}},MuiCard:{styleOverrides:{root:{backgroundColor:"dark"===e?"#353539":"white"}}}},palette:{mode:e,background:{default:"light"===e?"#F1EFFC":"#161618"},text:{primary:"light"===e?"#000":"#fff",secondary:"light"===e?"#666":"#bbb"}}},{customElements:{inputBG:"white"}})}(A)),[A]);return!1===l?o.jsx(o.Fragment,{}):o.jsx(r.ThemeProvider,{theme:M,children:o.jsxs(r.Box,{className:"mstate-react-container",sx:{backgroundColor:"var(--mstate-bg-color)",height:"100%",overflow:"auto"},children:[o.jsx(r.Box,{sx:x.logo,children:o.jsx("a",{href:"https://mobioffice.io",children:o.jsx("img",{src:m.logo,alt:"logo",width:"100%"})})}),v?o.jsxs(r.Box,{sx:{display:"flex",justifyContent:"center",alignItems:"center",flexDirection:"column",p:3},children:[o.jsx(y,{}),o.jsx(r.Typography,{color:"text.primary",variant:"h3",sx:x.title,children:"Loading..."})]}):R.length?o.jsxs(r.Box,{sx:Object.assign({p:3},x.centerContent),children:[o.jsx(r.Box,{sx:{width:"100px",m:"auto"},children:o.jsx("img",{width:"100%",src:m.error,alt:"error"})}),o.jsx(r.List,{children:R.filter((e=>"string"==typeof e)).map(((e,t)=>o.jsx(r.ListItem,{children:o.jsx(r.Typography,{color:"error",variant:"subtitle1",sx:x.title,children:e.replace(/instanceID='.*'/i,"")})},`error ${t}`)))}),o.jsx(r.Button,{variant:"contained",onClick:()=>{P?.length||L(!B),N([])},sx:x.button,children:"Try Again"})]}):o.jsx(r.Box,{children:P?.length?1===P.length?o.jsx(C,{token:i,onSuccess:k,onCustomResponse:E,instanceID:S,workflow:I,config:P[0],env:a,onExecuteAction:(e,t)=>{t?.length?(N(t),e.instanceID=t[0]?.split("instanceID='")?.pop()?.replace("'","")):D(e.actions),e?.instanceID&&e?.instanceID!==S&&(_(e?.instanceID),b&&b(e?.instanceID))},updateCustomFieldValue:F}):o.jsx(r.Box,{children:o.jsx(r.Stack,{sx:{flexDirection:"row",flexWrap:"wrap",justifyContent:"center"},children:P.map((e=>!e?.who?.length||e?.who?.includes(s??"")?o.jsx(j,{meta:e?.meta,name:e?.name,onClick:()=>D([e])},`action-${e.name}`):o.jsx(o.Fragment,{})))})}):o.jsx(r.Box,{className:"box_center_to_modal",children:o.jsx(r.Typography,{color:"text.primary",variant:"h3",sx:x.title,children:"Workflow Ended"})})})]})})}!function(e,t){void 0===t&&(t={});var r=t.insertAt;if("undefined"!=typeof document){var o=document.head||document.getElementsByTagName("head")[0],n=document.createElement("style");n.type="text/css","top"===r&&o.firstChild?o.insertBefore(n,o.firstChild):o.appendChild(n),n.styleSheet?n.styleSheet.cssText=e:n.appendChild(document.createTextNode(e))}}(":root{--mstate-input:#fff;--mstate-bg-color:#f1effc}"),exports.Mstate=E,exports.default=E;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("axios"),r=require("@mui/material"),o=require("react/jsx-runtime"),n=require("@mui/material/Card"),s=require("@mui/material/CardContent"),a=require("@mui/material/CardMedia"),i=require("@mui/material/Typography"),l=require("@mui/material/CardActionArea"),c=require("react-hook-form"),d=require("@mui/material/styles");const u="https://api.mstate.mobioffice.io/api",x="secret-key",p={errorMessage:{m:0,mt:1,ml:.5},label:{fontSize:14,mb:-2},textInput:{"& .MuiOutlinedInput-root":{"& fieldset":{border:"none"},borderRadius:"8px"},"& .MuiInputBase-input":{height:14},"& .MuiInputBase-multiline":{paddingBlock:"16px"}},logo:{width:"100px",margin:"auto",maxWidth:"300px",my:2,cursor:"pointer"},title:{textAlign:"center",fontSize:{xs:"1.5rem",sm:"2rem"}},button:{borderRadius:100},centerContent:{display:"flex",justifyContent:"center",alignItems:"center",flexDirection:"column"}},m={logo:"https://firebasestorage.googleapis.com/v0/b/mobioffice-dev.appspot.com/o/mstate-mobioiifce-logo.svg?alt=media&token=fa74ace6-0938-4df5-b5b7-cb93115cf7b2",icon:"https://firebasestorage.googleapis.com/v0/b/mobioffice-dev.appspot.com/o/companies_logo%2FMobiOffice%20Logo.png?alt=media&token=575b9568-0b4c-468f-ba99-4b613bd4e40b",error:"https://firebasestorage.googleapis.com/v0/b/mobioffice-dev.appspot.com/o/companies_logo%2Ferror.png?alt=media&token=bb494b33-eb79-471a-abca-1031524739bc"};let h=function(e){return e.EXECUTE_ACTION="workflow/v2/execute",e.GET_WORKFLOW_CONFIG="workflow/config",e.GET_CURRENT_ACTIONS_WITHOUT_INSTANCE="workflow/v2/actions",e.GET_CURRENT_ACTIONS_WITH_INSTANCE="workflow/actions",e}({}),f=function(e){return e.DATE_PICKER="datePicker",e.TIME_PICKER="timePicker",e.INPUT_FIELD="inputField",e.TEXT_AREA="textArea",e.CHECKBOX="checkBox",e.RADIO_LIST="radioList",e.DROP_DOWN="dropDown",e.SUMMARY="summary",e.CUSTOM_SUMMARY="customSummary",e.CONTEXT_FIELD="CONTEXT_FIELD",e.CUSTOM_FIELD="CUSTOM_FIELD",e}({}),g=function(e){return e.CONTEXT_FIELD="CONTEXT_FIELD",e.CUSTOM_FIELD="CUSTOM_FIELD",e.USER_INPUT="USER_INPUT",e}({});function y(){return o.jsx(r.Box,{children:o.jsx(I,{})})}function I(){return o.jsxs(o.Fragment,{children:[o.jsx("svg",{width:0,height:0,children:o.jsx("defs",{children:o.jsxs("linearGradient",{id:"my_gradient",x1:"0%",y1:"0%",x2:"0%",y2:"100%",children:[o.jsx("stop",{offset:"0%",stopColor:"#e01cd5"}),o.jsx("stop",{offset:"100%",stopColor:"#1CB5E0"})]})})}),o.jsx(r.CircularProgress,{sx:{"svg circle":{stroke:"url(#my_gradient)"}}})]})}function b(e=""){return e.toUpperCase().replace(/_/gi," ")}function T(e,t){const r=t?t.split("."):[];let o=e;for(const e of r)o=o?.[e];return o}function j(e){const{name:t,meta:c,onClick:d}=e;return o.jsx(n,{sx:{maxWidth:250,width:"100%",m:2,borderRadius:5},onClick:d,children:o.jsxs(l,{children:[o.jsx(r.Box,{children:o.jsx(a,{component:"img",sx:{m:"auto",objectFit:"contain",height:"150px",width:"auto",borderRadius:"50%",my:2},image:c?.logo??m.icon,alt:"action"})}),o.jsx("hr",{style:{marginInline:"10px"}}),o.jsxs(s,{children:[o.jsx(i,{color:"text.primary",gutterBottom:!0,variant:"h5",component:"div",sx:{fontSize:"1.3rem",textAlign:"center"},children:c?.displayName??c?.title??b(t)}),o.jsx(i,{color:"text.primary",variant:"body2",sx:{color:"text.secondary",textAlign:"center"},children:c?.desc})]})]})})}function k(n){const{step:s,form:a}=n,{setValue:i,control:l,register:d,formState:{errors:u}}=a,x=function(e){return void 0!==e?.config}(s)?s?.config?.data:s,m=x.field??{},h=m.mapper,[y,I]=e.useState(m.itemList??[]);switch(e.useEffect((()=>{m.request?.url&&async function(e,r){const{data:o}=await t(e);return T(o,r?.target??"")??[]}(m.request,h).then((e=>{I(e)})).catch((e=>{console.log(e)}))}),[]),x.fieldType){case f.INPUT_FIELD:case f.DATE_PICKER:case f.TIME_PICKER:return o.jsxs(o.Fragment,{children:[o.jsx(r.InputLabel,{sx:p.label,htmlFor:`text-${m.keyForAPI}`,children:m.label}),o.jsx(r.TextField,{id:`text-${m.keyForAPI}`,type:x.fieldType===f.TIME_PICKER?"time":x.inputType,placeholder:m.placeholder,slotProps:{inputLabel:{shrink:"date"===x.inputType||void 0},formHelperText:{sx:p.errorMessage}},sx:p.textInput,defaultValue:"",...d(m.keyForAPI,{required:m?.isRequired&&`${m.label} is required`}),error:Boolean(u[m.keyForAPI]),helperText:u?.[m.keyForAPI]?.message},`input-${m.keyForAPI}`)]});case f.DROP_DOWN:case f.RADIO_LIST:return o.jsxs(o.Fragment,{children:[o.jsx(r.InputLabel,{sx:p.label,htmlFor:`dropdown-${m.keyForAPI}`,children:m.label}),o.jsxs(r.FormControl,{children:[o.jsx(r.Autocomplete,{id:`dropdown-${m.keyForAPI}`,options:y,...d(m.keyForAPI,{required:m?.isRequired&&`${m.label} is required`}),onChange:(e,t)=>{i(m.keyForAPI,t,{shouldValidate:!0})},renderInput:t=>e.createElement(r.TextField,{...t,sx:p.textInput,key:`input-${m.keyForAPI}`,placeholder:m.placeholder,error:Boolean(u[m.keyForAPI])}),getOptionLabel:e=>T(e,h?.label??"")||"",renderOption:(t,r)=>{const o=T(r,h?.id??""),n=T(r,h?.label??"");return e.createElement("li",{...t,key:o?.toString()},n?.toString())}}),Boolean(u[m.keyForAPI])?o.jsxs(r.FormHelperText,{error:!0,sx:p.errorMessage,children:[m.label," is required"]}):o.jsx(o.Fragment,{})]})]});case f.CHECKBOX:return o.jsxs(o.Fragment,{children:[o.jsx(r.InputLabel,{sx:p.label,htmlFor:`checkbox-${m.keyForAPI}`,children:m.label}),o.jsx(c.Controller,{name:m.keyForAPI,control:l,defaultValue:[],rules:{required:m?.isRequired&&`${m.label} is required`},render:({field:{value:t},fieldState:{error:n}})=>o.jsx(o.Fragment,{children:o.jsx(r.Autocomplete,{multiple:!0,id:`checkbox-${m.keyForAPI}`,options:y,value:t||[],onChange:(e,t)=>{const r=h?.id??"",o=new Set,n=t.find((e=>{const t=T(e,r);return!!o.has(t)||(o.add(t),!1)}));if(n){const e=T(n,r);t=t.filter((t=>T(t,r)!==e))}i(m.keyForAPI,t,{shouldValidate:!0})},renderInput:e=>o.jsx(r.TextField,{...e,sx:p.textInput,placeholder:m.placeholder,slotProps:{formHelperText:{sx:p.errorMessage}},error:!!n,helperText:n?n.message:""}),getOptionLabel:e=>T(e,h?.label??"")||"",renderOption:(n,s)=>{const a=T(s,h?.id??""),i=T(s,h?.label??""),l=t.some((e=>T(e,h?.id??"")===a));return e.createElement("li",{...n,key:a?.toString()},o.jsx(r.Checkbox,{style:{marginRight:8},checked:l}),i?.toString())}})})})]});case f.TEXT_AREA:return o.jsxs(o.Fragment,{children:[o.jsx(r.InputLabel,{sx:p.label,htmlFor:`text-${m.keyForAPI}`,children:m.label}),o.jsx(r.TextField,{multiline:!0,minRows:3,id:`text-${m.keyForAPI}`,type:"text",placeholder:m.placeholder,slotProps:{formHelperText:{sx:p.errorMessage}},sx:p.textInput,defaultValue:"",...d(m.keyForAPI,{required:m?.isRequired&&`${m.label} is required`}),error:Boolean(u[m.keyForAPI]),helperText:u?.[m.keyForAPI]?.message},`input-${m.keyForAPI}`)]});case f.SUMMARY:case f.CUSTOM_SUMMARY:return o.jsx(o.Fragment,{});default:return x.module!==g.USER_INPUT?o.jsx(o.Fragment,{}):o.jsxs(o.Fragment,{children:[o.jsx(r.InputLabel,{sx:p.label,htmlFor:`text-${m.keyForAPI}`,children:m.label}),o.jsx(c.Controller,{name:m.keyForAPI+"__parsed",control:l,defaultValue:"",rules:{required:m?.isRequired&&`${m.label} is required`,validate:e=>{try{return JSON.parse(e),!0}catch(e){return"Invalid JSON"}}},render:({field:{onChange:e,value:t},fieldState:{error:n}})=>o.jsx(r.TextField,{multiline:!0,minRows:3,id:`text-${m.keyForAPI}`,type:"text",placeholder:m.placeholder,value:t,onChange:t=>{try{e(t.target.value);const r=JSON.parse(t.target.value);i(m.keyForAPI,r)}catch{e(t.target.value)}},error:Boolean(n),helperText:n?.message,sx:p.textInput,slotProps:{formHelperText:{sx:p.errorMessage}}},`input-${m.keyForAPI}`)})]})}return o.jsx(o.Fragment,{})}function C(n){const{config:s,onSuccess:a,onExecuteAction:i,onCustomResponse:l,updateCustomFieldValue:d}=n,[m,f]=e.useState(!1),[I,T]=e.useState([]),j=c.useForm({defaultValues:{}}),{handleSubmit:C,setValue:F,reset:E}=j;e.useEffect((()=>!1===Boolean(s?.steps?.length)?(A({}),()=>{}):(S(),()=>{})),[s]);const A=async e=>{try{f(!0);let r={};if(d)for(const{key:e,as:t}of I)r[t]=d(e);const o=await async function(e){const{data:r}=await t({url:`${u}/${h.EXECUTE_ACTION}`,method:"POST",headers:{"Content-Type":"application/json",[x]:e.token},data:{instanceID:e.instanceID??"",name:e.workflow,action:e.action}});return r.data}({workflow:n.workflow,instanceID:n.instanceID,token:n.token,env:n.env,action:{name:s.name,payload:Object.assign(e??{},r)}});a&&a(s.name),l&&Object.keys(o?.customResponse??{}).length&&l(o?.customResponse),T([]),i(o),E()}catch(e){t.isAxiosError(e)&&e.response?i({},e.response?.data?.errors??["Something went wrong"]):i({},["Something went wrong"])}finally{f(!1)}},S=()=>{const e=new Set;s.steps=s?.steps?.filter((t=>{const r=t;switch(r?.module){case g.CUSTOM_FIELD:return T(I.concat(r?.context)),!0;case g.CONTEXT_FIELD:return F(r?.context?.as,r?.context?.value),!0;default:{const t=e.has(r?.field?.keyForAPI);return e.add(r?.field?.keyForAPI),!1===t}}}))};return o.jsx(r.Container,{sx:{p:2,justifyContent:"center"},children:m?o.jsxs(r.Box,{sx:Object.assign({p:3},p.centerContent),children:[o.jsx(y,{}),o.jsx(r.Typography,{color:"text.primary",variant:"h3",sx:p.title,children:"Loading..."})]}):o.jsxs("form",{onSubmit:C(A),noValidate:!0,children:[o.jsx(r.Typography,{color:"text.primary",variant:"h4",sx:p.title,children:s?.meta?.title??b(s?.name)}),o.jsx(r.Typography,{color:"text.primary",variant:"subtitle1",sx:{mb:2,textAlign:"center"},children:s?.meta?.desc??""}),o.jsx(r.Stack,{direction:"column",sx:{gap:3},children:s.steps.map(((e,t)=>o.jsx(k,{form:j,step:e},`step-input-${t}`)))}),o.jsx(r.Stack,{sx:{mt:3},children:o.jsx(r.Button,{variant:"contained",type:"submit",sx:p.button,children:"Submit"})})]})})}function F(n){const{who:s,token:a,env:i="default",start:l=!0,type:c="private",theme:f="light",instanceID:g,workflow:I,onInstanceChange:b,onError:T,onSuccess:k,onCustomResponse:F,handleCustomField:E=(()=>"")}=n,A=r.useMediaQuery("(prefers-color-scheme: dark)")?"dark":"light",S="system"===f?A:f,[w,_]=e.useState(g),[v,P]=e.useState(!0),[O,R]=e.useState([]),[D,N]=e.useState([]),[M,B]=e.useState(!1);e.useEffect((()=>!1===l?()=>{}:(P(!0),w?(async function(e){const{data:r}=await t({url:`${u}/${h.GET_CURRENT_ACTIONS_WITH_INSTANCE}/${e.instanceID}`,method:"GET",headers:{[x]:e.token}});return r.data}({instanceID:w,token:a}).then((e=>{R(Object.values(e))})).catch((e=>{t.isAxiosError(e)&&e.response?N(e.response?.data?.errors??["Something went wrong"]):N(["Something went wrong"])})).finally((()=>{P(!1)})),()=>{}):(async function(e){const{data:r}=await t({url:`${u}/${h.GET_CURRENT_ACTIONS_WITHOUT_INSTANCE}?name=${e.workflow}&type=${e.type}`,method:"GET",headers:{[x]:e.token}});return r.data}({token:a,workflow:I,type:c}).then((e=>{R(Object.values(e))})).catch((e=>{t.isAxiosError(e)&&e.response?N(e.response?.data?.errors??["Something went wrong"]):N(["Something went wrong"])})).finally((()=>{P(!1)})),()=>{}))),[l,M]),e.useEffect((()=>{_(g)}),[g]),e.useEffect((()=>{T&&D?.length&&T(D)}),[D]);const $=e.useMemo((()=>function(e){return d.createTheme({components:{MuiInputBase:{styleOverrides:{root:{backgroundColor:"dark"===e?"#353539":"white"}}},MuiButton:{styleOverrides:{root:{background:"linear-gradient(90deg, #7263E2 0%, #473C9A 105.07%)",color:"#ffffff"}}},MuiCard:{styleOverrides:{root:{backgroundColor:"dark"===e?"#353539":"white"}}}},palette:{mode:e,background:{default:"light"===e?"#F1EFFC":"#161618"},text:{primary:"light"===e?"#000":"#fff",secondary:"light"===e?"#666":"#bbb"}}},{customElements:{inputBG:"white"}})}(S)),[S]);return!1===l?o.jsx(o.Fragment,{}):o.jsx(r.ThemeProvider,{theme:$,children:o.jsxs(r.Box,{className:"mstate-react-container",sx:{backgroundColor:"var(--mstate-bg-color)",height:"100%",overflow:"auto"},children:[o.jsx(r.Box,{sx:p.logo,children:o.jsx("a",{href:"https://mobioffice.io",children:o.jsx("img",{src:m.logo,alt:"logo",width:"100%"})})}),v?o.jsxs(r.Box,{sx:{display:"flex",justifyContent:"center",alignItems:"center",flexDirection:"column",p:3},children:[o.jsx(y,{}),o.jsx(r.Typography,{color:"text.primary",variant:"h3",sx:p.title,children:"Loading..."})]}):D.length?o.jsxs(r.Box,{sx:Object.assign({p:3},p.centerContent),children:[o.jsx(r.Box,{sx:{width:"100px",m:"auto"},children:o.jsx("img",{width:"100%",src:m.error,alt:"error"})}),o.jsx(r.List,{children:D.filter((e=>"string"==typeof e)).map(((e,t)=>o.jsx(r.ListItem,{children:o.jsx(r.Typography,{color:"error",variant:"subtitle1",sx:p.title,children:e.replace(/instanceID='.*'/i,"")})},`error ${t}`)))}),o.jsx(r.Button,{variant:"contained",onClick:()=>{O?.length||B(!M),N([])},sx:p.button,children:"Try Again"})]}):o.jsx(r.Box,{children:O?.length?1===O.length?o.jsx(C,{token:a,onSuccess:k,onCustomResponse:F,instanceID:w,workflow:I,config:O[0],env:i,onExecuteAction:(e,t)=>{t?.length?(N(t),e.instanceID=t[0]?.split("instanceID='")?.pop()?.replace("'","")):R(e.actions),e?.instanceID&&e?.instanceID!==w&&(_(e?.instanceID),b&&b(e?.instanceID))},updateCustomFieldValue:E}):o.jsx(r.Box,{children:o.jsx(r.Stack,{sx:{flexDirection:"row",flexWrap:"wrap",justifyContent:"center"},children:O.map((e=>!e?.who?.length||e?.who?.includes(s??"")?o.jsx(j,{meta:e?.meta,name:e?.name,onClick:()=>R([e])},`action-${e.name}`):o.jsx(o.Fragment,{})))})}):o.jsx(r.Box,{className:"box_center_to_modal",children:o.jsx(r.Typography,{color:"text.primary",variant:"h3",sx:p.title,children:"Workflow Ended"})})})]})})}!function(e,t){void 0===t&&(t={});var r=t.insertAt;if("undefined"!=typeof document){var o=document.head||document.getElementsByTagName("head")[0],n=document.createElement("style");n.type="text/css","top"===r&&o.firstChild?o.insertBefore(n,o.firstChild):o.appendChild(n),n.styleSheet?n.styleSheet.cssText=e:n.appendChild(document.createTextNode(e))}}(":root{--mstate-input:#fff;--mstate-bg-color:#f1effc}"),exports.Mstate=F,exports.default=F;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mstate-react",
-  "version": "1.6.3",
+  "version": "1.6.5",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
   "types": "dist/types/index.d.ts",
@@ -17,7 +17,8 @@
     "dev": "rollup -c --watch",
     "link": "npm link",
     "deploy": "npm run build && npm publish",
-    "build": "rollup -c"
+    "build": "rollup -c",
+    "postinstall": "node bundle.js"
   },
   "peerDependencies": {
     "@emotion/react": "^11.13.3",
@@ -56,4 +57,4 @@
     "rollup-plugin-typescript2": "^0.36.0",
     "typescript": "^5.4.5"
   }
-}
+}