JezK

Edit File: sc-licenses-list.cjs.entry.js.map

{"file":"sc-licenses-list.entry.cjs.js","mappings":";;;;;;;;;;;AAAA,MAAM,iBAAiB,GAAG,4JAA4J,CAAC;AACvL,6BAAe,iBAAiB;;;;;;;;;uBCuBJ,UAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;8EAyCG,UAAE;;;;;;;;;;;;;;;;;;;;;;;;;;0DA6BE,UAAE;;;yDAGH,UAAE;;;uDAGJ,UAAE;;;;;;;;;;;;;;kBAexB,UAAE;;;;;;;2KAyBwB,UAAE;;;;;;;;;;;;;;;;iTA+BO,eAAO,CAAC,UAAE;;;;;oVAeT,UAAE,uPAIrC,UAAE;;;;;;;;","names":[],"sources":["src/components/controllers/dashboard/sc-licenses-list/sc-licenses-list.css?tag=sc-licenses-list&encapsulation=shadow","src/components/controllers/dashboard/sc-licenses-list/sc-licenses-list.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.license__name {\n font-weight: var(--sc-font-weight-semibold);\n}\n\n.license__details {\n display: grid;\n gap: 0.25em;\n color: var(--sc-input-label-color);\n}\n","import { Component, Element, h, Prop, State } from '@stencil/core';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { License, Purchase, Product } from '../../../../types';\nimport { onFirstVisible } from '../../../../functions/lazy';\nimport apiFetch from '../../../../functions/fetch';\nimport { addQueryArgs } from '@wordpress/url';\n\n@Component({\n tag: 'sc-licenses-list',\n styleUrl: 'sc-licenses-list.css',\n shadow: true,\n})\nexport class ScLicensesList {\n @Element() el: HTMLScLicensesListElement;\n\n /** Query to fetch licenses */\n @Prop({ mutable: true }) query: {\n page: number;\n per_page: number;\n } = {\n page: 1,\n per_page: 10,\n };\n /**The heading of the licenses */\n @Prop() heading: string = __('Licenses', 'surecart');\n /**Whether the current user is customer */\n @Prop() isCustomer: boolean;\n /**View all link */\n @Prop() allLink: string;\n\n @Prop({ mutable: true }) licenses: License[] = [];\n @State() copied: boolean = false;\n @State() loading: boolean = false;\n @State() error: string = '';\n @State() pagination: {\n total: number;\n total_pages: number;\n } = {\n total: 0,\n total_pages: 0,\n };\n\n /** Only fetch if visible */\n componentWillLoad() {\n onFirstVisible(this.el, () => {\n this.initialFetch();\n });\n }\n\n nextPage() {\n this.query.page = this.query.page + 1;\n this.initialFetch();\n }\n\n prevPage() {\n this.query.page = this.query.page - 1;\n this.initialFetch();\n }\n\n async initialFetch() {\n try {\n this.loading = true;\n await this.getLicenses();\n } catch (e) {\n console.error(e);\n this.error = e?.message || __('Something went wrong', 'surecart');\n } finally {\n this.loading = false;\n }\n }\n\n async getLicenses() {\n if (!this.isCustomer) {\n return;\n }\n\n const response = (await await apiFetch({\n path: addQueryArgs('surecart/v1/licenses', {\n expand: ['purchase', 'purchase.product', 'activations'],\n ...this.query,\n }),\n parse: false,\n })) as Response;\n\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.licenses = (await response.json()) as License[];\n return this.licenses;\n }\n\n renderStatus(status: string) {\n if (status === 'active') {\n return <sc-tag type=\"success\">{__('Active', 'surecart')}</sc-tag>;\n }\n if (status === 'revoked') {\n return <sc-tag type=\"danger\">{__('Revoked', 'surecart')}</sc-tag>;\n }\n if (status === 'inactive') {\n return <sc-tag type=\"info\">{__('Not Activated', 'surecart')}</sc-tag>;\n }\n return <sc-tag type=\"info\">{status}</sc-tag>;\n }\n\n async copyKey(key: string) {\n try {\n await navigator.clipboard.writeText(key);\n this.copied = true;\n\n setTimeout(() => {\n this.copied = false;\n }, 2000);\n } catch (err) {\n console.error(err);\n alert(__('Error copying to clipboard', 'surecart'));\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 renderEmpty() {\n return (\n <div>\n <sc-divider style={{ '--spacing': '0' }}></sc-divider>\n <slot name=\"empty\">\n <sc-empty icon=\"file-text\">{__(\"You don't have any licenses.\", 'surecart')}</sc-empty>\n </slot>\n </div>\n );\n }\n\n renderContent() {\n if (this.loading) {\n return this.renderLoading();\n }\n\n if (this.licenses?.length === 0) {\n return this.renderEmpty();\n }\n\n return (\n <sc-card no-padding>\n <sc-stacked-list>\n {this.licenses?.map(({ id, purchase, status, activation_limit, activation_count }) => (\n <sc-stacked-list-row\n key={id}\n href={addQueryArgs(window.location.href, {\n action: 'show',\n model: 'license',\n id,\n })}\n mobile-size={0}\n >\n <div class=\"license__details\">\n <div class=\"license__name\">{((purchase as Purchase)?.product as Product)?.name}</div>\n <div>\n {this.renderStatus(status)} {sprintf(__('%1s of %2s Activations Used', 'surecart'), activation_count || 0, activation_limit || '∞')}\n </div>\n </div>\n <sc-icon name=\"chevron-right\" slot=\"suffix\"></sc-icon>\n </sc-stacked-list-row>\n ))}\n </sc-stacked-list>\n </sc-card>\n );\n }\n\n render() {\n return (\n <sc-dashboard-module class=\"purchase\" part=\"base\" error={this.error}>\n <span slot=\"heading\">\n <slot name=\"heading\">{this.heading || __('License Keys', 'surecart')}</slot>\n </span>\n {!!this.allLink && !!this.licenses?.length && (\n <sc-button type=\"link\" href={this.allLink} slot=\"end\">\n {__('View all', 'surecart')}\n <sc-icon 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?.licenses?.length}\n onScNextPage={() => this.nextPage()}\n onScPrevPage={() => this.prevPage()}\n />\n )}\n </sc-dashboard-module>\n );\n }\n}\n"],"version":3}