JezK

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

{"file":"sc-price-choice-container.entry.js","mappings":";;;;AAAA,MAAM,yBAAyB,GAAG,87CAA87C,CAAC;AACj+C,qCAAe,yBAAyB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gBC+D1B,UAAE;;;;;;;;;+rBAwCE,UAAE;4PAOK,UAAE;;;;0BAKW,UAAE;;;gBAGV,UAAE;;;;;;;;;gBAaJ,UAAE;;0JAWT,eAAO,CAAC,UAAE,kOAGV,eAAO,CAAC,UAAE,gYAOQ,UAAE;wNAEoD,UAAE,2BAA2B,UAAE;;;;;;;;;;","names":[],"sources":["src/components/ui/sc-price-choice-container/sc-price-choice-container.scss?tag=sc-price-choice-container","src/components/ui/sc-price-choice-container/sc-price-choice-container.tsx"],"sourcesContent":[":host {\n display: block;\n min-width: 0;\n width: 100%;\n}\n\nsc-choice-container {\n container-type: inline-size;\n}\n\n.price-choice {\n display: flex;\n align-items: center;\n justify-content: space-between;\n line-height: var(--sc-line-height-dense);\n gap: var(--sc-spacing-small);\n\n &__name {\n display: inline-block;\n font-size: var(--sc-price-choice-name-size, var(--sc-input-label-font-size-medium));\n font-weight: var(--sc-price-choice-name-font-weight, var(--sc-font-weight-bold));\n text-transform: var(--sc-price-choice-text-transform, var(--sc-input-label-text-transform, none));\n }\n\n > *:not(:first-child):last-child {\n text-align: right;\n }\n\n &__details {\n flex: 1 0 50%;\n display: grid;\n gap: var(--sc-spacing-xxx-small);\n }\n\n &__trial,\n &__setup-fee,\n &__price {\n font-size: var(--sc-font-size-small);\n opacity: 0.8;\n }\n\n &__price {\n font-weight: var(--sc-price-choice-price-font-weight, var(--sc-font-weight-normal));\n }\n\n &__bundle-savings {\n font-size: var(--sc-font-size-x-small);\n font-weight: var(--sc-font-weight-semibold);\n color: var(--sc-color-success-700, #15803d);\n }\n}\n\n@container (max-width: 325px) {\n .price-choice {\n flex-direction: column;\n align-items: flex-start;\n gap: var(--sc-spacing-xx-small);\n > *:not(:first-child):last-child {\n text-align: initial;\n }\n }\n}\n","import { Component, Event, EventEmitter, Fragment, h, Prop, State, Watch } from '@stencil/core';\nimport { __, sprintf, _n } from '@wordpress/i18n';\nimport { Price } from 'src/types';\n\nimport { intervalString } from '../../../functions/price';\n\n@Component({\n tag: 'sc-price-choice-container',\n styleUrl: 'sc-price-choice-container.scss',\n shadow: false,\n})\nexport class ScPriceChoiceContainer {\n /** Stores the price */\n @Prop() price: string | Price;\n\n /** Is this loading */\n @Prop() loading: boolean = false;\n\n /** Label for the choice. */\n @Prop() label: string;\n\n /** Show the label */\n @Prop() showLabel: boolean = true;\n\n /** Show the price amount */\n @Prop() showPrice: boolean = true;\n\n /** Show the radio/checkbox control */\n @Prop() showControl: boolean = false;\n\n /** Label for the choice. */\n @Prop() description: string;\n\n /** Choice Type */\n @Prop() type: 'checkbox' | 'radio';\n\n @Prop() required: boolean = false;\n\n /** Is this checked by default */\n @Prop({ reflect: true, mutable: true }) checked: boolean = false;\n\n @State() priceData: Price;\n\n @Event() scChange: EventEmitter<void>;\n\n @Watch('price')\n handlePriceChange() {\n this.priceData = typeof this.price === 'string' ? JSON.parse(this.price) : this.price;\n }\n componentWillLoad() {\n this.handlePriceChange();\n }\n\n renderPrice() {\n return (\n <Fragment>\n {this.priceData?.display_amount}\n {intervalString(this.priceData, {\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 }\n\n render() {\n if (this.loading) {\n return (\n <sc-choice-container showControl={this.showControl} name=\"loading\" disabled>\n <div class=\"price-choice\">\n <sc-skeleton style={{ width: '60px', display: 'inline-block' }}></sc-skeleton>\n <sc-skeleton style={{ width: '80px', display: 'inline-block' }}></sc-skeleton>\n </div>\n </sc-choice-container>\n );\n }\n\n return (\n <sc-choice-container\n value={this.priceData?.id}\n type={this.type}\n showControl={this.showControl}\n checked={this.checked}\n onScChange={() => this.scChange.emit()}\n required={this.required}\n >\n <div class=\"price-choice\">\n {this.showLabel && (\n <div class=\"price-choice__title\">\n <div class=\"price-choice__name\">{this.label || this.priceData.name}</div>\n {!!this.description && <div class=\"price-choice__description\">{this.description}</div>}\n </div>\n )}\n\n {this.showPrice && (\n <div class=\"price-choice__details\">\n <div class=\"price-choice__price\">\n {this.priceData?.ad_hoc ? (\n __('Custom Amount', 'surecart')\n ) : (\n <Fragment>\n {this.priceData?.display_amount}\n {this.priceData?.recurring_period_count && 1 <= this.priceData?.recurring_period_count && (\n <sc-visually-hidden>\n {' '}\n {__('This is a repeating price. Payment will happen', 'surecart')}{' '}\n {intervalString(this.priceData, {\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 </sc-visually-hidden>\n )}\n <span aria-hidden=\"true\">\n {intervalString(this.priceData, {\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 </span>\n </Fragment>\n )}\n </div>\n\n {!!this.priceData?.trial_duration_days && (\n <Fragment>\n <sc-visually-hidden>\n {sprintf(__('You have a %d-day trial before payment becomes necessary.', 'surecart'), this.priceData?.trial_duration_days)}\n </sc-visually-hidden>\n <div class=\"price-choice__trial\" aria-hidden=\"true\">\n {sprintf(_n('Starting in %s day', 'Starting in %s days', this.priceData.trial_duration_days, 'surecart'), this.priceData.trial_duration_days)}\n </div>\n </Fragment>\n )}\n\n {!!this.priceData?.setup_fee_enabled && this.priceData?.setup_fee_amount && (\n <div class=\"price-choice__setup-fee\">\n <sc-visually-hidden>{__('This payment plan has', 'surecart')} </sc-visually-hidden>\n {this.priceData?.setup_fee_display_amount}{' '}\n {this.priceData?.setup_fee_name || (this.priceData?.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}