@osimart/create-storefront 1.0.23 → 1.0.25

package/app/components/checkout/ExtraFees.vue

@@ -1,7 +1,7 @@
 <template>
   <div v-if="fees.length" class="flex flex-col gap-3">
     <div
-      class="divide-y divide-gray-200 overflow-hidden rounded-xl border border-gray-300 bg-white"
+      class="ck-card divide-y divide-gray-200 overflow-hidden rounded-xl border border-gray-300 bg-white"
     >
       <template v-for="fee in fees" :key="fee.id">
         <label

package/app/composables/useProductDetail.js

@@ -563,16 +563,39 @@ export function createProductDetail({ product, settings = {}, loading = false }
   const originalPriceRange = computed(() => pricing.value.original);
   /** The sale boxes under the price (tiers of 2+ items), each { id, text, reached, applied }. */
   const discountBadges = computed(() => pricing.value.badges ?? []);
+  /**
+   * What the customization adds to every unit: per-unit fees plus the price of
+   * each add-on picked. The prices shown on the page include it; `pricing`
+   * itself (sales, "Save %", hasPrice) stays on the product's own price.
+   */
+  const extraPerUnit = computed(() =>
+    round2((Number(customization.deltaPerUnit.value) || 0) + (Number(customization.addonsPerUnit.value) || 0))
+  );
+
+  /** A price range with the extra added. A bound with no price stays unpriced (never "$5"). */
+  function withExtra(range) {
+    const extra = extraPerUnit.value;
+    if (!range || !(extra > 0)) return range;
+    const add = (n) => (Number(n) > 0 ? round2(Number(n) + extra) : n);
+    return { min: add(range.min), max: add(range.max) };
+  }
+
   /**
    * The line total for the quantity picked — { quantity, before, after, saving,
    * text: { before, after, saving } } — or null (1 item, or no single price).
+   * Includes the customization extra for every item; the saving is unchanged.
    */
   const lineTotal = computed(() => {
     const t = pricing.value.total;
     if (!t) return null;
+    const extra = round2(extraPerUnit.value * t.quantity);
+    const before = round2(t.before + extra);
+    const after = round2(t.after + extra);
     return {
       ...t,
-      text: { before: formatMoney(t.before), after: formatMoney(t.after), saving: formatMoney(t.saving) },
+      before,
+      after,
+      text: { before: formatMoney(before), after: formatMoney(after), saving: formatMoney(t.saving) },
     };
   });
   /** The same, as one line (older callers). */
@@ -592,7 +615,7 @@ export function createProductDetail({ product, settings = {}, loading = false }
     return Math.round(((was - now) / was) * 100);
   });
 
-  const priceText = computed(() => formatRange(priceRange.value));
+  const priceText = computed(() => formatRange(withExtra(priceRange.value)));
 
   /**
    * Whether the selection has a real price. A product (or variant) with no
@@ -604,9 +627,9 @@ export function createProductDetail({ product, settings = {}, loading = false }
   });
   const comparePriceText = computed(() =>
     pricing.value.was
-      ? formatRange(pricing.value.was)
+      ? formatRange(withExtra(pricing.value.was))
       : isOnSale.value
-        ? formatRange(originalPriceRange.value)
+        ? formatRange(withExtra(originalPriceRange.value))
         : ""
   );
 
@@ -954,6 +977,7 @@ export function createProductDetail({ product, settings = {}, loading = false }
 
     // price
     pricing,
+    extraPerUnit,
     priceRange,
     originalPriceRange,
     discountMessage,
@@ -1015,4 +1039,4 @@ export function provideProductDetail(context) {
  */
 export function useProductDetail() {
   return inject(PRODUCT_DETAIL_KEY, null);
-}
+}