JezK

Edit File: sc-donation-choices.entry.js.map

{"file":"sc-donation-choices.entry.js","mappings":";;;AAAA,MAAM,oBAAoB,GAAG,0KAA0K,CAAC;AACxM,gCAAe,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;moBC+KpB,UAAE;;;;;;;;;AAWjB;;;;;","names":[],"sources":["src/components/controllers/checkout-form/donation-choices/sc-donation-choices.scss?tag=sc-donation-choices&encapsulation=shadow","src/components/controllers/checkout-form/donation-choices/sc-donation-choices.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.sc-donation-choices {\n display: grid;\n gap: var(--sc-spacing-small);\n position: relative;\n\n &__form {\n display: grid;\n gap: var(--sc-spacing-small);\n }\n}\n","import { Component, h, Prop, Watch, State, Element, Listen, Event, EventEmitter, Method } from '@stencil/core';\nimport { LineItem, LineItemData } from '../../../../types';\nimport { __ } from '@wordpress/i18n';\nimport { openWormhole } from 'stencil-wormhole';\n\n@Component({\n tag: 'sc-donation-choices',\n styleUrl: 'sc-donation-choices.scss',\n shadow: true,\n})\nexport class ScDonationChoices {\n @Element() el: HTMLScDonationChoicesElement;\n private input: HTMLScPriceInputElement;\n\n /** The price id for the fields. */\n @Prop({ reflect: true }) priceId: string;\n\n /** The default amount to load the page with. */\n @Prop() defaultAmount: string;\n\n /** Currency code for the donation. */\n @Prop() currencyCode: string = 'usd';\n\n /** Order line items. */\n @Prop() lineItems: LineItem[] = [];\n\n /** Is this loading */\n @Prop() loading: boolean;\n @Prop() busy: boolean;\n @Prop() removeInvalid: boolean = true;\n\n /** The label for the field. */\n @Prop() label: string;\n\n /** Holds the line item for this component. */\n @State() lineItem: LineItem;\n\n /** Error */\n @State() error: string;\n\n @State() showCustomAmount: boolean;\n\n /** Toggle line item event */\n @Event() scRemoveLineItem: EventEmitter<LineItemData>;\n\n /** Toggle line item event */\n @Event() scUpdateLineItem: EventEmitter<LineItemData>;\n\n /** Toggle line item event */\n @Event() scAddLineItem: EventEmitter<LineItemData>;\n\n @Method()\n async reportValidity() {\n if (!this.input) return true;\n return this.input.shadowRoot.querySelector('sc-input').reportValidity();\n }\n\n @Listen('scChange')\n handleChange() {\n const checked = Array.from(this.getChoices()).find(item => item.checked);\n this.showCustomAmount = checked.value === 'ad_hoc';\n if (!isNaN(parseInt(checked.value))) {\n this.scUpdateLineItem.emit({ price_id: this.priceId, quantity: 1, ad_hoc_amount: parseInt(checked.value) });\n }\n }\n\n @Watch('showCustomAmount')\n handleCustomAmountToggle(val) {\n if (val) {\n setTimeout(() => {\n this.input?.triggerFocus?.();\n }, 50);\n }\n }\n\n /** Store current line item in state. */\n @Watch('lineItems')\n handleLineItemsChange() {\n if (!this.lineItems?.length) return;\n this.lineItem = (this.lineItems || []).find(lineItem => lineItem.price.id === this.priceId);\n }\n\n @Watch('lineItem')\n handleLineItemChange(val) {\n this.removeInvalid && this.removeInvalidPrices();\n const choices = this.getChoices();\n let hasCheckedOption = false;\n // check the correct option.\n choices.forEach((el: HTMLScChoiceElement) => {\n if (isNaN(parseInt(el.value)) || el.disabled) return;\n if (parseInt(el.value) === val?.ad_hoc_amount) {\n el.checked = true;\n hasCheckedOption = true;\n } else {\n el.checked = false;\n }\n });\n\n this.showCustomAmount = !hasCheckedOption;\n // no options are checked, let's fill in the input.\n if (!hasCheckedOption) {\n (this.el.querySelector('sc-choice[value=\"ad_hoc\"]') as HTMLScChoiceElement).checked = true;\n }\n }\n\n componentWillLoad() {\n this.handleLineItemsChange();\n }\n\n selectDefaultChoice() {\n const choices = this.getChoices();\n if (!choices.length) return;\n choices[0].checked = true;\n }\n\n getChoices() {\n return (this.el.querySelectorAll('sc-choice') as NodeListOf<HTMLScChoiceElement>) || [];\n }\n\n removeInvalidPrices() {\n if (!this.lineItem) return;\n\n this.getChoices().forEach((el: HTMLScChoiceElement) => {\n // we have a max and the value is more.\n if (this.lineItem?.price?.ad_hoc_max_amount && parseInt(el.value) > this.lineItem?.price?.ad_hoc_max_amount) {\n el.style.display = 'none';\n el.disabled = true;\n return;\n }\n\n // we have a min and the value is less.\n if (this.lineItem?.price?.ad_hoc_min_amount && parseInt(el.value) < this.lineItem?.price?.ad_hoc_min_amount) {\n el.style.display = 'none';\n el.disabled = true;\n return;\n }\n\n el.style.display = 'flex';\n el.disabled = false;\n });\n }\n\n updateCustomAmount() {\n if (this.input.value === this.lineItem?.ad_hoc_amount?.toString?.()) return;\n this.input.value\n ? this.scUpdateLineItem.emit({ price_id: this.priceId, quantity: 1, ad_hoc_amount: parseInt(this.input.value) })\n : this.scRemoveLineItem.emit({ price_id: this.priceId, quantity: 1 });\n }\n\n render() {\n if (this.loading) {\n return (\n <div class=\"sc-donation-choices\">\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 </div>\n );\n }\n\n return (\n <div class=\"sc-donation-choices\">\n <sc-choices label={this.label} auto-width>\n <slot />\n </sc-choices>\n\n {this.showCustomAmount && (\n <div class=\"sc-donation-choices__form\">\n <sc-price-input\n ref={el => (this.input = el as HTMLScPriceInputElement)}\n required\n currencyCode={this.currencyCode}\n label={'Enter an amount'}\n value={this.lineItem?.ad_hoc_amount?.toString?.()}\n ></sc-price-input>\n <sc-button type=\"primary\" onClick={() => this.updateCustomAmount()} full busy={this.busy}>\n {__('Update', 'surecart')}\n </sc-button>\n </div>\n )}\n\n {this.busy && <sc-block-ui style={{ zIndex: '9' }}></sc-block-ui>}\n </div>\n );\n }\n}\n\nopenWormhole(ScDonationChoices, ['lineItems', 'loading', 'busy', 'currencyCode'], false);\n"],"version":3}