@test-glide/glide-payment 0.0.4 → 0.0.6
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 +60 -35
- package/dist/index.cjs.js +11 -11
- package/dist/index.es.js +75 -77
- package/dist/index.umd.js +7 -7
- package/dist/native/native.cjs.js +1 -1
- package/dist/native/native.es.js +6 -6
- package/dist/react/react.cjs.js +11 -11
- package/dist/react/react.es.js +53 -55
- package/dist/react/style.css +1 -1
- package/dist/style.css +1 -1
- package/package.json +1 -1
package/dist/index.umd.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
(function(
|
|
1
|
+
(function(C,d){typeof exports=="object"&&typeof module<"u"?d(exports):typeof define=="function"&&define.amd?define(["exports"],d):(C=typeof globalThis<"u"?globalThis:C||self,d(C.BivoPayments={}))})(this,(function(C){"use strict";function d(t,n={}){const e=document.createElement(t),{className:o,id:l,innerHTML:m,textContent:c,attributes:a,styles:h,dataset:s,children:r,events:u}=n;if(o){const p=Array.isArray(o)?o:o.split(" ");e.classList.add(...p.filter(Boolean))}if(l&&(e.id=l),m&&(e.innerHTML=m),c&&(e.textContent=c),a)for(const[p,i]of Object.entries(a))i&&e.setAttribute(p,i);if(h)for(const[p,i]of Object.entries(h))e.style[p]=i;if(s)for(const[p,i]of Object.entries(s))e.dataset[p]=i;if(r&&e.append(...r.filter(Boolean)),u)for(const[p,i]of Object.entries(u))e.addEventListener(p,i);return e}function N(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 o of e){const{styles:l,attributes:m,dataset:c,innerHTML:a,textContent:h,className:s}=n;if(l)for(const[r,u]of Object.entries(l))o.style[r]=u;if(m)for(const[r,u]of Object.entries(m))o.setAttribute(r,u);if(c)for(const[r,u]of Object.entries(c))o.dataset[r]=u;if(a!==void 0&&(o.innerHTML=a),h!==void 0&&(o.textContent=h),s?.add){const r=Array.isArray(s.add)?s.add:[s.add];o.classList.add(...r)}if(s?.remove){const r=Array.isArray(s.remove)?s.remove:[s.remove];o.classList.remove(...r)}s?.toggle&&(Array.isArray(s.toggle)?s.toggle:[s.toggle]).forEach(u=>o.classList.toggle(u))}}const P=`
|
|
2
2
|
<svg
|
|
3
3
|
xmlns="http://www.w3.org/2000/svg"
|
|
4
4
|
width="16"
|
|
@@ -48,16 +48,16 @@
|
|
|
48
48
|
`,R=({children:t,onClick:n,disabled:e=!1,size:o="medium",type:l="button",className:m="",variant:c="primary"})=>{const a=d("span",{className:"button-spinner",innerHTML:Z,dataset:{show:"false"}}),h=d("span",{className:"button-label",children:[null],textContent:t}),s=d("button",{className:`custom-button ${c} ${o} ${m}`,attributes:{type:l,...e?{disabled:"true"}:{}},events:{click:n},children:[a,h]}),r=(p=!1)=>{N({element:a},{dataset:{show:String(p)}}),u(p)},u=(p=!1)=>{p?s.setAttribute("disabled","true"):s.removeAttribute("disabled")};return{element:s,setLoading:r,setDisabled:u}},q=({content:t,position:n="top",delay:e=200,maxWidth:o=250,className:l="",id:m=""})=>{var c=d("div",{className:`tooltip ${n} ${l}`,styles:{maxWidth:`${o}px`},attributes:{role:"tooltip"},dataset:{show:"false"},innerHTML:`
|
|
49
49
|
<div class="tooltip-content">${t}</div>
|
|
50
50
|
<div class="tooltip-arrow"></div>
|
|
51
|
-
`});let a=null;var r=d("span",{className:"tooltip-trigger",innerHTML:L,events:{mouseenter:()=>{e>0?a=window.setTimeout(()=>{c.dataset.show="true",u()},e):(c.dataset.show="true",u())},mouseleave:()=>{a&&clearTimeout(a),c.dataset.show="false"}}});function u(){if(!r||!c)return;const i=r.getBoundingClientRect(),
|
|
51
|
+
`});let a=null;var r=d("span",{className:"tooltip-trigger",innerHTML:L,events:{mouseenter:()=>{e>0?a=window.setTimeout(()=>{c.dataset.show="true",u()},e):(c.dataset.show="true",u())},mouseleave:()=>{a&&clearTimeout(a),c.dataset.show="false"}}});function u(){if(!r||!c)return;const i=r.getBoundingClientRect(),v=c.getBoundingClientRect(),b=8;let f,y;switch(n){case"top":f=i.top-v.height-b,y=i.left+i.width/2-v.width/2;break;case"bottom":f=i.bottom+b,y=i.left+i.width/2-v.width/2;break;case"left":f=i.top+i.height/2-v.height/2,y=i.left-v.width-b;break;case"right":f=i.top+i.height/2-v.height/2,y=i.right+b;break;default:f=i.top-v.height-b,y=i.left+i.width/2-v.width/2}const x=window.innerWidth,D=window.innerHeight;y<0&&(y=b),y+v.width>x&&(y=x-v.width-b),f<0&&(f=b),f+v.height>D&&(f=D-v.height-b),c.style.top=`${f}px`,c.style.left=`${y}px`}return d("div",{className:"tooltip-wrapper",id:`tooltip-${m}`,children:[r,c]})},_=(t,n=!1)=>{const e={},o=Object.values(t).every(a=>!a||a.trim()===""),l=t.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",!t.expiryDate&&!n)e.expiryDate="Expiry date is required";else if(t.expiryDate){const a=t.expiryDate.replace(/\D/g,"");if(a.length<4)e.expiryDate="Enter complete expiry date (MM/YY)";else{const h=parseInt(a.substring(0,2),10),s=parseInt(a.substring(2,4),10);if(isNaN(h)||h<1||h>12)e.expiryDate="Invalid month (must be 01-12)";else if(isNaN(s)||s<0||s>99)e.expiryDate="Invalid year";else{const r=new Date,u=r.getFullYear(),p=r.getMonth()+1,i=Math.floor(u/100)*100,v=i+s,b=i+100+s;let f;v>=u&&v<=u+20?f=v:(b>=u&&b<=u+20,f=b),f<u||f===u&&h<p?e.expiryDate="Card has expired":f>u+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 c=t.zipCode.trim();return c&&!/^[A-Z0-9\s-]{3,10}$/i.test(c)&&(e.zipCode="Invalid ZIP code format"),{isValid:Object.keys(e).length===0,errors:e,isEmpty:o}};function G(t){const n=parseInt(t,10);if(isNaN(n)||n<0||n>99)return null;const e=new Date().getFullYear(),o=Math.floor(e/100)*100;let l=o+n;return l>=e&&l<=e+20||(l=o+100+n,l>=e&&l<=e+20)?l:o+100+n}function B(t=""){return t.trim().replaceAll(/\s/g,"").replaceAll("-","")}const K={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 U(t,n){return n==="none"?t:K[n](t)}const $=({label:t,maskType:n,id:e,name:o,type:l="text",placeholder:m="Enter value",tooltip:c="",onChange:a})=>{const h=["card","expiry","phone","cvv","zip"].includes(n)?"numeric":"",s=d("label",{className:"input-label",innerHTML:t,attributes:{for:e}});let r=!1;const p=d("input",{id:e||"input-id",className:"styled-input",attributes:{placeholder:m,type:l,inputMode:h,name:o},events:{input:i,blur:v,keydown:w=>{w.key==="Enter"&&(r=!0)}}});function i(w){const k=n!=="none"?U(w?.target?.value,n):w?.target?.value;p.value=k,a?.(k)}function v(){r=!0,a?.(p?.value||"")}const b=d("div",{className:"input-loader",innerHTML:'<div class="loader"></div>',dataset:{show:"false"}}),f=c?d("div",{className:"input-right-element",children:[q({content:c,id:e})]}):null,y=d("div",{className:"input-wrapper",children:[p,b,f]}),x=d("div",{className:"error-message",dataset:{show:"false"},innerHTML:`
|
|
52
52
|
${L}
|
|
53
53
|
<span></span>
|
|
54
54
|
`});return{element:d("div",{className:"custom-input-group",children:[s,y,x]}),setLoading:w=>{N({element:y},{dataset:{loading:w?"true":"false"}}),N({element:p},{attributes:{disabled:w?"true":"false"}}),N({element:b},{dataset:{show:w?"true":"false"}})},setError:(w="")=>{N({element:y},{className:w&&r?{add:"input-error"}:{remove:"input-error"}}),N({element:x},{dataset:{show:w&&r?"true":"false"},innerHTML:`
|
|
55
55
|
${L}
|
|
56
56
|
<span>${w||""}</span>
|
|
57
|
-
`})}}},J=async(t,n={})=>{const{method:e="GET",headers:o={},body:l=null,...m}=n;try{const c={method:e,headers:{Accept:"*/*","Content-Type":"application/json",...o},...m};l&&["POST","PUT","PATCH","DELETE"].includes(e.toUpperCase())&&(c.body=typeof l=="string"?l:JSON.stringify(l));const a=await fetch(t,c),h=a.headers.get("content-type");let s;if(h?.includes("application/json")?s=await a.json():s=await a.text(),!a.ok){const r=s;throw new Error(r?.message||`HTTP error! status: ${a.status}`)}return{data:s,error:null}}catch(c){return{data:null,error:c instanceof Error?c.message:"An error occurred"}}},Q=({title:t="",children:n,onClose:e,showBackBtn:o=!1,showCloseBtn:l=!0})=>{const m=d("button",{className:"back-btn",innerHTML:W,dataset:{show:String(o)},events:{click:()=>u()}}),c=d("h3",{textContent:t}),a=d("button",{className:"close-btn",innerHTML:"×",dataset:{show:String(l)},attributes:{"aria-label":"Close modal"},events:{click:()=>u()}}),h=d("div",{className:"modal-header",children:[m,c,a]}),s=d("div",{className:"modal-content",children:[n]}),r=d("dialog",{className:"custom-modal",children:[h,s],events:{cancel:i=>{i.preventDefault(),u()}}}),u=()=>{r.close(),e?.()};return{element:r,setModalVisibility:i=>{i?r.showModal():r.close()}}},X=({token:t,endpoint:n,beneficiaryCard:e=!1,isModal:o=!1,onCallback:l=()=>null})=>{const m=e?"Enter Recipient Debit Card Details":"Enter Your Debit Card Details",c=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.",a=e?"Debit Card Number":"Your Debit Card Number",h=e?"Enter recipient's card number":"Enter your card number",s=`add-card-form-wrapper${e?" recipient-form":""}`,r={cardNumber:"",expiryDate:"",cvv:"",zipCode:""},{element:u,setError:p}=$({label:a,placeholder:h,id:"card-number-input",name:"cardNumber",maskType:"card",onChange(
|
|
57
|
+
`})}}},J=async(t,n={})=>{const{method:e="GET",headers:o={},body:l=null,...m}=n;try{const c={method:e,headers:{Accept:"*/*","Content-Type":"application/json",...o},...m};l&&["POST","PUT","PATCH","DELETE"].includes(e.toUpperCase())&&(c.body=typeof l=="string"?l:JSON.stringify(l));const a=await fetch(t,c),h=a.headers.get("content-type");let s;if(h?.includes("application/json")?s=await a.json():s=await a.text(),!a.ok){const r=s;throw new Error(r?.message||`HTTP error! status: ${a.status}`)}return{data:s,error:null}}catch(c){return{data:null,error:c instanceof Error?c.message:"An error occurred"}}},Q=({title:t="",children:n,onClose:e,showBackBtn:o=!1,showCloseBtn:l=!0})=>{const m=d("button",{className:"back-btn",innerHTML:W,dataset:{show:String(o)},events:{click:()=>u()}}),c=d("h3",{textContent:t}),a=d("button",{className:"close-btn",innerHTML:"×",dataset:{show:String(l)},attributes:{"aria-label":"Close modal"},events:{click:()=>u()}}),h=d("div",{className:"modal-header",children:[m,c,a]}),s=d("div",{className:"modal-content",children:[n]}),r=d("dialog",{className:"custom-modal",children:[h,s],events:{cancel:i=>{i.preventDefault(),u()}}}),u=()=>{r.close(),e?.()};return{element:r,setModalVisibility:i=>{i?r.showModal():r.close()}}},X=({token:t,endpoint:n,beneficiaryCard:e=!1,isModal:o=!1,onCallback:l=()=>null})=>{const m=e?"Enter Recipient Debit Card Details":"Enter Your Debit Card Details",c=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.",a=e?"Debit Card Number":"Your Debit Card Number",h=e?"Enter recipient's card number":"Enter your card number",s=`add-card-form-wrapper${e?" recipient-form":""}`,r={cardNumber:"",expiryDate:"",cvv:"",zipCode:""},{element:u,setError:p}=$({label:a,placeholder:h,id:"card-number-input",name:"cardNumber",maskType:"card",onChange(g){A("cardNumber",g,p)}}),{element:i,setError:v}=$({label:"Expiration Date",placeholder:"MM/YY",id:"expiry-input",name:"expiryDate",maskType:"expiry",onChange(g){A("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){A("cvv",g,f)}}),{element:y,setError:x}=$({label:"ZIP Code",placeholder:e?"ZIP Code":"Enter your ZIP Code",id:"zip-input",name:"zipCode",maskType:"zip",onChange(g){A("zipCode",g,x)}}),D=d("div",{className:e?"input-sections":"inputs",children:[u,i,b,y]}),H=d("p",{className:"submit-error",dataset:{show:"false"}}),{element:V,setDisabled:w,setLoading:k}=R({children:"Link Card",type:"submit",disabled:!0}),z=(g="")=>{N({element:H},{dataset:{show:String(!!g)},innerHTML:`
|
|
58
58
|
${L}
|
|
59
|
-
${
|
|
60
|
-
`})},S=(
|
|
59
|
+
${g||""}
|
|
60
|
+
`})},S=(g=!0)=>{w(g),k(g)};function A(g,j,E){r[g]=j;const{isValid:I,errors:M}=_(r,e);M[g]?E(M[g]):E(""),w(!I)}const te=d("div",{className:"submit-button-wrapper",children:[H,V]});async function ne(g){g.preventDefault();const j=new FormData(g.target),E=Object.fromEntries(j.entries()),I=E?.cardNumber?B(E?.cardNumber):null,M=E?.expiryDate||null,ie=E?.cvv?B(E?.cvv):null,le=E?.zipCode?B(E?.zipCode):null,ce=M?Number(M?.split("/")[0]):null,de=M?G(M?.split("/")[1]):null;S(!0),z("");const T=await J(n,{method:"POST",body:{token:t,pan:I,expiry_month:ce,expiry_year:de,cvv:ie,address:{postal_code:le}}});T.error?(console.error("Request failed:",T.error),S(!1),z(T.error),l?.({success:!1,error:T.error})):(console.log("Request success:",T.data),S(!1),l?.({success:!0,data:T.data}))}const se=()=>d("form",{events:{submit:ne},children:[D,te]}),re=()=>d("div",{className:"form-title",innerHTML:`
|
|
61
61
|
<p>${c}</p>
|
|
62
62
|
|
|
63
63
|
<div>
|
|
@@ -65,8 +65,8 @@
|
|
|
65
65
|
|
|
66
66
|
<span>Secured with 256-bit encryption</span>
|
|
67
67
|
</div>
|
|
68
|
-
`}),
|
|
68
|
+
`}),Y=()=>d("div",{className:o?"":"non-modal-content",children:[re(),se()]}),oe=o?null:d("div",{className:`${s} non-modal`,children:[d("div",{className:"non-modal-header",innerHTML:`
|
|
69
69
|
<span></span>
|
|
70
70
|
<h3>${m}</h3>
|
|
71
71
|
<span></span>
|
|
72
|
-
`}),
|
|
72
|
+
`}),Y()]}),{element:F,setModalVisibility:O}=o?Q({title:m,children:Y()}):{element:null,setModalVisibility:()=>{}};function ae(){F&&(document.body.appendChild(d("div",{className:s,children:[F]})),O(!0))}return{renderFormWithModal:ae,nonModalForm:oe,closeModal:()=>O(!1)}};function ee({token:t,endpoint:n,beneficiaryCard:e,isModal:o,onCallback:l,onModalClose:m}){const{renderFormWithModal:c,nonModalForm:a,closeModal:h}=X({token:t,endpoint:n,beneficiaryCard:e,isModal:o,onCallback:l});return{mount(s){const r="className"in s?document.querySelector(s.className):"id"in s?document.getElementById(s.id):s.element;r&&a&&r.appendChild(a)},open(){c()},destroy(){h(),m?.()}}}C.init=ee,Object.defineProperty(C,Symbol.toStringTag,{value:"Module"})}));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),C=require("react"),z=(i,l=!1)=>{const e={},p=Object.values(i).every(o=>!o||o.trim()===""),t=i.cardNumber?.replace(/\s/g,"");if(t?/^\d{13,19}$/.test(t)||(e.cardNumber="Card number must be 13-19 digits"):e.cardNumber="Card number is required",!i.expiryDate&&!l)e.expiryDate="Expiry date is required";else if(i.expiryDate){const o=i.expiryDate.replace(/\D/g,"");if(o.length<4)e.expiryDate="Enter complete expiry date (MM/YY)";else{const y=parseInt(o.substring(0,2),10),a=parseInt(o.substring(2,4),10);if(isNaN(y)||y<1||y>12)e.expiryDate="Invalid month (must be 01-12)";else if(isNaN(a)||a<0||a>99)e.expiryDate="Invalid year";else{const f=new Date,d=f.getFullYear(),j=f.getMonth()+1,h=Math.floor(d/100)*100,v=h+a,m=h+100+a;let x;v>=d&&v<=d+20?x=v:(m>=d&&m<=d+20,x=m),x<d||x===d&&y<j?e.expiryDate="Card has expired":x>d+20&&(e.expiryDate="Expiry year is too far in the future")}}}const b=i.cvv.trim();b&&!/^\d{3,4}$/.test(b)&&(e.cvv="CVV must be 3 or 4 digits");const s=i.zipCode.trim();return s&&!/^[A-Z0-9\s-]{3,10}$/i.test(s)&&(e.zipCode="Invalid ZIP code format"),{isValid:Object.keys(e).length===0,errors:e,isEmpty:p}};function k(i){const l=parseInt(i,10);if(isNaN(l)||l<0||l>99)return null;const e=new Date().getFullYear(),p=Math.floor(e/100)*100;let t=p+l;return t>=e&&t<=e+20||(t=p+100+l,t>=e&&t<=e+20)?t:p+100+l}function I(i=""){return i.trim().replaceAll(/\s/g,"").replaceAll("-","")}const A=async(i,l={})=>{const{method:e="GET",headers:p={},body:t=null,...b}=l;try{const s={method:e,headers:{Accept:"*/*","Content-Type":"application/json",...p},...b};t&&["POST","PUT","PATCH","DELETE"].includes(e.toUpperCase())&&(s.body=typeof t=="string"?t:JSON.stringify(t));const o=await fetch(i,s),y=o.headers.get("content-type");let a;if(y?.includes("application/json")?a=await o.json():a=await o.text(),!o.ok){const f=a;throw new Error(f?.message||`HTTP error! status: ${o.status}`)}return{data:a,error:null}}catch(s){return{data:null,error:s instanceof Error?s.message:"An error occurred"}}},{View:g,Text:c,TextInput:S,ActivityIndicator:O,TouchableOpacity:q,StyleSheet:L}=require("react-native"),R=({token:i,endpoint:l,beneficiaryCard:e=!1,onCallback:p})=>{const[t,b]=C.useState({cardNumber:"",expiryDate:"",cvv:"",zipCode:""}),[s,o]=C.useState({}),[y,a]=C.useState(null),[f,d]=C.useState(!1),j=C.useMemo(()=>z(t,e).isValid,[t]),h=(u,N)=>{const D={...t,[u]:N};b(D);const{errors:T}=z(D,e);o(T),y&&a(null)},v=async()=>{const{isValid:u,errors:N}=z(t,e);if(!u){o(N);return}const{cardNumber:D,expiryDate:T,cvv:
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),C=require("react"),z=(i,l=!1)=>{const e={},p=Object.values(i).every(o=>!o||o.trim()===""),t=i.cardNumber?.replace(/\s/g,"");if(t?/^\d{13,19}$/.test(t)||(e.cardNumber="Card number must be 13-19 digits"):e.cardNumber="Card number is required",!i.expiryDate&&!l)e.expiryDate="Expiry date is required";else if(i.expiryDate){const o=i.expiryDate.replace(/\D/g,"");if(o.length<4)e.expiryDate="Enter complete expiry date (MM/YY)";else{const y=parseInt(o.substring(0,2),10),a=parseInt(o.substring(2,4),10);if(isNaN(y)||y<1||y>12)e.expiryDate="Invalid month (must be 01-12)";else if(isNaN(a)||a<0||a>99)e.expiryDate="Invalid year";else{const f=new Date,d=f.getFullYear(),j=f.getMonth()+1,h=Math.floor(d/100)*100,v=h+a,m=h+100+a;let x;v>=d&&v<=d+20?x=v:(m>=d&&m<=d+20,x=m),x<d||x===d&&y<j?e.expiryDate="Card has expired":x>d+20&&(e.expiryDate="Expiry year is too far in the future")}}}const b=i.cvv.trim();b&&!/^\d{3,4}$/.test(b)&&(e.cvv="CVV must be 3 or 4 digits");const s=i.zipCode.trim();return s&&!/^[A-Z0-9\s-]{3,10}$/i.test(s)&&(e.zipCode="Invalid ZIP code format"),{isValid:Object.keys(e).length===0,errors:e,isEmpty:p}};function k(i){const l=parseInt(i,10);if(isNaN(l)||l<0||l>99)return null;const e=new Date().getFullYear(),p=Math.floor(e/100)*100;let t=p+l;return t>=e&&t<=e+20||(t=p+100+l,t>=e&&t<=e+20)?t:p+100+l}function I(i=""){return i.trim().replaceAll(/\s/g,"").replaceAll("-","")}const A=async(i,l={})=>{const{method:e="GET",headers:p={},body:t=null,...b}=l;try{const s={method:e,headers:{Accept:"*/*","Content-Type":"application/json",...p},...b};t&&["POST","PUT","PATCH","DELETE"].includes(e.toUpperCase())&&(s.body=typeof t=="string"?t:JSON.stringify(t));const o=await fetch(i,s),y=o.headers.get("content-type");let a;if(y?.includes("application/json")?a=await o.json():a=await o.text(),!o.ok){const f=a;throw new Error(f?.message||`HTTP error! status: ${o.status}`)}return{data:a,error:null}}catch(s){return{data:null,error:s instanceof Error?s.message:"An error occurred"}}},{View:g,Text:c,TextInput:S,ActivityIndicator:O,TouchableOpacity:q,StyleSheet:L}=require("react-native"),R=({token:i,endpoint:l,beneficiaryCard:e=!1,onCallback:p})=>{const[t,b]=C.useState({cardNumber:"",expiryDate:"",cvv:"",zipCode:""}),[s,o]=C.useState({}),[y,a]=C.useState(null),[f,d]=C.useState(!1),j=C.useMemo(()=>z(t,e).isValid,[t]),h=(u,N)=>{const D={...t,[u]:N};b(D);const{errors:T}=z(D,e);o(T),y&&a(null)},v=async()=>{const{isValid:u,errors:N}=z(t,e);if(!u){o(N);return}const{cardNumber:D,expiryDate:T,cvv:Y,zipCode:w}=t,M=Number(T?.split("/")[0]),P=k(T?.split("/")[1]??""),V=I(D);if(!M||!P){a("Invalid expiry date");return}d(!0),a(null);const E=await A(l,{method:"POST",body:{token:i,pan:V,expiry_month:M||null,expiry_year:P||null,cvv:Y?I(Y):null,address:{postal_code:w?I(w):null}}});d(!1),E.error?(a(E.error),p?.({success:!1,error:E.error})):p?.({success:!0,data:E.data})},m=e?"Enter Recipient Debit Card Details":"Enter Your Debit Card Details",x=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.";return n.jsxs(g,{style:r.container,children:[n.jsx(c,{style:r.title,children:m}),n.jsx(c,{style:r.description,children:x}),n.jsxs(g,{style:r.field,children:[n.jsx(c,{style:r.label,children:e?"Debit Card Number":"Your Debit Card Number"}),n.jsx(S,{value:t.cardNumber,onChangeText:u=>h("cardNumber",u),keyboardType:"number-pad",placeholder:e?"Enter recipient's card number":"Enter your card number",style:r.input}),!!s.cardNumber&&n.jsx(c,{style:r.error,children:s.cardNumber})]}),n.jsxs(g,{style:r.row,children:[n.jsxs(g,{style:[r.field,r.half],children:[n.jsx(c,{style:r.label,children:"Expiration Date"}),n.jsx(S,{value:t.expiryDate,onChangeText:u=>h("expiryDate",u),keyboardType:"number-pad",placeholder:"MM/YY",style:r.input}),!!s.expiryDate&&n.jsx(c,{style:r.error,children:s.expiryDate})]}),n.jsxs(g,{style:[r.field,r.half],children:[n.jsx(c,{style:r.label,children:"CVV"}),n.jsx(S,{value:t.cvv,onChangeText:u=>h("cvv",u),keyboardType:"number-pad",secureTextEntry:!0,placeholder:"3-Digit",style:r.input}),!!s.cvv&&n.jsx(c,{style:r.error,children:s.cvv})]})]}),n.jsxs(g,{style:r.field,children:[n.jsx(c,{style:r.label,children:"ZIP Code"}),n.jsx(S,{value:t.zipCode,onChangeText:u=>h("zipCode",u),keyboardType:"number-pad",placeholder:e?"ZIP Code":"Enter your ZIP Code",style:r.input}),!!s.zipCode&&n.jsx(c,{style:r.error,children:s.zipCode})]}),!!y&&n.jsx(c,{style:r.submitError,children:y}),n.jsx(q,{style:[r.button,!j||f?r.buttonDisabled:null],onPress:v,disabled:!j||f,children:f?n.jsx(O,{color:"#ffffff"}):n.jsx(c,{style:r.buttonText,children:"Link Card"})})]})},r=L.create({container:{padding:16,borderRadius:12,backgroundColor:"#ffffff",gap:12},title:{fontSize:18,fontWeight:"600"},description:{fontSize:14,color:"#444"},field:{marginTop:8},row:{flexDirection:"row",gap:12},half:{flex:1},label:{fontSize:13,marginBottom:4,color:"#222"},input:{borderWidth:1,borderColor:"#ccc",borderRadius:8,paddingHorizontal:10,paddingVertical:8,fontSize:14},error:{color:"#cc0000",fontSize:12,marginTop:4},submitError:{color:"#cc0000",fontSize:13,marginTop:8},button:{marginTop:16,paddingVertical:12,borderRadius:999,alignItems:"center",justifyContent:"center",backgroundColor:"#111827"},buttonDisabled:{opacity:.6},buttonText:{color:"#ffffff",fontSize:15,fontWeight:"500"}});exports.AddCard=R;
|
package/dist/native/native.es.js
CHANGED
|
@@ -96,8 +96,8 @@ const L = async (s, l = {}) => {
|
|
|
96
96
|
i(I);
|
|
97
97
|
return;
|
|
98
98
|
}
|
|
99
|
-
const { cardNumber: T, expiryDate: E, cvv:
|
|
100
|
-
if (!
|
|
99
|
+
const { cardNumber: T, expiryDate: E, cvv: M, zipCode: V } = t, k = Number(E?.split("/")[0]), P = O(E?.split("/")[1] ?? ""), j = w(T);
|
|
100
|
+
if (!k || !P) {
|
|
101
101
|
a("Invalid expiry date");
|
|
102
102
|
return;
|
|
103
103
|
}
|
|
@@ -107,11 +107,11 @@ const L = async (s, l = {}) => {
|
|
|
107
107
|
body: {
|
|
108
108
|
token: s,
|
|
109
109
|
pan: j,
|
|
110
|
-
expiry_month:
|
|
111
|
-
expiry_year:
|
|
112
|
-
cvv: w(
|
|
110
|
+
expiry_month: k || null,
|
|
111
|
+
expiry_year: P || null,
|
|
112
|
+
cvv: M ? w(M) : null,
|
|
113
113
|
address: {
|
|
114
|
-
postal_code: w(
|
|
114
|
+
postal_code: V ? w(V) : null
|
|
115
115
|
}
|
|
116
116
|
}
|
|
117
117
|
});
|
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
|
-
`,
|
|
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
49
|
<div class="tooltip-content">${t}</div>
|
|
50
50
|
<div class="tooltip-arrow"></div>
|
|
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,
|
|
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,y,N]}),setLoading:w=>{
|
|
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
56
|
<span>${w||""}</span>
|
|
57
|
-
`})}}},
|
|
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
59
|
${g||""}
|
|
60
|
-
`})},B=(g=!0)=>{w(g),T(g)};function L(g,H,E){o[g]=H;const{isValid:j,errors:
|
|
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
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
|
-
`}),
|
|
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
|
-
`}),
|
|
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;
|
package/dist/react/react.es.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import { useRef as
|
|
1
|
+
import { jsx as J } from "react/jsx-runtime";
|
|
2
|
+
import { useRef as Q, useEffect as X } from "react";
|
|
3
3
|
function p(t, n = {}) {
|
|
4
4
|
const e = document.createElement(t), { className: a, id: i, innerHTML: m, textContent: l, attributes: r, styles: u, dataset: s, children: o, events: d } = n;
|
|
5
5
|
if (a) {
|
|
@@ -20,7 +20,7 @@ function p(t, n = {}) {
|
|
|
20
20
|
e.addEventListener(h, c);
|
|
21
21
|
return e;
|
|
22
22
|
}
|
|
23
|
-
function
|
|
23
|
+
function C(t, n) {
|
|
24
24
|
const e = "id" in t ? [document.getElementById(t.id)].filter(Boolean) : "className" in t ? Array.from(document.getElementsByClassName(t.className)) : [t.element];
|
|
25
25
|
if (!e.length) {
|
|
26
26
|
console.warn("updateElements: no elements found for", t);
|
|
@@ -48,7 +48,7 @@ function x(t, n) {
|
|
|
48
48
|
s?.toggle && (Array.isArray(s.toggle) ? s.toggle : [s.toggle]).forEach((d) => a.classList.toggle(d));
|
|
49
49
|
}
|
|
50
50
|
}
|
|
51
|
-
const
|
|
51
|
+
const ee = `
|
|
52
52
|
<svg
|
|
53
53
|
xmlns="http://www.w3.org/2000/svg"
|
|
54
54
|
width="16"
|
|
@@ -63,7 +63,7 @@ const te = `
|
|
|
63
63
|
clip-rule="evenodd"
|
|
64
64
|
></path>
|
|
65
65
|
</svg>
|
|
66
|
-
`,
|
|
66
|
+
`, te = `
|
|
67
67
|
<svg
|
|
68
68
|
xmlns="http://www.w3.org/2000/svg"
|
|
69
69
|
width="16"
|
|
@@ -78,7 +78,7 @@ const te = `
|
|
|
78
78
|
>
|
|
79
79
|
<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>
|
|
80
80
|
</svg>
|
|
81
|
-
`,
|
|
81
|
+
`, ne = `<svg
|
|
82
82
|
xmlns="http://www.w3.org/2000/svg"
|
|
83
83
|
width="20"
|
|
84
84
|
height="20"
|
|
@@ -95,10 +95,10 @@ const te = `
|
|
|
95
95
|
></path>
|
|
96
96
|
</svg>`, k = `
|
|
97
97
|
<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>
|
|
98
|
-
`,
|
|
98
|
+
`, se = ({ children: t, onClick: n, disabled: e = !1, size: a = "medium", type: i = "button", className: m = "", variant: l = "primary" }) => {
|
|
99
99
|
const r = p("span", {
|
|
100
100
|
className: "button-spinner",
|
|
101
|
-
innerHTML:
|
|
101
|
+
innerHTML: te,
|
|
102
102
|
dataset: { show: "false" }
|
|
103
103
|
}), u = p("span", {
|
|
104
104
|
className: "button-label",
|
|
@@ -120,7 +120,7 @@ const te = `
|
|
|
120
120
|
u
|
|
121
121
|
]
|
|
122
122
|
}), o = (h = !1) => {
|
|
123
|
-
|
|
123
|
+
C({ element: r }, {
|
|
124
124
|
dataset: { show: String(h) }
|
|
125
125
|
}), d(h);
|
|
126
126
|
}, d = (h = !1) => {
|
|
@@ -131,7 +131,7 @@ const te = `
|
|
|
131
131
|
setLoading: o,
|
|
132
132
|
setDisabled: d
|
|
133
133
|
};
|
|
134
|
-
},
|
|
134
|
+
}, re = ({ content: t, position: n = "top", delay: e = 200, maxWidth: a = 250, className: i = "", id: m = "" }) => {
|
|
135
135
|
var l = p("div", {
|
|
136
136
|
className: `tooltip ${n} ${i}`,
|
|
137
137
|
styles: {
|
|
@@ -183,8 +183,8 @@ const te = `
|
|
|
183
183
|
default:
|
|
184
184
|
f = c.top - v.height - b, y = c.left + c.width / 2 - v.width / 2;
|
|
185
185
|
}
|
|
186
|
-
const N = window.innerWidth,
|
|
187
|
-
y < 0 && (y = b), y + v.width > N && (y = N - v.width - b), f < 0 && (f = b), f + v.height >
|
|
186
|
+
const N = window.innerWidth, D = window.innerHeight;
|
|
187
|
+
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`;
|
|
188
188
|
}
|
|
189
189
|
return p("div", {
|
|
190
190
|
className: "tooltip-wrapper",
|
|
@@ -194,7 +194,7 @@ const te = `
|
|
|
194
194
|
l
|
|
195
195
|
]
|
|
196
196
|
});
|
|
197
|
-
},
|
|
197
|
+
}, oe = (t, n = !1) => {
|
|
198
198
|
const e = {}, a = Object.values(t).every(
|
|
199
199
|
(r) => !r || r.trim() === ""
|
|
200
200
|
), i = t.cardNumber?.replace(/\s/g, "");
|
|
@@ -226,7 +226,7 @@ const te = `
|
|
|
226
226
|
isEmpty: a
|
|
227
227
|
};
|
|
228
228
|
};
|
|
229
|
-
function
|
|
229
|
+
function ae(t) {
|
|
230
230
|
const n = parseInt(t, 10);
|
|
231
231
|
if (isNaN(n) || n < 0 || n > 99) return null;
|
|
232
232
|
const e = (/* @__PURE__ */ new Date()).getFullYear(), a = Math.floor(e / 100) * 100;
|
|
@@ -236,7 +236,7 @@ function ie(t) {
|
|
|
236
236
|
function V(t = "") {
|
|
237
237
|
return t.trim().replaceAll(/\s/g, "").replaceAll("-", "");
|
|
238
238
|
}
|
|
239
|
-
const
|
|
239
|
+
const ie = {
|
|
240
240
|
card: (t) => t.replace(/\s+/g, "").replace(/[^0-9]/gi, "").substring(0, 16).match(/.{1,4}/g)?.join(" ") ?? "",
|
|
241
241
|
phone: (t) => {
|
|
242
242
|
const n = t.replace(/\D/g, "").substring(0, 10), e = n.match(/^(\d{3})(\d{3})(\d{4})$/);
|
|
@@ -252,8 +252,8 @@ const le = {
|
|
|
252
252
|
return n.length > 5 ? `${n.substring(0, 5)}-${n.substring(5)}` : n;
|
|
253
253
|
}
|
|
254
254
|
};
|
|
255
|
-
function
|
|
256
|
-
return n === "none" ? t :
|
|
255
|
+
function le(t, n) {
|
|
256
|
+
return n === "none" ? t : ie[n](t);
|
|
257
257
|
}
|
|
258
258
|
const $ = ({ label: t, maskType: n, id: e, name: a, type: i = "text", placeholder: m = "Enter value", tooltip: l = "", onChange: r }) => {
|
|
259
259
|
const u = ["card", "expiry", "phone", "cvv", "zip"].includes(n) ? "numeric" : "", s = p("label", {
|
|
@@ -282,7 +282,7 @@ const $ = ({ label: t, maskType: n, id: e, name: a, type: i = "text", placeholde
|
|
|
282
282
|
}
|
|
283
283
|
});
|
|
284
284
|
function c(w) {
|
|
285
|
-
const T = n !== "none" ?
|
|
285
|
+
const T = n !== "none" ? le(w?.target?.value, n) : w?.target?.value;
|
|
286
286
|
h.value = T, r?.(T);
|
|
287
287
|
}
|
|
288
288
|
function v() {
|
|
@@ -295,7 +295,7 @@ const $ = ({ label: t, maskType: n, id: e, name: a, type: i = "text", placeholde
|
|
|
295
295
|
}), f = l ? p("div", {
|
|
296
296
|
className: "input-right-element",
|
|
297
297
|
children: [
|
|
298
|
-
|
|
298
|
+
re({ content: l, id: e })
|
|
299
299
|
]
|
|
300
300
|
}) : null, y = p("div", {
|
|
301
301
|
className: "input-wrapper",
|
|
@@ -322,18 +322,18 @@ const $ = ({ label: t, maskType: n, id: e, name: a, type: i = "text", placeholde
|
|
|
322
322
|
]
|
|
323
323
|
}),
|
|
324
324
|
setLoading: (w) => {
|
|
325
|
-
|
|
325
|
+
C({ element: y }, {
|
|
326
326
|
dataset: { loading: w ? "true" : "false" }
|
|
327
|
-
}),
|
|
327
|
+
}), C({ element: h }, {
|
|
328
328
|
attributes: { disabled: w ? "true" : "false" }
|
|
329
|
-
}),
|
|
329
|
+
}), C({ element: b }, {
|
|
330
330
|
dataset: { show: w ? "true" : "false" }
|
|
331
331
|
});
|
|
332
332
|
},
|
|
333
333
|
setError: (w = "") => {
|
|
334
|
-
|
|
334
|
+
C({ element: y }, {
|
|
335
335
|
className: w && o ? { add: "input-error" } : { remove: "input-error" }
|
|
336
|
-
}),
|
|
336
|
+
}), C({ element: N }, {
|
|
337
337
|
dataset: { show: w && o ? "true" : "false" },
|
|
338
338
|
innerHTML: `
|
|
339
339
|
${k}
|
|
@@ -342,7 +342,7 @@ const $ = ({ label: t, maskType: n, id: e, name: a, type: i = "text", placeholde
|
|
|
342
342
|
});
|
|
343
343
|
}
|
|
344
344
|
};
|
|
345
|
-
},
|
|
345
|
+
}, ce = async (t, n = {}) => {
|
|
346
346
|
const { method: e = "GET", headers: a = {}, body: i = null, ...m } = n;
|
|
347
347
|
try {
|
|
348
348
|
const l = {
|
|
@@ -367,7 +367,7 @@ const $ = ({ label: t, maskType: n, id: e, name: a, type: i = "text", placeholde
|
|
|
367
367
|
} catch (l) {
|
|
368
368
|
return { data: null, error: l instanceof Error ? l.message : "An error occurred" };
|
|
369
369
|
}
|
|
370
|
-
},
|
|
370
|
+
}, de = ({
|
|
371
371
|
title: t = "",
|
|
372
372
|
children: n,
|
|
373
373
|
onClose: e,
|
|
@@ -376,7 +376,7 @@ const $ = ({ label: t, maskType: n, id: e, name: a, type: i = "text", placeholde
|
|
|
376
376
|
}) => {
|
|
377
377
|
const m = p("button", {
|
|
378
378
|
className: "back-btn",
|
|
379
|
-
innerHTML:
|
|
379
|
+
innerHTML: ne,
|
|
380
380
|
dataset: { show: String(a) },
|
|
381
381
|
events: { click: () => d() }
|
|
382
382
|
}), l = p("h3", {
|
|
@@ -410,7 +410,7 @@ const $ = ({ label: t, maskType: n, id: e, name: a, type: i = "text", placeholde
|
|
|
410
410
|
c ? o.showModal() : o.close();
|
|
411
411
|
}
|
|
412
412
|
};
|
|
413
|
-
},
|
|
413
|
+
}, ue = ({ token: t, endpoint: n, beneficiaryCard: e = !1, isModal: a = !1, onCallback: i = () => null }) => {
|
|
414
414
|
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 = {
|
|
415
415
|
cardNumber: "",
|
|
416
416
|
expiryDate: "",
|
|
@@ -454,19 +454,19 @@ const $ = ({ label: t, maskType: n, id: e, name: a, type: i = "text", placeholde
|
|
|
454
454
|
onChange(g) {
|
|
455
455
|
L("zipCode", g, N);
|
|
456
456
|
}
|
|
457
|
-
}),
|
|
457
|
+
}), D = p("div", {
|
|
458
458
|
className: e ? "input-sections" : "inputs",
|
|
459
459
|
children: [d, c, b, y]
|
|
460
460
|
}), A = p("p", {
|
|
461
461
|
className: "submit-error",
|
|
462
462
|
dataset: { show: "false" }
|
|
463
463
|
// innerHTML: `//icon`
|
|
464
|
-
}), { element: j, setDisabled: w, setLoading: T } =
|
|
464
|
+
}), { element: j, setDisabled: w, setLoading: T } = se({
|
|
465
465
|
children: "Link Card",
|
|
466
466
|
type: "submit",
|
|
467
467
|
disabled: !0
|
|
468
468
|
}), S = (g = "") => {
|
|
469
|
-
|
|
469
|
+
C({ element: A }, {
|
|
470
470
|
dataset: { show: String(!!g) },
|
|
471
471
|
innerHTML: `
|
|
472
472
|
${k}
|
|
@@ -478,8 +478,8 @@ const $ = ({ label: t, maskType: n, id: e, name: a, type: i = "text", placeholde
|
|
|
478
478
|
};
|
|
479
479
|
function L(g, H, E) {
|
|
480
480
|
o[g] = H;
|
|
481
|
-
const { isValid: I, errors:
|
|
482
|
-
|
|
481
|
+
const { isValid: I, errors: x } = oe(o, e);
|
|
482
|
+
x[g] ? E(x[g]) : E(""), w(!I);
|
|
483
483
|
}
|
|
484
484
|
const O = p("div", {
|
|
485
485
|
className: "submit-button-wrapper",
|
|
@@ -487,20 +487,18 @@ const $ = ({ label: t, maskType: n, id: e, name: a, type: i = "text", placeholde
|
|
|
487
487
|
});
|
|
488
488
|
async function P(g) {
|
|
489
489
|
g.preventDefault();
|
|
490
|
-
const H = new FormData(g.target), E = Object.fromEntries(H.entries());
|
|
491
|
-
console.log(E);
|
|
492
|
-
const I = E?.cardNumber, D = E?.expiryDate, _ = E?.cvv, G = E?.zipCode, K = Number(D?.split("/")[0]), U = ie(D?.split("/")[1]), J = V(I);
|
|
490
|
+
const H = new FormData(g.target), E = Object.fromEntries(H.entries()), I = E?.cardNumber ? V(E?.cardNumber) : null, x = E?.expiryDate || null, _ = E?.cvv ? V(E?.cvv) : null, G = E?.zipCode ? V(E?.zipCode) : null, K = x ? Number(x?.split("/")[0]) : null, U = x ? ae(x?.split("/")[1]) : null;
|
|
493
491
|
B(!0), S("");
|
|
494
|
-
const M = await
|
|
492
|
+
const M = await ce(n, {
|
|
495
493
|
method: "POST",
|
|
496
494
|
body: {
|
|
497
495
|
token: t,
|
|
498
|
-
pan:
|
|
496
|
+
pan: I,
|
|
499
497
|
expiry_month: K,
|
|
500
498
|
expiry_year: U,
|
|
501
|
-
cvv:
|
|
499
|
+
cvv: _,
|
|
502
500
|
address: {
|
|
503
|
-
postal_code:
|
|
501
|
+
postal_code: G
|
|
504
502
|
}
|
|
505
503
|
}
|
|
506
504
|
});
|
|
@@ -511,7 +509,7 @@ const $ = ({ label: t, maskType: n, id: e, name: a, type: i = "text", placeholde
|
|
|
511
509
|
submit: P
|
|
512
510
|
},
|
|
513
511
|
children: [
|
|
514
|
-
|
|
512
|
+
D,
|
|
515
513
|
O
|
|
516
514
|
]
|
|
517
515
|
}), W = () => p("div", {
|
|
@@ -520,12 +518,12 @@ const $ = ({ label: t, maskType: n, id: e, name: a, type: i = "text", placeholde
|
|
|
520
518
|
<p>${l}</p>
|
|
521
519
|
|
|
522
520
|
<div>
|
|
523
|
-
${
|
|
521
|
+
${ee}
|
|
524
522
|
|
|
525
523
|
<span>Secured with 256-bit encryption</span>
|
|
526
524
|
</div>
|
|
527
525
|
`
|
|
528
|
-
}),
|
|
526
|
+
}), z = () => p("div", {
|
|
529
527
|
className: a ? "" : "non-modal-content",
|
|
530
528
|
children: [W(), Z()]
|
|
531
529
|
}), R = a ? null : p("div", {
|
|
@@ -539,15 +537,15 @@ const $ = ({ label: t, maskType: n, id: e, name: a, type: i = "text", placeholde
|
|
|
539
537
|
<span></span>
|
|
540
538
|
`
|
|
541
539
|
}),
|
|
542
|
-
|
|
540
|
+
z()
|
|
543
541
|
]
|
|
544
|
-
}), { element:
|
|
542
|
+
}), { element: Y, setModalVisibility: F } = a ? de({ title: m, children: z() }) : { element: null, setModalVisibility: () => {
|
|
545
543
|
} };
|
|
546
544
|
function q() {
|
|
547
|
-
|
|
545
|
+
Y && (document.body.appendChild(
|
|
548
546
|
p("div", {
|
|
549
547
|
className: s,
|
|
550
|
-
children: [
|
|
548
|
+
children: [Y]
|
|
551
549
|
})
|
|
552
550
|
), F(!0));
|
|
553
551
|
}
|
|
@@ -557,8 +555,8 @@ const $ = ({ label: t, maskType: n, id: e, name: a, type: i = "text", placeholde
|
|
|
557
555
|
closeModal: () => F(!1)
|
|
558
556
|
};
|
|
559
557
|
};
|
|
560
|
-
function
|
|
561
|
-
const { renderFormWithModal: l, nonModalForm: r, closeModal: u } =
|
|
558
|
+
function pe({ token: t, endpoint: n, beneficiaryCard: e, isModal: a, onCallback: i, onModalClose: m }) {
|
|
559
|
+
const { renderFormWithModal: l, nonModalForm: r, closeModal: u } = ue({
|
|
562
560
|
token: t,
|
|
563
561
|
endpoint: n,
|
|
564
562
|
beneficiaryCard: e,
|
|
@@ -578,7 +576,7 @@ function me({ token: t, endpoint: n, beneficiaryCard: e, isModal: a, onCallback:
|
|
|
578
576
|
}
|
|
579
577
|
};
|
|
580
578
|
}
|
|
581
|
-
function
|
|
579
|
+
function fe({
|
|
582
580
|
token: t,
|
|
583
581
|
endpoint: n,
|
|
584
582
|
isModal: e = !1,
|
|
@@ -587,9 +585,9 @@ function ve({
|
|
|
587
585
|
onCallback: m = () => null,
|
|
588
586
|
onClose: l = () => null
|
|
589
587
|
}) {
|
|
590
|
-
const r =
|
|
591
|
-
return
|
|
592
|
-
let u =
|
|
588
|
+
const r = Q(null);
|
|
589
|
+
return X(() => {
|
|
590
|
+
let u = pe({
|
|
593
591
|
token: t,
|
|
594
592
|
endpoint: n,
|
|
595
593
|
beneficiaryCard: a,
|
|
@@ -606,8 +604,8 @@ function ve({
|
|
|
606
604
|
return () => {
|
|
607
605
|
u.destroy();
|
|
608
606
|
};
|
|
609
|
-
}, [e, t, n, a, i]), e ? null : /* @__PURE__ */
|
|
607
|
+
}, [e, t, n, a, i]), e ? null : /* @__PURE__ */ J("div", { ref: r });
|
|
610
608
|
}
|
|
611
609
|
export {
|
|
612
|
-
|
|
610
|
+
fe as AddCard
|
|
613
611
|
};
|