@tap-payments/connect-v2 1.0.2-development → 1.0.2-sandbox
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 +39 -30
- package/build/index.cjs.js +1 -1
- package/build/index.d.ts +6 -1
- package/build/index.esm.js +170 -142
- package/package.json +2 -1
package/README.md
CHANGED
|
@@ -43,6 +43,10 @@ const App = () => {
|
|
|
43
43
|
theme={ConnectTheme.DARK}
|
|
44
44
|
scope={ConnectScope.MERCHANT}
|
|
45
45
|
onClose={() => setOpen(false)}
|
|
46
|
+
onSuccess={(res) => console.log('success', res)}
|
|
47
|
+
onError={(err) => console.log('error', err)}
|
|
48
|
+
onCreated={(res) => console.log('created', res)}
|
|
49
|
+
onBoardCompleted={() => console.log('board completed')}
|
|
46
50
|
features={{ poweredBy: true, closeButton: true }}
|
|
47
51
|
mode={ConnectMode.POPUP}
|
|
48
52
|
/>
|
|
@@ -73,7 +77,7 @@ You can also use the SDK without a React build setup by including the UMD bundle
|
|
|
73
77
|
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
|
|
74
78
|
|
|
75
79
|
<!-- Tap Connect SDK UMD bundle -->
|
|
76
|
-
<script src="https://cdn.tap.company/tap-sdks/connect-v2/build-
|
|
80
|
+
<script src="https://cdn.tap.company/tap-sdks/connect-v2/build-1.0.2-sandbox/index.js"></script>
|
|
77
81
|
|
|
78
82
|
<script>
|
|
79
83
|
function openConnect() {
|
|
@@ -98,35 +102,37 @@ You can also use the SDK without a React build setup by including the UMD bundle
|
|
|
98
102
|
|
|
99
103
|
## 🧠 Props
|
|
100
104
|
|
|
101
|
-
| Prop | Type
|
|
102
|
-
| ----------------------- |
|
|
103
|
-
| **open** | `boolean`
|
|
104
|
-
| **publicKey** | `string`
|
|
105
|
-
| **merchantDomain** | `string`
|
|
106
|
-
| **scope** | `ConnectScope`
|
|
107
|
-
| **onReady** | `() => void`
|
|
108
|
-
| **onClose** | `() => void`
|
|
109
|
-
| **onError** | `(error: CustomError) => void`
|
|
110
|
-
| **onSuccess** | `(response: Record<string, string \| number>) => void` | ❌ | Triggered when the flow completes successfully. |
|
|
111
|
-
| **
|
|
112
|
-
| **
|
|
113
|
-
| **
|
|
114
|
-
| **
|
|
115
|
-
| **
|
|
116
|
-
| **
|
|
117
|
-
| **
|
|
118
|
-
| **
|
|
119
|
-
| **
|
|
120
|
-
| **
|
|
121
|
-
| **
|
|
122
|
-
| **
|
|
123
|
-
| **
|
|
124
|
-
| **
|
|
125
|
-
| **
|
|
126
|
-
| **
|
|
127
|
-
| **
|
|
128
|
-
| **
|
|
129
|
-
| **
|
|
105
|
+
| Prop | Type | Required | Description |
|
|
106
|
+
| ----------------------- | ---------------------------------------------------------------- | -------- | ---------------------------------------------------------------------------------------------- |
|
|
107
|
+
| **open** | `boolean` | ✅ | Controls whether the Connect element is open or closed. |
|
|
108
|
+
| **publicKey** | `string` | ✅ | Your public API key provided by Tap Payments. |
|
|
109
|
+
| **merchantDomain** | `string` | ✅ | Merchant's domain (e.g. `https://example.com`). |
|
|
110
|
+
| **scope** | `ConnectScope` | ✅ | Defines the integration scope. |
|
|
111
|
+
| **onReady** | `() => void` | ❌ | Called when the app configurations are loaded successfully. |
|
|
112
|
+
| **onClose** | `() => void` | ❌ | Triggered when the Connect element is closed. |
|
|
113
|
+
| **onError** | `(error: CustomError) => void` | ❌ | Triggered when an error occurs. |
|
|
114
|
+
| **onSuccess** | `(response: Record<string, string \| number \| object>) => void` | ❌ | Triggered when the flow completes successfully. |
|
|
115
|
+
| **onCreated** | `(response: Record<string, string \| number \| object>) => void` | ❌ | Triggered after creating an account. |
|
|
116
|
+
| **onBoardCompleted** | `() => void` | ❌ | Triggered when all board flows are completed. |
|
|
117
|
+
| **theme** | `ConnectTheme` | ❌ | UI theme configuration. |
|
|
118
|
+
| **language** | `ConnectLanguage` | ❌ | Localization language. |
|
|
119
|
+
| **businessCountryCode** | `string` | ❌ | ISO2 country code of the merchant. |
|
|
120
|
+
| **leadId** | `string` | ❌ | ID to Load an existing lead. |
|
|
121
|
+
| **showBoard** | `boolean` | ❌ | Show merchant board UI. |
|
|
122
|
+
| **boardEditable** | `boolean` | ❌ | Allow merchant board editing. |
|
|
123
|
+
| **platforms** | `string[]` | ❌ | List of merchant platforms. |
|
|
124
|
+
| **features** | `ConnectAppFeatures` | ❌ | UI and behavior customization options. |
|
|
125
|
+
| **paymentProvider** | `ConnectPaymentProvider` | ❌ | Payment provider configuration. |
|
|
126
|
+
| **postUrl** | `string` | ❌ | Endpoint to post collected data to your backend. |
|
|
127
|
+
| **redirectUrl** | `string` | ❌ | Redirect URL after success. |
|
|
128
|
+
| **data** | `string[]` | ❌ | Data modules to collect (e.g. `brand`, `entity`). |
|
|
129
|
+
| **mode** | `ConnectMode` | ❌ | Controls display behavior (page, popup, content). |
|
|
130
|
+
| **notification** | `ConnectNotification` | ❌ | Notification configuration. |
|
|
131
|
+
| **flow** | `ConnectFlows` | ❌ | Specifies a predefined flow to open directly (e.g., `brand`, `entity`, `kyc`, etc.). |
|
|
132
|
+
| **token** | `string` | ❌ | Connect session token. Required when `flow` is provided and the flow is not `board` or `auth`. |
|
|
133
|
+
| **boardId** | `string` | ❌ | Identifier of the board to load. Required when `flow` is set to `board`. |
|
|
134
|
+
| **configToken** | `string` | ❌ | Pre-generated configuration token from backend. |
|
|
135
|
+
| **region** | `ConnectRegions` | ❌ | Region code determining middleware domain. |
|
|
130
136
|
|
|
131
137
|
##### `ConnectAppFeatures`
|
|
132
138
|
|
|
@@ -136,9 +142,12 @@ You can also use the SDK without a React build setup by including the UMD bundle
|
|
|
136
142
|
| embedded | `boolean` | Enable embedded layout mode. |
|
|
137
143
|
| merchantLogo | `boolean` | Show or hide merchant logo. |
|
|
138
144
|
| closeButton | `boolean` | Display close button. |
|
|
145
|
+
| overlay | `boolean` | Show or hide loader overlay. |
|
|
139
146
|
| dialogStartTransition | `ConnectDialogTransition` | Dialog opening animation. |
|
|
140
147
|
| dialogEndTransition | `ConnectDialogTransition` | Dialog closing animation. |
|
|
141
148
|
| dialogEdgeFormat | `ConnectDialogEdgeFormat` | Dialog edge style. |
|
|
149
|
+
| emailAuth | `boolean` | Enable email flow for Qatar. |
|
|
150
|
+
| zIndex | `number` | zInde value for connect. |
|
|
142
151
|
|
|
143
152
|
##### `ConnectPaymentProvider`
|
|
144
153
|
|
package/build/index.cjs.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),f=require("react"),G=require("react-dom");function B(e){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const o=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(n,t,o.get?o:{enumerable:!0,get:()=>e[t]})}}return n.default=e,Object.freeze(n)}const m=B(f);var y=(e=>(e.PAGE="page",e.POPUP="popup",e.CONTENT="content",e))(y||{}),I=(e=>(e.AUTH="auth",e.MERCHANT="merchant",e))(I||{}),h=(e=>(e.AUTH="auth",e.BANK="bank",e.BOARD="board",e.BRAND="brand",e.ENTITY="entity",e.INDIVIDUAL="individual",e.KYC="kyc",e.TAX="tax",e.TERMINAL="terminal",e))(h||{}),T=(e=>(e.SA="sa",e.SA_DR="sa-dr",e))(T||{}),v=(e=>(e.DARK="dark",e.LIGHT="light",e.DYNAMIC="dynamic",e))(v||{}),_=(e=>(e.AR="ar",e.EN="en",e.DYNAMIC="dynamic",e))(_||{}),g=(e=>(e.STRAIGHT="straight",e.CURVED="curved",e))(g||{}),x=(e=>(e.LEFT="left",e.RIGHT="right",e.UP="up",e.DOWN="down",e))(x||{}),l=(e=>(e.ON_CLOSE="connect:onClose",e.ON_ERROR="connect:onError",e.ON_SUCCESS="connect:onSuccess",e.ON_READY="connect:onReady",e.ON_LOADED="connect:onLoaded",e))(l||{}),u=(e=>(e.AUTH_TOKEN="token",e.CONFIG_TOKEN="config_token",e.THEME="theme",e.LANGUAGE="lang",e.BOARD_ID="board_id",e))(u||{});const P=({outerStartColor:e="rgba(244, 244, 244, 1)",outerEndColor:n="rgba(238, 238, 238, 1)",innerStartColor:t="rgba(244, 244, 244, 1)",innerEndColor:o="rgba(238, 238, 238, 1)",duration:a=3,toggleAnimation:s=!1})=>r.jsx("div",{style:{position:"relative",width:"135px",height:"135px"},children:r.jsx("div",{style:{position:"absolute",display:"flex",justifyContent:"center",alignItems:"center",width:"100%",height:"100%",opacity:.9},children:r.jsxs("svg",{width:"199",height:"197",viewBox:"0 0 199 197",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[r.jsxs("g",{children:[r.jsx("circle",{cx:"89.5",cy:"86.5",r:"67.5",fill:"none",stroke:"url(#strokeGradientOuter_1427_22275)",strokeWidth:"9.6",strokeLinecap:"round",strokeDasharray:"425 125",children:s&&r.jsxs(r.Fragment,{children:[r.jsx("animateTransform",{attributeName:"transform",type:"rotate",from:"0 89.5 86.5",to:"360 89.5 86.5",dur:`${a/3}s`,repeatCount:"indefinite"}),r.jsx("animate",{attributeName:"stroke-dashoffset",values:"0; 425; 425; 0; 0",keyTimes:"0; 0.45; 0.55; 0.9; 1",dur:`${a}s`,repeatCount:"indefinite"})]})}),r.jsx("circle",{cx:"89.5",cy:"86.5",r:"48",fill:"none",stroke:"url(#strokeGradientInner_1427_22275)",strokeWidth:"9.6",strokeLinecap:"round",strokeDasharray:"300 100",children:s&&r.jsxs(r.Fragment,{children:[r.jsx("animateTransform",{attributeName:"transform",type:"rotate",from:"360 89.5 86.5",to:"0 89.5 86.5",dur:`${a/3}s`,repeatCount:"indefinite"}),r.jsx("animate",{attributeName:"stroke-dashoffset",values:"0; -300; -300; 0; 0",keyTimes:"0; 0.45; 0.55; 0.9; 1",dur:`${a}s`,repeatCount:"indefinite"})]})})]}),r.jsxs("defs",{children:[r.jsxs("filter",{id:"filter0_dddi_1427_22275",x:"0.882668",y:"0.899429",width:"198.08",height:"195.314",filterUnits:"userSpaceOnUse",colorInterpolationFilters:"sRGB",children:[r.jsx("feFlood",{floodOpacity:"0",result:"BackgroundImageFix"}),r.jsx("feColorMatrix",{in:"SourceAlpha",type:"matrix",values:"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0",result:"hardAlpha"}),r.jsx("feOffset",{dy:"1.68224"}),r.jsx("feGaussianBlur",{stdDeviation:"4.20656"}),r.jsx("feComposite",{in2:"hardAlpha",operator:"out"}),r.jsx("feColorMatrix",{type:"matrix",values:"0 0 0 0 0.824495 0 0 0 0 0.824495 0 0 0 0 0.824495 0 0 0 1 0"}),r.jsx("feBlend",{mode:"normal",in2:"BackgroundImageFix",result:"effect1_dropShadow_1427_22275"}),r.jsx("feColorMatrix",{in:"SourceAlpha",type:"matrix",values:"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0",result:"hardAlpha"}),r.jsx("feOffset",{dx:"22.3542",dy:"22.6047"}),r.jsx("feGaussianBlur",{stdDeviation:"9.80447"}),r.jsx("feComposite",{in2:"hardAlpha",operator:"out"}),r.jsx("feColorMatrix",{type:"matrix",values:"0 0 0 0 0.740723 0 0 0 0 0.740723 0 0 0 0 0.740723 0 0 0 0.6 0"}),r.jsx("feBlend",{mode:"normal",in2:"effect1_dropShadow_1427_22275",result:"effect2_dropShadow_1427_22275"}),r.jsx("feColorMatrix",{in:"SourceAlpha",type:"matrix",values:"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0",result:"hardAlpha"}),r.jsx("feOffset",{dx:"-6.03352",dy:"-3.01676"}),r.jsx("feGaussianBlur",{stdDeviation:"7.5419"}),r.jsx("feComposite",{in2:"hardAlpha",operator:"out"}),r.jsx("feColorMatrix",{type:"matrix",values:"0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.7 0"}),r.jsx("feBlend",{mode:"normal",in2:"effect2_dropShadow_1427_22275",result:"effect3_dropShadow_1427_22275"}),r.jsx("feBlend",{mode:"normal",in:"SourceGraphic",in2:"effect3_dropShadow_1427_22275",result:"shape"}),r.jsx("feColorMatrix",{in:"SourceAlpha",type:"matrix",values:"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0",result:"hardAlpha"}),r.jsx("feOffset",{dy:"1.50838"}),r.jsx("feComposite",{in2:"hardAlpha",operator:"arithmetic",k2:"-1",k3:"1"}),r.jsx("feColorMatrix",{type:"matrix",values:"0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"}),r.jsx("feBlend",{mode:"normal",in2:"shape",result:"effect4_innerShadow_1427_22275"})]}),r.jsxs("linearGradient",{id:"strokeGradientOuter_1427_22275",x1:"89.5",y1:"19",x2:"89.5",y2:"154",gradientUnits:"userSpaceOnUse",children:[r.jsx("stop",{stopColor:e}),r.jsx("stop",{offset:"1",stopColor:n})]}),r.jsxs("linearGradient",{id:"strokeGradientInner_1427_22275",x1:"89.4991",y1:"38.2849",x2:"89.4991",y2:"134.713",gradientUnits:"userSpaceOnUse",children:[r.jsx("stop",{stopColor:t}),r.jsx("stop",{offset:"1",stopColor:o})]})]})]})})}),M=f.memo(P),R=f.createContext({}),N=()=>f.useContext(R);function H({children:e,props:n}){const[t,o]=f.useState(!1),a=c=>{o(c)},s=()=>{o(!1)};return r.jsx(R.Provider,{value:{...n,onLoadingHandler:a,loading:t,onLoaded:s},children:e})}const $="https://connect-mw.dev.tap.company/middleware/v3/connect",K="https://connect-mw.dev.tap.company/middleware/v3/connect",W="https://connect-mw.dev.tap.company/middleware/v3/connect",F="tap-connect-sdk-iframe",C="https://sdk-connect.dev.tap.company",Y="https://sdk-connect.dev.tap.company",q="https://sdk-connect.dev.tap.company",V=({src:e})=>{const{loading:n}=N();return r.jsxs(r.Fragment,{children:[n&&r.jsx(M,{toggleAnimation:!0}),e&&r.jsx("iframe",{id:F,title:"connect",src:e,style:{width:"100%",height:"100%",border:"none",position:"absolute",top:0,left:0}})]})};var z=function(e){var n,t;return((t=(n=e==null?void 0:e.response)===null||n===void 0?void 0:n.data)===null||t===void 0?void 0:t.errors)!==void 0},J=function(e){return e instanceof Error},X=function(e){return typeof e=="string"},Q=function(e){try{var n=e.response.data.errors,t=n[0],o=t.description,a=t.code;return{message:o,code:a}}catch(s){return{message:s.message,code:"UNKNOWN"}}},Z=function(e){try{var n=e.message,t=n.split("::"),o=t[0],a=t[1];return{message:a,code:o}}catch(s){return{message:s.message,code:"UNKNOWN"}}},ee=function(e){try{var n=e.split("::"),t=n[0],o=n[1];return{message:o,code:t}}catch(a){return{message:a,code:"UNKNOWN"}}},te=function(){function e(n){if(Object.defineProperty(this,"code",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"message",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),z(n)){var t=Q(n);this.code=t.code,this.message=t.message}else if(J(n)){var t=Z(n);this.code=t.code,this.message=t.message}else if(X(n)){var t=ee(n);this.code=t.code,this.message=t.message}else this.code="UNKNOWN",this.message="Unknown error"}return Object.defineProperty(e.prototype,"getCode",{enumerable:!1,configurable:!0,writable:!0,value:function(){return this.code}}),Object.defineProperty(e.prototype,"getMessage",{enumerable:!1,configurable:!0,writable:!0,value:function(){return this.message}}),Object.defineProperty(e.prototype,"getClientError",{enumerable:!1,configurable:!0,writable:!0,value:function(){return{message:this.message,code:this.code}}}),e}();const re=(e="tap-connect-sdk-element")=>{const n=document.getElementById(e);if(n)return n;const t=document.createElement("div");return t.setAttribute("id",e),document.body.prepend(t),t},S=e=>e?["sa","sau"].includes(e.toLowerCase()):!1,U=e=>e==="dr",ne=(e="")=>{const[n,t]=e.split("-");return S(n)?U(t)?W:K:$},oe=(e="")=>{const[n,t]=e.split("-");return S(n)?U(t)?q:Y:C},ae=e=>{var n,t,o,a,s,c,d,i,p,O,b,j,E,A,k;return{operator:{public_key:e.publicKey},scope:e.scope,mode:e.mode||y.PAGE,domain:e.merchantDomain,...e.businessCountryCode&&{country:e.businessCountryCode},...e.data&&{data:e.data},board:{display:e.showBoard??!0,editable:e.boardEditable??!0},interface:{theme:e.theme||v.DYNAMIC,locale:e.language||_.DYNAMIC,edges:((n=e.features)==null?void 0:n.dialogEdgeFormat)||g.CURVED,parnter_logo:((t=e.features)==null?void 0:t.merchantLogo)??!1,dialog_transition:{start:((o=e.features)==null?void 0:o.dialogStartTransition)||x.UP,end:((a=e.features)==null?void 0:a.dialogEndTransition)||x.DOWN}},notification:{email:((s=e.notification)==null?void 0:s.email)??!1,sms:((c=e.notification)==null?void 0:c.sms)??!1},features:{poweredby:((d=e.features)==null?void 0:d.poweredBy)??!0,close_button:((i=e.features)==null?void 0:i.closeButton)??!1,embedded:((p=e.features)==null?void 0:p.embedded)??!1},...e.leadId&&{lead:{id:e.leadId}},...e.postUrl&&{post:{url:e.postUrl}},...e.redirectUrl&&{redirect:{url:e.redirectUrl}},...e.platforms&&{platforms:e.platforms},...(((O=e.paymentProvider)==null?void 0:O.institutionId)||((b=e.paymentProvider)==null?void 0:b.technologyId))&&{payment_provider:{...((j=e.paymentProvider)==null?void 0:j.institutionId)&&{institution:{id:(E=e.paymentProvider)==null?void 0:E.institutionId}},...((A=e.paymentProvider)==null?void 0:A.technologyId)&&{technology:{id:(k=e.paymentProvider)==null?void 0:k.technologyId}}}},app_info:{name:"connect-sdk-v2",version:"1.0.2-development",identifier:window.location.hostname||window.location.origin}}},se=({theme:e,language:n,configToken:t,flow:o,token:a,boardId:s,region:c})=>{const d=new URLSearchParams;let i="";return o&&(i=o,o===h.BOARD&&s?d.append(u.BOARD_ID,s):o!==h.AUTH&&a&&d.append(u.AUTH_TOKEN,a)),e&&d.append(u.THEME,e),n&&d.append(u.LANGUAGE,n),d.append(u.CONFIG_TOKEN,t),`${oe(c)}/${i}?${d.toString()}`},ie=async e=>{const n=await fetch(ne(e.region),{method:"POST",headers:{"Content-Type":"application/json",Authorization:`Bearer ${e.publicKey}`,mdn:e.merchantDomain||C},body:JSON.stringify(ae(e))});if(!n.ok)throw new Error(`${n.status}::${n.statusText}`);return n.json()},de=()=>{const[e,n]=m.useState(""),t=N(),o=async()=>{var a,s,c;t.onLoadingHandler(!0);try{let d=t.configToken,i;if(!d){if(i=await ie(t),!i.token)throw new Error("500::Config token is missing");d=i.token}const p=se({theme:(a=i==null?void 0:i.interface)==null?void 0:a.theme,language:(s=i==null?void 0:i.interface)==null?void 0:s.locale,configToken:d,flow:t.flow,token:t.token,boardId:t.boardId,region:t.region});if(t.mode!==y.PAGE)return n(p);window.location.href=p}catch(d){const i=new te(d);(c=t.onError)==null||c.call(t,i.getClientError()),t.onLoadingHandler(!1)}};return m.useEffect(()=>{o()},[]),{connectLink:e}},ce=()=>{const{onSuccess:e,onClose:n,onError:t,onReady:o,onLoaded:a}=N(),s=m.useCallback(async c=>{if(c.origin!==C)return;const{data:d,event:i}=c.data;switch(i){case l.ON_CLOSE:n==null||n();break;case l.ON_ERROR:t==null||t(d);break;case l.ON_SUCCESS:e==null||e(d);break;case l.ON_LOADED:a();break;case l.ON_READY:o==null||o();break}},[n,t,a,o,e]);m.useEffect(()=>(window.addEventListener("message",s,!1),()=>{window.removeEventListener("message",s)}),[s])},le=()=>{const{connectLink:e}=de();return ce(),r.jsx("div",{id:"tap-connect-main-container",style:{display:"flex",alignItems:"center",justifyContent:"center",background:"rgba(0, 0, 0, 0.5)",position:"fixed",top:0,left:0,width:"100%",height:"100%"},children:r.jsx(V,{src:e})})},ue=e=>r.jsx(H,{props:e,children:e.open&&r.jsx(le,{})}),D=m.memo(ue);var L,w=G;L=w.createRoot,w.hydrateRoot;const pe=(e,n)=>{const t=re(e),o=L(t);return o.render(r.jsx(D,{...n})),{unmount:()=>o.unmount()}};exports.ConnectDialogEdgeFormat=g;exports.ConnectDialogTransition=x;exports.ConnectElement=D;exports.ConnectFlows=h;exports.ConnectLanguage=_;exports.ConnectMode=y;exports.ConnectRegions=T;exports.ConnectScope=I;exports.ConnectTheme=v;exports.renderConnectElement=pe;
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),p=require("react"),P=require("react-dom");function B(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const r in e)if(r!=="default"){const o=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,o.get?o:{enumerable:!0,get:()=>e[r]})}}return t.default=e,Object.freeze(t)}const m=B(p);var x=(e=>(e.PAGE="page",e.POPUP="popup",e.CONTENT="content",e))(x||{}),I=(e=>(e.AUTH="auth",e.MERCHANT="merchant",e))(I||{}),S=(e=>(e.AUTH="auth",e.BANK="bank",e.BOARD="board",e.BRAND="brand",e.ENTITY="entity",e.INDIVIDUAL="individual",e.KYC="kyc",e.TAX="tax",e.TERMINAL="terminal",e))(S||{}),R=(e=>(e.SA="sa",e.SA_DR="sa-dr",e))(R||{}),b=(e=>(e.DARK="dark",e.LIGHT="light",e.DYNAMIC="dynamic",e))(b||{}),_=(e=>(e.AR="ar",e.EN="en",e.DYNAMIC="dynamic",e))(_||{}),N=(e=>(e.STRAIGHT="straight",e.CURVED="curved",e))(N||{}),y=(e=>(e.LEFT="left",e.RIGHT="right",e.UP="up",e.DOWN="down",e))(y||{}),u=(e=>(e.ON_CLOSE="connect:onClose",e.ON_ERROR="connect:onError",e.ON_SUCCESS="connect:onSuccess",e.ON_READY="connect:onReady",e.ON_LOADED="connect:onLoaded",e.ON_CREATED="connect:onCreated",e.ON_BOARD_COMPLETED="connect:onBoardCompleted",e))(u||{}),h=(e=>(e.CONFIG_TOKEN="config_token",e.THEME="theme",e.LANGUAGE="lang",e))(h||{});const M=({outerStartColor:e="rgba(244, 244, 244, 1)",outerEndColor:t="rgba(238, 238, 238, 1)",innerStartColor:r="rgba(244, 244, 244, 1)",innerEndColor:o="rgba(238, 238, 238, 1)",duration:a=3,toggleAnimation:s=!1})=>n.jsx("div",{style:{position:"relative",width:"135px",height:"135px"},children:n.jsx("div",{style:{position:"absolute",display:"flex",justifyContent:"center",alignItems:"center",width:"100%",height:"100%",opacity:.9},children:n.jsxs("svg",{width:"199",height:"197",viewBox:"0 0 199 197",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[n.jsxs("g",{children:[n.jsx("circle",{cx:"89.5",cy:"86.5",r:"67.5",fill:"none",stroke:"url(#strokeGradientOuter_1427_22275)",strokeWidth:"9.6",strokeLinecap:"round",strokeDasharray:"425 125",children:s&&n.jsxs(n.Fragment,{children:[n.jsx("animateTransform",{attributeName:"transform",type:"rotate",from:"0 89.5 86.5",to:"360 89.5 86.5",dur:`${a/3}s`,repeatCount:"indefinite"}),n.jsx("animate",{attributeName:"stroke-dashoffset",values:"0; 425; 425; 0; 0",keyTimes:"0; 0.45; 0.55; 0.9; 1",dur:`${a}s`,repeatCount:"indefinite"})]})}),n.jsx("circle",{cx:"89.5",cy:"86.5",r:"48",fill:"none",stroke:"url(#strokeGradientInner_1427_22275)",strokeWidth:"9.6",strokeLinecap:"round",strokeDasharray:"300 100",children:s&&n.jsxs(n.Fragment,{children:[n.jsx("animateTransform",{attributeName:"transform",type:"rotate",from:"360 89.5 86.5",to:"0 89.5 86.5",dur:`${a/3}s`,repeatCount:"indefinite"}),n.jsx("animate",{attributeName:"stroke-dashoffset",values:"0; -300; -300; 0; 0",keyTimes:"0; 0.45; 0.55; 0.9; 1",dur:`${a}s`,repeatCount:"indefinite"})]})})]}),n.jsxs("defs",{children:[n.jsxs("filter",{id:"filter0_dddi_1427_22275",x:"0.882668",y:"0.899429",width:"198.08",height:"195.314",filterUnits:"userSpaceOnUse",colorInterpolationFilters:"sRGB",children:[n.jsx("feFlood",{floodOpacity:"0",result:"BackgroundImageFix"}),n.jsx("feColorMatrix",{in:"SourceAlpha",type:"matrix",values:"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0",result:"hardAlpha"}),n.jsx("feOffset",{dy:"1.68224"}),n.jsx("feGaussianBlur",{stdDeviation:"4.20656"}),n.jsx("feComposite",{in2:"hardAlpha",operator:"out"}),n.jsx("feColorMatrix",{type:"matrix",values:"0 0 0 0 0.824495 0 0 0 0 0.824495 0 0 0 0 0.824495 0 0 0 1 0"}),n.jsx("feBlend",{mode:"normal",in2:"BackgroundImageFix",result:"effect1_dropShadow_1427_22275"}),n.jsx("feColorMatrix",{in:"SourceAlpha",type:"matrix",values:"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0",result:"hardAlpha"}),n.jsx("feOffset",{dx:"22.3542",dy:"22.6047"}),n.jsx("feGaussianBlur",{stdDeviation:"9.80447"}),n.jsx("feComposite",{in2:"hardAlpha",operator:"out"}),n.jsx("feColorMatrix",{type:"matrix",values:"0 0 0 0 0.740723 0 0 0 0 0.740723 0 0 0 0 0.740723 0 0 0 0.6 0"}),n.jsx("feBlend",{mode:"normal",in2:"effect1_dropShadow_1427_22275",result:"effect2_dropShadow_1427_22275"}),n.jsx("feColorMatrix",{in:"SourceAlpha",type:"matrix",values:"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0",result:"hardAlpha"}),n.jsx("feOffset",{dx:"-6.03352",dy:"-3.01676"}),n.jsx("feGaussianBlur",{stdDeviation:"7.5419"}),n.jsx("feComposite",{in2:"hardAlpha",operator:"out"}),n.jsx("feColorMatrix",{type:"matrix",values:"0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.7 0"}),n.jsx("feBlend",{mode:"normal",in2:"effect2_dropShadow_1427_22275",result:"effect3_dropShadow_1427_22275"}),n.jsx("feBlend",{mode:"normal",in:"SourceGraphic",in2:"effect3_dropShadow_1427_22275",result:"shape"}),n.jsx("feColorMatrix",{in:"SourceAlpha",type:"matrix",values:"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0",result:"hardAlpha"}),n.jsx("feOffset",{dy:"1.50838"}),n.jsx("feComposite",{in2:"hardAlpha",operator:"arithmetic",k2:"-1",k3:"1"}),n.jsx("feColorMatrix",{type:"matrix",values:"0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"}),n.jsx("feBlend",{mode:"normal",in2:"shape",result:"effect4_innerShadow_1427_22275"})]}),n.jsxs("linearGradient",{id:"strokeGradientOuter_1427_22275",x1:"89.5",y1:"19",x2:"89.5",y2:"154",gradientUnits:"userSpaceOnUse",children:[n.jsx("stop",{stopColor:e}),n.jsx("stop",{offset:"1",stopColor:t})]}),n.jsxs("linearGradient",{id:"strokeGradientInner_1427_22275",x1:"89.4991",y1:"38.2849",x2:"89.4991",y2:"134.713",gradientUnits:"userSpaceOnUse",children:[n.jsx("stop",{stopColor:r}),n.jsx("stop",{offset:"1",stopColor:o})]})]})]})})}),H=p.memo(M),T=p.createContext({}),v=()=>p.useContext(T);function $({children:e,props:t}){var d;const[r,o]=p.useState(!1),a=l=>{o(l)},s=()=>{o(!1)};return n.jsx(T.Provider,{value:{...t,features:{...t.features,overlay:((d=t.features)==null?void 0:d.overlay)??!0},onLoadingHandler:a,loading:r,onLoaded:s},children:e})}const K="https://connect-mw.sandbox.tap.company/middleware/v3/connect",W="https://connect-mw.sandbox.tap.company/middleware/v3/connect",F="https://connect-mw.sandbox.tap.company/middleware/v3/connect",Y="tap-connect-sdk-iframe",O="https://sdk-connect.sandbox.tap.company",q="https://sdk-connect.sandbox.tap.company",z="https://sdk-connect.sandbox.tap.company",V=({src:e})=>{const{loading:t}=v();return n.jsxs(n.Fragment,{children:[t&&n.jsx(H,{toggleAnimation:!0}),e&&n.jsx("iframe",{id:Y,title:"connect",src:e,style:{width:"100%",height:"100%",border:"none",position:"absolute",top:0,left:0}})]})};var J=function(e){var t,r;return((r=(t=e==null?void 0:e.response)===null||t===void 0?void 0:t.data)===null||r===void 0?void 0:r.errors)!==void 0},X=function(e){return e instanceof Error},Q=function(e){return typeof e=="string"},Z=function(e){try{var t=e.response.data.errors,r=t[0],o=r.description,a=r.code;return{message:o,code:a}}catch(s){return{message:s.message,code:"UNKNOWN"}}},ee=function(e){try{var t=e.message,r=t.split("::"),o=r[0],a=r[1];return{message:a,code:o}}catch(s){return{message:s.message,code:"UNKNOWN"}}},te=function(e){try{var t=e.split("::"),r=t[0],o=t[1];return{message:o,code:r}}catch(a){return{message:a,code:"UNKNOWN"}}},re=function(){function e(t){if(Object.defineProperty(this,"code",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"message",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),J(t)){var r=Z(t);this.code=r.code,this.message=r.message}else if(X(t)){var r=ee(t);this.code=r.code,this.message=r.message}else if(Q(t)){var r=te(t);this.code=r.code,this.message=r.message}else this.code="UNKNOWN",this.message="Unknown error"}return Object.defineProperty(e.prototype,"getCode",{enumerable:!1,configurable:!0,writable:!0,value:function(){return this.code}}),Object.defineProperty(e.prototype,"getMessage",{enumerable:!1,configurable:!0,writable:!0,value:function(){return this.message}}),Object.defineProperty(e.prototype,"getClientError",{enumerable:!1,configurable:!0,writable:!0,value:function(){return{message:this.message,code:this.code}}}),e}();const ne=(e="tap-connect-sdk-element")=>{const t=document.getElementById(e);if(t)return t;const r=document.createElement("div");return r.setAttribute("id",e),document.body.prepend(r),r},D=e=>e?["sa","sau"].includes(e.toLowerCase()):!1,L=e=>e==="dr",oe=(e="")=>{const[t,r]=e.split("-");return D(t)?L(r)?F:W:K},ae=(e="")=>{const[t,r]=e.split("-");return D(t)?L(r)?z:q:O},se=e=>{var t,r,o,a,s,d,l,i,c,f,C,E,g,j,w,k;return{operator:{public_key:e.publicKey},scope:e.scope,mode:e.mode||x.PAGE,domain:e.merchantDomain,...e.businessCountryCode&&{country:e.businessCountryCode},...e.data&&{data:e.data},board:{...e.boardId&&{id:e.boardId},display:e.showBoard??!0,editable:e.boardEditable??!0},interface:{theme:e.theme||b.DYNAMIC,locale:e.language||_.DYNAMIC,edges:((t=e.features)==null?void 0:t.dialogEdgeFormat)||N.CURVED,parnter_logo:((r=e.features)==null?void 0:r.merchantLogo)??!1,dialog_transition:{start:((o=e.features)==null?void 0:o.dialogStartTransition)||y.UP,end:((a=e.features)==null?void 0:a.dialogEndTransition)||y.DOWN}},notification:{email:((s=e.notification)==null?void 0:s.email)??!1,sms:((d=e.notification)==null?void 0:d.sms)??!1},features:{poweredby:((l=e.features)==null?void 0:l.poweredBy)??!0,close_button:((i=e.features)==null?void 0:i.closeButton)??!1,embedded:((c=e.features)==null?void 0:c.embedded)??!1,email_auth:((f=e.features)==null?void 0:f.emailAuth)??!1},...e.leadId&&{lead:{id:e.leadId}},...e.postUrl&&{post:{url:e.postUrl}},...e.redirectUrl&&{redirect:{url:e.redirectUrl}},...e.platforms&&{platforms:e.platforms},...(((C=e.paymentProvider)==null?void 0:C.institutionId)||((E=e.paymentProvider)==null?void 0:E.technologyId))&&{payment_provider:{...((g=e.paymentProvider)==null?void 0:g.institutionId)&&{institution:{id:(j=e.paymentProvider)==null?void 0:j.institutionId}},...((w=e.paymentProvider)==null?void 0:w.technologyId)&&{technology:{id:(k=e.paymentProvider)==null?void 0:k.technologyId}}}},...e.token&&{auth_token:e.token},app_info:{name:"connect-sdk-v2",version:"1.0.2-sandbox",identifier:window.location.hostname||window.location.origin}}},ie=({theme:e,language:t,configToken:r,flow:o,region:a})=>{const s=new URLSearchParams;let d="";return o&&(d=o),e&&s.append(h.THEME,e),t&&s.append(h.LANGUAGE,t),s.append(h.CONFIG_TOKEN,r),`${ae(a)}/${d}?${s.toString()}`},de=async e=>{const t=await fetch(oe(e.region),{method:"POST",headers:{"Content-Type":"application/json",Authorization:`Bearer ${e.publicKey}`,mdn:e.merchantDomain||O},body:JSON.stringify(se(e))});if(!t.ok)throw new Error(`${t.status}::${t.statusText}`);return t.json()},le=()=>{const[e,t]=m.useState(""),r=v(),o=async()=>{var a,s,d;r.onLoadingHandler(!0);try{let l=r.configToken,i;if(!l){if(i=await de(r),!i.token)throw new Error("500::Config token is missing");l=i.token}const c=ie({theme:(a=i==null?void 0:i.interface)==null?void 0:a.theme,language:(s=i==null?void 0:i.interface)==null?void 0:s.locale,configToken:l,flow:r.flow,region:r.region});if(r.mode!==x.PAGE)return t(c);window.location.href=c}catch(l){const i=new re(l);(d=r.onError)==null||d.call(r,i.getClientError()),r.onLoadingHandler(!1)}};return m.useEffect(()=>{o()},[]),{connectLink:e}},ce=()=>{m.useEffect(()=>{const e=document.documentElement,t=document.body,r=t.style.overflow,o=e.style.overflow;return t.style.overflow="hidden",e.style.overflow="hidden",()=>{t.style.overflow=r,e.style.overflow=o}},[])},ue=()=>{const{onSuccess:e,onClose:t,onError:r,onReady:o,onLoaded:a,onCreated:s,onBoardCompleted:d}=v(),l=m.useCallback(async i=>{if(i.origin!==O)return;const{data:c,event:f}=i.data;switch(f){case u.ON_CLOSE:t==null||t();break;case u.ON_ERROR:r==null||r(c);break;case u.ON_SUCCESS:e==null||e(c);break;case u.ON_LOADED:a();break;case u.ON_READY:o==null||o();break;case u.ON_CREATED:s==null||s(c);break;case u.ON_BOARD_COMPLETED:d==null||d();break}},[t,r,a,o,e,s,d]);m.useEffect(()=>(window.addEventListener("message",l,!1),()=>{window.removeEventListener("message",l)}),[l])},me=()=>{const{connectLink:e}=le(),{features:t,loading:r}=v();return ue(),ce(),n.jsx("div",{id:"tap-connect-main-container",style:{display:"flex",alignItems:"center",justifyContent:"center",background:t!=null&&t.overlay&&r?"rgba(0, 0, 0, 0.5)":"",position:"fixed",top:0,left:0,width:"100%",height:"100%",zIndex:(t==null?void 0:t.zIndex)??9999},children:n.jsx(V,{src:e})})},pe=e=>n.jsx($,{props:e,children:e.open&&n.jsx(me,{})}),U=m.memo(pe);var G,A=P;G=A.createRoot,A.hydrateRoot;const fe=(e,t)=>{const r=ne(e),o=G(r);return o.render(n.jsx(U,{...t})),{unmount:()=>o.unmount()}};exports.ConnectDialogEdgeFormat=N;exports.ConnectDialogTransition=y;exports.ConnectElement=U;exports.ConnectFlows=S;exports.ConnectLanguage=_;exports.ConnectMode=x;exports.ConnectRegions=R;exports.ConnectScope=I;exports.ConnectTheme=b;exports.renderConnectElement=fe;
|
package/build/index.d.ts
CHANGED
|
@@ -6,9 +6,12 @@ declare type ConnectAppFeatures = {
|
|
|
6
6
|
embedded?: boolean;
|
|
7
7
|
merchantLogo?: boolean;
|
|
8
8
|
closeButton?: boolean;
|
|
9
|
+
overlay?: boolean;
|
|
9
10
|
dialogStartTransition?: ConnectDialogTransition;
|
|
10
11
|
dialogEndTransition?: ConnectDialogTransition;
|
|
11
12
|
dialogEdgeFormat?: ConnectDialogEdgeFormat;
|
|
13
|
+
emailAuth?: boolean;
|
|
14
|
+
zIndex?: number;
|
|
12
15
|
};
|
|
13
16
|
|
|
14
17
|
export declare enum ConnectDialogEdgeFormat {
|
|
@@ -61,9 +64,11 @@ export declare type ConnectPaymentProvider = {
|
|
|
61
64
|
|
|
62
65
|
export declare type ConnectProps = {
|
|
63
66
|
onClose?: () => void;
|
|
64
|
-
onSuccess?: (res: Record<string, string | number>) => void;
|
|
67
|
+
onSuccess?: (res: Record<string, string | number | object>) => void;
|
|
65
68
|
onError?: (error: CustomError) => void;
|
|
66
69
|
onReady?: () => void;
|
|
70
|
+
onCreated?: (res: Record<string, string | number | object>) => void;
|
|
71
|
+
onBoardCompleted?: () => void;
|
|
67
72
|
open: boolean;
|
|
68
73
|
publicKey: string;
|
|
69
74
|
scope: ConnectScope;
|
package/build/index.esm.js
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
import { jsx as n, jsxs as
|
|
2
|
-
import * as
|
|
3
|
-
import
|
|
1
|
+
import { jsx as n, jsxs as u, Fragment as _ } from "react/jsx-runtime";
|
|
2
|
+
import * as p from "react";
|
|
3
|
+
import y from "react";
|
|
4
4
|
import G from "react-dom";
|
|
5
|
-
var
|
|
5
|
+
var b = /* @__PURE__ */ ((e) => (e.PAGE = "page", e.POPUP = "popup", e.CONTENT = "content", e))(b || {}), B = /* @__PURE__ */ ((e) => (e.AUTH = "auth", e.MERCHANT = "merchant", e))(B || {}), P = /* @__PURE__ */ ((e) => (e.AUTH = "auth", e.BANK = "bank", e.BOARD = "board", e.BRAND = "brand", e.ENTITY = "entity", e.INDIVIDUAL = "individual", e.KYC = "kyc", e.TAX = "tax", e.TERMINAL = "terminal", e))(P || {}), M = /* @__PURE__ */ ((e) => (e.SA = "sa", e.SA_DR = "sa-dr", e))(M || {}), I = /* @__PURE__ */ ((e) => (e.DARK = "dark", e.LIGHT = "light", e.DYNAMIC = "dynamic", e))(I || {}), R = /* @__PURE__ */ ((e) => (e.AR = "ar", e.EN = "en", e.DYNAMIC = "dynamic", e))(R || {}), S = /* @__PURE__ */ ((e) => (e.STRAIGHT = "straight", e.CURVED = "curved", e))(S || {}), N = /* @__PURE__ */ ((e) => (e.LEFT = "left", e.RIGHT = "right", e.UP = "up", e.DOWN = "down", e))(N || {}), m = /* @__PURE__ */ ((e) => (e.ON_CLOSE = "connect:onClose", e.ON_ERROR = "connect:onError", e.ON_SUCCESS = "connect:onSuccess", e.ON_READY = "connect:onReady", e.ON_LOADED = "connect:onLoaded", e.ON_CREATED = "connect:onCreated", e.ON_BOARD_COMPLETED = "connect:onBoardCompleted", e))(m || {}), h = /* @__PURE__ */ ((e) => (e.CONFIG_TOKEN = "config_token", e.THEME = "theme", e.LANGUAGE = "lang", e))(h || {});
|
|
6
6
|
const H = ({
|
|
7
7
|
outerStartColor: e = "rgba(244, 244, 244, 1)",
|
|
8
|
-
outerEndColor:
|
|
9
|
-
innerStartColor:
|
|
8
|
+
outerEndColor: t = "rgba(238, 238, 238, 1)",
|
|
9
|
+
innerStartColor: r = "rgba(244, 244, 244, 1)",
|
|
10
10
|
innerEndColor: o = "rgba(238, 238, 238, 1)",
|
|
11
11
|
duration: a = 3,
|
|
12
12
|
toggleAnimation: s = !1
|
|
@@ -30,8 +30,8 @@ const H = ({
|
|
|
30
30
|
height: "100%",
|
|
31
31
|
opacity: 0.9
|
|
32
32
|
},
|
|
33
|
-
children: /* @__PURE__ */
|
|
34
|
-
/* @__PURE__ */
|
|
33
|
+
children: /* @__PURE__ */ u("svg", { width: "199", height: "197", viewBox: "0 0 199 197", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
|
|
34
|
+
/* @__PURE__ */ u("g", { children: [
|
|
35
35
|
/* @__PURE__ */ n(
|
|
36
36
|
"circle",
|
|
37
37
|
{
|
|
@@ -43,7 +43,7 @@ const H = ({
|
|
|
43
43
|
strokeWidth: "9.6",
|
|
44
44
|
strokeLinecap: "round",
|
|
45
45
|
strokeDasharray: "425 125",
|
|
46
|
-
children: s && /* @__PURE__ */
|
|
46
|
+
children: s && /* @__PURE__ */ u(_, { children: [
|
|
47
47
|
/* @__PURE__ */ n(
|
|
48
48
|
"animateTransform",
|
|
49
49
|
{
|
|
@@ -79,7 +79,7 @@ const H = ({
|
|
|
79
79
|
strokeWidth: "9.6",
|
|
80
80
|
strokeLinecap: "round",
|
|
81
81
|
strokeDasharray: "300 100",
|
|
82
|
-
children: s && /* @__PURE__ */
|
|
82
|
+
children: s && /* @__PURE__ */ u(_, { children: [
|
|
83
83
|
/* @__PURE__ */ n(
|
|
84
84
|
"animateTransform",
|
|
85
85
|
{
|
|
@@ -105,8 +105,8 @@ const H = ({
|
|
|
105
105
|
}
|
|
106
106
|
)
|
|
107
107
|
] }),
|
|
108
|
-
/* @__PURE__ */
|
|
109
|
-
/* @__PURE__ */
|
|
108
|
+
/* @__PURE__ */ u("defs", { children: [
|
|
109
|
+
/* @__PURE__ */ u(
|
|
110
110
|
"filter",
|
|
111
111
|
{
|
|
112
112
|
id: "filter0_dddi_1427_22275",
|
|
@@ -177,7 +177,7 @@ const H = ({
|
|
|
177
177
|
]
|
|
178
178
|
}
|
|
179
179
|
),
|
|
180
|
-
/* @__PURE__ */
|
|
180
|
+
/* @__PURE__ */ u(
|
|
181
181
|
"linearGradient",
|
|
182
182
|
{
|
|
183
183
|
id: "strokeGradientOuter_1427_22275",
|
|
@@ -188,11 +188,11 @@ const H = ({
|
|
|
188
188
|
gradientUnits: "userSpaceOnUse",
|
|
189
189
|
children: [
|
|
190
190
|
/* @__PURE__ */ n("stop", { stopColor: e }),
|
|
191
|
-
/* @__PURE__ */ n("stop", { offset: "1", stopColor:
|
|
191
|
+
/* @__PURE__ */ n("stop", { offset: "1", stopColor: t })
|
|
192
192
|
]
|
|
193
193
|
}
|
|
194
194
|
),
|
|
195
|
-
/* @__PURE__ */
|
|
195
|
+
/* @__PURE__ */ u(
|
|
196
196
|
"linearGradient",
|
|
197
197
|
{
|
|
198
198
|
id: "strokeGradientInner_1427_22275",
|
|
@@ -202,7 +202,7 @@ const H = ({
|
|
|
202
202
|
y2: "134.713",
|
|
203
203
|
gradientUnits: "userSpaceOnUse",
|
|
204
204
|
children: [
|
|
205
|
-
/* @__PURE__ */ n("stop", { stopColor:
|
|
205
|
+
/* @__PURE__ */ n("stop", { stopColor: r }),
|
|
206
206
|
/* @__PURE__ */ n("stop", { offset: "1", stopColor: o })
|
|
207
207
|
]
|
|
208
208
|
}
|
|
@@ -212,23 +212,36 @@ const H = ({
|
|
|
212
212
|
}
|
|
213
213
|
)
|
|
214
214
|
}
|
|
215
|
-
),
|
|
216
|
-
function
|
|
217
|
-
|
|
215
|
+
), $ = y.memo(H), T = y.createContext({}), v = () => y.useContext(T);
|
|
216
|
+
function j({ children: e, props: t }) {
|
|
217
|
+
var d;
|
|
218
|
+
const [r, o] = y.useState(!1), a = (l) => {
|
|
218
219
|
o(l);
|
|
219
220
|
}, s = () => {
|
|
220
221
|
o(!1);
|
|
221
222
|
};
|
|
222
|
-
return /* @__PURE__ */ n(
|
|
223
|
+
return /* @__PURE__ */ n(
|
|
224
|
+
T.Provider,
|
|
225
|
+
{
|
|
226
|
+
value: {
|
|
227
|
+
...t,
|
|
228
|
+
features: { ...t.features, overlay: ((d = t.features) == null ? void 0 : d.overlay) ?? !0 },
|
|
229
|
+
onLoadingHandler: a,
|
|
230
|
+
loading: r,
|
|
231
|
+
onLoaded: s
|
|
232
|
+
},
|
|
233
|
+
children: e
|
|
234
|
+
}
|
|
235
|
+
);
|
|
223
236
|
}
|
|
224
|
-
const K = "https://connect-mw.
|
|
225
|
-
const { loading:
|
|
226
|
-
return /* @__PURE__ */
|
|
227
|
-
|
|
237
|
+
const K = "https://connect-mw.sandbox.tap.company/middleware/v3/connect", W = "https://connect-mw.sandbox.tap.company/middleware/v3/connect", Y = "https://connect-mw.sandbox.tap.company/middleware/v3/connect", F = "tap-connect-sdk-iframe", E = "https://sdk-connect.sandbox.tap.company", z = "https://sdk-connect.sandbox.tap.company", V = "https://sdk-connect.sandbox.tap.company", q = ({ src: e }) => {
|
|
238
|
+
const { loading: t } = v();
|
|
239
|
+
return /* @__PURE__ */ u(_, { children: [
|
|
240
|
+
t && /* @__PURE__ */ n($, { toggleAnimation: !0 }),
|
|
228
241
|
e && /* @__PURE__ */ n(
|
|
229
242
|
"iframe",
|
|
230
243
|
{
|
|
231
|
-
id:
|
|
244
|
+
id: F,
|
|
232
245
|
title: "connect",
|
|
233
246
|
src: e,
|
|
234
247
|
style: {
|
|
@@ -243,16 +256,16 @@ const K = "https://connect-mw.dev.tap.company/middleware/v3/connect", j = "https
|
|
|
243
256
|
)
|
|
244
257
|
] });
|
|
245
258
|
};
|
|
246
|
-
var
|
|
247
|
-
var
|
|
248
|
-
return ((
|
|
249
|
-
}, J = function(e) {
|
|
250
|
-
return e instanceof Error;
|
|
259
|
+
var J = function(e) {
|
|
260
|
+
var t, r;
|
|
261
|
+
return ((r = (t = e == null ? void 0 : e.response) === null || t === void 0 ? void 0 : t.data) === null || r === void 0 ? void 0 : r.errors) !== void 0;
|
|
251
262
|
}, X = function(e) {
|
|
252
|
-
return
|
|
263
|
+
return e instanceof Error;
|
|
253
264
|
}, Q = function(e) {
|
|
265
|
+
return typeof e == "string";
|
|
266
|
+
}, Z = function(e) {
|
|
254
267
|
try {
|
|
255
|
-
var
|
|
268
|
+
var t = e.response.data.errors, r = t[0], o = r.description, a = r.code;
|
|
256
269
|
return {
|
|
257
270
|
message: o,
|
|
258
271
|
code: a
|
|
@@ -263,9 +276,9 @@ var z = function(e) {
|
|
|
263
276
|
code: "UNKNOWN"
|
|
264
277
|
};
|
|
265
278
|
}
|
|
266
|
-
},
|
|
279
|
+
}, ee = function(e) {
|
|
267
280
|
try {
|
|
268
|
-
var
|
|
281
|
+
var t = e.message, r = t.split("::"), o = r[0], a = r[1];
|
|
269
282
|
return {
|
|
270
283
|
message: a,
|
|
271
284
|
code: o
|
|
@@ -276,12 +289,12 @@ var z = function(e) {
|
|
|
276
289
|
code: "UNKNOWN"
|
|
277
290
|
};
|
|
278
291
|
}
|
|
279
|
-
},
|
|
292
|
+
}, te = function(e) {
|
|
280
293
|
try {
|
|
281
|
-
var
|
|
294
|
+
var t = e.split("::"), r = t[0], o = t[1];
|
|
282
295
|
return {
|
|
283
296
|
message: o,
|
|
284
|
-
code:
|
|
297
|
+
code: r
|
|
285
298
|
};
|
|
286
299
|
} catch (a) {
|
|
287
300
|
return {
|
|
@@ -289,8 +302,8 @@ var z = function(e) {
|
|
|
289
302
|
code: "UNKNOWN"
|
|
290
303
|
};
|
|
291
304
|
}
|
|
292
|
-
},
|
|
293
|
-
function e(
|
|
305
|
+
}, re = function() {
|
|
306
|
+
function e(t) {
|
|
294
307
|
if (Object.defineProperty(this, "code", {
|
|
295
308
|
enumerable: !0,
|
|
296
309
|
configurable: !0,
|
|
@@ -301,15 +314,15 @@ var z = function(e) {
|
|
|
301
314
|
configurable: !0,
|
|
302
315
|
writable: !0,
|
|
303
316
|
value: void 0
|
|
304
|
-
}),
|
|
305
|
-
var
|
|
306
|
-
this.code =
|
|
307
|
-
} else if (
|
|
308
|
-
var
|
|
309
|
-
this.code =
|
|
310
|
-
} else if (
|
|
311
|
-
var
|
|
312
|
-
this.code =
|
|
317
|
+
}), J(t)) {
|
|
318
|
+
var r = Z(t);
|
|
319
|
+
this.code = r.code, this.message = r.message;
|
|
320
|
+
} else if (X(t)) {
|
|
321
|
+
var r = ee(t);
|
|
322
|
+
this.code = r.code, this.message = r.message;
|
|
323
|
+
} else if (Q(t)) {
|
|
324
|
+
var r = te(t);
|
|
325
|
+
this.code = r.code, this.message = r.message;
|
|
313
326
|
} else
|
|
314
327
|
this.code = "UNKNOWN", this.message = "Unknown error";
|
|
315
328
|
}
|
|
@@ -339,142 +352,156 @@ var z = function(e) {
|
|
|
339
352
|
}
|
|
340
353
|
}), e;
|
|
341
354
|
}();
|
|
342
|
-
const
|
|
343
|
-
const
|
|
344
|
-
if (
|
|
345
|
-
const
|
|
346
|
-
return
|
|
347
|
-
},
|
|
348
|
-
const [
|
|
349
|
-
return
|
|
350
|
-
},
|
|
351
|
-
const [
|
|
352
|
-
return
|
|
353
|
-
},
|
|
354
|
-
var
|
|
355
|
+
const ne = (e = "tap-connect-sdk-element") => {
|
|
356
|
+
const t = document.getElementById(e);
|
|
357
|
+
if (t) return t;
|
|
358
|
+
const r = document.createElement("div");
|
|
359
|
+
return r.setAttribute("id", e), document.body.prepend(r), r;
|
|
360
|
+
}, U = (e) => e ? ["sa", "sau"].includes(e.toLowerCase()) : !1, D = (e) => e === "dr", oe = (e = "") => {
|
|
361
|
+
const [t, r] = e.split("-");
|
|
362
|
+
return U(t) ? D(r) ? Y : W : K;
|
|
363
|
+
}, ae = (e = "") => {
|
|
364
|
+
const [t, r] = e.split("-");
|
|
365
|
+
return U(t) ? D(r) ? V : z : E;
|
|
366
|
+
}, se = (e) => {
|
|
367
|
+
var t, r, o, a, s, d, l, i, c, f, O, C, g, w, k, A;
|
|
355
368
|
return {
|
|
356
369
|
operator: { public_key: e.publicKey },
|
|
357
370
|
scope: e.scope,
|
|
358
|
-
mode: e.mode ||
|
|
371
|
+
mode: e.mode || b.PAGE,
|
|
359
372
|
domain: e.merchantDomain,
|
|
360
373
|
...e.businessCountryCode && { country: e.businessCountryCode },
|
|
361
374
|
...e.data && { data: e.data },
|
|
362
375
|
board: {
|
|
376
|
+
...e.boardId && { id: e.boardId },
|
|
363
377
|
display: e.showBoard ?? !0,
|
|
364
378
|
editable: e.boardEditable ?? !0
|
|
365
379
|
},
|
|
366
380
|
interface: {
|
|
367
|
-
theme: e.theme ||
|
|
381
|
+
theme: e.theme || I.DYNAMIC,
|
|
368
382
|
locale: e.language || R.DYNAMIC,
|
|
369
|
-
edges: ((
|
|
370
|
-
parnter_logo: ((
|
|
383
|
+
edges: ((t = e.features) == null ? void 0 : t.dialogEdgeFormat) || S.CURVED,
|
|
384
|
+
parnter_logo: ((r = e.features) == null ? void 0 : r.merchantLogo) ?? !1,
|
|
371
385
|
dialog_transition: {
|
|
372
|
-
start: ((o = e.features) == null ? void 0 : o.dialogStartTransition) ||
|
|
373
|
-
end: ((a = e.features) == null ? void 0 : a.dialogEndTransition) ||
|
|
386
|
+
start: ((o = e.features) == null ? void 0 : o.dialogStartTransition) || N.UP,
|
|
387
|
+
end: ((a = e.features) == null ? void 0 : a.dialogEndTransition) || N.DOWN
|
|
374
388
|
}
|
|
375
389
|
},
|
|
376
390
|
notification: {
|
|
377
391
|
email: ((s = e.notification) == null ? void 0 : s.email) ?? !1,
|
|
378
|
-
sms: ((
|
|
392
|
+
sms: ((d = e.notification) == null ? void 0 : d.sms) ?? !1
|
|
379
393
|
},
|
|
380
394
|
features: {
|
|
381
|
-
poweredby: ((
|
|
395
|
+
poweredby: ((l = e.features) == null ? void 0 : l.poweredBy) ?? !0,
|
|
382
396
|
close_button: ((i = e.features) == null ? void 0 : i.closeButton) ?? !1,
|
|
383
|
-
embedded: ((
|
|
397
|
+
embedded: ((c = e.features) == null ? void 0 : c.embedded) ?? !1,
|
|
398
|
+
email_auth: ((f = e.features) == null ? void 0 : f.emailAuth) ?? !1
|
|
384
399
|
},
|
|
385
400
|
...e.leadId && { lead: { id: e.leadId } },
|
|
386
401
|
...e.postUrl && { post: { url: e.postUrl } },
|
|
387
402
|
...e.redirectUrl && { redirect: { url: e.redirectUrl } },
|
|
388
403
|
...e.platforms && { platforms: e.platforms },
|
|
389
|
-
...(((
|
|
404
|
+
...(((O = e.paymentProvider) == null ? void 0 : O.institutionId) || ((C = e.paymentProvider) == null ? void 0 : C.technologyId)) && {
|
|
390
405
|
payment_provider: {
|
|
391
|
-
...((g = e.paymentProvider) == null ? void 0 : g.institutionId) && { institution: { id: (
|
|
392
|
-
...((k = e.paymentProvider) == null ? void 0 : k.technologyId) && { technology: { id: (
|
|
406
|
+
...((g = e.paymentProvider) == null ? void 0 : g.institutionId) && { institution: { id: (w = e.paymentProvider) == null ? void 0 : w.institutionId } },
|
|
407
|
+
...((k = e.paymentProvider) == null ? void 0 : k.technologyId) && { technology: { id: (A = e.paymentProvider) == null ? void 0 : A.technologyId } }
|
|
393
408
|
}
|
|
394
409
|
},
|
|
410
|
+
...e.token && { auth_token: e.token },
|
|
395
411
|
app_info: {
|
|
396
412
|
name: "connect-sdk-v2",
|
|
397
|
-
version: "1.0.2-
|
|
413
|
+
version: "1.0.2-sandbox",
|
|
398
414
|
identifier: window.location.hostname || window.location.origin
|
|
399
415
|
}
|
|
400
416
|
};
|
|
401
|
-
},
|
|
402
|
-
const
|
|
403
|
-
let
|
|
404
|
-
return o && (
|
|
405
|
-
},
|
|
406
|
-
const
|
|
417
|
+
}, ie = ({ theme: e, language: t, configToken: r, flow: o, region: a }) => {
|
|
418
|
+
const s = new URLSearchParams();
|
|
419
|
+
let d = "";
|
|
420
|
+
return o && (d = o), e && s.append(h.THEME, e), t && s.append(h.LANGUAGE, t), s.append(h.CONFIG_TOKEN, r), `${ae(a)}/${d}?${s.toString()}`;
|
|
421
|
+
}, de = async (e) => {
|
|
422
|
+
const t = await fetch(oe(e.region), {
|
|
407
423
|
method: "POST",
|
|
408
424
|
headers: {
|
|
409
425
|
"Content-Type": "application/json",
|
|
410
426
|
Authorization: `Bearer ${e.publicKey}`,
|
|
411
|
-
mdn: e.merchantDomain ||
|
|
427
|
+
mdn: e.merchantDomain || E
|
|
412
428
|
},
|
|
413
|
-
body: JSON.stringify(
|
|
429
|
+
body: JSON.stringify(se(e))
|
|
414
430
|
});
|
|
415
|
-
if (!
|
|
416
|
-
throw new Error(`${
|
|
417
|
-
return
|
|
418
|
-
},
|
|
419
|
-
const [e,
|
|
420
|
-
var a, s,
|
|
421
|
-
|
|
431
|
+
if (!t.ok)
|
|
432
|
+
throw new Error(`${t.status}::${t.statusText}`);
|
|
433
|
+
return t.json();
|
|
434
|
+
}, le = () => {
|
|
435
|
+
const [e, t] = p.useState(""), r = v(), o = async () => {
|
|
436
|
+
var a, s, d;
|
|
437
|
+
r.onLoadingHandler(!0);
|
|
422
438
|
try {
|
|
423
|
-
let
|
|
424
|
-
if (!
|
|
425
|
-
if (i = await
|
|
426
|
-
|
|
439
|
+
let l = r.configToken, i;
|
|
440
|
+
if (!l) {
|
|
441
|
+
if (i = await de(r), !i.token) throw new Error("500::Config token is missing");
|
|
442
|
+
l = i.token;
|
|
427
443
|
}
|
|
428
|
-
const
|
|
444
|
+
const c = ie({
|
|
429
445
|
theme: (a = i == null ? void 0 : i.interface) == null ? void 0 : a.theme,
|
|
430
446
|
language: (s = i == null ? void 0 : i.interface) == null ? void 0 : s.locale,
|
|
431
|
-
configToken:
|
|
432
|
-
flow:
|
|
433
|
-
|
|
434
|
-
boardId: t.boardId,
|
|
435
|
-
region: t.region
|
|
447
|
+
configToken: l,
|
|
448
|
+
flow: r.flow,
|
|
449
|
+
region: r.region
|
|
436
450
|
});
|
|
437
|
-
if (
|
|
438
|
-
window.location.href =
|
|
439
|
-
} catch (
|
|
440
|
-
const i = new
|
|
441
|
-
(
|
|
451
|
+
if (r.mode !== b.PAGE) return t(c);
|
|
452
|
+
window.location.href = c;
|
|
453
|
+
} catch (l) {
|
|
454
|
+
const i = new re(l);
|
|
455
|
+
(d = r.onError) == null || d.call(r, i.getClientError()), r.onLoadingHandler(!1);
|
|
442
456
|
}
|
|
443
457
|
};
|
|
444
|
-
return
|
|
458
|
+
return p.useEffect(() => {
|
|
445
459
|
o();
|
|
446
460
|
}, []), { connectLink: e };
|
|
447
|
-
},
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
461
|
+
}, ce = () => {
|
|
462
|
+
p.useEffect(() => {
|
|
463
|
+
const e = document.documentElement, t = document.body, r = t.style.overflow, o = e.style.overflow;
|
|
464
|
+
return t.style.overflow = "hidden", e.style.overflow = "hidden", () => {
|
|
465
|
+
t.style.overflow = r, e.style.overflow = o;
|
|
466
|
+
};
|
|
467
|
+
}, []);
|
|
468
|
+
}, ue = () => {
|
|
469
|
+
const { onSuccess: e, onClose: t, onError: r, onReady: o, onLoaded: a, onCreated: s, onBoardCompleted: d } = v(), l = p.useCallback(
|
|
470
|
+
async (i) => {
|
|
471
|
+
if (i.origin !== E) return;
|
|
472
|
+
const { data: c, event: f } = i.data;
|
|
473
|
+
switch (f) {
|
|
474
|
+
case m.ON_CLOSE:
|
|
475
|
+
t == null || t();
|
|
455
476
|
break;
|
|
456
|
-
case
|
|
457
|
-
|
|
477
|
+
case m.ON_ERROR:
|
|
478
|
+
r == null || r(c);
|
|
458
479
|
break;
|
|
459
|
-
case
|
|
460
|
-
e == null || e(
|
|
480
|
+
case m.ON_SUCCESS:
|
|
481
|
+
e == null || e(c);
|
|
461
482
|
break;
|
|
462
|
-
case
|
|
483
|
+
case m.ON_LOADED:
|
|
463
484
|
a();
|
|
464
485
|
break;
|
|
465
|
-
case
|
|
486
|
+
case m.ON_READY:
|
|
466
487
|
o == null || o();
|
|
467
488
|
break;
|
|
489
|
+
case m.ON_CREATED:
|
|
490
|
+
s == null || s(c);
|
|
491
|
+
break;
|
|
492
|
+
case m.ON_BOARD_COMPLETED:
|
|
493
|
+
d == null || d();
|
|
494
|
+
break;
|
|
468
495
|
}
|
|
469
496
|
},
|
|
470
|
-
[
|
|
497
|
+
[t, r, a, o, e, s, d]
|
|
471
498
|
);
|
|
472
|
-
|
|
473
|
-
window.removeEventListener("message",
|
|
474
|
-
}), [
|
|
475
|
-
},
|
|
476
|
-
const { connectLink: e } =
|
|
477
|
-
return
|
|
499
|
+
p.useEffect(() => (window.addEventListener("message", l, !1), () => {
|
|
500
|
+
window.removeEventListener("message", l);
|
|
501
|
+
}), [l]);
|
|
502
|
+
}, me = () => {
|
|
503
|
+
const { connectLink: e } = le(), { features: t, loading: r } = v();
|
|
504
|
+
return ue(), ce(), /* @__PURE__ */ n(
|
|
478
505
|
"div",
|
|
479
506
|
{
|
|
480
507
|
id: "tap-connect-main-container",
|
|
@@ -482,32 +509,33 @@ const re = (e = "tap-connect-sdk-element") => {
|
|
|
482
509
|
display: "flex",
|
|
483
510
|
alignItems: "center",
|
|
484
511
|
justifyContent: "center",
|
|
485
|
-
background: "rgba(0, 0, 0, 0.5)",
|
|
512
|
+
background: t != null && t.overlay && r ? "rgba(0, 0, 0, 0.5)" : "",
|
|
486
513
|
position: "fixed",
|
|
487
514
|
top: 0,
|
|
488
515
|
left: 0,
|
|
489
516
|
width: "100%",
|
|
490
|
-
height: "100%"
|
|
517
|
+
height: "100%",
|
|
518
|
+
zIndex: (t == null ? void 0 : t.zIndex) ?? 9999
|
|
491
519
|
},
|
|
492
520
|
children: /* @__PURE__ */ n(q, { src: e })
|
|
493
521
|
}
|
|
494
522
|
);
|
|
495
|
-
},
|
|
496
|
-
var L,
|
|
497
|
-
L =
|
|
498
|
-
const
|
|
499
|
-
const
|
|
500
|
-
return o.render(/* @__PURE__ */ n(
|
|
523
|
+
}, pe = (e) => /* @__PURE__ */ n(j, { props: e, children: e.open && /* @__PURE__ */ n(me, {}) }), fe = p.memo(pe);
|
|
524
|
+
var L, x = G;
|
|
525
|
+
L = x.createRoot, x.hydrateRoot;
|
|
526
|
+
const _e = (e, t) => {
|
|
527
|
+
const r = ne(e), o = L(r);
|
|
528
|
+
return o.render(/* @__PURE__ */ n(fe, { ...t })), { unmount: () => o.unmount() };
|
|
501
529
|
};
|
|
502
530
|
export {
|
|
503
|
-
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
|
|
531
|
+
S as ConnectDialogEdgeFormat,
|
|
532
|
+
N as ConnectDialogTransition,
|
|
533
|
+
fe as ConnectElement,
|
|
534
|
+
P as ConnectFlows,
|
|
507
535
|
R as ConnectLanguage,
|
|
508
|
-
|
|
509
|
-
|
|
536
|
+
b as ConnectMode,
|
|
537
|
+
M as ConnectRegions,
|
|
510
538
|
B as ConnectScope,
|
|
511
|
-
|
|
512
|
-
|
|
539
|
+
I as ConnectTheme,
|
|
540
|
+
_e as renderConnectElement
|
|
513
541
|
};
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tap-payments/connect-v2",
|
|
3
3
|
"private": false,
|
|
4
|
-
"version": "1.0.2-
|
|
4
|
+
"version": "1.0.2-sandbox",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "build/index.cjs.js",
|
|
7
7
|
"module": "build/index.esm.js",
|
|
@@ -26,6 +26,7 @@
|
|
|
26
26
|
"build": "yarn clean && yarn build:npm && yarn build:umd",
|
|
27
27
|
"build:production": "cross-env MODE=production npm run build",
|
|
28
28
|
"build:beta": "cross-env MODE=beta npm run build",
|
|
29
|
+
"build:sandbox": "cross-env MODE=sandbox npm run build",
|
|
29
30
|
"build:development": "cross-env MODE=development npm run build",
|
|
30
31
|
"lint": "eslint .",
|
|
31
32
|
"lint:fix": "eslint . --fix",
|