{"version":3,"names":["scPriceChoiceContainerCss","wp","i18n","__","h","Fragment","type","value","_c","this","priceData","amount","currency","_d","_e","recurring_period_count","_f","intervalString","sprintf","_h","trial_duration_days","class","_n","_j","setup_fee_enabled","_k","setup_fee_amount","Math","abs","_l","_m","setup_fee_name","_o"],"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\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;\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 \n \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 \n );\n }\n\n render() {\n if (this.loading) {\n return (\n \n
\n \n \n
\n \n );\n }\n\n return (\n this.scChange.emit()}\n required={this.required}\n >\n
\n {this.showLabel && (\n
\n
{this.label || this.priceData.name}
\n {!!this.description &&
{this.description}
}\n
\n )}\n\n {this.showPrice && (\n
\n
\n {this.priceData?.ad_hoc ? (\n __('Custom Amount', 'surecart')\n ) : (\n \n \n {this.priceData?.recurring_period_count && 1 <= this.priceData?.recurring_period_count && (\n \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 \n )}\n \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 \n \n )}\n
\n\n {!!this.priceData?.trial_duration_days && (\n \n \n {sprintf(__('You have a %d-day trial before payment becomes necessary.', 'surecart'), this.priceData?.trial_duration_days)}\n \n
\n {sprintf(_n('Starting in %s day', 'Starting in %s days', this.priceData.trial_duration_days, 'surecart'), this.priceData.trial_duration_days)}\n
\n \n )}\n\n {!!this.priceData?.setup_fee_enabled && this.priceData?.setup_fee_amount && (\n
\n {__('This payment plan has', 'surecart')} \n {' '}\n {this.priceData?.setup_fee_name || (this.priceData?.setup_fee_amount < 0 ? __('Discount', 'surecart') : __('Setup Fee', 'surecart'))}\n
\n )}\n
\n )}\n
\n \n );\n }\n}\n"],"mappings":"qHAAA,MAAMA,EAA4B,gxC,2tBCgEpBC,GAAAC,KAAAC,GAAE,qB,44BAwCEF,GAAAC,KAAAC,GAAE,4BAAAC,EAAAC,EAAA,KAAAD,EAAA,oBAAAE,KAAA,WAAAC,OAAAC,EAAAC,KAAAC,aAAA,MAAAF,SAAA,SAAAA,EAAAG,OAAAC,UAAAC,EAAAJ,KAAAC,aAAA,MAAAG,SAAA,SAAAA,EAAAD,aAAAE,EAAAL,KAAAC,aAAA,MAAAI,SAAA,SAAAA,EAAAC,yBAAA,KAAAC,EAAAP,KAAAC,aAAA,MAAAM,SAAA,SAAAA,EAAAD,yBAAAX,EAAA,8BAOKH,GAAAC,KAAAC,GAAE,iEAAAc,EAAAR,KAAAC,UAAA,C,gDAKWT,GAAAC,KAAAC,GAAE,oB,OAGVF,GAAAC,KAAAC,GAAE,sB,4GAaJF,GAAAC,KAAAC,GAAE,4B,yGAWTF,GAAAC,KAAAgB,QAAQjB,GAAAC,KAAAC,GAAE,yEAAAgB,EAAAV,KAAAC,aAAA,MAAAS,SAAA,SAAAA,EAAAC,sBAAAhB,EAAA,OAAAiB,MAAA,4CAGVpB,GAAAC,KAAAgB,QAAQjB,GAAAC,KAAAoB,GAAE,2CAAAb,KAAAC,UAAAU,oBAAA,YAAAX,KAAAC,UAAAU,2BAAAG,EAAAd,KAAAC,aAAA,MAAAa,SAAA,SAAAA,EAAAC,sBAAAC,EAAAhB,KAAAC,aAAA,MAAAe,SAAA,SAAAA,EAAAC,mBAAAtB,EAAA,OAAAiB,MAAA,2BAAAjB,EAAA,0BAOQH,GAAAC,KAAAC,GAAE,yCAAAC,EAAA,oBAAAE,KAAA,WAAAC,MAAAoB,KAAAC,IAAAnB,KAAAC,UAAAgB,kBAAAd,UAAAiB,EAAApB,KAAAC,aAAA,MAAAmB,SAAA,SAAAA,EAAAjB,WAAA,MAAAkB,EAAArB,KAAAC,aAAA,MAAAoB,SAAA,SAAAA,EAAAC,oBAAAC,EAAAvB,KAAAC,aAAA,MAAAsB,SAAA,SAAAA,EAAAN,kBAAA,EAEoDzB,GAAAC,KAAAC,GAAE,uBAA2BF,GAAAC,KAAAC,GAAE,4B"}