this.setElementHeight()}>
diff --git a/src/components/easycredit-modal/readme.md b/src/components/easycredit-modal/readme.md
index 78f8b84..3ec2ce5 100644
--- a/src/components/easycredit-modal/readme.md
+++ b/src/components/easycredit-modal/readme.md
@@ -68,6 +68,13 @@ Type: `Promise
-
-
+
+
diff --git a/src/components/easycredit-box-modal/easycredit-box-modal.scss b/src/components/easycredit-box-modal/easycredit-box-modal.scss
index 504dbf3..1724a55 100644
--- a/src/components/easycredit-box-modal/easycredit-box-modal.scss
+++ b/src/components/easycredit-box-modal/easycredit-box-modal.scss
@@ -94,7 +94,7 @@
z-index: 4;
}
- &.circle {
+ &.ec-circle {
z-index: 1;
}
}
@@ -159,10 +159,10 @@
width: 100%;
height: 220px;
- .circle {
+ .ec-circle {
width: $circle-width-33;
}
- .circle-secondary {
+ .ec-circle-secondary {
width: $circle-width-33-secondary;
}
}
diff --git a/src/components/easycredit-box-modal/easycredit-box-modal.tsx b/src/components/easycredit-box-modal/easycredit-box-modal.tsx
index 9a3fcd3..ba9cfe4 100644
--- a/src/components/easycredit-box-modal/easycredit-box-modal.tsx
+++ b/src/components/easycredit-box-modal/easycredit-box-modal.tsx
@@ -60,8 +60,8 @@ export class EasycreditBoxModal {
{this.slogan} - +
])
diff --git a/src/components/easycredit-checkout-label/readme.md b/src/components/easycredit-checkout-label/readme.md
index bf0d4e1..81c80f9 100644
--- a/src/components/easycredit-checkout-label/readme.md
+++ b/src/components/easycredit-checkout-label/readme.md
@@ -7,10 +7,11 @@
## Properties
-| Property | Attribute | Description | Type | Default |
-| -------- | --------- | ----------- | -------- | ----------------------------------- |
-| `label` | `label` | | `string` | `'easyCredit-Ratenkauf'` |
-| `slogan` | `slogan` | | `string` | `'Ganz entspannt in Raten zahlen.'` |
+| Property | Attribute | Description | Type | Default |
+| ------------- | -------------- | ----------- | ------------------------------------- | --------------------- |
+| `label` | `label` | | `string` | `undefined` |
+| `paymentType` | `payment-type` | | `METHODS.BILL \| METHODS.INSTALLMENT` | `METHODS.INSTALLMENT` |
+| `slogan` | `slogan` | | `string` | `undefined` |
----------------------------------------------
diff --git a/src/components/easycredit-checkout-privacy-approval/easycredit-checkout-privacy-approval.tsx b/src/components/easycredit-checkout-privacy-approval/easycredit-checkout-privacy-approval.tsx
index 199a0ce..b708b7e 100644
--- a/src/components/easycredit-checkout-privacy-approval/easycredit-checkout-privacy-approval.tsx
+++ b/src/components/easycredit-checkout-privacy-approval/easycredit-checkout-privacy-approval.tsx
@@ -1,5 +1,6 @@
import { Component, h, State, Prop } from '@stencil/core';
-import { fetchAgreement } from '../../utils/utils';
+import { getWebshopInfo } from '../../utils/utils';
+import state from '../../stores/general';
@Component({
tag: 'easycredit-checkout-privacy-approval',
@@ -13,13 +14,12 @@ export class EasycreditCheckoutPrivacyApproval {
@State() privacyApprovalForm: string
async componentWillLoad () {
- fetchAgreement(this.webshopId).then(data => {
- this.privacyApprovalForm = data.privacyApprovalForm
- }).catch(e => {
- console.error(e)
- // this.alert = 'Es ist ein Fehler aufgetreten.'
- })
- }
+ try {
+ getWebshopInfo(this.webshopId)
+ } catch (e) {
+ console.error(e)
+ }
+ }
render () {
return ([
@@ -27,7 +27,7 @@ export class EasycreditCheckoutPrivacyApproval {
{/* this.toggle()}>
-
-
+
+
diff --git a/src/components/easycredit-checkout-bill-payment-timeline/easycredit-checkout-bill-payment-timeline.scss b/src/components/easycredit-checkout-bill-payment-timeline/easycredit-checkout-bill-payment-timeline.scss
new file mode 100644
index 0000000..3e6d5f8
--- /dev/null
+++ b/src/components/easycredit-checkout-bill-payment-timeline/easycredit-checkout-bill-payment-timeline.scss
@@ -0,0 +1,201 @@
+.ec-checkout {
+ &__timeline {
+ margin-bottom: 10px;
+ padding: 20px 5px 5px 5px;
+
+ background-color: $white;
+ border-radius: $border-radius-xl;
+ border: 2px solid $ec-gray;
+ }
+
+ &__animation-information {
+ display: flex;
+ justify-content: space-between;
+ margin-bottom: 10px;
+ padding: 0 17px;
+ color: $ec-darkblue;
+
+ span {
+ font-size: $font-size;
+ line-height: $line-height;
+ }
+ }
+
+ &__animation {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ position: relative;
+ padding: 0 5px;
+ margin: 35px 6px;
+ }
+
+ @keyframes highlightBullet {
+
+ 0%,
+ 100% {
+ background: $ec-gray;
+ }
+
+ 5% {
+ background: $ec-secondary;
+ }
+
+ 10% {
+ background: $ec-gray;
+ }
+ }
+
+ @keyframes swapStartAfter {
+
+ 0%,
+ 7% {
+ background: $ec-secondary;
+ border: 2px solid $ec-secondary;
+ }
+
+ 21% {
+ background: $white;
+ border: 2px solid $ec-secondary;
+ }
+
+ 28% {
+ background: $white;
+ border: 2px solid $ec-secondary;
+ }
+
+ 90% {
+ background: $white;
+ border: 2px solid $ec-secondary;
+ }
+
+ 95%,
+ 100% {
+ background: $ec-secondary;
+ border: 2px solid $ec-secondary;
+ }
+ }
+
+ @keyframes swapEndAfter {
+
+ 0%,
+ 7% {
+ background: $white;
+ border: 2px solid $ec-secondary;
+ }
+
+ 21% {
+ background: $ec-secondary;
+ }
+
+ 28% {
+ background: $ec-secondary;
+ }
+
+ 90% {
+ background: $ec-secondary;
+ }
+
+ 95%,
+ 100% {
+ background: $white;
+ border: 2px solid $ec-secondary;
+ }
+ }
+
+ &__animation-bullets {
+ overflow: hidden;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ width: 100%;
+ }
+
+ &__animation-bullet {
+ min-width: 5px;
+ height: 5px;
+ border-radius: 5px;
+ margin-right: 7px;
+ background: $ec-gray;
+ animation: highlightBullet 5s linear infinite;
+ animation-delay: calc(var(--bullet-index) * 0.057s);
+ }
+
+ @media (max-width: 380px) {
+ &__animation-bullet:nth-last-child(-n+5) {
+ display: none;
+ }
+ }
+
+ &__animation-start {
+ min-width: 27px;
+ height: 27px;
+ border-radius: 27px;
+ background: $ec-gray;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ position: absolute;
+ left: 0;
+ transition: background 0.3s ease, border-color 0.3s ease;
+
+ &:after {
+ content: "";
+ width: 13px;
+ height: 13px;
+ border-radius: 15px;
+ box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.25);
+ animation: swapStartAfter 5s linear infinite;
+ background: $ec-secondary;
+ border: 2px solid transparent;
+ }
+ }
+
+ &__animation-end {
+ min-width: 27px;
+ height: 27px;
+ border-radius: 27px;
+ background: $ec-gray;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ position: absolute;
+ right: 0;
+ transition: background 0.3s ease, border-color 0.3s ease;
+
+ &:after {
+ content: "";
+ width: 13px;
+ height: 13px;
+ border-radius: 15px;
+ box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.25);
+ animation: swapEndAfter 5s linear infinite;
+ background: $white;
+ border: 2px solid $ec-secondary;
+ }
+ }
+
+ &__information {
+ background: $ec-darkblue;
+ color: $white;
+ text-align: center;
+ font-size: $font-size-sm;
+ line-height: $line-height;
+ font-weight: bold;
+ padding: 10px 15px;
+ border-radius: $border-radius-lg-xl;
+ align-items: center;
+ display: flex;
+ justify-content: center;
+
+ .icon {
+ @include background-svg($icon-shipping);
+ background-position: center;
+ background-repeat: no-repeat;
+ background-size: contain;
+ height: 25px;
+ width: 25px;
+ margin-right: 10px;
+ }
+ }
+}
diff --git a/src/components/easycredit-checkout-bill-payment-timeline/easycredit-checkout-bill-payment-timeline.tsx b/src/components/easycredit-checkout-bill-payment-timeline/easycredit-checkout-bill-payment-timeline.tsx
new file mode 100644
index 0000000..b1dedfb
--- /dev/null
+++ b/src/components/easycredit-checkout-bill-payment-timeline/easycredit-checkout-bill-payment-timeline.tsx
@@ -0,0 +1,55 @@
+import { Component, h } from '@stencil/core';
+// import { applyAssetsUrl, getAssetUrl } from '../../utils/utils';
+
+@Component({
+ tag: 'easycredit-checkout-bill-payment-timeline',
+ styleUrl: 'easycredit-checkout-bill-payment-timeline.scss'
+})
+
+export class EasycreditCheckoutBillPaymentTimeline {
+ render() {
+ return [
+
+
+ ]
+ }
+}
\ No newline at end of file
diff --git a/src/components/easycredit-checkout-bill-payment-timeline/readme.md b/src/components/easycredit-checkout-bill-payment-timeline/readme.md
new file mode 100644
index 0000000..8ad6040
--- /dev/null
+++ b/src/components/easycredit-checkout-bill-payment-timeline/readme.md
@@ -0,0 +1,25 @@
+# easycredit-checkout-bill-payment-timeline
+
+
+
+
+
+
+## Dependencies
+
+### Used by
+
+ - [easycredit-checkout](../easycredit-checkout)
+ - [easycredit-express-button](../easycredit-express-button)
+
+### Graph
+```mermaid
+graph TD;
+ easycredit-checkout --> easycredit-checkout-bill-payment-timeline
+ easycredit-express-button --> easycredit-checkout-bill-payment-timeline
+ style easycredit-checkout-bill-payment-timeline fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*
diff --git a/src/components/easycredit-checkout-installments/easycredit-checkout-installments.scss b/src/components/easycredit-checkout-installments/easycredit-checkout-installments.scss
index 8a59a5f..1fd04c6 100644
--- a/src/components/easycredit-checkout-installments/easycredit-checkout-installments.scss
+++ b/src/components/easycredit-checkout-installments/easycredit-checkout-installments.scss
@@ -3,6 +3,7 @@
margin: 0;
padding: 0;
list-style: none;
+ background-color: $white;
border-width: 0 2px;
border-style: solid;
border-color: $ec-gray-2;
@@ -91,7 +92,7 @@
border-width: 2px;
border-style: solid;
border-color: transparent;
- border-radius: $border-radius-lg;
+ border-radius: $border-radius-lg-xl;
cursor: pointer;
transition: color .1s $transition-timing, background-color .1s $transition-timing, border-color .1s $transition-timing;
diff --git a/src/components/easycredit-checkout-installments/easycredit-checkout-installments.tsx b/src/components/easycredit-checkout-installments/easycredit-checkout-installments.tsx
index d468ee9..743328f 100644
--- a/src/components/easycredit-checkout-installments/easycredit-checkout-installments.tsx
+++ b/src/components/easycredit-checkout-installments/easycredit-checkout-installments.tsx
@@ -3,7 +3,8 @@ import { formatCurrency, sendFeedback } from '../../utils/utils';
@Component({
tag: 'easycredit-checkout-installments',
- styleUrl: 'easycredit-checkout-installments.scss'
+ styleUrl: 'easycredit-checkout-installments.scss',
+ shadow: true
})
export class EasycreditCheckoutInstallments {
@@ -17,6 +18,8 @@ export class EasycreditCheckoutInstallments {
@State() _installments
@State() selectedInstallmentValue: number
+ installmentsBase!: HTMLElement;
+
@Listen('selectedInstallment')
selectedInstallmentHandler(e) {
this.selectedInstallmentValue = e.detail
@@ -24,11 +27,12 @@ export class EasycreditCheckoutInstallments {
@Watch('installments')
parseInstallmentsProp(newValue: string) {
- if (newValue) this._installments = JSON.parse(newValue);
+ if (newValue) {
+ this._installments = JSON.parse(newValue)
+ .sort((a,b) => parseFloat(a.installment) - parseFloat(b.installment))
+ }
}
- installmentsBase!: HTMLElement;
-
async componentWillLoad () {
this.parseInstallmentsProp(this.installments);
}
diff --git a/src/components/easycredit-checkout-installments/readme.md b/src/components/easycredit-checkout-installments/readme.md
index 23f67f0..4bbd7dd 100644
--- a/src/components/easycredit-checkout-installments/readme.md
+++ b/src/components/easycredit-checkout-installments/readme.md
@@ -26,11 +26,13 @@
### Used by
- [easycredit-checkout](../easycredit-checkout)
+ - [easycredit-express-button](../easycredit-express-button)
### Graph
```mermaid
graph TD;
easycredit-checkout --> easycredit-checkout-installments
+ easycredit-express-button --> easycredit-checkout-installments
style easycredit-checkout-installments fill:#f9f,stroke:#333,stroke-width:4px
```
diff --git a/src/components/easycredit-checkout-label/easycredit-checkout-label.scss b/src/components/easycredit-checkout-label/easycredit-checkout-label.scss
index 89105fb..5866fc3 100644
--- a/src/components/easycredit-checkout-label/easycredit-checkout-label.scss
+++ b/src/components/easycredit-checkout-label/easycredit-checkout-label.scss
@@ -17,11 +17,18 @@
top: 50%;
transform: translateY(-50%);
- @extend .logo-ratenkauf;
+ &-installment {
+ @extend .logo-ratenkauf;
+ }
+ &-bill {
+ @extend .logo-rechnungskauf;
+ }
+
display: block;
width: 60px;
- height: 29px;
+ height: 100%;
background-position: right center;
+ background-size: 100% auto;
}
strong {
diff --git a/src/components/easycredit-checkout-label/easycredit-checkout-label.stories.tsx b/src/components/easycredit-checkout-label/easycredit-checkout-label.stories.tsx
index 322e7f1..7b365d8 100644
--- a/src/components/easycredit-checkout-label/easycredit-checkout-label.stories.tsx
+++ b/src/components/easycredit-checkout-label/easycredit-checkout-label.stories.tsx
@@ -1,4 +1,5 @@
import { buildAttributes } from '../../../.storybook/helpers'
+import { METHODS } from '../../types';
export default {
title: "Checkout/Label",
@@ -11,18 +12,33 @@ export default {
}
},
argTypes: {
+ paymentType: {
+ table: {
+ defaultValue: { summary: "INSTALLMENT" },
+ category: "optional",
+ },
+ description: 'Zahlungsart',
+ options: [METHODS.INSTALLMENT, METHODS.BILL],
+ control: { type: 'radio' },
+ },
label: {
+ table: {
+ category: "optional",
+ },
description: 'Titel'
},
slogan: {
+ table: {
+ category: "optional",
+ },
description: 'Untertitel'
}
-
},
};
let args = {
+ paymentType: METHODS.INSTALLMENT,
label: '',
slogan: ''
}
diff --git a/src/components/easycredit-checkout-label/easycredit-checkout-label.tsx b/src/components/easycredit-checkout-label/easycredit-checkout-label.tsx
index b68493f..8bacc16 100644
--- a/src/components/easycredit-checkout-label/easycredit-checkout-label.tsx
+++ b/src/components/easycredit-checkout-label/easycredit-checkout-label.tsx
@@ -1,5 +1,6 @@
import { Component, Prop, h } from '@stencil/core';
import { applyAssetsUrl } from '../../utils/utils';
+import { METHODS } from '../../types';
@Component({
tag: 'easycredit-checkout-label',
@@ -9,13 +10,24 @@ import { applyAssetsUrl } from '../../utils/utils';
export class EasycreditCheckoutLabel {
- @Prop({ mutable: true }) label: string = 'easyCredit-Ratenkauf';
- @Prop({ mutable: true }) slogan: string = 'Ganz entspannt in Raten zahlen.';
+ @Prop({ mutable: true }) label: string
+ @Prop({ mutable: true }) slogan: string
+ @Prop({ mutable: true}) paymentType: METHODS = METHODS.INSTALLMENT
connectedCallback() {
applyAssetsUrl(EasycreditCheckoutLabel)
}
+ componentWillLoad() {
+ if (this.paymentType === METHODS.INSTALLMENT) {
+ this.label ??= 'easyCredit-Ratenkauf'
+ this.slogan ??= 'Ganz entspannt in Raten zahlen.'
+ } else if (this.paymentType === METHODS.BILL) {
+ this.label ??= 'easyCredit-Rechnung'
+ this.slogan ??= 'Erst kaufen, in 30 Tagen bezahlen.'
+ }
+ }
+
render() {
return ([
@@ -24,7 +36,11 @@ export class EasycreditCheckoutLabel {
{this.label}
+ Heute
bestellen + in 30 Tagen
bezahlen +
+
+ bestellen + in 30 Tagen
bezahlen +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Ihre Ware wird direkt versandt.
+
+ {this.slogan} - +
Mit Klick auf Akzeptieren stimmen Sie der Datenübermittlung zu:
*/}
+
+ }
+}
\ No newline at end of file
diff --git a/src/components/easycredit-checkout-totals/readme.md b/src/components/easycredit-checkout-totals/readme.md
new file mode 100644
index 0000000..ebc02aa
--- /dev/null
+++ b/src/components/easycredit-checkout-totals/readme.md
@@ -0,0 +1,34 @@
+# easycredit-checkout-totals
+
+
+
+
+
+
+## Properties
+
+| Property | Attribute | Description | Type | Default |
+| --------------------- | --------- | ----------- | ------------------ | ----------- |
+| `amount` | `amount` | | `number` | `undefined` |
+| `installmentPlans` | -- | | `InstallmentPlans` | `null` |
+| `selectedInstallment` | -- | | `InstallmentPlan` | `null` |
+
+
+## Dependencies
+
+### Used by
+
+ - [easycredit-checkout](../easycredit-checkout)
+ - [easycredit-express-button](../easycredit-express-button)
+
+### Graph
+```mermaid
+graph TD;
+ easycredit-checkout --> easycredit-checkout-totals
+ easycredit-express-button --> easycredit-checkout-totals
+ style easycredit-checkout-totals fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*
diff --git a/src/components/easycredit-checkout/easycredit-checkout.scss b/src/components/easycredit-checkout/easycredit-checkout.scss
index 18dbc49..f77c2fb 100644
--- a/src/components/easycredit-checkout/easycredit-checkout.scss
+++ b/src/components/easycredit-checkout/easycredit-checkout.scss
@@ -80,6 +80,32 @@
}
}
+ .h4 {
+ margin-bottom: 10px;
+ color: $font-color;
+ }
+
+ &__usp {
+ list-style: none;
+ margin-top: 0;
+ margin-bottom: 20px;
+ padding: 0;
+
+ li {
+ margin-bottom: 5px;
+ padding-left: 26px;
+
+ @include background-svg($icon-checkmark-circle);
+ background-position: left center;
+ background-repeat: no-repeat;
+ background-size: 16px 16px;
+
+ font-size: $font-size-sm;
+ line-height: $line-height;
+ color: $font-color;
+ }
+ }
+
&__instalments {
margin: 0;
padding: 0;
@@ -214,35 +240,15 @@
}
}
- &__totals {
- margin-top: 10px;
- margin-bottom: 20px;
- list-style: none;
- padding: 16px 15px;
- background-color: $ec-gray;
- border-radius: $border-radius-xl;
- color: $font-color;
-
- li {
- display: flex;
- justify-content: space-between;
- padding: 2px 0;
-
- &.total {
- font-weight: bold;
- }
- }
- }
-
- &__actions {
- margin-top: 20px;
- margin-bottom: 20px;
- }
-
&__small-print {
margin-top: 20px;
- margin-bottom: 0;
- color: rgba($font-color,.5);
+ color: #8095AC;
+
+ small {
+ display: block;
+ font-size: $font-size-xxs;
+ line-height: $line-height;
+ }
}
.ec-payment-plan {
@@ -254,11 +260,4 @@
margin-top: 10px;
}
}
-
- // Rules for IE10 and above
- @media all and (-ms-high-contrast:none) {
- easycredit-checkout-installments { display: none; }
- .ec-checkout__totals { display: none; }
- .ec-checkout__small-print { display: none; }
- }
}
diff --git a/src/components/easycredit-checkout/easycredit-checkout.stories.tsx b/src/components/easycredit-checkout/easycredit-checkout.stories.tsx
index 881eda8..0c82f91 100644
--- a/src/components/easycredit-checkout/easycredit-checkout.stories.tsx
+++ b/src/components/easycredit-checkout/easycredit-checkout.stories.tsx
@@ -1,4 +1,5 @@
import { buildAttributes } from '../../../.storybook/helpers'
+import { METHODS } from '../../types';
export default {
title: "Checkout/Checkout",
@@ -6,9 +7,9 @@ export default {
docs: {
description: {
component:
- `Die Checkout-Komponente ermöglicht eine Interaktion mit dem Ratenkauf bereits im Online-Shop, noch vor Weiterleitung auf die PaymentPage. Die Komponente wird typischerweise in Verbindung mit dem Checkout-Label verwendet und erst dann angezeigt, wenn der Kunde die Zahlart in der Zahlartenauswahl gewählt hat. Die Komponente enthält ein Modal, welches die Zustimmung des Kunden zur Datenweitergabe ermöglicht, bevor er auf die PaymentPage weitergeleitet wird. Die Zustimmungserklärung ist für den jeweiligen Händler personalisiert.
+ `Die Checkout-Komponente ermöglicht eine Interaktion mit easyCredit bereits im Online-Shop, noch vor Weiterleitung auf die PaymentPage. Die Komponente wird typischerweise in Verbindung mit dem Checkout-Label verwendet und erst dann angezeigt, wenn der Kunde die Zahlart in der Zahlartenauswahl gewählt hat. Die Komponente enthält ein Modal, welches die Zustimmung des Kunden zur Datenweitergabe ermöglicht, bevor er auf die PaymentPage weitergeleitet wird. Die Zustimmungserklärung ist für den jeweiligen Händler personalisiert und wird dynamisch bezogen.
-Sobald der Kunde die PaymentPage durchlaufen hat, zeigt das Widget die vom Kunden gewählten Raten statt der Ratenauswahl an. Ist ein Fehler aufgetreten, z.B. wenn der Betrag außerhalb der erlaubten Finanzierungsbeträge liegt, so wird stattdessen der entsprechende Fehler angezeigt.`,
+Sobald der Kunde die PaymentPage durchlaufen hat, zeigt das Widget die vom Kunden die Auswahl des Kunden an (${'`paymentPlan`'}). Beim Ratenkauf werden die gewählten Raten gezeigt, beim Rechnungskauf die Zeitleiste bis zur tatsächlichen Zahlung. Ist ein Fehler aufgetreten, z.B. wenn der Betrag außerhalb der erlaubten Finanzierungsbeträge liegt, so wird stattdessen der entsprechende Fehler angezeigt (${'`alert`'})`,
}
}
},
@@ -16,6 +17,10 @@ Sobald der Kunde die PaymentPage durchlaufen hat, zeigt das Widget die vom Kunde
webshopId: {
description: "die Kennung des Webshops",
},
+ paymentType: {
+ options: [METHODS.INSTALLMENT, METHODS.BILL],
+ control: { type: 'radio' },
+ },
amount: {
description: "der zu finanzierende Betrag für den die Ratenauswahl angezeigt werden soll",
},
@@ -36,17 +41,18 @@ Sobald der Kunde die PaymentPage durchlaufen hat, zeigt das Widget die vom Kunde
table: {
category: "Events",
},
- description: "Wird ausgelöst bei Klick auf 'Akzeptieren'",
+ description: "Wird ausgelöst bei Klick auf 'Akzeptieren' / 'Weiter zum Rechnungskauf'",
}
},
};
let args = {
- webshopId: '2.de.9999.9999',
+ webshopId: '2.de.7387.2',
amount: 820.31,
isActive: true,
alert: '',
- paymentPlan: ''
+ paymentPlan: '',
+ paymentType: METHODS.INSTALLMENT
}
const Template = (args) => {
@@ -59,25 +65,48 @@ const Template = (args) => {
const TemplateExample = (args) => {
return Template(args) + `
`
}
export const CheckoutInitial = TemplateExample.bind({})
-CheckoutInitial.storyName = 'initial'
+CheckoutInitial.storyName = 'Ratenkauf (initial)'
CheckoutInitial.args = args
export const CheckoutCalculated = Template.bind({})
-CheckoutCalculated.storyName = 'berechnet'
+CheckoutCalculated.storyName = 'Ratenkauf (berechnet)'
CheckoutCalculated.args = { ...args, ... {
paymentPlan: '{"orderValue":7702.06,"interest":1803.42,"totalValue":9505.48,"decisionOutcome":"POSITIVE","numberOfInstallments":60,"installment":159,"lastInstallment":124.48,"mtan":{"required":false,"successful":false},"bankAccountCheck":{"required":false}}'
}}
+export const CheckoutInitialBillPayment = TemplateExample.bind({})
+CheckoutInitialBillPayment.storyName = 'Rechnungskauf (initial)'
+CheckoutInitialBillPayment.args = {
+ ...args, ... {
+ paymentType: METHODS.BILL
+ }
+}
+
+export const CheckoutCalculatedBillPayment = Template.bind({})
+CheckoutCalculatedBillPayment.storyName = 'Rechnungskauf (berechnet)'
+CheckoutCalculatedBillPayment.args = {
+ ...args, ... {
+ paymentType: METHODS.BILL,
+ paymentPlan: '{"orderValue":7702.06,"interest":1803.42,"totalValue":9505.48,"decisionOutcome":"POSITIVE","numberOfInstallments":60,"installment":159,"lastInstallment":124.48,"mtan":{"required":false,"successful":false},"bankAccountCheck":{"required":false}}'
+ }
+}
+
export const CheckoutError = Template.bind({})
CheckoutError.storyName = 'Fehler'
CheckoutError.args = args
diff --git a/src/components/easycredit-checkout/easycredit-checkout.tsx b/src/components/easycredit-checkout/easycredit-checkout.tsx
index 0d2dd4a..352b9cb 100644
--- a/src/components/easycredit-checkout/easycredit-checkout.tsx
+++ b/src/components/easycredit-checkout/easycredit-checkout.tsx
@@ -1,5 +1,8 @@
-import { Component, Prop, State, Listen, Element, h } from '@stencil/core';
-import { formatCurrency, fetchInstallmentPlans, fetchSingleInstallmentPlan, fetchAgreement, sendFeedback, addErrorHandler } from '../../utils/utils';
+import { Component, Prop, State, Listen, Element, Watch, h } from '@stencil/core';
+import { formatCurrency, fetchInstallmentPlans, validateInstallmentPlans, getWebshopInfo, sendFeedback, addErrorHandler } from '../../utils/utils';
+import { validateAmount, Caps } from '../../utils/validation';
+import { InstallmentPlan, InstallmentPlans, METHODS } from '../../types';
+import state from '../../stores/general'
@Component({
tag: 'easycredit-checkout',
@@ -10,37 +13,26 @@ import { formatCurrency, fetchInstallmentPlans, fetchSingleInstallmentPlan, fetc
export class EasycreditCheckout {
@Prop() isActive: boolean = true
- @Prop() amount: number
+ @Prop({ mutable: true }) amount: number
@Prop() webshopId: string
@Prop() alert: string
@Prop() paymentPlan: string
-
- /**
- * Disable Flexprice in calculation
- */
+ @Prop() paymentType: METHODS = METHODS.INSTALLMENT
@Prop() disableFlexprice: boolean = false
- @State() privacyApprovalForm: string
- @State() acceptButtonClicked: boolean = false
-
- @State() totals = {
- interest: 0,
- total: 0
- }
- @State() installments
- @State() selectedInstallment = {
- totalInterest: 0,
- totalValue: 0,
- numberOfInstallments: 0
- }
- @State() example
+ @State() isInitialized: boolean = false
+ @State() submitButtonClicked: boolean = false
+ @State() installmentPlans: InstallmentPlans = null
+ @State() selectedInstallment: InstallmentPlan = null
@State() submitDisabled = false
modal!: HTMLEasycreditModalElement;
+ caps: Caps
+
@Listen('selectedInstallment')
selectedInstallmentHandler(e) {
- this.selectedInstallment = this.installments.find(i => i.numberOfInstallments == e.detail)
+ this.selectedInstallment = this.installmentPlans.plans.find(i => i.numberOfInstallments == e.detail)
}
@Listen('openModal')
@@ -53,56 +45,46 @@ export class EasycreditCheckout {
this.modal.close()
}
+ isEnabled(type: METHODS) {
+ return this.caps.isEnabled(type)
+ }
+
async componentWillLoad () {
+ this.caps = new Caps(this.paymentType)
+
if (this.amount > 0 && !this.alert && !this.paymentPlan) {
- const fetchPlans = (this.disableFlexprice) ?
- fetchSingleInstallmentPlan.bind(this, this.webshopId, this.amount, { 'withoutFlexprice': true }) :
- fetchInstallmentPlans.bind(this, this.webshopId, this.amount)
+ try {
+ await getWebshopInfo(this.webshopId)
+ validateAmount(this.amount, this.paymentType)
- await fetchPlans().then((data) => {
- if (!data) {
- return
+ if (this.isEnabled(METHODS.INSTALLMENT)) {
+ const opts = this.disableFlexprice ? { 'withoutFlexprice': this.disableFlexprice } : null
+ const installmentPlans = await fetchInstallmentPlans(this.webshopId, this.amount, opts)
+ this.installmentPlans = validateInstallmentPlans(installmentPlans)
}
- const installment = data.installmentPlans.find(() => true)
- if (installment.errors) {
- this.alert = installment.errors.violations.find(()=>true).message
- if (installment.errors.title === 'INVALID_PRICE') {
- this.alert = `Der Finanzierungbetrag liegt außerhalb der zulässigen Beträge (${data.minFinancingAmount} € - ${data.maxFinancingAmount} €)`
- }
- return
- }
-
- this.installments = installment.plans.reverse()
- this.example = installment.example
- }).catch(e => {
- console.error(e)
- })
- if (this.alert) {
- return
+ } catch (error) {
+ this.alert = error.message ?? 'Es ist ein Fehler aufgetreten.'
}
+ }
+ this.isInitialized = true
+ }
- fetchAgreement(this.webshopId).then(data => {
- this.privacyApprovalForm = data.privacyApprovalForm
-
- if (this.amount < data.minFinancingAmount
- || this.amount > data.maxFinancingAmount
- ) {
- }
- }).catch(e => {
- console.error(e)
- this.alert = 'Es ist ein Fehler aufgetreten.'
- })
+ @Watch('amount') watchAmountHandler() {
+ try {
+ validateAmount(this.amount, this.paymentType)
+ } catch (error) {
+ this.alert = error.message ?? 'Es ist ein Fehler aufgetreten.'
}
}
@Element() el: HTMLElement;
- modalSubmitHandler() {
+ submitHandler() {
sendFeedback(this, { component: 'EasycreditCheckout', action: 'submit' })
- this.acceptButtonClicked = true
+ this.submitButtonClicked = true
addErrorHandler(this, () => {
this.alert = 'Leider ist eine Zahlung mit easyCredit derzeit nicht möglich. Bitte verwenden Sie eine andere Zahlungsart oder wenden Sie sich an den Händler.'
this.modal.close()
@@ -113,7 +95,8 @@ export class EasycreditCheckout {
cancelable : true,
composed: true,
detail: {
- numberOfInstallments: this.selectedInstallment.numberOfInstallments
+ paymentType: this.paymentType,
+ ...(this.selectedInstallment?.numberOfInstallments && { numberOfInstallments: this.selectedInstallment?.numberOfInstallments })
}
}))
}
@@ -135,7 +118,7 @@ export class EasycreditCheckout {
return false
}
- getPaymentPlanFragment () {
+ getInstallmentPaymentPlanFragment () {
if (!this.getPaymentPlan()) {
return null
}
@@ -158,85 +141,138 @@ export class EasycreditCheckout {
}
- getCheckoutFragment () {
+ getBillPaymentPlanFragment () {
+ if (!this.getPaymentPlan()) {
+ return null
+ }
+ return -
+ {this.amount !== this.selectedInstallment.totalValue &&
+
- + Kaufbetrag + { formatCurrency(this.amount) } + +
- + + Zinsen + { formatCurrency(this.selectedInstallment.totalInterest) } + +
- + Gesamtbetrag + { formatCurrency(this.selectedInstallment.totalValue) } + +
+ +
+ } + +
- { this.alert }
+ return
+ }
+
+ return ([
+
+
+ ])
+ }
+
+ getCheckoutInstallmentUspFragment () {
+ if (this.alert) {
+ return
}
- return ([
+
+
+
+
+
-
-
-
- - Kaufbetrag - { formatCurrency(this.amount) } - -
- - + Zinsen - { formatCurrency(this.selectedInstallment.totalInterest) } - -
- - Gesamtbetrag - { formatCurrency(this.selectedInstallment.totalValue) } - + return ([
- Frühestens 30 Tage nach Lieferung zahlen +
- Flexible monatliche Wunschrate +
- Kostenfreie Ratenanpassung & Sondertilgung
- Frühestens 30 Tage nach Lieferung zahlen +
- Keine zusätzlichen Kosten +
- Frühestens 30 Tage nach Lieferung zahlen +
- Flexible monatliche Wunschrate +
- Kostenfreie Ratenanpassung & Sondertilgung +
+
])
}
- getPrivacyFragment() {
- return Ihre Vorteile
+ -
+
-
- + {this.getPrivacyFragment({intro: false})}
-
+ return html
}
getModalFragment () {
return ([
Mit Klick auf Akzeptieren stimmen Sie der Datenübermittlung zu:
+ getCheckoutBillPaymentFragment () { + if (this.alert) { + return + } + + return ([
+
+
+
+
])
+ }
+
+ getPrivacyFragment({intro = true}) {
+ const html =
+
+ Ihre Vorteile
+ -
+
+
+
+
+ + {this.getPrivacyFragment({intro: false})} +
+
+ { intro &&
-
+ Mit Klick auf Akzeptieren stimmen Sie der Datenübermittlung zu:
}Weiter zum Ratenkauf
- {this.getPrivacyFragment()}
+ {this.getPrivacyFragment({})}
Akzeptieren
- { this.getPaymentPlan() && this.getPaymentPlanFragment() }
+ { this.isEnabled(METHODS.INSTALLMENT) && this.getPaymentPlan() && this.getInstallmentPaymentPlanFragment() }
+ { this.isEnabled(METHODS.BILL) && this.getPaymentPlan() && this.getBillPaymentPlanFragment() }
{
!this.getPaymentPlan() &&
diff --git a/src/components/easycredit-checkout/readme.md b/src/components/easycredit-checkout/readme.md
index a938ac9..2c0a514 100644
--- a/src/components/easycredit-checkout/readme.md
+++ b/src/components/easycredit-checkout/readme.md
@@ -7,27 +7,32 @@
## Properties
-| Property | Attribute | Description | Type | Default |
-| ------------------ | ------------------- | -------------------------------- | --------- | ----------- |
-| `alert` | `alert` | | `string` | `undefined` |
-| `amount` | `amount` | | `number` | `undefined` |
-| `disableFlexprice` | `disable-flexprice` | Disable Flexprice in calculation | `boolean` | `false` |
-| `isActive` | `is-active` | | `boolean` | `true` |
-| `paymentPlan` | `payment-plan` | | `string` | `undefined` |
-| `webshopId` | `webshop-id` | | `string` | `undefined` |
+| Property | Attribute | Description | Type | Default |
+| ------------------ | ------------------- | ----------- | ------------------------------------- | --------------------- |
+| `alert` | `alert` | | `string` | `undefined` |
+| `amount` | `amount` | | `number` | `undefined` |
+| `disableFlexprice` | `disable-flexprice` | | `boolean` | `false` |
+| `isActive` | `is-active` | | `boolean` | `true` |
+| `paymentPlan` | `payment-plan` | | `string` | `undefined` |
+| `paymentType` | `payment-type` | | `METHODS.BILL \| METHODS.INSTALLMENT` | `METHODS.INSTALLMENT` |
+| `webshopId` | `webshop-id` | | `string` | `undefined` |
## Dependencies
### Depends on
+- [easycredit-checkout-bill-payment-timeline](../easycredit-checkout-bill-payment-timeline)
- [easycredit-checkout-installments](../easycredit-checkout-installments)
+- [easycredit-checkout-totals](../easycredit-checkout-totals)
- [easycredit-modal](../easycredit-modal)
### Graph
```mermaid
graph TD;
+ easycredit-checkout --> easycredit-checkout-bill-payment-timeline
easycredit-checkout --> easycredit-checkout-installments
+ easycredit-checkout --> easycredit-checkout-totals
easycredit-checkout --> easycredit-modal
style easycredit-checkout fill:#f9f,stroke:#333,stroke-width:4px
```
diff --git a/src/components/easycredit-express-button-single/easycredit-express-button-single.scss b/src/components/easycredit-express-button-single/easycredit-express-button-single.scss
new file mode 100644
index 0000000..d17d2d7
--- /dev/null
+++ b/src/components/easycredit-express-button-single/easycredit-express-button-single.scss
@@ -0,0 +1,127 @@
+.ec-express-button {
+ --bg-color: #{$ec-primary};
+ --bg-color-hover: #{$ec-primary-btn-hover};
+
+ display: flex;
+ flex-flow: column;
+ justify-content: center;
+ align-items: center;
+ margin-bottom: 10px;
+
+ transition: opacity 0.35s ease;
+
+ &__btn {
+ position: relative;
+ display: block;
+ padding: 0 36px;
+ width: 350px;
+ max-width: 100%;
+ height: 45px;
+ box-sizing: border-box;
+
+ background-color: var(--bg-color);
+ transition: background-color 0.35s ease;
+ border-radius: $border-radius-xxxl;
+ cursor: pointer;
+
+ &:hover {
+ background-color: var(--bg-color-hover);
+ color: $white;
+ }
+
+ // Props
+ &.blue {
+ --bg-color: #{$ec-darkblue};
+ --bg-color-hover: #{$ec-darkblue-btn-hover};
+ }
+ &.full-width {
+ width: 100% !important;
+ }
+
+ a {
+ color: $white;
+ }
+
+ &__main {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 100%;
+ height: 100%;
+
+ font-size: $font-size;
+ font-weight: bold;
+ color: $white;
+
+ svg {
+ flex: 0 0 auto;
+ margin-right: 10px;
+
+ &.installment {
+ flex-basis: 59px;
+ width: 59px;
+ height: 28px;
+ }
+
+ &.bill {
+ flex-basis: 16px;
+ width: 16px;
+ height: 20px;
+ }
+ }
+
+ .long {
+ display: block;
+ max-width: max(0px, calc((100% - 249.5px)*999));
+ overflow: hidden;
+ text-overflow: ellipsis;
+
+ white-space: nowrap;
+ color: $white;
+ }
+ .short {
+ display: block;
+ max-width: max(0px, calc(-100% + 250px)*999);
+ overflow: hidden;
+ text-overflow: ellipsis;
+
+ white-space: nowrap;
+ color: $white;
+ }
+ }
+ }
+
+ &__link {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin-top: 10px;
+ width: auto;
+ max-width: 100%;
+
+ cursor: pointer;
+
+ text-align: center;
+ font-size: $font-size-xxs;
+ line-height: $line-height;
+ color: $font-color !important;
+
+ &:hover {
+ color: rgba($font-color,.7) !important;
+ }
+
+ .icon {
+ flex: 21.5px 0 0;
+ width: 21.5px;
+ max-width: 21.5px;
+
+ @extend .logo-finanzgruppe-icon;
+ display: inline-block;
+ margin-right: 9px;
+ height: 15px;
+
+ position: relative;
+ top: -.5px;
+ }
+ }
+}
diff --git a/src/components/easycredit-express-button-single/easycredit-express-button-single.tsx b/src/components/easycredit-express-button-single/easycredit-express-button-single.tsx
new file mode 100644
index 0000000..8dd08b0
--- /dev/null
+++ b/src/components/easycredit-express-button-single/easycredit-express-button-single.tsx
@@ -0,0 +1,91 @@
+import { Component, Prop, State, Element, h, EventEmitter, Event } from '@stencil/core';
+import { applyAssetsUrl } from '../../utils/utils';
+import { METHODS } from '../../types';
+import { validateAmount } from '../../utils/validation';
+
+@Component({
+ tag: 'easycredit-express-button-single',
+ styleUrl: 'easycredit-express-button-single.scss',
+ shadow: true,
+})
+
+export class EasycreditExpressButtonSingle {
+
+ @Prop() webshopId: string
+ @Prop() amount: number
+ @Prop() bgBlue: boolean = false
+ @Prop() fullWidth: boolean = false
+ @Prop() paymentType: METHODS = METHODS.INSTALLMENT
+
+ buttonTextDefault: string = 'Jetzt direkt in Raten zahlen'
+ buttonTextDefaultShort: string = 'Direkt in Raten zahlen'
+
+ @State() buttonOpacity: string = '0'
+ @State() buttonText: string = this.buttonTextDefault
+ @State() buttonTextShort: string = this.buttonTextDefaultShort
+
+ @Element() el: HTMLElement;
+
+ connectedCallback() {
+ applyAssetsUrl(EasycreditExpressButtonSingle)
+ }
+
+ async componentWillLoad () {
+ if (this.paymentType === METHODS.BILL) {
+ this.bgBlue = true
+ }
+ }
+
+ @Event() buttonClicked: EventEmitter
- { this.getCheckoutFragment() }
+ { this.alert &&
+
}
+ { this.alert }
+
+ }
+ { this.isEnabled(METHODS.INSTALLMENT) && this.getCheckoutInstallmentUspFragment() }
+ { this.isEnabled(METHODS.BILL) && this.getCheckoutBillPaymentFragment() }
+
+ ])
}
- onMouseLeave () {
- window.clearTimeout(this.buttonTextTimeout)
- this.buttonTextTimeout = window.setTimeout(() => {
- this.buttonText = this.buttonTextDefault;
- },1000)
+
+ getCheckoutModalFragment() {
+ return ([
+ Ihre Vorteile
+ -
+
+
+ Akzeptieren
+
+
+
+
+
+
+
+
+
+
+
+
+ }
+
+ {this.selectedPaymentType === METHODS.INSTALLMENT &&
+ !this.paymentTypesEmpty &&
+
+
+
+
+
+
+
+ {this.selectedPaymentType === METHODS.INSTALLMENT &&
+ Weiter zum Ratenkauf
+ }
+ {this.selectedPaymentType === METHODS.BILL &&
+ Weiter zum Rechnungskauf
+ }
+
+
+ Mit Klick auf Akzeptieren stimmen Sie der Datenübermittlung zu:
+
-
- Akzeptieren
- Mit Klick auf Akzeptieren stimmen Sie der Datenübermittlung zu:
-
+ {this.isEnabled(METHODS.INSTALLMENT) &&
+ })
+ {this.getLogo() }
])
}
}
diff --git a/src/components/easycredit-logo/readme.md b/src/components/easycredit-logo/readme.md
index 509bacd..89771ef 100644
--- a/src/components/easycredit-logo/readme.md
+++ b/src/components/easycredit-logo/readme.md
@@ -7,11 +7,25 @@
## Properties
-| Property | Attribute | Description | Type | Default |
-| -------- | --------- | ----------- | -------- | ---------------------------------------------------------- |
-| `alt` | `alt` | | `string` | `'easyCredit-Ratenkauf - Einfach. Fair. In Raten zahlen.'` |
+| Property | Attribute | Description | Type | Default |
+| ------------- | -------------- | ----------- | ------------------------------------- | ---------------------------------------------------------- |
+| `alt` | `alt` | | `string` | `'easyCredit-Ratenkauf - Einfach. Fair. In Raten zahlen.'` |
+| `paymentType` | `payment-type` | | `METHODS.BILL \| METHODS.INSTALLMENT` | `METHODS.INSTALLMENT` |
+## Dependencies
+
+### Used by
+
+ - [easycredit-express-button](../easycredit-express-button)
+
+### Graph
+```mermaid
+graph TD;
+ easycredit-express-button --> easycredit-logo
+ style easycredit-logo fill:#f9f,stroke:#333,stroke-width:4px
+```
+
----------------------------------------------
*Built with [StencilJS](https://stenciljs.com/)*
diff --git a/src/components/easycredit-merchant-manager/easycredit-merchant-manager.scss b/src/components/easycredit-merchant-manager/easycredit-merchant-manager.scss
index b4b708f..658f8d0 100644
--- a/src/components/easycredit-merchant-manager/easycredit-merchant-manager.scss
+++ b/src/components/easycredit-merchant-manager/easycredit-merchant-manager.scss
@@ -22,7 +22,7 @@
content: '';
margin-bottom: 15px;
- @extend .logo-ratenkauf;
+ @extend .logo-easycredit;
display: block;
width: 100%;
height: 30px;
diff --git a/src/components/easycredit-merchant-manager/easycredit-merchant-manager.stories.tsx b/src/components/easycredit-merchant-manager/easycredit-merchant-manager.stories.tsx
index 5d0facc..85ae657 100644
--- a/src/components/easycredit-merchant-manager/easycredit-merchant-manager.stories.tsx
+++ b/src/components/easycredit-merchant-manager/easycredit-merchant-manager.stories.tsx
@@ -14,7 +14,7 @@ Um die Transaktionen abrufen zu können, müssen für den Merchant Manager die E
},
argTypes: {
txId: {
- description: 'die Transaktions-ID der easyCredit-Ratenkauf Zahlung'
+ description: 'die Transaktions-ID der easyCredit-Zahlung'
},
date: {
description: 'Bestelldatum, verwendet zur Unterscheidung zwischen "nicht verfügbar" und "noch nicht verfügbar". Der Wert muss von Date.parse() geparst werden können.'
diff --git a/src/components/easycredit-merchant-status-widget/easycredit-merchant-status-widget.stories.tsx b/src/components/easycredit-merchant-status-widget/easycredit-merchant-status-widget.stories.tsx
index 7bb16ec..0cfe181 100644
--- a/src/components/easycredit-merchant-status-widget/easycredit-merchant-status-widget.stories.tsx
+++ b/src/components/easycredit-merchant-status-widget/easycredit-merchant-status-widget.stories.tsx
@@ -14,7 +14,7 @@ Das Merchant StatusWidget benötigt eine initale Konfiguration zum Abruf der Tra
},
argTypes: {
txId: {
- description: 'die Transaktions-ID der easyCredit-Ratenkauf Zahlung'
+ description: 'die Transaktions-ID der easyCredit-Zahlung'
},
date: {
description: 'Bestelldatum, verwendet zur Unterscheidung zwischen "nicht verfügbar" und "noch nicht verfügbar". Der Wert muss von Date.parse() geparst werden können.'
diff --git a/src/components/easycredit-modal/easycredit-modal.scss b/src/components/easycredit-modal/easycredit-modal.scss
index 6bee57d..7c50058 100644
--- a/src/components/easycredit-modal/easycredit-modal.scss
+++ b/src/components/easycredit-modal/easycredit-modal.scss
@@ -60,8 +60,10 @@
overflow-x: hidden;
overflow-y: auto;
+ transition: $transition-slow;
+
background-color: $white;
- border-radius: $border-radius-xxl;
+ border-radius: $border-radius-xxxl;
box-shadow: $box-shadow;
color: $font-color;
@@ -79,10 +81,10 @@
padding-bottom: 20px;
width: 100vw;
max-width: 100vw;
- max-height: 100vh;
max-height: -webkit-fill-available;
overflow: scroll;
- border-radius: 0;
+ border-bottom-left-radius: 0;
+ border-bottom-right-radius: 0;
animation-name: modal-mobile;
animation-duration: .25s;
@@ -100,6 +102,7 @@
height: 27px;
@include background-svg($icon-close-blue);
+ background-color: $white;
background-position: center;
background-repeat: no-repeat;
background-size: 9px;
@@ -124,6 +127,15 @@
height: 350px;
}
}
+ &.size-medium,
+ &.size-checkout {
+ padding: 0;
+
+ @media (min-width: $breakpoint-sm-up) {
+ width: 800px;
+ height: 650px;
+ }
+ }
&.size-payment {
width: 499px; // ensures display of payment terminal with mobile layout
height: 900px;
@@ -213,35 +225,6 @@
}
}
-.ec-modal-sandbox {
- position: fixed;
- left: 0;
- bottom: 0;
- z-index: 100;
- padding: 20px 25px;
- width: 100%;
- box-sizing: border-box;
- white-space: nowrap;
- overflow: scroll;
- background-color: $white;
- box-shadow: 0 0 25px rgba(0,0,0,.15);
-
- &::-webkit-scrollbar {
- display: none !important;
- }
-
- strong {
- display: inline-block;
- margin-right: 15px;
- }
-
- a {
- display: inline-block;
- margin-right: 15px;
- cursor: pointer;
- }
-}
-
::slotted(iframe) {
@extend %iframe;
}
diff --git a/src/components/easycredit-modal/easycredit-modal.tsx b/src/components/easycredit-modal/easycredit-modal.tsx
index d0b2514..6e05a2d 100644
--- a/src/components/easycredit-modal/easycredit-modal.tsx
+++ b/src/components/easycredit-modal/easycredit-modal.tsx
@@ -18,6 +18,7 @@ export class EasycreditModal {
@State() hasHeadingSlot: boolean = false
@State() submittable: boolean = false
@State() submitButtonClicked: boolean = false
+ @State() elementHeight: number = null
@Event() modalOpened: EventEmitter;
@Event() modalClosed: EventEmitter;
@@ -38,6 +39,23 @@ export class EasycreditModal {
}
}
+ setElementHeight(): void {
+ if ( this.size === 'checkout' ) {
+ if ( this.elementHeight === null ) {
+ this.elementHeight = 0;
+ }
+ var checkoutModalContentContainer = this.element.querySelector('[slot="content"] .ec-col-method .ec-container');
+
+ setTimeout(() => {
+ this.elementHeight = checkoutModalContentContainer.offsetHeight;
+ }, 100)
+ setTimeout(() => {
+ this.elementHeight = checkoutModalContentContainer.offsetHeight;
+ }, 500)
+ console.log('Set height: ' + this.elementHeight);
+ }
+ }
+
handleKeydown (e) {
if (e.key == "Escape") {
this.close()
@@ -51,6 +69,8 @@ export class EasycreditModal {
this.element.querySelectorAll('[data-src]').forEach((el) => {
(el as any).src = (el as any).dataset.src
})
+
+ this.setElementHeight();
}
@Method() async close() {
@@ -59,6 +79,8 @@ export class EasycreditModal {
this.isOpen = false
this.submitButtonClicked = false
this.modalClosed.emit();
+
+ this.setElementHeight();
}
@Method() async toggle () {
@@ -83,7 +105,7 @@ export class EasycreditModal {
return
}
return ([
-
+ {this.getLogo() }
])
}
}
diff --git a/src/components/easycredit-logo/readme.md b/src/components/easycredit-logo/readme.md
index 509bacd..89771ef 100644
--- a/src/components/easycredit-logo/readme.md
+++ b/src/components/easycredit-logo/readme.md
@@ -7,11 +7,25 @@
## Properties
-| Property | Attribute | Description | Type | Default |
-| -------- | --------- | ----------- | -------- | ---------------------------------------------------------- |
-| `alt` | `alt` | | `string` | `'easyCredit-Ratenkauf - Einfach. Fair. In Raten zahlen.'` |
+| Property | Attribute | Description | Type | Default |
+| ------------- | -------------- | ----------- | ------------------------------------- | ---------------------------------------------------------- |
+| `alt` | `alt` | | `string` | `'easyCredit-Ratenkauf - Einfach. Fair. In Raten zahlen.'` |
+| `paymentType` | `payment-type` | | `METHODS.BILL \| METHODS.INSTALLMENT` | `METHODS.INSTALLMENT` |
+## Dependencies
+
+### Used by
+
+ - [easycredit-express-button](../easycredit-express-button)
+
+### Graph
+```mermaid
+graph TD;
+ easycredit-express-button --> easycredit-logo
+ style easycredit-logo fill:#f9f,stroke:#333,stroke-width:4px
+```
+
----------------------------------------------
*Built with [StencilJS](https://stenciljs.com/)*
diff --git a/src/components/easycredit-merchant-manager/easycredit-merchant-manager.scss b/src/components/easycredit-merchant-manager/easycredit-merchant-manager.scss
index b4b708f..658f8d0 100644
--- a/src/components/easycredit-merchant-manager/easycredit-merchant-manager.scss
+++ b/src/components/easycredit-merchant-manager/easycredit-merchant-manager.scss
@@ -22,7 +22,7 @@
content: '';
margin-bottom: 15px;
- @extend .logo-ratenkauf;
+ @extend .logo-easycredit;
display: block;
width: 100%;
height: 30px;
diff --git a/src/components/easycredit-merchant-manager/easycredit-merchant-manager.stories.tsx b/src/components/easycredit-merchant-manager/easycredit-merchant-manager.stories.tsx
index 5d0facc..85ae657 100644
--- a/src/components/easycredit-merchant-manager/easycredit-merchant-manager.stories.tsx
+++ b/src/components/easycredit-merchant-manager/easycredit-merchant-manager.stories.tsx
@@ -14,7 +14,7 @@ Um die Transaktionen abrufen zu können, müssen für den Merchant Manager die E
},
argTypes: {
txId: {
- description: 'die Transaktions-ID der easyCredit-Ratenkauf Zahlung'
+ description: 'die Transaktions-ID der easyCredit-Zahlung'
},
date: {
description: 'Bestelldatum, verwendet zur Unterscheidung zwischen "nicht verfügbar" und "noch nicht verfügbar". Der Wert muss von Date.parse() geparst werden können.'
diff --git a/src/components/easycredit-merchant-status-widget/easycredit-merchant-status-widget.stories.tsx b/src/components/easycredit-merchant-status-widget/easycredit-merchant-status-widget.stories.tsx
index 7bb16ec..0cfe181 100644
--- a/src/components/easycredit-merchant-status-widget/easycredit-merchant-status-widget.stories.tsx
+++ b/src/components/easycredit-merchant-status-widget/easycredit-merchant-status-widget.stories.tsx
@@ -14,7 +14,7 @@ Das Merchant StatusWidget benötigt eine initale Konfiguration zum Abruf der Tra
},
argTypes: {
txId: {
- description: 'die Transaktions-ID der easyCredit-Ratenkauf Zahlung'
+ description: 'die Transaktions-ID der easyCredit-Zahlung'
},
date: {
description: 'Bestelldatum, verwendet zur Unterscheidung zwischen "nicht verfügbar" und "noch nicht verfügbar". Der Wert muss von Date.parse() geparst werden können.'
diff --git a/src/components/easycredit-modal/easycredit-modal.scss b/src/components/easycredit-modal/easycredit-modal.scss
index 6bee57d..7c50058 100644
--- a/src/components/easycredit-modal/easycredit-modal.scss
+++ b/src/components/easycredit-modal/easycredit-modal.scss
@@ -60,8 +60,10 @@
overflow-x: hidden;
overflow-y: auto;
+ transition: $transition-slow;
+
background-color: $white;
- border-radius: $border-radius-xxl;
+ border-radius: $border-radius-xxxl;
box-shadow: $box-shadow;
color: $font-color;
@@ -79,10 +81,10 @@
padding-bottom: 20px;
width: 100vw;
max-width: 100vw;
- max-height: 100vh;
max-height: -webkit-fill-available;
overflow: scroll;
- border-radius: 0;
+ border-bottom-left-radius: 0;
+ border-bottom-right-radius: 0;
animation-name: modal-mobile;
animation-duration: .25s;
@@ -100,6 +102,7 @@
height: 27px;
@include background-svg($icon-close-blue);
+ background-color: $white;
background-position: center;
background-repeat: no-repeat;
background-size: 9px;
@@ -124,6 +127,15 @@
height: 350px;
}
}
+ &.size-medium,
+ &.size-checkout {
+ padding: 0;
+
+ @media (min-width: $breakpoint-sm-up) {
+ width: 800px;
+ height: 650px;
+ }
+ }
&.size-payment {
width: 499px; // ensures display of payment terminal with mobile layout
height: 900px;
@@ -213,35 +225,6 @@
}
}
-.ec-modal-sandbox {
- position: fixed;
- left: 0;
- bottom: 0;
- z-index: 100;
- padding: 20px 25px;
- width: 100%;
- box-sizing: border-box;
- white-space: nowrap;
- overflow: scroll;
- background-color: $white;
- box-shadow: 0 0 25px rgba(0,0,0,.15);
-
- &::-webkit-scrollbar {
- display: none !important;
- }
-
- strong {
- display: inline-block;
- margin-right: 15px;
- }
-
- a {
- display: inline-block;
- margin-right: 15px;
- cursor: pointer;
- }
-}
-
::slotted(iframe) {
@extend %iframe;
}
diff --git a/src/components/easycredit-modal/easycredit-modal.tsx b/src/components/easycredit-modal/easycredit-modal.tsx
index d0b2514..6e05a2d 100644
--- a/src/components/easycredit-modal/easycredit-modal.tsx
+++ b/src/components/easycredit-modal/easycredit-modal.tsx
@@ -18,6 +18,7 @@ export class EasycreditModal {
@State() hasHeadingSlot: boolean = false
@State() submittable: boolean = false
@State() submitButtonClicked: boolean = false
+ @State() elementHeight: number = null
@Event() modalOpened: EventEmitter;
@Event() modalClosed: EventEmitter;
@@ -38,6 +39,23 @@ export class EasycreditModal {
}
}
+ setElementHeight(): void {
+ if ( this.size === 'checkout' ) {
+ if ( this.elementHeight === null ) {
+ this.elementHeight = 0;
+ }
+ var checkoutModalContentContainer = this.element.querySelector
+
@@ -108,11 +130,13 @@ export class EasycreditModal {
'ec-modal': true,
'show': this.isOpen,
['size-' + this.size]: this.size !== ''
+ }} style={{
+ 'height': this.elementHeight + 'px'
}}>
this.close()}>
{ this.getHeadingFragment() }
-
+ `
+## Shadow Parts
+
+| Part | Description |
+| ---------- | ----------- |
+| `"submit"` | |
+
+
## Dependencies
### Used by
diff --git a/src/components/easycredit-widget/easycredit-widget.scss b/src/components/easycredit-widget/easycredit-widget.scss
index 28e17bf..5868907 100644
--- a/src/components/easycredit-widget/easycredit-widget.scss
+++ b/src/components/easycredit-widget/easycredit-widget.scss
@@ -8,12 +8,51 @@
.ec-widget {
position: relative;
- display: block;
- padding: 15px 15px 15px 77.5px;
+ display: flex;
+ padding: 0 0 0 10px;
width: 300px;
max-width: 100%;
box-sizing: border-box;
+ >svg {
+ align-self: center;
+ margin-right: 7.5px;
+ flex: 0 0 22.5px;
+ width: 22.5px;
+ height: 22.5px;
+ }
+
+ >span {
+ display: inline-block;
+ padding: 6.5px 0;
+ }
+
+ &__cta {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin-left: 10px;
+ flex: 0 0 23px;
+ width: 23px;
+
+ border-left: 1px solid rgba($ec-darkblue,0.1);
+ cursor: pointer;
+
+ &:hover {
+ margin-bottom: -1px;
+ margin-right: -0.5px;
+ background: $white linear-gradient(to right, rgba($ec-darkblue,0.05)0%, rgba($ec-darkblue,0) 10%, $white 100%);
+ border-top-right-radius: $border-radius-xl;
+ border-bottom-right-radius: $border-radius-xl;
+ }
+
+ svg {
+ flex: 0 0 9px;
+ width: 9px;
+ height: 9px;
+ }
+ }
+
background-color: $white;
text-align: left;
@@ -36,7 +75,6 @@
}
&.minimal {
- display: flex;
align-items: flex-start;
padding: 0;
width: auto;
@@ -45,7 +83,6 @@
box-shadow: none;
svg {
- margin-right: 7.5px;
flex: 0 0 20px;
width: 20px;
height: 20px;
@@ -72,38 +109,28 @@
}
}
- &__logo {
- position: absolute;
- left: 15px;
- top: 50%;
- transform: translateY(-50%);
-
- @extend .logo-ratenkauf;
- display: block;
- width: 50px;
- height: 24px;
- }
-
span {
em {
font-weight: bold;
font-style: normal;
- color: $ec-primary;
}
- }
- a {
- display: inline-block;
- margin-left: 5px;
+ a {
+ display: inline-block;
- cursor: pointer;
- text-decoration: underline !important;
- font-weight: bold;
- color: $font-color;
+ cursor: pointer;
+ text-decoration: underline !important;
+ font-weight: bold;
+ color: $font-color;
- &:hover {
- color: $font-color !important;
- text-decoration: none !important;
+ &:hover {
+ color: $font-color !important;
+ text-decoration: none !important;
+ }
+ }
+
+ &.ec-widget__separator {
+ color: rgba($font-color,0.4);
}
}
}
diff --git a/src/components/easycredit-widget/easycredit-widget.stories.tsx b/src/components/easycredit-widget/easycredit-widget.stories.tsx
index 4d953bc..7e69b6b 100644
--- a/src/components/easycredit-widget/easycredit-widget.stories.tsx
+++ b/src/components/easycredit-widget/easycredit-widget.stories.tsx
@@ -1,4 +1,5 @@
import { buildAttributes } from '../../../.storybook/helpers'
+import { METHODS } from '../../types';
export default {
title: "Marketing/Widget",
@@ -17,6 +18,13 @@ export default {
amount: {
description: 'der zu finanzierende Betrag für den die Rate angezeigt werden soll, üblicherweise der Produktpreis'
},
+ paymentTypes: {
+ description: 'die zu berücksichtigenden Zahlungsmethoden, als komma-getrennte Liste',
+ table: {
+ defaultValue: { summary: 'INSTALLMENT,BILL' },
+ },
+ control: 'check', options: [METHODS.INSTALLMENT, METHODS.BILL]
+ },
extended: {
description: 'bestimmt, ob das Widget außerhalb der Betragsgrenzen angezeigt wird (optional)',
defaultValue: 'false',
@@ -45,7 +53,7 @@ export default {
};
let args = {
- webshopId: '2.de.9999.9999',
+ webshopId: '2.de.7387.2',
amount: 500,
extended: true,
displayType: '',
@@ -66,14 +74,56 @@ export const WidgetNormal = TemplateFirst.bind({});
WidgetNormal.storyName = 'Standard'
WidgetNormal.args = args
+export const WidgetFull = Template.bind({});
+WidgetFull.storyName = 'beide Zahlarten';
+WidgetFull.args = {
+ ...args,
+ paymentTypes: `${METHODS.BILL},${METHODS.INSTALLMENT}`
+};
+
+export const WidgetBillPayment = Template.bind({});
+WidgetBillPayment.storyName = 'nur Rechnungskauf';
+WidgetBillPayment.args = {
+ ...args,
+ paymentTypes: METHODS.BILL,
+};
+
+export const WidgetInstallmentPayment = Template.bind({});
+WidgetInstallmentPayment.storyName = 'nur Ratenkauf';
+WidgetInstallmentPayment.args = {
+ ...args,
+ paymentTypes: METHODS.INSTALLMENT,
+};
+
+export const WidgetBelowInstallments = Template.bind({});
+WidgetBelowInstallments.storyName = 'Grenzdarstellung (50 - 199 EUR)';
+WidgetBelowInstallments.args = {
+ ...args,
+ ...{
+ amount: 198,
+ },
+};
+
+export const WidgetAboveBill = Template.bind({});
+WidgetAboveBill.storyName = 'Grenzdarstellung (5001 - 9999 EUR)';
+WidgetAboveBill.args = {
+ ...args,
+ ...{
+ amount: 6000,
+ },
+};
+
export const WidgetBelow = Template.bind({});
-WidgetBelow.storyName = 'unterhalb Betragsgrenze (99 EUR)'
-WidgetBelow.args = { ... args, ... {
- amount: 99
-}}
+WidgetBelow.storyName = 'Grenzdarstellung (< 50 EUR)';
+WidgetBelow.args = {
+ ...args,
+ ...{
+ amount: 49,
+ },
+};
export const WidgetAbove = Template.bind({});
-WidgetAbove.storyName = 'oberhalb Betragsgrenze (12.000 EUR)'
+WidgetAbove.storyName = 'Grenzdarstellung (> 10.000 EUR)';
WidgetAbove.args = { ... args, ... {
amount: 12000
}}
@@ -86,21 +136,21 @@ WidgetExtended.args = { ... args, ... {
}}
export const WidgetDisplayTypeClean = Template.bind({});
-WidgetDisplayTypeClean.storyName = 'alternative Darstellungsvariante, displayType: clean'
+WidgetDisplayTypeClean.storyName = 'displayType: clean'
WidgetDisplayTypeClean.args = { ... args, ... {
amount: 500,
displayType: 'clean'
}}
export const WidgetDisplayTypeMinimal = Template.bind({});
-WidgetDisplayTypeMinimal.storyName = 'alternative Darstellungsvariante, displayType: minimal'
+WidgetDisplayTypeMinimal.storyName = 'displayType: minimal'
WidgetDisplayTypeMinimal.args = { ... args, ... {
amount: 500,
displayType: 'minimal'
}}
export const WidgetWithoutFlexprice = Template.bind({});
-WidgetWithoutFlexprice.storyName = 'Berechnung ohne Zins-Flex'
+WidgetWithoutFlexprice.storyName = 'ohne Zins-Flex'
WidgetWithoutFlexprice.args = { ... args, ... {
amount: 500,
disableFlexprice: true
diff --git a/src/components/easycredit-widget/easycredit-widget.tsx b/src/components/easycredit-widget/easycredit-widget.tsx
index 1b98c5f..e5a6963 100644
--- a/src/components/easycredit-widget/easycredit-widget.tsx
+++ b/src/components/easycredit-widget/easycredit-widget.tsx
@@ -1,6 +1,9 @@
import { Component, Prop, State, Watch, h } from '@stencil/core';
-import { formatAmount, fetchInstallmentPlans, fetchSingleInstallmentPlan } from '../../utils/utils';
+import { formatAmount, getWebshopInfo, fetchInstallmentPlans } from '../../utils/utils';
import { applyAssetsUrl, sendFeedback } from '../../utils/utils';
+import { Caps, validateAmount } from '../../utils/validation';
+import { WebshopInfo, InstallmentPlans, METHODS } from '../../types';
+import state from '../../stores/general'
@Component({
tag: 'easycredit-widget',
@@ -8,61 +11,67 @@ import { applyAssetsUrl, sendFeedback } from '../../utils/utils';
shadow: true,
})
export class EasycreditWidget {
- /**
- * Webshop Id
- */
- @Prop() webshopId: string
- /**
- * Financing Amount
- */
- @Prop({ mutable: true }) amount: number
- /**
- * Display Type (e.g. clean -> without shadow)
- */
+ @Prop() webshopId: string
+ @Prop({ mutable: true }) amount: number
@Prop() displayType: string
-
- /**
- * Show if out of range
- */
+ @Prop({ mutable: true }) paymentTypes: string = METHODS.INSTALLMENT
@Prop({ mutable: true }) extended: boolean = true
-
- /**
- * Disable Flexprice in calculation
- */
@Prop({ mutable: true }) disableFlexprice: boolean = false
+ @State() installmentPlans: InstallmentPlans
+ @State() isValid: boolean = false
+ @State() widgetLayout: string = ''
+ @State() webshopInfo: WebshopInfo = null
+
modal!: HTMLEasycreditModalElement;
widgetElement!: HTMLElement;
- @State() installments
- @State() isValid: boolean = false
- @State() widgetLayout: string = ''
+ caps: Caps
@Watch('amount')
- onAmountChanged(amount: number, oldAmount: number) {
- if (amount !== oldAmount) {
-
- const fetchPlans = (this.disableFlexprice) ?
- fetchSingleInstallmentPlan.bind(this, this.webshopId, this.amount, { 'withoutFlexprice': true }) :
- fetchInstallmentPlans.bind(this, this.webshopId, this.amount)
+ async onAmountChanged(amount: number, oldAmount: number) {
+ if (!this.isEnabled(METHODS.INSTALLMENT)){
+ return
+ }
+ try {
+ validateAmount(this.amount, METHODS.INSTALLMENT)
+ } catch (e) {
+ return;
+ }
- fetchPlans().then((data) => {
+ if (amount !== oldAmount) {
+ try {
+ const opts = this.disableFlexprice ? { 'withoutFlexprice': this.disableFlexprice } : null
+ const installmentPlans = await fetchInstallmentPlans(this.webshopId, this.amount, opts);
+ this.installmentPlans = installmentPlans.installmentPlans?.find(() => true)
this.isValid = true
- this.installments = data
- }).catch(e => {
+ } catch (e) {
+ this.installmentPlans = null
console.error(e)
- })
+ }
}
}
connectedCallback() {
applyAssetsUrl(EasycreditWidget)
}
+
+ isEnabled(type: METHODS) {
+ return this.caps.isEnabled(type)
+ }
- componentWillLoad() {
+ async componentWillLoad() {
+ this.caps = new Caps(this.paymentTypes)
this.onAmountChanged(this.amount, 0);
+
+ try {
+ await getWebshopInfo(this.webshopId)
+ this.isValid = true
+ } catch(e) {
+ console.error(e)
+ }
}
componentDidRender() {
@@ -70,19 +79,18 @@ export class EasycreditWidget {
}
getInstallmentPlan() {
- if (!this.installments || !this.installments.installmentPlans) {
+ if (!this.installmentPlans) {
return null
}
- return this.installments.installmentPlans
- .find(() => true)
+ return this.installmentPlans
}
getMinimumInstallment() {
- if (!this.getInstallmentPlan().plans) {
+ if (!this.getInstallmentPlan()?.plans) {
return
}
return this.getInstallmentPlan().plans
- .sort((a,b) => b.numberOfInstallments - a.numberOfInstallments)
+ .sort((a,b) => a.installment - b.installment)
.find(() => true)
}
@@ -91,49 +99,84 @@ export class EasycreditWidget {
}
private getLogo(): string {
- if (this.displayType === 'minimal') {
- return
- }
- return
+ return
}
- private getLinkText(): string {
- return 'Mehr Infos'
+ private getCtaIcon(): string {
+ return
}
private getInstallmentText(): string {
- if (!this.installments) {
+ if (!this.isEnabled(METHODS.INSTALLMENT)) {
return
}
- if (this.amount < this.installments.minFinancingAmount) {
+
+ let info = state.webshopInfo
+ if (this.amount < info.minInstallmentValue) {
if (!this.extended) {
return
}
return
Finanzieren ab
- {this.installments.minFinancingAmount.toLocaleString('de-DE', {maximumFractionDigits: 0})} € Bestellwert
+ {info.minInstallmentValue.toLocaleString('de-DE', {maximumFractionDigits: 0})} € Bestellwert
}
- if (this.amount > this.installments.maxFinancingAmount) {
+ if (this.amount > info.maxInstallmentValue) {
if (!this.extended) {
return
}
return
Finanzieren bis
- {this.installments.maxFinancingAmount.toLocaleString('de-DE', {maximumFractionDigits: 0})} € Bestellwert
+ {info.maxInstallmentValue.toLocaleString('de-DE', {maximumFractionDigits: 0})} € Bestellwert
}
if (this.getMinimumInstallment()) {
return
Finanzieren ab
- {formatAmount(this.getMinimumInstallment().installment)} € / Monat
+ this.openModal(METHODS.INSTALLMENT)}>{formatAmount(this.getMinimumInstallment().installment)} € / Monat
}
}
- openModal (): void {
+ private getBillPaymentText(): string {
+ if (!this.isEnabled(METHODS.BILL)) {
+ return
+ }
+
+ const info = state.webshopInfo
+ if (!info) {
+ return
+ }
+
+ if (this.amount < info.minBillingValue) {
+ if (!this.extended) {
+ return
+ }
+ return
+ mit this.openModal(METHODS.BILL)}>Rechnung bezahlen ab {info.minBillingValue.toLocaleString('de-DE', { maximumFractionDigits: 0 })} €
+
+ }
+
+ if (this.amount > info.maxBillingValue) {
+ if (!this.extended) {
+ return
+ }
+ return
+ mit this.openModal(METHODS.BILL)}>Rechnung bezahlen bis {info.maxBillingValue.toLocaleString('de-DE', { maximumFractionDigits: 0 })} €
+
+ }
+
+ const firstLetter = this.getInstallmentText() ? 'h' : 'H'
+ return
+ {firstLetter}eute bestellen, in this.openModal(METHODS.BILL)}>30 Tagen zahlen
+
+ }
+
+ openModal (paymentType?: METHODS): void {
sendFeedback(this, { component: 'EasycreditWidget', action: 'openModal' });
+
+ this.modal.querySelector('iframe').dataset.src = this.getModalUrl(paymentType);
this.modal.open()
}
@@ -144,10 +187,35 @@ export class EasycreditWidget {
this.widgetLayout = this.widgetElement.getBoundingClientRect().width < 251 ? 'small' : '';
}
+ getModalUrl (paymentType?: METHODS) {
+ let url = new URL('https://ratenkauf.easycredit.de/widget/app/#/ratenwunsch');
+
+ const params = {
+ bestellwert: this.amount,
+ shopKennung: '2.de.7387.2', //this.webshopId,
+ paymentSwitchPossible: this.paymentTypes.split(',').length > 1,
+ ohneZinsflex: this.disableFlexprice
+ }
+
+ Object.entries(params).forEach(([key, value]) => {
+ url.searchParams.append(key, String(value));
+ });
+
+ if (!paymentType) {
+ const info = state.webshopInfo
+ paymentType = this.amount >= info.minInstallmentValue && this.amount <= info.maxInstallmentValue ? METHODS.INSTALLMENT : METHODS.BILL;
+ }
+ if (this.isEnabled(paymentType)) {
+ url.searchParams.append('paymentType', paymentType + '_PAYMENT');
+ }
+ return url.origin + url.pathname + url.hash + url.search;
+ }
+
getModalFragment () {
+ //const url = this.getInstallmentPlan()?.url ?? this.getDefaultModalUrl()
return ([
this.modal = el as HTMLEasycreditModalElement} size="payment">
-
+
])
}
@@ -155,7 +223,7 @@ export class EasycreditWidget {
render() {
return ([
this.isValid &&
- this.getInstallmentText() &&
+ (this.getInstallmentText() || this.getBillPaymentText()) &&