https://www.setster.com/docs/assets/js/b6f869c4.568cc922.js

1"use strict";(self.webpackChunkdeveloper_portal=self.webpackChunkdeveloper_portal||[]).push([[5007],{16880:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>u,contentTitle:()=>d,default:()=>g,frontMatter:()=>l,metadata:()=>p,toc:()=>h});var o=n(85893),i=n(11151),r=n(40874),s=n(13008),a=(n(36938),n(31706)),c=n(53438);const l={hide_title:!0,sidebar_label:"Booking Step Models",title:"Overview of Booking Steps Configuration in Setster Studio",description:"An all-encompassing guide to configuring various booking steps in Setster Studio, enhancing the booking process for users.",keywords:["Booking Steps","Configuration Overview","Setster Studio","User Guide"],id:"overview"},d="Booking Steps ",p={id:"configuration/step-types/booking/overview",title:"Overview of Booking Steps Configuration in Setster Studio",description:"An all-encompassing guide to configuring various booking steps in Setster Studio, enhancing the booking process for users.",source:"@site/versioned_docs/version-1.1.0-alpha/configuration/step-types/booking/overview.mdx",sourceDirName:"configuration/step-types/booking",slug:"/configuration/step-types/booking/overview",permalink:"/docs/studio/configuration/step-types/booking/overview",draft:!1,unlisted:!1,tags:[],version:"1.1.0-alpha",frontMatter:{hide_title:!0,sidebar_label:"Booking Step Models",title:"Overview of Booking Steps Configuration in Setster Studio",description:"An all-encompassing guide to configuring various booking steps in Setster Studio, enhancing the booking process for users.",keywords:["Booking Steps","Configuration Overview","Setster Studio","User Guide"],id:"overview"},sidebar:"docs",previous:{title:"Overview",permalink:"/docs/studio/configuration/step-types/overview/"},next:{title:"Services Model",permalink:"/docs/studio/configuration/step-types/booking/services"}},u={},h=[{value:"How it works",id:"how-it-works",level:2},{value:"Flow",id:"flow",level:3},{value:"Models",id:"models",level:3}];function m(e){const t={a:"a",admonition:"admonition",code:"code",h1:"h1",h2:"h2",h3:"h3",mermaid:"mermaid",p:"p",pre:"pre",strong:"strong",...(0,i.a)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(t.h1,{id:"booking-steps-",children:["Booking Steps ",(0,o.jsx)("div",{className:"small-tag",children:(0,o.jsx)(s.Z,{label:"Collect Appointment Info"})})]}),"\n",(0,o.jsx)(r.ZP,{}),"\n",(0,o.jsx)(t.p,{children:"This coding example opens in CodeSandbox in a new tab so you can review the booking step configuration, modify the settings.json file, and preview how appointment booking step changes affect the flow."}),"\n",(0,o.jsx)("a",{className:"button button--primary button--lg",href:"https://codesandbox.io/p/sandbox/default-appointment-booking-steps-ml9l9h",rel:"noopener noreferrer",style:{alignItems:"center",display:"inline-flex"},target:"_blank",children:(0,o.jsx)("span",{children:"Open Booking Steps Sandbox"})}),"\n",(0,o.jsx)(t.h2,{id:"how-it-works",children:"How it works"}),"\n",(0,o.jsxs)(t.p,{children:["All booking models listed below must be defined in the settings ",(0,o.jsx)(t.code,{children:"steps"})," property to create an appointment booking successfully."]}),"\n",(0,o.jsx)(t.mermaid,{value:" flowchart LR;\n  C([services]) --\x3e D\n  D([staff]) --\x3e E\n  E([locations]) --\x3e F\n  F([availability]) --\x3e G\n  F([availability]) --\x3e H\n  G([appointment])\n  H([cancel-appointment])"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-json",metastring:'title="settings.json"',children:'{\n  "name_your_step": {\n    // highlight-next-line\n    "type": "booking",\n    // See Models section below.\n    "model": ""\n  }\n}\n'})}),"\n",(0,o.jsx)(t.admonition,{type:"note",children:(0,o.jsxs)(t.p,{children:["All steps of ",(0,o.jsx)(t.code,{children:"type:booking"})," are required to have a ",(0,o.jsx)(t.code,{children:"model"})," property defined."]})}),"\n",(0,o.jsx)(t.h3,{id:"flow",children:"Flow"}),"\n",(0,o.jsxs)(t.p,{children:["The user should go through each of the models as configured in the normal logic flow documented in the ",(0,o.jsx)(t.a,{href:"/docs/studio/configuration/logic-flow/overview",children:(0,o.jsx)(t.strong,{children:"logic flow"})})," section."]}),"\n",(0,o.jsx)(t.admonition,{type:"caution",children:(0,o.jsx)(t.p,{children:"Be sure to add the cancel and reschedule flows 

1so that clients can cancel and reschedule their appointments."})}),"\n",(0,o.jsx)(t.h3,{id:"models",children:"Models"}),"\n",(0,o.jsx)(a.Z,{selectedCards:["Services Model","Locations Model","Staff Model","Availability Model","Appointment Model","Cancel Model"],items:(0,c.jA)().items})]})}function g(e={}){const{wrapper:t}={...(0,i.a)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(m,{...e})}):m(e)}},40874:(e,t,n)=>{n.d(t,{ZP:()=>s});var o=n(85893),i=n(11151);function r(e){const t={code:"code",p:"p",...(0,i.a)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.p,{children:"Booking steps are a collection of steps that are required for completeing appointment bookings with an organization's service providers."}),"\n",(0,o.jsxs)(t.p,{children:["There are six models under the step ",(0,o.jsx)(t.code,{children:"type: booking"})," that each serve a distinct purpose in the appointment booking flow which follow a similar pattern to those seen in the Setster API Models docs."]})]})}function s(e={}){const{wrapper:t}={...(0,i.a)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(r,{...e})}):r(e)}},61564:(e,t,n)=>{n.d(t,{Z:()=>g});n(67294);var o=n(90512),i=n(33692),r=n(53438),s=n(13919),a=n(95999),c=n(92503);const l={cardContainer:"cardContainer_fWXF",cardTitle:"cardTitle_rnsV",cardDescription:"cardDescription_PWke"};var d=n(85893);function p(e){let{href:t,children:n}=e;return(0,d.jsx)(i.Z,{href:t,className:(0,o.Z)("card padding--lg",l.cardContainer),children:n})}function u(e){let{href:t,icon:n,title:i,description:r}=e;return(0,d.jsxs)(p,{href:t,children:[(0,d.jsxs)(c.Z,{as:"h2",className:(0,o.Z)("text--truncate",l.cardTitle),title:i,children:[n," ",i]}),r&&(0,d.jsx)("p",{className:(0,o.Z)("text--truncate",l.cardDescription),title:r,children:r})]})}function h(e){let{item:t}=e;const n=(0,r.LM)(t);return n?(0,d.jsx)(u,{href:n,icon:"\ud83d\uddc3\ufe0f",title:t.label,description:t.description??(0,a.translate)({message:"{count} items",id:"theme.docs.DocCard.categoryDescription",description:"The default description for a category card in the generated index about how many items this category includes"},{count:t.items.length})}):null}function m(e){let{item:t}=e;const n=(0,s.Z)(t.href)?"\ud83d\udcc4\ufe0f":"\ud83d\udd17",o=(0,r.xz)(t.docId??void 0);return(0,d.jsx)(u,{href:t.href,icon:n,title:t.label,description:t.description??o?.description})}function g(e){let{item:t}=e;switch(t.type){case"link":return(0,d.jsx)(m,{item:t});case"category":return(0,d.jsx)(h,{item:t});default:throw new Error(`unknown item type ${JSON.stringify(t)}`)}}},13008:(e,t,n)=>{n.d(t,{Z:()=>a});n(67294);var o=n(90512),i=n(33692);const r={tag:"tag_zVej",tagRegular:"tagRegular_sFm0",tagWithCount:"tagWithCount_h2kH"};var s=n(85893);function a(e){let{permalink:t,label:n,count:a}=e;return(0,s.jsxs)(i.Z,{href:t,className:(0,o.Z)(r.tag,a?r.tagWithCount:r.tagRegular),children:[n,a&&(0,s.jsx)("span",{children:a})]})}},36938:(e,t,n)=>{n.d(t,{Z:()=>r});n(67294);var o=n(61564),i=n(85893);function r(e){let{items:t,selectedCards:n,subItems:r}=e;r&&console.log(t),r&&(t=t[0].items);const s=[];return JSON.parse(JSON.stringify(t)).filter((e=>(e.docId=e.href.replace("/docs/studio/",""),e.type="link",n.includes(e.label)))).forEach((e=>s.push((0,i.jsx)(o.Z,{item:e})))),(0,i.jsx)("div",{className:"customDocCards",children:s})}},31706:(e,t,n)=>{n.d(t,{Z:()=>r});n(67294),n(61564);var o=n(52256),i=n(85893);function r(e){let{items:t,selectedCards:n}=e;const r=[],s=JSON.parse(JSON.stringify(t));return s.filter((e=>n.includes(e.label))),s.forEach((e=>{console.log(JSON.stringify(e)),r.push((0,i.jsx)(o.Z,{fluid:!0,href:e.href,header:e.label,description:e.customProps?e.customProps.about_partial:e.description}))})),(0,i.jsx)("div",{className:"customDocCards",children:(0,i.jsx)(o.Z.Group,{children:r})})}},52256:(e,t,n)=>{n.d(t,{Z:()=>Z});var o=n(87462),i=n(94578),r=n(56117),s=n(67294),a=n(98459),c=n(28935),l=n(12519),d=n(92248),p=n(47257),u=n(80727);function h(e){var t=e.children,n=e.className,i=e.content,p=e.textAlign,u=(0,r.Z)((0,a.X4)(p),"description",n),m=(0,c.Z)(h,e),g=(0,l.Z)(h,e);return s.createElement(g,(0,o.Z)({},m,{className:u}),d.kK(t)?i:t)}h.handledProps=["as","children","className","content","textAlign"],h.propTypes={};const m=h;function g(e){var t=e.children,n=e.className,i=e.content,p=e.textAlign,u=(0,r.Z)((0,a.X4)(p),"header",n),h=(0,c.Z)(g,e),m=(0,l.Z)(g,e);return s.createElement(m,(0,o.Z)({},h,{className:u}),d.kK(t)?i:t)}g.handledProps=["as","children","className","content","textAlign"],g.propT

1ypes={};const f=g;function x(e){var t=e.children,n=e.className,i=e.content,p=e.textAlign,u=(0,r.Z)((0,a.X4)(p),"meta",n),h=(0,c.Z)(x,e),m=(0,l.Z)(x,e);return s.createElement(m,(0,o.Z)({},h,{className:u}),d.kK(t)?i:t)}x.handledProps=["as","children","className","content","textAlign"],x.propTypes={};const v=x;function k(e){var t=e.children,n=e.className,i=e.content,p=e.description,h=e.extra,g=e.header,x=e.meta,b=e.textAlign,w=(0,r.Z)((0,a.lG)(h,"extra"),(0,a.X4)(b),"content",n),j=(0,c.Z)(k,e),y=(0,l.Z)(k,e);return d.kK(t)?d.kK(i)?s.createElement(y,(0,o.Z)({},j,{className:w}),(0,u.Go)(f,(function(e){return{content:e}}),g,{autoGenerateKey:!1}),(0,u.Go)(v,(function(e){return{content:e}}),x,{autoGenerateKey:!1}),(0,u.Go)(m,(function(e){return{content:e}}),p,{autoGenerateKey:!1})):s.createElement(y,(0,o.Z)({},j,{className:w}),i):s.createElement(y,(0,o.Z)({},j,{className:w}),t)}k.handledProps=["as","children","className","content","description","extra","header","meta","textAlign"],k.propTypes={};const b=k;var w=n(43836);function j(e){var t=e.centered,n=e.children,i=e.className,p=e.content,u=e.doubling,h=e.items,m=e.itemsPerRow,g=e.stackable,f=e.textAlign,x=(0,r.Z)("ui",(0,a.lG)(t,"centered"),(0,a.lG)(u,"doubling"),(0,a.lG)(g,"stackable"),(0,a.X4)(f),(0,a.H0)(m),"cards",i),v=(0,c.Z)(j,e),k=(0,l.Z)(j,e);if(!d.kK(n))return s.createElement(k,(0,o.Z)({},v,{className:x}),n);if(!d.kK(p))return s.createElement(k,(0,o.Z)({},v,{className:x}),p);var b=(0,w.Z)(h,(function(e){var t,n=null!=(t=e.key)?t:[e.header,e.description].join("-");return s.createElement(Z,(0,o.Z)({key:n},e))}));return s.createElement(k,(0,o.Z)({},v,{className:x}),b)}j.handledProps=["as","centered","children","className","content","doubling","items","itemsPerRow","stackable","textAlign"],j.propTypes={};const y=j;var Z=function(e){function t(){for(var t,n=arguments.length,o=new Array(n),i=0;i<n;i++)o[i]=arguments[i];return(t=e.call.apply(e,[this].concat(o))||this).handleClick=function(e){var n=t.props.onClick;n&&n(e,t.props)},t}return(0,i.Z)(t,e),t.prototype.render=function(){var e=this.props,n=e.centered,i=e.children,u=e.className,h=e.color,m=e.content,g=e.description,f=e.extra,x=e.fluid,v=e.header,k=e.href,w=e.image,j=e.link,y=e.meta,Z=e.onClick,N=e.raised,S=(0,r.Z)("ui",h,(0,a.lG)(n,"centered"),(0,a.lG)(x,"fluid"),(0,a.lG)(j,"link"),(0,a.lG)(N,"raised"),"card",u),C=(0,c.Z)(t,this.props),A=(0,l.Z)(t,this.props,(function(){if(Z)return"a"}));return d.kK(i)?d.kK(m)?s.createElement(A,(0,o.Z)({},C,{className:S,href:k,onClick:this.handleClick}),p.Z.create(w,{autoGenerateKey:!1,defaultProps:{ui:!1,wrapped:!0}}),(g||v||y)&&s.createElement(b,{description:g,header:v,meta:y}),f&&s.createElement(b,{extra:!0},f)):s.createElement(A,(0,o.Z)({},C,{className:S,href:k,onClick:this.handleClick}),m):s.createElement(A,(0,o.Z)({},C,{className:S,href:k,onClick:this.handleClick}),i)},t}(s.Component);Z.handledProps=["as","centered","children","className","color","content","description","extra","fluid","header","href","image","link","meta","onClick","raised"],Z.propTypes={},Z.Content=b,Z.Description=m,Z.Group=y,Z.Header=f,Z.Meta=v},11151:(e,t,n)=>{n.d(t,{Z:()=>a,a:()=>s});var o=n(67294);const i={},r=o.createContext(i);function s(e){const t=o.useContext(r);return o.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:s(e.components),o.createElement(r.Provider,{value:t},e.children)}}}]);