JezK

Edit File: sc-charges-list.entry.js.map

{"file":"sc-charges-list.entry.js","mappings":";;;;;;;AAAA,MAAM,gBAAgB,GAAG,2EAA2E,CAAC;AACrG,4BAAe,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;6BCsEV,UAAE;;;;;;;;;;;mDAWa,UAAE;;;oDAID,UAAE;;gDAGJ,UAAE;;;4FAMT,UAAE;;;;;;;;;;;;;;;;;;;;6HAyCwC,eAAO,CAAC,UAAE;;;;;;;;;;;;;wTAwBhC,UAAE,yKAKrC,UAAE;;;;;;;;","names":[],"sources":["src/components/controllers/dashboard/charges-list/sc-charges-list.scss?tag=sc-charges-list&encapsulation=shadow","src/components/controllers/dashboard/charges-list/sc-charges-list.tsx"],"sourcesContent":[":host {\n display: block;\n position: relative;\n}\n\n.charges-list {\n display: grid;\n gap: 1em;\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 { Charge, Checkout, Order } from '../../../../types';\nimport { onFirstVisible } from '../../../../functions/lazy';\n\n@Component({\n tag: 'sc-charges-list',\n styleUrl: 'sc-charges-list.scss',\n shadow: true,\n})\nexport class ScChargesList {\n @Element() el: HTMLScChargesListElement;\n /** Query to fetch charges */\n @Prop({ mutable: true }) query: {\n page: number;\n per_page: number;\n } = {\n page: 1,\n per_page: 10,\n };\n\n @Prop() heading: string;\n @Prop() showPagination: boolean = true;\n @Prop() allLink: string;\n @State() charges: Array<Charge> = [];\n\n /** Loading state */\n @State() loading: boolean;\n @State() loaded: 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 /** Only fetch if visible */\n componentWillLoad() {\n onFirstVisible(this.el, () => {\n this.getItems();\n });\n }\n\n /** Get items */\n async getItems() {\n try {\n this.loading = true;\n const response = (await apiFetch({\n path: addQueryArgs(`surecart/v1/charges/`, {\n expand: ['checkout', 'checkout.order'],\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.charges = (await response.json()) as Charge[];\n } catch (e) {\n if (e?.message) {\n this.error = e.message;\n } else {\n this.error = __('Something went wrong', 'surecart');\n }\n console.error(this.error);\n } finally {\n this.loading = false;\n this.loaded = true;\n }\n }\n\n renderRefundStatus(charge: Charge) {\n if (charge?.fully_refunded) {\n return <sc-tag type=\"danger\">{__('Refunded', 'surecart')}</sc-tag>;\n }\n\n if (charge?.refunded_amount) {\n return <sc-tag type=\"warning\">{__('Partially Refunded', 'surecart')}</sc-tag>;\n }\n\n return <sc-tag type=\"success\">{__('Paid', 'surecart')}</sc-tag>;\n }\n\n renderEmpty() {\n return (\n <sc-stacked-list-row mobile-size={0}>\n <slot name=\"empty\">{__('You have no saved payment methods.', 'surecart')}</slot>\n </sc-stacked-list-row>\n );\n }\n\n renderLoading() {\n return (\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 );\n }\n\n renderContent() {\n if (this.loading && !this.loaded) {\n return this.renderLoading();\n }\n\n if (this.charges?.length === 0) {\n return this.renderEmpty();\n }\n\n return this.charges.map(charge => {\n const { created_at_date, display_amount } = charge;\n\n return (\n <sc-stacked-list-row\n style={{ '--columns': '4' }}\n mobile-size={600}\n href={addQueryArgs(window.location.href, {\n action: 'show',\n model: 'order',\n id: ((charge.checkout as Checkout).order as Order)?.id,\n })}\n >\n <strong>{created_at_date}</strong>\n\n <sc-text style={{ '--color': 'var(--sc-color-gray-500)' }}>{sprintf(__('#%s', 'surecart'), ((charge.checkout as Checkout).order as Order).number)}</sc-text>\n\n <div>{this.renderRefundStatus(charge)}</div>\n\n <strong>{display_amount}</strong>\n </sc-stacked-list-row>\n );\n });\n }\n\n nextPage() {\n this.query.page = this.query.page + 1;\n this.getItems();\n }\n\n prevPage() {\n this.query.page = this.query.page - 1;\n this.getItems();\n }\n\n render() {\n return (\n <sc-dashboard-module class=\"charges-list\" error={this.error}>\n <span slot=\"heading\">\n <slot name=\"heading\">{this.heading || __('Payment History', 'surecart')}</slot>\n </span>\n\n {!!this.allLink && (\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 <sc-card no-padding style={{ '--overflow': 'hidden' }}>\n <sc-stacked-list>{this.renderContent()}</sc-stacked-list>\n </sc-card>\n\n {this.showPagination && (\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?.charges?.length}\n onScNextPage={() => this.nextPage()}\n onScPrevPage={() => this.prevPage()}\n ></sc-pagination>\n )}\n\n {this.loading && this.loaded && <sc-block-ui spinner></sc-block-ui>}\n </sc-dashboard-module>\n );\n }\n}\n"],"version":3}