@test-glide/glide-payment 0.0.1
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 +72 -0
- package/dist/index.es.js +578 -0
- package/dist/index.umd.js +72 -0
- package/dist/native/native.cjs.js +1 -0
- package/dist/native/native.es.js +257 -0
- package/dist/native/vite.svg +1 -0
- package/dist/react/react.cjs.js +72 -0
- package/dist/react/react.es.js +608 -0
- package/dist/react/style.css +1 -0
- package/dist/react/vite.svg +1 -0
- package/dist/style.css +1 -0
- package/dist/vite.svg +1 -0
- package/package.json +51 -0
|
@@ -0,0 +1,72 @@
|
|
|
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:r,innerHTML:h,textContent:o,attributes:d,styles:u,dataset:i,children:a,events:m}=e;if(l){const p=Array.isArray(l)?l:l.split(" ");t.classList.add(...p.filter(Boolean))}if(r&&(t.id=r),h&&(t.innerHTML=h),o&&(t.textContent=o),d)for(const[p,s]of Object.entries(d))s&&t.setAttribute(p,s);if(u)for(const[p,s]of Object.entries(u))t.style[p]=s;if(i)for(const[p,s]of Object.entries(i))t.dataset[p]=s;if(a&&t.append(...a.filter(Boolean)),m)for(const[p,s]of Object.entries(m))t.addEventListener(p,s);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:r,attributes:h,dataset:o,innerHTML:d,textContent:u,className:i}=e;if(r)for(const[a,m]of Object.entries(r))l.style[a]=m;if(h)for(const[a,m]of Object.entries(h))l.setAttribute(a,m);if(o)for(const[a,m]of Object.entries(o))l.dataset[a]=m;if(d!==void 0&&(l.innerHTML=d),u!==void 0&&(l.textContent=u),i?.add){const a=Array.isArray(i.add)?i.add:[i.add];l.classList.add(...a)}if(i?.remove){const a=Array.isArray(i.remove)?i.remove:[i.remove];l.classList.remove(...a)}i?.toggle&&(Array.isArray(i.toggle)?i.toggle:[i.toggle]).forEach(m=>l.classList.toggle(m))}}const P=`
|
|
2
|
+
<svg
|
|
3
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
4
|
+
width="16"
|
|
5
|
+
height="16"
|
|
6
|
+
fill="none"
|
|
7
|
+
viewBox="0 0 16 16"
|
|
8
|
+
>
|
|
9
|
+
<path
|
|
10
|
+
fill="#000"
|
|
11
|
+
fill-rule="evenodd"
|
|
12
|
+
d="M8 2.667a2 2 0 0 0-2 2v2h4v-2a2 2 0 0 0-2-2m3.333 4v-2a3.333 3.333 0 0 0-6.666 0v2a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h6.666a2 2 0 0 0 2-2v-4a2 2 0 0 0-2-2M4.667 8.001A.667.667 0 0 0 4 8.667v4c0 .369.298.667.667.667h6.666a.667.667 0 0 0 .667-.667v-4a.667.667 0 0 0-.667-.666zm2 2.666a1.333 1.333 0 1 1 2.666 0 1.333 1.333 0 0 1-2.666 0"
|
|
13
|
+
clip-rule="evenodd"
|
|
14
|
+
></path>
|
|
15
|
+
</svg>
|
|
16
|
+
`,Z=`
|
|
17
|
+
<svg
|
|
18
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
19
|
+
width="16"
|
|
20
|
+
height="16"
|
|
21
|
+
fill="none"
|
|
22
|
+
stroke="currentColor"
|
|
23
|
+
stroke-linecap="round"
|
|
24
|
+
stroke-linejoin="round"
|
|
25
|
+
stroke-width="2"
|
|
26
|
+
class="lucide lucide-loader-icon lucide-loader"
|
|
27
|
+
viewBox="0 0 24 24"
|
|
28
|
+
>
|
|
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
|
+
</svg>
|
|
31
|
+
`,W=`<svg
|
|
32
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
33
|
+
width="20"
|
|
34
|
+
height="20"
|
|
35
|
+
fill="none"
|
|
36
|
+
viewBox="0 0 24 24"
|
|
37
|
+
>
|
|
38
|
+
<path
|
|
39
|
+
fill="#071B32"
|
|
40
|
+
d="M9.709 21.493a.44.44 0 0 1-.325-.146l-8.25-9a.533.533 0 0 1 0-.707l8.25-9a.432.432 0 0 1 .648.013.53.53 0 0 1 0 .694l-7.925 8.646 7.925 8.646c.18.195.18.512 0 .707a.44.44 0 0 1-.323.147"
|
|
41
|
+
></path>
|
|
42
|
+
<path
|
|
43
|
+
fill="#071B32"
|
|
44
|
+
d="M22.542 12.494H1.459c-.253 0-.459-.224-.459-.5s.206-.5.459-.5h21.083c.253 0 .458.224.458.5s-.205.5-.458.5"
|
|
45
|
+
></path>
|
|
46
|
+
</svg>`,L=`
|
|
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:r="button",className:h="",variant:o="primary"})=>{const d=c("span",{className:"button-spinner",innerHTML:Z,dataset:{show:"false"}}),u=c("span",{className:"button-label",children:[null],textContent:n}),i=c("button",{className:`custom-button ${o} ${l} ${h}`,attributes:{type:r,...t?{disabled:"true"}:{}},events:{click:e},children:[d,u]}),a=(p=!1)=>{N({element:d},{dataset:{show:String(p)}}),m(p)},m=(p=!1)=>{p?i.setAttribute("disabled","true"):i.removeAttribute("disabled")};return{element:i,setLoading:a,setDisabled:m}},R=({content:n,position:e="top",delay:t=200,maxWidth:l=250,className:r="",id:h=""})=>{var o=c("div",{className:`tooltip ${e} ${r}`,styles:{maxWidth:`${l}px`},attributes:{role:"tooltip"},dataset:{show:"false"},innerHTML:`
|
|
49
|
+
<div class="tooltip-content">${n}</div>
|
|
50
|
+
<div class="tooltip-arrow"></div>
|
|
51
|
+
`});let d=null;var a=c("span",{className:"tooltip-trigger",innerHTML:L,events:{mouseenter:()=>{t>0?d=window.setTimeout(()=>{o.dataset.show="true",m()},t):(o.dataset.show="true",m())},mouseleave:()=>{d&&clearTimeout(d),o.dataset.show="false"}}});function m(){if(!a||!o)return;const s=a.getBoundingClientRect(),v=o.getBoundingClientRect(),y=8;let w,g;switch(e){case"top":w=s.top-v.height-y,g=s.left+s.width/2-v.width/2;break;case"bottom":w=s.bottom+y,g=s.left+s.width/2-v.width/2;break;case"left":w=s.top+s.height/2-v.height/2,g=s.left-v.width-y;break;case"right":w=s.top+s.height/2-v.height/2,g=s.right+y;break;default:w=s.top-v.height-y,g=s.left+s.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),o.style.top=`${w}px`,o.style.left=`${g}px`}return c("div",{className:"tooltip-wrapper",id:`tooltip-${h}`,children:[a,o]})},_=n=>{const e={},t=Object.values(n).every(r=>!r||r.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 r=n.expiryDate.replace(/\D/g,"");if(r.length<4)e.expiryDate="Enter complete expiry date (MM/YY)";else{const h=parseInt(r.substring(0,2),10),o=parseInt(r.substring(2,4),10);if(isNaN(h)||h<1||h>12)e.expiryDate="Invalid month (must be 01-12)";else if(isNaN(o)||o<0||o>99)e.expiryDate="Invalid year";else{const d=new Date,u=d.getFullYear(),i=d.getMonth()+1,a=Math.floor(u/100)*100,m=a+o,p=a+100+o;let s;m>=u&&m<=u+20?s=m:(p>=u&&p<=u+20,s=p),s<u||s===u&&h<i?e.expiryDate="Card has expired":s>u+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 r=l+e;return r>=t&&r<=t+20||(r=l+100+e,r>=t&&r<=t+20)?r: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:r="text",placeholder:h="Enter value",tooltip:o="",onChange:d})=>{const u=["card","expiry","phone","cvv","zip"].includes(e)?"numeric":"",i=c("label",{className:"input-label",innerHTML:n,attributes:{for:t}});let a=!1;const p=c("input",{id:t||"input-id",className:"styled-input",attributes:{placeholder:h,type:r,inputMode:u,name:l},events:{input:s,blur:v,keydown:b=>{b.key==="Enter"&&(a=!0)}}});function s(b){const k=e!=="none"?U(b?.target?.value,e):b?.target?.value;p.value=k,d?.(k)}function v(){a=!0,d?.(p?.value||"")}const y=c("div",{className:"input-loader",innerHTML:'<div class="loader"></div>',dataset:{show:"false"}}),w=o?c("div",{className:"input-right-element",children:[R({content:o,id:t})]}):null,g=c("div",{className:"input-wrapper",children:[p,y,w]}),x=c("div",{className:"error-message",dataset:{show:"false"},innerHTML:`
|
|
52
|
+
${L}
|
|
53
|
+
<span></span>
|
|
54
|
+
`});return{element:c("div",{className:"custom-input-group",children:[i,g,x]}),setLoading:b=>{N({element:g},{dataset:{loading:b?"true":"false"}}),N({element:p},{attributes:{disabled:b?"true":"false"}}),N({element:y},{dataset:{show:b?"true":"false"}})},setError:(b="")=>{N({element:g},{className:b&&a?{add:"input-error"}:{remove:"input-error"}}),N({element:x},{dataset:{show:b&&a?"true":"false"},innerHTML:`
|
|
55
|
+
${L}
|
|
56
|
+
<span>${b||""}</span>
|
|
57
|
+
`})}}},J=async(n,e={})=>{const{method:t="GET",headers:l={},body:r=null,...h}=e;try{const o={method:t,headers:{Accept:"*/*","Content-Type":"application/json",...l},...h};r&&["POST","PUT","PATCH","DELETE"].includes(t.toUpperCase())&&(o.body=typeof r=="string"?r:JSON.stringify(r));const d=await fetch(n,o),u=d.headers.get("content-type");let i;if(u?.includes("application/json")?i=await d.json():i=await d.text(),!d.ok){const a=i;throw new Error(a?.message||`HTTP error! status: ${d.status}`)}return{data:i,error:null}}catch(o){return{data:null,error:o instanceof Error?o.message:"An error occurred"}}},Q=({title:n="",children:e,onClose:t,showBackBtn:l=!1,showCloseBtn:r=!0})=>{const h=c("button",{className:"back-btn",innerHTML:W,dataset:{show:String(l)},events:{click:()=>m()}}),o=c("h3",{textContent:n}),d=c("button",{className:"close-btn",innerHTML:"×",dataset:{show:String(r)},attributes:{"aria-label":"Close modal"},events:{click:()=>m()}}),u=c("div",{className:"modal-header",children:[h,o,d]}),i=c("div",{className:"modal-content",children:[e]}),a=c("dialog",{className:"custom-modal",children:[u,i],events:{cancel:s=>{s.preventDefault(),m()}}}),m=()=>{a.close(),t?.()};return{element:a,setModalVisibility:s=>{s?a.showModal():a.close()}}},X=({token:n,endpoint:e,beneficiaryCard:t=!1,isModal:l=!1,onCallback:r=()=>null})=>{const h=t?"Enter Recipient Debit Card Details":"Enter Your Debit Card Details",o=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",u=t?"Enter recipient's card number":"Enter your card number",i=`add-card-form-wrapper${t?" recipient-form":""}`,a={cardNumber:"",expiryDate:"",cvv:"",zipCode:""},{element:m,setError:p}=$({label:d,placeholder:u,id:"card-number-input",name:"cardNumber",maskType:"card",onChange(f){A("cardNumber",f,p)}}),{element:s,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,s,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
|
+
${L}
|
|
59
|
+
${f||""}
|
|
60
|
+
`})},j=(f=!0)=>{b(f),k(f)};function A(f,I,E){a[f]=I;const{isValid:V,errors:D}=_(a);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),r?.({success:!1,error:C.error})):(console.log("Request success:",C.data),j(!1),r?.({success:!0,data:C.data}))}const se=()=>c("form",{events:{submit:ne},children:[T,te]}),re=()=>c("div",{className:"form-title",innerHTML:`
|
|
61
|
+
<p>${o}</p>
|
|
62
|
+
|
|
63
|
+
<div>
|
|
64
|
+
${P}
|
|
65
|
+
|
|
66
|
+
<span>Secured with 256-bit encryption</span>
|
|
67
|
+
</div>
|
|
68
|
+
`}),Y=()=>c("div",{className:l?"":"non-modal-content",children:[re(),se()]}),oe=l?null:c("div",{className:`${i} non-modal`,children:[c("div",{className:"non-modal-header",innerHTML:`
|
|
69
|
+
<span></span>
|
|
70
|
+
<h3>${h}</h3>
|
|
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:i,children:[F]})),O(!0))}return{renderFormWithModal:ie,nonModalForm:oe,closeModal:()=>O(!1)}};function ee({token:n,endpoint:e,beneficiaryCard:t,isModal:l,onCallback:r}){const{renderFormWithModal:h,nonModalForm:o,closeModal:d}=X({token:n,endpoint:e,beneficiaryCard:t,isModal:l,onCallback:r});return{mount(u){const i="className"in u?document.querySelector(u.className):"id"in u?document.getElementById(u.id):u.element;i&&o&&i.appendChild(o)},open(){h()},destroy(){d()}}}M.init=ee,Object.defineProperty(M,Symbol.toStringTag,{value:"Module"})}));
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),g=require("react"),E=i=>{const r={},o=Object.values(i).every(e=>!e||e.trim()===""),d=i.cardNumber?.replace(/\s/g,"");if(d?/^\d{13,19}$/.test(d)||(r.cardNumber="Card number must be 13-19 digits"):r.cardNumber="Card number is required",!i.expiryDate)r.expiryDate="Expiry date is required";else{const e=i.expiryDate.replace(/\D/g,"");if(e.length<4)r.expiryDate="Enter complete expiry date (MM/YY)";else{const f=parseInt(e.substring(0,2),10),s=parseInt(e.substring(2,4),10);if(isNaN(f)||f<1||f>12)r.expiryDate="Invalid month (must be 01-12)";else if(isNaN(s)||s<0||s>99)r.expiryDate="Invalid year";else{const l=new Date,a=l.getFullYear(),u=l.getMonth()+1,x=Math.floor(a/100)*100,h=x+s,b=x+100+s;let p;h>=a&&h<=a+20?p=h:(b>=a&&b<=a+20,p=b),p<a||p===a&&f<u?r.expiryDate="Card has expired":p>a+20&&(r.expiryDate="Expiry year is too far in the future")}}}return i.cvv?.trim()?/^\d{3,4}$/.test(i.cvv.trim())||(r.cvv="CVV must be 3 or 4 digits"):r.cvv="CVV is required",i.zipCode?.trim()?/^[A-Z0-9\s-]{3,10}$/i.test(i.zipCode.trim())||(r.zipCode="Invalid ZIP code format"):r.zipCode="Postal code is required",{isValid:Object.keys(r).length===0,errors:r,isEmpty:o}};function k(i){const r=parseInt(i,10);if(isNaN(r)||r<0||r>99)return null;const o=new Date().getFullYear(),d=Math.floor(o/100)*100;let e=d+r;return e>=o&&e<=o+20||(e=d+100+r,e>=o&&e<=o+20)?e:d+100+r}function S(i=""){return i.trim().replaceAll(/\s/g,"").replaceAll("-","")}const A=async(i,r={})=>{const{method:o="GET",headers:d={},body:e=null,...f}=r;try{const s={method:o,headers:{Accept:"*/*","Content-Type":"application/json",...d},...f};e&&["POST","PUT","PATCH","DELETE"].includes(o.toUpperCase())&&(s.body=typeof e=="string"?e:JSON.stringify(e));const l=await fetch(i,s),a=l.headers.get("content-type");let u;if(a?.includes("application/json")?u=await l.json():u=await l.text(),!l.ok){const x=u;throw new Error(x?.message||`HTTP error! status: ${l.status}`)}return{data:u,error:null}}catch(s){return{data:null,error:s instanceof Error?s.message:"An error occurred"}}},{View:m,Text:c,TextInput:T,ActivityIndicator:q,TouchableOpacity:O,StyleSheet:L}=require("react-native"),R=({token:i,endpoint:r,beneficiaryCard:o=!1,onCallback:d})=>{const[e,f]=g.useState({cardNumber:"",expiryDate:"",cvv:"",zipCode:""}),[s,l]=g.useState({}),[a,u]=g.useState(null),[x,h]=g.useState(!1),b=g.useMemo(()=>E(e).isValid,[e]),p=(y,D)=>{const C={...e,[y]:D};f(C);const{errors:v}=E(C);l(v),a&&u(null)},I=async()=>{const{isValid:y,errors:D}=E(e);if(!y){l(D);return}const{cardNumber:C,expiryDate:v,cvv:M,zipCode:V}=e,N=Number(v?.split("/")[0]),z=k(v?.split("/")[1]??""),P=S(C);if(!N||!z){u("Invalid expiry date");return}h(!0),u(null);const j=await A(r,{method:"POST",body:{token:i,pan:P,expiry_month:N,expiry_year:z,cvv:S(M),address:{postal_code:S(V)}}});h(!1),j.error?(u(j.error),d?.({success:!1,error:j.error})):d?.({success:!0,data:j.data})},Y=o?"Enter Recipient Debit Card Details":"Enter Your Debit Card Details",w=o?"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(m,{style:t.container,children:[n.jsx(c,{style:t.title,children:Y}),n.jsx(c,{style:t.description,children:w}),n.jsxs(m,{style:t.field,children:[n.jsx(c,{style:t.label,children:o?"Debit Card Number":"Your Debit Card Number"}),n.jsx(T,{value:e.cardNumber,onChangeText:y=>p("cardNumber",y),keyboardType:"number-pad",placeholder:o?"Enter recipient's card number":"Enter your card number",style:t.input}),!!s.cardNumber&&n.jsx(c,{style:t.error,children:s.cardNumber})]}),n.jsxs(m,{style:t.row,children:[n.jsxs(m,{style:[t.field,t.half],children:[n.jsx(c,{style:t.label,children:"Expiration Date"}),n.jsx(T,{value:e.expiryDate,onChangeText:y=>p("expiryDate",y),keyboardType:"number-pad",placeholder:"MM/YY",style:t.input}),!!s.expiryDate&&n.jsx(c,{style:t.error,children:s.expiryDate})]}),n.jsxs(m,{style:[t.field,t.half],children:[n.jsx(c,{style:t.label,children:"CVV"}),n.jsx(T,{value:e.cvv,onChangeText:y=>p("cvv",y),keyboardType:"number-pad",secureTextEntry:!0,placeholder:"3-Digit",style:t.input}),!!s.cvv&&n.jsx(c,{style:t.error,children:s.cvv})]})]}),n.jsxs(m,{style:t.field,children:[n.jsx(c,{style:t.label,children:"ZIP Code"}),n.jsx(T,{value:e.zipCode,onChangeText:y=>p("zipCode",y),keyboardType:"number-pad",placeholder:o?"ZIP Code":"Enter your ZIP Code",style:t.input}),!!s.zipCode&&n.jsx(c,{style:t.error,children:s.zipCode})]}),!!a&&n.jsx(c,{style:t.submitError,children:a}),n.jsx(O,{style:[t.button,!b||x?t.buttonDisabled:null],onPress:I,disabled:!b||x,children:x?n.jsx(q,{color:"#ffffff"}):n.jsx(c,{style:t.buttonText,children:"Link Card"})})]})},t=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;
|
|
@@ -0,0 +1,257 @@
|
|
|
1
|
+
import { jsxs as g, jsx as i } from "react/jsx-runtime";
|
|
2
|
+
import { useState as D, useMemo as A } from "react";
|
|
3
|
+
const z = (o) => {
|
|
4
|
+
const r = {}, s = Object.values(o).every(
|
|
5
|
+
(e) => !e || e.trim() === ""
|
|
6
|
+
), d = o.cardNumber?.replace(/\s/g, "");
|
|
7
|
+
if (d ? /^\d{13,19}$/.test(d) || (r.cardNumber = "Card number must be 13-19 digits") : r.cardNumber = "Card number is required", !o.expiryDate)
|
|
8
|
+
r.expiryDate = "Expiry date is required";
|
|
9
|
+
else {
|
|
10
|
+
const e = o.expiryDate.replace(/\D/g, "");
|
|
11
|
+
if (e.length < 4)
|
|
12
|
+
r.expiryDate = "Enter complete expiry date (MM/YY)";
|
|
13
|
+
else {
|
|
14
|
+
const f = parseInt(e.substring(0, 2), 10), n = parseInt(e.substring(2, 4), 10);
|
|
15
|
+
if (isNaN(f) || f < 1 || f > 12)
|
|
16
|
+
r.expiryDate = "Invalid month (must be 01-12)";
|
|
17
|
+
else if (isNaN(n) || n < 0 || n > 99)
|
|
18
|
+
r.expiryDate = "Invalid year";
|
|
19
|
+
else {
|
|
20
|
+
const l = /* @__PURE__ */ new Date(), a = l.getFullYear(), u = l.getMonth() + 1, h = Math.floor(a / 100) * 100, m = h + n, b = h + 100 + n;
|
|
21
|
+
let p;
|
|
22
|
+
m >= a && m <= a + 20 ? p = m : (b >= a && b <= a + 20, p = b), p < a || p === a && f < u ? r.expiryDate = "Card has expired" : p > a + 20 && (r.expiryDate = "Expiry year is too far in the future");
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
return o.cvv?.trim() ? /^\d{3,4}$/.test(o.cvv.trim()) || (r.cvv = "CVV must be 3 or 4 digits") : r.cvv = "CVV is required", o.zipCode?.trim() ? /^[A-Z0-9\s-]{3,10}$/i.test(o.zipCode.trim()) || (r.zipCode = "Invalid ZIP code format") : r.zipCode = "Postal code is required", {
|
|
27
|
+
isValid: Object.keys(r).length === 0,
|
|
28
|
+
errors: r,
|
|
29
|
+
isEmpty: s
|
|
30
|
+
};
|
|
31
|
+
};
|
|
32
|
+
function O(o) {
|
|
33
|
+
const r = parseInt(o, 10);
|
|
34
|
+
if (isNaN(r) || r < 0 || r > 99) return null;
|
|
35
|
+
const s = (/* @__PURE__ */ new Date()).getFullYear(), d = Math.floor(s / 100) * 100;
|
|
36
|
+
let e = d + r;
|
|
37
|
+
return e >= s && e <= s + 20 || (e = d + 100 + r, e >= s && e <= s + 20) ? e : d + 100 + r;
|
|
38
|
+
}
|
|
39
|
+
function S(o = "") {
|
|
40
|
+
return o.trim().replaceAll(/\s/g, "").replaceAll("-", "");
|
|
41
|
+
}
|
|
42
|
+
const q = async (o, r = {}) => {
|
|
43
|
+
const { method: s = "GET", headers: d = {}, body: e = null, ...f } = r;
|
|
44
|
+
try {
|
|
45
|
+
const n = {
|
|
46
|
+
method: s,
|
|
47
|
+
headers: {
|
|
48
|
+
Accept: "*/*",
|
|
49
|
+
"Content-Type": "application/json",
|
|
50
|
+
...d
|
|
51
|
+
},
|
|
52
|
+
...f
|
|
53
|
+
};
|
|
54
|
+
e && ["POST", "PUT", "PATCH", "DELETE"].includes(s.toUpperCase()) && (n.body = typeof e == "string" ? e : JSON.stringify(e));
|
|
55
|
+
const l = await fetch(o, n), a = l.headers.get("content-type");
|
|
56
|
+
let u;
|
|
57
|
+
if (a?.includes("application/json") ? u = await l.json() : u = await l.text(), !l.ok) {
|
|
58
|
+
const h = u;
|
|
59
|
+
throw new Error(
|
|
60
|
+
h?.message || `HTTP error! status: ${l.status}`
|
|
61
|
+
);
|
|
62
|
+
}
|
|
63
|
+
return { data: u, error: null };
|
|
64
|
+
} catch (n) {
|
|
65
|
+
return { data: null, error: n instanceof Error ? n.message : "An error occurred" };
|
|
66
|
+
}
|
|
67
|
+
}, {
|
|
68
|
+
View: x,
|
|
69
|
+
Text: c,
|
|
70
|
+
TextInput: E,
|
|
71
|
+
ActivityIndicator: L,
|
|
72
|
+
TouchableOpacity: Z,
|
|
73
|
+
StyleSheet: F
|
|
74
|
+
} = require("react-native"), H = ({
|
|
75
|
+
token: o,
|
|
76
|
+
endpoint: r,
|
|
77
|
+
beneficiaryCard: s = !1,
|
|
78
|
+
onCallback: d
|
|
79
|
+
}) => {
|
|
80
|
+
const [e, f] = D({
|
|
81
|
+
cardNumber: "",
|
|
82
|
+
expiryDate: "",
|
|
83
|
+
cvv: "",
|
|
84
|
+
zipCode: ""
|
|
85
|
+
}), [n, l] = D({}), [a, u] = D(null), [h, m] = D(!1), b = A(() => z(e).isValid, [e]), p = (y, N) => {
|
|
86
|
+
const C = { ...e, [y]: N };
|
|
87
|
+
f(C);
|
|
88
|
+
const { errors: v } = z(C);
|
|
89
|
+
l(v), a && u(null);
|
|
90
|
+
}, w = async () => {
|
|
91
|
+
const { isValid: y, errors: N } = z(e);
|
|
92
|
+
if (!y) {
|
|
93
|
+
l(N);
|
|
94
|
+
return;
|
|
95
|
+
}
|
|
96
|
+
const { cardNumber: C, expiryDate: v, cvv: P, zipCode: k } = e, I = Number(v?.split("/")[0]), Y = O(v?.split("/")[1] ?? ""), j = S(C);
|
|
97
|
+
if (!I || !Y) {
|
|
98
|
+
u("Invalid expiry date");
|
|
99
|
+
return;
|
|
100
|
+
}
|
|
101
|
+
m(!0), u(null);
|
|
102
|
+
const T = await q(r, {
|
|
103
|
+
method: "POST",
|
|
104
|
+
body: {
|
|
105
|
+
token: o,
|
|
106
|
+
pan: j,
|
|
107
|
+
expiry_month: I,
|
|
108
|
+
expiry_year: Y,
|
|
109
|
+
cvv: S(P),
|
|
110
|
+
address: {
|
|
111
|
+
postal_code: S(k)
|
|
112
|
+
}
|
|
113
|
+
}
|
|
114
|
+
});
|
|
115
|
+
m(!1), T.error ? (u(T.error), d?.({ success: !1, error: T.error })) : d?.({ success: !0, data: T.data });
|
|
116
|
+
}, V = s ? "Enter Recipient Debit Card Details" : "Enter Your Debit Card Details", M = s ? "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.";
|
|
117
|
+
return /* @__PURE__ */ g(x, { style: t.container, children: [
|
|
118
|
+
/* @__PURE__ */ i(c, { style: t.title, children: V }),
|
|
119
|
+
/* @__PURE__ */ i(c, { style: t.description, children: M }),
|
|
120
|
+
/* @__PURE__ */ g(x, { style: t.field, children: [
|
|
121
|
+
/* @__PURE__ */ i(c, { style: t.label, children: s ? "Debit Card Number" : "Your Debit Card Number" }),
|
|
122
|
+
/* @__PURE__ */ i(
|
|
123
|
+
E,
|
|
124
|
+
{
|
|
125
|
+
value: e.cardNumber,
|
|
126
|
+
onChangeText: (y) => p("cardNumber", y),
|
|
127
|
+
keyboardType: "number-pad",
|
|
128
|
+
placeholder: s ? "Enter recipient's card number" : "Enter your card number",
|
|
129
|
+
style: t.input
|
|
130
|
+
}
|
|
131
|
+
),
|
|
132
|
+
!!n.cardNumber && /* @__PURE__ */ i(c, { style: t.error, children: n.cardNumber })
|
|
133
|
+
] }),
|
|
134
|
+
/* @__PURE__ */ g(x, { style: t.row, children: [
|
|
135
|
+
/* @__PURE__ */ g(x, { style: [t.field, t.half], children: [
|
|
136
|
+
/* @__PURE__ */ i(c, { style: t.label, children: "Expiration Date" }),
|
|
137
|
+
/* @__PURE__ */ i(
|
|
138
|
+
E,
|
|
139
|
+
{
|
|
140
|
+
value: e.expiryDate,
|
|
141
|
+
onChangeText: (y) => p("expiryDate", y),
|
|
142
|
+
keyboardType: "number-pad",
|
|
143
|
+
placeholder: "MM/YY",
|
|
144
|
+
style: t.input
|
|
145
|
+
}
|
|
146
|
+
),
|
|
147
|
+
!!n.expiryDate && /* @__PURE__ */ i(c, { style: t.error, children: n.expiryDate })
|
|
148
|
+
] }),
|
|
149
|
+
/* @__PURE__ */ g(x, { style: [t.field, t.half], children: [
|
|
150
|
+
/* @__PURE__ */ i(c, { style: t.label, children: "CVV" }),
|
|
151
|
+
/* @__PURE__ */ i(
|
|
152
|
+
E,
|
|
153
|
+
{
|
|
154
|
+
value: e.cvv,
|
|
155
|
+
onChangeText: (y) => p("cvv", y),
|
|
156
|
+
keyboardType: "number-pad",
|
|
157
|
+
secureTextEntry: !0,
|
|
158
|
+
placeholder: "3-Digit",
|
|
159
|
+
style: t.input
|
|
160
|
+
}
|
|
161
|
+
),
|
|
162
|
+
!!n.cvv && /* @__PURE__ */ i(c, { style: t.error, children: n.cvv })
|
|
163
|
+
] })
|
|
164
|
+
] }),
|
|
165
|
+
/* @__PURE__ */ g(x, { style: t.field, children: [
|
|
166
|
+
/* @__PURE__ */ i(c, { style: t.label, children: "ZIP Code" }),
|
|
167
|
+
/* @__PURE__ */ i(
|
|
168
|
+
E,
|
|
169
|
+
{
|
|
170
|
+
value: e.zipCode,
|
|
171
|
+
onChangeText: (y) => p("zipCode", y),
|
|
172
|
+
keyboardType: "number-pad",
|
|
173
|
+
placeholder: s ? "ZIP Code" : "Enter your ZIP Code",
|
|
174
|
+
style: t.input
|
|
175
|
+
}
|
|
176
|
+
),
|
|
177
|
+
!!n.zipCode && /* @__PURE__ */ i(c, { style: t.error, children: n.zipCode })
|
|
178
|
+
] }),
|
|
179
|
+
!!a && /* @__PURE__ */ i(c, { style: t.submitError, children: a }),
|
|
180
|
+
/* @__PURE__ */ i(
|
|
181
|
+
Z,
|
|
182
|
+
{
|
|
183
|
+
style: [t.button, !b || h ? t.buttonDisabled : null],
|
|
184
|
+
onPress: w,
|
|
185
|
+
disabled: !b || h,
|
|
186
|
+
children: h ? /* @__PURE__ */ i(L, { color: "#ffffff" }) : /* @__PURE__ */ i(c, { style: t.buttonText, children: "Link Card" })
|
|
187
|
+
}
|
|
188
|
+
)
|
|
189
|
+
] });
|
|
190
|
+
}, t = F.create({
|
|
191
|
+
container: {
|
|
192
|
+
padding: 16,
|
|
193
|
+
borderRadius: 12,
|
|
194
|
+
backgroundColor: "#ffffff",
|
|
195
|
+
gap: 12
|
|
196
|
+
},
|
|
197
|
+
title: {
|
|
198
|
+
fontSize: 18,
|
|
199
|
+
fontWeight: "600"
|
|
200
|
+
},
|
|
201
|
+
description: {
|
|
202
|
+
fontSize: 14,
|
|
203
|
+
color: "#444"
|
|
204
|
+
},
|
|
205
|
+
field: {
|
|
206
|
+
marginTop: 8
|
|
207
|
+
},
|
|
208
|
+
row: {
|
|
209
|
+
flexDirection: "row",
|
|
210
|
+
gap: 12
|
|
211
|
+
},
|
|
212
|
+
half: {
|
|
213
|
+
flex: 1
|
|
214
|
+
},
|
|
215
|
+
label: {
|
|
216
|
+
fontSize: 13,
|
|
217
|
+
marginBottom: 4,
|
|
218
|
+
color: "#222"
|
|
219
|
+
},
|
|
220
|
+
input: {
|
|
221
|
+
borderWidth: 1,
|
|
222
|
+
borderColor: "#ccc",
|
|
223
|
+
borderRadius: 8,
|
|
224
|
+
paddingHorizontal: 10,
|
|
225
|
+
paddingVertical: 8,
|
|
226
|
+
fontSize: 14
|
|
227
|
+
},
|
|
228
|
+
error: {
|
|
229
|
+
color: "#cc0000",
|
|
230
|
+
fontSize: 12,
|
|
231
|
+
marginTop: 4
|
|
232
|
+
},
|
|
233
|
+
submitError: {
|
|
234
|
+
color: "#cc0000",
|
|
235
|
+
fontSize: 13,
|
|
236
|
+
marginTop: 8
|
|
237
|
+
},
|
|
238
|
+
button: {
|
|
239
|
+
marginTop: 16,
|
|
240
|
+
paddingVertical: 12,
|
|
241
|
+
borderRadius: 999,
|
|
242
|
+
alignItems: "center",
|
|
243
|
+
justifyContent: "center",
|
|
244
|
+
backgroundColor: "#111827"
|
|
245
|
+
},
|
|
246
|
+
buttonDisabled: {
|
|
247
|
+
opacity: 0.6
|
|
248
|
+
},
|
|
249
|
+
buttonText: {
|
|
250
|
+
color: "#ffffff",
|
|
251
|
+
fontSize: 15,
|
|
252
|
+
fontWeight: "500"
|
|
253
|
+
}
|
|
254
|
+
});
|
|
255
|
+
export {
|
|
256
|
+
H as AddCard
|
|
257
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
|
@@ -0,0 +1,72 @@
|
|
|
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:o,id:s,innerHTML:m,textContent:r,attributes:c,styles:d,dataset:i,children:l,events:h}=e;if(o){const u=Array.isArray(o)?o:o.split(" ");t.classList.add(...u.filter(Boolean))}if(s&&(t.id=s),m&&(t.innerHTML=m),r&&(t.textContent=r),c)for(const[u,a]of Object.entries(c))a&&t.setAttribute(u,a);if(d)for(const[u,a]of Object.entries(d))t.style[u]=a;if(i)for(const[u,a]of Object.entries(i))t.dataset[u]=a;if(l&&t.append(...l.filter(Boolean)),h)for(const[u,a]of Object.entries(h))t.addEventListener(u,a);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 o of t){const{styles:s,attributes:m,dataset:r,innerHTML:c,textContent:d,className:i}=e;if(s)for(const[l,h]of Object.entries(s))o.style[l]=h;if(m)for(const[l,h]of Object.entries(m))o.setAttribute(l,h);if(r)for(const[l,h]of Object.entries(r))o.dataset[l]=h;if(c!==void 0&&(o.innerHTML=c),d!==void 0&&(o.textContent=d),i?.add){const l=Array.isArray(i.add)?i.add:[i.add];o.classList.add(...l)}if(i?.remove){const l=Array.isArray(i.remove)?i.remove:[i.remove];o.classList.remove(...l)}i?.toggle&&(Array.isArray(i.toggle)?i.toggle:[i.toggle]).forEach(h=>o.classList.toggle(h))}}const ee=`
|
|
2
|
+
<svg
|
|
3
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
4
|
+
width="16"
|
|
5
|
+
height="16"
|
|
6
|
+
fill="none"
|
|
7
|
+
viewBox="0 0 16 16"
|
|
8
|
+
>
|
|
9
|
+
<path
|
|
10
|
+
fill="#000"
|
|
11
|
+
fill-rule="evenodd"
|
|
12
|
+
d="M8 2.667a2 2 0 0 0-2 2v2h4v-2a2 2 0 0 0-2-2m3.333 4v-2a3.333 3.333 0 0 0-6.666 0v2a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h6.666a2 2 0 0 0 2-2v-4a2 2 0 0 0-2-2M4.667 8.001A.667.667 0 0 0 4 8.667v4c0 .369.298.667.667.667h6.666a.667.667 0 0 0 .667-.667v-4a.667.667 0 0 0-.667-.666zm2 2.666a1.333 1.333 0 1 1 2.666 0 1.333 1.333 0 0 1-2.666 0"
|
|
13
|
+
clip-rule="evenodd"
|
|
14
|
+
></path>
|
|
15
|
+
</svg>
|
|
16
|
+
`,te=`
|
|
17
|
+
<svg
|
|
18
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
19
|
+
width="16"
|
|
20
|
+
height="16"
|
|
21
|
+
fill="none"
|
|
22
|
+
stroke="currentColor"
|
|
23
|
+
stroke-linecap="round"
|
|
24
|
+
stroke-linejoin="round"
|
|
25
|
+
stroke-width="2"
|
|
26
|
+
class="lucide lucide-loader-icon lucide-loader"
|
|
27
|
+
viewBox="0 0 24 24"
|
|
28
|
+
>
|
|
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
|
+
</svg>
|
|
31
|
+
`,ne=`<svg
|
|
32
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
33
|
+
width="20"
|
|
34
|
+
height="20"
|
|
35
|
+
fill="none"
|
|
36
|
+
viewBox="0 0 24 24"
|
|
37
|
+
>
|
|
38
|
+
<path
|
|
39
|
+
fill="#071B32"
|
|
40
|
+
d="M9.709 21.493a.44.44 0 0 1-.325-.146l-8.25-9a.533.533 0 0 1 0-.707l8.25-9a.432.432 0 0 1 .648.013.53.53 0 0 1 0 .694l-7.925 8.646 7.925 8.646c.18.195.18.512 0 .707a.44.44 0 0 1-.323.147"
|
|
41
|
+
></path>
|
|
42
|
+
<path
|
|
43
|
+
fill="#071B32"
|
|
44
|
+
d="M22.542 12.494H1.459c-.253 0-.459-.224-.459-.5s.206-.5.459-.5h21.083c.253 0 .458.224.458.5s-.205.5-.458.5"
|
|
45
|
+
></path>
|
|
46
|
+
</svg>`,k=`
|
|
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:o="medium",type:s="button",className:m="",variant:r="primary"})=>{const c=p("span",{className:"button-spinner",innerHTML:te,dataset:{show:"false"}}),d=p("span",{className:"button-label",children:[null],textContent:n}),i=p("button",{className:`custom-button ${r} ${o} ${m}`,attributes:{type:s,...t?{disabled:"true"}:{}},events:{click:e},children:[c,d]}),l=(u=!1)=>{x({element:c},{dataset:{show:String(u)}}),h(u)},h=(u=!1)=>{u?i.setAttribute("disabled","true"):i.removeAttribute("disabled")};return{element:i,setLoading:l,setDisabled:h}},se=({content:n,position:e="top",delay:t=200,maxWidth:o=250,className:s="",id:m=""})=>{var r=p("div",{className:`tooltip ${e} ${s}`,styles:{maxWidth:`${o}px`},attributes:{role:"tooltip"},dataset:{show:"false"},innerHTML:`
|
|
49
|
+
<div class="tooltip-content">${n}</div>
|
|
50
|
+
<div class="tooltip-arrow"></div>
|
|
51
|
+
`});let c=null;var l=p("span",{className:"tooltip-trigger",innerHTML:k,events:{mouseenter:()=>{t>0?c=window.setTimeout(()=>{r.dataset.show="true",h()},t):(r.dataset.show="true",h())},mouseleave:()=>{c&&clearTimeout(c),r.dataset.show="false"}}});function h(){if(!l||!r)return;const a=l.getBoundingClientRect(),v=r.getBoundingClientRect(),y=8;let w,g;switch(e){case"top":w=a.top-v.height-y,g=a.left+a.width/2-v.width/2;break;case"bottom":w=a.bottom+y,g=a.left+a.width/2-v.width/2;break;case"left":w=a.top+a.height/2-v.height/2,g=a.left-v.width-y;break;case"right":w=a.top+a.height/2-v.height/2,g=a.right+y;break;default:w=a.top-v.height-y,g=a.left+a.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),r.style.top=`${w}px`,r.style.left=`${g}px`}return p("div",{className:"tooltip-wrapper",id:`tooltip-${m}`,children:[l,r]})},oe=n=>{const e={},t=Object.values(n).every(s=>!s||s.trim()===""),o=n.cardNumber?.replace(/\s/g,"");if(o?/^\d{13,19}$/.test(o)||(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 s=n.expiryDate.replace(/\D/g,"");if(s.length<4)e.expiryDate="Enter complete expiry date (MM/YY)";else{const m=parseInt(s.substring(0,2),10),r=parseInt(s.substring(2,4),10);if(isNaN(m)||m<1||m>12)e.expiryDate="Invalid month (must be 01-12)";else if(isNaN(r)||r<0||r>99)e.expiryDate="Invalid year";else{const c=new Date,d=c.getFullYear(),i=c.getMonth()+1,l=Math.floor(d/100)*100,h=l+r,u=l+100+r;let a;h>=d&&h<=d+20?a=h:(u>=d&&u<=d+20,a=u),a<d||a===d&&m<i?e.expiryDate="Card has expired":a>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(),o=Math.floor(t/100)*100;let s=o+e;return s>=t&&s<=t+20||(s=o+100+e,s>=t&&s<=t+20)?s:o+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:o,type:s="text",placeholder:m="Enter value",tooltip:r="",onChange:c})=>{const d=["card","expiry","phone","cvv","zip"].includes(e)?"numeric":"",i=p("label",{className:"input-label",innerHTML:n,attributes:{for:t}});let l=!1;const u=p("input",{id:t||"input-id",className:"styled-input",attributes:{placeholder:m,type:s,inputMode:d,name:o},events:{input:a,blur:v,keydown:b=>{b.key==="Enter"&&(l=!0)}}});function a(b){const D=e!=="none"?le(b?.target?.value,e):b?.target?.value;u.value=D,c?.(D)}function v(){l=!0,c?.(u?.value||"")}const y=p("div",{className:"input-loader",innerHTML:'<div class="loader"></div>',dataset:{show:"false"}}),w=r?p("div",{className:"input-right-element",children:[se({content:r,id:t})]}):null,g=p("div",{className:"input-wrapper",children:[u,y,w]}),N=p("div",{className:"error-message",dataset:{show:"false"},innerHTML:`
|
|
52
|
+
${k}
|
|
53
|
+
<span></span>
|
|
54
|
+
`});return{element:p("div",{className:"custom-input-group",children:[i,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&&l?{add:"input-error"}:{remove:"input-error"}}),x({element:N},{dataset:{show:b&&l?"true":"false"},innerHTML:`
|
|
55
|
+
${k}
|
|
56
|
+
<span>${b||""}</span>
|
|
57
|
+
`})}}},ce=async(n,e={})=>{const{method:t="GET",headers:o={},body:s=null,...m}=e;try{const r={method:t,headers:{Accept:"*/*","Content-Type":"application/json",...o},...m};s&&["POST","PUT","PATCH","DELETE"].includes(t.toUpperCase())&&(r.body=typeof s=="string"?s:JSON.stringify(s));const c=await fetch(n,r),d=c.headers.get("content-type");let i;if(d?.includes("application/json")?i=await c.json():i=await c.text(),!c.ok){const l=i;throw new Error(l?.message||`HTTP error! status: ${c.status}`)}return{data:i,error:null}}catch(r){return{data:null,error:r instanceof Error?r.message:"An error occurred"}}},de=({title:n="",children:e,onClose:t,showBackBtn:o=!1,showCloseBtn:s=!0})=>{const m=p("button",{className:"back-btn",innerHTML:ne,dataset:{show:String(o)},events:{click:()=>h()}}),r=p("h3",{textContent:n}),c=p("button",{className:"close-btn",innerHTML:"×",dataset:{show:String(s)},attributes:{"aria-label":"Close modal"},events:{click:()=>h()}}),d=p("div",{className:"modal-header",children:[m,r,c]}),i=p("div",{className:"modal-content",children:[e]}),l=p("dialog",{className:"custom-modal",children:[d,i],events:{cancel:a=>{a.preventDefault(),h()}}}),h=()=>{l.close(),t?.()};return{element:l,setModalVisibility:a=>{a?l.showModal():l.close()}}},ue=({token:n,endpoint:e,beneficiaryCard:t=!1,isModal:o=!1,onCallback:s=()=>null})=>{const m=t?"Enter Recipient Debit Card Details":"Enter Your Debit Card Details",r=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",i=`add-card-form-wrapper${t?" recipient-form":""}`,l={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:a,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,a,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
|
+
${k}
|
|
59
|
+
${f||""}
|
|
60
|
+
`})},B=(f=!0)=>{b(f),D(f)};function L(f,H,E){l[f]=H;const{isValid:j,errors:T}=oe(l);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),s?.({success:!1,error:C.error})):(console.log("Request success:",C.data),B(!1),s?.({success:!0,data:C.data}))}const q=()=>p("form",{events:{submit:Z},children:[M,P]}),R=()=>p("div",{className:"form-title",innerHTML:`
|
|
61
|
+
<p>${r}</p>
|
|
62
|
+
|
|
63
|
+
<div>
|
|
64
|
+
${ee}
|
|
65
|
+
|
|
66
|
+
<span>Secured with 256-bit encryption</span>
|
|
67
|
+
</div>
|
|
68
|
+
`}),z=()=>p("div",{className:o?"":"non-modal-content",children:[R(),q()]}),W=o?null:p("div",{className:`${i} non-modal`,children:[p("div",{className:"non-modal-header",innerHTML:`
|
|
69
|
+
<span></span>
|
|
70
|
+
<h3>${m}</h3>
|
|
71
|
+
<span></span>
|
|
72
|
+
`}),z()]}),{element:Y,setModalVisibility:F}=o?de({title:m,children:z()}):{element:null,setModalVisibility:()=>{}};function _(){Y&&(document.body.appendChild(p("div",{className:i,children:[Y]})),F(!0))}return{renderFormWithModal:_,nonModalForm:W,closeModal:()=>F(!1)}};function pe({token:n,endpoint:e,beneficiaryCard:t,isModal:o,onCallback:s}){const{renderFormWithModal:m,nonModalForm:r,closeModal:c}=ue({token:n,endpoint:e,beneficiaryCard:t,isModal:o,onCallback:s});return{mount(d){const i="className"in d?document.querySelector(d.className):"id"in d?document.getElementById(d.id):d.element;i&&r&&i.appendChild(r)},open(){m()},destroy(){c()}}}function me({token:n,endpoint:e,isModal:t=!1,beneficiaryCard:o=!1,isOpen:s=!1,onCallback:m=()=>null}){const r=O.useRef(null);return O.useEffect(()=>{let c=pe({token:n,endpoint:e,beneficiaryCard:o,isModal:t,onCallback:m});if(t)s?c.open():c.destroy();else{if(!r?.current)return;c.mount({element:r.current})}return()=>{c.destroy()}},[t,n,e,o,s]),t?null:X.jsx("div",{ref:r})}exports.AddCard=me;
|