JezK

Edit File: sc-line-items.entry.js.map

{"file":"sc-line-items.entry.js","mappings":"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","names":["checkoutState"],"sources":["src/components/controllers/checkout-form/line-items/sc-line-items.scss?tag=sc-line-items&encapsulation=shadow","src/components/controllers/checkout-form/line-items/sc-line-items.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n:slotted(* ~ *) {\n margin-top: 20px;\n}\n\n.line-items {\n display: grid;\n gap: var(--sc-form-row-spacing);\n}\n\n.line-item {\n display: grid;\n gap: var(--sc-spacing-small);\n\n &--has-swap {\n border: 1px solid var(--sc-input-border-color);\n background: var(--sc-card-background-color, var(--sc-color-white));\n border-radius: var(--sc-border-radius-medium);\n gap: 0;\n border-radius: var(--sc-input-border-radius-medium);\n overflow: hidden;\n\n sc-product-line-item {\n padding: var(--sc-spacing-medium);\n border-bottom: solid var(--sc-input-border-width) var(--sc-input-border-color);\n }\n\n sc-swap {\n padding: var(--sc-spacing-medium);\n background: var(--sc-card-background-color, var(--sc-color-gray-50));\n }\n }\n}\n\nsc-swap {\n font-size: var(--sc-font-size-small);\n line-height: var(--sc-line-height-dense);\n color: var(--sc-input-label-color);\n}\n\n.fee__description {\n opacity: 0.75;\n}\n","import { Component, h, Prop } from '@stencil/core';\nimport { __ } from '@wordpress/i18n';\n\nimport { state as checkoutState } from '@store/checkout';\nimport { LineItem, Product, Variant } from '../../../../types';\nimport { removeCheckoutLineItem, updateCheckoutLineItem } from '@store/checkout/mutations';\nimport { formBusy } from '@store/form/getters';\nimport { getMaxStockQuantity } from '../../../../functions/quantity';\nimport { groupBundleLineItems } from '../../../../functions/line-items';\n\n/**\n * @part base - The component base\n * @part line-item - The line item\n * @part product-line-item - The product line item\n * @part line-item__image - The line item image\n * @part line-item__text - The line item text\n * @part line-item__title - The line item title\n * @part line-item__suffix - The line item suffix\n * @part line-item__description - The line item description (variant, price name, SKU)\n * @part line-item__trial-fees - The line item trial and fees\n * @part line-item__price - The line item price\n * @part line-item__price-amount - The line item price amount\n * @part line-item__price-description - The line item price description\n * @part line-item__price-scratch - The line item price scratch\n * @part line-item__static-quantity - The line item static quantity\n * @part line-item__remove-icon - The line item remove icon\n * @part line-item__quantity - The line item quantity\n * @part line-item__quantity-minus - The line item quantity minus\n * @part line-item__quantity-minus-icon - The line item quantity minus icon\n * @part line-item__quantity-plus - The line item quantity plus\n * @part line-item__quantity-plus-icon - The line item quantity plus icon\n * @part line-item__quantity-input - The line item quantity input\n * @part line-item__details - The collapsible details region (bundle components)\n * @part line-item__details-component - A single bundle component row\n * @part line-item__details-variant - The variant options within a bundle component row\n * @part line-item__details-toggle - The details expand/collapse toggle button\n * @part line-item__note - The line item note\n */\n\n@Component({\n tag: 'sc-line-items',\n styleUrl: 'sc-line-items.scss',\n shadow: true,\n})\nexport class ScLineItems {\n /**\n * Is the line item editable?\n */\n @Prop() editable: boolean;\n\n /**\n * Is the line item removable?\n */\n @Prop() removable: boolean;\n\n /**\n * Show every bundle component (default), or only those with a selected\n * variant when set to `false`.\n */\n @Prop() showAllBundleItems: boolean = true;\n\n /** Separator between a bundle component's name and its variant options. */\n @Prop() separator: string = '·';\n\n /**\n * Is the line item editable?\n */\n isEditable(item: LineItem) {\n // ad_hoc prices and bumps cannot have quantity.\n if (item?.price?.ad_hoc || item?.bump_amount || item?.locked) {\n return false;\n }\n return this.editable;\n }\n\n render() {\n if (!!formBusy() && !checkoutState?.checkout?.line_items?.data?.length) {\n return (\n <sc-line-item>\n <sc-skeleton style={{ 'width': '50px', 'height': '50px', '--border-radius': '0' }} slot=\"image\"></sc-skeleton>\n <sc-skeleton slot=\"title\" style={{ width: '120px', display: 'inline-block' }}></sc-skeleton>\n <sc-skeleton slot=\"description\" style={{ width: '60px', display: 'inline-block' }}></sc-skeleton>\n <sc-skeleton style={{ width: '120px', display: 'inline-block' }} slot=\"price\"></sc-skeleton>\n <sc-skeleton style={{ width: '60px', display: 'inline-block' }} slot=\"price-description\"></sc-skeleton>\n </sc-line-item>\n );\n }\n\n // Sort items so that items with swaps are at the top.\n const sortedItems = (checkoutState?.checkout?.line_items?.data || []).sort((a, b) => {\n const aHasSwap = a?.is_swappable ? 1 : 0;\n const bHasSwap = b?.is_swappable ? 1 : 0;\n return bHasSwap - aHasSwap;\n });\n\n // Group bundle parents and their components, then render parents first.\n const { regular, bundleParents, componentsByParent } = groupBundleLineItems(sortedItems as LineItem[]);\n const orderedItems = [...bundleParents, ...regular];\n\n return (\n <div class=\"line-items\" part=\"base\" tabindex=\"0\">\n {orderedItems.map(item => {\n const product = item?.price?.product as Product;\n const isBundle = !!product?.bundle;\n const max = getMaxStockQuantity(product, item?.variant as Variant);\n return (\n <div class={`line-item ${item?.is_swappable ? 'line-item--has-swap' : ''}`} key={item.id}>\n <sc-product-line-item\n image={item?.image}\n name={product?.name}\n price={item?.price?.name}\n variant={item?.variant_display_options}\n fees={item?.fees?.data}\n amount={item.ad_hoc_display_amount ? item.ad_hoc_display_amount : item.subtotal_display_amount}\n scratch={item.ad_hoc_display_amount ? null : item?.scratch_display_amount}\n trial={item?.price?.trial_text}\n interval={`${item?.price?.short_interval_text} ${item?.price?.short_interval_count_text}`}\n quantity={item.quantity}\n purchasableStatus={item?.purchasable_status_display}\n note={item?.display_note}\n bundleComponents={isBundle ? componentsByParent[item.id] || [] : []}\n showAllBundleItems={this.showAllBundleItems}\n separator={this.separator}\n {...(max ? { max } : {})}\n editable={this.isEditable(item)}\n removable={!item?.locked && this.removable}\n onScUpdateQuantity={e => updateCheckoutLineItem({ id: item.id, data: { quantity: e.detail } })}\n onScRemove={() => removeCheckoutLineItem(item?.id)}\n exportparts=\"base:line-item, product-line-item, image:line-item__image, placeholder__image: line-item__placeholder-image, text:line-item__text, title:line-item__title, suffix:line-item__suffix, description:line-item__description, trial-fees:line-item__trial-fees, price:line-item__price, price__amount:line-item__price-amount, price__description:line-item__price-description, price__scratch:line-item__price-scratch, static-quantity:line-item__static-quantity, remove-icon__base:line-item__remove-icon, quantity:line-item__quantity, quantity__minus:line-item__quantity-minus, quantity__minus-icon:line-item__quantity-minus-icon, quantity__plus:line-item__quantity-plus, quantity__plus-icon:line-item__quantity-plus-icon, quantity__input:line-item__quantity-input, details:line-item__details, details__component:line-item__details-component, details__variant:line-item__details-variant, details__toggle:line-item__details-toggle, note:line-item__note\"\n />\n {!isBundle && <sc-swap lineItem={item} />}\n </div>\n );\n })}\n </div>\n );\n }\n}\n"],"version":3}