JezK

Edit File: sc-recurring-price-choice-container.cjs.entry.js.map

{"file":"sc-recurring-price-choice-container.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,kCAAkC,GAAG,myCAAmyC,CAAC;AAC/0C,8CAAe,kCAAkC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;0kBC2E2C,UAAE;;;;;;kCAOtD,UAAE;;;wBAGV,UAAE;;;6JAMK,UAAE;;;;;;;;;sCAUC,UAAE;;;4BAGV,UAAE;;;;;;;;mPA4BlB,UAAE;;;;;;;gBAWM,UAAE;;+KAST,eAAO,CACN,UAAE,+yBAS6F,UAAE,2BAA2B,UAAE;;;;;;;","names":[],"sources":["src/components/ui/sc-recurring-price-choice-container/sc-recurring-price-choice-container.scss?tag=sc-recurring-price-choice-container","src/components/ui/sc-recurring-price-choice-container/sc-recurring-price-choice-container.tsx"],"sourcesContent":[".recurring-price-choice {\n display: flex;\n justify-content: space-between;\n gap: var(--sc-spacing-x-small);\n flex-wrap: wrap;\n\n &__name {\n font-weight: var(--sc-font-weight-semibold);\n cursor: pointer;\n }\n\n &__control {\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: var(--sc-spacing-x-small);\n align-self: center;\n }\n\n &__details {\n align-self: center;\n display: flex;\n align-items: flex-end;\n flex-direction: column;\n gap: var(--sc-spacing-xx-small);\n }\n\n &__button {\n font-size: var(--sc-font-size-small);\n appearance: none;\n display: flex;\n align-items: center;\n gap: var(--sc-spacing-xx-small);\n text-decoration: none;\n user-select: none;\n white-space: var(--sc-recurring-price-choice-white-space, nowrap);\n text-align: var(--sc-recurring-price-choice-text-align, center);\n vertical-align: middle;\n padding: 13px;\n margin: -13px;\n border: none;\n background: transparent;\n font-size: inherit;\n color: inherit;\n border-radius: var(--sc-input-border-radius-medium);\n opacity: 0.8;\n cursor: pointer;\n\n &:focus-visible {\n outline: 1px solid var(--sc-color-primary-500);\n outline-offset: 4px;\n }\n }\n\n &__trial,\n &__setup-fee,\n &__price {\n font-size: var(--sc-font-size-small);\n opacity: 0.8;\n }\n}\n\nsc-dropdown {\n width: 100%;\n}\n\nsc-choice-container:not([checked]) sc-dropdown {\n pointer-events: none;\n}\n","import { Component, Event, EventEmitter, Fragment, h, Prop, Host, State } from '@stencil/core';\nimport { __, _n, sprintf } from '@wordpress/i18n';\nimport { Price, Product } from 'src/types';\nimport { intervalString } from '../../../functions/price';\n\n@Component({\n tag: 'sc-recurring-price-choice-container',\n styleUrl: 'sc-recurring-price-choice-container.scss',\n shadow: false,\n})\nexport class ScRecurringPriceChoiceContainer {\n /** The prices to choose from. */\n @Prop() prices: Price[];\n\n /** The currently selected price */\n @Prop() selectedPrice: Price;\n\n /** The internal currently selected option state */\n @State() selectedOption: Price;\n\n /** The product. */\n @Prop() product: Product;\n\n /** Label for the choice. */\n @Prop() label: string;\n\n /** Show the radio/checkbox control */\n @Prop() showControl: boolean = false;\n\n /** Should we show the price? */\n @Prop() showAmount: boolean = true;\n\n /** Should we show the price details? */\n @Prop() showDetails: boolean = true;\n\n /** Change event. */\n @Event() scChange: EventEmitter<string>;\n\n renderPrice(price) {\n return <sc-format-number type=\"currency\" value={price?.amount} currency={price?.currency}></sc-format-number>;\n }\n\n value() {\n return this.prices.find(price => price.id === this.selectedPriceState()?.id) || this.prices[0];\n }\n\n selectedPriceState() {\n return this.prices.find(price => price.id === this.selectedPrice?.id) || this.selectedOption || this.prices[0];\n }\n\n render() {\n if (!this.prices?.length) {\n return <Host style={{ display: 'none' }}></Host>;\n }\n\n return (\n <sc-choice-container\n value={this.selectedPrice?.id}\n type={'radio'}\n showControl={this.showControl}\n checked={this.prices.some(price => price.id === this.selectedPrice?.id)}\n onScChange={e => {\n e.stopPropagation();\n this.scChange.emit(this.value()?.id);\n }}\n role=\"button\"\n >\n <div class=\"recurring-price-choice\">\n <div class=\"recurring-price-choice__control\">\n <div class=\"recurring-price-choice__name\">\n <slot>{this.label}</slot>\n </div>\n\n {this.prices?.length > 1 && (\n <div class=\"recurring-price-choice__description\">\n <sc-dropdown style={{ '--panel-width': 'max(100%, 11rem)', '--sc-menu-item-white-space': 'wrap' }}>\n <button class=\"recurring-price-choice__button\" slot=\"trigger\" aria-label={__('Press Up/Down Arrow & select the recurring interval you want.', 'surecart')}>\n {this.value()?.name ||\n (this.value()?.recurring_interval\n ? intervalString(this.value(), {\n showOnce: true,\n abbreviate: false,\n labels: {\n interval: __('Every', 'surecart'),\n period:\n /** translators: used as in time period: \"for 3 months\" */\n __('for', 'surecart'),\n },\n })\n : this.product.name)}\n <sc-icon style={{ minWidth: 'var(--width)' }} name=\"chevron-down\"></sc-icon>\n </button>\n <sc-menu aria-label={__('Recurring Interval selection Dropdown opened, Press Up/Down Arrow & select the recurring interval you want.', 'surecart')}>\n {(this.prices || []).map(price => {\n const checked = price?.id === this.selectedPriceState()?.id;\n const label =\n price?.name ||\n (price?.recurring_interval\n ? intervalString(price, {\n showOnce: true,\n abbreviate: false,\n labels: {\n interval: __('Every', 'surecart'),\n period:\n /** translators: used as in time period: \"for 3 months\" */\n __('for', 'surecart'),\n },\n })\n : this.product.name);\n return (\n <sc-menu-item\n onClick={() => {\n this.selectedOption = price;\n this.scChange.emit(price?.id);\n }}\n checked={checked}\n aria-label={label}\n >\n {label}\n {this.showAmount && <span slot=\"suffix\">{this.renderPrice(price)}</span>}\n </sc-menu-item>\n );\n })}\n </sc-menu>\n </sc-dropdown>\n </div>\n )}\n </div>\n\n {this.showDetails && (\n <div class=\"recurring-price-choice__details\">\n <div class=\"recurring-price-choice__price\">\n {this.selectedPriceState()?.ad_hoc ? (\n __('Custom Amount', 'surecart')\n ) : (\n <Fragment>\n <sc-format-number type=\"currency\" value={this.selectedPriceState()?.amount} currency={this.selectedPriceState()?.currency}></sc-format-number>\n {intervalString(this.selectedPriceState(), {\n showOnce: true,\n abbreviate: true,\n labels: {\n interval: '/',\n period:\n /** translators: used as in time period: \"for 3 months\" */\n __('for', 'surecart'),\n },\n })}\n </Fragment>\n )}\n </div>\n\n {!!this.selectedPriceState()?.trial_duration_days && (\n <div class=\"recurring-price-choice__trial\">\n {sprintf(\n _n('Starting in %s day', 'Starting in %s days', this.selectedPriceState().trial_duration_days, 'surecart'),\n this.selectedPriceState().trial_duration_days,\n )}\n </div>\n )}\n\n {!!this.selectedPriceState()?.setup_fee_enabled && this.selectedPriceState()?.setup_fee_amount && (\n <div class=\"recurring-price-choice__setup-fee\">\n <sc-format-number type=\"currency\" value={Math.abs(this.selectedPriceState().setup_fee_amount)} currency={this.selectedPriceState()?.currency}></sc-format-number>{' '}\n {this.selectedPriceState()?.setup_fee_name || (this.selectedPriceState()?.setup_fee_amount < 0 ? __('Discount', 'surecart') : __('Setup Fee', 'surecart'))}\n </div>\n )}\n </div>\n )}\n </div>\n </sc-choice-container>\n );\n }\n}\n"],"version":3}