integrated a/b testing for checkout component

teambank · Jun 25, 2024 · 5b13360 · 5b13360
1 parent f9a0f1a
commit 5b13360
Show file tree

Hide file tree

Showing 8 changed files with 120 additions and 26 deletions.
diff --git 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
@@ -80,6 +80,32 @@
     }
   }
 
+  .h4 {
+    margin-bottom: 10px;
+    color: $font-color;
+  }
+
+  &__usp {
+    list-style: none;
+    margin-top: 0;
+    margin-bottom: 25px;
+    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;

diff --git a/src/components/easycredit-checkout/easycredit-checkout.stories.tsx b/src/components/easycredit-checkout/easycredit-checkout.stories.tsx
@@ -46,7 +46,7 @@ let args = {
     amount: 820.31,
     isActive: true,
     alert: '',
-    paymentPlan: ''
+    paymentPlan: '',
 }
 
 const Template = (args) => {

diff --git a/src/components/easycredit-checkout/easycredit-checkout.tsx b/src/components/easycredit-checkout/easycredit-checkout.tsx
@@ -1,5 +1,6 @@
 import { Component, Prop, State, Listen, Element, h } from '@stencil/core';
 import { formatCurrency, fetchInstallmentPlans, fetchSingleInstallmentPlan, fetchAgreement, sendFeedback, addErrorHandler } from '../../utils/utils';
+import { getVariant } from '../../utils/split-test';
 
 @Component({
   tag: 'easycredit-checkout',
@@ -94,6 +95,10 @@ export class EasycreditCheckout {
         console.error(e)
         this.alert = 'Es ist ein Fehler aufgetreten.'
       })
+
+      getVariant()
+      sendFeedback(this, { component: 'EasycreditCheckout', action: 'view' });
+
     }
   }
 
@@ -165,33 +170,60 @@ export class EasycreditCheckout {
       </div>
     }
 
-    return ([<div class="ec-checkout__body" /* :class="bodyClasses" */ >
-        <easycredit-checkout-installments installments={JSON.stringify(this.installments)} /* v-model="selectedInstalment" :instalments="instalments" */ />
-
-        <ul class="ec-checkout__totals">
-        <li>
-            <span>Kaufbetrag</span>
-            <span>{  formatCurrency(this.amount) }</span>
-        </li>
-        <li>
-            <span>+ Zinsen</span>
-            <span>{  formatCurrency(this.selectedInstallment.totalInterest) }</span>
-        </li>
-        <li class="total">
-            <span>Gesamtbetrag</span>
-            <span>{ formatCurrency(this.selectedInstallment.totalValue) }</span>
-        </li>
-        </ul>
+    const variant = getVariant()
+
+    return ([
+      <div class="ec-checkout__body" /* :class="bodyClasses" */ >
+        {variant !== 'usp'
+          ? <easycredit-checkout-installments
+            installments={JSON.stringify(this.installments)}
+            /* v-model="selectedInstalment" :instalments="instalments" */
+          />
+          : null
+        }
+        {variant !== 'usp'
+          ? <ul class="ec-checkout__totals">
+            <li>
+                <span>Kaufbetrag</span>
+                <span>{  formatCurrency(this.amount) }</span>
+            </li>
+            <li>
+                <span>+ Zinsen</span>
+                <span>{  formatCurrency(this.selectedInstallment.totalInterest) }</span>
+            </li>
+            <li class="total">
+                <span>Gesamtbetrag</span>
+                <span>{ formatCurrency(this.selectedInstallment.totalValue) }</span>
+            </li>
+          </ul>
+          : null
+        }
+
+        {variant === 'combined'
+          ? <div class="h4">Ihre Vorteile</div>
+          : null
+        }
+        {variant === 'usp' || variant === 'combined'
+          ? <ul class="ec-checkout__usp" >
+            <li><strong>30 Tage</strong> nach Lieferung zahlen</li>
+            <li>Flexible monatliche Wunschrate</li>
+            <li>Kostenfreie Ratenanpassung & Sondertilgung</li>
+          </ul>
+          : null
+        }
 
         <div class="ec-checkout__actions form-submit">
           <button type="button" class="btn btn-primary" onClick={() => this.modal.open()} /* disabled={this.submitDisabled} */ >
               Weiter zum Ratenkauf
           </button>
         </div>
 
-        <p class="ec-checkout__small-print">
-          <small innerHTML={this.example} />
-        </p>
+        {variant !== 'usp'
+          ? <p class="ec-checkout__small-print">
+            <small innerHTML={this.example} />
+          </p>
+          : null
+        }
       </div>
     ])
   }

diff --git 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/globals/base.scss b/src/globals/base.scss
@@ -44,7 +44,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;
@@ -89,7 +89,9 @@ $circle-width-33-secondary: calc(100% * 0.33 * 0.33);
 $ratenkauf-icon: '<svg id="easyCredit" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120"><defs><style>.cls-1{fill:#0066b3;}.cls-2{fill:#fff;}</style></defs><circle class="cls-1" cx="60" cy="60" r="60"/><path class="cls-2" d="M96.1094,50.91c-2.3081-.7851-6.5437-1.6761-13.6446-1.6761a26.2577,26.2577,0,0,0-17.5583,6.6105,5.791,5.791,0,0,1-1.7742,1.0521,38.9812,38.9812,0,0,1-13.86,2.03h-.1375c-4.679,0-7.6152-.7852-9.3306-2.19-1.57-1.2995-2.2179-3.2308-2.1-5.9551H68.6121l.0982-.4476a48.708,48.708,0,0,0,1.209-8.1926c0-6.3634-2.1274-11.3173-5.8136-14.6737s-8.8437-5.0718-14.8142-5.0718c-10.0883,0-16.9222,4.0747-21.22,9.5078A28.96,28.96,0,0,0,22.05,49.34,20.1865,20.1865,0,0,0,28.11,64.1984c3.9959,3.8235,9.8606,6.171,17.4285,6.171A90.6105,90.6105,0,0,0,56.4,69.7412,28.2979,28.2979,0,0,0,55.4346,77c0,6.0491,2.0414,11.1916,5.888,14.87,3.9256,3.7528,9.5544,5.7352,16.2512,5.7352A42.613,42.613,0,0,0,87.36,96.3683l1.311-.3376,2.9323-14.1321L87.6777,83.72a20.3115,20.3115,0,0,1-8.479,1.7272,9.2547,9.2547,0,0,1-6.28-1.9629c-1.5232-1.3621-2.2965-3.4388-2.2965-6.1789a18.9209,18.9209,0,0,1,3.4621-10.587,12.1231,12.1231,0,0,1,10.0175-5.3152A27.9356,27.9356,0,0,1,93.13,62.64l2.3119.7851L97.95,51.5267ZM38.8618,41.5518a10.7482,10.7482,0,0,1,10.6259-7.7137,6.2237,6.2237,0,0,1,5.4092,2.3868,9.5837,9.5837,0,0,1,1.5191,5.3269Z"/></svg>';
 $icon-close-blue: '<svg width="11" height="11" viewBox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 1L10 10M1 10L10 1" stroke="#002C5A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>';
 $icon-close-white: '<svg width="11" height="11" viewBox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 1L10 10M1 10L10 1" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>';
-$icon-checkmark: '<svg width="41" height="41" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="20.78" cy="20.42" r="20" fill="#0066B3"/><path d="M29.5 15.45c-.11-.08-.39-.31-.83-.7-.42-.4-.69-.64-.82-.75a.42.42 0 00-.39-.11.53.53 0 00-.4.15l-1.32 1.49A815.49 815.49 0 0020 21.86l-1.29 1.4-.78-.62a97.04 97.04 0 01-3.6-2.9L13.4 19a.52.52 0 00-.43-.11.37.37 0 00-.31.15l-.75.82-.54.63c-.1.1-.16.23-.16.39.03.16.1.27.2.35l.93.98c.63.62 1.32 1.33 2.07 2.1.78.76 1.5 1.48 2.15 2.15.65.66 1.02 1 1.1 1.06.13.13.3.25.54.35.24.08.48.1.74.08.3-.03.53-.08.7-.16.19-.08.35-.18.48-.3l1.56-1.85a1050.07 1050.07 0 007.85-9.45c.1-.13.14-.26.12-.39a.63.63 0 00-.16-.35z" fill="#fff"/></svg>';
+$icon-checkmark: '<svg width="12" height="10" viewBox="0 0 12 10" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M11.1 0.200028C11.5418 0.531399 11.6314 1.1582 11.3 1.60003L5.3 9.60003C5.12607 9.83194 4.86005 9.97696 4.57089 9.99751C4.28173 10.0181 3.99788 9.91212 3.79289 9.70714L1.29289 7.20713C0.902369 6.81661 0.902369 6.18345 1.29289 5.79292C1.68342 5.4024 2.31658 5.4024 2.70711 5.79292L4.39181 7.47762L9.7 0.400028C10.0314 -0.0417994 10.6582 -0.131343 11.1 0.200028Z" fill="#002C5A"/></svg>';
+$icon-checkmark-circle: '<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8Z" fill="#002C5A"/><path fill-rule="evenodd" clip-rule="evenodd" d="M11.5547 4.16795C12.0142 4.4743 12.1384 5.09517 11.8321 5.5547L7.83205 11.5547C7.66587 11.804 7.39667 11.9656 7.09854 11.9951C6.8004 12.0247 6.50474 11.919 6.29289 11.7071L4.29289 9.70711C3.90237 9.31658 3.90237 8.68342 4.29289 8.29289C4.68342 7.90237 5.31658 7.90237 5.70711 8.29289L6.84457 9.43036L10.1679 4.4453C10.4743 3.98577 11.0952 3.8616 11.5547 4.16795Z" fill="white"/></svg>';
+$icon-checkmark-circle-lg: '<svg width="41" height="41" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="20.78" cy="20.42" r="20" fill="#0066B3"/><path d="M29.5 15.45c-.11-.08-.39-.31-.83-.7-.42-.4-.69-.64-.82-.75a.42.42 0 00-.39-.11.53.53 0 00-.4.15l-1.32 1.49A815.49 815.49 0 0020 21.86l-1.29 1.4-.78-.62a97.04 97.04 0 01-3.6-2.9L13.4 19a.52.52 0 00-.43-.11.37.37 0 00-.31.15l-.75.82-.54.63c-.1.1-.16.23-.16.39.03.16.1.27.2.35l.93.98c.63.62 1.32 1.33 2.07 2.1.78.76 1.5 1.48 2.15 2.15.65.66 1.02 1 1.1 1.06.13.13.3.25.54.35.24.08.48.1.74.08.3-.03.53-.08.7-.16.19-.08.35-.18.48-.3l1.56-1.85a1050.07 1050.07 0 007.85-9.45c.1-.13.14-.26.12-.39a.63.63 0 00-.16-.35z" fill="#fff"/></svg>';
 $icon-arrow-down: '<svg width="10" height="5" viewBox="0 0 10 5" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2.08124 0.186267C1.63183 -0.134742 1.00728 -0.0306508 0.686267 0.418762C0.365258 0.868174 0.469349 1.49272 0.918762 1.81373L2.08124 0.186267ZM9.08124 1.81373C9.53065 1.49272 9.63474 0.868174 9.31373 0.418762C8.99272 -0.0306508 8.36817 -0.134742 7.91876 0.186267L9.08124 1.81373ZM4.85469 3.39621L4.27345 4.20994L4.85469 3.39621ZM0.918762 1.81373L4.27345 4.20994L5.43593 2.58247L2.08124 0.186267L0.918762 1.81373ZM5.72655 4.20994L9.08124 1.81373L7.91876 0.186267L4.56407 2.58247L5.72655 4.20994ZM4.27345 4.20994C4.70808 4.52039 5.29193 4.52038 5.72655 4.20994L4.56407 2.58247C4.82484 2.39621 5.17515 2.39621 5.43593 2.58247L4.27345 4.20994Z" fill="black"/></svg>';
 
 // - Circle Images
@@ -200,11 +202,18 @@ $circle-secondary: '<svg width="330" height="331" viewBox="0 0 330 331" fill="no
 
   // Typo
   h1, h2, h3,
+  .h1, .h2, .h3, .h4,
   .heading {
     margin-top: 0;
     margin-bottom: 20px;
     font-size: $font-size-heading;
   }
+  .h4 {
+    font-size: $font-size-heading;
+  }
+  .h1, .h2, .h3, .h4 {
+    font-weight: bold;
+  }
   small {
     font-size: $font-size-xs;
     line-height: $line-height-lg;

diff --git a/src/utils/split-test.ts b/src/utils/split-test.ts
@@ -0,0 +1,24 @@
+import { getPersistentOptions } from './utils';
+
+function determineVariant() {
+  const p = Math.random();
+  if (p < 0.33) {
+    return 'default';
+  }
+  if (p > 0.33 && p < 0.66) {
+    return 'usp';
+  }
+  return 'combined';
+}
+
+export function getVariant() {
+    let opts = getPersistentOptions({})
+
+    if (!opts.variant) {
+        opts = getPersistentOptions({
+          variant: determineVariant(),
+        })
+    }
+
+    return opts.variant
+}
diff --git a/src/utils/utils.ts b/src/utils/utils.ts
@@ -144,7 +144,7 @@ export function fetchAgreement (webshopId: string) {
   })
 }
 
-function getPersistentOptions (data) {
+export function getPersistentOptions (data) {
   let options;
   try {
     options = JSON.parse(window.localStorage.getItem('easycredit-components'))
@@ -157,6 +157,9 @@ function getPersistentOptions (data) {
   if (data.webshopId) {
     options.webshopId = data.webshopId
   }
+  if (data.variant) {
+    options.variant = data.variant;
+  }
   if (!options.id) {
     options.id = Math.random().toString(16).slice(2)
   }