JezK

Edit File: sc-product-selected-price.cjs.entry.js.map

{"file":"sc-product-selected-price.entry.cjs.js","mappings":";;;;;;;;;;;;;;;;;;;;AAAA,MAAM,yBAAyB,GAAG,moBAAmoB,CAAC;AACtqB,qCAAe,yBAAyB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sFC8FvB,UAAE,8KAO2C,UAAE;mcAUC,UAAE;;;;;gBAM7C,UAAE;;6SASP,UAAE;;;;;;;;;;","names":[],"sources":["src/components/controllers/checkout-form/sc-product-selected-price/sc-product-selected-price.scss?tag=sc-product-selected-price&encapsulation=shadow","src/components/controllers/checkout-form/sc-product-selected-price/sc-product-selected-price.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\nsc-form {\n width: 100%;\n}\n\n.selected-price {\n display: flex;\n align-items: center;\n gap: var(--sc-spacing-small);\n flex-wrap: wrap;\n\n &__wrap {\n display: flex;\n align-items: baseline;\n flex-wrap: wrap;\n gap: var(--sc-spacing-xx-small);\n color: var(--sc-selected-price-color, var(--sc-color-gray-800));\n line-height: 1;\n }\n\n &__price {\n font-size: var(--sc-font-size-xxx-large);\n font-weight: var(--sc-font-weight-bold);\n white-space: nowrap;\n }\n\n &__interval {\n font-weight: var(--sc-font-weight-bold);\n opacity: 0.65;\n white-space: nowrap;\n }\n\n &__scratch-price {\n opacity: 0.65;\n font-weight: var(--sc-font-weight-normal);\n text-decoration: line-through;\n }\n}\n","import { Component, Host, h, Prop, Fragment, State, Event, EventEmitter, Watch } from '@stencil/core';\nimport { __ } from '@wordpress/i18n';\nimport { intervalString } from '../../../../functions/price';\nimport { LineItemData } from 'src/types';\nimport { getLineItemByProductId } from '@store/checkout/getters';\nimport { formBusy } from '@store/form/getters';\nimport { onChange } from '@store/checkout';\n\n@Component({\n tag: 'sc-product-selected-price',\n styleUrl: 'sc-product-selected-price.scss',\n shadow: true,\n})\nexport class ScProductSelectedPrice {\n /** The input reference */\n private input: HTMLScPriceInputElement;\n\n /** The product id. */\n @Prop() productId: string;\n\n /** Show the input? */\n @State() showInput: boolean;\n\n /** The adHocAmount */\n @State() adHocAmount: number;\n\n /** Toggle line item event */\n @Event() scUpdateLineItem: EventEmitter<LineItemData>;\n\n /** The line item from state. */\n lineItem() {\n return getLineItemByProductId(this.productId);\n }\n\n componentWillLoad() {\n onChange('checkout', () => {\n this.adHocAmount = this.lineItem()?.ad_hoc_amount || this.lineItem()?.price?.amount;\n });\n }\n\n updatePrice() {\n this.showInput = false;\n if (!this.adHocAmount && this.adHocAmount !== 0) return;\n if (this.adHocAmount === this.lineItem()?.ad_hoc_amount) return;\n this.scUpdateLineItem.emit({ price_id: this.lineItem()?.price?.id, quantity: 1, ad_hoc_amount: this.adHocAmount });\n }\n\n @Watch('showInput')\n handleShowInputChange(val) {\n if (val) {\n setTimeout(() => {\n this.input.triggerFocus();\n }, 50);\n }\n }\n\n onSubmit(e) {\n e.preventDefault();\n e.stopImmediatePropagation();\n this.updatePrice();\n }\n\n render() {\n const price = this.lineItem()?.price;\n const variant = this.lineItem()?.variant;\n\n if (!price) return <Host style={{ display: 'none' }}></Host>;\n\n return (\n <div class={{ 'selected-price': true }}>\n {this.showInput ? (\n <sc-form\n onScSubmit={e => this.onSubmit(e)}\n onScFormSubmit={e => {\n e.preventDefault();\n e.stopImmediatePropagation();\n }}\n >\n <sc-price-input\n ref={el => (this.input = el as HTMLScPriceInputElement)}\n size=\"large\"\n currency-code={price?.currency || 'usd'}\n min={price?.ad_hoc_min_amount}\n max={price?.ad_hoc_max_amount}\n placeholder={'0.00'}\n required={true}\n value={this.adHocAmount?.toString?.()}\n onScInput={e => (this.adHocAmount = parseFloat(e.target.value))}\n onKeyDown={e => {\n if (e.key === 'Enter') {\n this.onSubmit(e);\n }\n }}\n >\n <sc-button slot=\"suffix\" type=\"link\" submit>\n {__('Update', 'surecart')}\n </sc-button>\n </sc-price-input>\n </sc-form>\n ) : (\n <Fragment>\n <div class=\"selected-price__wrap\">\n <span class=\"selected-price__price\" aria-label={__('Product price', 'surecart')}>\n {price?.scratch_amount > price.amount && (\n <Fragment>\n <span class=\"selected-price__scratch-price\" part=\"price__scratch\">\n {price?.scratch_display_amount}{' '}\n </span>\n </Fragment>\n )}\n {this.lineItem()?.ad_hoc_amount !== null ? this.lineItem()?.ad_hoc_display_amount : variant?.display_amount || price?.display_amount}\n </span>\n <span class=\"selected-price__interval\" aria-label={__('Price interval', 'surecart')}>\n {intervalString(price, {\n labels: {\n interval: '/',\n period:\n /** translators: used as in time period: \"for 3 months\" */\n __('for', 'surecart'),\n },\n })}\n </span>\n </div>\n\n {price?.ad_hoc && !formBusy() && (\n <sc-button class=\"selected-price__change-amount\" type=\"primary\" size=\"small\" onClick={() => (this.showInput = true)}>\n <sc-icon name=\"edit\" slot=\"prefix\"></sc-icon>\n {__('Change Amount', 'surecart')}\n </sc-button>\n )}\n </Fragment>\n )}\n </div>\n );\n }\n}\n"],"version":3}