@test-glide/glide-payment 0.0.2 → 0.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +233 -0
- package/dist/index.cjs.js +9 -9
- package/dist/index.es.js +153 -153
- package/dist/index.umd.js +9 -9
- package/dist/react/react.cjs.js +9 -9
- package/dist/react/react.es.js +147 -145
- package/package.json +1 -1
package/dist/index.umd.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
(function(M,c){typeof exports=="object"&&typeof module<"u"?c(exports):typeof define=="function"&&define.amd?define(["exports"],c):(M=typeof globalThis<"u"?globalThis:M||self,c(M.BivoPayments={}))})(this,(function(M){"use strict";function c(n,e={}){const t=document.createElement(n),{className:l,id:
|
|
1
|
+
(function(M,c){typeof exports=="object"&&typeof module<"u"?c(exports):typeof define=="function"&&define.amd?define(["exports"],c):(M=typeof globalThis<"u"?globalThis:M||self,c(M.BivoPayments={}))})(this,(function(M){"use strict";function c(n,e={}){const t=document.createElement(n),{className:l,id:i,innerHTML:h,textContent:a,attributes:d,styles:p,dataset:s,children:r,events:m}=e;if(l){const u=Array.isArray(l)?l:l.split(" ");t.classList.add(...u.filter(Boolean))}if(i&&(t.id=i),h&&(t.innerHTML=h),a&&(t.textContent=a),d)for(const[u,o]of Object.entries(d))o&&t.setAttribute(u,o);if(p)for(const[u,o]of Object.entries(p))t.style[u]=o;if(s)for(const[u,o]of Object.entries(s))t.dataset[u]=o;if(r&&t.append(...r.filter(Boolean)),m)for(const[u,o]of Object.entries(m))t.addEventListener(u,o);return t}function N(n,e){const t="id"in n?[document.getElementById(n.id)].filter(Boolean):"className"in n?Array.from(document.getElementsByClassName(n.className)):[n.element];if(!t.length){console.warn("updateElements: no elements found for",n);return}for(const l of t){const{styles:i,attributes:h,dataset:a,innerHTML:d,textContent:p,className:s}=e;if(i)for(const[r,m]of Object.entries(i))l.style[r]=m;if(h)for(const[r,m]of Object.entries(h))l.setAttribute(r,m);if(a)for(const[r,m]of Object.entries(a))l.dataset[r]=m;if(d!==void 0&&(l.innerHTML=d),p!==void 0&&(l.textContent=p),s?.add){const r=Array.isArray(s.add)?s.add:[s.add];l.classList.add(...r)}if(s?.remove){const r=Array.isArray(s.remove)?s.remove:[s.remove];l.classList.remove(...r)}s?.toggle&&(Array.isArray(s.toggle)?s.toggle:[s.toggle]).forEach(m=>l.classList.toggle(m))}}const P=`
|
|
2
2
|
<svg
|
|
3
3
|
xmlns="http://www.w3.org/2000/svg"
|
|
4
4
|
width="16"
|
|
@@ -45,28 +45,28 @@
|
|
|
45
45
|
></path>
|
|
46
46
|
</svg>`,L=`
|
|
47
47
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256"><path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm16-40a8,8,0,0,1-8,8,16,16,0,0,1-16-16V128a8,8,0,0,1,0-16,16,16,0,0,1,16,16v40A8,8,0,0,1,144,176ZM112,84a12,12,0,1,1,12,12A12,12,0,0,1,112,84Z"></path></svg>
|
|
48
|
-
`,q=({children:n,onClick:e,disabled:t=!1,size:l="medium",type:
|
|
48
|
+
`,q=({children:n,onClick:e,disabled:t=!1,size:l="medium",type:i="button",className:h="",variant:a="primary"})=>{const d=c("span",{className:"button-spinner",innerHTML:Z,dataset:{show:"false"}}),p=c("span",{className:"button-label",children:[null],textContent:n}),s=c("button",{className:`custom-button ${a} ${l} ${h}`,attributes:{type:i,...t?{disabled:"true"}:{}},events:{click:e},children:[d,p]}),r=(u=!1)=>{N({element:d},{dataset:{show:String(u)}}),m(u)},m=(u=!1)=>{u?s.setAttribute("disabled","true"):s.removeAttribute("disabled")};return{element:s,setLoading:r,setDisabled:m}},R=({content:n,position:e="top",delay:t=200,maxWidth:l=250,className:i="",id:h=""})=>{var a=c("div",{className:`tooltip ${e} ${i}`,styles:{maxWidth:`${l}px`},attributes:{role:"tooltip"},dataset:{show:"false"},innerHTML:`
|
|
49
49
|
<div class="tooltip-content">${n}</div>
|
|
50
50
|
<div class="tooltip-arrow"></div>
|
|
51
|
-
`});let d=null;var
|
|
51
|
+
`});let d=null;var r=c("span",{className:"tooltip-trigger",innerHTML:L,events:{mouseenter:()=>{t>0?d=window.setTimeout(()=>{a.dataset.show="true",m()},t):(a.dataset.show="true",m())},mouseleave:()=>{d&&clearTimeout(d),a.dataset.show="false"}}});function m(){if(!r||!a)return;const o=r.getBoundingClientRect(),v=a.getBoundingClientRect(),y=8;let w,g;switch(e){case"top":w=o.top-v.height-y,g=o.left+o.width/2-v.width/2;break;case"bottom":w=o.bottom+y,g=o.left+o.width/2-v.width/2;break;case"left":w=o.top+o.height/2-v.height/2,g=o.left-v.width-y;break;case"right":w=o.top+o.height/2-v.height/2,g=o.right+y;break;default:w=o.top-v.height-y,g=o.left+o.width/2-v.width/2}const x=window.innerWidth,T=window.innerHeight;g<0&&(g=y),g+v.width>x&&(g=x-v.width-y),w<0&&(w=y),w+v.height>T&&(w=T-v.height-y),a.style.top=`${w}px`,a.style.left=`${g}px`}return c("div",{className:"tooltip-wrapper",id:`tooltip-${h}`,children:[r,a]})},_=n=>{const e={},t=Object.values(n).every(i=>!i||i.trim()===""),l=n.cardNumber?.replace(/\s/g,"");if(l?/^\d{13,19}$/.test(l)||(e.cardNumber="Card number must be 13-19 digits"):e.cardNumber="Card number is required",!n.expiryDate)e.expiryDate="Expiry date is required";else{const i=n.expiryDate.replace(/\D/g,"");if(i.length<4)e.expiryDate="Enter complete expiry date (MM/YY)";else{const h=parseInt(i.substring(0,2),10),a=parseInt(i.substring(2,4),10);if(isNaN(h)||h<1||h>12)e.expiryDate="Invalid month (must be 01-12)";else if(isNaN(a)||a<0||a>99)e.expiryDate="Invalid year";else{const d=new Date,p=d.getFullYear(),s=d.getMonth()+1,r=Math.floor(p/100)*100,m=r+a,u=r+100+a;let o;m>=p&&m<=p+20?o=m:(u>=p&&u<=p+20,o=u),o<p||o===p&&h<s?e.expiryDate="Card has expired":o>p+20&&(e.expiryDate="Expiry year is too far in the future")}}}return n.cvv?.trim()?/^\d{3,4}$/.test(n.cvv.trim())||(e.cvv="CVV must be 3 or 4 digits"):e.cvv="CVV is required",n.zipCode?.trim()?/^[A-Z0-9\s-]{3,10}$/i.test(n.zipCode.trim())||(e.zipCode="Invalid ZIP code format"):e.zipCode="Postal code is required",{isValid:Object.keys(e).length===0,errors:e,isEmpty:t}};function G(n){const e=parseInt(n,10);if(isNaN(e)||e<0||e>99)return null;const t=new Date().getFullYear(),l=Math.floor(t/100)*100;let i=l+e;return i>=t&&i<=t+20||(i=l+100+e,i>=t&&i<=t+20)?i:l+100+e}function B(n=""){return n.trim().replaceAll(/\s/g,"").replaceAll("-","")}const K={card:n=>n.replace(/\s+/g,"").replace(/[^0-9]/gi,"").substring(0,16).match(/.{1,4}/g)?.join(" ")??"",phone:n=>{const e=n.replace(/\D/g,"").substring(0,10),t=e.match(/^(\d{3})(\d{3})(\d{4})$/);return t?`(${t[1]}) ${t[2]}-${t[3]}`:e},expiry:n=>{const e=n.replace(/\//g,"");return e.substring(0,2)+(n.length>2?"/":"")+e.substring(2,4)},cvv:n=>n.replace(/\D/g,"").substring(0,4),zip:n=>{const e=n.replace(/\D/g,"").substring(0,9);return e.length>5?`${e.substring(0,5)}-${e.substring(5)}`:e}};function U(n,e){return e==="none"?n:K[e](n)}const $=({label:n,maskType:e,id:t,name:l,type:i="text",placeholder:h="Enter value",tooltip:a="",onChange:d})=>{const p=["card","expiry","phone","cvv","zip"].includes(e)?"numeric":"",s=c("label",{className:"input-label",innerHTML:n,attributes:{for:t}});let r=!1;const u=c("input",{id:t||"input-id",className:"styled-input",attributes:{placeholder:h,type:i,inputMode:p,name:l},events:{input:o,blur:v,keydown:b=>{b.key==="Enter"&&(r=!0)}}});function o(b){const k=e!=="none"?U(b?.target?.value,e):b?.target?.value;u.value=k,d?.(k)}function v(){r=!0,d?.(u?.value||"")}const y=c("div",{className:"input-loader",innerHTML:'<div class="loader"></div>',dataset:{show:"false"}}),w=a?c("div",{className:"input-right-element",children:[R({content:a,id:t})]}):null,g=c("div",{className:"input-wrapper",children:[u,y,w]}),x=c("div",{className:"error-message",dataset:{show:"false"},innerHTML:`
|
|
52
52
|
${L}
|
|
53
53
|
<span></span>
|
|
54
|
-
`});return{element:c("div",{className:"custom-input-group",children:[
|
|
54
|
+
`});return{element:c("div",{className:"custom-input-group",children:[s,g,x]}),setLoading:b=>{N({element:g},{dataset:{loading:b?"true":"false"}}),N({element:u},{attributes:{disabled:b?"true":"false"}}),N({element:y},{dataset:{show:b?"true":"false"}})},setError:(b="")=>{N({element:g},{className:b&&r?{add:"input-error"}:{remove:"input-error"}}),N({element:x},{dataset:{show:b&&r?"true":"false"},innerHTML:`
|
|
55
55
|
${L}
|
|
56
56
|
<span>${b||""}</span>
|
|
57
|
-
`})}}},J=async(n,e={})=>{const{method:t="GET",headers:l={},body:
|
|
57
|
+
`})}}},J=async(n,e={})=>{const{method:t="GET",headers:l={},body:i=null,...h}=e;try{const a={method:t,headers:{Accept:"*/*","Content-Type":"application/json",...l},...h};i&&["POST","PUT","PATCH","DELETE"].includes(t.toUpperCase())&&(a.body=typeof i=="string"?i:JSON.stringify(i));const d=await fetch(n,a),p=d.headers.get("content-type");let s;if(p?.includes("application/json")?s=await d.json():s=await d.text(),!d.ok){const r=s;throw new Error(r?.message||`HTTP error! status: ${d.status}`)}return{data:s,error:null}}catch(a){return{data:null,error:a instanceof Error?a.message:"An error occurred"}}},Q=({title:n="",children:e,onClose:t,showBackBtn:l=!1,showCloseBtn:i=!0})=>{const h=c("button",{className:"back-btn",innerHTML:W,dataset:{show:String(l)},events:{click:()=>m()}}),a=c("h3",{textContent:n}),d=c("button",{className:"close-btn",innerHTML:"×",dataset:{show:String(i)},attributes:{"aria-label":"Close modal"},events:{click:()=>m()}}),p=c("div",{className:"modal-header",children:[h,a,d]}),s=c("div",{className:"modal-content",children:[e]}),r=c("dialog",{className:"custom-modal",children:[p,s],events:{cancel:o=>{o.preventDefault(),m()}}}),m=()=>{r.close(),t?.()};return{element:r,setModalVisibility:o=>{o?r.showModal():r.close()}}},X=({token:n,endpoint:e,beneficiaryCard:t=!1,isModal:l=!1,onCallback:i=()=>null})=>{const h=t?"Enter Recipient Debit Card Details":"Enter Your Debit Card Details",a=t?"Enter the debit card details of the recipient you're sending funds to.":"Linking an external account allows you to send and receive money to your account.",d=t?"Debit Card Number":"Your Debit Card Number",p=t?"Enter recipient's card number":"Enter your card number",s=`add-card-form-wrapper${t?" recipient-form":""}`,r={cardNumber:"",expiryDate:"",cvv:"",zipCode:""},{element:m,setError:u}=$({label:d,placeholder:p,id:"card-number-input",name:"cardNumber",maskType:"card",onChange(f){A("cardNumber",f,u)}}),{element:o,setError:v}=$({label:"Expiration Date",placeholder:"MM/YY",id:"expiry-input",name:"expiryDate",maskType:"expiry",onChange(f){A("expiryDate",f,v)}}),{element:y,setError:w}=$({label:"CVV",placeholder:"3-Digit",type:"number",maskType:"cvv",id:"cvv-input",name:"cvv",tooltip:"A CVV is a 3-digit number on your debit card. You can find it on the back side of the card.",onChange(f){A("cvv",f,w)}}),{element:g,setError:x}=$({label:"ZIP Code",placeholder:t?"ZIP Code":"Enter your ZIP Code",id:"zip-input",name:"zipCode",maskType:"zip",onChange(f){A("zipCode",f,x)}}),T=c("div",{className:t?"input-sections":"inputs",children:[m,o,y,g]}),H=c("p",{className:"submit-error",dataset:{show:"false"}}),{element:S,setDisabled:b,setLoading:k}=q({children:"Link Card",type:"submit",disabled:!0}),z=(f="")=>{N({element:H},{dataset:{show:String(!!f)},innerHTML:`
|
|
58
58
|
${L}
|
|
59
59
|
${f||""}
|
|
60
|
-
`})},j=(f=!0)=>{b(f),k(f)};function A(f,I,E){
|
|
61
|
-
<p>${
|
|
60
|
+
`})},j=(f=!0)=>{b(f),k(f)};function A(f,I,E){r[f]=I;const{isValid:V,errors:D}=_(r);D[f]?E(D[f]):E(""),b(!V)}const te=c("div",{className:"submit-button-wrapper",children:[H,S]});async function ne(f){f.preventDefault();const I=new FormData(f.target),E=Object.fromEntries(I.entries());console.log(E);const V=E?.cardNumber,D=E?.expiryDate,ae=E?.cvv,le=E?.zipCode,ce=Number(D?.split("/")[0]),de=G(D?.split("/")[1]),ue=B(V);j(!0),z("");const C=await J(e,{method:"POST",body:{token:n,pan:ue,expiry_month:ce,expiry_year:de,cvv:B(ae),address:{postal_code:B(le)}}});C.error?(console.error("Request failed:",C.error),j(!1),z(C.error),i?.({success:!1,error:C.error})):(console.log("Request success:",C.data),j(!1),i?.({success:!0,data:C.data}))}const se=()=>c("form",{events:{submit:ne},children:[T,te]}),re=()=>c("div",{className:"form-title",innerHTML:`
|
|
61
|
+
<p>${a}</p>
|
|
62
62
|
|
|
63
63
|
<div>
|
|
64
64
|
${P}
|
|
65
65
|
|
|
66
66
|
<span>Secured with 256-bit encryption</span>
|
|
67
67
|
</div>
|
|
68
|
-
`}),Y=()=>c("div",{className:l?"":"non-modal-content",children:[re(),se()]}),oe=l?null:c("div",{className:`${
|
|
68
|
+
`}),Y=()=>c("div",{className:l?"":"non-modal-content",children:[re(),se()]}),oe=l?null:c("div",{className:`${s} non-modal`,children:[c("div",{className:"non-modal-header",innerHTML:`
|
|
69
69
|
<span></span>
|
|
70
70
|
<h3>${h}</h3>
|
|
71
71
|
<span></span>
|
|
72
|
-
`}),Y()]}),{element:F,setModalVisibility:O}=l?Q({title:h,children:Y()}):{element:null,setModalVisibility:()=>{}};function ie(){F&&(document.body.appendChild(c("div",{className:
|
|
72
|
+
`}),Y()]}),{element:F,setModalVisibility:O}=l?Q({title:h,children:Y()}):{element:null,setModalVisibility:()=>{}};function ie(){F&&(document.body.appendChild(c("div",{className:s,children:[F]})),O(!0))}return{renderFormWithModal:ie,nonModalForm:oe,closeModal:()=>O(!1)}};function ee({token:n,endpoint:e,beneficiaryCard:t,isModal:l,onCallback:i,onModalClose:h}){const{renderFormWithModal:a,nonModalForm:d,closeModal:p}=X({token:n,endpoint:e,beneficiaryCard:t,isModal:l,onCallback:i});return{mount(s){const r="className"in s?document.querySelector(s.className):"id"in s?document.getElementById(s.id):s.element;r&&d&&r.appendChild(d)},open(){a()},destroy(){p(),h?.()}}}M.init=ee,Object.defineProperty(M,Symbol.toStringTag,{value:"Module"})}));
|
package/dist/react/react.cjs.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const X=require("react/jsx-runtime"),O=require("react");function p(n,e={}){const t=document.createElement(n),{className:
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const X=require("react/jsx-runtime"),O=require("react");function p(n,e={}){const t=document.createElement(n),{className:a,id:r,innerHTML:m,textContent:i,attributes:c,styles:d,dataset:s,children:o,events:h}=e;if(a){const u=Array.isArray(a)?a:a.split(" ");t.classList.add(...u.filter(Boolean))}if(r&&(t.id=r),m&&(t.innerHTML=m),i&&(t.textContent=i),c)for(const[u,l]of Object.entries(c))l&&t.setAttribute(u,l);if(d)for(const[u,l]of Object.entries(d))t.style[u]=l;if(s)for(const[u,l]of Object.entries(s))t.dataset[u]=l;if(o&&t.append(...o.filter(Boolean)),h)for(const[u,l]of Object.entries(h))t.addEventListener(u,l);return t}function x(n,e){const t="id"in n?[document.getElementById(n.id)].filter(Boolean):"className"in n?Array.from(document.getElementsByClassName(n.className)):[n.element];if(!t.length){console.warn("updateElements: no elements found for",n);return}for(const a of t){const{styles:r,attributes:m,dataset:i,innerHTML:c,textContent:d,className:s}=e;if(r)for(const[o,h]of Object.entries(r))a.style[o]=h;if(m)for(const[o,h]of Object.entries(m))a.setAttribute(o,h);if(i)for(const[o,h]of Object.entries(i))a.dataset[o]=h;if(c!==void 0&&(a.innerHTML=c),d!==void 0&&(a.textContent=d),s?.add){const o=Array.isArray(s.add)?s.add:[s.add];a.classList.add(...o)}if(s?.remove){const o=Array.isArray(s.remove)?s.remove:[s.remove];a.classList.remove(...o)}s?.toggle&&(Array.isArray(s.toggle)?s.toggle:[s.toggle]).forEach(h=>a.classList.toggle(h))}}const ee=`
|
|
2
2
|
<svg
|
|
3
3
|
xmlns="http://www.w3.org/2000/svg"
|
|
4
4
|
width="16"
|
|
@@ -45,28 +45,28 @@
|
|
|
45
45
|
></path>
|
|
46
46
|
</svg>`,k=`
|
|
47
47
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256"><path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm16-40a8,8,0,0,1-8,8,16,16,0,0,1-16-16V128a8,8,0,0,1,0-16,16,16,0,0,1,16,16v40A8,8,0,0,1,144,176ZM112,84a12,12,0,1,1,12,12A12,12,0,0,1,112,84Z"></path></svg>
|
|
48
|
-
`,re=({children:n,onClick:e,disabled:t=!1,size:
|
|
48
|
+
`,re=({children:n,onClick:e,disabled:t=!1,size:a="medium",type:r="button",className:m="",variant:i="primary"})=>{const c=p("span",{className:"button-spinner",innerHTML:te,dataset:{show:"false"}}),d=p("span",{className:"button-label",children:[null],textContent:n}),s=p("button",{className:`custom-button ${i} ${a} ${m}`,attributes:{type:r,...t?{disabled:"true"}:{}},events:{click:e},children:[c,d]}),o=(u=!1)=>{x({element:c},{dataset:{show:String(u)}}),h(u)},h=(u=!1)=>{u?s.setAttribute("disabled","true"):s.removeAttribute("disabled")};return{element:s,setLoading:o,setDisabled:h}},se=({content:n,position:e="top",delay:t=200,maxWidth:a=250,className:r="",id:m=""})=>{var i=p("div",{className:`tooltip ${e} ${r}`,styles:{maxWidth:`${a}px`},attributes:{role:"tooltip"},dataset:{show:"false"},innerHTML:`
|
|
49
49
|
<div class="tooltip-content">${n}</div>
|
|
50
50
|
<div class="tooltip-arrow"></div>
|
|
51
|
-
`});let c=null;var
|
|
51
|
+
`});let c=null;var o=p("span",{className:"tooltip-trigger",innerHTML:k,events:{mouseenter:()=>{t>0?c=window.setTimeout(()=>{i.dataset.show="true",h()},t):(i.dataset.show="true",h())},mouseleave:()=>{c&&clearTimeout(c),i.dataset.show="false"}}});function h(){if(!o||!i)return;const l=o.getBoundingClientRect(),v=i.getBoundingClientRect(),y=8;let w,g;switch(e){case"top":w=l.top-v.height-y,g=l.left+l.width/2-v.width/2;break;case"bottom":w=l.bottom+y,g=l.left+l.width/2-v.width/2;break;case"left":w=l.top+l.height/2-v.height/2,g=l.left-v.width-y;break;case"right":w=l.top+l.height/2-v.height/2,g=l.right+y;break;default:w=l.top-v.height-y,g=l.left+l.width/2-v.width/2}const N=window.innerWidth,M=window.innerHeight;g<0&&(g=y),g+v.width>N&&(g=N-v.width-y),w<0&&(w=y),w+v.height>M&&(w=M-v.height-y),i.style.top=`${w}px`,i.style.left=`${g}px`}return p("div",{className:"tooltip-wrapper",id:`tooltip-${m}`,children:[o,i]})},oe=n=>{const e={},t=Object.values(n).every(r=>!r||r.trim()===""),a=n.cardNumber?.replace(/\s/g,"");if(a?/^\d{13,19}$/.test(a)||(e.cardNumber="Card number must be 13-19 digits"):e.cardNumber="Card number is required",!n.expiryDate)e.expiryDate="Expiry date is required";else{const r=n.expiryDate.replace(/\D/g,"");if(r.length<4)e.expiryDate="Enter complete expiry date (MM/YY)";else{const m=parseInt(r.substring(0,2),10),i=parseInt(r.substring(2,4),10);if(isNaN(m)||m<1||m>12)e.expiryDate="Invalid month (must be 01-12)";else if(isNaN(i)||i<0||i>99)e.expiryDate="Invalid year";else{const c=new Date,d=c.getFullYear(),s=c.getMonth()+1,o=Math.floor(d/100)*100,h=o+i,u=o+100+i;let l;h>=d&&h<=d+20?l=h:(u>=d&&u<=d+20,l=u),l<d||l===d&&m<s?e.expiryDate="Card has expired":l>d+20&&(e.expiryDate="Expiry year is too far in the future")}}}return n.cvv?.trim()?/^\d{3,4}$/.test(n.cvv.trim())||(e.cvv="CVV must be 3 or 4 digits"):e.cvv="CVV is required",n.zipCode?.trim()?/^[A-Z0-9\s-]{3,10}$/i.test(n.zipCode.trim())||(e.zipCode="Invalid ZIP code format"):e.zipCode="Postal code is required",{isValid:Object.keys(e).length===0,errors:e,isEmpty:t}};function ae(n){const e=parseInt(n,10);if(isNaN(e)||e<0||e>99)return null;const t=new Date().getFullYear(),a=Math.floor(t/100)*100;let r=a+e;return r>=t&&r<=t+20||(r=a+100+e,r>=t&&r<=t+20)?r:a+100+e}function I(n=""){return n.trim().replaceAll(/\s/g,"").replaceAll("-","")}const ie={card:n=>n.replace(/\s+/g,"").replace(/[^0-9]/gi,"").substring(0,16).match(/.{1,4}/g)?.join(" ")??"",phone:n=>{const e=n.replace(/\D/g,"").substring(0,10),t=e.match(/^(\d{3})(\d{3})(\d{4})$/);return t?`(${t[1]}) ${t[2]}-${t[3]}`:e},expiry:n=>{const e=n.replace(/\//g,"");return e.substring(0,2)+(n.length>2?"/":"")+e.substring(2,4)},cvv:n=>n.replace(/\D/g,"").substring(0,4),zip:n=>{const e=n.replace(/\D/g,"").substring(0,9);return e.length>5?`${e.substring(0,5)}-${e.substring(5)}`:e}};function le(n,e){return e==="none"?n:ie[e](n)}const $=({label:n,maskType:e,id:t,name:a,type:r="text",placeholder:m="Enter value",tooltip:i="",onChange:c})=>{const d=["card","expiry","phone","cvv","zip"].includes(e)?"numeric":"",s=p("label",{className:"input-label",innerHTML:n,attributes:{for:t}});let o=!1;const u=p("input",{id:t||"input-id",className:"styled-input",attributes:{placeholder:m,type:r,inputMode:d,name:a},events:{input:l,blur:v,keydown:b=>{b.key==="Enter"&&(o=!0)}}});function l(b){const D=e!=="none"?le(b?.target?.value,e):b?.target?.value;u.value=D,c?.(D)}function v(){o=!0,c?.(u?.value||"")}const y=p("div",{className:"input-loader",innerHTML:'<div class="loader"></div>',dataset:{show:"false"}}),w=i?p("div",{className:"input-right-element",children:[se({content:i,id:t})]}):null,g=p("div",{className:"input-wrapper",children:[u,y,w]}),N=p("div",{className:"error-message",dataset:{show:"false"},innerHTML:`
|
|
52
52
|
${k}
|
|
53
53
|
<span></span>
|
|
54
|
-
`});return{element:p("div",{className:"custom-input-group",children:[
|
|
54
|
+
`});return{element:p("div",{className:"custom-input-group",children:[s,g,N]}),setLoading:b=>{x({element:g},{dataset:{loading:b?"true":"false"}}),x({element:u},{attributes:{disabled:b?"true":"false"}}),x({element:y},{dataset:{show:b?"true":"false"}})},setError:(b="")=>{x({element:g},{className:b&&o?{add:"input-error"}:{remove:"input-error"}}),x({element:N},{dataset:{show:b&&o?"true":"false"},innerHTML:`
|
|
55
55
|
${k}
|
|
56
56
|
<span>${b||""}</span>
|
|
57
|
-
`})}}},ce=async(n,e={})=>{const{method:t="GET",headers:
|
|
57
|
+
`})}}},ce=async(n,e={})=>{const{method:t="GET",headers:a={},body:r=null,...m}=e;try{const i={method:t,headers:{Accept:"*/*","Content-Type":"application/json",...a},...m};r&&["POST","PUT","PATCH","DELETE"].includes(t.toUpperCase())&&(i.body=typeof r=="string"?r:JSON.stringify(r));const c=await fetch(n,i),d=c.headers.get("content-type");let s;if(d?.includes("application/json")?s=await c.json():s=await c.text(),!c.ok){const o=s;throw new Error(o?.message||`HTTP error! status: ${c.status}`)}return{data:s,error:null}}catch(i){return{data:null,error:i instanceof Error?i.message:"An error occurred"}}},de=({title:n="",children:e,onClose:t,showBackBtn:a=!1,showCloseBtn:r=!0})=>{const m=p("button",{className:"back-btn",innerHTML:ne,dataset:{show:String(a)},events:{click:()=>h()}}),i=p("h3",{textContent:n}),c=p("button",{className:"close-btn",innerHTML:"×",dataset:{show:String(r)},attributes:{"aria-label":"Close modal"},events:{click:()=>h()}}),d=p("div",{className:"modal-header",children:[m,i,c]}),s=p("div",{className:"modal-content",children:[e]}),o=p("dialog",{className:"custom-modal",children:[d,s],events:{cancel:l=>{l.preventDefault(),h()}}}),h=()=>{o.close(),t?.()};return{element:o,setModalVisibility:l=>{l?o.showModal():o.close()}}},ue=({token:n,endpoint:e,beneficiaryCard:t=!1,isModal:a=!1,onCallback:r=()=>null})=>{const m=t?"Enter Recipient Debit Card Details":"Enter Your Debit Card Details",i=t?"Enter the debit card details of the recipient you're sending funds to.":"Linking an external account allows you to send and receive money to your account.",c=t?"Debit Card Number":"Your Debit Card Number",d=t?"Enter recipient's card number":"Enter your card number",s=`add-card-form-wrapper${t?" recipient-form":""}`,o={cardNumber:"",expiryDate:"",cvv:"",zipCode:""},{element:h,setError:u}=$({label:c,placeholder:d,id:"card-number-input",name:"cardNumber",maskType:"card",onChange(f){L("cardNumber",f,u)}}),{element:l,setError:v}=$({label:"Expiration Date",placeholder:"MM/YY",id:"expiry-input",name:"expiryDate",maskType:"expiry",onChange(f){L("expiryDate",f,v)}}),{element:y,setError:w}=$({label:"CVV",placeholder:"3-Digit",type:"number",maskType:"cvv",id:"cvv-input",name:"cvv",tooltip:"A CVV is a 3-digit number on your debit card. You can find it on the back side of the card.",onChange(f){L("cvv",f,w)}}),{element:g,setError:N}=$({label:"ZIP Code",placeholder:t?"ZIP Code":"Enter your ZIP Code",id:"zip-input",name:"zipCode",maskType:"zip",onChange(f){L("zipCode",f,N)}}),M=p("div",{className:t?"input-sections":"inputs",children:[h,l,y,g]}),A=p("p",{className:"submit-error",dataset:{show:"false"}}),{element:V,setDisabled:b,setLoading:D}=re({children:"Link Card",type:"submit",disabled:!0}),S=(f="")=>{x({element:A},{dataset:{show:String(!!f)},innerHTML:`
|
|
58
58
|
${k}
|
|
59
59
|
${f||""}
|
|
60
|
-
`})},B=(f=!0)=>{b(f),D(f)};function L(f,H,E){
|
|
61
|
-
<p>${
|
|
60
|
+
`})},B=(f=!0)=>{b(f),D(f)};function L(f,H,E){o[f]=H;const{isValid:j,errors:T}=oe(o);T[f]?E(T[f]):E(""),b(!j)}const P=p("div",{className:"submit-button-wrapper",children:[A,V]});async function Z(f){f.preventDefault();const H=new FormData(f.target),E=Object.fromEntries(H.entries());console.log(E);const j=E?.cardNumber,T=E?.expiryDate,G=E?.cvv,K=E?.zipCode,U=Number(T?.split("/")[0]),J=ae(T?.split("/")[1]),Q=I(j);B(!0),S("");const C=await ce(e,{method:"POST",body:{token:n,pan:Q,expiry_month:U,expiry_year:J,cvv:I(G),address:{postal_code:I(K)}}});C.error?(console.error("Request failed:",C.error),B(!1),S(C.error),r?.({success:!1,error:C.error})):(console.log("Request success:",C.data),B(!1),r?.({success:!0,data:C.data}))}const q=()=>p("form",{events:{submit:Z},children:[M,P]}),R=()=>p("div",{className:"form-title",innerHTML:`
|
|
61
|
+
<p>${i}</p>
|
|
62
62
|
|
|
63
63
|
<div>
|
|
64
64
|
${ee}
|
|
65
65
|
|
|
66
66
|
<span>Secured with 256-bit encryption</span>
|
|
67
67
|
</div>
|
|
68
|
-
`}),z=()=>p("div",{className:
|
|
68
|
+
`}),z=()=>p("div",{className:a?"":"non-modal-content",children:[R(),q()]}),W=a?null:p("div",{className:`${s} non-modal`,children:[p("div",{className:"non-modal-header",innerHTML:`
|
|
69
69
|
<span></span>
|
|
70
70
|
<h3>${m}</h3>
|
|
71
71
|
<span></span>
|
|
72
|
-
`}),z()]}),{element:Y,setModalVisibility:F}=
|
|
72
|
+
`}),z()]}),{element:Y,setModalVisibility:F}=a?de({title:m,children:z()}):{element:null,setModalVisibility:()=>{}};function _(){Y&&(document.body.appendChild(p("div",{className:s,children:[Y]})),F(!0))}return{renderFormWithModal:_,nonModalForm:W,closeModal:()=>F(!1)}};function pe({token:n,endpoint:e,beneficiaryCard:t,isModal:a,onCallback:r,onModalClose:m}){const{renderFormWithModal:i,nonModalForm:c,closeModal:d}=ue({token:n,endpoint:e,beneficiaryCard:t,isModal:a,onCallback:r});return{mount(s){const o="className"in s?document.querySelector(s.className):"id"in s?document.getElementById(s.id):s.element;o&&c&&o.appendChild(c)},open(){i()},destroy(){d(),m?.()}}}function me({token:n,endpoint:e,isModal:t=!1,beneficiaryCard:a=!1,isOpen:r=!1,onCallback:m=()=>null,onClose:i=()=>null}){const c=O.useRef(null);return O.useEffect(()=>{let d=pe({token:n,endpoint:e,beneficiaryCard:a,isModal:t,onCallback:m,onModalClose:i});if(t)r?d.open():d.destroy();else{if(!c?.current)return;d.mount({element:c.current})}return()=>{d.destroy()}},[t,n,e,a,r]),t?null:X.jsx("div",{ref:c})}exports.AddCard=me;
|