diff --git a/src/components/easycredit-box-listing/easycredit-box-listing.scss b/src/components/easycredit-box-listing/easycredit-box-listing.scss index e234b52..a56b43d 100644 --- a/src/components/easycredit-box-listing/easycredit-box-listing.scss +++ b/src/components/easycredit-box-listing/easycredit-box-listing.scss @@ -87,7 +87,7 @@ } &__content-heading { margin-bottom: 15px; - font-size: $font-size-heading-sm; + font-size: $font-size-lg; line-height: $line-height-heading-lg; font-weight: bold; } diff --git a/src/components/easycredit-checkout/easycredit-checkout.scss b/src/components/easycredit-checkout/easycredit-checkout.scss index b2114fb..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,6 +240,17 @@ } } + &__small-print { + margin-top: 20px; + color: #8095AC; + + small { + display: block; + font-size: $font-size-xxs; + line-height: $line-height; + } + } + .ec-payment-plan { strong { color: $font-color; diff --git a/src/components/easycredit-checkout/easycredit-checkout.stories.tsx b/src/components/easycredit-checkout/easycredit-checkout.stories.tsx index 6ddf53e..0c82f91 100644 --- a/src/components/easycredit-checkout/easycredit-checkout.stories.tsx +++ b/src/components/easycredit-checkout/easycredit-checkout.stories.tsx @@ -47,7 +47,7 @@ Sobald der Kunde die PaymentPage durchlaufen hat, zeigt das Widget die vom Kunde }; let args = { - webshopId: '2.de.9999.9999', + webshopId: '2.de.7387.2', amount: 820.31, isActive: true, alert: '', diff --git a/src/components/easycredit-checkout/easycredit-checkout.tsx b/src/components/easycredit-checkout/easycredit-checkout.tsx index 4ab3ac8..352b9cb 100644 --- a/src/components/easycredit-checkout/easycredit-checkout.tsx +++ b/src/components/easycredit-checkout/easycredit-checkout.tsx @@ -168,6 +168,32 @@ export class EasycreditCheckout { ]) } + getCheckoutInstallmentUspFragment () { + if (this.alert) { + return + } + + return ([
+
Ihre Vorteile
+ + +
+ +
+ +

+ {this.getPrivacyFragment({intro: false})} +

+
+ ]) + } + getCheckoutBillPaymentFragment () { if (this.alert) { return @@ -180,14 +206,21 @@ export class EasycreditCheckout { - {this.getPrivacyFragment({intro: false})} +
Ihre Vorteile
+
-
+

+ {this.getPrivacyFragment({intro: false})} +

]) } @@ -238,7 +271,7 @@ export class EasycreditCheckout { { this.alert } } - { this.isEnabled(METHODS.INSTALLMENT) && this.getCheckoutInstallmentFragment() } + { this.isEnabled(METHODS.INSTALLMENT) && this.getCheckoutInstallmentUspFragment() } { this.isEnabled(METHODS.BILL) && this.getCheckoutBillPaymentFragment() } } diff --git a/src/components/easycredit-express-button/easycredit-express-button.stories.tsx b/src/components/easycredit-express-button/easycredit-express-button.stories.tsx index 0b9fe6a..9f0e3a5 100644 --- a/src/components/easycredit-express-button/easycredit-express-button.stories.tsx +++ b/src/components/easycredit-express-button/easycredit-express-button.stories.tsx @@ -43,7 +43,7 @@ export default { } let args = { - webshopId: '2.de.9999.9999', + webshopId: '2.de.7387.2', amount: 299, fullWidth: false, // redirectUrl: 'https://easycredit-ratenkauf.de/' diff --git a/src/components/easycredit-express-button/easycredit-express-button.tsx b/src/components/easycredit-express-button/easycredit-express-button.tsx index 669bd2e..0bedc43 100644 --- a/src/components/easycredit-express-button/easycredit-express-button.tsx +++ b/src/components/easycredit-express-button/easycredit-express-button.tsx @@ -13,7 +13,7 @@ import { validateAmount } from '../../utils/validation'; export class EasycreditExpressButton { @Prop() webshopId: string @Prop({ mutable: true }) amount: number - @Prop({ mutable: true }) paymentTypes: string = METHODS.INSTALLMENT + @Prop({ mutable: true }) paymentTypes: string @Prop() fullWidth: boolean = false @Prop() redirectUrl: string @@ -21,6 +21,7 @@ export class EasycreditExpressButton { @State() selectedPaymentType: METHODS @State() installmentPlans: InstallmentPlans = null @State() selectedInstallment: InstallmentPlan = null + @State() paymentTypesEmpty: boolean = false infopageModal!: HTMLEasycreditModalElement checkoutModal!: HTMLEasycreditModalElement @@ -79,6 +80,11 @@ export class EasycreditExpressButton { } async componentWillLoad() { + if (!this.paymentTypes) { + this.paymentTypes = METHODS.INSTALLMENT + this.paymentTypesEmpty = true + } + this.caps = new Caps(this.paymentTypes) try { @@ -93,6 +99,18 @@ export class EasycreditExpressButton { this.onAmountChanged(this.amount, null); } + getInstallmentUspFragment () { + return ([
+
Ihre Vorteile
+ +
+ ]) + } + getCheckoutModalFragment() { return ([ } {this.selectedPaymentType === METHODS.BILL && } - + {!this.paymentTypesEmpty && + + } + + {this.paymentTypesEmpty && + this.getInstallmentUspFragment() + }
diff --git a/src/components/easycredit-express-button/readme.md b/src/components/easycredit-express-button/readme.md index 382e381..ecc602a 100644 --- a/src/components/easycredit-express-button/readme.md +++ b/src/components/easycredit-express-button/readme.md @@ -7,13 +7,13 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| -------------- | --------------- | ----------- | --------- | --------------- | -| `amount` | `amount` | | `number` | `undefined` | -| `fullWidth` | `full-width` | | `boolean` | `false` | -| `paymentTypes` | `payment-types` | | `string` | `'INSTALLMENT'` | -| `redirectUrl` | `redirect-url` | | `string` | `undefined` | -| `webshopId` | `webshop-id` | | `string` | `undefined` | +| Property | Attribute | Description | Type | Default | +| -------------- | --------------- | ----------- | --------- | ----------- | +| `amount` | `amount` | | `number` | `undefined` | +| `fullWidth` | `full-width` | | `boolean` | `false` | +| `paymentTypes` | `payment-types` | | `string` | `undefined` | +| `redirectUrl` | `redirect-url` | | `string` | `undefined` | +| `webshopId` | `webshop-id` | | `string` | `undefined` | ## Dependencies diff --git a/src/components/easycredit-infopage/easycredit-infopage.scss b/src/components/easycredit-infopage/easycredit-infopage.scss index dfddabe..5392753 100644 --- a/src/components/easycredit-infopage/easycredit-infopage.scss +++ b/src/components/easycredit-infopage/easycredit-infopage.scss @@ -74,7 +74,7 @@ $infpage-max-width: 650px; font-size: $font-size-lg; &::before { - @include content-svg($icon-checkmark); + @include content-svg($icon-checkmark-circle-lg); margin-right: 20px; width: 41px; height: 41px; diff --git a/src/components/easycredit-widget/easycredit-widget.stories.tsx b/src/components/easycredit-widget/easycredit-widget.stories.tsx index 625e3df..7e69b6b 100644 --- a/src/components/easycredit-widget/easycredit-widget.stories.tsx +++ b/src/components/easycredit-widget/easycredit-widget.stories.tsx @@ -53,7 +53,7 @@ export default { }; let args = { - webshopId: '2.de.9999.9999', + webshopId: '2.de.7387.2', amount: 500, extended: true, displayType: '', diff --git a/src/components/easycredit-widget/readme.md b/src/components/easycredit-widget/readme.md index cb48cdd..d482810 100644 --- a/src/components/easycredit-widget/readme.md +++ b/src/components/easycredit-widget/readme.md @@ -7,14 +7,14 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| ------------------ | ------------------- | ----------- | --------- | --------------- | -| `amount` | `amount` | | `number` | `undefined` | -| `disableFlexprice` | `disable-flexprice` | | `boolean` | `false` | -| `displayType` | `display-type` | | `string` | `undefined` | -| `extended` | `extended` | | `boolean` | `true` | -| `paymentTypes` | `payment-types` | | `string` | `'INSTALLMENT'` | -| `webshopId` | `webshop-id` | | `string` | `undefined` | +| Property | Attribute | Description | Type | Default | +| ------------------ | ------------------- | ----------- | --------- | --------------------- | +| `amount` | `amount` | | `number` | `undefined` | +| `disableFlexprice` | `disable-flexprice` | | `boolean` | `false` | +| `displayType` | `display-type` | | `string` | `undefined` | +| `extended` | `extended` | | `boolean` | `true` | +| `paymentTypes` | `payment-types` | | `string` | `METHODS.INSTALLMENT` | +| `webshopId` | `webshop-id` | | `string` | `undefined` | ## Dependencies diff --git a/src/globals/base.scss b/src/globals/base.scss index 9160d73..c7e9cd2 100644 --- a/src/globals/base.scss +++ b/src/globals/base.scss @@ -49,7 +49,7 @@ $font-size-heading-xxl: 46px; $font-size-heading-xl: 30px; $font-size-heading-lg: 25px; $font-size-heading: 20px; -$font-size-heading-sm: 16px; +$font-size-heading-sm: 18px; $font-size-xl: 18px; $font-size-lg: 16px; @@ -95,7 +95,10 @@ $circle-width-33-secondary: calc(100% * 0.33 * 0.33); $ratenkauf-icon: ''; $icon-close-blue: ''; $icon-close-white: ''; -$icon-checkmark: ''; +$icon-checkmark: ''; +$icon-checkmark-circle: ''; +$icon-checkmark-circle-white: ''; +$icon-checkmark-circle-lg: ''; $icon-arrow-down: ''; $icon-shipping: ''; $icon-info: ''; @@ -208,11 +211,18 @@ $circle-secondary: '