"use strict";(self.webpackChunk_aidoop_aidoop_r=self.webpackChunk_aidoop_aidoop_r||[]).push([[4272],{14272:(e,t,r)=>{r.r(t);var a=r(50493),o=(r(81925),r(94430)),i=r(56765),n=r(53421);let d=class extends o.oi{render(){const e=this.partner||{};return o.dy`
      <div id="vendors">
        <div field-2column>
          <div field>
            <label
              >${n.z2.t("label.name")}
              <input type="text" name="name" readonly .value=${e.name||""} />
            </label>
          </div>

          <div field>
            <label
              >${n.z2.t("label.description")}
              <input type="text" name="description" readonly .value=${e.description||""} />
            </label>
          </div>
        </div>
      </div>
    `}};d.styles=[o.iv`
      input {
        border: var(--border-dark-color);
        border-radius: var(--border-radius);
        margin: var(--input-margin);
        padding: var(--input-padding);
        background-color: transparent;
        font: var(--input-font);

        flex: 1;
      }
      #vendors {
        display: flex;
        max-height: 45vh;
        flex-direction: row;
        background-color: var(--theme-white-color);
        margin: 0;
        padding: 0;
        border-radius: var(--border-radius);
        box-shadow: var(--box-shadow);
        overflow: hidden;
      }
      [field-2column] {
        overflow: auto;
        flex: 1;
        background-color: var(--theme-white-color);
        padding: var(--padding-default);
        border-radius: var(--border-radius);
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 5px 15px;
        clear: both;
        max-width: var(--input-container-max-width);
      }
      [field] {
        display: flex;
        flex-direction: column;
        padding-bottom: var(--padding-default);
      }
      label {
        display: flex;
        flex-direction: column;

        font: var(--label-font);
        color: var(--label-color);
        text-transform: var(--label-text-transform);
      }
      @media screen and (max-width: 480px) {
        [field] {
          grid-column: span 2;
        }
      }
    `],(0,a.gn)([(0,i.Cb)({type:Object}),(0,a.w6)("design:type",Object)],d.prototype,"partner",void 0),d=(0,a.gn)([(0,i.Mo)("partner-info-card")],d);r(77198),r(8382);var s=r(16682),l=r(27805),c=r(80692),u=r(15895);let p=class extends((0,n.NC)(n.z2)(o.oi)){constructor(){super(...arguments),this.roles=[],this.grantingRoles=[]}render(){const e=this.roles||[],t=this.grantingRoles||[];return o.dy`
      <role-selector .roles="${e}" .userRoles="${t}"></role-selector>

      <div buttons>
        <mwc-button @click=${this.onSave} raised label="${n.z2.t("button.save")}"></mwc-button>
        <mwc-button
          @click=${this.onTerminateContract}
          raised
          danger
          label="${n.z2.t("button.terminate contract")}"
        ></mwc-button>
      </div>
    `}updated(e){e.has("customer")&&this.refreshRoles()}async refreshRoles(){var e;const t=await l.Lp.query({query:s.ZP`
        query roles($customerId: String!) {
          roles {
            items {
              id
              name
              description
            }
            total
          }
          grantingRoles(customerId: $customerId) {
            id
            role {
              id
              name
              description
            }
          }
        }
      `,variables:{customerId:this.customer.id},context:(0,l.Bn)()});(null===(e=t.errors)||void 0===e?void 0:e.length)?(this.roles=[],this.grantingRoles=[]):(this.roles=t.data.roles.items,this.grantingRoles=t.data.grantingRoles.map((e=>e.role)))}async onSave(){var e;const t=this.roleSelector.selectedRoles();(null===(e=(await l.Lp.mutate({mutation:s.ZP`
        mutation grantRoles($customerId: String!, $roles: [RolePatch!]!) {
          grantRoles(customerId: $customerId, roles: $roles)
        }
      `,variables:{customerId:this.customer.id,roles:t},context:(0,l.Bn)()})).errors)||void 0===e?void 0:e.length)||this.showToast(n.z2.t("text.data_updated_successfully"))}async onTerminateContract(){var e;if(!(await(0,c.ID)({title:n.z2.t("text.are_you_sure"),text:n.z2.t("text.are_you_sure_to_terminate_contract"),confirmButton:{text:n.z2.t("button.terminate contract")},cancelButton:{text:n.z2.t("button.cancel")}})).value)return;if(!(null===(e=(await l.Lp.mutate({mutation:s.ZP`
        mutation terminateContract($partnerName: String!) {
          terminateContract(partnerName: $partnerName)
        }
      `,variables:{partnerName:this.customer.name},context:(0,l.Bn)()})).errors)||void 0===e?void 0:e.length)){this.dispatchEvent(new CustomEvent("contractTerminated"))&&await(0,c.ID)({type:"success",title:n.z2.t("text.completed"),confirmButton:{text:n.z2.t("button.confirm")}})}}showToast(e){document.dispatchEvent(new CustomEvent("notify",{detail:{message:e,option:{timer:1e3}}}))}};p.styles=[o.iv`
      :host {
        display: flex;
        flex-direction: column;

        border: 1px solid var(--primary-color);
        padding: var(--padding-default);
        font: normal 15px var(--theme-font);
        color: var(--secondary-color);
      }
      [buttons] {
        margin: 0;
        padding: var(--padding-default);
        background-color: rgba(var(--primary-color-rgb), 0.2);
      }
      mwc-button {
        margin-right: var(--padding-narrow);
      }
      [danger] {
        --mdc-theme-primary: var(--mdc-danger-button-primary-color);
      }
    `],(0,a.gn)([(0,i.Cb)({type:Object}),(0,a.w6)("design:type",Object)],p.prototype,"customer",void 0),(0,a.gn)([(0,i.Cb)({type:Array}),(0,a.w6)("design:type",Array)],p.prototype,"roles",void 0),(0,a.gn)([(0,i.Cb)({type:Array}),(0,a.w6)("design:type",Array)],p.prototype,"grantingRoles",void 0),(0,a.gn)([(0,i.IO)("role-selector"),(0,a.w6)("design:type",u.u)],p.prototype,"roleSelector",void 0),p=(0,a.gn)([(0,i.Mo)("partner-role-editor")],p);let m=class extends((0,n.NC)(n.z2)(o.oi)){constructor(){super(...arguments),this.customers=[]}render(){return o.dy`
      <div>
        <input id="customer-name" required />
        <mwc-button
          @click=${this.invite.bind(this)}
          outlined
          icon="group_add"
          label="${n.z2.t("label.invite customer")}"
        ></mwc-button>
      </div>
    `}async invite(){try{if(!this.customerNameInput.value)throw new Error(n.z2.t("error.value is empty",{value:n.z2.t("field.name")}));if(this.customers.find((e=>{var t;return(null===(t=e.name)||void 0===t?void 0:t.toLowerCase())===this.customerNameInput.value.toLowerCase()})))throw new Error(n.z2.t("error.x already exists in y",{x:this.customerNameInput.value,y:n.z2.t("field.customer")}));if(!(await(0,c.ID)({title:n.z2.t("text.are_you_sure"),text:n.z2.t("text.do_you_want_to_invite_x",{x:n.z2.t("label.partner")}),confirmButton:{text:n.z2.t("button.confirm")},cancelButton:{text:n.z2.t("button.cancel")}})).value)return;const e=this.customerNameInput.value;if(!(await l.Lp.mutate({mutation:s.ZP`
          mutation inviteCustomer($customerDomainName: String!) {
            inviteCustomer(customerDomainName: $customerDomainName)
          }
        `,variables:{customerDomainName:e},context:(0,l.Bn)()})).errors){this.dispatchEvent(new CustomEvent("invitationCompleted"))&&await(0,c.ID)({type:"success",title:n.z2.t("text.completed"),confirmButton:{text:n.z2.t("button.confirm")}}),this.customerNameInput.value=""}}catch(e){document.dispatchEvent(new CustomEvent("notify",{detail:{level:"error",message:"message"in e?e.message:e}}))}}};m.styles=[o.iv`
      input {
        border: var(--border-dark-color);
        border-radius: var(--border-radius);
        margin: var(--input-margin);
        padding: var(--input-padding);
        min-width: 250px;
        font: var(--input-font);
      }
      mwc-button {
        margin: var(--input-margin);
      }
      @media screen and (max-width: 480px) {
        div {
          display: grid;
        }
      }
    `],(0,a.gn)([(0,i.Cb)({type:Array}),(0,a.w6)("design:type",Array)],m.prototype,"customers",void 0),(0,a.gn)([(0,i.IO)("input#customer-name"),(0,a.w6)("design:type",HTMLInputElement)],m.prototype,"customerNameInput",void 0),m=(0,a.gn)([(0,i.Mo)("invite-customer")],m);var v=r(28120),b=r(77675);let h=class extends((0,v.$)(b.h)(b.B4)){constructor(){super(...arguments),this.customers=[],this.vendors=[]}get context(){return{title:`${n.z2.t("title.partners")}`,help:"operato-hub/partners"}}render(){const e={[n.z2.t("label.customers")]:this.customers||[],[n.z2.t("label.vendors")]:this.vendors||[]};return o.dy`
      <h2>partners</h2>

      <quick-find-list
        .data="${e}"
        .contentRenderer="${(e,t)=>o.dy`
          ${t===n.z2.t("label.customers")?o.dy`
                <partner-role-editor
                  class="role-editor"
                  .customer="${e}"
                  @contractTerminated="${this.refreshPartners.bind(this)}"
                ></partner-role-editor>
              `:o.dy`<partner-info-card .partner="${e}"></partner-info-card>`}
        `}"
      >
      </quick-find-list>

      <invite-customer
        .customers=${this.customers||[]}
        @invitationCompleted="${this.refreshPartners.bind(this)}"
      ></invite-customer>
    `}pageUpdated(){this.active&&this.refreshPartners()}async refreshPartners(){var e;const t=await l.Lp.query({query:s.ZP`
        query {
          customers {
            id
            name
            description
          }
          vendors {
            id
            name
            description
          }
        }
      `,context:(0,l.Bn)()});(null===(e=t.errors)||void 0===e?void 0:e.length)||(this.customers=t.data.customers,this.vendors=t.data.vendors)}};h.styles=[o.iv`
      :host {
        display: flex;
        flex-direction: column;
        background-color: var(--main-section-background-color);
        padding: var(--padding-wide);

        overflow: auto;
      }
      h2 {
        margin: var(--title-margin);
        font: var(--title-font);
        color: var(--title-text-color);
      }
      .role-editor {
        flex: 1;
      }
    `],(0,a.gn)([(0,i.Cb)({type:Array}),(0,a.w6)("design:type",Array)],h.prototype,"customers",void 0),(0,a.gn)([(0,i.Cb)({type:Array}),(0,a.w6)("design:type",Array)],h.prototype,"vendors",void 0),h=(0,a.gn)([(0,i.Mo)("partner-management")],h)},81925:(e,t,r)=>{var a=r(9201),o=r(94430),i=r(15494);class n extends((0,i.N)(i.z)(o.oi)){static get styles(){return[o.iv`
        .tabs {
          display: flex;
        }
        .tab {
          background-color: var(--secondary-background-color);
          margin-top: var(--margin-default);
          padding: var(--padding-narrow) var(--padding-wide) 0 var(--padding-wide);
          border-radius: 9px 9px 0 0;
          border-right: 1px solid rgba(0, 0, 0, 0.4);
          text-transform: capitalize;
          color: var(--theme-white-color);
          opacity: 0.7;
          cursor: pointer;
          white-space: nowrap;
        }
        .tab[activate] {
          background-color: var(--primary-color);
          box-shadow: 2px -2px 2px 0px rgba(0, 0, 0, 0.15);
          opacity: 1;
          font-weight: bold;
        }
        .tab[disabledTab] {
          pointer-events: none;
        }
        .tab span,
        .tab span[activate] {
          font-weight: normal;
          font-size: var(--fontsize-default);
        }

        @media screen and (max-width: 480px) {
          .tab {
            margin-top: var(--margin-narrow);
            padding: var(--padding-narrow) var(--padding-default);
            text-align: center;
          }
          .tab[disabledTab] {
            pointer-events: none;
          }
          .tab span,
          .tab span[activate] {
            font-size: var(--fontsize-default);
            margin-top: -4px;
          }
        }
      `]}static get properties(){return{data:Object,currentTabKey:String,disabledKey:Object}}render(){const e=this.data||{},t=Object.keys(e),r=this.currentTabKey||t[0];return o.dy`
      ${t?.length>1?o.dy`
            <div class="tabs">
              ${t.map(((t,a)=>{const i=e[t];return o.dy`
                  <div
                    class="tab"
                    ?activate="${t===r}"
                    ?disabledTab="${!!Object.keys(this.disabledKey||{}).includes(t)&&!this.disabledKey[t]}"
                    @click="${()=>this.currentTabKey=t}"
                  >
                    ${t} ${i?.length>0?o.dy`<span>(${i.length})</span>`:""}
                  </div>
                `}))}
            </div>
          `:""}
    `}updated(e){e.has("currentTabKey")&&this.dispatchEvent(new CustomEvent("tabChanged",{detail:{currentTabKey:this.currentTabKey},bubbles:!0,composed:!0,cancelable:!0}))}}customElements.define("quick-find-tabs",n);r(77198);class d extends o.oi{static get styles(){return[o.iv`
        .nav-bar {
          background-color: var(--theme-white-color);
          border: 1px solid var(--primary-color);
          border-radius: 0 var(--border-radius) var(--border-radius) var(--border-radius);
          margin: 0 0 var(--margin-wide) 0;
          padding: var(--padding-narrow);
          transition: opacity ease-in-out 0.3s;
          opacity: 100%;
          color: var(--secondary-color);
          font-size: var(--fontsize-default);
        }
        .nav-bar[scrolling] {
          opacity: 100%;
          transition: opacity ease-in-out 0.3s;
        }
        .nav-bar * {
          vertical-align: middle;
        }
        mwc-icon {
          --mdc-icon-size: 14px;
          padding-left: var(--padding-narrow);
          position: relative;
          margin-top: -2px;
        }
        .nav-bar span {
          border-right: var(--border-dark-color);
          border-width: 0 1px;
          padding: 0 var(--padding-default) 0 var(--padding-narrow);
          opacity: 0.8;
          color: var(--secondary-color);
          font-size: var(--fontsize-small);
        }
        .nav-bar span[activate] {
          font-weight: bold;
          cursor: pointer;
          color: var(--secondary-text-color);
          font-size: var(--fontsize-default);
        }

        @media screen and (max-width: 480px) {
          :host {
            width: 25px;
          }
          .nav-bar {
            position: absolute;
            right: 25px;
            z-index: 100;

            background-color: rgba(var(--primary-color-rgb), 0.2);
            border: none;
            border-radius: 15px;
            margin-top: initial;
            padding: var(--padding-narrow) 0;
            opacity: 0%;
            text-align: center;
          }
          .nav-bar span {
            display: block;
            border: none;
            margin: auto;
            padding: 2px var(--padding-narrow) 0 var(--padding-narrow);
            font-size: 12px;
          }
        }
      `]}static get properties(){return{scrolling:Boolean,indexes:Array,activeIndexes:Array}}constructor(){super(),this.indexes=[...Array(26).fill(65).map(((e,t)=>String.fromCharCode(e+=t))),"#"]}render(){const e=this.activeIndexes||[],t=Boolean(this.scrolling),r=this.scrollable;return o.dy`
      ${r?o.dy`<div class="nav-bar" ?scrolling=${t}>
            <mwc-icon>anchor</mwc-icon> <label>Quick Find :</label>
            ${this.indexes.map((t=>{const r=e.indexOf(t)>=0;return o.dy` <span
                ?activate="${r}"
                class="nav-cursor"
                @click=${e=>{r&&this.onclickNavCursor(t)}}
                >${t}</span
              >`}))}
          </div>`:""}
    `}onclickNavCursor(e){this.dispatchEvent(new CustomEvent("navigateTo",{detail:e,composed:!0}))}}customElements.define("quick-find-scroll",d);class s extends o.oi{static get styles(){return[a.Ix,o.iv`
        :host {
          display: flex;
          flex: 1;
          flex-direction: column;
          overflow: hidden;
          max-width: var(--content-container-max-width);
        }
        .list-container {
          flex: 1;

          display: flex;
          flex-direction: column;
          background-color: var(--theme-white-color);
          border-radius: 0 var(--border-radius) var(--border-radius) var(--border-radius);
          border: var(--border-dark-color);
          border-width: 0 1px 1px 1px;
          box-shadow: var(--box-shadow);
          overflow: auto;
        }
        ul {
          margin: 0;
          padding: 0;
          flex: 1;
          list-style: none;
        }
        li {
          border-bottom: var(--border-dark-color);
          margin-bottom: -1px;
          color: var(--secondary-color);
        }
        li:nth-child(even) {
          background-color: rgba(0, 0, 0, 0.025);
        }
        li:hover {
          background-color: rgba(var(--primary-color-rgb), 0.2);
        }
        li div {
          font: bold 16px var(--theme-font);
        }
        li div.header {
          padding: var(--padding-default) var(--padding-wide);
        }
        [opened] {
          border-left: 4px solid var(--google-green-300);
          border-bottom: 3px solid rgba(0, 0, 0, 0.1);
        }
        [opened] .header {
          background-color: var(--primary-color);
          box-shadow: var(--box-shadow);
          color: var(--theme-white-color);
        }
        [opened] .header::after {
          display: block;
          margin-bottom: -16px;
          position: relative;
          margin-top: 9px;
          content: '';
          width: 0px;
          height: 0px;
          border-left: 7px solid transparent;
          border-right: 7px solid transparent;
          border-top: 7px solid var(--primary-color);
        }
        li span {
          display: block;
          opacity: 0.9;
          font: normal 14px/18px var(--theme-font);
        }
        .header mwc-icon {
          --mdc-icon-size: var(--fontsize-default);
          margin-right: var(--padding-narrow);
        }
        @media screen and (max-width: 480px) {
          .list-container {
            border-radius: 0 var(--border-radius) var(--border-radius) var(--border-radius);
            border-width: 0 1px 1px 1px;
          }
        }
      `]}static get properties(){return{data:Object,nameField:String,currentTabKey:String,list:Array,contentRenderer:Object,floatingDelay:Number,currentOpenedItemIdx:Number,scrollable:Boolean,headerRenderer:Function}}constructor(){super(),this.nameField="name",this.floatingDelay=1,this.headerRenderer=e=>o.dy`${e.name}<span>${e.description}</span>`}render(){const e=this.nameField,t=this.data||{},r=t[this.currentTabKey]?this.currentTabKey:Object.keys(t)[0];let a=this.data[r];a=this.sortByNameField(a);const i=this.currentOpenedItemIdx,n=this.computeActiveIndexes(a,e),d=this.scrollable;return o.dy`
      <quick-find-tabs
        .currentTabKey="${r}"
        .data="${t}"
        @tabChanged="${e=>{this.currentOpenedItemIdx=null,this.currentTabKey=e.detail.currentTabKey}}"
      ></quick-find-tabs>

      <quick-find-scroll
        @navigateTo="${this.navigateTo}"
        .scrollable="${d}"
        .activeIndexes="${n}"
      ></quick-find-scroll>

      <div class="list-container" @scroll=${this.onscroll.bind(this)}>
        <ul>
          ${a?.length?o.dy`
                ${a.map(((e,t)=>{const r=i===t;return o.dy`
                    <li
                      class="list-item"
                      ?opened="${r}"
                      .item="${e}"
                      @click="${()=>{this.currentOpenedItemIdx===t?this.currentOpenedItemIdx=-1:this.currentOpenedItemIdx=t}}"
                    >
                      <div class="header">
                        ${r&&"function"==typeof this.openHeaderRenderer?this.openHeaderRenderer(e):this.headerRenderer(e)}
                      </div>

                      ${r&&"function"==typeof this.contentRenderer?o.dy`<div @click="${e=>e.stopPropagation()}">
                            ${this.contentRenderer(e,this.currentTabKey)}
                          </div>`:""}
                    </li>
                  `}))}
              `:""}
        </ul>
      </div>
    `}get listItems(){return Array.from(this.renderRoot.querySelectorAll(".list-container li.list-item"))}get quickFindScroll(){return this.renderRoot.querySelector("quick-find-scroll")}async updated(e){(e.has("data")||e.has("currentTabKey"))&&(await this.updateComplete,this.scrollable=this.computeScrollable())}computeActiveIndexes(e,t){return Array.from(new Set(e?.map((e=>e[t][0].toUpperCase()))))}computeScrollable(){const e=this.renderRoot.querySelector("ul");return e.clientHeight<e.scrollHeight}navigateTo(e){const t=this.nameField,r=e.detail.toLowerCase(),a=this.sortByNameField(this.data[this.currentTabKey]).findIndex((e=>0===e[t].toLowerCase().indexOf(r))),o=this.renderRoot.querySelector(`ul :nth-child(${a+1})`);o?.scrollIntoView()}onscroll(){this.quickFindScroll.scrolling||(this.quickFindScroll.scrolling=!0),null!==this.timer&&clearTimeout(this.timer),this.timer=setTimeout((()=>{this.quickFindScroll.scrolling=!1}),1e3*this.floatingDelay)}sortByNameField(e){const t=this.nameField;return e?.sort(((e,r)=>e[t]>r[t]?1:e[t]<r[t]?-1:0))}close(){this.currentOpenedItemIdx=-1}openByKey(e,t="id"){this.currentOpenedItemIdx=this.listItems.findIndex((r=>r.item[t]===e))}}customElements.define("quick-find-list",s);class l extends o.oi{static get styles(){return[a.Ix,o.iv`
        :host {
          display: flex;
          flex: 1;
          flex-direction: column;
          overflow: hidden;
          max-width: var(--content-container-max-width);
        }
        .content-container {
          flex: 1;
          display: flex;
          flex-direction: column;
          background-color: var(--theme-white-color);
          border-radius: 0 var(--border-radius) var(--border-radius) var(--border-radius);
          border: var(--border-dark-color);
          border-width: 0 1px 1px 1px;
          box-shadow: var(--box-shadow);
          overflow: auto;
        }
        @media screen and (max-width: 480px) {
          .content-container {
            border-radius: 0 var(--border-radius) var(--border-radius) var(--border-radius);
            border-width: 0 1px 1px 1px;
          }
        }
      `]}static get properties(){return{data:Object,currentTabKey:String,contentRenderer:Object,item:Object,disabledKey:Object}}render(){const e=this.data||{},t=e[this.currentTabKey]?this.currentTabKey:Object.keys(e)[0];let r=this.data[t];const a=this.disabledKey;return o.dy`
      <quick-find-tabs
        .currentTabKey="${t}"
        .data="${e}"
        .disabledKey="${a}"
        @tabChanged="${e=>{this.currentTabKey=e.detail.currentTabKey}}"
      ></quick-find-tabs>
      <div class="content-container">
        ${"function"==typeof this.contentRenderer?o.dy` <div>${this.contentRenderer(r,this.currentTabKey||t)}</div> `:""}
      </div>
    `}async updated(e){(e.has("data")||e.has("currentTabKey"))&&await this.updateComplete}}customElements.define("quick-find-content",l)}}]);