@akinon/pz-theme 2.0.145-beta.0 → 2.0.145

package/CHANGELOG.md

@@ -1,12 +1,12 @@
 # @akinon/pz-theme
 
-## 2.0.145-beta.0
+## 2.0.145
 
 ### Patch Changes
 
-- Updated dependencies [cbbbfd757]
-  - @akinon/next@2.0.145-beta.0
-  - @akinon/theme-contract@2.0.145-beta.0
+- 44d0c72: ZERO-5180: Let the order, coupon, favourites and checkout summary blocks take the money format controls the price and basket blocks have
+  - @akinon/next@2.0.145
+  - @akinon/theme-contract@2.0.145
 
 ## 2.0.144
 

package/package.json

@@ -1,19 +1,19 @@
 {
   "name": "@akinon/pz-theme",
   "description": "Theme package for Project Zero Next — ThemePlaceholder system and theme editor infrastructure",
-  "version": "2.0.145-beta.0",
+  "version": "2.0.145",
   "license": "MIT",
   "main": "src/index.ts",
   "scripts": {
     "test": "jest"
   },
   "peerDependencies": {
-    "@akinon/next": "2.0.145-beta.0",
+    "@akinon/next": "2.0.145",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "dependencies": {
-    "@akinon/theme-contract": "2.0.145-beta.0",
+    "@akinon/theme-contract": "2.0.145",
     "clsx": "2.1.1",
     "lottie-web": "^5.13.0",
     "react-multi-carousel": "2.8.4",
@@ -21,7 +21,7 @@
     "zod": "4.4.1"
   },
   "devDependencies": {
-    "@akinon/next": "2.0.145-beta.0",
+    "@akinon/next": "2.0.145",
     "@testing-library/jest-dom": "5.16.4",
     "@testing-library/react": "16.3.2",
     "@testing-library/user-event": "14.1.1",

package/src/blocks/__tests__/account-money-format.test.tsx

@@ -0,0 +1,129 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import OrderListBlock from '../order-list-block';
+import FavouritesGridBlock from '../favourites-grid-block';
+
+/**
+ * The account blocks print money through the same four controls the price
+ * and basket blocks carry, so a brand that drops ",00" from whole amounts
+ * ("Only when needed") sees it dropped on the order list and the favourites
+ * too — and a block nobody has set keeps the theme's original format.
+ */
+const tlAuto = {
+  decimals: 'auto',
+  currencyDisplay: 'custom',
+  currencyText: 'TL',
+  currencyPosition: 'after'
+};
+
+jest.mock('next-auth/react', () => ({
+  useSession: () => ({ data: null, status: 'authenticated' })
+}));
+
+jest.mock('@akinon/next/hooks', () => ({
+  __esModule: true,
+  useLocalization: () => ({ locale: 'tr', currency: 'try' })
+}));
+
+jest.mock('@akinon/next/redux/hooks', () => ({
+  __esModule: true,
+  useAppSelector: () => undefined,
+  useAppDispatch: () => jest.fn()
+}));
+
+// Every `@akinon/next/data/client/*` subpath maps to the same mock file, so
+// one factory serves the orders, wishlist, product and basket clients alike.
+jest.mock('@akinon/next/data/client/account', () => ({
+  __esModule: true,
+  useGetOrdersQuery: () => ({
+    data: {
+      count: 2,
+      results: [
+        { id: 1, number: 'G-1', amount: '9999.00' },
+        { id: 2, number: 'G-2', amount: '9999.50' }
+      ]
+    },
+    isLoading: false
+  }),
+  useGetFavoritesQuery: () => ({
+    data: {
+      results: [
+        {
+          pk: 11,
+          product: {
+            pk: 101,
+            name: 'Gömlek',
+            absolute_url: '/gomlek/',
+            price: '3999.90',
+            retail_price: '4999.00',
+            currency_type: 'try'
+          }
+        }
+      ]
+    },
+    isLoading: false
+  }),
+  useRemoveFavoriteMutation: () => [jest.fn(), { isLoading: false }],
+  useAddProductMutation: () => [jest.fn(), { isLoading: false }],
+  basketApi: { util: { invalidateTags: jest.fn() } }
+}));
+
+const blockOf = (type: string, properties: Record<string, unknown>) => ({
+  id: `${type}-1`,
+  type,
+  properties,
+  styles: {},
+  blocks: []
+});
+
+const texts = (root: ParentNode, part: string) =>
+  Array.from(root.querySelectorAll(`[data-part="${part}"]`)).map(
+    (node) => node.textContent
+  );
+
+describe('order-list money format', () => {
+  const renderList = (properties: Record<string, unknown>) =>
+    render(
+      <OrderListBlock
+        block={blockOf('order-list', properties)}
+        placeholderId="p1"
+        sectionId="s1"
+      />
+    ).container;
+
+  it('drops ",00" from a whole total and keeps any other fraction', () => {
+    expect(texts(renderList(tlAuto), 'total')).toEqual([
+      '9.999 TL',
+      '9.999,50 TL'
+    ]);
+  });
+
+  it('keeps the original format on a block nobody has set', () => {
+    expect(texts(renderList({}), 'total')).toEqual(['₺9.999,00', '₺9.999,50']);
+  });
+});
+
+describe('favourites-grid money format', () => {
+  const renderGrid = (properties: Record<string, unknown>) =>
+    render(
+      <FavouritesGridBlock
+        block={blockOf('favourites-grid', properties)}
+        placeholderId="p1"
+        sectionId="s1"
+      />
+    ).container;
+
+  it('formats the price and the struck retail price with the block format', () => {
+    const container = renderGrid(tlAuto);
+
+    expect(texts(container, 'retail-price')).toEqual(['4.999 TL']);
+    expect(container.textContent).toContain('3.999,90 TL');
+  });
+
+  it('keeps the original format on a block nobody has set', () => {
+    const container = renderGrid({});
+
+    expect(texts(container, 'retail-price')).toEqual(['₺4.999,00']);
+    expect(container.textContent).toContain('₺3.999,90');
+  });
+});

package/src/blocks/__tests__/money-style.test.ts

@@ -0,0 +1,53 @@
+import { readMoneyStyle } from '../money-style';
+
+describe('readMoneyStyle', () => {
+  it('resolves unset properties to the format the theme always printed', () => {
+    expect(readMoneyStyle(undefined, 'desktop')).toEqual({
+      decimals: 'always',
+      currencyDisplay: '',
+      currencyText: '',
+      currencyPosition: ''
+    });
+  });
+
+  it('reads the four money controls as the editor writes them', () => {
+    expect(
+      readMoneyStyle(
+        {
+          decimals: 'auto',
+          currencyDisplay: 'custom',
+          currencyText: 'TL',
+          currencyPosition: 'after'
+        },
+        'desktop'
+      )
+    ).toEqual({
+      decimals: 'auto',
+      currencyDisplay: 'custom',
+      currencyText: 'TL',
+      currencyPosition: 'after'
+    });
+  });
+
+  it('reads a per-breakpoint value for the breakpoint being drawn', () => {
+    const properties = { decimals: { desktop: 'always', mobile: 'never' } };
+
+    expect(readMoneyStyle(properties, 'desktop').decimals).toBe('always');
+    expect(readMoneyStyle(properties, 'mobile').decimals).toBe('never');
+  });
+
+  it('falls back on a value no control offers', () => {
+    const style = readMoneyStyle(
+      {
+        decimals: 'sometimes',
+        currencyDisplay: 'emoji',
+        currencyPosition: 'x'
+      },
+      'desktop'
+    );
+
+    expect(style.decimals).toBe('always');
+    expect(style.currencyDisplay).toBe('');
+    expect(style.currencyPosition).toBe('');
+  });
+});

package/src/blocks/checkout-summary-block.tsx

@@ -7,6 +7,7 @@ import { useLocalization } from '@akinon/next/hooks';
 import { getResponsiveValue, partAttrs } from '../utils';
 import { useThemePageContext } from '../theme-page-context';
 import { formatMoney, parseAmount } from './commerce-format';
+import { readMoneyStyle } from './money-style';
 import { hasItemTemplate, ItemTemplateList } from './item-template';
 import { getLineImage, readToggle } from './product-block-utils';
 import { BlockRendererProps } from './block-renderer-registry';
@@ -97,6 +98,7 @@ const CheckoutSummaryBlock = ({
   currentBreakpoint = 'desktop',
   isDesigner = false
 }: BlockRendererProps) => {
+  const moneyStyle = readMoneyStyle(block.properties, currentBreakpoint);
   const prop = (key: string, fallback: string) =>
     String(
       getResponsiveValue(block.properties?.[key], currentBreakpoint, fallback)
@@ -208,7 +210,7 @@ const CheckoutSummaryBlock = ({
     '';
 
   const money = (value?: string | number) =>
-    formatMoney(value, { locale, currency });
+    formatMoney(value, { locale, currency, ...moneyStyle });
 
   const hasBasket = Boolean(liveBasket || contextBasket);
 
@@ -257,7 +259,11 @@ const CheckoutSummaryBlock = ({
     name: line.name,
     image: line.image,
     quantity: line.quantity,
-    total: formatMoney(line.total, { locale, currency: line.currency }),
+    total: formatMoney(line.total, {
+      locale,
+      currency: line.currency,
+      ...moneyStyle
+    }),
     currency: line.currency
   }));
 
@@ -396,7 +402,11 @@ const CheckoutSummaryBlock = ({
                   {...partAttrs('line-total')}
                   style={{ flex: '0 0 auto' }}
                 >
-                  {formatMoney(line.total, { locale, currency: line.currency })}
+                  {formatMoney(line.total, {
+                    locale,
+                    currency: line.currency,
+                    ...moneyStyle
+                  })}
                 </span>
               </li>
             ))}

package/src/blocks/coupon-list-block.tsx

@@ -9,6 +9,7 @@ import {
 import { useLocalization } from '@akinon/next/hooks';
 import { getResponsiveValue, partAttrs } from '../utils';
 import { formatDate, formatMoney } from './commerce-format';
+import { readMoneyStyle } from './money-style';
 import { hasItemTemplate, ItemTemplateList } from './item-template';
 import { BlockRendererProps } from './block-renderer-registry';
 import { DesignerPlaceholder, readToggle } from './product-block-utils';
@@ -46,7 +47,8 @@ const readCoupons = (payload: unknown): CouponLike[] => {
  * expired ones are listed too, which fields the card carries, the card columns
  * and the styling.
  * Properties: showExpired, showLabel, showCode, showValue, showValidity, limit,
- * columns, percentagePrefix, validitySeparator, emptyLabel.
+ * columns, percentagePrefix, validitySeparator, emptyLabel, decimals,
+ * currencyDisplay, currencyText, currencyPosition.
  * Parts: list, item (disabled on an expired coupon), label, code, value,
  * validity, empty.
  */
@@ -58,6 +60,7 @@ const CouponListBlock = ({
   currentBreakpoint = 'desktop',
   isDesigner = false
 }: BlockRendererProps) => {
+  const moneyStyle = readMoneyStyle(block.properties, currentBreakpoint);
   const showExpired = readToggle(
     block.properties?.showExpired,
     currentBreakpoint,
@@ -130,7 +133,11 @@ const CouponListBlock = ({
       coupon.start_datetime || coupon.created_date,
       locale
     );
-    const amount = formatMoney(coupon.amount, { locale, currency });
+    const amount = formatMoney(coupon.amount, {
+      locale,
+      currency,
+      ...moneyStyle
+    });
     const percentage =
       coupon.percentage !== undefined &&
       coupon.percentage !== null &&

package/src/blocks/coupon-wallet-block.tsx

@@ -10,6 +10,7 @@ import { useLocalization } from '@akinon/next/hooks';
 import { getResponsiveValue, partAttrs } from '../utils';
 import { useLocalizeHref } from '../hooks/use-localize-href';
 import { formatDate, formatMoney } from './commerce-format';
+import { readMoneyStyle } from './money-style';
 import { BlockRendererProps } from './block-renderer-registry';
 import { DesignerPlaceholder, readToggle } from './product-block-utils';
 
@@ -61,7 +62,8 @@ const readCoupons = (payload: unknown): CouponLike[] => {
  * from the editor, not a per-block property.
  * Properties: activeTitle, showActive, activeEmptyLabel, usedTitle, showUsed,
  * usedEmptyLabel, limit, showDate, showCode, showAmount, percentagePrefix,
- * termsLinkLabel, termsHref, termsLinkTarget.
+ * termsLinkLabel, termsHref, termsLinkTarget, decimals, currencyDisplay,
+ * currencyText, currencyPosition.
  * Parts: wrapper, column (active/used via data-coupon-wallet-column),
  * column-title, list, item (state: disabled, for a used/redeemed row), date,
  * title, code, amount, terms-link, empty.
@@ -71,6 +73,7 @@ const CouponWalletBlock = ({
   currentBreakpoint = 'desktop',
   isDesigner = false
 }: BlockRendererProps) => {
+  const moneyStyle = readMoneyStyle(block.properties, currentBreakpoint);
   const showActive = readToggle(
     block.properties?.showActive,
     currentBreakpoint,
@@ -138,7 +141,11 @@ const CouponWalletBlock = ({
 
   /** The one value a row actually prices at, driven by `benefit_type`. */
   const describeValue = (coupon: CouponLike): string => {
-    const amount = formatMoney(coupon.amount, { locale, currency });
+    const amount = formatMoney(coupon.amount, {
+      locale,
+      currency,
+      ...moneyStyle
+    });
     const percentage =
       coupon.percentage !== undefined &&
       coupon.percentage !== null &&

package/src/blocks/favourites-grid-block.tsx

@@ -12,6 +12,7 @@ import { basketApi } from '@akinon/next/data/client/basket';
 import { useAppDispatch } from '@akinon/next/redux/hooks';
 import { useLocalization } from '@akinon/next/hooks';
 import { getResponsiveValue, partAttrs } from '../utils';
+import { readMoneyStyle } from './money-style';
 import {
   MOBILE_MEDIA_QUERY_COMPACT,
   TABLET_MEDIA_QUERY_COMPACT
@@ -87,7 +88,8 @@ const isInStock = (product: FavouriteProductLike): boolean => {
  * every caption and the styling.
  * Properties: columnsDesktop, columnsMobile, limit, showRemove, removeIcon,
  * showAddToCart, showPrice, showRetailPrice, imageRatio, nameLines, addLabel,
- * outOfStockLabel, removeLabel, emptyLabel.
+ * outOfStockLabel, removeLabel, emptyLabel, decimals, currencyDisplay,
+ * currencyText, currencyPosition.
  * Parts: list, item, link, image, name, price, retail-price, add, remove,
  * empty.
  */
@@ -99,6 +101,7 @@ const FavouritesGridBlock = ({
   currentBreakpoint = 'desktop',
   isDesigner = false
 }: BlockRendererProps) => {
+  const moneyStyle = readMoneyStyle(block.properties, currentBreakpoint);
   const columnsDesktop = clampColumns(
     getResponsiveValue(block.properties?.columnsDesktop, currentBreakpoint, 4),
     4,
@@ -249,7 +252,8 @@ const FavouritesGridBlock = ({
       locale,
       // The normalizer prefers the product's own currency_type; the active
       // currency is only the fallback for payloads that omit it.
-      currency: localeCurrency
+      currency: localeCurrency,
+      money: moneyStyle
     });
     const href = normalized?.url && normalized.url !== '#'
       ? normalized.url

package/src/blocks/money-style.ts

@@ -0,0 +1,56 @@
+import { getResponsiveValue } from '../utils';
+import type {
+  MoneyCurrencyDisplay,
+  MoneyCurrencyPosition,
+  MoneyDecimals,
+  MoneyStyleOptions
+} from './commerce-format';
+
+const DECIMALS: MoneyDecimals[] = ['always', 'auto', 'never'];
+const CURRENCY_DISPLAYS: MoneyCurrencyDisplay[] = [
+  '',
+  'symbol',
+  'code',
+  'custom',
+  'none'
+];
+const CURRENCY_POSITIONS: MoneyCurrencyPosition[] = ['', 'before', 'after'];
+
+const readOption = <T extends string>(
+  value: unknown,
+  breakpoint: string,
+  allowed: T[],
+  fallback: T
+): T => {
+  const raw = String(getResponsiveValue(value, breakpoint, fallback));
+  return (allowed as string[]).includes(raw) ? (raw as T) : fallback;
+};
+
+/**
+ * The money format a block's editor properties author — `decimals`,
+ * `currencyDisplay`, `currencyText` and `currencyPosition`, the four the
+ * editor's money controls write. Unset properties resolve to the format the
+ * theme always printed ("₺1.599,00"), so a published composition does not
+ * move until somebody picks a format for it.
+ */
+export const readMoneyStyle = (
+  properties: Record<string, unknown> | undefined,
+  breakpoint: string
+): MoneyStyleOptions => ({
+  decimals: readOption(properties?.decimals, breakpoint, DECIMALS, 'always'),
+  currencyDisplay: readOption(
+    properties?.currencyDisplay,
+    breakpoint,
+    CURRENCY_DISPLAYS,
+    ''
+  ),
+  currencyText: String(
+    getResponsiveValue(properties?.currencyText, breakpoint, '')
+  ),
+  currencyPosition: readOption(
+    properties?.currencyPosition,
+    breakpoint,
+    CURRENCY_POSITIONS,
+    ''
+  )
+});

package/src/blocks/order-detail-block.tsx

@@ -7,6 +7,7 @@ import { useGetOrderQuery } from '@akinon/next/data/client/account';
 import { useLocalization } from '@akinon/next/hooks';
 import { getResponsiveValue, partAttrs } from '../utils';
 import { formatDate, formatMoney } from './commerce-format';
+import { readMoneyStyle } from './money-style';
 import { hasItemTemplate, ItemTemplateList } from './item-template';
 import { BlockRendererProps } from './block-renderer-registry';
 import {
@@ -283,7 +284,8 @@ const formatAddress = (address: AddressLike | null | undefined): string[] => {
  * pieceCountLabel, showDiscountItems, showInstallmentInfo,
  * installmentInfoLabel, subtotalLabel, discountLabel, shippingLabel,
  * freeShippingLabel, totalLabel, trackingLabel,
- * showPaymentInfo, paymentInfoLabel.
+ * showPaymentInfo, paymentInfoLabel, decimals, currencyDisplay,
+ * currencyText, currencyPosition.
  * Parts: detail, header, number, date, header-total, status,
  * invoice-link, cancel-link, list, item, image, name, quantity, color, size,
  * item-status, item-tracking, item-return-code, price, shipment,
@@ -298,6 +300,7 @@ const OrderDetailBlock = ({
   currentBreakpoint = 'desktop',
   isDesigner = false
 }: BlockRendererProps) => {
+  const moneyStyle = readMoneyStyle(block.properties, currentBreakpoint);
   const showShipmentStatus = readToggle(
     block.properties?.showShipmentStatus,
     currentBreakpoint,
@@ -480,7 +483,8 @@ const OrderDetailBlock = ({
   // The order carries the currency it was placed in; the storefront currency is
   // only the fallback for payloads that omit it.
   const currency = order.currency?.value || localeCurrency;
-  const money = (value: unknown) => formatMoney(value, { locale, currency });
+  const money = (value: unknown) =>
+    formatMoney(value, { locale, currency, ...moneyStyle });
 
   // Navigating inside the designer iframe would drop the author out of the page
   // they are editing, so every link is inert there.
@@ -512,8 +516,16 @@ const OrderDetailBlock = ({
       url: line.href,
       href: line.href,
       quantity: line.quantity,
-      price: formatMoney(line.price, { locale, currency: lineCurrency }),
-      total: formatMoney(line.total, { locale, currency: lineCurrency }),
+      price: formatMoney(line.price, {
+        locale,
+        currency: lineCurrency,
+        ...moneyStyle
+      }),
+      total: formatMoney(line.total, {
+        locale,
+        currency: lineCurrency,
+        ...moneyStyle
+      }),
       status: line.item.status?.label || '',
       statusValue: line.item.status?.value || ''
     };
@@ -855,7 +867,8 @@ const OrderDetailBlock = ({
                           printed before. */}
                         {formatMoney(line.total, {
                           locale,
-                          currency: lineCurrency
+                          currency: lineCurrency,
+                          ...moneyStyle
                         })}
                       </div>
                     </div>

package/src/blocks/order-list-block.tsx

@@ -7,6 +7,7 @@ import { useGetOrdersQuery } from '@akinon/next/data/client/account';
 import { useLocalization } from '@akinon/next/hooks';
 import { getResponsiveValue, partAttrs } from '../utils';
 import { formatDate, formatMoney } from './commerce-format';
+import { readMoneyStyle } from './money-style';
 import { hasItemTemplate, ItemTemplateList } from './item-template';
 import { readToggle } from './product-block-utils';
 import { BlockRendererProps } from './block-renderer-registry';
@@ -54,7 +55,8 @@ const sortOrders = (orders: OrderLike[], sort: string): OrderLike[] => {
  * Properties: limit, orderHrefBase, sort, showDate, showStatus, showAmount,
  * showItemImages, imageWidth, imageHeight, imageGap, imageAlign, maxImages,
  * numberLabel, dateLabel, totalLabel, detailLinkLabel, showTitle, title,
- * showPagination, perPage, emptyLabel.
+ * showPagination, perPage, emptyLabel, decimals, currencyDisplay,
+ * currencyText, currencyPosition.
  * Parts: title, list, item, images, image-overflow, link, date, total,
  * detail-link, status, pagination, empty.
  */
@@ -66,6 +68,7 @@ const OrderListBlock = ({
   currentBreakpoint = 'desktop',
   isDesigner = false
 }: BlockRendererProps) => {
+  const moneyStyle = readMoneyStyle(block.properties, currentBreakpoint);
   const rawLimit = Number(
     getResponsiveValue(block.properties?.limit, currentBreakpoint, 5)
   );
@@ -222,11 +225,13 @@ const OrderListBlock = ({
     date: formatDate(order.created_date, locale),
     total: formatMoney(order.amount, {
       locale,
-      currency: order.currency?.value || localeCurrency
+      currency: order.currency?.value || localeCurrency,
+      ...moneyStyle
     }),
     price: formatMoney(order.amount, {
       locale,
-      currency: order.currency?.value || localeCurrency
+      currency: order.currency?.value || localeCurrency,
+      ...moneyStyle
     }),
     status: order.status?.label || '',
     statusValue: order.status?.value || '',
@@ -520,7 +525,8 @@ const OrderListBlock = ({
                         totalLabel,
                         formatMoney(order.amount, {
                           locale,
-                          currency: order.currency?.value || localeCurrency
+                          currency: order.currency?.value || localeCurrency,
+                          ...moneyStyle
                         }),
                         'total',
                         'data-order-list-total-inline'
@@ -562,7 +568,8 @@ const OrderListBlock = ({
                           storefront currency is only the fallback. */}
                         {formatMoney(order.amount, {
                           locale,
-                          currency: order.currency?.value || localeCurrency
+                          currency: order.currency?.value || localeCurrency,
+                          ...moneyStyle
                         })}
                       </span>
                     )}

package/src/blocks/order-success-block.tsx

@@ -8,6 +8,7 @@ import { useLocalization } from '@akinon/next/hooks';
 import { getResponsiveValue, partAttrs } from '../utils';
 import { useThemePageContext } from '../theme-page-context';
 import { formatDate, formatMoney, parseAmount } from './commerce-format';
+import { readMoneyStyle } from './money-style';
 import { hasItemTemplate, ItemTemplateList } from './item-template';
 import { groupOrderItems, readToggle } from './product-block-utils';
 import { BlockRendererProps } from './block-renderer-registry';
@@ -177,6 +178,7 @@ const OrderSuccessBlock = ({
   currentBreakpoint = 'desktop',
   isDesigner = false
 }: BlockRendererProps) => {
+  const moneyStyle = readMoneyStyle(block.properties, currentBreakpoint);
   const prop = (key: string, fallback: string) =>
     String(
       getResponsiveValue(block.properties?.[key], currentBreakpoint, fallback)
@@ -276,7 +278,7 @@ const OrderSuccessBlock = ({
   // is only the fallback.
   const currency = order.currency?.value || localeCurrency || '';
   const money = (value?: string | number) =>
-    formatMoney(value, { locale, currency });
+    formatMoney(value, { locale, currency, ...moneyStyle });
 
   const items = Array.isArray(order.orderitem_set) ? order.orderitem_set : [];
 

package/src/blocks/order-tracking-block.tsx

@@ -5,6 +5,7 @@ import { buildClientRequestUrl, getCookie } from '@akinon/next/utils';
 import { useLocalization } from '@akinon/next/hooks';
 import { getResponsiveValue, partAttrs } from '../utils';
 import { formatDate, formatMoney } from './commerce-format';
+import { readMoneyStyle } from './money-style';
 import { hasItemTemplate, ItemTemplateList } from './item-template';
 import { readToggle } from './product-block-utils';
 import { BlockRendererProps } from './block-renderer-registry';
@@ -71,6 +72,7 @@ const OrderTrackingBlock = ({
   currentBreakpoint = 'desktop',
   isDesigner = false
 }: BlockRendererProps) => {
+  const moneyStyle = readMoneyStyle(block.properties, currentBreakpoint);
   const prop = (key: string, fallback: string) =>
     String(
       getResponsiveValue(block.properties?.[key], currentBreakpoint, fallback)
@@ -245,7 +247,7 @@ const OrderTrackingBlock = ({
     resultRows.push({
       key: 'total',
       label: totalLabel,
-      value: formatMoney(order?.amount, { locale, currency }),
+      value: formatMoney(order?.amount, { locale, currency, ...moneyStyle }),
       type: 'total'
     });
   }
@@ -257,7 +259,7 @@ const OrderTrackingBlock = ({
     name: item.product?.name || '',
     image: item.product?.image || '',
     status: item.status?.label || '',
-    price: formatMoney(item.price, { locale, currency })
+    price: formatMoney(item.price, { locale, currency, ...moneyStyle })
   }));
 
   const customRows = hasItemTemplate(block, currentBreakpoint) ? (
@@ -492,7 +494,11 @@ const OrderTrackingBlock = ({
                       {...partAttrs('line-total')}
                       style={{ flex: '0 0 auto' }}
                     >
-                      {formatMoney(item.price, { locale, currency })}
+                      {formatMoney(item.price, {
+                        locale,
+                        currency,
+                        ...moneyStyle
+                      })}
                     </span>
                   </li>
                 ))}