{"version":3,"names":["scCustomerEmailCss","ScCustomerEmailStyle0","wp","i18n","__"],"sources":["src/components/controllers/checkout-form/customer-email/sc-customer-email.scss?tag=sc-customer-email&encapsulation=shadow","src/components/controllers/checkout-form/customer-email/sc-customer-email.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\na {\n  color: var(--sc-color-primary-500);\n}\n\na.customer-email {\n  &__login-link {\n    color: var(--sc-customer-login-link-color, var(--sc-input-placeholder-color));\n    text-decoration:none;\n    font-size: var(--sc-font-size-small);\n  }\n}\n\n.tracking-confirmation-message {\n  font-size: var(--sc-font-size-xx-small);\n\n  span {\n    opacity: 0.75;\n  }\n}\n","import { Component, Event, EventEmitter, h, Host, Method, Prop } from '@stencil/core';\nimport { __ } from '@wordpress/i18n';\n\nimport { createOrUpdateCheckout } from '../../../../services/session';\nimport { Checkout, Customer } from '../../../../types';\nimport { getValueFromUrl } from '../../../../functions/util';\nimport { state as userState } from '@store/user';\nimport { state as checkoutState, onChange } from '@store/checkout';\n\n@Component({\n  tag: 'sc-customer-email',\n  styleUrl: 'sc-customer-email.scss',\n  shadow: true,\n})\nexport class ScCustomerEmail {\n  private input: HTMLScInputElement;\n\n  private removeCheckoutListener: () => void;\n\n  /** A message for tracking confirmation. */\n  @Prop() trackingConfirmationMessage: string;\n\n  /** The input's size. */\n  @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n  /** The input's value attribute. */\n  @Prop({ mutable: true }) value = getValueFromUrl('email');\n\n  /** Draws a pill-style input with rounded edges. */\n  @Prop({ reflect: true }) pill = false;\n\n  /** The input's label. */\n  @Prop() label: string;\n\n  /** Should we show the label */\n  @Prop() showLabel: boolean = true;\n\n  /** The input's help text. */\n  @Prop() help: string = '';\n\n  /** The input's placeholder text. */\n  @Prop() placeholder: string;\n\n  /** Disables the input. */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Makes the input readonly. */\n  @Prop({ reflect: true }) readonly: boolean = false;\n\n  /** Makes the input a required field. */\n  @Prop({ reflect: true }) required = false;\n\n  /**\n   * This will be true when the control is in an invalid state. Validity is determined by props such as `type`,\n   * `required`, `minlength`, `maxlength`, and `pattern` using the browser's constraint validation API.\n   */\n  @Prop({ mutable: true, reflect: true }) invalid = false;\n\n  /** The input's autofocus attribute. */\n  @Prop() autofocus: boolean;\n\n  /** Inputs focus */\n  @Prop({ mutable: true, reflect: true }) hasFocus: boolean;\n\n  /** Emitted when the control's value changes. */\n  @Event({ composed: true }) scChange: EventEmitter<void>;\n\n  /** Emitted when the clear button is activated. */\n  @Event() scClear: EventEmitter<void>;\n\n  /** Emitted when the control receives input. */\n  @Event() scInput: EventEmitter<void>;\n\n  /** Emitted when the control gains focus. */\n  @Event() scFocus: EventEmitter<void>;\n\n  /** Emitted when the control loses focus. */\n  @Event() scBlur: EventEmitter<void>;\n\n  /** Update the order state. */\n  @Event() scUpdateOrderState: EventEmitter<Checkout>;\n\n  /** Update the abandoned cart. */\n  @Event() scUpdateAbandonedCart: EventEmitter<boolean>;\n\n  /** Prompt for login. */\n  @Event() scLoginPrompt: EventEmitter<void>;\n\n  async handleChange() {\n    this.value = this.input.value;\n    this.scChange.emit();\n\n    try {\n      checkoutState.checkout = (await createOrUpdateCheckout({ id: checkoutState.checkout.id, data: { email: this.input.value } })) as Checkout;\n    } catch (error) {\n      console.log(error);\n    }\n  }\n\n  @Method()\n  async reportValidity() {\n    return this.input?.reportValidity?.();\n  }\n\n  /** Sync customer email with session if it's updated by other means */\n  handleSessionChange() {\n    // we already have a value and we are not yet logged in.\n    if (this.value && !userState.loggedIn) return;\n\n    // we are logged in already.\n    if (userState.loggedIn) {\n      // get email from user state fist.\n      this.value = userState.email || (checkoutState?.checkout?.customer as Customer)?.email || checkoutState?.checkout?.email;\n      return;\n    }\n\n    const fromUrl = getValueFromUrl('email');\n    if (!userState.loggedIn && !!fromUrl) {\n      this.value = fromUrl;\n      return;\n    }\n\n    this.value = checkoutState?.checkout?.email || (checkoutState?.checkout?.customer as Customer)?.email;\n  }\n\n  /** Listen to checkout. */\n  componentWillLoad() {\n    this.handleSessionChange();\n    this.removeCheckoutListener = onChange('checkout', () => this.handleSessionChange());\n  }\n\n  /** Remove listener. */\n  disconnectedCallback() {\n    this.removeCheckoutListener();\n  }\n\n  renderOptIn() {\n    if (!this.trackingConfirmationMessage) return null;\n\n    if (checkoutState.abandonedCheckoutEnabled !== false) {\n      return (\n        <div class=\"tracking-confirmation-message\">\n          <span>{this.trackingConfirmationMessage}</span>{' '}\n          <a\n            href=\"#\"\n            onClick={e => {\n              e.preventDefault();\n              this.scUpdateAbandonedCart.emit(false);\n            }}\n          >\n            {__('No Thanks', 'surecart')}\n          </a>\n        </div>\n      );\n    }\n\n    return (\n      <div class=\"tracking-confirmation-message\">\n        <span> {__(\"You won't receive further emails from us.\", 'surecart')}</span>\n      </div>\n    );\n  }\n\n  render() {\n    return (\n      <Host>\n        <sc-input\n          exportparts=\"base, input, form-control, label, help-text, prefix, suffix\"\n          type=\"email\"\n          name=\"email\"\n          ref={el => (this.input = el as HTMLScInputElement)}\n          value={this.value}\n          help={this.help}\n          label={this.label}\n          autocomplete={'email'}\n          placeholder={this.placeholder}\n          disabled={this.disabled || (!!userState.loggedIn && !!this.value?.length && !this.invalid)}\n          readonly={this.readonly}\n          required={true}\n          invalid={this.invalid}\n          autofocus={this.autofocus}\n          hasFocus={this.hasFocus}\n          onScChange={() => this.handleChange()}\n          onScInput={() => this.scInput.emit()}\n          onScFocus={() => this.scFocus.emit()}\n          onScBlur={() => this.scBlur.emit()}\n        ></sc-input>\n\n        {this.renderOptIn()}\n      </Host>\n    );\n  }\n}\n"],"mappings":"gcAAA,MAAMA,EAAqB,qVAC3B,MAAAC,EAAeD,E,k/DCqJFE,GAAAC,KAAAC,GAAE,yB,0EAQCF,GAAAC,KAAAC,GAAE,yD","ignoreList":[]}