@tap-payments/connect-v2 1.0.3-development → 1.0.3-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 CHANGED
@@ -6,7 +6,7 @@ This package provides:
6
6
 
7
7
  - **_ConnectElement_**: a React component that can be embedded directly in your app to enable secure, localized, and customizable connections.
8
8
 
9
- - **_renderTapConnect_**: a UMD helper function (available on the global TapConnectSDK object) that lets you render the widget in plain JavaScript environments without a React build setup.
9
+ - **_renderConnectElement_**: a UMD helper function (available on the global TapConnectSDK object) that lets you render the widget in plain JavaScript environments without a React build setup.
10
10
 
11
11
  ---
12
12
 
@@ -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-0.0.28-test/index.js"></script>
80
+ <script src="https://cdn.tap.company/tap-sdks/connect-v2/build-1.0.3-sandbox/index.js"></script>
77
81
 
78
82
  <script>
79
83
  function openConnect() {
@@ -94,39 +98,52 @@ You can also use the SDK without a React build setup by including the UMD bundle
94
98
  </html>
95
99
  ```
96
100
 
101
+ `renderConnectElement` returns an `{ unmount }` handle — call `unmount()` to tear
102
+ the widget down:
103
+
104
+ ```js
105
+ const { unmount } = TapConnectSDK.renderConnectElement('connect-container', {
106
+ /* props */
107
+ });
108
+ // later:
109
+ unmount();
110
+ ```
111
+
97
112
  ---
98
113
 
99
114
  ## 🧠 Props
100
115
 
101
- | Prop | Type | Required | Description |
102
- | ----------------------- | ------------------------------------------------------ | -------- | ---------------------------------------------------------------------------------------------- |
103
- | **open** | `boolean` | ✅ | Controls whether the Connect element is open or closed. |
104
- | **publicKey** | `string` | ✅ | Your public API key provided by Tap Payments. |
105
- | **merchantDomain** | `string` | ✅ | Merchant's domain (e.g. `https://example.com`). |
106
- | **scope** | `ConnectScope` | ✅ | Defines the integration scope. |
107
- | **onReady** | `() => void` | ❌ | Called when the app configurations are loaded successfully. |
108
- | **onClose** | `() => void` | ❌ | Triggered when the Connect element is closed. |
109
- | **onError** | `(error: CustomError) => void` | ❌ | Triggered when an error occurs. |
110
- | **onSuccess** | `(response: Record<string, string \| number>) => void` | ❌ | Triggered when the flow completes successfully. |
111
- | **theme** | `ConnectTheme` | ❌ | UI theme configuration. |
112
- | **language** | `ConnectLanguage` | ❌ | Localization language. |
113
- | **businessCountryCode** | `string` | ❌ | ISO2 country code of the merchant. |
114
- | **leadId** | `string` | ❌ | ID to Load an existing lead. |
115
- | **showBoard** | `boolean` | ❌ | Show merchant board UI. |
116
- | **boardEditable** | `boolean` | ❌ | Allow merchant board editing. |
117
- | **platforms** | `string[]` | ❌ | List of merchant platforms. |
118
- | **features** | `ConnectAppFeatures` | ❌ | UI and behavior customization options. |
119
- | **paymentProvider** | `ConnectPaymentProvider` | ❌ | Payment provider configuration. |
120
- | **postUrl** | `string` | ❌ | Endpoint to post collected data to your backend. |
121
- | **redirectUrl** | `string` | ❌ | Redirect URL after success. |
122
- | **data** | `string[]` | ❌ | Data modules to collect (e.g. `brand`, `entity`). |
123
- | **mode** | `ConnectMode` | ❌ | Controls display behavior (page, popup, content). |
124
- | **notification** | `ConnectNotification` | ❌ | Notification configuration. |
125
- | **flow** | `ConnectFlows` | ❌ | Specifies a predefined flow to open directly (e.g., `brand`, `entity`, `kyc`, etc.). |
126
- | **token** | `string` | ❌ | Connect session token. Required when `flow` is provided and the flow is not `board` or `auth`. |
127
- | **boardId** | `string` | ❌ | Identifier of the board to load. Required when `flow` is set to `board`. |
128
- | **configToken** | `string` | ❌ | Pre-generated configuration token from backend. |
129
- | **region** | `ConnectRegions` | ❌ | Region code determining middleware domain. |
116
+ | Prop | Type | Required | Description |
117
+ | ----------------------- | ---------------------------------------------------------------- | -------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
118
+ | **open** | `boolean` | ✅ | Controls whether the Connect element is open or closed. |
119
+ | **publicKey** | `string` | ✅ | Your public API key provided by Tap Payments. |
120
+ | **merchantDomain** | `string` | ✅ | Merchant's domain (e.g. `https://example.com`). |
121
+ | **scope** | `ConnectScope` | ✅ | Defines the integration scope. |
122
+ | **onReady** | `() => void` | ❌ | Called when the app configurations are loaded successfully. |
123
+ | **onClose** | `() => void` | ❌ | Triggered when the Connect element is closed. |
124
+ | **onError** | `(error: CustomError) => void` | ❌ | Triggered when an error occurs. |
125
+ | **onSuccess** | `(response: Record<string, string \| number \| object>) => void` | ❌ | Triggered when the flow completes successfully. |
126
+ | **onCreated** | `(response: Record<string, string \| number \| object>) => void` | ❌ | Triggered after creating an account. |
127
+ | **onBoardCompleted** | `() => void` | ❌ | Triggered when all board flows are completed. |
128
+ | **theme** | `ConnectTheme` | ❌ | UI theme configuration. |
129
+ | **language** | `ConnectLanguage` | ❌ | Localization language. |
130
+ | **businessCountryCode** | `string` | ❌ | ISO2 country code of the merchant. |
131
+ | **leadId** | `string` | ❌ | ID to Load an existing lead. |
132
+ | **showBoard** | `boolean` | ❌ | Show merchant board UI. |
133
+ | **boardEditable** | `boolean` | ❌ | Allow merchant board editing. |
134
+ | **platforms** | `string[]` | ❌ | List of merchant platforms. |
135
+ | **features** | `ConnectAppFeatures` | ❌ | UI and behavior customization options. |
136
+ | **paymentProvider** | `ConnectPaymentProvider` | ❌ | Payment provider configuration. |
137
+ | **postUrl** | `string` | ❌ | Endpoint to post collected data to your backend. |
138
+ | **redirectUrl** | `string` | ❌ | Redirect URL after success. |
139
+ | **data** | `string[]` | ❌ | Data modules to collect (e.g. `brand`, `entity`). |
140
+ | **mode** | `ConnectMode` | ❌ | Display mode. Every mode except `PAGE` renders the Connect page in an iframe overlay; `PAGE` redirects the whole page to the Connect URL. |
141
+ | **notification** | `ConnectNotification` | ❌ | Notification configuration. |
142
+ | **flow** | `ConnectFlows` | ❌ | Specifies a predefined flow to open directly (e.g., `brand`, `entity`, `kyc`, etc.). |
143
+ | **token** | `string` | ❌ | Connect session token. Required when `flow` is provided and the flow is not `board` or `auth`. |
144
+ | **boardId** | `string` | ❌ | Identifier of the board to load. Required when `flow` is set to `board`. |
145
+ | **configToken** | `string` | ❌ | Pre-generated configuration token from backend. |
146
+ | **region** | `ConnectRegions` | ❌ | Region code determining middleware domain. |
130
147
 
131
148
  ##### `ConnectAppFeatures`
132
149
 
@@ -136,9 +153,12 @@ You can also use the SDK without a React build setup by including the UMD bundle
136
153
  | embedded | `boolean` | Enable embedded layout mode. |
137
154
  | merchantLogo | `boolean` | Show or hide merchant logo. |
138
155
  | closeButton | `boolean` | Display close button. |
156
+ | overlay | `boolean` | Show or hide loader overlay. |
139
157
  | dialogStartTransition | `ConnectDialogTransition` | Dialog opening animation. |
140
158
  | dialogEndTransition | `ConnectDialogTransition` | Dialog closing animation. |
141
159
  | dialogEdgeFormat | `ConnectDialogEdgeFormat` | Dialog edge style. |
160
+ | emailAuth | `boolean` | Enable email flow for Qatar. |
161
+ | zIndex | `number` | zInde value for connect. |
142
162
 
143
163
  ##### `ConnectPaymentProvider`
144
164
 
@@ -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 P(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=P(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||{}),N=(e=>(e.AR="ar",e.EN="en",e.DYNAMIC="dynamic",e))(N||{}),C=(e=>(e.STRAIGHT="straight",e.CURVED="curved",e))(C||{}),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||{}),p=(e=>(e.AUTH_TOKEN="token",e.CONFIG_TOKEN="config_token",e.THEME="theme",e.LANGUAGE="lang",e))(p||{});const B=({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(B),S=f.createContext({}),g=()=>f.useContext(S);function H({children:e,props:n}){const[t,o]=f.useState(!1),a=i=>{o(i)},s=()=>{o(!1)};return r.jsx(S.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",_="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}=g();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},R=e=>e?["sa","sau"].includes(e.toLowerCase()):!1,U=e=>e==="dr",ne=(e="")=>{const[n,t]=e.split("-");return R(n)?U(t)?W:K:$},oe=(e="")=>{const[n,t]=e.split("-");return R(n)?U(t)?q:Y:_},ae=e=>{var n,t,o,a,s,i,c,d,u,b,j,O,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:{...e.boardId&&{id:e.boardId},display:e.showBoard??!0,editable:e.boardEditable??!0},interface:{theme:e.theme||v.DYNAMIC,locale:e.language||N.DYNAMIC,edges:((n=e.features)==null?void 0:n.dialogEdgeFormat)||C.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:((i=e.notification)==null?void 0:i.sms)??!1},features:{poweredby:((c=e.features)==null?void 0:c.poweredBy)??!0,close_button:((d=e.features)==null?void 0:d.closeButton)??!1,embedded:((u=e.features)==null?void 0:u.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},...(((b=e.paymentProvider)==null?void 0:b.institutionId)||((j=e.paymentProvider)==null?void 0:j.technologyId))&&{payment_provider:{...((O=e.paymentProvider)==null?void 0:O.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.3-development",identifier:window.location.hostname||window.location.origin}}},se=({theme:e,language:n,configToken:t,flow:o,token:a,region:s})=>{const i=new URLSearchParams;let c="";return o&&(c=o,o!==h.AUTH&&o!==h.BOARD&&a&&i.append(p.AUTH_TOKEN,a)),e&&i.append(p.THEME,e),n&&i.append(p.LANGUAGE,n),i.append(p.CONFIG_TOKEN,t),`${oe(s)}/${c}?${i.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||_},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=g(),o=async()=>{var a,s,i;t.onLoadingHandler(!0);try{let c=t.configToken,d;if(!c){if(d=await ie(t),!d.token)throw new Error("500::Config token is missing");c=d.token}const u=se({theme:(a=d==null?void 0:d.interface)==null?void 0:a.theme,language:(s=d==null?void 0:d.interface)==null?void 0:s.locale,configToken:c,flow:t.flow,token:t.token,region:t.region});if(t.mode!==y.PAGE)return n(u);window.location.href=u}catch(c){const d=new te(c);(i=t.onError)==null||i.call(t,d.getClientError()),t.onLoadingHandler(!1)}};return m.useEffect(()=>{o()},[]),{connectLink:e}},ce=()=>{const{onSuccess:e,onClose:n,onError:t,onReady:o,onLoaded:a}=g(),s=m.useCallback(async i=>{if(i.origin!==_)return;const{data:c,event:d}=i.data;switch(d){case l.ON_CLOSE:n==null||n();break;case l.ON_ERROR:t==null||t(c);break;case l.ON_SUCCESS:e==null||e(c);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=C;exports.ConnectDialogTransition=x;exports.ConnectElement=D;exports.ConnectFlows=h;exports.ConnectLanguage=N;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:"67.5px",height:"67.5px"},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.3-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;
@@ -1,12 +1,12 @@
1
- import { jsx as n, jsxs as c, Fragment as v } from "react/jsx-runtime";
2
- import * as f from "react";
3
- import h from "react";
4
- import D from "react-dom";
5
- var _ = /* @__PURE__ */ ((e) => (e.PAGE = "page", e.POPUP = "popup", e.CONTENT = "content", e))(_ || {}), B = /* @__PURE__ */ ((e) => (e.AUTH = "auth", e.MERCHANT = "merchant", e))(B || {}), y = /* @__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))(y || {}), P = /* @__PURE__ */ ((e) => (e.SA = "sa", e.SA_DR = "sa-dr", e))(P || {}), I = /* @__PURE__ */ ((e) => (e.DARK = "dark", e.LIGHT = "light", e.DYNAMIC = "dynamic", e))(I || {}), T = /* @__PURE__ */ ((e) => (e.AR = "ar", e.EN = "en", e.DYNAMIC = "dynamic", e))(T || {}), U = /* @__PURE__ */ ((e) => (e.STRAIGHT = "straight", e.CURVED = "curved", e))(U || {}), N = /* @__PURE__ */ ((e) => (e.LEFT = "left", e.RIGHT = "right", e.UP = "up", e.DOWN = "down", e))(N || {}), u = /* @__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))(u || {}), m = /* @__PURE__ */ ((e) => (e.AUTH_TOKEN = "token", e.CONFIG_TOKEN = "config_token", e.THEME = "theme", e.LANGUAGE = "lang", e))(m || {});
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
+ import G from "react-dom";
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: r = "rgba(238, 238, 238, 1)",
9
- innerStartColor: t = "rgba(244, 244, 244, 1)",
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
@@ -15,8 +15,8 @@ const H = ({
15
15
  {
16
16
  style: {
17
17
  position: "relative",
18
- width: "135px",
19
- height: "135px"
18
+ width: "67.5px",
19
+ height: "67.5px"
20
20
  },
21
21
  children: /* @__PURE__ */ n(
22
22
  "div",
@@ -30,8 +30,8 @@ const H = ({
30
30
  height: "100%",
31
31
  opacity: 0.9
32
32
  },
33
- children: /* @__PURE__ */ c("svg", { width: "199", height: "197", viewBox: "0 0 199 197", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
34
- /* @__PURE__ */ c("g", { children: [
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__ */ c(v, { children: [
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__ */ c(v, { children: [
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__ */ c("defs", { children: [
109
- /* @__PURE__ */ c(
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__ */ c(
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: r })
191
+ /* @__PURE__ */ n("stop", { offset: "1", stopColor: t })
192
192
  ]
193
193
  }
194
194
  ),
195
- /* @__PURE__ */ c(
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: t }),
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
- ), M = h.memo(H), R = h.createContext({}), E = () => h.useContext(R);
216
- function $({ children: e, props: r }) {
217
- const [t, o] = h.useState(!1), a = (i) => {
218
- o(i);
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) => {
219
+ o(l);
219
220
  }, s = () => {
220
221
  o(!1);
221
222
  };
222
- return /* @__PURE__ */ n(R.Provider, { value: { ...r, onLoadingHandler: a, loading: t, onLoaded: s }, children: e });
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.dev.tap.company/middleware/v3/connect", j = "https://connect-mw.dev.tap.company/middleware/v3/connect", W = "https://connect-mw.dev.tap.company/middleware/v3/connect", Y = "tap-connect-sdk-iframe", C = "https://sdk-connect.dev.tap.company", F = "https://sdk-connect.dev.tap.company", V = "https://sdk-connect.dev.tap.company", q = ({ src: e }) => {
225
- const { loading: r } = E();
226
- return /* @__PURE__ */ c(v, { children: [
227
- r && /* @__PURE__ */ n(M, { toggleAnimation: !0 }),
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: Y,
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 z = function(e) {
247
- var r, t;
248
- return ((t = (r = e == null ? void 0 : e.response) === null || r === void 0 ? void 0 : r.data) === null || t === void 0 ? void 0 : t.errors) !== void 0;
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 typeof e == "string";
263
+ return e instanceof Error;
253
264
  }, Q = function(e) {
265
+ return typeof e == "string";
266
+ }, Z = function(e) {
254
267
  try {
255
- var r = e.response.data.errors, t = r[0], o = t.description, a = t.code;
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
- }, Z = function(e) {
279
+ }, ee = function(e) {
267
280
  try {
268
- var r = e.message, t = r.split("::"), o = t[0], a = t[1];
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
- }, ee = function(e) {
292
+ }, te = function(e) {
280
293
  try {
281
- var r = e.split("::"), t = r[0], o = r[1];
294
+ var t = e.split("::"), r = t[0], o = t[1];
282
295
  return {
283
296
  message: o,
284
- code: t
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
- }, te = function() {
293
- function e(r) {
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
- }), z(r)) {
305
- var t = Q(r);
306
- this.code = t.code, this.message = t.message;
307
- } else if (J(r)) {
308
- var t = Z(r);
309
- this.code = t.code, this.message = t.message;
310
- } else if (X(r)) {
311
- var t = ee(r);
312
- this.code = t.code, this.message = t.message;
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,23 +352,23 @@ var z = function(e) {
339
352
  }
340
353
  }), e;
341
354
  }();
342
- const re = (e = "tap-connect-sdk-element") => {
343
- const r = document.getElementById(e);
344
- if (r) return r;
345
- const t = document.createElement("div");
346
- return t.setAttribute("id", e), document.body.prepend(t), t;
347
- }, S = (e) => e ? ["sa", "sau"].includes(e.toLowerCase()) : !1, L = (e) => e === "dr", ne = (e = "") => {
348
- const [r, t] = e.split("-");
349
- return S(r) ? L(t) ? W : j : K;
350
- }, oe = (e = "") => {
351
- const [r, t] = e.split("-");
352
- return S(r) ? L(t) ? V : F : C;
353
- }, ae = (e) => {
354
- var r, t, o, a, s, i, l, d, p, O, b, g, A, k, w;
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 || _.PAGE,
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 },
@@ -366,9 +379,9 @@ const re = (e = "tap-connect-sdk-element") => {
366
379
  },
367
380
  interface: {
368
381
  theme: e.theme || I.DYNAMIC,
369
- locale: e.language || T.DYNAMIC,
370
- edges: ((r = e.features) == null ? void 0 : r.dialogEdgeFormat) || U.CURVED,
371
- parnter_logo: ((t = e.features) == null ? void 0 : t.merchantLogo) ?? !1,
382
+ locale: e.language || R.DYNAMIC,
383
+ edges: ((t = e.features) == null ? void 0 : t.dialogEdgeFormat) || S.CURVED,
384
+ parnter_logo: ((r = e.features) == null ? void 0 : r.merchantLogo) ?? !1,
372
385
  dialog_transition: {
373
386
  start: ((o = e.features) == null ? void 0 : o.dialogStartTransition) || N.UP,
374
387
  end: ((a = e.features) == null ? void 0 : a.dialogEndTransition) || N.DOWN
@@ -376,105 +389,119 @@ const re = (e = "tap-connect-sdk-element") => {
376
389
  },
377
390
  notification: {
378
391
  email: ((s = e.notification) == null ? void 0 : s.email) ?? !1,
379
- sms: ((i = e.notification) == null ? void 0 : i.sms) ?? !1
392
+ sms: ((d = e.notification) == null ? void 0 : d.sms) ?? !1
380
393
  },
381
394
  features: {
382
395
  poweredby: ((l = e.features) == null ? void 0 : l.poweredBy) ?? !0,
383
- close_button: ((d = e.features) == null ? void 0 : d.closeButton) ?? !1,
384
- embedded: ((p = e.features) == null ? void 0 : p.embedded) ?? !1
396
+ close_button: ((i = e.features) == null ? void 0 : i.closeButton) ?? !1,
397
+ embedded: ((c = e.features) == null ? void 0 : c.embedded) ?? !1,
398
+ email_auth: ((f = e.features) == null ? void 0 : f.emailAuth) ?? !1
385
399
  },
386
400
  ...e.leadId && { lead: { id: e.leadId } },
387
401
  ...e.postUrl && { post: { url: e.postUrl } },
388
402
  ...e.redirectUrl && { redirect: { url: e.redirectUrl } },
389
403
  ...e.platforms && { platforms: e.platforms },
390
- ...(((O = e.paymentProvider) == null ? void 0 : O.institutionId) || ((b = e.paymentProvider) == null ? void 0 : b.technologyId)) && {
404
+ ...(((O = e.paymentProvider) == null ? void 0 : O.institutionId) || ((C = e.paymentProvider) == null ? void 0 : C.technologyId)) && {
391
405
  payment_provider: {
392
- ...((g = e.paymentProvider) == null ? void 0 : g.institutionId) && { institution: { id: (A = e.paymentProvider) == null ? void 0 : A.institutionId } },
393
- ...((k = e.paymentProvider) == null ? void 0 : k.technologyId) && { technology: { id: (w = e.paymentProvider) == null ? void 0 : w.technologyId } }
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 } }
394
408
  }
395
409
  },
410
+ ...e.token && { auth_token: e.token },
396
411
  app_info: {
397
412
  name: "connect-sdk-v2",
398
- version: "1.0.3-development",
413
+ version: "1.0.3-sandbox",
399
414
  identifier: window.location.hostname || window.location.origin
400
415
  }
401
416
  };
402
- }, se = ({ theme: e, language: r, configToken: t, flow: o, token: a, region: s }) => {
403
- const i = new URLSearchParams();
404
- let l = "";
405
- return o && (l = o, o !== y.AUTH && o !== y.BOARD && a && i.append(m.AUTH_TOKEN, a)), e && i.append(m.THEME, e), r && i.append(m.LANGUAGE, r), i.append(m.CONFIG_TOKEN, t), `${oe(s)}/${l}?${i.toString()}`;
406
- }, ie = async (e) => {
407
- const r = await fetch(ne(e.region), {
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), {
408
423
  method: "POST",
409
424
  headers: {
410
425
  "Content-Type": "application/json",
411
426
  Authorization: `Bearer ${e.publicKey}`,
412
- mdn: e.merchantDomain || C
427
+ mdn: e.merchantDomain || E
413
428
  },
414
- body: JSON.stringify(ae(e))
429
+ body: JSON.stringify(se(e))
415
430
  });
416
- if (!r.ok)
417
- throw new Error(`${r.status}::${r.statusText}`);
418
- return r.json();
419
- }, de = () => {
420
- const [e, r] = f.useState(""), t = E(), o = async () => {
421
- var a, s, i;
422
- t.onLoadingHandler(!0);
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);
423
438
  try {
424
- let l = t.configToken, d;
439
+ let l = r.configToken, i;
425
440
  if (!l) {
426
- if (d = await ie(t), !d.token) throw new Error("500::Config token is missing");
427
- l = d.token;
441
+ if (i = await de(r), !i.token) throw new Error("500::Config token is missing");
442
+ l = i.token;
428
443
  }
429
- const p = se({
430
- theme: (a = d == null ? void 0 : d.interface) == null ? void 0 : a.theme,
431
- language: (s = d == null ? void 0 : d.interface) == null ? void 0 : s.locale,
444
+ const c = ie({
445
+ theme: (a = i == null ? void 0 : i.interface) == null ? void 0 : a.theme,
446
+ language: (s = i == null ? void 0 : i.interface) == null ? void 0 : s.locale,
432
447
  configToken: l,
433
- flow: t.flow,
434
- token: t.token,
435
- region: t.region
448
+ flow: r.flow,
449
+ region: r.region
436
450
  });
437
- if (t.mode !== _.PAGE) return r(p);
438
- window.location.href = p;
451
+ if (r.mode !== b.PAGE) return t(c);
452
+ window.location.href = c;
439
453
  } catch (l) {
440
- const d = new te(l);
441
- (i = t.onError) == null || i.call(t, d.getClientError()), t.onLoadingHandler(!1);
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 f.useEffect(() => {
458
+ return p.useEffect(() => {
445
459
  o();
446
460
  }, []), { connectLink: e };
447
- }, le = () => {
448
- const { onSuccess: e, onClose: r, onError: t, onReady: o, onLoaded: a } = E(), s = f.useCallback(
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(
449
470
  async (i) => {
450
- if (i.origin !== C) return;
451
- const { data: l, event: d } = i.data;
452
- switch (d) {
453
- case u.ON_CLOSE:
454
- r == null || r();
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 u.ON_ERROR:
457
- t == null || t(l);
477
+ case m.ON_ERROR:
478
+ r == null || r(c);
458
479
  break;
459
- case u.ON_SUCCESS:
460
- e == null || e(l);
480
+ case m.ON_SUCCESS:
481
+ e == null || e(c);
461
482
  break;
462
- case u.ON_LOADED:
483
+ case m.ON_LOADED:
463
484
  a();
464
485
  break;
465
- case u.ON_READY:
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
- [r, t, a, o, e]
497
+ [t, r, a, o, e, s, d]
471
498
  );
472
- f.useEffect(() => (window.addEventListener("message", s, !1), () => {
473
- window.removeEventListener("message", s);
474
- }), [s]);
475
- }, ce = () => {
476
- const { connectLink: e } = de();
477
- return le(), /* @__PURE__ */ n(
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
- }, ue = (e) => /* @__PURE__ */ n($, { props: e, children: e.open && /* @__PURE__ */ n(ce, {}) }), pe = f.memo(ue);
496
- var G, x = D;
497
- G = x.createRoot, x.hydrateRoot;
498
- const ve = (e, r) => {
499
- const t = re(e), o = G(t);
500
- return o.render(/* @__PURE__ */ n(pe, { ...r })), { unmount: () => o.unmount() };
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
- U as ConnectDialogEdgeFormat,
531
+ S as ConnectDialogEdgeFormat,
504
532
  N as ConnectDialogTransition,
505
- pe as ConnectElement,
506
- y as ConnectFlows,
507
- T as ConnectLanguage,
508
- _ as ConnectMode,
509
- P as ConnectRegions,
533
+ fe as ConnectElement,
534
+ P as ConnectFlows,
535
+ R as ConnectLanguage,
536
+ b as ConnectMode,
537
+ M as ConnectRegions,
510
538
  B as ConnectScope,
511
539
  I as ConnectTheme,
512
- ve as renderConnectElement
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.3-development",
4
+ "version": "1.0.3-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",