@test-glide/glide-payment 0.0.3 → 0.0.5
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/dist/index.cjs.js +16 -16
- package/dist/index.es.js +265 -264
- package/dist/index.umd.js +13 -13
- package/dist/native/native.cjs.js +1 -1
- package/dist/native/native.es.js +127 -124
- package/dist/react/react.cjs.js +15 -15
- package/dist/react/react.es.js +264 -263
- package/package.json +1 -1
package/dist/react/react.cjs.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const Q=require("react/jsx-runtime"),O=require("react");function p(t,n={}){const e=document.createElement(t),{className:a,id:i,innerHTML:m,textContent:l,attributes:r,styles:u,dataset:s,children:o,events:d}=n;if(a){const h=Array.isArray(a)?a:a.split(" ");e.classList.add(...h.filter(Boolean))}if(i&&(e.id=i),m&&(e.innerHTML=m),l&&(e.textContent=l),r)for(const[h,c]of Object.entries(r))c&&e.setAttribute(h,c);if(u)for(const[h,c]of Object.entries(u))e.style[h]=c;if(s)for(const[h,c]of Object.entries(s))e.dataset[h]=c;if(o&&e.append(...o.filter(Boolean)),d)for(const[h,c]of Object.entries(d))e.addEventListener(h,c);return e}function C(t,n){const e="id"in t?[document.getElementById(t.id)].filter(Boolean):"className"in t?Array.from(document.getElementsByClassName(t.className)):[t.element];if(!e.length){console.warn("updateElements: no elements found for",t);return}for(const a of e){const{styles:i,attributes:m,dataset:l,innerHTML:r,textContent:u,className:s}=n;if(i)for(const[o,d]of Object.entries(i))a.style[o]=d;if(m)for(const[o,d]of Object.entries(m))a.setAttribute(o,d);if(l)for(const[o,d]of Object.entries(l))a.dataset[o]=d;if(r!==void 0&&(a.innerHTML=r),u!==void 0&&(a.textContent=u),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(d=>a.classList.toggle(d))}}const X=`
|
|
2
2
|
<svg
|
|
3
3
|
xmlns="http://www.w3.org/2000/svg"
|
|
4
4
|
width="16"
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
clip-rule="evenodd"
|
|
14
14
|
></path>
|
|
15
15
|
</svg>
|
|
16
|
-
`,
|
|
16
|
+
`,ee=`
|
|
17
17
|
<svg
|
|
18
18
|
xmlns="http://www.w3.org/2000/svg"
|
|
19
19
|
width="16"
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
>
|
|
29
29
|
<path d="M12 2v4M16.2 7.8l2.9-2.9M18 12h4M16.2 16.2l2.9 2.9M12 18v4M4.9 19.1l2.9-2.9M2 12h4M4.9 4.9l2.9 2.9"></path>
|
|
30
30
|
</svg>
|
|
31
|
-
`,
|
|
31
|
+
`,te=`<svg
|
|
32
32
|
xmlns="http://www.w3.org/2000/svg"
|
|
33
33
|
width="20"
|
|
34
34
|
height="20"
|
|
@@ -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
|
-
`,
|
|
49
|
-
<div class="tooltip-content">${
|
|
48
|
+
`,ne=({children:t,onClick:n,disabled:e=!1,size:a="medium",type:i="button",className:m="",variant:l="primary"})=>{const r=p("span",{className:"button-spinner",innerHTML:ee,dataset:{show:"false"}}),u=p("span",{className:"button-label",children:[null],textContent:t}),s=p("button",{className:`custom-button ${l} ${a} ${m}`,attributes:{type:i,...e?{disabled:"true"}:{}},events:{click:n},children:[r,u]}),o=(h=!1)=>{C({element:r},{dataset:{show:String(h)}}),d(h)},d=(h=!1)=>{h?s.setAttribute("disabled","true"):s.removeAttribute("disabled")};return{element:s,setLoading:o,setDisabled:d}},se=({content:t,position:n="top",delay:e=200,maxWidth:a=250,className:i="",id:m=""})=>{var l=p("div",{className:`tooltip ${n} ${i}`,styles:{maxWidth:`${a}px`},attributes:{role:"tooltip"},dataset:{show:"false"},innerHTML:`
|
|
49
|
+
<div class="tooltip-content">${t}</div>
|
|
50
50
|
<div class="tooltip-arrow"></div>
|
|
51
|
-
`});let
|
|
51
|
+
`});let r=null;var o=p("span",{className:"tooltip-trigger",innerHTML:k,events:{mouseenter:()=>{e>0?r=window.setTimeout(()=>{l.dataset.show="true",d()},e):(l.dataset.show="true",d())},mouseleave:()=>{r&&clearTimeout(r),l.dataset.show="false"}}});function d(){if(!o||!l)return;const c=o.getBoundingClientRect(),v=l.getBoundingClientRect(),b=8;let f,y;switch(n){case"top":f=c.top-v.height-b,y=c.left+c.width/2-v.width/2;break;case"bottom":f=c.bottom+b,y=c.left+c.width/2-v.width/2;break;case"left":f=c.top+c.height/2-v.height/2,y=c.left-v.width-b;break;case"right":f=c.top+c.height/2-v.height/2,y=c.right+b;break;default:f=c.top-v.height-b,y=c.left+c.width/2-v.width/2}const N=window.innerWidth,D=window.innerHeight;y<0&&(y=b),y+v.width>N&&(y=N-v.width-b),f<0&&(f=b),f+v.height>D&&(f=D-v.height-b),l.style.top=`${f}px`,l.style.left=`${y}px`}return p("div",{className:"tooltip-wrapper",id:`tooltip-${m}`,children:[o,l]})},re=(t,n=!1)=>{const e={},a=Object.values(t).every(r=>!r||r.trim()===""),i=t.cardNumber?.replace(/\s/g,"");if(i?/^\d{13,19}$/.test(i)||(e.cardNumber="Card number must be 13-19 digits"):e.cardNumber="Card number is required",!t.expiryDate&&!n)e.expiryDate="Expiry date is required";else if(t.expiryDate){const r=t.expiryDate.replace(/\D/g,"");if(r.length<4)e.expiryDate="Enter complete expiry date (MM/YY)";else{const u=parseInt(r.substring(0,2),10),s=parseInt(r.substring(2,4),10);if(isNaN(u)||u<1||u>12)e.expiryDate="Invalid month (must be 01-12)";else if(isNaN(s)||s<0||s>99)e.expiryDate="Invalid year";else{const o=new Date,d=o.getFullYear(),h=o.getMonth()+1,c=Math.floor(d/100)*100,v=c+s,b=c+100+s;let f;v>=d&&v<=d+20?f=v:(b>=d&&b<=d+20,f=b),f<d||f===d&&u<h?e.expiryDate="Card has expired":f>d+20&&(e.expiryDate="Expiry year is too far in the future")}}}const m=t.cvv.trim();m&&!/^\d{3,4}$/.test(m)&&(e.cvv="CVV must be 3 or 4 digits");const l=t.zipCode.trim();return l&&!/^[A-Z0-9\s-]{3,10}$/i.test(l)&&(e.zipCode="Invalid ZIP code format"),{isValid:Object.keys(e).length===0,errors:e,isEmpty:a}};function oe(t){const n=parseInt(t,10);if(isNaN(n)||n<0||n>99)return null;const e=new Date().getFullYear(),a=Math.floor(e/100)*100;let i=a+n;return i>=e&&i<=e+20||(i=a+100+n,i>=e&&i<=e+20)?i:a+100+n}function S(t=""){return t.trim().replaceAll(/\s/g,"").replaceAll("-","")}const ae={card:t=>t.replace(/\s+/g,"").replace(/[^0-9]/gi,"").substring(0,16).match(/.{1,4}/g)?.join(" ")??"",phone:t=>{const n=t.replace(/\D/g,"").substring(0,10),e=n.match(/^(\d{3})(\d{3})(\d{4})$/);return e?`(${e[1]}) ${e[2]}-${e[3]}`:n},expiry:t=>{const n=t.replace(/[^0-9/]/g,"");return n.length<=2?n:n.includes("/")?n.substring(0,5):n.substring(0,2)+"/"+n.substring(2,4)},cvv:t=>t.replace(/\D/g,"").substring(0,4),zip:t=>{const n=t.replace(/\D/g,"").substring(0,9);return n.length>5?`${n.substring(0,5)}-${n.substring(5)}`:n}};function ie(t,n){return n==="none"?t:ae[n](t)}const $=({label:t,maskType:n,id:e,name:a,type:i="text",placeholder:m="Enter value",tooltip:l="",onChange:r})=>{const u=["card","expiry","phone","cvv","zip"].includes(n)?"numeric":"",s=p("label",{className:"input-label",innerHTML:t,attributes:{for:e}});let o=!1;const h=p("input",{id:e||"input-id",className:"styled-input",attributes:{placeholder:m,type:i,inputMode:u,name:a},events:{input:c,blur:v,keydown:w=>{w.key==="Enter"&&(o=!0)}}});function c(w){const T=n!=="none"?ie(w?.target?.value,n):w?.target?.value;h.value=T,r?.(T)}function v(){o=!0,r?.(h?.value||"")}const b=p("div",{className:"input-loader",innerHTML:'<div class="loader"></div>',dataset:{show:"false"}}),f=l?p("div",{className:"input-right-element",children:[se({content:l,id:e})]}):null,y=p("div",{className:"input-wrapper",children:[h,b,f]}),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:[s,
|
|
54
|
+
`});return{element:p("div",{className:"custom-input-group",children:[s,y,N]}),setLoading:w=>{C({element:y},{dataset:{loading:w?"true":"false"}}),C({element:h},{attributes:{disabled:w?"true":"false"}}),C({element:b},{dataset:{show:w?"true":"false"}})},setError:(w="")=>{C({element:y},{className:w&&o?{add:"input-error"}:{remove:"input-error"}}),C({element:N},{dataset:{show:w&&o?"true":"false"},innerHTML:`
|
|
55
55
|
${k}
|
|
56
|
-
<span>${
|
|
57
|
-
`})}}},
|
|
56
|
+
<span>${w||""}</span>
|
|
57
|
+
`})}}},le=async(t,n={})=>{const{method:e="GET",headers:a={},body:i=null,...m}=n;try{const l={method:e,headers:{Accept:"*/*","Content-Type":"application/json",...a},...m};i&&["POST","PUT","PATCH","DELETE"].includes(e.toUpperCase())&&(l.body=typeof i=="string"?i:JSON.stringify(i));const r=await fetch(t,l),u=r.headers.get("content-type");let s;if(u?.includes("application/json")?s=await r.json():s=await r.text(),!r.ok){const o=s;throw new Error(o?.message||`HTTP error! status: ${r.status}`)}return{data:s,error:null}}catch(l){return{data:null,error:l instanceof Error?l.message:"An error occurred"}}},ce=({title:t="",children:n,onClose:e,showBackBtn:a=!1,showCloseBtn:i=!0})=>{const m=p("button",{className:"back-btn",innerHTML:te,dataset:{show:String(a)},events:{click:()=>d()}}),l=p("h3",{textContent:t}),r=p("button",{className:"close-btn",innerHTML:"×",dataset:{show:String(i)},attributes:{"aria-label":"Close modal"},events:{click:()=>d()}}),u=p("div",{className:"modal-header",children:[m,l,r]}),s=p("div",{className:"modal-content",children:[n]}),o=p("dialog",{className:"custom-modal",children:[u,s],events:{cancel:c=>{c.preventDefault(),d()}}}),d=()=>{o.close(),e?.()};return{element:o,setModalVisibility:c=>{c?o.showModal():o.close()}}},de=({token:t,endpoint:n,beneficiaryCard:e=!1,isModal:a=!1,onCallback:i=()=>null})=>{const m=e?"Enter Recipient Debit Card Details":"Enter Your Debit Card Details",l=e?"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.",r=e?"Debit Card Number":"Your Debit Card Number",u=e?"Enter recipient's card number":"Enter your card number",s=`add-card-form-wrapper${e?" recipient-form":""}`,o={cardNumber:"",expiryDate:"",cvv:"",zipCode:""},{element:d,setError:h}=$({label:r,placeholder:u,id:"card-number-input",name:"cardNumber",maskType:"card",onChange(g){L("cardNumber",g,h)}}),{element:c,setError:v}=$({label:"Expiration Date",placeholder:"MM/YY",id:"expiry-input",name:"expiryDate",maskType:"expiry",onChange(g){L("expiryDate",g,v)}}),{element:b,setError:f}=$({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(g){L("cvv",g,f)}}),{element:y,setError:N}=$({label:"ZIP Code",placeholder:e?"ZIP Code":"Enter your ZIP Code",id:"zip-input",name:"zipCode",maskType:"zip",onChange(g){L("zipCode",g,N)}}),D=p("div",{className:e?"input-sections":"inputs",children:[d,c,b,y]}),A=p("p",{className:"submit-error",dataset:{show:"false"}}),{element:I,setDisabled:w,setLoading:T}=ne({children:"Link Card",type:"submit",disabled:!0}),V=(g="")=>{C({element:A},{dataset:{show:String(!!g)},innerHTML:`
|
|
58
58
|
${k}
|
|
59
|
-
${
|
|
60
|
-
`})},B=(
|
|
61
|
-
<p>${
|
|
59
|
+
${g||""}
|
|
60
|
+
`})},B=(g=!0)=>{w(g),T(g)};function L(g,H,E){o[g]=H;const{isValid:j,errors:x}=re(o,e);x[g]?E(x[g]):E(""),w(!j)}const P=p("div",{className:"submit-button-wrapper",children:[A,I]});async function Z(g){g.preventDefault();const H=new FormData(g.target),E=Object.fromEntries(H.entries()),j=E?.cardNumber?S(E?.cardNumber):null,x=E?.expiryDate||null,G=E?.cvv?S(E?.cvv):null,K=E?.zipCode?S(E?.zipCode):null,U=x?Number(x?.split("/")[0]):null,J=x?oe(x?.split("/")[1]):null;B(!0),V("");const M=await le(n,{method:"POST",body:{token:t,pan:j,expiry_month:U,expiry_year:J,cvv:G,address:{postal_code:K}}});M.error?(console.error("Request failed:",M.error),B(!1),V(M.error),i?.({success:!1,error:M.error})):(console.log("Request success:",M.data),B(!1),i?.({success:!0,data:M.data}))}const R=()=>p("form",{events:{submit:Z},children:[D,P]}),W=()=>p("div",{className:"form-title",innerHTML:`
|
|
61
|
+
<p>${l}</p>
|
|
62
62
|
|
|
63
63
|
<div>
|
|
64
|
-
${
|
|
64
|
+
${X}
|
|
65
65
|
|
|
66
66
|
<span>Secured with 256-bit encryption</span>
|
|
67
67
|
</div>
|
|
68
|
-
`}),z=()=>p("div",{className:a?"":"non-modal-content",children:[
|
|
68
|
+
`}),z=()=>p("div",{className:a?"":"non-modal-content",children:[W(),R()]}),q=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}=a?
|
|
72
|
+
`}),z()]}),{element:Y,setModalVisibility:F}=a?ce({title:m,children:z()}):{element:null,setModalVisibility:()=>{}};function _(){Y&&(document.body.appendChild(p("div",{className:s,children:[Y]})),F(!0))}return{renderFormWithModal:_,nonModalForm:q,closeModal:()=>F(!1)}};function ue({token:t,endpoint:n,beneficiaryCard:e,isModal:a,onCallback:i,onModalClose:m}){const{renderFormWithModal:l,nonModalForm:r,closeModal:u}=de({token:t,endpoint:n,beneficiaryCard:e,isModal:a,onCallback:i});return{mount(s){const o="className"in s?document.querySelector(s.className):"id"in s?document.getElementById(s.id):s.element;o&&r&&o.appendChild(r)},open(){l()},destroy(){u(),m?.()}}}function pe({token:t,endpoint:n,isModal:e=!1,beneficiaryCard:a=!1,isOpen:i=!1,onCallback:m=()=>null,onClose:l=()=>null}){const r=O.useRef(null);return O.useEffect(()=>{let u=ue({token:t,endpoint:n,beneficiaryCard:a,isModal:e,onCallback:m,onModalClose:l});if(e)i?u.open():u.destroy();else{if(!r?.current)return;u.mount({element:r.current})}return()=>{u.destroy()}},[e,t,n,a,i]),e?null:Q.jsx("div",{ref:r})}exports.AddCard=pe;
|