FileMaster
Search
Toggle Dark Mode
Home
/
.
/
wp-content
/
plugins
/
surecart
/
dist
/
components
/
esm
Edit File: sc-coupon-form.entry.js
import { r as registerInstance, c as createEvent, h, F as Fragment, a as getElement } from './index-745b6bec.js'; import { s as speak } from './index-c5a96d53.js'; import { i as isRtl } from './page-align-0cdacf32.js'; import { a as getHumanDiscount, b as getHumanDiscountRedeemableStatus } from './price-af9f0dbf.js'; import { s as state } from './mutations-6bbbe793.js'; import './currency-a0c9bff4.js'; import './index-06061d4e.js'; import './utils-cd1431df.js'; import './remove-query-args-938c53ea.js'; import './add-query-args-0e2a8393.js'; import './google-a86aa761.js'; import './store-627acec4.js'; const scCouponFormCss = ":host {\n display: block;\n}\n\nsc-button {\n color: var(--sc-color-primary-500);\n}\n\nsc-alert {\n margin-top: var(--sc-spacing-small);\n}\n\n.coupon-form {\n position: relative;\n container-type: inline-size;\n}\n.coupon-form .coupon-button {\n opacity: 0;\n visibility: hidden;\n transform: scale(0.9);\n transition: all var(--sc-transition-fast) ease;\n color: var(--sc-input-color);\n}\n.coupon-form .coupon-button-mobile {\n margin-top: var(--sc-input-label-margin);\n display: none;\n}\n.coupon-form--has-value .coupon-button {\n opacity: 1;\n visibility: visible;\n transform: scale(1);\n}\n\n@container (max-width: 320px) {\n .coupon-form .coupon-button {\n display: none;\n }\n .coupon-form .coupon-button-mobile {\n display: block;\n }\n}\n.form {\n opacity: 0;\n visibility: hidden;\n height: 0;\n transform: translateY(5px);\n transition: opacity var(--sc-transition-medium) ease, transform var(--sc-transition-medium) ease;\n position: relative;\n gap: var(--sc-spacing-small);\n}\n\n.coupon-form--is-open .form {\n opacity: 1;\n visibility: visible;\n transform: translateY(0);\n height: auto;\n margin: var(--sc-spacing-small) 0;\n}\n.coupon-form--is-open .trigger {\n display: none;\n}\n\n.trigger {\n cursor: pointer;\n font-size: var(--sc-font-size-small);\n line-height: var(--sc-line-height-dense);\n color: var(--sc-input-label-color);\n user-select: none;\n}\n.trigger:hover {\n text-decoration: underline;\n}\n\n.coupon-form--is-rtl .trigger {\n text-align: right;\n}\n\n.coupon__status {\n font-size: var(--sc-font-size-small);\n line-height: var(--sc-line-height-dense);\n color: var(--sc-color-warning-700);\n display: inline-flex;\n gap: var(--sc-spacing-x-small);\n align-items: flex-start;\n text-align: left;\n}\n.coupon__status sc-icon {\n flex: 0 0 1em;\n margin-top: 0.25em;\n}"; const ScCouponFormStyle0 = scCouponFormCss; const ScCouponForm = class { constructor(hostRef) { registerInstance(this, hostRef); this.scApplyCoupon = createEvent(this, "scApplyCoupon", 7); this.label = undefined; this.loading = undefined; this.busy = undefined; this.placeholder = undefined; this.error = undefined; this.forceOpen = undefined; this.discount = undefined; this.currency = undefined; this.discountAmount = undefined; this.discountsDisplayAmount = undefined; this.showInterval = undefined; this.open = undefined; this.collapsed = undefined; this.value = undefined; this.buttonText = undefined; this.editable = true; } /** Auto focus the input when opened. */ handleOpenChange(val) { if (val) { setTimeout(() => this.input.triggerFocus(), 50); } } /** Close it when blurred and no value. */ handleBlur() { if (!this.value) { this.open = false; this.error = ''; } } getHumanReadableDiscount() { var _a, _b, _c; if (((_a = this === null || this === void 0 ? void 0 : this.discount) === null || _a === void 0 ? void 0 : _a.coupon) && ((_b = this === null || this === void 0 ? void 0 : this.discount) === null || _b === void 0 ? void 0 : _b.coupon.percent_off)) { return getHumanDiscount((_c = this === null || this === void 0 ? void 0 : this.discount) === null || _c === void 0 ? void 0 : _c.coupon); } return ''; } /** Apply the coupon. */ applyCoupon() { this.scApplyCoupon.emit(this.value); } handleKeyDown(e) { if ((e === null || e === void 0 ? void 0 : e.code) === 'Enter') { this.applyCoupon(); } else if ((e === null || e === void 0 ? void 0 : e.code) === 'Escape') { this.scApplyCoupon.emit(null); this.open = false; speak(wp.i18n.__('Coupon code field closed.', 'surecart'), 'assertive'); } } translateHumanDiscountWithDuration(humanDiscount) { var _a; if (!this.showInterval) return humanDiscount; const { duration, duration_in_months } = (_a = this.discount) === null || _a === void 0 ? void 0 : _a.coupon; switch (duration) { case 'once': return `${humanDiscount} ${wp.i18n.__('once', 'surecart')}`; case 'repeating': const monthsLabel = wp.i18n.sprintf(wp.i18n._n('%d month', '%d months', duration_in_months, 'surecart'), duration_in_months); // translators: %s is the discount amount, %s is the duration (e.g. 3 months) return wp.i18n.sprintf(wp.i18n.__('%s for %s', 'surecart'), humanDiscount, monthsLabel); default: return humanDiscount; } } /** Focus the input. */ async triggerFocus() { var _a, _b, _c; await new Promise(resolve => requestAnimationFrame(resolve)); if ((_b = (_a = this === null || this === void 0 ? void 0 : this.discount) === null || _a === void 0 ? void 0 : _a.promotion) === null || _b === void 0 ? void 0 : _b.code) { (_c = this.couponTag.shadowRoot.querySelector('*')) === null || _c === void 0 ? void 0 : _c.focus(); } else if (this.addCouponTrigger) { this.addCouponTrigger.focus(); } } renderTrialText() { var _a, _b; if (((_b = (_a = this.discount) === null || _a === void 0 ? void 0 : _a.coupon) === null || _b === void 0 ? void 0 : _b.duration) === 'once') { return wp.i18n.__('Applies on first payment', 'surecart'); } return wp.i18n.__('Starting on first payment', 'surecart'); } render() { var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l; const isFreeTrial = !!((_a = state === null || state === void 0 ? void 0 : state.checkout) === null || _a === void 0 ? void 0 : _a.trial_amount) && !((_b = state === null || state === void 0 ? void 0 : state.checkout) === null || _b === void 0 ? void 0 : _b.amount_due); if (this.loading) { return h("sc-skeleton", { style: { width: '120px', display: 'inline-block' } }); } if ((_d = (_c = this === null || this === void 0 ? void 0 : this.discount) === null || _c === void 0 ? void 0 : _c.promotion) === null || _d === void 0 ? void 0 : _d.code) { let humanDiscount = this.getHumanReadableDiscount(); return (h("sc-line-item", { exportparts: "description:info, price-description:discount, price:amount" }, h("span", { slot: "description" }, h("div", { part: "discount-label" }, wp.i18n.__('Discount', 'surecart')), h("sc-tag", { exportparts: "base:coupon-tag", type: 'redeemable' === ((_e = this.discount) === null || _e === void 0 ? void 0 : _e.redeemable_status) ? 'success' : 'warning', class: "coupon-tag", clearable: this.editable, onScClear: () => { if (!this.editable) return; this.scApplyCoupon.emit(null); this.open = false; }, onKeyDown: e => { var _a, _b, _c; if (!this.editable) return; if (e.key === 'Enter' || e.key === 'Escape') { speak( // translators: %1$s is the coupon code, %2$s is the order total wp.i18n.sprintf(wp.i18n.__('Coupon code %1$s was removed and now order total is %2$s', 'surecart'), (_b = (_a = this === null || this === void 0 ? void 0 : this.discount) === null || _a === void 0 ? void 0 : _a.promotion) === null || _b === void 0 ? void 0 : _b.code, (_c = state.checkout) === null || _c === void 0 ? void 0 : _c.total_display_amount), 'assertive'); this.scApplyCoupon.emit(null); this.open = false; } }, ref: el => (this.couponTag = el), role: "button", "aria-label": wp.i18n.sprintf(wp.i18n.__('Press enter to remove coupon code %s.', 'surecart'), ((_g = (_f = this === null || this === void 0 ? void 0 : this.discount) === null || _f === void 0 ? void 0 : _f.promotion) === null || _g === void 0 ? void 0 : _g.code) || this.input.value || '') }, (_j = (_h = this === null || this === void 0 ? void 0 : this.discount) === null || _h === void 0 ? void 0 : _h.promotion) === null || _j === void 0 ? void 0 : _j.code)), 'redeemable' === ((_k = this.discount) === null || _k === void 0 ? void 0 : _k.redeemable_status) ? (h(Fragment, null, humanDiscount && (h("span", { class: "coupon-human-discount", slot: "price-description" }, this.translateHumanDiscountWithDuration(humanDiscount))), h("span", { slot: isFreeTrial ? 'price-description' : 'price' }, isFreeTrial ? (this.renderTrialText()) : this.discountsDisplayAmount ? (this.discountsDisplayAmount) : (h("sc-format-number", { type: "currency", currency: this === null || this === void 0 ? void 0 : this.currency, value: this === null || this === void 0 ? void 0 : this.discountAmount }))))) : (h("div", { class: "coupon__status", slot: "price-description" }, h("sc-icon", { name: "alert-triangle" }), getHumanDiscountRedeemableStatus((_l = this.discount) === null || _l === void 0 ? void 0 : _l.redeemable_status))))); } return this.collapsed ? (h("div", { part: "base", class: { 'coupon-form': true, 'coupon-form--is-open': this.open || this.forceOpen, 'coupon-form--has-value': !!this.value, 'coupon-form--is-rtl': isRtl(), } }, h("div", { part: "label", class: "trigger", onMouseDown: () => { if (this.open) { return; } this.open = true; }, onKeyDown: e => { if (e.key !== 'Enter' && e.key !== ' ') { return true; } if (this.open) { return; } this.open = true; speak(wp.i18n.__('Coupon code field opened. Press Escape button to close it.', 'surecart'), 'assertive'); }, tabindex: "0", ref: el => (this.addCouponTrigger = el), role: "button" }, h("slot", { name: "label" }, this.label)), h("div", { class: "form", part: "form" }, h("sc-input", { exportparts: "base:input__base, input, form-control:input__form-control", value: this.value, onScInput: (e) => (this.value = e.target.value), placeholder: this.placeholder, onScBlur: () => this.handleBlur(), onKeyDown: e => this.handleKeyDown(e), ref: el => (this.input = el), "aria-label": wp.i18n.__('Add coupon code.', 'surecart') }, h("sc-button", { exportparts: "base:button__base, label:button_label", slot: "suffix", type: "text", loading: this.busy, size: "medium", class: "coupon-button", onClick: () => this.applyCoupon() }, h("slot", null, this.buttonText))), h("sc-button", { exportparts: "base:button__base, label:button_label", type: "primary", outline: true, loading: this.busy, size: "medium", class: "coupon-button-mobile", onClick: () => this.applyCoupon() }, h("slot", null, this.buttonText)), !!this.error && (h("sc-alert", { exportparts: "base:error__base, icon:error__icon, text:error__text, title:error_title, message:error__message", type: "danger", open: true }, h("span", { slot: "title" }, this.error)))), this.loading && h("sc-block-ui", { exportparts: "base:block-ui, content:block-ui__content" }))) : (h("div", { class: { 'coupon-form': true, 'coupon-form--has-value': !!this.value, 'coupon-form--is-rtl': isRtl(), } }, h("sc-input", { label: this.label, exportparts: "base:input__base, input, form-control:input__form-control", value: this.value, onScInput: (e) => (this.value = e.target.value), placeholder: this.placeholder, onScBlur: () => this.handleBlur(), onKeyDown: e => this.handleKeyDown(e), ref: el => (this.input = el) }, h("sc-button", { exportparts: "base:button__base, label:button_label", slot: "suffix", type: "text", loading: this.busy, size: "medium", class: "coupon-button", onClick: () => this.applyCoupon() }, h("slot", null, this.buttonText))), h("sc-button", { exportparts: "base:button__base, label:button_label", type: "primary", outline: true, loading: this.busy, size: "medium", class: "coupon-button-mobile", onClick: () => this.applyCoupon() }, h("slot", null, this.buttonText)), !!this.error && (h("sc-alert", { exportparts: "base:error__base, icon:error__icon, text:error__text, title:error_title, message:error__message", type: "danger", open: true }, h("span", { slot: "title" }, this.error))))); } get el() { return getElement(this); } static get watchers() { return { "open": ["handleOpenChange"] }; } }; ScCouponForm.style = ScCouponFormStyle0; export { ScCouponForm as sc_coupon_form }; //# sourceMappingURL=sc-coupon-form.entry.js.map
Save
Back