@tribe-nest/forge 3.64.0 → 3.67.0

package/src/ui/styled/CoachingConfirmation.tsx

@@ -158,14 +158,25 @@ export function CoachingConfirmation({
         <div className="cf-rise" style={{ padding: "28px 32px 12px", animationDelay: "0.38s" }}>
           {data && (
             <dl style={{ display: "grid", gridTemplateColumns: "1fr auto", rowGap: 14, columnGap: 16, margin: 0 }}>
-              {data.sessionStartTime && (
+              {data.sessions && data.sessions.length > 1 ? (
+                // A package or several sessions: every time the buyer committed to.
+                data.sessions.map((session, index) => (
+                  <ConfirmationRow
+                    key={session.startTime}
+                    label={t("forge.coaching_confirmation.row_session_n", { index: index + 1, count: data.sessions!.length })}
+                    value={formatSession(session.startTime)}
+                    accent
+                    strong={index === 0}
+                  />
+                ))
+              ) : data.sessionStartTime ? (
                 <ConfirmationRow
                   label={t("forge.coaching_confirmation.row_session")}
                   value={formatSession(data.sessionStartTime)}
                   accent
                   strong
                 />
-              )}
+              ) : null}
               {data.durationMinutes ? (
                 <ConfirmationRow
                   label={t("forge.coaching_confirmation.row_duration")}

package/src/ui/styled/CoachingDetail.tsx

@@ -1,3 +1,5 @@
+import { BookingPriceSummary } from "./BookingPriceSummary";
+import { bookingGrossAmount, bookingSessionRange } from "../format/bookingPricing";
 import { Clock } from "lucide-react";
 import type { CoachingProduct } from "../../types/models";
 import { useGetCoachingProduct } from "../../data/queries/useCoachingProducts";
@@ -43,7 +45,11 @@ export function CoachingDetail({
   const fmt = useAmountFormatter(formatAmount);
   const pricesIncludeTax = usePricesIncludeTax();
   const { data: product, isLoading } = useGetCoachingProduct(slug, { initialData: initialCoaching });
-  useMetaViewContent(product ? { id: product.id, name: product.title, value: product.price } : null);
+  useMetaViewContent(
+    product
+      ? { id: product.id, name: product.title, value: bookingGrossAmount(product, bookingSessionRange(product).min) }
+      : null,
+  );
 
   if (isLoading) return <Loading fullPage />;
   if (!product) return <p>{t("forge.coaching_detail.not_found")}</p>;
@@ -93,7 +99,7 @@ export function CoachingDetail({
           }}
         >
           <span style={{ fontWeight: 600 }}>
-            <PriceDisplay amount={Number(product.price)} pricesIncludeTax={pricesIncludeTax} formatAmount={fmt} mutedColor={tokens.text} captionStyle={{ opacity: 0.65 }} />
+            <BookingPriceSummary product={product} fmt={fmt} pricesIncludeTax={pricesIncludeTax} mutedColor={tokens.text} />
           </span>
           <CoachingBooking slug={slug} formatAmount={fmt} finalisePath={finalisePath} onComplete={onComplete} />
           {/* S.6 — next to the price and the button, so the terms are readable