Last active
March 17, 2016 10:25
-
-
Save deltagolf/ea4db819b3f7e98c6ffa to your computer and use it in GitHub Desktop.
formJS
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /***********************************************************************************************************************************/ | |
| /***********************************************************************************************************************************/ | |
| /***********************************************************************************************************************************/ | |
| /************************************************************ SCRIPT ***************************************************************/ | |
| /***********************************************************************************************************************************/ | |
| /***********************************************************************************************************************************/ | |
| /***********************************************************************************************************************************/ | |
| //<script src="https://checkout.stripe.com/checkout.js"></script> | |
| //<script> | |
| $(document).ready(function(){ | |
| //Declare app url | |
| var redirectDomain = "https://script.google.com/macros/s/AKfycbzICEw1n1BrsBsCgPMDL1VQ7bS9ka7O49s1pS4zkTLbM4g_CRNr/exec"; | |
| //Declare all the response codes in an array | |
| var responseCodes = ["1F4", "3F8", "5DC", "7D0", "9C4", "BB8", "6D6", "FA0", "DAC"]; | |
| //Esconde el segundo formulario | |
| $("#block-yui_3_17_2_21_1454415124886_5895").hide(); | |
| //Esconde el botón de recargar | |
| $("#block-yui_3_17_2_2_1455033745983_13062").hide(); | |
| //Esconde el botón de mostrar formulario 2 | |
| $("#block-yui_3_17_2_2_1456637596700_7472").hide(); | |
| //Hide html sections that shouldn't be visible on load | |
| $(".updateFormContainer").hide(); | |
| $(".updateFormNoData").hide(); | |
| $(".eneueContributionData").hide(); | |
| $(".eneuePerks").hide(); | |
| $(".eneueUpdatedData").hide(); | |
| //Asigna atributo "name" al campo "localizer" para que lo pueda interceptar serialize | |
| $("#block-yui_3_17_2_22_1454415124886_463220").find("form").find("input.text").attr('name', 'localizer'); | |
| //Intercepta los datos enviados desde el primer formulario | |
| $("#block-yui_3_17_2_22_1454415124886_463220").find("form").submit(function(e, data){ | |
| $theForm = $(this); | |
| window.updateCustomerData = $theForm.serialize(); | |
| }); | |
| var names = ["nombre", "apellidos", "DNI", "creditos", "dir1", "dir2", "ciudad", "cp"]; | |
| //Asigna atributo "name" a todos los campos para que lo pueda interceptar serialize | |
| $("#block-yui_3_17_2_21_1454415124886_5895").find("form").find("input.text").each(function(i){$(this).attr('name', names[i])}); | |
| //Intercepta los datos enviados desde el primer formulario | |
| $("#block-yui_3_17_2_21_1454415124886_5895").find("form").submit(function(e, data){ | |
| $theForm = $(this); | |
| window.updateCustomerDataQuery = $theForm.serialize(); | |
| }); | |
| }); | |
| //Cuando se pulsa el botón con id @block-yui_3_17_2_2_1455033745983_13062 se recarga la página en el navegador | |
| $("#block-yui_3_17_2_2_1455033745983_13062").find("a").click(function(e){ | |
| e.preventDefault(); | |
| location.reload(true); | |
| }); | |
| //Clicking on this button shows form 2 and present data id="block-yui_3_17_2_2_1456637596700_7472" | |
| $("#block-yui_3_17_2_2_1456637596700_7472").find("a").click(function(e){ | |
| e.preventDefault(); | |
| $("#block-yui_3_17_2_21_1454415124886_5895").show(); | |
| $(".eneueContributionData").show(); | |
| $(".eneueUpdatedData").show(); | |
| $("#block-yui_3_17_2_2_1456637596700_7472").hide(); | |
| }); | |
| //Filtering function. Filters @arr considering @criteria in object form | |
| function filterById(arr, criteria) { | |
| return arr.filter(function(obj) { | |
| return Object.keys(criteria).every(function(c) { | |
| return obj[c] == criteria[c]; | |
| }); | |
| }); | |
| } | |
| //Creates a DOM object from an array of objects @perksJson [{delivery=xxx, perkAmount=n, description=abc, perkID=abc, soldItems=n, perkTitle=zzz},...] | |
| function generatePerks(perksJson, classDef) { | |
| //Check perksJson is not an empty array | |
| if (perksJson.length > 0) { | |
| var containerSection = $("." + classDef) | |
| .addClass("outPerks"); | |
| var containerArticle = $("<section/>") | |
| .addClass("perksContainerBody") | |
| .appendTo(containerSection); | |
| var containerHeader = $("<header/>") | |
| .appendTo(containerArticle); | |
| //Declare array with static values por Perks (description, delivery, conditions) !!Update if necessary | |
| var perkCFValues = [{ | |
| 'perkID': "PERK5", | |
| perkDescription: "No quieres regalos, ni que tu nombre aparezca en ningún sitio. Te entendemos. Por eso queremos permitirte la posibilidad de que puedas donar a esta campaña y que se respete tu voluntad. Por encima de €3 tú eliges cuánto.", | |
| perkConditions: "", | |
| perkDelivery: "" | |
| }, { | |
| 'perkID': "PERK3", | |
| perkDescription: "Todos los viajes comienzan con un pequeño paso. Te queremos agradecer que hayas iniciado el tuyo con nosotras publicando tu nombre en la web del documental.", | |
| perkConditions: "", | |
| perkDelivery: "Entrega prevista para " | |
| }, { | |
| 'perkID': "PERK4", | |
| perkDescription: "Si eres de las que te quedas en la sala de cine mirando los créditos cuando ya se ha ido todo el mundo estás de suerte. En la siguiente línea podrías salir tú.", | |
| perkConditions: "", | |
| perkDelivery: "Entrega prevista para " | |
| }, { | |
| 'perkID': "PERK20", | |
| perkDescription: "<strong>El libro que inspiró nuestro viaje y revolucionó nuestra visión de la educación.</strong> Su autor, Peter Gray, es catedrático de Psicología, y un defensor infatigable y tremendamente lúcido de una educación que responda de verdad a las necesidades de los niños y jóvenes.<br><br>Recibirás como regalo por tu donación \"Aprender en libertad\" y además tu nombre saldrá en los agradecimientos de la web y en los créditos del documental.<br><br>280 páginas aprox., traducción al español del original en edición de bolsillo con tapas blandas e impreso en papel ecológico.", | |
| perkConditions: "Sólo para España. Gastos de envío <em>incluidos</em>.", | |
| perkDelivery: "Entrega prevista para " | |
| }, { | |
| 'perkID': "PERK10", | |
| perkDescription: "Cuando conocimos esta historia supimos que <strong>de niños hubiéramos querido que alguien nos la contara.</strong> \"Los náufragos de Tonga\" es una edición exclusiva de un cuento escrito por Ana García-Castellano e ilustrado por Alicia Borges.<br><br>Recibirás como regalo por tu donación \"Los náufragos de Tonga\", y además tu nombre saldrá en los agradecimientos de la web y en los créditos del documental.<br><br>Tapas duras, 32 páginas, impreso en papel ecológico a todo color.", | |
| perkConditions: "Sólo para España. Gastos de envío <em>incluidos</em>.", | |
| perkDelivery: "Entrega prevista para " | |
| }, { | |
| 'perkID': "PERK22", | |
| perkDescription: "Los dos libros que te presentamos son <strong>ediciones que no se encuentran actualmente en el mercado</strong>, y que editaremos exclusivamente para esta campaña. Ambos narran historias reales que dan un giro a la concepción tradicional de la infancia y la educación.<br><br>Recibirás como regalo por tu donación los dos libros que editamos, \"Los náufragos de Tonga\" y \"Aprender en libertad\", y tu nombre aparecerá en los agradecimientos de la web así como en los créditos del documental.", | |
| perkConditions: "Sólo para España. Gastos de envío <em>incluidos</em>.", | |
| perkDelivery: "Entrega prevista para " | |
| }]; | |
| //Update the json object with @perkCFValues | |
| for (var i = 0; i < perksJson.length; i++) { | |
| //Gets the extra values for each perk | |
| var perkCFvalue = filterById(perkCFValues, { | |
| perkID: perksJson[i].perkID | |
| }); | |
| //Extract number of perk | |
| var perkID = perksJson[i].perkID; | |
| var perkIDNumber = perkID.replace("PERK", ""); | |
| //Adds main section for each perk | |
| var sectionPerkN = $("<section/>") | |
| .addClass("perkContenedor clearfix") | |
| .attr('id', 'divPerk' + perkIDNumber) | |
| .attr('name', 'PERK' + perkIDNumber) | |
| .appendTo(containerHeader); | |
| //Adds the header | |
| var perkHeader = $("<header/>") | |
| .addClass('headerMain') | |
| .attr('id', 'divPerk' + perkIDNumber + 'HeaderMain') | |
| .appendTo(sectionPerkN); | |
| var perkSubHeader = $("<header/>") | |
| .addClass('header') | |
| .attr('id', 'divPerk' + perkIDNumber + "Header") | |
| .appendTo(perkHeader); | |
| var div = $('<div/>') | |
| .addClass('perkTitle') | |
| .attr('id', 'divPerk' + perkIDNumber + 'Title') | |
| .appendTo(perkSubHeader); | |
| var h4 = $('<h4/>') | |
| .appendTo(div); | |
| $('<input/>') | |
| .attr('type', 'radio') | |
| .attr('name', 'perkRadio') | |
| .attr('_parent', 'divPerk' + perkIDNumber) | |
| .attr('id', 'togglePerk' + perkIDNumber) | |
| .addClass('perkRadio') | |
| .appendTo(h4); | |
| var label = $('<label/>') | |
| .attr('for', 'togglePerk' + perkIDNumber) | |
| .text('Dona €') | |
| .appendTo(h4); | |
| //I have my concerns with this.... | |
| $('<span/>') | |
| .attr('id', 'spanPerk' + perkIDNumber + 'Price') | |
| .text(perksJson[i].perkAmount) | |
| .appendTo(label); | |
| $('<span/>') | |
| .text(' o más | ') | |
| .appendTo(label); | |
| $('<span/>') | |
| .attr('id', 'spanPerk' + perkIDNumber + 'Description') | |
| .text(perksJson[i].perkTitle) | |
| .appendTo(label); | |
| div = $('<div/>') | |
| .addClass('perkStats') | |
| .attr('id', 'divPerk' + perkIDNumber + 'Stats') | |
| .appendTo(perkSubHeader); | |
| var p = $('<p/>') | |
| .appendTo(div); | |
| $('<span/>') | |
| .attr('id', 'spanPerk' + perkIDNumber + "SoldItems") | |
| .text(perksJson[i].soldItems) | |
| .appendTo(p); | |
| $('<span/>') | |
| .text(' apoyos') | |
| .appendTo(p); | |
| //Adds the SubSection | |
| var section = $('<section/>') | |
| .addClass('perkBody') | |
| .attr('id', 'divPerk' + perkIDNumber + 'Body') | |
| .appendTo(perkHeader); | |
| div = $('<div/>') | |
| .addClass('perkDesc') | |
| .attr('id', 'divPerk' + perkIDNumber + 'Desc1') | |
| .appendTo(section); | |
| $('<p/>') | |
| .html(perkCFvalue[0].perkDescription) | |
| .appendTo(div); | |
| div = $('<div/>') | |
| .addClass('perkDelivery') | |
| .attr('id', 'divPerk' + perkIDNumber + 'Delivery') | |
| .appendTo(section); | |
| var p = $('<p/>') | |
| .text(perkCFvalue[0].perkDelivery) | |
| .appendTo(div); | |
| $('<span/>') | |
| .text(perksJson[i].delivery) | |
| .attr('id', 'spanPerk' + perkIDNumber + 'Delivery') | |
| .appendTo(p); | |
| $('<br/>') | |
| .appendTo(p); | |
| $('<span/>') | |
| .html(perkCFvalue[0].perkConditions) | |
| .appendTo(p); | |
| //Adds the section | |
| var perkSection = $("<section/>") | |
| .addClass('perkPostFlight perkDivHidden') | |
| .attr('id', 'divPerk' + perkIDNumber + 'PostFlight') | |
| .appendTo(sectionPerkN); | |
| div = $('<div/>') | |
| .addClass('divPerkResponse') | |
| .attr('id', 'divPerk' + perkIDNumber + 'Response') | |
| .appendTo(perkSection); | |
| p = $('<p/>') | |
| .addClass('perkCenterFont') | |
| .appendTo(div); | |
| $('<strong/>') | |
| .text('¡Muchas gracias!') | |
| .appendTo(p); | |
| $('<br/>') | |
| .after('Este proyecto no existiría sin tu ayuda.'). | |
| appendTo(p); | |
| p = $('<p/>') | |
| .text('En las próximas horas recibirás un email en la dirección que nos indicaste al autorizar el cargo en tu tarjeta. Si transcurridas 72h no lo has recibido comprueba tu bandeja de spam, podría estar ahí. En caso de que no esté escríbenos a:') | |
| .addClass('perkFontSmall') | |
| .appendTo(div); | |
| $('<br/>') | |
| .appendTo(p); | |
| $('<br/>') | |
| .appendTo(p); | |
| $('<a/>') | |
| .attr('href', 'mailto:[email protected]') | |
| .attr('target', '_top') | |
| .text('[email protected]') | |
| .appendTo(p); | |
| $('<br/>') | |
| .appendTo(p); | |
| $('<br/>') | |
| .after('indicándonos el número de referencia de tu donación y nos pondremos en contacto contigo.') | |
| .appendTo(p); | |
| p = $('<p/>') | |
| .appendTo(div); | |
| $('<span/>') | |
| .addClass('perkDate') | |
| .attr('id', 'perk' + perkIDNumber + 'Date') | |
| .appendTo(p) | |
| p = $('<p/>') | |
| .text('Has realizado una donación de €') | |
| .appendTo(div); | |
| strong = $('<strong/>') | |
| .appendTo(p); | |
| $('<span/>') | |
| .addClass('perkAmountShow') | |
| .attr('id', 'perk' + perkIDNumber + 'AmountShow') | |
| .appendTo(strong); | |
| $('<span/>') | |
| .text('para la producción de un documental sobre educación con los siguientes datos:') | |
| .appendTo(p); | |
| p = $('<p/>') | |
| .text('Correo electrónico:') | |
| .appendTo(div); | |
| strong = $('<strong/>') | |
| .appendTo(p); | |
| $('<span/>') | |
| .addClass('perkEmailShow') | |
| .attr('id', 'perk' + perkIDNumber + 'EmailShow') | |
| .appendTo(strong); | |
| p = $('<p/>') | |
| .text('Tarjeta de crédito: **** **** **** ') | |
| .appendTo(div); | |
| strong = $('<strong/>') | |
| .appendTo(p); | |
| $('<span/>') | |
| .addClass('perkUlt4Show') | |
| .attr('id', 'perk' + perkIDNumber + 'Ult4Show') | |
| .appendTo(strong); | |
| p = $('<p/>') | |
| .text('Número de referencia (conviene que lo anotes): ') | |
| .appendTo(div); | |
| strong = $('<strong/>') | |
| .appendTo(p); | |
| $('<span/>') | |
| .addClass('perkLocalizerShow') | |
| .attr('id', 'perk' + perkIDNumber + 'LocalizerShow') | |
| .appendTo(strong); | |
| //Adds the footer | |
| var perkFooter = $("<footer/>") | |
| .addClass('perkSend perkDivHidden') | |
| .attr('id', 'divPerk' + perkIDNumber + 'Send') | |
| .appendTo(sectionPerkN); | |
| header = $('<header/>') | |
| .addClass('perkAmount') | |
| .attr('id', 'divPerk' + perkIDNumber + 'Amount') | |
| .appendTo(perkFooter) | |
| $('<input/>') | |
| .addClass('perkCustomDonationAmount perkDivHidden') | |
| .attr('type', 'number') | |
| .attr('id', 'divPerk' + perkIDNumber + 'customDonationAmount') | |
| .attr('step', '5') | |
| .attr('name', 'perkAmount') | |
| .attr('pattern', '[0-9]*') | |
| .attr('min', perksJson[i].perkAmount) | |
| .attr('title', 'Introduce una cantidad mayor de €' + perksJson.perkAmount) | |
| .attr('placeholder', 'p.ej. € ' + (perksJson[i].perkAmount + 10)) | |
| .appendTo(header); | |
| $('<div/>') | |
| .addClass('perkCustomButton perkButton perkBUttonDisplayNone perkPointer') | |
| .attr('id', 'divPerk' + perkIDNumber + 'CustomButton') | |
| .appendTo(header); | |
| } | |
| } | |
| } | |
| //</script> | |
| /***********************************************************************************************************************************/ | |
| /***********************************************************************************************************************************/ | |
| /***********************************************************************************************************************************/ | |
| /******************************************************** FORMULARIO UNO ***********************************************************/ | |
| /***********************************************************************************************************************************/ | |
| /***********************************************************************************************************************************/ | |
| /***********************************************************************************************************************************/ | |
| //<script> | |
| //Declare app url | |
| var redirectDomain = "https://script.google.com/macros/s/AKfycbzICEw1n1BrsBsCgPMDL1VQ7bS9ka7O49s1pS4zkTLbM4g_CRNr/exec"; | |
| //Declare all the response codes in an array | |
| var responseCodes = ["1F4", "3F8", "5DC", "7D0", "9C4", "BB8", "6D6", "FA0", "DAC"]; | |
| //Update @query variable with form data | |
| var query = window.updateCustomerData; | |
| //Declare text contents for html sections | |
| var BODY_TEXT = ["<p><b>Alguno de los datos introducidos es incorrecto.</b> Te hemos enviado un email con los datos correctos. Comprueba tu bandeja de entrada y vuelve a intentarlo recargando la página en tu navegador o pulsando el botón \"reintentar\" que figura a continuación.</p>", | |
| "<p><b>No existen registros con los datos introducidos</b>. Comprueba que sean correctos y vuelve a intentarlo recargando la página en tu navegador o pulsando el botón \"reintentar\" que figura a continuación.</p>", | |
| "<p>Para poderte hacer entrega de tu obsequio y para otras cuestiones legales <b>necesitamos que rellenes el siguiente formulario</b>. Los campos marcados con un asterisco (*) son obligatorios.</p><i>Si tienes alguna duda o crees que algún dato es incorrecto por favor escríbenos a <a href=\"[email protected]\" target = \"_top\">[email protected]</a> indicándonos el número de referencia de tu donación o contesta al email que te acabamos de enviar a la dirección que nos has facilitado y pronto nos pondremos en contacto contigo.</i><br>", | |
| "", | |
| "", | |
| "", | |
| "<p>Tus datos ya se encuentran registrados, pero <b>puedes actualizarlos si lo deseas</b>.</p>"]; | |
| var CONTRIBUTION_DATA = "<p>Estos son los datos que constan en nuestros registros sobre tu aportación:</p><br><p>Correo electrónico: <strong><span class = \"perkEmailShow\"></span></strong></p><p>Número de referencia: <strong><span class = \"perkLocalizerShow\"></span></strong></p><p>El día <span class = \"perkDate\"></span> a las <span class = \"perkTime\"></span> realizaste una donación de €<strong><span class = \"perkAmountShow\"></span></strong> para la producción de un documental sobre educación. Elegiste como obsequio \"<strong><span class = \"perkTitleShow\"></span></strong>\". <strong><span class = \"perkDesigShow\"></span></strong>. La fecha estimada de entrega es: <strong><span class = \"perkDeliveryShow\"></span></strong>.</p>"; | |
| var UPDATED_DATA = "<p>Estos son los datos que nos has facilitado:<p><br><p>Nombre: <strong><span class = \"perkFirstNameShow\"></span></strong></p><p>Apellidos: <strong><span class = \"perkLastNameShow\"></span></strong></p><p>DNI: <strong><span class = \"perkIdShow\"></span></strong></p><p>Email: <strong><span class = \"perkEmailShow\"></span></strong></p><p>Cómo figurarás en los créditos: <strong><span class = \"perkCreditsShow\"></span></strong></p><p>Dirección postal de envío: <strong><span class = \"perkAddressShow\"></span></strong></p><p>Ciudad: <strong><span class = \"perkCityShow\"></span></strong></p><p>Código postal: <strong><span class = \"perkZipShow\"></span></strong></p><p>Provincia: <strong><span class = \"perkProvinceShow\"></span></strong></p>"; | |
| var WARNING = "<p>¡Todavía no has validado los datos que nos has facilitado! Por favor <strong>haz click en el enlace que te acabamos de enviar por email</strong> para que podamos hacerte entrega de tu obsequio. ¡Gracias!</p>"; | |
| var PERKS = "<p>Diego, <strong>¿te gustaría implicarte aun más en este proyecto?</strong> Ahora tienes la posibilidad de hacerlo. Al elegir colaborar con alguna de estas aportaciones que hemos personalizado para ti, nos ayudarás a mejorar aún más el documental \"Corriendo por las olas\". Gracias de antemano.</p>"; | |
| //Replace @+ symbol with white spaces | |
| query = query.replace(/\+/g, " "); | |
| //Encode query | |
| var eQuery = window.btoa(unescape(encodeURIComponent(query))); | |
| //Declare payload for http request | |
| var Query = { | |
| e: eQuery | |
| }; | |
| //Execute http AJAX request with form1 data. | |
| var request = $.ajax({ | |
| type: 'get', | |
| url: redirectDomain, | |
| jsonpCallback: 'updateCustomer', | |
| contentType: "application/json", | |
| dataType: 'jsonp', | |
| data: Query | |
| }); | |
| //When request is succesfull | |
| request.done(function(resultJson) { | |
| //Actions to follow depending on the response code by the server | |
| switch(resultJson.responsecode) { | |
| case responseCodes[0]: | |
| //Either email or localizer are wrong, but one of them is right. Show message and retry button. | |
| var presentedText = BODY_TEXT[0]; | |
| $(".eneueBodyText").html(presentedText); | |
| $(".eneueBodyText").show(); | |
| $("#block-yui_3_17_2_2_1455033745983_13062").show(); | |
| break; | |
| case responseCodes[1]: | |
| //There are no registers that corresponds with the user data. Show message and retry button. | |
| //$(".updateFormContainer").hide(); | |
| //Show retry button | |
| var presentedText = BODY_TEXT[1]; | |
| $(".eneueBodyText").html(presentedText); | |
| $(".eneueBodyText").show(); | |
| $("#block-yui_3_17_2_2_1455033745983_13062").show(); | |
| break; | |
| case responseCodes[2]: | |
| //This is the first time data is entered by the user. Prompt transaction data and show form2. | |
| var presentedText = BODY_TEXT[2]; | |
| window.eneueSupporterEmail = resultJson.email; | |
| window.eneueTransactionLocalizer = resultJson.localizer; | |
| window.eneueTransactionRegistry = resultJson.registry; | |
| window.eneueQuantity = resultJson.quantity; | |
| window.eneueDelivery = resultJson.delivery; | |
| window.eneueDesig = resultJson.desig; | |
| window.eneuePerkID = resultJson.perkID; | |
| window.eneueTitle = resultJson.title; | |
| window.eneueTimeStamp = resultJson.timestamp; | |
| var timestampDate = new Date(resultJson.timestamp); | |
| var timestampDay = timestampDate.getDate(); | |
| var timestampMonth =timestampDate.getMonth() + 1; | |
| var timestampYear =timestampDate.getFullYear(); | |
| var timestampHour =(timestampDate.getHours() < 10 ? '0':'') + timestampDate.getHours(); | |
| var timestampMin = (timestampDate.getMinutes() < 10 ? '0':'') + timestampDate.getMinutes(); | |
| window.eneueDateStampFormatted = timestampDay + "/" + timestampMonth + "/" + timestampYear; | |
| window.eneueTimeStampFormatted = timestampHour + ":" + timestampMin; | |
| //Update contents in contribution data section | |
| $(".eneueBodyText").html(presentedText); | |
| $(".eneueContributionData").html(CONTRIBUTION_DATA); | |
| $(".perkEmailShow").html(window.eneueSupporterEmail); | |
| $(".perkLocalizerShow").html(window.eneueTransactionLocalizer); | |
| $(".perkDate").html(window.eneueDateStampFormatted); | |
| $(".perkTime").html(window.eneueTimeStampFormatted); | |
| $(".perkAmountShow").html(window.eneueQuantity); | |
| $(".perkTitleShow").html(window.eneueTitle); | |
| $(".perkDesigShow").html(window.eneueDesig); | |
| $(".perkDeliveryShow").html(window.eneueDelivery); | |
| //Show text and contribution data | |
| $(".eneueContributionData").show(); | |
| //Show second Form | |
| $("#block-yui_3_17_2_21_1454415124886_5895").show(); | |
| break; | |
| //Cases 3, 4, 5 and 7 are for other forms and are not represented here | |
| case responseCodes[6]: | |
| //It's the second time to enter the form and it can either be to purchase new perks or to update information | |
| //Perk information is shown first | |
| //Call function to append contents to perks section | |
| var perksSectionClass = "eneuePerks"; | |
| var jsonPerks = resultJson.perksJSON; | |
| jsonPerks = JSON.parse(jsonPerks); | |
| generatePerks(jsonPerks, perksSectionClass); | |
| //Show Button that reveals form 2 for updates | |
| $("#block-yui_3_17_2_2_1456637596700_7472").show(); | |
| var bodyText = BODY_TEXT[6]; | |
| var updatedData = UPDATED_DATA; | |
| var contributionData = CONTRIBUTION_DATA; | |
| window.eneueSupporterEmail = resultJson.email; | |
| window.eneueTransactionLocalizer = resultJson.localizer; | |
| window.eneueTransactionRegistry = resultJson.registry; | |
| window.eneueQuantity = resultJson.quantity; | |
| window.eneueDelivery = resultJson.delivery; | |
| window.eneueDesig = resultJson.desig; | |
| window.eneuePerkID = resultJson.perkID; | |
| window.eneueTitle = resultJson.title; | |
| window.eneueTimeStamp = resultJson.timestamp; | |
| window.eneueValidated = resultJson.valid; | |
| window.eneueFName = resultJson.fname; | |
| window.eneueLName = resultJson.lname; | |
| window.eneueId = resultJson.id; | |
| window.eneueCredits = resultJson.creditsPerks; | |
| window.eneueAddress = resultJson.address; | |
| window.eneueCity = resultJson.cityPerk; | |
| window.eneueZip = resultJson.zipPerk; | |
| window.eneueProvince = resultJson.provincePerk; | |
| var timestampDate = new Date(resultJson.timestamp); | |
| var timestampDay = timestampDate.getDate(); | |
| var timestampMonth =timestampDate.getMonth() + 1; | |
| var timestampYear =timestampDate.getFullYear(); | |
| var timestampHour =(timestampDate.getHours() < 10 ? '0':'') + timestampDate.getHours(); | |
| var timestampMin = (timestampDate.getMinutes() < 10 ? '0':'') + timestampDate.getMinutes(); | |
| window.eneueDateStampFormatted = timestampDay + "/" + timestampMonth + "/" + timestampYear; | |
| window.eneueTimeStampFormatted = timestampHour + ":" + timestampMin; | |
| $(".eneueBodyText").html(bodyText); | |
| $(".eneueUpdatedData").html(updatedData); | |
| $(".eneueContributionData").html(contributionData); | |
| $(".perkEmailShow").html(window.eneueSupporterEmail); | |
| $(".perkLocalizerShow").html(window.eneueTransactionLocalizer); | |
| $(".perkDate").html(window.eneueDateStampFormatted); | |
| $(".perkTime").html(window.eneueTimeStampFormatted); | |
| $(".perkAmountShow").html(window.eneueQuantity); | |
| $(".perkTitleShow").html(window.eneueTitle); | |
| $(".perkDesigShow").html(window.eneueDesig); | |
| $(".perkDeliveryShow").html(window.eneueDelivery); | |
| $(".perkFirstNameShow").html(window.eneueFName); | |
| $(".perkLastNameShow").html(window.eneueLName); | |
| $(".perkIdShow").html(window.eneueId); | |
| $(".perkCreditsShow").html(window.eneueCredits); | |
| $(".perkAddressShow").html(window.eneueAddress); | |
| $(".perkCityShow").html(window.eneueCity); | |
| $(".perkZipShow").html(window.eneueZip); | |
| $(".perkProvinceShow").html(window.eneueProvince); | |
| // $(".eneueUpdatedData").show(); | |
| $(".eneuePerks").show(); | |
| // $(".eneueContributionData").show(); | |
| } | |
| }); | |
| //</script> | |
| /***********************************************************************************************************************************/ | |
| /***********************************************************************************************************************************/ | |
| /***********************************************************************************************************************************/ | |
| /******************************************************** FORMULARIO DOS ***********************************************************/ | |
| /***********************************************************************************************************************************/ | |
| /***********************************************************************************************************************************/ | |
| /***********************************************************************************************************************************/ | |
| //<script> | |
| //Declare app url | |
| var redirectDomain = "https://script.google.com/macros/s/AKfycbzICEw1n1BrsBsCgPMDL1VQ7bS9ka7O49s1pS4zkTLbM4g_CRNr/exec"; | |
| //Declare all the response codes in an array | |
| var responseCodes = ["1F4", "3F8", "5DC", "7D0", "9C4", "BB8", "6D6", "FA0", "DAC"]; | |
| //Declare text contents for html sections | |
| var BODY_TEXT = ["¡Gracias por actualizar tus datos! Te hemos enviado un email con los datos actualizados", | |
| "Se ha producido un error en la transacción. Pronto nos pondremos en contacto contigo."]; | |
| var CONTRIBUTION_DATA = "<p>Estos son los datos que constan en nuestros registros sobre tu aportación:</p><br><p>Correo electrónico: <strong><span class = \"perkEmailShow\"></span></strong></p><p>Número de referencia: <strong><span class = \"perkLocalizerShow\"></span></strong></p><p>El día <span class = \"perkDate\"></span> a las <span class = \"perkTime\"></span> realizaste una donación de €<strong><span class = \"perkAmountShow\"></span></strong> para la producción de un documental sobre educación. Elegiste como obsequio \"<strong><span class = \"perkTitleShow\"></span></strong>\". <strong><span class = \"perkDesigShow\"></span></strong>. La fecha estimada de entrega es: <strong><span class = \"perkDeliveryShow\"></span></strong>.</p>"; | |
| var UPDATED_DATA = "<p>Estos son los datos que nos has facilitado:<p><br><p>Nombre: <strong><span class = \"perkFirstNameShow\"></span></strong></p><p>Apellidos: <strong><span class = \"perkLastNameShow\"></span></strong></p><p>DNI: <strong><span class = \"perkIdShow\"></span></strong></p><p>Email: <strong><span class = \"perkEmailShow\"></span></strong></p><p>Cómo figurarás en los créditos: <strong><span class = \"perkCreditsShow\"></span></strong></p><p>Dirección postal de envío: <strong><span class = \"perkAddressShow\"></span></strong></p><p>Ciudad: <strong><span class = \"perkCityShow\"></span></strong></p><p>Código postal: <strong><span class = \"perkZipShow\"></span></strong></p><p>Provincia: <strong><span class = \"perkProvinceShow\"></span></strong></p>"; | |
| var WARNING = "<p>¡Todavía no has validado los datos que nos has facilitado! Por favor <strong>haz click en el enlace que te acabamos de enviar por email</strong> para que podamos hacerte entrega de tu obsequio. ¡Gracias!</p>"; | |
| var PERKS = "<p>Diego, <strong>¿te gustaría implicarte aun más en este proyecto?</strong> Ahora tienes la posibilidad de hacerlo. Al elegir colaborar con alguna de estas aportaciones que hemos personalizado para ti, nos ayudarás a mejorar aún más el documental \"Corriendo por las olas\". Gracias de antemano.</p>"; | |
| //Declares query to be sent to the server app | |
| var query = window.updateCustomerDataQuery + "&email=" + window.eneueSupporterEmail + "&localizer=" + window.eneueTransactionLocalizer + "®ister=" + window.eneueTransactionRegistry + "&valid=" + window.eneueValidated; | |
| //Replaces + signs for white spaces | |
| query = query.replace(/\+/g, " "); | |
| //Encode query in base64 | |
| var eQuery = window.btoa(unescape(encodeURIComponent(query))); | |
| //Build query payload | |
| var Query = { | |
| e: eQuery | |
| }; | |
| //Call server | |
| var request = $.ajax({ | |
| type: 'get', | |
| url: redirectDomain, | |
| jsonpCallback: 'updateCustomerAdvanced', | |
| contentType: "application/json", | |
| dataType: 'jsonp', | |
| data: Query | |
| }); | |
| //Process answer from server | |
| request.done(function(resultJson) { | |
| switch(resultJson.responsecode) { | |
| //Server has completed the updated successfully | |
| case responseCodes[3]: | |
| //Perk information is shown first | |
| //Call function to append contents to perks section | |
| var perksSectionClass = "eneuePerks"; | |
| var jsonPerks = resultJson.perksJSON; | |
| console.log(jsonPerks); | |
| jsonPerks = JSON.parse(jsonPerks); | |
| console.log(jsonPerks); | |
| generatePerks(jsonPerks, perksSectionClass); | |
| var bodyText = BODY_TEXT[6]; | |
| var updatedData = UPDATED_DATA; | |
| var contributionData = CONTRIBUTION_DATA; | |
| window.eneueSupporterEmail = resultJson.email; | |
| window.eneueTransactionLocalizer = resultJson.localizer; | |
| window.eneueTransactionRegistry = resultJson.registry; | |
| window.eneueQuantity = resultJson.quantity; | |
| window.eneueDelivery = resultJson.delivery; | |
| window.eneueDesig = resultJson.desig; | |
| window.eneuePerkID = resultJson.perkID; | |
| window.eneueTitle = resultJson.title; | |
| window.eneueTimeStamp = resultJson.timestamp; | |
| window.eneueValidated = resultJson.valid; | |
| window.eneueFName = resultJson.fname; | |
| window.eneueLName = resultJson.lname; | |
| window.eneueId = resultJson.id; | |
| window.eneueCredits = resultJson.creditsPerks; | |
| window.eneueAddress = resultJson.address; | |
| window.eneueCity = resultJson.cityPerk; | |
| window.eneueZip = resultJson.zipPerk; | |
| window.eneueProvince = resultJson.provincePerk; | |
| var timestampDate = new Date(resultJson.timestamp); | |
| var timestampDay = timestampDate.getDate(); | |
| var timestampMonth =timestampDate.getMonth() + 1; | |
| var timestampYear =timestampDate.getFullYear(); | |
| var timestampHour =(timestampDate.getHours() < 10 ? '0':'') + timestampDate.getHours(); | |
| var timestampMin = (timestampDate.getMinutes() < 10 ? '0':'') + timestampDate.getMinutes(); | |
| window.eneueDateStampFormatted = timestampDay + "/" + timestampMonth + "/" + timestampYear; | |
| window.eneueTimeStampFormatted = timestampHour + ":" + timestampMin; | |
| $(".eneueBodyText").html(bodyText); | |
| $(".eneueUpdatedData").html(updatedData); | |
| $(".eneueContributionData").html(contributionData); | |
| $(".perkEmailShow").html(window.eneueSupporterEmail); | |
| $(".perkLocalizerShow").html(window.eneueTransactionLocalizer); | |
| $(".perkDate").html(window.eneueDateStampFormatted); | |
| $(".perkTime").html(window.eneueTimeStampFormatted); | |
| $(".perkAmountShow").html(window.eneueQuantity); | |
| $(".perkTitleShow").html(window.eneueTitle); | |
| $(".perkDesigShow").html(window.eneueDesig); | |
| $(".perkDeliveryShow").html(window.eneueDelivery); | |
| $(".perkFirstNameShow").html(window.eneueFName); | |
| $(".perkLastNameShow").html(window.eneueLName); | |
| $(".perkIdShow").html(window.eneueId); | |
| $(".perkCreditsShow").html(window.eneueCredits); | |
| $(".perkAddressShow").html(window.eneueAddress); | |
| $(".perkCityShow").html(window.eneueCity); | |
| $(".perkZipShow").html(window.eneueZip); | |
| $(".perkProvinceShow").html(window.eneueProvince); | |
| //Show sections | |
| $(".eneueUpdatedData").show(); | |
| $(".eneuePerks").show(); | |
| break; | |
| //There's been a problem in the transaction | |
| case responseCodes[7]: | |
| break; | |
| } | |
| }); | |
| /* Transaction */ | |
| //Flag initialization | |
| window.perkTokenBeenCalled = false; | |
| window.perkButtonEnd = false; | |
| window.perkToggleState = null; | |
| //Capitalizes first letter, lower case the rest | |
| function toTitleCase(str) { | |
| return str.replace(/\w\S*/g, function(txt) { | |
| return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase(); | |
| }); | |
| } | |
| //Closes spinner while waiting stripe charge information | |
| function closeWaitDiv(id) { | |
| id = "#" + id; | |
| $(id).hide(); | |
| } | |
| var handler = StripeCheckout.configure({ | |
| key: 'pk_live_xxxxxxxxxxxxxxxxxxxxx', | |
| //***************************************************************IMPORTANT!!!!!!!------CHECK IMAGE STORAGE AND PARAMETERS FOR CHECKOUT********** | |
| image: 'https://estonoesunaescuela.squarespace.com/s/anagrama_peq_color_whitebckgrnd_small.png', | |
| locale: 'auto', | |
| currency: "EUR", | |
| panelLabel: "Dona {{amount}}", | |
| allowRememberMe: "false", | |
| token: function(token, args) { | |
| window.perkTokenBeenCalled = true; | |
| var redirectDomain = "https://script.google.com/macros/s/AKfycbywnXbEp_nIPvClMVyEgw_YK_IhHgqnAs9-N-sYVjufx1jPCLw/exec"; | |
| var Query = "stripeEmail=" + token.email + "&stripeToken=" + token.id + "&amount=" + window.amountCents + "&itemID=" + window.perkCode; | |
| var eQuery = window.btoa(unescape(encodeURIComponent(Query))); | |
| var Query = { | |
| e: eQuery | |
| }; | |
| var request = $.ajax({ | |
| type: 'get', | |
| url: redirectDomain, | |
| jsonpCallback: 'callback', | |
| contentType: "application/json", | |
| dataType: 'jsonp', | |
| data: Query | |
| }); | |
| request.done(function(resultJson) { | |
| $("#" + window.containerID).find(".perkCustomDonationAmount").hide(); | |
| var date = new Date(); | |
| var n = date.toLocaleDateString(); | |
| var t = date.toLocaleTimeString(); | |
| var now = "El día " + n + " a las " + t; | |
| beenHacked = resultJson.beenHacked; | |
| if (beenHacked) { | |
| $("#" + window.containerID).find(".divPerkResponse").html("Se ha producido un error en el servidor. Inténtelo más tarde."); | |
| } else { | |
| window.amountR = resultJson.amount / 100; | |
| window.last4 = resultJson.last4; | |
| window.eMail = resultJson.eMail; | |
| window.localizer = resultJson.localizer; | |
| $("#" + window.containerID).find(".perkAmountShow").html(window.amountR); | |
| $("#" + window.containerID).find(".perkUlt4Show").html(window.last4); | |
| $("#" + window.containerID).find(".perkEmailShow").html(window.eMail); | |
| $("#" + window.containerID).find(".perkLocalizerShow").html(window.localizer); | |
| $("#" + window.containerID).find(".perkDate").html(now); | |
| var chain = "<br>No has concursado en la rifa"; | |
| window.perkTokenBeenCalled = false; | |
| window.perkButtonEnd = true; | |
| window.beenShared = false; | |
| $("#" + window.containerID).find(".perkCustomButton").html("Finalizar"); | |
| $("#" + window.containerID).find(".perkPostFlight").show(); | |
| } | |
| }); | |
| } | |
| }); | |
| $(".perkCustomButton").click(function(e) { | |
| var inputBoxId = $("#" + window.containerID).find(".perkCustomDonationAmount").attr("id"); | |
| var inputBoxMin = parseInt($("#" + window.containerID).find(".perkCustomDonationAmount").attr("min"), 10); | |
| if (parseInt($("#" + inputBoxId).val(), 10) < inputBoxMin) { | |
| $("#" + inputBoxId).val(inputBoxMin); | |
| } | |
| if (window.perkButtonEnd == false) { | |
| window.amount = $("#" + window.containerID).find(".perkCustomDonationAmount").val(); | |
| window.amountCents = window.amount * 100; | |
| window.perkCode = $("#" + window.containerID).attr("name"); | |
| handler.open({ | |
| name: '@noesunaescuela', | |
| description: window.crowdfundingStats[window.perkCode].description, | |
| amount: window.amountCents | |
| }); | |
| } else if (window.perkButtonEnd == true) { | |
| perkBlocksReset(window.containerID); | |
| window.perkButtonEnd = false; | |
| } | |
| }); | |
| //When clicking on perk selection | |
| $(".perkRadio").click(function(e) { | |
| $(".perkSend").hide(); | |
| $(".perkPostFlight").hide(); | |
| $(".perkCustomButton").hide(); | |
| $(".perkBody").css("border-bottom", "none"); | |
| window.containerID = e.currentTarget.attributes._parent.value; | |
| $("#" + window.containerID).siblings().css("border", "none"); | |
| $("#" + window.containerID).siblings().css("box-shadow", "none"); | |
| $("#" + window.containerID).css("border", "2px solid #AB0096"); | |
| $("#" + window.containerID).css("box-shadow", "2px 2px 8px 1px #766896"); | |
| $("#" + window.containerID).find(".perkCustomDonationAmount").on('input', function() { | |
| var amount = $(this).val(); | |
| }); | |
| window.amount = $("#" + window.containerID).find(".perkCustomDonationAmount").val(); | |
| $(".perkContenedor").css("height", "auto"); | |
| $("#" + window.containerID).find(".perkCustomButton").html("Continuar"); | |
| $("#" + window.containerID).find(".perkBody").css("border-bottom", "dashed 1px lightgrey"); | |
| $("#" + window.containerID).find(".perkCustomDonationAmount").css("display", "block"); | |
| $("#" + window.containerID).find(".perkCustomButton").show(); | |
| $("#" + window.containerID).find(".perkCustomDonationAmount").show(); | |
| $("#" + window.containerID).find(".perkSend").show(); | |
| $("#" + window.containerID).find(".perkPreFlight").show(); | |
| }); | |
| //Resets perk with ID blocks to the initial state | |
| function perkBlocksReset(id) { | |
| $("#" + id).find(".perkCustomDonationAmount").hide(); | |
| $("#" + id).find(".perkPostFlight").hide(); | |
| $("#" + id).find(".perkCustomButton").hide(); | |
| $("#" + id).find(".perkBody").css("border-bottom", "none"); | |
| $("#" + id).find(".perkToggle").css("pointer-events", "none"); | |
| } | |
| // Close Checkout on page navigation | |
| $(window).on('popstate', function() { | |
| handler.close(); | |
| }); | |
| //checks if user has closed stripe window before submit | |
| $(document).on("DOMNodeRemoved", ".stripe_checkout_app", close); | |
| //</script> | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment