Skip to content

Commit 42dec1d

Browse files
netzkollektivnetzkollektiv
committed
Merge branch 'invoice'
2 parents 00b2f0d + 378b7c3 commit 42dec1d

File tree

68 files changed

+3766
-4282
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

68 files changed

+3766
-4282
lines changed

‎.eslintrc.json

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"parserOptions": {
3+
"project": "./tsconfig.json"
4+
},
5+
"extends": [
6+
"plugin:@stencil-community/recommended"
7+
]
8+
}

‎.storybook/main.js

+4-4
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,9 @@ module.exports = {
88
"@storybook/addon-essentials",
99
"@chromatic-com/storybook",
1010
"@storybook/addon-interactions",
11-
"@chromatic-com/storybook"
11+
"@chromatic-com/storybook",
12+
"@storybook/addon-mdx-gfm",
13+
"@storybook/addon-webpack5-compiler-swc"
1214
],
1315
"framework": {
1416
name: "@storybook/html-webpack5",
@@ -32,7 +34,5 @@ module.exports = {
3234
return config;
3335
},
3436
staticDirs: ['../dist'],
35-
docs: {
36-
autodocs: true
37-
}
37+
docs: {}
3838
};

‎.storybook/preview.js

+4-3
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,9 @@ export const parameters = {
1111
},
1212
viewMode: 'docs',
1313
docs: {
14-
source: {
15-
state: 'open',
16-
},
14+
canvas: {
15+
sourceState: 'shown'
16+
}
1717
}
1818
}
19+
export const tags = ['autodocs'];

‎.storybook/stories/1.Installation.mdx

+9-3
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,20 @@ import { Meta } from '@storybook/blocks';
22

33
<Meta title="Getting Started/Installation" />
44

5-
<h1>easyCredit-Ratenkauf Web Components</h1>
5+
<h1>easyCredit Web Components</h1>
66

7-
<p>Die easyCredit-Ratenkauf Web Components sind ein Set von Webkomponenten, die universell in E-Commerce-Plattformen wie Magento oder Shopware eingesetzt werden können. Die Webkomponenten erleichtern die Integration der easyCredit-Ratenkauf Zahlungslösung durch vielseitige Web-Frontend-Elemente für Marketing, Checkout und Händlerverwaltung.</p>
7+
<p>Die easyCredit Web Components sind ein Set von Web-Komponenten, die universell in E-Commerce-Plattformen, wie z.B. Magento, Shopware oder wooCommerce eingesetzt werden können. Die Webkomponenten erleichtern die Integration der easyCredit-Zahlungslösung durch vielseitige Web-Frontend-Elemente für Marketing, Checkout und Händlerverwaltung.</p>
88

99
<h2>Installation</h2>
1010

1111
Zur Integration der Web Components in ein beliebiges System fügen Sie die folgenden Zeilen in den `<head>` Ihres Shops ein:
1212

1313
```html
14-
<script type="module" src="https://ratenkauf.easycredit.de/api/resource/webcomponents/v3/easycredit-components/easycredit-components.esm.js"></script>
14+
// Pre-Release zur Entwicklung
15+
<script type="module" src="https://invoice.easycredit-ratenkauf-webcomponents.pages.dev/easycredit-components/easycredit-components.esm.js" defer></script>
16+
17+
// endgültige URL bei Release der Komponenten
18+
<!-- script type="module" src="https://ratenkauf.easycredit.de/api/resource/webcomponents/v3/easycredit-components/easycredit-components.esm.js"></script -->
1519
```
1620

