add disable-flexprice option

.storybook/stories/2. Changelog.stories.mdx

@@ -4,6 +4,12 @@ import { Meta } from "@storybook/addon-docs/blocks";
 
 # Changelog
 
+## 1.2.6
+
+#### `<easycredit-widget />`, `<easycredit-checkout />`
+
+- die beiden Komponenten wurden um die Option `disable-flexprice` erweitert
+
 ## 1.2.5
 
 - Update von StencilJs auf v3.1.0

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@easycredit-ratenkauf/easycredit-components",
   "license": "MIT",
-  "version": "1.2.5",
+  "version": "1.2.6",
   "description": "The easyCredit-Ratenkauf Web Components are a set of web components to be universally used in e-commerce platforms like Magento or Shopware. The web components ease integration of easyCredit-Ratenkauf installments payment solution by providing versatile web frontend elements for marketing and checkout.",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",

src/components.d.ts

@@ -63,6 +63,10 @@ export namespace Components {
     interface EasycreditCheckout {
         "alert": string;
         "amount": number;
+        /**
+          * Disable Flexprice in calculation
+         */
+        "disableFlexprice": boolean;
         "isActive": boolean;
         "paymentPlan": string;
         "webshopId": string;
@@ -119,6 +123,10 @@ export namespace Components {
           * Financing Amount
          */
         "amount": number;
+        /**
+          * Disable Flexprice in calculation
+         */
+        "disableFlexprice": boolean;
         /**
           * Display Type (e.g. clean -> without shadow)
          */
@@ -327,6 +335,10 @@ declare namespace LocalJSX {
     interface EasycreditCheckout {
         "alert"?: string;
         "amount"?: number;
+        /**
+          * Disable Flexprice in calculation
+         */
+        "disableFlexprice"?: boolean;
         "isActive"?: boolean;
         "paymentPlan"?: string;
         "webshopId"?: string;
@@ -383,6 +395,10 @@ declare namespace LocalJSX {
           * Financing Amount
          */
         "amount"?: number;
+        /**
+          * Disable Flexprice in calculation
+         */
+        "disableFlexprice"?: boolean;
         /**
           * Display Type (e.g. clean -> without shadow)
          */

src/components/easycredit-checkout/easycredit-checkout.stories.tsx

@@ -81,3 +81,12 @@ CheckoutError.args = args
 CheckoutError.args = { ... args, ... {
     alert: 'Es ist ein Fehler aufgetreten.'
 }}
+
+/*
+export const CheckoutWithoutFlexprice = Template.bind({})
+CheckoutWithoutFlexprice.storyName = 'ohne Zins-Flex'
+CheckoutWithoutFlexprice.args = args
+CheckoutWithoutFlexprice.args = { ... args, ... {
+    disableFlexprice: true
+}}
+*/

src/components/easycredit-checkout/easycredit-checkout.tsx

@@ -1,5 +1,5 @@
 import { Component, Prop, State, Listen, Element, h } from '@stencil/core';
-import { formatCurrency, fetchInstallmentPlans, fetchAgreement } from '../../utils/utils';
+import { formatCurrency, fetchInstallmentPlans, fetchSingleInstallmentPlan, fetchAgreement } from '../../utils/utils';
 
 @Component({
   tag: 'easycredit-checkout',
@@ -15,6 +15,11 @@ export class EasycreditCheckout {
   @Prop() alert: string
   @Prop() paymentPlan: string
 
+  /**
+   * Disable Flexprice in calculation
+   */
+  @Prop() disableFlexprice: boolean = false
+
   @State() privacyApprovalForm: string
   @State() acceptButtonClicked: boolean = false
 
@@ -50,7 +55,12 @@ export class EasycreditCheckout {
 
   async componentWillLoad () {
     if (this.amount > 0 && !this.alert && !this.paymentPlan) {
-      await fetchInstallmentPlans(this.webshopId, this.amount).then((data) => {
+
+      const fetchPlans = (this.disableFlexprice) ?
+        fetchSingleInstallmentPlan.bind(this, this.webshopId, this.amount, { 'withoutFlexprice': true }) :
+        fetchInstallmentPlans.bind(this, this.webshopId, this.amount)
+
+      await fetchPlans().then((data) => {
         if (!data) {
           return
         }

src/components/easycredit-checkout/readme.md

@@ -7,13 +7,14 @@
 
 ## Properties
 
-| Property      | Attribute      | Description | Type      | Default     |
-| ------------- | -------------- | ----------- | --------- | ----------- |
-| `alert`       | `alert`        |             | `string`  | `undefined` |
-| `amount`      | `amount`       |             | `number`  | `undefined` |
-| `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` | Disable Flexprice in calculation | `boolean` | `false`     |
+| `isActive`         | `is-active`         |                                  | `boolean` | `true`      |
+| `paymentPlan`      | `payment-plan`      |                                  | `string`  | `undefined` |
+| `webshopId`        | `webshop-id`        |                                  | `string`  | `undefined` |
 
 
 ## Dependencies

src/components/easycredit-widget/easycredit-widget.stories.tsx

@@ -71,3 +71,10 @@ WidgetDisplayTypeClean.args = { ... args, ... {
   displayType: 'clean'
 }}
 */
+
+export const WidgetWithoutFlexprice = Template.bind({});
+WidgetWithoutFlexprice.storyName = 'Berechnung ohne Zins-Flex'
+WidgetWithoutFlexprice.args = { ... args, ... {
+  amount: 500,
+  disableFlexprice: true
+}}

src/components/easycredit-widget/easycredit-widget.tsx

@@ -1,5 +1,5 @@
 import { Component, Prop, State, Watch, h } from '@stencil/core';
-import { formatAmount, fetchInstallmentPlans } from '../../utils/utils';
+import { formatAmount, fetchInstallmentPlans, fetchSingleInstallmentPlan } from '../../utils/utils';
 import { applyAssetsUrl } from '../../utils/utils';
 
 @Component({
@@ -28,6 +28,11 @@ export class EasycreditWidget {
    */
   @Prop({ mutable: true }) extended: boolean = true
 
+  /**
+   * Disable Flexprice in calculation
+   */
+  @Prop({ mutable: true }) disableFlexprice: boolean = false
+
   modal!: HTMLEasycreditModalElement;
   widgetElement!: HTMLElement;
 
@@ -38,7 +43,12 @@ export class EasycreditWidget {
   @Watch('amount')
   onAmountChanged(amount: number, oldAmount: number) {
     if (amount !== oldAmount) {
-      fetchInstallmentPlans(this.webshopId, amount).then((data) => {
+
+      const fetchPlans = (this.disableFlexprice) ?
+        fetchSingleInstallmentPlan.bind(this, this.webshopId, this.amount, { 'withoutFlexprice': true }) :
+        fetchInstallmentPlans.bind(this, this.webshopId, this.amount)
+
+      fetchPlans().then((data) => {
         this.isValid = true
         this.installments = data
       }).catch(e => {

src/components/easycredit-widget/readme.md

@@ -7,12 +7,13 @@
 
 ## Properties
 
-| Property      | Attribute      | Description                                 | Type      | Default     |
-| ------------- | -------------- | ------------------------------------------- | --------- | ----------- |
-| `amount`      | `amount`       | Financing Amount                            | `number`  | `undefined` |
-| `displayType` | `display-type` | Display Type (e.g. clean -> without shadow) | `string`  | `undefined` |
-| `extended`    | `extended`     | Show if out of range                        | `boolean` | `true`      |
-| `webshopId`   | `webshop-id`   | Webshop Id                                  | `string`  | `undefined` |
+| Property           | Attribute           | Description                                 | Type      | Default     |
+| ------------------ | ------------------- | ------------------------------------------- | --------- | ----------- |
+| `amount`           | `amount`            | Financing Amount                            | `number`  | `undefined` |
+| `disableFlexprice` | `disable-flexprice` | Disable Flexprice in calculation            | `boolean` | `false`     |
+| `displayType`      | `display-type`      | Display Type (e.g. clean -> without shadow) | `string`  | `undefined` |
+| `extended`         | `extended`          | Show if out of range                        | `boolean` | `true`      |
+| `webshopId`        | `webshop-id`        | Webshop Id                                  | `string`  | `undefined` |
 
 
 ## Dependencies

src/utils/utils.ts

@@ -79,6 +79,35 @@ export function fetchAllInstallmentPlans (webshopId: string, amounts: number[])
     })
 }
 
+export function fetchSingleInstallmentPlan (webshopId: string, amount: number, opts: object = {}) {
+  let uri = 'https://ratenkauf.easycredit.de/api/ratenrechner/v3/webshop/{{webshopId}}/installmentplans'
+    .replace('{{webshopId}}', webshopId)
+
+  const options = {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json; charset=utf-8'
+    },
+    body: JSON.stringify({
+      "articles": [{
+        "identifier": "single",
+        "price": amount,
+        ...opts
+      }]
+    })
+  }
+  return fetch(uri, options)
+    .then((response) => {
+      if (response.ok) {
+      return response.json()
+      }
+      return Promise.reject(response)
+    })
+    .then((response) => {
+      return response
+    })
+}
+
 export function fetchAgreement (webshopId: string) {
   return fetch('https://ratenkauf.easycredit.de/api/payment/v3/webshop/' + webshopId, getOptions({})).then((response) => {
     if (response.ok) {