JezK

Edit File: sc-shipping-choices2.js.map

{"file":"sc-shipping-choices2.js","mappings":";;;;;;;;;;;;;;;AAAA,MAAM,oBAAoB,GAAG,kjEAAkjE,CAAC;AAChlE,gCAAe,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;kBC8CvB,UAAE;;;kBAIF,eAAO,CAAC,UAAE;;;;;;;;;;;;;;;;;;;;;oEAsB0B,UAAE,0EACD,UAAE;;;;mFAQU,UAAE,0EACd,UAAE;;;uFAQM,UAAE;;8gBAUsC,UAAE,0YAKZ,UAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/ui/sc-shipping-choices/sc-shipping-choices.scss?tag=sc-shipping-choices&encapsulation=shadow","src/components/ui/sc-shipping-choices/sc-shipping-choices.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.shipping-choice {\n width: 100%;\n padding: var(--sc-spacing-medium);\n margin: 0;\n box-sizing: border-box;\n border-bottom: var(--sc-input-border, 1px solid var(--sc-color-gray-300));\n background-color: var(--sc-shipping-choice-background-color, var(--sc-input-background-color));\n\n &__empty {\n background: var(--sc-alert-background-color, var(--sc-color-gray-100));\n opacity: 0.75;\n padding: var(--sc-spacing-large);\n border-radius: var(--sc-input-border-radius-medium);\n line-height: var(--sc-line-height-dense);\n font-size: var(--sc-font-size-small);\n border: solid 1px var(--sc-input-border-color, var(--sc-input-border));\n }\n\n &:last-child {\n border-bottom-width: 0;\n }\n\n &__text {\n display: flex;\n flex-direction: column;\n gap: var(--sc-spacing-xx-small);\n }\n\n &__price {\n color: var(--sc-input-label-color);\n font-weight: var(--sc-price-choice-price-font-weight, var(--sc-font-weight-normal));\n white-space: nowrap;\n display: var(--sc-shipping-choice-price-display, inherit);\n }\n\n &__name {\n display: inline-block;\n color: var(--sc-price-choice-name-color, var(--sc-input-label-color));\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 line-height: var(--sc-shipping-name-line-height, 1);\n }\n\n &__description {\n color: var(--sc-input-label-color);\n font-weight: var(--sc-price-choice-price-font-weight, var(--sc-font-weight-normal));\n line-height: var(--sc-shipping-description-line-height, 1.2);\n }\n}\n\nsc-radio-group::part(items) {\n border: var(--sc-input-border, 1px solid var(--sc-color-gray-300));\n border-radius: var(--sc-shipping-choice-border-radius, var(--sc-input-border-radius-medium));\n box-shadow: var(--sc-shipping-box-shadow, var(--sc-input-box-shadow));\n overflow: hidden;\n position: relative;\n}\n\nsc-radio::part(base) {\n width: 100%;\n}\n\nsc-radio::part(label) {\n width: 100%;\n display: flex;\n justify-content: space-between;\n gap: var(--sc-spacing-small);\n}\n\nsc-radio-group::slotted(sc-radio:not(:last-of-type)) {\n margin-bottom: 0;\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { state as checkoutState } from '@store/checkout';\nimport { Address, Checkout, ShippingMethod } from '../../../types';\nimport { lockCheckout, unLockCheckout } from '@store/checkout/mutations';\nimport { createOrUpdateCheckout } from '@services/session';\nimport { checkoutIsLocked } from '@store/checkout/getters';\nimport { createErrorNotice } from '@store/notices/mutations';\nimport { speak } from '@wordpress/a11y';\nimport { getFormattedPrice } from '../../../functions/price';\n\n/**\n * @part base - The elements base wrapper.\n * @part empty - The empty message.\n * @part block-ui - The block ui loader.\n * @part radio__base - The radio base wrapper.\n * @part radio__label - The radio label.\n * @part radio__control - The radio control wrapper.\n * @part radio__checked-icon - The radio checked icon.\n */\n@Component({\n tag: 'sc-shipping-choices',\n styleUrl: 'sc-shipping-choices.scss',\n shadow: true,\n})\nexport class ScShippingChoices {\n /** The shipping section label */\n @Prop() label: string;\n\n /** Whether to show the shipping choice description */\n @Prop() showDescription: boolean = true;\n\n /** Override shipping choices data (used for editor preview) */\n @Prop() shippingChoices: any[] | undefined;\n\n /** Maybe update the order. */\n async updateCheckout(selectedShippingChoiceId: string) {\n if (!selectedShippingChoiceId) return;\n try {\n lockCheckout('selected_shipping_choice');\n checkoutState.checkout = (await createOrUpdateCheckout({\n id: checkoutState.checkout.id,\n data: {\n selected_shipping_choice_id: selectedShippingChoiceId,\n },\n })) as Checkout;\n\n speak(__('Shipping choice updated.', 'surecart'), 'assertive');\n const { total_amount, currency } = checkoutState.checkout;\n\n /** translators: %1$s: formatted amount */\n speak(sprintf(__('Your order total has changed to: %1$s.', 'surecart'), getFormattedPrice({ amount: total_amount, currency })), 'assertive');\n } catch (e) {\n console.error(e);\n createErrorNotice(e);\n } finally {\n unLockCheckout('selected_shipping_choice');\n }\n }\n\n render() {\n const choices = this.shippingChoices || checkoutState?.checkout?.shipping_choices?.data;\n\n // When not using prop override, apply checkout state guards.\n if (!this.shippingChoices) {\n // shipping choice is not required.\n if (!checkoutState?.checkout?.selected_shipping_choice_required) {\n return <Host style={{ display: 'none' }}></Host>;\n }\n\n // no shipping choices but no country either\n if (!choices?.length && !(checkoutState?.checkout?.shipping_address as Address)?.country) {\n return (\n <sc-form-control label={this.label || __('Shipping', 'surecart')}>\n <div class=\"shipping-choice__empty\">{__('To check available shipping choices, please provide your shipping country in the address section.', 'surecart')}</div>\n </sc-form-control>\n );\n }\n\n // no shipping choices yet.\n if (!choices?.length) {\n return (\n <sc-form-control part=\"empty\" label={this.label || __('Shipping', 'surecart')}>\n <div class=\"shipping-choice__empty\">{__('Sorry, we are not able to ship to your address.', 'surecart')}</div>\n </sc-form-control>\n );\n }\n }\n\n return (\n <Host>\n <sc-radio-group part=\"base\" label={this.label || __('Shipping', 'surecart')} class=\"shipping-choices\" onScChange={e => this.updateCheckout(e.detail)}>\n {(choices || []).map(({ id, display_amount, shipping_method }) => (\n <sc-radio\n key={id}\n checked={checkoutState?.checkout?.selected_shipping_choice === id}\n exportparts=\"base:radio__base,label:radio__label,control:radio__control,checked-icon:radio__checked-icon\"\n class=\"shipping-choice\"\n value={id}\n >\n <div class=\"shipping-choice__text\">\n <div class=\"shipping-choice__name\">{(shipping_method as ShippingMethod)?.name || __('Standard Shipping', 'surecart')}</div>\n {this.showDescription && !!(shipping_method as ShippingMethod)?.description && (\n <div class=\"shipping-choice__description\">{(shipping_method as ShippingMethod)?.description}</div>\n )}\n </div>\n <div class=\"shipping-choice__price\">{!!display_amount ? display_amount : __('Free', 'surecart')}</div>\n </sc-radio>\n ))}\n </sc-radio-group>\n {checkoutIsLocked('selected_shipping_choice') && <sc-block-ui></sc-block-ui>}\n </Host>\n );\n }\n}\n"],"version":3}