1721
Jetzt können Sie jede der Komponenten innerhalb der Website verwenden:
@@ -20,6 +24,8 @@ Jetzt können Sie jede der Komponenten innerhalb der Website verwenden:
2024
<easycredit-widget amount="500" webshop-id="1.de.1234" />
2125
```
2226

27+
Die Komponenten werden bei Einbindung nicht vollständig geladen, sondern erst bei Einfügen in die Seite asynchron nachgeladen. Dadurch ist der entstehende Overhead durch die Einbindung zu vernachlässigen.
28+
2329
<h3>In ein bestehendes JavaScript-Projekt installieren</h3>
2430

2531
<p>Um die Komponenten in einem JavaScript-Projekt zu verwenden, installieren Sie das NPM-Package:</p>

‎.storybook/stories/2.Changelog.mdx

+5
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,10 @@ import { Meta } from "@storybook/blocks";
44

55
# Changelog
66

7+
## 2.0.0
8+
9+
* die Web-Komponenten wurden für easyCredit-Rechnung überarbeitet
10+
711
## 1.2.10
812

913
#### `<easycredit-widget />`
@@ -14,6 +18,7 @@ import { Meta } from "@storybook/blocks";
1418

1519
* der Error-Timeout wurde auf 10 Sekunden erhöht
1620
* der Performance-Observer wurde entfernt, weil er durch die Same-Origin-Policy keine Wirkung hatte
21+
=======
1722

1823
## 1.2.9
1924

‎.storybook/stories/3.Consent-Management.mdx

+2-2
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { Meta } from "@storybook/blocks";
22

33
<Meta title="Getting Started/Consent-Management" />
44

5-
<h1>Integration der easyCredit-Ratenkauf Web Components mit einem Consent-Management Tool</h1>
5+
<h1>Integration der easyCredit Web Components mit einem Consent-Management Tool</h1>
66

77
Sollen die Web Components vorbehaltlich der Zustimmung des Kunden eingefügt werden, muss darauf geachtet werden, dass die Komponenten als ESM-Modul eingebunden werden. Dabei muss darauf geachtet werden, dass bestimmte Komponenten im Checkout verwendet werden. Stimmt der Nutzer nicht zu, werden auch diese Komponenten nicht angezeigt.
88

@@ -11,7 +11,7 @@ Sollen die Web Components vorbehaltlich der Zustimmung des Kunden eingefügt wer
1111
In diesem Fall behelfen wir uns mit einem normalen Skript-Tag der konditional ausgeführt wird, und wiederum das ESM-Modul einfügt:
1212

1313
```html
14-
<script type="text/plain" data-usercentrics="EasyCredit Ratenkauf Web Components">
14+
<script type="text/plain" data-usercentrics="EasyCredit Web Components">
1515
var scriptTag = document.createElement("script");
1616
scriptTag.src = "https://ratenkauf.easycredit.de/api/resource/webcomponents/v3/easycredit-components/easycredit-components.esm.js";
1717
scriptTag.type = "module";

‎.storybook/stories/4.Configuration.mdx

+57-10
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,42 @@
11
import { Meta } from "@storybook/blocks";
22

3-
<Meta title="Getting Started/Configuration" />
3+
<Meta title="Getting Started/Konfiguration" />
44

55
<h1>Konfiguration</h1>
66

7-
Die Komponenten können für Integrations- und Testzwecke über eine globale Variable konfiguriert werden.
7+
Die Komponenten können für Integrations- und Testzwecke über eine globale Variable konfiguriert werden.
8+
Dies ist hilfreich, um Authorisierungsdetails an die API zu übergeben oder bestimmte andere benötigte
9+
Header für die Anfragen zu setzen. Auch die Basis-URL der API kann hier zu Testzwecken verändert werden.
10+
11+
<h2>Endpunkte für Merchant-Komponenten</h2>
12+
13+
Typischerweise interagieren die Merchant-Komponenten mit einer (zu erstellenden) API des Shop-Systems,
14+
die als Proxy fungiert und die easyCredit-API anspricht. Dies ist sinnvoll, damit Zugangsdaten im Backend
15+
nicht offengelegt werden. Moderne Shop-Systeme kommunizieren ohnehin bereits über eine API mit dem Backend-System,
16+
so dass ein entsprechender Auth-Token oft auch für die erweiterte API verwendet werden kann. Die Endpunkte hierfür
17+
können mit der folgenden Konfiguration festgelegt werden:
18+
19+
```html
20+
<script>
21+
window.easycreditRatenkaufWebComponentsConfig = {
22+
23+
// definierte Proxy-Endpoints für Merchant-API, Authentifizierung i.V.m. request_config
24+
25+
endpoints: { // {transactionId} is automatically replaced with the tx-id or tx-id's (list)
26+
list: 'api/transactions/{transactionId}',
27+
get: 'api/transaction/{transactionId}',
28+
capture: 'api/transaction/{transactionId}/capture',
29+
refund: 'api/transaction/{transactionId}/refund'
30+
},
31+
32+
[...]
33+
}
34+
</script>
35+
```
36+
37+
<h2>Anpassung des Anfrage-Headers</h2>
38+
39+
Im folgenden Beispiel ist gezeigt, wie der Anfrage-Header beeinflusst werden kann. In diesem Fall wird ein bereits existierender Bearer token vewrwendet um gegen die API zu authentifizieren:
840

