sutty-base-jekyll-theme/_packs/controllers/pay_what_you_can_controller.js

import { CartBaseController } from './cart_base_controller'

/*
 * Al pagar lo que podamos, primero hay que crear una orden y luego
 * contactarse con la APIv2 para generar la variante con el precio que
 * queramos agregar.  Agregamos la variante al carrito y lanzamos el
 * proceso de pago.
 */
export default class extends CartBaseController {
  static targets = [ 'form' ]
  static values = {
    variantId: Number,
    currency: String,
    price: Number,
    firstname: String
  }

  connect () {
    this.paymentMethodByCurrency = {
      ARS: 'Spree::PaymentMethod::MercadoPago',
      USD: 'Spree::PaymentMethod::Paypal'
    }
  }

  store (event) {
    const target = event.currentTarget || event.target

    this[`${target.dataset.name}Value`] = target.value
  }

  set formDisable (disable) {
    this.formTarget.elements.forEach(x => x.disabled = disable)
  }

  /*
   * Realiza todos los pasos:
   *
   * * Crear pedido
   * * Crear variante con el monto y moneda
   * * Agregar al pedido
   * * Agregar dirección al pedido
   * * Obtener métodos de envío
   * * Obtener métodos de pago
   * * Pagar
   * * Reenviar a confirmación
   * * Ejecutar el pago (si aplica)
   */
  async pay (event = undefined) {
    if (event) {
      event.preventDefault()
      event.stopPropagation()
    }

    if (!this.formTarget.checkValidity()) {
      this.formTarget.classList.add('was-validated')
      return
    }

    this.formDisable = true

    // Crear pedido.  Todos los pedidos van a ser hechos desde
    // Argentina, no hay forma de cambiar esto.
    const orderToken = await this.tempCartCreate()
    const quantity = 1
    const include = 'line_items'
    const currency = this.currencyValue
    const price = this.priceValue
    const email = 'noreply@sutty.nl'
    const firstname = this.firstnameValue
    const lastname = '-'
    const address1 = '-'
    const country_id = 250 // XXX: Internet
    const city = '-'
    const phone = '11111111'
    const zipcode = '1111'
    const ship_address_attributes = { firstname, lastname, address1, city, country_id, zipcode, phone }
    const bill_address_attributes = ship_address_attributes
    const confirmation_delivered = true
    const custom_return_url = this.customReturnUrl()

    let variant_id = this.variantIdValue

    // Crear la variante
    const payWhatYouCanResponse = await this.spree.sutty.payWhatYouCan({ orderToken }, { variant_id, price, currency, quantity })

    variant_id = payWhatYouCanResponse.data.id

    if (!variant_id) {
      this.formDisable = false
      console.error('No se pudo generar la variante', { variant_id, price, currency, quantity })
      return
    }

    // Configurar la moneda del pedido
    let response = await this.spree.sutty.updateOrder({ orderToken }, { currency, confirmation_delivered, custom_return_url })

    if (response.status > 299) {
      console.error(response)
      this.formDisable = false
      return
    }

    // Agregar al carrito
    response = await this.spree.cart.addItem({ orderToken }, { variant_id, quantity, include })

    if (response.isFail()) {
      this.handleFailure(response)
      this.formDisable = false
      return
    }

    // Actualizar la dirección
    response = await this.spree.checkout.orderUpdate({ orderToken }, { order: { email, ship_address_attributes, bill_address_attributes }})

    if (response.isFail()) {
      this.handleFailure(response)
      this.formDisable = false
      return
    }

    // Obtener los medios de envío
    response = await this.spree.checkout.shippingMethods({ orderToken }, { include: 'shipping_rates' })

    if (response.isFail()) {
      this.handleFailure(response)
      this.formDisable = false
      return
    }

    // Elegir medio de envío
    response = await this.spree.checkout.orderUpdate({ orderToken }, {
      order: {
        shipments_attributes: [{
          id: response.success().data[0].id,
          selected_shipping_rate_id: response.success().included.filter(x => x.type == 'shipping_rate')[0].id
        }]
      }
    })

    // Elegir medio de pago
    response = await this.spree.checkout.paymentMethods({ orderToken })

    if (response.isFail()) {
      this.handleFailure(response)
      this.formDisable = false
      return
    }

    const payment_method_id = response.success().data.find(x => this.paymentMethodByCurrency[this.currencyValue] == x.attributes.type).id

    response = await this.spree.checkout.orderUpdate({ orderToken },
      {
        order: { payments_attributes: [{ payment_method_id }] },
        payment_source: {
          [payment_method_id]: {
            name: 'Pepitx',
            month: 12,
            year: 2021
          }
        }
      })

    if (response.isFail()) {
      this.handleFailure(response)
      this.formDisable = false
      return
    }

    response = await this.spree.checkout.complete({ orderToken })

    if (response.isFail()) {
      this.handleFailure(response)
      this.formDisable = false
      return
    }

    // Reenviar al medio de pago
    const checkoutUrls = await this.spree.sutty.getCheckoutURL({ orderToken })
    const redirectUrl = checkoutUrls.data[0]

    Turbolinks.visit(redirectUrl)

    // Volver
  }

  async tempCartCreate () {
    const response = await this.spree.cart.create()

    // If we fail here it's probably a server error, so we inform the
    // user.
    if (response.isFail()) {
      this.handleFailure(response)
      return
    }

    return response.success().data.attributes.token
  }

  // @return [String]
  customReturnUrl () {
    const url = new URL(window.location.href)
    url.searchParams.set('open', '')

    return url.toString()
  }
}