JezK

Edit File: sc-orders-list.js.map

{"file":"sc-orders-list.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA,MAAM,eAAe,GAAG,s8BAAs8B,CAAC;AAC/9B,2BAAe,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;8ECwDG,UAAE;;;;;;;;;;;;;8EAYF,UAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uDAyCG,UAAE;;;qDAGJ,UAAE;;;;;;;;;sJA0BG,UAAE;;;;;;;;;;;;;;;qBA8B5B,eAAO,CAAC,UAAE;;;;;;;;;;;;;;;uTAiCuB,UAAE,4PAI0B,eAAO,CAAC,UAAE,6CAA6C,UAAE,kCACxH,UAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/controllers/dashboard/orders-list/sc-orders-list.scss?tag=sc-orders-list&encapsulation=shadow","src/components/controllers/dashboard/orders-list/sc-orders-list.tsx"],"sourcesContent":[":host {\n display: block;\n}\n.orders-list {\n display: grid;\n gap: 0.75em;\n\n &__status {\n display: flex;\n align-items: center;\n gap: var(--sc-spacing-x-small);\n }\n\n &__heading {\n display: flex;\n flex-wrap: wrap;\n align-items: flex-end;\n justify-content: space-between;\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\n.order__row {\n color: var(--sc-color-gray-800);\n text-decoration: none;\n display: grid;\n align-items: center;\n justify-content: space-between;\n gap: 0;\n grid-template-columns: 1fr 1fr 1fr auto;\n margin: 0;\n padding: var(--sc-spacing-small) var(--sc-spacing-large);\n\n &:not(:last-child) {\n border-bottom: 1px solid var(--sc-color-gray-200);\n }\n\n &:hover {\n background: var(--sc-color-gray-50);\n }\n}\n\n.order__date {\n font-weight: var(--sc-font-weight-semibold);\n}\n\n.order__row {\n}\n","import { Component, Element, h, Prop, State } from '@stencil/core';\nimport { __, _n, sprintf } from '@wordpress/i18n';\nimport { addQueryArgs } from '@wordpress/url';\n\nimport apiFetch from '../../../../functions/fetch';\nimport { onFirstVisible } from '../../../../functions/lazy';\nimport { Checkout, Order } from '../../../../types';\n\n@Component({\n tag: 'sc-orders-list',\n styleUrl: 'sc-orders-list.scss',\n shadow: true,\n})\nexport class ScOrdersList {\n @Element() el: HTMLScOrdersListElement;\n /** Query to fetch orders */\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\n @State() orders: Array<Order> = [];\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 /** Only fetch if visible */\n componentWillLoad() {\n onFirstVisible(this.el, () => {\n this.initialFetch();\n });\n }\n\n async initialFetch() {\n try {\n this.loading = true;\n await this.getOrders();\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 fetchOrders() {\n try {\n this.busy = true;\n await this.getOrders();\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 orders */\n async getOrders() {\n if (!this.isCustomer) {\n return;\n }\n const response = (await await apiFetch({\n path: addQueryArgs(`surecart/v1/orders/`, {\n expand: ['checkout', 'checkout.line_items', 'checkout.charge'],\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.orders = (await response.json()) as Order[];\n return this.orders;\n }\n\n nextPage() {\n this.query.page = this.query.page + 1;\n this.fetchOrders();\n }\n\n prevPage() {\n this.query.page = this.query.page - 1;\n this.fetchOrders();\n }\n\n renderStatusBadge(order: Order) {\n const { status, checkout } = order;\n const { charge } = checkout as Checkout;\n if (charge && typeof charge === 'object') {\n if (charge?.fully_refunded) {\n return <sc-tag type=\"danger\">{__('Refunded', 'surecart')}</sc-tag>;\n }\n if (charge?.refunded_amount) {\n return <sc-tag type=\"info\">{__('Partially Refunded', 'surecart')}</sc-tag>;\n }\n }\n\n return <sc-order-status-badge status={status}></sc-order-status-badge>;\n }\n\n renderLoading() {\n return (\n <sc-card noPadding>\n <sc-stacked-list>\n <sc-stacked-list-row style={{ '--columns': '4' }} mobile-size={500}>\n {[...Array(4)].map(() => (\n <sc-skeleton style={{ width: '100px', display: 'inline-block' }}></sc-skeleton>\n ))}\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=\"shopping-bag\">{__(\"You don't have any orders.\", 'surecart')}</sc-empty>\n </slot>\n </div>\n );\n }\n\n renderList() {\n return this.orders.map(order => {\n const { checkout, created_at_date, id } = order;\n if (!checkout) return null;\n const { amount_due_display_amount, charge, delivered_items_count } = checkout as Checkout;\n const itemsCount = delivered_items_count || 0;\n return (\n <sc-stacked-list-row\n href={addQueryArgs(window.location.href, {\n action: 'show',\n model: 'order',\n id,\n })}\n style={{ '--columns': '4' }}\n mobile-size={500}\n >\n <div class=\"order__date\">{typeof charge !== 'string' && (charge?.created_at_date || created_at_date)}</div>\n <div>\n <sc-text\n truncate\n style={{\n '--color': 'var(--sc-color-gray-500)',\n }}\n >\n {sprintf(_n('%s item', '%s items', itemsCount, 'surecart'), itemsCount)}\n </sc-text>\n </div>\n <div class=\"orders-list__status\">\n {this.renderStatusBadge(order)}\n <sc-order-shipment-badge status={order?.shipment_status}></sc-order-shipment-badge>\n </div>\n <div>{amount_due_display_amount}</div>\n </sc-stacked-list-row>\n );\n });\n }\n\n renderContent() {\n if (this.loading) {\n return this.renderLoading();\n }\n\n if (this.orders?.length === 0) {\n return this.renderEmpty();\n }\n\n return (\n <sc-card no-padding>\n <sc-stacked-list>{this.renderList()}</sc-stacked-list>\n </sc-card>\n );\n }\n\n render() {\n return (\n <sc-dashboard-module class=\"orders-list\" error={this.error}>\n <span slot=\"heading\">\n <slot name=\"heading\">{this.heading || __('Order History', 'surecart')}</slot>\n </span>\n\n {!!this.allLink && !!this.orders?.length && (\n <sc-button type=\"link\" href={this.allLink} slot=\"end\" aria-label={sprintf(__('View all %s', 'surecart'), this.heading || __('Order History', 'surecart'))}>\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?.orders?.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"],"version":3}