{"version":3,"file":"credit_card_controller-D7KddXbc.js","sources":["../../../app/javascript/controllers/business/credit_card_controller.js"],"sourcesContent":["import ApplicationController from \"../application_controller\"\n\nexport default class extends ApplicationController {\n  static values = {\n    stripePublicKey: String\n  }\n\n  static targets = [\n    \"cardholderName\",\n    \"errorsContainer\",\n    \"incompleteCardNumber\",\n    \"incompleteCardExpiry\",\n    \"incompleteCardCvc\",\n    \"incompleteCardholderName\",\n    \"cardExpYear\",\n    \"cardExpMonth\",\n    \"cardLast4\",\n    \"cardToken\",\n    \"cardBrand\",\n    \"submit\"\n  ]\n\n  initialize() {\n    this.applyActiveClasses = this.applyActiveClasses.bind(this)\n    this.removeActiveClasses = this.removeActiveClasses.bind(this)\n    this.onStripeElementChange = this.onStripeElementChange.bind(this)\n    this.onSubmitByEnter = this.onSubmitByEnter.bind(this)\n\n    this.state = {\n      cardNumberValid: false,\n      cardExpiryValid: false,\n      cardCvcValid: false,\n      cardholderNameValid: false,\n    }\n  }\n\n  connect() {\n    this.element.addEventListener(\"submit\", this.onSubmitByEnter)\n\n    this.stripe = Stripe(this.stripePublicKeyValue, { locale: this.userLocale });\n    const elements = this.stripe.elements({});\n\n    const style = {\n      base: {\n        fontFamily: '\"GT Walsheim\", \"system-ui\", -apple-system, Helvetica, Arial, sans-serif',\n      },\n      invalid: {\n        color: '#E25950',\n      },\n    };\n\n    this.cardNumberElement = elements.create('cardNumber', {\n      style\n    });\n\n    this.cardExpiryElement = elements.create(\"cardExpiry\", {\n      style\n    })\n\n    this.cardCvcElement = elements.create(\"cardCvc\", {\n      style\n    })\n\n    this.cardNumberElement.on(\"focus\", this.applyActiveClasses)\n    this.cardNumberElement.on(\"blur\", this.removeActiveClasses)\n    this.cardNumberElement.on(\"change\", this.onStripeElementChange)\n\n    this.cardExpiryElement.on(\"focus\", this.applyActiveClasses)\n    this.cardExpiryElement.on(\"blur\", this.removeActiveClasses)\n    this.cardExpiryElement.on(\"change\", this.onStripeElementChange)\n\n    this.cardCvcElement.on(\"focus\", this.applyActiveClasses)\n    this.cardCvcElement.on(\"blur\", this.removeActiveClasses)\n    this.cardCvcElement.on(\"change\", this.onStripeElementChange)\n\n    this.cardNumberElement.mount(\"card-number\")\n    this.cardExpiryElement.mount(\"card-expiry\")\n    this.cardCvcElement.mount(\"card-cvc\")\n  }\n\n  async attemptSubmit() {\n    if(this.cardholderNameTarget.value.trim().length === 0) {\n      this.show(this.incompleteCardholderNameTarget)\n      this.addClass(this.cardholderNameTarget, \"error\")\n      return\n    }\n\n    this.disable(this.submitTarget)\n    this.submitTarget.innerText = this.submitTarget.dataset.disableWith\n\n    const {paymentMethod, error} = await this.stripe.createPaymentMethod({\n      type: \"card\",\n      card: this.cardNumberElement,\n      billing_details: {\n        name: this.cardholderNameTarget.value,\n      },\n    })\n\n    if(paymentMethod) {\n      document.getElementById(\"default__input_group\").classList.remove(\"error\")\n\n      this.cardLast4Target.value = paymentMethod.card.last4\n      this.cardExpMonthTarget.value = paymentMethod.card.exp_month\n      this.cardExpYearTarget.value = paymentMethod.card.exp_year\n      this.cardBrandTarget.value = paymentMethod.card.brand\n\n      this.cardTokenTarget.value = paymentMethod.id\n\n      this.element.removeEventListener(\"submit\", this.onSubmitByEnter)\n      this.submit()\n    }\n\n    if(error) {\n      this.enable(this.submitTarget)\n      this.submitTarget.innerText = this.submitTarget.dataset.label\n\n      document.getElementById(\"default__input_group\").classList.add(\"error\")\n\n      if(error.code === \"incomplete_number\") {\n        this.showErrorFor(this.incompleteCardNumberTarget)\n      } else if(error.code === \"incomplete_expiry\") {\n        this.showErrorFor(this.incompleteCardExpiryTarget)\n      } else {\n        this.showErrorFor(this.incompleteCardCvcTarget)\n      }\n    }\n  }\n\n  onCardholderNameChange() {\n    if(this.cardholderNameTarget.value.trim().length === 0) {\n      this.show(this.incompleteCardholderNameTarget)\n      this.addClass(this.cardholderNameTarget, \"error\")\n    } else {\n      this.hide(this.incompleteCardholderNameTarget)\n      this.removeClass(this.cardholderNameTarget, \"error\")\n    }\n\n    this.state.cardholderNameValid = this.cardholderNameTarget.value.trim().length > 0\n    this.syncSubmitButton()\n  }\n\n  submitOnEnter(e) {\n    if(e.key === 'Enter' && Object.values(this.state).every(Boolean)) {\n      this.attemptSubmit()\n    }\n  }\n\n  // private\n\n  syncSubmitButton() {\n    this.submitTarget.disabled = !Object.values(this.state).every(Boolean)\n  }\n\n  onStripeElementChange(event) {\n    if (event.complete) {\n      this.removeClass(document.getElementById(\"default__input_group\"), \"error\")\n    } else {\n      this.addClass(document.getElementById(\"default__input_group\"), \"error\")\n    }\n\n    this.state[`${event.elementType}Valid`] = event.complete\n    this.syncSubmitButton()\n  }\n\n  applyActiveClasses() {\n    this.addClass(document.getElementById(\"default__input_group\"), \"ring-4\", \"border-indigo-60\")\n  }\n\n  removeActiveClasses() {\n    document.getElementById(\"default__input_group\").classList.remove(\"ring-4\", \"border-indigo-60\")\n  }\n\n  showErrorFor(target) {\n    target.classList.remove(\"hidden\")\n    this.errorLabels.filter(label => label !== target)\n      .forEach(label => label.classList.add(\"hidden\"))\n  }\n\n  onSubmitByEnter(e) {\n    e.preventDefault()\n    this.attemptSubmit()\n  }\n\n  submit() {\n    this.element.requestSubmit()\n  }\n\n  get errorLabels() {\n    return Array.from(this.errorsContainerTarget.children)\n  }\n}\n"],"names":["credit_card_controller","ApplicationController","elements","style","paymentMethod","error","event","target","label","__publicField"],"mappings":"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"}