de tintalimon: pague lo que pueda
This commit is contained in:
f
parent
a1fd00908b
commit
bba8bfa9aa
3 changed files with 344 additions and 0 deletions
125
_includes/donacion.html
Normal file
125
_includes/donacion.html
Normal file
|
|
@ -0,0 +1,125 @@
|
|||
{% comment %}
|
||||
Traer la donación pasada como parámetro o la que se haya establecido por
|
||||
defecto para el layout correspondiente.
|
||||
|
||||
product = producto
|
||||
page = post que incluye esta donación
|
||||
icon = ícono del botón
|
||||
class = clases extra para el botón
|
||||
boton = texto opcional para el botón
|
||||
{% endcomment %}
|
||||
{%- assign product = include.product | default: include.page -%}
|
||||
{%- assign donacion = include.page.donacion | default: product.donacion -%}
|
||||
|
||||
<input data-controller="open" data-action="donacion" type="checkbox" id="donacion" class="d_toggler sr-only">
|
||||
<label class="btn-block" for="donacion">
|
||||
<span class="btn {{ include.class }} btn-block">
|
||||
{{ include.boton | default: donacion.boton }}
|
||||
|
||||
{% if include.icon %}
|
||||
<i class="{{ include.icon }}"></i>
|
||||
{% endif %}
|
||||
</span>
|
||||
|
||||
<div class="telon d_share-box"></div>
|
||||
</label>
|
||||
|
||||
<form
|
||||
data-pay-what-you-can-target="form"
|
||||
{% include_cached pay_what_you_can_controller.html product=product url=include.page.pdf.path %}
|
||||
style="z-index: 1011"
|
||||
class="d_share-box pointer-event-none d_toggled d-flex align-items-center justify-content-center"
|
||||
itemscope
|
||||
itemtype="https://schema.org/Offer">
|
||||
<meta itemprop="sku" content="{{ product.sku }}" />
|
||||
<meta itemprop="availableDeliveryMethod" content="http://purl.org/goodrelations/v1#DirectDownload" />
|
||||
<meta itemprop="acceptedPaymentMethod" content="http://purl.org/goodrelations/v1#PayPal" />
|
||||
|
||||
<div class="box inside background-white pointer-event-auto row no-gutters align-items-center justify-content-center p-5">
|
||||
<div class="row">
|
||||
<div class="col-md-9 black font-weight-light lead text-md-justify hyphens-md e-content">
|
||||
{{ donacion.content | markdownify }}
|
||||
</div>
|
||||
|
||||
<div class="col-md-3 d-flex justify-content-center">
|
||||
{% if include.page.image.path %}
|
||||
<picture>
|
||||
<source srcset="{{ include.page.image.path | thumbnail: nil, 370 }}" media="(max-width: 767px)" />
|
||||
<img class="cover shadow w-200px" src="{{ include.page.image.path | thumbnail: nil, 300 }}" loading="lazy" />
|
||||
</picture>
|
||||
{% else %}
|
||||
{% include_cached logo_horizontal.svg %}
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="col-md-3 mb-3 mb-md-0">
|
||||
<h2>{{ site.i18n.donacion.monto }}</h2>
|
||||
|
||||
<label class="sr-only" for="price">{{ site.i18n.donacion.monto }}</label>
|
||||
<input id="price" name="price" type="number" class="form-control" min="1" value="1" data-name="price" data-action="pay-what-you-can#store" required/>
|
||||
</div>
|
||||
|
||||
<div class="col-md-3 mb-3 mb-md-0">
|
||||
<div class="row">
|
||||
<div class="col-6">
|
||||
<input id="currency-ars" type="radio" class="sr-only" name="currency" value="ARS" data-name="currency" data-action="pay-what-you-can#store" required/>
|
||||
<label for="currency-ars" itemprop="priceCurrency" class="d-flex flex-column justify-content-center">
|
||||
<span class="btn border mb-3">ARS</span>
|
||||
|
||||
{% include mp-logo.svg %}
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="col-6">
|
||||
<input id="currency-usd" type="radio" class="sr-only" name="currency" value="USD" data-name="currency" data-action="pay-what-you-can#store" required/>
|
||||
<label for="currency-usd" itemprop="priceCurrency" class="d-flex flex-column justify-content-center">
|
||||
<span class="btn border mb-3">USD</span>
|
||||
|
||||
{% include pp-logo.svg %}
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="col-12 text-center">
|
||||
{% comment %}
|
||||
Este input invisible es para que Bootstrap pueda mostrar el
|
||||
error si querés mandar el formulario sin elegir una moneda.
|
||||
{% endcomment %}
|
||||
<input type="radio" class="d-none" name="currency" value="" />
|
||||
<div class="invalid-feedback">
|
||||
{{ site.i18n.donacion.currency }}
|
||||
</div>
|
||||
|
||||
<p data-controller="cart-paypal-confirmation"></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-3">
|
||||
<button class="btn btn-primary btn-block mb-2" data-action="pay-what-you-can#pay">
|
||||
<span class="hide-when-disabled">{{ donacion.boton }}</span>
|
||||
<span class="show-when-disabled">
|
||||
<span class="sr-only">{{ site.i18n.donacion.espera }}</span>
|
||||
<i class="fa fa-fw fa-spinner fa-spin"></i>
|
||||
</span>
|
||||
</button>
|
||||
|
||||
{% if include.page.pdf.path %}
|
||||
<div class="d-flex align-items-center justify-content-between">
|
||||
<a
|
||||
download
|
||||
href="{{ include.page.pdf.path | uri_escape }}"
|
||||
class="btn btn-transparent border black btn-block">
|
||||
{{ site.i18n.libro.download }}
|
||||
</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="col-md-3"></div>
|
||||
|
||||
<div class="col-12">
|
||||
{{ site.i18n.donacion.medios | markdownify | replace: '<p>', '<p class="mb-0 mt-3"><small>' | replace: '</p>', '</small></p>' }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
13
_includes/pay_what_you_can_controller.html
Normal file
13
_includes/pay_what_you_can_controller.html
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
data-controller="pay-what-you-can"
|
||||
data-pay-what-you-can-download-value="{{ include.product.url | present }}"
|
||||
data-pay-what-you-can-url-value="{{ include.url | default: include.product.url }}"
|
||||
data-pay-what-you-can-variant-id-value="{{ include.product.variant_id }}"
|
||||
data-pay-what-you-can-firstname-value="{{ include.product.title }}"
|
||||
data-pay-what-you-can-currency-value="ARS"
|
||||
data-pay-what-you-can-price-value="1"
|
||||
data-image="{{ include.product.image.path | thumbnail: 300 }}"
|
||||
data-title="{{ include.product.title }}"
|
||||
data-price="{{ include.product.price }}"
|
||||
data-in-stock="{{ include.product.in_stock }}"
|
||||
data-stock="{{ include.product.stock }}"
|
||||
data-extra="{{ include.extra | join: '|' }}"
|
||||
206
_packs/controllers/pay_what_you_can_controller.js
Normal file
206
_packs/controllers/pay_what_you_can_controller.js
Normal file
|
|
@ -0,0 +1,206 @@
|
|||
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()
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue