JezK

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

{"file":"sc-product-donation-choices.entry.cjs.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,MAAM,2BAA2B,GAAG,wRAAwR,CAAC;AAC7T,uCAAe,2BAA2B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kBCsD5B,UAAE;kBACF,UAAE;;;;;;;;","names":[],"sources":["src/components/controllers/checkout-form/product-donation-choices/sc-product-donation-choices.scss?tag=sc-product-donation-choices&encapsulation=shadow","src/components/controllers/checkout-form/product-donation-choices/sc-product-donation-choices.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.sc-product-donation-choices {\n display: grid;\n gap: 2em;\n position: relative;\n --columns: 4;\n &__form {\n display: grid;\n gap: var(--sc-spacing-small);\n }\n}\n.sc-donation-recurring-choices {\n display: grid;\n gap: var(--sc-spacing-small);\n position: relative;\n --columns: 2;\n}\n","import { Component, h, Prop, Element, Host } from '@stencil/core';\nimport { __ } from '@wordpress/i18n';\nimport { state as donationState } from '@store/product-donation';\n\n@Component({\n tag: 'sc-product-donation-choices',\n styleUrl: 'sc-product-donation-choices.scss',\n shadow: true,\n})\nexport class ScProductDonationChoice {\n @Element() el: HTMLScProductDonationChoicesElement;\n\n /** The product id for the fields. */\n @Prop({ reflect: true }) productId: string;\n\n /** The label for the field. */\n @Prop() label: string;\n\n @Prop() recurring: boolean;\n\n state() {\n return donationState[this.productId];\n }\n\n updateState(data) {\n donationState[this.productId] = {\n ...donationState[this.productId],\n ...data,\n };\n }\n\n render() {\n const prices = (this.state()?.product?.prices?.data || [])\n .filter(price => (this.recurring ? price?.recurring_interval && price?.ad_hoc : !price?.recurring_interval && price?.ad_hoc))\n .filter(price => !price?.archived);\n\n // no prices, or less than 2 prices, we have no choices.\n if (!prices?.length) {\n return <Host style={{ display: 'none' }}></Host>;\n }\n\n // return price choice container.\n return (\n <sc-recurring-price-choice-container\n prices={prices.sort((a, b) => a?.position - b?.position)}\n product={this.state()?.product}\n selectedPrice={this.state().selectedPrice}\n showDetails={false}\n showAmount={false}\n onScChange={e => {\n const selectedPrice = (this.state().product?.prices?.data || []).find(({ id }) => id == e.detail);\n this.updateState({ selectedPrice });\n }}\n aria-label={\n this.recurring\n ? __('If you want to make your donation recurring then Press Tab once & select the recurring interval from the dropdown. ', 'surecart')\n : __('If you want to make your donation once then Press Enter. ', 'surecart')\n }\n style={{ '--sc-recurring-price-choice-white-space': 'wrap', '--sc-recurring-price-choice-text-align': 'left' }}\n >\n <slot>{this.label}</slot>\n </sc-recurring-price-choice-container>\n );\n }\n}\n"],"version":3}