@everymatrix/cashier-iframe-redirect 1.44.0 → 1.45.0
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/components/CashierHeader-CwvMMI29.cjs +5 -0
- package/components/CashierHeader-oxB7huAc.js +4200 -0
- package/components/CashierIframeRedirect-BPhpKBk-.js +383 -0
- package/components/CashierIframeRedirect-BQT1xNsP.cjs +1 -0
- package/components/CashierSpinner-08LGeZV0.js +71 -0
- package/components/CashierSpinner-mmVt9y2J.cjs +1 -0
- package/es2015/cashier-iframe-redirect.cjs +1 -0
- package/es2015/cashier-iframe-redirect.js +16 -0
- package/package.json +18 -32
- package/CHANGELOG.md +0 -9
- package/README.md +0 -30
- package/dist/cashier-iframe-redirect.js +0 -603
- package/dist/cashier-iframe-redirect.js.map +0 -1
- package/index.html +0 -41
- package/index.js +0 -1
- package/public/favicon.png +0 -0
- package/public/reset.css +0 -48
- package/rollup.config.js +0 -59
- package/src/CashierIframeRedirect.svelte +0 -159
- package/src/i18n.js +0 -32
- package/src/index.ts +0 -4
- package/src/translations.js +0 -14
- package/stories/CashierIframeRedirect.stories.js +0 -13
- package/tsconfig.json +0 -6
package/index.html
DELETED
|
@@ -1,41 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="en">
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset='utf-8'>
|
|
5
|
-
<meta name='viewport' content='width=device-width,initial-scale=1'>
|
|
6
|
-
|
|
7
|
-
<title>
|
|
8
|
-
cashier-iframe-redirect
|
|
9
|
-
</title>
|
|
10
|
-
<link rel="stylesheet" href="public/reset.css">
|
|
11
|
-
<script src='dist/cashier-iframe-redirect.js'></script>
|
|
12
|
-
</head>
|
|
13
|
-
|
|
14
|
-
<body>
|
|
15
|
-
<style>
|
|
16
|
-
html,body { margin: 0; padding: 0; height: 100%; font-family: "Helvetica Neue", "Helvetica", sans-serif; }
|
|
17
|
-
.header { display: flex; justify-content: center; align-items: center; padding: 10px 20px; margin-bottom: 20px; background: #42a3e2; box-shadow: 3px 4px 5px 0px rgba(0,0,0, .2); }
|
|
18
|
-
.header__logo svg { height: 50px; width: 50px; margin-right: 5px; }
|
|
19
|
-
.header__name { color: #fff; }
|
|
20
|
-
.header__name span { margin-right: 10px; font-weight: bold; }
|
|
21
|
-
.webcomponent { padding: 10px 20px; }
|
|
22
|
-
</style>
|
|
23
|
-
<header class="header">
|
|
24
|
-
<div class="header__logo">
|
|
25
|
-
<svg xmlns="http://www.w3.org/2000/svg" width="161" height="132" viewBox="0 0 161 132"><defs><linearGradient x1="0%" y1="50%" y2="50%" id="a"><stop stop-color="#2A3B8F" offset="0%"/><stop stop-color="#29ABE2" offset="100%"/></linearGradient><linearGradient x1="100%" y1="50%" x2="0%" y2="50%" id="c"><stop stop-color="#B4D44E" offset="0%"/><stop stop-color="#E7F716" offset="100%"/></linearGradient></defs><g fill="none" fill-rule="evenodd"><path fill="#166DA5" d="M160.6 65.9l-17.4 29.3-24.4-29.7 24.4-28.9z"/><path fill="#8FDB69" d="M141.3 100.2l-26.5-31.7-15.9 26.6 24.7 36.1z"/><path fill="#166DA5" d="M141 31.4l-26.2 31.8-15.9-26.6L123.6.9z"/><path fill="url(#a)" opacity=".95" d="M61.1 31.4H141L123.4.7H78.7z M114.8 63.3H159l-15.9-26.8H98.8"/><path fill="url(#c)" opacity=".95" d="M141.3 100.3H61l17.6 30.5h45z M114.8 68.4H159l-15.9 26.8H98.8"/><path fill="#010101" d="M78.6 130.8L41 65.8 79.1.8H37.9L.4 65.8l37.5 65z"/></g></svg>
|
|
26
|
-
</div>
|
|
27
|
-
<h1 class="header__name">
|
|
28
|
-
<span>WEBCOMPONENT:</span> cashier-iframe-redirect
|
|
29
|
-
</h1>
|
|
30
|
-
</header>
|
|
31
|
-
|
|
32
|
-
<div class="webcomponent">
|
|
33
|
-
<cashier-iframe-redirect
|
|
34
|
-
lang="en"
|
|
35
|
-
iframeurl="https://everymatrix.com/"
|
|
36
|
-
translationurl="https://static.everymatrix.com/mmstage/translations/1000/mm-localization-en.json"
|
|
37
|
-
></cashier-iframe-redirect>
|
|
38
|
-
</div>
|
|
39
|
-
|
|
40
|
-
</body>
|
|
41
|
-
</html>
|
package/index.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import './dist/cashier-iframe-redirect.js';
|
package/public/favicon.png
DELETED
|
Binary file
|
package/public/reset.css
DELETED
|
@@ -1,48 +0,0 @@
|
|
|
1
|
-
/* http://meyerweb.com/eric/tools/css/reset/
|
|
2
|
-
v2.0 | 20110126
|
|
3
|
-
License: none (public domain)
|
|
4
|
-
*/
|
|
5
|
-
|
|
6
|
-
html, body, div, span, applet, object, iframe,
|
|
7
|
-
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
|
8
|
-
a, abbr, acronym, address, big, cite, code,
|
|
9
|
-
del, dfn, em, img, ins, kbd, q, s, samp,
|
|
10
|
-
small, strike, strong, sub, sup, tt, var,
|
|
11
|
-
b, u, i, center,
|
|
12
|
-
dl, dt, dd, ol, ul, li,
|
|
13
|
-
fieldset, form, label, legend,
|
|
14
|
-
table, caption, tbody, tfoot, thead, tr, th, td,
|
|
15
|
-
article, aside, canvas, details, embed,
|
|
16
|
-
figure, figcaption, footer, header, hgroup,
|
|
17
|
-
menu, nav, output, ruby, section, summary,
|
|
18
|
-
time, mark, audio, video {
|
|
19
|
-
margin: 0;
|
|
20
|
-
padding: 0;
|
|
21
|
-
border: 0;
|
|
22
|
-
font-size: 100%;
|
|
23
|
-
font: inherit;
|
|
24
|
-
vertical-align: baseline;
|
|
25
|
-
}
|
|
26
|
-
/* HTML5 display-role reset for older browsers */
|
|
27
|
-
article, aside, details, figcaption, figure,
|
|
28
|
-
footer, header, hgroup, menu, nav, section {
|
|
29
|
-
display: block;
|
|
30
|
-
}
|
|
31
|
-
body {
|
|
32
|
-
line-height: 1;
|
|
33
|
-
}
|
|
34
|
-
ol, ul {
|
|
35
|
-
list-style: none;
|
|
36
|
-
}
|
|
37
|
-
blockquote, q {
|
|
38
|
-
quotes: none;
|
|
39
|
-
}
|
|
40
|
-
blockquote:before, blockquote:after,
|
|
41
|
-
q:before, q:after {
|
|
42
|
-
content: '';
|
|
43
|
-
content: none;
|
|
44
|
-
}
|
|
45
|
-
table {
|
|
46
|
-
border-collapse: collapse;
|
|
47
|
-
border-spacing: 0;
|
|
48
|
-
}
|
package/rollup.config.js
DELETED
|
@@ -1,59 +0,0 @@
|
|
|
1
|
-
import svelte from 'rollup-plugin-svelte';
|
|
2
|
-
import commonjs from '@rollup/plugin-commonjs';
|
|
3
|
-
import resolve from '@rollup/plugin-node-resolve';
|
|
4
|
-
import serve from 'rollup-plugin-dev-server';
|
|
5
|
-
import livereload from 'rollup-plugin-livereload';
|
|
6
|
-
import { terser } from 'rollup-plugin-terser';
|
|
7
|
-
import sveltePreprocess from 'svelte-preprocess';
|
|
8
|
-
import typescript from '@rollup/plugin-typescript';
|
|
9
|
-
const production = process.env.NODE_ENV === 'production';
|
|
10
|
-
const dev = process.env.NODE_ENV === 'development';
|
|
11
|
-
|
|
12
|
-
export default {
|
|
13
|
-
input: 'src/index.ts',
|
|
14
|
-
output: {
|
|
15
|
-
sourcemap: true,
|
|
16
|
-
format: 'umd',
|
|
17
|
-
name: 'app',
|
|
18
|
-
file: 'dist/cashier-iframe-redirect.js'
|
|
19
|
-
},
|
|
20
|
-
plugins: [
|
|
21
|
-
svelte({
|
|
22
|
-
preprocess: sveltePreprocess(),
|
|
23
|
-
compilerOptions: {
|
|
24
|
-
// enable run-time checks when not in production
|
|
25
|
-
customElement: true,
|
|
26
|
-
dev: !production
|
|
27
|
-
}
|
|
28
|
-
}),
|
|
29
|
-
commonjs(),
|
|
30
|
-
resolve({
|
|
31
|
-
browser: true,
|
|
32
|
-
dedupe: ['svelte']
|
|
33
|
-
}),
|
|
34
|
-
dev && serve({
|
|
35
|
-
open: true,
|
|
36
|
-
verbose: true,
|
|
37
|
-
allowCrossOrigin: true,
|
|
38
|
-
historyApiFallback: false,
|
|
39
|
-
host: 'localhost',
|
|
40
|
-
port: 5050,
|
|
41
|
-
}),
|
|
42
|
-
dev && livereload({ watch: ['', 'dist'] }),
|
|
43
|
-
typescript({
|
|
44
|
-
sourceMap: !production,
|
|
45
|
-
inlineSources: !production,
|
|
46
|
-
}),
|
|
47
|
-
// If we're building for production (npm run build
|
|
48
|
-
// instead of npm run dev), minify
|
|
49
|
-
production &&
|
|
50
|
-
terser({
|
|
51
|
-
output: {
|
|
52
|
-
comments: "all"
|
|
53
|
-
},
|
|
54
|
-
})
|
|
55
|
-
],
|
|
56
|
-
watch: {
|
|
57
|
-
clearScreen: false
|
|
58
|
-
}
|
|
59
|
-
};
|
|
@@ -1,159 +0,0 @@
|
|
|
1
|
-
<svelte:options tag={null} />
|
|
2
|
-
<script lang="ts">
|
|
3
|
-
import { _, addNewMessages, setLocale } from './i18n';
|
|
4
|
-
import { TRANSLATIONS } from './translations';
|
|
5
|
-
import {createEventDispatcher} from "svelte";
|
|
6
|
-
import '@everymatrix/cashier-header';
|
|
7
|
-
import '@everymatrix/cashier-spinner';
|
|
8
|
-
|
|
9
|
-
export let lang:string = 'en';
|
|
10
|
-
export let iframeurl:string;
|
|
11
|
-
export let translationurl:string='';
|
|
12
|
-
export let showbackbutton: string = '';
|
|
13
|
-
export let clientstyling:string = '';
|
|
14
|
-
export let clientstylingurl:string = ''
|
|
15
|
-
export let title: string = '';
|
|
16
|
-
|
|
17
|
-
let isLoading:boolean = true;
|
|
18
|
-
let customStylingContainer:HTMLElement;
|
|
19
|
-
const dispatch = createEventDispatcher();
|
|
20
|
-
const setTranslationUrl = () => {
|
|
21
|
-
let url:string = translationurl;
|
|
22
|
-
if (url) {
|
|
23
|
-
return fetch(url).then((res:any) => res.json())
|
|
24
|
-
.then((res) => {
|
|
25
|
-
Object.keys(res).forEach((item:any):void => {
|
|
26
|
-
addNewMessages(item, res[item]);
|
|
27
|
-
});
|
|
28
|
-
}).catch((err:any) => {
|
|
29
|
-
console.log(err);
|
|
30
|
-
});
|
|
31
|
-
}
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
Object.keys(TRANSLATIONS).forEach((item:any):void => {
|
|
35
|
-
addNewMessages(item, TRANSLATIONS[item]);
|
|
36
|
-
});
|
|
37
|
-
|
|
38
|
-
const setActiveLanguage = ():void => {
|
|
39
|
-
setLocale(lang);
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
const setClientStyling = ():void => {
|
|
43
|
-
let sheet = document.createElement('style');
|
|
44
|
-
sheet.innerHTML = clientstyling;
|
|
45
|
-
customStylingContainer.appendChild(sheet);
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
const setClientStylingURL = ():void => {
|
|
49
|
-
let url:URL = new URL(clientstylingurl);
|
|
50
|
-
let cssFile:HTMLElement = document.createElement('style');
|
|
51
|
-
|
|
52
|
-
fetch(url.href)
|
|
53
|
-
.then((res:any) => res.text())
|
|
54
|
-
.then((data:any) => {
|
|
55
|
-
cssFile.innerHTML = data
|
|
56
|
-
|
|
57
|
-
setTimeout(() => { customStylingContainer.appendChild(cssFile) }, 1);
|
|
58
|
-
});
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
$: lang && setActiveLanguage();
|
|
62
|
-
$: translationurl && setTranslationUrl();
|
|
63
|
-
$: clientstyling && customStylingContainer && setClientStyling();
|
|
64
|
-
$: clientstylingurl && customStylingContainer && setClientStylingURL();
|
|
65
|
-
|
|
66
|
-
const close = () => {
|
|
67
|
-
dispatchEvent(new CustomEvent('closeIframe', {
|
|
68
|
-
bubbles: true,
|
|
69
|
-
cancelable: true,
|
|
70
|
-
composed: true
|
|
71
|
-
}));
|
|
72
|
-
}
|
|
73
|
-
|
|
74
|
-
const frameLoaded = (event: Event) => {
|
|
75
|
-
const iframe = event.target as HTMLIFrameElement;
|
|
76
|
-
if (iframe.src) {
|
|
77
|
-
isLoading = false;
|
|
78
|
-
}
|
|
79
|
-
}
|
|
80
|
-
</script>
|
|
81
|
-
|
|
82
|
-
<div class="CashierRedirectIframe" bind:this={customStylingContainer}>
|
|
83
|
-
<cashier-header
|
|
84
|
-
{lang}
|
|
85
|
-
{translationurl}
|
|
86
|
-
{title}
|
|
87
|
-
{showbackbutton}
|
|
88
|
-
{clientstylingurl}
|
|
89
|
-
{clientstyling}
|
|
90
|
-
>
|
|
91
|
-
{#if !!showbackbutton && showbackbutton !== 'false'}
|
|
92
|
-
|
|
93
|
-
<div slot="leftButton" class="CashierHeaderLeftButton" on:click={close}>
|
|
94
|
-
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
|
|
95
|
-
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5632 3.47782C12.4787 3.50138 12.3362 3.57505 12.2465 3.64153C12.1567 3.70806 10.8069 5.04216 9.24694 6.60626C6.11944 9.74192 6.25999 9.58204 6.25999 10.0037C6.25999 10.4243 6.13093 10.2784 9.34296 13.4903C12.4449 16.5921 12.356 16.5116 12.7278 16.5556C13.1855 16.6098 13.6413 16.2585 13.7301 15.783C13.7612 15.6164 13.7212 15.3395 13.6437 15.1847C13.6158 15.129 12.451 13.9396 11.0553 12.5417L8.51768 10L11.0553 7.45837C12.451 6.06048 13.6158 4.87114 13.6437 4.81544C13.7729 4.55751 13.7703 4.2006 13.6374 3.94274C13.4469 3.5731 12.9668 3.36532 12.5632 3.47782Z" fill="#111111"/>
|
|
96
|
-
</svg>
|
|
97
|
-
</div>
|
|
98
|
-
{/if}
|
|
99
|
-
{#if !showbackbutton || showbackbutton === 'false'}
|
|
100
|
-
<div slot="rightButton" class="CashierHeaderRightButton" on:click={close}>
|
|
101
|
-
<svg xmlns="http://www.w3.org/2000/svg" width="13" height="20" viewBox="0 0 13 13" fill="none">
|
|
102
|
-
<path d="M12.7711 0.229435C13.0582 0.517619 13.0755 0.973729 12.8215 1.28141L12.7711 1.33721L7.60685 6.50068L12.7711 11.6641C12.9128 11.8066 12.9944 11.998 12.999 12.1988C13.0035 12.3997 12.9308 12.5946 12.7957 12.7433C12.6606 12.892 12.4735 12.9832 12.2731 12.9979C12.0728 13.0126 11.8744 12.9497 11.7191 12.8223L11.6633 12.7719L6.49958 7.60791L1.3359 12.7719C1.19349 12.9136 1.00207 12.9952 0.801203 12.9998C0.60034 13.0044 0.405398 12.9316 0.256676 12.7965C0.107955 12.6614 0.0168256 12.4744 0.00212786 12.274C-0.0125699 12.0736 0.0502877 11.8753 0.177706 11.7199L0.228086 11.6641L5.3923 6.50068L0.228086 1.33721C0.0863637 1.1948 0.00478102 1.00338 0.000203544 0.802529C-0.00437393 0.601674 0.0684038 0.40674 0.203491 0.258024C0.338579 0.109308 0.525647 0.0181829 0.726024 0.00348576C0.9264 -0.0112114 1.12476 0.0516437 1.28011 0.179057L1.3359 0.229435L6.49958 5.39345L11.6633 0.229435C11.736 0.156695 11.8223 0.0989949 11.9174 0.0596283C12.0124 0.0202617 12.1143 0 12.2172 0C12.32 0 12.4219 0.0202617 12.5169 0.0596283C12.612 0.0989949 12.6983 0.156695 12.7711 0.229435Z" fill="#111111"/>
|
|
103
|
-
</svg>
|
|
104
|
-
</div>
|
|
105
|
-
{/if}
|
|
106
|
-
</cashier-header>
|
|
107
|
-
{#if isLoading}
|
|
108
|
-
<cashier-spinner
|
|
109
|
-
{clientstylingurl}
|
|
110
|
-
{clientstyling}
|
|
111
|
-
></cashier-spinner>
|
|
112
|
-
{/if}
|
|
113
|
-
<iframe on:load={(event)=> frameLoaded(event)} src="{iframeurl}" frameborder="0"></iframe>
|
|
114
|
-
</div>
|
|
115
|
-
|
|
116
|
-
<style lang="scss">
|
|
117
|
-
.CashierRedirectIframe {
|
|
118
|
-
height: inherit;
|
|
119
|
-
width: inherit;
|
|
120
|
-
}
|
|
121
|
-
|
|
122
|
-
iframe {
|
|
123
|
-
border-radius: 0 0 6px 6px;
|
|
124
|
-
border: 1px solid var(--mmw--color-grey-105, #E8E9EB);
|
|
125
|
-
height: calc(100% - var(--mmw--header-height, 32px));
|
|
126
|
-
width: 100%;
|
|
127
|
-
box-sizing: border-box;
|
|
128
|
-
}
|
|
129
|
-
|
|
130
|
-
.CashierHeaderLeftButton {
|
|
131
|
-
color: var(--mmw--color-grey-10, #111);
|
|
132
|
-
font-size: var(--emw--font-size-small, 14px);
|
|
133
|
-
font-weight: var(--emw--font-weight-semibold, 500);
|
|
134
|
-
margin-bottom: 0;
|
|
135
|
-
position: absolute;
|
|
136
|
-
display: flex;
|
|
137
|
-
align-items: center;
|
|
138
|
-
font-variant: all-small-caps;
|
|
139
|
-
height: 32px;
|
|
140
|
-
left: 7px;
|
|
141
|
-
gap: 2px;
|
|
142
|
-
cursor: pointer;
|
|
143
|
-
|
|
144
|
-
svg path {
|
|
145
|
-
fill: var(--mmw--color-grey-10, #111);
|
|
146
|
-
}
|
|
147
|
-
}
|
|
148
|
-
.CashierHeaderRightButton {
|
|
149
|
-
position: absolute;
|
|
150
|
-
display: flex;
|
|
151
|
-
justify-content: space-between;
|
|
152
|
-
align-items: center;
|
|
153
|
-
padding: 0 var(--emw--spacing-small, 12px);
|
|
154
|
-
height: inherit;
|
|
155
|
-
right: 0;
|
|
156
|
-
gap: var(--emw--spacing-small, 12px);
|
|
157
|
-
cursor: pointer;
|
|
158
|
-
}
|
|
159
|
-
</style>
|
package/src/i18n.js
DELETED
|
@@ -1,32 +0,0 @@
|
|
|
1
|
-
import {
|
|
2
|
-
dictionary,
|
|
3
|
-
locale,
|
|
4
|
-
init,
|
|
5
|
-
addMessages,
|
|
6
|
-
_
|
|
7
|
-
} from 'svelte-i18n';
|
|
8
|
-
|
|
9
|
-
init({
|
|
10
|
-
fallbackLocale: 'en'
|
|
11
|
-
});
|
|
12
|
-
|
|
13
|
-
function setupI18n({ withLocale: _locale, translations }) {
|
|
14
|
-
locale.subscribe((data) => {
|
|
15
|
-
if (data == null) {
|
|
16
|
-
dictionary.set(translations);
|
|
17
|
-
locale.set(_locale);
|
|
18
|
-
}
|
|
19
|
-
}); // maybe we will need this to make sure that the i18n is set up only once
|
|
20
|
-
/*dictionary.set(translations);
|
|
21
|
-
locale.set(_locale);*/
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
function addNewMessages(lang, dict) {
|
|
25
|
-
addMessages(lang, dict);
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
function setLocale(_locale) {
|
|
29
|
-
locale.set(_locale);
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
export { _, setupI18n, addNewMessages, setLocale };
|
package/src/index.ts
DELETED
package/src/translations.js
DELETED
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
export const TRANSLATIONS = {
|
|
2
|
-
"en": {
|
|
3
|
-
"redirectHeader": "Deposit redirect"
|
|
4
|
-
},
|
|
5
|
-
"pt-br": {
|
|
6
|
-
"redirectHeader": "Redirecionar depósito"
|
|
7
|
-
},
|
|
8
|
-
"es-mx": {
|
|
9
|
-
"redirectHeader": "Redirigir depósito"
|
|
10
|
-
},
|
|
11
|
-
"tr": {
|
|
12
|
-
"redirectHeader": "Para yatırma yönlendirmesi"
|
|
13
|
-
}
|
|
14
|
-
}
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import { html } from 'lit-element';
|
|
2
|
-
|
|
3
|
-
import CashierIframeRedirect from '../src/CashierIframeRedirect';
|
|
4
|
-
|
|
5
|
-
// This default export determines where your story goes in the story list
|
|
6
|
-
export default {
|
|
7
|
-
title: 'CashierIframeRedirect',
|
|
8
|
-
};
|
|
9
|
-
|
|
10
|
-
// 👇 We create a “template” of how args map to rendering
|
|
11
|
-
const CashierIframeRedirect = ({ aProperty }) => html`<cashier-iframe-redirect></cashier-iframe-redirect>`;
|
|
12
|
-
|
|
13
|
-
export const FirstStory = CashierIframeRedirect.bind({});
|