{"version":3,"names":["scSubscriptionsListCss","ScSubscriptionsListStyle0","wp","i18n","__","this","allLink","_a","subscriptions","length","h","key","type","href","slot","sprintf","heading","name","renderContent","page","query","perPage","per_page","total","pagination","totalPages","total_pages","totalShowing","_b","onScNextPage","nextPage","onScPrevPage","prevPage","busy"],"sources":["src/components/controllers/dashboard/subscriptions-list/sc-subscriptions-list.scss?tag=sc-subscriptions-list&encapsulation=shadow","src/components/controllers/dashboard/subscriptions-list/sc-subscriptions-list.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.subscriptions-list {\n  display: grid;\n  gap: 0.5em;\n\n  &__heading {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: flex-end;\n    justify-content: space-between;\n    margin-bottom: 0.5em;\n  }\n\n  &__title {\n    font-size: var(--sc-font-size-x-large);\n    font-weight: var(--sc-font-weight-bold);\n    line-height: var(--sc-line-height-dense);\n  }\n\n  a {\n    text-decoration: none;\n    font-weight: var(--sc-font-weight-semibold);\n    display: inline-flex;\n    align-items: center;\n    gap: 0.25em;\n    color: var(--sc-color-primary-500);\n  }\n}\n.subscriptions {\n  &__title {\n    display: none;\n  }\n\n  &--has-title-slot &__title {\n    display: block;\n  }\n}\n","import { Component, Element, h, Prop, State } from '@stencil/core';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { addQueryArgs } from '@wordpress/url';\nimport apiFetch from '../../../../functions/fetch';\nimport { Subscription } from '../../../../types';\nimport { onFirstVisible } from '../../../../functions/lazy';\n\n@Component({\n  tag: 'sc-subscriptions-list',\n  styleUrl: 'sc-subscriptions-list.scss',\n  shadow: true,\n})\nexport class ScSubscriptionsList {\n  @Element() el: HTMLScSubscriptionsListElement;\n  /** Customer id to fetch subscriptions */\n  @Prop({ mutable: true }) query: {\n    page: number;\n    per_page: number;\n  } = {\n    page: 1,\n    per_page: 10,\n  };\n  @Prop() allLink: string;\n  @Prop() heading: string;\n  @Prop() isCustomer: boolean;\n  @Prop() cancelBehavior: 'period_end' | 'immediate' = 'period_end';\n\n  @State() subscriptions: Array<Subscription> = [];\n\n  /** Loading state */\n  @State() loading: boolean;\n  @State() busy: boolean;\n\n  /** Error message */\n  @State() error: string;\n\n  @State() pagination: {\n    total: number;\n    total_pages: number;\n  } = {\n    total: 0,\n    total_pages: 0,\n  };\n\n  componentWillLoad() {\n    onFirstVisible(this.el, () => {\n      this.initialFetch();\n    });\n  }\n\n  async initialFetch() {\n    try {\n      this.loading = true;\n      await this.getSubscriptions();\n    } catch (e) {\n      console.error(this.error);\n      this.error = e?.message || __('Something went wrong', 'surecart');\n    } finally {\n      this.loading = false;\n    }\n  }\n\n  async fetchSubscriptions() {\n    try {\n      this.busy = true;\n      await this.getSubscriptions();\n    } catch (e) {\n      console.error(this.error);\n      this.error = e?.message || __('Something went wrong', 'surecart');\n    } finally {\n      this.busy = false;\n    }\n  }\n\n  /** Get all subscriptions */\n  async getSubscriptions() {\n    if (!this.isCustomer) {\n      return;\n    }\n\n    const response = (await await apiFetch({\n      path: addQueryArgs(`surecart/v1/subscriptions/`, {\n        expand: ['price', 'price.product', 'current_period', 'period.checkout', 'purchase', 'purchase.license', 'license.activations', 'discount', 'discount.coupon'],\n        ...this.query,\n      }),\n      parse: false,\n    })) as Response;\n    this.pagination = {\n      total: parseInt(response.headers.get('X-WP-Total')),\n      total_pages: parseInt(response.headers.get('X-WP-TotalPages')),\n    };\n    this.subscriptions = (await response.json()) as Subscription[];\n    return this.subscriptions;\n  }\n\n  nextPage() {\n    this.query.page = this.query.page + 1;\n    this.fetchSubscriptions();\n  }\n\n  prevPage() {\n    this.query.page = this.query.page - 1;\n    this.fetchSubscriptions();\n  }\n\n  renderEmpty() {\n    return (\n      <div>\n        <sc-divider style={{ '--spacing': '0' }}></sc-divider>\n        <slot name=\"empty\">\n          <sc-empty icon=\"repeat\">{__(\"You don't have any subscriptions.\", 'surecart')}</sc-empty>\n        </slot>\n      </div>\n    );\n  }\n\n  renderLoading() {\n    return (\n      <sc-card no-padding style={{ '--overflow': 'hidden' }}>\n        <sc-stacked-list>\n          <sc-stacked-list-row style={{ '--columns': '2' }} mobile-size={0}>\n            <div style={{ padding: '0.5em' }}>\n              <sc-skeleton style={{ width: '30%', marginBottom: '0.75em' }}></sc-skeleton>\n              <sc-skeleton style={{ width: '20%', marginBottom: '0.75em' }}></sc-skeleton>\n              <sc-skeleton style={{ width: '40%' }}></sc-skeleton>\n            </div>\n          </sc-stacked-list-row>\n        </sc-stacked-list>\n      </sc-card>\n    );\n  }\n\n  getSubscriptionLink(subscription: Subscription) {\n    return addQueryArgs(window.location.href, {\n      action: 'edit',\n      model: 'subscription',\n      id: subscription.id,\n    });\n  }\n\n  renderList() {\n    return this.subscriptions.map(subscription => {\n      return (\n        <sc-stacked-list-row href={this.getSubscriptionLink(subscription)} key={subscription.id} mobile-size={0}>\n          <sc-subscription-details subscription={subscription}></sc-subscription-details>\n          <sc-icon name=\"chevron-right\" slot=\"suffix\"></sc-icon>\n        </sc-stacked-list-row>\n      );\n    });\n  }\n\n  renderContent() {\n    if (this.loading) {\n      return this.renderLoading();\n    }\n\n    if (this.subscriptions?.length === 0) {\n      return this.renderEmpty();\n    }\n\n    return (\n      <sc-card no-padding style={{ '--overflow': 'hidden' }}>\n        <sc-stacked-list>{this.renderList()}</sc-stacked-list>\n      </sc-card>\n    );\n  }\n\n  render() {\n    return (\n      <sc-dashboard-module class=\"subscriptions-list\" error={this.error}>\n        <span slot=\"heading\">\n          <slot name=\"heading\">{this.heading || __('Subscriptions', 'surecart')}</slot>\n        </span>\n\n        {!!this.allLink && !!this.subscriptions?.length && (\n          <sc-button type=\"link\" href={this.allLink} slot=\"end\" aria-label={sprintf(__('View all %s', 'surecart'), this.heading || 'Subscriptions')}>\n            {__('View all', 'surecart')}\n            <sc-icon aria-hidden=\"true\" name=\"chevron-right\" slot=\"suffix\"></sc-icon>\n          </sc-button>\n        )}\n\n        {this.renderContent()}\n\n        {!this.allLink && (\n          <sc-pagination\n            page={this.query.page}\n            perPage={this.query.per_page}\n            total={this.pagination.total}\n            totalPages={this.pagination.total_pages}\n            totalShowing={this?.subscriptions?.length}\n            onScNextPage={() => this.nextPage()}\n            onScPrevPage={() => this.prevPage()}\n          ></sc-pagination>\n        )}\n\n        {this.busy && <sc-block-ui></sc-block-ui>}\n      </sc-dashboard-module>\n    );\n  }\n}\n"],"mappings":"sLAAA,MAAMA,EAAyB,kmBAC/B,MAAAC,EAAeD,E,ygBCuDkBE,GAAAC,KAAAC,GAAE,kC,gMAYFF,GAAAC,KAAAC,GAAE,kC,8vBA0CAF,GAAAC,KAAAC,GAAE,kD,iwCA6DWF,GAAAC,KAAAC,GAAE,gCAAAC,KAAAC,aAAAC,EAAAF,KAAAG,iBAAA,MAAAD,SAAA,SAAAA,EAAAE,SAAAC,EAAA,aAAAC,IAAA,2CAAAC,KAAA,OAAAC,KAAAR,KAAAC,QAAAQ,KAAA,mBAI0BZ,GAAAC,KAAAY,QAAQb,GAAAC,KAAAC,GAAE,0BAAAC,KAAAW,SAAA,kBACzEd,GAAAC,KAAAC,GAAE,uBAAAM,EAAA,WAAAC,IAAA,gEAAAM,KAAA,gBAAAH,KAAA,YAAAT,KAAAa,iBAAAb,KAAAC,SAAAI,EAAA,iBAAAC,IAAA,2CAAAQ,KAAAd,KAAAe,MAAAD,KAAAE,QAAAhB,KAAAe,MAAAE,SAAAC,MAAAlB,KAAAmB,WAAAD,MAAAE,WAAApB,KAAAmB,WAAAE,YAAAC,cAAAC,EAAAvB,OAAA,MAAAA,YAAA,SAAAA,KAAAG,iBAAA,MAAAoB,SAAA,SAAAA,EAAAnB,OAAAoB,aAAA,IAAAxB,KAAAyB,WAAAC,aAAA,IAAA1B,KAAA2B,aAAA3B,KAAA4B,MAAAvB,EAAA,eAAAC,IAAA,6C","ignoreList":[]}