mstate-react 1.5.4 → 1.5.6

package/README.md

@@ -1,38 +1,38 @@
-MState is a library designed to automate workflows by managing state transitions and actions efficiently. It enables developers to create state machines, which are useful for defining and controlling the various states an object or process can pass through, especially in complex workflows.
-
-```ts
-interface MStateProps {
-  token: string;
-  workflow: string;
-  theme?: 'dark' | 'light' | 'system'; // default system
-  start?: boolean; // default true
-  who?: string;
-  instanceID?: string;
-  onInstanceChange?: (value: string) => void;
-  updateCustomFieldValue?: (key: string) => unknown;
-}
-```
-
-Once the package is installed, you can import the library using import or require approach:
-
-```ts
-import { Mstate } from 'mstate-react';
-```
-
-You can also use the default export, since the named export is just a re-export from the Axios factory:
-
-```ts
-import Mstate from 'mstate-react';
-```
-
-## Example
-
-```ts
-import Mstate from 'mstate-react';
-
-<Mstate
-  token="your-secret-key"
-  instanceID="instance-id"
-  workflow="workflow-name-with-path"
-/>;
-```
+MState is a library designed to automate workflows by managing state transitions and actions efficiently. It enables developers to create state machines, which are useful for defining and controlling the various states an object or process can pass through, especially in complex workflows.
+
+```ts
+interface MStateProps {
+  token: string;
+  workflow: string;
+  theme?: 'dark' | 'light' | 'system'; // default system
+  start?: boolean; // default true
+  who?: string;
+  instanceID?: string;
+  onInstanceChange?: (value: string) => void;
+  updateCustomFieldValue?: (key: string) => unknown;
+}
+```
+
+Once the package is installed, you can import the library using import or require approach:
+
+```ts
+import { Mstate } from 'mstate-react';
+```
+
+You can also use the default export, since the named export is just a re-export from the Axios factory:
+
+```ts
+import Mstate from 'mstate-react';
+```
+
+## Example
+
+```ts
+import Mstate from 'mstate-react';
+
+<Mstate
+  token="your-secret-key"
+  instanceID="instance-id"
+  workflow="workflow-name-with-path"
+/>;
+```

package/dist/index.esm.js

