@prismatic-io/embedded/dist/index.cjs

Embed Prismatic's integration marketplace and workflow designer within your existing application.

Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=Object.getOwnPropertyNames,i=Object.getPrototypeOf,a=Object.prototype.hasOwnProperty,o=(e,n)=>{let r={};for(var i in e)t(r,i,{get:e[i],enumerable:!0});return n||t(r,Symbol.toStringTag,{value:`Module`}),r},s=(e,i,o,s)=>{if(i&&typeof i==`object`||typeof i==`function`)for(var c=r(i),l=0,u=c.length,d;l<u;l++)d=c[l],!a.call(e,d)&&d!==o&&t(e,d,{get:(e=>i[e]).bind(null,d),enumerable:!(s=n(i,d))||s.enumerable});return e},c=(n,r,a)=>(a=n==null?{}:e(i(n)),s(r||!n||!n.__esModule?t(a,`default`,{value:n,enumerable:!0}):a,n));let l=require(`lodash.merge`);l=c(l);let u=require(`url-join`);u=c(u);const d={filters:{},initComplete:!1,jwt:``,embeddedDesignerEnabled:!1,prismaticUrl:`https://app.prismatic.io`,screenConfiguration:void 0,theme:void 0,fontConfiguration:void 0,translation:void 0},ee=new Set(Object.keys(d)),f=e=>ee.has(e),p=(e,t,n)=>{e[t]=n},m=new class{constructor(e){this.state=null,this.defaultState=e}getInitialState(){return JSON.parse(JSON.stringify(this.defaultState))}getStateCopy(){return this.state?JSON.parse(JSON.stringify(this.state)):this.getInitialState()}setState(e){this.state=e}}(d),h=e=>{if(!m.getStateCopy().initComplete)throw Error(`Expected init to be called before calling ${e}`);if(!m.getStateCopy().jwt&&e!==`authenticate`)throw Error(`Expected authenticate to be called before calling ${e}`)},g=e=>e.usePopover===!0;let _=function(e){return e.INSTANCE_CONFIGURATION_CANCELED=`INSTANCE_CONFIGURATION_CANCELED`,e.INSTANCE_CONFIGURATION_CLOSED=`INSTANCE_CONFIGURATION_CLOSED`,e.INSTANCE_CONFIGURATION_LOADED=`INSTANCE_CONFIGURATION_LOADED`,e.INSTANCE_CONFIGURATION_PAGE_LOADED=`INSTANCE_CONFIGURATION_PAGE_LOADED`,e.INSTANCE_CONFIGURATION_OPENED=`INSTANCE_CONFIGURATION_OPENED`,e.INSTANCE_CREATED=`INSTANCE_CREATED`,e.INSTANCE_DELETED=`INSTANCE_DELETED`,e.INSTANCE_DEPLOYED=`INSTANCE_DEPLOYED`,e.MARKETPLACE_CLOSED=`MARKETPLACE_CLOSED`,e.POPOVER_CLOSE_REQUESTED=`POPOVER_CLOSE_REQUESTED`,e.POPOVER_CLOSED=`POPOVER_CLOSED`,e.SET_CONFIG_VAR=`SET_CONFIG_VAR`,e.SET_FILTERS=`SET_FILTERS`,e.SET_SCREEN_CONFIGURATION=`SET_SCREEN_CONFIGURATION`,e.SET_TOKEN=`SET_TOKEN`,e.SET_TRANSLATION=`SET_TRANSLATION`,e.SET_VERSION=`SET_VERSION`,e.USER_CONFIGURATION_CLOSED=`USER_CONFIGURATION_CLOSED`,e.USER_CONFIGURATION_DELETED=`USER_CONFIGURATION_DELETED`,e.USER_CONFIGURATION_DEPLOYED=`USER_CONFIGURATION_DEPLOYED`,e.USER_CONFIGURATION_LOADED=`USER_CONFIGURATION_LOADED`,e.USER_CONFIGURATION_PAGE_LOADED=`USER_CONFIGURATION_PAGE_LOADED`,e.USER_CONFIGURATION_OPENED=`USER_CONFIGURATION_OPENED`,e.WORKFLOW_ENABLED=`WORKFLOW_ENABLED`,e.WORKFLOW_DELETED=`WORKFLOW_DELETED`,e.WORKFLOW_DISABLED=`WORKFLOW_DISABLED`,e}({});const te=()=>document.querySelector(D),ne=()=>{te()?.classList.add(O)},v=()=>{let e=j(`${T} > iframe`);M(e)&&(e.contentWindow?.postMessage({event:`MARKETPLACE_CLOSED`},`*`),window.postMessage({event:`POPOVER_CLOSED`},`*`),te()?.classList.remove(O))},y=e=>Array.from(document.getElementsByTagName(`iframe`)).find(t=>t.contentWindow===e.source),re=e=>`iframe`in e,b=e=>{let t=re(e)?e.iframe:ae(e.selector);M(t)&&t.contentWindow?.postMessage(e.event,`*`)},x=`pio__embedded`,S=`pio__iframe`,C=`pio__iframe-preload`,ie=`pio__styles`,w=`pio__iframeContainer`,T=`#${x} .${w}`,E=`pio__overlay`,D=`#${x} > .${E}`,O=`${E}--is_visible`,k=`pio__popover`,A=`pio__closeBtn`,j=e=>document.querySelector(e),ae=e=>document.querySelector(`${e||T} > iframe`),M=e=>!!(e&&e.tagName===`IFRAME`),N=(e,t,n)=>{!g(t)&&!t.selector&&console.error(`Could not find display selector.`);let r=j(g(t)?T:t.selector);if(!r)return;let i=m.getStateCopy();t&&Object.entries(t).forEach(([e,t])=>{if(f(e)){let n=i[e];p(i,e,n instanceof Object?(0,l.default)(n,t):t)}});let a=new URLSearchParams({...n,embed:`true`});i.theme&&a.set(`theme`,i.theme),i.screenConfiguration?.initializing&&a.set(`initializing`,JSON.stringify(i.screenConfiguration.initializing)),i.fontConfiguration&&a.set(`fontConfiguration`,JSON.stringify(i.fontConfiguration)),r.innerHTML=`
    <iframe
      id="${S}"
      src="${`${(0,u.default)(i.prismaticUrl,e)}?${a}`}"
      height="100%"
      width="100%"
      frameBorder="0"
      allow="clipboard-read; clipboard-write"
    ></iframe>
  `;let o=r.querySelector(`iframe`);if(o){let e=new AbortController;oe(e),window.addEventListener(`message`,e=>{e.data?.event===`PRISMATIC_INITIALIZED`?(b({iframe:o,event:{event:`SET_TOKEN`,data:i.jwt}}),b({iframe:o,event:{event:`SET_VERSION`,data:`4.12.1`}}),b({iframe:o,event:{event:`SET_TRANSLATION`,data:i.translation}}),b({iframe:o,event:{event:`SET_SCREEN_CONFIGURATION`,data:g(t)?{...i.screenConfiguration??{},isInPopover:!0}:i.screenConfiguration}}),b({iframe:o,event:{event:`SET_FILTERS`,data:i.filters}})):e.data?.event===`POPOVER_CLOSE_REQUESTED`&&v()},{signal:e.signal}),t?.autoFocusIframe!==!1&&o.addEventListener(`mouseenter`,()=>{o.focus()},{signal:e.signal})}g(t)&&ne()},oe=e=>{new MutationObserver((t,n)=>{for(let r of t)if(r.type===`childList`){let t=Array.from(r.removedNodes);for(let r of t)r.nodeType===Node.ELEMENT_NODE&&(r.tagName===`IFRAME`&&r.id===`pio__iframe`||r.querySelector(`iframe#pio__iframe`)!==null)&&(e.abort(),n.disconnect())}}).observe(document.body,{attributes:!1,childList:!0,subtree:!0})},P=({...e})=>{if(h(`configureInstance`),F(e)){let{instanceId:t,skipRedirectOnRemove:n,...r}=e;return N(`/find-integration-marketplace/`,r,{instanceId:t,...n?{skipRedirectOnRemove:`true`}:{}})}if(I(e)){let{integrationId:t,skipRedirectOnRemove:n,...r}=e;return N(`/find-integration-marketplace/`,r,{integrationId:t,...n?{skipRedirectOnRemove:`true`}:{}})}if(L(e)){let{integrationName:t,skipRedirectOnRemove:n,...r}=e;N(`/find-integration-marketplace/`,r,{integrationName:t,...n?{skipRedirectOnRemove:`true`}:{}})}},F=e=>!!(`instanceId`in e&&e.instanceId),I=e=>!!(`integrationId`in e&&e.integrationId),L=e=>!!(`integrationName`in e&&e.integrationName),R=async({query:e,variables:t})=>{h(`authenticate`);let{jwt:n,prismaticUrl:r}=m.getStateCopy();return await(await fetch((0,u.default)(r,`api`),{method:`POST`,headers:{"Content-Type":`application/json`,Accept:`application/json`,Authorization:`Bearer ${n}`},body:JSON.stringify({query:e,variables:t})})).json()},z=`The authenticate method expects an object containing a token and additional optional configuration.`,se=[`token`],B=async e=>{if(h(`authenticate`),!e)throw Error(z);let t=new Set(Object.keys(e));if(!se.every(e=>t.has(e)))throw Error(z);let{token:n}=e,r=document.getElementById(S),i=m.getStateCopy();i.jwt!==n&&r&&b({iframe:r,event:{event:`SET_TOKEN`,data:n}});let a=e.prismaticUrl??i.prismaticUrl,o=await fetch((0,u.default)(a,`embedded`,`authenticate`),{headers:{Authorization:`Bearer ${n}`},method:`post`});if(!o.ok){let e=await o.text();throw Error(e?`Authentication failed. Server sent back: ${e}`:`Authentication failed. Please check that your customer and organization information are correct, and that the token you provided is not expired.`)}i.jwt=n,m.setState(i),i.embeddedDesignerEnabled=(await R({query:`{
      authenticatedUser {
        customer {
          allowEmbeddedDesigner
        }
      }
    }`})).data.authenticatedUser.customer.allowEmbeddedDesigner,m.setState(i)};async function V(e,t){return h(`createWorkflow`),R({query:`
  mutation createWorkflow($name: String!, $contextStableKey: String, $contextData: String, $externalId: String) {
    importWorkflow(input: {
      name: $name
      contextStableKey: $contextStableKey
      contextData: $contextData
      externalId: $externalId
    }) {
      workflow {
        id
      }
      errors {
        field
        messages
      }
    }
  }
`,variables:{name:t.name,contextStableKey:e,contextData:JSON.stringify(t.contextData),externalId:t.externalId}})}const ce=`<style id="${ie}">
  .${E} {
    backdrop-filter: blur(10px);
    background: rgb(119 119 119 / 29%);
    bottom: 0;
    display: block;
    left: 0;
    opacity: 0;
    position: fixed;
    right: 0;
    top: 0;
    transition: all 0.3s ease-in;
    visibility: hidden;
    z-index: 9999;
  }
  .${E}.${O} {
    opacity: 1;
    visibility: visible;
  }
  .${k} {
    background: #fff;
    border-radius: 4px;
    bottom: 0;
    height: 80vh;
    left: 0;
    margin: auto;
    overflow: hidden;
    position: absolute;
    right: 0;
    top: 0;
    width: 80vw;
  }
  .${A} {
    all: unset;
    cursor: pointer;
    position: absolute;
    right: 1.5em;
    top: 1.3em;
  }
  .${w} {
    height: 100%
  }
</style>`;let H;const le=()=>{H?.abort(),H=void 0},U={filters:{marketplace:{includeActiveIntegrations:!0},integrations:{},components:{}},screenConfiguration:{configurationWizard:{},instance:{},marketplace:{},initializing:{}},skipPreload:!1,theme:`LIGHT`,fontConfiguration:void 0,translation:{}},W=e=>{let t=(0,l.default)({},U,e),n=m.getInitialState();if(t&&Object.entries(t).forEach(([e,t])=>{f(e)&&p(n,e,t)}),n.initComplete=!0,m.setState(n),document.getElementById(`pio__embedded`))return;!document.getElementById(`pio__iframe-preload`)&&!t.skipPreload&&document.body.insertAdjacentHTML(`beforeend`,`<iframe
        id="${C}"
        src="${n.prismaticUrl}/embedded"
        style="visibility: hidden; display: none;"
        height="0"
        width="0"
      />`),document.head.insertAdjacentHTML(`beforeend`,ce);let r=document.createElement(`div`);r.id=x,r.innerHTML=`
    <div class="${E}">
      <div class="${k}">
        <button class="${A}" aria-label="close popover" data-close>✕</button>
        <div class="${w}"></div>
      </div>
    </div>
  `,document.body.appendChild(r);let i=document.querySelector(`#${x} .${A}`),a=document.querySelector(D);H=new AbortController;let{signal:o}=H;a?.addEventListener(`click`,e=>{e.target===e.currentTarget&&v()},{signal:o}),i?.addEventListener(`click`,()=>v(),{signal:o}),document.addEventListener(`keyup`,e=>{e.key===`Escape`&&document.querySelector(`.${O}`)&&v()},{signal:o})},G=()=>{document.getElementById(x)?.remove(),document.getElementById(C)?.remove(),document.getElementById(ie)?.remove(),le(),m.setState(m.getInitialState())},K=({instanceId:e,selector:t,theme:n,screenConfiguration:r,onCancel:i,onSuccess:a,onDelete:o})=>{if(h(`editInstanceConfiguration`),N(`/configure-instance/${e}/`,{selector:t,...n?{theme:n}:{},screenConfiguration:{...r,configurationWizard:{...r?.configurationWizard,isInModal:!0}}},{reconfigure:`true`}),!i&&!a&&!o)return;let s=new AbortController;return window.addEventListener(`message`,e=>{switch(e.data?.event){case`INSTANCE_DEPLOYED`:a?.(),s.abort();break;case`INSTANCE_DELETED`:o?.(),s.abort();break;case`INSTANCE_CONFIGURATION_CANCELED`:i?.(),s.abort();break}},{signal:s.signal}),()=>s.abort()},q=async e=>(h(`queryWorkflows`),R({query:`
  query queryWorkflows(
    $cursor: String
    $searchTerm: String
    $descriptionSearch: String
    $categorySearch: String
    $labelSearch: String
    $contextStableKey: String
    $externalId: String
    $first: Int
    $sortBy: [IntegrationVariantOrder]
  ) {
    workflows: integrationVariants(
      after: $cursor
      name_Icontains: $searchTerm
      description_Icontains: $descriptionSearch
      category: $categorySearch
      labels_Icontains: $labelSearch
      contextStableKey: $contextStableKey
      externalId: $externalId
      exclude: [INTEGRATION]
      first: $first
      sortBy: $sortBy
    ) {
      nodes {
        ... on Workflow {
          id
          name
          versionNumber
          description
          externalId
          updatedAt
          lastExecutedAt
          createdAt
          category
          labels
          customer {
            id
            name
          }
          instance {
            enabled
          }
          deployedVersion {
            id
          }
        }
      }
      pageInfo {
        hasNextPage
        endCursor
      }
      totalCount
    }
  }
`,variables:e})),J=({configVars:e,...t})=>{b({...t,event:{event:`SET_CONFIG_VAR`,data:e}})},Y=({componentId:e,...t})=>{h(`showComponent`),N(`/components/${e}/`,t,{})},X=e=>{h(`showComponents`),N(`/components/`,e,{})},Z=e=>{h(`showConnections`),N(`/customer-connections/`,e,{})},Q=(e={usePopover:!0})=>{h(`showDashboard`),N(`/dashboard/`,e,{})},ue=e=>{let{embeddedDesignerEnabled:t}=m.getStateCopy();if(!t)throw Error(`Embedded designer must be enabled for this customer in order to call ${e}`)},de=({integrationId:e,...t})=>{h(`showDesigner`),ue(`showDesigner`),N(`/integrations/${e}/`,t,{})},fe=e=>{h(`showIntegrations`),ue(`showIntegrations`),N(`/integrations/`,e,{})},pe=e=>{h(`showLogs`),N(`/logs/`,e,{})},$=(e={usePopover:!0})=>{h(`showMarketplace`),N(`/integration-marketplace/`,e,{})},me=({workflowId:e,onDelete:t,...n})=>{if(h(`showWorkflowBuilder`),N(`/builder/${e}/`,n,{}),t){let e=new AbortController;return window.addEventListener(`message`,e=>{e.data?.event===`WORKFLOW_DELETED`&&t()},{signal:e.signal}),()=>e.abort()}},he=e=>{h(`showWorkflows`),N(`/workflows/`,e,{})};let ge=function(e){return e.and=`and`,e.or=`or`,e}({}),_e=function(e){return e.equal=`equal`,e.notEqual=`notEqual`,e.in=`in`,e.notIn=`notIn`,e.startsWith=`startsWith`,e.doesNotStartWith=`doesNotStartWith`,e.endsWith=`endsWith`,e.doesNotEndWith=`doesNotEndWith`,e}({});var ve=o({BooleanOperator:()=>ge,EMBEDDED_DEFAULTS:()=>U,PrismaticMessageEvent:()=>_,TermOperator:()=>_e,authenticate:()=>B,closePopover:()=>v,configureInstance:()=>P,createWorkflow:()=>V,dispose:()=>G,editInstanceConfiguration:()=>K,getMessageIframe:()=>y,graphqlRequest:()=>R,init:()=>W,isConfigureInstanceWithInstanceId:()=>F,isConfigureInstanceWithIntegrationId:()=>I,isConfigureInstanceWithIntegrationName:()=>L,queryWorkflows:()=>q,setConfigVars:()=>J,showComponent:()=>Y,showComponents:()=>X,showConnections:()=>Z,showDashboard:()=>Q,showDesigner:()=>de,showIntegrations:()=>fe,showLogs:()=>pe,showMarketplace:()=>$,showWorkflow:()=>me,showWorkflows:()=>he});exports.BooleanOperator=ge,exports.EMBEDDED_DEFAULTS=U,exports.PrismaticMessageEvent=_,exports.TermOperator=_e,exports.authenticate=B,exports.closePopover=v,exports.configureInstance=P,exports.createWorkflow=V,exports.default=ve,exports.dispose=G,exports.editInstanceConfiguration=K,exports.getMessageIframe=y,exports.graphqlRequest=R,exports.init=W,exports.isConfigureInstanceWithInstanceId=F,exports.isConfigureInstanceWithIntegrationId=I,exports.isConfigureInstanceWithIntegrationName=L,exports.queryWorkflows=q,exports.setConfigVars=J,exports.showComponent=Y,exports.showComponents=X,exports.showConnections=Z,exports.showDashboard=Q,exports.showDesigner=de,exports.showIntegrations=fe,exports.showLogs=pe,exports.showMarketplace=$,exports.showWorkflow=me,exports.showWorkflows=he;
//# sourceMappingURL=index.cjs.map