JezK

Edit File: sc-line-item-total.cjs.entry.js.map

{"file":"sc-line-item-total.entry.cjs.js","mappings":";;;;;;;;;;;;;;;;;AAAA,MAAM,kBAAkB,GAAG,wvBAAwvB,CAAC;AACpxB,8BAAe,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;oHC0CuB,UAAE;;;;;;;;;;;;;6HAiCC,UAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;2PA4CT,UAAE;2KAUzC,eAAO,CAAC,UAAE;;;;;;;;;;;;;skBA4C8B,UAAE,6VASN,UAAE,6HAIE,UAAE;;8aAqB/B,UAAE,0LAGiC,UAAE,0CAA4C,UAAE,qIAEpE,UAAE,6KAGgB,UAAE;;;;;;;","names":[],"sources":["src/components/controllers/checkout-form/line-item-total/sc-line-item-total.scss?tag=sc-line-item-total&encapsulation=shadow","src/components/controllers/checkout-form/line-item-total/sc-line-item-total.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\nsc-line-item {\n text-align: left;\n}\n\n.line-item-total__group sc-line-item {\n margin: 4px 0px !important;\n}\n\n.scratch-price {\n text-decoration: line-through;\n color: var(--sc-color-gray-500);\n font-size: var(--sc-font-size-small);\n margin-right: var(--sc-spacing-xx-small);\n}\n\nsc-line-item::part(base) {\n grid-template-columns: max-content auto auto;\n}\n\n.total-price {\n white-space: nowrap;\n}\n\n.currency-label {\n color: var(--sc-color-gray-500);\n font-size: var(--sc-font-size-xx-small);\n margin-right: var(--sc-spacing-xx-small);\n vertical-align: middle;\n}\n\nsc-divider {\n margin: 16px 0 !important;\n}\n.conversion-description {\n color: var(--sc-color-gray-500);\n font-size: var(--sc-font-size-small);\n margin-right: var(--sc-spacing-xx-small);\n}\n\n.total-payments-tooltip {\n &::part(base) {\n display: flex;\n align-items: center;\n gap: 0.25em;\n }\n}\n","/**\n * External dependencies.\n */\nimport { Component, Fragment, h, Prop } from '@stencil/core';\nimport { __, sprintf } from '@wordpress/i18n';\n\n/**\n * Internal dependencies.\n */\nimport { formBusy } from '@store/form/getters';\nimport { state as checkoutState } from '@store/checkout';\nimport { Checkout } from '../../../../types';\n\n@Component({\n tag: 'sc-line-item-total',\n styleUrl: 'sc-line-item-total.scss',\n shadow: true,\n})\nexport class ScLineItemTotal {\n @Prop() total: 'total' | 'subtotal' = 'total';\n @Prop() size: 'large' | 'medium';\n @Prop() checkout: Checkout;\n\n order_key = {\n total: 'total_amount',\n subtotal: 'subtotal_amount',\n amount_due: 'amount_due',\n };\n\n hasInstallmentPlan(checkout: Checkout) {\n return checkout?.full_amount !== checkout?.subtotal_amount;\n }\n\n hasSubscription(checkout: Checkout) {\n return (checkout?.line_items?.data || []).some(\n lineItem => lineItem?.price?.recurring_interval === 'month' && !!lineItem?.price?.recurring_interval && !lineItem?.price?.recurring_period_count,\n );\n }\n\n renderLineItemTitle(checkout: Checkout) {\n if (this.total === 'total' && this.hasInstallmentPlan(checkout)) {\n return (\n \n <slot name=\"first-payment-total-description\">{__('Subtotal', 'surecart')}</slot>\n \n );\n }\n\n return (\n \n <slot name=\"title\" />\n \n );\n }\n\n renderCheckoutFees(checkout: Checkout) {\n if (!checkout?.checkout_fees?.data?.length) {\n return null;\n }\n\n return (\n <Fragment>\n {checkout?.checkout_fees?.data?.map(fee => (\n <sc-line-item key={fee.id}>\n {fee.description}\n {fee.display_amount}\n </sc-line-item>\n ))}\n </Fragment>\n );\n }\n\n renderLineItemDescription(checkout: Checkout) {\n if (this.total === 'subtotal' && this.hasInstallmentPlan(checkout)) {\n return (\n \n <slot name=\"first-payment-subtotal-description\">{__('Initial Payment', 'surecart')}</slot>\n \n );\n }\n\n return (\n \n <slot name=\"description\" />\n \n );\n }\n\n // Determine if the currency should be displayed to avoid duplication in the amount display.\n getCurrencyToDisplay() {\n const checkout = this.checkout || checkoutState?.checkout;\n return checkout?.amount_due_default_currency_display_amount?.toLowerCase()?.includes(checkout?.currency?.toLowerCase()) ? '' : checkout?.currency?.toUpperCase();\n }\n\n renderConversion() {\n if (this.total !== 'total') {\n return null;\n }\n\n const checkout = this.checkout || checkoutState?.checkout;\n\n if (!checkout?.show_converted_total) {\n return null;\n }\n\n // the currency is the same as the current currency.\n if (checkout?.currency === checkout?.current_currency) {\n return null;\n }\n\n // there is no amount due.\n if (!checkout?.amount_due) {\n return null;\n }\n\n return (\n <Fragment>\n <sc-divider></sc-divider>\n <sc-line-item style={{ '--price-size': 'var(--sc-font-size-x-large)' }}>\n \n <slot name=\"charge-amount-description\">{__('Payment Total', 'surecart')}</slot>\n \n \n {this.getCurrencyToDisplay() && {this.getCurrencyToDisplay()}}\n {checkout?.amount_due_default_currency_display_amount}\n \n </sc-line-item>\n <sc-line-item>\n \n {/* translators: %s is the currency code */}\n {sprintf(__('Your payment will be processed in %s.', 'surecart'), checkout?.currency?.toUpperCase())}\n \n </sc-line-item>\n </Fragment>\n );\n }\n\n render() {\n const checkout = this.checkout || checkoutState?.checkout;\n // loading state\n if (formBusy() && !checkout?.[this?.order_key?.[this?.total]]) {\n return (\n <sc-line-item>\n <sc-skeleton slot=\"title\" style={{ width: '120px', display: 'inline-block' }}></sc-skeleton>\n <sc-skeleton slot=\"price\" style={{ 'width': '70px', 'display': 'inline-block', 'height': this.size === 'large' ? '40px' : '', '--border-radius': '6px' }}></sc-skeleton>\n </sc-line-item>\n );\n }\n\n if (!checkout?.currency) return;\n\n // if the total amount is different than the amount due.\n if (this.total === 'total' && checkout?.total_amount !== checkout?.amount_due) {\n return (\n <div class=\"line-item-total__group\">\n <sc-line-item>\n \n {this.hasInstallmentPlan(checkout) ? (\n this.renderLineItemTitle(checkout)\n ) : (\n <Fragment>\n <slot name=\"title\" />\n <slot name=\"description\" />\n </Fragment>\n )}\n \n \n <sc-total total={this.total} checkout={checkout}></sc-total>\n \n </sc-line-item>\n\n {!!checkout.trial_amount && (\n <sc-line-item>\n \n <slot name=\"free-trial-description\">{__('Trial', 'surecart')}</slot>\n \n {checkout?.trial_display_amount}\n </sc-line-item>\n )}\n\n <sc-line-item style={{ '--price-size': 'var(--sc-font-size-x-large)' }}>\n {this.hasSubscription(checkout) ? (\n \n <slot name=\"subscription-title\">{__('Total Due Today', 'surecart')}</slot>\n \n ) : (\n \n <slot name=\"due-amount-description\">{__('Amount Due', 'surecart')}</slot>\n \n )}\n\n {checkout?.amount_due_display_amount}\n </sc-line-item>\n\n {this.renderConversion()}\n </div>\n );\n }\n\n return (\n <Fragment>\n {this.total === 'subtotal' && this.hasInstallmentPlan(checkout) && (\n <sc-line-item style={this.size === 'large' ? { '--price-size': 'var(--sc-font-size-x-large)' } : {}}>\n \n {!!checkout?.discount_amount ? (\n <sc-tooltip\n class=\"total-payments-tooltip\"\n type=\"text\"\n text={__('This is the total of all installment payments at full price, before any discounts are applied.', 'surecart')}\n width=\"275px\"\n >\n <slot name=\"total-payments-description\">{__('Total Installments', 'surecart')}</slot> {__('(before discounts)', 'surecart')}\n <sc-icon name=\"info\" aria-hidden=\"true\"></sc-icon>\n <sc-visually-hidden>{__('This is the total of all installment payments at full price, before any discounts are applied.', 'surecart')}</sc-visually-hidden>\n </sc-tooltip>\n ) : (\n <slot name=\"total-payments-description\">{__('Total Installments', 'surecart')}</slot>\n )}\n \n {checkout?.full_display_amount}\n </sc-line-item>\n )}\n\n <sc-line-item style={this.size === 'large' ? { '--price-size': 'var(--sc-font-size-x-large)' } : {}}>\n {this.renderLineItemTitle(checkout)}\n {this.renderLineItemDescription(checkout)}\n \n {!!checkout?.total_savings_amount && this.total === 'total' && {checkout?.total_scratch_display_amount}}\n <sc-total class=\"total-price\" total={this.total} checkout={checkout}></sc-total>\n \n </sc-line-item>\n\n {this.renderConversion()}\n {this.total === 'subtotal' && this.renderCheckoutFees(checkout)}\n </Fragment>\n );\n }\n}\n"],"version":3}