{"version":3,"names":["scLineItemTotalCss","ScLineItemTotalStyle0","wp","i18n","__","h","slot","this","getCurrencyToDisplay","class","checkout","sprintf","_a","currency","toUpperCase","trial_display_amount","style","hasSubscription","name","amount_due_display_amount","renderConversion","full_display_amount","size","renderLineItemTitle","renderLineItemDescription","total_savings_amount","total","total_scratch_display_amount","total_display_amount"],"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 * 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        <span slot=\"title\">\n          <slot name=\"first-payment-total-description\">{__('Subtotal', 'surecart')}</slot>\n        </span>\n      );\n    }\n\n    return (\n      <span slot=\"title\">\n        <slot name=\"title\" />\n      </span>\n    );\n  }\n\n  renderLineItemDescription(checkout: Checkout) {\n    if (this.total === 'subtotal' && this.hasInstallmentPlan(checkout)) {\n      return (\n        <span slot=\"description\">\n          <slot name=\"first-payment-subtotal-description\">{__('Initial Payment', 'surecart')}</slot>\n        </span>\n      );\n    }\n\n    return (\n      <span slot=\"description\">\n        <slot name=\"description\" />\n      </span>\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          <span slot=\"title\">\n            <slot name=\"charge-amount-description\">{__('Payment Total', 'surecart')}</slot>\n          </span>\n          <span slot=\"price\">\n            {this.getCurrencyToDisplay() && <span class=\"currency-label\">{this.getCurrencyToDisplay()}</span>}\n            {checkout?.amount_due_default_currency_display_amount}\n          </span>\n        </sc-line-item>\n        <sc-line-item>\n          <span slot=\"description\" class=\"conversion-description\">\n            {/* translators: %s is the currency code */}\n            {sprintf(__('Your payment will be processed in %s.', 'surecart'), checkout?.currency?.toUpperCase())}\n          </span>\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            <span slot=\"description\">\n              {this.hasInstallmentPlan(checkout) ? (\n                this.renderLineItemTitle(checkout)\n              ) : (\n                <Fragment>\n                  <slot name=\"title\" />\n                  <slot name=\"description\" />\n                </Fragment>\n              )}\n            </span>\n            <span slot=\"price\">\n              <sc-total total={this.total}></sc-total>\n            </span>\n          </sc-line-item>\n\n          {!!checkout.trial_amount && (\n            <sc-line-item>\n              <span slot=\"description\">\n                <slot name=\"free-trial-description\">{__('Trial', 'surecart')}</slot>\n              </span>\n              <span slot=\"price\">{checkout?.trial_display_amount}</span>\n            </sc-line-item>\n          )}\n\n          <sc-line-item style={{ '--price-size': 'var(--sc-font-size-x-large)' }}>\n            {this.hasSubscription(checkout) ? (\n              <span slot=\"title\">\n                <slot name=\"subscription-title\">{__('Total Due Today', 'surecart')}</slot>\n              </span>\n            ) : (\n              <span slot=\"title\">\n                <slot name=\"due-amount-description\">{__('Amount Due', 'surecart')}</slot>\n              </span>\n            )}\n\n            <span slot=\"price\">{checkout?.amount_due_display_amount}</span>\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            <span slot=\"description\">\n              <slot name=\"total-payments-description\">{__('Total Installment Payments', 'surecart')}</slot>\n            </span>\n            <span slot=\"price\">{checkout?.full_display_amount}</span>\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          <span slot=\"price\">\n            {!!checkout?.total_savings_amount && this.total === 'total' && <span class=\"scratch-price\">{checkout?.total_scratch_display_amount}</span>}\n            {this.total === 'total' && <span class=\"total-price\">{checkout?.total_display_amount}</span>}\n          </span>\n        </sc-line-item>\n\n        {this.renderConversion()}\n      </Fragment>\n    );\n  }\n}\n"],"mappings":"kVAAA,MAAMA,EAAqB,0qBAC3B,MAAAC,EAAeD,E,s4BC0CyCE,GAAAC,KAAAC,GAAE,wB,yOAgBCF,GAAAC,KAAAC,GAAE,+B,4hCA4CTF,GAAAC,KAAAC,GAAE,8BAAAC,EAAA,QAAAC,KAAA,SAAAC,KAAAC,wBAAAH,EAAA,QAAAI,MAAA,kBAAAF,KAAAC,wBAAAE,IAAA,MAAAA,SAAA,S,kIAUzCR,GAAAC,KAAAQ,QAAQT,GAAAC,KAAAC,GAAE,qDAAAQ,EAAAF,IAAA,MAAAA,SAAA,SAAAA,EAAAG,YAAA,MAAAD,SAAA,SAAAA,EAAAE,iB,8hCA4C8BZ,GAAAC,KAAAC,GAAE,sBAAAC,EAAA,QAAAC,KAAA,SAAAI,IAAA,MAAAA,SAAA,SAAAA,EAAAK,uBAAAV,EAAA,gBAAAW,MAAA,gDAAAT,KAAAU,gBAAAP,GAAAL,EAAA,QAAAC,KAAA,SAAAD,EAAA,QAAAa,KAAA,sBASNhB,GAAAC,KAAAC,GAAE,gCAAAC,EAAA,QAAAC,KAAA,SAAAD,EAAA,QAAAa,KAAA,0BAIEhB,GAAAC,KAAAC,GAAE,2BAAAC,EAAA,QAAAC,KAAA,SAAAI,IAAA,MAAAA,SAAA,SAAAA,EAAAS,4BAAAZ,KAAAa,mB,gPAiBAlB,GAAAC,KAAAC,GAAE,2CAAAC,EAAA,QAAAC,KAAA,SAAAI,IAAA,MAAAA,SAAA,SAAAA,EAAAW,sBAAAhB,EAAA,gBAAAW,MAAAT,KAAAe,OAAA,2DAAAf,KAAAgB,oBAAAb,GAAAH,KAAAiB,0BAAAd,GAAAL,EAAA,QAAAC,KAAA,YAAAI,IAAA,MAAAA,SAAA,SAAAA,EAAAe,uBAAAlB,KAAAmB,QAAA,SAAArB,EAAA,QAAAI,MAAA,iBAAAC,IAAA,MAAAA,SAAA,SAAAA,EAAAiB,8BAAApB,KAAAmB,QAAA,SAAArB,EAAA,QAAAI,MAAA,eAAAC,IAAA,MAAAA,SAAA,SAAAA,EAAAkB,wBAAArB,KAAAa,mB","ignoreList":[]}