@@ -1 +1 @@
-import{useState as e,useEffect as t,createElement as o,useMemo as r}from"react";import n from"axios";import{Box as i,CircularProgress as a,InputLabel as l,Autocomplete as s,TextField as c,Checkbox as d,FormControl as m,FormHelperText as u,Container as p,Typography as h,Stack as f,Button as g,useMediaQuery as x,ThemeProvider as b,List as y,ListItem as I}from"@mui/material";import{jsx as C,jsxs as T,Fragment as k}from"react/jsx-runtime";import w from"@mui/material/Card";import E 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 D="https://api.mstate.mobioffice.io/api",R="secret-key",N={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"}},radio:{"& fieldset":{border:"none"},borderRadius:"8px"},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"}},P={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 L=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.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 M(){return C(i,{children:C(B,{})})}function B(){return T(k,{children:[C("svg",{width:0,height:0,children:C("defs",{children:T("linearGradient",{id:"my_gradient",x1:"0%",y1:"0%",x2:"0%",y2:"100%",children:[C("stop",{offset:"0%",stopColor:"#e01cd5"}),C("stop",{offset:"100%",stopColor:"#1CB5E0"})]})})}),C(a,{sx:{"svg circle":{stroke:"url(#my_gradient)"}}})]})}function j(e=""){return e.toUpperCase().replace(/_/gi," ")}function q(e,t){const o=t?t.split("."):[];let r=e;for(const e of o)r=r?.[e];return r}function W(e){const{name:t,meta:o,onClick:r}=e;return C(w,{sx:{maxWidth:250,width:"100%",m:2,borderRadius:5},onClick:r,children:T(F,{children:[C(i,{children:C(A,{component:"img",sx:{m:"auto",objectFit:"contain",height:"150px",width:"auto",borderRadius:"50%",my:2},image:o?.logo??P.icon,alt:"action"})}),C("hr",{style:{marginInline:"10px"}}),T(E,{children:[C(_,{color:"text.primary",gutterBottom:!0,variant:"h5",component:"div",sx:{fontSize:"1.3rem",textAlign:"center"},children:o?.title??j(t)}),C(_,{color:"text.primary",variant:"body2",sx:{color:"text.secondary",textAlign:"center"},children:o?.desc})]})]})})}function X(r){const{step:i,form:a}=r,{setValue:p,control:h,register:f,formState:{errors:g}}=a,x=function(e){return void 0!==e?.config}(i)?i?.config?.data:i,b=x.field??{},y=b.mapper,[I,w]=e(b.itemList??[]);switch(t((()=>{b.request&&async function(e,t){const{data:o}=await n(e);return q(o,t?.target??"")??[]}(b.request,y).then((e=>{w(e)})).catch((e=>{console.log(e)}))}),[]),x.fieldType){case $.INPUT_FIELD:case $.TEXT_AREA:return T(k,{children:[C(l,{sx:N.label,htmlFor:`text-${b.keyForAPI}`,children:b.label}),C(c,{multiline:x.fieldType===$.TEXT_AREA,minRows:3,id:`text-${b.keyForAPI}`,type:x.inputType,placeholder:b.placeholder,slotProps:{inputLabel:{shrink:"date"===x.inputType||void 0},formHelperText:{sx:N.errorMessage}},sx:N.textInput,defaultValue:"",...f(b.keyForAPI,{required:b?.isRequired&&`${b.label} is required`}),error:Boolean(g[b.keyForAPI]),helperText:g?.[b.keyForAPI]?.message},`input-${b.keyForAPI}`)]});case $.DROP_DOWN:case $.RADIO_LIST:return T(k,{children:[C(l,{sx:N.label,htmlFor:`dropdown-${b.keyForAPI}`,children:b.label}),T(m,{children:[C(s,{id:`dropdown-${b.keyForAPI}`,options:I,...f(b.keyForAPI,{required:b?.isRequired&&`${b.label} is required`}),onChange:(e,t)=>{p(b.keyForAPI,t,{shouldValidate:!0})},renderInput:e=>o(c,{...e,sx:N.textInput,key:`input-${b.keyForAPI}`,placeholder:b.placeholder,error:Boolean(g[b.keyForAPI])}),getOptionLabel:e=>q(e,y?.label??"label")??"",renderOption:(e,t)=>{const r=q(t,y?.id??"id"),n=q(t,y?.label??"label");return o("li",{...e,key:r?.toString()},n?.toString())}}),Boolean(g[b.keyForAPI])?T(u,{error:!0,sx:N.errorMessage,children:[b.label," is required"]}):C(k,{})]})]});case $.CHECKBOX:return T(k,{children:[C(l,{sx:N.label,htmlFor:`checkbox-${b.keyForAPI}`,children:b.label}),C(O,{name:b.keyForAPI,control:h,defaultValue:[],rules:{required:b?.isRequired&&`${b.label} is required`},render:({field:{value:e},fieldState:{error:t}})=>C(k,{children:C(s,{multiple:!0,id:`checkbox-${b.keyForAPI}`,options:I,value:e||[],onChange:(e,t)=>{const o=y?.id??"id",r=new Set,n=t.find((e=>{const t=q(e,o);return!!r.has(t)||(r.add(t),!1)}));if(n){const e=q(n,o);t=t.filter((t=>q(t,o)!==e))}p(b.keyForAPI,t,{shouldValidate:!0})},renderInput:e=>C(c,{...e,sx:N.textInput,placeholder:b.placeholder,slotProps:{formHelperText:{sx:N.errorMessage}},error:!!t,helperText:t?t.message:""}),getOptionLabel:e=>q(e,y?.label??"label")??"",renderOption:(t,r)=>{const n=q(r,y?.id??"id"),i=q(r,y?.label??"label"),a=e.some((e=>q(e,y?.id??"id")===n));return o("li",{...t,key:n?.toString()},C(d,{style:{marginRight:8},checked:a}),i?.toString())}})})})]})}return C(k,{})}function G(o){const{config:r,onSuccess:a,onExecuteAction:l,onCustomResponse:s,updateCustomFieldValue:c}=o,[d,m]=e(!1),u=S({defaultValues:{}}),{handleSubmit:x,setValue:b,reset:y}=u;t((()=>!1===Boolean(r?.steps?.length)?(I({}),()=>{}):(k(),()=>{})),[]);const I=async e=>{try{m(!0);const t=await async function(e){const{data:t}=await n({url:`${D}/${L.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:o.workflow,instanceID:o.instanceID,token:o.token,action:{name:r.name,payload:e}});a&&a(r.name),s&&Object.keys(t?.customResponse??{}).length&&s(t?.customResponse),l(t),y()}catch(e){n.isAxiosError(e)&&e.response?l({},e.response?.data?.errors??["Something went wrong"]):l({},["Something went wrong"])}finally{m(!1)}},k=()=>{const e=new Set;r.steps=r?.steps?.filter((t=>{const o=t;switch(o?.module){case U.CUSTOM_FIELD:return b(o?.context?.as,c(o?.context?.key)),!0;case U.CONTEXT_FIELD:return b(o?.context?.as,o?.context?.value),!0;default:{const t=e.has(o?.field?.keyForAPI);return e.add(o?.field?.keyForAPI),!1===t}}}))};return C(p,{sx:{p:2,justifyContent:"center"},children:d?T(i,{sx:Object.assign({p:3},N.centerContent),children:[C(M,{}),C(h,{color:"text.primary",variant:"h3",sx:N.title,children:"Loading..."})]}):T("form",{onSubmit:x(I),noValidate:!0,children:[C(h,{color:"text.primary",variant:"h4",sx:N.title,children:r?.meta?.title??j(r?.name)}),C(h,{color:"text.primary",variant:"subtitle1",sx:{mb:2,textAlign:"center"},children:r?.meta?.desc??""}),C(f,{direction:"column",sx:{gap:3},children:r.steps.map(((e,t)=>C(X,{form:u,step:e},`step-input-${t}`)))}),C(f,{sx:{mt:3},children:C(g,{variant:"contained",type:"submit",sx:N.button,children:"Submit"})})]})})}function V(o){const{who:a,token:l,start:s=!0,type:c="private",theme:d="light",instanceID:m,workflow:u,onInstanceChange:p,onError:w,onSuccess:E,onCustomResponse:A,handleCustomField:_=(()=>"")}=o,F=x("(prefers-color-scheme: dark)")?"dark":"light",O="system"===d?F:d,[S,$]=e(m),[U,B]=e(!0),[j,q]=e([]),[X,V]=e([]),[H,K]=e(!1);t((()=>!1===s?()=>{}:(B(!0),S?(async function(e){const{data:t}=await n({url:`${D}/${L.GET_CURRENT_ACTIONS_WITH_INSTANCE}/${e.instanceID}`,method:"GET",headers:{[R]:e.token}});return t.data}({instanceID:S,token:l}).then((e=>{q(Object.values(e))})).catch((e=>{n.isAxiosError(e)&&e.response?V(e.response?.data?.errors??["Something went wrong"]):V(["Something went wrong"])})).finally((()=>{B(!1)})),()=>{}):(async function(e){const{data:t}=await n({url:`${D}/${L.GET_CURRENT_ACTIONS_WITHOUT_INSTANCE}?name=${e.workflow}&type=${e.type}`,method:"GET",headers:{[R]:e.token}});return t.data}({token:l,workflow:u,type:c}).then((e=>{q(Object.values(e))})).catch((e=>{n.isAxiosError(e)&&e.response?V(e.response?.data?.errors??["Something went wrong"]):V(["Something went wrong"])})).finally((()=>{B(!1)})),()=>{}))),[s,H]),t((()=>{$(m)}),[m]),t((()=>{w&&X?.length&&w(X)}),[X]);const z=r((()=>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===s?C(k,{}):C(b,{theme:z,children:T(i,{sx:{backgroundColor:"var(--mstate-bg-color)",height:"100%",overflow:"auto"},children:[C(i,{sx:N.logo,onClick:()=>window.open("https://mobioffice.io"),children:C("img",{src:P.logo,alt:"logo",width:"100%"})}),U?T(i,{sx:{display:"flex",justifyContent:"center",alignItems:"center",flexDirection:"column",p:3},children:[C(M,{}),C(h,{color:"text.primary",variant:"h3",sx:N.title,children:"Loading..."})]}):X.length?T(i,{sx:Object.assign({p:3},N.centerContent),children:[C(i,{sx:{width:"100px",m:"auto"},children:C("img",{width:"100%",src:P.error,alt:"error"})}),C(y,{children:X.filter((e=>"string"==typeof e)).map(((e,t)=>C(I,{children:C(h,{color:"error",variant:"subtitle1",sx:N.title,children:e.replace(/instanceID='.*'/i,"")})},`error ${t}`)))}),C(g,{variant:"contained",onClick:()=>{j?.length||K(!H),V([])},sx:N.button,children:"Try Again"})]}):C(i,{children:j?.length?1===j.length?C(G,{token:l,onSuccess:E,onCustomResponse:A,instanceID:S,workflow:u,config:j[0],onExecuteAction:(e,t)=>{t?.length?(V(t),e.instanceID=t[0]?.split("instanceID='")?.pop()?.replace("'","")):q(e.actions),e?.instanceID&&e?.instanceID!==S&&!t?.length&&($(e?.instanceID),p&&p(e?.instanceID))},updateCustomFieldValue:_}):C(i,{children:C(f,{sx:{flexDirection:"row",flexWrap:"wrap",justifyContent:"center"},children:j.map((e=>!e?.who?.length||e?.who?.includes(a??"")?C(W,{meta:e?.meta,name:e?.name,onClick:()=>q([e])},`action-${e.name}`):C(k,{})))})}):C(i,{className:"box_center_to_modal",children:C(h,{color:"text.primary",variant:"h3",sx:N.title,children:"Workflow Ended"})})})]})})}!function(e,t){void 0===t&&(t={});var o=t.insertAt;if("undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],n=document.createElement("style");n.type="text/css","top"===o&&r.firstChild?r.insertBefore(n,r.firstChild):r.appendChild(n),n.styleSheet?n.styleSheet.cssText=e:n.appendChild(document.createTextNode(e))}}(":root{--mstate-input:#fff;--mstate-bg-color:#f1effc}");export{V as Mstate,V as default};
+import{useState as e,useEffect as t,createElement as o,useMemo as r}from"react";import n from"axios";import{Box as i,CircularProgress as a,InputLabel as l,Autocomplete as s,Checkbox as c,TextField as d,FormControl as m,FormHelperText as u,Container as p,Typography as h,Stack as f,Button as g,useMediaQuery as x,ThemeProvider as y,List as b,ListItem as I}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 D="https://api.mstate.mobioffice.io/api",R="secret-key",N={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"}},P={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 L=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.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 M(){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 j(e=""){return e.toUpperCase().replace(/_/gi," ")}function q(e,t){const o=t?t.split("."):[];let r=e;for(const e of o)r=r?.[e];return r}function W(e){const{name:t,meta:o,onClick:r}=e;return T(E,{sx:{maxWidth:250,width:"100%",m:2,borderRadius:5},onClick:r,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:o?.logo??P.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:o?.title??j(t)}),T(_,{color:"text.primary",variant:"body2",sx:{color:"text.secondary",textAlign:"center"},children:o?.desc})]})]})})}function X(r){const{step:i,form:a}=r,{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??{},b=y.mapper,[I,E]=e(y.itemList??[]);switch(t((()=>{y.request?.url&&async function(e,t){const{data:o}=await n(e);return q(o,t?.target??"")??[]}(y.request,b).then((e=>{E(e)})).catch((e=>{console.log(e)}))}),[]),x.fieldType){case $.INPUT_FIELD:case $.TEXT_AREA:return k(C,{children:[T(l,{sx:N.label,htmlFor:`text-${y.keyForAPI}`,children:y.label}),T(d,{multiline:x.fieldType===$.TEXT_AREA,minRows:3,id:`text-${y.keyForAPI}`,type:x.inputType,placeholder:y.placeholder,slotProps:{inputLabel:{shrink:"date"===x.inputType||void 0},formHelperText:{sx:N.errorMessage}},sx:N.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 k(C,{children:[T(l,{sx:N.label,htmlFor:`dropdown-${y.keyForAPI}`,children:y.label}),k(m,{children:[T(s,{id:`dropdown-${y.keyForAPI}`,options:I,...f(y.keyForAPI,{required:y?.isRequired&&`${y.label} is required`}),onChange:(e,t)=>{p(y.keyForAPI,t,{shouldValidate:!0})},renderInput:e=>o(d,{...e,sx:N.textInput,key:`input-${y.keyForAPI}`,placeholder:y.placeholder,error:Boolean(g[y.keyForAPI])}),getOptionLabel:e=>q(e,b?.label||"label")||"",renderOption:(e,t)=>{const r=q(t,b?.id||"id"),n=q(t,b?.label||"label");return o("li",{...e,key:r?.toString()},n?.toString())}}),Boolean(g[y.keyForAPI])?k(u,{error:!0,sx:N.errorMessage,children:[y.label," is required"]}):T(C,{})]})]});case $.CHECKBOX:return k(C,{children:[T(l,{sx:N.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(s,{multiple:!0,id:`checkbox-${y.keyForAPI}`,options:I,value:e||[],onChange:(e,t)=>{const o=b?.id||"id",r=new Set,n=t.find((e=>{const t=q(e,o);return!!r.has(t)||(r.add(t),!1)}));if(n){const e=q(n,o);t=t.filter((t=>q(t,o)!==e))}p(y.keyForAPI,t,{shouldValidate:!0})},renderInput:e=>T(d,{...e,sx:N.textInput,placeholder:y.placeholder,slotProps:{formHelperText:{sx:N.errorMessage}},error:!!t,helperText:t?t.message:""}),getOptionLabel:e=>q(e,b?.label||"label")||"",renderOption:(t,r)=>{const n=q(r,b?.id||"id"),i=q(r,b?.label||"label"),a=e.some((e=>q(e,b?.id||"id")===n));return o("li",{...t,key:n?.toString()},T(c,{style:{marginRight:8},checked:a}),i?.toString())}})})})]})}return T(C,{})}function G(o){const{config:r,onSuccess:a,onExecuteAction:l,onCustomResponse:s,updateCustomFieldValue:c}=o,[d,m]=e(!1),[u,x]=e([]),y=S({defaultValues:{}}),{handleSubmit:b,setValue:I,reset:C}=y;t((()=>!1===Boolean(r?.steps?.length)?(E({}),()=>{}):(w(),()=>{})),[]);const E=async e=>{try{m(!0);let t={};if(c)for(const e of u)t[e]=c(e);const i=await async function(e){const{data:t}=await n({url:`${D}/${L.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:o.workflow,instanceID:o.instanceID,token:o.token,action:{name:r.name,payload:Object.assign(e??{},t)}});a&&a(r.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{m(!1)}},w=()=>{const e=new Set;r.steps=r?.steps?.filter((t=>{const o=t;switch(o?.module){case U.CUSTOM_FIELD:return x(u.concat(o?.context?.key)),I(o?.context?.as,c(o?.context?.key)),!0;case U.CONTEXT_FIELD:return I(o?.context?.as,o?.context?.value),!0;default:{const t=e.has(o?.field?.keyForAPI);return e.add(o?.field?.keyForAPI),!1===t}}}))};return T(p,{sx:{p:2,justifyContent:"center"},children:d?k(i,{sx:Object.assign({p:3},N.centerContent),children:[T(M,{}),T(h,{color:"text.primary",variant:"h3",sx:N.title,children:"Loading..."})]}):k("form",{onSubmit:b(E),noValidate:!0,children:[T(h,{color:"text.primary",variant:"h4",sx:N.title,children:r?.meta?.title??j(r?.name)}),T(h,{color:"text.primary",variant:"subtitle1",sx:{mb:2,textAlign:"center"},children:r?.meta?.desc??""}),T(f,{direction:"column",sx:{gap:3},children:r.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:N.button,children:"Submit"})})]})})}function V(o){const{who:a,token:l,start:s=!0,type:c="private",theme:d="light",instanceID:m,workflow:u,onInstanceChange:p,onError:E,onSuccess:w,onCustomResponse:A,handleCustomField:_=(()=>"")}=o,F=x("(prefers-color-scheme: dark)")?"dark":"light",O="system"===d?F:d,[S,$]=e(m),[U,B]=e(!0),[j,q]=e([]),[X,V]=e([]),[H,K]=e(!1);t((()=>!1===s?()=>{}:(B(!0),S?(async function(e){const{data:t}=await n({url:`${D}/${L.GET_CURRENT_ACTIONS_WITH_INSTANCE}/${e.instanceID}`,method:"GET",headers:{[R]:e.token}});return t.data}({instanceID:S,token:l}).then((e=>{q(Object.values(e))})).catch((e=>{n.isAxiosError(e)&&e.response?V(e.response?.data?.errors??["Something went wrong"]):V(["Something went wrong"])})).finally((()=>{B(!1)})),()=>{}):(async function(e){const{data:t}=await n({url:`${D}/${L.GET_CURRENT_ACTIONS_WITHOUT_INSTANCE}?name=${e.workflow}&type=${e.type}`,method:"GET",headers:{[R]:e.token}});return t.data}({token:l,workflow:u,type:c}).then((e=>{q(Object.values(e))})).catch((e=>{n.isAxiosError(e)&&e.response?V(e.response?.data?.errors??["Something went wrong"]):V(["Something went wrong"])})).finally((()=>{B(!1)})),()=>{}))),[s,H]),t((()=>{$(m)}),[m]),t((()=>{E&&X?.length&&E(X)}),[X]);const z=r((()=>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===s?T(C,{}):T(y,{theme:z,children:k(i,{sx:{backgroundColor:"var(--mstate-bg-color)",height:"100%",overflow:"auto"},children:[T(i,{sx:N.logo,children:T("a",{href:"https://mobioffice.io",children:T("img",{src:P.logo,alt:"logo",width:"100%"})})}),U?k(i,{sx:{display:"flex",justifyContent:"center",alignItems:"center",flexDirection:"column",p:3},children:[T(M,{}),T(h,{color:"text.primary",variant:"h3",sx:N.title,children:"Loading..."})]}):X.length?k(i,{sx:Object.assign({p:3},N.centerContent),children:[T(i,{sx:{width:"100px",m:"auto"},children:T("img",{width:"100%",src:P.error,alt:"error"})}),T(b,{children:X.filter((e=>"string"==typeof e)).map(((e,t)=>T(I,{children:T(h,{color:"error",variant:"subtitle1",sx:N.title,children:e.replace(/instanceID='.*'/i,"")})},`error ${t}`)))}),T(g,{variant:"contained",onClick:()=>{j?.length||K(!H),V([])},sx:N.button,children:"Try Again"})]}):T(i,{children:j?.length?1===j.length?T(G,{token:l,onSuccess:w,onCustomResponse:A,instanceID:S,workflow:u,config:j[0],onExecuteAction:(e,t)=>{t?.length?(V(t),e.instanceID=t[0]?.split("instanceID='")?.pop()?.replace("'","")):q(e.actions),e?.instanceID&&e?.instanceID!==S&&!t?.length&&($(e?.instanceID),p&&p(e?.instanceID))},updateCustomFieldValue:_}):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:()=>q([e])},`action-${e.name}`):T(C,{})))})}):T(i,{className:"box_center_to_modal",children:T(h,{color:"text.primary",variant:"h3",sx:N.title,children:"Workflow Ended"})})})]})})}!function(e,t){void 0===t&&(t={});var o=t.insertAt;if("undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],n=document.createElement("style");n.type="text/css","top"===o&&r.firstChild?r.insertBefore(n,r.firstChild):r.appendChild(n),n.styleSheet?n.styleSheet.cssText=e:n.appendChild(document.createTextNode(e))}}(":root{--mstate-input:#fff;--mstate-bg-color:#f1effc}");export{V as Mstate,V 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"),i=require("@mui/material/CardContent"),s=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",m={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"}},radio:{"& fieldset":{border:"none"},borderRadius:"8px"},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"}},x={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(b,{})})}function b(){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 I(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(s,{component:"img",sx:{m:"auto",objectFit:"contain",height:"150px",width:"auto",borderRadius:"50%",my:2},image:c?.logo??x.icon,alt:"action"})}),o.jsx("hr",{style:{marginInline:"10px"}}),o.jsxs(i,{children:[o.jsx(a,{color:"text.primary",gutterBottom:!0,variant:"h5",component:"div",sx:{fontSize:"1.3rem",textAlign:"center"},children:c?.title??I(t)}),o.jsx(a,{color:"text.primary",variant:"body2",sx:{color:"text.secondary",textAlign:"center"},children:c?.desc})]})]})})}function C(n){const{step:i,form:s}=n,{setValue:a,control:l,register:d,formState:{errors:u}}=s,p=function(e){return void 0!==e?.config}(i)?i?.config?.data:i,x=p.field??{},h=x.mapper,[g,y]=e.useState(x.itemList??[]);switch(e.useEffect((()=>{x.request&&async function(e,r){const{data:o}=await t(e);return T(o,r?.target??"")??[]}(x.request,h).then((e=>{y(e)})).catch((e=>{console.log(e)}))}),[]),p.fieldType){case f.INPUT_FIELD:case f.TEXT_AREA:return o.jsxs(o.Fragment,{children:[o.jsx(r.InputLabel,{sx:m.label,htmlFor:`text-${x.keyForAPI}`,children:x.label}),o.jsx(r.TextField,{multiline:p.fieldType===f.TEXT_AREA,minRows:3,id:`text-${x.keyForAPI}`,type:p.inputType,placeholder:x.placeholder,slotProps:{inputLabel:{shrink:"date"===p.inputType||void 0},formHelperText:{sx:m.errorMessage}},sx:m.textInput,defaultValue:"",...d(x.keyForAPI,{required:x?.isRequired&&`${x.label} is required`}),error:Boolean(u[x.keyForAPI]),helperText:u?.[x.keyForAPI]?.message},`input-${x.keyForAPI}`)]});case f.DROP_DOWN:case f.RADIO_LIST:return o.jsxs(o.Fragment,{children:[o.jsx(r.InputLabel,{sx:m.label,htmlFor:`dropdown-${x.keyForAPI}`,children:x.label}),o.jsxs(r.FormControl,{children:[o.jsx(r.Autocomplete,{id:`dropdown-${x.keyForAPI}`,options:g,...d(x.keyForAPI,{required:x?.isRequired&&`${x.label} is required`}),onChange:(e,t)=>{a(x.keyForAPI,t,{shouldValidate:!0})},renderInput:t=>e.createElement(r.TextField,{...t,sx:m.textInput,key:`input-${x.keyForAPI}`,placeholder:x.placeholder,error:Boolean(u[x.keyForAPI])}),getOptionLabel:e=>T(e,h?.label??"label")??"",renderOption:(t,r)=>{const o=T(r,h?.id??"id"),n=T(r,h?.label??"label");return e.createElement("li",{...t,key:o?.toString()},n?.toString())}}),Boolean(u[x.keyForAPI])?o.jsxs(r.FormHelperText,{error:!0,sx:m.errorMessage,children:[x.label," is required"]}):o.jsx(o.Fragment,{})]})]});case f.CHECKBOX:return o.jsxs(o.Fragment,{children:[o.jsx(r.InputLabel,{sx:m.label,htmlFor:`checkbox-${x.keyForAPI}`,children:x.label}),o.jsx(c.Controller,{name:x.keyForAPI,control:l,defaultValue:[],rules:{required:x?.isRequired&&`${x.label} is required`},render:({field:{value:t},fieldState:{error:n}})=>o.jsx(o.Fragment,{children:o.jsx(r.Autocomplete,{multiple:!0,id:`checkbox-${x.keyForAPI}`,options:g,value:t||[],onChange:(e,t)=>{const r=h?.id??"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(x.keyForAPI,t,{shouldValidate:!0})},renderInput:e=>o.jsx(r.TextField,{...e,sx:m.textInput,placeholder:x.placeholder,slotProps:{formHelperText:{sx:m.errorMessage}},error:!!n,helperText:n?n.message:""}),getOptionLabel:e=>T(e,h?.label??"label")??"",renderOption:(n,i)=>{const s=T(i,h?.id??"id"),a=T(i,h?.label??"label"),l=t.some((e=>T(e,h?.id??"id")===s));return e.createElement("li",{...n,key:s?.toString()},o.jsx(r.Checkbox,{style:{marginRight:8},checked:l}),a?.toString())}})})})]})}return o.jsx(o.Fragment,{})}function k(n){const{config:i,onSuccess:s,onExecuteAction:a,onCustomResponse:l,updateCustomFieldValue:d}=n,[x,f]=e.useState(!1),b=c.useForm({defaultValues:{}}),{handleSubmit:T,setValue:j,reset:k}=b;e.useEffect((()=>!1===Boolean(i?.steps?.length)?(E({}),()=>{}):(w(),()=>{})),[]);const E=async e=>{try{f(!0);const r=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,action:{name:i.name,payload:e}});s&&s(i.name),l&&Object.keys(r?.customResponse??{}).length&&l(r?.customResponse),a(r),k()}catch(e){t.isAxiosError(e)&&e.response?a({},e.response?.data?.errors??["Something went wrong"]):a({},["Something went wrong"])}finally{f(!1)}},w=()=>{const e=new Set;i.steps=i?.steps?.filter((t=>{const r=t;switch(r?.module){case g.CUSTOM_FIELD:return j(r?.context?.as,d(r?.context?.key)),!0;case g.CONTEXT_FIELD:return j(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:x?o.jsxs(r.Box,{sx:Object.assign({p:3},m.centerContent),children:[o.jsx(y,{}),o.jsx(r.Typography,{color:"text.primary",variant:"h3",sx:m.title,children:"Loading..."})]}):o.jsxs("form",{onSubmit:T(E),noValidate:!0,children:[o.jsx(r.Typography,{color:"text.primary",variant:"h4",sx:m.title,children:i?.meta?.title??I(i?.name)}),o.jsx(r.Typography,{color:"text.primary",variant:"subtitle1",sx:{mb:2,textAlign:"center"},children:i?.meta?.desc??""}),o.jsx(r.Stack,{direction:"column",sx:{gap:3},children:i.steps.map(((e,t)=>o.jsx(C,{form:b,step:e},`step-input-${t}`)))}),o.jsx(r.Stack,{sx:{mt:3},children:o.jsx(r.Button,{variant:"contained",type:"submit",sx:m.button,children:"Submit"})})]})})}function E(n){const{who:i,token:s,start:a=!0,type:l="private",theme:c="light",instanceID:f,workflow:g,onInstanceChange:b,onError:I,onSuccess:T,onCustomResponse:C,handleCustomField:E=(()=>"")}=n,w=r.useMediaQuery("(prefers-color-scheme: dark)")?"dark":"light",F="system"===c?w:c,[A,S]=e.useState(f),[_,O]=e.useState(!0),[v,D]=e.useState([]),[R,P]=e.useState([]),[N,B]=e.useState(!1);e.useEffect((()=>!1===a?()=>{}:(O(!0),A?(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:A,token:s}).then((e=>{D(Object.values(e))})).catch((e=>{t.isAxiosError(e)&&e.response?P(e.response?.data?.errors??["Something went wrong"]):P(["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:s,workflow:g,type:l}).then((e=>{D(Object.values(e))})).catch((e=>{t.isAxiosError(e)&&e.response?P(e.response?.data?.errors??["Something went wrong"]):P(["Something went wrong"])})).finally((()=>{O(!1)})),()=>{}))),[a,N]),e.useEffect((()=>{S(f)}),[f]),e.useEffect((()=>{I&&R?.length&&I(R)}),[R]);const L=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"}})}(F)),[F]);return!1===a?o.jsx(o.Fragment,{}):o.jsx(r.ThemeProvider,{theme:L,children:o.jsxs(r.Box,{sx:{backgroundColor:"var(--mstate-bg-color)",height:"100%",overflow:"auto"},children:[o.jsx(r.Box,{sx:m.logo,onClick:()=>window.open("https://mobioffice.io"),children:o.jsx("img",{src:x.logo,alt:"logo",width:"100%"})}),_?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:m.title,children:"Loading..."})]}):R.length?o.jsxs(r.Box,{sx:Object.assign({p:3},m.centerContent),children:[o.jsx(r.Box,{sx:{width:"100px",m:"auto"},children:o.jsx("img",{width:"100%",src:x.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:m.title,children:e.replace(/instanceID='.*'/i,"")})},`error ${t}`)))}),o.jsx(r.Button,{variant:"contained",onClick:()=>{v?.length||B(!N),P([])},sx:m.button,children:"Try Again"})]}):o.jsx(r.Box,{children:v?.length?1===v.length?o.jsx(k,{token:s,onSuccess:T,onCustomResponse:C,instanceID:A,workflow:g,config:v[0],onExecuteAction:(e,t)=>{t?.length?(P(t),e.instanceID=t[0]?.split("instanceID='")?.pop()?.replace("'","")):D(e.actions),e?.instanceID&&e?.instanceID!==A&&!t?.length&&(S(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:v.map((e=>!e?.who?.length||e?.who?.includes(i??"")?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:m.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"),i=require("@mui/material/CardContent"),s=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",x="secret-key",m={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"}},p={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(b,{})})}function b(){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 I(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(s,{component:"img",sx:{m:"auto",objectFit:"contain",height:"150px",width:"auto",borderRadius:"50%",my:2},image:c?.logo??p.icon,alt:"action"})}),o.jsx("hr",{style:{marginInline:"10px"}}),o.jsxs(i,{children:[o.jsx(a,{color:"text.primary",gutterBottom:!0,variant:"h5",component:"div",sx:{fontSize:"1.3rem",textAlign:"center"},children:c?.title??I(t)}),o.jsx(a,{color:"text.primary",variant:"body2",sx:{color:"text.secondary",textAlign:"center"},children:c?.desc})]})]})})}function C(n){const{step:i,form:s}=n,{setValue:a,control:l,register:d,formState:{errors:u}}=s,x=function(e){return void 0!==e?.config}(i)?i?.config?.data:i,p=x.field??{},h=p.mapper,[g,y]=e.useState(p.itemList??[]);switch(e.useEffect((()=>{p.request?.url&&async function(e,r){const{data:o}=await t(e);return T(o,r?.target??"")??[]}(p.request,h).then((e=>{y(e)})).catch((e=>{console.log(e)}))}),[]),x.fieldType){case f.INPUT_FIELD:case f.TEXT_AREA:return o.jsxs(o.Fragment,{children:[o.jsx(r.InputLabel,{sx:m.label,htmlFor:`text-${p.keyForAPI}`,children:p.label}),o.jsx(r.TextField,{multiline:x.fieldType===f.TEXT_AREA,minRows:3,id:`text-${p.keyForAPI}`,type:x.inputType,placeholder:p.placeholder,slotProps:{inputLabel:{shrink:"date"===x.inputType||void 0},formHelperText:{sx:m.errorMessage}},sx:m.textInput,defaultValue:"",...d(p.keyForAPI,{required:p?.isRequired&&`${p.label} is required`}),error:Boolean(u[p.keyForAPI]),helperText:u?.[p.keyForAPI]?.message},`input-${p.keyForAPI}`)]});case f.DROP_DOWN:case f.RADIO_LIST:return o.jsxs(o.Fragment,{children:[o.jsx(r.InputLabel,{sx:m.label,htmlFor:`dropdown-${p.keyForAPI}`,children:p.label}),o.jsxs(r.FormControl,{children:[o.jsx(r.Autocomplete,{id:`dropdown-${p.keyForAPI}`,options:g,...d(p.keyForAPI,{required:p?.isRequired&&`${p.label} is required`}),onChange:(e,t)=>{a(p.keyForAPI,t,{shouldValidate:!0})},renderInput:t=>e.createElement(r.TextField,{...t,sx:m.textInput,key:`input-${p.keyForAPI}`,placeholder:p.placeholder,error:Boolean(u[p.keyForAPI])}),getOptionLabel:e=>T(e,h?.label||"label")||"",renderOption:(t,r)=>{const o=T(r,h?.id||"id"),n=T(r,h?.label||"label");return e.createElement("li",{...t,key:o?.toString()},n?.toString())}}),Boolean(u[p.keyForAPI])?o.jsxs(r.FormHelperText,{error:!0,sx:m.errorMessage,children:[p.label," is required"]}):o.jsx(o.Fragment,{})]})]});case f.CHECKBOX:return o.jsxs(o.Fragment,{children:[o.jsx(r.InputLabel,{sx:m.label,htmlFor:`checkbox-${p.keyForAPI}`,children:p.label}),o.jsx(c.Controller,{name:p.keyForAPI,control:l,defaultValue:[],rules:{required:p?.isRequired&&`${p.label} is required`},render:({field:{value:t},fieldState:{error:n}})=>o.jsx(o.Fragment,{children:o.jsx(r.Autocomplete,{multiple:!0,id:`checkbox-${p.keyForAPI}`,options:g,value:t||[],onChange:(e,t)=>{const r=h?.id||"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(p.keyForAPI,t,{shouldValidate:!0})},renderInput:e=>o.jsx(r.TextField,{...e,sx:m.textInput,placeholder:p.placeholder,slotProps:{formHelperText:{sx:m.errorMessage}},error:!!n,helperText:n?n.message:""}),getOptionLabel:e=>T(e,h?.label||"label")||"",renderOption:(n,i)=>{const s=T(i,h?.id||"id"),a=T(i,h?.label||"label"),l=t.some((e=>T(e,h?.id||"id")===s));return e.createElement("li",{...n,key:s?.toString()},o.jsx(r.Checkbox,{style:{marginRight:8},checked:l}),a?.toString())}})})})]})}return o.jsx(o.Fragment,{})}function k(n){const{config:i,onSuccess:s,onExecuteAction:a,onCustomResponse:l,updateCustomFieldValue:d}=n,[p,f]=e.useState(!1),[b,T]=e.useState([]),j=c.useForm({defaultValues:{}}),{handleSubmit:k,setValue:E,reset:w}=j;e.useEffect((()=>!1===Boolean(i?.steps?.length)?(F({}),()=>{}):(A(),()=>{})),[]);const F=async e=>{try{f(!0);let r={};if(d)for(const e of b)r[e]=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,action:{name:i.name,payload:Object.assign(e??{},r)}});s&&s(i.name),l&&Object.keys(o?.customResponse??{}).length&&l(o?.customResponse),T([]),a(o),w()}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;i.steps=i?.steps?.filter((t=>{const r=t;switch(r?.module){case g.CUSTOM_FIELD:return T(b.concat(r?.context?.key)),E(r?.context?.as,d(r?.context?.key)),!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:p?o.jsxs(r.Box,{sx:Object.assign({p:3},m.centerContent),children:[o.jsx(y,{}),o.jsx(r.Typography,{color:"text.primary",variant:"h3",sx:m.title,children:"Loading..."})]}):o.jsxs("form",{onSubmit:k(F),noValidate:!0,children:[o.jsx(r.Typography,{color:"text.primary",variant:"h4",sx:m.title,children:i?.meta?.title??I(i?.name)}),o.jsx(r.Typography,{color:"text.primary",variant:"subtitle1",sx:{mb:2,textAlign:"center"},children:i?.meta?.desc??""}),o.jsx(r.Stack,{direction:"column",sx:{gap:3},children:i.steps.map(((e,t)=>o.jsx(C,{form:j,step:e},`step-input-${t}`)))}),o.jsx(r.Stack,{sx:{mt:3},children:o.jsx(r.Button,{variant:"contained",type:"submit",sx:m.button,children:"Submit"})})]})})}function E(n){const{who:i,token:s,start:a=!0,type:l="private",theme:c="light",instanceID:f,workflow:g,onInstanceChange:b,onError:I,onSuccess:T,onCustomResponse:C,handleCustomField:E=(()=>"")}=n,w=r.useMediaQuery("(prefers-color-scheme: dark)")?"dark":"light",F="system"===c?w:c,[A,S]=e.useState(f),[_,O]=e.useState(!0),[v,D]=e.useState([]),[P,R]=e.useState([]),[N,B]=e.useState(!1);e.useEffect((()=>!1===a?()=>{}:(O(!0),A?(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:A,token:s}).then((e=>{D(Object.values(e))})).catch((e=>{t.isAxiosError(e)&&e.response?R(e.response?.data?.errors??["Something went wrong"]):R(["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:{[x]:e.token}});return r.data}({token:s,workflow:g,type:l}).then((e=>{D(Object.values(e))})).catch((e=>{t.isAxiosError(e)&&e.response?R(e.response?.data?.errors??["Something went wrong"]):R(["Something went wrong"])})).finally((()=>{O(!1)})),()=>{}))),[a,N]),e.useEffect((()=>{S(f)}),[f]),e.useEffect((()=>{I&&P?.length&&I(P)}),[P]);const L=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"}})}(F)),[F]);return!1===a?o.jsx(o.Fragment,{}):o.jsx(r.ThemeProvider,{theme:L,children:o.jsxs(r.Box,{sx:{backgroundColor:"var(--mstate-bg-color)",height:"100%",overflow:"auto"},children:[o.jsx(r.Box,{sx:m.logo,children:o.jsx("a",{href:"https://mobioffice.io",children:o.jsx("img",{src:p.logo,alt:"logo",width:"100%"})})}),_?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:m.title,children:"Loading..."})]}):P.length?o.jsxs(r.Box,{sx:Object.assign({p:3},m.centerContent),children:[o.jsx(r.Box,{sx:{width:"100px",m:"auto"},children:o.jsx("img",{width:"100%",src:p.error,alt:"error"})}),o.jsx(r.List,{children:P.filter((e=>"string"==typeof e)).map(((e,t)=>o.jsx(r.ListItem,{children:o.jsx(r.Typography,{color:"error",variant:"subtitle1",sx:m.title,children:e.replace(/instanceID='.*'/i,"")})},`error ${t}`)))}),o.jsx(r.Button,{variant:"contained",onClick:()=>{v?.length||B(!N),R([])},sx:m.button,children:"Try Again"})]}):o.jsx(r.Box,{children:v?.length?1===v.length?o.jsx(k,{token:s,onSuccess:T,onCustomResponse:C,instanceID:A,workflow:g,config:v[0],onExecuteAction:(e,t)=>{t?.length?(R(t),e.instanceID=t[0]?.split("instanceID='")?.pop()?.replace("'","")):D(e.actions),e?.instanceID&&e?.instanceID!==A&&!t?.length&&(S(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:v.map((e=>!e?.who?.length||e?.who?.includes(i??"")?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:m.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;

package/package.json

@@ -1,57 +1,59 @@
-{
-  "name": "mstate-react",
-  "version": "1.5.4",
-  "main": "dist/index.js",
-  "module": "dist/index.esm.js",
-  "types": "dist/types/index.d.ts",
-  "files": [
-    "dist"
-  ],
-  "keywords": [
-    "mstate",
-    "workflow",
-    "mobioffice"
-  ],
-  "scripts": {
-    "prod": "npm run build",
-    "dev": "rollup -c --watch",
-    "build": "rollup -c"
-  },
-  "peerDependencies": {
-    "@emotion/react": "^11.13.3",
-    "@emotion/styled": "^11.13.0",
-    "@mui/material": "^6.1.5",
-    "axios": "^1.7.7",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "react-hook-form": "^7.53.1"
-  },
-  "dependencies": {
-    "@emotion/react": "^11.13.3",
-    "@emotion/styled": "^11.13.0",
-    "@mui/material": "^6.1.5",
-    "@rollup/plugin-typescript": "^11.1.6",
-    "@rollup/plugin-url": "^8.0.2",
-    "@svgr/rollup": "^8.1.0",
-    "axios": "^1.7.7",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "react-hook-form": "^7.53.1",
-    "rollup-plugin-dts": "^6.1.1",
-    "rollup-plugin-postcss": "^4.0.2"
-  },
-  "devDependencies": {
-    "@rollup/plugin-alias": "^5.1.1",
-    "@rollup/plugin-babel": "^6.0.4",
-    "@rollup/plugin-commonjs": "^25.0.8",
-    "@rollup/plugin-json": "^6.1.0",
-    "@rollup/plugin-node-resolve": "^15.2.3",
-    "@rollup/plugin-terser": "^0.4.4",
-    "@types/react": "^18.3.3",
-    "@types/react-dom": "^18.3.0",
-    "rollup": "^4.18.0",
-    "rollup-plugin-peer-deps-external": "^2.2.4",
-    "rollup-plugin-typescript2": "^0.36.0",
-    "typescript": "^5.4.5"
-  }
-}
+{
+  "name": "mstate-react",
+  "version": "1.5.6",
+  "main": "dist/index.js",
+  "module": "dist/index.esm.js",
+  "types": "dist/types/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "keywords": [
+    "mstate",
+    "workflow",
+    "mobioffice"
+  ],
+  "scripts": {
+    "prod": "npm run build",
+    "dev": "rollup -c --watch",
+    "link": "npm link",
+    "deploy": "npm run build && npm publish",
+    "build": "rollup -c"
+  },
+  "peerDependencies": {
+    "@emotion/react": "^11.13.3",
+    "@emotion/styled": "^11.13.0",
+    "@mui/material": "^6.1.5",
+    "axios": "^1.7.7",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-hook-form": "^7.53.1"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.13.3",
+    "@emotion/styled": "^11.13.0",
+    "@mui/material": "^6.1.5",
+    "@rollup/plugin-typescript": "^11.1.6",
+    "@rollup/plugin-url": "^8.0.2",
+    "@svgr/rollup": "^8.1.0",
+    "axios": "^1.7.7",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-hook-form": "^7.53.1",
+    "rollup-plugin-dts": "^6.1.1",
+    "rollup-plugin-postcss": "^4.0.2"
+  },
+  "devDependencies": {
+    "@rollup/plugin-alias": "^5.1.1",
+    "@rollup/plugin-babel": "^6.0.4",
+    "@rollup/plugin-commonjs": "^25.0.8",
+    "@rollup/plugin-json": "^6.1.0",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-terser": "^0.4.4",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "rollup": "^4.18.0",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-typescript2": "^0.36.0",
+    "typescript": "^5.4.5"
+  }
+}