@getchange/change-drop-in - npm Package Compare versions

Comparing version 1.0.2 to 1.0.3

dist/change-donation-form.min.js

@@ -33,2 +33,2 @@ import{b as t,r as e,n as o,s as i,$ as r,y as n}from"./query-assigned-elements-1579f20e.js";
  */
-const d=(t=>(...e)=>({_$litDirective$:t,values:e}))(class extends class{constructor(t){}get _$AU(){return this._$AM._$AU}_$AT(t,e,o){this._$Ct=t,this._$AM=e,this._$Ci=o}_$AS(t,e){return this.update(t,e)}update(t,e){return this.render(...e)}}{constructor(t){var e;if(super(t),t.type!==u||"class"!==t.name||(null===(e=t.strings)||void 0===e?void 0:e.length)>2)throw Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.")}render(t){return" "+Object.keys(t).filter((e=>t[e])).join(" ")+" "}update(e,[o]){var i,r;if(void 0===this.et){this.et=new Set,void 0!==e.strings&&(this.st=new Set(e.strings.join(" ").split(/\s/).filter((t=>""!==t))));for(const t in o)o[t]&&!(null===(i=this.st)||void 0===i?void 0:i.has(t))&&this.et.add(t);return this.render(o)}const n=e.element.classList;this.et.forEach((t=>{t in o||(n.remove(t),this.et.delete(t))}));for(const t in o){const e=!!o[t];e===this.et.has(t)||(null===(r=this.st)||void 0===r?void 0:r.has(t))||(e?(n.add(t),this.et.add(t)):(n.remove(t),this.et.delete(t)))}return t}});var p=function(t,e,o,i){var r,n=arguments.length,a=n<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(t,e,o,i);else for(var s=t.length-1;s>=0;s--)(r=t[s])&&(a=(n<3?r(a):n>3?r(e,o,a):r(e,o))||a);return n>3&&a&&Object.defineProperty(e,o,a),a};let m=class extends i{constructor(){super(...arguments),this.quickAmounts=[10,20,50],this.formValid=!1,this.state="form",this.VERSION="1.0.2",this.settings=this.fetchSettings()}render(){return r`<form @submit="${t=>this.handleSubmit(t)}"><h1>Make a donation</h1><div id="amount-buttons">${this.quickAmounts.map(((t,e)=>r`<button type="button" @click="${()=>this.handleQuickAmountClick(e)}" class="amount-button ${d({selected:e===this.selectedQuickAmount})}">$${t}</button>`))}</div><div class="input-container"><input placeholder="Custom amount" @input="${()=>this.handleCustomAmountInput()}" name="custom-amount" type="number"> <span class="input-prefix">$</span></div><input placeholder="First name" autocomplete="given-name" @input="${()=>this.checkFormValidity()}" name="first-name" required minlength="1"> <input placeholder="Last name" autocomplete="family-name" @input="${()=>this.checkFormValidity()}" name="last-name" required minlength="1"> <button id="coinbase" type="submit" ?disabled="${!this.formValid||"loading"==this.state||"paying"==this.state}" @click="${()=>this.handleCoinbaseClick()}">${this.coinbaseButtonText()}</button></form><div id="powered-by-container"><span>powered by</span><img src="https://d2m0e1zy3fwxmp.cloudfront.net/change-logo.svg"></div>`}firstUpdated(){this.applySettings()}async fetchSettings(){return fetch(`https://api.getchange.io/api/v1/drop_in/donation_form/settings?component_version=${this.VERSION}`).then((t=>t.json())).catch((()=>({})))}async applySettings(){await this.settings}coinbaseButtonText(){switch(this.state){case"form":return"Continue with Coinbase";case"loading":return n`<svg height="12" viewBox="0 0 400 150" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="100" r="50" fill="white"/><circle cx="200" cy="100" r="50" fill="white"/><circle cx="350" cy="100" r="50" fill="white"/></svg>`;case"paying":return"Pay in new tab"}}get amount(){return void 0!==this.selectedQuickAmount?this.quickAmounts[this.selectedQuickAmount]:Number(this.customAmountInput.value)}handleQuickAmountClick(t){this.selectedQuickAmount=t,this.customAmountInput.value="",this.checkFormValidity()}handleCustomAmountInput(){this.selectedQuickAmount=void 0,this.checkFormValidity()}handleSubmit(t){console.log("submit"),t.preventDefault(),this.formValid&&this.submitForm()}handleCoinbaseClick(){this.submitForm()}async submitForm(){void 0!==this.nonprofitId&&void 0!==this.publicKey&&(this.state="loading",async function(t,e,o,i,r){return fetch("https://api.getchange.io/api/v1/payments/crypto_checkout_link",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({amount:t,nonprofit_id:e,public_key:r,metadata:{first_name:o,last_name:i}})}).then((t=>t.json())).then((t=>t.checkout_url))}(this.amount/100,this.nonprofitId,this.firstNameInput.value,this.lastNameInput.value,this.publicKey).then((t=>{window.open(t,"_blank"),this.state="paying"})).catch((()=>{this.state="form"})))}checkFormValidity(){const t=this.amount>0,e=this.firstNameInput.validity.valid&&this.lastNameInput.validity.valid;this.formValid=t&&e}};m.styles=e`:host{--color:black;--background-color:#f7f9fa;--color-primary:white;--color-disabled:#fff;--background-color-primary:#1da1f2;--background-color-primary-hover:#43b2f7;--background-color-disabled:#ccc;--input-border-color:#ddd;--input-border-radius:0.3em;--input-color:black;--input-background-color:white;--input-background-color-hover:#f5f5f5;--input-color-hover:#f7f7f7;--input-placeholder-color:#999;display:block;font-family:sans-serif;background-color:var(--background-color);max-width:400px}form{color:var(--color);display:flex;flex-direction:column;align-items:center;padding:1.5em}form>*{width:100%;max-width:100%}form>:not(:last-child){margin-bottom:.8em}h1{margin:.5em 0;font-size:1.5em;text-align:center}button{transition:all .1s ease-out}input{color:var(--input-color);background:var(--input-background-color)}input::placeholder{color:var(--input-placeholder-color)}#amount-buttons{display:flex}.amount-button{flex:1;border-radius:0;padding:.8em .6em;font-weight:700;border:1px solid var(--input-border-color);color:var(--input-color);background:var(--input-background-color);border-right:none}.amount-button:hover{background-color:var(--input-background-color-hover)}.amount-button:first-of-type{border-top-left-radius:var(--input-border-radius);border-bottom-left-radius:var(--input-border-radius)}.amount-button:last-of-type{border-top-right-radius:var(--input-border-radius);border-bottom-right-radius:var(--input-border-radius);border-right:1px solid var(--input-border-color)}.amount-button.selected{background-color:var(--background-color-primary);color:var(--color-primary)}input[name=custom-amount]{padding-left:2em}.input-container{position:relative}.input-container input{width:100%}.input-prefix{display:flex;content:"$";position:absolute;height:100%;top:-.04em;left:1em;align-items:center;color:var(--input-placeholder-color)}button#coinbase{background-color:var(--background-color-primary);color:var(--color-primary);border-radius:999em;padding:.9em 1.1em;font-weight:700;max-width:17em}button#coinbase:hover:not(:active){background-color:var(--background-color-primary-hover)}input{padding:.8em .6em .8em 1em;border:1px solid var(--input-border-color);border-radius:var(--input-border-radius)}button[disabled]{background-color:var(--background-color-disabled)!important;color:var(--color-disabled)!important;cursor:not-allowed}#powered-by-container{display:flex;align-items:center;justify-content:center;background-color:rgba(255,255,255,.5);color:var(--color);font-size:.8em;padding:1em;margin-top:.5em}#powered-by-container span{opacity:.5}#powered-by-container img{height:1em;margin-left:.4em}circle{animation-name:bounce;animation-duration:1s;animation-iteration-count:infinite}circle:nth-of-type(2){animation-delay:.1s}circle:nth-of-type(3){animation-delay:.2s}@keyframes bounce{0%{transform:translateY(0)}20%{transform:translateY(-50px)}40%{transform:translateY(0)}}button{cursor:pointer;border:none}button,input{font-size:1em;font-family:inherit}*{box-sizing:border-box}`,p([s({type:String,attribute:"nonprofit-id"})],m.prototype,"nonprofitId",void 0),p([s({type:String,attribute:"public-key"})],m.prototype,"publicKey",void 0),p([c()],m.prototype,"selectedQuickAmount",void 0),p([c()],m.prototype,"formValid",void 0),p([c()],m.prototype,"state",void 0),p([l("input[name=custom-amount]")],m.prototype,"customAmountInput",void 0),p([l("input[name=first-name]")],m.prototype,"firstNameInput",void 0),p([l("input[name=last-name]")],m.prototype,"lastNameInput",void 0),m=p([o("change-donation-form")],m);export{m as ChangeDonationForm};
+const d=(t=>(...e)=>({_$litDirective$:t,values:e}))(class extends class{constructor(t){}get _$AU(){return this._$AM._$AU}_$AT(t,e,o){this._$Ct=t,this._$AM=e,this._$Ci=o}_$AS(t,e){return this.update(t,e)}update(t,e){return this.render(...e)}}{constructor(t){var e;if(super(t),t.type!==u||"class"!==t.name||(null===(e=t.strings)||void 0===e?void 0:e.length)>2)throw Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.")}render(t){return" "+Object.keys(t).filter((e=>t[e])).join(" ")+" "}update(e,[o]){var i,r;if(void 0===this.et){this.et=new Set,void 0!==e.strings&&(this.st=new Set(e.strings.join(" ").split(/\s/).filter((t=>""!==t))));for(const t in o)o[t]&&!(null===(i=this.st)||void 0===i?void 0:i.has(t))&&this.et.add(t);return this.render(o)}const n=e.element.classList;this.et.forEach((t=>{t in o||(n.remove(t),this.et.delete(t))}));for(const t in o){const e=!!o[t];e===this.et.has(t)||(null===(r=this.st)||void 0===r?void 0:r.has(t))||(e?(n.add(t),this.et.add(t)):(n.remove(t),this.et.delete(t)))}return t}});var p=function(t,e,o,i){var r,n=arguments.length,a=n<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(t,e,o,i);else for(var s=t.length-1;s>=0;s--)(r=t[s])&&(a=(n<3?r(a):n>3?r(e,o,a):r(e,o))||a);return n>3&&a&&Object.defineProperty(e,o,a),a};let m=class extends i{constructor(){super(...arguments),this.quickAmounts=[10,20,50],this.formValid=!1,this.state="form",this.VERSION="1.0.3",this.settings=this.fetchSettings()}render(){return r`<form @submit="${t=>this.handleSubmit(t)}"><h1>Make a donation</h1><div id="amount-buttons">${this.quickAmounts.map(((t,e)=>r`<button type="button" @click="${()=>this.handleQuickAmountClick(e)}" class="amount-button ${d({selected:e===this.selectedQuickAmount})}">$${t}</button>`))}</div><div class="input-container"><input placeholder="Custom amount" @input="${()=>this.handleCustomAmountInput()}" name="custom-amount" type="number"> <span class="input-prefix">$</span></div><input placeholder="First name" autocomplete="given-name" @input="${()=>this.checkFormValidity()}" name="first-name" required minlength="1"> <input placeholder="Last name" autocomplete="family-name" @input="${()=>this.checkFormValidity()}" name="last-name" required minlength="1"> <button id="coinbase" type="submit" ?disabled="${!this.formValid||"loading"==this.state||"paying"==this.state}" @click="${()=>this.handleCoinbaseClick()}">${this.coinbaseButtonText()}</button></form><div id="powered-by-container"><span>powered by</span><img src="https://d2m0e1zy3fwxmp.cloudfront.net/change-logo.svg"></div>`}firstUpdated(){this.applySettings()}async fetchSettings(){return fetch(`https://api.getchange.io/api/v1/drop_in/donation_form/settings?component_version=${this.VERSION}`).then((t=>t.json())).catch((()=>({})))}async applySettings(){await this.settings}coinbaseButtonText(){switch(this.state){case"form":return"Continue with Coinbase";case"loading":return n`<svg height="12" viewBox="0 0 400 150" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="100" r="50" fill="white"/><circle cx="200" cy="100" r="50" fill="white"/><circle cx="350" cy="100" r="50" fill="white"/></svg>`;case"paying":return"Pay in new tab"}}get amount(){return void 0!==this.selectedQuickAmount?this.quickAmounts[this.selectedQuickAmount]:Number(this.customAmountInput.value)}handleQuickAmountClick(t){this.selectedQuickAmount=t,this.customAmountInput.value="",this.checkFormValidity()}handleCustomAmountInput(){this.selectedQuickAmount=void 0,this.checkFormValidity()}handleSubmit(t){console.log("submit"),t.preventDefault(),this.formValid&&this.submitForm()}handleCoinbaseClick(){this.submitForm()}async submitForm(){void 0!==this.nonprofitId&&void 0!==this.publicKey&&(this.state="loading",async function(t,e,o,i,r){return fetch("https://api.getchange.io/api/v1/payments/crypto_checkout_link",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({amount:t,nonprofit_id:e,public_key:r,metadata:{first_name:o,last_name:i}})}).then((t=>t.json())).then((t=>t.checkout_url))}(this.amount/100,this.nonprofitId,this.firstNameInput.value,this.lastNameInput.value,this.publicKey).then((t=>{window.open(t,"_blank"),this.state="paying"})).catch((()=>{this.state="form"})))}checkFormValidity(){const t=this.amount>0,e=this.firstNameInput.validity.valid&&this.lastNameInput.validity.valid;this.formValid=t&&e}};m.styles=e`:host{--color:black;--background-color:#f7f9fa;--color-primary:white;--color-disabled:#fff;--background-color-primary:#1da1f2;--background-color-primary-hover:#43b2f7;--background-color-disabled:#ccc;--input-border-color:#ddd;--input-border-radius:0.3em;--input-color:black;--input-background-color:white;--input-background-color-hover:#f5f5f5;--input-color-hover:#f7f7f7;--input-placeholder-color:#999;display:block;font-family:sans-serif;background-color:var(--background-color);max-width:400px}form{color:var(--color);display:flex;flex-direction:column;align-items:center;padding:1.5em}form>*{width:100%;max-width:100%}form>:not(:last-child){margin-bottom:.8em}h1{margin:.5em 0;font-size:1.5em;text-align:center}button{transition:all .1s ease-out}input{color:var(--input-color);background:var(--input-background-color)}input::placeholder{color:var(--input-placeholder-color)}#amount-buttons{display:flex}.amount-button{flex:1;border-radius:0;padding:.8em .6em;font-weight:700;border:1px solid var(--input-border-color);color:var(--input-color);background:var(--input-background-color);border-right:none}.amount-button:hover{background-color:var(--input-background-color-hover)}.amount-button:first-of-type{border-top-left-radius:var(--input-border-radius);border-bottom-left-radius:var(--input-border-radius)}.amount-button:last-of-type{border-top-right-radius:var(--input-border-radius);border-bottom-right-radius:var(--input-border-radius);border-right:1px solid var(--input-border-color)}.amount-button.selected{background-color:var(--background-color-primary);color:var(--color-primary)}input[name=custom-amount]{padding-left:2em}.input-container{position:relative}.input-container input{width:100%}.input-prefix{display:flex;content:"$";position:absolute;height:100%;top:-.04em;left:1em;align-items:center;color:var(--input-placeholder-color)}button#coinbase{background-color:var(--background-color-primary);color:var(--color-primary);border-radius:999em;padding:.9em 1.1em;font-weight:700;max-width:17em}button#coinbase:hover:not(:active){background-color:var(--background-color-primary-hover)}input{padding:.8em .6em .8em 1em;border:1px solid var(--input-border-color);border-radius:var(--input-border-radius)}button[disabled]{background-color:var(--background-color-disabled)!important;color:var(--color-disabled)!important;cursor:not-allowed}#powered-by-container{display:flex;align-items:center;justify-content:center;background-color:rgba(255,255,255,.5);color:var(--color);font-size:.8em;padding:1em;margin-top:.5em}#powered-by-container span{opacity:.5}#powered-by-container img{height:1em;margin-left:.4em}circle{animation-name:bounce;animation-duration:1s;animation-iteration-count:infinite}circle:nth-of-type(2){animation-delay:.1s}circle:nth-of-type(3){animation-delay:.2s}@keyframes bounce{0%{transform:translateY(0)}20%{transform:translateY(-50px)}40%{transform:translateY(0)}}button{cursor:pointer;border:none}button,input{font-size:1em;font-family:inherit}*{box-sizing:border-box}`,p([s({type:String,attribute:"nonprofit-id"})],m.prototype,"nonprofitId",void 0),p([s({type:String,attribute:"public-key"})],m.prototype,"publicKey",void 0),p([c()],m.prototype,"selectedQuickAmount",void 0),p([c()],m.prototype,"formValid",void 0),p([c()],m.prototype,"state",void 0),p([l("input[name=custom-amount]")],m.prototype,"customAmountInput",void 0),p([l("input[name=first-name]")],m.prototype,"firstNameInput",void 0),p([l("input[name=last-name]")],m.prototype,"lastNameInput",void 0),m=p([o("change-donation-form")],m);export{m as ChangeDonationForm};

dist/change-drop-in.min.js

@@ -1,1 +0,1 @@
-import{n as e,s as t,$ as r}from"./query-assigned-elements-1579f20e.js";var n=function(e,t,r,n){var o,c=arguments.length,f=c<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,r):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)f=Reflect.decorate(e,t,r,n);else for(var l=e.length-1;l>=0;l--)(o=e[l])&&(f=(c<3?o(f):c>3?o(t,r,f):o(t,r))||f);return c>3&&f&&Object.defineProperty(t,r,f),f};let o=class extends t{render(){return r`hi`}};o=n([e("change-drop-in")],o);export{o as ChangeDropIn};
+import{n as e,s as t,$ as r}from"./query-assigned-elements-1579f20e.js";var n=function(e,t,r,n){var o,c=arguments.length,f=c<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,r):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)f=Reflect.decorate(e,t,r,n);else for(var l=e.length-1;l>=0;l--)(o=e[l])&&(f=(c<3?o(f):c>3?o(t,r,f):o(t,r))||f);return c>3&&f&&Object.defineProperty(t,r,f),f};let o=class extends t{render(){return r`Coming soon!`}};o=n([e("change-drop-in")],o);export{o as ChangeDropIn};

package.json

 {
   "name": "@getchange/change-drop-in",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "UI element that lets users donate crypto",
@@ -20,3 +20,4 @@ "type": "module",
     "README.md",
-    "package.json"
+    "package.json",
+    "images"
   ],
@@ -23,0 +24,0 @@ "author": "@straversi",

README.md

@@ -7,5 +7,7 @@ # change-drop-in
 
+A component for accepting crypto donations for a nonprofit. It weighs < 10 KB gzipped.
+
 ### Quick Start
 
-Add the following code to your page.
+Add the following HTML to your page:
 
@@ -12,0 +14,0 @@ ```html

src/change-donation-form.ts

@@ -21,3 +21,3 @@ import { LitElement, html, css, svg } from "lit";
 
-  VERSION = "1.0.2";
+  VERSION = "1.0.3";
 
@@ -24,0 +24,0 @@ settings = this.fetchSettings();

src/change-drop-in.ts

@@ -7,4 +7,4 @@ import { LitElement, html } from "lit";
   render() {
-    return html`hi`;
+    return html`Coming soon!`;
   }
 }

No alert changes

Improved metrics

Total package byte prevSize

173305

increased by325.02%

Number of package files

9

increased by28.57%

Number of lines in readme file

67

increased by3.08%

No dependency changes