import { r as registerInstance, c as createEvent, h, F as Fragment, g as getElement } from './index-fd4790f6.js';
import { a as apiFetch } from './fetch-460a8bc3.js';
import { g as getHumanDiscount } from './price-8403c07a.js';
import { a as addQueryArgs } from './add-query-args-f4c5962b.js';
import { _ as __, s as sprintf } from './default-i18n-2e663329.js';
import './index-53ddb833.js';
import { F as FormSubmitController } from './form-data-dd63c61f.js';
import './index-6db066f7.js';

const replaceAmount = (string, replace, name = 'amount') => {
  return string.replaceAll('{{' + name + '}}', replace).replaceAll('{{ ' + name + ' }}', replace);
};

const scCancelDiscountCss = ".cancel-discount__abort-link{color:var(--sc-color-gray-500)}";

const ScCancelDiscount = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.scCancel = createEvent(this, "scCancel", 7);
    this.scPreserved = createEvent(this, "scPreserved", 7);
  }
  replaceAmount(string) {
    var _a, _b;
    if (!((_a = this.protocol) === null || _a === void 0 ? void 0 : _a.preservation_coupon)) {
      return string;
    }
    return replaceAmount(string, getHumanDiscount((_b = this.protocol) === null || _b === void 0 ? void 0 : _b.preservation_coupon));
  }
  async addDiscount() {
    var _a, _b;
    try {
      this.loading = true;
      this.subscription = (await apiFetch({
        method: 'PATCH',
        path: addQueryArgs(`surecart/v1/subscriptions/${(_a = this.subscription) === null || _a === void 0 ? void 0 : _a.id}/preserve`, {
          cancellation_act: {
            ...(!!this.comment ? { comment: this.comment } : {}),
            cancellation_reason_id: (_b = this.reason) === null || _b === void 0 ? void 0 : _b.id,
          },
        }),
      }));
      this.scPreserved.emit();
    }
    catch (e) {
      console.error(e);
      this.error = e;
    }
    finally {
      this.loading = false;
    }
  }
  render() {
    var _a;
    const { preserve_title, preserve_description, preserve_button, cancel_link } = ((_a = this.protocol) === null || _a === void 0 ? void 0 : _a.preservation_locales) || {};
    return (h("div", { class: "cancel-discount" }, h("sc-dashboard-module", { heading: this.replaceAmount(preserve_title), style: { '--sc-dashboard-module-spacing': '2em' } }, h("span", { slot: "description" }, this.replaceAmount(preserve_description)), h("sc-flex", { justifyContent: "flex-start" }, h("sc-button", { type: "primary", onClick: () => this.addDiscount() }, preserve_button), h("sc-button", { class: "cancel-discount__abort-link", type: "text", onClick: () => this.scCancel.emit() }, cancel_link)), !!this.loading && h("sc-block-ui", { spinner: true }))));
  }
};
ScCancelDiscount.style = scCancelDiscountCss;

const scCancelSurveyCss = ".cancel-survey{color:var(--sc-color-gray-900)}.cancel-survey__abort-link{color:var(--sc-color-gray-500)}";

const ScCancelSurvey = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.scAbandon = createEvent(this, "scAbandon", 7);
    this.scSubmitReason = createEvent(this, "scSubmitReason", 7);
  }
  componentWillLoad() {
    if (!this.reasons) {
      this.fetchReasons();
    }
  }
  handleSelectedReasonChange() {
    var _a;
    if ((_a = this.selectedReason) === null || _a === void 0 ? void 0 : _a.comment_enabled) {
      setTimeout(() => {
        this.textArea.triggerFocus();
      }, 50);
    }
  }
  async fetchReasons() {
    try {
      this.loading = true;
      this.reasons = await apiFetch({
        path: 'surecart/v1/cancellation_reasons',
      });
    }
    catch (e) {
      console.error(e);
      this.error = e;
    }
    finally {
      this.loading = false;
    }
  }
  async handleSubmit(e) {
    e.preventDefault();
    e.stopImmediatePropagation();
    try {
      this.scSubmitReason.emit({ reason: this.selectedReason, comment: this.comment });
    }
    catch (e) {
      console.error(e);
      this.error = e;
    }
  }
  renderReasons() {
    if (this.loading) {
      return (h("sc-choice", null, h("sc-skeleton", null)));
    }
    return (this.reasons || []).map(reason => (h("sc-choice", { value: reason === null || reason === void 0 ? void 0 : reason.id, name: "reason", onScChange: e => {
        if (e.target.checked) {
          this.selectedReason = reason;
        }
      } }, reason === null || reason === void 0 ? void 0 : reason.label)));
  }
  render() {
    var _a, _b, _c;
    const { reasons_title, reasons_description, skip_link } = ((_a = this.protocol) === null || _a === void 0 ? void 0 : _a.preservation_locales) || {};
    if (this.loading) {
      return h("sc-skeleton", null);
    }
    return (h("div", { class: "cancel-survey" }, h("sc-dashboard-module", { heading: reasons_title, style: { '--sc-dashboard-module-spacing': '2em' } }, h("span", { slot: "description" }, reasons_description), h("sc-form", { onScSubmit: e => this.handleSubmit(e), style: { '--sc-form-row-spacing': '2em' } }, h("sc-choices", { showLabel: false, label: __('Choose a reason', 'surecart'), style: { '--columns': '2' }, required: true }, this.renderReasons()), ((_b = this.selectedReason) === null || _b === void 0 ? void 0 : _b.comment_enabled) && (h("sc-textarea", { label: ((_c = this.selectedReason) === null || _c === void 0 ? void 0 : _c.comment_prompt) || __('Additional Comments', 'surecart'), required: true, ref: el => (this.textArea = el), onScInput: e => (this.comment = e.target.value) })), h("sc-flex", { justifyContent: "flex-start" }, h("sc-button", { type: "primary", submit: true }, __('Continue', 'surecart'), h("sc-icon", { name: "arrow-right", slot: "suffix" })), !!skip_link && (h("sc-button", { class: "cancel-survey__abort-link", type: "text", onClick: () => this.scAbandon.emit() }, skip_link)))))));
  }
  static get watchers() { return {
    "selectedReason": ["handleSelectedReasonChange"]
  }; }
};
ScCancelSurvey.style = scCancelSurveyCss;

const scSubscriptionCancelCss = ":host{display:block;position:relative}.subscription-cancel{display:grid;gap:0.5em}.subscription-cancel__terms{color:var(--sc-color-gray-600);font-size:var(--sc-font-size-small)}";

const ScSubscriptionCancel = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.scAbandon = createEvent(this, "scAbandon", 7);
    this.scCancelled = createEvent(this, "scCancelled", 7);
  }
  async cancelSubscription() {
    var _a, _b;
    try {
      this.error = '';
      this.busy = true;
      await apiFetch({
        path: addQueryArgs(`/surecart/v1/subscriptions/${(_a = this.subscription) === null || _a === void 0 ? void 0 : _a.id}/cancel`, {
          cancellation_act: {
            ...(!!this.comment ? { comment: this.comment } : {}),
            cancellation_reason_id: (_b = this.reason) === null || _b === void 0 ? void 0 : _b.id,
          },
        }),
        method: 'PATCH',
      });
      this.scCancelled.emit();
    }
    catch (e) {
      this.error = (e === null || e === void 0 ? void 0 : e.message) || __('Something went wrong', 'surecart');
      this.busy = false;
    }
  }
  renderContent() {
    var _a, _b;
    if (this.loading) {
      return this.renderLoading();
    }
    return (h(Fragment, null, ((_a = this === null || this === void 0 ? void 0 : this.protocol) === null || _a === void 0 ? void 0 : _a.cancel_behavior) === 'pending' ? (h("div", { slot: "description" }, __('Your plan will be canceled, but is still available until the end of your billing period on', 'surecart'), ' ', h("strong", null, h("sc-format-date", { type: "timestamp", date: (_b = this === null || this === void 0 ? void 0 : this.subscription) === null || _b === void 0 ? void 0 : _b.current_period_end_at, month: "long", day: "numeric", year: "numeric" })), ". ", __('If you change your mind, you can renew your subscription.', 'surecart'))) : (h("div", { slot: "description" }, __('Your plan will be canceled immediately. You cannot change your mind.', 'surecart')))));
  }
  renderLoading() {
    return (h("div", { style: { padding: '0.5em' } }, h("sc-skeleton", { style: { width: '30%', marginBottom: '0.75em' } }), h("sc-skeleton", { style: { width: '20%', marginBottom: '0.75em' } }), h("sc-skeleton", { style: { width: '40%' } })));
  }
  render() {
    return (h("sc-dashboard-module", { heading: this.heading || __('Cancel your plan', 'surecart'), class: "subscription-cancel", error: this.error, style: { '--sc-dashboard-module-spacing': '1em' } }, this.renderContent(), h("sc-flex", { justifyContent: "flex-start" }, h("sc-button", { type: "primary", loading: this.loading || this.busy, disabled: this.loading || this.busy, onClick: () => this.cancelSubscription() }, __('Cancel Plan', 'surecart')), h("sc-button", { style: { color: 'var(--sc-color-gray-500' }, type: "text", onClick: () => this.scAbandon.emit(), loading: this.loading || this.busy, disabled: this.loading || this.busy }, __('Keep My Plan', 'surecart'))), this.busy && h("sc-block-ui", null)));
  }
};
ScSubscriptionCancel.style = scSubscriptionCancelCss;

const scTextareaCss = ":host{display:block}.textarea{display:flex;align-items:center;position:relative;width:100%;font-family:var(--sc-input-font-family);font-weight:var(--sc-input-font-weight);line-height:var(--sc-line-height-normal);letter-spacing:var(--sc-input-letter-spacing);vertical-align:middle;transition:var(--sc-input-transition, var(--sc-transition-medium)) color, var(--sc-input-transition, var(--sc-transition-medium)) border, var(--sc-input-transition, var(--sc-transition-medium)) box-shadow,\n    var(--sc-input-transition, var(--sc-transition-medium)) background-color;cursor:text}.textarea--standard{background-color:var(--sc-input-background-color);border:solid var(--sc-input-border-width) var(--sc-input-border-color)}.textarea--standard:hover:not(.textarea--disabled){background-color:var(--sc-input-background-color-hover);border-color:var(--sc-input-border-color-hover)}.textarea--standard:hover:not(.textarea--disabled) .textarea__control{color:var(--sc-input-color-hover)}.textarea--standard.textarea--focused:not(.textarea--disabled){background-color:var(--sc-input-background-color-focus);border-color:var(--sc-input-border-color-focus);color:var(--sc-input-color-focus);box-shadow:0 0 0 var(--sc-focus-ring-width) var(--sc-input-focus-ring-color)}.textarea--standard.textarea--focused:not(.textarea--disabled) .textarea__control{color:var(--sc-input-color-focus)}.textarea--standard.textarea--disabled{background-color:var(--sc-input-background-color-disabled);border-color:var(--sc-input-border-color-disabled);opacity:0.5;cursor:not-allowed}.textarea--standard.textarea--disabled .textarea__control{color:var(--sc-input-color-disabled)}.textarea--standard.textarea--disabled .textarea__control::placeholder{color:var(--sc-input-placeholder-color-disabled)}.textarea--filled{border:none;background-color:var(--sc-input-filled-background-color);color:var(--sc-input-color)}.textarea--filled:hover:not(.textarea--disabled){background-color:var(--sc-input-filled-background-color-hover)}.textarea--filled.textarea--focused:not(.textarea--disabled){background-color:var(--sc-input-filled-background-color-focus);outline:var(--sc-focus-ring);outline-offset:var(--sc-focus-ring-offset)}.textarea--filled.textarea--disabled{background-color:var(--sc-input-filled-background-color-disabled);opacity:0.5;cursor:not-allowed}.textarea__control{flex:1 1 auto;font-family:inherit;font-size:inherit;font-weight:inherit;line-height:1.4;color:var(--sc-input-color);border:none;background:none;box-shadow:none;cursor:inherit;-webkit-appearance:none}.textarea__control::-webkit-search-decoration,.textarea__control::-webkit-search-cancel-button,.textarea__control::-webkit-search-results-button,.textarea__control::-webkit-search-results-decoration{-webkit-appearance:none}.textarea__control::placeholder{color:var(--sc-input-placeholder-color);user-select:none}.textarea__control:focus{outline:none}.textarea--small{border-radius:var(--sc-input-border-radius-small);font-size:var(--sc-input-font-size-small)}.textarea--small .textarea__control{padding:0.5em var(--sc-input-spacing-small)}.textarea--medium{border-radius:var(--sc-input-border-radius-medium);font-size:var(--sc-input-font-size-medium)}.textarea--medium .textarea__control{padding:0.5em var(--sc-input-spacing-medium)}.textarea--large{border-radius:var(--sc-input-border-radius-large);font-size:var(--sc-input-font-size-large)}.textarea--large .textarea__control{padding:0.5em var(--sc-input-spacing-large)}.textarea--resize-none .textarea__control{resize:none}.textarea--resize-vertical .textarea__control{resize:vertical}.textarea--resize-auto .textarea__control{height:auto;resize:none}.textarea__char-limit-warning{margin-top:var(--sc-input-spacing-small);color:var(--sc-input-help-text-color);font-size:var(--sc-input-help-text-font-size-medium)}";

