@eox/pages-theme-eox 0.5.4 → 0.5.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eox/pages-theme-eox",
-  "version": "0.5.4",
+  "version": "0.5.5",
   "type": "module",
   "description": "Vitepress Theme with EOX branding",
   "main": "src/index.js",

package/src/components/PricingTable.vue

@@ -58,10 +58,10 @@
       <div
         v-for="(plan, index) in localPlans"
         :key="'head-' + index"
-        class="cell surface-container-low small-top-round bold top-margin"
+        class="cell surface-container-low top-cell bold top-margin"
         :class="`orig-col-${index + 2}`"
       >
-        <h6 class="primary-text bold">{{ plan.name }}</h6>
+        <h6 class="primary-text bold top-margin">{{ plan.name }}</h6>
       </div>
 
       <div class="cell orig-col-1 m l">Price (per month):</div>
@@ -90,7 +90,7 @@
           v-for="(plan, planIndex) in localPlans"
           :key="`${planIndex}-${row}`"
           class="bold surface-container-low"
-          :class="`cell orig-col-${planIndex + 2} ${rowIndex === getRowKeys(localPlans).length - 1 && !config.showSales ? 'small-bottom-round' : ''}`"
+          :class="`cell orig-col-${planIndex + 2} ${rowIndex === getRowKeys(localPlans).length - 1 && !config.showSales ? 'bottom-cell' : ''}`"
         >
           <div
             v-if="typeof plan.details[row] === 'string'"
@@ -108,7 +108,9 @@
                 <input
                   type="checkbox"
                   :id="`${plan.name}-${row}`"
+                  v-model="plan.details[row].alternative.checked"
                   @input="$forceUpdate()"
+                  @change="updatePrices"
                 />
                 <span :for="`${plan.name}-${row}`"
                   ><h6 class="small bold">
@@ -132,7 +134,7 @@
       <div
         v-for="(plan, index) in localPlans"
         :key="'cta-' + index"
-        :class="`surface-container-low small-bottom-round cell orig-col-${index + 2} center-align`"
+        :class="`surface-container-low cell bottom-cell orig-col-${index + 2} center-align`"
       >
         <a v-if="plan.link" :href="plan.link"
           >See all features
@@ -154,7 +156,7 @@
         v-if="showSales"
         v-for="(plan, index) in localPlans"
         :key="'cta-' + index"
-        :class="`surface-container-low small-bottom-round cell orig-col-${index + 2} center-align`"
+        :class="`surface-container-low cell bottom-cell orig-col-${index + 2} center-align`"
       >
         <ClientOnly>
           <a
@@ -183,7 +185,7 @@
         <div
           v-for="(plan, detailPlanIndex) in detail.plans"
           :key="detailPlanIndex"
-          class="surface-container-low primary-text bold small-top-round top-margin"
+          class="surface-container-low primary-text bold top-margin top-cell"
           :class="`cell orig-col-${detailPlanIndex + 2}`"
         >
           <h6 class="primary-text bold s">{{ plan.name }}</h6>
@@ -204,7 +206,7 @@
             v-for="(plan, planIndex) in detail.plans"
             :key="`${planIndex}-${row}`"
             class="bold surface-container-low"
-            :class="`cell orig-col-${planIndex + 2} ${rowIndex === getRowKeys(detail.plans).length - 1 && !config.showSales ? 'small-bottom-round' : ''}`"
+            :class="`cell orig-col-${planIndex + 2} ${rowIndex === getRowKeys(detail.plans).length - 1 && !config.showSales ? 'bottom-cell' : ''}`"
           >
             <div class="s grey-text" v-html="row + ':'"></div>
             <template
@@ -278,11 +280,25 @@ export default {
   methods: {
     calculatePrice(plan) {
       const basePrice = plan.basePrice;
-      const additionalPrice = this.localOptions
+      const additionalOptionPrice = this.localOptions
         .filter((option) => option.checked)
         .reduce((sum, option) => sum + (option.modifier || 0), 0);
 
-      return basePrice + additionalPrice;
+      let additionalPlanModifier = 0;
+      if (plan.details) {
+        Object.values(plan.details).forEach((value) => {
+          if (value && typeof value === "object") {
+            if (
+              "alternative" in value &&
+              "modifier" in value.alternative &&
+              "checked" in value.alternative &&
+              value.alternative.checked
+            )
+              additionalPlanModifier += value.alternative.modifier;
+          }
+        });
+      }
+      return basePrice + additionalOptionPrice + additionalPlanModifier;
     },
     getRowKeys(plansArray) {
       const keys = new Set();
@@ -410,14 +426,14 @@ export default {
   overflow: hidden;
 }
 
-.small-top-round {
-  border-top-left-radius: 16px;
-  border-top-right-radius: 16px;
+.top-cell {
+  border-top-left-radius: 0.5rem;
+  border-top-right-radius: 0.5rem;
 }
 
-.small-bottom-round {
-  border-bottom-left-radius: 16px;
-  border-bottom-right-radius: 16px;
+.bottom-cell {
+  border-bottom-left-radius: 0.5rem;
+  border-bottom-right-radius: 0.5rem;
 }
 
 @media screen and (min-width: 769px) {