JezK

Edit File: sc-fulfillments.entry.js.map

{"file":"sc-fulfillments.entry.js","mappings":";;;;;;AAAA,MAAM,iBAAiB,GAAG,s3BAAs3B,CAAC;AACj5B,6BAAe,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;8EC0CC,UAAE;;;;;;;;;;;;;sLAsBa,UAAE;;;4ZAgBK,UAAE;;s7CA+B5B,eAAO,CAAC,UAAE;;;;;;;;;;","names":[],"sources":["src/components/controllers/dashboard/fulfillments/sc-fulfillments.scss?tag=sc-fulfillments&encapsulation=shadow","src/components/controllers/dashboard/fulfillments/sc-fulfillments.tsx"],"sourcesContent":[".fulfillment {\n display: grid;\n gap: var(--sc-spacing-x-large);\n\n &__number {\n font-weight: bold;\n }\n &__header {\n display: flex;\n align-items: center;\n gap: var(--sc-spacing-medium);\n }\n}\n\nsc-card {\n --sc-card-padding: var(--sc-spacing-x-large);\n}\n\n.trackings {\n display: flex;\n gap: 0.75em;\n color: var(--sc-line-item-title-color, var(--sc-input-label-color));\n\n &__title {\n line-height: var(--sc-line-height-dense);\n font-weight: var(--sc-font-weight-bold);\n }\n\n sc-icon {\n opacity: 0.5;\n font-size: 22px;\n }\n}\n\n.line_items {\n display: grid;\n gap: var(--sc-spacing-large);\n}\n\n.line_item {\n &__info {\n display: flex;\n gap: var(--sc-spacing-medium);\n align-items: center;\n }\n\n &__image img {\n width: var(--sc-product-line-item-image-size, 4em);\n height: var(--sc-product-line-item-image-size, 4em);\n object-fit: cover;\n border-radius: 4px;\n border: solid 1px var(--sc-input-border-color, var(--sc-input-border));\n display: block;\n box-shadow: var(--sc-input-box-shadow);\n }\n}\n","import { Component, Element, Host, Prop, State, h } from '@stencil/core';\nimport { __, _n, sprintf } from '@wordpress/i18n';\nimport apiFetch from '../../../../functions/fetch';\nimport { addQueryArgs } from '@wordpress/url';\nimport { Fulfillment, Product } from 'src/types';\n\n@Component({\n tag: 'sc-fulfillments',\n styleUrl: 'sc-fulfillments.scss',\n shadow: true,\n})\nexport class ScFulfillments {\n @Element() el: HTMLScFulfillmentsElement;\n\n @Prop() orderId: string;\n @Prop() heading: string;\n\n /** Holds fulfillments. */\n @State() fulfillments: Fulfillment[];\n\n /** Loading state */\n @State() loading: boolean;\n @State() busy: boolean;\n\n /** Error message */\n @State() error: string;\n\n componentDidLoad() {\n this.fetch();\n }\n\n async fetch() {\n try {\n this.busy = true;\n this.fulfillments = (await apiFetch({\n path: addQueryArgs(`surecart/v1/fulfillments`, {\n expand: ['trackings', 'fulfillment_items', 'fulfillment_item.line_item', 'line_item.price', 'price.product'],\n order_ids: [this.orderId],\n shipment_status: ['shipped', 'delivered'],\n }),\n })) as Fulfillment[];\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 renderLoading() {\n return (\n <sc-flex flexDirection=\"column\" style={{ gap: '1em' }}>\n <sc-skeleton style={{ width: '20%', display: 'inline-block' }}></sc-skeleton>\n <sc-skeleton style={{ width: '60%', display: 'inline-block' }}></sc-skeleton>\n <sc-skeleton style={{ width: '40%', display: 'inline-block' }}></sc-skeleton>\n </sc-flex>\n );\n }\n\n render() {\n if (this.loading || !this.fulfillments?.length) return <Host style={{ display: 'none' }}></Host>;\n\n return (\n <sc-spacing style={{ '--spacing': 'var(--sc-spacing-large)' }}>\n <sc-dashboard-module error={this.error}>\n <span slot=\"heading\">{this.heading || _n('Shipment', 'Shipments', this.fulfillments?.length, 'surecart')}</span>\n {this.fulfillments.map(fulfillment => (\n <sc-card noPadding>\n <sc-stacked-list>\n <sc-stacked-list-row>\n <div class=\"fulfillment__header\">\n <sc-fulfillment-shipping-status-badge status={fulfillment.shipment_status} />\n <div class=\"fulfillment__number\">#{fulfillment?.number}</div>\n </div>\n </sc-stacked-list-row>\n\n {!!fulfillment?.trackings?.data?.length && (\n <sc-stacked-list-row>\n <div class=\"trackings\">\n <sc-icon name=\"truck\" />\n <div class=\"trackings__details\">\n <div class=\"trackings__title\">{_n('Tracking number', 'Tracking numbers', fulfillment?.trackings?.data?.length, 'surecart')}</div>\n <div class=\"trackings__list\">\n {(fulfillment?.trackings?.data || []).map(({ number, url }) => (\n <a href={url} target=\"_blank\">\n {number}\n </a>\n ))}\n </div>\n </div>\n </div>\n </sc-stacked-list-row>\n )}\n\n {(fulfillment?.fulfillment_items?.data || []).map(({ id, line_item, quantity }) => {\n return (\n <sc-stacked-list-row key={id} style={{ '--columns': '2' }}>\n <div>\n <div class=\"line_item__info\">\n <div class=\"line_item__image\">\n {!!(line_item?.price?.product as Product)?.line_item_image && <img {...((line_item?.price?.product as Product)?.line_item_image as any)} />}\n </div>\n <div class=\"line_item__text\">\n <div>{(line_item?.price?.product as Product)?.name}</div>\n <div>\n {!!(line_item?.price?.product as Product)?.weight && (\n <sc-format-number type=\"unit\" value={(line_item?.price?.product as Product)?.weight} unit={(line_item?.price?.product as Product)?.weight_unit} />\n )}\n </div>\n </div>\n </div>\n </div>\n <span>{sprintf(__('Qty: %d', 'surecart'), quantity || 0)}</span>\n </sc-stacked-list-row>\n );\n })}\n </sc-stacked-list>\n </sc-card>\n ))}\n </sc-dashboard-module>\n </sc-spacing>\n );\n }\n}\n"],"version":3}