const CHAR_LIMIT_THRESHOLD = 20;
let id = 0;
const ScTextarea = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.scChange = createEvent(this, "scChange", 7);
    this.scInput = createEvent(this, "scInput", 7);
    this.scBlur = createEvent(this, "scBlur", 7);
    this.scFocus = createEvent(this, "scFocus", 7);
    this.inputId = `textarea-${++id}`;
    this.helpId = `textarea-help-text-${id}`;
    this.labelId = `textarea-label-${id}`;
    this.hasFocus = false;
    this.showCharLimit = false;
    /** The textarea's size. */
    this.size = 'medium';
    /** The textarea's value attribute. */
    this.value = '';
    /** Draws a filled textarea. */
    this.filled = false;
    /** The textarea's label. Alternatively, you can use the label slot. */
    this.label = '';
    /** Should we show the label */
    this.showLabel = true;
    /** The textarea's help text. Alternatively, you can use the help-text slot. */
    this.help = '';
    /** The number of rows to display by default. */
    this.rows = 4;
    /** Controls how the textarea can be resized. */
    this.resize = 'vertical';
    /** Disables the textarea. */
    this.disabled = false;
    /** Makes the textarea readonly. */
    this.readonly = false;
    /** Makes the textarea a required field. */
    this.required = false;
    /**
     * This will be true when the control is in an invalid state. Validity is determined by props such as `type`,
     * `required`, `minlength`, and `maxlength` using the browser's constraint validation API.
     */
    this.invalid = false;
  }
  handleRowsChange() {
    this.setTextareaHeight();
  }
  handleValueChange() {
    this.invalid = !this.input.checkValidity();
    this.showCharLimit = this.maxlength - this.value.length <= CHAR_LIMIT_THRESHOLD;
  }
  handleDisabledChange() {
    // Disabled form controls are always valid, so we need to recheck validity when the state changes
    this.input.disabled = this.disabled;
    this.invalid = !this.input.checkValidity();
  }
  /** Sets focus on the input. */
  async triggerFocus(options) {
    return this.input.focus(options);
  }
  /** Sets focus on the textarea. */
  focus(options) {
    this.input.focus(options);
  }
  /** Removes focus from the textarea. */
  blur() {
    this.input.blur();
  }
  /** Selects all the text in the textarea. */
  select() {
    this.input.select();
  }
  /** Gets or sets the textarea's scroll position. */
  scrollPosition(position) {
    if (position) {
      if (typeof position.top === 'number')
        this.input.scrollTop = position.top;
      if (typeof position.left === 'number')
        this.input.scrollLeft = position.left;
      return;
    }
    // eslint-disable-next-line consistent-return
    return {
      top: this.input.scrollTop,
      left: this.input.scrollTop,
    };
  }
  /** Sets the start and end positions of the text selection (0-based). */
  setSelectionRange(selectionStart, selectionEnd, selectionDirection = 'none') {
    this.input.setSelectionRange(selectionStart, selectionEnd, selectionDirection);
  }
  /** Replaces a range of text with a new string. */
  setRangeText(replacement, start, end, selectMode = 'preserve') {
    this.input.setRangeText(replacement, start, end, selectMode);
    if (this.value !== this.input.value) {
      this.value = this.input.value;
      this.scInput.emit();
    }
    if (this.value !== this.input.value) {
      this.value = this.input.value;
      this.setTextareaHeight();
      this.scInput.emit();
      this.scChange.emit();
    }
  }
  /** Checks for validity and shows the browser's validation message if the control is invalid. */
  async reportValidity() {
    return this.input.reportValidity();
  }
  /** Sets a custom validation message. If `message` is not empty, the field will be considered invalid. */
  setCustomValidity(message) {
    this.input.setCustomValidity(message);
    this.invalid = !this.input.checkValidity();
  }
  handleBlur() {
    this.hasFocus = false;
    this.scBlur.emit();
  }
  handleChange() {
    this.value = this.input.value;
    this.setTextareaHeight();
    this.scChange.emit();
  }
  handleFocus() {
    this.hasFocus = true;
    this.scFocus.emit();
  }
  handleInput() {
    this.value = this.input.value;
    this.setTextareaHeight();
    this.scInput.emit();
  }
  componentWillLoad() {
    if (!(window === null || window === void 0 ? void 0 : window.ResizeObserver)) {
      return;
    }
    this.resizeObserver = new window.ResizeObserver(() => this.setTextareaHeight());
  }
  componentDidLoad() {
    this.formController = new FormSubmitController(this.el).addFormData();
    if (!(window === null || window === void 0 ? void 0 : window.ResizeObserver)) {
      return;
    }
    this.resizeObserver.observe(this.input);
  }
  disconnectedCallback() {
    var _a;
    (_a = this.formController) === null || _a === void 0 ? void 0 : _a.removeFormData();
    this.resizeObserver.unobserve(this.input);
  }
  setTextareaHeight() {
    if (this.resize === 'auto') {
      this.input.style.height = 'auto';
      this.input.style.height = `${this.input.scrollHeight}px`;
    }
    else {
      this.input.style.height = undefined;
    }
  }
  render() {
    return (h("div", { part: "form-control", class: {
        'form-control': true,
        'form-control--small': this.size === 'small',
        'form-control--medium': this.size === 'medium',
        'form-control--large': this.size === 'large',
      } }, h("sc-form-control", { exportparts: "label, help-text, form-control", size: this.size, required: this.required, label: this.label, showLabel: this.showLabel, help: this.help, inputId: this.inputId, helpId: this.helpId, labelId: this.labelId, name: this.name }, h("div", { part: "form-control-input", class: "form-control-input" }, h("div", { part: "base", class: {
        'textarea': true,
        'textarea--small': this.size === 'small',
        'textarea--medium': this.size === 'medium',
        'textarea--large': this.size === 'large',
        'textarea--standard': !this.filled,
        'textarea--filled': this.filled,
        'textarea--disabled': this.disabled,
        'textarea--focused': this.hasFocus,
        'textarea--empty': !this.value,
        'textarea--invalid': this.invalid,
        'textarea--resize-none': this.resize === 'none',
        'textarea--resize-vertical': this.resize === 'vertical',
        'textarea--resize-auto': this.resize === 'auto',
      } }, h("textarea", { part: "textarea", ref: el => (this.input = el), id: "input", class: "textarea__control", name: this.name, value: this.value, disabled: this.disabled, readonly: this.readonly, required: this.required, placeholder: this.placeholder, rows: this.rows, minlength: this.minlength, maxlength: this.maxlength, autocapitalize: this.autocapitalize, autocorrect: this.autocorrect, autofocus: this.autofocus, spellcheck: this.spellcheck, enterkeyhint: this.enterkeyhint, inputmode: this.inputmode, "aria-describedby": "help-text", onChange: () => this.handleChange(), onInput: () => this.handleInput(), onFocus: () => this.handleFocus(), onBlur: () => this.handleBlur() })), this.showCharLimit && (h("div", { slot: "help", class: 'textarea__char-limit-warning' }, sprintf(__('%d characters remaining', 'surecart'), this.maxlength - this.input.value.length)))))));
  }
  get el() { return getElement(this); }
  static get watchers() { return {
    "rows": ["handleRowsChange"],
    "value": ["handleValueChange"],
    "disabled": ["handleDisabledChange"]
  }; }
};
ScTextarea.style = scTextareaCss;

export { ScCancelDiscount as sc_cancel_discount, ScCancelSurvey as sc_cancel_survey, ScSubscriptionCancel as sc_subscription_cancel, ScTextarea as sc_textarea };