941
```html
1042
<script>
@@ -20,18 +52,33 @@ window.easycreditRatenkaufWebComponentsConfig = {
2052
}
2153
},
2254
55+
[...]
56+
}
57+
</script>
58+
```
59+
<h2>Anpassung der Basis-URL zu Testzwecken</h2>
60+
61+
Zu Testzwecken kann die Basis-URL für API-Anfragen angepasst werden. Dies ist für die Benutzung der Komponenten im Normalfall aber nicht notwendig.
62+
63+
```html
64+
<script>
65+
window.easycreditRatenkaufWebComponentsConfig = {
66+
2367
// Basis-URL für API-Aufrufe
2468
2569
apiBaseUrl: 'https://ratenkauf.easycredit.de',
2670
27-
// definierte Proxy-Endpoints für Merchant-API, Authentifizierung i.V.m. request_config
28-
29-
endpoints: { // {transactionId} is automatically replaced with the tx-id or tx-id's (list)
30-
list: 'api/transactions/{transactionId}',
31-
get: 'api/transaction/{transactionId}',
32-
capture: 'api/transaction/{transactionId}/capture',
33-
refund: 'api/transaction/{transactionId}/refund'
34-
}
71+
[...]
3572
}
3673
</script>
3774
```
75+
76+
<h2>Implementierungsbeispiele</h2>
77+
78+
Unter den folgenden Links sind einige Implementierungsbeispiele der Konfiguration und der
79+
Interaktion der Merchant-Komponenten zu finden:
80+
81+
* [Implementierung in wooCommerce](https://github.com/teambank/ratenkaufbyeasycredit-plugin-woocommerce/blob/68f05a8c715af1ed557264ed926c3810944ed5c5/src/woocommerce-gateway-ratenkaufbyeasycredit/includes/order-management.php#L65C21-L65C38)
82+
* [Implementierung in Shopware 5](https://github.com/teambank/ratenkaufbyeasycredit-plugin-shopware-5/blob/2f511d8983180dd9e4d95b10440858ce450c6944/src/Frontend/NetzkollektivEasyCredit/Subscriber/BackendMerchant.php#L41)
83+
* [Implementierung in Shopware 6](https://github.com/teambank/ratenkaufbyeasycredit-plugin-shopware-6/blob/54a995bff40ac324fc047fa67002df6cb07d73a8/src/Resources/app/administration/src/module/easycredit-payment/component/easycredit-tx-widget/index.js#L37)
84+
* [Implementierung in Magento 2](https://github.com/teambank/ratenkaufbyeasycredit-plugin-magento-2/blob/d38f12f1d2dd4e14f5bc9dae2de922c3c28ecf03/Block/Adminhtml/Merchant/Config.php#L43)

‎.storybook/stories/5.Developer.mdx

+59
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
import { Meta } from "@storybook/blocks";
2+
3+
<Meta title="Getting Started/Hinweise für Entwickler" />
4+
5+
<h1>Hinweise für Entwickler</h1>
6+
7+
8+
<h2>Warten auf Komponenten-Initialisierung mit `whenDefined`</h2>
9+
10+
Um die Komponenten und deren Methoden ansprechen zu können, muss das jeweilige Element definiert sein. Um festzustellen, ob eine Komponente bereits angesprochen werden kann, kann die Funktion `whenDefined` verwendet werden:
11+
12+
```html
13+
<script>
14+
(async () => {
15+
await customElements.whenDefined('easycredit-checkout');
16+
const checkoutComponent = document.querySelector('easycredit-checkout')
17+
if (checkoutComponent) {
18+
checkoutComponent.addEventListener('submit',() => {
19+
console.log('submit!');
20+
})
21+
}
22+
})();
23+
</script>
24+
```
25+
26+
<h2>dynamisches Hinzufügen von EventHandlern</h2>
27+
28+
Möglicherweise wird die Komponente nicht bereits beim Laden der Seite, sondern erst später durch JavaScript der Seite hinzugefügt oder aktualisiert. Um auf Veränderungen im DOM reagieren zu können, kann die folgende Funktion hilfreich sein:
29+
30+
```html
31+
<script>
32+
const watchForSelector = function (selector, cb) {
33+
const observer = new MutationObserver(function(mutations) {
34+
mutations.forEach(function(mutation) {
35+
mutation.addedNodes.forEach(function(node) {
36+
if (node.nodeType !== Node.ELEMENT_NODE) {
37+
return;
38+
}
39+
if (node.tagName === selector.toUpperCase()) {
40+
return cb(node);
41+
}
42+
43+
const el = node.querySelector(selector);
44+
if (el) {
45+
return cb(el);
46+
}
47+
});
48+
});
49+
});
50+
observer.observe(document, { subtree: true, childList: true });
51+
}
52+
53+
watchForSelector('easycredit-checkout', function(component) {
54+
component.addEventListener('submit',() => {
55+
console.log('submit!');
56+
})
57+
})
58+
</script>
59+
```

0 commit comments

Comments
 (0)